Listen to OPERATION_CHANNEL events to open the dialog, enabling task operations from other components.
47 lines
1.4 KiB
Vue
47 lines
1.4 KiB
Vue
<template>
|
||
<layout>
|
||
<div class="flex h-full w-full flex-col md:flex-row">
|
||
<ChatHistory class="flex-none w-50" @new-chat="handleNewChat" @select-chat="handleSelectChat" />
|
||
<div class="flex-1 mr-2 overflow-hidden bg-white rounded-xl">
|
||
<ChatBox v-model:guide="guide" :conversationId="selectedConversationId" />
|
||
</div>
|
||
<TaskList />
|
||
</div>
|
||
|
||
<TaskOperationDialog ref="taskOperationDialogRef" />
|
||
</layout>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import TaskList from '@renderer/components/TaskList/index.vue'
|
||
import TaskOperationDialog from '@renderer/views/home/components/TaskOperationDialog.vue'
|
||
import ChatHistory from './ChatHistory.vue'
|
||
import ChatBox from './ChatBox.vue'
|
||
import { ref } from 'vue'
|
||
import emitter from '@utils/emitter'
|
||
|
||
// 是否显示引导页
|
||
const guide = ref(true)
|
||
// 选择的历史会话ID
|
||
const selectedConversationId = ref('')
|
||
// 任务操作弹窗引用
|
||
const taskOperationDialogRef = ref()
|
||
|
||
/// 处理新对话事件:切换到引导页并清空选中的历史会话ID
|
||
const handleNewChat = () => {
|
||
guide.value = true;
|
||
selectedConversationId.value = '';
|
||
};
|
||
|
||
/// 选择历史会话
|
||
const handleSelectChat = (conversationId: string) => {
|
||
guide.value = false;
|
||
selectedConversationId.value = conversationId;
|
||
};
|
||
|
||
// 监听任务操作弹窗关闭事件
|
||
emitter.on('OPERATION_CHANNEL', (item) => {
|
||
taskOperationDialogRef.value?.open(item);
|
||
});
|
||
</script>
|