From 7421019ef24dfbf77fd568934f8b1d9dfbdc0c86 Mon Sep 17 00:00:00 2001
From: oneao <hi_itao@163.com>
Date: Mon, 24 Aug 2026 22:54:22 +0800
Subject: [PATCH] 20260824225422

---
 .../migrations/100_initialize_fms_new.sql     |    3 +
 .../migrations/102_add_module_edit_mode.sql   |   45 +
 .../components/ModuleBasicPanel.vue           |   24 +-
 .../components/ModuleEditConfigPanel.vue      | 1761 ++++++++++++++---
 .../views/system/module-management/index.vue  |   11 +-
 .../tests/views/module-management.spec.js     |  767 ++++++-
 6 files changed, 2210 insertions(+), 401 deletions(-)
 create mode 100644 code/fms/fms-api/config/migrations/102_add_module_edit_mode.sql

diff --git a/code/fms/fms-api/config/migrations/100_initialize_fms_new.sql b/code/fms/fms-api/config/migrations/100_initialize_fms_new.sql
index f9a98b68..4813c15c 100644
--- a/code/fms/fms-api/config/migrations/100_initialize_fms_new.sql
+++ b/code/fms/fms-api/config/migrations/100_initialize_fms_new.sql
@@ -67,6 +67,7 @@ BEGIN
         b_keyfield varchar(50) NULL,
         b_orderfield varchar(500) NULL,
         b_delete_policy varchar(20) NULL,
+        b_edit_mode varchar(10) NULL,
         b_canuse int NOT NULL CONSTRAINT DF_s_module_canuse DEFAULT (1),
         b_xh int NOT NULL CONSTRAINT DF_s_module_xh DEFAULT (0),
         b_bz nvarchar(1000) NULL,
@@ -78,6 +79,7 @@ BEGIN
         CONSTRAINT UQ_s_module_code UNIQUE (b_code),
         CONSTRAINT CK_s_module_type CHECK (b_module_type IN ('category','data','query')),
         CONSTRAINT CK_s_module_delete_policy CHECK (b_delete_policy IS NULL OR b_delete_policy IN ('restrict','lifecycle','hard')),
+        CONSTRAINT CK_s_module_edit_mode CHECK (b_edit_mode IS NULL OR b_edit_mode IN ('form','table')),
         CONSTRAINT CK_s_module_config CHECK (
             (b_module_type = 'category' AND b_viewtable IS NULL AND b_savetable IS NULL AND b_keyfield IS NULL AND b_orderfield IS NULL AND b_delete_policy IS NULL)
             OR (b_module_type = 'data' AND b_viewtable IS NOT NULL AND b_savetable IS NOT NULL AND b_keyfield IS NOT NULL AND b_delete_policy IS NOT NULL)
@@ -172,6 +174,7 @@ BEGIN
         b_colspan int NOT NULL CONSTRAINT DF_s_field_edit_colspan DEFAULT (12),
         b_height int NULL,
         b_placeholder nvarchar(200) NULL,
+        b_width int NULL,
         b_xh int NOT NULL CONSTRAINT DF_s_field_edit_xh DEFAULT (0),
         CONSTRAINT PK_s_field_edit PRIMARY KEY (b_id),
         CONSTRAINT UQ_s_field_edit_field UNIQUE (b_module_id, b_field_id),
diff --git a/code/fms/fms-api/config/migrations/102_add_module_edit_mode.sql b/code/fms/fms-api/config/migrations/102_add_module_edit_mode.sql
new file mode 100644
index 00000000..4a431db9
--- /dev/null
+++ b/code/fms/fms-api/config/migrations/102_add_module_edit_mode.sql
@@ -0,0 +1,45 @@
+/*
+  支持模块「编辑方式」：
+  1. s_module.b_edit_mode —— 数据模块的编辑形态：
+     form  （主表）：单条记录以表单形式编辑（配合 s_field_edit 的分组 / 栅格 / 占位符设计）
+     table （子表）：作为子表以可编辑表格（grid）编辑（配合 s_field_edit 的列顺序 / 列宽设计）
+     每个 data 模块只能存在一种编辑方式，默认 form。
+  2. s_field_edit.b_width —— 子表（表格）模式下列的宽度（px），仅表格编辑方式使用。
+  可重复执行：列与约束均通过存在性判断避免重复。
+*/
+SET NOCOUNT ON;
+
+-- 1. s_module.b_edit_mode
+IF NOT EXISTS (
+    SELECT 1
+    FROM sys.columns
+    WHERE object_id = OBJECT_ID(N'dbo.s_module')
+      AND name = N'b_edit_mode'
+)
+BEGIN
+    ALTER TABLE dbo.s_module
+        ADD b_edit_mode varchar(10) NULL;
+END;
+
+IF NOT EXISTS (
+    SELECT 1
+    FROM sys.check_constraints
+    WHERE parent_object_id = OBJECT_ID(N'dbo.s_module')
+      AND name = N'CK_s_module_edit_mode'
+)
+BEGIN
+    ALTER TABLE dbo.s_module
+        ADD CONSTRAINT CK_s_module_edit_mode CHECK (b_edit_mode IS NULL OR b_edit_mode IN ('form', 'table'));
+END;
+
+-- 2. s_field_edit.b_width
+IF NOT EXISTS (
+    SELECT 1
+    FROM sys.columns
+    WHERE object_id = OBJECT_ID(N'dbo.s_field_edit')
+      AND name = N'b_width'
+)
+BEGIN
+    ALTER TABLE dbo.s_field_edit
+        ADD b_width int NULL;
+END;
diff --git a/code/fms/fms-vue/src/views/system/module-management/components/ModuleBasicPanel.vue b/code/fms/fms-vue/src/views/system/module-management/components/ModuleBasicPanel.vue
index dcc2560d..e9572a66 100644
--- a/code/fms/fms-vue/src/views/system/module-management/components/ModuleBasicPanel.vue
+++ b/code/fms/fms-vue/src/views/system/module-management/components/ModuleBasicPanel.vue
@@ -119,10 +119,21 @@ function onI18nSaved(key) {
 
 <template>
   <div v-if="formData" class="mm-basic">
-    <Form ref="formRef" :model="formData" :rules="formRules" layout="vertical" :columns="3" max-width="720px">
+    <Form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      layout="vertical"
+      :columns="3"
+      max-width="720px"
+    >
       <div class="mm-basic__section-title">标识与归属</div>
       <FormItem :label="isCategory ? '分类编码' : '模块编码'" name="b_code" required>
-        <Input :model-value="formData.b_code" :disabled="loading" @update:model-value="onCodeInput" />
+        <Input
+          :model-value="formData.b_code"
+          :disabled="loading"
+          @update:model-value="onCodeInput"
+        />
       </FormItem>
       <FormItem label="模块名称" name="b_name" required>
         <Input
@@ -265,6 +276,15 @@ function onI18nSaved(key) {
   }
 }
 
+/* 编辑方式等字段的说明文字 */
+.mm-basic__hint {
+  grid-column: 1 / -1;
+  margin: -4px 0 8px;
+  color: var(--fms-text-secondary);
+  font-size: 12px;
+  line-height: 1.6;
+}
+
 .mm-basic__i18n-btn {
   flex: none;
   display: inline-flex;
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/ModuleEditConfigPanel.vue
index 6bd1c347..b4250393 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/ModuleEditConfigPanel.vue
@@ -6,32 +6,23 @@
  *   支持 24 栅格、动态栅格分配、textarea 高度、分组方向和删除草稿项。
  * - 数据视图：保留原有 FmsTable 高密度编辑表格（行拖拽排序、同步到列表/查询配置）。
  */
-import {
-  computed,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  reactive,
-  ref,
-  shallowRef,
-  watch,
-} from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
 import {
   Trash2,
   Undo2,
   Redo2,
-  Copy,
-  ClipboardPaste,
   ArrowUp,
   ArrowDown,
   Asterisk,
   Eye,
   EyeOff,
+  GripVertical,
 } 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'
@@ -44,17 +35,40 @@ const props = defineProps({
   fields: { type: Array, default: () => [] },
   groups: { type: Array, default: () => [] },
   referencedGroupIds: { 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', 'groupsSaved', 'syncList', 'syncQuery'])
+const emit = defineEmits([
+  'update',
+  'updateGroups',
+  'groupsSaved',
+  'syncList',
+  'syncQuery',
+  'update:editMode',
+])
 
 const localEdit = ref([])
 const groupManagerVisible = ref(false)
 const activeKey = ref(null)
 
+// 编辑方式选项（从模块基本信息移入表单设计面板：主表表单设计 / 子表表格设计）
+const editModeOptions = [
+  { label: '表单设计（主表）', value: 'form' },
+  { label: '表格设计（子表）', value: 'table' },
+]
+
+function onEditModeChange(value) {
+  if (props.loading) return
+  emit('update:editMode', value || 'form')
+}
+
+/* 编辑方式：表格（子表）模式时设计视图切换为「列设计」，表单专属属性（分组/栅格/占位符）不展示 */
+const isTableMode = computed(() => props.editMode === 'table')
+
 /* ================= 视图形态 ================= */
 const viewMode = ref('design') // 'design' | 'data'
 const selectedRowKey = ref(null)
@@ -294,60 +308,110 @@ function syncToQuery() {
 }
 
 /* ================= 数据视图：表格列 ================= */
-const columns = shallowRef([
-  {
-    dataIndex: 'b_field_id',
-    title: '字段',
-    width: 180,
-    customCell: ({ row }) =>
-      isDescRow(row)
-        ? '说明文字'
-        : fieldNameMap.value.get(String(row.b_field_id)) || row.b_field_id || '',
-  },
-  {
-    dataIndex: 'b_visible',
-    title: '显示',
-    width: 70,
-    align: 'center',
-    editor: { type: 'checkbox' },
-  },
-  {
-    dataIndex: 'b_required',
-    title: '必填',
-    width: 70,
-    align: 'center',
-    editor: { type: 'checkbox' },
-  },
-  {
-    dataIndex: 'b_readonly',
-    title: '只读',
-    width: 70,
-    align: 'center',
-    editor: { type: 'checkbox' },
-  },
-  {
-    dataIndex: 'b_disabled',
-    title: '禁用',
-    width: 70,
-    align: 'center',
-    editor: { type: 'checkbox' },
-  },
-  {
-    dataIndex: 'b_group_id',
-    title: '编辑分组',
-    width: 160,
-    editor: { type: 'select', options: () => groupOptions.value },
-  },
-  {
-    dataIndex: 'b_colspan',
-    title: '栅格宽度',
-    width: 120,
-    editor: { type: 'select', options: () => COLSPAN_OPTIONS },
-  },
-  { dataIndex: 'b_placeholder', title: '占位符', width: 160, editor: {} },
-  { dataIndex: 'b_height', title: '文本域高度', width: 100 },
-  { dataIndex: 'b_xh', title: '排序号', width: 90 },
-])
+// 表单（主表）模式：编辑分组 / 栅格宽度 / 占位符 / 文本域高度
+function formDataColumns() {
+  return [
+    {
+      dataIndex: 'b_field_id',
+      title: '字段',
+      width: 180,
+      customCell: ({ row }) =>
+        isDescRow(row)
+          ? '说明文字'
+          : fieldNameMap.value.get(String(row.b_field_id)) || row.b_field_id || '',
+    },
+    {
+      dataIndex: 'b_visible',
+      title: '显示',
+      width: 70,
+      align: 'center',
+      editor: { type: 'checkbox' },
+    },
+    {
+      dataIndex: 'b_required',
+      title: '必填',
+      width: 70,
+      align: 'center',
+      editor: { type: 'checkbox' },
+    },
+    {
+      dataIndex: 'b_readonly',
+      title: '只读',
+      width: 70,
+      align: 'center',
+      editor: { type: 'checkbox' },
+    },
+    {
+      dataIndex: 'b_disabled',
+      title: '禁用',
+      width: 70,
+      align: 'center',
+      editor: { type: 'checkbox' },
+    },
+    {
+      dataIndex: 'b_group_id',
+      title: '编辑分组',
+      width: 160,
+      editor: { type: 'select', options: () => groupOptions.value },
+    },
+    {
+      dataIndex: 'b_colspan',
+      title: '栅格宽度',
+      width: 120,
+      editor: { type: 'select', options: () => COLSPAN_OPTIONS },
+    },
+    { dataIndex: 'b_placeholder', title: '占位符', width: 160, editor: {} },
+    { dataIndex: 'b_height', title: '文本域高度', width: 100 },
+    { dataIndex: 'b_xh', title: '排序号', width: 90 },
+  ]
+}
+
+// 表格（子表）模式：列宽取代分组 / 栅格 / 占位符等表单专属属性
+function tableDataColumns() {
+  return [
+    {
+      dataIndex: 'b_field_id',
+      title: '字段',
+      width: 180,
+      customCell: ({ row }) =>
+        isDescRow(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 FIELD_TYPE_LABELS = {
@@ -384,6 +448,15 @@ 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
@@ -395,7 +468,9 @@ function fieldOf(row) {
 }
 
 function fieldName(row) {
-  return fieldNameMap.value.get(String(row?.b_field_id)) || ''
+  const fid = row?.b_field_id
+  if (fid == null) return ''
+  return fieldNameMap.value.get(String(fid)) || String(fid)
 }
 
 function controlTypeLabel(row) {
@@ -431,6 +506,148 @@ 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
+}
+
+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()
+}
+
+function onWidthInput(event) {
+  onWidthChange(event.target.value)
+}
+
+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 }；实时改 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) }
+  // 拖拽前压入撤销快照（过程中只改本地草稿，mouseup 时统一 emit）
+  pushHistory()
+  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.row.b_width = Math.min(600, Math.max(40, Math.round(st.startWidth + evt.clientX - st.startX)))
+}
+
+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
+  emitUpdate()
+  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 hiddenColumnCount = computed(
+  () => tableColumnRows.value.filter((r) => Number(r.b_visible) !== 1).length,
+)
+
+// 子表预览弹窗（明道云式：设计区为纵向列卡片，真实表格效果在弹窗中查看）
+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) {
+  if (isDescRow(row)) return '说明文字内容'
+  return SAMPLE_TEXT[fieldType(row)] || '请输入'
+}
+
 // 表单级布局方向：以分组为单元，上下（vertical 分组纵排）/ 左右（horizontal 分组横排）
 const groupsCount = computed(() => (props.groups || []).length)
 
@@ -562,7 +779,11 @@ function addGroupContainer() {
     b_canuse: 1,
   }
   emit('updateGroups', [...groups, group])
-  Message.success('已添加分组，可拖入字段；分组标题请在「分组管理」中修改')
+  Message.success(
+    isTableMode.value
+      ? '已添加表头分组，可拖入列；分组标题可在「表头分组」管理中修改'
+      : '已添加分组，可拖入字段；分组标题请在「分组管理」中修改',
+  )
 }
 
 function addDescRow() {
@@ -595,7 +816,6 @@ const selectedRow = computed(() => {
 
 function selectRow(row) {
   selectedRowKey.value = row ? String(row.b_id) : null
-  if (!row) pairPending.value = null // 点空白取消同行配对选择
 }
 
 // 字段库 → 画布：已加入则定位选中，未加入则按目标位置插入。
@@ -612,6 +832,7 @@ 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,
   }
 }
@@ -648,18 +869,25 @@ function insertField(
   return row
 }
 
+/* 画布内定位卡片并滚动到可视区（字段库添加后自动跟随；表格模式卡片类名不同） */
+function scrollToRowCard(rowId) {
+  const selector = isTableMode.value
+    ? `.mm-tdesign__col[data-row-id="${rowId}"]`
+    : `.mm-fdesign__field[data-row-id="${rowId}"]`
+  document.querySelector(selector)?.scrollIntoView?.({ block: 'nearest', behavior: 'smooth' })
+}
+
 function selectField(field) {
   const row = insertField(field, { rebalance: false })
   if (!row) return
   selectRow(row)
   // 已加入的字段：定位到画布卡片（不在可视区时滚动过去）
-  nextTick(() => {
-    document
-      .querySelector(`.mm-fdesign__field[data-row-id="${row.b_id}"]`)
-      ?.scrollIntoView?.({ block: 'nearest', behavior: 'smooth' })
-  })
+  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）也正常生效。
@@ -857,10 +1085,7 @@ function rowRectAt(clientX, clientY, sectionEl) {
   return (
     rows.find(
       (row) =>
-        clientY >= row.top &&
-        clientY <= row.bottom &&
-        clientX >= row.left &&
-        clientX <= row.right,
+        clientY >= row.top && clientY <= row.bottom && clientX >= row.left && clientX <= row.right,
     ) || null
   )
 }
@@ -955,9 +1180,7 @@ function onFieldDragEnd(evt) {
     // 目标视觉行：悬停自身 = 原行去掉被拖字段后的剩余成员（splice 后索引前移）
     const { idxs } = isSelfHover
       ? {
-          idxs: origLineIdxs
-            .filter((i) => i !== movedIdx)
-            .map((i) => (i > movedIdx ? i - 1 : i)),
+          idxs: origLineIdxs.filter((i) => i !== movedIdx).map((i) => (i > movedIdx ? i - 1 : i)),
         }
       : (() => {
           const targetIdx = rows.findIndex((r) => String(r.b_field_id) === String(linePos.fieldId))
@@ -1093,20 +1316,6 @@ function onLabelChip(row, key) {
   toggleRowFlag(row, key)
 }
 
-function onColspanStep(delta) {
-  const row = selectedRow.value
-  if (!row || props.loading) return
-  onColspanChange(Math.min(24, Math.max(1, spanOf(row) + delta)))
-}
-
-// 选中字段所在视觉行的栅格占用合计（调整宽度时实时反馈本行是否已满）
-function lineUsageOf(row) {
-  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 spanOf(row)
-  return collectLineIndexes(sorted, idx).idxs.reduce((sum, i) => sum + spanOf(sorted[i]), 0)
-}
-
 /* 复制/粘贴：仅复制布局与状态属性（不含标识、排序号、分组），用于把某字段的配置套用到其它字段 */
 const clipboardProps = ref(null)
 
@@ -1125,7 +1334,6 @@ function copyRowProps() {
       b_height: row.b_height == null ? null : Number(row.b_height) || null,
     },
   }
-  Message.success(`已复制「${clipboardProps.value.name}」的属性，选中其它字段后可粘贴`)
 }
 
 function pastePropsToSelected() {
@@ -1134,7 +1342,6 @@ function pastePropsToSelected() {
   pushHistory()
   Object.assign(row, clipboardProps.value.props)
   emitUpdate()
-  Message.success(`已粘贴属性到「${fieldName(row)}」`)
 }
 
 /* 分组方向：逐组切换（上下 = 标题在上方；左右 = 标题在左侧），与表单级方向互不干扰 */
@@ -1150,42 +1357,14 @@ function toggleSectionDirection(section) {
   )
 }
 
-// 同行配对（两步选择模式）：先点一个字段，再点另一个字段，两者合并到同一行各占一半
-const pairPending = ref(null) // 第一个选中字段的行 b_id
-
-function togglePair(row) {
-  const id = String(row.b_id)
-  if (pairPending.value === id) {
-    pairPending.value = null // 再点一次 = 取消配对
-    return
-  }
-  if (!pairPending.value) {
-    pairPending.value = id
-    return
-  }
-  const first = localEdit.value.find((r) => String(r.b_id) === pairPending.value)
-  pairPending.value = null
-  if (!first || String(first.b_id) === id) return
-  if (String(first.b_group_id ?? '') !== String(row.b_group_id ?? '')) {
-    Message.warning('只能与同分组内的字段配对同行')
-    return
-  }
-  const rows = localEdit.value.toSorted((a, b) => Number(a.b_xh || 0) - Number(b.b_xh || 0))
-  const fIdx = rows.findIndex((r) => String(r.b_id) === String(first.b_id))
-  const tIdx = rows.findIndex((r) => String(r.b_id) === id)
-  // 保持原有先后顺序，把两字段移到相邻，各占一半
-  const [f] = rows.splice(fIdx, 1)
-  const newT = rows.findIndex((r) => String(r.b_id) === id)
-  rows.splice(fIdx < tIdx ? newT : newT + 1, 0, f)
-  f.b_colspan = 12
-  row.b_colspan = 12
-  emitRows(renumberRows(rows))
-}
-
-/* 字段库拖拽（clone 到画布）：布局冻结模式下画布侧不会收到 add 事件，
-   由源列表的 end（本函数）根据悬停意图自行插入新行 */
+/* 字段库拖拽（clone 到画布或表格列清单）：布局冻结模式下画布侧不会收到 add 事件，
+   由源列表的 end（本函数）根据悬停意图自行插入新行。
+   表格模式（子表）下由列清单的 @add 事件接收，此处仅追踪拖拽状态。 */
 function onLibDragStart(evt) {
-  dragPayload.value = { kind: 'library', fieldId: String(evt?.item?.dataset?.fieldId || '') }
+  dragPayload.value = {
+    kind: isTableMode.value ? 'lib-column' : 'library',
+    fieldId: String(evt?.item?.dataset?.fieldId || ''),
+  }
   dragSourceId.value = 'lib'
   createDragBadge(evt.item)
   window.addEventListener('keydown', onDragKeydown)
@@ -1205,6 +1384,10 @@ function onLibDragEnd() {
   dragSourceId.value = null
   dragLine.value = null
   dragOverSection.value = null
+
+  // 表格模式：插入由列清单的 @add 完成，此处只做取消兜底
+  if (payload?.kind === 'lib-column') return
+
   if (payload?.kind !== 'library' || !payload.fieldId) return // 取消的拖拽
   const field = (props.fields || []).find((f) => String(f.b_id) === payload.fieldId)
   if (!field) return
@@ -1258,6 +1441,97 @@ function isRowSelectedByField(field) {
   return !!row && String(row.b_id) === String(selectedRowKey.value)
 }
 
+/* ================= 表格（子表）模式：列设计 ================= */
+// 字段库拖拽分组：表格模式投放到列清单，表单模式投放到表单画布
+const libGroup = computed(() =>
+  isTableMode.value
+    ? { name: 'lib-columns', pull: 'clone', put: false }
+    : { name: 'form', pull: 'clone', put: false },
+)
+
+// 列清单分组：接受字段库（lib-columns）克隆 + 其他列分组（columns）跨组拖入
+const columnListGroup = { name: 'columns', put: ['lib-columns', 'columns'], pull: true }
+
+// 字段库 clone：表格模式直接产出编辑行（含默认列宽），表单模式保持原字段对象
+function libClone(field) {
+  if (!isTableMode.value) return field
+  return createEditRow(field, null)
+}
+
+function onTableColumnDragStart(evt) {
+  dragPayload.value = { kind: 'table-col' }
+  dragSourceId.value = String(evt?.item?.dataset?.fieldId || '')
+  createDragBadge(evt.item)
+  window.addEventListener('keydown', onDragKeydown)
+  window.addEventListener('mousemove', onDragShadowMove)
+  disableTextSelection()
+  // 排序由 SortableJS 就地完成，@end 时已无法还原原顺序，故在拖拽前压入撤销快照
+  if (!props.loading) pushHistory()
+}
+
+/* 把各分组数组按分组 b_xh 顺序合并回 localEdit（行对象引用不变，只重排 + 同步分组归属）。
+   vuedraggable 已就地移动各分组数组（sectionRowCache），行落在哪个数组即属于哪个分组 */
+function syncColumnsFromSections() {
+  const ordered = []
+  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)
+    for (const row of sectionRowCache[gid] || []) {
+      row.b_group_id = group.b_id
+      ordered.push(row)
+    }
+  }
+  for (const row of sectionRowCache[''] || []) {
+    row.b_group_id = null
+    ordered.push(row)
+  }
+  localEdit.value.splice(0, localEdit.value.length, ...ordered)
+  emitRows(renumberRows(localEdit.value))
+}
+
+/* 列分组内拖拽结束（源列表触发）：统一把分组数组同步回 localEdit 并提交。
+   跨组拖入的 add 事件发生在 end 之前，vuedraggable 已完成数组移动 */
+function onTableColumnDragEnd() {
+  window.removeEventListener('keydown', onDragKeydown)
+  window.removeEventListener('mousemove', onDragShadowMove)
+  removeDragShadow()
+  enableTextSelection()
+  dragPayload.value = null
+  dragSourceId.value = null
+  if (props.loading) return
+  syncColumnsFromSections()
+  cleanupSelectedRow()
+}
+
+/* 拖入列分组（目标列表触发）：
+   - 字段库克隆（from = 字段库）：防重后同步并选中新列（字段库拖入不触发列清单的 end）
+   - 跨组移动（from = 其他列分组）：分组归属由 @end 的 syncColumnsFromSections 统一处理
+   注意：add 事件发生在拖拽收尾前，就地变更数组（splice），避免替换引用破坏 SortableJS 状态 */
+function onTableColumnAdd(evt) {
+  const toEl = evt?.to
+  const fromEl = evt?.from
+  const gid = toEl?.dataset?.groupId === 'ungrouped' ? null : toEl?.dataset?.groupId || null
+  const targetArr = gid == null ? sectionRowCache[''] : sectionRowCache[gid]
+  const index = evt?.newIndex ?? -1
+  const row = targetArr?.[index]
+  if (!row || row.b_field_id == null) return
+  const fromLibrary = fromEl?.classList?.contains?.('mm-fdesign__lib-list')
+  if (!fromLibrary) return // 跨组移动：由 @end 统一同步
+  // 防重查全部列（不只目标组）：字段库克隆拖入时，该字段可能已存在于其他分组
+  const dupIndex = localEdit.value.findIndex(
+    (r) => String(r.b_field_id) === String(row.b_field_id),
+  )
+  if (dupIndex >= 0) {
+    targetArr.splice(index, 1)
+    Message.warning('该字段已在子表列中')
+    return
+  }
+  syncColumnsFromSections()
+  selectedRowKey.value = String(row.b_id)
+  // 添加后自动滚动到新列位置
+  nextTick(() => scrollToRowCard(String(row.b_id)))
+}
+
 /* ================= 设计视图：属性编辑（写入草稿，随页面「保存」提交） ================= */
 function toggleInspector(key) {
   const row = selectedRow.value
@@ -1372,16 +1646,6 @@ function switchView(mode) {
   }
 }
 
-/* 栅格宽度下拉：自动均分会产生任意宽度，当前值不在预设中时补充一个当前值选项 */
-const colspanOptions = computed(() => {
-  if (!selectedRow.value) return COLSPAN_OPTIONS
-  const current = String(spanOf(selectedRow.value))
-  if (COLSPAN_OPTIONS.some((o) => o.value === current)) return COLSPAN_OPTIONS
-  return [...COLSPAN_OPTIONS, { label: `当前 ${current}/24`, value: current }].toSorted(
-    (a, b) => Number(b.value) - Number(a.value),
-  )
-})
-
 function onDesignerKeydown(event) {
   // 面板不可见（父级 v-show 切走页签）时不响应，避免在其它页签误删字段
   if (!props.active || viewMode.value !== 'design') return
@@ -1399,6 +1663,24 @@ function onDesignerKeydown(event) {
     redo()
     return
   }
+  // 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()
@@ -1411,6 +1693,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)
@@ -1420,6 +1704,14 @@ onBeforeUnmount(() => {
 <template>
   <div class="mm-edit">
     <div class="mm-edit__head">
+      <div class="mm-edit__mode">
+        <Select
+          :model-value="props.editMode || 'form'"
+          :options="editModeOptions"
+          :disabled="loading"
+          @update:model-value="onEditModeChange"
+        />
+      </div>
       <div class="mm-edit__view-switch" role="tablist" aria-label="视图切换">
         <button
           type="button"
@@ -1461,7 +1753,6 @@ onBeforeUnmount(() => {
         >
           <Redo2 :size="13" />
         </button>
-        <span class="mm-edit__hint">设计视图与数据视图共享同一份草稿</span>
         <span v-if="lastDeleted" class="mm-edit__undo-wrap">
           <span class="mm-edit__undo-text">已移除「{{ fieldName(lastDeleted.row) }}」</span>
           <button type="button" class="mm-edit__undo" @click="restoreDeleted">
@@ -1469,8 +1760,22 @@ onBeforeUnmount(() => {
           </button>
         </span>
         <Button type="outline" :disabled="loading" @click="groupManagerVisible = true">
-          分组管理
+          {{ isTableMode ? '表头分组' : '分组管理' }}
         </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>Ctrl+Z</kbd> 撤销</li>
+              <li><kbd>Ctrl+Shift+Z</kbd> 重做</li>
+              <li><kbd>Delete</kbd> 删除选中字段</li>
+            </ul>
+          </div>
+        </div>
       </div>
     </div>
 
@@ -1494,14 +1799,16 @@ onBeforeUnmount(() => {
             <draggable
               class="mm-fdesign__lib-list"
               :list="group.fields"
-              :group="{ name: 'form', pull: 'clone', put: false }"
+              :group="libGroup"
               item-key="b_id"
-              :clone="(field) => field"
+              :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"
             >
@@ -1515,6 +1822,7 @@ onBeforeUnmount(() => {
                   }"
                   title="点击或拖拽加入表单"
                   :data-field-id="String(field.b_id)"
+                  :data-added="isFieldAdded(field) ? 'true' : 'false'"
                   @click="selectField(field)"
                 >
                   <span class="mm-fdesign__mark">{{ fieldMark(field.b_type) }}</span>
@@ -1528,7 +1836,7 @@ onBeforeUnmount(() => {
           </template>
           <div v-if="!libraryGroups.length" class="mm-fdesign__lib-empty">无匹配字段</div>
         </div>
-        <div class="mm-fdesign__lib-group">
+        <div v-if="!isTableMode" class="mm-fdesign__lib-group">
           <div class="mm-fdesign__lib-title">布局组件</div>
           <button
             type="button"
@@ -1549,12 +1857,275 @@ onBeforeUnmount(() => {
             <span>说明文字</span>
           </button>
         </div>
+        <div v-else class="mm-fdesign__lib-group">
+          <div class="mm-fdesign__lib-title">布局组件</div>
+          <button
+            type="button"
+            class="mm-fdesign__lib-item"
+            title="点击添加一个表头分组，列按分组渲染为多级表头"
+            @click="addGroupContainer"
+          >
+            <span class="mm-fdesign__mark">组</span>
+            <span>表头分组</span>
+          </button>
+        </div>
       </aside>
 
+      <!-- ================= 表格（子表）设计：列画布 ================= -->
       <div
+        v-if="isTableMode"
         class="mm-fdesign__canvas-wrap"
         :class="{ 'is-drag-active': dragPayload }"
       >
+        <div class="mm-fdesign__canvas">
+          <div class="mm-fdesign__canvas-note">
+            <span>子表 · 列设计（列顺序 = 表格列顺序，拖拽调整）</span>
+          </div>
+          <div class="mm-tdesign__sheet">
+            <!-- 工具栏 -->
+            <div class="mm-tdesign__toolbar">
+              <button
+                type="button"
+                class="mm-tdesign__add-group"
+                :disabled="loading"
+                @click="addGroupContainer"
+              >
+                添加表头分组
+              </button>
+              <span class="mm-tdesign__toolbar-title">
+                共 <strong>{{ tableColumnRows.length }}</strong> 列
+                <span v-if="hiddenColumnCount" class="mm-tdesign__toolbar-hidden"
+                  >（{{ hiddenColumnCount }} 列隐藏）</span
+                >
+              </span>
+              <span class="mm-tdesign__toolbar-hint"
+                >点击字段库添加列 · 拖拽卡片排序 · 点击卡片编辑属性</span
+              >
+              <button
+                type="button"
+                class="mm-tdesign__preview-btn"
+                :disabled="!tableColumnRows.length"
+                @click="previewOpen = true"
+              >
+                预览子表
+              </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">
+                <span class="mm-tdesign__section-name">
+                  <i v-if="section.key === 'ungrouped'" class="mm-tdesign__section-flag">未分组</i>
+                  <template v-else>{{ section.title }}</template>
+                </span>
+                <span class="mm-tdesign__section-count">{{ section.rows.length }} 列</span>
+              </div>
+              <draggable
+                class="mm-tdesign__list"
+                :class="{ 'is-empty': !section.rows.length }"
+                :list="section.rows"
+                :group="columnListGroup"
+                item-key="b_id"
+                :data-group-id="section.key === 'ungrouped' ? 'ungrouped' : String(section.group.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"
+                :disabled="loading"
+                @start="onTableColumnDragStart"
+                @end="onTableColumnDragEnd"
+                @add="onTableColumnAdd"
+              >
+                <template #item="{ element: row }">
+                  <div
+                    class="mm-tdesign__col"
+                    :class="{
+                      'is-selected': selectedRowKey === String(row.b_id),
+                      'is-invisible': Number(row.b_visible) !== 1,
+                    }"
+                    :data-field-id="String(row.b_field_id)"
+                    :data-row-id="String(row.b_id)"
+                    @click.stop="selectRow(row)"
+                  >
+                    <span class="mm-tdesign__drag-handle" title="拖拽排序"
+                      ><GripVertical :size="14"
+                    /></span>
+                    <span class="mm-fdesign__mark">{{ fieldMark(fieldType(row)) }}</span>
+                    <span class="mm-fdesign__field-name">{{
+                      isDescRow(row) ? '说明文字' : 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">{{
+                        isDescRow(row) ? '' : controlTypeLabel(row)
+                      }}</span>
+                      <span class="mm-tdesign__col-width">{{ widthOf(row) }}px</span>
+                    </span>
+                    <span class="mm-fdesign__label-chips">
+                      <button
+                        v-if="!isDescRow(row)"
+                        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>
+                    <span v-if="Number(row.b_visible) !== 1" class="mm-fdesign__invisible-mark"
+                      >隐藏</span
+                    >
+                    <button
+                      type="button"
+                      class="mm-tdesign__col-del"
+                      title="删除列"
+                      aria-label="删除列"
+                      @click.stop="removeRow(row)"
+                    >
+                      <Trash2 :size="13" />
+                    </button>
+                  </div>
+                </template>
+                <template #footer>
+                  <!-- 拖拽中隐藏提示：避免与拖拽占位同时出现造成两行 -->
+                  <div
+                    v-if="!section.rows.length && !dragPayload"
+                    class="mm-tdesign__section-drop-hint"
+                  >
+                    {{ section.key === 'ungrouped' ? '未分组列（可从分组拖出到此）' : '空分组，可拖入列' }}
+                  </div>
+                </template>
+              </draggable>
+            </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="
+                      (isDescRow(row) ? '说明文字' : fieldName(row)) +
+                      ' · ' +
+                      widthOf(row) +
+                      'px'
+                    "
+                  >
+                    <span class="mm-tdesign__head-name">{{
+                      isDescRow(row) ? '说明文字' : 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-' + (isDescRow(row) ? 'desc' : 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">
           <div class="mm-fdesign__canvas-note">
             <span
@@ -1575,9 +2146,6 @@ onBeforeUnmount(() => {
               {{ formDirection === 'horizontal' ? '⇄ 切换为上下' : '⇅ 切换为左右' }}
             </button>
             <span v-else>从左侧字段库点击或拖拽，即可添加表单项</span>
-            <span v-if="pairPending" class="mm-fdesign__pair-hint">
-              同行配对中：请选中另一个字段后点击右侧「同行配对」按钮（再点一次取消）
-            </span>
           </div>
           <div
             class="mm-fdesign__sheet"
@@ -1658,7 +2226,6 @@ onBeforeUnmount(() => {
                           dragLine &&
                           dragLine.fieldId === String(row.b_field_id) &&
                           dragLine.pos === 'line-before',
-                        'is-pairing': pairPending === String(row.b_id),
                       }"
                       :data-field-id="String(row.b_field_id)"
                       :data-row-id="String(row.b_id)"
@@ -1723,7 +2290,11 @@ onBeforeUnmount(() => {
                           disabled
                           :style="{ height: `${heightOf(row)}px` }"
                         />
-                        <select v-else-if="fieldType(row) === 'select'" class="mm-fdesign__ctrl" disabled>
+                        <select
+                          v-else-if="fieldType(row) === 'select'"
+                          class="mm-fdesign__ctrl"
+                          disabled
+                        >
                           <option value=""></option>
                         </select>
                         <div
@@ -1843,7 +2414,138 @@ onBeforeUnmount(() => {
         </div>
       </div>
 
-      <aside class="mm-fdesign__inspector">
+      <!-- ================= 表格（子表）设计：属性面板 ================= -->
+      <aside v-if="isTableMode" class="mm-fdesign__inspector">
+        <div class="mm-fdesign__subhead">
+          <strong>属性</strong>
+          <span>{{ selectedRow ? fieldName(selectedRow) : '未选中列' }}</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">{{
+              isDescRow(selectedRow) ? '说明文字' : fieldName(selectedRow)
+            }}</span>
+          </div>
+          <div class="mm-fdesign__prop">
+            <label>控件类型</label>
+            <span class="mm-fdesign__prop-static">{{
+              isDescRow(selectedRow) ? '说明文字' : 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="自定义列宽"
+                @input="onWidthInput"
+              />
+              <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">
+            <label for="mm-tdesign-xh">排序号</label>
+            <input
+              id="mm-tdesign-xh"
+              type="number"
+              class="mm-fdesign__prop-input"
+              :value="selectedRow.b_xh"
+              :disabled="loading"
+              @change="onXhChange"
+            />
+          </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>
+        <div v-else class="mm-fdesign__inspector-empty">点击子表列卡片查看并编辑属性</div>
+      </aside>
+
+      <!-- ================= 表单（主表）设计：属性面板 ================= -->
+      <aside v-else class="mm-fdesign__inspector">
         <div class="mm-fdesign__subhead">
           <strong>属性</strong>
           <span>{{ selectedRow ? fieldName(selectedRow) : '未选中字段' }}</span>
@@ -1882,46 +2584,17 @@ onBeforeUnmount(() => {
             <div class="mm-fdesign__prop">
               <label for="mm-fdesign-colspan">栅格宽度</label>
               <div class="mm-fdesign__span-control">
-                <Select
-                  id="mm-fdesign-colspan"
-                  :model-value="String(spanOf(selectedRow))"
-                  :disabled="loading"
-                  :options="colspanOptions"
-                  @update:model-value="onColspanChange"
-                />
-                <button
-                  type="button"
-                  class="mm-fdesign__step"
-                  :disabled="loading || spanOf(selectedRow) <= 1"
-                  aria-label="栅格宽度减一"
-                  @click="onColspanStep(-1)"
-                >
-                  −
-                </button>
                 <input
+                  id="mm-fdesign-colspan"
                   type="number"
                   min="1"
                   max="24"
                   :value="spanOf(selectedRow)"
                   :disabled="loading"
-                  aria-label="自定义栅格宽度"
+                  aria-label="栅格宽度"
                   @input="onColspanInput"
                 />
-                <button
-                  type="button"
-                  class="mm-fdesign__step"
-                  :disabled="loading || spanOf(selectedRow) >= 24"
-                  aria-label="栅格宽度加一"
-                  @click="onColspanStep(1)"
-                >
-                  +
-                </button>
               </div>
-              <span
-                class="mm-fdesign__span-usage"
-                :class="{ 'is-over': lineUsageOf(selectedRow) > 24 }"
-                >本行 {{ lineUsageOf(selectedRow) }}/24</span
-              >
             </div>
             <div v-if="isTextarea(selectedRow)" class="mm-fdesign__prop">
               <label for="mm-fdesign-height">文本域高度</label>
@@ -2004,36 +2677,6 @@ onBeforeUnmount(() => {
             </div>
           </div>
           <div class="mm-fdesign__prop-group">操作</div>
-          <div class="mm-fdesign__clip-row">
-            <button
-              type="button"
-              class="mm-fdesign__clip-btn"
-              :disabled="loading"
-              @click="copyRowProps"
-            >
-              <Copy :size="13" /> 复制属性
-            </button>
-            <button
-              type="button"
-              class="mm-fdesign__clip-btn"
-              :disabled="loading || !clipboardProps"
-              @click="pastePropsToSelected"
-            >
-              <ClipboardPaste :size="13" /> 粘贴属性
-            </button>
-          </div>
-          <p v-if="clipboardProps" class="mm-fdesign__clip-hint">
-            已复制「{{ clipboardProps.name }}」的属性，选中其它字段后可粘贴
-          </p>
-          <button
-            type="button"
-            class="mm-fdesign__pair-btn"
-            :class="{ 'is-active': pairPending === String(selectedRow.b_id) }"
-            :disabled="loading"
-            @click="togglePair(selectedRow)"
-          >
-            ⇆ 同行配对
-          </button>
           <Button
             type="danger"
             :disabled="loading"
@@ -2042,9 +2685,6 @@ onBeforeUnmount(() => {
           >
             <Trash2 :size="14" /> 删除字段
           </Button>
-          <p class="mm-fdesign__inspector-foot">
-            按住卡片工具栏手柄可拖拽排序或跨分组移动；工具栏可上下移。Ctrl+Z 撤销，Ctrl+Shift+Z 重做。
-          </p>
         </template>
         <div v-else class="mm-fdesign__inspector-empty">点击画布中的字段卡片查看并编辑属性</div>
       </aside>
@@ -2062,7 +2702,7 @@ onBeforeUnmount(() => {
       </div>
       <div class="mm-panel__body">
         <FmsTable
-          v-model:columns="columns"
+          :columns="dataColumns"
           :data-source="localEdit"
           :editable="!loading"
           :row-draggable="!loading"
@@ -2105,6 +2745,12 @@ onBeforeUnmount(() => {
   margin-bottom: 10px;
 }
 
+.mm-edit__mode {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .mm-edit__view-switch {
   display: inline-flex;
   align-items: center;
@@ -2139,9 +2785,84 @@ onBeforeUnmount(() => {
   gap: 10px;
 }
 
-.mm-edit__hint {
+/* ---- 快捷键帮助（右上角 ? 图标，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: 20px;
+  height: 20px;
+  border: 1px solid var(--fms-border);
+  border-radius: 50%;
+  background: var(--fms-card);
   color: var(--fms-text-secondary);
   font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+  padding-bottom: 1px; /* 问号字形重心略偏上，下移 1px 视觉居中 */
+  cursor: help;
+}
+
+.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;
+  }
 }
 
 /* ---- 撤销提示条 ---- */
@@ -2348,14 +3069,6 @@ onBeforeUnmount(() => {
 }
 
 /* 同行配对进行中的提示条 */
-.mm-fdesign__pair-hint {
-  padding: 2px 8px;
-  border-radius: 4px;
-  background: color-mix(in srgb, var(--fms-primary) 12%, transparent);
-  color: var(--fms-primary);
-  font-weight: 600;
-}
-
 .mm-fdesign__sheet {
   position: relative; /* 拖拽行高亮框的绝对定位参照 */
   /* 纸面宽度自适应：宽屏时 90% 上限 960px，窄屏时跟随容器尽量占满，
@@ -2543,12 +3256,6 @@ onBeforeUnmount(() => {
     opacity: 0.55;
   }
 
-  /* 同行配对第一选择：虚线边框 + 外发光，提示等待第二个字段 */
-  &.is-pairing {
-    border: 1px dashed var(--fms-primary);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fms-primary) 18%, transparent);
-  }
-
   /* ---- 拖拽插入方向高亮：目标卡片对应侧边框高亮（阿里式 inset 阴影，不撑布局） ---- */
   &.is-drop-before {
     box-shadow: inset 2px 0 0 0 var(--fms-primary);
@@ -2904,6 +3611,12 @@ textarea.mm-fdesign__ctrl {
   }
 }
 
+/* 栅格宽度：去掉下拉后数字输入框即主控件，填充剩余宽度（列宽控件仍用下拉，不受影响） */
+.mm-fdesign__span-control input#mm-fdesign-colspan {
+  flex: 1;
+  width: auto;
+}
+
 .mm-fdesign__prop-static {
   display: flex;
   align-items: center;
@@ -2986,15 +3699,6 @@ textarea.mm-fdesign__ctrl {
   }
 }
 
-.mm-fdesign__inspector-foot {
-  margin-top: 14px;
-  padding-top: 10px;
-  border-top: 1px solid var(--fms-border);
-  color: var(--fms-text-secondary);
-  font-size: 11px;
-  line-height: 1.6;
-}
-
 .mm-fdesign__delete {
   margin-top: 12px;
   width: 100%;
@@ -3179,90 +3883,539 @@ textarea.mm-fdesign__ctrl {
   }
 }
 
-.mm-fdesign__span-usage {
-  display: block;
-  margin-top: 4px;
-  color: var(--fms-text-secondary);
-  font-size: 10px;
+/* ---- 表格（子表）设计：列画布 ---- */
+.mm-tdesign__sheet {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 14px 16px;
+  border: 1px solid var(--fms-border);
+  border-radius: var(--fms-control-radius);
+  background: var(--fms-card);
+  box-shadow: 0 3px 14px rgba(39, 54, 70, 0.06);
+}
 
-  &.is-over {
-    color: #d95757;
-    font-weight: 600;
+/* 工具栏 */
+.mm-tdesign__toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.mm-tdesign__toolbar-title {
+  color: var(--fms-text);
+  font-size: 12px;
+
+  strong {
+    color: var(--fms-primary);
+    font-variant-numeric: tabular-nums;
   }
 }
 
-/* ---- 属性面板操作区：复制 / 粘贴 / 同行配对 ---- */
-.mm-fdesign__clip-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
+.mm-tdesign__toolbar-hidden {
+  color: var(--fms-text-secondary);
+}
+
+.mm-tdesign__toolbar-hint {
+  margin-left: auto;
+  color: var(--fms-text-secondary);
+  font-size: 11px;
+}
+
+.mm-tdesign__preview-btn {
+  flex: none;
+  padding: 4px 12px;
+  border: 1px solid color-mix(in srgb, var(--fms-primary) 45%, transparent);
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--fms-primary) 8%, transparent);
+  color: var(--fms-primary);
+  font-size: 12px;
+  cursor: pointer;
+  transition:
+    background 0.15s,
+    border-color 0.15s;
+
+  &:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--fms-primary) 14%, transparent);
+    border-color: var(--fms-primary);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+/* 列画布分区（表头分组） */
+.mm-tdesign__section {
+  border: 1px solid var(--fms-border);
+  border-radius: 8px;
+  overflow: hidden;
+
+  &.is-ungrouped {
+    border-style: dashed;
+    background: color-mix(in srgb, var(--fms-secondary) 35%, transparent);
+  }
+}
+
+.mm-tdesign__section-title {
+  display: flex;
+  align-items: center;
   gap: 8px;
-  margin-top: 10px;
+  padding: 5px 10px;
+  background: var(--fms-secondary);
+
+  .mm-tdesign__section-flag {
+    font-style: normal;
+    color: var(--fms-text-secondary);
+    font-size: 11px;
+  }
 }
 
-.mm-fdesign__clip-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  height: 28px;
-  padding: 0 8px;
-  border: 1px solid var(--fms-border);
-  border-radius: 5px;
-  background: var(--fms-card);
+.mm-tdesign__section-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   color: var(--fms-text);
-  font-size: 11px;
-  cursor: pointer;
-
-  &:hover:not(:disabled) {
-    border-color: var(--fms-primary);
-    color: var(--fms-primary);
-  }
-
-  &:disabled {
-    opacity: 0.45;
-    cursor: not-allowed;
-  }
+  font-size: 12px;
+  font-weight: 600;
 }
 
-.mm-fdesign__clip-hint {
-  margin: 6px 0 0;
+.mm-tdesign__section-count {
+  margin-left: auto;
+  flex: none;
   color: var(--fms-text-secondary);
-  font-size: 10px;
-  line-height: 1.5;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
 }
 
-.mm-fdesign__pair-btn {
-  display: inline-flex;
+.mm-tdesign__section-drop-hint {
+  display: flex;
   align-items: center;
   justify-content: center;
-  gap: 4px;
-  width: 100%;
-  height: 28px;
-  margin-top: 8px;
-  border: 1px solid var(--fms-border);
-  border-radius: 5px;
-  background: var(--fms-card);
-  color: var(--fms-text);
+  min-height: 34px;
+  border: 1px dashed var(--fms-border-strong, #c8d2dc);
+  border-radius: 6px;
+  color: var(--fms-text-secondary);
+  font-size: 11px;
+}
+
+.mm-tdesign__add-group {
+  flex: none;
+  padding: 3px 10px;
+  border: 1px dashed var(--fms-primary);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--fms-primary);
   font-size: 11px;
   cursor: pointer;
+  white-space: nowrap;
 
   &:hover:not(:disabled) {
-    border-color: var(--fms-primary);
-    color: var(--fms-primary);
-  }
-
-  &:disabled {
-    opacity: 0.45;
-    cursor: not-allowed;
-  }
-
-  &.is-active {
-    border-color: var(--fms-primary);
-    color: var(--fms-primary);
     background: color-mix(in srgb, var(--fms-primary) 8%, transparent);
   }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 }
 
+/* WYSIWYG 表格：横向滚动 + 冻结序号/操作列 */
+.mm-tdesign__table {
+  overflow: auto;
+  max-height: 240px;
+  border: 1px solid var(--fms-border);
+  border-radius: 6px;
+  background: #fff;
+
+  &.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: #fff;
+}
+
+.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: #fbfcfd;
+  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 {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-height: 60px;
+  padding: 8px;
+
+  &.is-empty {
+    min-height: 0;
+  }
+}
+
+.mm-tdesign__col {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 40px;
+  padding: 5px 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) 45%, transparent);
+  }
+
+  &.is-selected {
+    border-style: dashed;
+    border-color: var(--fms-primary);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--fms-primary) 16%, transparent);
+  }
+
+  &.is-invisible {
+    opacity: 0.55;
+  }
+
+  .mm-fdesign__field-name {
+    flex: 0 1 auto;
+  }
+}
+
+.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;
+}
+
+.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: var(--fms-text-secondary);
+  font-size: 10px;
+  line-height: 16px;
+}
+
+.mm-tdesign__col-width {
+  color: var(--fms-text-secondary);
+  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;
+
+  &:hover {
+    background: #fdecec;
+    color: #d95757;
+  }
+}
+
+.mm-tdesign__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 56px;
+  border-top: 1px dashed var(--fms-border-strong, #c8d2dc);
+  color: var(--fms-text-secondary);
+  font-size: 12px;
+}
 </style>
 
 <!-- fallback 克隆（SortableJS 在 body 上生成的整卡克隆）不在 scoped 作用域内，需全局隐藏：
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 c35694bb..5062aff0 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
@@ -419,6 +419,7 @@ async function addModule(parentId, moduleType) {
     b_keyfield: null,
     b_orderfield: null,
     b_delete_policy: moduleType === 'data' ? 'restrict' : null,
+    b_edit_mode: moduleType === 'data' ? 'form' : null,
     b_canuse: 1,
     b_xh: 10,
     b_bz: null,
@@ -715,7 +716,7 @@ const configGroups = computed(() => {
       const editLen = drafts.value?.editConfig?.length ?? 0
       uiItems.push({
         key: 'edit',
-        label: '表单设计',
+        label: editNavLabel.value,
         icon: Pencil,
         badge: editLen ? '已配置' : '',
       })
@@ -778,6 +779,10 @@ const referencedGroupIds = computed(() => {
   return Array.from(ids)
 })
 
+// 编辑方式（form 主表表单 / table 子表表格）决定「表单设计」面板的形态与导航标签
+const editMode = computed(() => drafts.value?.module?.b_edit_mode || 'form')
+const editNavLabel = computed(() => (editMode.value === 'table' ? '表格设计' : '表单设计'))
+
 const finalI18nItems = computed(() => {
   const module = drafts.value?.module
   if (!module) return []
@@ -1524,9 +1529,13 @@ loadMenuTree()
                     :fields="drafts?.fields"
                     :groups="drafts?.groups"
                     :referenced-group-ids="referencedGroupIds"
+                    :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)"
                     @groups-saved="onGroupsSaved"
                     @sync-list="(v) => onModuleUpdate('listConfig', v)"
diff --git a/code/fms/fms-vue/tests/views/module-management.spec.js b/code/fms/fms-vue/tests/views/module-management.spec.js
index 6bde8ea1..37d4757d 100644
--- a/code/fms/fms-vue/tests/views/module-management.spec.js
+++ b/code/fms/fms-vue/tests/views/module-management.spec.js
@@ -125,7 +125,11 @@ const panelStubs = {
   },
   ModuleFieldsPanel: { name: 'ModuleFieldsPanel', template: '<div class="stub-fields" />' },
   ModuleListConfigPanel: { name: 'ModuleListConfigPanel', template: '<div class="stub-list" />' },
-  ModuleEditConfigPanel: { name: 'ModuleEditConfigPanel', template: '<div class="stub-edit" />' },
+  ModuleEditConfigPanel: {
+    name: 'ModuleEditConfigPanel',
+    props: ['editMode'],
+    template: '<div class="stub-edit" />',
+  },
   ModuleQueryConfigPanel: {
     name: 'ModuleQueryConfigPanel',
     template: '<div class="stub-query" />',
@@ -237,6 +241,33 @@ describe('模块管理页面（重构后）', () => {
     expect(active[0].text()).toContain('基本信息')
   })
 
+  it('编辑方式=table 的模块：导航显示「表格设计」并传递 edit-mode 给编辑面板', async () => {
+    const impl = vi.mocked(loadDataApi).getMockImplementation()
+    vi.mocked(loadDataApi).mockImplementation(async (table, where) => {
+      if (table === 's_module') {
+        const match = String(where || '').match(/b_id\s*=\s*(\d+)/)
+        if (match) {
+          const rows = deepCloneRows(moduleRows.filter((r) => String(r.b_id) === match[1]))
+          if (rows.length) rows[0].b_edit_mode = 'table'
+          return { data: rows }
+        }
+        return { data: deepCloneRows(moduleRows) }
+      }
+      return { data: [] }
+    })
+    try {
+      const wrapper = await mountPage()
+      await selectModule(wrapper, '订单')
+      const labels = wrapper.findAll('.mm-config-nav__label').map((t) => t.text())
+      expect(labels).toContain('表格设计')
+      expect(labels).not.toContain('表单设计')
+      const editPanel = wrapper.findComponent({ name: 'ModuleEditConfigPanel' })
+      expect(editPanel.props('editMode')).toBe('table')
+    } finally {
+      vi.mocked(loadDataApi).mockImplementation(impl)
+    }
+  })
+
   it('点击导航项切换内容面板', async () => {
     const wrapper = await mountPage()
     await selectModule(wrapper, '订单')
@@ -826,7 +857,8 @@ describe('ModuleBasicPanel（基本信息面板）', () => {
     FormItem: {
       name: 'FormItem',
       props: ['label', 'name', 'span'],
-      template: '<div class="stub-form-item"><slot /></div>',
+      template:
+        '<div class="stub-form-item"><span class="stub-form-label">{{ label }}</span><slot /></div>',
     },
     Input: {
       name: 'Input',
@@ -835,7 +867,13 @@ describe('ModuleBasicPanel（基本信息面板）', () => {
       template:
         '<input class="stub-input" :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" />',
     },
-    Select: { name: 'Select', props: ['modelValue'], template: '<div class="stub-select" />' },
+    Select: {
+      name: 'Select',
+      props: ['modelValue', 'options'],
+      emits: ['update:modelValue'],
+      template:
+        '<select class="stub-select" :value="modelValue" @change="$emit(\'update:modelValue\', $event.target.value)"><option v-for="opt in options" :key="String(opt.value)" :value="opt.value">{{ opt.label }}</option></select>',
+    },
     Switch: { name: 'Switch', props: ['modelValue'], template: '<div class="stub-switch" />' },
     I18nQuickSetModal: true,
   }
@@ -885,6 +923,13 @@ describe('ModuleBasicPanel（基本信息面板）', () => {
     expect(update).toBeTruthy()
     expect(update[0][0].b_name).toBe('新订单名')
   })
+
+  it('查询模块不显示「编辑方式」标签（编辑方式已移至表单设计面板）', async () => {
+    const wrapper = mountBasic({ ...dataModule, b_module_type: 'query', b_savetable: null })
+    await nextTick()
+    const labels = wrapper.findAll('.stub-form-label').map((l) => l.text())
+    expect(labels).not.toContain('编辑方式')
+  })
 })
 
 const mountMenu = (menu, activeSection = 'basic') =>
@@ -1632,72 +1677,6 @@ describe('ModuleEditConfigPanel（表单设计视图）', () => {
     expect(last.map((r) => r.b_colspan)).toEqual([24, 24, 24]) // f3 独占上方新行，f1/f2 保持整行
   })
 
-  it('同行配对（两步选择）：属性面板「同行配对」按钮，两字段合并同行各占一半', async () => {
-    const rows = [
-      {
-        b_id: 'a1',
-        b_module_id: '2',
-        b_field_id: 'f1',
-        b_group_id: 'g1',
-        b_visible: 1,
-        b_required: 1,
-        b_readonly: 0,
-        b_disabled: 0,
-        b_colspan: 24,
-        b_xh: 10,
-      },
-      {
-        b_id: 'a2',
-        b_module_id: '2',
-        b_field_id: 'f2',
-        b_group_id: 'g1',
-        b_visible: 1,
-        b_required: 0,
-        b_readonly: 0,
-        b_disabled: 0,
-        b_colspan: 24,
-        b_xh: 20,
-      },
-      {
-        b_id: 'a3',
-        b_module_id: '2',
-        b_field_id: 'f3',
-        b_group_id: 'g1',
-        b_visible: 1,
-        b_required: 0,
-        b_readonly: 0,
-        b_disabled: 0,
-        b_colspan: 24,
-        b_xh: 30,
-      },
-    ]
-    const wrapper = mountEdit({ editConfig: rows })
-    await nextTick()
-
-    // 第一步：选中 f2 卡片，点属性面板「同行配对」
-    await wrapper.find('[data-row-id="a2"]').trigger('click')
-    await nextTick()
-    await wrapper.find('.mm-fdesign__pair-btn').trigger('click')
-    await nextTick()
-    // 配对进行中：提示条出现、卡片高亮
-    expect(wrapper.find('.mm-fdesign__pair-hint').exists()).toBe(true)
-    expect(wrapper.find('[data-row-id="a2"]').classes()).toContain('is-pairing')
-
-    // 第二步：选中 f3 卡片，再点「同行配对」
-    await wrapper.find('[data-row-id="a3"]').trigger('click')
-    await nextTick()
-    await wrapper.find('.mm-fdesign__pair-btn').trigger('click')
-    await nextTick()
-
-    const updates = wrapper.emitted('update')
-    const last = updates[updates.length - 1][0]
-    expect(last.find((r) => r.b_field_id === 'f2').b_colspan).toBe(12)
-    expect(last.find((r) => r.b_field_id === 'f3').b_colspan).toBe(12)
-    expect(last.find((r) => r.b_field_id === 'f1').b_colspan).toBe(24)
-    // 两字段移到相邻（保持原有先后顺序）
-    expect(last.map((r) => r.b_field_id)).toEqual(['f1', 'f2', 'f3'])
-  })
-
   it('空分组可放置：拖入后归属新分组', async () => {
     const extraGroups = [...groups, { b_id: 'g2', b_title: '附加信息', b_xh: 20, b_canuse: 1 }]
     const extraFields = [
@@ -1780,7 +1759,7 @@ describe('ModuleEditConfigPanel（表单设计视图）', () => {
     await wrapper.find('.mm-fdesign__field[data-field-id="f1"]').trigger('click')
     await nextTick()
 
-    const input = wrapper.find('input[aria-label="自定义栅格宽度"]')
+    const input = wrapper.find('input[aria-label="栅格宽度"]')
     await input.setValue('16')
     await input.trigger('change')
     await nextTick()
@@ -2186,7 +2165,7 @@ describe('ModuleEditConfigPanel（表单设计视图）', () => {
     await nextTick()
     await wrapper.find('.mm-fdesign__field[data-field-id="f1"]').trigger('click')
     await nextTick()
-    const input = wrapper.find('input[aria-label="自定义栅格宽度"]')
+    const input = wrapper.find('input[aria-label="栅格宽度"]')
     await input.setValue('12') // input 事件即时生效
     await nextTick()
     expect(wrapper.emitted('update').at(-1)[0].find((r) => r.b_field_id === 'f1').b_colspan).toBe(12)
@@ -2288,32 +2267,19 @@ describe('ModuleEditConfigPanel（表单设计视图）', () => {
     expect(last.map((r) => r.b_field_id)).toEqual(['f2', 'f3', 'f4', 'f1'])
   })
 
-  it('栅格宽度步进按钮：+/- 调整并联动压缩同行', async () => {
+  it('栅格宽度输入框：直接输入调整并联动压缩同行', async () => {
     const rows = [mkRow('a1', 'f1', 'g1', 12, 10), mkRow('a2', 'f2', 'g1', 12, 20)]
     const wrapper = mountEdit({ editConfig: rows })
     await nextTick()
     await wrapper.find('[data-row-id="a1"]').trigger('click')
     await nextTick()
 
-    await wrapper.find('button[aria-label="栅格宽度加一"]').trigger('click')
+    const input = wrapper.find('input[aria-label="栅格宽度"]')
+    await input.setValue('16')
     await nextTick()
-    let last = wrapper.emitted('update').at(-1)[0]
-    expect(last.find((r) => r.b_id === 'a1').b_colspan).toBe(13)
-    expect(last.find((r) => r.b_id === 'a2').b_colspan).toBe(11) // 24-13 联动压缩
-
-    await wrapper.find('button[aria-label="栅格宽度减一"]').trigger('click')
-    await nextTick()
-    last = wrapper.emitted('update').at(-1)[0]
-    expect(last.find((r) => r.b_id === 'a1').b_colspan).toBe(12)
-  })
-
-  it('属性面板显示本行栅格占用合计', async () => {
-    const rows = [mkRow('a1', 'f1', 'g1', 12, 10), mkRow('a2', 'f2', 'g1', 12, 20)]
-    const wrapper = mountEdit({ editConfig: rows })
-    await nextTick()
-    await wrapper.find('[data-row-id="a1"]').trigger('click')
-    await nextTick()
-    expect(wrapper.find('.mm-fdesign__span-usage').text()).toBe('本行 24/24')
+    const last = wrapper.emitted('update').at(-1)[0]
+    expect(last.find((r) => r.b_id === 'a1').b_colspan).toBe(16)
+    expect(last.find((r) => r.b_id === 'a2').b_colspan).toBe(8) // 24-16 联动压缩
   })
 
   it('卡片标签快捷开关：点「必」「显」直接切换并 emit update', async () => {
@@ -2332,18 +2298,21 @@ describe('ModuleEditConfigPanel（表单设计视图）', () => {
     expect(card.classes()).toContain('is-invisible')
   })
 
-  it('复制属性 / 粘贴属性：把 f1 的布局状态套用到 f2', async () => {
+  it('Ctrl+C / Ctrl+V：复制选中字段属性，选中其它字段粘贴', async () => {
     const wrapper = mountEdit()
     await nextTick()
     await wrapper.find('.mm-fdesign__field[data-field-id="f1"]').trigger('click')
     await nextTick()
-    await wrapper.find('.mm-fdesign__clip-btn').trigger('click') // 复制
+    window.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'c', ctrlKey: true, bubbles: true }),
+    )
     await nextTick()
-    expect(wrapper.find('.mm-fdesign__clip-hint').exists()).toBe(true)
 
     await wrapper.find('.mm-fdesign__field[data-field-id="f2"]').trigger('click')
     await nextTick()
-    await wrapper.findAll('.mm-fdesign__clip-btn')[1].trigger('click') // 粘贴
+    window.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'v', ctrlKey: true, bubbles: true }),
+    )
     await nextTick()
     const last = wrapper.emitted('update').at(-1)[0]
     const f2 = last.find((r) => r.b_field_id === 'f2')
@@ -2351,6 +2320,32 @@ describe('ModuleEditConfigPanel（表单设计视图）', () => {
     expect(f2.b_colspan).toBe(24)
   })
 
+  it('Ctrl+X 剪切：复制属性后直接删除当前卡片，可粘贴到其它字段', async () => {
+    const wrapper = mountEdit()
+    await nextTick()
+    await wrapper.find('.mm-fdesign__field[data-field-id="f1"]').trigger('click')
+    await nextTick()
+    window.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'x', ctrlKey: true, bubbles: true }),
+    )
+    await nextTick()
+    // f1 已被删除
+    let last = wrapper.emitted('update').at(-1)[0]
+    expect(last.some((r) => r.b_field_id === 'f1')).toBe(false)
+
+    // 选中 f2 后 Ctrl+V 粘贴 f1 的属性
+    await wrapper.find('.mm-fdesign__field[data-field-id="f2"]').trigger('click')
+    await nextTick()
+    window.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'v', ctrlKey: true, bubbles: true }),
+    )
+    await nextTick()
+    last = wrapper.emitted('update').at(-1)[0]
+    const f2 = last.find((r) => r.b_field_id === 'f2')
+    expect(f2.b_required).toBe(1) // f1 required=1 → 套用到 f2
+    expect(f2.b_colspan).toBe(24)
+  })
+
   it('字段库按控件类型分组展示，字段顺序与总数不变', async () => {
     const extraFields = [
       ...fields,
@@ -2426,3 +2421,587 @@ describe('ModuleEditConfigPanel（表单设计视图）', () => {
     expect(wrapper.find('.mm-fdesign__inspector .mm-fdesign__subhead').text()).toContain('金额')
   })
 })
+
+// 带一个分组（g1 金额信息）的子表挂载数据：前两列在组内，第三列未分组
+const groupFixture = (rows) => ({
+  groups: [
+    {
+      b_id: 'g1',
+      b_module_id: '2',
+      b_parent_id: null,
+      b_title: '金额信息',
+      b_i18n: null,
+      b_layout_direction: 'vertical',
+      b_xh: 10,
+      b_canuse: 1,
+    },
+  ],
+  editConfig: rows.map((r, i) => ({ ...r, b_group_id: i < 2 ? 'g1' : null })),
+})
+
+// 列分区列表谓词：列表元素均为编辑行（含 b_field_id，与字段库的 b_field 区分）
+const isColumnList = (c) => {
+  const l = c.props('list')
+  return Array.isArray(l) && l.length > 0 && l.every((i) => i.b_field_id != null)
+}
+
+describe('ModuleEditConfigPanel（子表表格设计）', () => {
+  // 预览弹窗经 Modal Teleport 渲染到 body；测试结束后主动关闭，
+  // 避免残留的旧弹窗手柄被后续测试的 document.body 查询命中
+  afterEach(() => {
+    document.body
+      .querySelectorAll('button.fms-modal-header-btn[aria-label="关闭"]')
+      .forEach((btn) => btn.click())
+  })
+
+  const tableRows = [
+    {
+      b_id: 'e1',
+      b_module_id: '2',
+      b_field_id: 'f1',
+      b_group_id: null,
+      b_visible: 1,
+      b_required: 1,
+      b_readonly: 0,
+      b_disabled: 0,
+      b_width: 160,
+      b_xh: 10,
+    },
+    {
+      b_id: 'e2',
+      b_module_id: '2',
+      b_field_id: 'f2',
+      b_group_id: null,
+      b_visible: 1,
+      b_required: 0,
+      b_readonly: 0,
+      b_disabled: 0,
+      b_width: 140,
+      b_xh: 20,
+    },
+    {
+      b_id: 'e3',
+      b_module_id: '2',
+      b_field_id: 'f3',
+      b_group_id: null,
+      b_visible: 0,
+      b_required: 0,
+      b_readonly: 0,
+      b_disabled: 1,
+      b_width: 160,
+      b_xh: 30,
+    },
+  ]
+  const fields = [
+    { b_id: 'f1', b_field: 'order_no', b_name: '订单编号', b_type: 'input', b_canuse: 1 },
+    { b_id: 'f2', b_field: 'amount', b_name: '订单金额', b_type: 'money', b_canuse: 1 },
+    { b_id: 'f3', b_field: 'status', b_name: '订单状态', b_type: 'select', b_canuse: 1 },
+    { b_id: 'f4', b_field: 'remark', b_name: '备注', b_type: 'textarea', b_canuse: 1 },
+  ]
+  const mountTableEdit = (overrides = {}) =>
+    mount(ModuleEditConfigPanel, {
+      props: {
+        moduleId: '2',
+        editConfig: tableRows,
+        listConfig: [],
+        queryConfig: [],
+        fields,
+        groups: [],
+        referencedGroupIds: [],
+        editMode: 'table',
+        loading: false,
+        ...overrides,
+      },
+      global: {
+        stubs: {
+          FmsTable: {
+            name: 'FmsTable',
+            props: ['columns'],
+            template: '<div class="stub-fmstable" />',
+          },
+          FieldGroupManager: true,
+          Draggable: stubDraggable,
+        },
+      },
+      attachTo: document.body,
+    })
+
+  // 列清单 draggable：列表元素均为编辑行（含 b_field_id，与字段库的 b_field 区分）
+  function columnDraggableOf(wrapper) {
+    return wrapper.findAllComponents(stubDraggable).find((c) => {
+      const l = c.props('list')
+      return Array.isArray(l) && l.length > 0 && l.every((i) => i.b_field_id != null)
+    })
+  }
+
+  it('表格模式：纵向列卡片列表按分区展示，隐藏表单画布 / 分组管理 / 容器/说明文字', async () => {
+    const wrapper = mountTableEdit()
+    await nextTick()
+    expect(wrapper.find('.mm-tdesign__sheet').exists()).toBe(true)
+    expect(wrapper.findAll('.mm-tdesign__col')).toHaveLength(3)
+    // 表单画布分区不存在（类名 .mm-fdesign__section，与子表分区 .mm-tdesign__section 区分）
+    expect(wrapper.find('.mm-fdesign__section').exists()).toBe(false)
+    expect(wrapper.text()).not.toContain('分组管理')
+    // 子表布局组件区只有「表头分组」，不包含「分组容器」「说明文字」
+    expect(wrapper.text()).not.toContain('分组容器')
+    expect(wrapper.text()).not.toContain('说明文字')
+    // 默认无分组，列在未分组区
+    expect(wrapper.find('.mm-tdesign__section.is-ungrouped').exists()).toBe(true)
+    // 工具栏：列数统计 + 隐藏列提示 + 预览按钮
+    const toolbar = wrapper.find('.mm-tdesign__toolbar')
+    expect(toolbar.text()).toContain('3')
+    expect(toolbar.text()).toContain('1 列隐藏')
+    expect(toolbar.find('.mm-tdesign__preview-btn').exists()).toBe(true)
+    // 卡片按 b_xh 顺序展示名称/类型/列宽/必填星号，隐藏列带角标
+    const cards = wrapper.findAll('.mm-tdesign__col')
+    expect(cards[0].text()).toContain('订单编号')
+    expect(cards[1].text()).toContain('订单金额')
+    expect(cards[2].text()).toContain('订单状态')
+    expect(cards[0].text()).toContain('160px')
+    expect(cards[0].text()).toContain('输入框')
+    expect(cards[0].text()).toContain('*')
+    expect(cards[2].classes()).toContain('is-invisible')
+    expect(cards[2].text()).toContain('隐藏')
+  })
+
+  it('点击列卡片：选中并显示属性，步进/输入修改列宽 emit update(b_width)', async () => {
+    const wrapper = mountTableEdit()
+    await nextTick()
+    const col = wrapper.find('.mm-tdesign__col[data-field-id="f2"]')
+    await col.trigger('click')
+    await nextTick()
+    expect(col.classes()).toContain('is-selected')
+    expect(wrapper.find('.mm-fdesign__inspector').text()).toContain('订单金额')
+    // 列宽下拉当前值为 140（头部编辑方式 Select 与列宽 Select 并存，按 id 定位）
+    expect(wrapper.findComponent('#mm-tdesign-width').props('modelValue')).toBe('140')
+
+    // 步进 +10
+    await wrapper.find('button[aria-label="列宽加 10"]').trigger('click')
+    await nextTick()
+    let last = wrapper.emitted('update').at(-1)[0]
+    expect(last.find((r) => r.b_field_id === 'f2').b_width).toBe(150)
+
+    // 数字输入自定义列宽
+    await wrapper.find('input[aria-label="自定义列宽"]').setValue('200')
+    await nextTick()
+    last = wrapper.emitted('update').at(-1)[0]
+    expect(last.find((r) => r.b_field_id === 'f2').b_width).toBe(200)
+  })
+
+  it('字段库点击添加列：默认列宽按字段类型生成并自动选中', async () => {
+    const wrapper = mountTableEdit()
+    await nextTick()
+    const remark = wrapper
+      .findAll('.mm-fdesign__lib-item')
+      .find((el) => el.text().includes('备注'))
+    await remark.trigger('click')
+    await nextTick()
+    const last = wrapper.emitted('update').at(-1)[0]
+    const row = last.find((r) => r.b_field_id === 'f4')
+    expect(row).toBeTruthy()
+    expect(row.b_width).toBe(220) // textarea 默认列宽 220
+    expect(row.b_visible).toBe(1)
+    expect(wrapper.find('.mm-tdesign__col[data-field-id="f4"]').classes()).toContain('is-selected')
+  })
+
+  it('预览子表弹窗：打开显示真实表格（冻结列 + 样例控件），可关闭', async () => {
+    const wrapper = mountTableEdit()
+    await nextTick()
+    await wrapper.find('.mm-tdesign__preview-btn').trigger('click')
+    await nextTick()
+    // Modal 经 Teleport 渲染到 body
+    const table = document.body.querySelector('.mm-tdesign__preview-wrap .mm-tdesign__table')
+    expect(table).toBeTruthy()
+    const heads = document.body.querySelectorAll('.mm-tdesign__head-cell')
+    expect(heads).toHaveLength(3)
+    expect(heads[0].textContent).toContain('订单编号')
+    expect(heads[0].textContent).toContain('160')
+    // 样例数据行：真实控件外观 + 冻结列（分组行 + 列名行 + 数据行，共 3 行 × 2 冻结列）
+    expect(document.body.querySelectorAll('.mm-tdesign__cell')).toHaveLength(3)
+    expect(document.body.querySelector('.mm-tdesign__sample.is-money').textContent).toContain('¥')
+    expect(document.body.querySelectorAll('.mm-tdesign__frozen')).toHaveLength(6)
+    // 无分组时第一级表头只有一个空标题分组格
+    const groupCells = document.body.querySelectorAll('.mm-tdesign__group-cell')
+    expect(groupCells).toHaveLength(1)
+    expect(groupCells[0].classList.contains('is-unnamed')).toBe(true)
+    // 关闭弹窗
+    document.body.querySelector('button.fms-modal-header-btn[aria-label="关闭"]').click()
+    await nextTick()
+    expect(document.body.querySelector('.mm-tdesign__preview-wrap')).toBeFalsy()
+  })
+
+  it('列清单拖拽排序：end 后重排 b_xh 并 emit update', async () => {
+    const wrapper = mountTableEdit()
+    await nextTick()
+    const list = columnDraggableOf(wrapper)
+    expect(list).toBeTruthy()
+    list.vm.$emit('start', { item: itemEl('f1') })
+    // 模拟 SortableJS 就地重排：把 e1 移到末尾
+    const arr = list.props('list')
+    const [moved] = arr.splice(0, 1)
+    arr.push(moved)
+    list.vm.$emit('end')
+    await nextTick()
+    const last = wrapper.emitted('update').at(-1)[0]
+    expect(last.map((r) => r.b_field_id)).toEqual(['f2', 'f3', 'f1'])
+    expect(last.map((r) => r.b_xh)).toEqual([10, 20, 30])
+  })
+
+  it('字段库克隆 add 进列清单：重排序号并选中新列', async () => {
+    const wrapper = mountTableEdit()
+    await nextTick()
+    const list = columnDraggableOf(wrapper)
+    const arr = list.props('list')
+    arr.push({
+      b_id: 'e9',
+      b_module_id: '2',
+      b_field_id: 'f4',
+      b_group_id: null,
+      b_visible: 1,
+      b_required: 0,
+      b_readonly: 0,
+      b_disabled: 0,
+      b_width: 220,
+      b_xh: 0,
+    })
+    // 模拟 SortableJS add 事件：from = 字段库列表，to = 列分组列表（未分组）
+    list.vm.$emit('add', {
+      newIndex: arr.length - 1,
+      from: { classList: { contains: () => true } },
+      to: { dataset: { groupId: 'ungrouped' }, classList: { contains: () => false } },
+    })
+    await nextTick()
+    const last = wrapper.emitted('update').at(-1)[0]
+    expect(last.map((r) => r.b_field_id)).toEqual(['f1', 'f2', 'f3', 'f4'])
+    expect(last.find((r) => r.b_field_id === 'f4').b_xh).toBe(40)
+    expect(wrapper.find('.mm-tdesign__col[data-field-id="f4"]').classes()).toContain('is-selected')
+  })
+
+  it('字段库克隆 add 重复字段：警告并移除新行（不 emit update）', async () => {
+    const wrapper = mountTableEdit()
+    await nextTick()
+    const list = columnDraggableOf(wrapper)
+    const arr = list.props('list')
+    arr.push({
+      b_id: 'e9',
+      b_module_id: '2',
+      b_field_id: 'f2',
+      b_group_id: null,
+      b_visible: 1,
+      b_required: 0,
+      b_readonly: 0,
+      b_disabled: 0,
+      b_width: 140,
+      b_xh: 0,
+    })
+    list.vm.$emit('add', {
+      newIndex: arr.length - 1,
+      from: { classList: { contains: () => true } },
+      to: { dataset: { groupId: 'ungrouped' }, classList: { contains: () => false } },
+    })
+    await nextTick()
+    expect(Message.warning).toHaveBeenCalled()
+    // 重复行被移除，f2 仍只有一行；未提交变更（无 update 事件）
+    expect(arr.filter((r) => r.b_field_id === 'f2')).toHaveLength(1)
+    expect(arr).toHaveLength(3)
+    expect(wrapper.emitted('update')).toBeUndefined()
+  })
+
+  it('数据视图：表格模式隐藏分组/栅格/占位符列，显示列宽列', async () => {
+    const wrapper = mountTableEdit()
+    await nextTick()
+    await wrapper.find('button[data-view="data"]').trigger('click')
+    await nextTick()
+    const table = wrapper.findComponent({ name: 'FmsTable' })
+    const colKeys = table.props('columns').map((c) => c.dataIndex)
+    expect(colKeys).toContain('b_width')
+    expect(colKeys).not.toContain('b_group_id')
+    expect(colKeys).not.toContain('b_colspan')
+    expect(colKeys).not.toContain('b_placeholder')
+    expect(colKeys).not.toContain('b_height')
+  })
+
+  // 带一个分组（g1 金额信息）的挂载：f1/f2 在组内，f3 未分组
+
+  it('头部编辑方式下拉：显示表单设计/表格设计，切换 emit update:editMode', async () => {
+    const wrapper = mountTableEdit()
+    await nextTick()
+    // 第一个 Select 为头部编辑方式（modelValue = props.editMode）
+    const modeSelect = wrapper.findAllComponents({ name: 'Select' })[0]
+    expect(modeSelect.props('modelValue')).toBe('table')
+    modeSelect.vm.$emit('update:model-value', 'form')
+    await nextTick()
+    expect(wrapper.emitted('update:editMode').at(-1)[0]).toBe('form')
+  })
+
+  it('拖拽中隐藏空分组提示（避免与拖拽占位重叠显示两行）', async () => {
+    // 预置：空分组 g1 + 未分组列 f1
+    const wrapper = mountTableEdit({
+      groups: [
+        {
+          b_id: 'g1',
+          b_module_id: '2',
+          b_parent_id: null,
+          b_title: '空组',
+          b_i18n: null,
+          b_layout_direction: 'vertical',
+          b_xh: 10,
+          b_canuse: 1,
+        },
+      ],
+      editConfig: [tableRows[0]],
+    })
+    await nextTick()
+    // 拖拽前：空分组显示拖入提示
+    expect(wrapper.find('.mm-tdesign__section-drop-hint').text()).toContain('空分组')
+    // 模拟拖拽开始（dragPayload 置位）→ 提示隐藏
+    const list = columnDraggableOf(wrapper)
+    list.vm.$emit('start', { item: itemEl('f1') })
+    await nextTick()
+    expect(wrapper.find('.mm-tdesign__section-drop-hint').exists()).toBe(false)
+    list.vm.$emit('end')
+    await nextTick()
+  })
+
+  it('字段库点击添加：自动滚动到新列位置', async () => {
+    const scrollSpy = vi.spyOn(Element.prototype, 'scrollIntoView').mockImplementation(() => {})
+    try {
+      const wrapper = mountTableEdit()
+      await nextTick()
+      const remark = wrapper
+        .findAll('.mm-fdesign__lib-item')
+        .find((el) => el.text().includes('备注'))
+      await remark.trigger('click')
+      await nextTick()
+      await nextTick()
+      expect(scrollSpy).toHaveBeenCalled()
+      // 滚动的目标为新列卡片
+      const target = scrollSpy.mock.instances[scrollSpy.mock.instances.length - 1]
+      expect(target.className).toContain('mm-tdesign__col')
+    } finally {
+      scrollSpy.mockRestore()
+    }
+  })
+
+  it('添加表头分组：emit updateGroups，新空分区出现', async () => {
+    const wrapper = mountTableEdit()
+    await nextTick()
+    await wrapper.find('.mm-tdesign__add-group').trigger('click')
+    await nextTick()
+    const newGroups = wrapper.emitted('updateGroups').at(-1)[0]
+    expect(newGroups).toHaveLength(1)
+    expect(newGroups[0].b_title).toBe('新分组')
+    // 父组件响应 updateGroups 后，画布渲染新分组（空分区拖入提示）
+    await wrapper.setProps({ groups: newGroups })
+    await nextTick()
+    const titles = wrapper.findAll('.mm-tdesign__section-title').map((t) => t.text())
+    expect(titles.some((t) => t.includes('新分组'))).toBe(true)
+    expect(wrapper.find('.mm-tdesign__section-drop-hint').text()).toContain('空分组')
+  })
+
+  it('字段库已添加字段标记 data-added（拖拽被 filter 拦截，已添加字段不可再拖）', async () => {
+    const wrapper = mountTableEdit()
+    await nextTick()
+    // f2 已在列中 → data-added=true（filter 选择器命中，mousedown 不启动拖拽）
+    expect(wrapper.find('.mm-fdesign__lib-item[data-field-id="f2"]').attributes('data-added')).toBe(
+      'true',
+    )
+    // f4 未加入 → data-added=false
+    expect(wrapper.find('.mm-fdesign__lib-item[data-field-id="f4"]').attributes('data-added')).toBe(
+      'false',
+    )
+  })
+
+  it('字段库拖入已存在字段到其他分组：拒绝并移除克隆（防重查全部列，不只目标组）', async () => {
+    // 预置：f2 在分组 g1，g2 为空分组，f1 未分组
+    const wrapper = mountTableEdit({
+      groups: [
+        {
+          b_id: 'g1',
+          b_module_id: '2',
+          b_parent_id: null,
+          b_title: '金额信息',
+          b_i18n: null,
+          b_layout_direction: 'vertical',
+          b_xh: 10,
+          b_canuse: 1,
+        },
+        {
+          b_id: 'g2',
+          b_module_id: '2',
+          b_parent_id: null,
+          b_title: '空组',
+          b_i18n: null,
+          b_layout_direction: 'vertical',
+          b_xh: 20,
+          b_canuse: 1,
+        },
+      ],
+      editConfig: [
+        { ...tableRows[1], b_group_id: 'g1', b_xh: 10 }, // f2 在 g1
+        { ...tableRows[0], b_group_id: null, b_xh: 20 }, // f1 未分组
+      ],
+    })
+    await nextTick()
+    // 空分组 g2 的 draggable（list 为空数组）
+    const g2List = wrapper
+      .findAllComponents(stubDraggable)
+      .find((c) => Array.isArray(c.props('list')) && c.props('list').length === 0)
+    expect(g2List).toBeTruthy()
+    const arr = g2List.props('list')
+    arr.push({
+      b_id: 'e9',
+      b_module_id: '2',
+      b_field_id: 'f2', // 已在 g1 存在
+      b_group_id: null,
+      b_visible: 1,
+      b_required: 0,
+      b_readonly: 0,
+      b_disabled: 0,
+      b_width: 140,
+      b_xh: 0,
+    })
+    g2List.vm.$emit('add', {
+      newIndex: 0,
+      from: { classList: { contains: () => true } },
+      to: { dataset: { groupId: 'g2' }, classList: { contains: () => false } },
+    })
+    await nextTick()
+    expect(Message.warning).toHaveBeenCalled()
+    // 克隆被移除，未提交变更
+    expect(arr).toHaveLength(0)
+    expect(wrapper.emitted('update')).toBeUndefined()
+  })
+
+  it('跨组拖拽：列拖入分组后 @end 同步 b_group_id 并按分组顺序重排', async () => {
+    const wrapper = mountTableEdit(groupFixture(tableRows))
+    await nextTick()
+    // 定位分区列表：g1（2 列，均含 b_field_id）与未分组（1 列）
+    const lists = wrapper.findAllComponents(stubDraggable).filter(isColumnList)
+    const g1List = lists.find((c) => c.props('list').length === 2)
+    const ungroupedList = lists.find((c) => c.props('list').length === 1)
+    expect(g1List).toBeTruthy()
+    expect(ungroupedList).toBeTruthy()
+    // 模拟 SortableJS 跨组移动：f3 从未分组移入 g1 末尾
+    const srcArr = ungroupedList.props('list')
+    const [moved] = srcArr.splice(0, 1)
+    const g1Arr = g1List.props('list')
+    g1Arr.push(moved)
+    g1List.vm.$emit('add', {
+      newIndex: g1Arr.length - 1,
+      from: { classList: { contains: () => false } },
+      to: { dataset: { groupId: 'g1' }, classList: { contains: () => false } },
+    })
+    ungroupedList.vm.$emit('end')
+    await nextTick()
+    const last = wrapper.emitted('update').at(-1)[0]
+    expect(last.map((r) => r.b_field_id)).toEqual(['f1', 'f2', 'f3'])
+    expect(last.find((r) => r.b_field_id === 'f3').b_group_id).toBe('g1')
+    expect(last.map((r) => r.b_xh)).toEqual([10, 20, 30])
+    // 画布上 f3 已进入分组分区
+    expect(g1List.props('list').map((r) => r.b_field_id)).toEqual(['f1', 'f2', 'f3'])
+  })
+
+  it('预览弹窗：有分组时渲染两级表头（分组名跨列 = 组内列宽之和）', async () => {
+    const wrapper = mountTableEdit(groupFixture(tableRows))
+    await nextTick()
+    await wrapper.find('.mm-tdesign__preview-btn').trigger('click')
+    await nextTick()
+    const groupCells = document.body.querySelectorAll('.mm-tdesign__group-cell')
+    expect(groupCells).toHaveLength(2) // 金额信息 + 未分组列
+    expect(groupCells[0].textContent).toContain('金额信息')
+    expect(groupCells[0].style.width).toBe('300px') // 160 + 140
+    expect(groupCells[1].classList.contains('is-unnamed')).toBe(true)
+    expect(groupCells[1].style.width).toBe('160px')
+    // 列名行仍在
+    expect(document.body.querySelectorAll('.mm-tdesign__head-cell')).toHaveLength(3)
+    document.body.querySelector('button.fms-modal-header-btn[aria-label="关闭"]').click()
+    await nextTick()
+  })
+
+  // 打开预览弹窗（表格经 Modal Teleport 渲染到 body），返回表格元素
+  async function openPreview(wrapper) {
+    await wrapper.find('.mm-tdesign__preview-btn').trigger('click')
+    await nextTick()
+    return document.body.querySelector('.mm-tdesign__preview-wrap .mm-tdesign__table')
+  }
+
+  function previewHandle(fieldId) {
+    return document.body.querySelector(`.mm-tdesign__resize-handle[data-field-id="${fieldId}"]`)
+  }
+
+  it('预览弹窗拖拽调整列宽：实时更新表头，松手后 emit update(b_width)', async () => {
+    const wrapper = mountTableEdit()
+    await nextTick()
+    await openPreview(wrapper)
+    const handle = previewHandle('f2')
+    expect(handle).toBeTruthy()
+    handle.dispatchEvent(new MouseEvent('mousedown', { clientX: 100, bubbles: true }))
+    // 拖拽中：仅本地实时改宽（表头列宽变化），不提交
+    window.dispatchEvent(new MouseEvent('mousemove', { clientX: 160 }))
+    await nextTick()
+    expect(wrapper.emitted('update')).toBeUndefined()
+    const resizingCol = document.body.querySelector('.mm-tdesign__head-cell.is-resizing-col')
+    expect(resizingCol.attributes['style'].value).toContain('width: 200px')
+    // 松手：提交新宽度并自动选中该列
+    window.dispatchEvent(new MouseEvent('mouseup', { clientX: 160 }))
+    await nextTick()
+    const last = wrapper.emitted('update').at(-1)[0]
+    expect(last.find((r) => r.b_field_id === 'f2').b_width).toBe(200)
+    expect(wrapper.find('.mm-tdesign__col[data-field-id="f2"]').classes()).toContain('is-selected')
+  })
+
+  it('预览弹窗列宽拖拽限制在 40–600px', async () => {
+    const wrapper = mountTableEdit()
+    await nextTick()
+    await openPreview(wrapper)
+    const handle = previewHandle('f1')
+    // 向左拖到极限 → 40
+    handle.dispatchEvent(new MouseEvent('mousedown', { clientX: 100, bubbles: true }))
+    window.dispatchEvent(new MouseEvent('mousemove', { clientX: -99999 }))
+    window.dispatchEvent(new MouseEvent('mouseup', { clientX: -99999 }))
+    await nextTick()
+    let last = wrapper.emitted('update').at(-1)[0]
+    expect(last.find((r) => r.b_field_id === 'f1').b_width).toBe(40)
+    // 向右拖到极限 → 600
+    handle.dispatchEvent(new MouseEvent('mousedown', { clientX: 100, bubbles: true }))
+    window.dispatchEvent(new MouseEvent('mousemove', { clientX: 99999 }))
+    window.dispatchEvent(new MouseEvent('mouseup', { clientX: 99999 }))
+    await nextTick()
+    last = wrapper.emitted('update').at(-1)[0]
+    expect(last.find((r) => r.b_field_id === 'f1').b_width).toBe(600)
+  })
+
+  it('预览弹窗列宽手柄键盘左右键微调 ±10px', async () => {
+    const wrapper = mountTableEdit()
+    await nextTick()
+    await openPreview(wrapper)
+    const handle = previewHandle('f2')
+    handle.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }))
+    await nextTick()
+    let last = wrapper.emitted('update').at(-1)[0]
+    expect(last.find((r) => r.b_field_id === 'f2').b_width).toBe(150)
+    handle.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }))
+    await nextTick()
+    last = wrapper.emitted('update').at(-1)[0]
+    expect(last.find((r) => r.b_field_id === 'f2').b_width).toBe(140)
+  })
+
+  it('预览弹窗双击列宽手柄：恢复字段类型默认列宽', async () => {
+    const wrapper = mountTableEdit()
+    await nextTick()
+    await openPreview(wrapper)
+    const handle = previewHandle('f2')
+    // 先拖到 300
+    handle.dispatchEvent(new MouseEvent('mousedown', { clientX: 100, bubbles: true }))
+    window.dispatchEvent(new MouseEvent('mousemove', { clientX: 260 }))
+    window.dispatchEvent(new MouseEvent('mouseup', { clientX: 260 }))
+    await nextTick()
+    expect(wrapper.emitted('update').at(-1)[0].find((r) => r.b_field_id === 'f2').b_width).toBe(300)
+    // 双击恢复 money 默认 140
+    previewHandle('f2').dispatchEvent(new MouseEvent('dblclick', { bubbles: true }))
+    await nextTick()
+    const last = wrapper.emitted('update').at(-1)[0]
+    expect(last.find((r) => r.b_field_id === 'f2').b_width).toBe(140)
+  })
+})