From fefdcb9ca85e375b0b83c477bb0bb1adc4d8693e Mon Sep 17 00:00:00 2001
From: oneao <hi_itao@163.com>
Date: Fri, 28 Aug 2026 19:04:13 +0800
Subject: [PATCH] =?UTF-8?q?refactor(module-management):=20R3=20=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=E2=80=94=E2=80=94form-edit=20=E6=8B=86=E5=88=86?=
 =?UTF-8?q?=E6=94=B6=E5=B0=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 接 index.vue：ModuleFormEditPanel import 改为 ./components/form-edit/FormEditPanel.vue
- 删除旧 components/ModuleFormEditPanel.vue（3168 行）
- 清理壳组件死样式（lib/ inspector/ prop/ toggle 等已迁至子组件）
- 验证：form-edit 组件图编译通过，dnd 14 例全绿，lint 零新增告警

按停损条款：FormCanvas/useFormDrag 交织最深且无测试保护，保留现状，留待下轮。
---
 .../components/ModuleFormEditPanel.vue        | 3453 -----------------
 .../components/form-edit/FormEditPanel.vue    |  320 +-
 .../views/system/module-management/index.vue  |    2 +-
 3 files changed, 2 insertions(+), 3773 deletions(-)
 delete mode 100644 code/fms/fms-vue/src/views/system/module-management/components/ModuleFormEditPanel.vue

diff --git a/code/fms/fms-vue/src/views/system/module-management/components/ModuleFormEditPanel.vue b/code/fms/fms-vue/src/views/system/module-management/components/ModuleFormEditPanel.vue
deleted file mode 100644
index 8a0719c5..00000000
--- a/code/fms/fms-vue/src/views/system/module-management/components/ModuleFormEditPanel.vue
+++ /dev/null
@@ -1,3453 +0,0 @@
-<script setup>
-/**
- * 主表表单设计面板（s_field_edit）。
- * 提供「设计视图 / 数据视图」两种形态，共享同一份草稿数据：
- * - 设计视图：字段库 | 表单画布 | 属性面板。字段可添加、任意位置拖拽、跨分组移动，
- *   支持 24 栅格、动态栅格分配、textarea 高度、分组方向和删除草稿项。
- * - 数据视图：保留原有 FmsTable 高密度编辑表格（行拖拽排序、同步到列表/查询配置）。
- */
-import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
-import {
-  Trash2,
-  Asterisk,
-  Eye,
-  EyeOff,
-  GripVertical,
-  PanelLeftClose,
-  PanelLeftOpen,
-  PanelRightClose,
-  PanelRightOpen,
-  Check,
-  X,
-  Plus,
-  Settings2,
-} from '@lucide/vue'
-import draggable from 'vuedraggable'
-import {
-  Message,
-  Button,
-  Input,
-  Popover,
-  Radio,
-  RadioGroup,
-  Select,
-  Switch,
-  Tabs,
-  Checkbox,
-  DatePicker,
-  Form,
-  FormItem,
-  Modal,
-} from '@/components/ui'
-import FmsTable from '@/components/fms-table/FmsTable.vue'
-import { createTempId } from '@/utils/tempId'
-import { groupIdOfRow as groupIdOf } from '../composables/useGroupTree'
-import { useFieldLookup } from '../composables/useFieldLookup'
-import {
-  applyClipboardProps,
-  buildClipboardProps,
-  buildVisibilityMap,
-  createEditRowFactory,
-  filterLibraryFields,
-  renumberRows,
-  toggleFlag,
-} from '../editPanelShared'
-
-const props = defineProps({
-  moduleId: { type: String, required: true },
-  editConfig: { type: Array, default: () => [] },
-  listConfig: { type: Array, default: () => [] },
-  queryConfig: { type: Array, default: () => [] },
-  fields: { type: Array, default: () => [] },
-  groups: { type: Array, default: () => [] },
-  /** 模块编辑方式：form 主表（表单画布设计）| table 子表（表格列设计） */
-  editMode: { type: String, default: 'form' },
-  loading: { type: Boolean, default: false },
-  /** 面板当前是否可见（父级以 v-show 切换页签）：不可见时 Delete 等快捷键不生效 */
-  active: { type: Boolean, default: true },
-})
-
-const emit = defineEmits([
-  'update',
-  'updateGroups',
-  'syncList',
-  'syncQuery',
-  'update:editMode',
-])
-
-const localEdit = ref([])
-const activeKey = ref(null)
-
-function onEditModeChange(value) {
-  if (props.loading) return
-  emit('update:editMode', value || 'form')
-}
-
-/* ================= 视图形态 ================= */
-const viewMode = ref('design') // 'design' | 'data'
-const selectedRowKey = ref(null)
-const dragPayload = ref(null)
-const dragSourceId = ref(null)
-// 拖拽对齐提示：{ fieldId, pos: 'before' | 'after' | 'line-before' | 'newline' }
-const dragLine = ref(null)
-// 拖拽悬停中的分区 key（用于分组放置逻辑）
-const dragOverSection = ref(null)
-// 分组拖拽状态：同字段拖拽的 dragPayload，用于拖拽时其他分区变淡
-const sectionDragging = ref(false)
-
-/* ================= 分组宽度（外层 48 宫格，前端暂存不持久化） =================
- * 分组像字段一样按占格数流式排布：默认 48（独占一行），调小后自动并排换行；
- * 分组内部字段仍是独立 24 宫格 */
-const GROUP_GRID = 48
-// 分组设置弹窗的常用档位：分组宽度（48 宫格）与新建字段宽度（24 宫格）
-const GROUP_STEP_COLS = [48, 24, 16, 12]
-const GROUP_STEP_FIELDS = [24, 12, 8, 6]
-const sectionCols = reactive({}) // key(g-xxx/ungrouped) → 占格数
-
-function colsOf(key) {
-  return sectionCols[key] ?? GROUP_GRID
-}
-
-function setSectionCols(key, val) {
-  const n = Math.round(Number(val))
-  sectionCols[key] =
-    Number.isFinite(n) && n > 0 ? Math.min(Math.max(n, 1), GROUP_GRID) : GROUP_GRID
-}
-
-/* 分组设置弹窗：正在设置的分区 + 草稿值 */
-const sectionSettingsKey = ref(null)
-const sectionSettingsOpen = computed({
-  get: () => sectionSettingsKey.value !== null,
-  set: (v) => { if (!v) sectionSettingsKey.value = null },
-})
-const sectionSettings = reactive({ cols: GROUP_GRID, fieldCols: 24 })
-
-/* 表单预览弹窗（主表）：model 仅为 Form 组件提供数据上下文，预览不绑定真实值 */
-const previewOpen = ref(false)
-const previewModel = reactive({})
-
-function openSectionSettings(section) {
-  sectionSettingsKey.value = section.key
-  sectionSettings.cols = section.cols
-  sectionSettings.fieldCols = section.fieldCols
-}
-
-function saveSectionSettings() {
-  const key = sectionSettingsKey.value
-  if (key) {
-    setSectionCols(key, sectionSettings.cols)
-    setSectionFieldCols(key, sectionSettings.fieldCols)
-  }
-  sectionSettingsKey.value = null
-}
-
-/* 分组内新建字段默认宽度（24 宫格，前端暂存）：key → 占格数，默认 24 独占一行 */
-const sectionFieldCols = reactive({})
-
-function fieldColsOf(key) {
-  return sectionFieldCols[key] ?? 24
-}
-
-function setSectionFieldCols(key, val) {
-  const n = Math.round(Number(val))
-  sectionFieldCols[key] =
-    Number.isFinite(n) && n > 0 ? Math.min(Math.max(n, 1), 24) : 24
-}
-
-/* ================= 设计工作区：属性面板折叠 ================= */
-const inspectorCollapsed = ref(false) // 属性面板折叠
-
-/* 拖拽过程中的 Esc 取消：置取消标记并清除放置意图，
-   之后继续移动不再重算意图，松手后不做任何变更（取消真正生效） */
-let dragCancelled = false
-
-function onDragKeydown(evt) {
-  if (evt.key === 'Escape') {
-    dragCancelled = true
-    dragLine.value = null
-    dragOverSection.value = null
-  }
-}
-
-watch(
-  () => props.editConfig,
-  (val) => {
-    if (val === localEdit.value) return
-    localEdit.value = val?.map((row) => ({ ...row })) || []
-  },
-  { immediate: true },
-)
-
-function emitUpdate() {
-  emit('update', localEdit.value)
-}
-
-/* ================= 数据视图：行排序 ================= */
-function onRowOrderChange(rows) {
-  const sorted = rows.map((row, index) => ({ ...row, b_xh: (index + 1) * 10 }))
-  localEdit.value = sorted
-  emitUpdate()
-}
-
-function normalizedRow(row) {
-  return {
-    ...row,
-    b_colspan: spanOf(row),
-    b_height: row?.b_height == null ? null : Number(row.b_height) || null,
-  }
-}
-
-function emitRows(rows) {
-  localEdit.value = rows.map(normalizedRow)
-  emitUpdate()
-}
-
-/* 逻辑行推导：与 CSS grid 自动换行一致——从分组段首部顺序向前打包，
-   累计宽度超过 24 即换行。返回目标字段所在视觉行的索引，及行内其它字段宽度和 */
-function collectLineIndexes(rows, insertedIndex) {
-  const groupId = groupIdOf(rows[insertedIndex])
-  let start = insertedIndex
-  while (start > 0 && groupIdOf(rows[start - 1]) === groupId) start--
-  const idxs = []
-  let sum = 0
-  let found = false
-  for (let i = start; i < rows.length && groupIdOf(rows[i]) === groupId; i++) {
-    const span = spanOf(rows[i])
-    if (sum + span > 24 && idxs.length) {
-      if (found) break
-      idxs.length = 0
-      sum = 0
-    }
-    idxs.push(i)
-    sum += span
-    if (i === insertedIndex) found = true
-  }
-  const prevSum = idxs.reduce((s, i) => (i === insertedIndex ? s : s + spanOf(rows[i])), 0)
-  return { idxs, prevSum }
-}
-
-/* 插入后动态分配宽度：
-   - 原行已满（prevSum >= 24）：整行（含新字段）均分，余数补给靠前的已有字段
-   - 原行未满：fill=true（从字段库拖入）时新字段填满剩余；fill=false（组内移动）时保持所有字段原宽度 */
-function rebalanceInsert(rows, insertedIndex, { fill = true } = {}) {
-  const next = rows.map((row) => ({ ...row }))
-  const inserted = next[insertedIndex]
-  if (!inserted) return next
-  const { idxs, prevSum } = collectLineIndexes(next, insertedIndex)
-  if (prevSum >= 24) {
-    const count = idxs.length
-    const base = Math.floor(24 / count)
-    const remainder = 24 - base * count
-    // 已有字段优先补给余数，新插入字段排最后（取较小值）
-    const existing = [...idxs].filter((i) => i !== insertedIndex).toSorted((a, b) => a - b)
-    const order = [...existing, insertedIndex]
-    order.forEach((idx, k) => {
-      next[idx].b_colspan = base + (k < remainder ? 1 : 0)
-    })
-  } else if (fill) {
-    // 从字段库拖入：新字段填满剩余空间
-    const othersSum = idxs.reduce((s, i) => (i === insertedIndex ? s : s + spanOf(next[i])), 0)
-    next[insertedIndex].b_colspan = 24 - othersSum
-  }
-  return next
-}
-
-/* ================= 公共查询表 ================= */
-const { fieldNameMap, fieldMap, fieldOf, fieldName, controlTypeLabel } = useFieldLookup(
-  () => props.fields,
-)
-
-const groupMap = computed(() => {
-  const map = new Map()
-  for (const group of props.groups || []) {
-    map.set(String(group.b_id), group)
-  }
-  return map
-})
-
-const groupOptions = computed(() => {
-  const options = []
-  for (const group of props.groups || []) {
-    if (Number(group.b_canuse) !== 1) continue
-    options.push({ label: group.b_title || `分组-${group.b_id}`, value: String(group.b_id) })
-  }
-  return options
-})
-
-/* ================= 数据视图：同步到列表 / 查询 ================= */
-function syncToList() {
-  if (props.loading) return
-  const visibleMap = buildVisibilityMap(localEdit.value)
-  if (visibleMap.size === 0) {
-    Message.info('编辑配置中没有字段')
-    return
-  }
-  let count = 0
-  const updated = (props.listConfig || []).map((row) => {
-    const target = visibleMap.get(String(row.b_field_id))
-    if (target !== undefined) {
-      count++
-      return { ...row, b_visible: target }
-    }
-    return row
-  })
-  emit('syncList', updated)
-  Message.success(`已同步 ${count} 条到列表配置`)
-}
-
-function syncToQuery() {
-  if (props.loading) return
-  const visibleMap = buildVisibilityMap(localEdit.value)
-  if (visibleMap.size === 0) {
-    Message.info('编辑配置中没有字段')
-    return
-  }
-  let count = 0
-  const updated = (props.queryConfig || []).map((row) => {
-    const target = visibleMap.get(String(row.b_field_id))
-    if (target !== undefined) {
-      count++
-      return { ...row, b_canuse: target }
-    }
-    return row
-  })
-  emit('syncQuery', updated)
-  Message.success(`已同步 ${count} 条到查询配置`)
-}
-
-/* ================= 数据视图：表格列 ================= */
-// 表单（主表）模式：编辑分组 / 栅格宽度 / 占位符 / 文本域高度
-function formDataColumns() {
-  return [
-    {
-      dataIndex: 'b_field_id',
-      title: '字段',
-      width: 180,
-      customCell: ({ row }) =>
-        fieldNameMap.value.get(String(row.b_field_id)) || row.b_field_id || '',
-    },
-    {
-      dataIndex: 'b_visible',
-      title: '显示',
-      width: 70,
-      align: 'center',
-      editor: { type: 'checkbox' },
-    },
-    {
-      dataIndex: 'b_required',
-      title: '必填',
-      width: 70,
-      align: 'center',
-      editor: { type: 'checkbox' },
-    },
-    {
-      dataIndex: 'b_readonly',
-      title: '只读',
-      width: 70,
-      align: 'center',
-      editor: { type: 'checkbox' },
-    },
-    {
-      dataIndex: 'b_disabled',
-      title: '禁用',
-      width: 70,
-      align: 'center',
-      editor: { type: 'checkbox' },
-    },
-    {
-      dataIndex: 'b_group_id',
-      title: '编辑分组',
-      width: 160,
-      editor: { type: 'select', options: () => groupOptions.value },
-    },
-    {
-      dataIndex: 'b_colspan',
-      title: '栅格宽度',
-      width: 120,
-      editor: { type: 'select', options: () => COLSPAN_OPTIONS },
-    },
-    { dataIndex: 'b_placeholder', title: '占位符', width: 160, editor: {} },
-    { dataIndex: 'b_height', title: '文本域高度', width: 100 },
-    { dataIndex: 'b_xh', title: '排序号', width: 90 },
-  ]
-}
-
-const dataColumns = computed(() => formDataColumns())
-
-/* ================= 设计视图：字段/分组推导 ================= */
-// 24 栅格制下的常用宽度选项（栅格宽度 b_colspan）
-const COLSPAN_OPTIONS = [
-  { label: '整行 24/24', value: '24' },
-  { label: '2/3 行 16/24', value: '16' },
-  { label: '半行 12/24', value: '12' },
-  { label: '1/3 行 8/24', value: '8' },
-  { label: '1/4 行 6/24', value: '6' },
-  { label: '1/6 行 4/24', value: '4' },
-]
-
-const TEXTAREA_HEIGHT_OPTIONS = [
-  { label: '小（80px）', value: '80' },
-  { label: '中（120px）', value: '120' },
-  { label: '大（180px）', value: '180' },
-]
-
-function spanOf(row) {
-  const v = Number(row?.b_colspan)
-  return v >= 1 && v <= 24 ? v : 24
-}
-
-function isTextarea(row) {
-  return fieldOf(row)?.b_type === 'textarea'
-}
-
-function fieldType(row) {
-  return fieldOf(row)?.b_type || 'input'
-}
-
-function placeholderOf(row) {
-  if (row?.b_placeholder) return row.b_placeholder
-  const map = {
-    input: '请输入',
-    textarea: '请输入',
-    number: '请输入数字',
-    money: '请输入金额',
-    date: '选择日期',
-    datetime: '选择日期时间',
-    select: '请选择',
-  }
-  return map[fieldType(row)] || '请输入'
-}
-
-function heightOf(row) {
-  if (!isTextarea(row)) return 48
-  const value = Number(row?.b_height)
-  return value >= 64 && value <= 480 ? value : 120
-}
-
-/* ---- 列头菜单（WYSIWYG 表格：⋯ 按钮 / 右键） ---- */
-
-const libSearch = ref('')
-// 字段库：展示模块的全部字段（含未加入表单的字段），按名称 a-z 排序（无类型分组小标题）；
-// 搜索时按名称/编码过滤，命中才显示
-const libraryFields = computed(() => filterLibraryFields(props.fields, libSearch.value))
-
-function isFieldAdded(field) {
-  return localEdit.value.some((row) => String(row.b_field_id) === String(field.b_id))
-}
-
-/* ================= 画布分组行缓存（vuedraggable 就地操作的可变数组） ================= */
-const sectionRowCache = reactive({})
-
-function rebuildSectionCache() {
-  const map = {}
-  const sorted = localEdit.value.toSorted((a, b) => Number(a.b_xh || 0) - Number(b.b_xh || 0))
-  for (const row of sorted) {
-    if (!fieldMap.value.has(String(row.b_field_id))) continue
-    const gid = row.b_group_id != null ? String(row.b_group_id) : ''
-    if (!map[gid]) map[gid] = []
-    map[gid].push(row)
-  }
-  // 空分组也保证有稳定的数组引用，否则 vuedraggable 绑定到临时空数组，拖入结果会丢失
-  for (const group of props.groups || []) {
-    const gid = String(group.b_id)
-    if (!map[gid]) map[gid] = []
-  }
-  for (const key of Object.keys(sectionRowCache)) delete sectionRowCache[key]
-  sectionRowCache[''] = map[''] || []
-  for (const [gid, rows] of Object.entries(map)) {
-    if (gid !== '') sectionRowCache[gid] = rows
-  }
-}
-
-watch([localEdit, () => props.groups], rebuildSectionCache, { deep: true, immediate: true })
-
-/* 分区持久顺序（含 ungrouped）：用户拖拽分组/未分组卡片后保持，canvasSections 按其排列，
- * 否则每次重建未分组都会弹回末尾 */
-const sectionOrderKeys = ref([])
-
-// 画布分区：按分组（b_xh 排序）+ 未分组兜底。
-// 未分组也是一种分组：可拖拽排序（顺序持久化）、标题不可改、header 有视觉区分。
-// 每个分区有 cols（外层 48 宫格占格数），默认 48 独占一行，调小后流式排布。
-const canvasSections = computed(() => {
-  const built = []
-  const sortedGroups = props.groups.toSorted((a, b) => (a.b_xh || 0) - (b.b_xh || 0))
-  for (const group of sortedGroups) {
-    const gid = String(group.b_id)
-    built.push({
-      key: `g-${gid}`,
-      // 标题留空则不渲染标题文字（分组仍作为布局分区）
-      title: (group.b_title || '').trim(),
-      group,
-      disabled: Number(group.b_canuse) !== 1,
-      rows: sectionRowCache[gid] || [],
-      cols: colsOf(`g-${gid}`),
-      fieldCols: fieldColsOf(`g-${gid}`),
-    })
-  }
-  // 未分组也是一种分组：有字段时作为分区展示（无字段时不占位）
-  if ((sectionRowCache[''] || []).length) {
-    built.push({
-      key: 'ungrouped',
-      title: '未分组',
-      group: null,
-      rows: sectionRowCache[''],
-      cols: colsOf('ungrouped'),
-      fieldCols: fieldColsOf('ungrouped'),
-    })
-  }
-  // 未初始化持久顺序：直接用默认顺序（分组 b_xh 排序 + 未分组垫底）
-  if (!sectionOrderKeys.value.length) return built
-  // 按持久顺序重排；不在顺序里的新 key 追加末尾（新增分组自动落底）
-  const byKey = new Map(built.map((s) => [s.key, s]))
-  const ordered = []
-  for (const key of sectionOrderKeys.value) {
-    if (byKey.has(key)) {
-      ordered.push(byKey.get(key))
-      byKey.delete(key)
-    }
-  }
-  for (const s of byKey.values()) ordered.push(s)
-  return ordered
-})
-
-function groupIdOfSection(section) {
-  return section.key === 'ungrouped' ? null : section.key.slice(2)
-}
-
-/* ================= 分组卡片拖拽排序（标题栏 grip 手柄） ================= */
-// sectionOrder 为 canvasSections 的可排副本，vuedraggable 就地重排后按新顺序重写 b_xh
-const sectionOrder = ref([])
-watch(
-  canvasSections,
-  (sections) => {
-    sectionOrder.value = sections.map((s) => s)
-    // 首次：初始化持久顺序（默认 = 当前分区顺序）
-    if (!sectionOrderKeys.value.length) {
-      sectionOrderKeys.value = sections.map((s) => s.key)
-    }
-  },
-  { immediate: true },
-)
-
-// 分组拖拽结束：清除拖拽状态，按新顺序重排 groups 的 b_xh 并提交（未分组是分区之一，
-// 持久顺序里记录它的位置，其余分组按其相对位置重排 b_xh）
-function onGroupDragEnd() {
-  sectionDragging.value = false
-  sectionOrderKeys.value = sectionOrder.value.map((s) => s.key)
-  const groupsMap = new Map((props.groups || []).map((g) => [String(g.b_id), g]))
-  const ordered = []
-  for (const section of sectionOrder.value) {
-    if (!section.group) continue
-    const group = groupsMap.get(String(section.group.b_id))
-    if (group) ordered.push(group)
-  }
-  if (!ordered.length || ordered.length !== (props.groups || []).length) return
-  emit(
-    'updateGroups',
-    ordered.map((g, i) => ({ ...g, b_xh: (i + 1) * 10 })),
-  )
-}
-
-/* ================= 分组标题内联编辑（点击分组名变输入框 + 确认/取消） ================= */
-const editingGroupKey = ref(null) // 正在编辑的分区 key（g-xxx / ungrouped）
-const groupTitleDraft = ref('')
-const sectionEditInput = ref(null) // 编辑态输入框，用于自动聚焦/全选
-
-// 提交正在编辑的标题（若编辑目标已被切换/删除，直接丢弃草稿，避免基于旧分组提交）
-function flushEditingGroupTitle() {
-  const key = editingGroupKey.value
-  if (!key) return
-  const section = canvasSections.value.find((s) => s.key === key)
-  if (section) commitEditGroupTitle(section)
-  else cancelEditGroupTitle()
-}
-
-function startEditGroupTitle(section) {
-  if (!section.group || props.loading) return // 未分组无编辑对象
-  // 先提交上一个正在编辑的分组标题，避免两处编辑互相覆盖
-  flushEditingGroupTitle()
-  editingGroupKey.value = section.key
-  groupTitleDraft.value = section.group.b_title || ''
-  // 下一帧聚焦输入框并全选文字，方便直接输入替换
-  nextTick(() => {
-    const el = sectionEditInput.value
-    if (!el) return
-    el.focus()
-    el.select()
-  })
-}
-
-function cancelEditGroupTitle() {
-  editingGroupKey.value = null
-  groupTitleDraft.value = ''
-}
-
-function commitEditGroupTitle(section) {
-  if (editingGroupKey.value !== section.key) return
-  const title = groupTitleDraft.value.trim()
-  editingGroupKey.value = null
-  groupTitleDraft.value = ''
-  // 允许清空标题（标题留空即表示不显示分组标题）
-  if (!section.group || section.group.b_title === title) return
-  // 不可变更新：生成新的 groups 数组（含修改后的分组对象），交由父级进入待保存状态
-  const updated = (props.groups || []).map((g) =>
-    String(g.b_id) === String(section.group.b_id) ? { ...g, b_title: title } : g,
-  )
-  emit('updateGroups', updated)
-}
-
-/* ================= 分组内联操作（添加） ================= */
-function nextGroupXh() {
-  return (props.groups || []).reduce((m, g) => Math.max(m, Number(g.b_xh || 0)), 0) + 10
-}
-
-/** 添加分组：插入一个空分组并立即进入内联命名 */
-function addGroup() {
-  if (props.loading) return
-  flushEditingGroupTitle()
-  const newGroup = {
-    b_id: createTempId(),
-    b_module_id: props.moduleId,
-    b_parent_id: null,
-    b_title: '',
-    b_xh: nextGroupXh(),
-    b_canuse: 1,
-    b_layout_direction: 'vertical',
-  }
-  emit('updateGroups', [...(props.groups || []), newGroup])
-  const key = `g-${newGroup.b_id}`
-  editingGroupKey.value = key
-  groupTitleDraft.value = ''
-  nextTick(() => {
-    document
-      .querySelector(`.mm-fdesign__section[data-section-key="${key}"] .mm-fdesign__section-edit`)
-      ?.focus?.()
-  })
-}
-
-/* 画布直接删除分组：其下字段移至「未分组」，子分组提升为顶级，并清理列表配置中的分组引用 */
-function deleteGroupDirect(section) {
-  const group = section?.group
-  if (!group || props.loading) return
-  const gid = String(group.b_id)
-  const rows = section.rows || []
-  const title = group.b_title || `分组-${gid}`
-  // 竞态兜底：若正在编辑该分组标题，先关闭编辑并把未提交的标题并入删除前的分组数组，
-  // 避免 blur 提交的 updateGroups 与本函数基于旧 props.groups 的结果互相覆盖
-  // 子分组提升为顶级（扁平分组：删除父分组后其子分组独立展示）
-  let groups = (props.groups || []).map((g) =>
-    String(g.b_parent_id) === gid ? { ...g, b_parent_id: null } : g,
-  )
-  if (editingGroupKey.value === section.key) {
-    const pendingTitle = groupTitleDraft.value.trim()
-    if (pendingTitle && pendingTitle !== group.b_title) {
-      groups = groups.map((g) =>
-        String(g.b_id) === gid ? { ...g, b_title: pendingTitle } : g,
-      )
-    }
-    cancelEditGroupTitle()
-  }
-  // 字段移到未分组
-  for (const row of localEdit.value) {
-    if (String(row.b_group_id || '') === gid) row.b_group_id = null
-  }
-  emitUpdate()
-  // 列表配置中引用该分组的行清理 b_group_id
-  const listUpdated = (props.listConfig || []).map((r) =>
-    String(r.b_group_id || '') === gid ? { ...r, b_group_id: null } : r,
-  )
-  if (
-    listUpdated.some((r, i) => JSON.stringify(r) !== JSON.stringify((props.listConfig || [])[i]))
-  ) {
-    emit('syncList', listUpdated)
-  }
-  emit('updateGroups', groups.filter((g) => String(g.b_id) !== gid))
-  Message.success(
-    rows.length
-      ? `已删除分组「${title}」，其下 ${rows.length} 个字段移至「未分组」`
-      : `已删除分组「${title}」`,
-  )
-}
-
-const selectedRow = computed(() => {
-  if (selectedRowKey.value == null) return null
-  return localEdit.value.find((row) => String(row.b_id) === String(selectedRowKey.value)) || null
-})
-
-function selectRow(row) {
-  selectedRowKey.value = row ? String(row.b_id) : null
-}
-
-// 字段库 → 画布：已加入则定位选中，未加入则按目标位置插入。
-// 表单行默认：b_colspan 取该分组设置的默认宽度（默认 24 独占一行），无 b_width
-const createEditRow = createEditRowFactory({
-  moduleId: props.moduleId,
-  getExtra: (field, groupId) => {
-    const sectionKey = groupId == null ? 'ungrouped' : `g-${String(groupId)}`
-    return { b_colspan: fieldColsOf(sectionKey) }
-  },
-})
-
-function insertField(
-  field,
-  { groupId = null, targetId = null, position = 'after', rebalance = true } = {},
-) {
-  if (!field || props.loading) return null
-  const existing = localEdit.value.find((r) => String(r.b_field_id) === String(field.b_id))
-  if (existing) return existing
-  const row = createEditRow(field, groupId)
-  const rows = localEdit.value.toSorted((a, b) => Number(a.b_xh || 0) - Number(b.b_xh || 0))
-  let insertIndex = rows.length
-  if (targetId != null) {
-    const targetIndex = rows.findIndex((item) => String(item.b_id) === String(targetId))
-    if (targetIndex >= 0) insertIndex = targetIndex + (position === 'after' ? 1 : 0)
-  } else {
-    const lastGroupIndex = rows.findLastIndex(
-      (item) => groupIdOf(item) === (groupId == null ? null : String(groupId)),
-    )
-    if (lastGroupIndex >= 0) insertIndex = lastGroupIndex + 1
-  }
-  rows.splice(insertIndex, 0, row)
-  if (rebalance) {
-    // 拖拽插入：按所在行动态分配宽度
-    const balanced = rebalanceInsert(rows, insertIndex)
-    emitRows(renumberRows(balanced))
-  } else {
-    // 点击新增：字段单独占据一整行（span=24），不触发动态分配
-    row.b_colspan = 24
-    emitRows(renumberRows(rows))
-  }
-  return row
-}
-
-/* 画布内定位卡片并滚动到可视区（字段库添加后自动跟随） */
-function scrollToRowCard(rowId) {
-  const selector = `.mm-fdesign__field[data-row-id="${rowId}"]`
-  document.querySelector(selector)?.scrollIntoView?.({ block: 'nearest', behavior: 'smooth' })
-}
-
-function selectField(field) {
-  if (!field || props.loading) return
-  // 已加入表单的字段：点击定位选中画布卡片（移除走 Delete / 卡片删除按钮，
-  // 与拖拽已加入字段会被拒绝的语义保持一致，避免误删）
-  const existing = localEdit.value.find((r) => String(r.b_field_id) === String(field.b_id))
-  if (existing) {
-    selectRow(existing)
-    nextTick(() => scrollToRowCard(String(existing.b_id)))
-    return
-  }
-  // 未加入的字段：插入到表单并定位到画布卡片
-  const row = insertField(field, { rebalance: false })
-  if (!row) return
-  selectRow(row)
-  nextTick(() => scrollToRowCard(String(row.b_id)))
-}
-
-// 字段库 filter：已加入（data-added=true）的字段按钮不启动拖拽（SortableJS 选择器）
-const LIB_ADDED_FILTER = '[data-added="true"]'
-
-/* ================= 画布拖拽（vuedraggable / SortableJS fallback 模式） =================
-   注意：启用 force-fallback 后拖拽完全基于鼠标事件模拟，不触发原生 HTML5 拖拽——
-   滚动条在拖拽期间可正常滚动，边缘自动滚动（auto-scroll）也正常生效。
-   Sortable 的 end 事件只在拖拽「源列表」触发，跨列表拖拽的目标列表只收到 add/sort。
-   因此字段库拖入画布必须在 onLibDragEnd（源=字段库）提交，画布内拖拽在 onFieldDragEnd 提交。 */
-
-/* 跟手标题条（阿里式拖拽）：自绘一个只带字段名的小标签跟随鼠标移动——
-   不拖整张卡片，拖的是「标题条」；落点由目标卡片对应方向的边框高亮表达 */
-let dragShadowEl = null
-let dragShadowOffsetX = 0
-let dragShadowOffsetY = 0
-
-/* 从被拖卡片 DOM 提取字段名，创建跟手标题条 */
-function createDragBadge(card) {
-  removeDragShadow()
-  const nameEl = card.querySelector('.mm-fdesign__field-name, .mm-fdesign__lib-name')
-  const badge = document.createElement('div')
-  badge.className = 'mm-fdesign__drag-badge'
-  badge.style.cssText = 'position:fixed;left:0;top:0;pointer-events:none;z-index:2147483000'
-  const name = document.createElement('span')
-  name.className = 'mm-fdesign__drag-badge-name'
-  name.textContent = nameEl ? nameEl.textContent.trim() : '字段'
-  badge.appendChild(name)
-  document.body.appendChild(badge)
-  dragShadowEl = badge
-  // 让标签右上角跟手（斜下方 14px 悬挂），像「拎着」一个小标签
-  dragShadowOffsetX = 14
-  dragShadowOffsetY = 14
-}
-
-function onDragShadowMove(evt) {
-  positionDragShadow(evt.clientX, evt.clientY)
-  // fallback 模式下没有原生 dragover，放置意图检测改在 mousemove 中同步进行
-  updateDragIntent(evt)
-}
-
-function positionDragShadow(clientX, clientY) {
-  if (!dragShadowEl) return
-  dragShadowEl.style.transform = `translate(${clientX - dragShadowOffsetX}px, ${clientY - dragShadowOffsetY}px)`
-}
-
-function removeDragShadow() {
-  if (dragShadowEl) {
-    dragShadowEl.remove()
-    dragShadowEl = null
-  }
-}
-
-/* 拖拽期间全局禁用文本选中（fallback 拖拽用鼠标模拟，mousemove 会触发文本框选），
-   结束后恢复——body 级 user-select 覆盖整个页面，防止拖到任意文字上都出现蓝色高亮 */
-function disableTextSelection() {
-  document.body.style.userSelect = 'none'
-  document.body.style.webkitUserSelect = 'none'
-}
-
-function enableTextSelection() {
-  document.body.style.userSelect = ''
-  document.body.style.webkitUserSelect = ''
-}
-
-function onFieldDragStart(evt) {
-  dragPayload.value = { kind: 'card' }
-  dragSourceId.value = String(evt?.item?.dataset?.fieldId || '')
-  createDragBadge(evt.item)
-  window.addEventListener('keydown', onDragKeydown)
-  window.addEventListener('mousemove', onDragShadowMove)
-  disableTextSelection()
-}
-
-// SortableJS onMove：仅用于布局冻结（禁止拖拽中实时重排 DOM，主流表单设计器的做法）。
-// 放置意图的记录由 mousemove（onDragShadowMove → updateDragIntent）承担。
-function onFieldMove() {
-  return false
-}
-
-/* 放置意图记录：mousemove 每次指针移动都触发（fallback 模式替代原生 dragover）。
-   语义：上/下/左/右四条边各占 50%（中线分界），程序按「比例最近边缘」判断鼠标
-   偏向哪条边——上 → 该行上方新行，下 → 该行下方新行，左 → 插到该字段前，
-   右 → 插到该字段后；完全居中默认并入该行末尾。 */
-function updateDragIntent(evt) {
-  if (!dragPayload.value || dragCancelled) return
-  const hoverEl = evt.target instanceof Element ? evt.target : null
-  if (!hoverEl || hoverEl.closest('.sortable-fallback')) return // 忽略拖拽跟随影子
-
-  /* 鼠标离开画布区域：清除放置意图，松手时按取消处理（避免把字段误移到最后悬停的分组） */
-  const canvasWrap = hoverEl.closest('.mm-fdesign__canvas-wrap')
-  if (!canvasWrap) {
-    dragLine.value = null
-    dragOverSection.value = null
-    return
-  }
-
-  const sectionEl = hoverEl.closest('[data-section-key]')
-  dragOverSection.value = sectionEl ? sectionEl.getAttribute('data-section-key') : null
-
-  const card = hoverEl.closest('[data-field-id]')
-  const selfId =
-    dragPayload.value.kind === 'library' ? dragPayload.value.fieldId : dragSourceId.value
-
-  /* 鼠标不在任何卡片上（间隙 / 行内空白）：按「整行区域」判定上/下新行（各 50%），
-     命中不了（分组标题 / 行外空白）则视为放到该分组末尾 */
-  if (!card) {
-    const rowHit = sectionEl ? rowRectAt(evt.clientX, evt.clientY, sectionEl) : null
-    if (rowHit && rowHit.fieldIds.length) {
-      const relY = (evt.clientY - rowHit.top) / (rowHit.bottom - rowHit.top)
-      const lastFieldId = rowHit.fieldIds[rowHit.fieldIds.length - 1]
-      const pos = relY < 0.5 ? 'line-before' : 'newline'
-      dragLine.value = { fieldId: lastFieldId, pos }
-      return
-    }
-    dragLine.value = null // 间隙 / 空分组：意图 = 放到该分区末尾
-    return
-  }
-
-  const fieldId = card.getAttribute('data-field-id')
-  if (fieldId === selfId) {
-    /* 悬停被拖字段自身：左右同行无意义，只给上/下新行意图（按卡片上/下半判定），
-       拖到自身卡片上缘/下缘即可把字段拖出到新行，不必再去找别的卡片；
-       字段库拖入时悬停已存在的同名字段仍按取消处理 */
-    if (dragPayload.value.kind === 'card') {
-      const rect = card.getBoundingClientRect()
-      const h = rect.height || 1
-      const dyTop = (evt.clientY - rect.top) / h
-      const dyBottom = (rect.bottom - evt.clientY) / h
-      dragLine.value = { fieldId, pos: dyTop <= dyBottom ? 'line-before' : 'newline' }
-    } else {
-      dragLine.value = null
-      dragOverSection.value = null
-    }
-    return
-  }
-
-  /* 上/下/左/右判定：垂直距离按「行高的比例」、水平距离按「卡片宽度的比例」，
-     水平需距边 <25% 宽度才算明显偏向——避免宽矮卡片（宽 300px 高 60px）
-     因按高度归一化导致左右方向几乎总胜出、想换行时总落进同行前后 */
-  const rect = card.getBoundingClientRect()
-  const h = rect.height || 1
-  const w = rect.width || 1
-  const dyTop = (evt.clientY - rect.top) / h
-  const dyBottom = (rect.bottom - evt.clientY) / h
-  const dxLeft = (evt.clientX - rect.left) / w
-  const dxRight = (rect.right - evt.clientX) / w
-  const edgeTol = 0.25 // 距左右边 <25% 宽度 → 同行前后；其余 → 按上/下半分新行
-  let pos
-  if (Math.min(dxLeft, dxRight) < edgeTol) {
-    pos = dxLeft <= dxRight ? 'before' : 'after' // 距左右边足够近
-  } else {
-    pos = dyTop <= dyBottom ? 'line-before' : 'newline' // 默认上/下新行
-  }
-  dragLine.value = { fieldId, pos }
-}
-
-/* 鼠标坐标命中的「行」（按卡片 top 聚类成视觉行），返回行矩形 + 行内字段顺序。
-   用于鼠标落在卡片间隙 / 行内空白时仍能按整行区域判定上/下新行 */
-function rowRectAt(clientX, clientY, sectionEl) {
-  if (!sectionEl) return null
-  const cards = [...sectionEl.querySelectorAll('.mm-fdesign__field')]
-  const rects = cards
-    .map((el) => ({ el, r: el.getBoundingClientRect() }))
-    .filter(({ r }) => r.width > 0 && r.height > 0)
-  if (!rects.length) return null
-  rects.sort((a, b) => a.r.top - b.r.top)
-  const rows = []
-  for (const item of rects) {
-    const last = rows[rows.length - 1]
-    if (last && Math.abs(item.r.top - last.top) < Math.min(item.r.height, last.height) / 2) {
-      last.items.push(item)
-      last.fieldIds.push(item.el.getAttribute('data-field-id'))
-      last.top = Math.min(last.top, item.r.top)
-      last.bottom = Math.max(last.bottom, item.r.bottom)
-      last.left = Math.min(last.left, item.r.left)
-      last.right = Math.max(last.right, item.r.right)
-      last.height = last.bottom - last.top
-    } else {
-      rows.push({
-        items: [item],
-        fieldIds: [item.el.getAttribute('data-field-id')],
-        top: item.r.top,
-        bottom: item.r.bottom,
-        left: item.r.left,
-        right: item.r.right,
-        height: item.r.height,
-      })
-    }
-  }
-  return (
-    rows.find(
-      (row) =>
-        clientY >= row.top && clientY <= row.bottom && clientX >= row.left && clientX <= row.right,
-    ) || null
-  )
-}
-
-// 拖拽放置意图的文字提示（悬浮在目标卡片上方/内部/下方，实时告知松手后的操作）
-function dropTipText(pos) {
-  const map = {
-    'line-before': '↑ 插入上方新行',
-    before: '◀ 并入本行左侧',
-    after: '并入本行右侧 ▶',
-    newline: '↓ 插入下方新行',
-  }
-  return map[pos] || ''
-}
-
-/* 同行意图（before/after）时：被悬停字段所在视觉行的全体成员 fieldId。
-   整行卡片一起保持显眼（拖拽变淡时不被压暗），让用户明确「是并入这一行」 */
-const dragLineRowIds = computed(() => {
-  const line = dragLine.value
-  if (!line || (line.pos !== 'before' && line.pos !== 'after')) return null
-  const rows = localEdit.value
-  const idx = rows.findIndex((r) => String(r.b_field_id) === String(line.fieldId))
-  if (idx < 0) return null
-  return new Set(collectLineIndexes(rows, idx).idxs.map((i) => String(rows[i].b_field_id)))
-})
-
-// 目标分组段的末尾插入位置（rows 为移除被拖字段后的列表）
-function sectionEndIndex(rows, gid) {
-  let last = -1
-  rows.forEach((r, i) => {
-    if (groupIdOf(r) === gid) last = i
-  })
-  if (last >= 0) return last + 1
-  // 空分组：按分组顺序插到前一个非空分组段之后；前面都为空则插到最前
-  const order = [...(props.groups || []).map((g) => String(g.b_id)), null]
-  for (let p = order.indexOf(gid) - 1; p >= 0; p--) {
-    let prevLast = -1
-    rows.forEach((r, i) => {
-      if (groupIdOf(r) === order[p]) prevLast = i
-    })
-    if (prevLast >= 0) return prevLast + 1
-  }
-  return 0
-}
-
-// 一行成员（含新插入字段）均分 24 栅格
-function distributeLine(rows, memberIdxs) {
-  const base = Math.floor(24 / memberIdxs.length)
-  const rem = 24 - base * memberIdxs.length
-  memberIdxs.forEach((ix, k) => {
-    rows[ix].b_colspan = base + (k < rem ? 1 : 0)
-  })
-}
-
-/* 提交画布内拖拽：布局冻结模式下 DOM 未被 SortableJS 改动，
-   完全根据拖拽悬停记录的意图（dragLine / dragOverSection）计算新顺序与宽度 */
-function onFieldDragEnd(evt) {
-  window.removeEventListener('keydown', onDragKeydown)
-  window.removeEventListener('mousemove', onDragShadowMove)
-  removeDragShadow()
-  enableTextSelection()
-  const rowId = String(evt?.item?.dataset?.fieldId || '')
-  const cancelled = dragCancelled
-  dragCancelled = false
-  const linePos = dragLine.value
-  const overKey = dragOverSection.value
-  dragPayload.value = null
-  dragSourceId.value = null
-  dragLine.value = null
-  dragOverSection.value = null
-  if (cancelled || !rowId) return // Esc 取消 / 无意图 = 取消
-
-  const rows = localEdit.value
-  const movedIdx = rows.findIndex((r) => String(r.b_field_id) === rowId)
-  if (movedIdx < 0) return
-
-  if (linePos) {
-    // 悬停被拖字段自身：目标行 = 被拖字段原所在行（仅上/下新行意图）
-    const isSelfHover = String(linePos.fieldId) === rowId
-    const { idxs: origLineIdxs } = collectLineIndexes(rows, movedIdx) // 原行（含被拖字段）
-    const targetIdx0 = isSelfHover
-      ? movedIdx
-      : rows.findIndex((r) => String(r.b_field_id) === String(linePos.fieldId))
-    if (targetIdx0 < 0) return
-    const sourceLineIds = lineIdsOf(rowId) // 此刻仍是移动前顺序，采集原行成员以便回收
-    // 同行移动判定：悬停自身 = 必然离开原行；否则看目标字段是否在被拖字段所在行。
-    // 同行移动时同行成员并未「离开」，若按离开行回收会把它们错误重设为整行 24。
-    const isSameLineMove = isSelfHover ? false : origLineIdxs.includes(targetIdx0)
-    // 悬停自身且原行只有被拖字段一个：上/下新行无意义，取消
-    if (isSelfHover && origLineIdxs.length <= 1) return
-    const targetGid = groupIdOf(rows[targetIdx0])
-    const [m] = rows.splice(movedIdx, 1)
-    m.b_group_id = targetGid == null ? null : targetGid // 跨组移动：跟随目标字段分组
-    // 目标视觉行：悬停自身 = 原行去掉被拖字段后的剩余成员（splice 后索引前移）
-    const { idxs } = isSelfHover
-      ? {
-          idxs: origLineIdxs.filter((i) => i !== movedIdx).map((i) => (i > movedIdx ? i - 1 : i)),
-        }
-      : (() => {
-          const targetIdx = rows.findIndex((r) => String(r.b_field_id) === String(linePos.fieldId))
-          return collectLineIndexes(rows, targetIdx)
-        })()
-    if (linePos.pos === 'before' || linePos.pos === 'after') {
-      // 同行左/右：目标视觉行 + 被拖字段整行均分（先定宽再插入，
-      // 否则目标字段原宽 24 时前向打包会把两者判成两行）
-      const before = linePos.pos === 'before'
-      const members = idxs.length + 1
-      const base = Math.floor(24 / members)
-      const rem = 24 - base * members
-      // 余数分配按插入位置：before 时新字段排最前（先拿余数），after 时排最后
-      idxs.forEach((ix, k) => {
-        const kk = before ? k + 1 : k
-        rows[ix].b_colspan = base + (kk < rem ? 1 : 0)
-      })
-      m.b_colspan = base + (before ? (rem > 0 ? 1 : 0) : idxs.length < rem ? 1 : 0)
-      const targetIdx = rows.findIndex((r) => String(r.b_field_id) === String(linePos.fieldId))
-      rows.splice(before ? targetIdx : targetIdx + 1, 0, m)
-      if (!isSameLineMove) rebalanceRowByIds(rows, sourceLineIds)
-    } else if (linePos.pos === 'newline') {
-      // 下方新行：独占 24，目标行成员均分
-      rows.splice(idxs[idxs.length - 1] + 1, 0, m)
-      m.b_colspan = 24
-      distributeLine(rows, idxs)
-      if (!isSameLineMove) rebalanceRowByIds(rows, sourceLineIds)
-    } else {
-      // line-before：上方新行——字段独占整行（24），原行剩余成员回收，
-      // 目标行成员保持不变；避免字段拖上去后只占原宽度（如 1/2 行）显得状态未恢复
-      rows.splice(idxs[0], 0, m)
-      m.b_colspan = 24
-      rebalanceRowByIds(rows, sourceLineIds)
-    }
-    emitRows(renumberRows(rows))
-  } else if (overKey != null) {
-    // 未悬停到具体卡片但悬停在某分组（空分组 / 间隙）：移到该分组末尾，
-    // 独立放置（独占 24），源行剩余成员回收
-    const sourceLineIds = lineIdsOf(rowId) // 必须在 splice 前采集，否则源行成员已找不到
-    const gid = overKey === 'ungrouped' ? null : overKey.slice(2)
-    const [m] = rows.splice(movedIdx, 1)
-    m.b_group_id = gid
-    m.b_colspan = 24 // 独立放置 = 独占一行
-    rows.splice(sectionEndIndex(rows, gid), 0, m)
-    rebalanceRowByIds(rows, sourceLineIds)
-    emitRows(renumberRows(rows))
-  }
-  // 其余情况 = 取消：DOM 本就未变，无需处理
-  cleanupSelectedRow()
-}
-
-// 被拖字段所在视觉行的其它成员 b_id（拖拽事件时 localEdit 仍是移动前顺序，此刻采集才准确）
-function lineIdsOf(fieldId) {
-  const rows = localEdit.value
-  const idx = rows.findIndex((r) => String(r.b_field_id) === fieldId)
-  if (idx < 0) return []
-  return collectLineIndexes(rows, idx)
-    .idxs.filter((i) => i !== idx)
-    .map((i) => String(rows[i].b_id))
-}
-
-// 按 b_id 将一行成员重新均分 24 栅格（用于字段离开/加入后回收原行空间）
-function rebalanceRowByIds(rows, ids) {
-  const members = rows.filter((r) => ids.includes(String(r.b_id)))
-  if (!members.length) return
-  const base = Math.floor(24 / members.length)
-  const rem = 24 - base * members.length
-  members.forEach((m, k) => {
-    m.b_colspan = base + (k < rem ? 1 : 0)
-  })
-}
-
-/* 提交后清理失效的选中行 */
-function cleanupSelectedRow() {
-  if (selectedRowKey.value) {
-    const row = localEdit.value.find((r) => String(r.b_id) === String(selectedRowKey.value))
-    if (!row) selectedRowKey.value = null
-  }
-}
-
-/* ================= 便捷操作：上下移 / 卡片快捷开关 / 栅格步进 / 复制粘贴 / 分组方向 ================= */
-/* 上下移：整行与相邻整行交换（同一分组内）。
-   选中行中任意字段，点击上移/下移，整行（视觉行所有字段）整体移到相邻行位置，
-   相邻行相应后移/前移，行内字段宽度不变，行结构保持不变。 */
-function moveSelectedRow(delta) {
-  const row = selectedRow.value
-  if (!row || props.loading) return
-  const sorted = localEdit.value.toSorted((a, b) => Number(a.b_xh || 0) - Number(b.b_xh || 0))
-  const idx = sorted.findIndex((item) => String(item.b_id) === String(row.b_id))
-  if (idx < 0) return
-  const gid = groupIdOf(row)
-  // 找到源行（当前选中字段所在的视觉行）
-  const { idxs: sourceIdxs } = collectLineIndexes(sorted, idx)
-  // 找到相邻行（同分组内）
-  let targetLineStart = -1
-  if (delta < 0) {
-    if (sourceIdxs[0] > 0) {
-      const { idxs: prevLine } = collectLineIndexes(sorted, sourceIdxs[0] - 1)
-      if (groupIdOf(sorted[prevLine[0]]) === gid) targetLineStart = prevLine[0]
-    }
-  } else {
-    const last = sourceIdxs[sourceIdxs.length - 1]
-    if (last < sorted.length - 1) {
-      const { idxs: nextLine } = collectLineIndexes(sorted, last + 1)
-      if (groupIdOf(sorted[nextLine[0]]) === gid) targetLineStart = nextLine[0]
-    }
-  }
-  if (targetLineStart < 0) return // 已在分组首/尾行，无操作
-  const { idxs: targetIdxs } = collectLineIndexes(sorted, targetLineStart)
-  // 确定上下两个段（seg1 在上，seg2 在下），两个段相邻且连续
-  const seg1 = sourceIdxs[0] < targetIdxs[0] ? sourceIdxs : targetIdxs
-  const seg2 = sourceIdxs[0] < targetIdxs[0] ? targetIdxs : sourceIdxs
-  const fields1 = seg1.map((i) => sorted[i])
-  const fields2 = seg2.map((i) => sorted[i])
-  const rangeStart = seg1[0]
-  const rangeLen = seg2[seg2.length - 1] - seg1[0] + 1
-  sorted.splice(rangeStart, rangeLen) // 移除两段
-  sorted.splice(rangeStart, 0, ...fields2, ...fields1) // 交换顺序插入
-  emitRows(renumberRows(sorted))
-  selectedRowKey.value = String(row.b_id)
-}
-
-function toggleRowFlag(row, key) {
-  if (!row || props.loading) return
-  toggleFlag(row, key)
-  emitUpdate()
-}
-
-function onLabelChip(row, key) {
-  selectRow(row)
-  toggleRowFlag(row, key)
-}
-
-/* 复制/粘贴：仅复制布局与状态属性（不含标识、排序号、分组），用于把某字段的配置套用到其它字段 */
-const clipboardProps = ref(null)
-// 表单复制属性键：布局与状态属性（栅格宽度 b_colspan 需按 spanOf 归一）
-const CLIP_KEYS = ['b_colspan', 'b_required', 'b_readonly', 'b_disabled', 'b_visible', 'b_placeholder', 'b_height']
-
-function copyRowProps() {
-  const row = selectedRow.value
-  if (!row || props.loading) return
-  clipboardProps.value = buildClipboardProps(row, fieldName, CLIP_KEYS, {
-    b_colspan: (r) => spanOf(r),
-  })
-}
-
-function pastePropsToSelected() {
-  const row = selectedRow.value
-  if (!row || props.loading || !clipboardProps.value) return
-  applyClipboardProps(row, clipboardProps.value.props)
-  emitUpdate()
-}
-
-/* 字段库拖拽（clone 到画布）：布局冻结模式下画布侧不会收到 add 事件，
-   由源列表的 end（本函数）根据悬停意图自行插入新行（主表/子表统一）。 */
-function onLibDragStart(evt) {
-  dragPayload.value = {
-    kind: 'library',
-    fieldId: String(evt?.item?.dataset?.fieldId || ''),
-  }
-  dragSourceId.value = 'lib'
-  createDragBadge(evt.item)
-  window.addEventListener('keydown', onDragKeydown)
-  window.addEventListener('mousemove', onDragShadowMove)
-  disableTextSelection()
-}
-
-function onLibDragEnd() {
-  window.removeEventListener('keydown', onDragKeydown)
-  window.removeEventListener('mousemove', onDragShadowMove)
-  removeDragShadow()
-  enableTextSelection()
-  const cancelled = dragCancelled
-  dragCancelled = false
-  const payload = dragPayload.value
-  const linePos = dragLine.value
-  const overKey = dragOverSection.value
-  dragPayload.value = null
-  dragSourceId.value = null
-  dragLine.value = null
-  dragOverSection.value = null
-
-  if (cancelled || payload?.kind !== 'library' || !payload.fieldId) return // Esc 取消 / 取消的拖拽
-  const field = (props.fields || []).find((f) => String(f.b_id) === payload.fieldId)
-  if (!field) return
-  // 防重：字段已在表单中则拒绝放置（点击新增路径已有查重，拖拽路径需单独拦截）
-  if (localEdit.value.some((r) => String(r.b_field_id) === String(field.b_id))) {
-    Message.warning('该字段已在表单中，不能重复添加')
-    return
-  }
-
-  const rows = [...localEdit.value]
-
-  let row = null
-  if (linePos) {
-    const targetIdx = rows.findIndex((r) => String(r.b_field_id) === String(linePos.fieldId))
-    if (targetIdx >= 0) {
-      row = createEditRow(field, groupIdOf(rows[targetIdx]))
-      const { idxs } = collectLineIndexes(rows, targetIdx)
-      if (linePos.pos === 'before' || linePos.pos === 'after') {
-        // 并入目标视觉行：目标行 + 新字段整行均分（先定宽再插入）
-        const before = linePos.pos === 'before'
-        const members = idxs.length + 1
-        const base = Math.floor(24 / members)
-        const rem = 24 - base * members
-        idxs.forEach((ix, k) => {
-          const kk = before ? k + 1 : k
-          rows[ix].b_colspan = base + (kk < rem ? 1 : 0)
-        })
-        row.b_colspan = base + (before ? (rem > 0 ? 1 : 0) : idxs.length < rem ? 1 : 0)
-        rows.splice(before ? targetIdx : targetIdx + 1, 0, row)
-      } else if (linePos.pos === 'newline') {
-        rows.splice(idxs[idxs.length - 1] + 1, 0, row)
-        row.b_colspan = 24
-        distributeLine(rows, idxs)
-      } else {
-        // line-before：目标行上方新行，新字段默认整行宽
-        rows.splice(idxs[0], 0, row)
-      }
-    }
-  } else if (overKey != null) {
-    // 未悬停到具体卡片：放到悬停分区末尾
-    const gid = overKey === 'ungrouped' ? null : overKey.slice(2)
-    row = createEditRow(field, gid)
-    rows.splice(sectionEndIndex(rows, gid), 0, row)
-  }
-  if (!row) return // 无有效意图 = 取消
-  selectedRowKey.value = String(row.b_id)
-  emitRows(renumberRows(rows))
-}
-
-function isRowSelectedByField(field) {
-  const row = localEdit.value.find((r) => String(r.b_field_id) === String(field.b_id))
-  return !!row && String(row.b_id) === String(selectedRowKey.value)
-}
-
-/* ================= 设计视图：网格拖拽分组 ================= */
-// 字段库拖拽分组
-const libGroup = { name: 'form', pull: 'clone', put: false }
-
-// 表单网格分组：与字段库同组，接受克隆 + 网格间跨组移动
-const columnGridGroup = { name: 'form' }
-
-// 字段库 clone：保持原字段对象，由 onLibDragEnd 生成编辑行
-function libClone(field) {
-  return field
-}
-
-/* ================= 设计视图：属性编辑（写入草稿，随页面「保存」提交） ================= */
-function toggleInspector(key) {
-  const row = selectedRow.value
-  if (!row || props.loading) return
-  toggleFlag(row, key)
-  emitUpdate()
-}
-
-function onColspanChange(value) {
-  const row = selectedRow.value
-  if (!row || props.loading) return
-  const span = Math.min(24, Math.max(1, Number(value) || 24))
-  // 同行联动：总宽超过 24 时压缩同行其它字段，保证逻辑行与视觉行一致
-  const sorted = localEdit.value.toSorted((a, b) => Number(a.b_xh || 0) - Number(b.b_xh || 0))
-  const idx = sorted.findIndex((item) => String(item.b_id) === String(row.b_id))
-  const lineIdxs = idx >= 0 ? collectLineIndexes(sorted, idx).idxs : []
-  row.b_colspan = span
-  const others = lineIdxs.filter((i) => i !== idx)
-  const budget = 24 - span
-  const othersSum = others.reduce((s, i) => s + spanOf(sorted[i]), 0)
-  if (others.length && othersSum > budget) {
-    const base = Math.floor(budget / others.length)
-    const rem = budget - base * others.length
-    others.forEach((i, k) => {
-      sorted[i].b_colspan = Math.max(1, base + (k < rem ? 1 : 0))
-    })
-  }
-  emitUpdate()
-}
-
-// 数字输入框 change（失焦/回车）提交：与原值不同才真正写入
-function onColspanInput(value) {
-  const row = selectedRow.value
-  if (!row || props.loading) return
-  const next = Math.min(24, Math.max(1, Number(value) || 24))
-  if (next === spanOf(row)) return
-  onColspanChange(next)
-}
-
-function onHeightChange(value) {
-  const row = selectedRow.value
-  if (!row || !isTextarea(row) || props.loading) return
-  row.b_height = Math.min(480, Math.max(64, Number(value) || 120))
-  emitUpdate()
-}
-
-/* 占位符：change（失焦/回车）提交，有变化才真正写入 */
-function onPlaceholderChange(value) {
-  const row = selectedRow.value
-  if (!row || props.loading) return
-  const next = String(value ?? '').trim()
-  if ((row.b_placeholder || '') === next) return
-  row.b_placeholder = next || null
-  emitUpdate()
-}
-
-function removeRow(row) {
-  if (!row || props.loading) return
-  const index = localEdit.value.findIndex((item) => String(item.b_id) === String(row.b_id))
-  if (index < 0) return
-  const sorted = localEdit.value.toSorted((a, b) => Number(a.b_xh || 0) - Number(b.b_xh || 0))
-  const lineIdx = sorted.findIndex((item) => String(item.b_id) === String(row.b_id))
-  // 回收栅格：所在行的 24 栅格重新均分给剩余字段，避免留下空洞
-  if (lineIdx >= 0) {
-    const { idxs } = collectLineIndexes(sorted, lineIdx)
-    const remain = idxs.filter((i) => i !== lineIdx)
-    if (remain.length) {
-      const base = Math.floor(24 / remain.length)
-      const rem = 24 - base * remain.length
-      remain.forEach((i, k) => {
-        sorted[i].b_colspan = base + (k < rem ? 1 : 0)
-      })
-    }
-  }
-  emitRows(renumberRows(sorted.filter((item) => String(item.b_id) !== String(row.b_id))))
-  if (String(selectedRowKey.value) === String(row.b_id)) selectedRowKey.value = null
-}
-
-function removeSelected() {
-  removeRow(selectedRow.value)
-}
-
-/* 视图切换：两种视图共享选中行 */
-function switchView(mode) {
-  viewMode.value = mode
-  if (mode === 'data') {
-    activeKey.value = selectedRowKey.value
-  } else if (activeKey.value != null) {
-    const exists = localEdit.value.some((r) => String(r.b_id) === String(activeKey.value))
-    if (exists) selectedRowKey.value = String(activeKey.value)
-  }
-}
-
-function onDesignerKeydown(event) {
-  // 面板不可见（父级 v-show 切走页签）时不响应，避免在其它页签误删字段
-  if (!props.active) return
-  // 数据视图下同样生效：单元格编辑时事件源是输入框，已在下方排除；
-  // 行点击同步到 selectedRowKey，保证 Delete / Ctrl+C 等作用于当前点选的行
-  if (viewMode.value === 'data' && activeKey.value != null) {
-    const hit = localEdit.value.some((r) => String(r.b_id) === String(activeKey.value))
-    if (hit) selectedRowKey.value = String(activeKey.value)
-  }
-  // 输入框内不拦截：Delete/Backspace 留给文本编辑
-  if (event.target?.closest?.('input, textarea, select, [contenteditable="true"]')) return
-  const mod = event.ctrlKey || event.metaKey
-  // Ctrl+C / Ctrl+V：复制 / 粘贴选中字段（列）的布局与状态属性
-  if (mod && (event.key === 'c' || event.key === 'C')) {
-    event.preventDefault()
-    copyRowProps()
-    return
-  }
-  if (mod && (event.key === 'v' || event.key === 'V')) {
-    event.preventDefault()
-    pastePropsToSelected()
-    return
-  }
-  // Ctrl+X：剪切 = 复制属性后直接删除当前卡片（选中其它卡片后 Ctrl+V 粘贴）
-  if (mod && (event.key === 'x' || event.key === 'X')) {
-    event.preventDefault()
-    copyRowProps()
-    removeSelected()
-    return
-  }
-  if (!selectedRow.value) return
-  if (['Delete', 'Backspace'].includes(event.key)) {
-    event.preventDefault()
-    removeSelected()
-  }
-}
-
-onMounted(() => window.addEventListener('keydown', onDesignerKeydown))
-onBeforeUnmount(() => {
-  window.removeEventListener('keydown', onDesignerKeydown)
-  window.removeEventListener('keydown', onDragKeydown)
-  window.removeEventListener('mousemove', onDragShadowMove)
-  removeDragShadow()
-  enableTextSelection()
-})
-</script>
-
-<template>
-  <div class="mm-edit">
-    <!-- ================= 设计视图 ================= -->
-    <div
-      v-show="viewMode === 'design'"
-      class="mm-fdesign"
-      :class="{ 'is-inspector-collapsed': inspectorCollapsed }"
-    >
-      <aside class="mm-fdesign__lib" aria-label="字段列表">
-        <Input v-model="libSearch" class="mm-fdesign__lib-search" placeholder="搜索字段名 / 编码" />
-        <div class="mm-fdesign__lib-group">
-          <draggable
-            class="mm-fdesign__lib-list"
-            :list="libraryFields"
-            :group="libGroup"
-            item-key="b_id"
-            :clone="libClone"
-            :animation="150"
-            ghost-class="mm-fdesign__lib-ghost"
-            :fallback-on-body="true"
-            :force-fallback="true"
-            fallback-class="mm-fdesign__drag-fallback"
-            :filter="LIB_ADDED_FILTER"
-            :prevent-on-filter="true"
-            @start="onLibDragStart"
-            @end="onLibDragEnd"
-          >
-            <template #item="{ element: field }">
-              <button
-                type="button"
-                class="mm-fdesign__lib-item"
-                :class="{
-                  'is-selected': isRowSelectedByField(field),
-                  'is-added': isFieldAdded(field),
-                }"
-                title="点击加入表单；已加入的点击定位到画布卡片"
-                :data-field-id="String(field.b_id)"
-                :data-added="isFieldAdded(field) ? 'true' : 'false'"
-                @click="selectField(field)"
-              >
-                <span class="mm-fdesign__lib-name">{{ field.b_name || field.b_field }}</span>
-                <span v-if="isFieldAdded(field)" class="mm-fdesign__lib-added" title="已加入表单"
-                  >✓</span
-                >
-              </button>
-            </template>
-          </draggable>
-          <div v-if="!libraryFields.length" class="mm-fdesign__lib-empty">无匹配字段</div>
-        </div>
-      </aside>
-
-      <!-- 中间列：header（编辑方式 / 视图切换 / 操作）+ 画布 -->
-      <div class="mm-fdesign__main">
-        <div class="mm-edit__head">
-          <div class="mm-edit__head-left">
-            <RadioGroup
-              class="mm-edit__mode"
-              role="group"
-              aria-label="编辑方式"
-              :model-value="editMode || 'form'"
-              :disabled="loading"
-              @update:model-value="onEditModeChange"
-            >
-              <Radio value="form" title="主表：以表单形式编辑">主表表单</Radio>
-              <Radio value="table" title="子表：以表格形式编辑">子表表格</Radio>
-            </RadioGroup>
-          </div>
-          <div class="mm-edit__head-center">
-            <Tabs
-              class="mm-edit__view-switch"
-              nav-only
-              :items="[
-                { key: 'design', label: '设计' },
-                { key: 'data', label: '数据' },
-              ]"
-              :model-value="viewMode"
-              aria-label="视图切换"
-              @update:model-value="switchView"
-            />
-          </div>
-          <div class="mm-edit__head-right">
-            <Button type="outline" :disabled="loading" @click="addGroup">
-              <Plus :size="14" /> 添加分组
-            </Button>
-            <Button type="ghost" :disabled="loading" @click="previewOpen = true">
-              <Eye :size="14" /> 预览
-            </Button>
-            <Popover trigger="hover" placement="bottom-end" :arrow="false" :offset="8">
-              <template #trigger>
-                <span class="mm-edit__help-icon" aria-hidden="true">?</span>
-              </template>
-              <template #content>
-                <div class="mm-edit__help-title">快捷键</div>
-                <ul class="mm-edit__help-list">
-                  <li><kbd>Ctrl+C</kbd> 复制选中字段属性</li>
-                  <li><kbd>Ctrl+X</kbd> 剪切（复制并删除当前字段）</li>
-                  <li><kbd>Ctrl+V</kbd> 粘贴属性到选中字段</li>
-                  <li><kbd>Delete</kbd> 删除选中字段</li>
-                </ul>
-              </template>
-            </Popover>
-          </div>
-        </div>
-
-      <!-- ================= 表单（主表）设计：画布 ================= -->
-      <div
-        class="mm-fdesign__canvas-wrap"
-        :class="{ 'is-drag-active': dragPayload, 'is-section-drag-active': sectionDragging }"
-      >
-        <div class="mm-fdesign__canvas">
-          <div class="mm-fdesign__sheet" @click="selectRow(null)">
-            <template v-if="canvasSections.length">
-              <draggable
-                v-model="sectionOrder"
-                handle=".mm-fdesign__section-grip"
-                item-key="key"
-                class="mm-fdesign__sections"
-                :animation="150"
-                ghost-class="mm-fdesign__section-ghost"
-                :fallback-on-body="true"
-                :force-fallback="true"
-                fallback-class="mm-fdesign__drag-fallback"
-                @start="sectionDragging = true"
-                @end="onGroupDragEnd"
-              >
-                <template #item="{ element: section }">
-                  <div
-                    class="mm-fdesign__section"
-                    :data-section-key="section.key"
-                    :class="{
-                      'is-horizontal': section.group?.b_layout_direction === 'horizontal',
-                      'is-ungrouped': section.key === 'ungrouped',
-                    }"
-                    :style="{ gridColumn: `span ${section.cols}` }"
-                  >
-                <div class="mm-fdesign__section-title">
-                  <button
-                    v-if="(section.group || section.key === 'ungrouped') && editingGroupKey !== section.key"
-                    type="button"
-                    class="mm-fdesign__section-grip"
-                    title="拖动调整分组顺序"
-                    aria-label="拖动调整分组顺序"
-                  >
-                    <GripVertical :size="13" />
-                  </button>
-                  <template v-if="editingGroupKey === section.key">
-                    <Input
-                      ref="sectionEditInput"
-                      v-model="groupTitleDraft"
-                      class="mm-fdesign__section-edit"
-                      maxlength="100"
-                      placeholder="分组名称"
-                      @click.stop
-                      @keydown.enter.prevent="commitEditGroupTitle(section)"
-                      @keydown.esc.prevent="cancelEditGroupTitle"
-                      @blur="commitEditGroupTitle(section)"
-                    />
-                    <span class="mm-fdesign__section-edit-actions">
-                      <Button
-                        type="ghost"
-                        class="mm-fdesign__section-edit-btn"
-                        title="确认"
-                        aria-label="确认修改分组名"
-                        @mousedown.prevent="commitEditGroupTitle(section)"
-                      >
-                        <Check :size="13" />
-                      </Button>
-                      <Button
-                        type="ghost"
-                        class="mm-fdesign__section-edit-btn"
-                        title="取消"
-                        aria-label="取消修改分组名"
-                        @mousedown.prevent="cancelEditGroupTitle"
-                      >
-                        <X :size="13" />
-                      </Button>
-                    </span>
-                  </template>
-                  <template v-else>
-                    <span
-                      v-if="section.title"
-                      class="mm-fdesign__section-name"
-                      :class="{ 'is-editable': section.group }"
-                      :title="section.group ? '点击重命名分组' : undefined"
-                      @click.stop="startEditGroupTitle(section)"
-                    >{{ section.title }}</span>
-                    <span
-                      v-else-if="section.group"
-                      class="mm-fdesign__section-name is-empty"
-                      title="点击设置分组标题"
-                      @click.stop="startEditGroupTitle(section)"
-                    >空</span>
-                    <span class="mm-edit__section-meta">
-                      <Button
-                        type="ghost"
-                        class="mm-fdesign__section-btn"
-                        title="分组设置"
-                        aria-label="分组设置"
-                        @click.stop="openSectionSettings(section)"
-                      >
-                        <Settings2 :size="13" />
-                      </Button>
-                      <Button
-                        v-if="section.group"
-                        type="ghost"
-                        class="mm-fdesign__section-del"
-                        title="删除分组（其下字段移至未分组）"
-                        aria-label="删除分组"
-                        @click.stop="deleteGroupDirect(section)"
-                      >
-                        <Trash2 :size="13" />
-                      </Button>
-                    </span>
-                  </template>
-                </div>
-                <div class="mm-fdesign__section-body">
-                <draggable
-                  class="mm-fdesign__grid"
-                  :list="section.rows"
-                  :group="{ name: 'form' }"
-                  item-key="b_id"
-                  :animation="150"
-                  ghost-class="mm-fdesign__sortable-ghost"
-                  :drag-class="'mm-fdesign__sortable-drag'"
-                  :fallback-on-body="true"
-                  :force-fallback="true"
-                  fallback-class="mm-fdesign__drag-fallback"
-                  :filter="'button'"
-                  :prevent-on-filter="true"
-                  :move="onFieldMove"
-                  @start="onFieldDragStart"
-                  @end="onFieldDragEnd"
-                >
-                  <template #item="{ element: row }">
-                    <div
-                      class="mm-fdesign__field"
-                      :class="{
-                        'is-selected': selectedRowKey === String(row.b_id),
-                        'is-dragging': dragSourceId === String(row.b_field_id),
-                        'is-invisible': Number(row.b_visible) !== 1,
-                        'is-drop-hover':
-                          dragLine &&
-                          (dragLine.fieldId === String(row.b_field_id) ||
-                            (dragLineRowIds ? dragLineRowIds.has(String(row.b_field_id)) : false)),
-                        'is-drop-before':
-                          dragLine &&
-                          dragLine.fieldId === String(row.b_field_id) &&
-                          dragLine.pos === 'before',
-                        'is-drop-after':
-                          dragLine &&
-                          dragLine.fieldId === String(row.b_field_id) &&
-                          dragLine.pos === 'after',
-                        'is-drop-newline':
-                          dragLine &&
-                          dragLine.fieldId === String(row.b_field_id) &&
-                          dragLine.pos === 'newline',
-                        'is-drop-line-before':
-                          dragLine &&
-                          dragLine.fieldId === String(row.b_field_id) &&
-                          dragLine.pos === 'line-before',
-                      }"
-                      :data-field-id="String(row.b_field_id)"
-                      :data-row-id="String(row.b_id)"
-                      :style="{ gridColumn: `span ${spanOf(row)}` }"
-                      @click.stop="selectRow(row)"
-                    >
-                      <div
-                        v-if="dragLine && dragLine.fieldId === String(row.b_field_id)"
-                        class="mm-fdesign__drop-tip"
-                        :class="`is-${dragLine.pos}`"
-                      >
-                        {{ dropTipText(dragLine.pos) }}
-                      </div>
-                      <div class="mm-fdesign__field-label">
-                        <span class="mm-fdesign__field-name">{{ fieldName(row) }}</span>
-                        <i
-                          v-if="Number(row.b_required) === 1"
-                          class="mm-fdesign__required"
-                          >*</i
-                        >
-                        <span class="mm-fdesign__label-chips">
-                          <button
-                            type="button"
-                            class="mm-fdesign__label-chip"
-                            :class="{ 'is-on': Number(row.b_required) === 1 }"
-                            title="必填"
-                            aria-label="切换必填"
-                            @click.stop="onLabelChip(row, 'b_required')"
-                          >
-                            <Asterisk :size="12" />
-                          </button>
-                          <button
-                            type="button"
-                            class="mm-fdesign__label-chip"
-                            :class="{ 'is-on': Number(row.b_visible) === 1 }"
-                            title="显示"
-                            aria-label="切换显示"
-                            @click.stop="onLabelChip(row, 'b_visible')"
-                          >
-                            <Eye v-if="Number(row.b_visible) === 1" :size="12" />
-                            <EyeOff v-else :size="12" />
-                          </button>
-                        </span>
-                        <Button
-                          type="ghost"
-                          class="mm-fdesign__tool-btn is-danger"
-                          title="删除字段"
-                          aria-label="删除字段"
-                          @click.stop="removeRow(row)"
-                        >
-                          <Trash2 :size="12" />
-                        </Button>
-                      </div>
-                      <div class="mm-fdesign__field-control">
-                        <input
-                          v-if="fieldType(row) === 'input'"
-                          class="mm-fdesign__ctrl"
-                          type="text"
-                          tabindex="-1"
-                          :placeholder="placeholderOf(row)"
-                        />
-                        <textarea
-                          v-else-if="fieldType(row) === 'textarea'"
-                          class="mm-fdesign__ctrl"
-                          tabindex="-1"
-                          :placeholder="placeholderOf(row)"
-                          :style="{ height: `${heightOf(row)}px` }"
-                        />
-                        <select
-                          v-else-if="fieldType(row) === 'select'"
-                          class="mm-fdesign__ctrl"
-                          tabindex="-1"
-                        >
-                          <option value="">{{ placeholderOf(row) }}</option>
-                        </select>
-                        <div
-                          v-else-if="fieldType(row) === 'checkbox'"
-                          class="mm-fdesign__ctrl-checkbox"
-                        >
-                          <input type="checkbox" tabindex="-1" />
-                          <span>{{ fieldOf(row)?.b_default_value || '选项' }}</span>
-                        </div>
-                        <input
-                          v-else-if="fieldType(row) === 'date'"
-                          class="mm-fdesign__ctrl"
-                          type="date"
-                          tabindex="-1"
-                        />
-                        <input
-                          v-else-if="fieldType(row) === 'datetime'"
-                          class="mm-fdesign__ctrl"
-                          type="datetime-local"
-                          tabindex="-1"
-                        />
-                        <input
-                          v-else-if="fieldType(row) === 'number' || fieldType(row) === 'money'"
-                          class="mm-fdesign__ctrl"
-                          type="number"
-                          tabindex="-1"
-                          :placeholder="placeholderOf(row)"
-                        />
-                        <input
-                          v-else
-                          class="mm-fdesign__ctrl"
-                          type="text"
-                          tabindex="-1"
-                          :placeholder="placeholderOf(row)"
-                        />
-                      </div>
-                    </div>
-                  </template>
-                  <template #footer>
-                    <div v-if="!section.rows.length" class="mm-fdesign__grid-empty">暂无内容</div>
-                  </template>
-                </draggable>
-                </div>
-              </div>
-                </template>
-              </draggable>
-            </template>
-            <draggable
-              v-else
-              class="mm-fdesign__empty-list"
-              data-section-key="ungrouped"
-              :list="sectionRowCache['']"
-              :group="{ name: 'form' }"
-              item-key="b_id"
-              :animation="150"
-              ghost-class="mm-fdesign__sortable-ghost"
-              :fallback-on-body="true"
-              :force-fallback="true"
-              fallback-class="mm-fdesign__drag-fallback"
-              :move="onFieldMove"
-              @start="onFieldDragStart"
-              @end="onFieldDragEnd"
-            >
-              <template #item="{ element: row }">
-                <div
-                  class="mm-fdesign__field"
-                  :data-field-id="String(row.b_field_id)"
-                  :data-row-id="String(row.b_id)"
-                  :style="{ gridColumn: `span ${spanOf(row)}` }"
-                  @click.stop="selectRow(row)"
-                >
-                  <div class="mm-fdesign__field-label">
-                    <span class="mm-fdesign__field-name">{{ fieldName(row) }}</span>
-                  </div>
-                  <div class="mm-fdesign__field-control">
-                    <input class="mm-fdesign__ctrl" type="text" tabindex="-1" />
-                  </div>
-                </div>
-              </template>
-              <template #footer>
-                <div class="mm-fdesign__empty">暂无内容</div>
-              </template>
-            </draggable>
-          </div>
-        </div>
-      </div>
-      </div>
-
-      <!-- ================= 表单（主表）设计：属性面板 ================= -->
-      <aside
-        class="mm-fdesign__inspector"
-        :class="{ 'is-collapsed': inspectorCollapsed }"
-        aria-label="属性面板"
-      >
-        <Button
-          v-if="inspectorCollapsed"
-          type="ghost"
-          class="mm-fdesign__panel-expand"
-          title="展开属性面板"
-          aria-label="展开属性面板"
-          @click="inspectorCollapsed = false"
-        >
-          <PanelRightOpen :size="14" />
-        </Button>
-        <template v-else>
-        <div class="mm-fdesign__subhead">
-          <strong>属性</strong>
-          <span class="mm-fdesign__subhead-meta">
-            <span>{{ selectedRow ? fieldName(selectedRow) : '未选中字段' }}</span>
-            <Button
-              type="ghost"
-              class="mm-fdesign__collapse"
-              title="折叠属性面板"
-              aria-label="折叠属性面板"
-              @click="inspectorCollapsed = true"
-            >
-              <PanelRightClose :size="13" />
-            </Button>
-          </span>
-        </div>
-        <template v-if="selectedRow">
-          <div class="mm-fdesign__prop-group">基础信息</div>
-          <div class="mm-fdesign__prop">
-            <label>字段标题</label>
-            <span class="mm-fdesign__prop-static">{{ fieldName(selectedRow) }}</span>
-          </div>
-          <div class="mm-fdesign__prop">
-            <label>控件类型</label>
-            <span class="mm-fdesign__prop-static">{{ controlTypeLabel(selectedRow) }}</span>
-          </div>
-          <div class="mm-fdesign__prop mm-fdesign__prop--full">
-            <label for="mm-fdesign-placeholder">占位符</label>
-            <Input
-              id="mm-fdesign-placeholder"
-              class="mm-fdesign__prop-input"
-              maxlength="100"
-              :model-value="selectedRow.b_placeholder || ''"
-              :disabled="loading"
-              placeholder="输入框内的浅色提示文字"
-              @change="onPlaceholderChange"
-            />
-          </div>
-          <div class="mm-fdesign__prop-group">布局</div>
-          <div class="mm-fdesign__prop-row">
-            <div
-              class="mm-fdesign__prop"
-              :class="{ 'mm-fdesign__prop--full': !isTextarea(selectedRow) }"
-            >
-              <label for="mm-fdesign-colspan">栅格宽度</label>
-              <div class="mm-fdesign__span-control">
-                <Input
-                  id="mm-fdesign-colspan"
-                  type="number"
-                  class="mm-fdesign__span-input"
-                  :model-value="spanOf(selectedRow)"
-                  :disabled="loading"
-                  aria-label="栅格宽度"
-                  @change="onColspanInput"
-                />
-              </div>
-            </div>
-            <div v-if="isTextarea(selectedRow)" class="mm-fdesign__prop">
-              <label for="mm-fdesign-height">文本域高度</label>
-              <div class="mm-fdesign__height-control">
-                <Select
-                  id="mm-fdesign-height"
-                  :model-value="String(heightOf(selectedRow))"
-                  :disabled="loading"
-                  :options="TEXTAREA_HEIGHT_OPTIONS"
-                  @update:model-value="onHeightChange"
-                />
-                <Input
-                  type="number"
-                  class="mm-fdesign__span-input"
-                  :model-value="heightOf(selectedRow)"
-                  :disabled="loading"
-                  aria-label="自定义文本域高度"
-                  @change="onHeightChange"
-                />
-              </div>
-            </div>
-          </div>
-          <div class="mm-fdesign__prop-group">状态</div>
-          <div class="mm-fdesign__toggles">
-            <div class="mm-fdesign__toggle-line">
-              <span>必填</span>
-              <Switch
-                :model-value="Number(selectedRow.b_required) === 1"
-                :disabled="loading"
-                @update:model-value="() => toggleInspector('b_required')"
-              />
-            </div>
-            <div class="mm-fdesign__toggle-line">
-              <span>只读</span>
-              <Switch
-                :model-value="Number(selectedRow.b_readonly) === 1"
-                :disabled="loading"
-                @update:model-value="() => toggleInspector('b_readonly')"
-              />
-            </div>
-            <div class="mm-fdesign__toggle-line">
-              <span>禁用</span>
-              <Switch
-                :model-value="Number(selectedRow.b_disabled) === 1"
-                :disabled="loading"
-                @update:model-value="() => toggleInspector('b_disabled')"
-              />
-            </div>
-            <div class="mm-fdesign__toggle-line">
-              <span>显示</span>
-              <Switch
-                :model-value="Number(selectedRow.b_visible) === 1"
-                :disabled="loading"
-                @update:model-value="() => toggleInspector('b_visible')"
-              />
-            </div>
-          </div>
-          <div class="mm-fdesign__prop-group">操作</div>
-          <Button
-            type="danger"
-            :disabled="loading"
-            class="mm-fdesign__delete"
-            @click="removeSelected"
-          >
-            <Trash2 :size="14" /> 删除字段
-          </Button>
-        </template>
-        </template>
-      </aside>
-    </div>
-
-    <!-- ================= 数据视图 ================= -->
-    <div v-show="viewMode === 'data'" class="mm-edit__data">
-      <div class="mm-panel__toolbar">
-        <Button type="outline" :disabled="loading" @click="switchView('design')">
-          返回设计视图
-        </Button>
-        <Button type="outline" :disabled="loading || !listConfig.length" @click="syncToList">
-          同步到列表配置
-        </Button>
-        <Button type="outline" :disabled="loading || !queryConfig.length" @click="syncToQuery">
-          同步到查询配置
-        </Button>
-      </div>
-      <div class="mm-panel__body">
-        <FmsTable
-          :columns="dataColumns"
-          :data-source="localEdit"
-          :editable="!loading"
-          :row-draggable="!loading"
-          row-key="b_id"
-          :active-row-key="activeKey"
-          @row-click="(_, row) => (activeKey = String(row.b_id))"
-          @change="emitUpdate"
-          @row-order-change="onRowOrderChange"
-        />
-      </div>
-    </div>
-
-    <!-- ================= 分组设置弹窗 ================= -->
-    <Modal
-      v-model:open="sectionSettingsOpen"
-      title="分组设置"
-      width="420"
-      :resizable="false"
-      :fullscreen="false"
-      @ok="saveSectionSettings"
-    >
-      <div class="mm-fdesign__section-settings">
-        <div class="mm-fdesign__section-settings-row">
-          <label class="mm-fdesign__section-settings-label">分组宽度</label>
-          <div class="mm-fdesign__section-settings-control">
-            <div class="mm-fdesign__section-settings-steps">
-              <button
-                v-for="v in GROUP_STEP_COLS"
-                :key="v"
-                type="button"
-                class="mm-fdesign__section-settings-step"
-                :class="{ 'is-active': sectionSettings.cols === v }"
-                @click="sectionSettings.cols = v"
-              >{{ v }}</button>
-            </div>
-            <Input
-              v-model="sectionSettings.cols"
-              type="number"
-              min="1"
-              max="48"
-              step="1"
-              class="mm-fdesign__section-settings-input"
-            />
-          </div>
-        </div>
-        <div class="mm-fdesign__section-settings-row">
-          <label class="mm-fdesign__section-settings-label">新建字段默认宽度</label>
-          <div class="mm-fdesign__section-settings-control">
-            <div class="mm-fdesign__section-settings-steps">
-              <button
-                v-for="v in GROUP_STEP_FIELDS"
-                :key="v"
-                type="button"
-                class="mm-fdesign__section-settings-step"
-                :class="{ 'is-active': sectionSettings.fieldCols === v }"
-                @click="sectionSettings.fieldCols = v"
-              >{{ v }}</button>
-            </div>
-            <Input
-              v-model="sectionSettings.fieldCols"
-              type="number"
-              min="1"
-              max="24"
-              step="1"
-              class="mm-fdesign__section-settings-input"
-            />
-          </div>
-        </div>
-      </div>
-    </Modal>
-
-    <!-- ================= 表单预览 ================= -->
-    <Modal
-      v-model:open="previewOpen"
-      title="表单预览"
-      width="760"
-      :resizable="false"
-      :fullscreen="false"
-      :footer="false"
-    >
-      <Form
-        :model="previewModel"
-        layout="vertical"
-        :span-columns="24"
-        class="mm-fdesign__preview-form"
-      >
-        <div class="mm-fdesign__preview">
-          <template v-if="canvasSections.length">
-            <div
-              v-for="section in canvasSections"
-              :key="section.key"
-              class="mm-fdesign__preview-section"
-              :style="{ gridColumn: `span ${section.cols}` }"
-            >
-              <div
-                v-if="section.title && section.group"
-                class="mm-fdesign__preview-title"
-              >{{ section.title }}</div>
-              <div class="mm-fdesign__preview-grid">
-                <FormItem
-                  v-for="row in section.rows"
-                  :key="row.b_id"
-                  :name="String(row.b_field_id)"
-                  :label="fieldName(row)"
-                  :required="Number(row.b_required) === 1"
-                  :span="spanOf(row)"
-                >
-                  <Input
-                    v-if="fieldType(row) === 'input'"
-                    :placeholder="placeholderOf(row)"
-                    :disabled="Number(row.b_disabled) === 1"
-                    :readonly="Number(row.b_readonly) === 1"
-                  />
-                  <Input
-                    v-else-if="fieldType(row) === 'textarea'"
-                    type="textarea"
-                    :rows="2"
-                    :placeholder="placeholderOf(row)"
-                    :disabled="Number(row.b_disabled) === 1"
-                    :readonly="Number(row.b_readonly) === 1"
-                  />
-                  <Select
-                    v-else-if="fieldType(row) === 'select'"
-                    :placeholder="placeholderOf(row)"
-                    :options="[]"
-                    :disabled="Number(row.b_disabled) === 1"
-                  />
-                  <Checkbox
-                    v-else-if="fieldType(row) === 'checkbox'"
-                    :disabled="Number(row.b_disabled) === 1"
-                  >{{ fieldOf(row)?.b_default_value || '选项' }}</Checkbox>
-                  <DatePicker
-                    v-else-if="fieldType(row) === 'date'"
-                    :disabled="Number(row.b_disabled) === 1"
-                  />
-                  <DatePicker
-                    v-else-if="fieldType(row) === 'datetime'"
-                    format="YYYY-MM-DD HH:mm"
-                    :disabled="Number(row.b_disabled) === 1"
-                  />
-                  <Input
-                    v-else-if="fieldType(row) === 'number' || fieldType(row) === 'money'"
-                    type="number"
-                    :placeholder="placeholderOf(row)"
-                    :disabled="Number(row.b_disabled) === 1"
-                    :readonly="Number(row.b_readonly) === 1"
-                  />
-                  <Input
-                    v-else
-                    type="text"
-                    :placeholder="placeholderOf(row)"
-                    :disabled="Number(row.b_disabled) === 1"
-                    :readonly="Number(row.b_readonly) === 1"
-                  />
-                </FormItem>
-              </div>
-            </div>
-          </template>
-          <div v-else class="mm-fdesign__preview-empty">暂无字段</div>
-        </div>
-      </Form>
-    </Modal>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.mm-edit {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  flex: 1;
-  border: 1px solid var(--fms-border);
-  border-radius: var(--fms-control-radius);
-  /* 裁剪内部直角背景（如 .mm-fdesign 白底），避免其覆盖圆角区域导致"圆角被截断" */
-  overflow: hidden;
-}
-
-/* ---- 中间列顶部 header（左 = 编辑方式/布局；中 = 视图切换；右 = 操作），
- * 底部 1px 分割线与画布分隔。左侧控件增多后不再绝对居中视图切换，
- * 改为左右两翼弹性伸缩、中间固定，避免重叠 ---- */
-.mm-edit__head {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex: none;
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--fms-border);
-}
-
-/* 视图切换：左/右两翼 flex 伸缩挤出中间位，保证居中 */
-.mm-edit__head-center {
-  flex: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.mm-edit__head-left {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  min-width: 0;
-  flex: 1 1 auto;
-  justify-content: flex-start;
-}
-
-.mm-edit__head-right {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-  flex: 1 1 auto;
-  justify-content: flex-end;
-}
-
-/* 编辑方式：ui RadioGroup（紧凑字号） */
-.mm-edit__mode {
-  font-size: 12px;
-}
-
-/* 视图切换：ui Tabs nav-only */
-.mm-edit__view-switch {
-  font-size: 12px;
-}
-
-/* ---- 快捷键帮助（右上角 ? 图标，ui Popover hover 展示） ---- */
-.mm-edit__help-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  border: 1px solid var(--fms-border);
-  border-radius: 50%;
-  background: var(--fms-card);
-  color: var(--fms-text-secondary);
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 1;
-  padding-bottom: 1px; /* 问号字形重心略偏上，下移 1px 视觉居中 */
-  cursor: help;
-  transition:
-    border-color 0.15s,
-    color 0.15s,
-    background 0.15s;
-
-  &:hover {
-    border-color: color-mix(in srgb, var(--fms-primary) 45%, transparent);
-    background: color-mix(in srgb, var(--fms-primary) 5%, var(--fms-card));
-    color: var(--fms-primary);
-  }
-}
-
-.mm-edit__help-title {
-  margin-bottom: 6px;
-  color: var(--fms-text);
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.mm-edit__help-list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-
-  li {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 3px 0;
-    color: var(--fms-text-secondary);
-    font-size: 11px;
-  }
-
-  kbd {
-    flex: none;
-    min-width: 76px;
-    padding: 1px 6px;
-    border: 1px solid var(--fms-border);
-    border-bottom-width: 2px;
-    border-radius: 4px;
-    background: var(--fms-secondary);
-    color: var(--fms-text);
-    font-size: 10px;
-    font-family: inherit;
-    text-align: center;
-  }
-}
-
-/* ---- 设计视图：工作区模型（三栏统一灰底，白色表单纸面居中浮起） ---- */
-.mm-fdesign {
-  display: grid;
-  grid-template-columns: 184px minmax(0, 1fr) 280px;
-  flex: 1;
-  min-height: 0;
-  min-width: 0;
-  /* 全白三栏 + 分割线：左/右 1px 竖线分隔，header 在中间列顶部
-     字段库略窄、属性面板略宽，突出字段配置 */
-  background: var(--fms-card);
-}
-
-/* 属性面板折叠时收窄为展开条 */
-.mm-fdesign.is-inspector-collapsed {
-  grid-template-columns: 196px minmax(0, 1fr) 32px;
-}
-
-/* 画布区：中间列主体（header 下方），浅灰底与左右白面板区分，
- * 字段控件透明排布在灰底上，通过输入框自带边框区分 */
-.mm-fdesign__canvas-wrap {
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
-  overflow: auto;
-  background: var(--fms-background);
-}
-
-.mm-fdesign__canvas {
-  min-width: 100%;
-  min-height: 100%;
-  padding: 10px;
-  box-sizing: border-box;
-}
-
-/* 左栏：白底 + 右分割线（与中间列分隔） */
-.mm-fdesign__lib {
-  border-right: 1px solid var(--fms-border);
-  overflow: auto;
-  padding: 10px;
-  background: var(--fms-card);
-}
-
-/* 中间列：flex column（header + 画布） */
-.mm-fdesign__main {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  min-height: 0;
-}
-
-/* 右栏：白底 + 左分割线（与中间列分隔） */
-.mm-fdesign__inspector {
-  border-left: 1px solid var(--fms-border);
-  overflow: auto;
-  padding: 10px;
-  background: var(--fms-card);
-}
-
-/* 折叠态：面板内容隐藏，仅保留展开按钮 */
-.mm-fdesign__lib.is-collapsed,
-.mm-fdesign__inspector.is-collapsed {
-  padding: 0;
-  border: none;
-  border-radius: 0;
-  background: transparent;
-  overflow: hidden;
-}
-
-/* 展开属性面板（覆盖 ui Button 默认尺寸） */
-.mm-fdesign__panel-expand.button {
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  min-height: 0;
-  padding-top: 10px;
-  background: transparent;
-  color: color-mix(in srgb, var(--fms-text-secondary) 70%, var(--fms-text));
-
-  &:hover:not(:disabled) {
-    background: transparent;
-    color: var(--fms-primary);
-  }
-}
-
-.mm-fdesign__subhead {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  margin-bottom: 8px;
-
-  strong {
-    font-size: 14px;
-    color: var(--fms-text);
-    font-weight: 700;
-  }
-}
-
-.mm-fdesign__subhead-meta {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: color-mix(in srgb, var(--fms-text-secondary) 70%, var(--fms-text));
-  font-size: 10px;
-}
-
-/* 「源已移除」告警徽标：供后续若字段来源缺失时高亮使用（仅样式层） */
-.mm-fdesign__stale-tag {
-  display: inline-flex;
-  align-items: center;
-  padding: 0 5px;
-  border: 1px solid color-mix(in srgb, var(--fms-danger, #f5222d) 45%, transparent);
-  border-radius: var(--fms-control-radius, 4px);
-  background: color-mix(in srgb, var(--fms-danger, #f5222d) 10%, var(--fms-card));
-  color: var(--fms-danger, #f5222d);
-  font-size: 10px;
-  line-height: 16px;
-}
-
-/* 折叠属性面板（覆盖 ui Button 默认尺寸） */
-.mm-fdesign__collapse.button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  min-height: 0;
-  padding: 0;
-  border-radius: 4px;
-  background: transparent;
-  color: color-mix(in srgb, var(--fms-text-secondary) 70%, var(--fms-text));
-  transform: none;
-
-  &:hover:not(:disabled) {
-    background: var(--fms-secondary);
-    color: var(--fms-text);
-  }
-}
-
-/* 搜索框：压缩 ui Input 高度（覆盖默认 --fms-control-height） */
-.mm-fdesign__lib-search.input-wrapper {
-  height: 26px;
-  min-height: 0;
-  padding: 0 8px;
-  font-size: 11px;
-  margin-bottom: 10px;
-}
-
-.mm-fdesign__lib-group {
-  margin-bottom: 12px;
-}
-
-.mm-fdesign__lib-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  width: 100%;
-  min-height: 28px;
-  margin-bottom: 2px;
-  padding: 0 6px;
-  border: none;
-  border-radius: 5px;
-  background: transparent;
-  color: var(--fms-text);
-  font-size: 12px;
-  font-weight: 400;
-  text-align: left;
-  cursor: pointer;
-  user-select: none;
-  -webkit-user-select: none;
-  transition:
-    background-color 0.15s,
-    color 0.15s;
-
-  &:hover {
-    background: color-mix(in srgb, var(--fms-primary) 8%, var(--fms-card));
-    color: var(--fms-primary);
-  }
-
-  &.is-selected {
-    background: color-mix(in srgb, var(--fms-primary) 14%, var(--fms-card));
-    color: var(--fms-primary);
-  }
-  /* 已加入表单的字段：不弱化视觉，与未加入字段一致（仅靠右侧 ✓ 标记区分） */
-}
-
-.mm-fdesign__lib-name {
-  min-width: 0;
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.mm-fdesign__lib-added {
-  flex: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: #e7f6ed;
-  color: #146c41;
-  font-size: 10px;
-  font-weight: 700;
-}
-
-.mm-fdesign__lib-empty {
-  padding: 12px 0;
-  color: var(--fms-text-disabled, #9ca3af);
-  font-size: 11px;
-  text-align: center;
-}
-
-/* ---- 画布 ---- */
-/* 透明画布：去掉白色纸面，让浅灰工作区底色透出，白色分组卡片直接浮于其上 */
-.mm-fdesign__sheet {
-  position: relative; /* 拖拽行高亮框的绝对定位参照 */
-  min-height: 120px;
-}
-
-/* ---- 分组卡片（主表表单设计，参考 demo.html 分组样式） ---- */
-.mm-fdesign__section {
-  margin-top: 12px;
-  border: 1px solid var(--fms-border);
-  border-radius: 8px;
-  background: var(--fms-card);
-  box-shadow: 0 1px 2px rgba(39, 54, 70, 0.05);
-  /* 不用 overflow:hidden —— 表单字段的悬浮工具栏/拖拽提示需浮出卡片上缘 */
-  transition:
-    border-color 0.15s,
-    box-shadow 0.15s;
-
-  &:hover {
-    border-color: color-mix(in srgb, var(--fms-primary) 30%, var(--fms-border));
-    box-shadow: 0 2px 8px rgba(39, 54, 70, 0.06);
-  }
-
-  &:first-of-type {
-    margin-top: 0;
-  }
-
-  /* 未分组也是一种分组：实线边框，与正式分组一致；
-   * header 用极淡主色 tint 区分（不灰、不虚线），配合「暂存」角标表明身份 */
-  &.is-ungrouped {
-    background: var(--fms-card);
-  }
-
-  &.is-ungrouped .mm-fdesign__section-title {
-    background: color-mix(in srgb, var(--fms-primary) 4%, var(--fms-card));
-  }
-}
-
-/* 分组标题行（主表表单设计）：白底 header 条，与卡片圆角裁剪。
- * 上角圆角跟随卡片（8px）：否则有色 header（如未分组的 tint）会顶着
- * 直角的 90°，在卡片圆角内侧露出白底三角区，看起来像边框被截断 */
-.mm-fdesign__section-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 7px 12px;
-  border-bottom: 1px solid var(--fms-border);
-  border-radius: 8px 8px 0 0;
-  color: var(--fms-text);
-  font-size: 12px;
-  font-weight: 600;
-}
-
-/* 分组名称：撑满剩余空间，超出省略 */
-.mm-fdesign__section-name {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* 分组名内联编辑：悬停提示可点击重命名 */
-.mm-fdesign__section-name.is-editable {
-  cursor: text;
-  border-bottom: 1px dashed transparent;
-
-  &:hover {
-    border-bottom-color: var(--fms-text-placeholder, #9ca3af);
-  }
-}
-
-/* 分组名编辑输入框 + 确认/取消：宽度自适应（填满标题栏剩余空间），
- * 短标题（如"基础"）不会撑出大片空白，长标题自动延伸 */
-.mm-fdesign__section-edit.input-wrapper {
-  flex: 1;
-  min-width: 80px;
-  height: 24px;
-  min-height: 0;
-  padding: 0 6px;
-  border: 1px solid var(--fms-primary);
-  border-radius: 4px;
-  background: var(--fms-card);
-  color: var(--fms-text);
-  font-size: 12px;
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--fms-primary) 12%, transparent);
-}
-
-.mm-fdesign__section-edit-actions {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-  flex: none;
-}
-
-.mm-fdesign__section-edit-btn.button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  min-height: 0;
-  padding: 0;
-  border: 1px solid var(--fms-border);
-  border-radius: 4px;
-  background: var(--fms-card);
-  color: var(--fms-text-secondary);
-
-  &:hover:not(:disabled) {
-    border-color: var(--fms-primary);
-    color: var(--fms-primary);
-  }
-
-  &:last-child:hover:not(:disabled) {
-    border-color: #d95757;
-    color: #d95757;
-  }
-}
-
-.mm-fdesign__grid {
-  display: grid;
-  grid-template-columns: repeat(24, minmax(0, 1fr));
-  gap: 6px;
-  /* 空分组也保留可放置高度，避免拖拽热区为零 */
-  min-height: 46px;
-}
-
-/* 表单分组内容区：标题条下方留白 */
-.mm-fdesign__section-body {
-  padding: 10px 12px;
-}
-
-/* 空分组占位（draggable footer）：无边框，仅一行提示文字 */
-.mm-fdesign__grid-empty {
-  grid-column: span 24;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 40px;
-  color: var(--fms-text-secondary);
-  font-size: 11px;
-  pointer-events: none;
-}
-
-/* 拖拽中：除被拖卡片、悬停目标行、跟随光标的拖拽克隆与幽灵占位外，
-   其余卡片整体变淡（突出拖拽焦点） */
-.mm-fdesign__canvas-wrap.is-drag-active
-  .mm-fdesign__field:not(.is-dragging):not(.is-drop-hover):not(.mm-fdesign__sortable-drag):not(
-    .mm-fdesign__sortable-ghost
-  ) {
-  opacity: 0.55;
-}
-
-/* 拖拽中：禁用卡片边框/阴影过渡动画——鼠标在卡片边缘快速移动时
-   before/after 等意图频繁切换，0.15s 过渡会让高亮条「追赶」造成抖动 */
-.mm-fdesign__canvas-wrap.is-drag-active .mm-fdesign__field {
-  transition: none;
-}
-
-/* 拖拽中：目标卡片只保留插入方向的单侧边框高亮（is-drop-* 的 inset 阴影）。
-   隐藏 hover 边框、选中虚线边框与外发光——避免整圈边框同时亮起干扰判断；
-   被拖卡片（.is-dragging / .mm-fdesign__sortable-drag）保持原样 */
-.mm-fdesign__canvas-wrap.is-drag-active
-  .mm-fdesign__field:not(.is-dragging):not(.mm-fdesign__sortable-drag) {
-  border-color: transparent !important;
-  box-shadow: none !important;
-}
-
-.mm-fdesign__canvas-wrap.is-drag-active
-  .mm-fdesign__field.is-drop-before:not(.is-dragging):not(.mm-fdesign__sortable-drag) {
-  box-shadow: inset 2px 0 0 0 var(--fms-primary) !important;
-}
-
-.mm-fdesign__canvas-wrap.is-drag-active
-  .mm-fdesign__field.is-drop-after:not(.is-dragging):not(.mm-fdesign__sortable-drag) {
-  box-shadow: inset -2px 0 0 0 var(--fms-primary) !important;
-}
-
-.mm-fdesign__canvas-wrap.is-drag-active
-  .mm-fdesign__field.is-drop-line-before:not(.is-dragging):not(.mm-fdesign__sortable-drag) {
-  box-shadow: inset 0 2px 0 0 var(--fms-primary) !important;
-}
-
-.mm-fdesign__canvas-wrap.is-drag-active
-  .mm-fdesign__field.is-drop-newline:not(.is-dragging):not(.mm-fdesign__sortable-drag) {
-  box-shadow: inset 0 -2px 0 0 var(--fms-primary) !important;
-}
-
-/* ---- 画布字段：所见即所得的真实控件（默认无背景无边框，直接排在白纸上；
- * hover 淡主色边框，选中虚线框；内部控件（input/checkbox 等）自带边框样式可区分） ---- */
-.mm-fdesign__field {
-  position: relative;
-  padding: 5px 8px 6px;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  background: var(--fms-card);
-  cursor: grab;
-  /* 拖拽时禁用文本选中，避免 label 文字像鼠标框选一样出现蓝色高亮 */
-  user-select: none;
-  -webkit-user-select: none;
-  transition:
-    border-color 0.15s,
-    box-shadow 0.15s,
-    opacity 0.2s;
-
-  &:hover {
-    border-color: color-mix(in srgb, var(--fms-primary) 35%, transparent);
-  }
-
-  &.is-selected {
-    border-style: dashed;
-    border-color: var(--fms-primary);
-    box-shadow: none;
-  }
-
-  /* 正在拖拽的源字段：保持完整显眼（其余卡片整体变淡），带淡主题色底提示 */
-  &.is-dragging {
-    opacity: 1;
-    background: color-mix(in srgb, var(--fms-primary) 6%, var(--fms-card));
-  }
-
-  /* 隐藏字段：降透明度 + 角标提示（运行时不渲染） */
-  &.is-invisible {
-    opacity: 0.55;
-  }
-
-  /* ---- 拖拽插入方向高亮：目标卡片对应侧边框高亮（阿里式 inset 阴影，不撑布局） ---- */
-  &.is-drop-before {
-    box-shadow: inset 2px 0 0 0 var(--fms-primary);
-  }
-
-  &.is-drop-after {
-    box-shadow: inset -2px 0 0 0 var(--fms-primary);
-  }
-
-  &.is-drop-line-before {
-    box-shadow: inset 0 2px 0 0 var(--fms-primary);
-  }
-
-  &.is-drop-newline {
-    box-shadow: inset 0 -2px 0 0 var(--fms-primary);
-  }
-}
-
-/* 拖拽操作提示气泡：实时告知「松手后插入到哪个位置」。
-   必须高于自绘跟手卡片（body 上 z-index 2147483000），否则光标附近会被跟手卡盖住 */
-.mm-fdesign__drop-tip {
-  position: absolute;
-  z-index: 2147483001;
-  pointer-events: none;
-  padding: 3px 10px;
-  border-radius: 12px;
-  background: var(--fms-primary);
-  color: #fff;
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 1.4;
-  white-space: nowrap;
-  box-shadow: 0 2px 8px color-mix(in srgb, var(--fms-primary) 35%, transparent);
-  left: 50%;
-  transform: translateX(-50%);
-
-  /* 上方 / 下方新行：悬浮在卡片外侧边缘 */
-  &.is-line-before {
-    top: -30px;
-  }
-
-  &.is-newline {
-    bottom: -30px;
-  }
-
-  /* 同行合并：贴在卡片左/右缘内侧（配合半区遮罩） */
-  &.is-before {
-    left: 4px;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  &.is-after {
-    left: auto;
-    right: 4px;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-}
-
-.mm-fdesign__field-label {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin-bottom: 4px;
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--fms-text);
-}
-
-.mm-fdesign__field-name {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.mm-fdesign__field-control {
-  min-height: 26px;
-}
-
-/* 画布内真实控件（纯视觉预览：不置 disabled，避免灰态；pointer-events:none 穿透到卡片本体，
-   tabindex=-1 防止 Tab 聚焦） */
-.mm-fdesign__ctrl {
-  width: 100%;
-  height: 26px;
-  padding: 0 8px;
-  border: 1px solid var(--fms-border);
-  border-radius: 4px;
-  background: var(--fms-card);
-  color: var(--fms-text);
-  font-size: 11px;
-  font-family: inherit;
-  outline: none;
-  pointer-events: none;
-
-  &::placeholder {
-    color: var(--fms-text-placeholder, #9ca3af);
-  }
-}
-
-textarea.mm-fdesign__ctrl {
-  height: auto;
-  padding: 5px 8px;
-  resize: none;
-  line-height: 1.5;
-}
-
-.mm-fdesign__ctrl-checkbox {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  height: 26px;
-  padding: 0 4px;
-  font-size: 11px;
-  color: var(--fms-text);
-  pointer-events: none; /* 纯预览，点击穿透到卡片 */
-}
-
-/* 字段删除按钮：与必填/显示图标同款行内小图标，推至最右（覆盖 ui Button 默认尺寸） */
-.mm-fdesign__tool-btn.button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  min-height: 0;
-  margin-left: auto;
-  padding: 0;
-  border: none;
-  border-radius: 4px;
-  background: color-mix(in srgb, var(--fms-primary) 5%, transparent);
-  color: var(--fms-text-disabled, #9ca3af);
-  transition:
-    background 0.15s,
-    color 0.15s;
-
-  &:hover:not(:disabled) {
-    background: color-mix(in srgb, var(--fms-primary) 16%, transparent);
-    color: var(--fms-text);
-  }
-
-  &.is-danger:hover:not(:disabled) {
-    color: #d95757;
-    background: color-mix(in srgb, #d95757 12%, transparent);
-  }
-}
-
-.mm-fdesign__required {
-  color: #d95757;
-  font-style: normal;
-  margin-left: 2px;
-}
-
-/* 幽灵占位：SortableJS 把 ghostClass 加在原卡片上（布局冻结，原位不动），
-   显示为灰色占位块（内部控件隐藏），一眼看出「这里被拖走了」；
-   跟手的是自绘跟手卡片（createDragBadge 生成，样式见全局 .mm-fdesign__drag-badge） */
-.mm-fdesign__sortable-ghost,
-.mm-fdesign__lib-ghost {
-  opacity: 1;
-  background: color-mix(in srgb, var(--fms-border) 55%, transparent) !important;
-  border-radius: 6px;
-
-  > * {
-    visibility: hidden;
-  }
-}
-
-/* 正在拖拽的卡片：置顶 + 适中阴影（避免过重显得脏） */
-.mm-fdesign__sortable-drag {
-  opacity: 0.95;
-  box-shadow: 0 8px 20px rgba(39, 54, 70, 0.16) !important;
-  z-index: 1000;
-}
-
-/* 空画布拖入容器：无边框，仅保留可放置高度 */
-.mm-fdesign__empty-list {
-  width: min(880px, 100%);
-  margin: 0 auto;
-  min-height: 120px;
-}
-
-.mm-fdesign__empty {
-  /* 空画布拖入区：无边框，仅一行提示文字 */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 80px;
-  color: var(--fms-text-secondary);
-  font-size: 11px;
-
-  &.is-over {
-    border: 1px dashed var(--fms-primary);
-    border-radius: 5px;
-    background: color-mix(in srgb, var(--fms-primary) 8%, transparent);
-  }
-}
-
-/* ---- 属性面板 ---- */
-.mm-fdesign__inspector .mm-fdesign__subhead {
-  padding-bottom: 8px;
-  margin-bottom: 2px;
-}
-
-.mm-fdesign__prop-group {
-  margin-top: 14px;
-  color: var(--fms-text);
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.02em;
-  /* 前竖线：与左侧分组小标题统一左对齐 */
-  border-left: 3px solid var(--fms-primary);
-  padding-left: 8px;
-
-  &:first-child {
-    margin-top: 0;
-  }
-}
-
-.mm-fdesign__prop {
-  margin-top: 10px;
-
-  label {
-    display: block;
-    margin-bottom: 4px;
-    color: color-mix(in srgb, var(--fms-text-secondary) 70%, var(--fms-text));
-    font-size: 10px;
-  }
-}
-
-.mm-fdesign__prop-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 8px;
-}
-
-/* 布局组只有栅格宽度一项时（非文本域字段）占满整行 */
-.mm-fdesign__prop--full {
-  grid-column: span 2;
-}
-
-/* 栅格宽度 / 文本域高度：Select + 数字输入框横排 */
-.mm-fdesign__span-control,
-.mm-fdesign__height-control {
-  display: flex;
-  gap: 4px;
-
-  :deep(.select-wrapper) {
-    flex: 1;
-    min-width: 0;
-  }
-}
-
-/* 数字输入：压缩 ui Input 高度（覆盖默认 --fms-control-height） */
-.mm-fdesign__span-input.input-wrapper {
-  flex: none;
-  width: 48px;
-  height: 26px;
-  min-height: 0;
-  padding: 0 4px;
-  font-size: 11px;
-
-  :deep(.input) {
-    text-align: center;
-  }
-}
-
-/* 栅格宽度：无下拉时数字输入框即主控件，填充剩余宽度（文本域高度仍用下拉，不受影响） */
-.mm-fdesign__span-control > .mm-fdesign__span-input.input-wrapper {
-  flex: 1;
-  width: auto;
-  min-width: 0;
-  padding: 0 8px;
-
-  :deep(.input) {
-    text-align: left;
-  }
-}
-
-.mm-fdesign__prop-static {
-  display: flex;
-  align-items: center;
-  min-height: 26px;
-  padding: 0 8px;
-  border: 1px solid var(--fms-border);
-  border-radius: 4px;
-  background: var(--fms-secondary-hover);
-  color: var(--fms-text);
-  font-size: 11px;
-}
-
-/* 属性面板常规输入：压缩 ui Input 高度 */
-.mm-fdesign__prop-input.input-wrapper {
-  height: 26px;
-  min-height: 0;
-  padding: 0 8px;
-  font-size: 11px;
-}
-
-.mm-fdesign__toggles {
-  margin-top: 10px;
-}
-
-.mm-fdesign__toggle-line {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 28px;
-  color: var(--fms-text);
-  font-size: 11px;
-}
-
-.mm-fdesign__delete {
-  margin-top: 10px;
-  width: 100%;
-}
-
-/* ---- 数据视图 ---- */
-.mm-edit__data {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-}
-
-.mm-panel__toolbar {
-  display: flex;
-  flex: none;
-  flex-wrap: wrap;
-  gap: 8px;
-  padding: 0 0 8px;
-}
-
-.mm-panel__body {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  flex: 1;
-}
-
-/* ---- 分组标题行：右侧操作（字段/列计数 + 停用标记 + 删除），主表/子表统一 ---- */
-.mm-edit__section-meta {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  flex: none;
-  /* 无标题分组时标题名不渲染，meta 仍靠右 */
-  margin-left: auto;
-  margin-left: auto;
-}
-
-/* 画布分组删除按钮（标题行右侧）：图标常驻显示 */
-.mm-fdesign__section-del {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  padding: 0;
-  border: 1px solid transparent;
-  border-radius: var(--fms-control-radius, 5px);
-  background: transparent;
-  color: var(--fms-text-placeholder, #9ca3af);
-  cursor: pointer;
-  transition:
-    background 0.15s,
-    color 0.15s,
-    border-color 0.15s;
-
-  &:hover {
-    background: color-mix(in srgb, var(--fms-danger, #d95757) 10%, var(--fms-card));
-    color: var(--fms-danger, #d95757);
-    border-color: color-mix(in srgb, var(--fms-danger, #d95757) 35%, transparent);
-  }
-}
-
-/* 分组标题为空时的占位：灰色「空」，点击可设置标题 */
-.mm-fdesign__section-name.is-empty {
-  color: var(--fms-text-placeholder, #9ca3af);
-  cursor: text;
-}
-
-/* 分组拖拽手柄（标题行左侧）：拖动调整分组顺序 */
-.mm-fdesign__section-grip {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  width: 22px;
-  height: 22px;
-  padding: 0;
-  border: 1px solid transparent;
-  border-radius: var(--fms-control-radius, 5px);
-  background: transparent;
-  color: var(--fms-text-placeholder, #9ca3af);
-  cursor: grab;
-  transition:
-    background 0.15s,
-    color 0.15s;
-
-  &:hover {
-    background: var(--fms-secondary-hover, #f1f5f9);
-    color: var(--fms-text);
-  }
-
-  &:active {
-    cursor: grabbing;
-  }
-}
-
-/* 分组卡片拖拽占位：分组拖拽没有自绘跟手卡片（fallback 克隆被全局隐藏），
- * ghost 即用户看到的「被拖分组」本体——必须正常显示标题与字段内容，
- * 只加主色边框提示位置，区别于变淡的其他分组 */
-.mm-fdesign__section-ghost {
-  opacity: 1;
-  border-color: color-mix(in srgb, var(--fms-primary) 55%, var(--fms-border)) !important;
-  box-shadow: 0 2px 8px rgba(39, 54, 70, 0.06);
-}
-
-/* 分组拖拽中：非拖拽的分组卡片变淡，突出拖拽焦点（与字段拖拽一致） */
-.mm-fdesign__canvas-wrap.is-section-drag-active
-  .mm-fdesign__section:not(.mm-fdesign__section-ghost) {
-  opacity: 0.7;
-}
-
-/* 分组拖拽中：ghost 内的字段禁止 hover / 点击穿透——
- * 否则鼠标扫过被拖分组时字段会触发自己的 hover 样式，干扰拖拽视觉 */
-.mm-fdesign__canvas-wrap.is-section-drag-active .mm-fdesign__section-ghost {
-  pointer-events: none;
-
-  .mm-fdesign__field {
-    pointer-events: none;
-    border-color: transparent;
-  }
-}
-
-/* 分组级左右布局：标题在左（竖排），字段画布在右；仅影响单个分组 */
-.mm-fdesign__section.is-horizontal {
-  display: flex;
-  align-items: stretch;
-  gap: 0;
-
-  .mm-fdesign__section-title {
-    flex: none;
-    width: 56px;
-    margin-bottom: 0;
-    padding: 10px 0;
-    border-bottom: none;
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
-
-    .mm-fdesign__section-name {
-      writing-mode: vertical-rl;
-      letter-spacing: 0.2em;
-    }
-
-    .mm-edit__section-meta {
-      flex-direction: column;
-      align-items: center;
-      margin-left: 0;
-      gap: 4px;
-    }
-  }
-
-  .mm-fdesign__section-body {
-    flex: 1;
-    min-width: 0;
-  }
-}
-
-/* ---- 分组卡片容器：外层 48 宫格流式排布 ----
- * 每个分组按自身占格数（gridColumn: span N）排列，放不下自动换行；
- * 分组内部字段仍是独立 24 宫格（.mm-fdesign__grid） */
-.mm-fdesign__sections {
-  display: grid;
-  grid-template-columns: repeat(48, minmax(0, 1fr));
-  align-items: start;
-  gap: 12px;
-}
-
-.mm-fdesign__sections .mm-fdesign__section {
-  margin-top: 0 !important; /* grid gap 已提供间距，覆盖基础 margin-top */
-  min-width: 0;
-}
-
-/* ---- 卡片标签行快捷开关（必填 / 显示）----
-   常驻显示（不再 hover / 选中才浮现），方便直接点按切换；
-   图标灰色=未开启，主题色=开启 */
-.mm-fdesign__label-chips {
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  margin-left: 4px;
-}
-
-.mm-fdesign__label-chip {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  padding: 0;
-  border: none;
-  border-radius: 4px;
-  background: color-mix(in srgb, var(--fms-primary) 5%, transparent);
-  color: var(--fms-text-disabled, #9ca3af);
-  cursor: pointer;
-  transition:
-    background 0.15s,
-    color 0.15s;
-
-  &:hover {
-    background: color-mix(in srgb, var(--fms-primary) 16%, transparent);
-  }
-
-  &.is-on {
-    color: var(--fms-primary);
-    background: color-mix(in srgb, var(--fms-primary) 16%, transparent);
-  }
-}
-
-/* ---- 栅格宽度：步进按钮 + 本行占用合计 ---- */
-.mm-fdesign__step {
-  flex: none;
-  width: 22px;
-  height: 26px;
-  padding: 0;
-  border: 1px solid var(--fms-border);
-  border-radius: 4px;
-  background: var(--fms-card);
-  color: var(--fms-text-secondary);
-  font-size: 12px;
-  line-height: 1;
-  cursor: pointer;
-
-  &:hover:not(:disabled) {
-    border-color: var(--fms-primary);
-    color: var(--fms-primary);
-  }
-
-  &:disabled {
-    opacity: 0.45;
-    cursor: not-allowed;
-  }
-}
-
-</style>
-
-<!-- fallback 克隆（SortableJS 在 body 上生成的整卡克隆）不在 scoped 作用域内，需全局隐藏：
-     拖动时只保留自绘的跟手卡片（.mm-fdesign__drag-badge），不显示整卡克隆 -->
-<style lang="scss">
-.mm-fdesign__drag-fallback {
-  display: none !important;
-}
-
-/* 跟手卡片（全局样式）：createDragBadge 用 JS 动态创建该元素并挂到 body，
- * 不在 Vue 模板内，scoped 样式匹配不到，必须定义为全局样式。
- * 位置/层级由 createDragBadge 内联控制（position:fixed + transform），这里负责外观：
- * 白底 + 圆角 + 主色描边 + 阴影的方形迷你卡片，字段名被包含在卡片中一起拖动 */
-.mm-fdesign__drag-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 120px;
-  max-width: 220px;
-  padding: 8px 12px;
-  border-radius: 6px;
-  background: var(--fms-card, #fff);
-  border: 1px solid color-mix(in srgb, var(--fms-primary) 35%, transparent);
-  box-shadow: 0 6px 18px rgba(39, 54, 70, 0.18);
-  color: var(--fms-text-primary, #1f2d3d);
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 1.5;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-/* ---- 分组设置按钮（齿轮）：打开分组设置弹窗（覆盖 ui Button 默认尺寸） ---- */
-.mm-fdesign__section-btn.button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  min-height: 0;
-  padding: 0;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--fms-text-placeholder, #9ca3af);
-  transition:
-    background 0.15s,
-    color 0.15s,
-    border-color 0.15s;
-
-  &:hover:not(:disabled) {
-    background: var(--fms-secondary-hover, #f1f5f9);
-    color: var(--fms-text);
-    border-color: var(--fms-border);
-  }
-}
-
-/* ---- 分组设置弹窗 ---- */
-.mm-fdesign__section-settings {
-  display: flex;
-  flex-direction: column;
-  gap: 18px;
-  padding: 4px 0;
-}
-
-.mm-fdesign__section-settings-row {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.mm-fdesign__section-settings-label {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--fms-text);
-}
-
-.mm-fdesign__section-settings-control {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.mm-fdesign__section-settings-steps {
-  display: inline-flex;
-  gap: 4px;
-}
-
-.mm-fdesign__section-settings-step {
-  min-width: 34px;
-  height: 28px;
-  padding: 0 6px;
-  border: 1px solid var(--fms-border);
-  border-radius: 5px;
-  background: var(--fms-card);
-  color: var(--fms-text-secondary);
-  font-size: 12px;
-  font-family: inherit;
-  cursor: pointer;
-  transition:
-    background 0.15s,
-    color 0.15s,
-    border-color 0.15s;
-
-  &:hover {
-    border-color: var(--fms-primary);
-    color: var(--fms-primary);
-  }
-
-  &.is-active {
-    border-color: var(--fms-primary);
-    background: color-mix(in srgb, var(--fms-primary) 10%, var(--fms-card));
-    color: var(--fms-primary);
-    font-weight: 500;
-  }
-}
-
-.mm-fdesign__section-settings-input {
-  width: 72px;
-}
-
-/* ---- 表单预览（主表）：运行时形态，用 Form/FormItem 渲染 ----
- * 外层 48 宫格与设计画布一致，分组按各自 cols 占格流式排布；
- * 分组内层 24 宫格由 FormItem 的 span 跨列实现。
- * 间距层次：分组间 > item 间，无边框时靠间距区分分组边界 */
-.mm-fdesign__preview {
-  display: grid;
-  grid-template-columns: repeat(48, minmax(0, 1fr));
-  gap: 16px 12px;
-  align-items: start;
-}
-
-.mm-fdesign__preview-section {
-  min-width: 0;
-  padding: 0;
-}
-
-.mm-fdesign__preview-title {
-  margin-bottom: 8px;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--fms-text);
-}
-
-.mm-fdesign__preview-grid {
-  display: grid;
-  grid-template-columns: repeat(24, minmax(0, 1fr));
-  gap: 8px 10px;
-  align-items: start;
-}
-
-/* Form 上下文：预览只关心布局与控件，不渲染提交行为相关 UI */
-.mm-fdesign__preview-form {
-  width: 100%;
-}
-
-/* 预览内 FormItem 纵向间距归零，由 grid gap 统一控制 */
-.mm-fdesign__preview-grid :deep(.fms-form-item) {
-  margin-bottom: 0;
-}
-
-.mm-fdesign__preview-empty {
-  padding: 40px 0;
-  text-align: center;
-  color: var(--fms-text-secondary);
-  font-size: 13px;
-}
-</style>
diff --git a/code/fms/fms-vue/src/views/system/module-management/components/form-edit/FormEditPanel.vue b/code/fms/fms-vue/src/views/system/module-management/components/form-edit/FormEditPanel.vue
index f87b1860..b09bb160 100644
--- a/code/fms/fms-vue/src/views/system/module-management/components/form-edit/FormEditPanel.vue
+++ b/code/fms/fms-vue/src/views/system/module-management/components/form-edit/FormEditPanel.vue
@@ -2047,14 +2047,6 @@ onBeforeUnmount(() => {
   box-sizing: border-box;
 }
 
-/* 左栏：白底 + 右分割线（与中间列分隔） */
-.mm-fdesign__lib {
-  border-right: 1px solid var(--fms-border);
-  overflow: auto;
-  padding: 10px;
-  background: var(--fms-card);
-}
-
 /* 中间列：flex column（header + 画布） */
 .mm-fdesign__main {
   display: flex;
@@ -2063,173 +2055,6 @@ onBeforeUnmount(() => {
   min-height: 0;
 }
 
-/* 右栏：白底 + 左分割线（与中间列分隔） */
-.mm-fdesign__inspector {
-  border-left: 1px solid var(--fms-border);
-  overflow: auto;
-  padding: 10px;
-  background: var(--fms-card);
-}
-
-/* 折叠态：面板内容隐藏，仅保留展开按钮 */
-.mm-fdesign__lib.is-collapsed,
-.mm-fdesign__inspector.is-collapsed {
-  padding: 0;
-  border: none;
-  border-radius: 0;
-  background: transparent;
-  overflow: hidden;
-}
-
-/* 展开属性面板（覆盖 ui Button 默认尺寸） */
-.mm-fdesign__panel-expand.button {
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  min-height: 0;
-  padding-top: 10px;
-  background: transparent;
-  color: color-mix(in srgb, var(--fms-text-secondary) 70%, var(--fms-text));
-
-  &:hover:not(:disabled) {
-    background: transparent;
-    color: var(--fms-primary);
-  }
-}
-
-.mm-fdesign__subhead {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  margin-bottom: 8px;
-
-  strong {
-    font-size: 14px;
-    color: var(--fms-text);
-    font-weight: 700;
-  }
-}
-
-.mm-fdesign__subhead-meta {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: color-mix(in srgb, var(--fms-text-secondary) 70%, var(--fms-text));
-  font-size: 10px;
-}
-
-/* 「源已移除」告警徽标：供后续若字段来源缺失时高亮使用（仅样式层） */
-.mm-fdesign__stale-tag {
-  display: inline-flex;
-  align-items: center;
-  padding: 0 5px;
-  border: 1px solid color-mix(in srgb, var(--fms-danger, #f5222d) 45%, transparent);
-  border-radius: var(--fms-control-radius, 4px);
-  background: color-mix(in srgb, var(--fms-danger, #f5222d) 10%, var(--fms-card));
-  color: var(--fms-danger, #f5222d);
-  font-size: 10px;
-  line-height: 16px;
-}
-
-/* 折叠属性面板（覆盖 ui Button 默认尺寸） */
-.mm-fdesign__collapse.button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  min-height: 0;
-  padding: 0;
-  border-radius: 4px;
-  background: transparent;
-  color: color-mix(in srgb, var(--fms-text-secondary) 70%, var(--fms-text));
-  transform: none;
-
-  &:hover:not(:disabled) {
-    background: var(--fms-secondary);
-    color: var(--fms-text);
-  }
-}
-
-/* 搜索框：压缩 ui Input 高度（覆盖默认 --fms-control-height） */
-.mm-fdesign__lib-search.input-wrapper {
-  height: 26px;
-  min-height: 0;
-  padding: 0 8px;
-  font-size: 11px;
-  margin-bottom: 10px;
-}
-
-.mm-fdesign__lib-group {
-  margin-bottom: 12px;
-}
-
-.mm-fdesign__lib-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  width: 100%;
-  min-height: 28px;
-  margin-bottom: 2px;
-  padding: 0 6px;
-  border: none;
-  border-radius: 5px;
-  background: transparent;
-  color: var(--fms-text);
-  font-size: 12px;
-  font-weight: 400;
-  text-align: left;
-  cursor: pointer;
-  user-select: none;
-  -webkit-user-select: none;
-  transition:
-    background-color 0.15s,
-    color 0.15s;
-
-  &:hover {
-    background: color-mix(in srgb, var(--fms-primary) 8%, var(--fms-card));
-    color: var(--fms-primary);
-  }
-
-  &.is-selected {
-    background: color-mix(in srgb, var(--fms-primary) 14%, var(--fms-card));
-    color: var(--fms-primary);
-  }
-  /* 已加入表单的字段：不弱化视觉，与未加入字段一致（仅靠右侧 ✓ 标记区分） */
-}
-
-.mm-fdesign__lib-name {
-  min-width: 0;
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.mm-fdesign__lib-added {
-  flex: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: #e7f6ed;
-  color: #146c41;
-  font-size: 10px;
-  font-weight: 700;
-}
-
-.mm-fdesign__lib-empty {
-  padding: 12px 0;
-  color: var(--fms-text-disabled, #9ca3af);
-  font-size: 11px;
-  text-align: center;
-}
-
 /* ---- 画布 ---- */
 /* 透明画布：去掉白色纸面，让浅灰工作区底色透出，白色分组卡片直接浮于其上 */
 .mm-fdesign__sheet {
@@ -2614,8 +2439,7 @@ textarea.mm-fdesign__ctrl {
 /* 幽灵占位：SortableJS 把 ghostClass 加在原卡片上（布局冻结，原位不动），
    显示为灰色占位块（内部控件隐藏），一眼看出「这里被拖走了」；
    跟手的是自绘跟手卡片（createDragBadge 生成，样式见全局 .mm-fdesign__drag-badge） */
-.mm-fdesign__sortable-ghost,
-.mm-fdesign__lib-ghost {
+.mm-fdesign__sortable-ghost {
   opacity: 1;
   background: color-mix(in srgb, var(--fms-border) 55%, transparent) !important;
   border-radius: 6px;
@@ -2655,148 +2479,6 @@ textarea.mm-fdesign__ctrl {
   }
 }
 
-/* ---- 属性面板 ---- */
-.mm-fdesign__inspector .mm-fdesign__subhead {
-  padding-bottom: 8px;
-  margin-bottom: 2px;
-}
-
-.mm-fdesign__prop-group {
-  margin-top: 14px;
-  color: var(--fms-text);
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.02em;
-  /* 前竖线：与左侧分组小标题统一左对齐 */
-  border-left: 3px solid var(--fms-primary);
-  padding-left: 8px;
-
-  &:first-child {
-    margin-top: 0;
-  }
-}
-
-.mm-fdesign__prop {
-  margin-top: 10px;
-
-  label {
-    display: block;
-    margin-bottom: 4px;
-    color: color-mix(in srgb, var(--fms-text-secondary) 70%, var(--fms-text));
-    font-size: 10px;
-  }
-}
-
-.mm-fdesign__prop-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 8px;
-}
-
-/* 布局组只有栅格宽度一项时（非文本域字段）占满整行 */
-.mm-fdesign__prop--full {
-  grid-column: span 2;
-}
-
-/* 栅格宽度 / 文本域高度：Select + 数字输入框横排 */
-.mm-fdesign__span-control,
-.mm-fdesign__height-control {
-  display: flex;
-  gap: 4px;
-
-  :deep(.select-wrapper) {
-    flex: 1;
-    min-width: 0;
-  }
-}
-
-/* 数字输入：压缩 ui Input 高度（覆盖默认 --fms-control-height） */
-.mm-fdesign__span-input.input-wrapper {
-  flex: none;
-  width: 48px;
-  height: 26px;
-  min-height: 0;
-  padding: 0 4px;
-  font-size: 11px;
-
-  :deep(.input) {
-    text-align: center;
-  }
-}
-
-/* 栅格宽度：无下拉时数字输入框即主控件，填充剩余宽度（文本域高度仍用下拉，不受影响） */
-.mm-fdesign__span-control > .mm-fdesign__span-input.input-wrapper {
-  flex: 1;
-  width: auto;
-  min-width: 0;
-  padding: 0 8px;
-
-  :deep(.input) {
-    text-align: left;
-  }
-}
-
-.mm-fdesign__prop-static {
-  display: flex;
-  align-items: center;
-  min-height: 26px;
-  padding: 0 8px;
-  border: 1px solid var(--fms-border);
-  border-radius: 4px;
-  background: var(--fms-secondary-hover);
-  color: var(--fms-text);
-  font-size: 11px;
-}
-
-/* 属性面板常规输入：压缩 ui Input 高度 */
-.mm-fdesign__prop-input.input-wrapper {
-  height: 26px;
-  min-height: 0;
-  padding: 0 8px;
-  font-size: 11px;
-}
-
-.mm-fdesign__toggles {
-  margin-top: 10px;
-}
-
-.mm-fdesign__toggle-line {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 28px;
-  color: var(--fms-text);
-  font-size: 11px;
-}
-
-.mm-fdesign__delete {
-  margin-top: 10px;
-  width: 100%;
-}
-
-/* ---- 数据视图 ---- */
-.mm-edit__data {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-}
-
-.mm-panel__toolbar {
-  display: flex;
-  flex: none;
-  flex-wrap: wrap;
-  gap: 8px;
-  padding: 0 0 8px;
-}
-
-.mm-panel__body {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  flex: 1;
-}
-
 /* ---- 分组标题行：右侧操作（字段/列计数 + 停用标记 + 删除），主表/子表统一 ---- */
 .mm-edit__section-meta {
   display: inline-flex;
diff --git a/code/fms/fms-vue/src/views/system/module-management/index.vue b/code/fms/fms-vue/src/views/system/module-management/index.vue
index a5385d7c..80b41ce6 100644
--- a/code/fms/fms-vue/src/views/system/module-management/index.vue
+++ b/code/fms/fms-vue/src/views/system/module-management/index.vue
@@ -43,7 +43,7 @@ import { useModuleSave } from './composables/useModuleSave'
 import ModuleBasicPanel from './components/ModuleBasicPanel.vue'
 import ModuleFieldsPanel from './components/ModuleFieldsPanel.vue'
 import ModuleListConfigPanel from './components/ModuleListConfigPanel.vue'
-import ModuleFormEditPanel from './components/ModuleFormEditPanel.vue'
+import ModuleFormEditPanel from './components/form-edit/FormEditPanel.vue'
 import ModuleTableEditPanel from './components/table-edit/TableEditPanel.vue'
 import ModuleQueryConfigPanel from './components/ModuleQueryConfigPanel.vue'
 import ModuleAutoCodePanel from './components/ModuleAutoCodePanel.vue'