From db7813a2d2fbc195021cd50d143dd7510b192261 Mon Sep 17 00:00:00 2001
From: ZhangAo <hi_itao@163.com>
Date: Wed, 2 Sep 2026 17:31:35 +0800
Subject: [PATCH] 20260902173133

---
 code/fms/FMS新系统核心表结构设计.md           |   2 +-
 .../migrations/100_initialize_fms_new.sql     |   2 +-
 .../migrations/103_add_menu_icon_nvarchar.sql |  19 +
 .../src/components/fms-table/FmsTable.vue     | 181 +----
 .../src/components/icon-picker/IconPicker.vue |  86 +++
 .../src/components/ui/form/form-item.vue      |   8 +-
 .../src/components/ui/splitter/splitter.vue   |  62 +-
 .../fms/fms-vue/src/layouts/DefaultLayout.vue |  26 +-
 code/fms/fms-vue/src/utils/lucideIcons.js     |  96 ++-
 .../views/system/menu-management/index.vue    | 728 ++++++++++++------
 .../design-editor/TableDesignEditor.vue       |   1 -
 .../design-editor/common/EditDataView.vue     |   3 -
 .../views/system/module-management/index.vue  | 516 +++++++------
 .../fms-vue/tests/fms-table-virtual.spec.js   |  40 +-
 .../tests/views/keepalive-cache.spec.js       | 178 +++++
 .../views/menu-unsaved-node-switch.spec.js    |  77 ++
 16 files changed, 1350 insertions(+), 675 deletions(-)
 create mode 100644 code/fms/fms-api/config/migrations/103_add_menu_icon_nvarchar.sql
 create mode 100644 code/fms/fms-vue/src/components/icon-picker/IconPicker.vue
 create mode 100644 code/fms/fms-vue/tests/views/keepalive-cache.spec.js
 create mode 100644 code/fms/fms-vue/tests/views/menu-unsaved-node-switch.spec.js

diff --git a/code/fms/FMS新系统核心表结构设计.md b/code/fms/FMS新系统核心表结构设计.md
index 86ebbcbe..23b0985f 100644
--- a/code/fms/FMS新系统核心表结构设计.md
+++ b/code/fms/FMS新系统核心表结构设计.md
@@ -373,7 +373,7 @@ create table s_menu (
     b_route varchar(200) null,                          -- 固定页面路由或外链
     b_module_id bigint null,                            -- data 页面绑定的数据/查询模块
     b_power_code varchar(50) null,                      -- 页面访问权限编码(对应 s_power.b_code)
-    b_icon varchar(50) null,                            -- 图标
+    b_icon nvarchar(max) null,                          -- 图标：lucide:Name 引用 lucide 图标；其他字符串视为 SVG 标记
     b_xh int not null default 0,                        -- 排序号
     b_canuse int not null default 1,                    -- 是否启用(停用后不显示且不可访问)
     constraint pk_s_menu primary key (b_id),
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 f3974a1c..64a650c0 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
@@ -257,7 +257,7 @@ BEGIN
         b_route varchar(200) NULL,
         b_module_id bigint NULL,
         b_power_code varchar(50) NULL,
-        b_icon varchar(50) NULL,
+        b_icon nvarchar(max) NULL, -- 图标：lucide:Name 引用 lucide，否则为 SVG 标记
         b_xh int NOT NULL CONSTRAINT DF_s_menu_xh DEFAULT (0),
         b_canuse int NOT NULL CONSTRAINT DF_s_menu_canuse DEFAULT (1),
         CONSTRAINT PK_s_menu PRIMARY KEY (b_id),
diff --git a/code/fms/fms-api/config/migrations/103_add_menu_icon_nvarchar.sql b/code/fms/fms-api/config/migrations/103_add_menu_icon_nvarchar.sql
new file mode 100644
index 00000000..afaafec1
--- /dev/null
+++ b/code/fms/fms-api/config/migrations/103_add_menu_icon_nvarchar.sql
@@ -0,0 +1,19 @@
+/*
+  扩展 s_menu.b_icon 以支持自定义 SVG 图标。
+  b_icon 从 varchar(50) 改为 nvarchar(max)：
+  - lucide:Settings  —— 引用 lucide 图标
+  - 其他字符串         —— 当作 SVG 标记直接渲染
+  可重复执行：存在性判断避免重复变更。
+*/
+SET NOCOUNT ON;
+SET XACT_ABORT ON;
+
+IF DB_NAME() <> N'FMS'
+    THROW 53600, N'This migration can only run against the FMS database.', 1;
+
+IF COL_LENGTH(N'dbo.s_menu', N'b_icon') IS NOT NULL
+BEGIN
+    ALTER TABLE dbo.s_menu ALTER COLUMN b_icon nvarchar(max) NULL;
+END;
+
+PRINT N'Migration 103 applied: s_menu.b_icon expanded to nvarchar(max).';
\ No newline at end of file
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 8f4838fa..b7590c93 100644
--- a/code/fms/fms-vue/src/components/fms-table/FmsTable.vue
+++ b/code/fms/fms-vue/src/components/fms-table/FmsTable.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, useSlots, watch } from 'vue'
+import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, useSlots, watch } from 'vue'
 import { StkTable } from 'stk-table-vue'
 import { useAppStore } from '@/stores/app'
 import { createSelectionColumn, isSelectionColumn } from './utils/createSelectionCellRenderers'
@@ -10,7 +10,9 @@ defineOptions({ inheritAttrs: false })
 const props = defineProps({
   virtual: { type: Boolean, default: true },
   virtualX: { type: Boolean, default: true },
-  colResizable: { type: Boolean, default: true },
+  // 列宽拖拽默认开启；false=关闭；{ disabled: (col) => boolean }=按列禁用
+  // （铺满容器的弹性列应禁用拖拽，见库文档「列宽铺满容器hack方式」）
+  colResizable: { type: [Boolean, Object], default: true },
   // 边框自绘：true=外框圆角描边+行分隔线（默认）；false=无外框仅行分隔线（嵌入卡片场景）。
   // stk-table 库内边框恒为 false，不用其渐变边框。
   bordered: { type: [Boolean, String], default: true },
@@ -28,9 +30,6 @@ 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 },
   // 默认跟随应用深浅色模式，也允许单个表格显式覆盖。
@@ -54,12 +53,28 @@ const effectiveVirtual = computed(
   () => props.virtual && props.dataSource.length > MIN_VIRTUAL_ROW_COUNT,
 )
 
+// 横向虚拟门控：列数不超过阈值时关闭。库在 virtualX prop 为 true 时会把每列
+// 宽度钉死为 minWidth ?? width ?? 100（cellStyleMap 的 --cw + width/min-width/
+// max-width 三重锁），未设 width 的列失去「按比例铺满容器」的原生自适应。
+// 列数少、总宽不超容器的表用不上横向虚拟，关掉以恢复原生列宽分配。
+const MIN_VIRTUAL_X_COLUMN_COUNT = 20
+const effectiveVirtualX = computed(
+  () => props.virtualX && displayColumns.value.length > MIN_VIRTUAL_X_COLUMN_COUNT,
+)
+
 const rootRef = ref(null)
 const tableRef = ref(null)
 const slots = useSlots()
 const appStore = useAppStore()
 const tableTheme = computed(() => props.theme ?? (appStore.darkMode ? 'dark' : 'light'))
 
+// 父组件是否绑定 v-model:columns。未绑定时拖列宽/列序无处回写（拖了松手回弹），
+// 直接关闭这两个功能。声明了 update:columns emit 后监听器不会进 attrs，
+// 需从 vnode.props 探测；绑定关系在模板编写时确定，运行期不会变化，无需响应式。
+const columnsBound =
+  'onUpdate:columns' in (getCurrentInstance()?.vnode.props ?? {})
+const effectiveColResizable = columnsBound ? props.colResizable : false
+
 // Tab 面板从隐藏恢复时，等到容器拥有有效尺寸再刷新虚拟滚动布局。
 // rAF 将同一帧内的多次 ResizeObserver 通知合并，避免重复重排。
 let refreshRafId = 0
@@ -102,20 +117,8 @@ onMounted(() => {
     })
     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
@@ -274,7 +277,7 @@ const seqConfig = computed(() => {
   }
 })
 const columnDragConfig = computed(() => {
-  if (!props.columnDraggable) return false
+  if (!columnsBound || !props.columnDraggable) return false
   const configured = props.columnDraggable === true ? {} : props.columnDraggable
   return {
     ...configured,
@@ -325,7 +328,7 @@ const displayColumns = computed(() => {
       resizable: false,
     })
   }
-  if (props.rowDraggable && props.rowDragHandle) cols.unshift(dragRowColumn)
+  if (props.rowDraggable) cols.unshift(dragRowColumn)
   if (hasRowSelection.value) cols.unshift(selectionColumn)
   return cols.map((column) => ({
     ...column,
@@ -356,106 +359,6 @@ 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
-}
-
 // 行高/表头行高通过 prop 传给 StkTable：库内部会将其注入为滚动容器上的
 // --row-height / --header-row-height / --footer-row-height，并参与虚拟滚动计算，
 // 此处只补充库不管理的表头/表尾背景色。
@@ -669,7 +572,6 @@ onBeforeUnmount(() => {
   clearTimeout(resizeDebounceTimer)
   resizeObserver?.disconnect()
   resizeObserver = null
-  teardownWholeRowDrag()
   removeNavigationListeners()
   clearEditActivateTimer()
   pressedNavigationKeys.clear()
@@ -690,15 +592,8 @@ defineExpose({
   <div
     ref="rootRef"
     class="fms-table"
-    :class="[
-      { 'is-whole-row-drag': rowDraggable && !rowDragHandle },
-      bordered ? 'fms-table--bordered' : '',
-    ]"
+    :class="[bordered ? 'fms-table--bordered' : '']"
     @keydown.capture="handleKeydownCapture"
-    @dragstart="onWholeRowDragStart"
-    @dragover="onWholeRowDragOver"
-    @drop="onWholeRowDrop"
-    @dragend="onWholeRowDragEnd"
   >
     <StkTable
       ref="tableRef"
@@ -709,15 +604,15 @@ defineExpose({
       :row-height="props.rowHeight"
       :header-row-height="props.headerRowHeight"
       :virtual="effectiveVirtual"
-      :virtual-x="virtualX"
+      :virtual-x="effectiveVirtualX"
       :smooth-scroll="true"
       :auto-resize="false"
-      :col-resizable="colResizable"
+      :col-resizable="effectiveColResizable"
       :header-drag="columnDragConfig"
       :columns="displayColumns"
       @update:columns="onColumnsUpdate"
       :data-source="dataSource"
-      :drag-row-config="{ mode: rowDraggable && rowDragHandle ? 'insert' : 'none' }"
+      :drag-row-config="{ mode: rowDraggable ? 'insert' : 'none' }"
       :row-key="rowKey"
       :no-data-full="noDataFull"
       :show-overflow="showOverflow"
@@ -756,20 +651,6 @@ defineExpose({
   }
 }
 
-/* 整行拖拽：数据行鼠标提示可拖拽；拖拽中的行半透明、落点高亮 */
-.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%;
@@ -798,10 +679,20 @@ defineExpose({
 .fms-table__inner.stk-table {
   th,
   td {
+    border-right: 1px solid var(--fms-border);
     border-bottom: 1px solid var(--fms-border);
   }
 }
 
+/* 列宽铺满容器（库文档「列宽铺满容器hack方式」）：
+   开启 col-resizable 后库默认把 .stk-table-main 设为 flex:none + fit-content，
+   表格收缩到内容宽。非 virtual-x（列数 ≤ 阈值、未设宽列走原生自适应）时覆盖回
+   flex:1 使表格铺满容器；配合「固定列设 width、弹性列设 minWidth 且禁用其拖拽」
+   的列配置约定使用。宽表（virtual-x，横向滚动）保持库的收缩行为。 */
+.fms-table__inner.stk-table:not(.virtual-x) .stk-table-main {
+  flex: 1;
+}
+
 .fms-checkbox {
   display: flex;
   align-items: center;
diff --git a/code/fms/fms-vue/src/components/icon-picker/IconPicker.vue b/code/fms/fms-vue/src/components/icon-picker/IconPicker.vue
new file mode 100644
index 00000000..b78bd190
--- /dev/null
+++ b/code/fms/fms-vue/src/components/icon-picker/IconPicker.vue
@@ -0,0 +1,86 @@
+<script setup>
+/**
+ * 图标输入：text 输入 + 预览。
+ * - 输入 "lucide:chevron-down" 形式 → 渲染 lucide 图标（名称自动归一化）
+ * - 输入其他字符串 → 视为 SVG 标记直接渲染
+ * 预览在失焦后渲染，避免输入过程中逐字符重建 SVG。
+ * 渲染统一走 getIcon()，与侧边栏/菜单树一致。
+ */
+import { computed, ref, watch } from 'vue'
+import { getIcon } from '@/utils/lucideIcons'
+import Input from '@/components/ui/input/input.vue'
+
+const props = defineProps({
+  /** 双向绑定的图标值（"lucide:Name" 或 SVG 标记字符串） */
+  modelValue: { type: String, default: '' },
+  /** 禁用态 */
+  disabled: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['update:modelValue', 'change', 'clear'])
+
+// 预览基于已提交（失焦）的值：输入过程中不实时渲染，避免 SVG 逐字符重建闪烁
+const committed = ref(props.modelValue)
+
+watch(
+  () => props.modelValue,
+  (v) => {
+    if (v === committed.value) return
+    // 外部赋值（重载/切换菜单）时立即同步预览；仅用户输入时不更新
+    committed.value = v
+  },
+)
+
+function onBlur() {
+  committed.value = props.modelValue
+}
+
+const previewIcon = computed(() => getIcon(committed.value))
+</script>
+
+<template>
+  <div class="icon-input" :class="{ 'icon-input-disabled': disabled }">
+    <div class="icon-input__field">
+      <Input
+        :model-value="modelValue"
+        :disabled="disabled"
+        allow-clear
+        @update:model-value="(v) => emit('update:modelValue', v)"
+        @blur="onBlur"
+      />
+    </div>
+    <div v-if="previewIcon" class="icon-input__preview" :title="committed">
+      <component :is="previewIcon" class="icon-input__preview-icon" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.icon-input {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  max-width: 720px;
+}
+
+.icon-input__field {
+  flex: 1;
+  min-width: 0;
+}
+
+.icon-input__preview {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  color: var(--fms-text);
+
+  :deep(svg) {
+    width: 18px;
+    height: 18px;
+  }
+}
+</style>
diff --git a/code/fms/fms-vue/src/components/ui/form/form-item.vue b/code/fms/fms-vue/src/components/ui/form/form-item.vue
index a065c5bc..f49f76e1 100644
--- a/code/fms/fms-vue/src/components/ui/form/form-item.vue
+++ b/code/fms/fms-vue/src/components/ui/form/form-item.vue
@@ -168,7 +168,13 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div ref="rootEl" :class="rootClasses" :style="itemStyle" @focusout="onRootFocusOut">
+  <div
+    ref="rootEl"
+    :class="rootClasses"
+    :style="itemStyle"
+    :data-field="String(props.name)"
+    @focusout="onRootFocusOut"
+  >
     <label
       v-if="label !== '' || $slots.label"
       class="fms-form-item-label"
diff --git a/code/fms/fms-vue/src/components/ui/splitter/splitter.vue b/code/fms/fms-vue/src/components/ui/splitter/splitter.vue
index 81af2f88..451af5b6 100644
--- a/code/fms/fms-vue/src/components/ui/splitter/splitter.vue
+++ b/code/fms/fms-vue/src/components/ui/splitter/splitter.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onBeforeUnmount, onMounted, ref, useSlots } from 'vue'
+import { cloneVNode, computed, onBeforeUnmount, onMounted, ref, useSlots } from 'vue'
 import SplitterPanel from './panel.vue'
 
 /* ---------- props / emits / slots ---------- */
@@ -43,16 +43,23 @@ const isVertical = computed(() => props.direction === 'vertical')
 function camelize(str) {
   return str.replace(/-(\w)/g, (_, c) => c.toUpperCase())
 }
-const panelItems = computed(() =>
-  (slots.default?.() ?? [])
-    .filter((node) => node.type === SplitterPanel)
-    .map((node) => {
-      const raw = node.props ?? {}
-      const props = {}
-      for (const key of Object.keys(raw)) props[camelize(key)] = raw[key]
-      return { node, props }
-    }),
-)
+
+// 收集默认插槽中的 SplitterPanel 节点，统一为 { node, props } 结构。
+// 注意：必须是普通函数并在渲染时调用 —— slot 内容每次渲染都可能是新的（父组件更新
+// 面板内容时会生成新 vnode），不能用 computed 缓存，否则父组件更新后仍渲染旧 vnode，
+// 导致 <component :is> 对已失效的 vnode 执行 patch，报 null vnode 错误。
+function getPanelItems() {
+  const items = (slots.default?.() ?? []).filter((node) => node.type === SplitterPanel)
+  return items.map((node, index) => {
+    const raw = node.props ?? {}
+    const normalized = {}
+    for (const key of Object.keys(raw)) normalized[camelize(key)] = raw[key]
+    // 计算当前面板的显示尺寸：受控 size > 拖拽固定 > default-size
+    const size = normalized.size ?? innerSizes.value[index] ?? normalized.defaultSize
+    const vnode = cloneVNode(node, { size })
+    return { node: vnode, props: normalized, isLast: index === items.length - 1 }
+  })
+}
 
 /* ---------- 尺寸工具 ---------- */
 function clamp(value, min, max) {
@@ -80,26 +87,18 @@ function measurePanelSizes() {
   return Array.from(nodes).map((el) => (isVertical.value ? el.offsetHeight : el.offsetWidth))
 }
 
-// 传给面板的显示尺寸：受控 size > 内部固定 > default-size
-function displaySize(index) {
-  const panel = panelItems.value[index]
-  if (!panel) return undefined
-  if (panel.props.size !== undefined) return panel.props.size
-  if (innerSizes.value[index] !== undefined) return innerSizes.value[index]
-  return panel.props.defaultSize
-}
-
 // 分隔条两侧面板都可调整时才允许拖拽/聚焦
 function canResize(index) {
-  const prev = panelItems.value[index]
-  const next = panelItems.value[index + 1]
+  const items = getPanelItems()
+  const prev = items[index]
+  const next = items[index + 1]
   return prev && next && prev.props.resizable !== false && next.props.resizable !== false
 }
 
 /* ---------- ARIA 值（预计算，避免模板内计算） ---------- */
 const ariaValues = computed(() => {
   const container = containerSize.value
-  const items = panelItems.value
+  const items = getPanelItems()
   if (!container || items.length < 2) return []
   // 各面板估算 px：内部固定 > size/default-size 换算 > 自动均分剩余
   const pxList = items.map((panel, i) => {
@@ -133,10 +132,11 @@ function applyOffset(index, startSizes, container, delta) {
   let offset = delta
   const prev = startSizes[index]
   const next = startSizes[index + 1]
-  const prevMin = toPx(panelItems.value[index].props.min, container) ?? 0
-  const prevMax = toPx(panelItems.value[index].props.max, container) ?? container
-  const nextMin = toPx(panelItems.value[index + 1].props.min, container) ?? 0
-  const nextMax = toPx(panelItems.value[index + 1].props.max, container) ?? container
+  const items = getPanelItems()
+  const prevMin = toPx(items[index].props.min, container) ?? 0
+  const prevMax = toPx(items[index].props.max, container) ?? container
+  const nextMin = toPx(items[index + 1].props.min, container) ?? 0
+  const nextMax = toPx(items[index + 1].props.max, container) ?? container
   offset = clamp(offset, prevMin - prev, prevMax - prev)
   offset = clamp(offset, next - nextMax, next - nextMin)
   const result = [...startSizes]
@@ -158,7 +158,7 @@ function applySizes(result, index) {
 // （如侧栏折叠、窗口缩放）时剩余空间无法被自动填满
 function releaseAutoPanels() {
   const next = [...innerSizes.value]
-  panelItems.value.forEach((panel, i) => {
+  getPanelItems().forEach((panel, i) => {
     if (next[i] !== undefined && panel.props.size == null && panel.props.defaultSize == null) {
       delete next[i]
     }
@@ -268,10 +268,10 @@ onBeforeUnmount(() => {
 
 <template>
   <div ref="rootRef" class="fms-splitter" :class="`fms-splitter-${direction}`">
-    <template v-for="(item, index) in panelItems" :key="index">
-      <component :is="item.node" :size="displaySize(index)" />
+    <template v-for="(item, index) in getPanelItems()" :key="index">
+      <component :is="item.node" />
       <div
-        v-if="index < panelItems.length - 1"
+        v-if="!item.isLast"
         class="fms-splitter-bar"
         :class="{
           'fms-splitter-bar-active': activeBar === index,
diff --git a/code/fms/fms-vue/src/layouts/DefaultLayout.vue b/code/fms/fms-vue/src/layouts/DefaultLayout.vue
index abf1a042..84190cdb 100644
--- a/code/fms/fms-vue/src/layouts/DefaultLayout.vue
+++ b/code/fms/fms-vue/src/layouts/DefaultLayout.vue
@@ -18,20 +18,28 @@ const appStore = useAppStore()
  *   使页面组件自身重新挂载、状态归零，而外层缓存槽位不变。
  * - 每个页签一个命名包装组件（include 名：普通页 = componentName，详情页 =
  *   cacheKeyOf(fullPath)），使 keep-alive 的 include 能按页签精确销毁实例；
- *   不同参数（/detail/1、/detail/2）因外层 key = fullPath 不同而天然多个独立缓存。 */
+ *   不同参数（/detail/1、/detail/2）因外层 key = fullPath 不同而天然多个独立缓存。
+ * - 包装组件渲染必须只依赖「自身页签」的数据，不能读当前路由：
+ *   keep-alive 缓存的组件实例仍是响应式活的（渲染 effect / watch 不会随 deactivate 暂停），
+ *   若渲染函数读当前 route，每次路由切换都会让所有已缓存包装重渲染 —— 内层 key 变化
+ *   会把缓存里的页面组件销毁重挂（状态丢失，表现为「缓存不生效」）。
+ *   故自身 fullPath 经 props 传入（父级只给当前激活实例传 props，缓存实例冻结在自己的
+ *   fullPath 上）；cacheByKey / 详情 id 在创建时按当时的路由快照定死。 */
 const pageWrapperCache = {}
-function getPageWrapper(name, fullPath, innerComponent) {
+function getPageWrapper(name, fullPath, innerComponent, cacheByKey) {
   if (!pageWrapperCache[name]) {
     pageWrapperCache[name] = {
       fullPath,
       comp: defineComponent({
         name,
-        setup() {
-          const r = useRoute()
+        props: { fullPath: String },
+        setup(props) {
           const app = useAppStore()
+          // 详情页 id：从自身 fullPath 末段取（/detail/123?x=1 → 123），不读当前路由 params
+          const detailId = () => (props.fullPath.split('?')[0].match(/[^/]+$/) || [])[0]
           return () => {
-            const inner = r.meta?.cacheByKey ? h(DetailPage, { id: r.params.id }) : innerComponent
-            const innerKey = `${r.fullPath}:${app.getRouteRefreshKey(r.fullPath)}`
+            const inner = cacheByKey ? h(DetailPage, { id: detailId() }) : innerComponent
+            const innerKey = `${props.fullPath}:${app.getRouteRefreshKey(props.fullPath)}`
             return h(inner, { key: innerKey })
           }
         },
@@ -139,7 +147,9 @@ provide('toggleSidebar', toggleSidebar)
             <div class="fms-content">
               <router-view v-slot="{ Component }">
                 <transition name="page" mode="out-in">
-                  <div :key="route.fullPath" class="fms-page-wrap">
+                  <!-- 稳定的包裹层：key 固定，保证 keep-alive 实例长期存活（缓存不随路由切换销毁）。
+                       页面缓存键由内层 <component :key="route.fullPath"> 驱动 -->
+                  <div key="page-wrap" class="fms-page-wrap">
                     <keep-alive :include="appStore.cachedViews" :max="8">
                       <component
                         :is="
@@ -149,9 +159,11 @@ provide('toggleSidebar', toggleSidebar)
                               : route.meta?.componentName,
                             route.fullPath,
                             Component,
+                            !!route.meta?.cacheByKey,
                           )
                         "
                         :key="route.fullPath"
+                        :full-path="route.fullPath"
                       />
                     </keep-alive>
                   </div>
diff --git a/code/fms/fms-vue/src/utils/lucideIcons.js b/code/fms/fms-vue/src/utils/lucideIcons.js
index 40f2acb5..f5605fc5 100644
--- a/code/fms/fms-vue/src/utils/lucideIcons.js
+++ b/code/fms/fms-vue/src/utils/lucideIcons.js
@@ -1,3 +1,4 @@
+import { defineComponent, h } from 'vue'
 import * as LucideIcons from '@lucide/vue'
 
 let iconMap = null
@@ -19,11 +20,96 @@ function loadIcons() {
 }
 
 /**
- * 同步获取图标组件，传入 null/空字符串时返回 null。
- * @param {string | null | undefined} name lucide 图标名（首字母大写），如 "LayoutGrid"
+ * 解析图标值，返回可渲染的 Vue 组件：
+ * - 以 "lucide:" 开头（如 "lucide:chevron-down"）→ 去掉前缀，名称归一化后匹配 lucide 图标
+ * - 其他非空字符串 → 先尝试按 lucide 图标名匹配；匹配不到时仅当看起来是有效 SVG 标记才渲染
+ * - 无效内容（既非 lucide 名也非 SVG 标记）→ 返回 null，不渲染
+ * 传入 null/空字符串时返回 null。
+ * @param {string | null | undefined} value
  */
-export function getIcon(name) {
+export function getIcon(value) {
+  if (!value || typeof value !== 'string') return null
+  const trimmed = value.trim()
+  if (!trimmed) return null
+
   if (!iconMap) loadIcons()
-  if (!name || !iconMap) return null
-  return iconMap[name] || null
+
+  // lucide 前缀：显式指定图标名，匹配不到返回 null
+  if (trimmed.startsWith('lucide:')) {
+    const name = normalizeIconName(trimmed.slice('lucide:'.length))
+    return iconMap[name] || null
+  }
+
+  // 无前缀：先尝试 lucide 图标名匹配
+  const normalized = normalizeIconName(trimmed)
+  if (iconMap[normalized]) return iconMap[normalized]
+
+  // 既非 lucide 名：仅当是有效 SVG 标记才渲染，否则视为无效不渲染
+  return looksLikeSvg(trimmed) ? getSvgComponent(trimmed) : null
 }
+
+// 把各种命名风格归一化为 lucide 的 PascalCase 导出名：
+// "chevron-down" / "chevron_down" / "chevronDown" / "CHEVRON DOWN" → "ChevronDown"
+function normalizeIconName(name) {
+  const parts = String(name || '').split(/[-_\s]+/).filter(Boolean)
+  if (parts.length === 0) return ''
+  // 无分隔符（camelCase / 已是大写开头）：直接首字母大写
+  if (parts.length === 1) {
+    const single = parts[0]
+    return single.charAt(0).toUpperCase() + single.slice(1)
+  }
+  return parts.map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
+}
+
+// 判断字符串是否为有效 SVG 标记：用 DOMParser 按 SVG 文档解析，
+// 解析失败（存在 parsererror）或根元素不是 <svg> 时视为无效。
+// 无 DOMParser 环境（SSR/测试）回退到基础启发式判断。
+function looksLikeSvg(content) {
+  const trimmed = String(content || '').trim()
+  if (!trimmed) return false
+  if (typeof DOMParser === 'undefined') {
+    return /^<svg[\s>]/i.test(trimmed)
+  }
+  try {
+    const doc = new DOMParser().parseFromString(trimmed, 'image/svg+xml')
+    if (doc.querySelector('parsererror')) return false
+    const root = doc.documentElement
+    return root && root.tagName.toLowerCase() === 'svg'
+  } catch {
+    return false
+  }
+}
+
+const svgComponentCache = new Map()
+
+function getSvgComponent(svg) {
+  let component = svgComponentCache.get(svg)
+  if (!component) {
+    component = defineComponent({
+      name: 'RawSvgIcon',
+      render() {
+        return h('span', {
+          class: 'raw-svg-icon',
+          style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            lineHeight: 0,
+          },
+          innerHTML: svg,
+        })
+      },
+    })
+    svgComponentCache.set(svg, component)
+  }
+  return component
+}
+
+/**
+ * 获取所有 lucide 图标名称（按字母排序）。
+ * @returns {string[]}
+ */
+export function getIconNames() {
+  if (!iconMap) loadIcons()
+  return Object.keys(iconMap).toSorted()
+}
\ No newline at end of file
diff --git a/code/fms/fms-vue/src/views/system/menu-management/index.vue b/code/fms/fms-vue/src/views/system/menu-management/index.vue
index dcd24d2c..f6aebc72 100644
--- a/code/fms/fms-vue/src/views/system/menu-management/index.vue
+++ b/code/fms/fms-vue/src/views/system/menu-management/index.vue
@@ -19,9 +19,24 @@ import {
   RefreshCw,
   Languages,
 } from '@lucide/vue'
-import { Button, Checkbox, Input, Select, Switch, Splitter, SplitterPanel, Tree, Modal, Message, Form, FormItem, Dropdown } from '@/components/ui'
+import {
+  Button,
+  Checkbox,
+  Input,
+  Select,
+  Switch,
+  Splitter,
+  SplitterPanel,
+  Tree,
+  Modal,
+  Message,
+  Form,
+  FormItem,
+  Dropdown,
+} from '@/components/ui'
+import IconPicker from '@/components/icon-picker/IconPicker.vue'
 import FmsTable from '@/components/fms-table/FmsTable.vue'
-import { loadDataApi, saveObjectApi, nextIdApi } from '@/services/api'
+import { loadDataApi, loadDataBySqlApi, saveObjectApi, nextIdApi } from '@/services/api'
 import {
   buildTree,
   sortTree,
@@ -290,6 +305,24 @@ async function onMenuDrop({ dragKey, dropKey, dropPosition }) {
 }
 
 /* ================= 新增菜单 ================= */
+/** 从树节点提取纯菜单行（剔除 children/isLeaf/icon 等树注入字段），用于未保存节点切回时重建草稿 */
+function menuRowOf(node) {
+  return {
+    b_id: node.b_id,
+    b_code: node.b_code,
+    b_parent_id: node.b_parent_id ? String(node.b_parent_id) : null,
+    b_name: node.b_name,
+    b_i18n: node.b_i18n ?? null,
+    b_menu_type: node.b_menu_type,
+    b_route: node.b_route ?? null,
+    b_module_id: node.b_module_id ?? null,
+    b_power_code: node.b_power_code ?? null,
+    b_icon: node.b_icon ?? null,
+    b_xh: node.b_xh,
+    b_canuse: node.b_canuse,
+  }
+}
+
 async function addMenu(parentId, menuTypeValue = 'page') {
   const res = await nextIdApi()
   const newId = String(res.data)
@@ -400,16 +433,17 @@ async function loadMenuConfig(menuId) {
     }
     i18nValues.value = i18nValuesInit
     originalI18nValues.value = { ...i18nValuesInit }
-    // 操作/按钮权限点：按 b_power_type='action' + b_module_id=菜单 id 加载
+    // 操作/按钮权限点：仅 page/data/external 才有（目录是导航容器，无按钮权限）
     powersLoading.value = true
     try {
-      const powerRes = menu
-        ? await loadDataApi(
-            's_power',
-            `b_power_type = 'action' AND b_module_id = ${id}`,
-            'b_xh ASC, b_id ASC',
-          )
-        : { data: [] }
+      const powerRes =
+        menu && menu.b_menu_type !== 'directory'
+          ? await loadDataApi(
+              's_power',
+              `b_power_type = 'action' AND b_module_id = ${id}`,
+              'b_xh ASC, b_id ASC',
+            )
+          : { data: [] }
       powers.value = (powerRes.data || []).map((row) => ({
         b_id: row.b_id,
         b_code: row.b_code,
@@ -446,6 +480,26 @@ watch(menuSelectedId, (id) => {
     drafts.value = null
     return
   }
+  // 未落库的新节点：临时 id 在库里查不到行，不能走 loadMenuConfig
+  // （会得到 menu 为 null 的「真值」drafts，模板按 null 渲染直接崩溃）。
+  // 从树节点重建草稿继续编辑；originals 与之一致（未编辑态）。
+  if (unsavedMenuIds.has(String(id))) {
+    const node = findTreeNode(menuTreeData.value, String(id))
+    configLoading.value = false
+    if (!node) {
+      loadedMenuId.value = null
+      drafts.value = null
+      return
+    }
+    drafts.value = cloneData({ menu: menuRowOf(node) })
+    originals.value = cloneData(drafts.value)
+    i18nValues.value = { 'zh-CN': node.b_name || '' }
+    originalI18nValues.value = { ...i18nValues.value }
+    powers.value = []
+    powersBaseline.value = '[]'
+    loadedMenuId.value = String(id)
+    return
+  }
   loadedMenuId.value = null
   drafts.value = null
   void loadMenuConfig(id)
@@ -459,7 +513,10 @@ function hasUnsavedChanges() {
   if (!drafts.value || !originals.value) return false
   if (JSON.stringify(drafts.value.menu) !== JSON.stringify(originals.value.menu)) return true
   // 多语言非默认语言变化视为未保存
-  if (nonDefaultLanguages.some((l) => i18nValues.value[l.code] !== originalI18nValues.value[l.code])) return true
+  if (
+    nonDefaultLanguages.some((l) => i18nValues.value[l.code] !== originalI18nValues.value[l.code])
+  )
+    return true
   // 操作/按钮权限点变化视为未保存
   const current = JSON.stringify(powers.value)
   if (current !== powersBaseline.value) return true
@@ -514,7 +571,8 @@ const formRef = ref(null)
 
 async function saveMenu() {
   if (!selectedMenu.value || busy.value) return false
-  if (loadedMenuId.value == null || String(loadedMenuId.value) !== String(menuSelectedId.value)) return false
+  if (loadedMenuId.value == null || String(loadedMenuId.value) !== String(menuSelectedId.value))
+    return false
   const menuId = String(selectedMenu.value.b_id)
 
   // Validate form
@@ -535,8 +593,14 @@ async function saveMenu() {
     const menuI18nKey = `menu.${menuData.b_code}`
     menuData.b_i18n = menuI18nKey
 
-    // 权限编码留空时按 菜单编码 自动生成（权限跟着菜单走）
-    if (!menuData.b_power_code) menuData.b_power_code = `menu.${menuData.b_code}`
+    // 目录是纯导航容器：可见性由子菜单决定，自身不需要访问权限编码，也不生成权限点。
+    // 仅 page/data/external 需要访问权限编码；留空时按菜单编码自动生成（权限跟着菜单走）
+    const menuIsDirectory = menuData.b_menu_type === 'directory'
+    if (menuIsDirectory) {
+      menuData.b_power_code = null
+    } else if (!menuData.b_power_code) {
+      menuData.b_power_code = `menu.${menuData.b_code}`
+    }
 
     const isNew = unsavedMenuIds.has(menuId)
     const req = { table: 's_menu', key_field: 'b_id' }
@@ -568,15 +632,32 @@ async function saveMenu() {
       reqs.push(i18nReq)
     }
 
+    // 目录是纯导航容器：自身不需要访问权限编码与权限点。
+    // 若该菜单此前（或改为目录前）生成过权限记录，保存时一并清理，避免孤儿数据：
+    // - 访问权限（s_power.b_power_type='menu'，按原权限编码关联）
+    // - 操作/按钮权限（s_power.b_power_type='action'，按 b_module_id=菜单 id 关联）
+    if (menuIsDirectory) {
+      const prevPowerCode = originals.value?.menu?.b_power_code
+      if (prevPowerCode) {
+        reqs.push({
+          table: 's_power',
+          key_field: 'b_id',
+          deletes: [{ b_power_type: 'menu', b_resource: prevPowerCode }],
+        })
+      }
+      reqs.push({
+        table: 's_power',
+        key_field: 'b_id',
+        deletes: [{ b_power_type: 'action', b_module_id: menuId }],
+      })
+    }
+
     // 访问权限点（s_power.b_power_type='menu'，自动同步）
     const powerCode = (menuData.b_power_code || '').trim()
     if (powerCode) {
       // 查是否有已存在的访问权限（按 b_resource = 菜单权限编码）
       const accessPowerRes = menuData.b_id
-        ? await loadDataApi(
-            's_power',
-            `b_power_type = 'menu' AND b_resource = '${powerCode}'`,
-          )
+        ? await loadDataApi('s_power', `b_power_type = 'menu' AND b_resource = '${powerCode}'`)
         : { data: [] }
       const existingAccess = accessPowerRes.data?.[0]
       if (existingAccess) {
@@ -620,63 +701,66 @@ async function saveMenu() {
     }
 
     // 操作/按钮权限点（s_power.b_power_type='action'，diff 保存）
-    const baselineIds = new Set()
-    try {
-      for (const r of JSON.parse(powersBaseline.value)) {
-        if (r.b_id) baselineIds.add(String(r.b_id))
+    // 目录是导航容器，不保存操作/按钮权限点
+    if (!menuIsDirectory && powers.value.length > 0) {
+      const baselineIds = new Set()
+      try {
+        for (const r of JSON.parse(powersBaseline.value)) {
+          if (r.b_id) baselineIds.add(String(r.b_id))
+        }
+      } catch {
+        /* 空基线 */
       }
-    } catch { /* 空基线 */ }
-    const currentIds = new Set(
-      powers.value.filter((r) => r.b_id).map((r) => String(r.b_id)),
-    )
-    // 被删除的行
-    for (const id of baselineIds) {
-      if (!currentIds.has(id)) {
-        reqs.push({ table: 's_power', key_field: 'b_id', deletes: [{ b_id: id }] })
+      const currentIds = new Set(powers.value.filter((r) => r.b_id).map((r) => String(r.b_id)))
+      // 被删除的行
+      for (const id of baselineIds) {
+        if (!currentIds.has(id)) {
+          reqs.push({ table: 's_power', key_field: 'b_id', deletes: [{ b_id: id }] })
+        }
       }
-    }
-    // 新增/更新的行
-    for (const row of powers.value) {
-      if (!row.b_code || !String(row.b_code).trim()) continue // 未填编码的行不保存
-      // 基线中已存在的 id 为真实主键 → 更新；临时 id（负数，未入库）→ 新增
-      if (row.b_id && baselineIds.has(String(row.b_id))) {
-        reqs.push({
-          table: 's_power',
-          key_field: 'b_id',
-          updates: [
-            {
-              b_id: row.b_id,
-              b_power_type: 'action',
-              b_code: row.b_code,
-              b_name: row.b_name,
-              b_resource: row.b_code,
-              b_operation: 'execute',
-              b_module_id: menuId,
-              b_field_id: null,
-              b_canuse: Number(row.b_canuse) === 1 ? 1 : 0,
-            },
-          ],
-        })
-      } else {
-        // 新增行需要分配主键
-        const newId = String((await nextIdApi()).data)
-        reqs.push({
-          table: 's_power',
-          key_field: 'b_id',
-          inserts: [
-            {
-              b_id: newId,
-              b_power_type: 'action',
-              b_code: row.b_code,
-              b_name: row.b_name,
-              b_resource: row.b_code,
-              b_operation: 'execute',
-              b_module_id: menuId,
-              b_field_id: null,
-              b_canuse: Number(row.b_canuse) === 1 ? 1 : 0,
-            },
-          ],
-        })
+      // 新增/更新的行
+      for (const row of powers.value) {
+        if (!row.b_code || !String(row.b_code).trim()) continue // 未填编码的行不保存
+        // 基线中已存在的 id 为真实主键 → 更新；临时 id（负数，未入库）→ 新增
+        if (row.b_id && baselineIds.has(String(row.b_id))) {
+          reqs.push({
+            table: 's_power',
+            key_field: 'b_id',
+            updates: [
+              {
+                b_id: row.b_id,
+                b_power_type: 'action',
+                b_code: row.b_code,
+                b_name: row.b_name,
+                b_resource: row.b_code,
+                b_operation: 'execute',
+                b_module_id: menuId,
+                b_field_id: null,
+                b_canuse: Number(row.b_canuse) === 1 ? 1 : 0,
+              },
+            ],
+          })
+        } else {
+          // 新增行需要分配主键
+          const newId = String((await nextIdApi()).data)
+          reqs.push({
+            table: 's_power',
+            key_field: 'b_id',
+            inserts: [
+              {
+                b_id: newId,
+                b_power_type: 'action',
+                b_code: row.b_code,
+                b_name: row.b_name,
+                b_resource: row.b_code,
+                b_operation: 'execute',
+                b_module_id: menuId,
+                b_field_id: null,
+                b_canuse: Number(row.b_canuse) === 1 ? 1 : 0,
+              },
+            ],
+          })
+        }
       }
     }
 
@@ -735,6 +819,7 @@ function onMenuTypeChange(v) {
   if (v === 'directory') {
     drafts.value.menu.b_route = null
     drafts.value.menu.b_module_id = null
+    drafts.value.menu.b_power_code = null
   } else if (v === 'page') {
     drafts.value.menu.b_module_id = null
   } else if (v === 'data') {
@@ -758,7 +843,9 @@ async function onToggleEnable(node, checked) {
   // 未保存草稿仅本地，落库时生效
   if (unsavedMenuIds.has(id)) return
   try {
-    await saveObjectApi([{ table: 's_menu', key_field: 'b_id', updates: [{ b_id: id, b_canuse: newVal }] }])
+    await saveObjectApi([
+      { table: 's_menu', key_field: 'b_id', updates: [{ b_id: id, b_canuse: newVal }] },
+    ])
     Message.success(newVal ? '菜单已启用' : '菜单已停用')
   } catch (e) {
     node.b_canuse = newVal === 1 ? 0 : 1
@@ -776,44 +863,34 @@ const powers = ref([])
 const powersBaseline = ref('')
 const powersLoading = ref(false)
 
-/** 权限点表格列配置 */
+/** 权限点表格列配置
+ *  列宽铺满约定（库文档「列宽铺满容器hack方式」）：固定列设 width，
+ *  弹性列（权限名称）设 minWidth 占满剩余宽度，并在 colResizable 中禁用其拖拽。 */
 const powerColumns = shallowRef([
   {
     dataIndex: 'b_code',
     title: '权限编码',
-    width: 170,
-    editor: { type: 'input', placeholder: '如 add' },
+    width: 150,
+    editor: { type: 'input' },
   },
   {
     dataIndex: 'b_name',
     title: '权限名称',
-    width: 170,
-    editor: { type: 'input', placeholder: '如 新增' },
-  },
-  {
-    dataIndex: 'b_power_type',
-    title: '类型',
-    width: 130,
-    editor: {
-      type: 'select',
-      options: [
-        { label: '操作权限', value: 'action' },
-        { label: '按钮权限', value: 'button' },
-      ],
-    },
+    minWidth: 150,
+    editor: { type: 'input' },
   },
   {
     dataIndex: 'b_canuse',
     title: '启用',
-    width: 70,
     align: 'center',
+    width: 70,
     editor: { type: 'checkbox' },
   },
   {
     dataIndex: 'actions',
     title: '操作',
-    width: 70,
     align: 'center',
+    width: 70,
     actions: [
       {
         type: 'delete',
@@ -885,6 +962,81 @@ function batchDeletePowers() {
   Message.success(`已删除 ${keys.length} 条权限`)
 }
 
+/* ================= 权限来源库（全库聚合，快速导入） ================= */
+/** 全库去重的操作权限（s_power.b_power_type='action'，按编码聚合） */
+const powerLibrary = ref([])
+const powerLibraryLoading = ref(false)
+/** 来源库勾选的权限编码 */
+const selectedLibCodes = ref([])
+/** 来源库表格引用与行选择 */
+const libTableRef = ref(null)
+
+const powerLibraryColumns = shallowRef([
+  // 列宽铺满约定同 powerColumns：编码固定宽，名称弹性占满
+  { dataIndex: 'b_code', title: '权限编码', width: 100 },
+  { dataIndex: 'b_name', title: '权限名称', minWidth: 80 },
+])
+
+const libRowSelection = computed(() => ({
+  selectedRowKeys: selectedLibCodes.value,
+  onChange: (keys) => {
+    selectedLibCodes.value = keys
+  },
+}))
+
+/** 聚合全库出现的操作权限（编码/名称，去重） */
+async function loadPowerLibrary() {
+  powerLibraryLoading.value = true
+  try {
+    // 参考旧系统 module-powervalue：把全库权限按编码聚合为"来源库"
+    const res = await loadDataBySqlApi(
+      `SELECT b_code, MAX(b_name) AS b_name FROM s_power
+       WHERE b_power_type = 'action' AND b_code IS NOT NULL AND b_code <> ''
+       GROUP BY b_code ORDER BY b_code`,
+    )
+    powerLibrary.value = (res.data || []).map((row) => ({
+      b_code: row.b_code,
+      b_name: row.b_name,
+    }))
+    selectedLibCodes.value = []
+  } catch (e) {
+    Message.error('加载权限库失败：' + (e?.message || e))
+    powerLibrary.value = []
+  } finally {
+    powerLibraryLoading.value = false
+  }
+}
+
+/** 把来源库勾选的权限导入当前菜单（跳过已存在编码） */
+function importSelectedPowers() {
+  const codes = selectedLibCodes.value
+  if (!codes.length) {
+    Message.warning('请先在权限库中勾选要导入的权限')
+    return
+  }
+  const existing = new Set(powers.value.map((r) => String(r.b_code || '').trim()))
+  const added = []
+  for (const code of codes) {
+    if (existing.has(String(code).trim())) continue
+    const lib = powerLibrary.value.find((r) => String(r.b_code) === String(code))
+    added.push({
+      b_id: createTempId(),
+      b_code: lib?.b_code || code,
+      b_name: lib?.b_name || '',
+      b_power_type: 'action',
+      b_canuse: 1,
+    })
+    existing.add(String(code).trim())
+  }
+  if (!added.length) {
+    Message.warning('勾选的权限均已存在，无需导入')
+    return
+  }
+  powers.value = [...powers.value, ...added]
+  selectedLibCodes.value = []
+  Message.success(`已导入 ${added.length} 条权限`)
+}
+
 /* ================= 加载模块列表（供 data 类型下拉选择） ================= */
 const moduleOptions = ref([])
 let moduleOptionsLoaded = false
@@ -892,7 +1044,11 @@ let moduleOptionsLoaded = false
 async function loadModuleOptions() {
   if (moduleOptionsLoaded) return
   try {
-    const res = await loadDataApi('s_module', "b_canuse = 1 AND b_module_type IN ('data', 'query')", 'b_xh ASC, b_id ASC')
+    const res = await loadDataApi(
+      's_module',
+      "b_canuse = 1 AND b_module_type IN ('data', 'query')",
+      'b_xh ASC, b_id ASC',
+    )
     moduleOptions.value = (res.data || []).map((m) => ({
       label: `[${m.b_code}] ${m.b_name}`,
       value: String(m.b_id),
@@ -937,6 +1093,7 @@ async function onConfirmOk() {
 /* ================= 初始化 ================= */
 loadMenuTree()
 loadModuleOptions()
+loadPowerLibrary()
 </script>
 
 <template>
@@ -946,7 +1103,7 @@ loadModuleOptions()
         <SplitterPanel :default-size="248" :min="180" :max="420">
           <aside class="mm-tree-panel">
             <div class="mm-tree-header">
-              <Input v-model="menuKeyword" placeholder="搜索菜单" allow-clear class="mm-tree-search">
+              <Input v-model="menuKeyword" allow-clear class="mm-tree-search">
                 <template #prefix><Search :size="14" class="mm-tree-search__icon" /></template>
               </Input>
               <div class="mm-tree-header__actions">
@@ -960,7 +1117,12 @@ loadModuleOptions()
                   <RefreshCw :size="14" />
                 </Button>
                 <Dropdown :items="toolbarAddOptions" @click="onToolbarAdd">
-                  <Button type="ghost" class="mm-tree-header__icon-btn" title="新增菜单" aria-label="新增菜单">
+                  <Button
+                    type="ghost"
+                    class="mm-tree-header__icon-btn"
+                    title="新增菜单"
+                    aria-label="新增菜单"
+                  >
                     <Plus :size="14" />
                   </Button>
                 </Dropdown>
@@ -1027,30 +1189,35 @@ loadModuleOptions()
                 </Button>
               </div>
 
-              <!-- 编辑面板 -->
-              <div class="mm-body__inner">
-                <div v-if="drafts" class="mm-config-content">
-                  <div class="mm-config-pane">
-                    <Form
+              <!-- 主体：三块 Splitter 分割 -->
+              <div v-if="drafts" class="mm-edit-body">
+                <Splitter class="mm-edit-splitter">
+                  <SplitterPanel :default-size="360">
+                    <div class="mm-form-col__card">
+                      <div class="mm-form-col__head">
+                        <div class="mm-pane__title">菜单配置</div>
+                      </div>
+                      <Form
                       ref="formRef"
                       :model="drafts.menu"
                       :rules="{
                         b_code: [{ required: true, message: '请填写菜单编码' }],
                         b_name: [{ required: true, message: '请填写菜单名称' }],
                         b_menu_type: [{ required: true, message: '请选择菜单类型' }],
-                        b_route: isPage || isExternal ? [{ required: true, message: '请填写路由地址' }] : [],
+                        b_route:
+                          isPage || isExternal
+                            ? [{ required: true, message: '请填写路由地址' }]
+                            : [],
                         b_module_id: isData ? [{ required: true, message: '请选择绑定模块' }] : [],
                       }"
                       layout="vertical"
-                      :columns="3"
-                      max-width="720px"
+                      :gap="20"
                     >
                       <FormItem label="菜单名称" name="b_name" required>
                         <div class="mm-name-field">
                           <Input
                             class="mm-name-field__input"
                             :model-value="drafts.menu.b_name"
-                            placeholder="请输入菜单名称（简体中文）"
                             @update:model-value="(v) => setField('b_name', v)"
                           />
                           <Button
@@ -1066,7 +1233,6 @@ loadModuleOptions()
                       <FormItem label="菜单编码" name="b_code" required>
                         <Input
                           :model-value="drafts.menu.b_code"
-                          placeholder="请输入菜单编码，全局唯一"
                           @update:model-value="(v) => setField('b_code', v)"
                         />
                       </FormItem>
@@ -1074,17 +1240,15 @@ loadModuleOptions()
                         <Select
                           :model-value="drafts.menu.b_menu_type"
                           :options="menuTypeOptions"
-                          placeholder="请选择菜单类型"
                           @update:model-value="onMenuTypeChange"
                         />
                       </FormItem>
-                      <FormItem label="上级菜单">
+                      <FormItem label="上级菜单" name="b_parent_id">
                         <Input :model-value="parentMenuName || '根节点（顶级菜单）'" readonly />
                       </FormItem>
                       <FormItem label="图标" name="b_icon">
-                        <Input
+                        <IconPicker
                           :model-value="drafts.menu.b_icon"
-                          placeholder="lucide 图标名，如 Settings"
                           @update:model-value="(v) => setField('b_icon', v)"
                         />
                       </FormItem>
@@ -1099,7 +1263,6 @@ loadModuleOptions()
                       <FormItem v-if="isPage" label="路由地址" name="b_route" required>
                         <Input
                           :model-value="drafts.menu.b_route"
-                          placeholder="如 /system/module-management"
                           @update:model-value="(v) => setField('b_route', v)"
                         />
                       </FormItem>
@@ -1108,7 +1271,6 @@ loadModuleOptions()
                         <Select
                           :model-value="drafts.menu.b_module_id"
                           :options="moduleOptions"
-                          placeholder="请选择绑定的数据/查询模块"
                           @update:model-value="(v) => setField('b_module_id', v)"
                         />
                       </FormItem>
@@ -1116,7 +1278,6 @@ loadModuleOptions()
                       <FormItem v-if="isExternal" label="外链地址" name="b_route" required>
                         <Input
                           :model-value="drafts.menu.b_route"
-                          placeholder="如 https://example.com"
                           @update:model-value="(v) => setField('b_route', v)"
                         />
                       </FormItem>
@@ -1126,12 +1287,11 @@ loadModuleOptions()
                           @update:model-value="(v) => setField('b_canuse', v ? 1 : 0)"
                         />
                       </FormItem>
-                      <FormItem label="访问权限编码" name="b_power_code">
+                      <FormItem v-if="!isDirectory" label="访问权限编码" name="b_power_code">
                         <div class="mm-power-code-field">
                           <Input
                             class="mm-power-code-field__input"
                             :model-value="drafts.menu.b_power_code"
-                            placeholder="留空保存时自动生成 menu.编码"
                             @update:model-value="(v) => setField('b_power_code', v)"
                           />
                           <Button type="outline" size="small" @click="autoPowerCode">
@@ -1140,51 +1300,99 @@ loadModuleOptions()
                         </div>
                       </FormItem>
                     </Form>
-                  </div>
+                    </div>
+                  </SplitterPanel>
 
-                  <!-- 权限点：访问（自动）+ 操作/按钮 -->
-                  <div class="mm-config-pane">
-                    <div class="mm-pane__title">权限点</div>
-                    <!-- 访问权限：随菜单自动同步（只读展示） -->
-                    <div class="mm-access-bar">
-                      <span class="mm-access-bar__tag">访问</span>
-                      <span class="mm-access-bar__code">{{ accessPowerDesc || '(待生成)' }}</span>
-                      <span class="mm-access-bar__hint">自动同步，随菜单保存</span>
+                  <!-- 权限面板：仅 page/data/external（目录无权限） -->
+                  <SplitterPanel v-if="!isDirectory">
+                    <div class="mm-power-card">
+                      <div class="mm-power-card__head">
+                        <div class="mm-pane__title">当前菜单权限</div>
+                        <div class="mm-power-toolbar">
+                          <Button
+                            type="primary"
+                            size="small"
+                            :disabled="powersLoading"
+                            @click="addPowerRow"
+                          >
+                            <Plus :size="12" /> 新增
+                          </Button>
+                          <Button
+                            type="danger"
+                            size="small"
+                            :disabled="powersLoading || !selectedPowerKeys.length"
+                            @click="batchDeletePowers"
+                          >
+                            <Trash2 :size="12" /> 删除{{
+                              selectedPowerKeys.length ? `(${selectedPowerKeys.length})` : ''
+                            }}
+                          </Button>
+                        </div>
+                      </div>
+                      <div v-if="powersLoading" class="mm-power-loading">加载中...</div>
+                      <div v-else class="mm-power-table-wrap">
+                        <FmsTable
+                          ref="powerTableRef"
+                          v-model:columns="powerColumns"
+                          :data-source="powers"
+                          :editable="true"
+                          row-key="b_id"
+                          :row-selection="rowSelection"
+                          :col-resizable="{ disabled: (col) => col.dataIndex === 'b_name' }"
+                          @change="() => {}"
+                        />
+                      </div>
                     </div>
-                    <div class="mm-power-toolbar">
-                      <Button type="primary" size="small" :disabled="powersLoading" @click="addPowerRow">
-                        <Plus :size="12" /> 新增权限
-                      </Button>
-                      <Button
-                        type="danger"
-                        size="small"
-                        :disabled="powersLoading || !selectedPowerKeys.length"
-                        @click="batchDeletePowers"
-                      >
-                        <Trash2 :size="12" /> 批量删除{{ selectedPowerKeys.length ? `(${selectedPowerKeys.length})` : '' }}
-                      </Button>
-                      <span class="mm-power-toolbar__hint">操作/按钮权限用于页面的按钮级控制。</span>
+                  </SplitterPanel>
+
+                  <!-- 权限来源库：全库聚合，快速导入 -->
+                  <SplitterPanel v-if="!isDirectory" :default-size="260">
+                    <div class="mm-power-card">
+                      <div class="mm-power-card__head">
+                        <div class="mm-pane__title">权限库</div>
+                        <div class="mm-power-toolbar">
+                          <Button
+                            type="outline"
+                            size="small"
+                            :loading="powerLibraryLoading"
+                            @click="loadPowerLibrary"
+                          >
+                            <RefreshCw :size="12" /> 刷新
+                          </Button>
+                          <Button
+                            type="primary"
+                            size="small"
+                            :disabled="!selectedLibCodes.length"
+                            @click="importSelectedPowers"
+                          >
+                            <Plus :size="12" /> 导入选中{{
+                              selectedLibCodes.length ? `(${selectedLibCodes.length})` : ''
+                            }}
+                          </Button>
+                        </div>
+                      </div>
+                      <div v-if="powerLibraryLoading" class="mm-power-loading">加载中...</div>
+                      <div v-else class="mm-lib-table-wrap">
+                        <FmsTable
+                          ref="libTableRef"
+                          v-model:columns="powerLibraryColumns"
+                          :data-source="powerLibrary"
+                          :seq="false"
+                          row-key="b_code"
+                          :row-selection="libRowSelection"
+                          :col-resizable="{ disabled: (col) => col.dataIndex === 'b_name' }"
+                          @change="() => {}"
+                        />
+                      </div>
                     </div>
-                    <div v-if="powersLoading" class="mm-power-loading">加载中...</div>
-                    <div v-else class="mm-power-table-wrap">
-                      <FmsTable
-                        ref="powerTableRef"
-                        v-model:columns="powerColumns"
-                        :data-source="powers"
-                        :editable="true"
-                        row-key="b_id"
-                        :row-selection="rowSelection"
-                        @change="() => {}"
-                      />
-                    </div>
-                  </div>
-                </div>
-                <div v-else-if="configLoading" class="mm-config-state">
-                  <span class="mm-config-state__spinner"></span>
-                  <span>加载中...</span>
-                </div>
-                <div v-else class="mm-config-state">暂无配置数据</div>
+                  </SplitterPanel>
+                </Splitter>
               </div>
+              <div v-else-if="configLoading" class="mm-config-state">
+                <span class="mm-config-state__spinner"></span>
+                <span>加载中...</span>
+              </div>
+              <div v-else class="mm-config-state">暂无配置数据</div>
             </template>
             <div v-else class="mm-main__empty">
               <FolderTree :size="32" />
@@ -1205,7 +1413,9 @@ loadModuleOptions()
     >
       <p style="margin: 0; line-height: 1.7; color: var(--fms-text)">{{ confirmState?.content }}</p>
       <template #footer>
-        <Button type="outline" :disabled="confirmSaving" @click="confirmVisible = false">取消</Button>
+        <Button type="outline" :disabled="confirmSaving" @click="confirmVisible = false"
+          >取消</Button
+        >
         <Button
           :type="confirmState?.okType || 'primary'"
           :loading="confirmSaving"
@@ -1397,19 +1607,6 @@ loadModuleOptions()
   font-size: 13px;
 }
 
-/* 各配置区块（多语言 / 权限）间距 */
-.mm-config-pane + .mm-config-pane {
-  margin-top: 16px;
-}
-
-/* 区块标题 */
-.mm-pane__title {
-  margin-bottom: 10px;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--fms-text);
-}
-
 /* 菜单名称 + 多语言图标按钮 */
 .mm-name-field {
   display: flex;
@@ -1432,7 +1629,6 @@ loadModuleOptions()
   display: flex;
   align-items: center;
   gap: 8px;
-  max-width: 560px;
 }
 
 .mm-power-code-field__input {
@@ -1440,69 +1636,6 @@ loadModuleOptions()
   min-width: 0;
 }
 
-/* 权限点列表 */
-.mm-power-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 10px;
-}
-
-.mm-power-toolbar__hint {
-  font-size: 12px;
-  color: var(--fms-text-secondary);
-}
-
-.mm-power-loading {
-  padding: 20px 0;
-  text-align: center;
-  color: var(--fms-text-secondary);
-  font-size: 13px;
-}
-
-/* 访问权限条（自动同步展示） */
-.mm-access-bar {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 10px;
-  padding: 6px 10px;
-  border: 1px dashed var(--fms-border);
-  border-radius: var(--fms-control-radius);
-  background: var(--fms-secondary);
-  font-size: 12px;
-  max-width: 720px;
-}
-
-.mm-access-bar__tag {
-  flex-shrink: 0;
-  padding: 0 6px;
-  border-radius: 3px;
-  background: var(--fms-primary, #1677ff);
-  color: #fff;
-  font-size: 11px;
-  line-height: 18px;
-}
-
-.mm-access-bar__code {
-  flex-shrink: 0;
-  font-weight: 600;
-  color: var(--fms-text);
-}
-
-.mm-access-bar__hint {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--fms-text-secondary);
-}
-
-/* 权限点 FmsTable 容器（固定高度，FmsTable 需要显式高度渲染） */
-.mm-power-table-wrap {
-  max-width: 720px;
-  height: 300px;
-}
-
 /* ---- 右侧主区 ---- */
 .mm-main {
   display: flex;
@@ -1513,10 +1646,7 @@ loadModuleOptions()
   min-width: 0;
   min-height: 0;
   overflow: hidden;
-  background: var(--fms-card);
-  border-radius: var(--fms-control-radius);
-  box-shadow: var(--fms-shadow);
-  padding: 8px 10px;
+  gap: 8px;
 }
 
 .mm-main__empty {
@@ -1528,6 +1658,9 @@ loadModuleOptions()
   flex: 1;
   color: var(--fms-text-secondary);
   font-size: 14px;
+  background: var(--fms-card);
+  border-radius: var(--fms-control-radius);
+  box-shadow: var(--fms-shadow);
 
   svg {
     color: var(--fms-text-secondary);
@@ -1540,24 +1673,123 @@ loadModuleOptions()
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 8px 8px 0;
   flex-shrink: 0;
+  padding: 8px 10px;
+  background: var(--fms-card);
+  border-radius: var(--fms-control-radius);
 }
 
-/* ---- 内容区 ---- */
-.mm-body__inner {
+/* ---- 主体三块 Splitter ---- */
+.mm-edit-body {
   flex: 1;
   min-height: 0;
-  overflow: auto;
-  padding: 8px;
+  display: flex;
+  overflow: hidden;
 }
 
-.mm-config-content {
+.mm-edit-splitter :deep(> .fms-splitter-panel) {
+  overflow: hidden;
+  padding: 0 3px;
+}
+
+/* 第一个面板（菜单配置）去左边距；最后一个面板（权限库）去右边距 */
+.mm-edit-splitter :deep(> .fms-splitter-panel:first-child) {
+  padding-left: 0;
+}
+
+.mm-edit-splitter :deep(> .fms-splitter-panel:last-child) {
+  padding-right: 0;
+}
+
+/* 左栏：表单卡片 */
+.mm-form-col__card {
+  height: 100%;
+  padding: 8px 10px;
+  background: var(--fms-card);
+  border-radius: var(--fms-control-radius);
+  box-shadow: var(--fms-shadow);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  overflow: auto;
+}
+
+/* 左卡片头部 */
+.mm-form-col__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 0;
+
+  .mm-pane__title {
+    margin-bottom: 0;
+  }
+}
+
+/* 右栏：权限卡片 */
+.mm-power-card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 8px 10px;
+  background: var(--fms-card);
+  border-radius: var(--fms-control-radius);
+  box-shadow: var(--fms-shadow);
+  overflow: hidden;
+}
+
+.mm-power-card__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 8px;
+
+  .mm-pane__title {
+    margin-bottom: 0;
+  }
+}
+
+/* 权限点 FmsTable 容器（撑满卡片剩余高度） */
+.mm-power-table-wrap {
+  flex: 1;
+  min-height: 0;
   height: 100%;
 }
 
-.mm-config-pane {
-  max-width: 720px;
+/* 来源库表格容器（撑满卡片剩余高度） */
+.mm-lib-table-wrap {
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+}
+
+/* 权限点列表工具条 */
+.mm-power-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.mm-power-loading {
+  padding: 20px 0;
+  text-align: center;
+  color: var(--fms-text-secondary);
+  font-size: 13px;
+}
+
+/* 区块标题 */
+.mm-pane__title {
+  margin-bottom: 10px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--fms-text);
+}
+
+/* 各配置区块间距 */
+.mm-config-pane + .mm-config-pane {
+  margin-top: 16px;
 }
 
 .mm-config-state {
@@ -1566,7 +1798,7 @@ loadModuleOptions()
   align-items: center;
   justify-content: center;
   gap: 8px;
-  height: 100%;
+  flex: 1;
   color: var(--fms-text-secondary);
   font-size: 14px;
 }
@@ -1585,4 +1817,4 @@ loadModuleOptions()
     transform: rotate(360deg);
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/code/fms/fms-vue/src/views/system/module-management/components/design-editor/TableDesignEditor.vue b/code/fms/fms-vue/src/views/system/module-management/components/design-editor/TableDesignEditor.vue
index abdc913c..fb47991f 100644
--- a/code/fms/fms-vue/src/views/system/module-management/components/design-editor/TableDesignEditor.vue
+++ b/code/fms/fms-vue/src/views/system/module-management/components/design-editor/TableDesignEditor.vue
@@ -467,7 +467,6 @@ const treeFeatures = computed(() => ({
       :loading="loading"
       :data-columns="dataColumns"
       :active-key="activeKey"
-      :row-drag-handle="false"
       @back="switchView('design')"
       @row-click="onDataRowClick"
       @change="() => emit('update', localRows.value)"
diff --git a/code/fms/fms-vue/src/views/system/module-management/components/design-editor/common/EditDataView.vue b/code/fms/fms-vue/src/views/system/module-management/components/design-editor/common/EditDataView.vue
index dbed8b8b..37dd06b1 100644
--- a/code/fms/fms-vue/src/views/system/module-management/components/design-editor/common/EditDataView.vue
+++ b/code/fms/fms-vue/src/views/system/module-management/components/design-editor/common/EditDataView.vue
@@ -12,8 +12,6 @@ defineProps({
   dataColumns: { type: Array, required: true },
   /** 高亮行 id（行点击由壳组件更新） */
   activeKey: { type: [String, Number], default: null },
-  /** 是否显示行拖拽把手（表格编辑器关闭，避免与列宽拖拽视觉混淆） */
-  rowDragHandle: { type: Boolean, default: true },
   /** 是否显示「返回设计视图」按钮（数据视图常驻的宿主传 false） */
   showBack: { type: Boolean, default: true },
 })
@@ -32,7 +30,6 @@ const emit = defineEmits(['back', 'row-click', 'change', 'row-order-change'])
         :data-source="rows"
         :editable="!loading"
         :row-draggable="!loading"
-        :row-drag-handle="rowDragHandle"
         row-key="b_id"
         :active-row-key="activeKey"
         @row-click="(_, row) => emit('row-click', row)"
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 fb4725e5..81f7818d 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
@@ -38,12 +38,17 @@ import {
   Message,
 } from '@/components/ui'
 import { loadDataApi, saveObjectApi, nextIdApi, describeApi } from '@/services/api'
-import { buildTree, sortTree, findTreeNode, collectAllKeys, expandAncestors, filterTreeByText, insertTreeNode, removeTreeNode } from '@/utils/tree'
 import {
-  buildModuleI18nKey,
-  buildModuleItemI18nKey,
-  syncModuleItemI18nKeys,
-} from '@/utils/i18n'
+  buildTree,
+  sortTree,
+  findTreeNode,
+  collectAllKeys,
+  expandAncestors,
+  filterTreeByText,
+  insertTreeNode,
+  removeTreeNode,
+} from '@/utils/tree'
+import { buildModuleI18nKey, buildModuleItemI18nKey, syncModuleItemI18nKeys } from '@/utils/i18n'
 import { createTempId } from '@/utils/tempId'
 import {
   cloneData,
@@ -176,7 +181,11 @@ function validateAutoCode() {
 
 async function saveModule() {
   if (!selectedModule.value || busy.value) return false
-  if (loadedModuleId.value == null || String(loadedModuleId.value) !== String(moduleSelectedId.value)) return false
+  if (
+    loadedModuleId.value == null ||
+    String(loadedModuleId.value) !== String(moduleSelectedId.value)
+  )
+    return false
   const moduleId = String(selectedModule.value.b_id)
   configSaving.value = true
   try {
@@ -207,7 +216,10 @@ async function saveModule() {
     moduleData.b_i18n = buildModuleI18nKey(moduleData.b_module_type, moduleCode)
 
     const isNew = unsavedModuleIds.has(moduleId)
-    if (moduleData && (isNew || JSON.stringify(moduleData) !== JSON.stringify(originals.value?.module))) {
+    if (
+      moduleData &&
+      (isNew || JSON.stringify(moduleData) !== JSON.stringify(originals.value?.module))
+    ) {
       const moduleRequest = { table: 's_module', key_field: 'b_id' }
       if (isNew) moduleRequest.inserts = [moduleData]
       else moduleRequest.updates = [moduleData]
@@ -348,7 +360,9 @@ watch(moduleKeyword, (kw) => {
   moduleExpandedKeys.value = kw.trim() ? collectAllKeys(moduleTreeData.value) : []
 })
 
-const filteredModuleTree = computed(() => filterTreeByText(moduleTreeData.value, moduleKeyword.value))
+const filteredModuleTree = computed(() =>
+  filterTreeByText(moduleTreeData.value, moduleKeyword.value),
+)
 
 // 是否存在「已保存」的子模块（未保存草稿子树不算，可随父一并移除）
 function hasSavedModuleDescendant(node) {
@@ -404,6 +418,27 @@ function onModuleContextMenuClick({ item, node }) {
   else if (item.key === 'delete') void deleteModule(parentId)
 }
 
+/** 从树节点提取纯模块行（剔除 children/isLeaf/icon 等树注入字段），用于未保存模块切回时重建草稿 */
+function moduleRowOf(node) {
+  return {
+    b_id: node.b_id,
+    b_code: node.b_code,
+    b_parent_id: node.b_parent_id ? String(node.b_parent_id) : null,
+    b_name: node.b_name,
+    b_i18n: node.b_i18n ?? null,
+    b_module_type: node.b_module_type,
+    b_viewtable: node.b_viewtable ?? null,
+    b_savetable: node.b_savetable ?? null,
+    b_keyfield: node.b_keyfield ?? null,
+    b_orderfield: node.b_orderfield ?? null,
+    b_delete_policy: node.b_delete_policy ?? null,
+    b_edit_mode: node.b_edit_mode ?? null,
+    b_canuse: node.b_canuse,
+    b_xh: node.b_xh,
+    b_bz: node.b_bz ?? null,
+  }
+}
+
 async function addModule(parentId, moduleType) {
   const res = await nextIdApi()
   const newId = String(res.data)
@@ -627,7 +662,8 @@ async function loadModuleConfig(moduleId) {
         loadDataApi('s_autocode', `b_module_id = ${id}`, 'b_id ASC'),
         loadDataApi('s_i18n', `b_module_id = ${id}`, 'b_key ASC, b_locale ASC'),
       ])
-      ;[moduleRes, fieldsRes, groupsRes, listRes, editRes, queryRes, autoCodeRes, i18nRes] = responses
+      ;[moduleRes, fieldsRes, groupsRes, listRes, editRes, queryRes, autoCodeRes, i18nRes] =
+        responses
     } else if (type === 'query') {
       const responses = await Promise.all([
         loadDataApi('s_module', `b_id = ${id}`),
@@ -657,7 +693,10 @@ async function loadModuleConfig(moduleId) {
     // 只取原始扁平行传给 ModuleI18nPanel，由面板自持 pivot/reconcile/保存 diff
     rawI18nRows.value = i18nRes
       ? (i18nRes.data || []).map((row) => ({
-          b_id: row.b_id, b_key: row.b_key, b_locale: row.b_locale, b_value: row.b_value,
+          b_id: row.b_id,
+          b_key: row.b_key,
+          b_locale: row.b_locale,
+          b_value: row.b_value,
         }))
       : []
     // 列表配置不再自动补全：行存在即展示，删除即真删，由用户通过字段库手动管理（与查询配置一致）。
@@ -687,6 +726,30 @@ watch(moduleSelectedId, (id) => {
     rawI18nRows.value = []
     return
   }
+  // 未落库的新模块：临时 id 查库无行，不走 loadModuleConfig（会得到 module 为 null 的草稿）。
+  // 从树节点重建草稿（与 addModule 的初始空草稿同构），子配置（字段/分组等）从空开始。
+  if (unsavedModuleIds.has(String(id))) {
+    const node = findTreeNode(moduleTreeData.value, String(id))
+    configLoading.value = false
+    if (!node) {
+      loadedModuleId.value = null
+      drafts.value = null
+      return
+    }
+    drafts.value = cloneData({
+      module: moduleRowOf(node),
+      fields: [],
+      groups: [],
+      listConfig: [],
+      editConfig: [],
+      queryConfig: [],
+      autoCode: [],
+    })
+    rawI18nRows.value = []
+    originals.value = cloneData(drafts.value)
+    loadedModuleId.value = String(id)
+    return
+  }
   // 清空旧草稿，让右侧进入加载态（否则旧数据残留，v-if="drafts" 仍为真，看不到 loading）
   loadedModuleId.value = null
   drafts.value = null
@@ -702,16 +765,10 @@ const switchSaving = ref(false)
 // 是否有未保存的修改（仅切换时按需检查，不做实时监听）
 function hasUnsavedChanges() {
   if (!drafts.value || !originals.value) return false
-  const keys = [
-    'module',
-    'fields',
-    'groups',
-    'listConfig',
-    'editConfig',
-    'queryConfig',
-    'autoCode',
-  ]
-  return keys.some((key) => JSON.stringify(drafts.value[key]) !== JSON.stringify(originals.value[key]))
+  const keys = ['module', 'fields', 'groups', 'listConfig', 'editConfig', 'queryConfig', 'autoCode']
+  return keys.some(
+    (key) => JSON.stringify(drafts.value[key]) !== JSON.stringify(originals.value[key]),
+  )
 }
 
 function onSwitchCancel() {
@@ -827,7 +884,8 @@ function buildSyncPlan(module, columns) {
   for (const existing of drafts.value.fields || []) {
     if (!viewColumnSet.has(String(existing.b_field).toLowerCase())) {
       removedIds.add(String(existing.b_id))
-      const key = existing.b_i18n || buildModuleItemI18nKey('field', module.b_code, existing.b_field)
+      const key =
+        existing.b_i18n || buildModuleItemI18nKey('field', module.b_code, existing.b_field)
       if (key) removedI18nIds.add(`field:${key}`)
     }
   }
@@ -927,209 +985,224 @@ loadModuleTree()
         <SplitterPanel :default-size="248" :min="180" :max="420">
           <aside class="mm-tree-panel">
             <div class="mm-tree-header">
-              <Input v-model="moduleKeyword" placeholder="搜索模块" allow-clear class="mm-tree-search">
+              <Input
+                v-model="moduleKeyword"
+                placeholder="搜索模块"
+                allow-clear
+                class="mm-tree-search"
+              >
                 <template #prefix><Search :size="14" class="mm-tree-search__icon" /></template>
               </Input>
               <div class="mm-tree-header__actions">
                 <Dropdown :items="moduleNewItems" @click="onModuleNewClick">
-                  <Button type="ghost" class="mm-tree-header__icon-btn" title="新建模块" aria-label="新建模块">
+                  <Button
+                    type="ghost"
+                    class="mm-tree-header__icon-btn"
+                    title="新建模块"
+                    aria-label="新建模块"
+                  >
                     <Plus :size="14" />
                   </Button>
                 </Dropdown>
               </div>
             </div>
-        <div class="mm-tree-panel__scroll">
-          <div v-if="moduleTreeLoading" class="mm-tree-empty">加载中...</div>
-          <Tree
-            v-else
-            :tree-data="filteredModuleTree"
-            :field-names="{ key: 'b_id', title: 'b_name', children: 'children' }"
-            :expanded-keys="moduleExpandedKeys"
-            @update:expanded-keys="(keys) => (moduleExpandedKeys = keys)"
-            :selected-keys="moduleSelectedId ? [moduleSelectedId] : []"
-            :context-menu="buildModuleContextMenu"
-            :draggable="!moduleKeyword.trim()"
-            @select="onModuleSelect"
-            @context-menu-click="onModuleContextMenuClick"
-            @drop="onModuleDrop"
-          >
-            <template #title="{ node }">
-              <span class="mm-tree-node">
-                <span
-                  class="mm-tree-node__name"
-                  :class="{ 'is-disabled': Number(node.b_canuse) !== 1 }"
-                >
-                  {{ node.b_name || node.b_code }}
-                </span>
-              </span>
-            </template>
-          </Tree>
-        </div>
+            <div class="mm-tree-panel__scroll">
+              <div v-if="moduleTreeLoading" class="mm-tree-empty">加载中...</div>
+              <Tree
+                v-else
+                :tree-data="filteredModuleTree"
+                :field-names="{ key: 'b_id', title: 'b_name', children: 'children' }"
+                :expanded-keys="moduleExpandedKeys"
+                @update:expanded-keys="(keys) => (moduleExpandedKeys = keys)"
+                :selected-keys="moduleSelectedId ? [moduleSelectedId] : []"
+                :context-menu="buildModuleContextMenu"
+                :draggable="!moduleKeyword.trim()"
+                @select="onModuleSelect"
+                @context-menu-click="onModuleContextMenuClick"
+                @drop="onModuleDrop"
+              >
+                <template #title="{ node }">
+                  <span class="mm-tree-node">
+                    <span
+                      class="mm-tree-node__name"
+                      :class="{ 'is-disabled': Number(node.b_canuse) !== 1 }"
+                    >
+                      {{ node.b_name || node.b_code }}
+                    </span>
+                  </span>
+                </template>
+              </Tree>
+            </div>
           </aside>
         </SplitterPanel>
 
         <SplitterPanel>
-      <main class="mm-main">
-        <template v-if="selectedModule">
-          <!-- 顶部通栏操作：保存 / 同步字段（全 tab 生效，不随内容区切换） -->
-          <div class="mm-main-toolbar">
-            <Button
-              type="primary"
-              :loading="configSaving"
-              :disabled="configLoading || !drafts"
-              @click="saveModule"
-            >
-              <Save :size="14" /> 保存
-            </Button>
-            <Button
-              v-if="isDataModule || isQueryModule"
-              type="outline"
-              :disabled="busy"
-              title="按数据库视图结构对齐字段定义"
-              @click="syncFields"
-            >
-              同步字段
-            </Button>
-          </div>
-
-          <Tabs
-            v-if="drafts"
-            v-model="activeSection"
-            nav-only
-            class="mm-config-nav"
-            :items="configNavItems"
-            aria-label="模块配置导航"
-          >
-            <template #label="{ item }">
-              <component :is="item.icon" :size="14" class="mm-config-nav__icon" />
-              <span class="mm-config-nav__label">{{ item.label }}</span>
-              <span v-if="item.badge" class="mm-config-nav__badge">{{ item.badge }}</span>
-            </template>
-          </Tabs>
-
-          <div class="mm-body__inner">
-            <div v-if="drafts" class="mm-config-content">
-                <div v-show="activeSection === 'basic'" class="mm-config-pane">
-                  <ModuleBasicPanel
-                    ref="basicPanelRef"
-                    :data="drafts?.module"
-                    :parent-name="parentModuleName"
-                    :loading="busy"
-                    @update="(v) => onModuleUpdate('module', v)"
-                  />
-                </div>
-
-                <div
+          <main class="mm-main">
+            <template v-if="selectedModule">
+              <!-- 顶部通栏操作：保存 / 同步字段（全 tab 生效，不随内容区切换） -->
+              <div class="mm-main-toolbar">
+                <Button
+                  type="primary"
+                  :loading="configSaving"
+                  :disabled="configLoading || !drafts"
+                  @click="saveModule"
+                >
+                  <Save :size="14" /> 保存
+                </Button>
+                <Button
                   v-if="isDataModule || isQueryModule"
-                  v-show="activeSection === 'fields'"
-                  class="mm-config-pane"
+                  type="outline"
+                  :disabled="busy"
+                  title="按数据库视图结构对齐字段定义"
+                  @click="syncFields"
                 >
-                  <ModuleFieldsPanel
-                    :module-id="String(selectedModule.b_id)"
-                    :module-code="drafts?.module?.b_code || ''"
-                    :fields="drafts?.fields"
-                    :edit-config="drafts?.editConfig"
-                    :list-config="drafts?.listConfig"
-                    :query-config="drafts?.queryConfig"
-                    :module-type="moduleType"
-                    :loading="busy"
-                    @update="onFieldsUpdate"
-                    @update-edit-config="(v) => onModuleUpdate('editConfig', v)"
-                    @update-list-config="(v) => onModuleUpdate('listConfig', v)"
-                    @update-query-config="(v) => onModuleUpdate('queryConfig', v)"
-                  />
-                </div>
-
-                <div
-                  v-if="isDataModule || isQueryModule"
-                  v-show="activeSection === 'list'"
-                  class="mm-config-pane"
-                >
-                  <ModuleListConfigPanel
-                    :module-id="String(selectedModule.b_id)"
-                    :list-config="drafts?.listConfig"
-                    :fields="drafts?.fields"
-                    :groups="drafts?.groups"
-                    :loading="busy"
-                    @update="(v) => onModuleUpdate('listConfig', v)"
-                    @update-groups="onGroupsUpdate"
-                  />
-                </div>
-
-                <div v-if="isDataModule" v-show="activeSection === 'edit'" class="mm-config-pane">
-                  <component
-                    :is="activeEditPanel"
-                    :module-id="String(selectedModule.b_id)"
-                    :edit-config="drafts?.editConfig"
-                    :list-config="drafts?.listConfig"
-                    :fields="drafts?.fields"
-                    :groups="drafts?.groups"
-                    :edit-mode="editMode"
-                    :active="activeSection === 'edit'"
-                    :loading="busy"
-                    @update="(v) => onModuleUpdate('editConfig', v)"
-                    @update:edit-mode="
-                      (v) => onModuleUpdate('module', { ...(drafts?.module || {}), b_edit_mode: v })
-                    "
-                    @update-groups="onGroupsUpdate"
-                    @update-list-config="(v) => onModuleUpdate('listConfig', v)"
-                  />
-                </div>
-
-                <div
-                  v-if="isDataModule || isQueryModule"
-                  v-show="activeSection === 'query'"
-                  class="mm-config-pane"
-                >
-                  <ModuleQueryConfigPanel
-                    :module-id="String(selectedModule.b_id)"
-                    :query-config="drafts?.queryConfig"
-                    :fields="drafts?.fields"
-                    :loading="busy"
-                    @update="(v) => onModuleUpdate('queryConfig', v)"
-                  />
-                </div>
-
-                <div v-if="isDataModule" v-show="activeSection === 'auto-code'" class="mm-config-pane">
-                  <ModuleAutoCodePanel
-                    ref="autoCodePanelRef"
-                    :module-id="String(selectedModule.b_id)"
-                    :auto-code="drafts?.autoCode"
-                    :fields="drafts?.fields"
-                    :loading="busy"
-                    @update="onAutoCodeUpdate"
-                  />
-                </div>
-
-                <div
-                  v-if="moduleType && moduleType !== 'category'"
-                  v-show="activeSection === 'i18n'"
-                  class="mm-config-pane"
-                >
-                  <ModuleI18nPanel
-                    ref="i18nPanelRef"
-                    :module-id="String(selectedModule.b_id)"
-                    :module="drafts?.module"
-                    :fields="drafts?.fields"
-                    :groups="drafts?.groups"
-                    :raw-rows="rawI18nRows"
-                    :loading="busy"
-                  />
-                </div>
+                  同步字段
+                </Button>
               </div>
-            <!-- 加载中/无数据占位：避免配置区一片空白 -->
-            <div v-else-if="configLoading" class="mm-config-state">
-              <span class="mm-config-state__spinner"></span>
-              <span>加载中...</span>
+
+              <div class="mm-body__inner">
+                <Tabs
+                  v-if="drafts"
+                  v-model="activeSection"
+                  nav-only
+                  class="mm-config-nav"
+                  :items="configNavItems"
+                  aria-label="模块配置导航"
+                >
+                  <template #label="{ item }">
+                    <component :is="item.icon" :size="14" class="mm-config-nav__icon" />
+                    <span class="mm-config-nav__label">{{ item.label }}</span>
+                    <span v-if="item.badge" class="mm-config-nav__badge">{{ item.badge }}</span>
+                  </template>
+                </Tabs>
+
+                <div v-if="drafts" class="mm-config-content">
+                  <div v-show="activeSection === 'basic'" class="mm-config-pane">
+                    <ModuleBasicPanel
+                      ref="basicPanelRef"
+                      :data="drafts?.module"
+                      :parent-name="parentModuleName"
+                      :loading="busy"
+                      @update="(v) => onModuleUpdate('module', v)"
+                    />
+                  </div>
+
+                  <div
+                    v-if="isDataModule || isQueryModule"
+                    v-show="activeSection === 'fields'"
+                    class="mm-config-pane"
+                  >
+                    <ModuleFieldsPanel
+                      :module-id="String(selectedModule.b_id)"
+                      :module-code="drafts?.module?.b_code || ''"
+                      :fields="drafts?.fields"
+                      :edit-config="drafts?.editConfig"
+                      :list-config="drafts?.listConfig"
+                      :query-config="drafts?.queryConfig"
+                      :module-type="moduleType"
+                      :loading="busy"
+                      @update="onFieldsUpdate"
+                      @update-edit-config="(v) => onModuleUpdate('editConfig', v)"
+                      @update-list-config="(v) => onModuleUpdate('listConfig', v)"
+                      @update-query-config="(v) => onModuleUpdate('queryConfig', v)"
+                    />
+                  </div>
+
+                  <div
+                    v-if="isDataModule || isQueryModule"
+                    v-show="activeSection === 'list'"
+                    class="mm-config-pane"
+                  >
+                    <ModuleListConfigPanel
+                      :module-id="String(selectedModule.b_id)"
+                      :list-config="drafts?.listConfig"
+                      :fields="drafts?.fields"
+                      :groups="drafts?.groups"
+                      :loading="busy"
+                      @update="(v) => onModuleUpdate('listConfig', v)"
+                      @update-groups="onGroupsUpdate"
+                    />
+                  </div>
+
+                  <div v-if="isDataModule" v-show="activeSection === 'edit'" class="mm-config-pane">
+                    <component
+                      :is="activeEditPanel"
+                      :module-id="String(selectedModule.b_id)"
+                      :edit-config="drafts?.editConfig"
+                      :list-config="drafts?.listConfig"
+                      :fields="drafts?.fields"
+                      :groups="drafts?.groups"
+                      :edit-mode="editMode"
+                      :active="activeSection === 'edit'"
+                      :loading="busy"
+                      @update="(v) => onModuleUpdate('editConfig', v)"
+                      @update:edit-mode="
+                        (v) =>
+                          onModuleUpdate('module', { ...(drafts?.module || {}), b_edit_mode: v })
+                      "
+                      @update-groups="onGroupsUpdate"
+                      @update-list-config="(v) => onModuleUpdate('listConfig', v)"
+                    />
+                  </div>
+
+                  <div
+                    v-if="isDataModule || isQueryModule"
+                    v-show="activeSection === 'query'"
+                    class="mm-config-pane"
+                  >
+                    <ModuleQueryConfigPanel
+                      :module-id="String(selectedModule.b_id)"
+                      :query-config="drafts?.queryConfig"
+                      :fields="drafts?.fields"
+                      :loading="busy"
+                      @update="(v) => onModuleUpdate('queryConfig', v)"
+                    />
+                  </div>
+
+                  <div
+                    v-if="isDataModule"
+                    v-show="activeSection === 'auto-code'"
+                    class="mm-config-pane"
+                  >
+                    <ModuleAutoCodePanel
+                      ref="autoCodePanelRef"
+                      :module-id="String(selectedModule.b_id)"
+                      :auto-code="drafts?.autoCode"
+                      :fields="drafts?.fields"
+                      :loading="busy"
+                      @update="onAutoCodeUpdate"
+                    />
+                  </div>
+
+                  <div
+                    v-if="moduleType && moduleType !== 'category'"
+                    v-show="activeSection === 'i18n'"
+                    class="mm-config-pane"
+                  >
+                    <ModuleI18nPanel
+                      ref="i18nPanelRef"
+                      :module-id="String(selectedModule.b_id)"
+                      :module="drafts?.module"
+                      :fields="drafts?.fields"
+                      :groups="drafts?.groups"
+                      :raw-rows="rawI18nRows"
+                      :loading="busy"
+                    />
+                  </div>
+                </div>
+                <!-- 加载中/无数据占位：避免配置区一片空白 -->
+                <div v-else-if="configLoading" class="mm-config-state">
+                  <span class="mm-config-state__spinner"></span>
+                  <span>加载中...</span>
+                </div>
+                <div v-else class="mm-config-state">暂无配置数据</div>
+              </div>
+            </template>
+            <div v-else class="mm-main__empty">
+              <FolderTree :size="32" />
+              <span>请选择左侧模块节点</span>
             </div>
-            <div v-else class="mm-config-state">暂无配置数据</div>
-          </div>
-        </template>
-        <div v-else class="mm-main__empty">
-          <FolderTree :size="32" />
-          <span>请选择左侧模块节点</span>
-        </div>
-      </main>
+          </main>
         </SplitterPanel>
       </Splitter>
     </div>
@@ -1144,7 +1217,9 @@ loadModuleTree()
     >
       <p style="margin: 0; line-height: 1.7; color: var(--fms-text)">{{ confirmState?.content }}</p>
       <template #footer>
-        <Button type="outline" :disabled="confirmSaving" @click="confirmVisible = false">取消</Button>
+        <Button type="outline" :disabled="confirmSaving" @click="confirmVisible = false"
+          >取消</Button
+        >
         <Button
           :type="confirmState?.okType || 'primary'"
           :loading="confirmSaving"
@@ -1320,10 +1395,7 @@ loadModuleTree()
   min-width: 0;
   min-height: 0;
   overflow: hidden;
-  /* 灰底画布上的白卡：与左侧树卡用灰缝分隔 */
-  background: var(--fms-card);
-  border-radius: var(--fms-control-radius);
-  box-shadow: var(--fms-shadow);
+  gap: 8px;
 }
 
 .mm-main__empty {
@@ -1335,6 +1407,13 @@ loadModuleTree()
   flex: 1;
   color: var(--fms-text-secondary);
   font-size: 13px;
+  background: var(--fms-card);
+  border-radius: var(--fms-control-radius);
+  box-shadow: var(--fms-shadow);
+
+  svg {
+    opacity: 0.4;
+  }
 }
 
 /* 顶部通栏操作条：保存 / 同步字段（位于 tabs 之上，全 tab 生效） */
@@ -1344,6 +1423,8 @@ loadModuleTree()
   gap: 8px;
   flex: none;
   padding: 8px 10px;
+  background: var(--fms-card);
+  border-radius: var(--fms-control-radius);
 }
 
 /* ---- 右侧：配置工作区 ---- */
@@ -1352,16 +1433,21 @@ loadModuleTree()
   flex-direction: column;
   flex: 1;
   min-height: 0;
+  padding: 0;
+  background: var(--fms-card);
+  border-radius: var(--fms-control-radius);
+  box-shadow: var(--fms-shadow);
+  overflow: hidden;
 }
 
-/* ---- 配置导航：横向 Tab 导航（line 类型） ---- */
+/* ---- 配置导航：横向 Tab 导航（line 类型，使用默认 tabs 底边线 ---- */
 .mm-config-nav.tabs {
   flex: none;
 }
 
-/* 页签高度（42px）：仅作用于本页 tab 项，不改变组件内部样式，也不影响按钮 */
+/* 页签高度：仅作用于本页 tab 项，不改变组件内部样式，也不影响按钮 */
 .mm-config-nav.tabs :deep(.tabs-tab) {
-  height: 42px;
+  height: 38px;
 }
 
 /* 标签内布局：图标 + 文字 + badge */
diff --git a/code/fms/fms-vue/tests/fms-table-virtual.spec.js b/code/fms/fms-vue/tests/fms-table-virtual.spec.js
index 6f307c03..31c2a3ba 100644
--- a/code/fms/fms-vue/tests/fms-table-virtual.spec.js
+++ b/code/fms/fms-vue/tests/fms-table-virtual.spec.js
@@ -151,32 +151,38 @@ describe('fms-table 虚拟滚动验证', () => {
     wrapper.unmount()
   })
 
-  // 列宽拖拽回归：库 useColResize 在 mouseUp 时「原地改写」传入的列对象 width 并
-  // emit update:columns（同一批对象的新数组）。未绑定 v-model:columns 的父组件
-  // 不会回灌新数组，displayColumns 必须自行换新数组引用，库才能重算出新列宽。
-  // 复现方式：拿到库实际收到的 displayColumns，原地改第 1 列宽度后以同批对象
-  // emit update:columns，断言表头渲染出新宽度。
-  it('拖拽列宽后（未绑定 v-model:columns），新列宽立即生效不丢失', async () => {
-    const columns = makeColumns()
+  // 列宽/列序拖拽依赖 v-model:columns 回写：未绑定的父组件（如 dashboard 单向 :columns）
+  // 拖了松手就回弹，因此未绑定时直接关闭这两个功能（不渲染把手），绑定时保持开启。
+  it('未绑定 v-model:columns 时关闭列宽拖拽与列头拖拽（无处回写）', async () => {
     const wrapper = mount(FmsTable, {
-      props: { columns, dataSource: makeRows(20), rowKey: 'id', seq: false },
+      props: { columns: makeColumns(), dataSource: makeRows(20), rowKey: 'id', seq: false },
       attachTo: document.body,
     })
     await nextTick()
     await new Promise((r) => setTimeout(r, 100))
-
     const stkTable = wrapper.findComponent(StkTable)
-    const displayColumns = stkTable.props('columns')
-    const target = displayColumns.find((c) => c.dataIndex === 'c1')
-    target.width = '333px' // 模拟 useColResize mouseUp 的原地改写
+    expect(stkTable.props('colResizable')).toBe(false)
+    expect(stkTable.props('headerDrag')).toBe(false)
+    wrapper.unmount()
+  })
 
-    await stkTable.vm.$emit('update:columns', displayColumns.slice())
+  it('绑定 v-model:columns 时列宽拖拽与列头拖拽保持开启', async () => {
+    const wrapper = mount(FmsTable, {
+      props: {
+        columns: makeColumns(),
+        dataSource: makeRows(20),
+        rowKey: 'id',
+        seq: false,
+        // 模拟 v-model:columns：提供 update:columns 监听器
+        'onUpdate:columns': () => {},
+      },
+      attachTo: document.body,
+    })
     await nextTick()
     await new Promise((r) => setTimeout(r, 100))
-
-    // 表头 th 宽度经 --cw CSS 变量渲染；virtualX 模式下取自 __W__（dealColumns 重算产物）
-    const th = wrapper.findAll('thead th').find((el) => el.attributes('data-col-key') === 'c1')
-    expect(th.attributes('style')).toContain('333px')
+    const stkTable = wrapper.findComponent(StkTable)
+    expect(stkTable.props('colResizable')).toBe(true)
+    expect(stkTable.props('headerDrag')).toBeTruthy()
     wrapper.unmount()
   })
 })
diff --git a/code/fms/fms-vue/tests/views/keepalive-cache.spec.js b/code/fms/fms-vue/tests/views/keepalive-cache.spec.js
new file mode 100644
index 00000000..8d9a7f9a
--- /dev/null
+++ b/code/fms/fms-vue/tests/views/keepalive-cache.spec.js
@@ -0,0 +1,178 @@
+/**
+ * 回归用例：页面 keep-alive 缓存（曾因包装组件读「当前路由」导致缓存全灭）。
+ * 用轻量桩组件替换三个页面（统计挂载/激活/卸载、持有自身状态），其余
+ * （布局、页签、store、路由）全部真实，覆盖：
+ * 1. 切走再切回：不重新挂载、状态保留（keep-alive 生效）
+ * 2. 缓存页的内部状态在其它路由切换后仍保留（包装组件不得依赖当前路由）
+ * 3. 双击页签刷新：页面组件重新挂载、状态归零（缓存槽位不变）
+ */
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import { onActivated, onDeactivated, onUnmounted, ref } from 'vue'
+
+// —— 桩组件共享的计数器（vi.hoisted 保证 mock 工厂可用）——
+const counters = vi.hoisted(() => ({
+  ModuleManagement: { mounts: 0, activated: 0, deactivated: 0, unmounted: 0 },
+  MenuManagement: { mounts: 0, activated: 0, deactivated: 0, unmounted: 0 },
+  Dashboard: { mounts: 0, activated: 0, deactivated: 0, unmounted: 0 },
+}))
+
+function makeStub(label) {
+  return {
+    name: label,
+    template: `<div data-page="${label}">{{ label }}#{{ clicks }}<button data-inc @click="clicks++">+</button></div>`,
+    setup() {
+      const c = counters[label]
+      // 页面自身状态：模拟树选中、面板展开等 —— 切走再切回应保留
+      const clicks = ref(0)
+      c.mounts++
+      onActivated(() => c.activated++)
+      onDeactivated(() => c.deactivated++)
+      onUnmounted(() => c.unmounted++)
+      return { clicks }
+    },
+  }
+}
+
+vi.mock('@/views/dashboard/index.vue', () => ({ default: makeStub('Dashboard') }))
+vi.mock('@/views/system/module-management/index.vue', () => ({
+  default: makeStub('ModuleManagement'),
+}))
+vi.mock('@/views/system/menu-management/index.vue', () => ({
+  default: makeStub('MenuManagement'),
+}))
+vi.mock('@/views/detail/DetailPage.vue', () => ({
+  // 详情页桩：显示自身 id prop，验证包装组件从自身 fullPath（而非当前路由）取参
+  default: {
+    name: 'DetailPageStub',
+    props: ['id'],
+    template: '<div data-page="Detail">{{ id }}</div>',
+  },
+}))
+
+vi.mock('@/services/api', () => ({
+  loadDataApi: vi.fn(() => Promise.resolve({ data: [], code: 0, success: true })),
+  describeApi: vi.fn(() => Promise.resolve({ data: [], code: 0, success: true })),
+  saveObjectApi: vi.fn(() => Promise.resolve({ code: 0, success: true })),
+  nextIdApi: vi.fn(() => Promise.resolve({ data: 1, code: 0, success: true })),
+}))
+
+import App from '@/App.vue'
+import router from '@/router'
+import { createTestPinia } from '../helpers/app.js'
+import { useAuthStore } from '@/stores/auth'
+import { useAppStore } from '@/stores/app'
+
+beforeEach(async () => {
+  localStorage.clear()
+  sessionStorage.clear()
+  Object.values(counters).forEach((c) => {
+    c.mounts = 0
+    c.activated = 0
+    c.deactivated = 0
+    c.unmounted = 0
+  })
+  createTestPinia()
+  useAuthStore().setSession({ token: 't', user: { id: 1, account: 'u', name: 'U' } }, 'ORG')
+  await router.push('/dashboard')
+  await router.isReady()
+})
+
+async function mountApp() {
+  const wrapper = mount(App, { global: { plugins: [router] }, attachTo: document.body })
+  await flushPromises()
+  return wrapper
+}
+
+describe('页面 keep-alive 缓存', () => {
+  it('模块管理 ↔ 菜单管理 ↔ 工作台 来回切换：不重新挂载、状态保留', async () => {
+    const wrapper = await mountApp()
+    expect(counters.Dashboard.mounts).toBe(1)
+
+    // 进入模块管理，点两下按钮制造页面状态
+    await router.push('/system/module-management')
+    await flushPromises()
+    expect(counters.ModuleManagement.mounts).toBe(1)
+    const inc = () => wrapper.find('[data-page="ModuleManagement"] [data-inc]').trigger('click')
+    await inc()
+    await inc()
+    expect(wrapper.find('[data-page="ModuleManagement"]').text()).toContain('#2')
+
+    // 切到菜单管理再切回：不重新挂载，clicks 仍为 2
+    await router.push('/system/menu-management')
+    await flushPromises()
+    expect(counters.ModuleManagement.unmounted).toBe(0)
+    expect(counters.ModuleManagement.deactivated).toBe(1)
+
+    await router.push('/system/module-management')
+    await flushPromises()
+    expect(counters.ModuleManagement.mounts).toBe(1)
+    expect(counters.ModuleManagement.unmounted).toBe(0)
+    expect(wrapper.find('[data-page="ModuleManagement"]').text()).toContain('#2')
+
+    // 再绕经工作台切回：缓存依旧（包装组件不得依赖当前路由）
+    await router.push('/dashboard')
+    await flushPromises()
+    await router.push('/system/menu-management')
+    await flushPromises()
+    await router.push('/system/module-management')
+    await flushPromises()
+    expect(counters.ModuleManagement.mounts).toBe(1)
+    expect(wrapper.find('[data-page="ModuleManagement"]').text()).toContain('#2')
+
+    // 关闭页签后缓存销毁：重新进入应重新挂载
+    const appStore = useAppStore()
+    appStore.removeVisitedTab('/system/module-management')
+    await router.push('/dashboard')
+    await flushPromises()
+    await router.push('/system/module-management')
+    await flushPromises()
+    expect(counters.ModuleManagement.mounts).toBe(2)
+    expect(wrapper.find('[data-page="ModuleManagement"]').text()).toContain('#0')
+
+    wrapper.unmount()
+  })
+
+  it('详情页：按参数独立缓存，切走再切回 id 不串、互不影响', async () => {
+    const wrapper = await mountApp()
+
+    await router.push('/detail/1')
+    await flushPromises()
+    expect(wrapper.find('[data-page="Detail"]').text()).toBe('1')
+
+    // /detail/2 与 /detail/1 是两个独立缓存实例
+    await router.push('/detail/2')
+    await flushPromises()
+    expect(wrapper.find('[data-page="Detail"]').text()).toBe('2')
+
+    await router.push('/detail/1')
+    await flushPromises()
+    expect(wrapper.find('[data-page="Detail"]').text()).toBe('1')
+
+    // 携带 query 时 id 仍正确（query 变化会产生独立缓存槽，但 id 不能被 query 污染）
+    await router.push('/detail/1?tab=2')
+    await flushPromises()
+    expect(wrapper.find('[data-page="Detail"]').text()).toBe('1')
+
+    wrapper.unmount()
+  })
+
+  it('双击页签刷新：页面组件重新挂载、状态归零（缓存槽位不变）', async () => {
+    const wrapper = await mountApp()
+
+    await router.push('/system/module-management')
+    await flushPromises()
+    await wrapper.find('[data-page="ModuleManagement"] [data-inc]').trigger('click')
+    expect(wrapper.find('[data-page="ModuleManagement"]').text()).toContain('#1')
+
+    const appStore = useAppStore()
+    appStore.refreshRoute('/system/module-management')
+    await flushPromises()
+
+    expect(counters.ModuleManagement.mounts).toBe(2)
+    expect(counters.ModuleManagement.unmounted).toBe(1)
+    expect(wrapper.find('[data-page="ModuleManagement"]').text()).toContain('#0')
+
+    wrapper.unmount()
+  })
+})
diff --git a/code/fms/fms-vue/tests/views/menu-unsaved-node-switch.spec.js b/code/fms/fms-vue/tests/views/menu-unsaved-node-switch.spec.js
new file mode 100644
index 00000000..43852c6d
--- /dev/null
+++ b/code/fms/fms-vue/tests/views/menu-unsaved-node-switch.spec.js
@@ -0,0 +1,77 @@
+/**
+ * 回归用例：菜单管理 - 新建节点（未保存）→ 切到旧节点 → 切回新节点。
+ * 曾因 loadMenuConfig 用临时 id 查库返回空 → drafts = { menu: null }（真值）→
+ * 模板以 null menu 渲染 → render 抛错 → 在布局 <Transition> 下崩溃
+ * （表现为 "Component inside <Transition> renders non-element root node" +
+ *  "Cannot set properties of null (setting '__vnode')"）。
+ * 修复：watch(menuSelectedId) 对未落库节点不走 loadMenuConfig，从树节点重建草稿。
+ */
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { flushPromises } from '@vue/test-utils'
+import MenuManagement from '@/views/system/menu-management/index.vue'
+import { mountPage } from '../helpers/app.js'
+
+vi.mock('@/services/api', () => ({
+  loadDataApi: vi.fn(),
+  saveObjectApi: vi.fn(() => Promise.resolve({ code: 0, success: true })),
+  nextIdApi: vi.fn(() => Promise.resolve({ data: 9001, code: 0, success: true })),
+  describeApi: vi.fn(() => Promise.resolve({ data: [], code: 0, success: true })),
+}))
+
+vi.mock('@/components/ui/message/message-manager.js', () => {
+  const m = { success: vi.fn(), error: vi.fn(), warning: vi.fn(), info: vi.fn() }
+  return { Message: m, default: m }
+})
+
+import { loadDataApi } from '@/services/api'
+
+const savedMenu = {
+  b_id: '1',
+  b_code: 'home',
+  b_name: '首页',
+  b_menu_type: 'page',
+  b_parent_id: null,
+  b_route: '/dashboard',
+  b_xh: 10,
+  b_canuse: 1,
+}
+
+beforeEach(() => {
+  loadDataApi.mockReset()
+  loadDataApi.mockImplementation((view, where) => {
+    if (view === 's_menu' && where === '1 = 1') return Promise.resolve({ data: [savedMenu] })
+    if (view === 's_menu' && where === 'b_id = 1') return Promise.resolve({ data: [savedMenu] })
+    if (view === 's_menu') return Promise.resolve({ data: [] }) // 含 b_id = 9001（临时 id）：查无此行
+    return Promise.resolve({ data: [] })
+  })
+})
+
+describe('菜单管理：未保存新节点来回切换', () => {
+  it('切回未保存的新节点时，从树节点重建草稿，不查库、渲染不报错', async () => {
+    const { wrapper } = await mountPage(MenuManagement)
+    await flushPromises()
+
+    // 1. 新建节点（未保存）
+    await wrapper.vm.addMenu(null, 'page')
+    await flushPromises()
+    expect(String(wrapper.vm.menuSelectedId)).toBe('9001')
+    expect(wrapper.vm.drafts?.menu?.b_menu_type).toBe('page')
+
+    // 2. 切到旧节点（已保存）
+    wrapper.vm.menuSelectedId = '1'
+    await flushPromises()
+    expect(wrapper.vm.drafts?.menu?.b_id).toBe('1')
+
+    // 3. 切回新节点：不应对临时 id 发起查库请求
+    loadDataApi.mockClear()
+    wrapper.vm.menuSelectedId = '9001'
+    await flushPromises()
+    await flushPromises()
+
+    expect(loadDataApi).not.toHaveBeenCalled()
+    expect(wrapper.vm.drafts?.menu).not.toBeNull()
+    expect(String(wrapper.vm.drafts?.menu?.b_id)).toBe('9001')
+    expect(wrapper.vm.drafts?.menu?.b_menu_type).toBe('page')
+    expect(String(wrapper.vm.loadedMenuId)).toBe('9001')
+  })
+})