6062120105
feat(home): add task operation dialog and improve UI interactions - Add TaskOperationDialog component to home page and connect via event emitter - Enhance ChatBox "智能问数" button with hover styles and cursor pointer - Improve ChatInputArea button hover states and cursor styling - Fix selector logic in fg_trace.js to handle date column bounds checking - Reorder package.json dependencies for consistency
48 lines
1.3 KiB
Vue
48 lines
1.3 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="taskOperationDialog" />
|
||
</layout>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import TaskList from '@src/components/TaskList/index.vue'
|
||
import TaskOperationDialog from './components/TaskOperationDialog.vue'
|
||
import ChatHistory from './ChatHistory.vue'
|
||
import ChatBox from './ChatBox.vue'
|
||
import { ref } from 'vue'
|
||
import emitter from '@src/utils/emitter'
|
||
|
||
/// 是否显示引导页
|
||
const guide = ref(true)
|
||
/// 选择的历史会话ID
|
||
const selectedConversationId = ref('')
|
||
|
||
/// 任务操作弹窗实例
|
||
const taskOperationDialog = ref()
|
||
|
||
|
||
/// 处理新对话事件：切换到引导页并清空选中的历史会话ID
|
||
const handleNewChat = () => {
|
||
guide.value = true;
|
||
selectedConversationId.value = '';
|
||
};
|
||
|
||
/// 选择历史会话
|
||
const handleSelectChat = (conversationId: string) => {
|
||
guide.value = false;
|
||
selectedConversationId.value = conversationId;
|
||
};
|
||
|
||
emitter.on('OPERATION_CHANNEL', (item) => {
|
||
taskOperationDialog.value?.open(item)
|
||
})
|
||
</script>
|