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"
       />

web/apps/web-ele/src/components/ai-chat-panel/DesignPreviewPanel.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { ElButton, ElDrawer, ElScrollbar, ElTag } from 'element-plus';
+
+const props = withDefaults(
+  defineProps<{
+    preview?: any;
+    title?: string;
+    visible: boolean;
+  }>(),
+  {
+    preview: undefined,
+    title: '',
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'confirm', data: Record<string, any>): void;
+  (e: 'update:visible', value: boolean): void;
+}>();
+
+const previewTitle = computed(
+  () => props.title || props.preview?.title || 'AI 生成结果确认',
+);
+
+const previewType = computed(
+  () => props.preview?.type || props.preview?.preview_type || 'preview',
+);
+
+const previewData = computed(() => props.preview?.data || props.preview || {});
+
+const formattedData = computed(() => {
+  if (typeof previewData.value === 'string') return previewData.value;
+  return JSON.stringify(previewData.value, null, 2);
+});
+
+const handleClose = () => {
+  emit('update:visible', false);
+  emit('close');
+};
+
+const handleConfirm = () => {
+  emit('confirm', previewData.value as Record<string, any>);
+};
+</script>
+
+<template>
+  <ElDrawer
+    :model-value="visible"
+    :title="previewTitle"
+    size="52%"
+    append-to-body
+    destroy-on-close
+    @update:model-value="$emit('update:visible', $event)"
+    @close="handleClose"
+  >
+    <div class="flex h-full flex-col gap-3">
+      <div class="flex items-center gap-2">
+        <ElTag type="primary" effect="plain">{{ previewType }}</ElTag>
+        <span class="text-muted-foreground text-sm">
+          请确认 AI 生成内容，确认后工作流会继续执行
+        </span>
+      </div>
+
+      <ElScrollbar class="border-border bg-muted/30 flex-1 rounded border">
+        <pre class="text-foreground m-0 whitespace-pre-wrap break-words p-4 text-sm leading-6">{{ formattedData }}</pre>
+      </ElScrollbar>
+
+      <div class="flex justify-end gap-2">
+        <ElButton @click="handleClose">取消</ElButton>
+        <ElButton type="primary" @click="handleConfirm">确认继续</ElButton>
+      </div>
+    </div>
+  </ElDrawer>
+</template>

web/apps/web-ele/src/views/ai-platform/agent/components/AgentChatPanel.vue

@@ -13,7 +13,6 @@ import type { ChatMessage } from '#/components/ChatBox/index';
  */
 import {
   computed,
-  defineAsyncComponent,
   nextTick,
   onUnmounted,
   ref,
@@ -29,17 +28,11 @@ import {
   getAgentMessagesApi,
   sendAgentMessageStream,
 } from '#/api/ai-platform/ai-platform';
+import DesignPreviewPanel from '#/components/ai-chat-panel/DesignPreviewPanel.vue';
 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;
@@ -67,7 +60,6 @@ const emit = defineEmits<{
 
 // 设计面板显示状态
 const showDesignPanel = ref(false);
-const showAppDesignPanel = ref(false);
 
 // 对话状态
 const chatMessages = ref<AgentMessage[]>([]);
@@ -93,12 +85,6 @@ const currentDesign = ref<null | {
 }>(null);
 
 // 应用设计面板状态
-const currentAppDesign = ref<null | {
-  data: any;
-  nodeId: string;
-  title: string;
-  type: string;
-}>(null);
 
 // 取消流式请求
 let cancelStream: (() => void) | null = null;
@@ -506,33 +492,17 @@ function handleStreamEvent(
       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'),
+            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(),
@@ -809,45 +779,7 @@ function handleDesignCancel() {
 }
 
 // 应用设计面板确认
-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,
@@ -906,34 +838,13 @@ onUnmounted(() => {
         class="ml-3 h-full min-h-[400px] flex-1 rounded-lg"
       />
       <!-- 设计编辑器 -->
-      <DesignEditorPanel
+      <DesignPreviewPanel
         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,
-        }"
+        :preview="currentDesign"
         @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>

web/apps/web-ele/src/views/ai-platform/workflow/editor/components/ChatPanel.vue

@@ -1,15 +1,9 @@
 <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 type { DesignPreviewData } from '#/components/ai-chat-panel/types';
 
-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';
@@ -27,28 +21,8 @@ import {
   resumeWorkflowStreamApi,
   runWorkflowStreamApi,
 } from '#/api/ai-platform/ai-platform';
+import DesignPreviewPanel from '#/components/ai-chat-panel/DesignPreviewPanel.vue';
 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[];
@@ -82,35 +56,35 @@ const currentRunId = ref('');
 
 // 设计预览编辑面板状态
 const showDesignPanel = ref(false);
-const currentDesign = ref<DesignData | undefined>(undefined);
+const currentDesign = ref<DesignPreviewData | undefined>(undefined);
 
 // 应用设计面板状态
 const showAppDesignPanel = ref(false);
-const currentAppDesign = ref<AppDesignData | undefined>(undefined);
+const currentAppDesign = ref<DesignPreviewData | undefined>(undefined);
 
 // 应用设置面板状态
 const showAppSettingsPanel = ref(false);
-const currentAppSettings = ref<AppSettingsData | undefined>(undefined);
+const currentAppSettings = ref<DesignPreviewData | undefined>(undefined);
 
 // 仪表盘基础信息面板状态
 const showDashboardBasicInfoPanel = ref(false);
-const currentDashboardBasicInfo = ref<DashboardBasicInfoData | undefined>(
+const currentDashboardBasicInfo = ref<DesignPreviewData | undefined>(
   undefined,
 );
 
 // 仪表盘设计面板状态
 const showDashboardDesignPanel = ref(false);
-const currentDashboardDesign = ref<DashboardDesignData | undefined>(undefined);
+const currentDashboardDesign = ref<DesignPreviewData | undefined>(undefined);
 
 // 仪表盘发布面板状态
 const showDashboardPublishPanel = ref(false);
-const currentDashboardPublish = ref<DashboardPublishData | undefined>(
+const currentDashboardPublish = ref<DesignPreviewData | undefined>(
   undefined,
 );
 
 // 系统总结面板状态
 const showSystemSummaryPanel = ref(false);
-const currentSystemSummary = ref<SystemSummaryData | undefined>(undefined);
+const currentSystemSummary = ref<DesignPreviewData | undefined>(undefined);
 
 // 查找 Start 节点并提取变量
 const startNode = computed(() => props.nodes.find((n) => n.type === 'start'));
@@ -1259,64 +1233,57 @@ onUnmounted(() => {
     </div>
 
     <!-- 设计编辑面板 -->
-    <DesignEditorPanel
-      :visible="showDesignPanel"
-      :design="currentDesign"
-      @update:visible="showDesignPanel = $event"
+    <DesignPreviewPanel
+      v-model:visible="showDesignPanel"
+      :preview="currentDesign as any"
       @confirm="handleDesignConfirm"
       @close="handleDesignClose"
     />
 
     <!-- 应用设计面板 -->
-    <AppDesignPanel
-      :visible="showAppDesignPanel"
-      :design="currentAppDesign"
-      @update:visible="showAppDesignPanel = $event"
+    <DesignPreviewPanel
+      v-model:visible="showAppDesignPanel"
+      :preview="currentAppDesign as any"
       @confirm="handleAppDesignConfirm"
       @close="handleAppDesignClose"
     />
 
     <!-- 应用设置面板 -->
-    <AppSettingsPanel
-      :visible="showAppSettingsPanel"
-      :settings="currentAppSettings"
-      @update:visible="showAppSettingsPanel = $event"
+    <DesignPreviewPanel
+      v-model:visible="showAppSettingsPanel"
+      :preview="currentAppSettings as any"
       @confirm="handleAppSettingsConfirm"
       @close="handleAppSettingsClose"
     />
 
     <!-- 仪表盘基础信息面板 -->
-    <DashboardBasicInfoConfirmPanel
-      :visible="showDashboardBasicInfoPanel"
-      :basic-info="currentDashboardBasicInfo"
-      @update:visible="showDashboardBasicInfoPanel = $event"
+    <DesignPreviewPanel
+      v-model:visible="showDashboardBasicInfoPanel"
+      :preview="currentDashboardBasicInfo as any"
       @confirm="handleDashboardBasicInfoConfirm"
       @close="handleDashboardBasicInfoClose"
     />
 
     <!-- 仪表盘设计面板 -->
-    <DashboardDesignConfirmPanel
-      :visible="showDashboardDesignPanel"
-      :design="currentDashboardDesign"
-      @update:visible="showDashboardDesignPanel = $event"
+    <DesignPreviewPanel
+      v-model:visible="showDashboardDesignPanel"
+      :preview="currentDashboardDesign as any"
       @confirm="handleDashboardDesignConfirm"
       @close="handleDashboardDesignClose"
     />
 
     <!-- 仪表盘发布面板 -->
-    <DashboardPublishConfirmPanel
-      :visible="showDashboardPublishPanel"
-      :publish-data="currentDashboardPublish"
-      @update:visible="showDashboardPublishPanel = $event"
+    <DesignPreviewPanel
+      v-model:visible="showDashboardPublishPanel"
+      :preview="currentDashboardPublish as any"
       @confirm="handleDashboardPublishConfirm"
       @close="handleDashboardPublishClose"
     />
 
     <!-- 系统总结面板 -->
-    <SystemSummaryConfirmPanel
-      :visible="showSystemSummaryPanel"
-      :data="currentSystemSummary"
-      @update:visible="showSystemSummaryPanel = $event"
+    <DesignPreviewPanel
+      v-model:visible="showSystemSummaryPanel"
+      :preview="currentSystemSummary as any"
       @confirm="handleSystemSummaryConfirm"
       @close="handleSystemSummaryClose"
     />