表单与列表设计器配置去重优化实施计划

For agentic workers: 按任务顺序执行，完成每个任务后做一次局部编译或页面验证。不要按旧行号盲改，先用文中关键字定位当前代码。

Goal: 将低代码对象设计器里重复出现的“编辑表单布局、弹窗方式、弹窗宽度”等配置收敛到表单设计器单一入口，并补齐字段组件类型切换与最大长度的高可见配置。

Architecture: 表单设计器的 schema.layout 作为编辑表单布局与弹窗配置的主数据源；CRUD 选项和列表设计器只展示摘要与列表专属开关。列表运行态通过 BusinessListDesigner.buildDesignerRuntimeCrudProps 把 schema.layout 同步到 AiCrudPage props，保留历史 editZone/tableZone 配置兜底，避免旧应用配置丢失。

Tech Stack: Vue 3 <script setup> + Naive UI + 现有低代码 formDesignerSchema/viewSchema 协议。

背景

当前低代码对象设计器中，以下配置在多个入口重复维护，用户容易不知道应该改哪里，且保存后可能出现表单设计和列表预览不一致：

配置项	表单属性 → 表单项配置	CRUD 选项 → 编辑弹窗	列表设计 → 表单与弹窗
编辑打开方式	已有	重复可编辑	重复可编辑
弹窗宽度	缺失	重复可编辑	重复可编辑
详情弹窗宽度	不单独暴露，默认跟随弹窗宽度	重复可编辑	重复可编辑
抽屉方向	缺失	缺失	重复可编辑
编辑表单列数/间距	已有	重复可编辑	重复可编辑
标签位置/对齐/宽度	已有	部分重复	重复可编辑

此外，字段组件还有两个体验问题：

input/textarea 的最大长度藏在“字段约束”组合区里，不够突出。
选中字段后不能直接切换同类组件类型，例如 input 切换为 textarea，select 切换为 radio/dictSelect。

范围

本次要做

表单属性 schema.layout 补齐弹窗宽度、抽屉方向配置；详情弹窗宽度默认跟随弹窗宽度，仅保留历史字段兼容。
CRUD 选项 Drawer 的“编辑弹窗”改为只读摘要，仅保留“每页条数”可编辑。
列表设计器的“表单与弹窗”改为只读摘要，仅保留 editShowFeedback/hideModalFooter/hideDefaultDetailContent 这类列表行为开关。
BusinessListDesigner 运行态 props 优先读取 schema.layout，历史 editZone/tableZone 配置作为兜底。
字段属性面板新增同类组件类型切换，并同步字段资产元数据。
最大长度提升为独立配置项，放在字段组件基础配置中更靠前的位置。

本次不做

不改后端接口、数据库表结构和 Flyway 脚本。
不迁移历史数据，只做读取优先级兼容。
不移除运行态对旧 editZone/tableZone 字段的兼容读取。
不新增新的页面设计协议；继续复用 schema.layout、crudOptions、selectedBlock.props、runtimeCrudProps。

关键约束

schema.layout 是主配置源；新增配置必须写入 schema.layout，不要再写入 crudOptions 或列表 block props。
BusinessListDesigner.vue 当前 buildDesignerRuntimeCrudProps(schema, fields, customActions) 使用的就是当前列表 schema，不存在 props.formSchema 参数；不要按旧方案新增 props.formSchema。
ForgePropertyPanel.vue 中字段默认映射常量当前叫 componentFieldDefaults，不是 FIELD_TYPE_DEFAULTS。
drawerPlacementOptions 当前在 ListPageGridDesigner.vue 已存在，但 ForgePropertyPanel.vue 中未发现；如不存在需在 ForgePropertyPanel.vue script 区新增。
组件类型切换只允许同组切换，不支持跨语义类型切换，例如不能把文件上传切成日期。
切换组件类型必须保留字段编码、字段名称、校验、默认值等通用配置，同时清理不兼容的组件私有 props。

Task 1：补齐表单属性中的弹窗配置

文件：

Modify: forge-admin-ui/src/views/app-center/components/designer/forge-form-designer/ForgePropertyPanel.vue

定位：

<n-collapse-item title="表单项配置" name="layout">
const formOpenModeOptions = [...]
function updateFormOpenModeLayout(value)

要求：

在“编辑打开方式”下方新增两个配置行：
- 弹窗宽度：写入 schema.layout.modalWidth，默认 800px，并同步写入 schema.layout.detailModalWidth 作为运行态兼容值。
- 抽屉方向：写入 schema.layout.drawerPlacement，默认 right。
若 ForgePropertyPanel.vue 中没有 drawerPlacementOptions，新增：

const drawerPlacementOptions = [
  { label: '右侧', value: 'right' },
  { label: '左侧', value: 'left' },
]

参考 UI：

<div class="compact-config-row">
  <label>弹窗宽度</label>
  <n-input
    :value="schema.layout?.modalWidth || '800px'"
    placeholder="800px / 60vw"
    size="small"
    @update:value="updateFormModalWidth"
  />
</div>
<div class="compact-config-row">
  <label>抽屉方向</label>
  <n-select
    :value="schema.layout?.drawerPlacement || 'right'"
    :options="drawerPlacementOptions"
    size="small"
    @update:value="updateFormLayout({ drawerPlacement: $event || 'right' })"
  />
</div>

Task 2：CRUD 选项 Drawer 移除重复编辑项

文件：

Modify: forge-admin-ui/src/views/app-center/components/designer/forge-form-designer/ForgePropertyPanel.vue

定位：

CRUD 选项面板中的 <section class="panel-item">
标题文本：编辑弹窗

要求：

移除以下可编辑项：
- editLabelWidth
- editXGap
- editYGap
- formOpenMode/modalType
- modalWidth
- detailModalWidth
替换为只读摘要，摘要统一从 schema.layout 读取。
保留“每页条数”，因为它是列表分页配置，不属于表单布局。

参考 UI：

<section class="panel-item">
  <div class="panel-item-title">
    编辑弹窗
    <small class="panel-item-hint">配置已移至「表单属性 → 表单项配置」</small>
  </div>
  <div class="crud-readonly-summary">
    <span>打开方式：{{ schema.layout?.formOpenMode || schema.layout?.modalType || 'modal' }}</span>
    <span>弹窗宽度：{{ schema.layout?.modalWidth || '800px' }}</span>
    <span>表单列数：{{ normalizedFormGridColumns }}</span>
  </div>
  <n-form-item label="每页条数">
    <n-input-number
      :value="crudOptions.pageSize || 10"
      :min="1"
      :max="200"
      @update:value="updateCrudOption('pageSize', $event || 10)"
    />
  </n-form-item>
</section>

Task 3：列表设计器“表单与弹窗”改为只读摘要

文件：

Modify: forge-admin-ui/src/components/lowcode-builder/page/ListPageGridDesigner.vue

定位：

<n-collapse-item ... name="edit" title="表单与弹窗">
resolveAiCrudEditFlags
updateAiCrudEditFlags

要求：

移除以下可编辑项：
- editGridCols
- editLabelWidth
- editLabelPlacement
- editLabelAlign
- editSize
- editXGap
- editYGap
- formOpenMode/modalType
- drawerPlacement
- modalWidth
- detailModalWidth
保留只读摘要，摘要从 selectedBlock.props 读取。这里的数据由 BusinessListDesigner.buildDesignerRuntimeCrudProps 从 schema.layout 同步。
保留“详情与页脚”复选框：editShowFeedback、hideModalFooter、hideDefaultDetailContent。

参考 UI：

<n-collapse-item
  v-if="selectedBlock.blockType === 'AiCrudPage' && propertySectionVisible(['表单与弹窗', '新增', '编辑', '表单', '弹窗', '抽屉', '详情', '页脚', '打开方式', '标签位置', '标签对齐', '标签宽度', '表单列数'])"
  name="edit"
  title="表单与弹窗"
>
  <div class="property-search-anchor" data-property-search="表单与弹窗 新增 编辑 表单 弹窗 抽屉 详情 页脚 打开方式 标签位置 标签对齐 标签宽度 表单列数" />
  <div class="form-modal-help">
    弹窗方式和表单布局已统一在「表单设计」的「表单属性 → 表单项配置」中管理。
  </div>
  <div class="form-modal-readonly-summary">
    <div class="readonly-summary-row">
      <span>打开方式</span>
      <strong>{{ selectedBlock.props?.formOpenMode || selectedBlock.props?.modalType || 'modal' }}</strong>
    </div>
    <div class="readonly-summary-row">
      <span>弹窗宽度</span>
      <strong>{{ selectedBlock.props?.modalWidth || '800px' }}</strong>
    </div>
    <div class="readonly-summary-row">
      <span>编辑列数</span>
      <strong>{{ selectedBlock.props?.editGridCols || 1 }}</strong>
    </div>
  </div>
  <n-form-item label="详情与页脚">
    <div class="metrics-editor">
      <n-checkbox-group
        :value="resolveAiCrudEditFlags(selectedBlock)"
        @update:value="updateAiCrudEditFlags"
      >
        <n-space>
          <n-checkbox value="editShowFeedback" label="校验反馈" />
          <n-checkbox value="hideModalFooter" label="隐藏页脚" />
          <n-checkbox value="hideDefaultDetailContent" label="隐藏默认详情" />
        </n-space>
      </n-checkbox-group>
    </div>
  </n-form-item>
</n-collapse-item>

Task 4：同步数据流改为 `schema.layout` 优先

文件：

Modify: forge-admin-ui/src/views/app-center/components/designer/BusinessListDesigner.vue

定位：

const designerRuntimeCrudProps = computed(() => buildDesignerRuntimeCrudProps(localSchema.value, designFields.value, listCustomActions.value))
function buildDesignerRuntimeCrudProps(schema = {}, fields = [], customActions = [])
function resolveDesignerFormOpenMode(tableProps = {}, editProps = {})
function resolveDesignerModalType(formOpenMode = 'modal', tableProps = {}, editProps = {})

要求：

在 buildDesignerRuntimeCrudProps 中新增：

const formLayout = schema.layout || {}

运行态 props 读取优先级统一为：

schema.layout -> editZone.props -> tableZone.props -> 默认值

调整 resolvedFormOpenMode / resolvedModalType 计算，确保 schema.layout.formOpenMode 优先。

参考实现要点：

const formLayout = schema.layout || {}
const resolvedFormOpenMode = resolveDesignerFormOpenMode(formLayout, tableProps, editProps)
const resolvedModalType = resolveDesignerModalType(resolvedFormOpenMode, formLayout, tableProps, editProps)

editGridCols: formLayout.gridColumns || formLayout.gridCols || editProps.editGridCols || tableProps.editGridCols || 1,
editLabelWidth: formLayout.labelWidth || editProps.editLabelWidth || editProps.labelWidth || tableProps.editLabelWidth || 'auto',
editLabelPlacement: formLayout.labelPlacement || editProps.editLabelPlacement || editProps.labelPlacement || tableProps.editLabelPlacement || 'left',
editLabelAlign: formLayout.labelAlign || editProps.editLabelAlign || editProps.labelAlign || tableProps.editLabelAlign || 'right',
editSize: formLayout.size || editProps.editSize || editProps.size || tableProps.editSize || 'medium',
editXGap: formLayout.columnGap ?? editProps.editXGap ?? editProps.columnGap ?? tableProps.editXGap ?? 16,
editYGap: formLayout.rowGap ?? editProps.editYGap ?? editProps.rowGap ?? tableProps.editYGap ?? 8,
modalWidth: formLayout.modalWidth || editProps.modalWidth || tableProps.modalWidth || '800px',
detailModalWidth: formLayout.detailModalWidth || formLayout.modalWidth || editProps.detailModalWidth || editProps.modalWidth || tableProps.detailModalWidth || tableProps.modalWidth || '800px',
formOpenMode: resolvedFormOpenMode,
modalType: resolvedModalType,
drawerPlacement: formLayout.drawerPlacement || editProps.drawerPlacement || tableProps.drawerPlacement || 'right',

函数签名建议：

function resolveDesignerFormOpenMode(formLayout = {}, tableProps = {}, editProps = {}) {
  const value = formLayout.formOpenMode || formLayout.modalType || editProps.formOpenMode || tableProps.formOpenMode || editProps.modalType || tableProps.modalType || 'modal'
  return value === 'tabWorkspace' ? 'tabWorkspace' : (['modal', 'drawer', 'flat'].includes(value) ? value : 'modal')
}

function resolveDesignerModalType(formOpenMode = 'modal', formLayout = {}, tableProps = {}, editProps = {}) {
  if (['modal', 'drawer'].includes(formOpenMode))
    return formOpenMode
  const value = formLayout.modalType || editProps.modalType || tableProps.modalType || 'modal'
  return ['modal', 'drawer'].includes(value) ? value : 'modal'
}

Task 5：字段属性新增组件类型切换

文件：

Modify: forge-admin-ui/src/views/app-center/components/designer/forge-form-designer/ForgePropertyPanel.vue

定位：

选中组件属性面板：<n-collapse-item title="标识" name="identity">
const componentFieldDefaults = {...}
function updateComponent(patch)
function createFieldAssetFromSelectedComponent()

要求：

在“显示名称”下方新增“组件类型”选择器。
仅字段组件允许切换，并且只允许同组组件互换。
切换时必须同步：
- componentKey
- fieldBinding.fieldType
- fieldBinding.dataType
- fieldBinding.componentType
- 字段资产更新事件 fieldAssetUpdated
切换时应保留通用 props：defaultValue、placeholder、disabled、clearable、required、maxlength、showCount、dictType。
当切换到非文本类组件时，清理文本专属的 maxlength/showCount，除非目标组件仍是 input/textarea。

新增 UI：

<n-form-item v-if="canSwitchComponentType" label="组件类型">
  <n-select
    :value="selectedComponent.componentKey"
    :options="switchableComponentOptions"
    filterable
    @update:value="handleSwitchComponentType"
  />
</n-form-item>

新增逻辑：

const switchableComponentGroups = [
  ['input', 'textarea', 'number', 'inputNumber', 'money'],
  ['select', 'radio', 'checkbox', 'dictSelect'],
  ['date', 'datetime'],
  ['fileUpload', 'imageUpload'],
  ['objectReference', 'recordSelector'],
]

const componentTypeLabelMap = {
  input: '单行输入',
  textarea: '多行文本',
  number: '数字输入',
  inputNumber: '数字输入',
  money: '金额',
  select: '下拉选择',
  radio: '单选框',
  checkbox: '多选框',
  dictSelect: '字典选择',
  date: '日期',
  datetime: '日期时间',
  fileUpload: '文件上传',
  imageUpload: '图片上传',
  objectReference: '引用对象',
  recordSelector: '记录选择器',
}

const canSwitchComponentType = computed(() => {
  if (!isField.value || !selectedComponent.value)
    return false
  const key = selectedComponent.value.componentKey
  return switchableComponentGroups.some(group => group.includes(key))
})

const switchableComponentOptions = computed(() => {
  const key = selectedComponent.value?.componentKey
  const group = switchableComponentGroups.find(item => item.includes(key)) || []
  return group.map(value => ({
    label: componentTypeLabelMap[value] || value,
    value,
  }))
})

function pickSwitchableCommonProps(sourceProps = {}, newKey = '') {
  const commonKeys = ['defaultValue', 'placeholder', 'disabled', 'clearable', 'required', 'dictType']
  const nextProps = {}
  commonKeys.forEach((key) => {
    if (sourceProps[key] !== undefined)
      nextProps[key] = sourceProps[key]
  })
  if (['input', 'textarea'].includes(newKey)) {
    if (sourceProps.maxlength !== undefined)
      nextProps.maxlength = sourceProps.maxlength
    if (sourceProps.showCount !== undefined)
      nextProps.showCount = sourceProps.showCount
  }
  return nextProps
}

function handleSwitchComponentType(newKey) {
  const component = selectedComponent.value
  if (!component || !newKey || newKey === component.componentKey)
    return
  const group = switchableComponentGroups.find(item => item.includes(component.componentKey))
  if (!group?.includes(newKey))
    return
  const defaults = componentFieldDefaults[newKey] || componentFieldDefaults.input
  const nextFieldBinding = {
    ...(component.fieldBinding || {}),
    fieldType: defaults.fieldType,
    dataType: defaults.dataType,
    componentType: defaults.componentType || newKey,
  }
  updateComponent({
    componentKey: newKey,
    props: pickSwitchableCommonProps(component.props || {}, newKey),
    fieldBinding: nextFieldBinding,
  })
  const asset = selectedFieldAsset.value
  if (asset && selectedFieldCode.value) {
    emit('fieldAssetUpdated', {
      ...asset,
      fieldCode: selectedFieldCode.value,
      fieldType: defaults.fieldType,
      dataType: defaults.dataType,
      length: defaults.length,
      precision: defaults.precision,
      componentType: defaults.componentType || newKey,
      queryType: defaults.queryType,
      fieldBinding: nextFieldBinding,
      basicProps: {
        ...(asset.basicProps || {}),
        ...pickSwitchableCommonProps(component.props || {}, newKey),
        fieldBinding: nextFieldBinding,
      },
    })
  }
}

Task 6：字段最大长度提升可见性

文件：

Modify: forge-admin-ui/src/views/app-center/components/designer/forge-form-designer/ForgePropertyPanel.vue

定位：

<n-collapse-item v-if="isField" title="字段组件" name="field">
当前“字段约束”里的 supportsFieldMaxLength 配置块。

要求：

在“默认值”下方新增独立的“最大长度”表单项。
从“字段约束”中移除原来的最大长度行，避免重复。
仍然复用现有 supportsFieldMaxLength、selectedFieldMaxLength、updateFieldMaxLength。

参考 UI：

<n-form-item v-if="supportsFieldMaxLength" label="最大长度">
  <div class="option-editor-row two-columns">
    <n-input-number
      :value="selectedFieldMaxLength"
      :min="1"
      :max="2048"
      :show-button="false"
      clearable
      placeholder="最大长度"
      @update:value="updateFieldMaxLength"
    />
    <n-switch
      :value="selectedComponent.props?.showCount === true"
      size="small"
      @update:value="updateComponent({ props: { showCount: $event } })"
    >
      <template #checked>计数</template>
      <template #unchecked>计数</template>
    </n-switch>
  </div>
</n-form-item>

Task 7：样式补充

文件：

Modify: forge-admin-ui/src/views/app-center/components/designer/forge-form-designer/ForgePropertyPanel.vue
Modify: forge-admin-ui/src/components/lowcode-builder/page/ListPageGridDesigner.vue

要求：

新增只读摘要样式，保持后台属性面板紧凑，不使用大面积卡片。
如果同名 class 已存在，复用并补齐缺失属性，不重复定义。

参考样式：

.crud-readonly-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 8px 12px;
  background: var(--n-color-hover, #f7f8fa);
  border-radius: 6px;
  font-size: 12px;
  color: var(--n-text-color-3);
  margin-bottom: 12px;
}

.panel-item-hint {
  font-weight: normal;
  font-size: 11px;
  color: var(--n-text-color-3);
  margin-left: 8px;
}

.form-modal-readonly-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: var(--n-color-hover, #f7f8fa);
  border-radius: 6px;
  margin-bottom: 12px;
}

.readonly-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}

.readonly-summary-row span {
  color: var(--n-text-color-3);
}

.readonly-summary-row strong {
  color: var(--n-text-color-1);
  font-weight: 500;
  text-align: right;
}

验证清单

执行前读取 code-copilot/rules/automated-testing-standard.md，验证结果追加到当前变更的 execution-log.md（若本需求进入 code-copilot 变更流程）。
source ~/.nvm/nvm.sh && nvm use v20.19.0 && cd forge-admin-ui && pnpm build 通过。
打开表单设计器，进入“表单属性 → 表单项配置”，可配置编辑打开方式、弹窗宽度、抽屉方向、表单列数、标签位置/对齐/宽度。
打开 CRUD 选项 Drawer，“编辑弹窗”只显示只读摘要和“每页条数”。
打开列表设计器，选中 AiCrudPage，“表单与弹窗”只显示只读摘要和“详情与页脚”复选框。
修改表单属性中的弹窗宽度、抽屉方向后，列表设计器摘要和运行时预览保持一致；详情弹窗宽度跟随弹窗宽度。
选中 input 字段，可切换为 textarea/number/inputNumber/money，画布即时更新。
选中 select 字段，可切换为 radio/checkbox/dictSelect，字段绑定和字典配置不丢失。
选中 fileUpload 字段，可切换为 imageUpload，字段资产同步为对应组件类型。
选中 input/textarea 字段，“最大长度”在字段组件基础区域直接可见；清空最大长度后字段资产中的 length/basicProps.maxlength 同步清理。

风险与兼容

旧应用可能已经在 editZone.props 或 tableZone.props 保存了弹窗配置。本次不能删除旧字段，只调整读取优先级，确保旧应用没有 schema.layout 时仍按旧配置渲染。
GridBlockRenderer.vue 仍会从 block props 和 runtimeCrudProps 合并运行态属性。只要 BusinessListDesigner 正确把 schema.layout 输出到 runtimeCrudProps，列表预览与运行态可保持兼容。
组件类型切换会影响字段数据类型。对已经发布并建表的业务对象，后续实际执行时需要结合发布校验提示用户确认字段类型变更风险；本次需求只做设计态元数据同步，不做数据库迁移。

表单列表配置去重优化_1e744c2a.md 21 KB History Raw

表单与列表设计器配置去重优化实施计划

背景

范围

本次要做

本次不做

关键约束

Task 1：补齐表单属性中的弹窗配置

Task 2：CRUD 选项 Drawer 移除重复编辑项

Task 3：列表设计器“表单与弹窗”改为只读摘要

Task 4：同步数据流改为 schema.layout 优先

Task 5：字段属性新增组件类型切换

Task 6：字段最大长度提升可见性

Task 7：样式补充

验证清单

风险与兼容

表单列表配置去重优化_1e744c2a.md 21 KB

History Raw

Task 4：同步数据流改为 `schema.layout` 优先