Remove form editor chat previews

This commit is contained in:
2026-06-10 12:39:12 +08:00
parent b090ecd5f4
commit b2ccb7df0b
3 changed files with 47 additions and 1042 deletions
@@ -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<AiChatPanelProps>(), {
@@ -205,44 +184,13 @@ const variablesDialogVisible = ref(false);
const variablesForm = ref<Record<string, any>>({});
const pendingMessage = ref('');
// ==================== 设计预览面板状态 ====================
const showDesignPanel = ref(false);
const currentDesign = ref<DesignPreviewData | undefined>(undefined);
const showAppDesignPanel = ref(false);
const currentAppDesign = ref<DesignPreviewData | undefined>(undefined);
const showAppSettingsPanel = ref(false);
const currentAppSettings = ref<DesignPreviewData | undefined>(undefined);
const showDashboardBasicInfoPanel = ref(false);
const currentDashboardBasicInfo = ref<DesignPreviewData | undefined>(undefined);
const showDashboardDesignPanel = ref(false);
const currentDashboardDesign = ref<DesignPreviewData | undefined>(undefined);
const showDashboardPublishPanel = ref(false);
const currentDashboardPublish = ref<DesignPreviewData | undefined>(undefined);
const showSystemSummaryPanel = ref(false);
const currentSystemSummary = ref<DesignPreviewData | undefined>(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<typeof ref<boolean>>,
dataRef: ReturnType<typeof ref<DesignPreviewData | undefined>>,
confirmMessage: string,
) => {
return (data: Record<string, any>) => {
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<typeof ref<boolean>>,
dataRef: ReturnType<typeof ref<DesignPreviewData | undefined>>,
) => {
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<string, any>) => {
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(() => {
/>
<!-- 设计编辑面板 -->
<DesignEditorPanel
v-if="showDesignPanel"
:visible="showDesignPanel"
:design="currentDesign as any"
@update:visible="showDesignPanel = $event"
@confirm="handleDesignConfirm"
@close="handleDesignClose"
/>
<AppDesignPanel
v-if="showAppDesignPanel"
:visible="showAppDesignPanel"
:design="currentAppDesign as any"
@update:visible="showAppDesignPanel = $event"
@confirm="handleAppDesignConfirm"
@close="handleAppDesignClose"
/>
<AppSettingsPanel
v-if="showAppSettingsPanel"
:visible="showAppSettingsPanel"
:settings="currentAppSettings as any"
@update:visible="showAppSettingsPanel = $event"
@confirm="handleAppSettingsConfirm"
@close="handleAppSettingsClose"
/>
<DashboardBasicInfoConfirmPanel
v-if="showDashboardBasicInfoPanel"
:visible="showDashboardBasicInfoPanel"
:basic-info="currentDashboardBasicInfo as any"
@update:visible="showDashboardBasicInfoPanel = $event"
@confirm="handleDashboardBasicInfoConfirm"
@close="handleDashboardBasicInfoClose"
/>
<DashboardDesignConfirmPanel
v-if="showDashboardDesignPanel"
:visible="showDashboardDesignPanel"
:design="currentDashboardDesign as any"
@update:visible="showDashboardDesignPanel = $event"
@confirm="handleDashboardDesignConfirm"
@close="handleDashboardDesignClose"
/>
<DashboardPublishConfirmPanel
v-if="showDashboardPublishPanel"
:visible="showDashboardPublishPanel"
:publish-data="currentDashboardPublish as any"
@update:visible="showDashboardPublishPanel = $event"
@confirm="handleDashboardPublishConfirm"
@close="handleDashboardPublishClose"
/>
<!-- 系统总结面板 -->
<SystemSummaryConfirmPanel
v-if="showSystemSummaryPanel"
:visible="showSystemSummaryPanel"
:data="currentSystemSummary as any"
@update:visible="showSystemSummaryPanel = $event"
@confirm="handleSystemSummaryConfirm"
@close="handleSystemSummaryClose"
/>
</div>
<!-- 侧边栏布局时的设计面板(保持原有行为) -->
<template v-if="layout === 'sidebar'">
<DesignEditorPanel
:visible="showDesignPanel"
:design="currentDesign as any"
@update:visible="showDesignPanel = $event"
@confirm="handleDesignConfirm"
@close="handleDesignClose"
/>
<AppDesignPanel
:visible="showAppDesignPanel"
:design="currentAppDesign as any"
@update:visible="showAppDesignPanel = $event"
@confirm="handleAppDesignConfirm"
@close="handleAppDesignClose"
/>
<AppSettingsPanel
:visible="showAppSettingsPanel"
:settings="currentAppSettings as any"
@update:visible="showAppSettingsPanel = $event"
@confirm="handleAppSettingsConfirm"
@close="handleAppSettingsClose"
/>
<DashboardBasicInfoConfirmPanel
:visible="showDashboardBasicInfoPanel"
:basic-info="currentDashboardBasicInfo as any"
@update:visible="showDashboardBasicInfoPanel = $event"
@confirm="handleDashboardBasicInfoConfirm"
@close="handleDashboardBasicInfoClose"
/>
<DashboardDesignConfirmPanel
:visible="showDashboardDesignPanel"
:design="currentDashboardDesign as any"
@update:visible="showDashboardDesignPanel = $event"
@confirm="handleDashboardDesignConfirm"
@close="handleDashboardDesignClose"
/>
<DashboardPublishConfirmPanel
:visible="showDashboardPublishPanel"
:publish-data="currentDashboardPublish as any"
@update:visible="showDashboardPublishPanel = $event"
@confirm="handleDashboardPublishConfirm"
@close="handleDashboardPublishClose"
/>
<SystemSummaryConfirmPanel
:visible="showSystemSummaryPanel"
:data="currentSystemSummary as any"
@update:visible="showSystemSummaryPanel = $event"
@confirm="handleSystemSummaryConfirm"
@close="handleSystemSummaryClose"
/>
</template>
</div>
</template>
@@ -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<AgentMessage[]>([]);
@@ -83,24 +65,6 @@ const waitingForInput = ref(false);
const waitingConfig = ref<any>(null);
// 设计面板状态
const currentDesign = ref<null | {
data: any;
form_fields?: any[];
nodeId: string;
table_configs?: any[];
title: string;
type: string;
}>(null);
// 应用设计面板状态
const currentAppDesign = ref<null | {
data: any;
nodeId: string;
title: string;
type: string;
}>(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,55 +456,6 @@ 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',
@@ -566,10 +470,8 @@ function handleStreamEvent(
error_message: '',
feedback: '',
created_at: new Date().toISOString(),
interaction: event.config,
};
chatMessages.value.push(newMsg);
}
sending.value = false;
break;
}
@@ -770,84 +672,6 @@ async function handleChatFeedback(
}
// 设计面板确认
function handleDesignConfirm(data: Record<string, any>) {
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<string, any>) {
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(() => {
<!-- 聊天区域 -->
<div
class="h-full overflow-hidden"
:class="showDesignPanel ? 'w-[400px] flex-shrink-0' : 'flex-1'"
class="flex-1"
>
<ChatBox
ref="chatBoxRef"
@@ -892,48 +716,5 @@ onUnmounted(() => {
@update-message="handleUpdateMessage"
/>
</div>
<!-- 设计面板 -->
<div
v-if="showDesignPanel && currentDesign"
class="flex flex-1 flex-col overflow-hidden"
>
<!-- 加载状态 - AI 工作中动画 -->
<AiWorkingAnimation
v-if="currentDesign.type === 'loading'"
:title="currentDesign.title"
:subtitle="$t('ai-platform.agent.chatPanel.analyzingAndGenerating')"
class="ml-3 h-full min-h-[400px] flex-1 rounded-lg"
/>
<!-- 设计编辑器 -->
<DesignEditorPanel
v-else
v-model:visible="showDesignPanel"
:design="{
type: currentDesign.type as any,
title: currentDesign.title,
data: currentDesign.data,
nodeId: currentDesign.nodeId,
form_fields: currentDesign.form_fields,
table_configs: currentDesign.table_configs,
}"
@confirm="handleDesignConfirm"
@close="handleDesignCancel"
/>
</div>
<!-- 应用设计面板 -->
<div
v-if="showAppDesignPanel && currentAppDesign"
class="flex flex-1 flex-col overflow-hidden"
>
<AppDesignPanel
:visible="showAppDesignPanel"
:design="currentAppDesign as any"
@update:visible="showAppDesignPanel = $event"
@confirm="handleAppDesignConfirm"
@close="handleAppDesignCancel"
/>
</div>
</div>
</template>
@@ -1,15 +1,8 @@
<script setup lang="ts">
import type { WorkflowStreamEvent } from '#/api/ai-platform/ai-platform';
import type { ChatMessage, ReasoningStep } from '#/components/ChatBox/index';
import type { AppDesignData } from '#/components/form-editor/AppDesignPanel.vue';
import type { AppSettingsData } from '#/components/form-editor/AppSettingsPanel.vue';
import type { DashboardBasicInfoData } from '#/components/form-editor/DashboardBasicInfoConfirmPanel.vue';
import type { DashboardDesignData } from '#/components/form-editor/DashboardDesignConfirmPanel.vue';
import type { DashboardPublishData } from '#/components/form-editor/DashboardPublishConfirmPanel.vue';
import type { DesignData } from '#/components/form-editor/DesignEditorPanel.vue';
import type { SystemSummaryData } from '#/components/form-editor/SystemSummaryConfirmPanel.vue';
import { computed, defineAsyncComponent, onUnmounted, ref, watch } from 'vue';
import { computed, onUnmounted, ref, watch } from 'vue';
import { Settings2, X } from '@vben/icons';
import { $t } from '@vben/locales';
@@ -28,27 +21,6 @@ import {
runWorkflowStreamApi,
} from '#/api/ai-platform/ai-platform';
import { ChatBox } from '#/components/ChatBox/index';
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'),
);
const props = defineProps<{
nodes: any[];
@@ -81,36 +53,18 @@ const waitingConfig = ref<any>(null);
const currentRunId = ref('');
// 设计预览编辑面板状态
const showDesignPanel = ref(false);
const currentDesign = ref<DesignData | undefined>(undefined);
// 应用设计面板状态
const showAppDesignPanel = ref(false);
const currentAppDesign = ref<AppDesignData | undefined>(undefined);
// 应用设置面板状态
const showAppSettingsPanel = ref(false);
const currentAppSettings = ref<AppSettingsData | undefined>(undefined);
// 仪表盘基础信息面板状态
const showDashboardBasicInfoPanel = ref(false);
const currentDashboardBasicInfo = ref<DashboardBasicInfoData | undefined>(
undefined,
);
// 仪表盘设计面板状态
const showDashboardDesignPanel = ref(false);
const currentDashboardDesign = ref<DashboardDesignData | undefined>(undefined);
// 仪表盘发布面板状态
const showDashboardPublishPanel = ref(false);
const currentDashboardPublish = ref<DashboardPublishData | undefined>(
undefined,
);
// 系统总结面板状态
const showSystemSummaryPanel = ref(false);
const currentSystemSummary = ref<SystemSummaryData | undefined>(undefined);
// 查找 Start 节点并提取变量
const startNode = computed(() => props.nodes.find((n) => n.type === 'start'));
@@ -607,150 +561,16 @@ const handleStreamEvent = (event: WorkflowStreamEvent, msgId: string) => {
const configData = event.waiting_config || (event as any).config;
// 检查是否是设计预览类型
if (configData?.type === 'design_preview') {
// 检查是否是应用设计类型
switch (configData.preview_type) {
case 'app_design': {
// 应用设计:打开专用的应用设计面板
currentAppDesign.value = {
type: 'app_design',
title:
configData.title ||
$t('ai-platform.workflow.editor.chatPanel.appDesignTitle'),
data: configData.data || {},
nodeId: event.node_id || '',
};
showAppDesignPanel.value = true;
break;
}
case 'app_settings': {
// 应用设置:打开专用的应用设置面板
currentAppSettings.value = {
type: 'app_settings',
title:
configData.title ||
$t('ai-platform.workflow.editor.chatPanel.appSettingsTitle'),
data: configData.data || {},
nodeId: event.node_id || '',
layoutOptions: configData.layoutOptions || [],
themeOptions: configData.themeOptions || [],
};
showAppSettingsPanel.value = true;
break;
}
case 'dashboard_basic_info': {
// 仪表盘基础信息:打开专用面板(在聊天框右侧)
currentDashboardBasicInfo.value = {
type: 'dashboard_basic_info',
title:
configData.title ||
$t(
'ai-platform.workflow.editor.chatPanel.dashboardBasicInfoTitle',
),
data: configData.data || {},
nodeId: event.node_id || '',
};
showDashboardBasicInfoPanel.value = true;
break;
}
case 'dashboard_design': {
// 仪表盘设计:打开设计器面板(在聊天框右侧)
currentDashboardDesign.value = {
type: 'dashboard_design',
title:
configData.title ||
$t(
'ai-platform.workflow.editor.chatPanel.dashboardDesignTitle',
),
data: configData.data || {},
nodeId: event.node_id || '',
};
showDashboardDesignPanel.value = true;
break;
}
case 'dashboard_publish': {
// 仪表盘发布:打开发布确认面板(在聊天框右侧)
currentDashboardPublish.value = {
type: 'dashboard_publish',
title:
configData.title ||
$t(
'ai-platform.workflow.editor.chatPanel.dashboardPublishTitle',
),
data: configData.data || {},
nodeId: event.node_id || '',
};
showDashboardPublishPanel.value = true;
break;
}
case 'system_summary': {
// 系统总结:打开总结展示面板
currentSystemSummary.value = {
type: 'system_summary',
title:
configData.title ||
$t('ai-platform.workflow.editor.chatPanel.systemSummaryTitle'),
data: configData.data || {},
nodeId: event.node_id || '',
};
showSystemSummaryPanel.value = true;
break;
}
default: {
// 其他设计预览:打开通用设计编辑面板
currentDesign.value = {
type: configData.preview_type,
title:
configData.title ||
$t('ai-platform.workflow.editor.chatPanel.designPreviewTitle'),
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.workflow.editor.chatPanel.designPreviewHint')}`;
const initialMsg = messages.value.find((m) => m.id === msgId);
if (initialMsg && !initialMsg.content?.trim()) {
updateAssistantMessage(msgId, {
status: 'completed',
content: waitingContent,
});
} else {
const newMsg: ChatMessage = {
id: generateId(),
role: 'assistant',
content: waitingContent,
timestamp: new Date(),
status: 'completed',
};
messages.value.push(newMsg);
}
} else {
// 普通对话流交互
const waitingContent = getWaitingPrompt(configData);
// 检查初始消息是否还是 typing indicator(没有内容)
const initialMsg = messages.value.find((m) => m.id === msgId);
if (initialMsg && !initialMsg.content?.trim()) {
// 更新初始消息为等待输入的内容
updateAssistantMessage(msgId, {
status: 'completed',
content: waitingContent,
interaction: configData as any,
});
} else {
// 已有内容,创建新的助手消息
const newMsg: ChatMessage = {
id: generateId(),
role: 'assistant',
@@ -761,7 +581,6 @@ const handleStreamEvent = (event: WorkflowStreamEvent, msgId: string) => {
};
messages.value.push(newMsg);
}
}
running.value = false;
break;
}
@@ -961,209 +780,6 @@ const handleUpdateMessage = (
};
// 处理设计预览确认
const handleDesignConfirm = (data: Record<string, any>) => {
showDesignPanel.value = false;
currentDesign.value = undefined;
// 添加用户确认消息
const userMsg: ChatMessage = {
id: generateId(),
role: 'user',
content: $t('ai-platform.workflow.editor.chatPanel.confirmDesign'),
timestamp: new Date(),
};
messages.value.push(userMsg);
// 重置等待状态
waitingForInput.value = false;
waitingConfig.value = null;
// 恢复工作流,传递编辑后的数据
resumeWorkflow(JSON.stringify(data));
};
// 处理设计预览关闭
const handleDesignClose = () => {
showDesignPanel.value = false;
currentDesign.value = undefined;
};
// 处理应用设计确认
const handleAppDesignConfirm = (data: Record<string, any>) => {
showAppDesignPanel.value = false;
currentAppDesign.value = undefined;
// 添加用户确认消息
const userMsg: ChatMessage = {
id: generateId(),
role: 'user',
content: $t('ai-platform.workflow.editor.chatPanel.confirmAppDesign'),
timestamp: new Date(),
};
messages.value.push(userMsg);
// 重置等待状态
waitingForInput.value = false;
waitingConfig.value = null;
// 恢复工作流,传递编辑后的数据
resumeWorkflow(JSON.stringify(data));
};
// 处理应用设计面板关闭
const handleAppDesignClose = () => {
showAppDesignPanel.value = false;
currentAppDesign.value = undefined;
};
// 处理应用设置确认
const handleAppSettingsConfirm = (data: Record<string, any>) => {
showAppSettingsPanel.value = false;
currentAppSettings.value = undefined;
// 添加用户确认消息
const userMsg: ChatMessage = {
id: generateId(),
role: 'user',
content: $t('ai-platform.workflow.editor.chatPanel.confirmAppSettings'),
timestamp: new Date(),
};
messages.value.push(userMsg);
// 重置等待状态
waitingForInput.value = false;
waitingConfig.value = null;
// 恢复工作流,传递编辑后的数据
resumeWorkflow(JSON.stringify(data));
};
// 处理应用设置面板关闭
const handleAppSettingsClose = () => {
showAppSettingsPanel.value = false;
currentAppSettings.value = undefined;
};
// 处理仪表盘基础信息确认
const handleDashboardBasicInfoConfirm = (data: Record<string, any>) => {
showDashboardBasicInfoPanel.value = false;
currentDashboardBasicInfo.value = undefined;
// 添加用户确认消息
const userMsg: ChatMessage = {
id: generateId(),
role: 'user',
content: $t(
'ai-platform.workflow.editor.chatPanel.confirmDashboardBasicInfo',
),
timestamp: new Date(),
};
messages.value.push(userMsg);
// 重置等待状态
waitingForInput.value = false;
waitingConfig.value = null;
// 恢复工作流,传递编辑后的数据
resumeWorkflow(JSON.stringify(data));
};
// 处理仪表盘基础信息面板关闭
const handleDashboardBasicInfoClose = () => {
showDashboardBasicInfoPanel.value = false;
currentDashboardBasicInfo.value = undefined;
};
// 处理仪表盘设计确认
const handleDashboardDesignConfirm = (data: Record<string, any>) => {
showDashboardDesignPanel.value = false;
currentDashboardDesign.value = undefined;
// 添加用户确认消息
const userMsg: ChatMessage = {
id: generateId(),
role: 'user',
content: $t('ai-platform.workflow.editor.chatPanel.confirmDashboardDesign'),
timestamp: new Date(),
};
messages.value.push(userMsg);
// 重置等待状态
waitingForInput.value = false;
waitingConfig.value = null;
// 恢复工作流,传递编辑后的数据
resumeWorkflow(JSON.stringify(data));
};
// 处理仪表盘设计面板关闭
const handleDashboardDesignClose = () => {
showDashboardDesignPanel.value = false;
currentDashboardDesign.value = undefined;
};
// 处理仪表盘发布确认
const handleDashboardPublishConfirm = (data: Record<string, any>) => {
console.log('[ChatPanel] 接收到发布确认数据:', data);
showDashboardPublishPanel.value = false;
currentDashboardPublish.value = undefined;
// 添加用户确认消息
const userMsg: ChatMessage = {
id: generateId(),
role: 'user',
content: $t('ai-platform.workflow.editor.chatPanel.publishToMenu', {
name: data.menu_name,
}),
timestamp: new Date(),
};
messages.value.push(userMsg);
// 重置等待状态
waitingForInput.value = false;
waitingConfig.value = null;
// 恢复工作流,传递发布数据
const userInputStr = JSON.stringify(data);
console.log('[ChatPanel] 传递给 resumeWorkflow 的数据:', userInputStr);
resumeWorkflow(userInputStr);
};
// 处理仪表盘发布面板关闭
const handleDashboardPublishClose = () => {
showDashboardPublishPanel.value = false;
currentDashboardPublish.value = undefined;
};
// 处理系统总结确认
const handleSystemSummaryConfirm = (data: Record<string, any>) => {
showSystemSummaryPanel.value = false;
currentSystemSummary.value = undefined;
// 添加用户确认消息
const userMsg: ChatMessage = {
id: generateId(),
role: 'user',
content: $t('ai-platform.workflow.editor.chatPanel.complete'),
timestamp: new Date(),
};
messages.value.push(userMsg);
// 重置等待状态
waitingForInput.value = false;
waitingConfig.value = null;
// 恢复工作流,传递确认数据
resumeWorkflow(JSON.stringify(data));
};
// 处理系统总结面板关闭
const handleSystemSummaryClose = () => {
showSystemSummaryPanel.value = false;
currentSystemSummary.value = undefined;
};
// 组件卸载时取消流
onUnmounted(() => {
cancelStream?.();
});
@@ -1257,68 +873,5 @@ onUnmounted(() => {
</template>
</ElDialog>
</div>
<!-- 设计编辑面板 -->
<DesignEditorPanel
:visible="showDesignPanel"
:design="currentDesign"
@update:visible="showDesignPanel = $event"
@confirm="handleDesignConfirm"
@close="handleDesignClose"
/>
<!-- 应用设计面板 -->
<AppDesignPanel
:visible="showAppDesignPanel"
:design="currentAppDesign"
@update:visible="showAppDesignPanel = $event"
@confirm="handleAppDesignConfirm"
@close="handleAppDesignClose"
/>
<!-- 应用设置面板 -->
<AppSettingsPanel
:visible="showAppSettingsPanel"
:settings="currentAppSettings"
@update:visible="showAppSettingsPanel = $event"
@confirm="handleAppSettingsConfirm"
@close="handleAppSettingsClose"
/>
<!-- 仪表盘基础信息面板 -->
<DashboardBasicInfoConfirmPanel
:visible="showDashboardBasicInfoPanel"
:basic-info="currentDashboardBasicInfo"
@update:visible="showDashboardBasicInfoPanel = $event"
@confirm="handleDashboardBasicInfoConfirm"
@close="handleDashboardBasicInfoClose"
/>
<!-- 仪表盘设计面板 -->
<DashboardDesignConfirmPanel
:visible="showDashboardDesignPanel"
:design="currentDashboardDesign"
@update:visible="showDashboardDesignPanel = $event"
@confirm="handleDashboardDesignConfirm"
@close="handleDashboardDesignClose"
/>
<!-- 仪表盘发布面板 -->
<DashboardPublishConfirmPanel
:visible="showDashboardPublishPanel"
:publish-data="currentDashboardPublish"
@update:visible="showDashboardPublishPanel = $event"
@confirm="handleDashboardPublishConfirm"
@close="handleDashboardPublishClose"
/>
<!-- 系统总结面板 -->
<SystemSummaryConfirmPanel
:visible="showSystemSummaryPanel"
:data="currentSystemSummary"
@update:visible="showSystemSummaryPanel = $event"
@confirm="handleSystemSummaryConfirm"
@close="handleSystemSummaryClose"
/>
</div>
</template>