From 60cacfa8fbb7d0066561a076316370061ae39ebe Mon Sep 17 00:00:00 2001
From: oneao <hi_itao@163.com>
Date: Wed, 26 Aug 2026 22:44:45 +0800
Subject: [PATCH] 20260826224445

---
 code/fms/fms-vue/.gitignore                   |    1 +
 .../fms-vue/src/components/ui/modal/modal.vue |   11 +-
 .../fms-vue/src/components/ui/tree/index.scss |   25 +-
 .../components/FieldGroupManager.vue          |  471 ---
 .../components/IconSelect.vue                 |    2 +-
 ...onfigPanel.vue => ModuleFormEditPanel.vue} | 1846 ++-------
 .../components/ModuleListConfigPanel.vue      |   15 +-
 .../components/ModuleTableEditPanel.vue       | 3325 +++++++++++++++++
 .../views/system/module-management/index.vue  |   78 +-
 9 files changed, 3650 insertions(+), 2124 deletions(-)
 delete mode 100644 code/fms/fms-vue/src/views/system/module-management/components/FieldGroupManager.vue
 rename code/fms/fms-vue/src/views/system/module-management/components/{ModuleEditConfigPanel.vue => ModuleFormEditPanel.vue} (66%)
 create mode 100644 code/fms/fms-vue/src/views/system/module-management/components/ModuleTableEditPanel.vue

diff --git a/code/fms/fms-vue/.gitignore b/code/fms/fms-vue/.gitignore
index 945398ba..af57496b 100644
--- a/code/fms/fms-vue/.gitignore
+++ b/code/fms/fms-vue/.gitignore
@@ -13,6 +13,7 @@ dist-ssr
 dist-verify
 dist-check
 dist-check2
+dist-check3
 *.local
 
 # Editor directories and files
diff --git a/code/fms/fms-vue/src/components/ui/modal/modal.vue b/code/fms/fms-vue/src/components/ui/modal/modal.vue
index d3e244bf..adfc44fc 100644
--- a/code/fms/fms-vue/src/components/ui/modal/modal.vue
+++ b/code/fms/fms-vue/src/components/ui/modal/modal.vue
@@ -108,9 +108,15 @@ function toggleFullscreen() {
 }
 
 // 遮罩点击关闭：wrap 铺满视口且层级高于 mask，事件实际落在 wrap 上；
-// 只响应点击 wrap 自身（面板外空白/遮罩区域），点击面板内部不关闭
+// 只响应点击 wrap 自身（面板外空白/遮罩区域），点击面板内部不关闭。
+// 记录 mousedown 是否发生在面板内：若在面板内按下（如拖选输入框文本）后
+// 拖出到遮罩再松开，click.target 会回溯为共同祖先 wrap，此时不应误判为点击遮罩。
+let maskDownInPanel = false
+function onWrapMouseDown(event) {
+  maskDownInPanel = !!panelRef.value?.contains(event.target)
+}
 function onWrapClick(event) {
-  if (event.target === event.currentTarget && props.maskClosable) {
+  if (event.target === event.currentTarget && props.maskClosable && !maskDownInPanel) {
     requestClose()
   }
 }
@@ -208,6 +214,7 @@ onBeforeUnmount(() => {
         v-if="isOpen"
         class="fms-modal-wrap"
         :class="{ 'fms-modal-centered': centered }"
+        @mousedown="onWrapMouseDown"
         @click="onWrapClick"
       >
         <div
diff --git a/code/fms/fms-vue/src/components/ui/tree/index.scss b/code/fms/fms-vue/src/components/ui/tree/index.scss
index 508c0a99..3da4dfb4 100644
--- a/code/fms/fms-vue/src/components/ui/tree/index.scss
+++ b/code/fms/fms-vue/src/components/ui/tree/index.scss
@@ -26,10 +26,13 @@
     box-shadow 0.15s ease;
 }
 
+/* hover：仅内容区域背景变化（箭头/缩进区不变），整行保持 pointer 提示可点 */
 .tree-node:hover:not(.is-disabled) {
-  background: var(--fms-secondary-hover);
   cursor: pointer;
 }
+.tree-node:hover:not(.is-disabled) .tree-node-content {
+  background: var(--fms-secondary-hover);
+}
 
 /* 键盘/鼠标聚焦：focus-visible 描边，避免鼠标点击也出现描边 */
 .tree-node:focus-visible {
@@ -37,12 +40,12 @@
   outline-offset: -2px;
 }
 
-/* 选中：主色淡底，明显区分于灰底页面；文字保持默认色。
+/* 选中：仅内容区域主色淡底（整行 hover 背景、箭头/缩进区不受影响）。
    比例取 5%：深色主题（如 #0f172b）在白底上约 #f3f3f4，接近 hover 浅色 #f1f5f9；
    比例过高（10%）时深色主题会算出 #e7e7e9 等偏深灰，显得脏。
    注意 hover 规则 specificity 更高，需连同 hover 一起覆盖，避免悬停时选中态被盖掉 */
-.tree-node.is-selected,
-.tree-node.is-selected:hover:not(.is-disabled) {
+.tree-node.is-selected .tree-node-content,
+.tree-node.is-selected:hover:not(.is-disabled) .tree-node-content {
   background: color-mix(in srgb, var(--fms-primary) 5%, transparent);
 }
 
@@ -78,14 +81,15 @@
 }
 .tree-node-switcher:hover:not(.is-placeholder) {
   background: color-mix(in srgb, var(--fms-primary) 10%, transparent);
-  color: var(--fms-primary);
 }
 .tree-node-switcher.is-placeholder {
   cursor: default;
 }
+/* 展开/收起箭头：黑色（跟随主题文字色），hover 仅显示淡底提示、箭头不变色 */
 .tree-switcher-icon {
   width: var(--fms-tree-icon-size);
   height: var(--fms-tree-icon-size);
+  color: var(--fms-text);
   transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.4, 1);
 }
 .tree-switcher-icon.is-open {
@@ -115,9 +119,11 @@
 .tree-node-content {
   flex: 1;
   min-width: 0;
+  /* 父容器 .tree-node 仅有 min-height（无显式 height），height:100% 无法解析，
+     故用 flex 交叉轴拉伸占满整行实际高度（选中背景/圆角才能覆盖整行） */
+  align-self: stretch;
   display: flex;
   align-items: center;
-  height: 100%;
   padding: 0 var(--fms-tree-title-padding-x);
   border-radius: var(--fms-control-radius);
   overflow: hidden;
@@ -160,13 +166,8 @@
   width: var(--fms-tree-grip-size);
   height: var(--fms-tree-grip-size);
   margin-right: 4px;
-  color: var(--fms-text-secondary);
+  color: #b0b7c3;
   cursor: grab;
-  opacity: 0;
-  transition: opacity 0.15s;
-}
-.tree-node:hover .tree-node-grip {
-  opacity: 1;
 }
 .tree-node-grip:active {
   cursor: grabbing;
diff --git a/code/fms/fms-vue/src/views/system/module-management/components/FieldGroupManager.vue b/code/fms/fms-vue/src/views/system/module-management/components/FieldGroupManager.vue
deleted file mode 100644
index 5a846070..00000000
--- a/code/fms/fms-vue/src/views/system/module-management/components/FieldGroupManager.vue
+++ /dev/null
@@ -1,471 +0,0 @@
-<script setup>
-/**
- * 字段分组管理弹窗：管理 s_field_group 树形分组。
- * 简化交互：顶部输入框回车即新增（选中节点则挂到其下，未选中为顶级），
- * 树节点行内直接 启用 / 重命名 / 删除，无需右侧属性面板。
- * 独立保存到后端，保存后 emit("saved", groups, idMapping)，父级用 idMapping
- * 重映射列表/编辑配置中的 b_group_id（临时 ID → 雪花 ID）。
- */
-import { computed, nextTick, ref, watch } from 'vue'
-import Message from '@/components/ui/message/message-manager'
-import Modal from '@/components/ui/modal/modal.vue'
-import Button from '@/components/ui/button/button.vue'
-import Switch from '@/components/ui/switch/switch.vue'
-import Tree from '@/components/ui/tree/tree.vue'
-import { Plus, Pencil, Trash2, ArrowUp, ArrowDown } from '@lucide/vue'
-import { buildTree } from '@/utils/tree'
-import { createTempId } from '@/utils/tempId'
-import { cloneData, diffRows, allocateTemporaryIds, tableChange, hasChanges } from '@/utils/dataChanges'
-import { saveObjectApi } from '@/services/api'
-
-const props = defineProps({
-  open: { type: Boolean, default: false },
-  moduleId: { type: String, required: true },
-  groups: { type: Array, default: () => [] },
-  referencedGroupIds: { type: Array, default: () => [] },
-})
-
-const emit = defineEmits(['update:open', 'saved'])
-
-const localGroups = ref([])
-const selectedGroupId = ref(null)
-const saving = ref(false)
-
-/* 顶部输入即新增 */
-const newTitle = ref('')
-const addInputRef = ref(null)
-
-/* 行内重命名 */
-const editingId = ref(null)
-const renameValue = ref('')
-const renameInputRef = ref(null)
-
-watch(
-  () => props.groups,
-  (val) => {
-    localGroups.value = cloneData(val || [])
-  },
-  { immediate: true },
-)
-
-const treeData = computed(() => buildTree(localGroups.value))
-const selectedGroup = computed(() =>
-  localGroups.value.find((g) => String(g.b_id) === String(selectedGroupId.value)),
-)
-
-function onTreeSelect(keys) {
-  selectedGroupId.value = keys.length ? String(keys[0]) : null
-}
-
-/* 新增：输入名称回车即添加；选中节点时挂到其下，否则为顶级。
-   新增后不自动选中新节点，便于连续新增到同一父级下。 */
-function handleAdd() {
-  const title = newTitle.value.trim()
-  if (!title) return
-  localGroups.value.push({
-    b_id: createTempId(),
-    b_module_id: props.moduleId,
-    b_parent_id: selectedGroupId.value || null,
-    b_title: title,
-    b_xh: (localGroups.value.length + 1) * 10,
-    b_canuse: 1,
-    b_layout_direction: 'vertical',
-  })
-  newTitle.value = ''
-  nextTick(() => addInputRef.value?.focus?.())
-}
-
-function onAddEnter(event) {
-  if (event.isComposing) return
-  handleAdd()
-}
-
-/* 行内重命名 */
-function startRename(node) {
-  editingId.value = String(node.b_id)
-  renameValue.value = node.b_title || ''
-  nextTick(() => renameInputRef.value?.focus?.())
-}
-
-function commitRename(node) {
-  if (editingId.value !== String(node.b_id)) return
-  const title = renameValue.value.trim()
-  if (title) node.b_title = title
-  editingId.value = null
-}
-
-function cancelRename() {
-  editingId.value = null
-}
-
-function onRenameEnter(event, node) {
-  if (event.isComposing) return
-  commitRename(node)
-}
-
-/* 行内启用切换 */
-function toggleEnable(node) {
-  node.b_canuse = Number(node.b_canuse) === 1 ? 0 : 1
-}
-
-function toggleLayout(node) {
-  node.b_layout_direction = node.b_layout_direction === 'horizontal' ? 'vertical' : 'horizontal'
-}
-
-/* 同级排序：上移/下移（交换同级顺序并重新编号 b_xh，随保存提交） */
-function moveGroup(node, delta) {
-  if (!node) return
-  const parentId = node.b_parent_id == null ? null : String(node.b_parent_id)
-  const siblings = localGroups.value.filter(
-    (g) => (g.b_parent_id == null ? null : String(g.b_parent_id)) === parentId,
-  )
-  siblings.sort((a, b) => (a.b_xh || 0) - (b.b_xh || 0))
-  const idx = siblings.findIndex((g) => String(g.b_id) === String(node.b_id))
-  const target = idx + delta
-  if (idx < 0 || target < 0 || target >= siblings.length) return
-  const [moved] = siblings.splice(idx, 1)
-  siblings.splice(target, 0, moved)
-  siblings.forEach((g, i) => {
-    g.b_xh = (i + 1) * 10
-  })
-}
-
-/* 删除：有子分组 / 仍被引用时禁止 */
-function deleteGroup(node) {
-  if (!node) return
-  const id = String(node.b_id)
-  const hasChildren = localGroups.value.some(
-    (g) => String(g.b_parent_id) === id && String(g.b_id) !== id,
-  )
-  if (hasChildren) {
-    Message.warning('该分组下还有子分组，请先删除子分组')
-    return
-  }
-  if (props.referencedGroupIds.some((gid) => String(gid) === id)) {
-    Message.warning('该分组仍被列表或编辑配置引用，请先清空引用')
-    return
-  }
-  localGroups.value = localGroups.value.filter((g) => String(g.b_id) !== id)
-  if (String(selectedGroupId.value) === id) selectedGroupId.value = null
-}
-
-async function save() {
-  if (saving.value) return
-  const changes = diffRows(localGroups.value, cloneData(props.groups || []))
-  const req = tableChange('s_field_group', changes)
-  if (!hasChanges(req)) {
-    Message.info('没有需要保存的变更')
-    emit('update:open', false)
-    emit('saved', localGroups.value, new Map())
-    return
-  }
-  saving.value = true
-  try {
-    const mapping = await allocateTemporaryIds([req.inserts || [], req.updates || []])
-    await saveObjectApi([req])
-    Message.success('分组已保存')
-    emit('update:open', false)
-    emit('saved', localGroups.value, mapping)
-  } catch (err) {
-    Message.error('保存失败：' + (err?.message || err))
-  } finally {
-    saving.value = false
-  }
-}
-</script>
-
-<template>
-  <Modal
-    :open="open"
-    title="分组管理"
-    width="520"
-    ok-text="保存"
-    :confirm-loading="saving"
-    :resizable="false"
-    @update:open="(v) => emit('update:open', v)"
-    @ok="save"
-  >
-    <div class="mm-groups">
-      <div class="mm-groups__head">
-        <div class="mm-groups__head-title">分组结构</div>
-        <span class="mm-groups__head-count">共 {{ localGroups.length }} 个分组</span>
-      </div>
-      <div class="mm-groups__add">
-        <input
-          ref="addInputRef"
-          class="mm-groups__input"
-          :value="newTitle"
-          placeholder="输入分组名称，回车或点「新增」"
-          @input="(e) => (newTitle = e.target.value)"
-          @keydown.enter="onAddEnter"
-          @keydown.esc="newTitle = ''"
-        />
-        <Button type="primary" @click="handleAdd">
-          <Plus :size="14" /> 新增
-        </Button>
-      </div>
-      <p class="mm-groups__hint">
-        {{ selectedGroup ? `将添加到「${selectedGroup.b_title || '未命名分组'}」下` : '将添加为顶级分组' }}
-      </p>
-
-      <div class="mm-groups__scroll">
-        <Tree
-          :tree-data="treeData"
-          :field-names="{ key: 'b_id', title: 'b_title', children: 'children' }"
-          default-expand-all
-          :selected-keys="selectedGroupId ? [selectedGroupId] : []"
-          @select="onTreeSelect"
-        >
-          <template #empty>暂无分组，输入名称后回车即可创建</template>
-          <template #title="{ node }">
-            <span class="mm-groups__node">
-              <input
-                v-if="editingId === String(node.b_id)"
-                ref="renameInputRef"
-                class="mm-groups__rename"
-                :value="renameValue"
-                @click.stop
-                @input="(e) => (renameValue = e.target.value)"
-                @keydown.enter.stop.prevent="(e) => onRenameEnter(e, node)"
-                @keydown.esc.stop.prevent="cancelRename"
-                @blur="commitRename(node)"
-              />
-              <template v-else>
-                <span
-                  class="mm-groups__node-name"
-                  :class="{ 'is-disabled': Number(node.b_canuse) !== 1 }"
-                >
-                  {{ node.b_title || '未命名分组' }}
-                </span>
-                <span class="mm-groups__node-actions" @click.stop>
-                  <button
-                    type="button"
-                    class="mm-groups__node-btn"
-                    title="上移"
-                    aria-label="上移分组"
-                    @click="moveGroup(node, -1)"
-                  >
-                    <ArrowUp :size="13" />
-                  </button>
-                  <button
-                    type="button"
-                    class="mm-groups__node-btn"
-                    title="下移"
-                    aria-label="下移分组"
-                    @click="moveGroup(node, 1)"
-                  >
-                    <ArrowDown :size="13" />
-                  </button>
-                  <span class="mm-groups__node-divider"></span>
-                  <Switch
-                    :model-value="Number(node.b_canuse) === 1"
-                    title="启用/停用"
-                    aria-label="启用/停用"
-                    @change="() => toggleEnable(node)"
-                  />
-                  <button
-                    type="button"
-                    class="mm-groups__node-btn"
-                    title="重命名"
-                    aria-label="重命名"
-                    @click="startRename(node)"
-                  >
-                    <Pencil :size="13" />
-                  </button>
-                  <button
-                    type="button"
-                    class="mm-groups__node-btn"
-                    :title="node.b_layout_direction === 'horizontal' ? '切换为上下布局' : '切换为左右布局'"
-                    :aria-label="node.b_layout_direction === 'horizontal' ? '切换为上下布局' : '切换为左右布局'"
-                    @click="toggleLayout(node)"
-                  >
-                    {{ node.b_layout_direction === 'horizontal' ? '左右' : '上下' }}
-                  </button>
-                  <button
-                    type="button"
-                    class="mm-groups__node-btn is-danger"
-                    title="删除分组"
-                    aria-label="删除分组"
-                    @click="deleteGroup(node)"
-                  >
-                    <Trash2 :size="13" />
-                  </button>
-                </span>
-              </template>
-            </span>
-          </template>
-        </Tree>
-      </div>
-    </div>
-  </Modal>
-</template>
-
-<style lang="scss" scoped>
-.mm-groups {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  height: 400px;
-  min-height: 0;
-}
-
-/* ---- 顶部摘要 ---- */
-.mm-groups__head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex: none;
-  padding: 2px 2px 0;
-}
-
-.mm-groups__head-title {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--fms-text);
-}
-
-.mm-groups__head-count {
-  font-size: 12px;
-  color: var(--fms-text-secondary);
-}
-
-/* ---- 顶部输入即新增 ---- */
-.mm-groups__add {
-  display: flex;
-  gap: 6px;
-  flex: none;
-}
-
-.mm-groups__input {
-  flex: 1;
-  min-width: 0;
-  height: var(--fms-control-height);
-  padding: 0 10px;
-  border: 1px solid var(--fms-border);
-  border-radius: var(--fms-control-radius);
-  background: var(--fms-card);
-  color: var(--fms-text);
-  font-size: 13px;
-  font-family: inherit;
-  outline: none;
-
-  &:focus {
-    border-color: var(--fms-primary);
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--fms-primary) 12%, transparent);
-  }
-
-  &::placeholder {
-    color: var(--fms-text-placeholder, #9ca3af);
-  }
-}
-
-.mm-groups__hint {
-  flex: none;
-  margin: 0;
-  color: var(--fms-text-secondary);
-  font-size: 12px;
-}
-
-/* ---- 树 ---- */
-.mm-groups__scroll {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  padding: 6px;
-  border: 1px solid var(--fms-border);
-  border-radius: var(--fms-control-radius);
-  background: var(--fms-secondary-hover);
-}
-
-/* 节点行：名称撑满，操作靠右；hover 时显示完整操作 */
-.mm-groups__node {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex: 1;
-  min-width: 0;
-  padding: 3px 6px;
-  border-radius: 6px;
-  transition: background 0.15s;
-
-  &:hover {
-    background: var(--fms-card);
-  }
-}
-
-.mm-groups__node-name {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 13px;
-
-  &.is-disabled {
-    color: var(--fms-text-disabled, #9ca3af);
-  }
-}
-
-.mm-groups__node-actions {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-  flex: none;
-}
-
-/* 移动按钮与其它操作的分隔线 */
-.mm-groups__node-divider {
-  width: 1px;
-  height: 14px;
-  margin: 0 2px;
-  background: var(--fms-border);
-}
-
-.mm-groups__node-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  padding: 0;
-  border: 1px solid transparent;
-  border-radius: 5px;
-  background: transparent;
-  color: var(--fms-text-secondary);
-  cursor: pointer;
-  transition:
-    background 0.15s,
-    color 0.15s,
-    border-color 0.15s;
-
-  &:hover {
-    background: var(--fms-secondary);
-    color: var(--fms-text);
-    border-color: var(--fms-border);
-  }
-
-  &.is-danger:hover {
-    background: #fdecec;
-    color: #d95757;
-    border-color: #f5c6c6;
-  }
-}
-
-/* 行内重命名输入框 */
-.mm-groups__rename {
-  width: 100%;
-  height: 24px;
-  padding: 0 6px;
-  border: 1px solid var(--fms-primary);
-  border-radius: 4px;
-  background: var(--fms-card);
-  color: var(--fms-text);
-  font-size: 12px;
-  font-family: inherit;
-  outline: none;
-
-  &:focus {
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--fms-primary) 12%, transparent);
-  }
-}
-</style>
diff --git a/code/fms/fms-vue/src/views/system/module-management/components/IconSelect.vue b/code/fms/fms-vue/src/views/system/module-management/components/IconSelect.vue
index 9b0e130f..e0c089da 100644
--- a/code/fms/fms-vue/src/views/system/module-management/components/IconSelect.vue
+++ b/code/fms/fms-vue/src/views/system/module-management/components/IconSelect.vue
@@ -23,7 +23,7 @@ const ICON_NAMES = [
   'CalendarDays', 'CalendarClock', 'Clock', 'Timer', 'History', 'AlarmClock',
   'Search', 'Filter', 'Eye', 'EyeOff', 'Lock', 'Unlock', 'Key', 'KeyRound',
   'Plus', 'Minus', 'Pencil', 'Trash2', 'Copy', 'Save', 'Upload', 'Download',
-  'RefreshCw', 'RotateCw', 'Undo2', 'Redo2', 'ExternalLink', 'Link', 'Share2',
+  'RefreshCw', 'RotateCw', 'ExternalLink', 'Link', 'Share2',
   'Printer', 'Mail', 'Phone', 'MapPin', 'Globe', 'Globe2', 'Languages', 'Translate',
   'BookOpen', 'BookMarked', 'GraduationCap', 'Award', 'Star', 'Heart', 'Flag',
   'Check', 'CheckCircle2', 'XCircle', 'AlertCircle', 'AlertTriangle', 'Info',
diff --git a/code/fms/fms-vue/src/views/system/module-management/components/ModuleEditConfigPanel.vue b/code/fms/fms-vue/src/views/system/module-management/components/ModuleFormEditPanel.vue
similarity index 66%
rename from code/fms/fms-vue/src/views/system/module-management/components/ModuleEditConfigPanel.vue
rename to code/fms/fms-vue/src/views/system/module-management/components/ModuleFormEditPanel.vue
index 66c9b448..200e24ec 100644
--- a/code/fms/fms-vue/src/views/system/module-management/components/ModuleEditConfigPanel.vue
+++ b/code/fms/fms-vue/src/views/system/module-management/components/ModuleFormEditPanel.vue
@@ -1,6 +1,6 @@
 <script setup>
 /**
- * 表单设计面板（s_field_edit）。
+ * 主表表单设计面板（s_field_edit）。
  * 提供「设计视图 / 数据视图」两种形态，共享同一份草稿数据：
  * - 设计视图：字段库 | 表单画布 | 属性面板。字段可添加、任意位置拖拽、跨分组移动，
  *   支持 24 栅格、动态栅格分配、textarea 高度、分组方向和删除草稿项。
@@ -9,30 +9,26 @@
 import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
 import {
   Trash2,
-  Undo2,
-  Redo2,
   ArrowUp,
   ArrowDown,
   Asterisk,
   Eye,
   EyeOff,
   GripVertical,
-  LayoutPanelLeft,
-  LayoutPanelTop,
   PanelLeftClose,
   PanelLeftOpen,
   PanelRightClose,
   PanelRightOpen,
   Check,
   X,
+  Plus,
+  Pencil,
 } from '@lucide/vue'
 import draggable from 'vuedraggable'
 import Message from '@/components/ui/message/message-manager'
 import Button from '@/components/ui/button/button.vue'
 import Select from '@/components/ui/select/select.vue'
-import Modal from '@/components/ui/modal/modal.vue'
 import FmsTable from '@/components/fms-table/FmsTable.vue'
-import FieldGroupManager from './FieldGroupManager.vue'
 import { createTempId } from '@/utils/tempId'
 
 const props = defineProps({
@@ -42,7 +38,6 @@ const props = defineProps({
   queryConfig: { type: Array, default: () => [] },
   fields: { type: Array, default: () => [] },
   groups: { type: Array, default: () => [] },
-  referencedGroupIds: { type: Array, default: () => [] },
   /** 模块编辑方式：form 主表（表单画布设计）| table 子表（表格列设计） */
   editMode: { type: String, default: 'form' },
   loading: { type: Boolean, default: false },
@@ -53,14 +48,12 @@ const props = defineProps({
 const emit = defineEmits([
   'update',
   'updateGroups',
-  'groupsSaved',
   'syncList',
   'syncQuery',
   'update:editMode',
 ])
 
 const localEdit = ref([])
-const groupManagerVisible = ref(false)
 const activeKey = ref(null)
 
 function onEditModeChange(value) {
@@ -68,9 +61,6 @@ function onEditModeChange(value) {
   emit('update:editMode', value || 'form')
 }
 
-/* 编辑方式：表格（子表）模式时设计视图切换为「列设计」，表单专属属性（分组/栅格/占位符）不展示 */
-const isTableMode = computed(() => props.editMode === 'table')
-
 /* ================= 视图形态 ================= */
 const viewMode = ref('design') // 'design' | 'data'
 const selectedRowKey = ref(null)
@@ -80,59 +70,10 @@ const dragSourceId = ref(null)
 const dragLine = ref(null)
 // 拖拽悬停中的分区 key（用于分组放置逻辑）
 const dragOverSection = ref(null)
-const lastDeleted = ref(null)
-let undoTimer = null
 
 /* ================= 设计工作区：属性面板折叠 ================= */
 const inspectorCollapsed = ref(false) // 属性面板折叠
 
-/* ================= 撤销 / 重做（草稿级快照栈） =================
-   快照同时记录编辑行 + 分组结构：画布上的分组删除 / 方向切换 / 重命名
-   也能随 Ctrl+Z 一并回退（分组通过 updateGroups 交给父级草稿） */
-const historyPast = ref([])
-const historyFuture = ref([])
-const HISTORY_LIMIT = 30
-
-function snapshotState() {
-  return {
-    rows: localEdit.value.map((row) => ({ ...row })),
-    groups: (props.groups || []).map((g) => ({ ...g })),
-  }
-}
-
-// 变更前调用：把当前草稿压入撤销栈（相邻重复快照去重），并清空重做栈；
-// 可传入变更前抓好的快照（列宽拖拽等「先动草稿、后确认提交」的场景）
-function pushHistory(snapshot) {
-  const next = snapshot || snapshotState()
-  const last = historyPast.value[historyPast.value.length - 1]
-  if (last && JSON.stringify(last) === JSON.stringify(next)) return
-  historyPast.value.push(next)
-  if (historyPast.value.length > HISTORY_LIMIT) historyPast.value.shift()
-  historyFuture.value = []
-}
-
-function applyHistory(next) {
-  localEdit.value = next.rows.map(normalizedRow)
-  emitUpdate()
-  const groups = (next.groups || []).map((g) => ({ ...g }))
-  if (JSON.stringify(groups) !== JSON.stringify(props.groups || [])) {
-    emit('updateGroups', groups)
-  }
-  cleanupSelectedRow()
-}
-
-function undo() {
-  if (!historyPast.value.length || props.loading) return
-  historyFuture.value.push(snapshotState())
-  applyHistory(historyPast.value.pop())
-}
-
-function redo() {
-  if (!historyFuture.value.length || props.loading) return
-  historyPast.value.push(snapshotState())
-  applyHistory(historyFuture.value.pop())
-}
-
 /* 拖拽过程中的 Esc 取消：置取消标记并清除放置意图，
    之后继续移动不再重算意图，松手后不做任何变更（取消真正生效） */
 let dragCancelled = false
@@ -150,9 +91,6 @@ watch(
   (val) => {
     if (val === localEdit.value) return
     localEdit.value = val?.map((row) => ({ ...row })) || []
-    // 切换模块 / 重载后清空历史，避免跨对象撤销
-    historyPast.value = []
-    historyFuture.value = []
   },
   { immediate: true },
 )
@@ -163,7 +101,6 @@ function emitUpdate() {
 
 /* ================= 数据视图：行排序 ================= */
 function onRowOrderChange(rows) {
-  pushHistory()
   const sorted = rows.map((row, index) => ({ ...row, b_xh: (index + 1) * 10 }))
   localEdit.value = sorted
   emitUpdate()
@@ -178,7 +115,6 @@ function normalizedRow(row) {
 }
 
 function emitRows(rows) {
-  pushHistory()
   localEdit.value = rows.map(normalizedRow)
   emitUpdate()
 }
@@ -383,50 +319,7 @@ function formDataColumns() {
   ]
 }
 
-// 表格（子表）模式：列宽取代分组 / 栅格 / 占位符等表单专属属性
-function tableDataColumns() {
-  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_width', title: '列宽(px)', width: 110, editor: {} },
-    { dataIndex: 'b_xh', title: '排序号', width: 90 },
-  ]
-}
-
-const dataColumns = computed(() => (isTableMode.value ? tableDataColumns() : formDataColumns()))
+const dataColumns = computed(() => formDataColumns())
 
 /* ================= 设计视图：字段/分组推导 ================= */
 const FIELD_TYPE_LABELS = {
@@ -456,15 +349,6 @@ const TEXTAREA_HEIGHT_OPTIONS = [
   { label: '大（180px）', value: '180' },
 ]
 
-/* 表格（子表）模式：常用列宽（px） */
-const COLUMN_WIDTH_OPTIONS = [
-  { label: '窄 90', value: '90' },
-  { label: '默认 120', value: '120' },
-  { label: '中 160', value: '160' },
-  { label: '宽 200', value: '200' },
-  { label: '大 240', value: '240' },
-]
-
 function spanOf(row) {
   const v = Number(row?.b_colspan)
   return v >= 1 && v <= 24 ? v : 24
@@ -514,196 +398,23 @@ function heightOf(row) {
   return value >= 64 && value <= 480 ? value : 120
 }
 
-/* ---- 表格（子表）模式：列宽 ---- */
-function widthOf(row) {
-  const v = Number(row?.b_width)
-  return v >= 40 && v <= 600 ? v : 120
-}
-
-// 分区总宽度 = 成员列宽之和（WYSIWYG 表格表头行对齐用）
-function groupWidthOf(section) {
-  return (section.rows || []).reduce((sum, r) => sum + widthOf(r), 0)
-}
-
-function defaultWidthOf(field) {
-  const map = {
-    checkbox: 90,
-    number: 140,
-    money: 140,
-    date: 140,
-    datetime: 170,
-    select: 160,
-    textarea: 220,
-  }
-  return map[field?.b_type] || 140
-}
-
-function onWidthChange(value) {
-  const row = selectedRow.value
-  if (!row || props.loading) return
-  pushHistory()
-  row.b_width = Math.min(600, Math.max(40, Number(value) || 120))
-  emitUpdate()
-}
-
-// 数字输入框逐键 input 只更新显示，不压撤销栈；
-// change（失焦/回车）提交一次，与原值不同才作为一次原子操作入栈
-function onWidthCommit(event) {
-  const row = selectedRow.value
-  if (!row || props.loading) return
-  const value = Math.min(600, Math.max(40, Number(event.target.value) || 120))
-  if (value === widthOf(row)) return
-  pushHistory()
-  row.b_width = value
-  emitUpdate()
-}
-
-function onWidthStep(delta) {
-  const row = selectedRow.value
-  if (!row || props.loading) return
-  onWidthChange(widthOf(row) + delta)
-}
-
-// 列宽下拉：当前值不在预设中时补充一个当前值选项
-const columnWidthOptions = computed(() => {
-  if (!selectedRow.value) return COLUMN_WIDTH_OPTIONS
-  const current = String(widthOf(selectedRow.value))
-  if (COLUMN_WIDTH_OPTIONS.some((o) => o.value === current)) return COLUMN_WIDTH_OPTIONS
-  return [...COLUMN_WIDTH_OPTIONS, { label: `当前 ${current}px`, value: current }]
-})
-
-/* ---- 表格（子表）模式：表头拖拽调整列宽 ---- */
-// 拖拽中：{ row, startX, startWidth, snapshot }；实时改 row.b_width 做预览，
-// 松手有实际变化时才把「拖拽前快照」压入撤销栈并统一提交（中间宽度不入栈）
-const resizeState = ref(null)
-
-function startColumnResize(evt, row) {
-  if (props.loading || !row) return
-  evt.preventDefault()
-  evt.stopPropagation()
-  resizeState.value = {
-    row,
-    startX: evt.clientX,
-    startWidth: widthOf(row),
-    snapshot: snapshotState(),
-  }
-  window.addEventListener('mousemove', onColumnResizeMove)
-  window.addEventListener('mouseup', onColumnResizeEnd)
-  document.body.style.cursor = 'col-resize'
-  disableTextSelection()
-}
-
-function onColumnResizeMove(evt) {
-  const st = resizeState.value
-  if (!st) return
-  st.width = Math.min(600, Math.max(40, Math.round(st.startWidth + evt.clientX - st.startX)))
-  st.row.b_width = st.width
-}
-
-function onColumnResizeEnd() {
-  const st = resizeState.value
-  resizeState.value = null
-  window.removeEventListener('mousemove', onColumnResizeMove)
-  window.removeEventListener('mouseup', onColumnResizeEnd)
-  document.body.style.cursor = ''
-  enableTextSelection()
-  if (!st) return
-  if (st.width != null && st.width !== st.startWidth) {
-    // 压入拖拽前快照（此刻 row.b_width 已是终值，不能现场抓快照）
-    pushHistory(st.snapshot)
-    emitUpdate()
-  } else {
-    st.row.b_width = st.startWidth // 未拖动：还原，避免产生撤销点
-  }
-  if (st.row) selectRow(st.row)
-}
-
-// 手柄键盘左右键微调（每按一次提交一次）
-function resizeColumnByKey(row, delta) {
-  if (props.loading || !row) return
-  pushHistory()
-  row.b_width = Math.min(600, Math.max(40, widthOf(row) + delta))
-  emitUpdate()
-}
-
-// 双击手柄：恢复字段类型默认列宽
-function resetColumnWidth(row) {
-  if (props.loading || !row) return
-  const field = fieldOf(row)
-  if (!field) return
-  pushHistory()
-  row.b_width = defaultWidthOf(field)
-  emitUpdate()
-}
-
 /* ---- 列头菜单（WYSIWYG 表格：⋯ 按钮 / 右键） ---- */
-// 表格模式的列清单（按 b_xh 排序）
-const tableColumnRows = computed(() =>
-  [...localEdit.value].toSorted((a, b) => Number(a.b_xh || 0) - Number(b.b_xh || 0)),
-)
-
-// 子表预览弹窗（明道云式：设计区为纵向列卡片，真实表格效果在弹窗中查看）
-const previewOpen = ref(false)
-
-// 预览弹窗：第一级表头（分组行）。按画布分区顺序，未分组列单独占格（标题留空）
-const previewGroupHeader = computed(() => {
-  const cells = []
-  for (const section of canvasSections.value) {
-    const cols = section.rows
-    if (!cols.length) continue
-    cells.push({
-      title: section.key === 'ungrouped' ? '' : section.title,
-      width: cols.reduce((sum, r) => sum + widthOf(r), 0),
-    })
-  }
-  return cells
-})
-
-// WYSIWYG 表格的样例数据（按控件类型展示不同的占位外观）
-const SAMPLE_TEXT = {
-  input: '请输入',
-  textarea: '多行文本内容…',
-  number: '123',
-  money: '¥ 1,280.00',
-  date: '2024-01-15',
-  datetime: '2024-01-15 14:30',
-  checkbox: '☑ 选项',
-  select: '请选择',
-}
-
-function sampleText(row) {
-  return SAMPLE_TEXT[fieldType(row)] || '请输入'
-}
-
-// 字段库：展示模块的全部字段（含未加入表单的字段），点击定位到画布卡片
-const libraryFields = computed(() => props.fields || [])
 
 const libSearch = ref('')
-// 字段库按控件类型分组（保持字段原始顺序）；搜索时仅保留命中的字段与分组
-const libraryGroups = computed(() => {
+// 字段库：展示模块的全部字段（含未加入表单的字段），按名称 a-z 排序（无类型分组小标题）；
+// 搜索时按名称/编码过滤，命中才显示
+const libraryFields = computed(() => {
   const kw = libSearch.value.trim().toLowerCase()
-  const groups = []
-  const seen = new Set()
-  for (const field of props.fields || []) {
-    if (
-      kw &&
-      !String(field.b_name || '')
-        .toLowerCase()
-        .includes(kw) &&
-      !String(field.b_field || '')
-        .toLowerCase()
-        .includes(kw)
-    ) {
-      continue
-    }
-    const type = field.b_type || 'input'
-    if (!seen.has(type)) {
-      seen.add(type)
-      groups.push({ type, label: FIELD_TYPE_LABELS[type] || type, fields: [] })
-    }
-    groups.find((g) => g.type === type).fields.push(field)
-  }
-  return groups.filter((g) => g.fields.length)
+  return [...(props.fields || [])]
+    .filter(
+      (f) =>
+        !kw ||
+        String(f.b_name || '').toLowerCase().includes(kw) ||
+        String(f.b_field || '').toLowerCase().includes(kw),
+    )
+    .sort((a, b) =>
+      String(a.b_name || a.b_field || '').localeCompare(String(b.b_name || b.b_field || ''), 'zh'),
+    )
 })
 
 function isFieldAdded(field) {
@@ -744,14 +455,20 @@ const canvasSections = computed(() => {
     const gid = String(group.b_id)
     sections.push({
       key: `g-${gid}`,
-      title: group.b_title || `分组-${gid}`,
+      // 标题留空则不渲染标题文字（分组仍作为布局分区）
+      title: (group.b_title || '').trim(),
       group,
       disabled: Number(group.b_canuse) !== 1,
       rows: sectionRowCache[gid] || [],
     })
   }
   if ((sectionRowCache[''] || []).length) {
-    sections.push({ key: 'ungrouped', title: '未分组', group: null, rows: sectionRowCache[''] })
+    sections.push({
+      key: 'ungrouped',
+      title: '未分组',
+      group: null,
+      rows: sectionRowCache[''],
+    })
   }
   return sections
 })
@@ -760,6 +477,33 @@ 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)
+  },
+  { immediate: true },
+)
+
+// 分组拖拽结束：按新顺序重排 groups 的 b_xh 并提交（未分组不参与，自动回到末尾）
+function onGroupDragEnd() {
+  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('')
@@ -791,42 +535,57 @@ function commitEditGroupTitle(section) {
   const title = groupTitleDraft.value.trim()
   editingGroupKey.value = null
   groupTitleDraft.value = ''
-  if (!title || !section.group || section.group.b_title === title) return
+  // 允许清空标题（标题留空即表示不显示分组标题）
+  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,
   )
-  // 重命名也纳入撤销栈（快照含 groups，Ctrl+Z 可一并回退）
-  pushHistory()
   emit('updateGroups', updated)
 }
 
-/* 画布上直接切换分组布局方向（左右 / 上下），与「分组管理」弹窗内的开关等效 */
-function toggleSectionLayout(section) {
-  const group = section?.group
-  if (!group || props.loading) return
-  const direction = group.b_layout_direction === 'horizontal' ? 'vertical' : 'horizontal'
-  const updated = (props.groups || []).map((g) =>
-    String(g.b_id) === String(group.b_id) ? { ...g, b_layout_direction: direction } : g,
-  )
-  pushHistory()
-  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)
-  if ((props.groups || []).some((g) => String(g.b_parent_id) === gid && String(g.b_id) !== gid)) {
-    Message.warning('该分组下还有子分组，请先在「分组管理」中删除子分组')
-    return
-  }
   const rows = section.rows || []
   const title = group.b_title || `分组-${gid}`
   // 竞态兜底：若正在编辑该分组标题，先关闭编辑并把未提交的标题并入删除前的分组数组，
   // 避免 blur 提交的 updateGroups 与本函数基于旧 props.groups 的结果互相覆盖
-  let groups = 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) {
@@ -836,8 +595,6 @@ function deleteGroupDirect(section) {
     }
     cancelEditGroupTitle()
   }
-  // 整体入撤销栈（快照含分组结构）：Ctrl+Z 可同时回退字段归属与分组删除
-  pushHistory()
   // 字段移到未分组
   for (const row of localEdit.value) {
     if (String(row.b_group_id || '') === gid) row.b_group_id = null
@@ -883,7 +640,6 @@ function createEditRow(field, groupId) {
     b_colspan: 24,
     b_height: field.b_type === 'textarea' ? 120 : null,
     b_placeholder: null,
-    b_width: defaultWidthOf(field),
     b_xh: 0,
   }
 }
@@ -1211,31 +967,6 @@ function onFieldDragEnd(evt) {
   const movedIdx = rows.findIndex((r) => String(r.b_field_id) === rowId)
   if (movedIdx < 0) return
 
-  // 子表列：与主表同款拖拽反馈，但提交为简单重排（列独立整行，不参与 24 栅格均分）
-  if (isTableMode.value) {
-    const [m] = rows.splice(movedIdx, 1)
-    if (linePos && String(linePos.fieldId) !== rowId) {
-      const targetIdx = rows.findIndex((r) => String(r.b_field_id) === String(linePos.fieldId))
-      if (targetIdx < 0) {
-        rows.splice(movedIdx, 0, m) // 未命中：回原位（取消）
-        return
-      }
-      m.b_group_id = groupIdOf(rows[targetIdx]) // 跨组移动：跟随目标列分组
-      const before = linePos.pos === 'before' || linePos.pos === 'line-before'
-      rows.splice(before ? targetIdx : targetIdx + 1, 0, m)
-    } else if (overKey != null) {
-      const gid = overKey === 'ungrouped' ? null : overKey.slice(2)
-      m.b_group_id = gid
-      rows.splice(sectionEndIndex(rows, gid), 0, m)
-    } else {
-      rows.splice(movedIdx, 0, m) // 无意图：回原位（取消）
-      return
-    }
-    emitRows(renumberRows(rows))
-    cleanupSelectedRow()
-    return
-  }
-
   if (linePos) {
     // 悬停被拖字段自身：目标行 = 被拖字段原所在行（仅上/下新行意图）
     const isSelfHover = String(linePos.fieldId) === rowId
@@ -1365,7 +1096,6 @@ function moveSelectedRow(delta) {
     }
   }
   if (targetLineStart < 0) return // 已在分组首/尾行，无操作
-  pushHistory()
   const { idxs: targetIdxs } = collectLineIndexes(sorted, targetLineStart)
   // 确定上下两个段（seg1 在上，seg2 在下），两个段相邻且连续
   const seg1 = sourceIdxs[0] < targetIdxs[0] ? sourceIdxs : targetIdxs
@@ -1382,7 +1112,6 @@ function moveSelectedRow(delta) {
 
 function toggleRowFlag(row, key) {
   if (!row || props.loading) return
-  pushHistory()
   row[key] = Number(row[key]) === 1 ? 0 : 1
   emitUpdate()
 }
@@ -1415,7 +1144,6 @@ function copyRowProps() {
 function pastePropsToSelected() {
   const row = selectedRow.value
   if (!row || props.loading || !clipboardProps.value) return
-  pushHistory()
   Object.assign(row, clipboardProps.value.props)
   emitUpdate()
 }
@@ -1460,28 +1188,6 @@ function onLibDragEnd() {
 
   const rows = [...localEdit.value]
 
-  if (isTableMode.value) {
-    // 子表列：按意图插入新列（默认列宽，独立整行，不做栅格均分）
-    let row = null
-    if (linePos) {
-      const targetIdx = rows.findIndex((r) => String(r.b_field_id) === String(linePos.fieldId))
-      if (targetIdx >= 0) {
-        const before = linePos.pos === 'before' || linePos.pos === 'line-before'
-        row = createEditRow(field, groupIdOf(rows[targetIdx]))
-        rows.splice(before ? targetIdx : targetIdx + 1, 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))
-    nextTick(() => scrollToRowCard(String(row.b_id)))
-    return
-  }
-
   let row = null
   if (linePos) {
     const targetIdx = rows.findIndex((r) => String(r.b_field_id) === String(linePos.fieldId))
@@ -1525,16 +1231,14 @@ function isRowSelectedByField(field) {
   return !!row && String(row.b_id) === String(selectedRowKey.value)
 }
 
-/* ================= 表格（子表）模式：列设计 =================
-   子表列与主表字段共用同一套网格拖拽（onFieldDragStart / onFieldDragEnd / onFieldMove），
-   仅提交逻辑在 isTableMode 分支中区分：列不参与 24 栅格均分，保持独立整行。 */
-// 字段库拖拽分组：主表 / 子表统一
+/* ================= 设计视图：网格拖拽分组 ================= */
+// 字段库拖拽分组
 const libGroup = { name: 'form', pull: 'clone', put: false }
 
-// 列网格分组：与字段库同组，接受克隆 + 网格间跨组移动
+// 表单网格分组：与字段库同组，接受克隆 + 网格间跨组移动
 const columnGridGroup = { name: 'form' }
 
-// 字段库 clone：保持原字段对象，由 onLibDragEnd 生成编辑行（主表/子表一致）
+// 字段库 clone：保持原字段对象，由 onLibDragEnd 生成编辑行
 function libClone(field) {
   return field
 }
@@ -1543,7 +1247,6 @@ function libClone(field) {
 function toggleInspector(key) {
   const row = selectedRow.value
   if (!row || props.loading) return
-  pushHistory()
   row[key] = Number(row[key]) === 1 ? 0 : 1
   emitUpdate()
 }
@@ -1551,7 +1254,6 @@ function toggleInspector(key) {
 function onColspanChange(value) {
   const row = selectedRow.value
   if (!row || props.loading) return
-  pushHistory()
   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))
@@ -1571,7 +1273,7 @@ function onColspanChange(value) {
   emitUpdate()
 }
 
-// 数字输入框 change（失焦/回车）提交：与原值不同才入撤销栈（一次输入 = 一个撤销点）
+// 数字输入框 change（失焦/回车）提交：与原值不同才真正写入
 function onColspanInput(event) {
   const row = selectedRow.value
   if (!row || props.loading) return
@@ -1583,18 +1285,16 @@ function onColspanInput(event) {
 function onHeightChange(value) {
   const row = selectedRow.value
   if (!row || !isTextarea(row) || props.loading) return
-  pushHistory()
   row.b_height = Math.min(480, Math.max(64, Number(value) || 120))
   emitUpdate()
 }
 
-/* 占位符：change（失焦/回车）提交，有变化才入撤销栈 */
+/* 占位符：change（失焦/回车）提交，有变化才真正写入 */
 function onPlaceholderChange(event) {
   const row = selectedRow.value
   if (!row || props.loading) return
   const value = event.target.value.trim()
   if ((row.b_placeholder || '') === value) return
-  pushHistory()
   row.b_placeholder = value || null
   emitUpdate()
 }
@@ -1603,8 +1303,6 @@ 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 snapshot = localEdit.value.map((item) => ({ ...item }))
   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 栅格重新均分给剩余字段，避免留下空洞
@@ -1619,27 +1317,14 @@ function removeRow(row) {
       })
     }
   }
-  lastDeleted.value = { row: { ...row }, snapshot }
   emitRows(renumberRows(sorted.filter((item) => String(item.b_id) !== String(row.b_id))))
   if (String(selectedRowKey.value) === String(row.b_id)) selectedRowKey.value = null
-  clearTimeout(undoTimer)
-  undoTimer = setTimeout(() => (lastDeleted.value = null), 8000)
 }
 
 function removeSelected() {
   removeRow(selectedRow.value)
 }
 
-function restoreDeleted() {
-  const deleted = lastDeleted.value
-  if (!deleted || props.loading) return
-  // 按删除前快照整体恢复（位置与被联动调整的同行宽度一起回滚）
-  emitRows(renumberRows(deleted.snapshot.map((item) => ({ ...item }))))
-  selectedRowKey.value = String(deleted.row.b_id)
-  lastDeleted.value = null
-  clearTimeout(undoTimer)
-}
-
 /* 视图切换：两种视图共享选中行 */
 function switchView(mode) {
   viewMode.value = mode
@@ -1654,26 +1339,15 @@ function switchView(mode) {
 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 留给文本编辑，Ctrl+Z 留给输入框撤销
+  // 输入框内不拦截：Delete/Backspace 留给文本编辑
   if (event.target?.closest?.('input, textarea, select, [contenteditable="true"]')) return
   const mod = event.ctrlKey || event.metaKey
-  if (mod && (event.key === 'z' || event.key === 'Z')) {
-    event.preventDefault()
-    if (event.shiftKey) redo()
-    else undo()
-    return
-  }
-  if (mod && event.key === 'y') {
-    event.preventDefault()
-    redo()
-    return
-  }
   // Ctrl+C / Ctrl+V：复制 / 粘贴选中字段（列）的布局与状态属性
   if (mod && (event.key === 'c' || event.key === 'C')) {
     event.preventDefault()
@@ -1704,11 +1378,8 @@ onBeforeUnmount(() => {
   window.removeEventListener('keydown', onDesignerKeydown)
   window.removeEventListener('keydown', onDragKeydown)
   window.removeEventListener('mousemove', onDragShadowMove)
-  window.removeEventListener('mousemove', onColumnResizeMove)
-  window.removeEventListener('mouseup', onColumnResizeEnd)
   removeDragShadow()
   enableTextSelection()
-  clearTimeout(undoTimer)
 })
 </script>
 
@@ -1728,46 +1399,43 @@ onBeforeUnmount(() => {
           placeholder="搜索字段名 / 编码"
         />
         <div class="mm-fdesign__lib-group">
-          <template v-for="group in libraryGroups" :key="group.type">
-            <div class="mm-fdesign__lib-subtitle">{{ group.label }}</div>
-            <draggable
-              class="mm-fdesign__lib-list"
-              :list="group.fields"
-              :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)"
+          <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
                 >
-                  <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>
-          </template>
-          <div v-if="!libraryGroups.length" class="mm-fdesign__lib-empty">无匹配字段</div>
+              </button>
+            </template>
+          </draggable>
+          <div v-if="!libraryFields.length" class="mm-fdesign__lib-empty">无匹配字段</div>
         </div>
       </aside>
 
@@ -1779,7 +1447,7 @@ onBeforeUnmount(() => {
               <button
                 type="button"
                 class="mm-edit__mode-btn"
-                :class="{ 'is-active': (props.editMode || 'form') === 'form' }"
+                :class="{ 'is-active': (editMode || 'form') === 'form' }"
                 title="主表：以表单形式编辑"
                 :disabled="loading"
                 @click="onEditModeChange('form')"
@@ -1789,7 +1457,7 @@ onBeforeUnmount(() => {
               <button
                 type="button"
                 class="mm-edit__mode-btn"
-                :class="{ 'is-active': (props.editMode || 'form') === 'table' }"
+                :class="{ 'is-active': (editMode || 'form') === 'table' }"
                 title="子表：以表格形式编辑"
                 :disabled="loading"
                 @click="onEditModeChange('table')"
@@ -1816,40 +1484,13 @@ onBeforeUnmount(() => {
                 data-view="data"
                 @click="switchView('data')"
               >
-                预览
+                数据
               </button>
             </div>
           </div>
           <div class="mm-edit__head-right">
-            <button
-              type="button"
-              class="mm-edit__hist-btn"
-              title="撤销 (Ctrl+Z)"
-              aria-label="撤销"
-              :disabled="loading || !historyPast.length"
-              @click="undo"
-            >
-              <Undo2 :size="14" />
-            </button>
-            <button
-              type="button"
-              class="mm-edit__hist-btn"
-              title="重做 (Ctrl+Shift+Z / Ctrl+Y)"
-              aria-label="重做"
-              :disabled="loading || !historyFuture.length"
-              @click="redo"
-            >
-              <Redo2 :size="14" />
-            </button>
-            <span v-if="lastDeleted" class="mm-edit__undo-wrap" :key="lastDeleted.row.b_id">
-              <span class="mm-edit__undo-text">已移除「{{ fieldName(lastDeleted.row) }}」</span>
-              <button type="button" class="mm-edit__undo" @click="restoreDeleted">
-                <Undo2 :size="13" /> 撤销
-              </button>
-              <i class="mm-edit__undo-bar" aria-hidden="true"></i>
-            </span>
-            <Button type="outline" :disabled="loading" @click="groupManagerVisible = true">
-              {{ isTableMode ? '表头分组' : '分组管理' }}
+            <Button type="outline" :disabled="loading" @click="addGroup">
+              <Plus :size="14" /> 添加分组
             </Button>
             <div class="mm-edit__help">
               <span class="mm-edit__help-icon" aria-hidden="true">?</span>
@@ -1859,8 +1500,6 @@ onBeforeUnmount(() => {
                   <li><kbd>Ctrl+C</kbd> 复制选中字段属性</li>
                   <li><kbd>Ctrl+X</kbd> 剪切（复制并删除当前字段）</li>
                   <li><kbd>Ctrl+V</kbd> 粘贴属性到选中字段</li>
-                  <li><kbd>Ctrl+Z</kbd> 撤销</li>
-                  <li><kbd>Ctrl+Shift+Z</kbd> / <kbd>Ctrl+Y</kbd> 重做</li>
                   <li><kbd>Delete</kbd> 删除选中字段</li>
                 </ul>
               </div>
@@ -1868,344 +1507,41 @@ onBeforeUnmount(() => {
           </div>
         </div>
 
-      <!-- ================= 表格（子表）设计：列画布 ================= -->
-      <div
-        v-if="isTableMode"
-        class="mm-fdesign__canvas-wrap"
-        :class="{ 'is-drag-active': dragPayload }"
-      >
-        <div class="mm-fdesign__canvas">
-          <div class="mm-tdesign__sheet">
-            <!-- 列清单（纵向列卡片：设计主操作区） -->
-            <div class="mm-tdesign__list-head">
-              <span class="mm-tdesign__list-head-hint">从左侧字段拖入，或在分组内拖拽调整顺序</span>
-              <button
-                type="button"
-                class="mm-tdesign__preview-btn"
-                :disabled="loading"
-                title="查看真实表格效果（支持拖拽调整列宽）"
-                @click="previewOpen = true"
-              >
-                <Eye :size="14" /> 预览表格
-              </button>
-            </div>
-            <!-- 纵向列卡片列表（按表头分组分区展示，宽度永远够） -->
-            <div v-if="!canvasSections.length" class="mm-tdesign__empty">暂无内容</div>
-            <div
-              v-for="section in canvasSections"
-              :key="section.key"
-              class="mm-tdesign__section"
-              :class="{ 'is-ungrouped': section.key === 'ungrouped' }"
-              :data-section-key="section.key"
-            >
-              <div class="mm-tdesign__section-title">
-                <template v-if="editingGroupKey === section.key">
-                  <input
-                    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="button"
-                      class="mm-fdesign__section-edit-btn"
-                      title="确认"
-                      aria-label="确认修改分组名"
-                      @mousedown.prevent="commitEditGroupTitle(section)"
-                    >
-                      <Check :size="13" />
-                    </button>
-                    <button
-                      type="button"
-                      class="mm-fdesign__section-edit-btn"
-                      title="取消"
-                      aria-label="取消修改分组名"
-                      @mousedown.prevent="cancelEditGroupTitle"
-                    >
-                      <X :size="13" />
-                    </button>
-                  </span>
-                </template>
-                <template v-else>
-                  <i v-if="section.key === 'ungrouped'" class="mm-tdesign__section-flag">未分组</i>
-                  <span
-                    v-else
-                    class="mm-fdesign__section-name is-editable"
-                    title="点击重命名分组"
-                    @click.stop="startEditGroupTitle(section)"
-                  >{{ section.title }}</span>
-                  <span class="mm-edit__section-meta">
-                    <span class="mm-edit__section-count">{{ section.rows.length }} 列</span>
-                    <i v-if="section.disabled" class="mm-fdesign__section-off">已停用</i>
-                    <button
-                      v-if="section.group"
-                      type="button"
-                      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="columnGridGroup"
-                  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="'.mm-fdesign__field-toolbar, 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 24' }"
-                      @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-tdesign__col-meta">
-                          <span class="mm-tdesign__col-type">{{ controlTypeLabel(row) }}</span>
-                          <span class="mm-tdesign__col-width">{{ widthOf(row) }}px</span>
-                        </span>
-                        <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>
-                        <i v-if="Number(row.b_visible) !== 1" class="mm-fdesign__invisible-mark"
-                          >隐藏</i
-                        >
-                      </div>
-                      <div class="mm-fdesign__field-control">
-                        <div class="mm-tdesign__col-sample" :class="'is-' + fieldType(row)">
-                          {{ sampleText(row) }}
-                        </div>
-                      </div>
-                      <div
-                        v-if="selectedRowKey === String(row.b_id)"
-                        class="mm-fdesign__field-toolbar"
-                      >
-                        <button
-                          type="button"
-                          class="mm-fdesign__tool-btn"
-                          data-action="move-up"
-                          title="上移"
-                          aria-label="上移"
-                          @click.stop="moveSelectedRow(-1)"
-                        >
-                          <ArrowUp :size="13" />
-                        </button>
-                        <button
-                          type="button"
-                          class="mm-fdesign__tool-btn"
-                          data-action="move-down"
-                          title="下移"
-                          aria-label="下移"
-                          @click.stop="moveSelectedRow(1)"
-                        >
-                          <ArrowDown :size="13" />
-                        </button>
-                        <button
-                          type="button"
-                          class="mm-fdesign__tool-btn is-danger"
-                          data-action="delete"
-                          title="删除列"
-                          aria-label="删除列"
-                          @click.stop="removeRow(row)"
-                        >
-                          <Trash2 :size="13" />
-                        </button>
-                      </div>
-                    </div>
-                  </template>
-                  <template #footer>
-                    <div v-if="!section.rows.length" class="mm-fdesign__grid-empty">暂无内容</div>
-                  </template>
-                </draggable>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- 子表预览弹窗（真实表格效果，拖拽列宽所见即所得） -->
-        <Modal
-          :open="previewOpen"
-          title="子表预览"
-          :width="'90%'"
-          :footer="false"
-          :mask-closable="true"
-          :keyboard="true"
-          fullscreen
-          @update:open="previewOpen = $event"
-        >
-          <div class="mm-tdesign__preview-wrap">
-            <div v-if="!tableColumnRows.length" class="mm-tdesign__empty">暂无子表列</div>
-            <div v-else class="mm-tdesign__table" :class="{ 'is-resizing': resizeState }">
-              <!-- 第一级表头：分组行（多级表头） -->
-              <div v-if="previewGroupHeader.length" class="mm-tdesign__row mm-tdesign__head-row">
-                <span class="mm-tdesign__frozen mm-tdesign__frozen-left">#</span>
-                <span class="mm-tdesign__cols">
-                  <span
-                    v-for="(g, gi) in previewGroupHeader"
-                    :key="'g' + gi"
-                    class="mm-tdesign__group-cell"
-                    :class="{ 'is-unnamed': !g.title }"
-                    :style="{ width: g.width + 'px' }"
-                    :title="g.title || '未分组列'"
-                  >
-                    {{ g.title }}
-                  </span>
-                </span>
-                <span class="mm-tdesign__frozen mm-tdesign__frozen-right">操作</span>
-              </div>
-              <!-- 第二级表头：列名行 -->
-              <div class="mm-tdesign__row mm-tdesign__head-row">
-                <span class="mm-tdesign__frozen mm-tdesign__frozen-left">#</span>
-                <span class="mm-tdesign__cols">
-                  <span
-                    v-for="row in tableColumnRows"
-                    :key="String(row.b_id)"
-                    class="mm-tdesign__head-cell"
-                    :class="{
-                      'is-hidden': Number(row.b_visible) !== 1,
-                      'is-resizing-col': resizeState?.row === row,
-                    }"
-                    :style="{ width: widthOf(row) + 'px' }"
-                    :title="fieldName(row) + ' · ' + widthOf(row) + 'px'"
-                  >
-                    <span class="mm-tdesign__head-name">{{ fieldName(row) }}</span>
-                    <i v-if="Number(row.b_required) === 1" class="mm-fdesign__required">*</i>
-                    <span class="mm-tdesign__head-width">{{ widthOf(row) }}</span>
-                    <span
-                      class="mm-tdesign__resize-handle"
-                      role="separator"
-                      aria-orientation="vertical"
-                      tabindex="0"
-                      :aria-label="'拖拽调整列宽（当前 ' + widthOf(row) + 'px，双击恢复默认）'"
-                      :data-field-id="String(row.b_field_id)"
-                      @mousedown.stop.prevent="startColumnResize($event, row)"
-                      @dblclick.stop.prevent="resetColumnWidth(row)"
-                      @keydown.left.prevent="resizeColumnByKey(row, -10)"
-                      @keydown.right.prevent="resizeColumnByKey(row, 10)"
-                      @keydown.down.prevent="resizeColumnByKey(row, -1)"
-                      @keydown.up.prevent="resizeColumnByKey(row, 1)"
-                    />
-                  </span>
-                </span>
-                <span class="mm-tdesign__frozen mm-tdesign__frozen-right">操作</span>
-              </div>
-              <div class="mm-tdesign__row">
-                <span class="mm-tdesign__frozen mm-tdesign__frozen-left">1</span>
-                <span class="mm-tdesign__cols">
-                  <span
-                    v-for="row in tableColumnRows"
-                    :key="String(row.b_id)"
-                    class="mm-tdesign__cell"
-                    :class="{ 'is-hidden': Number(row.b_visible) !== 1 }"
-                    :style="{ width: widthOf(row) + 'px' }"
-                  >
-                    <span
-                      class="mm-tdesign__sample"
-                      :class="'is-' + fieldType(row)"
-                      >{{ sampleText(row) }}</span
-                    >
-                  </span>
-                </span>
-                <span class="mm-tdesign__frozen mm-tdesign__frozen-right">
-                  <span class="mm-tdesign__row-op">编辑</span>
-                </span>
-              </div>
-            </div>
-          </div>
-        </Modal>
-      </div>
-
       <!-- ================= 表单（主表）设计：画布 ================= -->
-      <div v-else class="mm-fdesign__canvas-wrap" :class="{ 'is-drag-active': dragPayload }">
+      <div class="mm-fdesign__canvas-wrap" :class="{ 'is-drag-active': dragPayload }">
         <div class="mm-fdesign__canvas">
           <div class="mm-fdesign__sheet" @click="selectRow(null)">
             <template v-if="canvasSections.length">
-              <div
-                v-for="section in canvasSections"
-                :key="section.key"
-                class="mm-fdesign__section"
-                :data-section-key="section.key"
-                :class="{
-                  'is-horizontal': section.group?.b_layout_direction === 'horizontal',
-                  'is-ungrouped': section.key === 'ungrouped',
-                }"
+              <draggable
+                v-model="sectionOrder"
+                handle=".mm-fdesign__section-grip"
+                item-key="key"
+                :animation="150"
+                ghost-class="mm-fdesign__section-ghost"
+                :fallback-on-body="true"
+                :force-fallback="true"
+                fallback-class="mm-fdesign__drag-fallback"
+                @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',
+                    }"
+                  >
                 <div class="mm-fdesign__section-title">
+                  <button
+                    v-if="section.group && editingGroupKey !== section.key"
+                    type="button"
+                    class="mm-fdesign__section-grip"
+                    title="拖动调整分组顺序"
+                    aria-label="拖动调整分组顺序"
+                  >
+                    <GripVertical :size="13" />
+                  </button>
                   <template v-if="editingGroupKey === section.key">
                     <input
                       v-model="groupTitleDraft"
@@ -2240,35 +1576,29 @@ onBeforeUnmount(() => {
                   </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">
                       <span class="mm-edit__section-count">{{ section.rows.length }} 字段</span>
-                      <i v-if="section.disabled" class="mm-fdesign__section-off">已停用</i>
                       <button
                         v-if="section.group"
                         type="button"
-                        class="mm-fdesign__section-del"
-                        :title="
-                          section.group.b_layout_direction === 'horizontal'
-                            ? '切换为上下布局'
-                            : '切换为左右布局（标题在左）'
-                        "
-                        :aria-label="
-                          section.group.b_layout_direction === 'horizontal'
-                            ? '切换为上下布局'
-                            : '切换为左右布局'
-                        "
-                        @click.stop="toggleSectionLayout(section)"
+                        class="mm-fdesign__section-btn"
+                        title="修改分组标题"
+                        aria-label="修改分组标题"
+                        @click.stop="startEditGroupTitle(section)"
                       >
-                        <LayoutPanelLeft
-                          v-if="section.group.b_layout_direction === 'horizontal'"
-                          :size="13"
-                        />
-                        <LayoutPanelTop v-else :size="13" />
+                        <Pencil :size="13" />
                       </button>
                       <button
                         v-if="section.group"
@@ -2474,6 +1804,8 @@ onBeforeUnmount(() => {
                 </draggable>
                 </div>
               </div>
+                </template>
+              </draggable>
             </template>
             <draggable
               v-else
@@ -2516,151 +1848,8 @@ onBeforeUnmount(() => {
       </div>
       </div>
 
-      <!-- ================= 表格（子表）设计：属性面板 ================= -->
-      <aside
-        v-if="isTableMode"
-        class="mm-fdesign__inspector"
-        :class="{ 'is-collapsed': inspectorCollapsed }"
-        aria-label="属性面板"
-      >
-        <button
-          v-if="inspectorCollapsed"
-          type="button"
-          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="button"
-              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">
-            <label for="mm-tdesign-width">列宽 (px)</label>
-            <div class="mm-fdesign__span-control">
-              <Select
-                id="mm-tdesign-width"
-                :model-value="String(widthOf(selectedRow))"
-                :disabled="loading"
-                :options="columnWidthOptions"
-                @update:model-value="onWidthChange"
-              />
-              <button
-                type="button"
-                class="mm-fdesign__step"
-                :disabled="loading || widthOf(selectedRow) <= 40"
-                aria-label="列宽减 10"
-                @click="onWidthStep(-10)"
-              >
-                −
-              </button>
-              <input
-                type="number"
-                min="40"
-                max="600"
-                :value="widthOf(selectedRow)"
-                :disabled="loading"
-                aria-label="自定义列宽"
-                @change="onWidthCommit"
-              />
-              <button
-                type="button"
-                class="mm-fdesign__step"
-                :disabled="loading || widthOf(selectedRow) >= 600"
-                aria-label="列宽加 10"
-                @click="onWidthStep(10)"
-              >
-                +
-              </button>
-            </div>
-          </div>
-          <div class="mm-fdesign__prop-group">状态</div>
-          <div class="mm-fdesign__toggles">
-            <div class="mm-fdesign__toggle-line">
-              <span>必填</span>
-              <button
-                type="button"
-                class="mm-fdesign__toggle"
-                :class="{ 'is-on': Number(selectedRow.b_required) === 1 }"
-                :aria-pressed="Number(selectedRow.b_required) === 1"
-                :disabled="loading"
-                @click="toggleInspector('b_required')"
-              ></button>
-            </div>
-            <div class="mm-fdesign__toggle-line">
-              <span>只读</span>
-              <button
-                type="button"
-                class="mm-fdesign__toggle"
-                :class="{ 'is-on': Number(selectedRow.b_readonly) === 1 }"
-                :aria-pressed="Number(selectedRow.b_readonly) === 1"
-                :disabled="loading"
-                @click="toggleInspector('b_readonly')"
-              ></button>
-            </div>
-            <div class="mm-fdesign__toggle-line">
-              <span>禁用</span>
-              <button
-                type="button"
-                class="mm-fdesign__toggle"
-                :class="{ 'is-on': Number(selectedRow.b_disabled) === 1 }"
-                :aria-pressed="Number(selectedRow.b_disabled) === 1"
-                :disabled="loading"
-                @click="toggleInspector('b_disabled')"
-              ></button>
-            </div>
-            <div class="mm-fdesign__toggle-line">
-              <span>显示</span>
-              <button
-                type="button"
-                class="mm-fdesign__toggle"
-                :class="{ 'is-on': Number(selectedRow.b_visible) === 1 }"
-                :aria-pressed="Number(selectedRow.b_visible) === 1"
-                :disabled="loading"
-                @click="toggleInspector('b_visible')"
-              ></button>
-            </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>
-
       <!-- ================= 表单（主表）设计：属性面板 ================= -->
       <aside
-        v-else
         class="mm-fdesign__inspector"
         :class="{ 'is-collapsed': inspectorCollapsed }"
         aria-label="属性面板"
@@ -2844,14 +2033,6 @@ onBeforeUnmount(() => {
         />
       </div>
     </div>
-
-    <FieldGroupManager
-      v-model:open="groupManagerVisible"
-      :module-id="moduleId"
-      :groups="groups"
-      :referenced-group-ids="referencedGroupIds"
-      @saved="(groups, idMapping) => emit('groupsSaved', groups, idMapping)"
-    />
   </div>
 </template>
 
@@ -2879,7 +2060,7 @@ onBeforeUnmount(() => {
   border-bottom: 1px solid var(--fms-border);
 }
 
-/* 视图切换不再 absolute 定位：左/右两翼 flex 伸缩挤出中间位 */
+/* 视图切换：左/右两翼 flex 伸缩挤出中间位，保证居中 */
 .mm-edit__head-center {
   flex: none;
   display: inline-flex;
@@ -2940,35 +2121,6 @@ onBeforeUnmount(() => {
   }
 }
 
-/* 头部撤销 / 重做图标按钮 */
-.mm-edit__hist-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  border: 1px solid var(--fms-border);
-  border-radius: var(--fms-control-radius);
-  background: var(--fms-card);
-  color: var(--fms-text-secondary);
-  cursor: pointer;
-  transition:
-    border-color 150ms ease,
-    background 150ms ease,
-    color 150ms ease;
-
-  &:hover:not(:disabled) {
-    border-color: color-mix(in srgb, var(--fms-primary) 45%, transparent);
-    color: var(--fms-primary);
-  }
-
-  &:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-}
-
 .mm-edit__view-switch {
   display: inline-flex;
   align-items: center;
@@ -3087,63 +2239,6 @@ onBeforeUnmount(() => {
   }
 }
 
-/* ---- 撤销提示条（删除字段后临时出现，弱化为次级提示，避免抢眼） ---- */
-.mm-edit__undo-wrap {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 3px 10px;
-  border-radius: 999px;
-  border: 1px dashed var(--fms-border);
-  background: var(--fms-card);
-  font-size: 11px;
-  overflow: hidden; /* 裁剪倒计时进度条 */
-}
-
-/* 底部倒计时进度条：与 8 秒自动消失同步收缩，提示撤销窗口剩余时间 */
-.mm-edit__undo-bar {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  height: 2px;
-  background: var(--fms-primary);
-  opacity: 0.45;
-  transform-origin: left;
-  animation: mm-edit-undo-bar 8s linear forwards;
-}
-
-@keyframes mm-edit-undo-bar {
-  from {
-    transform: scaleX(1);
-  }
-  to {
-    transform: scaleX(0);
-  }
-}
-
-.mm-edit__undo-text {
-  color: var(--fms-text-secondary);
-}
-
-.mm-edit__undo {
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  padding: 1px 8px;
-  border: 1px solid var(--fms-border);
-  border-radius: 999px;
-  background: var(--fms-card);
-  color: var(--fms-primary);
-  font-size: 11px;
-  cursor: pointer;
-
-  &:hover {
-    background: color-mix(in srgb, var(--fms-primary) 6%, transparent);
-  }
-}
-
 /* ---- 设计视图：工作区模型（三栏统一灰底，白色表单纸面居中浮起） ---- */
 .mm-fdesign {
   display: grid;
@@ -3384,9 +2479,8 @@ onBeforeUnmount(() => {
   min-height: 120px;
 }
 
-/* ---- 分组卡片（主表 / 子表统一，参考 demo.html 分组样式） ---- */
-.mm-fdesign__section,
-.mm-tdesign__section {
+/* ---- 分组卡片（主表表单设计，参考 demo.html 分组样式） ---- */
+.mm-fdesign__section {
   margin-top: 12px;
   border: 1px solid var(--fms-border);
   border-radius: 8px;
@@ -3413,21 +2507,8 @@ onBeforeUnmount(() => {
   }
 }
 
-/* 分组停用标记 */
-.mm-fdesign__section-off {
-  padding: 0 6px;
-  border: 1px solid color-mix(in srgb, var(--fms-danger, #d95757) 30%, transparent);
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--fms-danger, #d95757) 8%, var(--fms-card));
-  color: var(--fms-danger, #d95757);
-  font-size: 10px;
-  font-style: normal;
-  line-height: 16px;
-}
-
-/* 分组标题行（主表 / 子表统一）：白底 header 条，与卡片圆角裁剪 */
-.mm-fdesign__section-title,
-.mm-tdesign__section-title {
+/* 分组标题行（主表表单设计）：白底 header 条，与卡片圆角裁剪 */
+.mm-fdesign__section-title {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -3447,15 +2528,6 @@ onBeforeUnmount(() => {
   white-space: nowrap;
 }
 
-/* 未分组伪分区名称 */
-.mm-tdesign__section-flag {
-  flex: 1;
-  min-width: 0;
-  font-style: normal;
-  color: var(--fms-text-secondary);
-  font-size: 11px;
-}
-
 /* 分组名内联编辑：悬停提示可点击重命名 */
 .mm-fdesign__section-name.is-editable {
   cursor: text;
@@ -3810,10 +2882,7 @@ textarea.mm-fdesign__ctrl {
 
 .mm-fdesign__field:hover .mm-fdesign__invisible-mark,
 .mm-fdesign__field.is-selected .mm-fdesign__invisible-mark,
-.mm-fdesign__field.is-invisible .mm-fdesign__invisible-mark,
-.mm-tdesign__col:hover .mm-fdesign__invisible-mark,
-.mm-tdesign__col.is-selected .mm-fdesign__invisible-mark,
-.mm-tdesign__col.is-invisible .mm-fdesign__invisible-mark {
+.mm-fdesign__field.is-invisible .mm-fdesign__invisible-mark {
   opacity: 1;
 }
 
@@ -4055,28 +3124,14 @@ textarea.mm-fdesign__ctrl {
   flex: 1;
 }
 
-/* ---- 字段库：类型分组小标题 ---- */
-.mm-fdesign__lib-subtitle {
-  margin: 10px 0 4px;
-  color: var(--fms-text);
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.02em;
-  /* 前竖线：与 lib-title 统一左对齐 */
-  border-left: 3px solid var(--fms-primary);
-  padding-left: 8px;
-
-  &:first-child {
-    margin-top: 0;
-  }
-}
-
 /* ---- 分组标题行：右侧操作（字段/列计数 + 停用标记 + 删除），主表/子表统一 ---- */
 .mm-edit__section-meta {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   flex: none;
+  /* 无标题分组时标题名不渲染，meta 仍靠右 */
+  margin-left: auto;
   margin-left: auto;
 }
 
@@ -4087,7 +3142,7 @@ textarea.mm-fdesign__ctrl {
   font-variant-numeric: tabular-nums;
 }
 
-/* 画布分组删除按钮（标题行右侧）：默认隐藏，分组 hover 时浮现，降低视觉噪音 */
+/* 画布分组删除按钮（标题行右侧）：图标常驻显示 */
 .mm-fdesign__section-del {
   display: inline-flex;
   align-items: center;
@@ -4100,17 +3155,11 @@ textarea.mm-fdesign__ctrl {
   background: transparent;
   color: var(--fms-text-placeholder, #9ca3af);
   cursor: pointer;
-  opacity: 0;
   transition:
-    opacity 0.15s,
     background 0.15s,
     color 0.15s,
     border-color 0.15s;
 
-  .mm-fdesign__section:hover & {
-    opacity: 1;
-  }
-
   &:hover {
     background: color-mix(in srgb, var(--fms-danger, #d95757) 10%, var(--fms-card));
     color: var(--fms-danger, #d95757);
@@ -4118,6 +3167,70 @@ textarea.mm-fdesign__ctrl {
   }
 }
 
+/* 分组标题行编辑按钮（✏ 修改标题）：图标常驻显示 */
+.mm-fdesign__section-btn {
+  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: var(--fms-secondary-hover, #f1f5f9);
+    color: var(--fms-text);
+    border-color: var(--fms-border);
+  }
+}
+
+/* 分组标题为空时的占位：灰色「空」，点击可设置标题 */
+.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;
+  }
+}
+
+/* 分组卡片拖拽占位 */
+.mm-fdesign__section-ghost {
+  opacity: 0.4;
+}
+
 /* 分组级左右布局：标题在左（竖排），字段画布在右；仅影响单个分组 */
 .mm-fdesign__section.is-horizontal {
   display: flex;
@@ -4166,9 +3279,7 @@ textarea.mm-fdesign__ctrl {
 }
 
 .mm-fdesign__field:hover .mm-fdesign__label-chips,
-.mm-fdesign__field.is-selected .mm-fdesign__label-chips,
-.mm-tdesign__col:hover .mm-fdesign__label-chips,
-.mm-tdesign__col.is-selected .mm-fdesign__label-chips {
+.mm-fdesign__field.is-selected .mm-fdesign__label-chips {
   opacity: 1;
 }
 
@@ -4223,459 +3334,6 @@ textarea.mm-fdesign__ctrl {
   }
 }
 
-/* ---- 表格（子表）设计：列画布（透明，白色分组卡片直接浮于灰底） ---- */
-.mm-tdesign__sheet {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-/* WYSIWYG 表格：横向滚动 + 冻结序号/操作列 */
-.mm-tdesign__table {
-  overflow: auto;
-  max-height: 240px;
-  border: 1px solid var(--fms-border);
-  border-radius: 6px;
-  background: var(--fms-card);
-
-  &.is-resizing {
-    user-select: none;
-  }
-}
-
-.mm-tdesign__row {
-  display: flex;
-  align-items: center;
-  min-width: max-content;
-  border-bottom: 1px solid var(--fms-border);
-
-  &:last-child {
-    border-bottom: none;
-  }
-}
-
-.mm-tdesign__head-row {
-  background: var(--fms-secondary);
-}
-
-/* 预览第一级表头：分组格（跨列合并 = 组内列宽之和） */
-.mm-tdesign__group-cell {
-  flex: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 30px;
-  padding: 0 8px;
-  border-right: 1px solid var(--fms-border);
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  color: var(--fms-text);
-  font-size: 12px;
-  font-weight: 600;
-  user-select: none;
-
-  &.is-unnamed {
-    color: var(--fms-text-secondary);
-    font-weight: 400;
-  }
-}
-
-.mm-tdesign__cols {
-  display: flex;
-  align-items: center;
-  min-width: max-content;
-}
-
-/* 冻结列（横向滚动时保持固定） */
-.mm-tdesign__frozen {
-  flex: none;
-  position: sticky;
-  z-index: 6;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  font-size: 11px;
-  color: var(--fms-text-secondary);
-}
-
-.mm-tdesign__head-row .mm-tdesign__frozen {
-  background: var(--fms-secondary);
-}
-
-.mm-tdesign__row:not(.mm-tdesign__head-row) .mm-tdesign__frozen {
-  background: var(--fms-card);
-}
-
-.mm-tdesign__frozen-left {
-  left: 0;
-  width: 44px;
-  min-width: 44px;
-  padding: 0 6px;
-  border-right: 1px solid var(--fms-border);
-}
-
-.mm-tdesign__frozen-right {
-  right: 0;
-  min-width: 56px;
-  padding: 0 8px;
-  border-left: 1px solid var(--fms-border);
-}
-
-/* 表头单元格 */
-.mm-tdesign__head-cell {
-  position: relative;
-  flex: none;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  height: 34px;
-  padding: 0 6px;
-  border-right: 1px solid var(--fms-border);
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--fms-text);
-  white-space: nowrap;
-  overflow: hidden;
-  cursor: pointer;
-  user-select: none;
-  transition: background 0.15s;
-
-  &:hover {
-    background: color-mix(in srgb, var(--fms-primary) 6%, transparent);
-  }
-
-  &.is-selected {
-    background: color-mix(in srgb, var(--fms-primary) 12%, transparent);
-    box-shadow: inset 0 -2px 0 var(--fms-primary);
-  }
-
-  &.is-hidden {
-    opacity: 0.45;
-  }
-
-  &.is-resizing-col {
-    background: color-mix(in srgb, var(--fms-primary) 10%, transparent);
-  }
-}
-
-.mm-tdesign__head-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.mm-tdesign__head-width {
-  flex: none;
-  color: var(--fms-text-secondary);
-  font-size: 10px;
-  font-weight: 400;
-  font-variant-numeric: tabular-nums;
-  opacity: 0.9;
-}
-
-/* 列宽拖拽手柄：悬停在列右缘，按下后左右拖拽实时调整 b_width */
-.mm-tdesign__resize-handle {
-  position: absolute;
-  top: 0;
-  right: -3px;
-  z-index: 3;
-  width: 9px;
-  height: 100%;
-  cursor: col-resize;
-  touch-action: none;
-}
-
-.mm-tdesign__resize-handle::after {
-  content: '';
-  position: absolute;
-  top: 25%;
-  right: 4px;
-  width: 1px;
-  height: 50%;
-  background: transparent;
-  transition: background 0.15s ease;
-}
-
-.mm-tdesign__resize-handle:hover::after,
-.mm-tdesign__resize-handle:focus-visible::after,
-.mm-tdesign__head-cell.is-resizing-col .mm-tdesign__resize-handle::after {
-  background: var(--fms-primary);
-}
-
-.mm-tdesign__resize-handle:focus-visible {
-  outline: 2px solid color-mix(in srgb, var(--fms-primary) 55%, transparent);
-  outline-offset: -2px;
-  border-radius: 4px;
-}
-
-.mm-tdesign__row-op {
-  padding: 2px 10px;
-  border-radius: 4px;
-  background: color-mix(in srgb, var(--fms-primary) 10%, transparent);
-  color: var(--fms-primary);
-  font-size: 11px;
-  white-space: nowrap;
-}
-
-/* 预览弹窗内容 */
-.mm-tdesign__preview-wrap {
-  padding: 8px 0;
-  min-height: 120px;
-
-  .mm-tdesign__table {
-    max-height: 60vh;
-  }
-}
-
-/* 预览表格：数据单元格与样例控件外观 */
-.mm-tdesign__cell {
-  flex: none;
-  display: inline-flex;
-  align-items: center;
-  height: 40px;
-  padding: 4px 10px;
-  border-right: 1px solid var(--fms-border);
-  overflow: hidden;
-
-  &.is-hidden {
-    opacity: 0.4;
-    text-decoration: line-through;
-  }
-}
-
-.mm-tdesign__sample {
-  display: inline-flex;
-  align-items: center;
-  width: 100%;
-  height: 24px;
-  padding: 0 8px;
-  border: 1px solid var(--fms-border);
-  border-radius: 4px;
-  background: var(--fms-secondary-hover);
-  color: var(--fms-text-secondary);
-  font-size: 12px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-variant-numeric: tabular-nums;
-
-  &.is-select {
-    position: relative;
-    padding-right: 22px;
-
-    &::after {
-      content: '';
-      position: absolute;
-      right: 9px;
-      top: 50%;
-      width: 0;
-      height: 0;
-      border-left: 4px solid transparent;
-      border-right: 4px solid transparent;
-      border-top: 5px solid var(--fms-text-secondary);
-      transform: translateY(-45%);
-    }
-  }
-
-  &.is-money {
-    justify-content: flex-end;
-    font-weight: 600;
-    color: var(--fms-text);
-  }
-
-  &.is-checkbox {
-    border: none;
-    background: transparent;
-    color: var(--fms-primary);
-    font-size: 13px;
-  }
-
-  &.is-textarea {
-    height: 34px;
-    align-items: flex-start;
-    padding-top: 6px;
-  }
-
-  &.is-desc {
-    border: 1px dashed var(--fms-border-strong, #c8d2dc);
-    background: transparent;
-    font-style: italic;
-  }
-}
-
-.mm-tdesign__row-op {
-  padding: 2px 10px;
-  border-radius: 4px;
-  background: color-mix(in srgb, var(--fms-primary) 10%, transparent);
-  color: var(--fms-primary);
-  font-size: 11px;
-  white-space: nowrap;
-}
-
-/* 列清单提示行 */
-.mm-tdesign__list-head {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-top: 2px;
-  padding: 0 2px;
-}
-
-.mm-tdesign__list-head-hint {
-  flex: 1;
-  min-width: 0;
-  color: var(--fms-text-placeholder, #9ca3af);
-  font-size: 11px;
-}
-
-/* 子表预览入口：打开真实表格效果弹窗（弹窗内可拖拽列宽） */
-.mm-tdesign__preview-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  flex: none;
-  height: 24px;
-  padding: 0 10px;
-  border: 1px solid var(--fms-border);
-  border-radius: var(--fms-control-radius, 5px);
-  background: var(--fms-card);
-  color: var(--fms-text-secondary);
-  font-size: 12px;
-  cursor: pointer;
-  transition:
-    background 0.15s,
-    color 0.15s,
-    border-color 0.15s;
-
-  &:hover:not(:disabled) {
-    border-color: var(--fms-primary);
-    color: var(--fms-primary);
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-}
-
-.mm-tdesign__col {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-height: 38px;
-  padding: 4px 8px;
-  border: 1px solid transparent; /* 默认不显示边框线 */
-  border-radius: 6px;
-  background: var(--fms-card);
-  cursor: grab;
-  user-select: none;
-  -webkit-user-select: none;
-  transition:
-    border-color 0.15s,
-    box-shadow 0.15s;
-
-  &: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-invisible {
-    opacity: 0.55;
-  }
-
-  .mm-fdesign__field-name {
-    flex: 0 1 auto;
-  }
-}
-
-/* 拖拽手柄：默认隐藏，hover / 选中时浮现；整卡本身可拖拽（cursor 提示保留在卡片上） */
-.mm-tdesign__drag-handle {
-  flex: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  color: var(--fms-text-secondary);
-  cursor: grab;
-  opacity: 0;
-  transition: opacity 0.15s;
-}
-
-.mm-tdesign__col {
-  cursor: grab;
-}
-
-.mm-tdesign__col:hover .mm-tdesign__drag-handle,
-.mm-tdesign__col.is-selected .mm-tdesign__drag-handle {
-  opacity: 0.7;
-}
-
-.mm-tdesign__col-meta {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  margin-left: auto;
-  flex: none;
-}
-
-.mm-tdesign__col-type {
-  padding: 0 6px;
-  border-radius: 4px;
-  background: var(--fms-secondary);
-  color: color-mix(in srgb, var(--fms-text-secondary) 65%, var(--fms-text));
-  font-size: 10px;
-  line-height: 16px;
-}
-
-.mm-tdesign__col-width {
-  color: color-mix(in srgb, var(--fms-text-secondary) 70%, var(--fms-text));
-  font-size: 11px;
-  font-variant-numeric: tabular-nums;
-}
-
-.mm-tdesign__col-del {
-  flex: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border: none;
-  border-radius: 5px;
-  background: transparent;
-  color: var(--fms-text-disabled, #9ca3af);
-  cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.15s;
-
-  &:hover {
-    background: #fdecec;
-    color: #d95757;
-  }
-}
-
-.mm-tdesign__col:hover .mm-tdesign__col-del,
-.mm-tdesign__col.is-selected .mm-tdesign__col-del {
-  opacity: 1;
-}
-
-.mm-tdesign__empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 56px;
-  color: var(--fms-text-secondary);
-  font-size: 11px;
-}
 </style>
 
 <!-- fallback 克隆（SortableJS 在 body 上生成的整卡克隆）不在 scoped 作用域内，需全局隐藏：
diff --git a/code/fms/fms-vue/src/views/system/module-management/components/ModuleListConfigPanel.vue b/code/fms/fms-vue/src/views/system/module-management/components/ModuleListConfigPanel.vue
index 389c772a..4a1ee6ad 100644
--- a/code/fms/fms-vue/src/views/system/module-management/components/ModuleListConfigPanel.vue
+++ b/code/fms/fms-vue/src/views/system/module-management/components/ModuleListConfigPanel.vue
@@ -6,7 +6,6 @@ import { computed, ref, shallowRef, watch } from 'vue'
 import Message from '@/components/ui/message/message-manager'
 import Button from '@/components/ui/button/button.vue'
 import FmsTable from '@/components/fms-table/FmsTable.vue'
-import FieldGroupManager from './FieldGroupManager.vue'
 
 const props = defineProps({
   moduleId: { type: String, required: true },
@@ -15,14 +14,12 @@ const props = defineProps({
   queryConfig: { type: Array, default: () => [] },
   fields: { type: Array, default: () => [] },
   groups: { type: Array, default: () => [] },
-  referencedGroupIds: { type: Array, default: () => [] },
   loading: { type: Boolean, default: false },
 })
 
-const emit = defineEmits(['update', 'groupsSaved', 'syncEdit', 'syncQuery'])
+const emit = defineEmits(['update', 'syncEdit', 'syncQuery'])
 
 const localList = ref([])
-const groupManagerVisible = ref(false)
 const activeKey = ref(null)
 
 watch(
@@ -139,9 +136,6 @@ const columns = shallowRef([
 <template>
   <div class="mm-panel">
     <div class="mm-panel__toolbar">
-      <Button type="outline" :disabled="loading" @click="groupManagerVisible = true">
-        分组管理
-      </Button>
       <Button type="outline" :disabled="loading || !editConfig.length" @click="syncToEdit">
         同步到编辑显示
       </Button>
@@ -162,13 +156,6 @@ const columns = shallowRef([
         @row-order-change="onRowOrderChange"
       />
     </div>
-    <FieldGroupManager
-      v-model:open="groupManagerVisible"
-      :module-id="moduleId"
-      :groups="groups"
-      :referenced-group-ids="referencedGroupIds"
-      @saved="(groups, idMapping) => emit('groupsSaved', groups, idMapping)"
-    />
   </div>
 </template>
 
diff --git a/code/fms/fms-vue/src/views/system/module-management/components/ModuleTableEditPanel.vue b/code/fms/fms-vue/src/views/system/module-management/components/ModuleTableEditPanel.vue
new file mode 100644
index 00000000..af9b27c7
--- /dev/null
+++ b/code/fms/fms-vue/src/views/system/module-management/components/ModuleTableEditPanel.vue
@@ -0,0 +1,3325 @@
+<script setup>
+/**
+ * 子表表格设计面板（s_field_edit，子表模式）。
+ * 与主表表单设计器（ModuleFormEditPanel.vue）相互独立。
+ * 提供「设计视图 / 数据视图」两种形态，共享同一份草稿数据：
+ * - 设计视图：字段库 | 列画布（表头分组分区）| 属性面板。列可添加、分组间拖拽换位、
+ *   调整列宽/必填/只读/禁用/显示等属性。
+ * - 数据视图：FmsTable 高密度编辑表格（行拖拽排序、同步到列表/查询配置）。
+ */
+import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
+import {
+  Trash2,
+  ArrowUp,
+  ArrowDown,
+  Asterisk,
+  Eye,
+  EyeOff,
+  GripVertical,
+  PanelLeftClose,
+  PanelLeftOpen,
+  PanelRightClose,
+  PanelRightOpen,
+  Check,
+  X,
+  Plus,
+  Pencil,
+} from '@lucide/vue'
+import draggable from 'vuedraggable'
+import Message from '@/components/ui/message/message-manager'
+import Button from '@/components/ui/button/button.vue'
+import Select from '@/components/ui/select/select.vue'
+import FmsTable from '@/components/fms-table/FmsTable.vue'
+import { createTempId } from '@/utils/tempId'
+
+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)
+
+/* ================= 设计工作区：属性面板折叠 ================= */
+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()
+}
+
+function renumberRows(rows) {
+  return rows.map((row, index) => ({ ...row, b_xh: (index + 1) * 10 }))
+}
+
+function groupIdOf(row) {
+  return row?.b_group_id == null ? null : String(row.b_group_id)
+}
+
+/* 逻辑行推导：与 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 = computed(() => {
+  const map = new Map()
+  for (const field of props.fields || []) {
+    map.set(String(field.b_id), field.b_name || field.b_field)
+  }
+  return map
+})
+
+const fieldMap = computed(() => {
+  const map = new Map()
+  for (const field of props.fields || []) {
+    map.set(String(field.b_id), field)
+  }
+  return map
+})
+
+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 = new Map()
+  for (const row of localEdit.value) {
+    if (row.b_field_id != null) {
+      visibleMap.set(String(row.b_field_id), Number(row.b_visible) === 1 ? 1 : 0)
+    }
+  }
+  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 = new Map()
+  for (const row of localEdit.value) {
+    if (row.b_field_id != null) {
+      visibleMap.set(String(row.b_field_id), Number(row.b_visible) === 1 ? 1 : 0)
+    }
+  }
+  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 tableDataColumns() {
+  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_width', title: '列宽(px)', width: 110, editor: {} },
+    { dataIndex: 'b_xh', title: '排序号', width: 90 },
+  ]
+}
+
+const dataColumns = computed(() => tableDataColumns())
+
+/* ================= 设计视图：字段/分组推导 ================= */
+const FIELD_TYPE_LABELS = {
+  input: '输入框',
+  textarea: '文本域',
+  number: '数字',
+  money: '金额',
+  date: '日期',
+  datetime: '日期时间',
+  checkbox: '复选框',
+  select: '下拉选择',
+}
+
+/* 子表常用列宽（px） */
+const COLUMN_WIDTH_OPTIONS = [
+  { label: '窄 90', value: '90' },
+  { label: '默认 120', value: '120' },
+  { label: '中 160', value: '160' },
+  { label: '宽 200', value: '200' },
+  { label: '大 240', value: '240' },
+]
+
+function spanOf(row) {
+  const v = Number(row?.b_colspan)
+  return v >= 1 && v <= 24 ? v : 24
+}
+
+function fieldOf(row) {
+  if (row?.b_field_id == null) return null
+  return fieldMap.value.get(String(row.b_field_id)) || null
+}
+
+function fieldName(row) {
+  const fid = row?.b_field_id
+  if (fid == null) return ''
+  return fieldNameMap.value.get(String(fid)) || String(fid)
+}
+
+function controlTypeLabel(row) {
+  const field = fieldOf(row)
+  return FIELD_TYPE_LABELS[field?.b_type] || field?.b_type || '未知'
+}
+
+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
+}
+
+/* ---- 表格（子表）模式：列宽 ---- */
+function widthOf(row) {
+  const v = Number(row?.b_width)
+  return v >= 40 && v <= 600 ? v : 120
+}
+
+function defaultWidthOf(field) {
+  const map = {
+    checkbox: 90,
+    number: 140,
+    money: 140,
+    date: 140,
+    datetime: 170,
+    select: 160,
+    textarea: 220,
+  }
+  return map[field?.b_type] || 140
+}
+
+function onWidthChange(value) {
+  const row = selectedRow.value
+  if (!row || props.loading) return
+  row.b_width = Math.min(600, Math.max(40, Number(value) || 120))
+  emitUpdate()
+}
+
+// 数字输入框逐键 input 只更新显示；
+// change（失焦/回车）提交一次，与原值不同才真正写入
+function onWidthCommit(event) {
+  const row = selectedRow.value
+  if (!row || props.loading) return
+  const value = Math.min(600, Math.max(40, Number(event.target.value) || 120))
+  if (value === widthOf(row)) return
+  row.b_width = value
+  emitUpdate()
+}
+
+function onWidthStep(delta) {
+  const row = selectedRow.value
+  if (!row || props.loading) return
+  onWidthChange(widthOf(row) + delta)
+}
+
+// 列宽下拉：当前值不在预设中时补充一个当前值选项
+const columnWidthOptions = computed(() => {
+  if (!selectedRow.value) return COLUMN_WIDTH_OPTIONS
+  const current = String(widthOf(selectedRow.value))
+  if (COLUMN_WIDTH_OPTIONS.some((o) => o.value === current)) return COLUMN_WIDTH_OPTIONS
+  return [...COLUMN_WIDTH_OPTIONS, { label: `当前 ${current}px`, value: current }]
+})
+
+/* ---- 列头菜单（WYSIWYG 表格：⋯ 按钮 / 右键） ---- */
+
+const libSearch = ref('')
+// 字段库：展示模块的全部字段（含未加入表单的字段），按名称 a-z 排序（无类型分组小标题）；
+// 搜索时按名称/编码过滤，命中才显示
+const libraryFields = computed(() => {
+  const kw = libSearch.value.trim().toLowerCase()
+  return [...(props.fields || [])]
+    .filter(
+      (f) =>
+        !kw ||
+        String(f.b_name || '').toLowerCase().includes(kw) ||
+        String(f.b_field || '').toLowerCase().includes(kw),
+    )
+    .sort((a, b) =>
+      String(a.b_name || a.b_field || '').localeCompare(String(b.b_name || b.b_field || ''), 'zh'),
+    )
+})
+
+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 })
+
+// 画布分区：按分组（b_xh 排序）+ 未分组兜底
+const canvasSections = computed(() => {
+  const sections = []
+  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)
+    sections.push({
+      key: `g-${gid}`,
+      // 标题留空则不渲染标题文字（分组仍作为布局分区）
+      title: (group.b_title || '').trim(),
+      group,
+      disabled: Number(group.b_canuse) !== 1,
+      rows: sectionRowCache[gid] || [],
+    })
+  }
+  if ((sectionRowCache[''] || []).length) {
+    sections.push({
+      key: 'ungrouped',
+      title: '未分组',
+      group: null,
+      rows: sectionRowCache[''],
+    })
+  }
+  return sections
+})
+
+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)
+  },
+  { immediate: true },
+)
+
+// 分组拖拽结束：按新顺序重排 groups 的 b_xh 并提交（未分组不参与，自动回到末尾）
+function onGroupDragEnd() {
+  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('')
+
+// 提交正在编辑的标题（若编辑目标已被切换/删除，直接丢弃草稿，避免基于旧分组提交）
+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 || ''
+}
+
+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
+}
+
+// 字段库 → 画布：已加入则定位选中，未加入则按目标位置插入。
+function createEditRow(field, groupId) {
+  return {
+    b_id: createTempId(),
+    b_module_id: props.moduleId,
+    b_field_id: String(field.b_id),
+    b_group_id: groupId || null,
+    b_visible: 1,
+    b_required: 0,
+    b_readonly: 0,
+    b_disabled: 0,
+    b_colspan: 24,
+    b_height: field.b_type === 'textarea' ? 120 : null,
+    b_placeholder: null,
+    b_width: defaultWidthOf(field),
+    b_xh: 0,
+  }
+}
+
+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
+  }
+
+  /* 子表列独立整行：无「并入本行」概念，一律按卡片上/下半判定插入位置（换位） */
+  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' }
+}
+
+/* 鼠标坐标命中的「行」（按卡片 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
+}
+
+/* 提交画布内拖拽：布局冻结模式下 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
+
+  // 子表列：简单重排（列独立整行，不参与 24 栅格均分）
+  const [m] = rows.splice(movedIdx, 1)
+  if (linePos && String(linePos.fieldId) !== rowId) {
+    const targetIdx = rows.findIndex((r) => String(r.b_field_id) === String(linePos.fieldId))
+    if (targetIdx < 0) {
+      rows.splice(movedIdx, 0, m) // 未命中：回原位（取消）
+      return
+    }
+    m.b_group_id = groupIdOf(rows[targetIdx]) // 跨组移动：跟随目标列分组
+    const before = linePos.pos === 'before' || linePos.pos === 'line-before'
+    rows.splice(before ? targetIdx : targetIdx + 1, 0, m)
+  } else if (overKey != null) {
+    const gid = overKey === 'ungrouped' ? null : overKey.slice(2)
+    m.b_group_id = gid
+    rows.splice(sectionEndIndex(rows, gid), 0, m)
+  } else {
+    rows.splice(movedIdx, 0, m) // 无意图：回原位（取消）
+    return
+  }
+  emitRows(renumberRows(rows))
+  cleanupSelectedRow()
+}
+
+/* 提交后清理失效的选中行 */
+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
+  row[key] = Number(row[key]) === 1 ? 0 : 1
+  emitUpdate()
+}
+
+function onLabelChip(row, key) {
+  selectRow(row)
+  toggleRowFlag(row, key)
+}
+
+/* 复制/粘贴：仅复制布局与状态属性（不含标识、排序号、分组），用于把某字段的配置套用到其它字段 */
+const clipboardProps = ref(null)
+
+function copyRowProps() {
+  const row = selectedRow.value
+  if (!row || props.loading) return
+  clipboardProps.value = {
+    name: fieldName(row),
+    props: {
+      b_colspan: spanOf(row),
+      b_required: Number(row.b_required) === 1 ? 1 : 0,
+      b_readonly: Number(row.b_readonly) === 1 ? 1 : 0,
+      b_disabled: Number(row.b_disabled) === 1 ? 1 : 0,
+      b_visible: Number(row.b_visible) === 1 ? 1 : 0,
+      b_placeholder: row.b_placeholder || null,
+      b_height: row.b_height == null ? null : Number(row.b_height) || null,
+    },
+  }
+}
+
+function pastePropsToSelected() {
+  const row = selectedRow.value
+  if (!row || props.loading || !clipboardProps.value) return
+  Object.assign(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) {
+      const before = linePos.pos === 'before' || linePos.pos === 'line-before'
+      row = createEditRow(field, groupIdOf(rows[targetIdx]))
+      rows.splice(before ? targetIdx : targetIdx + 1, 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))
+  nextTick(() => scrollToRowCard(String(row.b_id)))
+}
+
+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
+  row[key] = Number(row[key]) === 1 ? 0 : 1
+  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"
+          type="text"
+          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">
+            <div class="mm-edit__mode" role="group" aria-label="编辑方式">
+              <button
+                type="button"
+                class="mm-edit__mode-btn"
+                :class="{ 'is-active': (editMode || 'form') === 'form' }"
+                title="主表：以表单形式编辑"
+                :disabled="loading"
+                @click="onEditModeChange('form')"
+              >
+                主表表单
+              </button>
+              <button
+                type="button"
+                class="mm-edit__mode-btn"
+                :class="{ 'is-active': (editMode || 'form') === 'table' }"
+                title="子表：以表格形式编辑"
+                :disabled="loading"
+                @click="onEditModeChange('table')"
+              >
+                子表表格
+              </button>
+            </div>
+          </div>
+          <div class="mm-edit__head-center">
+            <div class="mm-edit__view-switch" role="tablist" aria-label="视图切换">
+              <button
+                type="button"
+                class="mm-edit__view-btn"
+                :class="{ 'is-active': viewMode === 'design' }"
+                data-view="design"
+                @click="switchView('design')"
+              >
+                设计
+              </button>
+              <button
+                type="button"
+                class="mm-edit__view-btn"
+                :class="{ 'is-active': viewMode === 'data' }"
+                data-view="data"
+                @click="switchView('data')"
+              >
+                数据
+              </button>
+            </div>
+          </div>
+          <div class="mm-edit__head-right">
+            <Button type="outline" :disabled="loading" @click="addGroup">
+              <Plus :size="14" /> 添加分组
+            </Button>
+            <div class="mm-edit__help">
+              <span class="mm-edit__help-icon" aria-hidden="true">?</span>
+              <div class="mm-edit__help-pop">
+                <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>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      <!-- ================= 子表设计：列画布 ================= -->
+      <div
+        class="mm-fdesign__canvas-wrap"
+        :class="{ 'is-drag-active': dragPayload }"
+      >
+        <div class="mm-fdesign__canvas">
+          <div class="mm-tdesign__sheet">
+            <!-- 列清单（纵向列卡片：设计主操作区） -->
+            <!-- 纵向列卡片列表（按表头分组分区展示，宽度永远够） -->
+            <div v-if="!canvasSections.length" class="mm-tdesign__empty">暂无内容</div>
+            <draggable
+              v-else
+              v-model="sectionOrder"
+              handle=".mm-fdesign__section-grip"
+              item-key="key"
+              :animation="150"
+              ghost-class="mm-fdesign__section-ghost"
+              :fallback-on-body="true"
+              :force-fallback="true"
+              fallback-class="mm-fdesign__drag-fallback"
+              @end="onGroupDragEnd"
+            >
+              <template #item="{ element: section }">
+                <div
+                  class="mm-tdesign__section"
+                  :class="{ 'is-ungrouped': section.key === 'ungrouped' }"
+                  :data-section-key="section.key"
+                >
+                  <div class="mm-tdesign__section-title">
+                    <button
+                      v-if="section.group && editingGroupKey !== section.key"
+                      type="button"
+                      class="mm-fdesign__section-grip"
+                      title="拖动调整分组顺序"
+                      aria-label="拖动调整分组顺序"
+                    >
+                      <GripVertical :size="13" />
+                    </button>
+                    <template v-if="editingGroupKey === section.key">
+                  <input
+                    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="button"
+                      class="mm-fdesign__section-edit-btn"
+                      title="确认"
+                      aria-label="确认修改分组名"
+                      @mousedown.prevent="commitEditGroupTitle(section)"
+                    >
+                      <Check :size="13" />
+                    </button>
+                    <button
+                      type="button"
+                      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">
+                    <span class="mm-edit__section-count">{{ section.rows.length }} 列</span>
+                    <button
+                      v-if="section.group"
+                      type="button"
+                      class="mm-fdesign__section-btn"
+                      title="修改分组标题"
+                      aria-label="修改分组标题"
+                      @click.stop="startEditGroupTitle(section)"
+                    >
+                      <Pencil :size="13" />
+                    </button>
+                    <button
+                      v-if="section.group"
+                      type="button"
+                      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="columnGridGroup"
+                  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="'.mm-fdesign__field-toolbar, 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 24' }"
+                      @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-tdesign__col-meta">
+                          <span class="mm-tdesign__col-type">{{ controlTypeLabel(row) }}</span>
+                          <span class="mm-tdesign__col-width">{{ widthOf(row) }}px</span>
+                        </span>
+                        <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>
+                        <i v-if="Number(row.b_visible) !== 1" class="mm-fdesign__invisible-mark"
+                          >隐藏</i
+                        >
+                      </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
+                        v-if="selectedRowKey === String(row.b_id)"
+                        class="mm-fdesign__field-toolbar"
+                      >
+                        <button
+                          type="button"
+                          class="mm-fdesign__tool-btn"
+                          data-action="move-up"
+                          title="上移"
+                          aria-label="上移"
+                          @click.stop="moveSelectedRow(-1)"
+                        >
+                          <ArrowUp :size="13" />
+                        </button>
+                        <button
+                          type="button"
+                          class="mm-fdesign__tool-btn"
+                          data-action="move-down"
+                          title="下移"
+                          aria-label="下移"
+                          @click.stop="moveSelectedRow(1)"
+                        >
+                          <ArrowDown :size="13" />
+                        </button>
+                        <button
+                          type="button"
+                          class="mm-fdesign__tool-btn is-danger"
+                          data-action="delete"
+                          title="删除列"
+                          aria-label="删除列"
+                          @click.stop="removeRow(row)"
+                        >
+                          <Trash2 :size="13" />
+                        </button>
+                      </div>
+                    </div>
+                  </template>
+                  <template #footer>
+                    <div v-if="!section.rows.length" class="mm-fdesign__grid-empty">暂无内容</div>
+                  </template>
+                </draggable>
+              </div>
+            </div>
+              </template>
+            </draggable>
+          </div>
+        </div>
+      </div>
+      </div>
+
+      <!-- ================= 子表设计：属性面板 ================= -->
+      <aside
+        class="mm-fdesign__inspector"
+        :class="{ 'is-collapsed': inspectorCollapsed }"
+        aria-label="属性面板"
+      >
+        <button
+          v-if="inspectorCollapsed"
+          type="button"
+          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="button"
+              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">
+            <label for="mm-tdesign-width">列宽 (px)</label>
+            <div class="mm-fdesign__span-control">
+              <Select
+                id="mm-tdesign-width"
+                :model-value="String(widthOf(selectedRow))"
+                :disabled="loading"
+                :options="columnWidthOptions"
+                @update:model-value="onWidthChange"
+              />
+              <button
+                type="button"
+                class="mm-fdesign__step"
+                :disabled="loading || widthOf(selectedRow) <= 40"
+                aria-label="列宽减 10"
+                @click="onWidthStep(-10)"
+              >
+                −
+              </button>
+              <input
+                type="number"
+                min="40"
+                max="600"
+                :value="widthOf(selectedRow)"
+                :disabled="loading"
+                aria-label="自定义列宽"
+                @change="onWidthCommit"
+              />
+              <button
+                type="button"
+                class="mm-fdesign__step"
+                :disabled="loading || widthOf(selectedRow) >= 600"
+                aria-label="列宽加 10"
+                @click="onWidthStep(10)"
+              >
+                +
+              </button>
+            </div>
+          </div>
+          <div class="mm-fdesign__prop-group">状态</div>
+          <div class="mm-fdesign__toggles">
+            <div class="mm-fdesign__toggle-line">
+              <span>必填</span>
+              <button
+                type="button"
+                class="mm-fdesign__toggle"
+                :class="{ 'is-on': Number(selectedRow.b_required) === 1 }"
+                :aria-pressed="Number(selectedRow.b_required) === 1"
+                :disabled="loading"
+                @click="toggleInspector('b_required')"
+              ></button>
+            </div>
+            <div class="mm-fdesign__toggle-line">
+              <span>只读</span>
+              <button
+                type="button"
+                class="mm-fdesign__toggle"
+                :class="{ 'is-on': Number(selectedRow.b_readonly) === 1 }"
+                :aria-pressed="Number(selectedRow.b_readonly) === 1"
+                :disabled="loading"
+                @click="toggleInspector('b_readonly')"
+              ></button>
+            </div>
+            <div class="mm-fdesign__toggle-line">
+              <span>禁用</span>
+              <button
+                type="button"
+                class="mm-fdesign__toggle"
+                :class="{ 'is-on': Number(selectedRow.b_disabled) === 1 }"
+                :aria-pressed="Number(selectedRow.b_disabled) === 1"
+                :disabled="loading"
+                @click="toggleInspector('b_disabled')"
+              ></button>
+            </div>
+            <div class="mm-fdesign__toggle-line">
+              <span>显示</span>
+              <button
+                type="button"
+                class="mm-fdesign__toggle"
+                :class="{ 'is-on': Number(selectedRow.b_visible) === 1 }"
+                :aria-pressed="Number(selectedRow.b_visible) === 1"
+                :disabled="loading"
+                @click="toggleInspector('b_visible')"
+              ></button>
+            </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>
+  </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;
+}
+
+.mm-edit__mode {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 3px;
+  border: 1px solid var(--fms-border);
+  border-radius: var(--fms-control-radius);
+  background: var(--fms-secondary);
+}
+
+/* 编辑方式分段按钮（主表表单 / 子表表格） */
+.mm-edit__mode-btn {
+  height: 26px;
+  padding: 0 12px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--fms-text-secondary);
+  font-size: 12px;
+  white-space: nowrap;
+  cursor: pointer;
+
+  &.is-active {
+    background: var(--fms-card);
+    color: var(--fms-text);
+    font-weight: 600;
+    box-shadow: 0 1px 3px rgba(30, 45, 64, 0.12);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.mm-edit__view-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 3px;
+  border: 1px solid var(--fms-border);
+  border-radius: var(--fms-control-radius);
+  background: var(--fms-secondary);
+}
+
+.mm-edit__view-btn {
+  height: 26px;
+  padding: 0 12px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--fms-text-secondary);
+  font-size: 12px;
+  cursor: pointer;
+
+  &.is-active {
+    background: var(--fms-card);
+    color: var(--fms-text);
+    font-weight: 600;
+    box-shadow: 0 1px 3px rgba(30, 45, 64, 0.12);
+  }
+}
+
+/* ---- 快捷键帮助（右上角 ? 图标，hover 展示） ---- */
+.mm-edit__help {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  align-self: center;
+
+  &:hover .mm-edit__help-pop,
+  &:focus-within .mm-edit__help-pop {
+    display: block;
+  }
+}
+
+.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-pop {
+  display: none;
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 50;
+  width: 230px;
+  padding: 10px 12px;
+  border: 1px solid var(--fms-border);
+  border-radius: 8px;
+  background: var(--fms-card);
+  box-shadow: 0 6px 20px rgba(30, 45, 64, 0.14);
+}
+
+.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;
+}
+
+/* 折叠后的展开按钮：占满折叠列，图标置于顶部 */
+.mm-fdesign__panel-expand {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding-top: 10px;
+  border: none;
+  background: transparent;
+  color: color-mix(in srgb, var(--fms-text-secondary) 70%, var(--fms-text));
+  cursor: pointer;
+
+  &:hover {
+    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;
+}
+
+/* 面板头部折叠按钮 */
+.mm-fdesign__collapse {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: color-mix(in srgb, var(--fms-text-secondary) 70%, var(--fms-text));
+  cursor: pointer;
+  transition:
+    background 0.15s,
+    color 0.15s;
+
+  &:hover {
+    background: var(--fms-secondary);
+    color: var(--fms-text);
+  }
+}
+
+.mm-fdesign__lib-search {
+  width: 100%;
+  height: 26px;
+  padding: 0 8px;
+  border: 1px solid var(--fms-border);
+  border-radius: 4px;
+  color: var(--fms-text);
+  background: var(--fms-card);
+  font-size: 11px;
+  margin-bottom: 10px;
+  outline: none;
+
+  &::placeholder {
+    color: var(--fms-text-placeholder, #9ca3af);
+  }
+
+  &:focus {
+    border-color: var(--fms-primary);
+    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--fms-primary) 25%, transparent);
+  }
+}
+
+.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,
+.mm-tdesign__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;
+  }
+
+  /* 未分组伪分区：虚线框 + 白底（与其他分组一致，不做特殊处理） */
+  &.is-ungrouped {
+    border-style: dashed;
+    background: var(--fms-card);
+  }
+}
+
+/* 分组标题行（主表 / 子表统一）：白底 header 条，与卡片圆角裁剪 */
+.mm-fdesign__section-title,
+.mm-tdesign__section-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 12px;
+  border-bottom: 1px solid var(--fms-border);
+  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 {
+  flex: 0 1 200px;
+  min-width: 120px;
+  height: 24px;
+  padding: 0 6px;
+  border: 1px solid var(--fms-primary);
+  border-radius: 4px;
+  background: var(--fms-card);
+  color: var(--fms-text);
+  font-size: 12px;
+  font-family: inherit;
+  outline: none;
+  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 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 1px solid var(--fms-border);
+  border-radius: 4px;
+  background: var(--fms-card);
+  color: var(--fms-text-secondary);
+  cursor: pointer;
+
+  &:hover {
+    border-color: var(--fms-primary);
+    color: var(--fms-primary);
+  }
+
+  &:last-child:hover {
+    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;
+}
+
+/* 拖拽中：隐藏卡片上的操作按钮（上移/下移/删除），避免干扰拖拽焦点 */
+.mm-fdesign__canvas-wrap.is-drag-active .mm-fdesign__field-toolbar {
+  display: none;
+}
+
+/* ---- 画布字段：所见即所得的真实控件（默认无背景无边框，直接排在白纸上；
+ * 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; /* 纯预览，点击穿透到卡片 */
+}
+
+/* 选中悬浮工具栏 */
+.mm-fdesign__field-toolbar {
+  position: absolute;
+  top: -11px;
+  right: 6px;
+  display: inline-flex;
+  align-items: center;
+  gap: 1px;
+  padding: 2px;
+  border-radius: 5px;
+  border: 1px solid var(--fms-border);
+  background: var(--fms-card);
+  box-shadow: 0 1px 4px rgba(39, 54, 70, 0.12);
+}
+
+.mm-fdesign__tool-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  border-radius: 3px;
+  background: transparent;
+  color: var(--fms-text-secondary);
+  cursor: pointer;
+
+  &:hover {
+    background: var(--fms-secondary);
+    color: var(--fms-text);
+  }
+
+  /* 配对按钮激活（已选中第一个字段） */
+  &.is-active {
+    background: color-mix(in srgb, var(--fms-primary) 16%, transparent);
+    color: var(--fms-primary);
+  }
+
+  &.is-danger:hover {
+    color: #d95757;
+  }
+}
+
+.mm-fdesign__required {
+  color: #d95757;
+  font-style: normal;
+  margin-left: 2px;
+}
+
+/* 隐藏字段角标：默认隐藏，hover / 选中时浮现（隐藏卡片本身已整体降透明度） */
+.mm-fdesign__invisible-mark {
+  margin-left: auto;
+  padding: 0 5px;
+  border-radius: 4px;
+  background: var(--fms-secondary);
+  color: color-mix(in srgb, var(--fms-text-secondary) 65%, var(--fms-text));
+  font-size: 10px;
+  font-style: normal;
+  line-height: 16px;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.mm-fdesign__field:hover .mm-fdesign__invisible-mark,
+.mm-fdesign__field.is-selected .mm-fdesign__invisible-mark,
+.mm-fdesign__field.is-invisible .mm-fdesign__invisible-mark,
+.mm-tdesign__col:hover .mm-fdesign__invisible-mark,
+.mm-tdesign__col.is-selected .mm-fdesign__invisible-mark,
+.mm-tdesign__col.is-invisible .mm-fdesign__invisible-mark {
+  opacity: 1;
+}
+
+/* 幽灵占位：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;
+  }
+
+  input[type='number'] {
+    flex: none;
+    width: 48px;
+    height: 26px;
+    padding: 0 4px;
+    border: 1px solid var(--fms-border);
+    border-radius: 4px;
+    background: var(--fms-card);
+    color: var(--fms-text);
+    font-size: 11px;
+    text-align: center;
+    outline: none;
+
+    &:focus {
+      border-color: var(--fms-primary);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+    }
+  }
+}
+
+/* 栅格宽度：去掉下拉后数字输入框即主控件，填充剩余宽度（列宽控件仍用下拉，不受影响） */
+.mm-fdesign__span-control input#mm-fdesign-colspan {
+  flex: 1;
+  width: auto;
+  min-width: 0;
+  padding: 0 8px;
+  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;
+}
+
+.mm-fdesign__prop-input {
+  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;
+  outline: none;
+
+  &:focus {
+    border-color: var(--fms-primary);
+    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--fms-primary) 20%, transparent);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+}
+
+.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__toggle {
+  width: 30px;
+  height: 16px;
+  padding: 2px;
+  border: none;
+  border-radius: 999px;
+  background: #bdc7d2;
+  cursor: pointer;
+  transition: background-color 0.16s ease;
+
+  &::after {
+    content: '';
+    display: block;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: #fff;
+    transition: transform 0.16s ease;
+  }
+
+  &.is-on {
+    background: var(--fms-primary);
+
+    &::after {
+      transform: translateX(14px);
+    }
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.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-edit__section-count {
+  color: var(--fms-text-secondary);
+  font-size: 11px;
+  font-weight: 400;
+  font-variant-numeric: tabular-nums;
+}
+
+/* 画布分组删除按钮（标题行右侧）：图标常驻显示 */
+.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-btn {
+  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: var(--fms-secondary-hover, #f1f5f9);
+    color: var(--fms-text);
+    border-color: var(--fms-border);
+  }
+}
+
+/* 分组标题为空时的占位：灰色「空」，点击可设置标题 */
+.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;
+  }
+}
+
+/* 分组卡片拖拽占位 */
+.mm-fdesign__section-ghost {
+  opacity: 0.4;
+}
+
+/* 分组级左右布局：标题在左（竖排），字段画布在右；仅影响单个分组 */
+.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;
+  }
+}
+
+/* ---- 卡片标签行快捷开关（必填 / 显示）----
+   默认隐藏，仅在卡片 hover 或选中时浮现，降低常驻视觉噪音；
+   图标灰色=未开启，主题色=开启 */
+.mm-fdesign__label-chips {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  margin-left: 4px;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.mm-fdesign__field:hover .mm-fdesign__label-chips,
+.mm-fdesign__field.is-selected .mm-fdesign__label-chips,
+.mm-tdesign__col:hover .mm-fdesign__label-chips,
+.mm-tdesign__col.is-selected .mm-fdesign__label-chips {
+  opacity: 1;
+}
+
+.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;
+  }
+}
+
+/* ---- 表格（子表）设计：列画布（透明，白色分组卡片直接浮于灰底） ---- */
+.mm-tdesign__sheet {
+  position: relative;
+  min-height: 120px;
+}
+
+.mm-tdesign__col {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 38px;
+  padding: 4px 8px;
+  border: 1px solid transparent; /* 默认不显示边框线 */
+  border-radius: 6px;
+  background: var(--fms-card);
+  cursor: grab;
+  user-select: none;
+  -webkit-user-select: none;
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s;
+
+  &: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-invisible {
+    opacity: 0.55;
+  }
+
+  .mm-fdesign__field-name {
+    flex: 0 1 auto;
+  }
+}
+
+/* 拖拽手柄：默认隐藏，hover / 选中时浮现；整卡本身可拖拽（cursor 提示保留在卡片上） */
+.mm-tdesign__drag-handle {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  color: var(--fms-text-secondary);
+  cursor: grab;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.mm-tdesign__col {
+  cursor: grab;
+}
+
+.mm-tdesign__col:hover .mm-tdesign__drag-handle,
+.mm-tdesign__col.is-selected .mm-tdesign__drag-handle {
+  opacity: 0.7;
+}
+
+.mm-tdesign__col-meta {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+  flex: none;
+}
+
+.mm-tdesign__col-type {
+  padding: 0 6px;
+  border-radius: 4px;
+  background: var(--fms-secondary);
+  color: color-mix(in srgb, var(--fms-text-secondary) 65%, var(--fms-text));
+  font-size: 10px;
+  line-height: 16px;
+}
+
+.mm-tdesign__col-width {
+  color: color-mix(in srgb, var(--fms-text-secondary) 70%, var(--fms-text));
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+}
+
+.mm-tdesign__col-del {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--fms-text-disabled, #9ca3af);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s;
+
+  &:hover {
+    background: #fdecec;
+    color: #d95757;
+  }
+}
+
+.mm-tdesign__col:hover .mm-tdesign__col-del,
+.mm-tdesign__col.is-selected .mm-tdesign__col-del {
+  opacity: 1;
+}
+
+.mm-tdesign__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 56px;
+  color: var(--fms-text-secondary);
+  font-size: 11px;
+}
+</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;
+}
+</style>
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 a887a745..6e52c607 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
@@ -48,7 +48,8 @@ import { buildModuleI18nKey, buildModuleItemI18nKey, syncModuleItemI18nKeys } fr
 import ModuleBasicPanel from './components/ModuleBasicPanel.vue'
 import ModuleFieldsPanel from './components/ModuleFieldsPanel.vue'
 import ModuleListConfigPanel from './components/ModuleListConfigPanel.vue'
-import ModuleEditConfigPanel from './components/ModuleEditConfigPanel.vue'
+import ModuleFormEditPanel from './components/ModuleFormEditPanel.vue'
+import ModuleTableEditPanel from './components/ModuleTableEditPanel.vue'
 import ModuleQueryConfigPanel from './components/ModuleQueryConfigPanel.vue'
 import ModuleAutoCodePanel from './components/ModuleAutoCodePanel.vue'
 import ModulePowersPanel from './components/ModulePowersPanel.vue'
@@ -629,16 +630,6 @@ function onAutoCodeUpdate(rows) {
   }
 }
 
-function onGroupsSaved(newGroups, idMapping) {
-  if (!drafts.value) return
-  if (idMapping && idMapping.size) {
-    remapForeignKeys(drafts.value.listConfig || [], ['b_group_id'], idMapping)
-    remapForeignKeys(drafts.value.editConfig || [], ['b_group_id'], idMapping)
-  }
-  drafts.value.groups = cloneData(newGroups)
-  originals.value.groups = cloneData(newGroups)
-}
-
 function onModuleI18nSaved() {
   i18nPanelRef.value?.refreshKey?.()
 }
@@ -679,7 +670,7 @@ function onModuleNewClick({ key }) {
 
 /* ================= 右侧分组配置导航 ================= */
 // 配置导航分组：概览 / 数据结构 / 界面配置 / 业务能力 / 高级设置。
-// 每个导航项唯一激活（activeSection）；「分组管理」点击时同时打开分组管理弹窗。
+// 每个导航项唯一激活（activeSection）。
 const configGroups = computed(() => {
   const groups = []
   groups.push({
@@ -753,17 +744,6 @@ const configNavItems = computed(() =>
   configGroups.value.flatMap((group) => group.items.map((item) => ({ ...item }))),
 )
 
-const referencedGroupIds = computed(() => {
-  const ids = new Set()
-  for (const row of drafts.value?.listConfig || []) {
-    if (row.b_group_id != null) ids.add(String(row.b_group_id))
-  }
-  for (const row of drafts.value?.editConfig || []) {
-    if (row.b_group_id != null) ids.add(String(row.b_group_id))
-  }
-  return Array.from(ids)
-})
-
 // 编辑方式（form 主表表单 / table 子表表格）决定「表单设计」面板的形态与导航标签
 const editMode = computed(() => drafts.value?.module?.b_edit_mode || 'form')
 const editNavLabel = computed(() => (editMode.value === 'table' ? '表格设计' : '表单设计'))
@@ -915,6 +895,9 @@ async function saveModule() {
       ['s_autocode', 'autoCode'],
       ['s_power', 'powers'],
     ]
+    // 收集字段/分组的临时 id → 真实 id 映射，用于跨表外键重映射
+    const fieldIdMap = new Map()
+    const groupIdMap = new Map()
     for (const [table, section] of subTables) {
       const current = drafts.value[section] || []
       const previous = originals.value?.[section] || []
@@ -927,11 +910,25 @@ async function saveModule() {
       }
       const req = tableChange(table, changes)
       if (hasChanges(req)) {
-        await allocateTemporaryIds([req.inserts || [], req.updates || []])
+        const mapping = await allocateTemporaryIds([req.inserts || [], req.updates || []])
+        if (table === 's_field') mapping.forEach((v, k) => fieldIdMap.set(k, v))
+        if (table === 's_field_group') mapping.forEach((v, k) => groupIdMap.set(k, v))
         saveReqs.push(req)
       }
     }
 
+    // 统一重映射跨表外键：列表/编辑/查询配置中引用字段、分组的临时 id 换成真实 id
+    if (fieldIdMap.size) {
+      for (const section of ['listConfig', 'editConfig', 'queryConfig']) {
+        remapForeignKeys(drafts.value[section] || [], ['b_field_id'], fieldIdMap)
+      }
+    }
+    if (groupIdMap.size) {
+      for (const section of ['listConfig', 'editConfig', 'queryConfig']) {
+        remapForeignKeys(drafts.value[section] || [], ['b_group_id'], groupIdMap)
+      }
+    }
+
     const i18nPanel = i18nPanelRef.value
     if (i18nPanel && typeof i18nPanel.reconcileManagedRows === 'function') {
       i18nPanel.reconcileManagedRows(finalI18nItems.value)
@@ -1098,24 +1095,41 @@ loadModuleTree()
                     :query-config="drafts?.queryConfig"
                     :fields="drafts?.fields"
                     :groups="drafts?.groups"
-                    :referenced-group-ids="referencedGroupIds"
                     :loading="busy"
                     @update="(v) => onModuleUpdate('listConfig', v)"
-                    @groups-saved="onGroupsSaved"
                     @sync-edit="(v) => onModuleUpdate('editConfig', v)"
                     @sync-query="(v) => onModuleUpdate('queryConfig', v)"
                   />
                 </div>
 
                 <div v-if="isDataModule" v-show="activeSection === 'edit'" class="mm-config-pane">
-                  <ModuleEditConfigPanel
+                  <ModuleTableEditPanel
+                    v-if="editMode === 'table'"
+                    :module-id="String(selectedModule.b_id)"
+                    :edit-config="drafts?.editConfig"
+                    :list-config="drafts?.listConfig"
+                    :query-config="drafts?.queryConfig"
+                    :fields="drafts?.fields"
+                    :groups="drafts?.groups"
+                    :edit-mode="editMode"
+                    :active="activeSection === 'edit'"
+                    :loading="busy"
+                    @update="(v) => onModuleUpdate('editConfig', v)"
+                    @update:edit-mode="
+                      (v) => onModuleUpdate('module', { ...(drafts?.module || {}), b_edit_mode: v })
+                    "
+                    @update-groups="(v) => onModuleUpdate('groups', v)"
+                    @sync-list="(v) => onModuleUpdate('listConfig', v)"
+                    @sync-query="(v) => onModuleUpdate('queryConfig', v)"
+                  />
+                  <ModuleFormEditPanel
+                    v-else
                     :module-id="String(selectedModule.b_id)"
                     :edit-config="drafts?.editConfig"
                     :list-config="drafts?.listConfig"
                     :query-config="drafts?.queryConfig"
                     :fields="drafts?.fields"
                     :groups="drafts?.groups"
-                    :referenced-group-ids="referencedGroupIds"
                     :edit-mode="editMode"
                     :active="activeSection === 'edit'"
                     :loading="busy"
@@ -1124,7 +1138,6 @@ loadModuleTree()
                       (v) => onModuleUpdate('module', { ...(drafts?.module || {}), b_edit_mode: v })
                     "
                     @update-groups="(v) => onModuleUpdate('groups', v)"
-                    @groups-saved="onGroupsSaved"
                     @sync-list="(v) => onModuleUpdate('listConfig', v)"
                     @sync-query="(v) => onModuleUpdate('queryConfig', v)"
                   />
@@ -1419,11 +1432,16 @@ loadModuleTree()
   min-height: 0;
 }
 
-/* ---- 配置导航：横向 Tab 导航（line 类型，不作内部覆盖，组件默认样式即可） ---- */
+/* ---- 配置导航：横向 Tab 导航（line 类型） ---- */
 .mm-config-nav.tabs {
   flex: none;
 }
 
+/* 页签高度（42px）：仅作用于本页 tab 项，不改变组件内部样式，也不影响按钮 */
+.mm-config-nav.tabs :deep(.tabs-tab) {
+  height: 42px;
+}
+
 /* 标签内布局：图标 + 文字 + badge */
 .mm-config-nav__icon {
   flex: none;