Replace heavy design panels with preview drawer

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';
 
@@ -31,31 +31,10 @@ import {
 
 import { AiWorkingAnimation } from '#/components/ai-loading';
 import { ChatBox } from '#/components/ChatBox';
+import DesignPreviewPanel from './DesignPreviewPanel.vue';
 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>(), {
   mode: 'workflow',
@@ -1017,66 +996,59 @@ onUnmounted(() => {
       />
 
       <!-- 设计编辑面板 -->
-      <DesignEditorPanel
+      <DesignPreviewPanel
         v-if="showDesignPanel"
-        :visible="showDesignPanel"
-        :design="currentDesign as any"
-        @update:visible="showDesignPanel = $event"
+        v-model:visible="showDesignPanel"
+        :preview="currentDesign as any"
         @confirm="handleDesignConfirm"
         @close="handleDesignClose"
       />
 
-      <AppDesignPanel
+      <DesignPreviewPanel
         v-if="showAppDesignPanel"
-        :visible="showAppDesignPanel"
-        :design="currentAppDesign as any"
-        @update:visible="showAppDesignPanel = $event"
+        v-model:visible="showAppDesignPanel"
+        :preview="currentAppDesign as any"
         @confirm="handleAppDesignConfirm"
         @close="handleAppDesignClose"
       />
 
-      <AppSettingsPanel
+      <DesignPreviewPanel
         v-if="showAppSettingsPanel"
-        :visible="showAppSettingsPanel"
-        :settings="currentAppSettings as any"
-        @update:visible="showAppSettingsPanel = $event"
+        v-model:visible="showAppSettingsPanel"
+        :preview="currentAppSettings as any"
         @confirm="handleAppSettingsConfirm"
         @close="handleAppSettingsClose"
       />
 
-      <DashboardBasicInfoConfirmPanel
+      <DesignPreviewPanel
         v-if="showDashboardBasicInfoPanel"
-        :visible="showDashboardBasicInfoPanel"
-        :basic-info="currentDashboardBasicInfo as any"
-        @update:visible="showDashboardBasicInfoPanel = $event"
+        v-model:visible="showDashboardBasicInfoPanel"
+        :preview="currentDashboardBasicInfo as any"
         @confirm="handleDashboardBasicInfoConfirm"
         @close="handleDashboardBasicInfoClose"
       />
 
-      <DashboardDesignConfirmPanel
+      <DesignPreviewPanel
         v-if="showDashboardDesignPanel"
-        :visible="showDashboardDesignPanel"
-        :design="currentDashboardDesign as any"
-        @update:visible="showDashboardDesignPanel = $event"
+        v-model:visible="showDashboardDesignPanel"
+        :preview="currentDashboardDesign as any"
         @confirm="handleDashboardDesignConfirm"
         @close="handleDashboardDesignClose"
       />
 
-      <DashboardPublishConfirmPanel
+      <DesignPreviewPanel
         v-if="showDashboardPublishPanel"
-        :visible="showDashboardPublishPanel"
-        :publish-data="currentDashboardPublish as any"
-        @update:visible="showDashboardPublishPanel = $event"
+        v-model:visible="showDashboardPublishPanel"
+        :preview="currentDashboardPublish as any"
         @confirm="handleDashboardPublishConfirm"
         @close="handleDashboardPublishClose"
       />
 
       <!-- 系统总结面板 -->
-      <SystemSummaryConfirmPanel
+      <DesignPreviewPanel
         v-if="showSystemSummaryPanel"
-        :visible="showSystemSummaryPanel"
-        :data="currentSystemSummary as any"
-        @update:visible="showSystemSummaryPanel = $event"
+        v-model:visible="showSystemSummaryPanel"
+        :preview="currentSystemSummary as any"
         @confirm="handleSystemSummaryConfirm"
         @close="handleSystemSummaryClose"
       />
@@ -1084,58 +1056,51 @@ onUnmounted(() => {
 
     <!-- 侧边栏布局时的设计面板（保持原有行为） -->
     <template v-if="layout === 'sidebar'">
-      <DesignEditorPanel
-        :visible="showDesignPanel"
-        :design="currentDesign as any"
-        @update:visible="showDesignPanel = $event"
+      <DesignPreviewPanel
+        v-model:visible="showDesignPanel"
+        :preview="currentDesign as any"
         @confirm="handleDesignConfirm"
         @close="handleDesignClose"
       />
 
-      <AppDesignPanel
-        :visible="showAppDesignPanel"
-        :design="currentAppDesign as any"
-        @update:visible="showAppDesignPanel = $event"
+      <DesignPreviewPanel
+        v-model:visible="showAppDesignPanel"
+        :preview="currentAppDesign as any"
         @confirm="handleAppDesignConfirm"
         @close="handleAppDesignClose"
       />
 
-      <AppSettingsPanel
-        :visible="showAppSettingsPanel"
-        :settings="currentAppSettings as any"
-        @update:visible="showAppSettingsPanel = $event"
+      <DesignPreviewPanel
+        v-model:visible="showAppSettingsPanel"
+        :preview="currentAppSettings as any"
         @confirm="handleAppSettingsConfirm"
         @close="handleAppSettingsClose"
       />
 
-      <DashboardBasicInfoConfirmPanel
-        :visible="showDashboardBasicInfoPanel"
-        :basic-info="currentDashboardBasicInfo as any"
-        @update:visible="showDashboardBasicInfoPanel = $event"
+      <DesignPreviewPanel
+        v-model:visible="showDashboardBasicInfoPanel"
+        :preview="currentDashboardBasicInfo as any"
         @confirm="handleDashboardBasicInfoConfirm"
         @close="handleDashboardBasicInfoClose"
       />
 
-      <DashboardDesignConfirmPanel
-        :visible="showDashboardDesignPanel"
-        :design="currentDashboardDesign as any"
-        @update:visible="showDashboardDesignPanel = $event"
+      <DesignPreviewPanel
+        v-model:visible="showDashboardDesignPanel"
+        :preview="currentDashboardDesign as any"
         @confirm="handleDashboardDesignConfirm"
         @close="handleDashboardDesignClose"
       />
 
-      <DashboardPublishConfirmPanel
-        :visible="showDashboardPublishPanel"
-        :publish-data="currentDashboardPublish as any"
-        @update:visible="showDashboardPublishPanel = $event"
+      <DesignPreviewPanel
+        v-model:visible="showDashboardPublishPanel"
+        :preview="currentDashboardPublish as any"
         @confirm="handleDashboardPublishConfirm"
         @close="handleDashboardPublishClose"
       />
 
-      <SystemSummaryConfirmPanel
-        :visible="showSystemSummaryPanel"
-        :data="currentSystemSummary as any"
-        @update:visible="showSystemSummaryPanel = $event"
+      <DesignPreviewPanel
+        v-model:visible="showSystemSummaryPanel"
+        :preview="currentSystemSummary as any"
         @confirm="handleSystemSummaryConfirm"
         @close="handleSystemSummaryClose"
       />