From 53aba8b956fd7cbc1246006f17dc402f5e8c4ab2 Mon Sep 17 00:00:00 2001
From: ZhangAo <hi_itao@163.com>
Date: Tue, 1 Sep 2026 17:32:43 +0800
Subject: [PATCH] 20260901173242

---
 code/fms/FMS新系统核心表结构设计.md           |   2 +
 ..._add_group_colspan_and_drop_edit_check.sql |  34 ++
 .../migrations/100_initialize_fms_new.sql     |   2 +-
 .../fms/fms-vue/src/components/FpsMonitor.vue |  19 +
 .../src/components/captcha/SliderCaptcha.vue  | 306 +++++++++++++
 .../src/components/ui/form/FormGroup.vue      | 164 +++++++
 .../src/components/ui/form/form-item.vue      |  13 +-
 .../src/components/ui/form/form-utils.js      |  28 ++
 .../fms-vue/src/components/ui/form/form.vue   |  38 +-
 .../fms-vue/src/components/ui/form/index.scss |  12 +-
 code/fms/fms-vue/src/components/ui/index.js   |   2 +
 code/fms/fms-vue/src/theme/tokens.css         |   1 -
 code/fms/fms-vue/src/utils/tree.js            | 135 ++++++
 code/fms/fms-vue/src/views/login/index.vue    | 397 ++++++++++++-----
 .../module-management/ModuleBasicPanel.vue    | 135 +++---
 .../module-management/ModuleI18nPanel.vue     | 262 ++++++++++-
 .../design-editor/FormDesignEditor.vue        | 183 ++------
 .../common/useStructureEditing.js             |   2 +
 .../design-editor/form/FormPreview.vue        | 157 +++++++
 .../views/system/module-management/index.vue  | 406 +++---------------
 code/test/vue-vben-admin                      |   1 +
 21 files changed, 1595 insertions(+), 704 deletions(-)
 create mode 100644 code/fms/fms-api/config/migrations/042_add_group_colspan_and_drop_edit_check.sql
 create mode 100644 code/fms/fms-vue/src/components/captcha/SliderCaptcha.vue
 create mode 100644 code/fms/fms-vue/src/components/ui/form/FormGroup.vue
 create mode 100644 code/fms/fms-vue/src/components/ui/form/form-utils.js
 create mode 100644 code/fms/fms-vue/src/views/system/module-management/components/design-editor/form/FormPreview.vue
 create mode 160000 code/test/vue-vben-admin

diff --git a/code/fms/FMS新系统核心表结构设计.md b/code/fms/FMS新系统核心表结构设计.md
index 3461277f..86ebbcbe 100644
--- a/code/fms/FMS新系统核心表结构设计.md
+++ b/code/fms/FMS新系统核心表结构设计.md
@@ -192,6 +192,8 @@ create table s_field_group (
     b_parent_id bigint null,                            -- 父分组(分组树)
     b_title nvarchar(100) not null,                     -- 分组标题
     b_i18n varchar(150) null,                           -- 标题多语言 key
+    b_layout_direction varchar(10) null,                -- 分组内字段排列方向(vertical/horizontal)
+    b_colspan int not null default 48,                  -- 分组在外层 48 宫格中的占格数(默认 48 独占一行)
     b_xh int not null default 0,                        -- 分组排序
     b_canuse int not null default 1,                    -- 是否启用(停用整组隐藏)
     constraint pk_s_field_group primary key (b_id),
diff --git a/code/fms/fms-api/config/migrations/042_add_group_colspan_and_drop_edit_check.sql b/code/fms/fms-api/config/migrations/042_add_group_colspan_and_drop_edit_check.sql
new file mode 100644
index 00000000..39bd8083
--- /dev/null
+++ b/code/fms/fms-api/config/migrations/042_add_group_colspan_and_drop_edit_check.sql
@@ -0,0 +1,34 @@
+/*
+  表单设计器分组宽度持久化：
+  1. s_field_group.b_colspan —— 分组在外层 48 宫格中的占格数（默认 48 独占一行）。
+     与 s_field_edit.b_colspan 同义（栅格占格数），仅进制不同：分组 48 宫格、字段 24 宫格。
+     不加 CHECK 约束（与前端钳制逻辑一致，边界由应用层保证）。
+  2. 删除 s_field_edit 的 CK_s_field_edit_colspan CHECK 约束（b_colspan BETWEEN 1 AND 24），
+     放开栅格宽度的数据库层限制，校验统一交由前端与应用层。
+  可重复执行：列与约束均通过存在性判断避免重复。
+*/
+SET NOCOUNT ON;
+
+-- 1. s_field_group.b_colspan
+IF NOT EXISTS (
+    SELECT 1
+    FROM sys.columns
+    WHERE object_id = OBJECT_ID(N'dbo.s_field_group')
+      AND name = N'b_colspan'
+)
+BEGIN
+    ALTER TABLE dbo.s_field_group
+        ADD b_colspan int NOT NULL CONSTRAINT DF_s_field_group_colspan DEFAULT (48);
+END;
+
+-- 2. 删除 s_field_edit 的 CK_s_field_edit_colspan CHECK 约束
+IF EXISTS (
+    SELECT 1
+    FROM sys.check_constraints
+    WHERE parent_object_id = OBJECT_ID(N'dbo.s_field_edit')
+      AND name = N'CK_s_field_edit_colspan'
+)
+BEGIN
+    ALTER TABLE dbo.s_field_edit
+        DROP CONSTRAINT CK_s_field_edit_colspan;
+END;
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 79f9d8b1..f3974a1c 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
@@ -133,6 +133,7 @@ BEGIN
         b_title nvarchar(100) NOT NULL,
         b_i18n varchar(150) NULL,
         b_layout_direction varchar(10) NULL CONSTRAINT DF_s_field_group_layout_direction DEFAULT ('vertical'),
+        b_colspan int NOT NULL CONSTRAINT DF_s_field_group_colspan DEFAULT (48),
         b_xh int NOT NULL CONSTRAINT DF_s_field_group_xh DEFAULT (0),
         b_canuse int NOT NULL CONSTRAINT DF_s_field_group_canuse DEFAULT (1),
         CONSTRAINT PK_s_field_group PRIMARY KEY (b_id),
@@ -178,7 +179,6 @@ BEGIN
         b_xh int NOT NULL CONSTRAINT DF_s_field_edit_xh DEFAULT (0),
         CONSTRAINT PK_s_field_edit PRIMARY KEY (b_id),
         CONSTRAINT UQ_s_field_edit_field UNIQUE (b_module_id, b_field_id),
-        CONSTRAINT CK_s_field_edit_colspan CHECK (b_colspan BETWEEN 1 AND 24),
         CONSTRAINT CK_s_field_edit_height CHECK (b_height IS NULL OR (b_height BETWEEN 64 AND 480))
     );
     CREATE INDEX IX_s_field_edit_order ON dbo.s_field_edit (b_xh, b_id);
diff --git a/code/fms/fms-vue/src/components/FpsMonitor.vue b/code/fms/fms-vue/src/components/FpsMonitor.vue
index 4c4e8f5f..b266472a 100644
--- a/code/fms/fms-vue/src/components/FpsMonitor.vue
+++ b/code/fms/fms-vue/src/components/FpsMonitor.vue
@@ -100,6 +100,23 @@ const rootEl = ref(null)
 const pos = ref(null)
 let dragStart = null // { pointerX, pointerY, originX, originY, width, height }
 
+/* ---------- 双击隐藏（也可由父级通过 ref 调 show/hide 控制显隐） ---------- */
+const visible = ref(true)
+
+function onDblClick() {
+  visible.value = false
+}
+
+function show() {
+  visible.value = true
+}
+
+function hide() {
+  visible.value = false
+}
+
+defineExpose({ show, hide })
+
 function onPointerDown(e) {
   // 重置按钮的点击不触发拖拽
   if (e.target.closest('.fps-monitor__reset')) return
@@ -148,6 +165,7 @@ onBeforeUnmount(() => {
 
 <template>
   <aside
+    v-show="visible"
     ref="rootEl"
     class="fps-monitor"
     :class="{ 'is-dragging': dragStart }"
@@ -155,6 +173,7 @@ onBeforeUnmount(() => {
     aria-label="FPS 性能监控"
     v-bind="$attrs"
     @pointerdown="onPointerDown"
+    @dblclick="onDblClick"
   >
     <div class="fps-monitor__header">
       <span class="fps-monitor__label">FPS</span>
diff --git a/code/fms/fms-vue/src/components/captcha/SliderCaptcha.vue b/code/fms/fms-vue/src/components/captcha/SliderCaptcha.vue
new file mode 100644
index 00000000..4102d78e
--- /dev/null
+++ b/code/fms/fms-vue/src/components/captcha/SliderCaptcha.vue
@@ -0,0 +1,306 @@
+<script setup>
+/**
+ * 滑块验证码（参考 vben-admin SliderCaptcha），拖拽至最右端完成验证。
+ * 通过 v-model 双向绑定布尔值，值为 true 时表示验证通过。
+ */
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { Check, ChevronsRight } from '@lucide/vue'
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  text: { type: String, default: '请按住滑块拖动' },
+  successText: { type: String, default: '验证通过' },
+  disabled: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['update:modelValue', 'success', 'start', 'move', 'end'])
+
+/* ================= 状态 ================= */
+const wrapperRef = ref(null)
+const actionRef = ref(null)
+const barRef = ref(null)
+
+const isMoving = ref(false)
+const isPassing = ref(false)
+const moveStartX = ref(0)
+const moveDistance = ref(0)
+const toLeft = ref(false)
+const actionLeft = ref('0')
+const barWidth = ref('0')
+
+// 同步外部 v-model 到内部状态
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val !== isPassing.value) {
+      isPassing.value = !!val
+    }
+  },
+)
+
+// 通过后 emit 事件（仅用于通知，v-model 已在 checkPass 中直接 emit）
+watch(isPassing, (val) => {
+  if (val) {
+    emit('success', { isPassing: true })
+  }
+})
+
+/* ================= 拖拽逻辑 ================= */
+function getEventPageX(e) {
+  if ('pageX' in e) return e.pageX
+  if ('touches' in e && e.touches[0]) return e.touches[0].pageX
+  return 0
+}
+
+function getOffset() {
+  const wrapper = wrapperRef.value
+  const action = actionRef.value
+  if (!wrapper || !action) return { actionWidth: 40, offset: 0, wrapperWidth: 220 }
+  const wrapperWidth = wrapper.offsetWidth
+  const actionWidth = action.offsetWidth
+  const offset = wrapperWidth - actionWidth - 6
+  return { actionWidth, offset, wrapperWidth }
+}
+
+function handleDragStart(e) {
+  if (isPassing.value || props.disabled) return
+  moveStartX.value = getEventPageX(e)
+  const currentLeft = Number.parseInt(actionLeft.value || '0', 10)
+  moveDistance.value = moveStartX.value - currentLeft
+  isMoving.value = true
+  emit('start', e)
+}
+
+function handleDragMoving(e) {
+  if (!isMoving.value || isPassing.value) return
+  const action = actionRef.value
+  const bar = barRef.value
+  if (!action || !bar) return
+  const { actionWidth, offset, wrapperWidth } = getOffset()
+  const moveX = getEventPageX(e) - moveDistance.value
+
+  emit('move', { event: e, moveDistance: moveDistance.value, moveX })
+
+  if (moveX >= offset - 2) {
+    // 拖到右边界（容忍 2px 偏差）
+    actionLeft.value = `${wrapperWidth - actionWidth}px`
+    barWidth.value = `${wrapperWidth - actionWidth / 2}px`
+    checkPass()
+  } else if (moveX > 0) {
+    actionLeft.value = `${moveX}px`
+    barWidth.value = `${moveX + actionWidth / 2}px`
+  } else {
+    actionLeft.value = '0'
+    barWidth.value = '0'
+  }
+}
+
+// document 级 mouseup 确保鼠标移出 wrapper 也能正确结束拖拽
+function onDocumentMouseUp(e) {
+  if (!isMoving.value) return
+  handleDragEnd(e)
+}
+
+function handleDragEnd(e) {
+  if (!isMoving.value || isPassing.value) return
+  emit('end', e)
+  const action = actionRef.value
+  const bar = barRef.value
+  if (!action || !bar) return
+  const { actionWidth, offset, wrapperWidth } = getOffset()
+  const moveX = getEventPageX(e) - moveDistance.value
+
+  if (moveX >= offset - 2) {
+    // 拖到位
+    actionLeft.value = `${wrapperWidth - actionWidth}px`
+    barWidth.value = `${wrapperWidth - actionWidth / 2}px`
+    checkPass()
+  } else {
+    // 没到位，归位
+    resume()
+  }
+  isMoving.value = false
+}
+
+function checkPass() {
+  isPassing.value = true
+  isMoving.value = false
+  emit('update:modelValue', true)
+}
+
+function resume() {
+  isMoving.value = false
+  isPassing.value = false
+  moveDistance.value = 0
+  emit('update:modelValue', false)
+  // 先加过渡类（toLeft），下一帧再改值 → 从当前位置平滑动画回 0
+  toLeft.value = true
+  nextTick(() => {
+    actionLeft.value = '0'
+    barWidth.value = '0'
+    setTimeout(() => {
+      toLeft.value = false
+    }, 300)
+  })
+}
+
+onMounted(() => {
+  document.addEventListener('mouseup', onDocumentMouseUp)
+  document.addEventListener('touchend', onDocumentMouseUp)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('mouseup', onDocumentMouseUp)
+  document.removeEventListener('touchend', onDocumentMouseUp)
+})
+
+defineExpose({ resume })
+</script>
+
+<template>
+  <div
+    ref="wrapperRef"
+    class="scaptcha"
+    :class="{ 'scaptcha--disabled': disabled, 'scaptcha--passed': isPassing }"
+    @mousemove="handleDragMoving"
+    @touchmove="handleDragMoving"
+  >
+    <!-- 进度条 -->
+    <div
+      ref="barRef"
+      class="scaptcha__bar"
+      :class="{
+        'scaptcha__bar--left': toLeft,
+        'scaptcha__bar--passed': isPassing,
+      }"
+      :style="{ width: barWidth }"
+    ></div>
+
+    <!-- 背景文字 -->
+    <div
+      class="scaptcha__text"
+      :class="{ 'scaptcha__text--passed': isPassing }"
+    >
+      {{ isPassing ? successText : text }}
+    </div>
+
+    <!-- 滑块手柄 -->
+    <div
+      ref="actionRef"
+      class="scaptcha__action"
+      :class="{
+        'scaptcha__action--left': toLeft,
+        'scaptcha__action--disabled': disabled,
+        'scaptcha__action--passed': isPassing,
+      }"
+      :style="{ left: actionLeft }"
+      @mousedown="handleDragStart"
+      @touchstart="handleDragStart"
+    >
+      <ChevronsRight v-if="!isPassing" :size="16" />
+      <Check v-else :size="16" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.scaptcha {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 40px;
+  overflow: hidden;
+  border-radius: var(--fms-control-radius);
+  border: 1px solid var(--fms-border);
+  background: var(--fms-background);
+  user-select: none;
+  cursor: default;
+}
+
+/* ========== 进度条 ========== */
+/* 拖拽过程即显示成功绿（浅色调）；默认无过渡，跟手实时 */
+.scaptcha__bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: color-mix(in srgb, var(--fms-success) 78%, #fff);
+  border-radius: var(--fms-control-radius) 0 0 var(--fms-control-radius);
+  pointer-events: none;
+}
+
+/* 回退归位时才启用宽度过渡，平滑动画回 0 */
+.scaptcha__bar--left {
+  transition: width 300ms ease;
+}
+
+/* ========== 背景文字（恒黑色，无透明/扫光效果） ========== */
+.scaptcha__text {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-size: 13px;
+  color: var(--fms-text);
+  pointer-events: none;
+  user-select: none;
+}
+
+.scaptcha__text--passed {
+  color: var(--fms-text);
+}
+
+/* ========== 滑块手柄 ========== */
+/* 无边框，仅用阴影表现层次（参考 vben shadow-md），拖拽中不出现边框 */
+.scaptcha__action {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 100%;
+  background: var(--fms-card);
+  border-radius: var(--fms-control-radius);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  color: var(--fms-text-secondary);
+  cursor: grab;
+  transition: box-shadow 150ms ease, color 200ms ease;
+  z-index: 1;
+}
+
+.scaptcha__action:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.scaptcha__action:active {
+  cursor: grabbing;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
+}
+
+/* 回退归位时才启用 left 过渡，平滑动画回 0 */
+.scaptcha__action--left {
+  transition: left 300ms ease;
+}
+
+.scaptcha__action--disabled {
+  cursor: not-allowed;
+}
+
+.scaptcha__action--passed {
+  color: var(--fms-success);
+  cursor: default;
+}
+
+/* ========== 禁用态整体 ========== */
+/* 禁用仅禁止交互（拖拽由 JS 拦截），不做整体半透明——避免通过后的绿/白被压灰混杂 */
+.scaptcha--disabled {
+  cursor: not-allowed;
+}
+</style>
\ No newline at end of file
diff --git a/code/fms/fms-vue/src/components/ui/form/FormGroup.vue b/code/fms/fms-vue/src/components/ui/form/FormGroup.vue
new file mode 100644
index 00000000..25384dd3
--- /dev/null
+++ b/code/fms/fms-vue/src/components/ui/form/FormGroup.vue
@@ -0,0 +1,164 @@
+<script setup>
+/**
+ * 表单分组容器（纯布局，不碰业务/校验）。
+ * - 在外层 Form 的宫格网格中占位：span 控制占几格（默认 1/-1 占满整行），
+ *   组内再嵌套宫格网格排布 FormItem。
+ * - columns 控制组内宫格列数（默认继承外层 Form 的 columns）；
+ *   通过重新 provide columns 覆盖上下文，使组内 FormItem 的 span 自动按组内宫格计算。
+ * - FormItem 仍通过 provide/inject 拿到 Form 的 model/rules 校验上下文，组件不拦截。
+ * - 可选折叠功能（collapsible），默认展开，折叠/展开状态由内部管理或父级 v-model 控制。
+ * - variant 控制标题视觉风格：line（左竖线 + 右折叠图标，默认）| plain（纯文字标题）。
+ */
+import { computed, inject, provide, ref } from 'vue'
+import { ChevronDown } from '@lucide/vue'
+import { normalizeGap, fluidColumnGap } from './form-utils'
+
+const props = defineProps({
+  /** 分组标题；为空则不渲染标题行 */
+  title: { type: String, default: '' },
+  /** 标题视觉风格：line（左竖线+右折叠图标）| plain（纯文字） */
+  variant: {
+    type: String,
+    default: 'line',
+    validator: (value) => ['line', 'plain'].includes(value),
+  },
+  /** 组内宫格列数；默认继承外层 Form 的 columns（=1 时组内不建栅格，子项直接堆叠） */
+  columns: { type: Number, default: null },
+  /** 在外层 Form 宫格中的占格数；默认 1/-1 占满整行，可设 24 等实现并排 */
+  span: { type: Number, default: null },
+  /** 组内栅格间距：单个数字或 { row, col }（同 Form.gap），默认 { row: 12, col: 8 } */
+  gap: { type: [Number, Object], default: undefined },
+  /** 是否显示折叠/展开按钮 */
+  collapsible: { type: Boolean, default: true },
+  /** 初始展开/收起状态（仅 collapsible 生效） */
+  defaultExpanded: { type: Boolean, default: true },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const form = inject('fms-form', null)
+
+const groupColumns = computed(() => props.columns ?? form?.columns?.value ?? 1)
+
+// 覆盖 columns 上下文：组内 FormItem 的 span 按组内宫格计算
+provide('fms-form-group', {
+  columns: groupColumns,
+})
+
+const groupStyle = computed(() => ({
+  gridColumn: props.span ? `span ${props.span}` : '1 / -1',
+}))
+
+// 组内宫格：列间距按组内列数钳制（fluidColumnGap），窄容器/嵌套宫格下不会横向溢出；
+// 未传 gap 时默认 { row: 12, col: 8 }（与 index.scss 的 __grid 一致）
+const gridStyle = computed(() => {
+  if (groupColumns.value <= 1) return undefined
+  const { row, col } = normalizeGap(props.gap ?? { row: 12, col: 8 })
+  return {
+    gridTemplateColumns: `repeat(${groupColumns.value}, minmax(0, 1fr))`,
+    rowGap: `${row ?? 12}px`,
+    columnGap: fluidColumnGap(col ?? 8, groupColumns.value),
+  }
+})
+
+/* ================= 折叠 ================= */
+const internalExpanded = ref(props.defaultExpanded)
+
+const expanded = computed({
+  get: () => internalExpanded.value,
+  set: (v) => {
+    internalExpanded.value = v
+    emit('update:modelValue', v)
+  },
+})
+
+function toggleCollapse() {
+  if (!props.collapsible) return
+  expanded.value = !expanded.value
+}
+</script>
+
+<template>
+  <div class="fms-form-group" :class="`fms-form-group--${variant}`" :style="groupStyle">
+    <div
+      v-if="title"
+      class="fms-form-group__title"
+      :class="{ 'is-collapsible': collapsible }"
+      :title="collapsible ? (expanded ? '点击收起' : '点击展开') : undefined"
+      @click="toggleCollapse"
+    >
+      <span class="fms-form-group__title-text">{{ title }}</span>
+      <ChevronDown
+        v-if="collapsible"
+        :size="14"
+        class="fms-form-group__collapse-icon"
+        :class="{ 'is-collapsed': !expanded }"
+      />
+    </div>
+    <div v-show="expanded" class="fms-form-group__grid" :style="gridStyle">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.fms-form-group {
+  min-width: 0;
+}
+
+/* ========== 标题：line 风格（默认）========== */
+.fms-form-group__title {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  margin: 0 0 8px;
+  padding: 4px 0 8px 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--fms-text);
+  line-height: 18px;
+  user-select: none;
+
+  &.is-collapsible {
+    cursor: pointer;
+  }
+}
+
+/* line 风格：左竖线 + 文字，折叠图标贴右 */
+.fms-form-group--line .fms-form-group__title-text {
+  flex: 1;
+  min-width: 0;
+  padding-left: 8px;
+  border-left: 3px solid var(--fms-primary);
+  transition: color 150ms ease;
+}
+
+/* plain 风格：纯文字，无竖线；可折叠时图标仍贴右 */
+.fms-form-group--plain .fms-form-group__title-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.fms-form-group__collapse-icon {
+  flex: none;
+  margin-left: 8px;
+  color: var(--fms-text-secondary);
+  transition: transform 250ms ease;
+}
+
+.fms-form-group__collapse-icon.is-collapsed {
+  transform: rotate(-90deg);
+}
+
+/* ========== 组内宫格 ========== */
+.fms-form-group__grid {
+  display: grid;
+  gap: 12px 8px;
+  align-items: start;
+
+  :deep(.fms-form-item) {
+    margin-bottom: 0;
+    min-width: 0;
+  }
+}
+</style>
\ No newline at end of file
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 888d7545..a065c5bc 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
@@ -83,9 +83,11 @@ const labelStyle = computed(() => {
   return { width: labelWidth.value }
 })
 
-// 网格布局（Form columns > 1）下跨列：span 超过列数时取整行
+// 网格布局（Form columns > 1）下跨列：span 超过列数时取整行；
+// 组内宫格由 FormGroup 提供（fms-form-group），优先于 Form 的 columns
+const groupForm = inject('fms-form-group', null)
 const itemStyle = computed(() => {
-  const columns = form?.columns?.value ?? 1
+  const columns = groupForm?.columns?.value ?? form?.columns?.value ?? 1
   if (columns <= 1) return undefined
   const span = Math.min(Math.max(Number(props.span) || 1, 1), columns)
   return span > 1 ? { gridColumn: `span ${span}` } : undefined
@@ -120,13 +122,18 @@ function clearValidation() {
 // 重置后值被父层清空时（值空且未触碰过）也跳过，避免重置即整片报红
 watch(
   () => [form?.model?.value, form?.model?.value?.[props.name]],
-  ([model, value], [prevModel] = []) => {
+  ([model, value], [prevModel, prevValue] = []) => {
     if (validateTrigger.value !== 'change') return
     // model 对象被父级整体替换（如切换编辑目标）：视为全新表单，清除校验态，不触发报红
     if (model !== prevModel) {
       clearValidation()
       return
     }
+    // 布尔值由 true 重置为 false（如滑块验证码归零）：视为主动重置，清除校验态不报错
+    if (prevValue === true && value === false) {
+      clearValidation()
+      return
+    }
     if (!touched.value && isEmptyValue(value)) return
     touched.value = true
     runValidation()
diff --git a/code/fms/fms-vue/src/components/ui/form/form-utils.js b/code/fms/fms-vue/src/components/ui/form/form-utils.js
new file mode 100644
index 00000000..75ce6f3e
--- /dev/null
+++ b/code/fms/fms-vue/src/components/ui/form/form-utils.js
@@ -0,0 +1,28 @@
+/**
+ * Form / FormGroup 布局工具
+ */
+
+/**
+ * gap 归一化：数字 → { row, col }（行/列等距），对象原样返回，空值返回 {}
+ */
+export function normalizeGap(gap) {
+  if (typeof gap === 'number') return { row: gap, col: gap }
+  return gap || {}
+}
+
+/**
+ * 列间距防溢出钳制（宫格嵌套场景）。
+ *
+ * grid 的 column-gap 是固定值且不可压缩：N 列宫格有 N-1 个 gap，
+ * 窄容器下轨道可被 minmax(0, 1fr) 压到 0，gap 压不动，总量超出容器宽即横向溢出
+ * （嵌套宫格外层 gap 还会先吃掉内容宽，留给内层更少）。
+ *
+ * 返回 `min(px, 100% / (2N))`：gap 总量最多占容器约 50%，任何宽度下不会溢出；
+ * 容器够宽时取 px 上限，与固定值视觉一致。百分比相对 grid 自身内容盒解析，
+ * 各层按自己的 N 独立钳制——外层/内层列数可任意组合（默认 48/24 只是约定）。
+ */
+export function fluidColumnGap(col, columns) {
+  if (col == null || !columns || columns <= 1) return undefined
+  const maxPercent = (100 / (columns * 2)).toFixed(3).replace(/\.?0+$/, '')
+  return `min(${col}px, ${maxPercent}%)`
+}
diff --git a/code/fms/fms-vue/src/components/ui/form/form.vue b/code/fms/fms-vue/src/components/ui/form/form.vue
index 0462327f..abf1f710 100644
--- a/code/fms/fms-vue/src/components/ui/form/form.vue
+++ b/code/fms/fms-vue/src/components/ui/form/form.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { computed, provide } from 'vue'
+import { fluidColumnGap, normalizeGap } from './form-utils'
 
 /* ---------- props / emits / slots ---------- */
 const props = defineProps({
@@ -36,19 +37,49 @@ const props = defineProps({
     default: 'change',
     validator: (value) => ['change', 'blur'].includes(value),
   },
+  /** 表单项间距（参考 antdv-next Row gutter）：单个数字表示行/列等距，或对象 { row, col } 分别控制行/列间距，单位 px。
+   * 单列布局（columns <= 1）时 row 生效（纵向堆叠）；多列网格（columns > 1）时 row+col 都生效。
+   * 不传则使用样式默认值，不影响现有表单。 */
+  gap: { type: [Number, Object], default: undefined },
 })
 
 const emit = defineEmits(['submit', 'submitFailed', 'reset'])
 
-/* ---------- 网格布局 ---------- */
+/* ---------- 布局样式 ---------- */
+// 列数 / 最大宽度 / 间距（gap）统一在此应用到根元素。
+// 单列纵向布局：display:flex + flex-direction:column + row-gap；
+// 多列网格布局：grid + gap（覆盖 scss 默认值）。
+// gap 归一化：数字 → { row: n, col: n }（行/列等距）
+const normalizedGap = computed(() => normalizeGap(props.gap))
+
+// 是否启用了任意轴向的间距（用于 fms-form-gap 类，取消表单项默认 margin）
+const hasGap = computed(() => {
+  const { row, col } = normalizedGap.value
+  return row != null || col != null
+})
+
 const formStyle = computed(() => {
   const style = {}
   if (props.columns > 1) {
+    style.display = 'grid'
     style.gridTemplateColumns = `repeat(${props.columns}, minmax(0, 1fr))`
   }
   if (props.maxWidth != null) {
     style.maxWidth = typeof props.maxWidth === 'number' ? `${props.maxWidth}px` : props.maxWidth
   }
+  const { row, col } = normalizedGap.value
+  if (props.columns > 1) {
+    // 多列网格：行间距固定（纵向只增高，不会横向溢出）；
+    // 列间距按列数钳制（fluidColumnGap），默认值与 index.scss 的 .fms-form-grid 一致，
+    // 未传 gap 的高列数宫格（如设计器预览 48 列）同样不会在窄容器下溢出
+    style.rowGap = `${row ?? 12}px`
+    style.columnGap = fluidColumnGap(col ?? 16, props.columns)
+  } else if (row != null) {
+    // 单列纵向：flex 列布局用 row-gap 控制表单项间距
+    style.display = 'flex'
+    style.flexDirection = 'column'
+    style.rowGap = `${row}px`
+  }
   return style
 })
 
@@ -117,7 +148,10 @@ defineExpose({ validateAll })
 <template>
   <form
     class="fms-form"
-    :class="[`fms-form-${layout}`, { 'fms-form-grid': columns > 1 }]"
+    :class="[
+      `fms-form-${layout}`,
+      { 'fms-form-grid': columns > 1, 'fms-form-gap': hasGap },
+    ]"
     :style="formStyle"
     @submit="onSubmit"
     @reset="onReset"
diff --git a/code/fms/fms-vue/src/components/ui/form/index.scss b/code/fms/fms-vue/src/components/ui/form/index.scss
index 82df434a..7e2b3788 100644
--- a/code/fms/fms-vue/src/components/ui/form/index.scss
+++ b/code/fms/fms-vue/src/components/ui/form/index.scss
@@ -7,7 +7,17 @@
 .fms-form-item {
   display: flex;
   align-items: flex-start;
-  margin-bottom: var(--fms-form-item-margin-bottom);
+  margin-bottom: 6px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+/* gap 模式：表单项间距由 Form 根容器统一控制（flex/grid + gap），
+   取消表单项自身的 margin-bottom 避免双重加距 */
+.fms-form-gap .fms-form-item {
+  margin-bottom: 0;
 
   &:last-child {
     margin-bottom: 0;
diff --git a/code/fms/fms-vue/src/components/ui/index.js b/code/fms/fms-vue/src/components/ui/index.js
index 1a856f1b..62de563a 100644
--- a/code/fms/fms-vue/src/components/ui/index.js
+++ b/code/fms/fms-vue/src/components/ui/index.js
@@ -11,6 +11,7 @@ import TimeSelect from './date/time-select.vue'
 import Drawer from './drawer/drawer.vue'
 import Dropdown from './dropdown/dropdown.vue'
 import Form from './form/form.vue'
+import FormGroup from './form/FormGroup.vue'
 import FormItem from './form/form-item.vue'
 import Input from './input/input.vue'
 import Modal from './modal/modal.vue'
@@ -43,6 +44,7 @@ export {
   Drawer,
   Dropdown,
   Form,
+  FormGroup,
   FormItem,
   Input,
   Message,
diff --git a/code/fms/fms-vue/src/theme/tokens.css b/code/fms/fms-vue/src/theme/tokens.css
index 6d005b12..f5504f49 100644
--- a/code/fms/fms-vue/src/theme/tokens.css
+++ b/code/fms/fms-vue/src/theme/tokens.css
@@ -77,7 +77,6 @@
 
   /* 表单（form）：label 宽度 / 表单项间距 / 辅助提示字号（不随主题变化） */
   --fms-form-label-width: 88px;
-  --fms-form-item-margin-bottom: 6px;
   --fms-form-help-font-size: 12px;
 
   /* 阴影（对齐 shadcn-vue / Tailwind v4 shadow-xs：0 1px 2px 0 rgb(0 0 0 / 0.05)） */
diff --git a/code/fms/fms-vue/src/utils/tree.js b/code/fms/fms-vue/src/utils/tree.js
index 079765a5..7e7c9d74 100644
--- a/code/fms/fms-vue/src/utils/tree.js
+++ b/code/fms/fms-vue/src/utils/tree.js
@@ -53,3 +53,138 @@ export function sortTree(tree, xhKey = 'b_xh', idKey = 'b_id') {
   }
   return tree
 }
+
+/**
+ * 在树中递归查找指定 id 的节点。
+ * @param {Array} nodes 树形数组
+ * @param {string|number} id 目标节点 ID
+ * @param {string} idKey 节点 ID 字段名，默认 "b_id"
+ * @param {string} childrenKey 子节点字段名，默认 "children"
+ */
+export function findTreeNode(nodes, id, idKey = 'b_id', childrenKey = 'children') {
+  for (const node of nodes) {
+    if (String(node[idKey]) === String(id)) return node
+    if (node[childrenKey]) {
+      const found = findTreeNode(node[childrenKey], id, idKey, childrenKey)
+      if (found) return found
+    }
+  }
+  return null
+}
+
+/**
+ * 递归收集所有节点 key。
+ * @param {Array} nodes 树形数组
+ * @param {string} idKey 节点 ID 字段名，默认 "b_id"
+ * @param {string} childrenKey 子节点字段名，默认 "children"
+ */
+export function collectAllKeys(nodes, idKey = 'b_id', childrenKey = 'children') {
+  const keys = []
+  const walk = (list) => {
+    for (const node of list) {
+      keys.push(String(node[idKey]))
+      if (node[childrenKey]) walk(node[childrenKey])
+    }
+  }
+  walk(nodes)
+  return keys
+}
+
+/**
+ * 从根到目标节点的祖先路径（不包含目标节点自身）。
+ * @param {Array} nodes 树形数组
+ * @param {string|number} targetId 目标节点 ID
+ * @param {string} idKey 节点 ID 字段名，默认 "b_id"
+ * @param {string} childrenKey 子节点字段名，默认 "children"
+ */
+export function expandAncestors(nodes, targetId, idKey = 'b_id', childrenKey = 'children') {
+  const keys = []
+  const walk = (list, ancestors) => {
+    for (const node of list) {
+      const key = String(node[idKey])
+      if (key === String(targetId)) {
+        keys.push(...ancestors)
+        return true
+      }
+      if (node[childrenKey] && walk(node[childrenKey], [...ancestors, key])) return true
+    }
+    return false
+  }
+  walk(nodes, [])
+  return keys
+}
+
+/**
+ * 按关键字匹配树节点名称/编码，命中节点保留其子树。
+ * @param {Array} nodes 树形数组
+ * @param {string} keyword 搜索关键字
+ * @param {string[]} textKeys 搜索匹配的字段名列表，默认 ["b_name", "b_code"]
+ * @param {string} childrenKey 子节点字段名，默认 "children"
+ */
+export function filterTreeByText(
+  nodes,
+  keyword,
+  textKeys = ['b_name', 'b_code'],
+  childrenKey = 'children',
+) {
+  const kw = String(keyword || '').trim().toLowerCase()
+  if (!kw) return nodes
+  const result = []
+  for (const node of nodes) {
+    const hit = textKeys.some((k) => String(node[k] || '').toLowerCase().includes(kw))
+    const children = node[childrenKey] ? filterTreeByText(node[childrenKey], keyword, textKeys, childrenKey) : undefined
+    if (hit || children?.length) {
+      result.push({ ...node, [childrenKey]: children })
+    }
+  }
+  return result
+}
+
+/**
+ * 将节点插入到树中（按 parentIdKey 匹配父节点，顶级节点 parentIdKey 为 null/undefined 时插入根层）。
+ * 就地修改树，不返回新数组。
+ * @param {Array} nodes 树形数组（就地修改）
+ * @param {Object} node 待插入节点
+ * @param {Object} [options]
+ * @param {string} [options.parentIdKey="b_parent_id"] 父节点 ID 字段名
+ * @param {string} [options.idKey="b_id"] 节点 ID 字段名
+ * @param {string} [options.childrenKey="children"] 子节点字段名
+ * @param {Function} [options.sort] 可选排序函数，插入所在层后调用（如 sortTree）
+ */
+export function insertTreeNode(
+  nodes,
+  node,
+  { parentIdKey = 'b_parent_id', idKey = 'b_id', childrenKey = 'children', sort } = {},
+) {
+  if (node[parentIdKey] == null) {
+    nodes.push(node)
+    if (sort) sort(nodes)
+    return
+  }
+  for (const n of nodes) {
+    if (String(n[idKey]) === String(node[parentIdKey])) {
+      n[childrenKey] = n[childrenKey] || []
+      n[childrenKey].push(node)
+      if (sort) sort(n[childrenKey])
+      return
+    }
+    if (n[childrenKey]) insertTreeNode(n[childrenKey], node, { parentIdKey, idKey, childrenKey, sort })
+  }
+}
+
+/**
+ * 从树中移除指定 id 的节点（就地修改）。
+ * @param {Array} nodes 树形数组（就地修改）
+ * @param {string|number} id 目标节点 ID
+ * @param {string} idKey 节点 ID 字段名，默认 "b_id"
+ * @param {string} childrenKey 子节点字段名，默认 "children"
+ */
+export function removeTreeNode(nodes, id, idKey = 'b_id', childrenKey = 'children') {
+  for (let i = 0; i < nodes.length; i++) {
+    if (String(nodes[i][idKey]) === String(id)) {
+      nodes.splice(i, 1)
+      return
+    }
+    if (nodes[i][childrenKey]) removeTreeNode(nodes[i][childrenKey], id, idKey, childrenKey)
+  }
+}
\ No newline at end of file
diff --git a/code/fms/fms-vue/src/views/login/index.vue b/code/fms/fms-vue/src/views/login/index.vue
index a2aef167..957a4fca 100644
--- a/code/fms/fms-vue/src/views/login/index.vue
+++ b/code/fms/fms-vue/src/views/login/index.vue
@@ -1,14 +1,17 @@
 <script setup>
 import { computed, onMounted, reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { Building2, GalleryVerticalEnd, KeyRound, User } from '@lucide/vue'
+import { Building2, KeyRound, Moon, Sun, User } from '@lucide/vue'
 import { Form, FormItem, Input, Button, Message } from '@/components/ui'
+import SliderCaptcha from '@/components/captcha/SliderCaptcha.vue'
 import { loginApi } from '@/services/api'
 import { useAuthStore } from '@/stores/auth'
+import { useAppStore } from '@/stores/app'
 
 const router = useRouter()
 const route = useRoute()
 const authStore = useAuthStore()
+const appStore = useAppStore()
 
 /* ---------- 登录提示（携带 reason 跳转时展示） ---------- */
 const loginHint = computed(() => {
@@ -23,14 +26,32 @@ const formModel = reactive({
   orgId: '',
   account: '',
   password: '',
+  captcha: false,
 })
 
 const formRules = {
   orgId: [{ required: true, message: '请输入机构码' }],
   account: [{ required: true, message: '请输入账号' }],
+  captcha: [{ validator: (value) => value === true, message: '请完成滑块验证' }],
 }
 
 const submitting = ref(false)
+const captchaRef = ref(null)
+
+/* ---------- 右上角操作 ---------- */
+const isDark = computed(() => appStore.darkMode)
+
+function toggleTheme() {
+  appStore.toggleDarkMode()
+}
+
+// 语言切换为占位（项目暂未引入 i18n）
+const lang = ref('zh-CN')
+function toggleLang() {
+  // 切换中/英文，仅作展示占位，后续接入 i18n 后实现
+  lang.value = lang.value === 'zh-CN' ? 'en-US' : 'zh-CN'
+  Message.info('语言切换待接入 i18n 后生效')
+}
 
 onMounted(() => {
   // 回填上次登录信息：由 persist 插件在启动时恢复，不手动碰 localStorage
@@ -58,6 +79,8 @@ async function onSubmit(values) {
   } catch (e) {
     // 服务端不可达 / 5xx 已由 http 拦截器统一弹 Message，这里去重避免重复弹窗
     if (!e?.toasted) Message.error(e.message || '登录失败，请稍后重试')
+    // 登录失败后重置滑块，需重新拖拽验证
+    captchaRef.value?.resume?.()
   } finally {
     submitting.value = false
   }
@@ -70,72 +93,121 @@ function onFailed() {
 
 <template>
   <div class="login-page">
-    <div class="login-card">
-      <!-- 品牌区 -->
-      <div class="login-brand">
-        <div class="login-logo" aria-hidden="true">
-          <GalleryVerticalEnd />
+    <!-- 左上角品牌区：logo + 系统名称，横排 -->
+    <div class="login-brand">
+      <img src="/favicon.svg" alt="FMS" class="login-logo__img" />
+      <span class="login-brand__name">FMS 企业管理系统</span>
+    </div>
+
+    <!-- 右上角浮动操作区 -->
+    <div class="login-actions">
+      <Button type="ghost" size="small" class="login-action-btn" @click="toggleLang">
+        {{ lang === 'zh-CN' ? '中' : 'EN' }}
+      </Button>
+      <Button type="ghost" size="small" class="login-action-btn" @click="toggleTheme">
+        <component :is="isDark ? Sun : Moon" :size="16" />
+      </Button>
+    </div>
+
+    <!-- 左右分栏主体 -->
+    <div class="login-body">
+      <!-- 左侧占位图 -->
+      <div class="login-left">
+        <div class="login-left__inner">
+          <div class="login-left__graphic" aria-hidden="true">
+            <!-- 装饰性几何图形，后续可替换为实际图片 -->
+            <svg viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg" class="login-left__svg">
+              <defs>
+                <linearGradient id="lg1" x1="0%" y1="0%" x2="100%" y2="100%">
+                  <stop offset="0%" stop-color="var(--fms-primary)" stop-opacity="0.08" />
+                  <stop offset="100%" stop-color="var(--fms-primary)" stop-opacity="0.02" />
+                </linearGradient>
+              </defs>
+              <circle cx="120" cy="120" r="80" fill="var(--fms-primary)" opacity="0.06" />
+              <circle cx="480" cy="180" r="120" fill="var(--fms-primary)" opacity="0.04" />
+              <rect x="50" y="350" width="200" height="200" rx="30" fill="url(#lg1)" />
+              <rect x="350" y="400" width="160" height="160" rx="20" fill="var(--fms-primary)" opacity="0.04" />
+              <path d="M300 80 L420 200 L300 320 L180 200 Z" fill="var(--fms-primary)" opacity="0.05" />
+            </svg>
+          </div>
+          <p class="login-left__text">企业管理系统</p>
         </div>
-        <h1 class="login-title">登录 FMS</h1>
-        <p class="login-subtitle">企业管理系统</p>
       </div>
 
-      <!-- 会话提示条 -->
-      <div v-if="loginHint" class="login-hint" role="alert">
-        {{ loginHint }}
+      <!-- 右侧表单 -->
+      <div class="login-right">
+        <div class="login-card">
+          <!-- 表单标题 -->
+          <h1 class="login-card__title">登录</h1>
+          <p class="login-card__subtitle">欢迎回来，请输入您的账号信息</p>
+
+          <!-- 会话提示条 -->
+          <div v-if="loginHint" class="login-hint" role="alert">
+            {{ loginHint }}
+          </div>
+
+          <!-- 表单 -->
+          <Form
+            class="login-form"
+            :model="formModel"
+            :rules="formRules"
+            layout="vertical"
+            :gap="20"
+            @submit="onSubmit"
+            @submit-failed="onFailed"
+          >
+            <FormItem name="orgId" label="机构码">
+              <Input
+                id="orgId"
+                v-model="formModel.orgId"
+                placeholder="请输入机构码"
+                :disabled="submitting"
+              >
+                <template #prefix><Building2 /></template>
+              </Input>
+            </FormItem>
+
+            <FormItem name="account" label="账号">
+              <Input
+                id="account"
+                v-model="formModel.account"
+                autocomplete="username"
+                placeholder="请输入账号"
+                :disabled="submitting"
+              >
+                <template #prefix><User /></template>
+              </Input>
+            </FormItem>
+
+            <FormItem name="password" label="密码">
+              <Input
+                id="password"
+                v-model="formModel.password"
+                type="password"
+                autocomplete="current-password"
+                placeholder="请输入密码"
+                :disabled="submitting"
+              >
+                <template #prefix><KeyRound /></template>
+              </Input>
+            </FormItem>
+
+            <FormItem name="captcha">
+              <SliderCaptcha
+                ref="captchaRef"
+                v-model="formModel.captcha"
+                :disabled="submitting"
+              />
+            </FormItem>
+
+            <Button type="primary" block :loading="submitting" html-type="submit" class="login-submit">
+              登录
+            </Button>
+          </Form>
+
+          <p class="login-footer">© 2026 FMS · 企业管理系统</p>
+        </div>
       </div>
-
-      <!-- 表单 -->
-      <Form
-        class="login-form"
-        :model="formModel"
-        :rules="formRules"
-        layout="vertical"
-        @submit="onSubmit"
-        @submit-failed="onFailed"
-      >
-        <FormItem name="orgId" label="机构码">
-          <Input
-            id="orgId"
-            v-model="formModel.orgId"
-            placeholder="请输入机构码"
-            :disabled="submitting"
-          >
-            <template #prefix><Building2 /></template>
-          </Input>
-        </FormItem>
-
-        <FormItem name="account" label="账号">
-          <Input
-            id="account"
-            v-model="formModel.account"
-            autocomplete="username"
-            placeholder="请输入账号"
-            :disabled="submitting"
-          >
-            <template #prefix><User /></template>
-          </Input>
-        </FormItem>
-
-        <FormItem name="password" label="密码">
-          <Input
-            id="password"
-            v-model="formModel.password"
-            type="password"
-            autocomplete="current-password"
-            placeholder="请输入密码"
-            :disabled="submitting"
-          >
-            <template #prefix><KeyRound /></template>
-          </Input>
-        </FormItem>
-
-        <Button type="primary" block :loading="submitting" html-type="submit" class="login-submit">
-          登录
-        </Button>
-      </Form>
-
-      <p class="login-footer">© 2026 FMS · 企业管理系统</p>
     </div>
   </div>
 </template>
@@ -143,66 +215,153 @@ function onFailed() {
 <style scoped>
 .login-page {
   display: flex;
-  align-items: center;
-  justify-content: center;
+  flex-direction: column;
   min-height: 100svh;
-  padding: 24px;
   background: var(--fms-background);
   color: var(--fms-text);
-  transition:
-    background-color 200ms ease,
-    color 200ms ease;
+  transition: background-color 200ms ease, color 200ms ease;
+  position: relative;
+}
+
+/* ===== 左上角品牌区 ===== */
+.login-brand {
+  position: fixed;
+  top: 20px;
+  left: 24px;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.login-logo__img {
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
+}
+
+.login-brand__name {
+  font-size: 17px;
+  font-weight: 600;
+  line-height: 32px;
+  color: var(--fms-text);
+  white-space: nowrap;
+}
+
+/* ===== 右上角浮动操作区 ===== */
+.login-actions {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px;
+  border-radius: 999px;
+  background: var(--fms-card);
+  border: 1px solid var(--fms-border);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+}
+
+.login-action-btn {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--fms-text-secondary);
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 150ms ease, color 150ms ease;
+
+  &:hover {
+    background: var(--fms-secondary);
+    color: var(--fms-text);
+  }
+}
+
+/* ===== 左右分栏 ===== */
+.login-body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+/* ---- 左侧占位 ---- */
+.login-left {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1 1 0;
+  min-width: 0;
+  padding: 48px;
+  position: relative;
+  overflow: hidden;
+}
+
+.login-left__inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+  max-width: 480px;
+}
+
+.login-left__graphic {
+  width: 100%;
+  max-width: 400px;
+  aspect-ratio: 1;
+}
+
+.login-left__svg {
+  width: 100%;
+  height: 100%;
+}
+
+.login-left__text {
+  margin: 0;
+  font-size: 16px;
+  color: var(--fms-text-secondary);
+  letter-spacing: 2px;
+}
+
+/* ---- 右侧表单 ---- */
+.login-right {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1 1 0;
+  min-width: 0;
+  padding: 48px;
 }
 
 .login-card {
   width: 100%;
   max-width: 400px;
-  padding: 40px 36px 28px;
+  padding: 32px 36px 28px;
   background: var(--fms-card);
   border: 1px solid var(--fms-border);
   border-radius: 12px;
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
-  transition:
-    background-color 200ms ease,
-    border-color 200ms ease;
+  transition: background-color 200ms ease, border-color 200ms ease;
 }
 
-.login-brand {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 28px;
-  text-align: center;
-}
-
-.login-logo {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 48px;
-  height: 48px;
-  margin-bottom: 8px;
-  border-radius: 12px;
-  background: var(--fms-primary);
-  color: var(--fms-primary-text);
-
-  :deep(svg) {
-    width: 26px;
-    height: 26px;
-  }
-}
-
-.login-title {
-  margin: 0;
-  font-size: 24px;
+.login-card__title {
+  margin: 0 0 4px;
+  font-size: 22px;
   font-weight: 600;
-  line-height: 32px;
+  line-height: 30px;
+  color: var(--fms-text);
 }
 
-.login-subtitle {
-  margin: 0;
-  font-size: 14px;
+.login-card__subtitle {
+  margin: 0 0 24px;
+  font-size: 13px;
   color: var(--fms-text-secondary);
 }
 
@@ -222,7 +381,13 @@ function onFailed() {
 }
 
 .login-submit {
-  margin-top: 8px;
+  margin-top: 16px;
+  height: 40px;
+}
+
+/* 输入框与按钮高度一致，避免一大一小 */
+.login-form :deep(.input-wrapper) {
+  height: 40px;
   min-height: 40px;
 }
 
@@ -233,10 +398,24 @@ function onFailed() {
   text-align: center;
 }
 
-@media (max-width: 480px) {
+/* ===== 响应式：窄屏时左侧隐藏 ===== */
+@media (max-width: 768px) {
+  .login-left {
+    display: none;
+  }
+
+  .login-right {
+    padding: 24px;
+  }
+
   .login-card {
     padding: 32px 24px 24px;
   }
+
+  .login-actions {
+    top: 12px;
+    right: 12px;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -245,4 +424,4 @@ function onFailed() {
     transition: none;
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/code/fms/fms-vue/src/views/system/module-management/ModuleBasicPanel.vue b/code/fms/fms-vue/src/views/system/module-management/ModuleBasicPanel.vue
index bbfa15df..d2a85612 100644
--- a/code/fms/fms-vue/src/views/system/module-management/ModuleBasicPanel.vue
+++ b/code/fms/fms-vue/src/views/system/module-management/ModuleBasicPanel.vue
@@ -5,7 +5,7 @@
  * category 分类节点 / data 数据模块 / query 查询模块。
  */
 import { computed, ref, watch } from 'vue'
-import { Input, Select, Switch, Form, FormItem } from '@/components/ui'
+import { Input, Select, Switch, Form, FormGroup, FormItem } from '@/components/ui'
 import { buildModuleI18nKey, validateModuleCode } from '@/utils/i18n'
 
 const props = defineProps({
@@ -123,38 +123,38 @@ function onModuleTypeChange(v) {
       :columns="3"
       max-width="720px"
     >
-      <div class="mm-basic__section-title">标识与归属</div>
-      <FormItem :label="isCategory ? '分类编码' : '模块编码'" name="b_code" required>
-        <Input
-          :model-value="formData.b_code"
-          :disabled="loading"
-          @update:model-value="onCodeInput"
-        />
-      </FormItem>
-      <FormItem label="模块名称" name="b_name" required>
-        <Input
-          :model-value="formData.b_name"
-          :disabled="loading"
-          @update:model-value="(v) => setField('b_name', v)"
-        />
-      </FormItem>
-      <FormItem label="模块类型" name="b_module_type" required>
-        <Select
-          :model-value="formData.b_module_type"
-          :options="typeOptions"
-          :disabled="loading"
-          @update:model-value="onModuleTypeChange"
-        />
-      </FormItem>
-      <FormItem label="上级模块" name="b_parent_id">
-        <Input :model-value="parentName" readonly />
-      </FormItem>
-      <FormItem label="多语言键" name="b_i18n" :span="2">
-        <Input :model-value="formData.b_i18n" readonly />
-      </FormItem>
+      <FormGroup title="标识与归属">
+        <FormItem :label="isCategory ? '分类编码' : '模块编码'" name="b_code" required>
+          <Input
+            :model-value="formData.b_code"
+            :disabled="loading"
+            @update:model-value="onCodeInput"
+          />
+        </FormItem>
+        <FormItem label="模块名称" name="b_name" required>
+          <Input
+            :model-value="formData.b_name"
+            :disabled="loading"
+            @update:model-value="(v) => setField('b_name', v)"
+          />
+        </FormItem>
+        <FormItem label="模块类型" name="b_module_type" required>
+          <Select
+            :model-value="formData.b_module_type"
+            :options="typeOptions"
+            :disabled="loading"
+            @update:model-value="onModuleTypeChange"
+          />
+        </FormItem>
+        <FormItem label="上级模块" name="b_parent_id">
+          <Input :model-value="parentName" readonly />
+        </FormItem>
+        <FormItem label="多语言键" name="b_i18n" :span="2">
+          <Input :model-value="formData.b_i18n" readonly />
+        </FormItem>
+      </FormGroup>
 
-      <template v-if="isData || isQuery">
-        <div class="mm-basic__section-title">数据来源</div>
+      <FormGroup v-if="isData || isQuery" title="数据来源">
         <FormItem label="查询视图" name="b_viewtable" required>
           <Input
             :model-value="formData.b_viewtable"
@@ -196,35 +196,37 @@ function onModuleTypeChange(v) {
             @update:model-value="(v) => setField('b_delete_policy', v)"
           />
         </FormItem>
-      </template>
+      </FormGroup>
 
-      <div class="mm-basic__section-title">行为设置</div>
-      <FormItem label="排序号" name="b_xh">
-        <Input
-          :model-value="formData.b_xh"
-          type="number"
-          :disabled="loading"
-          @update:model-value="(v) => setField('b_xh', v)"
-        />
-      </FormItem>
-      <FormItem label="启用" name="b_canuse">
-        <Switch
-          :model-value="Number(formData.b_canuse) === 1"
-          :disabled="loading"
-          @update:model-value="(v) => setField('b_canuse', v ? 1 : 0)"
-        />
-      </FormItem>
+      <FormGroup title="行为设置">
+        <FormItem label="排序号" name="b_xh">
+          <Input
+            :model-value="formData.b_xh"
+            type="number"
+            :disabled="loading"
+            @update:model-value="(v) => setField('b_xh', v)"
+          />
+        </FormItem>
+        <FormItem label="启用" name="b_canuse">
+          <Switch
+            :model-value="Number(formData.b_canuse) === 1"
+            :disabled="loading"
+            @update:model-value="(v) => setField('b_canuse', v ? 1 : 0)"
+          />
+        </FormItem>
+      </FormGroup>
 
-      <div class="mm-basic__section-title">描述</div>
-      <FormItem label="描述" name="b_bz" :span="3">
-        <Input
-          :model-value="formData.b_bz"
-          type="textarea"
-          :rows="2"
-          :disabled="loading"
-          @update:model-value="(v) => setField('b_bz', v)"
-        />
-      </FormItem>
+      <FormGroup title="描述">
+        <FormItem label="描述" name="b_bz" :span="3">
+          <Input
+            :model-value="formData.b_bz"
+            type="textarea"
+            :rows="2"
+            :disabled="loading"
+            @update:model-value="(v) => setField('b_bz', v)"
+          />
+        </FormItem>
+      </FormGroup>
     </Form>
   </div>
 </template>
@@ -235,17 +237,8 @@ function onModuleTypeChange(v) {
   flex-direction: column;
 }
 
-/* 表单内部分组区块标题：占满整行，纯文字小标题（无分隔线，更轻） */
-.mm-basic__section-title {
-  grid-column: 1 / -1;
-  padding: 10px 0 6px;
-  margin-bottom: 2px;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--fms-text-secondary);
-
-  &:first-child {
-    padding-top: 0;
-  }
+/* 分组间行间距默认 12px 偏大，缩小到 8px */
+.mm-basic :deep(.fms-form-grid) {
+  row-gap: 8px;
 }
 </style>
diff --git a/code/fms/fms-vue/src/views/system/module-management/ModuleI18nPanel.vue b/code/fms/fms-vue/src/views/system/module-management/ModuleI18nPanel.vue
index 7da9f121..0f43134f 100644
--- a/code/fms/fms-vue/src/views/system/module-management/ModuleI18nPanel.vue
+++ b/code/fms/fms-vue/src/views/system/module-management/ModuleI18nPanel.vue
@@ -1,42 +1,201 @@
 <script setup>
 /**
- * 多语言面板（s_i18n）：透视展示——每行一个 b_key，每种语言一列。
- * 数据由 index.vue 维护（加载、受管键同步、保存 diff），
- * 本面板只负责编辑交互（新增/删除/编辑单元格）并 emit 更新。
+ * 多语言面板（s_i18n）：数据加载、受管键同步、透视展示、保存 diff 全部在本面板内维护。
+ * index.vue 只做两件事：
+ *   1. 加载原始 s_i18n 扁平行作为 rawRows 传入（见 loadModuleConfig）；
+ *   2. 保存时调用 buildSaveRequest() 取请求、调用 applyInsertedIds() 回写真实主键。
+ * 面板自持展示行 localRows 与保存基线 originalsFlat，不再向 index.vue 上报数据。
  */
-import { computed, nextTick, ref, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 import { Plus, Trash2 } from '@lucide/vue'
 import { Button, Input } from '@/components/ui'
 import FmsTable from '@/components/fms-table/FmsTable.vue'
 import { createTempId } from '@/utils/tempId'
+import {
+  buildModuleI18nKey,
+  buildModuleItemI18nKey,
+  consolidatePivotRows,
+  getI18nNamespace,
+} from '@/utils/i18n'
 
 const props = defineProps({
   moduleId: { type: String, required: true },
-  /** 透视行数组（由 index.vue 维护） */
-  rows: { type: Array, default: () => [] },
-  /** 语言列表（index.vue 传入，保存 diff 使用同一份） */
+  /** 当前模块草稿（含 b_code / b_module_type / b_name / b_i18n），受管键依赖它 */
+  module: { type: Object, default: null },
+  /** 字段草稿（b_field / b_name / b_i18n），受管键依赖它 */
+  fields: { type: Array, default: () => [] },
+  /** 权限草稿（b_code / b_name），受管键依赖它 */
+  powers: { type: Array, default: () => [] },
+  /** 分组草稿（b_id / b_title / b_i18n），受管键依赖它 */
+  groups: { type: Array, default: () => [] },
+  /** index.vue 加载的原始 s_i18n 扁平行（[{b_id,b_key,b_locale,b_value}]） */
+  rawRows: { type: Array, default: () => [] },
+  /** 语言列表；不传时用本面板内置默认（保存 diff 使用同一份） */
   languages: { type: Array, default: () => [] },
   loading: { type: Boolean, default: false },
 })
 
-const emit = defineEmits(['update'])
+/* ================= 语言列表（默认语言排第一） ================= */
+const DEFAULT_LANGUAGES = [
+  { code: 'zh-CN', name: '简体中文', default: true },
+  { code: 'en-US', name: 'English', default: false },
+]
+const langOptions = computed(() =>
+  props.languages.length ? props.languages : DEFAULT_LANGUAGES,
+)
+const defaultLocale = computed(() => langOptions.value[0]?.code || '')
 
-const langOptions = props.languages
+/* ================= 展示数据（本面板自持） ================= */
 const localRows = ref([])
+/** 保存 diff 基线：加载时的原始扁平行 */
+const originalsFlat = ref([])
 const searchKey = ref('')
 const activeKey = ref(null)
 const tableRef = ref(null)
 const selectedRowKeys = ref([])
 
+/* ================= 受管键收集 ================= */
+// 模块 / 字段 / 权限 / 分组的翻译键是系统自动生成的，必须始终存在：
+// 收集这些键（含默认名称），供 reconcile 补行、跟随名称、清理失效键。
+const finalI18nItems = computed(() => {
+  const module = props.module
+  if (!module) return []
+  const items = []
+  const moduleKey = module.b_i18n || buildModuleI18nKey(module.b_module_type, module.b_code)
+  if (moduleKey) {
+    items.push({
+      key: moduleKey,
+      managed: true,
+      defaultValue: module.b_name || '',
+      id: `module:${moduleKey}`,
+    })
+  }
+  for (const field of props.fields || []) {
+    const key = buildModuleItemI18nKey('field', module.b_code, field.b_field)
+    if (key) items.push({ key, managed: true, defaultValue: field.b_name || '', id: `field:${key}` })
+  }
+  for (const power of props.powers || []) {
+    const key = buildModuleItemI18nKey('power', module.b_code, power.b_code)
+    if (key) items.push({ key, managed: true, defaultValue: power.b_name || '', id: `power:${key}` })
+  }
+  // 分组标题多语言：b_i18n 为用户手填 key（空则运行时直接用标题原文，不纳入受管）
+  for (const group of props.groups || []) {
+    const key = String(group.b_i18n || '').trim()
+    if (key) items.push({ key, managed: true, defaultValue: group.b_title || '', id: `group:${group.b_id}` })
+  }
+  return items
+})
+
+/* ================= 数据转换 ================= */
+
+// 扁平记录（b_key/b_locale/b_value）→ 透视行（每行一个 key，每种语言一列）
+function buildI18nPivot(flat) {
+  const byKey = new Map()
+  for (const r of flat) {
+    if (!byKey.has(r.b_key)) byKey.set(r.b_key, [])
+    byKey.get(r.b_key).push(r)
+  }
+  const rows = []
+  for (const [key, recs] of byKey) {
+    const row = { _id: createTempId(), b_key: key, _localeIds: {} }
+    for (const r of recs) {
+      row[r.b_locale] = r.b_value
+      row._localeIds[r.b_locale] = r.b_id
+    }
+    rows.push(row)
+  }
+  return rows
+}
+
+function isEmptyI18nManaged(row, defaultLocaleCode) {
+  if (row._localeIds && Object.keys(row._localeIds).length) return false
+  for (const lang of langOptions.value) {
+    const value = row[lang.code]
+    if (value == null || value === '') continue
+    if (lang.code === defaultLocaleCode && String(value) === String(row._defaultValue ?? '')) continue
+    return false
+  }
+  return true
+}
+
+// 保证模块/字段/权限受管键始终存在：默认语言为空时自动跟随当前名称，人工翻译不被覆盖
+function reconcile() {
+  if (!props.module) return
+  const items = finalI18nItems.value
+  const rows = [...localRows.value]
+  const rowByManagedId = new Map()
+  const unclaimedByKey = new Map()
+  for (const row of rows) {
+    if (row._managedId) rowByManagedId.set(String(row._managedId), row)
+    else unclaimedByKey.set(String(row.b_key), row)
+  }
+  const currentManagedIds = new Set()
+  const defaultLocaleCode = defaultLocale.value
+
+  for (const item of items) {
+    const managedId = String(item.id || item.key)
+    currentManagedIds.add(managedId)
+    let row = rowByManagedId.get(managedId)
+    if (!row) row = unclaimedByKey.get(String(item.key))
+    if (!row && item.sourceKey) row = unclaimedByKey.get(String(item.sourceKey))
+    if (!row) {
+      row = { _id: createTempId(), b_key: item.key, _localeIds: {}, _syncInjected: true }
+      rows.push(row)
+    }
+    const previousDefault = row._defaultValue
+    const nextDefault = item.defaultValue == null ? '' : String(item.defaultValue)
+    if (
+      defaultLocaleCode &&
+      (row[defaultLocaleCode] == null ||
+        row[defaultLocaleCode] === '' ||
+        row[defaultLocaleCode] === previousDefault)
+    ) {
+      row[defaultLocaleCode] = nextDefault
+    }
+    row.b_key = String(item.key)
+    row._managedId = managedId
+    row._defaultValue = nextDefault
+    row._sortType = String(item.key).split('.', 1)[0]
+  }
+
+  // 键已失效的受管行：自动创建且无内容的直接丢弃，有翻译或来自数据库的解除保护保留
+  const keptRows = []
+  for (const row of rows) {
+    if (row._managedId && !currentManagedIds.has(String(row._managedId))) {
+      if (row._syncInjected && isEmptyI18nManaged(row, defaultLocaleCode)) continue
+      delete row._managedId
+      delete row._defaultValue
+    }
+    keptRows.push(row)
+  }
+  localRows.value = consolidatePivotRows(keptRows)
+}
+
+/* ================= 外部数据接入：watch 复制数组 ================= */
+// 原始扁平行变化（index.vue 加载/切换模块）→ 重建基线并透视
 watch(
-  () => props.rows,
-  (val) => {
-    if (val === localRows.value) return
-    localRows.value = val.map((row) => ({ ...row }))
+  () => props.rawRows,
+  (flat) => {
+    originalsFlat.value = (flat || []).map((r) => ({ ...r }))
+    localRows.value = buildI18nPivot(originalsFlat.value)
+    reconcile()
   },
   { immediate: true },
 )
 
+// 受管键变化（字段/权限改名、新增、删除，模块名/编码变化）→ 防抖补齐受管行
+let reconcileTimer = null
+watch(
+  finalI18nItems,
+  () => {
+    if (props.loading || !props.module) return
+    clearTimeout(reconcileTimer)
+    reconcileTimer = setTimeout(() => reconcile(), 300)
+  },
+)
+onBeforeUnmount(() => clearTimeout(reconcileTimer))
+
+/* ================= 编辑交互 ================= */
 function isManagedRow(row) {
   return Boolean(row && row._managedId)
 }
@@ -46,7 +205,6 @@ async function addRow() {
   const newId = createTempId()
   localRows.value = [...localRows.value, { _id: newId, b_key: '', _localeIds: {} }]
   activeKey.value = String(newId)
-  emit('update', localRows.value)
   await nextTick()
   tableRef.value?.editRow?.(String(newId), 'b_key')
 }
@@ -55,7 +213,6 @@ function removeRow(row) {
   if (isManagedRow(row)) return
   localRows.value = localRows.value.filter((r) => r !== row)
   selectedRowKeys.value = selectedRowKeys.value.filter((x) => x !== String(row._id))
-  emit('update', localRows.value)
 }
 
 const rowSelection = computed(() => ({
@@ -77,11 +234,6 @@ function batchDelete() {
   localRows.value = localRows.value.filter((r) => !delIds.has(String(r._id)))
   selectedRowKeys.value = []
   if (activeKey.value && delIds.has(String(activeKey.value))) activeKey.value = null
-  emit('update', localRows.value)
-}
-
-function onCellChange() {
-  emit('update', localRows.value)
 }
 
 const filteredRows = computed(() => {
@@ -99,7 +251,7 @@ const columns = computed(() => {
       editor: { type: 'input', disabled: (row) => isManagedRow(row) },
     },
   ]
-  for (const lang of langOptions) {
+  for (const lang of langOptions.value) {
     cols.push({
       dataIndex: lang.code,
       title: lang.name,
@@ -122,6 +274,71 @@ const columns = computed(() => {
   })
   return cols
 })
+
+/* ================= 保存（供 index.vue 调用） ================= */
+
+// 按最终草稿态生成 s_i18n 请求（与加载时的扁平基线 diff）
+function buildSaveRequest() {
+  reconcile()
+  const rows = localRows.value || []
+  const originals = new Map(
+    (originalsFlat.value || []).map((r) => [`${r.b_key}|${r.b_locale}`, r]),
+  )
+  const inserts = []
+  const updates = []
+  const deletes = []
+  // 模块命名空间：这些键属于当前模块元数据，落库写入 b_module_id 便于级联删除；其余保持 NULL
+  const MODULE_NAMESPACES = ['module', 'menu', 'field', 'power', 'group']
+  function moduleIdOf(key) {
+    return MODULE_NAMESPACES.includes(getI18nNamespace(key)) ? String(props.module?.b_id) : null
+  }
+  const seen = new Set()
+  for (const row of rows) {
+    const key = String(row.b_key || '')
+    if (!key) continue
+    for (const lang of langOptions.value) {
+      const locale = lang.code
+      const cellKey = `${key}|${locale}`
+      seen.add(cellKey)
+      const value = row[locale] == null ? '' : String(row[locale])
+      const original = originals.get(cellKey)
+      const localeId = row._localeIds?.[locale]
+      if (localeId) {
+        if (!original || String(original.b_value ?? '') !== value) {
+          updates.push({ b_id: localeId, b_key: key, b_locale: locale, b_value: value, b_module_id: moduleIdOf(key), b_canuse: 1 })
+        }
+      } else if (value !== '') {
+        inserts.push({
+          b_id: createTempId(), _rowId: row._id, _locale: locale,
+          b_key: key, b_locale: locale, b_value: value, b_module_id: moduleIdOf(key), b_canuse: 1,
+        })
+      }
+    }
+  }
+  for (const r of originalsFlat.value || []) {
+    const cellKey = `${r.b_key}|${r.b_locale}`
+    if (!seen.has(cellKey)) deletes.push({ b_id: r.b_id })
+  }
+  if (!inserts.length && !updates.length && !deletes.length) return null
+  return { table: 's_i18n', key_field: 'b_id', inserts, updates, deletes }
+}
+
+// 为新增记录回写真实主键到透视行 _localeIds，避免二次保存重复插入
+function applyInsertedIds(inserts) {
+  for (const ins of inserts || []) {
+    if (!ins._rowId || !ins._locale || ins.b_id == null) continue
+    const row = (localRows.value || []).find((r) => String(r._id) === String(ins._rowId))
+    if (row) row._localeIds[ins._locale] = String(ins.b_id)
+  }
+}
+
+// 同步字段等场景直接删除失效受管键（_managedId 为 `field:${i18nKey}` 等）
+function removeByManagedIds(ids) {
+  const set = new Set(ids.map(String))
+  localRows.value = (localRows.value || []).filter((r) => !set.has(String(r._managedId)))
+}
+
+defineExpose({ buildSaveRequest, applyInsertedIds, removeByManagedIds })
 </script>
 
 <template>
@@ -145,7 +362,6 @@ const columns = computed(() => {
         row-key="_id"
         :active-row-key="activeKey"
         @row-click="(_, row) => (activeKey = String(row._id))"
-        @change="onCellChange"
       />
     </div>
   </div>
@@ -176,4 +392,4 @@ const columns = computed(() => {
   min-height: 0;
   flex: 1;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/code/fms/fms-vue/src/views/system/module-management/components/design-editor/FormDesignEditor.vue b/code/fms/fms-vue/src/views/system/module-management/components/design-editor/FormDesignEditor.vue
index 6d39458f..cb00de35 100644
--- a/code/fms/fms-vue/src/views/system/module-management/components/design-editor/FormDesignEditor.vue
+++ b/code/fms/fms-vue/src/views/system/module-management/components/design-editor/FormDesignEditor.vue
@@ -32,6 +32,7 @@ import {
   Checkbox,
   DatePicker,
   Form,
+  FormGroup,
   FormItem,
   Modal,
 } from '@/components/ui'
@@ -48,6 +49,7 @@ import {
 import FieldLibrary from './common/FieldLibrary.vue'
 import EditDataView from './common/EditDataView.vue'
 import FormInspector from './form/FormInspector.vue'
+import FormPreview from './form/FormPreview.vue'
 import {
   spanOf,
   collectLineIndexes,
@@ -110,15 +112,31 @@ const dragOverSection = ref(null)
 // 分组拖拽状态：同字段拖拽的 dragPayload，用于拖拽时其他分区变淡
 const sectionDragging = ref(false)
 
-/* ================= 分组宽度（外层 48 宫格，前端暂存不持久化） =================
+/* ================= 分组宽度（外层 48 宫格，落库 s_field_group.b_colspan） =================
  * 分组像字段一样按占格数流式排布：默认 48（独占一行），调小后自动并排换行；
- * 分组内部字段仍是独立 24 宫格 */
+ * 分组内部字段仍是独立 24 宫格。
+ * sectionCols 为内存缓存：加载时由 group.b_colspan 回填，修改时同步写回 group 并 emit，
+ * 由父级 diff 落库；未分组无真实分组记录，其宽度仅前端暂存。 */
 const GROUP_GRID = 48
 // 分组设置弹窗的常用档位：分组宽度（48 宫格）与新建字段宽度（24 宫格）
 const GROUP_STEP_COLS = [48, 24, 16, 12]
 const GROUP_STEP_FIELDS = [24, 12, 8, 6]
 const sectionCols = reactive({}) // key(g-xxx/ungrouped) → 占格数
 
+// 分组数据变化（加载/新增/删除/其他编辑）时回填 sectionCols，保证缓存与库值一致
+watch(
+  () => props.groups,
+  (groups) => {
+    for (const group of groups || []) {
+      const n = Number(group?.b_colspan)
+      const key = `g-${group.b_id}`
+      sectionCols[key] =
+        Number.isFinite(n) && n > 0 ? Math.min(Math.max(Math.round(n), 1), GROUP_GRID) : GROUP_GRID
+    }
+  },
+  { immediate: true },
+)
+
 function colsOf(key) {
   return sectionCols[key] ?? GROUP_GRID
 }
@@ -127,6 +145,14 @@ function setSectionCols(key, val) {
   const n = Math.round(Number(val))
   sectionCols[key] =
     Number.isFinite(n) && n > 0 ? Math.min(Math.max(n, 1), GROUP_GRID) : GROUP_GRID
+  // 同步写回分组对象（b_colspan），交由父级进入待保存状态；未分组无持久化对象
+  if (key !== 'ungrouped') {
+    const gid = key.slice(2)
+    const updated = (props.groups || []).map((g) =>
+      String(g.b_id) === gid ? { ...g, b_colspan: sectionCols[key] } : g,
+    )
+    emit('updateGroups', updated)
+  }
 }
 
 /* 分组设置弹窗：正在设置的分区 + 草稿值 */
@@ -137,9 +163,8 @@ const sectionSettingsOpen = computed({
 })
 const sectionSettings = reactive({ cols: GROUP_GRID, fieldCols: 24 })
 
-/* 表单预览弹窗（主表）：model 仅为 Form 组件提供数据上下文，预览不绑定真实值 */
+/* 表单预览弹窗 */
 const previewOpen = ref(false)
-const previewModel = reactive({})
 
 function openSectionSettings(section) {
   sectionSettingsKey.value = section.key
@@ -511,15 +536,19 @@ function addGroup() {
     b_xh: nextGroupXh(),
     b_canuse: 1,
     b_layout_direction: 'vertical',
+    b_colspan: GROUP_GRID,
   }
   emit('updateGroups', [...(props.groups || []), newGroup])
   const key = `g-${newGroup.b_id}`
   editingGroupKey.value = key
   groupTitleDraft.value = ''
+  // 双重 nextTick：第一次等父组件更新 props.groups，第二次等新分区的 Input 组件渲染到 DOM
   nextTick(() => {
-    document
-      .querySelector(`.mm-fdesign__section[data-section-key="${key}"] .mm-fdesign__section-edit`)
-      ?.focus?.()
+    nextTick(() => {
+      const el = sectionEditInput.value
+      if (!el) return
+      el.focus({ cursor: 'all' })
+    })
   })
 }
 
@@ -1760,95 +1789,21 @@ onBeforeUnmount(() => {
     </Modal>
 
     <!-- ================= 表单预览 ================= -->
+    <!-- 48 宫格 + 分组并排需要足够展示宽度；760px 下两组各占半行会挤成不可读，
+         加宽默认值并允许拖拽调整（防溢出由 Form 的弹性 gap 兜底） -->
     <Modal
       v-model:open="previewOpen"
       title="表单预览"
-      width="760"
-      :resizable="false"
+      width="960"
       :fullscreen="false"
       :footer="false"
     >
-      <Form
-        :model="previewModel"
-        layout="vertical"
-        :span-columns="24"
-        class="mm-fdesign__preview-form"
-      >
-        <div class="mm-fdesign__preview">
-          <template v-if="canvasSections.length">
-            <div
-              v-for="section in canvasSections"
-              :key="section.key"
-              class="mm-fdesign__preview-section"
-              :style="{ gridColumn: `span ${section.cols}` }"
-            >
-              <div
-                v-if="section.title && section.group"
-                class="mm-fdesign__preview-title"
-              >{{ section.title }}</div>
-              <div class="mm-fdesign__preview-grid">
-                <FormItem
-                  v-for="row in section.rows"
-                  :key="row.b_id"
-                  :name="String(row.b_field_id)"
-                  :label="fieldName(row)"
-                  :required="Number(row.b_required) === 1"
-                  :span="spanOf(row)"
-                >
-                  <Input
-                    v-if="fieldType(row) === 'input'"
-                    :placeholder="placeholderOf(row)"
-                    :disabled="Number(row.b_disabled) === 1"
-                    :readonly="Number(row.b_readonly) === 1"
-                  />
-                  <Input
-                    v-else-if="fieldType(row) === 'textarea'"
-                    type="textarea"
-                    :rows="2"
-                    :placeholder="placeholderOf(row)"
-                    :disabled="Number(row.b_disabled) === 1"
-                    :readonly="Number(row.b_readonly) === 1"
-                  />
-                  <Select
-                    v-else-if="fieldType(row) === 'select'"
-                    :placeholder="placeholderOf(row)"
-                    :options="[]"
-                    :disabled="Number(row.b_disabled) === 1"
-                  />
-                  <Checkbox
-                    v-else-if="fieldType(row) === 'checkbox'"
-                    :disabled="Number(row.b_disabled) === 1"
-                  >{{ fieldOf(row)?.b_default_value || '选项' }}</Checkbox>
-                  <DatePicker
-                    v-else-if="fieldType(row) === 'date'"
-                    :disabled="Number(row.b_disabled) === 1"
-                  />
-                  <DatePicker
-                    v-else-if="fieldType(row) === 'datetime'"
-                    format="YYYY-MM-DD HH:mm"
-                    :disabled="Number(row.b_disabled) === 1"
-                  />
-                  <Input
-                    v-else-if="fieldType(row) === 'number' || fieldType(row) === 'money'"
-                    type="number"
-                    :placeholder="placeholderOf(row)"
-                    :disabled="Number(row.b_disabled) === 1"
-                    :readonly="Number(row.b_readonly) === 1"
-                  />
-                  <Input
-                    v-else
-                    type="text"
-                    :placeholder="placeholderOf(row)"
-                    :disabled="Number(row.b_disabled) === 1"
-                    :readonly="Number(row.b_readonly) === 1"
-                  />
-                </FormItem>
-              </div>
-            </div>
-          </template>
-          <div v-else class="mm-fdesign__preview-empty">暂无字段</div>
-        </div>
-      </Form>
+      <FormPreview
+        :groups="props.groups"
+        :rows="localEdit"
+        :fields="props.fields"
+        :cols-map="sectionCols"
+      />
     </Modal>
   </div>
 </template>
@@ -2765,52 +2720,4 @@ textarea.mm-fdesign__ctrl {
 .mm-fdesign__section-settings-input {
   width: 72px;
 }
-
-/* ---- 表单预览（主表）：运行时形态，用 Form/FormItem 渲染 ----
- * 外层 48 宫格与设计画布一致，分组按各自 cols 占格流式排布；
- * 分组内层 24 宫格由 FormItem 的 span 跨列实现。
- * 间距层次：分组间 > item 间，无边框时靠间距区分分组边界 */
-.mm-fdesign__preview {
-  display: grid;
-  grid-template-columns: repeat(48, minmax(0, 1fr));
-  gap: 16px 12px;
-  align-items: start;
-}
-
-.mm-fdesign__preview-section {
-  min-width: 0;
-  padding: 0;
-}
-
-.mm-fdesign__preview-title {
-  margin-bottom: 8px;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--fms-text);
-}
-
-.mm-fdesign__preview-grid {
-  display: grid;
-  grid-template-columns: repeat(24, minmax(0, 1fr));
-  gap: 8px 10px;
-  align-items: start;
-}
-
-/* Form 上下文：预览只关心布局与控件，不渲染提交行为相关 UI */
-.mm-fdesign__preview-form {
-  width: 100%;
-}
-
-/* 预览内 FormItem 纵向间距归零，由 grid gap 统一控制 */
-.mm-fdesign__preview-grid :deep(.fms-form-item) {
-  margin-bottom: 0;
-}
-
-.mm-fdesign__preview-empty {
-  grid-column: 1 / -1;
-  padding: 40px 0;
-  text-align: center;
-  color: var(--fms-text-secondary);
-  font-size: 13px;
-}
 </style>
diff --git a/code/fms/fms-vue/src/views/system/module-management/components/design-editor/common/useStructureEditing.js b/code/fms/fms-vue/src/views/system/module-management/components/design-editor/common/useStructureEditing.js
index 266b5a47..9144eee5 100644
--- a/code/fms/fms-vue/src/views/system/module-management/components/design-editor/common/useStructureEditing.js
+++ b/code/fms/fms-vue/src/views/system/module-management/components/design-editor/common/useStructureEditing.js
@@ -523,6 +523,7 @@ export function useStructureEditing({
       b_title: '',
       b_xh: nextGroupXh(),
       b_canuse: 1,
+      b_colspan: 48,
     }
     emitGroupsRenumbered([...(getGroups() || []), newGroup])
     focusNewBandTitle(newGroup.b_id)
@@ -537,6 +538,7 @@ export function useStructureEditing({
       b_title: '',
       b_xh: nextGroupXh(),
       b_canuse: 1,
+      b_colspan: 48,
     }
     emitGroupsRenumbered([...(getGroups() || []), newGroup])
     focusNewBandTitle(newGroup.b_id)
diff --git a/code/fms/fms-vue/src/views/system/module-management/components/design-editor/form/FormPreview.vue b/code/fms/fms-vue/src/views/system/module-management/components/design-editor/form/FormPreview.vue
new file mode 100644
index 00000000..ec740d39
--- /dev/null
+++ b/code/fms/fms-vue/src/views/system/module-management/components/design-editor/form/FormPreview.vue
@@ -0,0 +1,157 @@
+<script setup>
+/**
+ * 表单运行时预览：把「分组 + 编辑配置行」渲染为运行时表单形态。
+ * 接收原始设计数据（s_field_group / s_field_edit / s_field），
+ * 内部自行推导分组结构与字段渲染，用 Form/FormGroup/FormItem 输出。
+ * 纯展示（mock 值），无编辑交互；未来运行时表单引擎可复用同一渲染结构。
+ */
+import { computed } from 'vue'
+import {
+  Checkbox,
+  DatePicker,
+  Form,
+  FormGroup,
+  FormItem,
+  Input,
+  Select,
+} from '@/components/ui'
+import { useFieldLookup } from '../common/useStructureEditing'
+import { spanOf } from './useFormGrid'
+
+const props = defineProps({
+  /** 分组扁平数组（s_field_group） */
+  groups: { type: Array, default: () => [] },
+  /** 表单编辑配置行（s_field_edit，含 b_group_id / b_colspan / b_required 等） */
+  rows: { type: Array, default: () => [] },
+  /** 字段定义（s_field，用于取名称/类型/默认值） */
+  fields: { type: Array, default: () => [] },
+  /** 空态文案 */
+  emptyText: { type: String, default: '暂无字段' },
+  /** 分组宽度映射（48 宫格占格数）：key(g-xxx/ungrouped) → cols，默认 48 */
+  colsMap: { type: Object, default: () => ({}) },
+})
+
+/* ================= 字段查找 ================= */
+const { fieldOf, fieldName } = useFieldLookup(() => props.fields)
+
+function fieldType(row) {
+  return fieldOf(row)?.b_type || 'input'
+}
+
+/* ================= 分组结构推导 ================= */
+// 分组按 b_xh 排序；行按 b_group_id 归组（未分组行垫底，仅在非空时展示）。
+// 运行时形态分组占满整行（span 48），与设计画布 48 宫格一致。
+const sections = computed(() => {
+  const byGroup = new Map()
+  const sortedRows = [...props.rows].sort((a, b) => (a.b_xh || 0) - (b.b_xh || 0))
+  for (const row of sortedRows) {
+    const gid = row.b_group_id != null ? String(row.b_group_id) : ''
+    if (!byGroup.has(gid)) byGroup.set(gid, [])
+    byGroup.get(gid).push(row)
+  }
+
+  const built = []
+  const sortedGroups = [...props.groups].sort((a, b) => (a.b_xh || 0) - (b.b_xh || 0))
+  for (const group of sortedGroups) {
+    const gid = String(group.b_id)
+    const rows = byGroup.get(gid) || []
+    if (!rows.length) continue // 空分组不在预览占位
+    built.push({ key: `g-${gid}`, title: (group.b_title || '').trim(), group, rows })
+  }
+
+  const ungrouped = byGroup.get('') || []
+  if (ungrouped.length) built.push({ key: 'ungrouped', title: '未分组', group: null, rows: ungrouped })
+  return built
+})
+
+const hasAnyField = computed(() => (props.rows || []).length > 0)
+</script>
+
+<template>
+  <Form
+    :model="{}"
+    layout="vertical"
+    :columns="48"
+    :gap="{ row: 20, col: 12 }"
+  >
+    <template v-if="hasAnyField">
+      <FormGroup
+        v-for="section in sections"
+        :key="section.key"
+        :title="section.group ? section.title : ''"
+        :span="colsMap[section.key] || 48"
+        :columns="24"
+        :gap="{ row: 12, col: 16 }"
+      >
+        <FormItem
+          v-for="row in section.rows"
+          :key="row.b_id"
+          :name="String(row.b_field_id)"
+          :label="fieldName(row)"
+          :required="Number(row.b_required) === 1"
+          :span="spanOf(row)"
+        >
+          <Input
+            v-if="fieldType(row) === 'input'"
+            :placeholder="row.b_placeholder"
+            :disabled="Number(row.b_disabled) === 1"
+            :readonly="Number(row.b_readonly) === 1"
+          />
+          <Input
+            v-else-if="fieldType(row) === 'textarea'"
+            type="textarea"
+            :rows="2"
+            :placeholder="row.b_placeholder"
+            :disabled="Number(row.b_disabled) === 1"
+            :readonly="Number(row.b_readonly) === 1"
+          />
+          <Select
+            v-else-if="fieldType(row) === 'select'"
+            :placeholder="row.b_placeholder"
+            :options="[]"
+            :disabled="Number(row.b_disabled) === 1"
+          />
+          <Checkbox
+            v-else-if="fieldType(row) === 'checkbox'"
+            :disabled="Number(row.b_disabled) === 1"
+          >{{ fieldOf(row)?.b_default_value || '选项' }}</Checkbox>
+          <DatePicker
+            v-else-if="fieldType(row) === 'date'"
+            :disabled="Number(row.b_disabled) === 1"
+          />
+          <DatePicker
+            v-else-if="fieldType(row) === 'datetime'"
+            format="YYYY-MM-DD HH:mm"
+            :disabled="Number(row.b_disabled) === 1"
+          />
+          <Input
+            v-else-if="fieldType(row) === 'number' || fieldType(row) === 'money'"
+            type="number"
+            :placeholder="row.b_placeholder"
+            :disabled="Number(row.b_disabled) === 1"
+            :readonly="Number(row.b_readonly) === 1"
+          />
+          <Input
+            v-else
+            type="text"
+            :placeholder="row.b_placeholder"
+            :disabled="Number(row.b_disabled) === 1"
+            :readonly="Number(row.b_readonly) === 1"
+          />
+        </FormItem>
+      </FormGroup>
+    </template>
+    <div v-else class="fpreview__empty">{{ emptyText }}</div>
+  </Form>
+</template>
+
+<style scoped lang="scss">
+/* 空态占位：跨满 Form 宫格整行 */
+.fpreview__empty {
+  grid-column: 1 / -1;
+  padding: 40px 0;
+  text-align: center;
+  color: var(--fms-text-secondary);
+  font-size: 13px;
+}
+</style>
\ No newline at end of file
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 4999be8f..2e5da641 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
@@ -4,9 +4,11 @@
  * 模块配置：左侧模块树 + 右侧分节面板（基础/字段/列表/编辑/查询/自动编码/权限/多语言）。
  * 数据直接经通用 API（loadDataApi / saveObjectApi / nextIdApi / describeApi）读写元数据表。
  * 模块树 / 草稿加载与脏检查 / 保存编排逻辑直接内联在下方；确认弹窗状态机仅本页使用。
+ * 多语言面板（i18n）数据由 ModuleI18nPanel 自持 —— 本文件只加载原始扁平行（rawI18nRows）传入，
+ * 保存时调用面板的 buildSaveRequest / applyInsertedIds。
  * 设计器共用逻辑在 components/useStructureEditing.js，本文件不包含。
  */
-import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import { useHotkeys } from '@/composables/useHotkeys'
 import {
   Plus,
@@ -37,13 +39,11 @@ import {
   Message,
 } from '@/components/ui'
 import { loadDataApi, saveObjectApi, nextIdApi, describeApi } from '@/services/api'
-import { buildTree, sortTree } from '@/utils/tree'
+import { buildTree, sortTree, findTreeNode, collectAllKeys, expandAncestors, filterTreeByText, insertTreeNode, removeTreeNode } from '@/utils/tree'
 import {
   buildModuleI18nKey,
   buildModuleItemI18nKey,
   syncModuleItemI18nKeys,
-  consolidatePivotRows,
-  getI18nNamespace,
 } from '@/utils/i18n'
 import { createTempId } from '@/utils/tempId'
 import {
@@ -81,12 +81,15 @@ const drafts = ref(null)
 const activeSection = ref('basic')
 const basicPanelRef = ref(null)
 const autoCodePanelRef = ref(null)
+const i18nPanelRef = ref(null)
+/** i18n 原始扁平行（[{b_id,b_key,b_locale,b_value}]），加载后传给 ModuleI18nPanel 自持处理 */
+const rawI18nRows = ref([])
 // 新建模块时跳过 watch(moduleSelectedId) 的自动加载；非响应式 holder，跨 composable 共享
 const skipModuleLoad = { value: false }
 
 /* ================= 派生状态（index.vue 组装） ================= */
 const selectedModule = computed(() =>
-  moduleSelectedId.value ? findModuleNode(moduleTreeData.value, moduleSelectedId.value) : null,
+  moduleSelectedId.value ? findTreeNode(moduleTreeData.value, moduleSelectedId.value) : null,
 )
 
 const busy = computed(() => configLoading.value || configSaving.value || configSyncing.value)
@@ -98,214 +101,16 @@ const moduleTypeLabel = computed(() => {
 
 const parentModuleName = computed(() => {
   if (!selectedModule.value?.b_parent_id) return ''
-  return findModuleNode(moduleTreeData.value, selectedModule.value.b_parent_id)?.b_name || ''
+  return findTreeNode(moduleTreeData.value, selectedModule.value.b_parent_id)?.b_name || ''
 })
 
 const moduleType = computed(() => selectedModule.value?.b_module_type || null)
 const isDataModule = computed(() => moduleType.value === 'data')
 const isQueryModule = computed(() => moduleType.value === 'query')
 
-/* ================= 编辑方式 / 导航 / i18n 展示（面板编排） ================= */
+/* ================= 编辑方式 / 导航（面板编排） ================= */
 const editMode = computed(() => drafts.value?.module?.b_edit_mode || 'form')
 
-const finalI18nItems = computed(() => {
-  const module = drafts.value?.module
-  if (!module) return []
-  const items = []
-  const moduleKey = module.b_i18n || buildModuleI18nKey(module.b_module_type, module.b_code)
-  if (moduleKey) {
-    items.push({
-      key: moduleKey,
-      managed: true,
-      defaultValue: module.b_name || '',
-      id: `module:${moduleKey}`,
-    })
-  }
-  for (const field of drafts.value?.fields || []) {
-    const key = buildModuleItemI18nKey('field', module.b_code, field.b_field)
-    if (key) items.push({ key, managed: true, defaultValue: field.b_name || '', id: `field:${key}` })
-  }
-  for (const power of drafts.value?.powers || []) {
-    const key = buildModuleItemI18nKey('power', module.b_code, power.b_code)
-    if (key) items.push({ key, managed: true, defaultValue: power.b_name || '', id: `power:${key}` })
-  }
-  // 分组标题多语言：b_i18n 为用户手填 key（空则运行时直接用标题原文，不纳入受管）
-  for (const group of drafts.value?.groups || []) {
-    const key = String(group.b_i18n || '').trim()
-    if (key) items.push({ key, managed: true, defaultValue: group.b_title || '', id: `group:${group.b_id}` })
-  }
-  return items
-})
-
-// 前端默认语言列表（默认语言排第一）；与面板共用同一份，保证保存 diff 与展示一致
-const I18N_LANGUAGES = [
-  { code: 'zh-CN', name: '简体中文', default: true },
-  { code: 'en-US', name: 'English', default: false },
-]
-
-/* ================= i18n 数据维护（多语言面板数据由 index.vue 持有） ================= */
-
-// 扁平记录（b_key/b_locale/b_value）→ 透视行（每行一个 key，每种语言一列）
-function buildI18nPivot(flat) {
-  const byKey = new Map()
-  for (const r of flat) {
-    if (!byKey.has(r.b_key)) byKey.set(r.b_key, [])
-    byKey.get(r.b_key).push(r)
-  }
-  const rows = []
-  for (const [key, recs] of byKey) {
-    const row = { _id: createTempId(), b_key: key, _localeIds: {} }
-    for (const r of recs) {
-      row[r.b_locale] = r.b_value
-      row._localeIds[r.b_locale] = r.b_id
-    }
-    rows.push(row)
-  }
-  return rows
-}
-
-function isI18nManaged(row) {
-  return Boolean(row && row._managedId)
-}
-
-function isEmptyI18nManaged(row, defaultLocale) {
-  if (row._localeIds && Object.keys(row._localeIds).length) return false
-  for (const lang of I18N_LANGUAGES) {
-    const value = row[lang.code]
-    if (value == null || value === '') continue
-    if (lang.code === defaultLocale && String(value) === String(row._defaultValue ?? '')) continue
-    return false
-  }
-  return true
-}
-
-// 保证模块/字段/权限受管键始终存在：默认语言为空时自动跟随当前名称，人工翻译不被覆盖
-function reconcileI18nRows() {
-  if (!drafts.value) return
-  const items = finalI18nItems.value
-  const rows = [...drafts.value.i18n]
-  const rowByManagedId = new Map()
-  const unclaimedByKey = new Map()
-  for (const row of rows) {
-    if (row._managedId) rowByManagedId.set(String(row._managedId), row)
-    else unclaimedByKey.set(String(row.b_key), row)
-  }
-  const currentManagedIds = new Set()
-  const defaultLocale = I18N_LANGUAGES[0]?.code || ''
-
-  for (const item of items) {
-    const managedId = String(item.id || item.key)
-    currentManagedIds.add(managedId)
-    let row = rowByManagedId.get(managedId)
-    if (!row) row = unclaimedByKey.get(String(item.key))
-    if (!row && item.sourceKey) row = unclaimedByKey.get(String(item.sourceKey))
-    if (!row) {
-      row = { _id: createTempId(), b_key: item.key, _localeIds: {}, _syncInjected: true }
-      rows.push(row)
-    }
-    const previousDefault = row._defaultValue
-    const nextDefault = item.defaultValue == null ? '' : String(item.defaultValue)
-    if (
-      defaultLocale &&
-      (row[defaultLocale] == null ||
-        row[defaultLocale] === '' ||
-        row[defaultLocale] === previousDefault)
-    ) {
-      row[defaultLocale] = nextDefault
-    }
-    row.b_key = String(item.key)
-    row._managedId = managedId
-    row._defaultValue = nextDefault
-    row._sortType = String(item.key).split('.', 1)[0]
-  }
-
-  // 键已失效的受管行：自动创建且无内容的直接丢弃，有翻译或来自数据库的解除保护保留
-  const keptRows = []
-  for (const row of rows) {
-    if (row._managedId && !currentManagedIds.has(String(row._managedId))) {
-      if (row._syncInjected && isEmptyI18nManaged(row, defaultLocale)) continue
-      delete row._managedId
-      delete row._defaultValue
-    }
-    keptRows.push(row)
-  }
-  drafts.value.i18n = consolidatePivotRows(keptRows)
-}
-
-// 保存：按最终草稿态生成 s_i18n 请求（与加载时的扁平基线 diff）
-function buildI18nSaveRequest() {
-  reconcileI18nRows()
-  const rows = drafts.value?.i18n || []
-  const originals = new Map(
-    (originals.value?.i18n || []).map((r) => [`${r.b_key}|${r.b_locale}`, r]),
-  )
-  const inserts = []
-  const updates = []
-  const deletes = []
-  // 模块命名空间：这些键属于当前模块元数据，落库写入 b_module_id 便于级联删除；其余保持 NULL
-  const MODULE_NAMESPACES = ['module', 'menu', 'field', 'power', 'group']
-  function moduleIdOf(key) {
-    return MODULE_NAMESPACES.includes(getI18nNamespace(key)) ? String(selectedModule.value?.b_id) : null
-  }
-  const seen = new Set()
-  for (const row of rows) {
-    const key = String(row.b_key || '')
-    if (!key) continue
-    for (const lang of I18N_LANGUAGES) {
-      const locale = lang.code
-      const cellKey = `${key}|${locale}`
-      seen.add(cellKey)
-      const value = row[locale] == null ? '' : String(row[locale])
-      const original = originals.get(cellKey)
-      const localeId = row._localeIds?.[locale]
-      if (localeId) {
-        if (!original || String(original.b_value ?? '') !== value) {
-          updates.push({ b_id: localeId, b_key: key, b_locale: locale, b_value: value, b_module_id: moduleIdOf(key), b_canuse: 1 })
-        }
-      } else if (value !== '') {
-        inserts.push({
-          b_id: createTempId(), _rowId: row._id, _locale: locale,
-          b_key: key, b_locale: locale, b_value: value, b_module_id: moduleIdOf(key), b_canuse: 1,
-        })
-      }
-    }
-  }
-  for (const r of originals.value?.i18n || []) {
-    const cellKey = `${r.b_key}|${r.b_locale}`
-    if (!seen.has(cellKey)) deletes.push({ b_id: r.b_id })
-  }
-  if (!inserts.length && !updates.length && !deletes.length) return null
-  return { table: 's_i18n', key_field: 'b_id', inserts, updates, deletes }
-}
-
-// 为新增记录回写真实主键到透视行 _localeIds，避免二次保存重复插入
-function applyI18nInsertedIds(inserts) {
-  for (const ins of inserts || []) {
-    if (!ins._rowId || !ins._locale || ins.b_id == null) continue
-    const row = (drafts.value?.i18n || []).find((r) => String(r._id) === String(ins._rowId))
-    if (row) row._localeIds[ins._locale] = String(ins.b_id)
-  }
-}
-
-// 同步字段时删除失效受管键（_managedId 为 `field:${i18nKey}` 等，见 finalI18nItems）
-function removeI18nByManagedIds(ids) {
-  if (!drafts.value) return
-  const set = new Set(ids.map(String))
-  drafts.value.i18n = (drafts.value.i18n || []).filter((r) => !set.has(String(r._managedId)))
-}
-
-// 字段/权限草稿变化（改名、编码输入）时防抖补齐受管行；加载中不处理（load 完成后自行 reconcile）
-let i18nReconcileTimer = null
-watch(
-  finalI18nItems,
-  () => {
-    if (configLoading.value || !drafts.value) return
-    clearTimeout(i18nReconcileTimer)
-    i18nReconcileTimer = setTimeout(() => reconcileI18nRows(), 300)
-  },
-)
-onBeforeUnmount(() => clearTimeout(i18nReconcileTimer))
-
 /* 右侧分组配置导航：概览 / 数据结构 / 界面配置 / 业务能力 / 高级设置。
    每个导航项唯一激活（activeSection）。 */
 const configGroups = computed(() => {
@@ -461,13 +266,13 @@ async function saveModule() {
       }
     }
 
-    // i18n 数据独立保存于 s_i18n：先补齐受管键，再按基线 diff 生成请求
-    const i18nReq = buildI18nSaveRequest()
+    // i18n 数据独立保存于 s_i18n：由面板按基线 diff 生成请求
+    const i18nReq = i18nPanelRef.value?.buildSaveRequest?.()
     if (i18nReq) {
-      // 为新增的多语言记录分配真实主键，并回写草稿，避免二次保存重复插入
+      // 为新增的多语言记录分配真实主键，并回写面板透视行，避免二次保存重复插入
       if (i18nReq.inserts?.length) {
         await allocateTemporaryIds([i18nReq.inserts])
-        applyI18nInsertedIds(i18nReq.inserts)
+        i18nPanelRef.value?.applyInsertedIds?.(i18nReq.inserts)
       }
       saveReqs.push(i18nReq)
     }
@@ -480,7 +285,7 @@ async function saveModule() {
 
     unsavedModuleIds.delete(moduleId)
     // 更新树节点显示（名称/编码可能变化）
-    const node = findModuleNode(moduleTreeData.value, moduleId)
+    const node = findTreeNode(moduleTreeData.value, moduleId)
     if (node) Object.assign(node, cloneData(moduleData))
     // 保存后重新加载：以数据库落库结果为准刷新草稿与各面板，
     // 临时 id → 真实 id 也由本次重载自然回灌，无需本地换引用。
@@ -526,50 +331,8 @@ async function onConfirmOk() {
 
 /* ================= 模块树 ================= */
 
-/* ---- 树纯函数 ---- */
-
-/** 递归在树中查找指定 id 的节点 */
-function findModuleNode(nodes, id) {
-  for (const node of nodes) {
-    if (String(node.b_id) === String(id)) return node
-    if (node.children) {
-      const found = findModuleNode(node.children, id)
-      if (found) return found
-    }
-  }
-  return null
-}
-
-/** 递归收集所有节点 key（搜索时展开全部用） */
-function collectAllKeys(nodes) {
-  const keys = []
-  const walk = (list) => {
-    for (const node of list) {
-      keys.push(String(node.b_id))
-      if (node.children) walk(node.children)
-    }
-  }
-  walk(nodes)
-  return keys
-}
-
-/** 从根到目标节点的祖先路径（新建节点时展开，保证可见） */
-function expandAncestors(nodes, id) {
-  const keys = []
-  const walk = (list, ancestors) => {
-    for (const node of list) {
-      const key = String(node.b_id)
-      if (key === id) {
-        keys.push(...ancestors)
-        return true
-      }
-      if (node.children && walk(node.children, [...ancestors, key])) return true
-    }
-    return false
-  }
-  walk(nodes, [])
-  return keys
-}
+/* 树通用纯函数（查找/收集 key/祖先路径/过滤/插入/移除）已下沉到 @/utils/tree，
+   本文件只保留模块特有的树加工（分类节点标记 + 图标）。 */
 
 /** 分类节点标记为非叶子 + 附加图标 */
 const moduleTypeIconMap = {
@@ -588,52 +351,6 @@ function markCategoryNonLeaf(nodes) {
   return nodes
 }
 
-/** 按名称/编码过滤树（命中节点保留子树） */
-function filterTree(nodes, keyword) {
-  const kw = String(keyword || '').trim().toLowerCase()
-  if (!kw) return nodes
-  const result = []
-  for (const node of nodes) {
-    const hit =
-      String(node.b_name || '').toLowerCase().includes(kw) ||
-      String(node.b_code || '').toLowerCase().includes(kw)
-    const children = node.children ? filterTree(node.children, kw) : undefined
-    if (hit || children?.length) {
-      result.push({ ...node, children })
-    }
-  }
-  return result
-}
-
-/** 插入节点到树（顶级或指定父级下，就地排序） */
-function insertModuleNode(nodes, node) {
-  if (node.b_parent_id == null) {
-    nodes.push(node)
-    sortTree(nodes)
-    return
-  }
-  for (const n of nodes) {
-    if (String(n.b_id) === String(node.b_parent_id)) {
-      n.children = n.children || []
-      n.children.push(node)
-      sortTree(n.children)
-      return
-    }
-    if (n.children) insertModuleNode(n.children, node)
-  }
-}
-
-/** 从树中移除指定 id 的节点 */
-function removeModuleNode(nodes, id) {
-  for (let i = 0; i < nodes.length; i++) {
-    if (String(nodes[i].b_id) === String(id)) {
-      nodes.splice(i, 1)
-      return
-    }
-    if (nodes[i].children) removeModuleNode(nodes[i].children, id)
-  }
-}
-
 /* ---- 树加载 / 新增 / 删除 ---- */
 
 // 搜索时展开全部（保证命中节点可见），清空时收起
@@ -641,7 +358,7 @@ watch(moduleKeyword, (kw) => {
   moduleExpandedKeys.value = kw.trim() ? collectAllKeys(moduleTreeData.value) : []
 })
 
-const filteredModuleTree = computed(() => filterTree(moduleTreeData.value, moduleKeyword.value))
+const filteredModuleTree = computed(() => filterTreeByText(moduleTreeData.value, moduleKeyword.value))
 
 // 是否存在「已保存」的子模块（未保存草稿子树不算，可随父一并移除）
 function hasSavedModuleDescendant(node) {
@@ -720,14 +437,14 @@ async function addModule(parentId, moduleType) {
     isLeaf: moduleType === 'category' ? false : undefined,
   }
   // 插入树并选中（跳过 watch 的自动加载，直接用空草稿）
-  insertModuleNode(moduleTreeData.value, newModule)
+  insertTreeNode(moduleTreeData.value, newModule, { sort: sortTree })
   // 展开祖先路径，保证新建节点在收起的树中可见
   const ancestors = expandAncestors(moduleTreeData.value, newId)
   if (ancestors.length) {
     moduleExpandedKeys.value = [...new Set([...moduleExpandedKeys.value, ...ancestors])]
   }
   // 单独设置树节点图标（不进入 drafts，避免污染保存数据）
-  const treeNode = findModuleNode(moduleTreeData.value, newId)
+  const treeNode = findTreeNode(moduleTreeData.value, newId)
   if (treeNode) treeNode.icon = moduleTypeIconMap[moduleType] || null
   unsavedModuleIds.add(newId)
   skipModuleLoad.value = true
@@ -744,18 +461,19 @@ async function addModule(parentId, moduleType) {
     autoCode: [],
     powers: [],
   })
+  rawI18nRows.value = []
   originals.value = cloneData(drafts.value)
   loadedModuleId.value = newId
 }
 
 async function deleteModule(id) {
-  const module = id != null ? findModuleNode(moduleTreeData.value, id) : selectedModule.value
+  const module = id != null ? findTreeNode(moduleTreeData.value, id) : selectedModule.value
   if (!module || busy.value) return
   const moduleId = String(module.b_id)
   if (unsavedModuleIds.has(moduleId)) {
     // 未保存草稿：本地递归移除子树并清理标记（草稿下不应有已保存子孙）
     collectUnsavedModuleIds(module).forEach((k) => unsavedModuleIds.delete(k))
-    removeModuleNode(moduleTreeData.value, moduleId)
+    removeTreeNode(moduleTreeData.value, moduleId)
     moduleSelectedId.value = null
     return
   }
@@ -772,7 +490,10 @@ async function deleteModule(id) {
       try {
         const id2 = String(module.b_id)
         // 子表按 b_module_id 条件删（后端 deletes 行内所有列组成 AND 条件），
-        // 无需先查出各行 id；主表仍按主键删
+        // 无需先查出各行 id；主表仍按主键删。
+        // s_i18n 也按 b_module_id 关联删除（受管键均回填 b_module_id，见 ModuleI18nPanel.buildSaveRequest）；
+        // 若不清理，删除后残留的孤儿键会被同编码新模块的多语言面板加载，
+        // 进而产生指向已不存在记录的 UPDATE，导致后端「修改记录数异常: 0」。
         const subTables = [
           's_field',
           's_field_group',
@@ -781,39 +502,18 @@ async function deleteModule(id) {
           's_field_query',
           's_autocode',
           's_power',
+          's_i18n',
         ]
         const reqs = subTables.map((table) => ({
           table,
           key_field: 'b_id',
           deletes: [{ b_module_id: id2 }],
         }))
-        // 多语言（s_i18n.b_module_id 由迁移脚本 041 提供；历史/未回填数据仍按 key 前缀匹配）。
-        // 优先按 b_module_id 精确关联删除（新数据），并以 key 前缀匹配兜底（存量数据）：
-        // 若不清理，删除后残留的孤儿键会被同编码新模块的多语言面板加载，
-        // 进而产生指向已不存在记录的 UPDATE，导致后端「修改记录数异常: 0」。
-        const moduleCode = String(module.b_code || '').trim()
-        if (moduleCode) {
-          const prefix = module.b_module_type === 'category' ? 'menu' : 'module'
-          const i18nRes = await loadDataApi(
-            's_i18n',
-            `b_module_id = ${id2} OR b_key = '${prefix}.${moduleCode}' ` +
-              `OR b_key LIKE '${prefix}.${moduleCode}.%' ` +
-              `OR b_key LIKE 'field.${moduleCode}.%' OR b_key LIKE 'power.${moduleCode}.%'`,
-          )
-          const i18nRows = i18nRes.data || []
-          if (i18nRows.length) {
-            reqs.push({
-              table: 's_i18n',
-              key_field: 'b_id',
-              deletes: i18nRows.map((r) => ({ b_id: r.b_id })),
-            })
-          }
-        }
         reqs.push({ table: 's_module', key_field: 'b_id', deletes: [{ b_id: id2 }] })
         await saveObjectApi(reqs)
         // 本地移除整棵子树（未保存子孙随父一并清理），并清除未保存标记
         collectUnsavedModuleIds(module).forEach((k) => unsavedModuleIds.delete(k))
-        removeModuleNode(moduleTreeData.value, id2)
+        removeTreeNode(moduleTreeData.value, id2)
         moduleSelectedId.value = null
         Message.success('模块已删除')
       } catch (e) {
@@ -826,10 +526,10 @@ async function deleteModule(id) {
 /* ================= 草稿加载 ================= */
 async function loadModuleConfig(moduleId) {
   const id = String(moduleId)
-  const type = findModuleNode(moduleTreeData.value, id)?.b_module_type
+  const type = findTreeNode(moduleTreeData.value, id)?.b_module_type
   configLoading.value = true
   try {
-    let moduleRes, fieldsRes, groupsRes, listRes, editRes, queryRes, autoCodeRes, powersRes
+    let moduleRes, fieldsRes, groupsRes, listRes, editRes, queryRes, autoCodeRes, powersRes, i18nRes
     if (type === 'data') {
       const responses = await Promise.all([
         loadDataApi('s_module', `b_id = ${id}`),
@@ -840,8 +540,9 @@ async function loadModuleConfig(moduleId) {
         loadDataApi('s_field_query', `b_module_id = ${id}`, 'b_xh ASC, b_id ASC'),
         loadDataApi('s_autocode', `b_module_id = ${id}`, 'b_id ASC'),
         loadDataApi('s_power', `b_module_id = ${id} AND b_power_type = 'action'`, 'b_xh ASC, b_id ASC'),
+        loadDataApi('s_i18n', `b_module_id = ${id}`, 'b_key ASC, b_locale ASC'),
       ])
-      ;[moduleRes, fieldsRes, groupsRes, listRes, editRes, queryRes, autoCodeRes, powersRes] = responses
+      ;[moduleRes, fieldsRes, groupsRes, listRes, editRes, queryRes, autoCodeRes, powersRes, i18nRes] = responses
     } else if (type === 'query') {
       const responses = await Promise.all([
         loadDataApi('s_module', `b_id = ${id}`),
@@ -850,8 +551,9 @@ async function loadModuleConfig(moduleId) {
         loadDataApi('s_field_view', `b_module_id = ${id}`, 'b_xh ASC, b_id ASC'),
         loadDataApi('s_field_query', `b_module_id = ${id}`, 'b_xh ASC, b_id ASC'),
         loadDataApi('s_power', `b_module_id = ${id} AND b_power_type = 'action'`, 'b_xh ASC, b_id ASC'),
+        loadDataApi('s_i18n', `b_module_id = ${id}`, 'b_key ASC, b_locale ASC'),
       ])
-      ;[moduleRes, fieldsRes, groupsRes, listRes, queryRes, powersRes] = responses
+      ;[moduleRes, fieldsRes, groupsRes, listRes, queryRes, powersRes, i18nRes] = responses
     } else {
       moduleRes = await loadDataApi('s_module', `b_id = ${id}`)
     }
@@ -868,23 +570,13 @@ async function loadModuleConfig(moduleId) {
     }
     originals.value = original
     drafts.value = cloneData(original)
-    // i18n 独立加载（s_i18n 不随模块配置草稿加载，按受管键查询）
-    if (type === 'data' || type === 'query') {
-      const keys = [...new Set(finalI18nItems.value.flatMap((it) => [it.key, it.sourceKey]).filter(Boolean).map(String))]
-      const quotedKeys = keys.map((key) => "'" + key.replace(/'/g, "''") + "'")
-      const where = keys.length ? 'b_key IN (' + quotedKeys.join(', ') + ')' : null
-      const res = where ? await loadDataApi('s_i18n', where, 'b_key ASC, b_locale ASC') : { data: [] }
-      if (String(moduleSelectedId.value) !== id) return
-      const flat = (res.data || []).map((row) => ({
-        b_id: row.b_id, b_key: row.b_key, b_locale: row.b_locale, b_value: row.b_value,
-      }))
-      originals.value.i18n = flat
-      drafts.value.i18n = buildI18nPivot(flat)
-      reconcileI18nRows()
-    } else {
-      originals.value.i18n = []
-      drafts.value.i18n = []
-    }
+    // i18n 随模块配置一起并行加载（s_i18n 按 b_module_id 关联），
+    // 只取原始扁平行传给 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,
+        }))
+      : []
     // 列表配置不再自动补全：行存在即展示，删除即真删，由用户通过字段库手动管理（与查询配置一致）。
     loadedModuleId.value = id
     activeSection.value = 'basic'
@@ -909,6 +601,7 @@ watch(moduleSelectedId, (id) => {
     configLoading.value = false
     loadedModuleId.value = null
     drafts.value = null
+    rawI18nRows.value = []
     return
   }
   // 清空旧草稿，让右侧进入加载态（否则旧数据残留，v-if="drafts" 仍为真，看不到 loading）
@@ -1047,7 +740,7 @@ function buildSyncPlan(module, columns) {
   }
   // 视图中已不存在的字段：应用时移除并级联清理配置行与受管 i18n
   const removedIds = new Set()
-  // 受管多语言的 _managedId 是 `field:${i18nKey}`（见 finalI18nItems），不是字段 b_id
+  // 受管多语言的 _managedId 是 `field:${i18nKey}`（由 ModuleI18nPanel 维护），不是字段 b_id
   const removedI18nIds = new Set()
   for (const existing of drafts.value.fields || []) {
     if (!viewColumnSet.has(String(existing.b_field).toLowerCase())) {
@@ -1069,7 +762,7 @@ function applySyncPlan(plan) {
         (row) => !plan.removedIds.has(String(row.b_field_id)),
       )
     }
-    removeI18nByManagedIds(Array.from(plan.removedI18nIds))
+    i18nPanelRef.value?.removeByManagedIds?.(Array.from(plan.removedI18nIds))
   }
   drafts.value.fields = plan.mergedFields
   Message.success(`已成功同步 ${plan.mergedFields.length} 个字段`)
@@ -1344,11 +1037,14 @@ loadModuleTree()
                   class="mm-config-pane"
                 >
                   <ModuleI18nPanel
+                    ref="i18nPanelRef"
                     :module-id="String(selectedModule.b_id)"
-                    :rows="drafts?.i18n"
-                    :languages="I18N_LANGUAGES"
+                    :module="drafts?.module"
+                    :fields="drafts?.fields"
+                    :powers="drafts?.powers"
+                    :groups="drafts?.groups"
+                    :raw-rows="rawI18nRows"
                     :loading="busy"
-                    @update="(v) => onModuleUpdate('i18n', v)"
                   />
                 </div>
               </div>
diff --git a/code/test/vue-vben-admin b/code/test/vue-vben-admin
new file mode 160000
index 00000000..2d708760
--- /dev/null
+++ b/code/test/vue-vben-admin
@@ -0,0 +1 @@
+Subproject commit 2d7087602b732e6c23c7696ee8430eb1e8221b56