lingji-work-fe/src/views/home/index.vue

<script lang="tsx">
import { useRoute } from 'vue-router';
import { ref, computed } from 'vue';
import { getAgentInfo } from '@/api/all/chat';
import { useChatStore } from '@/stores/modules/chat';

import HistoryConversationDrawer from './components/history-conversation-drawer/index.vue';
import ConversationDetail from './components/conversation-detail/index.vue';
import ConversationCreate from './components/created/index.vue';

export default {
  setup(props, { emit, expose }) {
    const route = useRoute();
    const chatStore = useChatStore();
    const historyConversationDrawerRef = ref(null);

    const conversationId = computed(() => {
      return route.params.conversationId;
    });

    const getAgentData = async () => {
      const { code, data } = await getAgentInfo();
      if (code === 200) {
        chatStore.setAgentInfo(data);
      }
    };

    onMounted(() => {
      getAgentData();
    });

    return () => (
      <div class="chat-wrap rounded-12px w-full h-full">
        {conversationId.value ? <ConversationDetail /> : <ConversationCreate />}

        {/**历史对话入口 */}
        <div
          class="history-conversation-btn cursor-pointer bg-#fff flex flex-col justify-center w-28px px-10px py-8px"
          onClick={() => historyConversationDrawerRef.value.showDrawer()}
        >
          <span class="s1">历史对话</span>
        </div>
        <HistoryConversationDrawer ref={historyConversationDrawerRef} />
      </div>
    );
  },
};
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>