slibra-module-web/src/components/Layout/TheChatView.vue

<script setup>
import { ref, unref, computed } from 'vue';
import UserTop from './userTop.vue';

defineProps({
  isFooter: {
    type: Boolean,
    default: true
  },
  isBackBtn: {
    type: Boolean,
    default: false
  },
  leftTitle: {
    type: String,
    default: ''
  },
  isChatSlot: {
    type: Boolean,
    default: true
  },
  catalogData: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['onClickBack'])

const targetScrollDom = ref(null);
const voiceSwitchStatus = ref(false);

const voiceName = computed(() => unref(voiceSwitchStatus) ? 'tool-voice-close' : 'tool-voice-open')

const changeVoiceStatus = () => {
  voiceSwitchStatus.value = !voiceSwitchStatus.value;
}

const handleClickBack = () => {
  emit("onClickBack");
}

defineExpose({ targetScrollDom });
</script>

<template>
  <div class="flex-1 h-full chat-container">
    <div class="catalog-wrapper" v-if="catalogData.length">
      <slot name="catalog"></slot>
    </div>
    <div class="chat-wrapper w-full h-full flex flex-col rounded-[10px]">
      <div class="chat-header flex items-center justify-between py-[24px] px-[18px] ">
        <div class="left_inner" @click="handleClickBack">
          <span v-if="isBackBtn" class="back-btn"></span>
          <span v-if="leftTitle" class="left_title">{{ leftTitle }}</span>
        </div>
        <div class="right_inner flex items-center space-x-[16px]">
          <UserTop></UserTop>
        </div>
      </div>
      <main class="chat-main flex flex-1 flex-col justify-between" v-if="isChatSlot">
        <div class="chat-scroll" ref="targetScrollDom">
          <div class="w-[900px] m-auto ">
            <slot></slot>
          </div>
        </div>
      </main>
      <main class="control-main" v-if="!isChatSlot">
        <slot name="control"></slot>
      </main>
      <footer class="chat-footer relative w-[900px] m-auto pb-[10px]" v-if="isFooter">
        <slot name="footer" />
      </footer>
    </div>
  </div>
</template>

<style scoped lang="scss">
.chat-container {
  position: relative;
  padding: 20px 20px 20px 0;
  overflow: hidden;

  .chat-header {
    .left_inner {
      display: flex;
      align-items: center;

      .back-btn {
        display: inline-block;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: url("@/assets/images/chat/back-btn.png") no-repeat;
        background-size: cover;
        cursor: pointer;

        &:hover {
          background: #dceffe url("@/assets/images/chat/back-btn.png") no-repeat;
          background-size: cover;
        }
      }
      .left_title {
        font-size: 20px;
        font-weight: bold;
        color: #1A2029;
      }
    }
  }

  .chat-wrapper {
    border: 1px solid #fff;
    background: linear-gradient(180deg, rgba(238, 253, 255, 0.5) 0%, rgba(231, 243, 252, 0.5) 100%);

    .control-main {
      // flex: 1;
      height: calc(100vh - 124px);
      padding: 0 24px 24px 24px;
    }

    .chat-main {
      position: relative;
      min-height: calc(100% - 310px);
      color: #1A2029;

      .chat-scroll {
        overflow-x: hidden;
        overflow-y: auto;
        scroll-behavior: smooth;

        &::-webkit-scrollbar-thumb,
        &::-webkit-scrollbar-track {
          background: transparent;
        }

        &::-webkit-scrollbar {
          width: 0px;
          overflow-y: scroll;
        }
      }
    }
  }
}
</style>