diff --git a/web/apps/web-ele/src/components/ai-chat-panel/AiChatPanel.vue b/web/apps/web-ele/src/components/ai-chat-panel/AiChatPanel.vue index f37e098..d20cd97 100644 --- a/web/apps/web-ele/src/components/ai-chat-panel/AiChatPanel.vue +++ b/web/apps/web-ele/src/components/ai-chat-panel/AiChatPanel.vue @@ -16,7 +16,7 @@ import type { * - agent-debug: 智能体编辑器调试模式 * - agent-chat: 智能体正式对话模式（支持历史、反馈） */ -import { computed, defineAsyncComponent, onUnmounted, ref, watch } from 'vue'; +import { computed, onUnmounted, ref, watch } from 'vue'; import { Close, Setting } from '@element-plus/icons-vue'; @@ -34,27 +34,6 @@ import { ChatBox } from '#/components/ChatBox'; import { useChatApi } from './composables/useChatApi'; import { useEventHandler } from './composables/useEventHandler'; -const DesignEditorPanel = defineAsyncComponent( - () => import('#/components/form-editor/DesignEditorPanel.vue'), -); -const AppDesignPanel = defineAsyncComponent( - () => import('#/components/form-editor/AppDesignPanel.vue'), -); -const AppSettingsPanel = defineAsyncComponent( - () => import('#/components/form-editor/AppSettingsPanel.vue'), -); -const DashboardBasicInfoConfirmPanel = defineAsyncComponent( - () => import('#/components/form-editor/DashboardBasicInfoConfirmPanel.vue'), -); -const DashboardDesignConfirmPanel = defineAsyncComponent( - () => import('#/components/form-editor/DashboardDesignConfirmPanel.vue'), -); -const DashboardPublishConfirmPanel = defineAsyncComponent( - () => import('#/components/form-editor/DashboardPublishConfirmPanel.vue'), -); -const SystemSummaryConfirmPanel = defineAsyncComponent( - () => import('#/components/form-editor/SystemSummaryConfirmPanel.vue'), -); // ==================== Props ==================== const props = withDefaults(defineProps(), { @@ -205,44 +184,13 @@ const variablesDialogVisible = ref(false); const variablesForm = ref>({}); const pendingMessage = ref(''); -// ==================== 设计预览面板状态 ==================== -const showDesignPanel = ref(false); -const currentDesign = ref(undefined); - -const showAppDesignPanel = ref(false); -const currentAppDesign = ref(undefined); - -const showAppSettingsPanel = ref(false); -const currentAppSettings = ref(undefined); - -const showDashboardBasicInfoPanel = ref(false); -const currentDashboardBasicInfo = ref(undefined); - -const showDashboardDesignPanel = ref(false); -const currentDashboardDesign = ref(undefined); - -const showDashboardPublishPanel = ref(false); -const currentDashboardPublish = ref(undefined); - -const showSystemSummaryPanel = ref(false); -const currentSystemSummary = ref(undefined); // AI 工作动画状态（用于 application 类型工作流） const showLoadingAnimation = ref(false); const loadingAnimationTitle = ref('AI 正在开发...'); // 是否有任何设计面板打开 -const hasAnyDesignPanelOpen = computed( - () => - showDesignPanel.value || - showAppDesignPanel.value || - showAppSettingsPanel.value || - showDashboardBasicInfoPanel.value || - showDashboardDesignPanel.value || - showDashboardPublishPanel.value || - showSystemSummaryPanel.value || - showLoadingAnimation.value, -); +const hasAnyDesignPanelOpen = computed(() => showLoadingAnimation.value); // ==================== 工作流变量 ==================== const startNode = computed(() => props.nodes?.find((n) => n.type === 'start')); @@ -286,45 +234,16 @@ const generateId = () => `msg-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`; const handleDesignPreview = (data: DesignPreviewData) => { - // 关闭加载动画 showLoadingAnimation.value = false; - - switch (data.type) { - case 'app_design': { - currentAppDesign.value = data; - showAppDesignPanel.value = true; - break; - } - case 'app_settings': { - currentAppSettings.value = data; - showAppSettingsPanel.value = true; - break; - } - case 'dashboard_basic_info': { - currentDashboardBasicInfo.value = data; - showDashboardBasicInfoPanel.value = true; - break; - } - case 'dashboard_design': { - currentDashboardDesign.value = data; - showDashboardDesignPanel.value = true; - break; - } - case 'dashboard_publish': { - currentDashboardPublish.value = data; - showDashboardPublishPanel.value = true; - break; - } - case 'system_summary': { - currentSystemSummary.value = data; - showSystemSummaryPanel.value = true; - break; - } - default: { - currentDesign.value = data; - showDesignPanel.value = true; - break; - } + const content = [data.title, data.message].filter(Boolean).join('\n\n'); + if (content) { + messages.value.push({ + id: generateId(), + role: 'assistant', + content, + timestamp: new Date(), + status: 'completed', + }); } }; @@ -766,132 +685,6 @@ const handleUpdateMessage = ( }; // ==================== 设计预览处理 ==================== -const createDesignConfirmHandler = ( - showRef: ReturnType>, - dataRef: ReturnType>, - confirmMessage: string, -) => { - return (data: Record) => { - showRef.value = false; - dataRef.value = undefined; - - // 全屏布局且是 application 类型工作流时，显示加载动画 - if ( - props.layout === 'fullscreen' && - props.agent?.workflow_type === 'application' - ) { - showLoadingAnimation.value = true; - loadingAnimationTitle.value = 'AI 正在继续开发...'; - } - - const userMsg: ChatMessage = { - id: generateId(), - role: 'user', - content: confirmMessage, - timestamp: new Date(), - }; - messages.value.push(userMsg); - - waitingForInput.value = false; - waitingConfig.value = null; - - resumeExecution(JSON.stringify(data)); - }; -}; - -const createDesignCloseHandler = ( - showRef: ReturnType>, - dataRef: ReturnType>, -) => { - return () => { - showRef.value = false; - dataRef.value = undefined; - }; -}; - -const handleDesignConfirm = createDesignConfirmHandler( - showDesignPanel, - currentDesign, - '确认设计', -); -const handleDesignClose = createDesignCloseHandler( - showDesignPanel, - currentDesign, -); - -const handleAppDesignConfirm = createDesignConfirmHandler( - showAppDesignPanel, - currentAppDesign, - '确认应用设计', -); -const handleAppDesignClose = createDesignCloseHandler( - showAppDesignPanel, - currentAppDesign, -); - -const handleAppSettingsConfirm = createDesignConfirmHandler( - showAppSettingsPanel, - currentAppSettings, - '确认应用设置', -); -const handleAppSettingsClose = createDesignCloseHandler( - showAppSettingsPanel, - currentAppSettings, -); - -const handleDashboardBasicInfoConfirm = createDesignConfirmHandler( - showDashboardBasicInfoPanel, - currentDashboardBasicInfo, - '确认仪表盘基础信息', -); -const handleDashboardBasicInfoClose = createDesignCloseHandler( - showDashboardBasicInfoPanel, - currentDashboardBasicInfo, -); - -const handleDashboardDesignConfirm = createDesignConfirmHandler( - showDashboardDesignPanel, - currentDashboardDesign, - '确认仪表盘设计', -); -const handleDashboardDesignClose = createDesignCloseHandler( - showDashboardDesignPanel, - currentDashboardDesign, -); - -const handleDashboardPublishConfirm = (data: Record) => { - showDashboardPublishPanel.value = false; - currentDashboardPublish.value = undefined; - - const userMsg: ChatMessage = { - id: generateId(), - role: 'user', - content: `发布到菜单：${data.menu_name || data.name || ''}`, - timestamp: new Date(), - }; - messages.value.push(userMsg); - - waitingForInput.value = false; - waitingConfig.value = null; - - resumeExecution(JSON.stringify(data)); -}; -const handleDashboardPublishClose = createDesignCloseHandler( - showDashboardPublishPanel, - currentDashboardPublish, -); - -const handleSystemSummaryConfirm = createDesignConfirmHandler( - showSystemSummaryPanel, - currentSystemSummary, - '完成', -); -const handleSystemSummaryClose = createDesignCloseHandler( - showSystemSummaryPanel, - currentSystemSummary, -); - -// ==================== 暴露方法 ==================== defineExpose({ clearChat: handleClear, sendMessage: handleSend, @@ -1017,128 +810,6 @@ onUnmounted(() => { /> - - - - - - - - - - - - - - - - - diff --git a/web/apps/web-ele/src/views/ai-platform/agent/components/AgentChatPanel.vue b/web/apps/web-ele/src/views/ai-platform/agent/components/AgentChatPanel.vue index 09923e7..ef8142a 100644 --- a/web/apps/web-ele/src/views/ai-platform/agent/components/AgentChatPanel.vue +++ b/web/apps/web-ele/src/views/ai-platform/agent/components/AgentChatPanel.vue @@ -11,14 +11,7 @@ import type { ChatMessage } from '#/components/ChatBox/index'; * Agent 对话面板组件 * 可复用于 Agent 编辑页面和 Agent 对话页面 */ -import { - computed, - defineAsyncComponent, - nextTick, - onUnmounted, - ref, - watch, -} from 'vue'; +import { computed, nextTick, onUnmounted, ref, watch } from 'vue'; import { $t } from '@vben/locales'; @@ -31,15 +24,6 @@ import { } from '#/api/ai-platform/ai-platform'; import { ChatBox } from '#/components/ChatBox/index'; -import AiWorkingAnimation from '../../../../components/ai-loading/AiWorkingAnimation.vue'; - -const DesignEditorPanel = defineAsyncComponent( - () => import('#/components/form-editor/DesignEditorPanel.vue'), -); -const AppDesignPanel = defineAsyncComponent( - () => import('#/components/form-editor/AppDesignPanel.vue'), -); - const props = defineProps<{ /** Agent 详情（可选，用于显示名称和欢迎配置） */ agent?: Agent | null; @@ -66,8 +50,6 @@ const emit = defineEmits<{ }>(); // 设计面板显示状态 -const showDesignPanel = ref(false); -const showAppDesignPanel = ref(false); // 对话状态 const chatMessages = ref([]); @@ -83,24 +65,6 @@ const waitingForInput = ref(false); const waitingConfig = ref(null); // 设计面板状态 -const currentDesign = ref(null); - -// 应用设计面板状态 -const currentAppDesign = ref(null); - -// 取消流式请求 let cancelStream: (() => void) | null = null; // 生成消息 ID @@ -242,17 +206,6 @@ async function doSendMessage(message: string, addUserMessage: boolean = true) { streamingSteps.value = []; currentStep.value = ''; - // 如果工作流类型是 "application"，立即显示右侧面板（加载状态） - if (props.agent?.workflow_type === 'application') { - showDesignPanel.value = true; - currentDesign.value = { - type: 'loading', - title: $t('ai-platform.agent.chatPanel.aiDeveloping'), - data: null, - nodeId: '', - }; - } - // 添加用户消息 if (addUserMessage) { const userMessage: AgentMessage = { @@ -503,73 +456,22 @@ function handleStreamEvent( const configData = event.config as any; // 检查是否是设计预览类型 - if (configData?.type === 'design_preview') { - const previewType = configData.preview_type; - - // 应用设计方案使用 AppDesignPanel（富文本编辑器） - if (previewType === 'app_design') { - currentAppDesign.value = { - type: previewType, - title: - configData.title || - $t('ai-platform.agent.chatPanel.appDesignTitle'), - data: configData.data || {}, - nodeId: event.node_id || '', - }; - showAppDesignPanel.value = true; - } else { - // 其他设计类型使用 DesignEditorPanel（表单编辑器） - currentDesign.value = { - type: previewType, - title: - configData.title || - $t('ai-platform.agent.chatPanel.designPreview'), - data: configData.data || {}, - nodeId: event.node_id || '', - form_fields: configData.form_fields || [], - table_configs: configData.table_configs || [], - }; - showDesignPanel.value = true; - } - - // 显示提示消息 - const waitingContent = `**${configData.title}**\n\n${configData.message || $t('ai-platform.agent.chatPanel.designPanelHint')}`; - const newMsg: AgentMessage = { - id: generateId(), - role: 'assistant', - content: waitingContent, - status: 'completed', - reasoning_steps: [], - tool_calls: [], - prompt_tokens: 0, - completion_tokens: 0, - total_tokens: 0, - elapsed_time: 0, - error_message: '', - feedback: '', - created_at: new Date().toISOString(), - }; - chatMessages.value.push(newMsg); - } else { - // 普通对话流交互 - const newMsg: AgentMessage = { - id: generateId(), - role: 'assistant', - content: getWaitingPrompt(event.config), - status: 'completed', - reasoning_steps: [], - tool_calls: [], - prompt_tokens: 0, - completion_tokens: 0, - total_tokens: 0, - elapsed_time: 0, - error_message: '', - feedback: '', - created_at: new Date().toISOString(), - interaction: event.config, - }; - chatMessages.value.push(newMsg); - } + const newMsg: AgentMessage = { + id: generateId(), + role: 'assistant', + content: getWaitingPrompt(event.config), + status: 'completed', + reasoning_steps: [], + tool_calls: [], + prompt_tokens: 0, + completion_tokens: 0, + total_tokens: 0, + elapsed_time: 0, + error_message: '', + feedback: '', + created_at: new Date().toISOString(), + }; + chatMessages.value.push(newMsg); sending.value = false; break; } @@ -770,84 +672,6 @@ async function handleChatFeedback( } // 设计面板确认 -function handleDesignConfirm(data: Record) { - showDesignPanel.value = false; - - // 添加用户确认消息 - const userMsg: AgentMessage = { - id: generateId(), - role: 'user', - content: $t('ai-platform.agent.chatPanel.confirmDesign'), - status: 'completed', - reasoning_steps: [], - tool_calls: [], - prompt_tokens: 0, - completion_tokens: 0, - total_tokens: 0, - elapsed_time: 0, - error_message: '', - feedback: '', - created_at: new Date().toISOString(), - }; - chatMessages.value.push(userMsg); - - // 重置等待状态 - waitingForInput.value = false; - waitingConfig.value = null; - currentDesign.value = null; - - // 继续工作流，传递编辑后的数据 - doSendMessage(JSON.stringify(data), false); -} - -// 设计面板取消 -function handleDesignCancel() { - showDesignPanel.value = false; - waitingForInput.value = false; - waitingConfig.value = null; - currentDesign.value = null; -} - -// 应用设计面板确认 -function handleAppDesignConfirm(data: Record) { - showAppDesignPanel.value = false; - - // 添加用户确认消息 - const userMsg: AgentMessage = { - id: generateId(), - role: 'user', - content: $t('ai-platform.agent.chatPanel.confirmAppDesign'), - status: 'completed', - reasoning_steps: [], - tool_calls: [], - prompt_tokens: 0, - completion_tokens: 0, - total_tokens: 0, - elapsed_time: 0, - error_message: '', - feedback: '', - created_at: new Date().toISOString(), - }; - chatMessages.value.push(userMsg); - - // 重置等待状态 - waitingForInput.value = false; - waitingConfig.value = null; - currentAppDesign.value = null; - - // 继续工作流，传递编辑后的数据 - doSendMessage(JSON.stringify(data), false); -} - -// 应用设计面板取消 -function handleAppDesignCancel() { - showAppDesignPanel.value = false; - waitingForInput.value = false; - waitingConfig.value = null; - currentAppDesign.value = null; -} - -// 暴露方法给父组件 defineExpose({ clearChat, scrollToBottom, @@ -863,7 +687,7 @@ onUnmounted(() => {
{ @update-message="handleUpdateMessage" />
- - -
- - - - -
- - -
- -
diff --git a/web/apps/web-ele/src/views/ai-platform/workflow/editor/components/ChatPanel.vue b/web/apps/web-ele/src/views/ai-platform/workflow/editor/components/ChatPanel.vue index 2467403..d2998fb 100644 --- a/web/apps/web-ele/src/views/ai-platform/workflow/editor/components/ChatPanel.vue +++ b/web/apps/web-ele/src/views/ai-platform/workflow/editor/components/ChatPanel.vue @@ -1,15 +1,8 @@