From 07d1f7402baf7cbac96f2418ada133ea6dddf917 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: Tue, 9 Jun 2026 23:47:20 +0800
Subject: [PATCH] Track AI form editor confirmation panels

---
 .gitignore                                    |   3 -
 .../components/form-editor/AppDesignPanel.vue | 109 ++++
 .../form-editor/AppSettingsPanel.vue          | 536 ++++++++++++++++++
 .../form-editor/BasicInfoEditor.vue           | 117 ++++
 .../DashboardBasicInfoConfirmPanel.vue        | 122 ++++
 .../DashboardDesignConfirmPanel.vue           | 137 +++++
 .../DashboardPublishConfirmPanel.vue          | 137 +++++
 .../form-editor/DesignEditorPanel.vue         | 288 ++++++++++
 .../form-editor/FormEditorContent.vue         | 329 +++++++++++
 .../form-editor/PageBasicInfoEditor.vue       | 140 +++++
 .../form-editor/PageEditorContent.vue         | 210 +++++++
 .../form-editor/PagePublishInfoEditor.vue     | 129 +++++
 .../form-editor/PublishInfoEditor.vue         | 122 ++++
 .../form-editor/SystemSummaryConfirmPanel.vue | 317 +++++++++++
 14 files changed, 2693 insertions(+), 3 deletions(-)
 create mode 100644 web/apps/web-ele/src/components/form-editor/AppDesignPanel.vue
 create mode 100644 web/apps/web-ele/src/components/form-editor/AppSettingsPanel.vue
 create mode 100644 web/apps/web-ele/src/components/form-editor/BasicInfoEditor.vue
 create mode 100644 web/apps/web-ele/src/components/form-editor/DashboardBasicInfoConfirmPanel.vue
 create mode 100644 web/apps/web-ele/src/components/form-editor/DashboardDesignConfirmPanel.vue
 create mode 100644 web/apps/web-ele/src/components/form-editor/DashboardPublishConfirmPanel.vue
 create mode 100644 web/apps/web-ele/src/components/form-editor/DesignEditorPanel.vue
 create mode 100644 web/apps/web-ele/src/components/form-editor/FormEditorContent.vue
 create mode 100644 web/apps/web-ele/src/components/form-editor/PageBasicInfoEditor.vue
 create mode 100644 web/apps/web-ele/src/components/form-editor/PageEditorContent.vue
 create mode 100644 web/apps/web-ele/src/components/form-editor/PagePublishInfoEditor.vue
 create mode 100644 web/apps/web-ele/src/components/form-editor/PublishInfoEditor.vue
 create mode 100644 web/apps/web-ele/src/components/form-editor/SystemSummaryConfirmPanel.vue

diff --git a/.gitignore b/.gitignore
index ffaaba6..bea4eb6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -269,6 +269,3 @@ web/apps/web-ele/src/views/ai-platform/workflow/editor/panels/SystemSummaryPanel
 !web/apps/web-ele/src/views/ai-platform/workflow/editor/nodes/SystemSummaryNode.vue
 !web/apps/web-ele/src/views/ai-platform/workflow/editor/panels/SystemSummaryPanel.vue
 web/apps/web-ele/src/views/wiki/
-# keep only lightweight form-editor barrel
-web/apps/web-ele/src/components/form-editor/*
-!web/apps/web-ele/src/components/form-editor/index.ts
diff --git a/web/apps/web-ele/src/components/form-editor/AppDesignPanel.vue b/web/apps/web-ele/src/components/form-editor/AppDesignPanel.vue
new file mode 100644
index 0000000..e9864a2
--- /dev/null
+++ b/web/apps/web-ele/src/components/form-editor/AppDesignPanel.vue
@@ -0,0 +1,109 @@
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue';
+
+import { Maximize, Minimize } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import { ElButton, ElInput } from 'element-plus';
+
+export interface AppDesignData {
+  type: 'app_design';
+  title: string;
+  data: {
+    content: string;
+    title: string;
+  };
+  nodeId?: string;
+}
+
+const props = defineProps<{
+  design?: AppDesignData;
+  visible: boolean;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+  confirm: [data: Record<string, any>];
+  'update:visible': [value: boolean];
+}>();
+
+const isFullscreen = ref(false);
+const editContent = ref('');
+
+const dialogVisible = computed({
+  get: () => props.visible,
+  set: (val) => emit('update:visible', val),
+});
+
+const panelTitle = computed(
+  () => props.design?.data?.title || props.design?.title || '应用设计方案',
+);
+
+watch(
+  () => props.design,
+  (design) => {
+    editContent.value = design?.data?.content || '';
+  },
+  { immediate: true },
+);
+
+function handleConfirm() {
+  emit('confirm', {
+    content: editContent.value,
+    title: panelTitle.value,
+  });
+}
+
+function handleClose() {
+  dialogVisible.value = false;
+  emit('close');
+}
+</script>
+
+<template>
+  <div
+    v-if="visible"
+    class="border-border bg-card flex flex-col rounded-lg"
+    :class="[isFullscreen ? 'fixed inset-0 z-50 ml-0' : 'ml-3 h-full w-full']"
+  >
+    <div
+      class="border-border bg-muted/50 flex shrink-0 items-center justify-between border-b px-4 py-3"
+    >
+      <div class="text-foreground font-medium">{{ panelTitle }}</div>
+      <div class="flex items-center gap-2">
+        <ElButton size="small" @click="handleClose">
+          {{ $t('common.cancel') }}
+        </ElButton>
+        <ElButton size="small" type="primary" @click="handleConfirm">
+          {{ $t('common.confirmAndContinue') }}
+        </ElButton>
+        <ElButton
+          link
+          :icon="isFullscreen ? Minimize : Maximize"
+          :title="isFullscreen ? '退出全屏' : '全屏'"
+          @click="isFullscreen = !isFullscreen"
+        />
+      </div>
+    </div>
+
+    <div class="flex min-h-0 flex-1 flex-col gap-4 overflow-hidden p-4">
+      <div class="rounded-md border bg-muted/30 p-3 text-sm text-muted-foreground">
+        AI 已生成应用设计方案。确认前可以直接调整正文，确认后将继续后续编排节点。
+      </div>
+      <ElInput
+        v-model="editContent"
+        class="min-h-0 flex-1"
+        resize="none"
+        type="textarea"
+        placeholder="请输入应用设计方案"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+:deep(.el-textarea),
+:deep(.el-textarea__inner) {
+  height: 100%;
+}
+</style>
diff --git a/web/apps/web-ele/src/components/form-editor/AppSettingsPanel.vue b/web/apps/web-ele/src/components/form-editor/AppSettingsPanel.vue
new file mode 100644
index 0000000..6cba399
--- /dev/null
+++ b/web/apps/web-ele/src/components/form-editor/AppSettingsPanel.vue
@@ -0,0 +1,536 @@
+<script lang="ts" setup>
+/**
+ * 应用设置面板
+ * 用于配置应用设置，包括应用配置、Logo配置、内置主题和布局
+ */
+import type { BuiltinThemeType, LayoutType, ThemeModeType } from '@vben/types';
+
+import { computed, ref, watch } from 'vue';
+
+import { Maximize, Minimize } from '@vben/icons';
+import {
+  Block,
+  BuiltinTheme,
+  Layout,
+  Theme,
+} from '@vben/layouts/preferences-blocks';
+import { $t } from '@vben/locales';
+
+import {
+  ElButton,
+  ElDivider,
+  ElInput,
+  ElMessage,
+  ElOption,
+  ElScrollbar,
+  ElSelect,
+  ElSwitch,
+} from 'element-plus';
+
+import { uploadFile } from '#/api/core/file';
+import { getFileUrlPublic } from '#/composables/useFileUrl';
+
+// 应用设置数据接口
+export interface AppSettingsData {
+  type: 'app_settings';
+  title: string;
+  data: {
+    app?: {
+      defaultHomePath?: string;
+      dynamicTitle?: boolean;
+      enableCheckUpdates?: boolean;
+      enablePreferences?: boolean;
+      layout?: string;
+      locale?: string;
+      name?: string;
+      watermark?: boolean;
+      watermarkContent?: string;
+    };
+    breadcrumb?: Record<string, any>;
+    copyright?: Record<string, any>;
+    footer?: Record<string, any>;
+    header?: Record<string, any>;
+    logo?: {
+      enable?: boolean;
+      fit?: string;
+      source?: string;
+    };
+    navigation?: Record<string, any>;
+    shortcutKeys?: Record<string, any>;
+    sidebar?: Record<string, any>;
+    tabbar?: Record<string, any>;
+    theme?: {
+      builtinType?: string;
+      colorPrimary?: string;
+      mode?: string;
+      radius?: string;
+      semiDarkHeader?: boolean;
+      semiDarkSidebar?: boolean;
+    };
+    transition?: Record<string, any>;
+    widget?: Record<string, any>;
+  };
+  nodeId?: string;
+  layoutOptions?: Array<{ label: string; value: string }>;
+  themeOptions?: Array<{ label: string; value: string }>;
+}
+
+interface Props {
+  visible: boolean;
+  settings?: AppSettingsData;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  close: [];
+  confirm: [data: Record<string, any>];
+  'update:visible': [value: boolean];
+}>();
+
+// 全屏状态
+const isFullscreen = ref(false);
+
+// 切换全屏
+const toggleFullscreen = () => {
+  isFullscreen.value = !isFullscreen.value;
+};
+
+// 应用配置
+const appName = ref('');
+const appDefaultHomePath = ref('/analytics');
+const appEnablePreferences = ref(true);
+const appLayout = ref<LayoutType>('sidebar-nav');
+
+// Logo配置
+const logoEnable = ref(true);
+const logoSource = ref('');
+const logoFit = ref('contain');
+const logoDisplayUrl = ref('');
+
+// 主题配置
+const themeMode = ref<ThemeModeType>('light');
+const themeBuiltinType = ref<BuiltinThemeType>('default');
+const themeColorPrimary = ref('hsl(212 100% 45%)');
+const themeSemiDarkSidebar = ref(false);
+const themeSemiDarkHeader = ref(false);
+
+// 适应方式选项
+const fitOptions = computed(() => [
+  { label: $t('ai-platform.appSettings.fitOptions.contain'), value: 'contain' },
+  { label: $t('ai-platform.appSettings.fitOptions.cover'), value: 'cover' },
+  { label: $t('ai-platform.appSettings.fitOptions.fill'), value: 'fill' },
+  { label: $t('ai-platform.appSettings.fitOptions.none'), value: 'none' },
+  {
+    label: $t('ai-platform.appSettings.fitOptions.scale-down'),
+    value: 'scale-down',
+  },
+]);
+
+// 面板标题
+const panelTitle = computed(() => {
+  return props.settings?.title || $t('ai-platform.appSettings.title');
+});
+
+// 监听设置数据变化
+watch(
+  () => props.settings,
+  (newSettings) => {
+    if (newSettings?.data) {
+      const data = newSettings.data;
+
+      // 应用配置
+      appName.value = data.app?.name || '';
+      appDefaultHomePath.value = data.app?.defaultHomePath || '/analytics';
+      appEnablePreferences.value = data.app?.enablePreferences ?? true;
+      appLayout.value = (data.app?.layout || 'sidebar-nav') as LayoutType;
+
+      // Logo配置
+      logoEnable.value = data.logo?.enable ?? true;
+      logoSource.value = data.logo?.source || '';
+      logoFit.value = data.logo?.fit || 'contain';
+      loadLogoDisplayUrl(logoSource.value);
+
+      // 主题配置
+      themeMode.value = (data.theme?.mode || 'light') as ThemeModeType;
+      themeBuiltinType.value = (data.theme?.builtinType ||
+        'default') as BuiltinThemeType;
+      themeColorPrimary.value = data.theme?.colorPrimary || 'hsl(212 100% 45%)';
+      themeSemiDarkSidebar.value = data.theme?.semiDarkSidebar ?? false;
+      themeSemiDarkHeader.value = data.theme?.semiDarkHeader ?? false;
+    }
+  },
+  { immediate: true },
+);
+
+// 监听logoSource变化，加载显示URL
+watch(logoSource, (newSource) => {
+  loadLogoDisplayUrl(newSource);
+});
+
+// 判断是否为文件ID
+function isFileId(value: string): boolean {
+  return (
+    /^[\da-f]{8}-[\da-f]{4}-[\da-f]{4}-[\da-f]{4}-[\da-f]{12}$/i.test(value) ||
+    /^\d+$/.test(value) ||
+    /^[\w-]{10,30}$/.test(value)
+  );
+}
+
+// 加载Logo显示URL
+function loadLogoDisplayUrl(source: string) {
+  if (!source) {
+    logoDisplayUrl.value = '';
+    return;
+  }
+  if (
+    source.startsWith('http://') ||
+    source.startsWith('https://') ||
+    source.startsWith('/') ||
+    source.startsWith('data:')
+  ) {
+    logoDisplayUrl.value = source;
+    return;
+  }
+  if (isFileId(source)) {
+    logoDisplayUrl.value = getFileUrlPublic(source);
+    return;
+  }
+  logoDisplayUrl.value = source;
+}
+
+// 文件上传
+const uploadInputRef = ref<HTMLInputElement>();
+
+function openFileSelector() {
+  uploadInputRef.value?.click();
+}
+
+async function handleFileInputChange(event: Event) {
+  const target = event.target as HTMLInputElement;
+  const file = target.files?.[0];
+  if (!file) return;
+
+  try {
+    const response = await uploadFile(file, {
+      isPublic: true,
+      source: 'avatar',
+    });
+    if (response?.id) {
+      logoSource.value = getFileUrlPublic(String(response.id));
+    }
+  } catch {
+    ElMessage.error($t('ui-config.loadError'));
+  }
+  target.value = '';
+}
+
+function clearLogo() {
+  logoSource.value = '';
+}
+
+// 构建设置数据
+function buildSettingsData(): Record<string, any> {
+  return {
+    app: {
+      name: appName.value,
+      defaultHomePath: appDefaultHomePath.value,
+      enablePreferences: appEnablePreferences.value,
+      layout: appLayout.value,
+    },
+    logo: {
+      enable: logoEnable.value,
+      source: logoSource.value,
+      fit: logoFit.value,
+    },
+    theme: {
+      mode: themeMode.value,
+      builtinType: themeBuiltinType.value,
+      colorPrimary: themeColorPrimary.value,
+      semiDarkSidebar: themeSemiDarkSidebar.value,
+      semiDarkHeader: themeSemiDarkHeader.value,
+    },
+    // 保留原有的其他配置
+    sidebar: props.settings?.data?.sidebar,
+    header: props.settings?.data?.header,
+    footer: props.settings?.data?.footer,
+    copyright: props.settings?.data?.copyright,
+    navigation: props.settings?.data?.navigation,
+    tabbar: props.settings?.data?.tabbar,
+    breadcrumb: props.settings?.data?.breadcrumb,
+    transition: props.settings?.data?.transition,
+    widget: props.settings?.data?.widget,
+    shortcutKeys: props.settings?.data?.shortcutKeys,
+  };
+}
+
+// 确认并继续
+function handleConfirm() {
+  emit('confirm', buildSettingsData());
+}
+
+// 关闭
+function handleClose() {
+  emit('update:visible', false);
+  emit('close');
+}
+</script>
+
+<template>
+  <div
+    v-if="visible"
+    class="app-settings-panel border-border bg-card flex flex-col rounded-lg"
+    :class="[isFullscreen ? 'fixed inset-0 z-50 ml-0' : 'ml-3 h-full w-full']"
+  >
+    <!-- 头部 -->
+    <div
+      class="border-border bg-muted/50 flex items-center justify-between border-b px-4 py-3"
+    >
+      <div class="text-foreground font-medium">
+        {{ panelTitle }}
+      </div>
+      <div class="flex items-center gap-2">
+        <ElButton size="small" @click="handleClose">
+          {{ $t('common.cancel') }}
+        </ElButton>
+        <ElButton size="small" type="primary" @click="handleConfirm">
+          {{ $t('common.confirmAndContinue') }}
+        </ElButton>
+        <ElButton
+          link
+          :icon="isFullscreen ? Minimize : Maximize"
+          :title="isFullscreen ? '退出全屏' : '全屏'"
+          @click="toggleFullscreen"
+        />
+      </div>
+    </div>
+
+    <!-- 内容区域 -->
+    <ElScrollbar class="flex-1">
+      <div class="grid grid-cols-2 gap-6 p-6">
+        <!-- 左列：应用配置 + Logo配置 -->
+        <div class="space-y-6">
+          <!-- 应用配置 -->
+          <div class="config-section">
+            <h4 class="mb-4 text-sm font-semibold">
+              {{ $t('ai-platform.appSettings.appConfig') }}
+            </h4>
+            <div class="space-y-4">
+              <Block :title="$t('ai-platform.appSettings.appName')">
+                <ElInput
+                  v-model="appName"
+                  :placeholder="
+                    $t('ai-platform.appSettings.appNamePlaceholder')
+                  "
+                  clearable
+                />
+              </Block>
+
+              <Block :title="$t('ai-platform.appSettings.defaultHomePath')">
+                <ElInput
+                  v-model="appDefaultHomePath"
+                  :placeholder="
+                    $t('ai-platform.appSettings.defaultHomePathPlaceholder')
+                  "
+                  clearable
+                />
+              </Block>
+
+              <Block :title="$t('ai-platform.appSettings.enablePreferences')">
+                <ElSwitch v-model="appEnablePreferences" />
+              </Block>
+            </div>
+          </div>
+
+          <ElDivider />
+
+          <!-- Logo配置 -->
+          <div class="config-section">
+            <h4 class="mb-4 text-sm font-semibold">
+              {{ $t('ai-platform.appSettings.logoConfig') }}
+            </h4>
+            <div class="space-y-4">
+              <Block :title="$t('ai-platform.appSettings.logoEnable')">
+                <ElSwitch v-model="logoEnable" />
+              </Block>
+
+              <template v-if="logoEnable">
+                <Block :title="$t('ai-platform.appSettings.logoSource')">
+                  <div class="flex flex-col gap-4">
+                    <!-- Logo 预览和上传 -->
+                    <div class="logo-preview-container flex">
+                      <div class="flex items-center gap-4">
+                        <div>
+                          <div
+                            v-if="logoDisplayUrl"
+                            class="logo-preview"
+                            @click="openFileSelector"
+                          >
+                            <img
+                              :src="logoDisplayUrl"
+                              alt="Logo"
+                              class="logo-image"
+                            />
+                            <div class="logo-overlay">
+                              <span class="text-sm text-white">{{
+                                $t('common.replace')
+                              }}</span>
+                            </div>
+                          </div>
+                          <div
+                            v-else
+                            class="logo-placeholder"
+                            @click="openFileSelector"
+                          >
+                            <span class="text-muted-foreground text-sm">{{
+                              $t(
+                                'ai-platform.appSettings.logoSourcePlaceholder',
+                              )
+                            }}</span>
+                          </div>
+                        </div>
+
+                        <ElButton
+                          v-if="logoDisplayUrl"
+                          size="small"
+                          @click="clearLogo"
+                        >
+                          {{ $t('common.clear') }}
+                        </ElButton>
+                      </div>
+                    </div>
+                    <input
+                      ref="uploadInputRef"
+                      type="file"
+                      accept="image/*"
+                      style="display: none"
+                      @change="handleFileInputChange"
+                    />
+                    <ElInput
+                      v-model="logoSource"
+                      :placeholder="
+                        $t('ai-platform.appSettings.logoSourcePlaceholder')
+                      "
+                      clearable
+                    />
+                  </div>
+                </Block>
+
+                <Block :title="$t('ai-platform.appSettings.logoFit')">
+                  <ElSelect v-model="logoFit" class="w-full">
+                    <ElOption
+                      v-for="item in fitOptions"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </ElSelect>
+                </Block>
+              </template>
+            </div>
+          </div>
+        </div>
+
+        <!-- 右列：布局配置 + 主题配置 -->
+        <div class="space-y-6">
+          <!-- 布局配置 -->
+          <div class="config-section">
+            <h4 class="mb-4 text-sm font-semibold">
+              {{ $t('ai-platform.appSettings.layoutConfig') }}
+            </h4>
+            <div class="space-y-4">
+              <Block :title="$t('ai-platform.appSettings.layout')">
+                <Layout v-model="appLayout" />
+              </Block>
+            </div>
+          </div>
+
+          <ElDivider />
+
+          <!-- 主题配置 -->
+          <div class="config-section">
+            <h4 class="mb-4 text-sm font-semibold">
+              {{ $t('ai-platform.appSettings.themeConfig') }}
+            </h4>
+            <div class="space-y-4">
+              <Block :title="$t('ai-platform.appSettings.themeMode')">
+                <Theme
+                  v-model="themeMode"
+                  v-model:theme-semi-dark-sidebar="themeSemiDarkSidebar"
+                  v-model:theme-semi-dark-header="themeSemiDarkHeader"
+                />
+              </Block>
+
+              <Block :title="$t('ai-platform.appSettings.builtinTheme')">
+                <BuiltinTheme
+                  v-model="themeBuiltinType"
+                  v-model:theme-color-primary="themeColorPrimary"
+                  :is-dark="themeMode === 'dark'"
+                />
+              </Block>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ElScrollbar>
+  </div>
+</template>
+
+<style scoped>
+.app-settings-panel {
+  min-width: 600px;
+}
+
+.logo-preview-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.logo-preview {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  border: 1px solid hsl(var(--border));
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.logo-image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.logo-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgb(0 0 0 / 50%);
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.logo-preview:hover .logo-overlay {
+  opacity: 1;
+}
+
+.logo-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100px;
+  height: 100px;
+  border: 2px dashed hsl(var(--border));
+  border-radius: 8px;
+  cursor: pointer;
+  transition: border-color 0.2s;
+}
+
+.logo-placeholder:hover {
+  border-color: hsl(var(--primary));
+}
+</style>
diff --git a/web/apps/web-ele/src/components/form-editor/BasicInfoEditor.vue b/web/apps/web-ele/src/components/form-editor/BasicInfoEditor.vue
new file mode 100644
index 0000000..1642297
--- /dev/null
+++ b/web/apps/web-ele/src/components/form-editor/BasicInfoEditor.vue
@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+/**
+ * 表单基础信息编辑组件
+ * 可用于：表单管理器、工作流设计预览编辑
+ */
+import { computed } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import {
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElOption,
+  ElSelect,
+} from 'element-plus';
+
+export interface BasicFormData {
+  name: string;
+  code: string;
+  form_type: 'normal' | 'workflow';
+  sort: number;
+  description: string;
+}
+
+interface Props {
+  modelValue: BasicFormData;
+  disabled?: boolean;
+  showTitle?: boolean;
+  labelWidth?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  showTitle: true,
+  labelWidth: '100px',
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: BasicFormData];
+}>();
+
+const formData = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+});
+
+// 更新单个字段
+function updateField<K extends keyof BasicFormData>(key: K, value: BasicFormData[K]) {
+  emit('update:modelValue', { ...props.modelValue, [key]: value });
+}
+</script>
+
+<template>
+  <div class="basic-info-editor">
+    <h3 v-if="showTitle" class="mb-6 text-center text-lg font-medium">
+      {{ $t('form-manager.editor.steps.basic') }}
+    </h3>
+    <ElForm
+      :model="formData"
+      :label-width="labelWidth"
+      label-position="right"
+      :disabled="disabled"
+    >
+      <ElFormItem :label="$t('form-manager.name')" required>
+        <ElInput
+          :model-value="formData.name"
+          :placeholder="$t('form-manager.placeholder.name')"
+          clearable
+          @update:model-value="updateField('name', $event)"
+        />
+      </ElFormItem>
+      <ElFormItem :label="$t('form-manager.code')" required>
+        <ElInput
+          :model-value="formData.code"
+          :placeholder="$t('form-manager.placeholder.code')"
+          clearable
+          @update:model-value="updateField('code', $event)"
+        />
+      </ElFormItem>
+      <ElFormItem :label="$t('form-manager.type')" required>
+        <ElSelect
+          :model-value="formData.form_type"
+          :placeholder="$t('form-manager.placeholder.type')"
+          class="w-full"
+          @update:model-value="updateField('form_type', $event)"
+        >
+          <ElOption :label="$t('form-manager.typeMap.normal')" value="normal" />
+          <ElOption :label="$t('form-manager.typeMap.workflow')" value="workflow" />
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem :label="$t('common.sort')">
+        <ElInput
+          :model-value="formData.sort"
+          type="number"
+          placeholder="0"
+          @update:model-value="updateField('sort', Number($event))"
+        />
+      </ElFormItem>
+      <ElFormItem :label="$t('form-manager.description')">
+        <ElInput
+          :model-value="formData.description"
+          type="textarea"
+          :rows="4"
+          :placeholder="$t('form-manager.editor.placeholder.remark')"
+          @update:model-value="updateField('description', $event)"
+        />
+      </ElFormItem>
+    </ElForm>
+  </div>
+</template>
+
+<style scoped>
+.basic-info-editor {
+  width: 100%;
+}
+</style>
diff --git a/web/apps/web-ele/src/components/form-editor/DashboardBasicInfoConfirmPanel.vue b/web/apps/web-ele/src/components/form-editor/DashboardBasicInfoConfirmPanel.vue
new file mode 100644
index 0000000..588e12e
--- /dev/null
+++ b/web/apps/web-ele/src/components/form-editor/DashboardBasicInfoConfirmPanel.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+/**
+ * 仪表盘基础信息确认面板
+ * 复用 PageBasicInfoEditor 公共组件
+ */
+import type { PageBasicInfo } from './PageBasicInfoEditor.vue';
+
+import { computed, ref, watch } from 'vue';
+
+import { Maximize, Minimize } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import { ElButton } from 'element-plus';
+
+import PageBasicInfoEditor from './PageBasicInfoEditor.vue';
+
+export interface DashboardBasicInfoData {
+  type: string;
+  title: string;
+  data: {
+    category: string;
+    code: string;
+    description: string;
+    name: string;
+    sort: number;
+  };
+  nodeId: string;
+}
+
+const props = defineProps<{
+  basicInfo?: DashboardBasicInfoData;
+  visible: boolean;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+  confirm: [data: Record<string, any>];
+  'update:visible': [value: boolean];
+}>();
+
+// 全屏状态
+const isFullscreen = ref(false);
+
+// 切换全屏
+const toggleFullscreen = () => {
+  isFullscreen.value = !isFullscreen.value;
+};
+
+const dialogVisible = computed({
+  get: () => props.visible,
+  set: (val) => emit('update:visible', val),
+});
+
+const form = ref<PageBasicInfo>({
+  name: '',
+  code: '',
+  category: 'dashboard',
+  description: '',
+  sort: 0,
+});
+
+watch(
+  () => props.basicInfo,
+  (info) => {
+    if (info?.data) {
+      form.value = {
+        name: info.data.name || '',
+        code: info.data.code || '',
+        category: info.data.category || 'dashboard',
+        description: info.data.description || '',
+        sort: info.data.sort || 0,
+      };
+    }
+  },
+  { immediate: true },
+);
+
+const handleConfirm = () => {
+  emit('confirm', { ...form.value });
+};
+
+const handleClose = () => {
+  dialogVisible.value = false;
+  emit('close');
+};
+</script>
+
+<template>
+  <div
+    v-if="visible"
+    class="border-border bg-card flex flex-col rounded-lg"
+    :class="[isFullscreen ? 'fixed inset-0 z-50 ml-0' : 'ml-3 h-full w-full']"
+  >
+    <!-- 头部 -->
+    <div
+      class="border-border bg-muted/50 flex items-center justify-between border-b px-4 py-3"
+    >
+      <div class="text-foreground font-medium">
+        {{ basicInfo?.title || $t('ai-platform.dashboard.basicInfo.title') }}
+      </div>
+      <div class="flex items-center gap-2">
+        <ElButton size="small" @click="handleClose">
+          {{ $t('common.cancel') }}
+        </ElButton>
+        <ElButton size="small" type="primary" @click="handleConfirm">
+          {{ $t('common.confirmAndContinue') }}
+        </ElButton>
+        <ElButton
+          link
+          :icon="isFullscreen ? Minimize : Maximize"
+          :title="isFullscreen ? '退出全屏' : '全屏'"
+          @click="toggleFullscreen"
+        />
+      </div>
+    </div>
+
+    <!-- 内容 -->
+    <div class="flex-1 overflow-y-auto p-6">
+      <PageBasicInfoEditor v-model="form" />
+    </div>
+  </div>
+</template>
diff --git a/web/apps/web-ele/src/components/form-editor/DashboardDesignConfirmPanel.vue b/web/apps/web-ele/src/components/form-editor/DashboardDesignConfirmPanel.vue
new file mode 100644
index 0000000..04dce90
--- /dev/null
+++ b/web/apps/web-ele/src/components/form-editor/DashboardDesignConfirmPanel.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+
+import { Maximize, Minimize } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import { ElButton, ElInput, ElMessage } from 'element-plus';
+
+export interface DashboardDesignData {
+  type: string;
+  title: string;
+  data: {
+    dashboard_code?: string;
+    design_suggestion?: string;
+    design_title?: string;
+    page_config?: Record<string, any>;
+  };
+  nodeId: string;
+}
+
+const props = defineProps<{
+  design?: DashboardDesignData;
+  visible: boolean;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+  confirm: [data: Record<string, any>];
+  'update:visible': [value: boolean];
+}>();
+
+const isFullscreen = ref(false);
+const configText = ref('{}');
+
+const dialogVisible = computed({
+  get: () => props.visible,
+  set: (val) => emit('update:visible', val),
+});
+
+watch(
+  () => props.design,
+  (design) => {
+    configText.value = JSON.stringify(design?.data?.page_config || {}, null, 2);
+  },
+  { immediate: true },
+);
+
+function handleConfirm() {
+  try {
+    emit('confirm', {
+      design_title:
+        props.design?.data?.design_title ||
+        $t('ai-platform.dashboard.design.title'),
+      page_config: JSON.parse(configText.value || '{}'),
+    });
+  } catch {
+    ElMessage.error('页面配置不是有效 JSON');
+  }
+}
+
+function handleClose() {
+  dialogVisible.value = false;
+  emit('close');
+}
+</script>
+
+<template>
+  <div
+    v-if="visible"
+    class="border-border bg-card flex flex-col rounded-lg"
+    :class="[isFullscreen ? 'fixed inset-0 z-50 ml-0' : 'ml-3 h-full w-full']"
+  >
+    <div
+      class="border-border bg-muted/50 flex shrink-0 items-center justify-between border-b px-4 py-3"
+    >
+      <div class="text-foreground flex items-center gap-3 font-medium">
+        <div class="bg-primary flex h-8 w-8 items-center justify-center rounded">
+          <span class="text-sm font-bold text-white">D</span>
+        </div>
+        <span>{{ design?.title || $t('ai-platform.dashboard.design.title') }}</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <ElButton size="small" @click="handleClose">
+          {{ $t('common.cancel') }}
+        </ElButton>
+        <ElButton size="small" type="primary" @click="handleConfirm">
+          {{ $t('common.confirmAndContinue') }}
+        </ElButton>
+        <div class="bg-border mx-1 h-5 w-px"></div>
+        <ElButton
+          link
+          :icon="isFullscreen ? Minimize : Maximize"
+          :title="isFullscreen ? '退出全屏' : '全屏'"
+          @click="isFullscreen = !isFullscreen"
+        />
+      </div>
+    </div>
+
+    <div class="grid min-h-0 flex-1 grid-cols-[320px_minmax(0,1fr)] gap-4 overflow-hidden p-4">
+      <div class="space-y-4 overflow-auto rounded-md border bg-muted/20 p-4">
+        <div>
+          <div class="text-sm font-medium">仪表盘编码</div>
+          <div class="mt-1 text-sm text-muted-foreground">
+            {{ design?.data?.dashboard_code || '-' }}
+          </div>
+        </div>
+        <div>
+          <div class="text-sm font-medium">设计标题</div>
+          <div class="mt-1 text-sm text-muted-foreground">
+            {{ design?.data?.design_title || '-' }}
+          </div>
+        </div>
+        <div>
+          <div class="text-sm font-medium">设计建议</div>
+          <div class="mt-1 whitespace-pre-wrap text-sm text-muted-foreground">
+            {{ design?.data?.design_suggestion || '暂无设计建议' }}
+          </div>
+        </div>
+      </div>
+      <ElInput
+        v-model="configText"
+        class="min-h-0"
+        resize="none"
+        type="textarea"
+        placeholder="页面配置 JSON"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+:deep(.el-textarea),
+:deep(.el-textarea__inner) {
+  height: 100%;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+</style>
diff --git a/web/apps/web-ele/src/components/form-editor/DashboardPublishConfirmPanel.vue b/web/apps/web-ele/src/components/form-editor/DashboardPublishConfirmPanel.vue
new file mode 100644
index 0000000..ed8d069
--- /dev/null
+++ b/web/apps/web-ele/src/components/form-editor/DashboardPublishConfirmPanel.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+/**
+ * 仪表盘发布确认面板
+ * 复用 PagePublishInfoEditor 公共组件
+ */
+import type { PagePublishInfo } from './PagePublishInfoEditor.vue';
+
+import { computed, ref, watch } from 'vue';
+
+import { Maximize, Minimize } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import { ElButton } from 'element-plus';
+
+import PagePublishInfoEditor from './PagePublishInfoEditor.vue';
+
+export interface DashboardPublishData {
+  type: string;
+  title: string;
+  data: {
+    application_id?: string;
+    dashboard_code: string;
+    dashboard_id: string;
+    menu_icon: string;
+    menu_name: string;
+    menu_order: number;
+    menu_parent_id?: string;
+  };
+  nodeId: string;
+}
+
+const props = defineProps<{
+  publishData?: DashboardPublishData;
+  visible: boolean;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+  confirm: [data: Record<string, any>];
+  'update:visible': [value: boolean];
+}>();
+
+// 全屏状态
+const isFullscreen = ref(false);
+
+// 切换全屏
+const toggleFullscreen = () => {
+  isFullscreen.value = !isFullscreen.value;
+};
+
+const dialogVisible = computed({
+  get: () => props.visible,
+  set: (val) => emit('update:visible', val),
+});
+
+const form = ref<PagePublishInfo>({
+  menu_name: '',
+  menu_parent_id: undefined,
+  menu_icon: 'lucide:layout-dashboard',
+  menu_order: 0,
+});
+
+watch(
+  () => props.publishData,
+  (data) => {
+    if (data?.data) {
+      form.value = {
+        menu_name: data.data.menu_name || '',
+        menu_parent_id: data.data.menu_parent_id || undefined,
+        menu_icon: data.data.menu_icon || 'lucide:layout-dashboard',
+        menu_order: data.data.menu_order || 0,
+      };
+    }
+  },
+  { immediate: true },
+);
+
+const handleConfirm = () => {
+  const confirmData = {
+    dashboard_id: props.publishData?.data.dashboard_id,
+    dashboard_code: props.publishData?.data.dashboard_code,
+    menu_name: form.value.menu_name,
+    menu_parent_id: form.value.menu_parent_id || '',
+    menu_icon: form.value.menu_icon,
+    menu_order: form.value.menu_order,
+    application_id: props.publishData?.data.application_id || '',
+  };
+  console.log('[DashboardPublishConfirmPanel] 确认数据:', confirmData);
+  emit('confirm', confirmData);
+};
+
+const handleClose = () => {
+  dialogVisible.value = false;
+  emit('close');
+};
+</script>
+
+<template>
+  <div
+    v-if="visible"
+    class="border-border bg-card flex flex-col rounded-lg"
+    :class="[isFullscreen ? 'fixed inset-0 z-50 ml-0' : 'ml-3 h-full w-full']"
+  >
+    <!-- 头部 -->
+    <div
+      class="border-border bg-muted/50 flex items-center justify-between border-b px-4 py-3"
+    >
+      <div class="text-foreground font-medium">
+        {{ publishData?.title || $t('ai-platform.dashboard.publish.title') }}
+      </div>
+      <div class="flex items-center gap-2">
+        <ElButton size="small" @click="handleClose">
+          {{ $t('common.cancel') }}
+        </ElButton>
+        <ElButton size="small" type="primary" @click="handleConfirm">
+          {{ $t('common.confirmAndContinue') }}
+        </ElButton>
+        <ElButton
+          link
+          :icon="isFullscreen ? Minimize : Maximize"
+          :title="isFullscreen ? '退出全屏' : '全屏'"
+          @click="toggleFullscreen"
+        />
+      </div>
+    </div>
+
+    <!-- 内容 -->
+    <div class="flex-1 overflow-y-auto p-6">
+      <PagePublishInfoEditor
+        v-model="form"
+        :page-code="publishData?.data.dashboard_code || ''"
+        :show-route-info="true"
+        route-prefix="/page-render/"
+      />
+    </div>
+  </div>
+</template>
diff --git a/web/apps/web-ele/src/components/form-editor/DesignEditorPanel.vue b/web/apps/web-ele/src/components/form-editor/DesignEditorPanel.vue
new file mode 100644
index 0000000..d4d5b23
--- /dev/null
+++ b/web/apps/web-ele/src/components/form-editor/DesignEditorPanel.vue
@@ -0,0 +1,288 @@
+<script lang="ts" setup>
+/**
+ * 设计编辑面板
+ * 用于工作流中每步设计完成后的编辑
+ * 使用 FormEditorContent 公共组件，根据当前步骤显示对应内容
+ */
+import { computed, ref, watch } from 'vue';
+
+import { $t } from '@vben/locales';
+import { Maximize, Minimize } from '@vben/icons';
+
+import { ElButton } from 'element-plus';
+
+import FormEditorContent from './FormEditorContent.vue';
+
+// 设计类型
+export type DesignType = 'form_basic_info' | 'database_design' | 'form_ui_design' | 'list_config' | 'form_publish' | 'dashboard_basic_info' | 'dashboard_design' | 'dashboard_publish';
+
+// 设计数据
+export interface DesignData {
+  type: DesignType;
+  title: string;
+  data: Record<string, any>;
+  nodeId: string;
+  form_fields?: any[]; // 表单字段列表（用于列表设计）
+  table_configs?: any[]; // 数据表配置（用于表单设计）
+}
+
+interface Props {
+  visible: boolean;
+  design?: DesignData;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  'update:visible': [value: boolean];
+  'save': [data: Record<string, any>];
+  'confirm': [data: Record<string, any>];
+  'close': [];
+}>();
+
+// 编辑器组件引用
+const editorRef = ref<InstanceType<typeof FormEditorContent>>();
+
+// 根据设计类型映射到步骤索引
+const stepMap: Record<DesignType, number> = {
+  'form_basic_info': 0,
+  'database_design': 1,
+  'form_ui_design': 2,
+  'list_config': 3,
+  'form_publish': 4,
+  'dashboard_basic_info': 0,
+  'dashboard_design': 0,
+  'dashboard_publish': 0,
+};
+
+// 当前步骤
+const currentStep = ref(0);
+
+// 面板标题
+const panelTitle = computed(() => {
+  if (!props.design) return '';
+  return props.design.title;
+});
+
+// 全屏状态
+const isFullscreen = ref(false);
+
+// 切换全屏
+const toggleFullscreen = () => {
+  isFullscreen.value = !isFullscreen.value;
+};
+
+// 监听设计数据变化，设置当前步骤和初始化数据
+watch(
+  () => props.design,
+  (newDesign) => {
+    if (!newDesign) return;
+    
+    // 根据设计类型设置当前步骤
+    currentStep.value = stepMap[newDesign.type] ?? 0;
+    
+    // 初始化编辑器数据
+    if (editorRef.value) {
+      initEditorData(newDesign);
+    }
+  },
+  { immediate: true }
+);
+
+// 监听编辑器引用变化，初始化数据
+watch(
+  () => editorRef.value,
+  (editor) => {
+    if (editor && props.design) {
+      initEditorData(props.design);
+    }
+  }
+);
+
+// 初始化编辑器数据
+function initEditorData(design: DesignData) {
+  if (!editorRef.value) return;
+  
+  switch (design.type) {
+    case 'form_basic_info': {
+      const data = design.data || {};
+      editorRef.value.setData({
+        basicForm: {
+          name: data.name || '',
+          code: data.code || '',
+          form_type: data.form_type || 'normal',
+          sort: data.sort || 0,
+          description: data.description || '',
+        },
+      });
+      break;
+    }
+    case 'database_design': {
+      const tableData = design.data?.table || design.data || {};
+      // 优先从 meta 中读取 schema，兼容旧数据从顶层读取
+      const metaData = tableData.meta || {};
+      editorRef.value.setData({
+        tableConfigs: [{
+          id: 'main-table',
+          type: 'main',
+          tableName: tableData.tableName || '',
+          alias: tableData.alias || tableData.tableName || '',
+          fields: tableData.fields || [],
+          meta: {
+            schema: metaData.schema || tableData.schema || '',
+            schemaRaw: metaData.schemaRaw || tableData.schemaRaw || '',
+            database: metaData.database || tableData.database || '',
+          },
+        }],
+      });
+      break;
+    }
+    case 'form_ui_design': {
+      const formConfig = design.data || {};
+      // 从 design 中获取 table_configs（后端在 waiting_config 中传递）
+      const tableConfigs = design.table_configs || design.data?.table_configs || [];
+      editorRef.value.setData({
+        tableConfigs: tableConfigs,
+        formConfig: {
+          items: formConfig.items || [],
+          labelWidth: formConfig.labelWidth || 120,
+          labelPosition: formConfig.labelPosition || 'right',
+          size: formConfig.size || 'default',
+          formPadding: formConfig.formPadding || 20,
+          formMargin: formConfig.formMargin || 0,
+          itemSpacing: formConfig.itemSpacing || 18,
+          formWidth: formConfig.formWidth || '100%',
+          formMaxWidth: formConfig.formMaxWidth || 0,
+          formBackground: formConfig.formBackground || false,
+          formBorder: formConfig.formBorder || false,
+          formBorderRadius: formConfig.formBorderRadius || 4,
+          formShadow: formConfig.formShadow || false,
+          disabled: formConfig.disabled || false,
+          tableConfigs: tableConfigs,
+        },
+      });
+      break;
+    }
+    case 'list_config': {
+      // 从 design 中获取 form_fields（后端在 waiting_config 中传递）
+      const formFields = design.form_fields || design.data?.form_fields || [];
+      editorRef.value.setData({
+        listConfig: design.data || {},
+        formFields: formFields,
+      });
+      break;
+    }
+    case 'form_publish': {
+      const publishData = design.data || {};
+      editorRef.value.setData({
+        publishData: {
+          menu_name: publishData.menu_name || '',
+          menu_parent_id: publishData.menu_parent_id,
+          menu_icon: publishData.menu_icon || 'lucide:file-text',
+          menu_order: publishData.menu_order ?? 1,
+        },
+      });
+      break;
+    }
+  }
+}
+
+// 获取当前编辑的数据
+function getCurrentData(): Record<string, any> {
+  if (!editorRef.value) return {};
+  
+  const data = editorRef.value.getData();
+  const designType = props.design?.type;
+  
+  switch (designType) {
+    case 'form_basic_info':
+      return { ...data.basicForm };
+    case 'database_design':
+      return {
+        type: data.tableConfigs[0]?.type || 'main', // 添加 type 字段，默认为 main
+        table: data.tableConfigs[0] ? {
+          tableName: data.tableConfigs[0].tableName,
+          alias: data.tableConfigs[0].alias,
+          fields: data.tableConfigs[0].fields,
+          meta: {
+            schema: data.tableConfigs[0].meta?.schema || '',
+            schemaRaw: data.tableConfigs[0].meta?.schemaRaw || '',
+            database: data.tableConfigs[0].meta?.database || '',
+          },
+        } : {},
+        dbConfig: props.design?.data?.dbConfig || 'default', // 保留原有的 dbConfig
+      };
+    case 'form_ui_design':
+      return {
+        items: data.formConfig.items,
+        labelWidth: data.formConfig.labelWidth,
+        labelPosition: data.formConfig.labelPosition,
+      };
+    case 'list_config':
+      return { ...data.listConfig };
+    case 'form_publish':
+      return { ...data.publishData };
+    default:
+      return {};
+  }
+}
+
+// 确认并继续
+function handleConfirm() {
+  const data = getCurrentData();
+  emit('confirm', data);
+}
+
+// 关闭
+function handleClose() {
+  emit('update:visible', false);
+  emit('close');
+}
+</script>
+
+<template>
+  <div
+    v-if="visible"
+    :class="[
+      'border-border bg-card flex flex-col rounded-lg',
+      isFullscreen ? 'fixed inset-0 z-50 ml-0' : 'ml-3 h-full w-full'
+    ]"
+  >
+    <!-- 头部 -->
+    <div
+      class="border-border bg-muted/50 flex items-center justify-between border-b px-4 py-3"
+    >
+      <div class="text-foreground font-medium">
+        {{ panelTitle }}
+      </div>
+      <div class="flex items-center gap-2">
+        <ElButton size="small" @click="handleClose">{{ $t('common.cancel') }}</ElButton>
+        <ElButton size="small" type="primary" @click="handleConfirm">{{ $t('common.confirmAndContinue') }}</ElButton>
+        <ElButton 
+          link 
+          :icon="isFullscreen ? Minimize : Maximize" 
+          :title="isFullscreen ? '退出全屏' : '全屏'"
+          @click="toggleFullscreen" 
+        />
+      </div>
+    </div>
+
+    <!-- 内容区域：使用 FormEditorContent 公共组件 -->
+    <div class="flex-1 overflow-hidden">
+      <FormEditorContent
+        ref="editorRef"
+        :step="currentStep"
+        :show-steps="true"
+        :show-actions="false"
+        :workflow-mode="true"
+        @update:step="currentStep = $event"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.design-editor-panel {
+  /* box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1); */
+}
+</style>
diff --git a/web/apps/web-ele/src/components/form-editor/FormEditorContent.vue b/web/apps/web-ele/src/components/form-editor/FormEditorContent.vue
new file mode 100644
index 0000000..929c81f
--- /dev/null
+++ b/web/apps/web-ele/src/components/form-editor/FormEditorContent.vue
@@ -0,0 +1,329 @@
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import {
+  ElButton,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElInputNumber,
+  ElMessage,
+  ElOption,
+  ElSelect,
+  ElSteps,
+  ElStep,
+} from 'element-plus';
+
+import PublishInfoEditor, { type FormPublishInput } from './PublishInfoEditor.vue';
+
+export interface BasicFormData {
+  code: string;
+  description: string;
+  form_type: 'normal' | 'workflow';
+  name: string;
+  sort: number;
+}
+
+export interface TableConfig {
+  alias?: string;
+  fields?: any[];
+  id?: string;
+  meta?: Record<string, any>;
+  tableName?: string;
+  type?: string;
+}
+
+export interface FormEditorData {
+  basicForm: BasicFormData;
+  formConfig: {
+    disabled: boolean;
+    formBackground: boolean;
+    formBorder: boolean;
+    formBorderRadius: number;
+    formMargin: number;
+    formMaxWidth: number;
+    formPadding: number;
+    formShadow: boolean;
+    formWidth: string;
+    items: any[];
+    itemSpacing: number;
+    labelPosition: 'left' | 'right' | 'top';
+    labelWidth: number;
+    lifecycleHooks?: any[];
+    size: 'default' | 'large' | 'small';
+    tableConfigs: TableConfig[];
+  };
+  formFields: any[];
+  listConfig: Record<string, any>;
+  publishData?: FormPublishInput;
+  tableConfigs: TableConfig[];
+}
+
+const props = withDefaults(
+  defineProps<{
+    initialBasicForm?: BasicFormData;
+    initialListDesign?: Record<string, any>;
+    initialTableConfigs?: TableConfig[];
+    readonly?: boolean;
+    showActions?: boolean;
+    showSteps?: boolean;
+    step?: number;
+    workflowMode?: boolean;
+  }>(),
+  {
+    initialBasicForm: undefined,
+    initialListDesign: undefined,
+    initialTableConfigs: undefined,
+    readonly: false,
+    showActions: true,
+    showSteps: true,
+    step: undefined,
+    workflowMode: false,
+  },
+);
+
+const emit = defineEmits<{
+  cancel: [];
+  save: [data: FormEditorData];
+  'step-change': [step: number];
+  'update:step': [step: number];
+}>();
+
+const internalStep = ref(0);
+const currentStep = computed({
+  get: () => (props.step === undefined ? internalStep.value : props.step),
+  set: (val) => {
+    if (props.step === undefined) internalStep.value = val;
+    else emit('update:step', val);
+    emit('step-change', val);
+  },
+});
+
+const basicForm = ref<BasicFormData>({
+  code: '',
+  description: '',
+  form_type: 'normal',
+  name: '',
+  sort: 0,
+});
+const tableConfigs = ref<TableConfig[]>([]);
+const formConfigText = ref('{}');
+const listConfigText = ref('{}');
+const formFields = ref<any[]>([]);
+const publishData = ref<FormPublishInput>({
+  menu_icon: 'lucide:file-text',
+  menu_name: '',
+  menu_order: 0,
+  menu_parent_id: undefined,
+});
+
+const steps = computed(() => {
+  const base = [
+    { title: $t('form-manager.editor.steps.basic') || '基础信息' },
+    { title: $t('form-manager.editor.steps.database') || '数据表' },
+    { title: $t('form-manager.editor.steps.form') || '表单设计' },
+    { title: $t('form-manager.editor.steps.list') || '列表设计' },
+  ];
+  if (props.workflowMode) {
+    base.push({ title: $t('form-manager.editor.steps.publish') || '发布配置' });
+  }
+  return base;
+});
+
+const canGoPrev = computed(() => currentStep.value > 0);
+const isLastStep = computed(() => currentStep.value === steps.value.length - 1);
+
+watch(
+  () => props.initialBasicForm,
+  (val) => {
+    if (val) basicForm.value = { ...val };
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.initialTableConfigs,
+  (val) => {
+    if (val) tableConfigs.value = [...val];
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.initialListDesign,
+  (val) => {
+    if (val) listConfigText.value = JSON.stringify(val, null, 2);
+  },
+  { immediate: true },
+);
+
+watch(
+  () => basicForm.value.name,
+  (name) => {
+    if (props.workflowMode && name && !publishData.value.menu_name) {
+      publishData.value.menu_name = name;
+    }
+  },
+);
+
+function parseJson(text: string, fallback: any) {
+  if (!text.trim()) return fallback;
+  return JSON.parse(text);
+}
+
+function buildDefaultFormConfig(items: any[] = []) {
+  return {
+    disabled: false,
+    formBackground: false,
+    formBorder: false,
+    formBorderRadius: 4,
+    formMargin: 0,
+    formMaxWidth: 0,
+    formPadding: 20,
+    formShadow: false,
+    formWidth: '100%',
+    items,
+    itemSpacing: 18,
+    labelPosition: 'right' as const,
+    labelWidth: 120,
+    size: 'default' as const,
+    tableConfigs: tableConfigs.value,
+  };
+}
+
+function getData(): FormEditorData {
+  const formConfig = {
+    ...buildDefaultFormConfig(),
+    ...parseJson(formConfigText.value, {}),
+  };
+  const listConfig = parseJson(listConfigText.value, {});
+  return {
+    basicForm: { ...basicForm.value },
+    formConfig,
+    formFields: [...formFields.value],
+    listConfig,
+    publishData: props.workflowMode ? { ...publishData.value } : undefined,
+    tableConfigs: [...tableConfigs.value],
+  };
+}
+
+function setData(data: Partial<FormEditorData>) {
+  if (data.basicForm) basicForm.value = { ...data.basicForm };
+  if (data.tableConfigs) tableConfigs.value = [...data.tableConfigs];
+  if (data.formConfig) {
+    formConfigText.value = JSON.stringify(data.formConfig, null, 2);
+    formFields.value = data.formFields || data.formConfig.items || [];
+  }
+  if (data.listConfig) listConfigText.value = JSON.stringify(data.listConfig, null, 2);
+  if (data.formFields) formFields.value = [...data.formFields];
+  if (data.publishData) publishData.value = { ...publishData.value, ...data.publishData };
+}
+
+function handlePrev() {
+  if (canGoPrev.value) currentStep.value -= 1;
+}
+
+function handleNext() {
+  if (!isLastStep.value) currentStep.value += 1;
+}
+
+function handleSave() {
+  try {
+    emit('save', getData());
+  } catch {
+    ElMessage.error('JSON 配置格式不正确');
+  }
+}
+
+defineExpose({ getData, setData });
+</script>
+
+<template>
+  <div class="flex h-full min-h-0 flex-col">
+    <div v-if="showSteps" class="border-border border-b px-6 py-4">
+      <ElSteps :active="currentStep" align-center finish-status="success">
+        <ElStep v-for="item in steps" :key="item.title" :title="item.title" />
+      </ElSteps>
+    </div>
+
+    <div class="min-h-0 flex-1 overflow-auto p-6">
+      <ElForm v-if="currentStep === 0" :model="basicForm" label-width="100px">
+        <ElFormItem label="名称" required>
+          <ElInput v-model="basicForm.name" :disabled="readonly" />
+        </ElFormItem>
+        <ElFormItem label="编码" required>
+          <ElInput v-model="basicForm.code" :disabled="readonly" />
+        </ElFormItem>
+        <ElFormItem label="类型">
+          <ElSelect v-model="basicForm.form_type" :disabled="readonly" class="w-full">
+            <ElOption label="普通表单" value="normal" />
+            <ElOption label="流程表单" value="workflow" />
+          </ElSelect>
+        </ElFormItem>
+        <ElFormItem label="排序">
+          <ElInputNumber v-model="basicForm.sort" :disabled="readonly" class="w-full" />
+        </ElFormItem>
+        <ElFormItem label="描述">
+          <ElInput v-model="basicForm.description" :disabled="readonly" type="textarea" />
+        </ElFormItem>
+      </ElForm>
+
+      <div v-else-if="currentStep === 1" class="space-y-3">
+        <div class="text-sm text-muted-foreground">
+          轻量版保留 AI 生成的数据表结构确认，不加载在线开发表设计器。
+        </div>
+        <ElInput
+          :model-value="JSON.stringify(tableConfigs, null, 2)"
+          readonly
+          resize="none"
+          type="textarea"
+        />
+      </div>
+
+      <div v-else-if="currentStep === 2" class="h-full min-h-[420px]">
+        <ElInput
+          v-model="formConfigText"
+          :readonly="readonly"
+          class="h-full"
+          resize="none"
+          type="textarea"
+          placeholder="表单配置 JSON"
+        />
+      </div>
+
+      <div v-else-if="currentStep === 3" class="h-full min-h-[420px]">
+        <ElInput
+          v-model="listConfigText"
+          :readonly="readonly"
+          class="h-full"
+          resize="none"
+          type="textarea"
+          placeholder="列表配置 JSON"
+        />
+      </div>
+
+      <PublishInfoEditor
+        v-else
+        v-model="publishData"
+        :form-code="basicForm.code"
+      />
+    </div>
+
+    <div v-if="showActions" class="border-border flex justify-end gap-2 border-t px-6 py-4">
+      <ElButton @click="emit('cancel')">{{ $t('common.cancel') }}</ElButton>
+      <ElButton :disabled="!canGoPrev" @click="handlePrev">上一步</ElButton>
+      <ElButton v-if="!isLastStep" type="primary" @click="handleNext">下一步</ElButton>
+      <ElButton v-else type="primary" @click="handleSave">{{ $t('common.save') }}</ElButton>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+:deep(.el-textarea),
+:deep(.el-textarea__inner) {
+  height: 100%;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+</style>
diff --git a/web/apps/web-ele/src/components/form-editor/PageBasicInfoEditor.vue b/web/apps/web-ele/src/components/form-editor/PageBasicInfoEditor.vue
new file mode 100644
index 0000000..da89e8d
--- /dev/null
+++ b/web/apps/web-ele/src/components/form-editor/PageBasicInfoEditor.vue
@@ -0,0 +1,140 @@
+<script lang="ts" setup>
+/**
+ * 页面基础信息编辑器
+ * 供 page-manager 和工作流节点共用
+ */
+import { watch } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import {
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElInputNumber,
+  ElOption,
+  ElSelect,
+} from 'element-plus';
+
+export interface PageBasicInfo {
+  name: string;
+  code: string;
+  category: string;
+  description: string;
+  sort: number;
+}
+
+interface Props {
+  modelValue: PageBasicInfo;
+  isEditMode?: boolean;
+  showTitle?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isEditMode: false,
+  showTitle: false,
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: PageBasicInfo];
+}>();
+
+// 更新表单数据
+function updateFormData(key: keyof PageBasicInfo, value: any) {
+  emit('update:modelValue', {
+    ...props.modelValue,
+    [key]: value,
+  });
+}
+
+// 分类选项
+const categoryOptions = [
+  { label: $t('page-manager.categoryMap.dashboard'), value: 'dashboard' },
+  { label: $t('page-manager.categoryMap.portal'), value: 'portal' },
+  { label: $t('page-manager.categoryMap.databoard'), value: 'databoard' },
+  { label: $t('page-manager.categoryMap.other'), value: 'other' },
+];
+
+// 监听 modelValue 变化
+watch(
+  () => props.modelValue,
+  () => {},
+  { deep: true },
+);
+</script>
+
+<template>
+  <div>
+    <h3 v-if="showTitle" class="mb-6 text-center text-lg font-medium">
+      {{ $t('page-manager.editor.steps.basic') }}
+    </h3>
+    <ElForm :model="modelValue" label-width="100px" label-position="right">
+      <ElFormItem :label="$t('page-manager.name')" required>
+        <ElInput
+          :model-value="modelValue.name"
+          :placeholder="$t('page-manager.placeholder.name')"
+          clearable
+          @update:model-value="updateFormData('name', $event)"
+        />
+      </ElFormItem>
+
+      <ElFormItem :label="$t('page-manager.code')" required>
+        <ElInput
+          :model-value="modelValue.code"
+          :placeholder="$t('page-manager.placeholder.code')"
+          clearable
+          :disabled="isEditMode"
+          @update:model-value="updateFormData('code', $event)"
+        />
+        <template #error>
+          <div
+            v-if="
+              modelValue.code &&
+              !/^[a-zA-Z][a-zA-Z0-9_]*$/.test(modelValue.code)
+            "
+            class="el-form-item__error"
+          >
+            {{ $t('page-manager.codeFormatError') }}
+          </div>
+        </template>
+      </ElFormItem>
+
+      <ElFormItem :label="$t('page-manager.category')">
+        <ElSelect
+          :model-value="modelValue.category"
+          :placeholder="$t('page-manager.placeholder.category')"
+          class="w-full"
+          clearable
+          @update:model-value="updateFormData('category', $event)"
+        >
+          <ElOption
+            v-for="opt in categoryOptions"
+            :key="opt.value"
+            :label="opt.label"
+            :value="opt.value"
+          />
+        </ElSelect>
+      </ElFormItem>
+
+      <ElFormItem :label="$t('common.sort')">
+        <ElInputNumber
+          :model-value="modelValue.sort"
+          :min="0"
+          :max="9999"
+          class="w-full"
+          @update:model-value="updateFormData('sort', $event ?? 0)"
+        />
+      </ElFormItem>
+
+      <ElFormItem :label="$t('page-manager.description')">
+        <ElInput
+          :model-value="modelValue.description"
+          type="textarea"
+          :rows="4"
+          :placeholder="$t('page-manager.placeholder.description')"
+          @update:model-value="updateFormData('description', $event)"
+        />
+      </ElFormItem>
+    </ElForm>
+  </div>
+</template>
diff --git a/web/apps/web-ele/src/components/form-editor/PageEditorContent.vue b/web/apps/web-ele/src/components/form-editor/PageEditorContent.vue
new file mode 100644
index 0000000..233d5df
--- /dev/null
+++ b/web/apps/web-ele/src/components/form-editor/PageEditorContent.vue
@@ -0,0 +1,210 @@
+<script lang="ts" setup>
+import type { PageBasicInfo } from './PageBasicInfoEditor.vue';
+import type { PagePublishInfo } from './PagePublishInfoEditor.vue';
+
+import { computed, ref, watch } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import { ElButton, ElInput, ElMessage, ElStep, ElSteps } from 'element-plus';
+
+import PageBasicInfoEditor from './PageBasicInfoEditor.vue';
+import PagePublishInfoEditor from './PagePublishInfoEditor.vue';
+
+export interface PageEditorData {
+  basicForm: PageBasicInfo;
+  pageConfig: Record<string, any>;
+  publishData?: PagePublishInfo;
+}
+
+const props = withDefaults(
+  defineProps<{
+    initialBasicForm?: PageBasicInfo;
+    initialPageConfig?: Record<string, any>;
+    initialPublishData?: PagePublishInfo;
+    isEditMode?: boolean;
+    readonly?: boolean;
+    showActions?: boolean;
+    showSteps?: boolean;
+    step?: number;
+    workflowMode?: boolean;
+  }>(),
+  {
+    initialBasicForm: undefined,
+    initialPageConfig: undefined,
+    initialPublishData: undefined,
+    isEditMode: false,
+    readonly: false,
+    showActions: true,
+    showSteps: true,
+    step: undefined,
+    workflowMode: false,
+  },
+);
+
+const emit = defineEmits<{
+  cancel: [];
+  save: [data: PageEditorData];
+  'step-change': [step: number];
+  'update:step': [step: number];
+}>();
+
+const internalStep = ref(0);
+const currentStep = computed({
+  get: () => (props.step === undefined ? internalStep.value : props.step),
+  set: (val) => {
+    if (props.step === undefined) internalStep.value = val;
+    else emit('update:step', val);
+    emit('step-change', val);
+  },
+});
+
+const basicForm = ref<PageBasicInfo>({
+  category: 'dashboard',
+  code: '',
+  description: '',
+  name: '',
+  sort: 0,
+});
+
+const pageConfigText = ref('{}');
+const publishData = ref<PagePublishInfo>({
+  menu_icon: 'lucide:layout-dashboard',
+  menu_name: '',
+  menu_order: 0,
+  menu_parent_id: undefined,
+});
+
+const steps = computed(() => {
+  const base = [
+    { title: $t('page-manager.editor.steps.basic') || '基础信息' },
+    { title: $t('page-manager.editor.steps.design') || '页面设计' },
+  ];
+  if (props.workflowMode) {
+    base.push({ title: $t('page-manager.editor.steps.publish') || '发布配置' });
+  }
+  return base;
+});
+
+const canGoPrev = computed(() => currentStep.value > 0);
+const isLastStep = computed(() => currentStep.value === steps.value.length - 1);
+
+watch(
+  () => props.initialBasicForm,
+  (val) => {
+    if (val) basicForm.value = { ...val };
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.initialPageConfig,
+  (val) => {
+    if (val) pageConfigText.value = JSON.stringify(val, null, 2);
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.initialPublishData,
+  (val) => {
+    if (val) publishData.value = { ...val };
+  },
+  { immediate: true },
+);
+
+watch(
+  () => basicForm.value.name,
+  (name) => {
+    if (props.workflowMode && name && !publishData.value.menu_name) {
+      publishData.value.menu_name = name;
+    }
+  },
+);
+
+function getData(): PageEditorData {
+  const pageConfig = pageConfigText.value.trim()
+    ? JSON.parse(pageConfigText.value)
+    : {};
+  return {
+    basicForm: { ...basicForm.value },
+    pageConfig,
+    publishData: props.workflowMode ? { ...publishData.value } : undefined,
+  };
+}
+
+function setData(data: Partial<PageEditorData>) {
+  if (data.basicForm) basicForm.value = { ...data.basicForm };
+  if (data.pageConfig) pageConfigText.value = JSON.stringify(data.pageConfig, null, 2);
+  if (data.publishData) publishData.value = { ...publishData.value, ...data.publishData };
+}
+
+function handlePrev() {
+  if (canGoPrev.value) currentStep.value -= 1;
+}
+
+function handleNext() {
+  if (!isLastStep.value) currentStep.value += 1;
+}
+
+function handleSave() {
+  try {
+    emit('save', getData());
+  } catch {
+    ElMessage.error('页面配置不是有效 JSON');
+  }
+}
+
+defineExpose({ getData, setData });
+</script>
+
+<template>
+  <div class="flex h-full min-h-0 flex-col">
+    <div v-if="showSteps" class="border-border border-b px-6 py-4">
+      <ElSteps :active="currentStep" align-center finish-status="success">
+        <ElStep v-for="item in steps" :key="item.title" :title="item.title" />
+      </ElSteps>
+    </div>
+
+    <div class="min-h-0 flex-1 overflow-auto p-6">
+      <PageBasicInfoEditor
+        v-if="currentStep === 0"
+        v-model="basicForm"
+        :is-edit-mode="isEditMode"
+      />
+      <div v-else-if="currentStep === 1" class="h-full min-h-[460px]">
+        <div class="mb-3 text-sm text-muted-foreground">
+          轻量版保留 AI 生成页面配置确认，不加载大屏可视化设计器。
+        </div>
+        <ElInput
+          v-model="pageConfigText"
+          :readonly="readonly"
+          class="h-full"
+          resize="none"
+          type="textarea"
+          placeholder="页面配置 JSON"
+        />
+      </div>
+      <PagePublishInfoEditor
+        v-else
+        v-model="publishData"
+        :page-code="basicForm.code"
+      />
+    </div>
+
+    <div v-if="showActions" class="border-border flex justify-end gap-2 border-t px-6 py-4">
+      <ElButton @click="emit('cancel')">{{ $t('common.cancel') }}</ElButton>
+      <ElButton :disabled="!canGoPrev" @click="handlePrev">上一步</ElButton>
+      <ElButton v-if="!isLastStep" type="primary" @click="handleNext">下一步</ElButton>
+      <ElButton v-else type="primary" @click="handleSave">{{ $t('common.save') }}</ElButton>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+:deep(.el-textarea),
+:deep(.el-textarea__inner) {
+  height: 100%;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+</style>
diff --git a/web/apps/web-ele/src/components/form-editor/PagePublishInfoEditor.vue b/web/apps/web-ele/src/components/form-editor/PagePublishInfoEditor.vue
new file mode 100644
index 0000000..d45a4f5
--- /dev/null
+++ b/web/apps/web-ele/src/components/form-editor/PagePublishInfoEditor.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+/**
+ * 页面发布信息编辑器
+ * 供 page-manager 和工作流节点共用
+ */
+import type { MenuItem } from '#/components/zq-form/zq-menu-selector/types';
+
+import { watch } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import { ElForm, ElFormItem, ElInput, ElInputNumber } from 'element-plus';
+
+import { ZqIconPicker } from '#/components/zq-form/zq-icon-picker';
+import { ZqMenuSelector } from '#/components/zq-form/zq-menu-selector';
+import { useAppContextStore } from '#/store/app-context';
+
+export interface PagePublishInfo {
+  menu_name: string;
+  menu_parent_id?: string;
+  menu_icon: string;
+  menu_order: number;
+}
+
+interface Props {
+  modelValue: PagePublishInfo;
+  pageCode?: string;
+  showRouteInfo?: boolean;
+  routePrefix?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  pageCode: '',
+  showRouteInfo: true,
+  routePrefix: '/page/',
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: PagePublishInfo];
+}>();
+
+const appContextStore = useAppContextStore();
+
+// 更新表单数据
+function updateFormData(key: keyof PagePublishInfo, value: any) {
+  emit('update:modelValue', {
+    ...props.modelValue,
+    [key]: value,
+  });
+}
+
+// 菜单选择回调
+function handleMenuChange(menu: MenuItem | MenuItem[] | null) {
+  if (menu && !Array.isArray(menu)) {
+    updateFormData('menu_parent_id', menu.id);
+  } else {
+    updateFormData('menu_parent_id', undefined);
+  }
+}
+
+// 监听 modelValue 变化
+watch(
+  () => props.modelValue,
+  () => {},
+  { deep: true },
+);
+</script>
+
+<template>
+  <ElForm :model="modelValue" label-width="100px">
+    <!-- 菜单配置 -->
+    <div class="mb-4 font-medium">
+      {{ $t('page-manager.publishDialog.menuConfig') }}
+    </div>
+
+    <ElFormItem :label="$t('page-manager.publishDialog.menuName')" required>
+      <ElInput
+        :model-value="modelValue.menu_name"
+        :placeholder="$t('page-manager.placeholder.name')"
+        @update:model-value="updateFormData('menu_name', $event)"
+      />
+    </ElFormItem>
+
+    <ElFormItem :label="$t('page-manager.publishDialog.parentMenu')">
+      <ZqMenuSelector
+        :model-value="modelValue.menu_parent_id || null"
+        mode="dialog"
+        :placeholder="$t('page-manager.publishDialog.parentMenuPlaceholder')"
+        :application-id="appContextStore.currentApp?.id"
+        @change="handleMenuChange"
+      />
+    </ElFormItem>
+
+    <ElFormItem :label="$t('page-manager.publishDialog.menuIcon')">
+      <ZqIconPicker
+        :model-value="modelValue.menu_icon"
+        prefix="lucide"
+        :auto-fetch-api="false"
+        class="w-full"
+        @update:model-value="updateFormData('menu_icon', $event)"
+      />
+    </ElFormItem>
+
+    <ElFormItem :label="$t('common.sort')">
+      <ElInputNumber
+        :model-value="modelValue.menu_order"
+        :min="0"
+        :max="9999"
+        class="w-full"
+        @update:model-value="updateFormData('menu_order', $event ?? 0)"
+      />
+    </ElFormItem>
+
+    <!-- 路由信息 -->
+    <template v-if="showRouteInfo && pageCode">
+      <div class="mb-4 mt-6 font-medium">
+        {{ $t('page-manager.publishDialog.routeInfo') }}
+      </div>
+
+      <ElFormItem :label="$t('page-manager.publishDialog.accessPath')">
+        <ElInput
+          :model-value="`${routePrefix}${pageCode}`"
+          disabled
+          class="text-muted-foreground"
+        />
+      </ElFormItem>
+    </template>
+  </ElForm>
+</template>
diff --git a/web/apps/web-ele/src/components/form-editor/PublishInfoEditor.vue b/web/apps/web-ele/src/components/form-editor/PublishInfoEditor.vue
new file mode 100644
index 0000000..6524682
--- /dev/null
+++ b/web/apps/web-ele/src/components/form-editor/PublishInfoEditor.vue
@@ -0,0 +1,122 @@
+<script lang="ts" setup>
+import type { MenuItem } from '#/components/zq-form/zq-menu-selector/types';
+
+import { watch } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import { ElForm, ElFormItem, ElInput, ElInputNumber } from 'element-plus';
+
+import { ZqIconPicker } from '#/components/zq-form/zq-icon-picker';
+import { ZqMenuSelector } from '#/components/zq-form/zq-menu-selector';
+import { useAppContextStore } from '#/store/app-context';
+
+interface Props {
+  modelValue: FormPublishInput;
+  formCode?: string;
+  showRouteInfo?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  formCode: '',
+  showRouteInfo: true,
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: FormPublishInput];
+}>();
+
+const appContextStore = useAppContextStore();
+
+// 更新表单数据
+function updateFormData(key: keyof FormPublishInput, value: any) {
+  emit('update:modelValue', {
+    ...props.modelValue,
+    [key]: value,
+  });
+}
+
+// 菜单选择回调
+function handleMenuChange(menu: MenuItem | MenuItem[] | null) {
+  if (menu && !Array.isArray(menu)) {
+    updateFormData('menu_parent_id', menu.id);
+  } else {
+    updateFormData('menu_parent_id', undefined);
+  }
+}
+
+// 监听 modelValue 变化，确保响应式
+watch(
+  () => props.modelValue,
+  () => {},
+  { deep: true },
+);
+</script>
+
+<template>
+  <ElForm :model="modelValue" label-width="100px">
+    <!-- 菜单配置 -->
+    <div class="mb-4 font-medium">
+      {{ $t('form-manager.publishDialog.menuConfig') }}
+    </div>
+
+    <ElFormItem :label="$t('form-manager.publishDialog.menuName')" required>
+      <ElInput
+        :model-value="modelValue.menu_name"
+        :placeholder="$t('form-manager.placeholder.name')"
+        @update:model-value="updateFormData('menu_name', $event)"
+      />
+    </ElFormItem>
+
+    <ElFormItem :label="$t('form-manager.publishDialog.parentMenu')">
+      <ZqMenuSelector
+        :model-value="modelValue.menu_parent_id || null"
+        mode="dialog"
+        :placeholder="$t('form-manager.publishDialog.parentMenuPlaceholder')"
+        :application-id="appContextStore.currentApp?.id"
+        @change="handleMenuChange"
+      />
+    </ElFormItem>
+
+    <ElFormItem :label="$t('form-manager.publishDialog.menuIcon')">
+      <ZqIconPicker
+        :model-value="modelValue.menu_icon"
+        prefix="lucide"
+        :auto-fetch-api="false"
+        class="w-full"
+        @update:model-value="updateFormData('menu_icon', $event)"
+      />
+    </ElFormItem>
+
+    <ElFormItem :label="$t('common.sort')">
+      <ElInputNumber
+        :model-value="modelValue.menu_order"
+        :min="0"
+        :max="999"
+        class="w-full"
+        @update:model-value="updateFormData('menu_order', $event)"
+      />
+    </ElFormItem>
+
+    <!-- 路由信息 -->
+    <template v-if="showRouteInfo && formCode">
+      <div class="mb-4 mt-6 font-medium">
+        {{ $t('form-manager.publishDialog.routeInfo') }}
+      </div>
+
+      <ElFormItem :label="$t('form-manager.publishDialog.accessPath')">
+        <ElInput
+          :model-value="`/form-render/${formCode}`"
+          disabled
+          class="text-muted-foreground"
+        />
+      </ElFormItem>
+    </template>
+  </ElForm>
+</template>
+export interface FormPublishInput {
+  menu_icon: string;
+  menu_name: string;
+  menu_order: number;
+  menu_parent_id?: string;
+}
diff --git a/web/apps/web-ele/src/components/form-editor/SystemSummaryConfirmPanel.vue b/web/apps/web-ele/src/components/form-editor/SystemSummaryConfirmPanel.vue
new file mode 100644
index 0000000..e09262b
--- /dev/null
+++ b/web/apps/web-ele/src/components/form-editor/SystemSummaryConfirmPanel.vue
@@ -0,0 +1,317 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import {
+  AppWindow,
+  CircleCheck,
+  ExternalLink,
+  FileText,
+  LayoutDashboard,
+  Maximize,
+  Minimize,
+} from '@vben/icons';
+import { useI18n } from '@vben/locales';
+
+import { ElButton, ElCard, ElEmpty } from 'element-plus';
+
+export interface SystemSummaryData {
+  type: 'system_summary';
+  title: string;
+  data: {
+    app?: {
+      code: string;
+      description: string;
+      icon: string;
+      id: string;
+      link: string;
+      name: string;
+    };
+    base_url?: string;
+    created_at: string;
+    dashboard?: {
+      code: string;
+      description: string;
+      icon: string;
+      id: string;
+      link: string;
+      name: string;
+    };
+    forms: Array<{
+      code: string;
+      description: string;
+      icon: string;
+      id: string;
+      link: string;
+      name: string;
+    }>;
+    statistics?: {
+      forms_count: number;
+      has_app: boolean;
+      has_dashboard: boolean;
+      total_modules: number;
+    };
+    title: string;
+  };
+  nodeId: string;
+}
+
+const props = defineProps<{
+  data?: SystemSummaryData;
+  visible: boolean;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+  confirm: [data: any];
+  'update:visible': [value: boolean];
+}>();
+
+const { t } = useI18n();
+
+// 全屏状态
+const isFullscreen = ref(false);
+
+// 切换全屏
+const toggleFullscreen = () => {
+  isFullscreen.value = !isFullscreen.value;
+};
+
+const dialogVisible = computed({
+  get: () => props.visible,
+  set: (val) => emit('update:visible', val),
+});
+
+const summaryData = computed(() => props.data?.data || ({} as any));
+const statistics = computed(() => summaryData.value.statistics);
+const app = computed(() => summaryData.value.app);
+const forms = computed(() => summaryData.value.forms || []);
+const dashboard = computed(() => summaryData.value.dashboard);
+
+const handleConfirm = () => {
+  emit('confirm', summaryData.value);
+};
+
+const handleClose = () => {
+  dialogVisible.value = false;
+  emit('close');
+};
+
+const openLink = (link: string) => {
+  if (link) {
+    const baseUrl = summaryData.value.base_url || '';
+    const fullUrl = baseUrl ? `${baseUrl}${link}` : link;
+    window.open(fullUrl, '_blank');
+  }
+};
+</script>
+
+<template>
+  <div
+    v-if="visible"
+    class="border-border bg-card flex flex-col rounded-lg"
+    :class="[isFullscreen ? 'fixed inset-0 z-50 ml-0' : 'ml-3 h-full w-full']"
+  >
+    <!-- 头部 -->
+    <div
+      class="border-border bg-muted/50 flex items-center justify-between border-b px-4 py-3"
+    >
+      <div class="text-foreground font-medium">
+        {{ data?.title || t('ai.systemSummary.title') }}
+      </div>
+      <div class="flex items-center gap-2">
+        <ElButton size="small" @click="handleClose">
+          {{ t('common.cancel') }}
+        </ElButton>
+        <ElButton size="small" type="primary" @click="handleConfirm">
+          <CircleCheck class="mr-1 size-4" />
+          {{ t('ai.systemSummary.complete') }}
+        </ElButton>
+        <ElButton
+          link
+          :icon="isFullscreen ? Minimize : Maximize"
+          :title="isFullscreen ? '退出全屏' : '全屏'"
+          @click="toggleFullscreen"
+        />
+      </div>
+    </div>
+
+    <!-- 内容 -->
+    <div class="flex-1 overflow-auto p-6">
+      <div
+        class="mb-6 flex items-center gap-3 border-b border-green-200 pb-4 dark:border-green-800"
+      >
+        <div
+          class="flex size-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-900"
+        >
+          <CircleCheck class="size-6 text-green-600 dark:text-green-400" />
+        </div>
+        <div>
+          <h2 class="text-xl font-semibold text-green-700 dark:text-green-300">
+            {{ summaryData.title || t('ai.systemSummary.title') }}
+          </h2>
+          <p class="text-muted-foreground text-sm">
+            {{ t('ai.systemSummary.subtitle') }}
+          </p>
+        </div>
+      </div>
+
+      <div v-if="statistics" class="mb-6 grid grid-cols-3 gap-4">
+        <div
+          class="rounded-lg border bg-blue-50 p-4 text-center dark:bg-blue-950"
+        >
+          <div class="text-3xl font-bold text-blue-600 dark:text-blue-400">
+            {{ statistics.has_app ? 1 : 0 }}
+          </div>
+          <div class="text-muted-foreground mt-1 text-sm">
+            {{ t('ai.systemSummary.app') }}
+          </div>
+        </div>
+        <div
+          class="rounded-lg border bg-purple-50 p-4 text-center dark:bg-purple-950"
+        >
+          <div class="text-3xl font-bold text-purple-600 dark:text-purple-400">
+            {{ statistics.forms_count }}
+          </div>
+          <div class="text-muted-foreground mt-1 text-sm">
+            {{ t('ai.systemSummary.formModules') }}
+          </div>
+        </div>
+        <div
+          class="rounded-lg border bg-orange-50 p-4 text-center dark:bg-orange-950"
+        >
+          <div class="text-3xl font-bold text-orange-600 dark:text-orange-400">
+            {{ statistics.has_dashboard ? 1 : 0 }}
+          </div>
+          <div class="text-muted-foreground mt-1 text-sm">
+            {{ t('ai.systemSummary.dashboard') }}
+          </div>
+        </div>
+      </div>
+
+      <div v-if="app" class="mb-6">
+        <h3 class="mb-3 flex items-center gap-2 font-medium">
+          <AppWindow class="size-5 text-blue-500" />
+          {{ t('ai.systemSummary.appInfo') }}
+        </h3>
+        <ElCard
+          shadow="hover"
+          class="cursor-pointer"
+          @click="openLink(app.link)"
+        >
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-3">
+              <div
+                class="flex size-10 items-center justify-center rounded-lg bg-blue-100 dark:bg-blue-900"
+              >
+                <AppWindow class="size-5 text-blue-600 dark:text-blue-400" />
+              </div>
+              <div>
+                <div class="font-medium">{{ app.name }}</div>
+                <div class="text-muted-foreground text-sm">
+                  {{ app.description || app.code }}
+                </div>
+              </div>
+            </div>
+            <ElButton
+              v-if="app.link"
+              type="primary"
+              link
+              @click.stop="openLink(app.link)"
+            >
+              <ExternalLink class="mr-1 size-4" />
+              {{ t('ai.systemSummary.visit') }}
+            </ElButton>
+          </div>
+        </ElCard>
+      </div>
+
+      <div v-if="forms.length > 0" class="mb-6">
+        <h3 class="mb-3 flex items-center gap-2 font-medium">
+          <FileText class="size-5 text-purple-500" />
+          {{ t('ai.systemSummary.formModulesTitle') }}
+          <span class="text-muted-foreground text-sm">({{ forms.length }})</span>
+        </h3>
+        <div class="space-y-3">
+          <ElCard
+            v-for="form in forms"
+            :key="form.id || form.code"
+            shadow="hover"
+            class="cursor-pointer"
+            @click="openLink(form.link)"
+          >
+            <div class="flex items-center justify-between">
+              <div class="flex items-center gap-3">
+                <div
+                  class="flex size-10 items-center justify-center rounded-lg bg-purple-100 dark:bg-purple-900"
+                >
+                  <FileText
+                    class="size-5 text-purple-600 dark:text-purple-400"
+                  />
+                </div>
+                <div>
+                  <div class="font-medium">{{ form.name }}</div>
+                  <div class="text-muted-foreground text-sm">
+                    {{ form.description || form.code }}
+                  </div>
+                </div>
+              </div>
+              <ElButton
+                v-if="form.link"
+                type="primary"
+                link
+                @click.stop="openLink(form.link)"
+              >
+                <ExternalLink class="mr-1 size-4" />
+                {{ t('ai.systemSummary.visit') }}
+              </ElButton>
+            </div>
+          </ElCard>
+        </div>
+      </div>
+
+      <div v-if="dashboard" class="mb-6">
+        <h3 class="mb-3 flex items-center gap-2 font-medium">
+          <LayoutDashboard class="size-5 text-orange-500" />
+          {{ t('ai.systemSummary.dashboardTitle') }}
+        </h3>
+        <ElCard
+          shadow="hover"
+          class="cursor-pointer"
+          @click="openLink(dashboard.link)"
+        >
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-3">
+              <div
+                class="flex size-10 items-center justify-center rounded-lg bg-orange-100 dark:bg-orange-900"
+              >
+                <LayoutDashboard
+                  class="size-5 text-orange-600 dark:text-orange-400"
+                />
+              </div>
+              <div>
+                <div class="font-medium">{{ dashboard.name }}</div>
+                <div class="text-muted-foreground text-sm">
+                  {{ dashboard.description || dashboard.code }}
+                </div>
+              </div>
+            </div>
+            <ElButton
+              v-if="dashboard.link"
+              type="primary"
+              link
+              @click.stop="openLink(dashboard.link)"
+            >
+              <ExternalLink class="mr-1 size-4" />
+              {{ t('ai.systemSummary.visit') }}
+            </ElButton>
+          </div>
+        </ElCard>
+      </div>
+
+      <ElEmpty
+        v-if="!app && forms.length === 0 && !dashboard"
+        :description="t('ai.systemSummary.noData')"
+      />
+    </div>
+  </div>
+</template>