Revert "Replace heavy design panels with preview drawer"

This reverts commit 0398d5956c.

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

@@ -16,7 +16,7 @@ import type {
  * - agent-debug: 智能体编辑器调试模式
  * - agent-chat: 智能体正式对话模式（支持历史、反馈）
  */
-import { computed, onUnmounted, ref, watch } from 'vue';
+import { computed, defineAsyncComponent, onUnmounted, ref, watch } from 'vue';
 
 import { Close, Setting } from '@element-plus/icons-vue';
 
@@ -31,10 +31,31 @@ 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',
@@ -996,59 +1017,66 @@ onUnmounted(() => {
       />
 
       <!-- 设计编辑面板 -->
-      <DesignPreviewPanel
+      <DesignEditorPanel
         v-if="showDesignPanel"
-        v-model:visible="showDesignPanel"
-        :preview="currentDesign as any"
+        :visible="showDesignPanel"
+        :design="currentDesign as any"
+        @update:visible="showDesignPanel = $event"
         @confirm="handleDesignConfirm"
         @close="handleDesignClose"
       />
 
-      <DesignPreviewPanel
+      <AppDesignPanel
         v-if="showAppDesignPanel"
-        v-model:visible="showAppDesignPanel"
-        :preview="currentAppDesign as any"
+        :visible="showAppDesignPanel"
+        :design="currentAppDesign as any"
+        @update:visible="showAppDesignPanel = $event"
         @confirm="handleAppDesignConfirm"
         @close="handleAppDesignClose"
       />
 
-      <DesignPreviewPanel
+      <AppSettingsPanel
         v-if="showAppSettingsPanel"
-        v-model:visible="showAppSettingsPanel"
-        :preview="currentAppSettings as any"
+        :visible="showAppSettingsPanel"
+        :settings="currentAppSettings as any"
+        @update:visible="showAppSettingsPanel = $event"
         @confirm="handleAppSettingsConfirm"
         @close="handleAppSettingsClose"
       />
 
-      <DesignPreviewPanel
+      <DashboardBasicInfoConfirmPanel
         v-if="showDashboardBasicInfoPanel"
-        v-model:visible="showDashboardBasicInfoPanel"
-        :preview="currentDashboardBasicInfo as any"
+        :visible="showDashboardBasicInfoPanel"
+        :basic-info="currentDashboardBasicInfo as any"
+        @update:visible="showDashboardBasicInfoPanel = $event"
         @confirm="handleDashboardBasicInfoConfirm"
         @close="handleDashboardBasicInfoClose"
       />
 
-      <DesignPreviewPanel
+      <DashboardDesignConfirmPanel
         v-if="showDashboardDesignPanel"
-        v-model:visible="showDashboardDesignPanel"
-        :preview="currentDashboardDesign as any"
+        :visible="showDashboardDesignPanel"
+        :design="currentDashboardDesign as any"
+        @update:visible="showDashboardDesignPanel = $event"
         @confirm="handleDashboardDesignConfirm"
         @close="handleDashboardDesignClose"
       />
 
-      <DesignPreviewPanel
+      <DashboardPublishConfirmPanel
         v-if="showDashboardPublishPanel"
-        v-model:visible="showDashboardPublishPanel"
-        :preview="currentDashboardPublish as any"
+        :visible="showDashboardPublishPanel"
+        :publish-data="currentDashboardPublish as any"
+        @update:visible="showDashboardPublishPanel = $event"
         @confirm="handleDashboardPublishConfirm"
         @close="handleDashboardPublishClose"
       />
 
       <!-- 系统总结面板 -->
-      <DesignPreviewPanel
+      <SystemSummaryConfirmPanel
         v-if="showSystemSummaryPanel"
-        v-model:visible="showSystemSummaryPanel"
-        :preview="currentSystemSummary as any"
+        :visible="showSystemSummaryPanel"
+        :data="currentSystemSummary as any"
+        @update:visible="showSystemSummaryPanel = $event"
         @confirm="handleSystemSummaryConfirm"
         @close="handleSystemSummaryClose"
       />
@@ -1056,51 +1084,58 @@ onUnmounted(() => {
 
     <!-- 侧边栏布局时的设计面板（保持原有行为） -->
     <template v-if="layout === 'sidebar'">
-      <DesignPreviewPanel
-        v-model:visible="showDesignPanel"
-        :preview="currentDesign as any"
+      <DesignEditorPanel
+        :visible="showDesignPanel"
+        :design="currentDesign as any"
+        @update:visible="showDesignPanel = $event"
         @confirm="handleDesignConfirm"
         @close="handleDesignClose"
       />
 
-      <DesignPreviewPanel
-        v-model:visible="showAppDesignPanel"
-        :preview="currentAppDesign as any"
+      <AppDesignPanel
+        :visible="showAppDesignPanel"
+        :design="currentAppDesign as any"
+        @update:visible="showAppDesignPanel = $event"
         @confirm="handleAppDesignConfirm"
         @close="handleAppDesignClose"
       />
 
-      <DesignPreviewPanel
-        v-model:visible="showAppSettingsPanel"
-        :preview="currentAppSettings as any"
+      <AppSettingsPanel
+        :visible="showAppSettingsPanel"
+        :settings="currentAppSettings as any"
+        @update:visible="showAppSettingsPanel = $event"
         @confirm="handleAppSettingsConfirm"
         @close="handleAppSettingsClose"
       />
 
-      <DesignPreviewPanel
-        v-model:visible="showDashboardBasicInfoPanel"
-        :preview="currentDashboardBasicInfo as any"
+      <DashboardBasicInfoConfirmPanel
+        :visible="showDashboardBasicInfoPanel"
+        :basic-info="currentDashboardBasicInfo as any"
+        @update:visible="showDashboardBasicInfoPanel = $event"
         @confirm="handleDashboardBasicInfoConfirm"
         @close="handleDashboardBasicInfoClose"
       />
 
-      <DesignPreviewPanel
-        v-model:visible="showDashboardDesignPanel"
-        :preview="currentDashboardDesign as any"
+      <DashboardDesignConfirmPanel
+        :visible="showDashboardDesignPanel"
+        :design="currentDashboardDesign as any"
+        @update:visible="showDashboardDesignPanel = $event"
         @confirm="handleDashboardDesignConfirm"
         @close="handleDashboardDesignClose"
       />
 
-      <DesignPreviewPanel
-        v-model:visible="showDashboardPublishPanel"
-        :preview="currentDashboardPublish as any"
+      <DashboardPublishConfirmPanel
+        :visible="showDashboardPublishPanel"
+        :publish-data="currentDashboardPublish as any"
+        @update:visible="showDashboardPublishPanel = $event"
         @confirm="handleDashboardPublishConfirm"
         @close="handleDashboardPublishClose"
       />
 
-      <DesignPreviewPanel
-        v-model:visible="showSystemSummaryPanel"
-        :preview="currentSystemSummary as any"
+      <SystemSummaryConfirmPanel
+        :visible="showSystemSummaryPanel"
+        :data="currentSystemSummary as any"
+        @update:visible="showSystemSummaryPanel = $event"
         @confirm="handleSystemSummaryConfirm"
         @close="handleSystemSummaryClose"
       />

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

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

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

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