From 935b001656d1771f690a267fd604ee06fe292fc1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?cls=5F=E5=AE=81=E6=B3=A2=E6=9C=AC=E6=9C=BA?=
 <908705107@qq.com>
Date: Mon, 22 Jun 2026 21:46:19 +0800
Subject: [PATCH] perf: replace heavy design editor in ai chat

---
 .../components/ai-chat-panel/AiChatPanel.vue  |  8 +-
 .../ai-chat-panel/LiteDesignPreviewPanel.vue  | 80 +++++++++++++++++++
 .../agent/components/AgentChatPanel.vue       |  7 +-
 .../workflow/editor/components/ChatPanel.vue  |  6 +-
 4 files changed, 87 insertions(+), 14 deletions(-)
 create mode 100644 web/apps/web-ele/src/components/ai-chat-panel/LiteDesignPreviewPanel.vue

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 f1458d2..6bfd639 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
@@ -34,6 +34,7 @@ import { ChatBox } from '#/components/ChatBox';
 
 import { useChatApi } from './composables/useChatApi';
 import { useEventHandler } from './composables/useEventHandler';
+import LiteDesignPreviewPanel from './LiteDesignPreviewPanel.vue';
 
 const AppDesignPanel = defineAsyncComponent(() =>
   import('#/components/form-editor/AppDesignPanel.vue'),
@@ -50,9 +51,6 @@ const DashboardDesignConfirmPanel = defineAsyncComponent(() =>
 const DashboardPublishConfirmPanel = defineAsyncComponent(() =>
   import('#/components/form-editor/DashboardPublishConfirmPanel.vue'),
 );
-const DesignEditorPanel = defineAsyncComponent(() =>
-  import('#/components/form-editor/DesignEditorPanel.vue'),
-);
 const SystemSummaryConfirmPanel = defineAsyncComponent(() =>
   import('#/components/form-editor/SystemSummaryConfirmPanel.vue'),
 );
@@ -1018,7 +1016,7 @@ onUnmounted(() => {
       />
 
       <!-- 设计编辑面板 -->
-      <DesignEditorPanel
+      <LiteDesignPreviewPanel
         v-if="showDesignPanel"
         :visible="showDesignPanel"
         :design="currentDesign as any"
@@ -1090,7 +1088,7 @@ onUnmounted(() => {
 
     <!-- 侧边栏布局时的设计面板（保持原有行为） -->
     <template v-if="layout === 'sidebar'">
-      <DesignEditorPanel
+      <LiteDesignPreviewPanel
         v-if="showDesignPanel"
         :visible="showDesignPanel"
         :design="currentDesign as any"
diff --git a/web/apps/web-ele/src/components/ai-chat-panel/LiteDesignPreviewPanel.vue b/web/apps/web-ele/src/components/ai-chat-panel/LiteDesignPreviewPanel.vue
new file mode 100644
index 0000000..d32cb06
--- /dev/null
+++ b/web/apps/web-ele/src/components/ai-chat-panel/LiteDesignPreviewPanel.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { Check, X } from '@vben/icons';
+
+import { ElButton, ElScrollbar, ElTag } from 'element-plus';
+
+type DesignPreview = {
+  data?: Record<string, any>;
+  form_fields?: any[];
+  nodeId?: string;
+  table_configs?: any[];
+  title?: string;
+  type?: string;
+};
+
+const props = defineProps<{
+  design?: DesignPreview;
+  visible: boolean;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+  confirm: [data: Record<string, any>];
+  'update:visible': [value: boolean];
+}>();
+
+const panelTitle = computed(() => props.design?.title || '设计预览');
+const previewType = computed(() => props.design?.type || 'design_preview');
+const previewData = computed(() => props.design?.data || {});
+const previewJson = computed(() => JSON.stringify(previewData.value, null, 2));
+const fieldCount = computed(() => props.design?.form_fields?.length || 0);
+const tableCount = computed(() => props.design?.table_configs?.length || 0);
+
+function handleConfirm() {
+  emit('confirm', previewData.value);
+}
+
+function handleClose() {
+  emit('update:visible', false);
+  emit('close');
+}
+</script>
+
+<template>
+  <div
+    v-if="visible"
+    class="border-border bg-card ml-3 flex h-full w-full flex-col rounded-lg"
+  >
+    <div class="border-border flex items-center justify-between border-b p-4">
+      <div class="min-w-0">
+        <div class="truncate text-base font-semibold">{{ panelTitle }}</div>
+        <div class="text-muted-foreground mt-1 flex items-center gap-2 text-xs">
+          <ElTag size="small" type="info">{{ previewType }}</ElTag>
+          <span v-if="fieldCount">字段 {{ fieldCount }}</span>
+          <span v-if="tableCount">数据表 {{ tableCount }}</span>
+        </div>
+      </div>
+      <ElButton :icon="X" text @click="handleClose" />
+    </div>
+
+    <ElScrollbar class="flex-1">
+      <div class="space-y-3 p-4">
+        <div class="text-muted-foreground text-sm">
+          请确认以下生成结果，确认后将继续执行。
+        </div>
+        <pre
+          class="bg-muted/50 border-border max-h-[520px] overflow-auto rounded border p-3 text-xs leading-relaxed"
+        >{{ previewJson }}</pre>
+      </div>
+    </ElScrollbar>
+
+    <div class="border-border flex justify-end gap-2 border-t p-4">
+      <ElButton @click="handleClose">关闭</ElButton>
+      <ElButton :icon="Check" type="primary" @click="handleConfirm">
+        确认并继续
+      </ElButton>
+    </div>
+  </div>
+</template>
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 7984a41..d44d5ca 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
@@ -29,6 +29,7 @@ import {
   getAgentMessagesApi,
   sendAgentMessageStream,
 } from '#/api/ai-platform/ai-platform';
+import LiteDesignPreviewPanel from '#/components/ai-chat-panel/LiteDesignPreviewPanel.vue';
 import { ChatBox } from '#/components/ChatBox/index';
 
 import AiWorkingAnimation from '../../../../components/ai-loading/AiWorkingAnimation.vue';
@@ -36,10 +37,6 @@ import AiWorkingAnimation from '../../../../components/ai-loading/AiWorkingAnima
 const AppDesignPanel = defineAsyncComponent(
   () => import('#/components/form-editor/AppDesignPanel.vue'),
 );
-const DesignEditorPanel = defineAsyncComponent(
-  () => import('#/components/form-editor/DesignEditorPanel.vue'),
-);
-
 const props = defineProps<{
   /** Agent 详情（可选，用于显示名称和欢迎配置） */
   agent?: Agent | null;
@@ -906,7 +903,7 @@ onUnmounted(() => {
         class="ml-3 h-full min-h-[400px] flex-1 rounded-lg"
       />
       <!-- 设计编辑器 -->
-      <DesignEditorPanel
+      <LiteDesignPreviewPanel
         v-else
         v-model:visible="showDesignPanel"
         :design="{
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 9ebc739..1479373 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
@@ -29,6 +29,7 @@ import {
   resumeWorkflowStreamApi,
   runWorkflowStreamApi,
 } from '#/api/ai-platform/ai-platform';
+import LiteDesignPreviewPanel from '#/components/ai-chat-panel/LiteDesignPreviewPanel.vue';
 import { ChatBox } from '#/components/ChatBox/index';
 const AppDesignPanel = defineAsyncComponent(
   () => import('#/components/form-editor/AppDesignPanel.vue'),
@@ -45,9 +46,6 @@ const DashboardDesignConfirmPanel = defineAsyncComponent(
 const DashboardPublishConfirmPanel = defineAsyncComponent(
   () => import('#/components/form-editor/DashboardPublishConfirmPanel.vue'),
 );
-const DesignEditorPanel = defineAsyncComponent(
-  () => import('#/components/form-editor/DesignEditorPanel.vue'),
-);
 const SystemSummaryConfirmPanel = defineAsyncComponent(
   () => import('#/components/form-editor/SystemSummaryConfirmPanel.vue'),
 );
@@ -1261,7 +1259,7 @@ onUnmounted(() => {
     </div>
 
     <!-- 设计编辑面板 -->
-    <DesignEditorPanel
+    <LiteDesignPreviewPanel
       v-if="showDesignPanel"
       :visible="showDesignPanel"
       :design="currentDesign"