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>