From 61ac01075b1e06b265fcfa6af71635a75b3b3b2f Mon Sep 17 00:00:00 2001
From: ZhangAo <hi_itao@163.com>
Date: Fri, 28 Aug 2026 14:14:03 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E9=87=8D=E6=9E=84=E5=89=8D=E5=9F=BA?=
 =?UTF-8?q?=E7=BA=BF=E5=BF=AB=E7=85=A7=EF=BC=88=E5=B7=A5=E4=BD=9C=E5=8C=BA?=
 =?UTF-8?q?=E6=97=A2=E6=9C=89=E6=94=B9=E5=8A=A8=20+=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E8=AE=A1=E5=88=92=E6=96=87=E6=A1=A3=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../module-management-code-refactor-plan.md   | 303 ++++++++++++++
 .../src/components/fms-table/FmsTable.vue     | 173 +++++++-
 .../src/components/ui/select/index.scss       |   2 +-
 .../components/ModuleAutoCodePanel.vue        |  85 ++--
 .../components/ModuleTableEditPanel.vue       | 378 ++++++++++++++++--
 .../structure-tree/ModuleStructureTree.vue    | 345 +++++++++++-----
 .../structure-tree/StructureTreeNode.vue      | 174 ++++++--
 code/fms/fms-vue/tests/helpers/app.js         |   4 +-
 .../unit/module-table-edit-panel-dnd.spec.js  | 248 ++++++++++--
 9 files changed, 1474 insertions(+), 238 deletions(-)
 create mode 100644 code/fms/fms-vue/docs/module-management-code-refactor-plan.md

diff --git a/code/fms/fms-vue/docs/module-management-code-refactor-plan.md b/code/fms/fms-vue/docs/module-management-code-refactor-plan.md
new file mode 100644
index 00000000..46186e21
--- /dev/null
+++ b/code/fms/fms-vue/docs/module-management-code-refactor-plan.md
@@ -0,0 +1,303 @@
+# `/system/module-management` 代码重构计划（还债专项）
+
+> 本文是**纯代码重构**计划：不改任何行为、UI 文案、API 调用和保存协议。
+> 与 `docs/module-management-refactor-plan.md`（功能改造历史记录）无关，请勿混淆。
+> 执行前请先通读本文第 1、2 节和第 8 节（禁改清单）。
+
+## 1. 背景与问题
+
+模块管理功能已基本完成，但代码存在三类结构性债务：
+
+1. **巨型文件**：`ModuleFormEditPanel.vue` 3709 行、`ModuleTableEditPanel.vue` 2962 行、
+   `index.vue` 1522 行，全模块约 1.2 万行。
+2. **三处复制的"同源"逻辑**：分组树推导在面板与结构树组件间整段复制（注释自述
+   "与面板 bandMeta 同源"）；两个编辑面板共享约 20 个同名函数。靠人肉同步，改一处漏
+   一处就是 bug。
+3. **index.vue 职责过重**：树管理、草稿加载、保存编排、删除级联、i18n 协调、确认弹窗
+   全部平铺在一个 `<script setup>` 里，`saveModule` 单函数约 120 行。
+
+目标：在不改变任何外部行为的前提下消除上述债务，让后续功能开发有清晰的落点。
+
+## 2. 当前代码范围（行数为 2026-08 时点，执行时以符号名为准）
+
+```text
+src/views/system/module-management/
+  index.vue                                  1522  容器：树 + 草稿 + 保存编排
+  common.js                                     6
+  components/
+    ModuleFormEditPanel.vue                  3709  主表表单设计器
+    ModuleTableEditPanel.vue                 2962  子表表格设计器
+    ModuleBasicPanel.vue / ModuleFieldsPanel.vue / ModuleListConfigPanel.vue
+    ModuleQueryConfigPanel.vue / ModuleAutoCodePanel.vue / ModulePowersPanel.vue
+    ModuleI18nPanel.vue / MenuDetailPanel.vue / I18nQuickSetModal.vue / IconSelect.vue
+    structure-tree/
+      ModuleStructureTree.vue                 963  专用结构编辑树（拖拽/右键/重命名）
+      StructureTreeNode.vue                   584  树节点（递归渲染）
+tests/unit/
+  module-table-edit-panel-dnd.spec.js         443  拖拽语义测试（重构的安全网）
+  tree-external-drag.spec.js
+  utils.spec.js
+```
+
+现有 utils/composables 层（新代码遵循同样习惯）：
+`@/utils/tree.js`（buildTree/sortTree）、`@/utils/dataChanges.js`（diffRows/tableChange/
+allocateTemporaryIds/remapForeignKeys）、`@/utils/i18n.js`、`@/utils/tempId.js`、
+`@/composables/useHotkeys.js`。
+
+## 3. 同源复制清单（重构的核心对象）
+
+### 3.1 分组树推导：`ModuleTableEditPanel.vue` ⟷ `structure-tree/ModuleStructureTree.vue`
+
+以下符号在两个文件中各有一份、语义一致（面板版 bandMeta 额外计算 maxLevel）：
+
+| 符号 | 作用 |
+| --- | --- |
+| `sortGroupNodesByXh` | 按 b_xh 排序分组节点（注意两处都注释了 toSorted 必须回写原数组） |
+| `buildGroupTree` | 分组扁平数组 → 树 |
+| `groupTree` / `groupNodeMap` | 树 computed / gid→节点 Map |
+| `groupColumnsMap` | gid→直属列 Map + 未分组列数组 |
+| `bandMeta` | 层级/ownCount/span/children 元信息（面板版含 maxLevel） |
+| `isDescendantOf` / `isDescendantGroup` | 判断分组祖先-子孙关系（防拖入自身子树成环） |
+| `FIELD_TYPE_LABELS` + `fieldNameMap` / `fieldMap` / `fieldName` / `controlTypeLabel` / `groupIdOfRow` | 字段查询与标签 |
+
+### 3.2 两个编辑面板的共享函数：`ModuleFormEditPanel.vue` ⟷ `ModuleTableEditPanel.vue`
+
+同名（或仅改名）且核心语义一致的符号：
+
+`onEditModeChange`、`emitUpdate`、`onRowOrderChange`、`renumberRows`、
+`groupIdOfRow`/`groupIdOf`、`fieldNameMap`、`fieldMap`、`fieldOf`、`fieldName`、
+`controlTypeLabel`、`FIELD_TYPE_LABELS`、`libraryFields`、`isFieldAdded`、`nextGroupXh`、
+`selectedRow`、`selectRow`、`createEditRow`、`insertField`、`selectField`、
+`copyRowProps`、`pastePropsToSelected`、`toggleInspector`/`toggleRowFlag`、
+`syncToList`、`syncToQuery`、`scrollToRowCell`/`scrollToRowCard`
+
+**注意：同名不等于同体。** 例如 `createEditRow` 在表格面板写 `b_width`/`b_height`，
+在表单面板写 `b_colspan` 等；`insertField` 的落点参数也不完全相同。抽取前必须逐对
+diff 函数体，按第 5.2 节的三条规则归类，禁止强行合并。
+
+## 4. 总体约束（每个阶段都适用）
+
+1. **纯重构**：不改行为、不改 UI 结构与文案、不改 props/emits 契约（子面板对父级的
+   接口保持不变）、不改 API 调用与保存请求结构、不引入任何新依赖（包括拖拽库）。
+2. **现有测试是安全网**：`tests/unit/module-table-edit-panel-dnd.spec.js` 及其它测试
+   必须全程绿；除 import 路径外不允许修改测试断言。若某步导致断言失败，说明该步
+   改变了行为，应回退重做。
+3. **每阶段一个独立 commit**，commit message 注明阶段号。开始前若工作区有未提交
+   改动，先提交或暂存，保证基线干净。
+4. **保持注释纪律**：项目注释是"为什么"型中文注释；搬运代码时注释随行；删除复制
+   体后，同步删除"与面板 bandMeta 同源"这类描述复制关系的注释（已不成立）。
+5. **不重写响应式模型**：`localEdit` 本地副本 + watch props、`localGroups` 绕过回流
+   等模式虽然别扭但经过调试，本次只搬运不重新设计。
+6. 每阶段结束运行：`pnpm test && pnpm lint`（最终再跑一次 `pnpm check`）。
+
+## 5. 阶段任务
+
+### 阶段一：抽取分组树推导 composable（风险最低、收益最大，先做）
+
+新建 `src/views/system/module-management/composables/useGroupTree.js`：
+
+```text
+useGroupTree(groupsRef, rowsRef)
+  入参：groups 的 ref/computed（面板传 props 派生，结构树传 localGroups），
+        rows 的 ref/computed（编辑行数组）
+  返回：groupTree、groupNodeMap、groupColumnsMap、bandMeta（统一含 maxLevel）、
+        isDescendantGroup(ancestorGid, gid)、groupIdOfRow(row)
+  纯函数另行导出：buildGroupTree(groups)、sortGroupNodesByXh(nodes)
+```
+
+改造点：
+
+- `ModuleTableEditPanel.vue`：删除本地 `sortGroupNodesByXh`/`buildGroupTree`/
+  `groupTree`/`groupNodeMap`/`groupColumnsMap`/`bandMeta`/`isDescendantOf`，改用
+  composable。`bandMeta` 统一含 `maxLevel` 后，`bandRows` 等消费处照常解构。
+- `structure-tree/ModuleStructureTree.vue`：同样替换；其 `bandMeta` 消费处不使用
+  maxLevel，多余字段无害。
+- **保持 watch 注册顺序**：`ModuleTableEditPanel.vue` 中 `watch(() => props.editConfig, …,
+  { immediate: true })` 必须位于 bandMeta 等 computed 定义之后（原文件有 TDZ 注释，
+  搬运时不得把 watch 上移）。
+
+验收：`pnpm test` 全绿；两个文件合计减少约 250 行；拖拽/右键/分组增删改手工冒烟
+（见第 7 节清单）无变化。
+
+### 阶段二：抽取字段查询与共享纯函数
+
+1. 新建 `src/views/system/module-management/composables/useFieldLookup.js`：
+
+   ```text
+   useFieldLookup(fieldsRef)
+     返回：fieldNameMap、fieldMap、fieldOf(row)、fieldName(row)、controlTypeLabel(row)
+   常量：FIELD_TYPE_LABELS
+   ```
+
+2. 新建 `src/views/system/module-management/editPanelShared.js`（纯函数，无 Vue 依赖）：
+
+   ```text
+   renumberRows(rows)                        // (i+1)*10 重排
+   buildClipboardProps(row, fieldNameOf)     // 复制列属性的键集合（两面板 diff 后统一）
+   applyClipboardProps(row, props)
+   buildVisibilityMap(rows)                  // syncToList/syncToQuery 共用的可见性 Map
+   ```
+
+3. 两个面板中 3.2 节列出的每个函数：先逐对 diff 函数体，再归三类处理——
+   - **完全相同** → 移入共享文件，原位改为导入；
+   - **语义相同、细节不同**（如 `createEditRow` 的默认值差异）→ 抽参数化工厂
+     （如 `createEditRowFactory(defaults)`），两面板各自传参；
+   - **本质不同** → 保留各自实现，不强行合并，在 PR 说明中列出。
+4. `syncToList`/`syncToQuery` 结构高度一致（仅目标数组与写回字段不同）：用
+   `buildVisibilityMap` 共享取数部分，emit 与提示文案留在各自面板。
+
+验收：`pnpm test` 全绿；两面板各减约 150–250 行；数据视图"同步到列表/查询配置"
+行为与提示文案不变。
+
+### 阶段三：拆分 index.vue
+
+目标：index.vue 只保留模板、状态接线和面板编排（预期 ≤ 700 行）。抽出的
+composables 放 `src/views/system/module-management/composables/`：
+
+```text
+useModuleTree.js    树状态与操作：moduleTreeData/Loading、moduleKeyword/ExpandedKeys、
+                    unsavedModuleIds、loadModuleTree、markCategoryNonLeaf、moduleTypeIconMap、
+                    filterTree/filteredModuleTree、collectAllKeys、expandAncestors、
+                    findModuleNode、insertModuleNode、removeModuleNode、
+                    hasSavedModuleDescendant、collectUnsavedModuleIds、
+                    buildBreadcrumb/moduleBreadcrumb、addModule、deleteModule
+useModuleConfig.js  草稿加载与脏检查：configLoading、originals/drafts、loadedModuleId、
+                    loadModuleConfig、hasModuleChanges、reloadModule、
+                    watch(moduleSelectedId) 及 skipModuleLoad 约定、onModuleSelect
+useModuleSave.js    保存编排：saveModule、validateAutoCode、subTables 常量、
+                    临时 id 分配与外键重映射、i18n reconcile 调用
+useConfirm.js       两套确认弹窗：通用 showConfirm/onConfirmOk/confirmState 与
+                    切换保护 switchConfirm/onSwitch*
+```
+
+要求：
+
+- composable 返回 index.vue 模板所需的最小集合；跨 composable 共享的状态
+  （如 `selectedModule`）由 index.vue 组装后传入，避免 composable 互相 import。
+- `saveModule` 依赖 `basicPanelRef`/`autoCodePanelRef`/`i18nPanelRef` 与
+  `finalI18nItems`，以参数（refs + getter）注入 `useModuleSave`，不移动模板。
+- `onFieldsUpdate`/`applyDisabledFieldDefaults`/`onAutoCodeUpdate` 属于草稿派生
+  联动，随 `useModuleConfig` 或留在 index.vue 均可，以"内聚"为准并在 commit 说明。
+
+验收：`pnpm test` 全绿；保存（含跨表外键重映射）、重载、切换未保存保护、删除模块
+（含 i18n 孤儿键清理）手工冒烟无变化。
+
+### 阶段四：编辑器目录化拆分（本计划的维护性核心，目标单文件 ≤ 700 行）
+
+两个编辑面板各 3000+ 行、script/template/style 混在一个文件，是维护痛点的主要
+来源。本阶段按"职责切分、只搬运不重写"把两个编辑器重组为目录：
+
+```text
+components/table-edit/
+  TableEditPanel.vue      壳：视图切换（设计/数据）、编辑方式切换（主表/子表）、布局编排   ≤ 300
+  FieldLibrary.vue        字段库：搜索 + 字段列表 + 拖出源（application/fms-field）         ≤ 250
+  TablePreview.vue        多级表头预览表：band 行渲染、mock 行、预览拖拽落点指示            ≤ 500
+  TableInspector.vue      属性面板：列属性 / 分组带属性 / 空态三态                          ≤ 400
+  useTablePreviewDrag.js  预览表拖拽：onPreviewDragStart/Over/Drop、落点指示状态            ≤ 180
+  useColumnResize.js      列宽拖拽：pointer capture 三件套 + 40–600 边界                    ≤ 100
+components/form-edit/
+  FormEditPanel.vue       壳：视图切换、编辑方式切换、布局编排                               ≤ 300
+  FormCanvas.vue          画布：分组区块 + 字段卡片 + 24 栅格行 + 插入线                      ≤ 700
+  FormInspector.vue       属性面板：栅格 / textarea 高度 / 状态开关等                        ≤ 450
+  useFormDrag.js          拖拽：跟手卡片、insert line 计算、落点提交（updateDragIntent 等）   ≤ 600
+  useFormGrid.js          栅格分配纯逻辑：collectLineIndexes/rebalanceInsert/distributeLine  ≤ 200
+components/edit-panels/
+  EditDataView.vue        两编辑器共享的数据视图：工具栏 + FmsTable + 行拖拽排序             ≤ 150
+```
+
+切分规则：
+
+1. **壳组件保留对外契约**：`TableEditPanel.vue` / `FormEditPanel.vue` 对 index.vue 的
+   props/emits 完全不变，index.vue 只改 import 路径。
+2. **状态归属**：`localEdit`、`localGroups`、选中态（selectedNodeKey/selectedRow）
+   留在壳组件，子组件通过 props/事件交互；`useXxx` composable 接收壳的 refs、返回
+   handlers 与状态，不自带数据源。
+3. **样式随组件迁移**（scoped），BEM 类名前缀（`mm-fdesign-` / `mm-tdesign-`）保持
+   不变，避免测试选择器与深层样式选择器失效；全局样式（如 `.mst-drag-badge`）留在
+   原文件并保留注释说明。
+4. `FieldLibrary` 两编辑器都需要但文案/点击行为有差异：优先做成参数化共享组件放在
+   `edit-panels/` 下；若 diff 后发现耦合过深，允许 form-edit 下保留一份薄的私有实现，
+   在交付说明中说明选择。
+5. 原 `components/ModuleTableEditPanel.vue` / `ModuleFormEditPanel.vue` 删除，由
+   壳组件顶替（路径变化后同步更新 index.vue import 与测试中的 import 路径，仅此
+   一处允许改测试文件，断言不动）。
+6. `structure-tree/` 已是独立目录，本阶段不动。
+
+停损：`FormCanvas` + `useFormDrag` 是全计划最大风险点（表单画布模板与拖拽状态机
+交织最深）。若拆 FormEditPanel 时出现难定位的行为差异，允许降级交付：完成
+table-edit/ 目录重组 + form-edit 仅抽 `useFormGrid.js`（纯逻辑无 UI 搬迁，风险低），
+其余记录到交付说明留待下轮。
+
+验收：`pnpm test` 全绿（dnd spec 通过 StubDraggable 定位 `.mst-node`，不受影响）；
+所有新文件 ≤ 700 行（参考目标）；设计/数据视图切换、属性面板编辑、列宽拖拽、
+字段库点击/拖出手工冒烟无变化。
+
+### 阶段五：收尾与小修
+
+1. 硬编码颜色收敛到 token：`ModuleTableEditPanel.vue` 中 `#d95757`（危险红）、
+   `#fafbfc`（列头底色）、`#e7f6ed`/`#146c41`（已加入勾选）等，替换为
+   `--fms-*` 变量（项目已有 `--fms-danger` 类 token，先查 `src/styles/` 再定值；
+   没有合适 token 则新增，不硬编码第二次）。
+2. `index.vue` 的 `deleteModule` 中 i18n 孤儿键清理 SQL 拼接（`b_key LIKE
+   'module.${code}.%'` 等）抽为 `@/utils/i18n.js` 的
+   `buildModuleI18nCleanupFilter(moduleType, moduleCode)`，并把"前缀匹配安全性依赖
+   `.` 与 `_` 不互撞"这一约定写成函数注释。调用处行为不变。
+3. 检查全模块不再有"`module-management` 内重复定义 `FIELD_TYPE_LABELS`"等残留
+   （grep 确认单一定义点）。
+
+### 阶段六：补测试
+
+1. `tests/unit/module-form-edit-panel.spec.js`：参照
+   `module-table-edit-panel-dnd.spec.js` 的手法（StubDraggable、
+   `document.elementFromPoint` mock、defineProperty 注入坐标）覆盖 FormEditPanel 的
+   核心纯逻辑：栅格 rebalance（`collectLineIndexes`/`rebalanceInsert`/`distributeLine`）、
+   行内移动 `moveSelectedRow`、复制/粘贴属性。
+2. 为 `composables/useGroupTree.js` 写直接单测：band 的 span/ownCount/层级计算、
+   参差深度、空分组占位、`isDescendantGroup` 防环。
+3. 若阶段三已把保存编排中的纯计算（subTables diff 收集、外键重映射输入输出）
+   拆为可测函数，为其补 spec；否则跳过不强求。
+
+验收：新增测试与既有测试全部通过；`pnpm check`（lint + fmt:check + build）通过。
+
+## 6. 建议的执行顺序与停损点
+
+- 顺序即阶段编号：一 → 二 → 三 → 四 → 五 → 六，每阶段独立 commit。
+- 阶段四风险最高（模板与拖拽状态机大搬家），其内部自带停损规则（见阶段四末尾）；
+  最低交付线为 table-edit/ 重组 + useFormGrid 抽取。阶段一~三、五不允许跳过。
+- 任何阶段若发现测试失败且 30 分钟内无法定位根因，回退该阶段 commit 并在交付
+  说明中记录现象。
+
+## 7. 手工冒烟清单（每阶段结束过一遍，重点阶段一、三、四）
+
+```text
+模块树：搜索展开/收起、右键新增三种模块、未保存节点置灰不可作父级、删除级联
+草稿：修改后切换模块弹三选一（保存并切换/放弃/取消）、重载确认、Ctrl/Cmd+S
+表格设计器：拖列换位/入组/出组、拖分组嵌套与排序、拖入自身子树被禁止、
+            右键增删改分组、分组内联重命名、列宽拖拽与步进、Ctrl+C/X/V、Delete、
+            未分组悬浮落点（无未分组列时）、字段库点击加入/定位
+表单设计器：字段拖入任意位置、插入线、栅格自动分配（12→6/6）、跨组移动、
+            textarea 高度、删除与恢复、同步到列表/查询
+保存：新增字段+新增分组后保存一次成功（验证临时 id 分配与 b_field_id/b_group_id 重映射）
+```
+
+## 8. 明确不要做的事情
+
+- 不改 `props/emits` 契约、不改保存请求结构、不改 API 参数。
+- 不重写 `localEdit`/`localGroups` 的响应式数据流，不把双快照（originals/drafts）
+  模式换成其它脏检查方案。
+- 不引入 TS、不引入新依赖、不做大规模重命名（`b_` 前缀数据库字段命名保持）。
+- 不把 `ModuleFormEditPanel` 与 `ModuleTableEditPanel` 合并为一个编辑器组件
+  （允许共享叶子组件如 `EditDataView`/`FieldLibrary`，但两个编辑器本体各自独立）。
+- 不删除任何"为什么"型注释；不修改既有测试的断言。
+- 不顺手修 UI 细节/交互问题（发现则记录到交付说明，另开任务）。
+
+## 9. 可直接交给其他 AI 的执行指令
+
+在 `fms-vue` 项目中按照 `docs/module-management-code-refactor-plan.md` 执行代码重构。
+先完整阅读该计划、`src/views/system/module-management/` 下的 index.vue、两个编辑面板、
+structure-tree/ 两个组件以及 `tests/unit/module-table-edit-panel-dnd.spec.js`，再按
+阶段一至阶段六逐步执行：每阶段一个 commit，阶段内先 diff 再抽取（同名函数不等于
+同体），全程保持行为不变。每阶段结束运行 `pnpm test && pnpm lint` 并按第 7 节清单
+手工冒烟；最终运行 `pnpm check`。交付时说明：各阶段修改的文件与行数变化、抽取的
+共享符号清单、哪些同名函数被判定为"本质不同"而未合并、测试与构建结果、以及执行
+过程中发现但未处理的问题。
diff --git a/code/fms/fms-vue/src/components/fms-table/FmsTable.vue b/code/fms/fms-vue/src/components/fms-table/FmsTable.vue
index 44872620..8500cb07 100644
--- a/code/fms/fms-vue/src/components/fms-table/FmsTable.vue
+++ b/code/fms/fms-vue/src/components/fms-table/FmsTable.vue
@@ -26,6 +26,9 @@ const props = defineProps({
   activeRowKey: { type: [String, Number], default: null },
   // 行拖拽排序：开启后显示拖拽手柄，并通过 row-order-change 回传排序后的完整数据。
   rowDraggable: { type: Boolean, default: false },
+  // 行拖拽触发方式：true=仅拖拽手柄列（默认，显示手柄图标）；
+  // false=整行可拖拽（不显示手柄列，拖拽任意单元格即可排序；输入/复选框控件除外，避免破坏编辑）。
+  rowDragHandle: { type: Boolean, default: true },
   // 存在 editor 配置的列默认可编辑；设为 false 可整体禁用编辑。
   editable: { type: Boolean, default: true },
   // 默认跟随应用深浅色模式，也允许单个表格显式覆盖。
@@ -80,21 +83,34 @@ let lastSize = null
 
 let resizeObserver = null
 onMounted(() => {
-  if (typeof ResizeObserver === 'undefined' || !rootRef.value) return
-  resizeObserver = new ResizeObserver(([entry]) => {
-    const { width, height } = entry.contentRect
-    if (width <= 0 || height <= 0) return
-    clearTimeout(resizeDebounceTimer)
-    resizeDebounceTimer = setTimeout(() => {
-      resizeDebounceTimer = 0
-      const xOnly = lastSize != null && lastSize.height === height && lastSize.width !== width
-      lastSize = { width, height }
-      refreshLayout(xOnly)
-    }, RESIZE_DEBOUNCE_MS)
-  })
-  resizeObserver.observe(rootRef.value)
+  if (typeof ResizeObserver !== 'undefined' && rootRef.value) {
+    resizeObserver = new ResizeObserver(([entry]) => {
+      const { width, height } = entry.contentRect
+      if (width <= 0 || height <= 0) return
+      clearTimeout(resizeDebounceTimer)
+      resizeDebounceTimer = setTimeout(() => {
+        resizeDebounceTimer = 0
+        const xOnly = lastSize != null && lastSize.height === height && lastSize.width !== width
+        lastSize = { width, height }
+        refreshLayout(xOnly)
+      }, RESIZE_DEBOUNCE_MS)
+    })
+    resizeObserver.observe(rootRef.value)
+  }
+  // 整行拖拽：挂载后等表格渲染完再给数据行加 draggable
+  setupWholeRowDrag()
 })
 
+// 数据/开关变化后重跑整行拖拽初始化（行增删、虚拟滚动重建时兜底）
+watch(
+  () => [props.rowDraggable, props.rowDragHandle, props.dataSource?.length],
+  async () => {
+    await nextTick()
+    setupWholeRowDrag()
+  },
+  { flush: 'post' },
+)
+
 const NAVIGATION_KEYS = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Tab'])
 const rowEditingStates = new WeakMap()
 let activeEditingRow = null
@@ -282,7 +298,7 @@ const displayColumns = computed(() => {
       resizable: false,
     })
   }
-  if (props.rowDraggable) cols.unshift(dragRowColumn)
+  if (props.rowDraggable && props.rowDragHandle) cols.unshift(dragRowColumn)
   if (hasRowSelection.value) cols.unshift(selectionColumn)
   return cols.map((column) => ({
     ...column,
@@ -313,6 +329,106 @@ function handleRowOrderChange(sourceIndex, targetIndex) {
   emit('row-order-change', [...rows], sourceIndex, targetIndex)
 }
 
+/* ================= 整行拖拽（无需手柄列） =================
+ * stk-table 原生行拖拽必须通过 dragRow 手柄列触发；当 rowDraggable && !rowDragHandle
+ * 时改用「整行可拖拽」：MutationObserver 给 tbody 数据行加 draggable 属性（兜底虚拟
+ * 滚动新建的行），根节点上 dragstart/dragover/drop 事件委托落点与手柄模式一致。 */
+const wholeRowDragSource = ref(-1)
+let wholeRowDragTr = null
+let wholeRowOverTr = null
+let rowDragObserver = null
+
+function applyDraggableToRows() {
+  const root = rootRef.value
+  if (!root) return
+  root.querySelectorAll('tbody tr[data-row-i]').forEach((tr) => {
+    tr.setAttribute('draggable', 'true')
+  })
+}
+
+function setupWholeRowDrag() {
+  teardownWholeRowDrag()
+  if (!props.rowDraggable || props.rowDragHandle || !rootRef.value) return
+  applyDraggableToRows()
+  const tbody = rootRef.value.querySelector('.stk-tbody-main')
+  if (tbody) {
+    rowDragObserver = new MutationObserver(applyDraggableToRows)
+    rowDragObserver.observe(tbody, { childList: true, subtree: true })
+  }
+}
+
+function teardownWholeRowDrag() {
+  rowDragObserver?.disconnect()
+  rowDragObserver = null
+  clearWholeRowDragVisuals()
+  wholeRowDragSource.value = -1
+}
+
+function clearWholeRowDragVisuals() {
+  wholeRowDragTr?.classList.remove('tr-dragging')
+  wholeRowDragTr = null
+  wholeRowOverTr?.classList.remove('tr-dragging-over')
+  wholeRowOverTr = null
+}
+
+function isInteractiveDragTarget(target) {
+  return !!target?.closest?.(
+    'input, textarea, select, button, a, [contenteditable], .fms-checkbox, .fms-cell-editor-root',
+  )
+}
+
+function onWholeRowDragStart(e) {
+  if (!props.rowDraggable || props.rowDragHandle) return
+  const tr = e.target?.closest?.('tr[data-row-i]')
+  if (!tr) return
+  if (isInteractiveDragTarget(e.target)) {
+    e.preventDefault()
+    return
+  }
+  wholeRowDragSource.value = Number(tr.dataset.rowI)
+  wholeRowDragTr = tr
+  tr.classList.add('tr-dragging')
+  if (e.dataTransfer) {
+    e.dataTransfer.effectAllowed = 'move'
+    e.dataTransfer.setData('text/plain', String(wholeRowDragSource.value))
+    e.dataTransfer.setDragImage?.(tr, 0, tr.offsetHeight / 2)
+  }
+}
+
+function onWholeRowDragOver(e) {
+  if (wholeRowDragSource.value < 0) return
+  e.preventDefault()
+  if (e.dataTransfer) e.dataTransfer.dropEffect = 'move'
+  const tr = e.target?.closest?.('tr[data-row-i]')
+  if (tr && tr !== wholeRowOverTr) {
+    wholeRowOverTr?.classList.remove('tr-dragging-over')
+    wholeRowOverTr = tr
+    tr.classList.add('tr-dragging-over')
+  }
+}
+
+function onWholeRowDrop(e) {
+  const source = wholeRowDragSource.value
+  if (source < 0) return
+  e.preventDefault()
+  const tr = e.target?.closest?.('tr[data-row-i]')
+  clearWholeRowDragVisuals()
+  wholeRowDragSource.value = -1
+  if (!tr) return
+  const target = Number(tr.dataset.rowI)
+  if (Number.isNaN(target) || target === source) return
+  const rows = [...props.dataSource]
+  const [moved] = rows.splice(source, 1)
+  rows.splice(target, 0, moved)
+  tableRef.value?.clearSelectedArea?.()
+  emit('row-order-change', rows, source, target)
+}
+
+function onWholeRowDragEnd() {
+  clearWholeRowDragVisuals()
+  wholeRowDragSource.value = -1
+}
+
 // 行高同时作为 CSS 变量与 StkTable 的 row-height / header-row-height
 const rowHeight = 34
 const headerRowHeight = 40
@@ -538,6 +654,7 @@ onBeforeUnmount(() => {
   clearTimeout(resizeDebounceTimer)
   resizeObserver?.disconnect()
   resizeObserver = null
+  teardownWholeRowDrag()
   removeNavigationListeners()
   clearEditActivateTimer()
   pressedNavigationKeys.clear()
@@ -555,7 +672,16 @@ defineExpose({
 </script>
 
 <template>
-  <div ref="rootRef" class="fms-table" @keydown.capture="handleKeydownCapture">
+  <div
+    ref="rootRef"
+    class="fms-table"
+    :class="{ 'is-whole-row-drag': rowDraggable && !rowDragHandle }"
+    @keydown.capture="handleKeydownCapture"
+    @dragstart="onWholeRowDragStart"
+    @dragover="onWholeRowDragOver"
+    @drop="onWholeRowDrop"
+    @dragend="onWholeRowDragEnd"
+  >
     <StkTable
       ref="tableRef"
       class="fms-table__inner"
@@ -566,13 +692,14 @@ defineExpose({
       :header-row-height="headerRowHeight"
       :virtual="effectiveVirtual"
       :virtual-x="virtualX"
+      :smooth-scroll="true"
       :auto-resize="false"
       :col-resizable="colResizable"
       :header-drag="columnDragConfig"
       :columns="displayColumns"
       @update:columns="onColumnsUpdate"
       :data-source="dataSource"
-      :drag-row-config="{ mode: rowDraggable ? 'insert' : 'none' }"
+      :drag-row-config="{ mode: rowDraggable && rowDragHandle ? 'insert' : 'none' }"
       :row-key="rowKey"
       :no-data-full="noDataFull"
       :show-overflow="showOverflow"
@@ -606,6 +733,20 @@ defineExpose({
   overflow: hidden;
 }
 
+/* 整行拖拽：数据行鼠标提示可拖拽；拖拽中的行半透明、落点高亮 */
+.fms-table.is-whole-row-drag .stk-tbody-main tr[data-row-i] {
+  cursor: grab;
+}
+
+.fms-table.is-whole-row-drag .stk-tbody-main tr[data-row-i].tr-dragging {
+  cursor: grabbing;
+  opacity: 0.45;
+}
+
+.fms-table.is-whole-row-drag .stk-tbody-main tr[data-row-i].tr-dragging-over {
+  box-shadow: inset 0 2px 0 0 var(--fms-primary);
+}
+
 .fms-table__inner {
   width: 100%;
   height: 100%;
diff --git a/code/fms/fms-vue/src/components/ui/select/index.scss b/code/fms/fms-vue/src/components/ui/select/index.scss
index bcaf024e..07edb05f 100644
--- a/code/fms/fms-vue/src/components/ui/select/index.scss
+++ b/code/fms/fms-vue/src/components/ui/select/index.scss
@@ -3,7 +3,7 @@
 .select {
   display: inline-block;
   vertical-align: middle;
-  min-width: 200px;
+  width: 100%;
 
   /* Popover 触发器默认 inline-flex 会收缩到内容宽度，
      改为块级填满 .select，保证触发器与下拉宽度一致 */
diff --git a/code/fms/fms-vue/src/views/system/module-management/components/ModuleAutoCodePanel.vue b/code/fms/fms-vue/src/views/system/module-management/components/ModuleAutoCodePanel.vue
index 5769aded..6e1f305a 100644
--- a/code/fms/fms-vue/src/views/system/module-management/components/ModuleAutoCodePanel.vue
+++ b/code/fms/fms-vue/src/views/system/module-management/components/ModuleAutoCodePanel.vue
@@ -2,6 +2,12 @@
 /**
  * 自动编码面板（s_autocode）：单条规则表单 + 实时预览。
  * 保存时 b_current_period / b_current_value 由服务端维护，前端不提交。
+ *
+ * 布局：
+ *   ┌ 顶部行：启用开关 + 业务编号字段
+ *   ├ 参数行：前缀 / 日期 / 分隔符 / 位数 / 起始值 单行排布
+ *   ├ 预览区：分段着色的编码预览，居中展示
+ *   └ 底部：重置周期
  */
 import { computed, ref, watch } from 'vue'
 import { Input, Select, Switch, Form, FormItem } from '@/components/ui'
@@ -185,14 +191,14 @@ function currentPeriod(date, resetType) {
   return yyyy + MM
 }
 
+/* 编码预览：前缀 + 日期 + 流水号 拼接后的完整文本 */
 const preview = computed(() => {
   if (!localRow.value) return ''
   const today = new Date()
   const startValue = Number(localRow.value.b_startvalue) || 1
   const storedValue = Number(localRow.value.b_currentvalue) || 0
   const activePeriod = currentPeriod(today, localRow.value.b_resettype)
-  const sequence =
-    localRow.value.b_currentperiod === activePeriod ? storedValue + 1 : startValue
+  const sequence = localRow.value.b_currentperiod === activePeriod ? storedValue + 1 : startValue
   const parts = []
   if (localRow.value.b_prefix) parts.push(localRow.value.b_prefix)
   const dateText = formatDate(today, localRow.value.b_dateformat)
@@ -204,15 +210,23 @@ const preview = computed(() => {
 
 <template>
   <div v-if="localRow" class="mm-auto-code">
-    <Form ref="formRef" :model="localRow" :rules="formRules" layout="vertical" :columns="2" max-width="720px">
-      <FormItem label="启用自动编码" name="b_canuse">
+    <Form
+      ref="formRef"
+      :model="localRow"
+      :rules="formRules"
+      layout="vertical"
+      :columns="5"
+      max-width="720px"
+    >
+      <!-- 第一行：启用 + 业务编号字段 + 重置周期 -->
+      <FormItem label="启用" name="b_canuse">
         <Switch
           :model-value="autoCodeEnabled"
           :disabled="loading"
           @update:model-value="toggleEnabled"
         />
       </FormItem>
-      <FormItem label="业务编号字段" name="b_field_id">
+      <FormItem label="业务编号字段" name="b_field_id" :span="2">
         <Select
           :model-value="String(localRow.b_field_id || '')"
           :options="fieldOptions"
@@ -221,14 +235,25 @@ const preview = computed(() => {
           @update:model-value="(v) => setRowValue('b_field_id', v)"
         />
       </FormItem>
-      <FormItem label="固定前缀" name="b_prefix">
+      <FormItem label="重置周期" name="b_resettype" :span="2">
+        <Select
+          :model-value="localRow.b_resettype"
+          :options="RESET_OPTIONS"
+          :disabled="loading || !autoCodeEnabled"
+          @update:model-value="(v) => setRowValue('b_resettype', v)"
+        />
+      </FormItem>
+
+      <!-- 第二行：前缀 / 日期 / 分隔符 / 位数 / 起始值 -->
+      <FormItem label="前缀" name="b_prefix">
         <Input
           :model-value="localRow.b_prefix"
           :disabled="loading || !autoCodeEnabled"
+          placeholder="如 FMS"
           @update:model-value="(v) => setRowValue('b_prefix', v)"
         />
       </FormItem>
-      <FormItem label="日期格式" name="b_dateformat">
+      <FormItem label="日期" name="b_dateformat">
         <Select
           :model-value="localRow.b_dateformat"
           :options="DATE_FORMAT_OPTIONS"
@@ -241,14 +266,16 @@ const preview = computed(() => {
         <Input
           :model-value="localRow.b_separator"
           :disabled="loading || !autoCodeEnabled"
+          placeholder="-"
           @update:model-value="(v) => setRowValue('b_separator', v)"
         />
       </FormItem>
-      <FormItem label="流水号位数" name="b_seqwidth">
+      <FormItem label="位数" name="b_seqwidth">
         <Input
           :model-value="localRow.b_seqwidth"
           type="number"
           :disabled="loading || !autoCodeEnabled"
+          placeholder="5"
           @update:model-value="(v) => setRowValue('b_seqwidth', v)"
         />
       </FormItem>
@@ -257,38 +284,38 @@ const preview = computed(() => {
           :model-value="localRow.b_startvalue"
           type="number"
           :disabled="loading || !autoCodeEnabled"
+          placeholder="1"
           @update:model-value="(v) => setRowValue('b_startvalue', v)"
         />
       </FormItem>
-      <FormItem label="重置周期" name="b_resettype">
-        <Select
-          :model-value="localRow.b_resettype"
-          :options="RESET_OPTIONS"
-          :disabled="loading || !autoCodeEnabled"
-          @update:model-value="(v) => setRowValue('b_resettype', v)"
+
+      <!-- 第三行：编号预览（跨整行） -->
+      <FormItem
+        label="编号预览"
+        name="b_preview"
+        :span="5"
+        class="mm-auto-code__preview-item"
+        :class="{ 'is-disabled': !autoCodeEnabled }"
+      >
+        <Input
+          :model-value="preview"
+          readonly
+          :disabled="loading"
+          placeholder="—"
+          @update:model-value="() => {}"
         />
       </FormItem>
-      <FormItem label="编号预览" name="b_preview" :span="2">
-        <div class="mm-auto-code__preview">{{ preview }}</div>
-      </FormItem>
     </Form>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.mm-auto-code {
-  display: flex;
-  flex-direction: column;
+/* 未启用自动编码：预览整体淡化 */
+.mm-auto-code__preview-item {
+  transition: opacity 150ms ease;
 }
 
-.mm-auto-code__preview {
-  min-height: 32px;
-  padding: 4px 10px;
-  border: 1px solid var(--fms-border);
-  border-radius: var(--fms-control-radius);
-  background: var(--fms-secondary-hover);
-  color: var(--fms-text);
-  font-family: Consolas, Monaco, monospace;
-  line-height: 22px;
+.mm-auto-code__preview-item.is-disabled {
+  opacity: 0.55;
 }
 </style>
diff --git a/code/fms/fms-vue/src/views/system/module-management/components/ModuleTableEditPanel.vue b/code/fms/fms-vue/src/views/system/module-management/components/ModuleTableEditPanel.vue
index 446e9168..a01ead5d 100644
--- a/code/fms/fms-vue/src/views/system/module-management/components/ModuleTableEditPanel.vue
+++ b/code/fms/fms-vue/src/views/system/module-management/components/ModuleTableEditPanel.vue
@@ -50,7 +50,7 @@ const emit = defineEmits([
 ])
 
 const localEdit = ref([])
-// 分组本地副本：拖拽实时换位时立即更新，组件 :groups 绑定 localGroups 而非 props.groups，
+// 分组本地副本：结构变更提交后立即更新，组件 :groups 绑定 localGroups 而非 props.groups，
 // 避免分组顺序视觉滞后（props.groups 需父级回流后更新）。
 const localGroups = ref([])
 watch(
@@ -448,11 +448,14 @@ const visualColumns = computed(() => {
 
 // 表头 band 行（按层级渲染）：每层一行，叶子带 rowspan = maxLevel - level + 1（补足到列头行），
 // 非叶子带 rowspan = 1。colspan = 子树列数。任意参差深度都能正确对齐。
+// 未分组列：在 band 行第 0 层渲染成列头（rowspan 贯穿全部表头行，含列头行），
+// 让未分组列头占据整段表头高度，而不是留下一块空白。
 const bandRows = computed(() => {
   const { roots, maxLevel } = bandMeta.value
   // 无分组时不渲染 band 行（避免空分组树时出现多余的空表头行）
   if (!roots.length) return []
-  const ungroupedCount = groupColumnsMap.value.ungrouped.length
+  const ungrouped = groupColumnsMap.value.ungrouped
+  const totalHeaderRows = maxLevel + 2 // band 行 + 列头行
   const byLevel = new Map()
   const collect = (nodes) => {
     for (const node of nodes) {
@@ -466,13 +469,16 @@ const bandRows = computed(() => {
   for (let level = 0; level <= maxLevel; level++) {
     const nodes = byLevel.get(level) || []
     const cells = []
-    // 存在未分组列时，band 行开头预留与列头对齐的空位（否则分组带会从第 1 列起铺，
-    // 把未分组列的列头盖在分组带下方，导致「预览」与「分组树」的列-分组归属不一致）
-    if (level === 0 && ungroupedCount > 0) {
-      cells.push({ spacer: true, span: ungroupedCount, rowspan: maxLevel + 1 })
+    // 未分组列头在 band 行第 0 层渲染，rowspan 覆盖所有 band 行 + 列头行；
+    // 这样列头行只需渲染分组列，未分组列头占满整段高度
+    if (level === 0 && ungrouped.length) {
+      for (const row of ungrouped) {
+        cells.push({ kind: 'ungrouped-col', row, span: 1, rowspan: totalHeaderRows })
+      }
     }
     cells.push(
       ...nodes.map((node) => ({
+        kind: 'band',
         gid: node.gid,
         group: node.group,
         level: node.level,
@@ -485,6 +491,16 @@ const bandRows = computed(() => {
   return rows
 })
 
+// 列头行渲染哪些列：未分组列头已在 band 行（rowspan 贯穿）时，列头行只渲染分组列；
+// 无分组或全未分组时，列头行渲染全部列
+const ungroupedInBand = computed(
+  () => bandRows.value.length > 0 && groupColumnsMap.value.ungrouped.length > 0,
+)
+const headerColumns = computed(() => {
+  if (!ungroupedInBand.value) return visualColumns.value
+  return visualColumns.value.filter((c) => c.gid != null)
+})
+
 /* ================= 关键处理区：分组树数据 =================
  * 结构编辑面板已迁移到专用组件 ModuleStructureTree（structure-tree/），
  * 本面板仅保留数据语义（bandMeta / commitColDrag / commitBandDrag 等）。
@@ -911,6 +927,74 @@ function removeSelected() {
   removeRow(selectedRow.value)
 }
 
+/* ================= 结构树节点常驻操作：上移 / 下移 / 删除 =================
+ * 上移/下移：列=同分组直属列内换位；分组=同级兄弟间换位（复用 band-edge 语义）。
+ * 删除：列=removeRow；分组=deleteBand（其下字段归未分组、子分组提升）。 */
+function onNodeMove({ key, direction }) {
+  if (props.loading || !key || !direction) return
+  if (key.startsWith('c:')) {
+    const row = findRowByFieldId(key.slice(2))
+    if (row) moveColumn(row, direction)
+  } else if (key.startsWith('g:') && key !== 'g:ungrouped') {
+    const band = bandMeta.value.metaMap.get(key.slice(2))
+    if (band) moveBand(band, direction)
+  }
+}
+
+function onNodeDelete({ key }) {
+  if (props.loading || !key) return
+  if (key.startsWith('c:')) {
+    const row = findRowByFieldId(key.slice(2))
+    if (row) removeRow(row)
+  } else if (key.startsWith('g:') && key !== 'g:ungrouped') {
+    const band = bandMeta.value.metaMap.get(key.slice(2))
+    if (band) deleteBand(band)
+  }
+}
+
+function onNodeAddSub({ key }) {
+  if (props.loading || !key || !key.startsWith('g:') || key === 'g:ungrouped') return
+  const band = bandMeta.value.metaMap.get(key.slice(2))
+  if (band) addSubGroup(band)
+}
+
+// 列在同分组直属列内上/下移动（不跨组；跨组用拖拽）
+function moveColumn(row, delta) {
+  const list = localEdit.value
+  const gid = groupIdOfRow(row)
+  const own = []
+  for (let i = 0; i < list.length; i++) {
+    if (groupIdOfRow(list[i]) === gid) own.push(i)
+  }
+  const idx = own.findIndex((i) => String(list[i].b_id) === String(row.b_id))
+  const target = idx + (delta > 0 ? 1 : -1)
+  if (idx < 0 || target < 0 || target >= own.length) return
+  const a = own[idx]
+  const b = own[target]
+  const tmp = list[a]
+  list[a] = list[b]
+  list[b] = tmp
+  rebuildFlat()
+  selectedNodeKey.value = `c:${row.b_field_id}`
+}
+
+// 分组在同级兄弟间上/下移动：复用 commitBandDrag 的 band-edge 语义
+function moveBand(band, delta) {
+  const gid = String(band.gid)
+  const parentId = band.group.b_parent_id == null ? null : String(band.group.b_parent_id)
+  const parentNode = parentId != null ? bandMeta.value.metaMap.get(parentId) : null
+  const sibs = parentNode ? parentNode.children : bandMeta.value.roots
+  const idx = sibs.findIndex((n) => String(n.gid) === gid)
+  if (idx < 0) return
+  const target = idx + (delta > 0 ? 1 : -1)
+  if (target < 0 || target >= sibs.length) return
+  commitBandDrag(gid, {
+    kind: 'band-edge',
+    gid: sibs[target].gid,
+    pos: delta > 0 ? 'after' : 'before',
+  })
+}
+
 /* 字段库 → 树/预览：已加入则定位选中，未加入则插入当前分组（否则未分组） */
 function selectField(field) {
   if (!field || props.loading) return
@@ -1052,6 +1136,103 @@ function commitColDrag(fieldId, line) {
   selectedNodeKey.value = `c:${moved.b_field_id}`
 }
 
+/* ================= 预览表列头拖拽排序 =================
+ * 直接拖列头换位：列落列 → col-edge（前后插位并沿用目标列分组）；
+ * 列落分组带 / 空分组占位 → into-band（移入该分组直属列末尾）。
+ * 复用 commitColDrag 领域语义，落点指示就地高亮。 */
+const previewDragField = ref(null)
+const previewDropTarget = ref(null) // { key, kind: 'col'|'band', pos }
+const previewUngroupedHover = ref(false)
+
+function clearPreviewDrop() {
+  previewDragField.value = null
+  previewDropTarget.value = null
+  previewUngroupedHover.value = false
+}
+
+/* 无未分组列时的「未分组」悬浮落点：把列拖出分组 */
+function onPreviewUngroupedDragOver(e) {
+  if (!previewDragField.value || props.loading) return
+  e.preventDefault()
+  if (e.dataTransfer) e.dataTransfer.dropEffect = 'move'
+  previewUngroupedHover.value = true
+  previewDropTarget.value = { key: 'g:ungrouped', kind: 'band', pos: 'inside' }
+}
+function onPreviewUngroupedDragLeave() {
+  previewUngroupedHover.value = false
+}
+function onPreviewUngroupedDrop(e) {
+  e.preventDefault()
+  const fieldId = previewDragField.value
+  clearPreviewDrop()
+  if (!fieldId || props.loading) return
+  commitColDrag(fieldId, { kind: 'ungrouped' })
+}
+
+function previewColPos(e) {
+  const rect = e.currentTarget.getBoundingClientRect()
+  return e.clientX < rect.left + rect.width / 2 ? 'before' : 'after'
+}
+
+function onPreviewDragStart(e, target) {
+  if (props.loading || target.kind !== 'col') {
+    e.preventDefault()
+    return
+  }
+  previewDragField.value = String(target.row.b_field_id)
+  if (e.dataTransfer) {
+    e.dataTransfer.effectAllowed = 'move'
+    e.dataTransfer.setData('text/plain', String(target.row.b_field_id))
+  }
+}
+
+function onPreviewDragOver(e, target) {
+  if (!previewDragField.value || props.loading) {
+    clearPreviewDrop()
+    return
+  }
+  e.preventDefault()
+  if (e.dataTransfer) e.dataTransfer.dropEffect = 'move'
+  if (target.kind === 'band') {
+    previewDropTarget.value = { key: `g:${target.gid}`, kind: 'band', pos: 'inside' }
+  } else {
+    previewDropTarget.value = {
+      key: `c:${target.row.b_field_id}`,
+      kind: 'col',
+      pos: previewColPos(e),
+    }
+  }
+}
+
+function onPreviewDrop(e, target) {
+  e.preventDefault()
+  const fieldId = previewDragField.value
+  clearPreviewDrop()
+  if (!fieldId || props.loading) return
+  if (target.kind === 'band') {
+    commitColDrag(fieldId, { kind: 'into-band', gid: String(target.gid) })
+    return
+  }
+  if (String(fieldId) === String(target.row.b_field_id)) return // 拖到自身：无操作
+  commitColDrag(fieldId, {
+    kind: 'col-edge',
+    gid: groupIdOfRow(target.row),
+    targetId: String(target.row.b_field_id),
+    pos: previewColPos(e),
+  })
+}
+
+function onPreviewDragEnd() {
+  clearPreviewDrop()
+}
+
+function bandTarget(band) {
+  return band.kind === 'band' ? { kind: 'band', gid: band.gid } : { kind: 'col', row: band.row }
+}
+function colTarget(col) {
+  return col.kind === 'slot' ? { kind: 'band', gid: col.gid } : { kind: 'col', row: col.row }
+}
+
 function commitBandDrag(sourceGid, line) {
   const source = bandMeta.value.metaMap.get(String(sourceGid))
   if (!source) return
@@ -1065,7 +1246,7 @@ function commitBandDrag(sourceGid, line) {
     orderedSibGids = [...children.map((n) => n.gid), sourceGid]
   } else if (line.kind === 'band-edge') {
     const target = bandMeta.value.metaMap.get(String(line.gid))
-    if (!target) return
+    if (!target || isDescendantOf(String(sourceGid), line.gid)) return
     newParentId = target.group.b_parent_id == null ? null : String(target.group.b_parent_id)
     const parentNode = newParentId != null ? bandMeta.value.metaMap.get(newParentId) : null
     const sibGids = (parentNode ? parentNode.children : bandMeta.value.roots)
@@ -1089,7 +1270,7 @@ function commitBandDrag(sourceGid, line) {
     return c
   })
   emit('updateGroups', groups)
-  // 同步本地副本：结构树组件绑定 localGroups，拖拽实时换位立即生效
+  // 同步本地副本：结构树组件绑定 localGroups，drop 提交后立即生效，无需等父级回流
   localGroups.value = groups.map((g) => ({ ...g }))
   // 用本次新分组重排列序：若用 bandMeta（旧 props）重排，b_xh 会按旧树前序编号，与新结构不一致
   rebuildFlat(bandRootsFromGroups(groups))
@@ -1352,41 +1533,95 @@ onBeforeUnmount(() => {
                 />
               </colgroup>
               <thead>
-                <!-- 多级表头：每层一个 band 行（纯展示） -->
+                <!-- 多级表头：每层一个 band 行（纯展示）；未分组列头在 band 行第 0 层，贯穿整段高度 -->
                 <tr v-for="(row, li) in bandRows" :key="`band-row-${li}`">
                   <th
                     v-for="band in row"
-                    :key="band.spacer ? `spacer-${li}` : band.gid"
-                    class="mm-tdesign__band"
+                    :key="band.kind === 'band' ? `band-${band.gid}` : `uc-${band.row.b_field_id}`"
                     :class="
-                      band.spacer
-                        ? 'mm-tdesign__band--spacer'
-                        : {
-                            'is-selected': selectedNodeKey === `g:${band.gid}`,
-                            'is-disabled': Number(band.group.b_canuse) !== 1,
-                          }
+                      band.kind === 'ungrouped-col'
+                        ? [
+                            'mm-tdesign__cell',
+                            'mm-tdesign__cell--ungrouped',
+                            { 'is-selected': selectedNodeKey === `c:${band.row.b_field_id}` },
+                            { 'is-invisible': Number(band.row.b_visible) !== 1 },
+                            {
+                              'is-preview-drop-before':
+                                previewDropTarget?.key === `c:${band.row.b_field_id}` &&
+                                previewDropTarget.pos === 'before',
+                              'is-preview-drop-after':
+                                previewDropTarget?.key === `c:${band.row.b_field_id}` &&
+                                previewDropTarget.pos === 'after',
+                            },
+                          ]
+                        : [
+                            'mm-tdesign__band',
+                            { 'is-selected': selectedNodeKey === `g:${band.gid}` },
+                            { 'is-disabled': Number(band.group.b_canuse) !== 1 },
+                            {
+                              'is-preview-drop-inside': previewDropTarget?.key === `g:${band.gid}`,
+                            },
+                          ]
                     "
                     :colspan="band.span"
                     :rowspan="band.rowspan"
-                    :data-band-id="band.spacer ? undefined : band.gid"
+                    :draggable="band.kind === 'ungrouped-col' ? 'true' : undefined"
+                    :data-band-id="band.kind === 'band' ? band.gid : undefined"
+                    :data-field-id="
+                      band.kind === 'ungrouped-col' ? String(band.row.b_field_id) : undefined
+                    "
+                    @dragstart="
+                      band.kind === 'ungrouped-col'
+                        ? onPreviewDragStart($event, bandTarget(band))
+                        : undefined
+                    "
+                    @dragover="onPreviewDragOver($event, bandTarget(band))"
+                    @drop="onPreviewDrop($event, bandTarget(band))"
+                    @dragend="onPreviewDragEnd"
                   >
-                    <template v-if="!band.spacer">
+                    <template v-if="band.kind === 'ungrouped-col'">
+                      <div class="mm-tdesign__cell-head">
+                        <span class="mm-fdesign__field-name">{{ fieldName(band.row) }}</span>
+                        <i v-if="Number(band.row.b_required) === 1" class="mm-fdesign__required">*</i>
+                      </div>
+                      <i v-if="Number(band.row.b_visible) !== 1" class="mm-fdesign__invisible-mark">隐藏</i>
+                      <span v-if="resizingCol === band.row" class="mm-tdesign__col-width">{{ widthOf(band.row) }}px</span>
+                      <span class="mm-tdesign__resizer" title="拖拽调整列宽" @pointerdown.stop.prevent="startColResize($event, band.row)"></span>
+                    </template>
+                    <template v-else>
                       <span class="mm-tdesign__band-title">{{ band.group.b_title || '空' }}</span>
                     </template>
                   </th>
                 </tr>
-                <!-- 列头行 -->
+                <!-- 列头行：未分组列头已在 band 行时，这里只渲染分组列 -->
                 <tr>
                   <th
-                    v-for="col in visualColumns"
+                    v-for="col in headerColumns"
                     :key="col.key"
                     class="mm-tdesign__cell"
                     :class="{
                       'mm-tdesign__cell--slot': col.kind === 'slot',
                       'is-selected': col.kind === 'col' && selectedNodeKey === `c:${col.row.b_field_id}`,
                       'is-invisible': col.kind === 'col' && Number(col.row.b_visible) !== 1,
+                      'is-preview-drop-before':
+                        col.kind === 'col' &&
+                        previewDropTarget?.key === `c:${col.row.b_field_id}` &&
+                        previewDropTarget.pos === 'before',
+                      'is-preview-drop-after':
+                        col.kind === 'col' &&
+                        previewDropTarget?.key === `c:${col.row.b_field_id}` &&
+                        previewDropTarget.pos === 'after',
+                      'is-preview-drop-inside':
+                        col.kind === 'slot' && previewDropTarget?.key === `g:${col.gid}`,
                     }"
+                    :draggable="col.kind === 'col' ? 'true' : undefined"
                     :data-field-id="col.kind === 'col' ? String(col.row.b_field_id) : undefined"
+                    @dragstart="
+                      col.kind === 'col' ? onPreviewDragStart($event, colTarget(col)) : undefined
+                    "
+                    @dragover="onPreviewDragOver($event, colTarget(col))"
+                    @drop="onPreviewDrop($event, colTarget(col))"
+                    @dragend="onPreviewDragEnd"
                   >
                     <template v-if="col.kind === 'slot'">
                       <span class="mm-tdesign__slot-text">+</span>
@@ -1416,7 +1651,20 @@ onBeforeUnmount(() => {
                 </tr>
               </tbody>
             </table>
-            <div v-else class="mm-fdesign__empty">暂无列：从左侧字段库点击添加字段</div>
+            <!-- 无未分组列时拖列：悬浮「未分组」落点，便于把列拖出分组 -->
+            <div
+              v-if="
+                previewDragField && groupColumnsMap.ungrouped.length === 0
+              "
+              class="mm-tdesign__ungrouped-drop"
+              :class="{ 'is-hover': previewUngroupedHover }"
+              @dragover="onPreviewUngroupedDragOver"
+              @dragleave="onPreviewUngroupedDragLeave"
+              @drop="onPreviewUngroupedDrop"
+            >
+              未分组
+            </div>
+            <div v-if="!visualColumns.length" class="mm-fdesign__empty">暂无列：从左侧字段库点击添加字段</div>
           </div>
         </div>
 
@@ -1442,6 +1690,9 @@ onBeforeUnmount(() => {
                 @field-drop="onFieldDrop"
                 @context-menu-click="onStructureContextMenuClick"
                 @rename-commit="onRenameCommit"
+                @node-move="onNodeMove"
+                @node-delete="onNodeDelete"
+                @node-add-sub="onNodeAddSub"
               >
                 <template #empty>
                   <span class="mm-fdesign__tree-empty">暂无分组，点击工具栏「添加分组」</span>
@@ -1694,6 +1945,7 @@ onBeforeUnmount(() => {
           :data-source="localEdit"
           :editable="!loading"
           :row-draggable="!loading"
+          :row-drag-handle="false"
           row-key="b_id"
           :active-row-key="activeKey"
           @row-click="(_, row) => (activeKey = String(row.b_id))"
@@ -2020,7 +2272,7 @@ onBeforeUnmount(() => {
 }
 
 .mm-fdesign__inspector {
-  border-left: 1px solid var(--fms-border);
+  /* 与左侧树面板的 border-right 重叠成双线，这里去掉：单一分割线由 tree-panel 提供 */
   overflow: auto;
   padding: 10px;
   background: var(--fms-card);
@@ -2250,12 +2502,43 @@ onBeforeUnmount(() => {
   box-sizing: border-box;
 }
 
+/* 无未分组列时拖列：悬浮「未分组」落点 */
+.mm-tdesign__ungrouped-drop {
+  position: absolute;
+  left: 10px;
+  top: 10px;
+  z-index: 5;
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 12px;
+  border: 1px dashed var(--fms-border);
+  border-radius: 6px;
+  background: var(--fms-card);
+  color: var(--fms-text-secondary);
+  font-size: 11px;
+  box-shadow: 0 4px 12px rgba(39, 54, 70, 0.12);
+  cursor: copy;
+  transition:
+    border-color 0.15s,
+    color 0.15s,
+    background 0.15s;
+
+  &.is-hover {
+    border-color: var(--fms-primary);
+    color: var(--fms-primary);
+    background: color-mix(in srgb, var(--fms-primary) 8%, var(--fms-card));
+  }
+}
+
 .mm-tdesign__table {
+  /* 网格线不重叠：单元格只画右边 + 下边，表格只画上边 + 左边，
+     相邻边框并排会叠成 2px 粗线，改为单边绘制后每条分割线只有 1px */
   border-collapse: separate;
   border-spacing: 0;
   width: max-content;
   table-layout: fixed;
-  border: 1px solid var(--fms-border);
+  border-top: 1px solid var(--fms-border);
+  border-left: 1px solid var(--fms-border);
   border-radius: 8px;
   background: var(--fms-card);
   box-shadow: 0 1px 2px rgba(39, 54, 70, 0.05);
@@ -2265,7 +2548,8 @@ onBeforeUnmount(() => {
 /* ---- 表头分组带（band，纯展示） ---- */
 .mm-tdesign__band {
   padding: 6px 10px;
-  border: 1px solid var(--fms-border);
+  border-right: 1px solid var(--fms-border);
+  border-bottom: 1px solid var(--fms-border);
   background: var(--fms-secondary);
   font-size: 12px;
   font-weight: 700;
@@ -2293,16 +2577,6 @@ onBeforeUnmount(() => {
   }
 }
 
-/* 未分组列占位带：不可见，仅撑起列头对齐，避免分组带覆盖未分组列 */
-.mm-tdesign__band--spacer {
-  background: transparent;
-  border: none;
-
-  &:hover {
-    background: transparent;
-  }
-}
-
 .mm-tdesign__band-title {
   display: inline-flex;
   align-items: center;
@@ -2315,7 +2589,8 @@ onBeforeUnmount(() => {
 .mm-tdesign__cell {
   position: relative;
   padding: 5px 8px;
-  border: 1px solid var(--fms-border);
+  border-right: 1px solid var(--fms-border);
+  border-bottom: 1px solid var(--fms-border);
   background: #fafbfc;
   font-size: 11px;
   font-weight: 600;
@@ -2343,6 +2618,33 @@ onBeforeUnmount(() => {
   }
 }
 
+/* 预览列头拖拽落点指示：before/after 画主色竖线，inside（拖入分组带/空分组）整格高亮 */
+.mm-tdesign__cell.is-preview-drop-before::before,
+.mm-tdesign__cell.is-preview-drop-after::before {
+  content: '';
+  position: absolute;
+  top: 4px;
+  bottom: 4px;
+  width: 2px;
+  border-radius: 2px;
+  background: var(--fms-primary);
+  z-index: 4;
+}
+
+.mm-tdesign__cell.is-preview-drop-before::before {
+  left: -1px;
+}
+
+.mm-tdesign__cell.is-preview-drop-after::before {
+  right: -1px;
+}
+
+.mm-tdesign__band.is-preview-drop-inside,
+.mm-tdesign__cell--slot.is-preview-drop-inside {
+  outline: 2px solid color-mix(in srgb, var(--fms-primary) 55%, transparent);
+  outline-offset: -2px;
+}
+
 .mm-tdesign__cell-head {
   display: flex;
   align-items: center;
@@ -2352,7 +2654,6 @@ onBeforeUnmount(() => {
 
 .mm-tdesign__cell--slot {
   background: transparent;
-  border-style: dashed;
   color: var(--fms-text-disabled, #9ca3af);
   font-weight: 400;
   text-align: center;
@@ -2404,7 +2705,8 @@ onBeforeUnmount(() => {
 /* ---- 预览 mock 数据行 ---- */
 .mm-tdesign__mock {
   padding: 4px 8px;
-  border: 1px solid var(--fms-border);
+  border-right: 1px solid var(--fms-border);
+  border-bottom: 1px solid var(--fms-border);
   background: var(--fms-card);
   font-size: 11px;
   color: var(--fms-text-secondary);
diff --git a/code/fms/fms-vue/src/views/system/module-management/components/structure-tree/ModuleStructureTree.vue b/code/fms/fms-vue/src/views/system/module-management/components/structure-tree/ModuleStructureTree.vue
index 443875af..01f95624 100644
--- a/code/fms/fms-vue/src/views/system/module-management/components/structure-tree/ModuleStructureTree.vue
+++ b/code/fms/fms-vue/src/views/system/module-management/components/structure-tree/ModuleStructureTree.vue
@@ -7,6 +7,8 @@
  * - 拖拽：列↔列换位、列入组、列出组、组嵌套、组排序、外部字段库拖入；
  *   落点由组件按领域语义直接计算（列只有 before/after，分组才分 before/inside/after），
  *   通过语义事件（col-drop / band-drop / field-drop）交给面板 commit。
+ *   采用「悬停亮指示、松手提交」：dragover 仅更新落点指示，drop 时才提交一次变更，
+ *   避免拖拽中反复重排 DOM 形成反馈循环（两个分组互换/嵌套时的抖动与冲突）。
  * - 右键菜单：分组（新增子分组/重命名/启用停用/删除）、列（复制/粘贴/删除）。
  * - 内联重命名：分组标题原地编辑，startRename(gid) 供外部（面板新增分组后）触发。
  * - 选中：受控 selectedKey，双向同步面板属性面板 / 预览高亮。
@@ -22,6 +24,7 @@ import {
   Power,
   Trash2,
 } from '@lucide/vue'
+import draggable from 'vuedraggable'
 import StructureTreeNode from './StructureTreeNode.vue'
 
 const props = defineProps({
@@ -42,6 +45,10 @@ const emit = defineEmits([
   'field-drop',
   'context-menu-click',
   'rename-commit',
+  // 节点常驻操作：上移/下移/删除/新增子分组（{ key, direction? }），由面板按领域语义提交
+  'node-move',
+  'node-delete',
+  'node-add-sub',
 ])
 
 /* ================= 字段/名称推导 ================= */
@@ -176,39 +183,49 @@ function makeColNode(row) {
 
 function buildTreeNodes(metaNodes) {
   const columns = groupColumnsMap.value
-  return metaNodes.map((meta) => ({
-    key: `g:${meta.gid}`,
-    title: meta.group.b_title || '空分组',
-    kind: 'group',
-    gid: meta.gid,
-    group: meta.group,
-    span: meta.span,
-    disabled: Number(meta.group.b_canuse) !== 1,
-    isLeaf: false,
-    children: [
-      ...(columns.map.get(meta.gid) || []).map((row) => makeColNode(row)),
-      ...buildTreeNodes(meta.children),
-    ],
-  }))
+  return metaNodes.map((meta, gi) => {
+    const cols = columns.map.get(meta.gid) || []
+    return {
+      key: `g:${meta.gid}`,
+      title: meta.group.b_title || '空分组',
+      kind: 'group',
+      gid: meta.gid,
+      group: meta.group,
+      span: meta.span,
+      disabled: Number(meta.group.b_canuse) !== 1,
+      canUp: gi > 0,
+      canDown: gi < metaNodes.length - 1,
+      isLeaf: false,
+      children: [
+        ...cols.map((row, ci) => ({
+          ...makeColNode(row),
+          canUp: ci > 0,
+          canDown: ci < cols.length - 1,
+        })),
+        ...buildTreeNodes(meta.children),
+      ],
+    }
+  })
 }
 
 const treeData = computed(() => {
   const nodes = []
   const ungrouped = groupColumnsMap.value.ungrouped
-  // 未分组在前，分组结构在后
-  if (ungrouped.length) {
-    nodes.push({
-      key: 'g:ungrouped',
-      title: '未分组',
-      kind: 'group',
-      gid: null,
-      span: ungrouped.length,
-      icon: 'inbox',
-      disabled: true, // 虚拟节点：仅作收纳落点
-      isLeaf: false,
-      children: ungrouped.map((row) => makeColNode(row)),
-    })
-  }
+  // 未分组在前，分组结构在后。
+  // 始终保留「未分组」容器（哪怕 0 列），否则全部分组时无法把列拖出分组
+  nodes.push({
+    key: 'g:ungrouped',
+    title: '未分组',
+    kind: 'group',
+    gid: null,
+    span: ungrouped.length,
+    icon: 'inbox',
+    disabled: true, // 虚拟节点：仅作收纳落点
+    canUp: false,
+    canDown: false,
+    isLeaf: false,
+    children: ungrouped.map((row) => makeColNode(row)),
+  })
   nodes.push(...buildTreeNodes(bandMeta.value.roots))
   return nodes
 })
@@ -326,8 +343,9 @@ const dragType = ref(null)
 const dragKey = ref(null)
 const dropKey = ref(null)
 const dropPosition = ref(null) // 'before' | 'inside' | 'after'
-// 实时换位去重：上次已提交的落点 `${targetKey}:${pos}`，位置不变时不重复提交
-const lastCommittedKey = ref(null)
+// 交互模型：内部拖拽用 vuedraggable（SortableJS force-fallback，同主表设计器）。
+// 布局冻结（onSortMove 返回 false）：拖拽中不重排 DOM，悬停仅亮落点指示，
+// 松手（onSortEnd）才提交一次 —— 避免「拖过即换」的重排反馈循环（抖动/冲突）。
 
 function isDescendantGroup(ancestorGid, gid) {
   const meta = bandMeta.value.metaMap.get(String(gid))
@@ -342,18 +360,106 @@ function isDescendantGroup(ancestorGid, gid) {
   return false
 }
 
-function handleDragStart(node, e) {
-  if (props.loading || node.disabled) {
-    e.preventDefault()
-    return
+/* ========== 内部拖拽：vuedraggable（SortableJS）==========
+ * 布局冻结 + 自绘全不透明标题卡片跟随（同主表设计器）；
+ * 自动滚动由 SortableJS 内置提供，无需手写。 */
+let dragBadgeEl = null
+function createDragBadge(title) {
+  removeDragBadge()
+  const badge = document.createElement('div')
+  badge.className = 'mst-drag-badge'
+  const name = document.createElement('span')
+  name.className = 'mst-drag-badge__name'
+  name.textContent = title
+  badge.appendChild(name)
+  // 用 transform 跟随鼠标；pointer-events:none 不干扰落点检测
+  badge.style.cssText = 'position:fixed;left:0;top:0;pointer-events:none;z-index:2147483000'
+  document.body.appendChild(badge)
+  dragBadgeEl = badge
+}
+function removeDragBadge() {
+  if (dragBadgeEl) {
+    dragBadgeEl.remove()
+    dragBadgeEl = null
   }
+}
+
+let dragCancelled = false
+
+// SortableJS move 钩子：布局冻结，禁止其实时重排 DOM
+function onSortMove() {
+  return false
+}
+
+// SortableJS start：识别被拖节点，创建跟手卡片，挂 mousemove/keydown 监听
+function onSortStart(evt) {
+  if (props.loading) return
+  const nodeKey = evt?.item?.dataset?.key
+  if (!nodeKey) return
+  const node = findNodeByKey(nodeKey)
+  if (!node || node.disabled) return
   dragType.value = node.kind
   dragKey.value = node.key
-  lastCommittedKey.value = null
-  if (e.dataTransfer) {
-    e.dataTransfer.effectAllowed = 'move'
-    e.dataTransfer.setData('text/plain', node.key)
+  dragCancelled = false
+  createDragBadge(node.title)
+  window.addEventListener('mousemove', onSortWindowMove)
+  window.addEventListener('keydown', onSortKeydown)
+  document.body.style.userSelect = 'none'
+  document.body.style.webkitUserSelect = 'none'
+}
+
+// mousemove：定位跟手卡片 + 用 elementFromPoint 计算落点
+function onSortWindowMove(e) {
+  if (dragCancelled) return
+  if (dragBadgeEl) {
+    dragBadgeEl.style.transform = `translate(${e.clientX - 8}px, ${e.clientY - 8}px)`
   }
+  const el = document.elementFromPoint(e.clientX, e.clientY)
+  if (!el) { clearDropTarget(); return }
+  const nodeEl = el.closest('.mst-node')
+  if (!nodeEl) { clearDropTarget(); return }
+  const nodeKey = nodeEl.getAttribute('data-key')
+  if (!nodeKey) { clearDropTarget(); return }
+  const node = findNodeByKey(nodeKey)
+  if (!node) { clearDropTarget(); return }
+  const fakeEvent = { currentTarget: nodeEl, clientX: e.clientX, clientY: e.clientY }
+  const pos = calcDropPosition(node, fakeEvent)
+  if (!pos) { clearDropTarget(); return }
+  if (dragType.value !== 'field' && !resolveDrop(nodeKey, pos)) { clearDropTarget(); return }
+  dropKey.value = nodeKey
+  dropPosition.value = pos
+}
+
+function onSortKeydown(e) {
+  if (e.key === 'Escape') dragCancelled = true
+}
+
+// SortableJS end：提交一次（Esc 取消则不提交）
+function onSortEnd() {
+  const targetKey = dropKey.value
+  const pos = dropPosition.value
+  const type = dragType.value
+  const srcKey = dragKey.value
+  cleanupDrag()
+  if (dragCancelled) {
+    dragCancelled = false
+    return
+  }
+  if (!srcKey || !targetKey || srcKey === targetKey) return
+  if (type === 'col') {
+    emit('col-drop', resolveColDrop(srcKey, targetKey, pos))
+  } else if (type === 'group') {
+    const resolved = resolveBandDrop(srcKey, targetKey, pos)
+    if (resolved) emit('band-drop', resolved)
+  }
+}
+
+function cleanupDrag() {
+  window.removeEventListener('mousemove', onSortWindowMove)
+  window.removeEventListener('keydown', onSortKeydown)
+  document.body.style.userSelect = ''
+  document.body.style.webkitUserSelect = ''
+  resetDragVisual()
 }
 
 // 外部字段库拖拽识别：Chrome dragover 阶段 getData() 为空（隐私保护），
@@ -365,6 +471,19 @@ function isExternalFieldDrag(e) {
   )
 }
 
+function clearDropTarget() {
+  dropKey.value = null
+  dropPosition.value = null
+}
+
+// 当前拖拽源落在 (targetKey, pos) 是否可提交（内部拖拽校验；外部字段恒可落点）
+function resolveDrop(targetKey, pos) {
+  const srcKey = dragKey.value
+  if (dragType.value === 'col') return resolveColDrop(srcKey, targetKey, pos)
+  if (dragType.value === 'group') return resolveBandDrop(srcKey, targetKey, pos)
+  return true
+}
+
 function handleDragOver(node, e) {
   e.preventDefault()
   if (e.dataTransfer) {
@@ -377,35 +496,21 @@ function handleDragOver(node, e) {
   }
   // 无有效拖拽源（如拖入非节点区域）不设落点
   if (!dragKey.value) {
-    dropKey.value = null
-    dropPosition.value = null
+    clearDropTarget()
     return
   }
   const pos = calcDropPosition(node, e)
   if (!pos || dragKey.value === node.key) {
-    dropKey.value = null
-    dropPosition.value = null
+    clearDropTarget()
+    return
+  }
+  // 落点不可解析（如分组拖入自身子树 / 未分组区 / 其下的列）时不亮指示，drop 也不会提交
+  if (dragType.value !== 'field' && !resolveDrop(node.key, pos)) {
+    clearDropTarget()
     return
   }
   dropKey.value = node.key
   dropPosition.value = pos
-
-  // 外部字段：仅显示落点，等 drop 提交（dragover 阶段 getData 为空）
-  if (dragType.value === 'field') return
-
-  // 内部拖拽：实时换位——拖过即换，不等待 drop。
-  // 用 lastCommittedKey 去重，避免同一位持续 dragover 反复提交。
-  const commitKey = `${node.key}:${pos}`
-  if (lastCommittedKey.value === commitKey) return
-  lastCommittedKey.value = commitKey
-  const srcKey = dragKey.value
-  if (dragType.value === 'col') {
-    const resolved = resolveColDrop(srcKey, node.key, pos)
-    if (resolved) emit('col-drop', resolved)
-  } else if (dragType.value === 'group') {
-    const resolved = resolveBandDrop(srcKey, node.key, pos)
-    if (resolved) emit('band-drop', resolved)
-  }
 }
 
 // 领域化落点：列（叶子）只有 before/after（上半/下半）；
@@ -450,8 +555,6 @@ function handleDrop(node, e) {
   const pos = dropPosition.value
   const type = dragType.value
   const srcKey = dragKey.value
-  // 实时换位是否已发生（resetDragVisual 会清空 lastCommittedKey，需先记录）
-  const alreadyLiveSwapped = lastCommittedKey.value != null
   resetDragVisual()
   if (!srcKey || !targetKey || srcKey === targetKey) return
 
@@ -463,20 +566,28 @@ function handleDrop(node, e) {
     return
   }
 
-  // 内部拖拽已在 dragover 阶段实时换位，drop 仅兜底提交一次（若从未实时换位过）
-  if (!alreadyLiveSwapped) {
-    if (type === 'col') {
-      emit('col-drop', resolveColDrop(srcKey, targetKey, pos))
-    } else if (type === 'group') {
-      const resolved = resolveBandDrop(srcKey, targetKey, pos)
-      if (resolved) emit('band-drop', resolved)
-    }
+  // 内部拖拽：dragover 阶段仅亮指示，drop 时统一提交一次
+  if (type === 'col') {
+    emit('col-drop', resolveColDrop(srcKey, targetKey, pos))
+  } else if (type === 'group') {
+    const resolved = resolveBandDrop(srcKey, targetKey, pos)
+    if (resolved) emit('band-drop', resolved)
   }
 }
 
-// 拖出树外松手（未触发 drop）：清理实时换位状态
-function handleDragEnd() {
-  resetDragVisual()
+/* ================= 节点常驻操作：上移 / 下移 / 删除 =================
+ * 由节点行上的图标按钮触发，交给面板按领域语义提交：
+ * - node-move：列在组内换位 / 分组在同级兄弟间换位
+ * - node-delete：列删除 / 分组删除（其下字段归未分组）
+ */
+function onNodeMove(node, direction) {
+  emit('node-move', { key: node.key, direction })
+}
+function onNodeDelete(node) {
+  emit('node-delete', { key: node.key })
+}
+function onNodeAddSub(node) {
+  emit('node-add-sub', { key: node.key })
 }
 
 function resolveColDrop(srcKey, targetKey, pos) {
@@ -508,10 +619,15 @@ function resolveBandDrop(srcKey, targetKey, pos) {
     const row = props.rows.find((r) => String(r.b_field_id) === targetKey.slice(2))
     const targetGid = row ? groupIdOfRow(row) : null
     if (targetGid == null) return null
+    // 目标带是源分组自身或其子孙：禁止，否则会把分组放进自己的子树造成环
+    if (targetGid === gid || isDescendantGroup(gid, targetGid)) return null
     return { gid, line: { kind: 'band-edge', gid: targetGid, pos } }
   }
   if (targetKey === 'g:ungrouped') return null // 分组不入未分组
   const targetGid = targetKey.slice(2)
+  if (targetGid === gid) return null
+  // 拖入自身子孙：禁止（calcDropPosition 已挡，这里兜底）
+  if (isDescendantGroup(gid, targetGid)) return null
   if (pos === 'inside') return { gid, line: { kind: 'band-nest', gid: targetGid } }
   return { gid, line: { kind: 'band-edge', gid: targetGid, pos } }
 }
@@ -521,7 +637,7 @@ function resetDragVisual() {
   dragKey.value = null
   dropKey.value = null
   dropPosition.value = null
-  lastCommittedKey.value = null
+  removeDragBadge()
 }
 
 /* ================= 右键菜单 ================= */
@@ -596,6 +712,8 @@ onMounted(() => {
 onBeforeUnmount(() => {
   document.removeEventListener('mousedown', onDocMouseDown, true)
   document.removeEventListener('keydown', onDocKeydown, true)
+  // 拖拽进行中卸载：清理鼠标/键盘监听与跟手卡片，避免泄漏
+  if (dragKey.value) cleanupDrag()
 })
 
 /* ================= 内联重命名 ================= */
@@ -656,11 +774,17 @@ provide('moduleStructureTree', {
   toggleExpand,
   registerNode,
   unregisterNode,
-  handleDragStart,
+  // 内部拖拽（vuedraggable，布局冻结 + 松手提交）
+  onSortStart,
+  onSortEnd,
+  onSortMove,
+  // 外部字段库拖入（原生 DnD）
   handleDragOver,
   onNodeDragLeave,
   handleDrop,
-  handleDragEnd,
+  onNodeMove,
+  onNodeDelete,
+  onNodeAddSub,
   openContextMenu,
   commitRename,
   cancelRename,
@@ -668,21 +792,28 @@ provide('moduleStructureTree', {
 </script>
 
 <template>
-  <div
-    class="mst-tree"
-    role="tree"
-    @keydown="onTreeKeydown"
-    @dragleave="onRootDragLeave"
-  >
-    <StructureTreeNode
-      v-for="n in treeData"
-      :key="n.key"
-      :node="n"
-      :level="0"
-    />
-    <div v-if="!treeData.length" class="mst-tree__empty">
-      <slot name="empty">暂无分组</slot>
-    </div>
+  <div class="mst-tree" role="tree" @keydown="onTreeKeydown" @dragleave="onRootDragLeave">
+    <draggable
+      :list="treeData"
+      item-key="key"
+      handle=".mst-node__grip"
+      :force-fallback="true"
+      :fallback-on-body="true"
+      fallback-class="mst-drag-fallback"
+      :animation="0"
+      :move="onSortMove"
+      @start="onSortStart"
+      @end="onSortEnd"
+    >
+      <template #item="{ element: n }">
+        <StructureTreeNode :node="n" :level="0" />
+      </template>
+      <template #footer>
+        <div v-if="!treeData.length" class="mst-tree__empty">
+          <slot name="empty">暂无分组</slot>
+        </div>
+      </template>
+    </draggable>
   </div>
 
   <!-- 右键菜单（挂载到 body，fixed 定位） -->
@@ -723,6 +854,8 @@ provide('moduleStructureTree', {
   line-height: 1.5;
   font-weight: 500;
   outline: none;
+  /* 右侧留白：节点/按钮/悬停高亮不紧贴滚动区右缘 */
+  padding-right: 8px;
 }
 
 .mst-tree__empty {
@@ -796,3 +929,35 @@ provide('moduleStructureTree', {
   opacity: 0;
 }
 </style>
+
+<!-- 拖拽标题卡片（全局样式）：createDragBadge 用 JS 动态创建元素并挂到 body，
+     不在 Vue 模板内，scoped 样式匹配不到，必须定义为全局样式。
+     外观：白底 + 圆角 + 主色描边 + 阴影的迷你卡片，只显示节点标题 -->
+<style lang="scss">
+/* SortableJS fallback 克隆（body 上的整行克隆）不在 scoped 作用域内，需全局隐藏：
+   拖动时只保留自绘的跟手卡片（.mst-drag-badge），不显示整行克隆 */
+.mst-drag-fallback {
+  display: none !important;
+}
+
+.mst-drag-badge {
+  display: inline-flex;
+  align-items: center;
+  min-width: 100px;
+  max-width: 200px;
+  padding: 6px 12px;
+  border-radius: 6px;
+  background: #fff; /* 纯白不透明，避免主题卡片色带透明度导致卡片透底 */
+  border: 1px solid color-mix(in srgb, var(--fms-primary) 35%, transparent);
+  box-shadow: 0 6px 18px rgba(39, 54, 70, 0.18);
+  color: var(--fms-text-primary, #1f2d3d);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.5;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  user-select: none;
+  -webkit-user-select: none;
+}
+</style>
diff --git a/code/fms/fms-vue/src/views/system/module-management/components/structure-tree/StructureTreeNode.vue b/code/fms/fms-vue/src/views/system/module-management/components/structure-tree/StructureTreeNode.vue
index f4aa24c7..bfe61f64 100644
--- a/code/fms/fms-vue/src/views/system/module-management/components/structure-tree/StructureTreeNode.vue
+++ b/code/fms/fms-vue/src/views/system/module-management/components/structure-tree/StructureTreeNode.vue
@@ -4,7 +4,8 @@
  * 只负责单行渲染与事件透传，全部状态与交互逻辑由父级 ModuleStructureTree 统一持有。
  */
 import { computed, inject, onBeforeUnmount, onMounted, ref } from 'vue'
-import { Check, ChevronRight, Folder, GripVertical, Inbox, Table2, X } from '@lucide/vue'
+import { ArrowDown, ArrowUp, Check, ChevronRight, Folder, FolderPlus, GripVertical, Inbox, Table2, Trash2, X } from '@lucide/vue'
+import draggable from 'vuedraggable'
 
 const props = defineProps({
   node: { type: Object, required: true },
@@ -22,13 +23,37 @@ const isSelected = computed(() => ctx.selectedKey.value === key.value)
 const isEditing = computed(() => isGroup.value && props.node.gid != null && ctx.editingGid.value === props.node.gid)
 const isDragging = computed(() => ctx.dragKey.value === key.value)
 const isDropTarget = computed(() => ctx.dragKey.value != null && ctx.dropKey.value === key.value)
-// 指示线仅外部字段拖入时显示：内部拖拽已实时换位（拖过即换），不需要落点线
+// 落点指示：内部拖拽（列/分组）与外部字段拖入统一显示（before/after 划线，inside 高亮），
+// 结构变更一律在 drop 时提交
 const dropClass = computed(() => {
-  if (!isDropTarget.value || ctx.dragType.value !== 'field') return ''
+  if (!isDropTarget.value) return ''
   const p = ctx.dropPosition.value
   return p === 'before' ? 'drop-before' : p === 'after' ? 'drop-after' : 'drop-inside'
 })
 const canDrag = computed(() => !isUngrouped.value && !ctx.loading.value && !isEditing.value)
+// 常驻操作按钮：上移/下移（列=同组内换位，分组=同级兄弟间换位）、删除（列删除 / 分组删除）。
+// 边界位（首/尾）由数据侧 canUp/canDown 标记禁用；未分组容器不显示。
+const canMoveUp = computed(
+  () => !isUngrouped.value && !ctx.loading.value && !isEditing.value && props.node.canUp !== false,
+)
+const canMoveDown = computed(
+  () => !isUngrouped.value && !ctx.loading.value && !isEditing.value && props.node.canDown !== false,
+)
+const canDelete = computed(() => !isUngrouped.value && !ctx.loading.value && !isEditing.value)
+// 分组：新增子分组按钮（未分组容器 / 列无此操作）
+const canAddSub = computed(() => isGroup.value && !ctx.loading.value && !isEditing.value)
+function onMove(direction) {
+  if (direction < 0 ? !canMoveUp.value : !canMoveDown.value) return
+  ctx.onNodeMove(props.node, direction)
+}
+function onDelete() {
+  if (!canDelete.value) return
+  ctx.onNodeDelete(props.node)
+}
+function onAddSub() {
+  if (!canAddSub.value) return
+  ctx.onNodeAddSub(props.node)
+}
 const tabindex = computed(() => (ctx.activeKey.value === key.value ? 0 : -1))
 const nodeIcon = computed(() => {
   if (isGroup.value) return isUngrouped.value ? Inbox : Folder
@@ -53,18 +78,11 @@ function onRowClick() {
   rowRef.value?.focus()
 }
 function onSwitcherClick() {
-  if (isUngrouped.value) return
   ctx.toggleExpand(key.value)
   ctx.activeKey.value = key.value
   rowRef.value?.focus()
 }
-function onDragStart(e) {
-  if (!canDrag.value) {
-    e.preventDefault()
-    return
-  }
-  ctx.handleDragStart(props.node, e)
-}
+// 原生 dragover/drop：仅外部字段库拖入使用（内部拖拽由 vuedraggable handle 启动）
 function onDragOver(e) {
   ctx.handleDragOver(props.node, e)
 }
@@ -74,9 +92,6 @@ function onDragLeave(e) {
 function onDrop(e) {
   ctx.handleDrop(props.node, e)
 }
-function onDragEnd() {
-  ctx.handleDragEnd()
-}
 function onContextMenu(e) {
   if (isUngrouped.value || ctx.loading.value) return
   ctx.openContextMenu(props.node, e)
@@ -93,7 +108,7 @@ function onRenameCancel() {
 </script>
 
 <template>
-  <div>
+  <div :data-key="node.key">
     <div
       ref="rowRef"
       class="mst-node"
@@ -108,25 +123,28 @@ function onRenameCancel() {
         [dropClass]: !!dropClass,
       }"
       :style="{ '--level': level }"
+      :data-key="node.key"
       role="treeitem"
       :aria-selected="isSelected"
       :aria-expanded="isGroup && !isUngrouped ? isExpanded : undefined"
       :aria-disabled="isUngrouped ? true : undefined"
       :tabindex="tabindex"
-      :draggable="canDrag ? 'true' : undefined"
       @click="onRowClick"
-      @dragstart="onDragStart"
       @dragover="onDragOver"
       @dragleave="onDragLeave"
       @drop="onDrop"
-      @dragend="onDragEnd"
       @contextmenu.stop="onContextMenu"
     >
-      <span v-if="canDrag" class="mst-node__grip" aria-hidden="true"><GripVertical /></span>
+      <span
+        v-if="canDrag"
+        class="mst-node__grip"
+        title="按住拖动：换位 / 拖入分组嵌套"
+        aria-label="拖动排序或移动"
+      ><GripVertical /></span>
       <span v-else class="mst-node__grip is-placeholder" aria-hidden="true"></span>
 
       <span
-        v-if="isGroup && !isUngrouped"
+        v-if="isGroup"
         class="mst-node__switcher"
         role="button"
         tabindex="-1"
@@ -184,21 +202,80 @@ function onRenameCancel() {
           <i v-if="node.kind === 'col' && node.required" class="mst-node__required">*</i>
         </template>
       </div>
+
+      <!-- 常驻操作：上移 / 下移 / 删除 -->
+      <span v-if="!isUngrouped" class="mst-node__actions">
+        <button
+          type="button"
+          class="mst-node__act"
+          title="上移"
+          aria-label="上移"
+          draggable="false"
+          :disabled="!canMoveUp"
+          @click.stop="onMove(-1)"
+        >
+          <ArrowUp :size="12" />
+        </button>
+        <button
+          type="button"
+          class="mst-node__act"
+          title="下移"
+          aria-label="下移"
+          draggable="false"
+          :disabled="!canMoveDown"
+          @click.stop="onMove(1)"
+        >
+          <ArrowDown :size="12" />
+        </button>
+        <button
+          v-if="isGroup && !isUngrouped"
+          type="button"
+          class="mst-node__act"
+          title="新增子分组"
+          aria-label="新增子分组"
+          draggable="false"
+          :disabled="!canAddSub"
+          @click.stop="onAddSub"
+        >
+          <FolderPlus :size="12" />
+        </button>
+        <button
+          type="button"
+          class="mst-node__act is-danger"
+          title="删除"
+          aria-label="删除"
+          draggable="false"
+          :disabled="!canDelete"
+          @click.stop="onDelete"
+        >
+          <Trash2 :size="12" />
+        </button>
+      </span>
     </div>
 
-    <!-- 展开/收起子级：未分组容器始终展开其下列 -->
+    <!-- 展开/收起子级：未分组容器始终展开其下列（子级列表也由 vuedraggable 驱动拖拽） -->
     <Transition name="mst-collapse">
       <div
         v-if="isGroup && isExpanded && node.children && node.children.length"
         class="mst-node__children"
       >
         <div class="mst-node__children-inner">
-          <StructureTreeNode
-            v-for="c in node.children"
-            :key="c.key"
-            :node="c"
-            :level="level + 1"
-          />
+          <draggable
+            :list="node.children"
+            item-key="key"
+            handle=".mst-node__grip"
+            :force-fallback="true"
+            :fallback-on-body="true"
+            fallback-class="mst-drag-fallback"
+            :animation="0"
+            :move="ctx.onSortMove"
+            @start="ctx.onSortStart"
+            @end="ctx.onSortEnd"
+          >
+            <template #item="{ element: c }">
+              <StructureTreeNode :node="c" :level="level + 1" />
+            </template>
+          </draggable>
         </div>
       </div>
     </Transition>
@@ -351,6 +428,49 @@ function onRenameCancel() {
   font-style: normal;
 }
 
+/* 常驻操作按钮：上移 / 下移 / 删除 */
+.mst-node__actions {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: 4px;
+  opacity: 0.85;
+}
+
+.mst-node__act {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--fms-text-secondary);
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+
+  &:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--fms-primary) 10%, transparent);
+    color: var(--fms-primary);
+  }
+
+  &.is-danger:hover:not(:disabled) {
+    background: color-mix(in srgb, #d95757 12%, transparent);
+    color: #d95757;
+  }
+
+  &:disabled {
+    opacity: 0.32;
+    cursor: not-allowed;
+  }
+}
+
 .mst-node__edit-input {
   flex: 1 1 auto;
   min-width: 80px;
diff --git a/code/fms/fms-vue/tests/helpers/app.js b/code/fms/fms-vue/tests/helpers/app.js
index a946def8..c8580907 100644
--- a/code/fms/fms-vue/tests/helpers/app.js
+++ b/code/fms/fms-vue/tests/helpers/app.js
@@ -61,9 +61,9 @@ export async function mountPage(Component, options = {}) {
     global: {
       plugins: [pinia, router],
       stubs: options.stubs || {},
-      ...(options.global || {}),
+      ...options.global,
     },
-    ...(options.mountOptions || {}),
+    ...options.mountOptions,
   })
 
   return { wrapper, router, pinia }
diff --git a/code/fms/fms-vue/tests/unit/module-table-edit-panel-dnd.spec.js b/code/fms/fms-vue/tests/unit/module-table-edit-panel-dnd.spec.js
index 83b1ba42..7928cf03 100644
--- a/code/fms/fms-vue/tests/unit/module-table-edit-panel-dnd.spec.js
+++ b/code/fms/fms-vue/tests/unit/module-table-edit-panel-dnd.spec.js
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
 import { describe, expect, it, vi, beforeEach } from 'vitest'
 import { createPinia, setActivePinia } from 'pinia'
 import ModuleTableEditPanel from '@/views/system/module-management/components/ModuleTableEditPanel.vue'
@@ -52,6 +53,7 @@ function mountPanel() {
       groups: groups.map((g) => ({ ...g })),
       editMode: 'table',
     },
+    global: { stubs: { draggable: StubDraggable } },
   })
 }
 
@@ -64,8 +66,9 @@ function treeRow(wrapper, title) {
 
 /* VTU 的 trigger 会把 dragover/drop 构造为 DragEvent（clientY 只有 getter），
    自定义坐标会被静默丢弃；手工构造事件并用 defineProperty 注入坐标。 */
-function fireDrag(el, type, { clientY = 20, dataTransfer } = {}) {
+function fireDrag(el, type, { clientX = 10, clientY = 20, dataTransfer } = {}) {
   const ev = new Event(type, { bubbles: true, cancelable: true })
+  Object.defineProperty(ev, 'clientX', { value: clientX })
   Object.defineProperty(ev, 'clientY', { value: clientY })
   Object.defineProperty(ev, 'dataTransfer', { value: dataTransfer })
   el.dispatchEvent(ev)
@@ -79,6 +82,59 @@ function firePointer(el, type, { clientX = 0, pointerId = 1 } = {}) {
   el.dispatchEvent(ev)
 }
 
+/* ---- 内部拖拽改为 vuedraggable（SortableJS force-fallback）驱动，与主表设计器一致 ----
+ * jsdom 不实现 elementFromPoint（命中检测），测试里 mock 它返回预先指定的目标行元素；
+ * onSortWindowMove 据此 closest('.mst-node') 定位落点。
+ * vuedraggable 组件用 StubDraggable 替换，测试通过 emit start/end 来模拟拖拽生命周期。 */
+const StubDraggable = {
+  name: 'draggable',
+  props: {
+    list: { type: Array, default: () => [] },
+    itemKey: { type: String, default: undefined },
+  },
+  emits: ['start', 'end'],
+  template: `
+    <div class="stub-draggable">
+      <template v-for="el in list" :key="el[itemKey || 'key']">
+        <slot name="item" :element="el" />
+      </template>
+      <slot name="footer" />
+    </div>
+  `,
+}
+
+let hitElement = null
+
+function fireMouse(el, type, { clientX = 0, clientY = 20, button = 0 } = {}) {
+  const ev = new Event(type, { bubbles: true, cancelable: true })
+  Object.defineProperty(ev, 'clientX', { value: clientX })
+  Object.defineProperty(ev, 'clientY', { value: clientY })
+  Object.defineProperty(ev, 'button', { value: button })
+  el.dispatchEvent(ev)
+}
+
+// 在源节点 grip 上开始拖拽（emit start 到 draggable 组件）
+function startMouseDrag(wrapper, srcTitle) {
+  const row = treeRow(wrapper, srcTitle)
+  const nodeKey = row.getAttribute('data-key')
+  expect(nodeKey, `节点缺少 data-key：${srcTitle}`).toBeTruthy()
+  wrapper.findComponent({ name: 'draggable' }).vm.$emit('start', {
+    item: { dataset: { key: nodeKey } },
+  })
+}
+
+// 移动鼠标到目标节点行（clientY 决定落点 before/inside/after）
+function moveMouseTo(wrapper, targetTitle, { clientX = 0, clientY = 20 } = {}) {
+  const row = treeRow(wrapper, targetTitle)
+  hitElement = row.querySelector('.mst-node__label') || row
+  fireMouse(window, 'mousemove', { clientX, clientY })
+}
+
+// 松手提交（emit end 到 draggable 组件）
+function endMouseDrag(wrapper) {
+  wrapper.findComponent({ name: 'draggable' }).vm.$emit('end')
+}
+
 function lastUpdate(wrapper) {
   const updates = wrapper.emitted('update')
   expect(updates?.length).toBeGreaterThan(0)
@@ -89,6 +145,8 @@ describe('ModuleTableEditPanel 分组树拖拽语义', () => {
   beforeEach(() => {
     // 面板（数据视图）内嵌 FmsTable，其主题读取 app store
     setActivePinia(createPinia())
+    // jsdom 无命中检测，mock elementFromPoint 返回测试指定的目标行元素
+    document.elementFromPoint = () => hitElement
     // 行高 40：clientY 5 → before，20 → inside，35 → after
     Element.prototype.getBoundingClientRect = () => ({
       top: 0,
@@ -107,10 +165,9 @@ describe('ModuleTableEditPanel 分组树拖拽语义', () => {
   it('列拖到列上（中部 inside）直接换位：插到目标列后并沿用其分组，不做入组嵌套', () => {
     const wrapper = mountPanel()
     // 年龄(c:2，属 g1) 拖到 姓名(c:1，未分组) 行中部
-    fireDrag(treeRow(wrapper, '年龄'), 'dragstart')
-    const dt = new FakeDataTransfer()
-    fireDrag(treeRow(wrapper, '姓名'), 'dragover', { dataTransfer: dt, clientY: 20 })
-    fireDrag(treeRow(wrapper, '姓名'), 'drop', { dataTransfer: dt })
+    startMouseDrag(wrapper, '年龄')
+    moveMouseTo(wrapper, '姓名', { clientY: 20 })
+    endMouseDrag(wrapper)
 
     const rows = lastUpdate(wrapper)
     expect(rows.map((r) => r.b_field_id)).toEqual(['1', '2', '3', '4'])
@@ -122,10 +179,9 @@ describe('ModuleTableEditPanel 分组树拖拽语义', () => {
   it('列拖到列上（上缘 before）换到目标列前，跨组移动时沿用目标列分组', () => {
     const wrapper = mountPanel()
     // 状态(c:3，属 g1) 拖到 备注(c:4，属 g2) 行上缘
-    fireDrag(treeRow(wrapper, '状态'), 'dragstart')
-    const dt = new FakeDataTransfer()
-    fireDrag(treeRow(wrapper, '备注'), 'dragover', { dataTransfer: dt, clientY: 5 })
-    fireDrag(treeRow(wrapper, '备注'), 'drop', { dataTransfer: dt })
+    startMouseDrag(wrapper, '状态')
+    moveMouseTo(wrapper, '备注', { clientY: 5 })
+    endMouseDrag(wrapper)
 
     const rows = lastUpdate(wrapper)
     expect(rows.map((r) => r.b_field_id)).toEqual(['1', '2', '3', '4'])
@@ -135,10 +191,9 @@ describe('ModuleTableEditPanel 分组树拖拽语义', () => {
   it('列拖到分组节点（中部 inside）：移入该分组直属列末尾', () => {
     const wrapper = mountPanel()
     // 姓名(c:1，未分组) 拖到分组「扩展信息」(g2) 行中部 → 加入 g2 直属列末尾（备注后）
-    fireDrag(treeRow(wrapper, '姓名'), 'dragstart')
-    const dt = new FakeDataTransfer()
-    fireDrag(treeRow(wrapper, '扩展信息'), 'dragover', { dataTransfer: dt, clientY: 20 })
-    fireDrag(treeRow(wrapper, '扩展信息'), 'drop', { dataTransfer: dt })
+    startMouseDrag(wrapper, '姓名')
+    moveMouseTo(wrapper, '扩展信息', { clientY: 20 })
+    endMouseDrag(wrapper)
 
     const rows = lastUpdate(wrapper)
     expect(rows.find((r) => r.b_field_id === '1').b_group_id).toBe('g2')
@@ -149,10 +204,9 @@ describe('ModuleTableEditPanel 分组树拖拽语义', () => {
   it('列拖到「未分组」收纳节点：移出分组并追加到未分组区', () => {
     const wrapper = mountPanel()
     // 年龄(c:2，属 g1) 拖到「未分组」节点 → b_group_id 置空，追加到未分组区末尾（姓名后）
-    fireDrag(treeRow(wrapper, '年龄'), 'dragstart')
-    const dt = new FakeDataTransfer()
-    fireDrag(treeRow(wrapper, '未分组'), 'dragover', { dataTransfer: dt, clientY: 20 })
-    fireDrag(treeRow(wrapper, '未分组'), 'drop', { dataTransfer: dt })
+    startMouseDrag(wrapper, '年龄')
+    moveMouseTo(wrapper, '未分组', { clientY: 20 })
+    endMouseDrag(wrapper)
 
     const rows = lastUpdate(wrapper)
     expect(rows.find((r) => r.b_field_id === '2').b_group_id).toBeNull()
@@ -197,10 +251,9 @@ describe('ModuleTableEditPanel 分组树拖拽语义', () => {
   it('分组拖到列上（inside）直接换位：变为该列所属分组的后置兄弟，不嵌套', () => {
     const wrapper = mountPanel()
     // 分组「基本信息」(g1) 拖到 备注(c:4，属 g2) 行中部 → g1 移到 g2 之后（同级换位）
-    fireDrag(treeRow(wrapper, '基本信息'), 'dragstart')
-    const dt = new FakeDataTransfer()
-    fireDrag(treeRow(wrapper, '备注'), 'dragover', { dataTransfer: dt, clientY: 20 })
-    fireDrag(treeRow(wrapper, '备注'), 'drop', { dataTransfer: dt })
+    startMouseDrag(wrapper, '基本信息')
+    moveMouseTo(wrapper, '备注', { clientY: 20 })
+    endMouseDrag(wrapper)
 
     // 分组重排：g2 在前(10)、g1 在后(20)，g1 仍是顶级分组
     const groupUpdates = wrapper.emitted('updateGroups')
@@ -219,10 +272,9 @@ describe('ModuleTableEditPanel 分组树拖拽语义', () => {
   it('分组拖到分组带上（inside）仍为嵌套语义', () => {
     const wrapper = mountPanel()
     // 分组「扩展信息」(g2) 拖到分组「基本信息」(g1) 行中部 → 成为 g1 子分组
-    fireDrag(treeRow(wrapper, '扩展信息'), 'dragstart')
-    const dt = new FakeDataTransfer()
-    fireDrag(treeRow(wrapper, '基本信息'), 'dragover', { dataTransfer: dt, clientY: 20 })
-    fireDrag(treeRow(wrapper, '基本信息'), 'drop', { dataTransfer: dt })
+    startMouseDrag(wrapper, '扩展信息')
+    moveMouseTo(wrapper, '基本信息', { clientY: 20 })
+    endMouseDrag(wrapper)
 
     const groupUpdates = wrapper.emitted('updateGroups')
     const nextGroups = groupUpdates.at(-1)[0]
@@ -248,18 +300,144 @@ describe('ModuleTableEditPanel 分组树拖拽语义', () => {
     expect(rows.find((r) => r.b_field_id === '2').b_width).toBe(130)
   })
 
-  it('实时换位：dragover 即提交，drop 不重复', () => {
-    // 拖过即换：拖拽经过目标行时立即换位，drop 阶段不再重复提交
+  it('预览表列头拖拽：列落列换位并沿用目标列分组', () => {
     const wrapper = mountPanel()
+    const cell = (fid) =>
+      wrapper
+        .findAll('th.mm-tdesign__cell')
+        .find((th) => th.attributes('data-field-id') === fid)
+    const src = cell('2') // 年龄（g1）
+    const target = cell('4') // 备注（g2）
+    expect(src).toBeTruthy()
+    expect(target).toBeTruthy()
     const dt = new FakeDataTransfer()
+    // 拖到目标列左半区（before）
+    fireDrag(src.element, 'dragstart', { dataTransfer: dt, clientX: 10, clientY: 20 })
+    fireDrag(target.element, 'dragover', { dataTransfer: dt, clientX: 5, clientY: 20 })
+    fireDrag(target.element, 'drop', { dataTransfer: dt, clientX: 5, clientY: 20 })
+
+    const rows = lastUpdate(wrapper)
+    // 年龄移到备注前并进入 g2；顺序：姓名(未分组) → 状态(g1) → 年龄/备注(g2)
+    expect(rows.find((r) => r.b_field_id === '2').b_group_id).toBe('g2')
+    expect(rows.map((r) => r.b_field_id)).toEqual(['1', '3', '2', '4'])
+  })
+
+  it('预览表列头拖拽：拖到分组带移入该分组直属列末尾', () => {
+    const wrapper = mountPanel()
+    const src = wrapper
+      .findAll('th.mm-tdesign__cell')
+      .find((th) => th.attributes('data-field-id') === '1') // 姓名（未分组）
+    const band = wrapper
+      .findAll('th.mm-tdesign__band')
+      .find((th) => th.attributes('data-band-id') === 'g2')
+    expect(src).toBeTruthy()
+    expect(band).toBeTruthy()
+    const dt = new FakeDataTransfer()
+    fireDrag(src.element, 'dragstart', { dataTransfer: dt, clientX: 10, clientY: 20 })
+    fireDrag(band.element, 'dragover', { dataTransfer: dt, clientX: 50, clientY: 20 })
+    fireDrag(band.element, 'drop', { dataTransfer: dt, clientX: 50, clientY: 20 })
+
+    const rows = lastUpdate(wrapper)
+    expect(rows.find((r) => r.b_field_id === '1').b_group_id).toBe('g2')
+    expect(rows.map((r) => r.b_field_id)).toEqual(['2', '3', '4', '1'])
+  })
+
+  it('预览表：全部分组时，拖到「未分组」落点把列拖出分组', async () => {
+    // 4 列全部在 g1（无未分组列）
+    const rows = [
+      { b_id: 'e1', b_module_id: 'm1', b_field_id: '1', b_group_id: 'g1', b_visible: 1, b_required: 0, b_readonly: 0, b_disabled: 0, b_width: 120, b_xh: 10 },
+      { b_id: 'e2', b_module_id: 'm1', b_field_id: '2', b_group_id: 'g1', b_visible: 1, b_required: 0, b_readonly: 0, b_disabled: 0, b_width: 120, b_xh: 20 },
+      { b_id: 'e3', b_module_id: 'm1', b_field_id: '3', b_group_id: 'g1', b_visible: 1, b_required: 0, b_readonly: 0, b_disabled: 0, b_width: 120, b_xh: 30 },
+      { b_id: 'e4', b_module_id: 'm1', b_field_id: '4', b_group_id: 'g1', b_visible: 1, b_required: 0, b_readonly: 0, b_disabled: 0, b_width: 120, b_xh: 40 },
+    ]
+    const wrapper = mount(ModuleTableEditPanel, {
+      props: {
+        moduleId: 'm1',
+        editConfig: rows.map((r) => ({ ...r })),
+        listConfig: [],
+        queryConfig: [],
+        fields,
+        groups: [groups[0]].map((g) => ({ ...g })),
+        editMode: 'table',
+      },
+      global: { stubs: { draggable: StubDraggable } },
+    })
+    const src = wrapper
+      .findAll('th.mm-tdesign__cell')
+      .find((th) => th.attributes('data-field-id') === '1')
+    expect(src).toBeTruthy()
+    // 无未分组列 → 拖拽开始后才出现「未分组」落点
+    expect(wrapper.find('.mm-tdesign__ungrouped-drop').exists()).toBe(false)
+    const dt = new FakeDataTransfer()
+    fireDrag(src.element, 'dragstart', { dataTransfer: dt, clientX: 10, clientY: 20 })
+    await nextTick()
+    const dropZone = wrapper.find('.mm-tdesign__ungrouped-drop')
+    expect(dropZone.exists()).toBe(true)
+    fireDrag(dropZone.element, 'dragover', { dataTransfer: dt, clientX: 10, clientY: 20 })
+    fireDrag(dropZone.element, 'drop', { dataTransfer: dt, clientX: 10, clientY: 20 })
+
+    const rowsOut = lastUpdate(wrapper)
+    expect(rowsOut.find((r) => r.b_field_id === '1').b_group_id).toBeNull()
+    expect(rowsOut.map((r) => r.b_field_id)).toEqual(['1', '2', '3', '4'])
+  })
+
+  it('悬停亮指示，松手才提交列拖拽', () => {
+    // 悬停阶段仅亮落点指示，mouseup 时提交一次变更，不再重复
+    const wrapper = mountPanel()
     // 年龄拖到姓名上（after）
-    fireDrag(treeRow(wrapper, '年龄'), 'dragstart')
-    fireDrag(treeRow(wrapper, '姓名'), 'dragover', { dataTransfer: dt, clientY: 20 })
-    // dragover 已触发换位：update 已发出
-    expect(wrapper.emitted('update')?.length).toBeGreaterThanOrEqual(1)
-    const updateCount = wrapper.emitted('update').length
-    // drop 不再新增 update
-    fireDrag(treeRow(wrapper, '姓名'), 'drop', { dataTransfer: dt })
-    expect(wrapper.emitted('update').length).toBe(updateCount)
+    startMouseDrag(wrapper, '年龄')
+    moveMouseTo(wrapper, '姓名', { clientY: 20 })
+    // mousemove 不触发换位：update 未发出
+    expect(wrapper.emitted('update')).toBeUndefined()
+    // mouseup 提交一次
+    endMouseDrag(wrapper)
+    expect(wrapper.emitted('update')?.length).toBe(1)
+  })
+
+  it('预览表头：未分组列头在 band 行贯穿整段高度，不留空白', () => {
+    // 4 列：2 列分组（g1），2 列未分组
+    const rows = [
+      { b_id: 'e1', b_module_id: 'm1', b_field_id: '1', b_group_id: null, b_visible: 1, b_required: 0, b_readonly: 0, b_disabled: 0, b_width: 120, b_xh: 10 },
+      { b_id: 'e2', b_module_id: 'm1', b_field_id: '2', b_group_id: null, b_visible: 1, b_required: 0, b_readonly: 0, b_disabled: 0, b_width: 120, b_xh: 20 },
+      { b_id: 'e3', b_module_id: 'm1', b_field_id: '3', b_group_id: 'g1', b_visible: 1, b_required: 0, b_readonly: 0, b_disabled: 0, b_width: 120, b_xh: 30 },
+      { b_id: 'e4', b_module_id: 'm1', b_field_id: '4', b_group_id: 'g1', b_visible: 1, b_required: 0, b_readonly: 0, b_disabled: 0, b_width: 120, b_xh: 40 },
+    ]
+    const wrapper = mount(ModuleTableEditPanel, {
+      props: {
+        moduleId: 'm1',
+        editConfig: rows.map((r) => ({ ...r })),
+        listConfig: [],
+        queryConfig: [],
+        fields,
+        // 仅一个分组 g1（基本信息），避免空分组 g2 产生额外占位列
+        groups: [groups[0]].map((g) => ({ ...g })),
+        editMode: 'table',
+      },
+      global: { stubs: { draggable: StubDraggable } },
+    })
+
+    // 未分组列头在 band 行渲染：2 个 cell，rowspan 贯穿全部表头行（band 行 + 列头行）
+    const ungroupedCells = wrapper.findAll('th.mm-tdesign__cell--ungrouped')
+    expect(ungroupedCells).toHaveLength(2)
+    ungroupedCells.forEach((th) => expect(th.attributes('rowspan')).toBe('2'))
+    expect(ungroupedCells[0].attributes('data-field-id')).toBe('1')
+    expect(ungroupedCells[1].attributes('data-field-id')).toBe('2')
+    // 未分组列头不是空带：渲染了字段名
+    expect(ungroupedCells[0].text()).toContain('姓名')
+    expect(ungroupedCells[1].text()).toContain('年龄')
+
+    // 分组带正常渲染
+    const bandCells = wrapper.findAll('th.mm-tdesign__band')
+    expect(bandCells).toHaveLength(1)
+    expect(bandCells[0].text()).toContain('基本信息')
+
+    // 列头行只渲染分组列（未分组列已在 band 行）
+    // 注意：只查预览表（.mm-tdesign__table），数据视图的 FmsTable 经 v-show 仍驻留 DOM
+    const theadRows = wrapper.findAll('.mm-tdesign__table thead tr')
+    const headerRow = theadRows.at(-1)
+    const headerCells = headerRow.findAll('th.mm-tdesign__cell')
+    expect(headerCells.map((th) => th.attributes('data-field-id'))).toEqual(['3', '4'])
+    // 总列数不变（colgroup 仍为 4 列）
+    expect(wrapper.findAll('colgroup col')).toHaveLength(4)
   })
 })