diff --git a/code/fms/fms-vue/src/components/AutoHeightTable.vue b/code/fms/fms-vue/src/components/AutoHeightTable.vue
new file mode 100644
index 00000000..8cda409e
--- /dev/null
+++ b/code/fms/fms-vue/src/components/AutoHeightTable.vue
@@ -0,0 +1,197 @@
+<script setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from "vue";
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps({
+  bordered: { type: Boolean, default: true },
+  scroll: { type: Object, default: () => ({}) },
+  scrollX: { type: [Boolean, Number, String], default: "max-content" },
+});
+
+const tableAreaRef = ref(null);
+const bodyHeight = ref(240);
+const mergedScroll = computed(() => ({
+  ...props.scroll,
+  x: props.scrollX,
+  y: bodyHeight.value,
+}));
+
+let resizeObserver;
+let mutationObserver;
+let frameId = 0;
+const observedElements = new Set();
+
+function getOuterHeight(element) {
+  if (!element) return 0;
+
+  const style = getComputedStyle(element);
+  const marginTop = Number.parseFloat(style.marginTop) || 0;
+  const marginBottom = Number.parseFloat(style.marginBottom) || 0;
+
+  return element.getBoundingClientRect().height + marginTop + marginBottom;
+}
+
+function clipsOverflowY(element) {
+  const { overflow, overflowY } = getComputedStyle(element);
+  return [overflow, overflowY].some((value) => /^(auto|clip|hidden|scroll)$/.test(value));
+}
+
+function getAvailableHeight(area) {
+  const areaTop = area.getBoundingClientRect().top;
+  let boundaryBottom = Number.POSITIVE_INFINITY;
+  let ancestor = area.parentElement;
+
+  while (ancestor && ancestor !== document.documentElement) {
+    if (clipsOverflowY(ancestor)) {
+      const rect = ancestor.getBoundingClientRect();
+      boundaryBottom = Math.min(boundaryBottom, rect.top + ancestor.clientTop + ancestor.clientHeight);
+    }
+    ancestor = ancestor.parentElement;
+  }
+
+  if (Number.isFinite(boundaryBottom) && boundaryBottom > areaTop) {
+    return Math.floor(boundaryBottom - areaTop);
+  }
+  return area.clientHeight;
+}
+
+function updateBodyHeight() {
+  const area = tableAreaRef.value;
+  if (!area?.clientHeight) return;
+
+  const headerHeight = getOuterHeight(
+    area.querySelector(".ant-table-header") || area.querySelector(".ant-table-thead"),
+  );
+  const paginationHeight = getOuterHeight(area.querySelector(".ant-table-pagination"));
+  const titleHeight = getOuterHeight(area.querySelector(".ant-table-title"));
+  const footerHeight = getOuterHeight(area.querySelector(".ant-table-footer"));
+
+  const nextHeight = Math.max(
+    1,
+    getAvailableHeight(area) - headerHeight - paginationHeight - titleHeight - footerHeight,
+  );
+  if (nextHeight !== bodyHeight.value) bodyHeight.value = nextHeight;
+}
+
+function scheduleHeightUpdate() {
+  cancelAnimationFrame(frameId);
+  frameId = requestAnimationFrame(updateBodyHeight);
+}
+
+function observe(element) {
+  if (!element || observedElements.has(element)) return;
+  resizeObserver?.observe(element);
+  observedElements.add(element);
+}
+
+function syncObservedElements() {
+  const area = tableAreaRef.value;
+  if (!area) return;
+
+  let ancestor = area.parentElement;
+  while (ancestor && ancestor !== document.documentElement) {
+    if (ancestor === area.parentElement || clipsOverflowY(ancestor)) observe(ancestor);
+    ancestor = ancestor.parentElement;
+  }
+  observe(area.querySelector(".ant-table-header"));
+  observe(area.querySelector(".ant-table-pagination"));
+  observe(area.querySelector(".ant-table-title"));
+  observe(area.querySelector(".ant-table-footer"));
+  scheduleHeightUpdate();
+}
+
+onMounted(async () => {
+  resizeObserver = new ResizeObserver(scheduleHeightUpdate);
+  mutationObserver = new MutationObserver(() => {
+    nextTick(syncObservedElements);
+  });
+
+  await nextTick();
+  syncObservedElements();
+  mutationObserver.observe(tableAreaRef.value, { childList: true, subtree: true });
+});
+
+onBeforeUnmount(() => {
+  cancelAnimationFrame(frameId);
+  resizeObserver?.disconnect();
+  mutationObserver?.disconnect();
+  observedElements.clear();
+});
+</script>
+
+<template>
+  <div
+    ref="tableAreaRef"
+    class="auto-height-table"
+    :style="{ '--auto-table-body-height': bodyHeight + 'px' }"
+  >
+    <a-table v-bind="$attrs" :bordered="bordered" :scroll="mergedScroll" size="small">
+      <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">
+        <slot :name="name" v-bind="slotProps || {}" />
+      </template>
+    </a-table>
+  </div>
+</template>
+
+<style scoped>
+.auto-height-table {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+:deep(.ant-table-wrapper),
+:deep(.ant-spin-nested-loading),
+:deep(.ant-spin-container),
+:deep(.ant-table),
+:deep(.ant-table-container) {
+  min-height: 0;
+}
+
+:deep(.ant-table-wrapper) {
+  display: flex;
+  height: 100%;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
+:deep(.ant-spin-nested-loading),
+:deep(.ant-spin-container),
+:deep(.ant-table),
+:deep(.ant-table-container) {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
+:deep(.ant-table-header),
+:deep(.ant-table-pagination) {
+  flex: 0 0 auto;
+}
+
+:deep(.ant-table-body) {
+  height: var(--auto-table-body-height);
+  min-height: 0;
+  max-height: var(--auto-table-body-height) !important;
+  flex: 0 0 var(--auto-table-body-height);
+  overflow-y: auto !important;
+}
+
+/* scroll.y 模式下 antdv 不会渲染 body 底部外边框；且直接加在滚动容器 .ant-table-body
+   上时，边框会被内部滚动内容的最后一行盖住、或被祖先 overflow:hidden 裁掉，表现为
+   “看不到/被遮挡”。所以把底边框挂在不滚动的 .ant-table-container 上，并强制 border-box
+   让边框计入盒子高度，避免溢出裁切。 */
+::deep(.ant-table-container),
+::deep(.ant-table-body) {
+  box-sizing: border-box;
+}
+
+::deep(.ant-table-bordered .ant-table-container) {
+  border-bottom: 1px solid var(--ant-color-border-secondary, #f0f0f0);
+}
+</style>
diff --git a/code/fms/fms-vue/src/styles/main.scss b/code/fms/fms-vue/src/styles/main.scss
index 8307d546..ece5e0d6 100644
--- a/code/fms/fms-vue/src/styles/main.scss
+++ b/code/fms/fms-vue/src/styles/main.scss
@@ -8,6 +8,8 @@
 }
 
 * {
+  margin: 0;
+  padding: 0;
   box-sizing: border-box;
 }
 
@@ -20,7 +22,6 @@ body,
   height: 100%;
   min-width: 0;
   min-height: 0;
-  margin: 0;
 }
 
 body {
diff --git a/code/fms/fms-vue/src/views/DashboardView.vue b/code/fms/fms-vue/src/views/DashboardView.vue
index 52abdcc7..2575245a 100644
--- a/code/fms/fms-vue/src/views/DashboardView.vue
+++ b/code/fms/fms-vue/src/views/DashboardView.vue
@@ -1,63 +1,37 @@
 <script setup lang="js">
-import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import AutoHeightTable from "../components/AutoHeightTable.vue";
 
 const columns = [
   {
-    title: 'Name (all screens)',
-    dataIndex: 'name',
-    key: 'name',
+    title: "Name (all screens)",
+    dataIndex: "name",
+    key: "name",
   },
   {
-    title: 'Age (medium screen or bigger)',
-    dataIndex: 'age',
-    key: 'age',
-    responsive: ['md'],
+    title: "Age (medium screen or bigger)",
+    dataIndex: "age",
+    key: "age",
+    responsive: ["md"],
   },
   {
-    title: 'Address (large screen or bigger)',
-    dataIndex: 'address',
-    key: 'address',
-    responsive: ['lg'],
+    title: "Address (large screen or bigger)",
+    dataIndex: "address",
+    key: "address",
+    responsive: ["lg"],
   },
-]
+];
 
 const dataSource = Array.from({ length: 30 }, (_, i) => ({
   key: String(i + 1),
-  name: 'John Brown',
+  name: "John Brown",
   age: 32,
-  address: 'New York No. 1 Lake Park',
-}))
-
-const tableWrap = ref(null)
-const scrollY = ref(0)
-let ro = null
-
-function updateScrollY() {
-  const el = tableWrap.value
-  if (!el) return
-  const thead = el.querySelector('.ant-table-thead')
-  const pagination = el.querySelector('.ant-table-pagination')
-  const headerH = thead ? thead.offsetHeight : 0
-  const pagH = pagination ? pagination.offsetHeight + 16 : 0
-  scrollY.value = Math.max(0, el.clientHeight - headerH - pagH)
-}
-
-onMounted(async () => {
-  await nextTick()
-  updateScrollY()
-  ro = new ResizeObserver(updateScrollY)
-  if (tableWrap.value) ro.observe(tableWrap.value)
-})
-
-onBeforeUnmount(() => {
-  if (ro) ro.disconnect()
-})
+  address: "New York No. 1 Lake Park",
+}));
 </script>
 
 <template>
-  <div class="dashboard h-full flex flex-col gap-3 p-4">
-    <!-- Toolbar -->
-    <div class="toolbar flex-none flex items-center justify-between">
+  <div class="dashboard h-full min-h-0 flex flex-col gap-3 overflow-hidden p-4">
+    <div class="toolbar flex flex-none items-center justify-between">
       <span class="text-base font-semibold">Dashboard</span>
       <a-space>
         <a-button type="primary">新增</a-button>
@@ -66,21 +40,12 @@ onBeforeUnmount(() => {
       </a-space>
     </div>
 
-    <!-- Table fills the remaining space -->
-    <div ref="tableWrap" class="table-area flex-1 min-h-0 overflow-hidden">
-      <a-table
-        :columns="columns"
-        :data-source="dataSource"
-        :scroll="{ y: scrollY, x: 'max-content' }"
-        bordered
-        size="small"
-      >
-        <template #bodyCell="{ column, text }">
-          <template v-if="column.key === 'name'">
-            <a>{{ text }}</a>
-          </template>
+    <AutoHeightTable :columns="columns" :data-source="dataSource">
+      <template #bodyCell="{ column, text }">
+        <template v-if="column.key === 'name'">
+          <a>{{ text }}</a>
         </template>
-      </a-table>
-    </div>
+      </template>
+    </AutoHeightTable>
   </div>
 </template>
diff --git a/code/fms/fms-vue/src/views/module-management/ModuleManagementView.vue b/code/fms/fms-vue/src/views/module-management/ModuleManagementView.vue
index e999ae36..4deca530 100644
--- a/code/fms/fms-vue/src/views/module-management/ModuleManagementView.vue
+++ b/code/fms/fms-vue/src/views/module-management/ModuleManagementView.vue
@@ -1,16 +1,7 @@
 <script setup>
-import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from "vue";
+import { computed, onMounted, reactive, ref } from "vue";
 import { App } from "antdv-next";
-import {
-  Database,
-  FileText,
-  Languages,
-  Plus,
-  RotateCcw,
-  Save,
-  ShieldCheck,
-  Trash2,
-} from "@lucide/vue";
+import { Database, FileText, Languages, RotateCcw, Save, ShieldCheck, Trash2 } from "@lucide/vue";
 import { useAuthStore } from "../../stores/auth";
 import { usePermissionStore } from "../../stores/permissions";
 import {
@@ -20,6 +11,10 @@ import {
   saveChanges,
   tableRequest,
 } from "../../services/moduleManagement";
+import ModuleBasicInfoPanel from "./components/ModuleBasicInfoPanel.vue";
+import ModuleFieldDefinitionPanel from "./components/ModuleFieldDefinitionPanel.vue";
+import ModulePowerPanel from "./components/ModulePowerPanel.vue";
+import ModuleTranslationsPanel from "./components/ModuleTranslationsPanel.vue";
 import ModuleTreePanel from "./components/ModuleTreePanel.vue";
 
 const { message } = App.useApp();
@@ -30,20 +25,10 @@ const saving = ref(false);
 const selectedKey = ref("");
 const activeTab = ref("basic");
 const isNew = ref(false);
-const editingFieldId = ref("");
-const editingPowerId = ref("");
-const editingTranslationKey = ref("");
 const customI18nKeys = ref([]);
-const newI18nKey = ref("");
-const showI18nInput = ref(false);
-const directoryOpen = ref(false);
-const directorySaving = ref(false);
-const selectedFieldKeys = ref([]);
-const selectedPowerKeys = ref([]);
-const fieldTableAreaRef = ref(null);
-const powerTableAreaRef = ref(null);
-const fieldTableScrollY = ref(240);
-const powerTableScrollY = ref(240);
+const deleteConfirmOpen = ref(false);
+const pendingDeleteKey = ref("");
+const original = ref("");
 const data = reactive({
   modules: [],
   fields: [],
@@ -53,17 +38,6 @@ const data = reactive({
   userPowers: [],
 });
 const draft = reactive({ module: null, fields: [], powers: [], translations: {} });
-const directoryForm = reactive({
-  b_id: "",
-  b_parent_id: null,
-  b_name: "",
-  b_i18n: "",
-  b_canmenu: 1,
-  b_canuse: 1,
-  b_xh: 100,
-});
-const original = ref("");
-let tableResizeObserver;
 
 const canCreate = computed(() => permissionStore.canPower("M_MODULE", "create"));
 const canUpdate = computed(() => permissionStore.canPower("M_MODULE", "update"));
@@ -73,46 +47,21 @@ const dirty = computed(() => Boolean(draft.module) && serializeDraft() !== origi
 const parentOptions = computed(() =>
   data.modules
     .filter((item) => item.b_id !== draft.module?.b_id && item.b_type !== "data")
-    .map((item) => ({ value: item.b_id, label: `${item.b_name} (${item.b_id})` })),
+    .map((item) => ({ value: item.b_id, label: item.b_name + " (" + item.b_id + ")" })),
 );
 const directoryParentOptions = computed(() =>
   data.modules
     .filter((item) => item.b_type === "directory")
-    .map((item) => ({ value: item.b_id, label: `${item.b_name} (${item.b_id})` })),
+    .map((item) => ({ value: item.b_id, label: item.b_name + " (" + item.b_id + ")" })),
 );
 const moduleKindLabel = computed(() => {
-  if (draft.module?.b_type === "directory") return "目录";
+  if (draft.module?.b_type === "directory") return "模块";
   return draft.module?.b_route?.trim() ? "页面模块" : "数据模块";
 });
-const fieldColumns = [
-  { title: "字段", key: "b_field", width: 150 },
-  { title: "名称", key: "b_name", width: 150 },
-  { title: "类型", key: "b_type", width: 120 },
-  { title: "列表", key: "b_canlist", width: 64, align: "center" },
-  { title: "表单", key: "b_canform", width: 64, align: "center" },
-  { title: "必填", key: "b_must", width: 64, align: "center" },
-  { title: "查询", key: "b_canquery", width: 64, align: "center" },
-  { title: "只读", key: "b_readonly", width: 64, align: "center" },
-  { title: "宽度", key: "b_width", width: 90 },
-  { title: "顺序", key: "b_xh", width: 80 },
-  { title: "操作", key: "operation", width: 58, fixed: "right" },
-];
-const powerColumns = [
-  { title: "权限代码", key: "b_code", width: 180 },
-  { title: "名称", key: "b_name", width: 200 },
-  { title: "多语言键", key: "b_i18n" },
-  { title: "启用", key: "b_canuse", width: 74, align: "center" },
-  { title: "顺序", key: "b_xh", width: 90 },
-  { title: "操作", key: "operation", width: 58 },
-];
-const fieldTypes = [
-  ["string", "单行文本"],
-  ["text", "多行文本"],
-  ["number", "数字"],
-  ["select", "选择"],
-  ["date", "日期"],
-  ["boolean", "布尔"],
-].map(([value, label]) => ({ value, label }));
+const translationKeys = computed(() => rowKeys());
+const pendingDeleteModule = computed(() =>
+  data.modules.find((item) => item.b_id === pendingDeleteKey.value),
+);
 
 function clone(value) {
   return JSON.parse(JSON.stringify(value));
@@ -136,97 +85,53 @@ function rowKeys() {
   ].filter(Boolean);
 }
 
-function translationEntry(key) {
-  draft.translations[key] ||= {};
-  return draft.translations[key];
+function clearDraft() {
+  selectedKey.value = "";
+  isNew.value = false;
+  draft.module = null;
+  draft.fields = [];
+  draft.powers = [];
+  draft.translations = {};
+  customI18nKeys.value = [];
+  original.value = "";
+  activeTab.value = "basic";
 }
 
-function fieldTypeLabel(value) {
-  return fieldTypes.find((item) => item.value === value)?.label || value;
-}
-
-function setFieldTranslation(record, locale, value) {
-  translationEntry(record.b_i18n)[locale] = value;
-  if (locale === "zh-CN") record.b_name = value;
-}
-
-function fieldTranslationValue(record, locale) {
-  return translationEntry(record.b_i18n)[locale] ?? (locale === "zh-CN" ? record.b_name : "");
-}
-
-function fieldRow(record) {
-  return {
-    onClick: () => {
-      editingFieldId.value = String(record.b_id);
-      editingPowerId.value = "";
-    },
-  };
-}
-
-function powerRow(record) {
-  return {
-    onClick: () => {
-      editingPowerId.value = String(record.b_id);
-      editingFieldId.value = "";
-    },
-  };
-}
-
-function leaveFieldEdit(event) {
-  if (!event.target.closest(".ant-table-row")) editingFieldId.value = "";
-}
-
-function leavePowerEdit(event) {
-  if (!event.target.closest(".ant-table-row")) editingPowerId.value = "";
-}
-
-function leaveTranslationEdit(event) {
-  if (!event.target.closest(".translation-row")) editingTranslationKey.value = "";
-}
-
-function leaveRowEditing(event) {
-  if (event.target.closest(".ant-table-row, .translation-row")) return;
-  editingFieldId.value = "";
-  editingPowerId.value = "";
-  editingTranslationKey.value = "";
-}
-
-function selectModule(code, force = false) {
+function selectModule(code) {
   const module = data.modules.find((item) => item.b_id === code);
   if (!module) return;
+
   selectedKey.value = code;
   isNew.value = false;
   draft.module = clone(module);
   draft.fields = clone(data.fields.filter((item) => item.b_module_id === code));
   draft.powers = clone(data.powers.filter((item) => item.b_module_id === code));
-  const keys = new Set(rowKeys());
-  draft.translations = {};
-  editingFieldId.value = "";
-  editingPowerId.value = "";
-  editingTranslationKey.value = "";
-  selectedFieldKeys.value = [];
-  selectedPowerKeys.value = [];
   customI18nKeys.value = [];
-  newI18nKey.value = "";
-  showI18nInput.value = false;
+  const keys = new Set(rowKeys());
+
+  draft.translations = {};
   data.translations
     .filter((item) => keys.has(item.b_key))
     .forEach((item) => {
       draft.translations[item.b_key] ||= {};
       draft.translations[item.b_key][item.b_locale] = item.b_value;
     });
+
   original.value = serializeDraft();
-  activeTab.value = module.b_type === "directory" ? "basic" : activeTab.value;
+  if (module.b_type === "directory") activeTab.value = "basic";
 }
 
 async function loadAll(preferredKey = selectedKey.value) {
   loading.value = true;
   try {
     Object.assign(data, await loadModuleConfiguration());
-    const target = data.modules.some((item) => item.b_id === preferredKey)
-      ? preferredKey
-      : data.modules[0]?.b_id;
-    if (target) selectModule(target, true);
+    const target = data.modules.some((item) => item.b_id === preferredKey) ? preferredKey : "";
+
+    if (target) {
+      selectModule(target);
+    } else {
+      clearDraft();
+    }
   } catch (error) {
     message.error(error.message || "模块配置加载失败");
   } finally {
@@ -237,176 +142,89 @@ async function loadAll(preferredKey = selectedKey.value) {
 function nextModuleCode(prefix) {
   const existing = new Set(data.modules.map((item) => item.b_id));
   let index = 1;
-  while (existing.has(`${prefix}${index}`)) index += 1;
-  return `${prefix}${index}`;
+  while (existing.has(prefix + index)) index += 1;
+  return prefix + index;
 }
 
-function selectedParentId() {
-  return draft.module?.b_type === "directory"
-    ? draft.module.b_id
-    : draft.module?.b_parent_id || null;
+function parentForNew(contextKey) {
+  const context = data.modules.find((item) => item.b_id === contextKey);
+  if (!context) return null;
+  return context.b_type === "directory" ? context.b_id : context.b_parent_id || null;
 }
 
-function handleAdd(kind) {
-  if (kind === "directory") {
-    const id = nextModuleCode("M_DIR_NEW_");
-    Object.assign(directoryForm, {
-      b_id: id,
-      b_parent_id: selectedParentId(),
-      b_name: "新目录",
-      b_i18n: `module.${id}`,
-      b_canmenu: 1,
-      b_canuse: 1,
-      b_xh: 100,
-    });
-    directoryOpen.value = true;
-    return;
-  }
-  addModule();
-}
+function addModule(kind, contextKey) {
+  const isDirectory = kind === "directory";
+  const id = nextModuleCode(isDirectory ? "M_DIR_NEW_" : "M_PAGE_NEW_");
+  const parentId = parentForNew(contextKey);
+  const route = isDirectory ? null : "/" + id.toLowerCase().replace(/^m_/, "").replaceAll("_", "-");
 
-function updateDirectoryCode(value) {
-  const oldCode = directoryForm.b_id;
-  const nextCode = String(value || "").toUpperCase();
-  directoryForm.b_id = nextCode;
-  if (directoryForm.b_i18n === `module.${oldCode}`) {
-    directoryForm.b_i18n = `module.${nextCode}`;
-  }
-}
-
-function addModule() {
-  const parent =
-    draft.module?.b_type === "directory" ? draft.module.b_id : draft.module?.b_parent_id;
-  const id = nextModuleCode("M_NEW_");
   draft.module = {
     b_id: id,
-    b_parent_id: parent || null,
-    b_name: "新模块",
-    b_i18n: `module.${id}`,
-    b_type: "data",
-    b_route: null,
+    b_parent_id: parentId,
+    b_name: isDirectory ? "新模块" : "新页面",
+    b_i18n: "module." + id,
+    b_type: isDirectory ? "directory" : "page",
+    b_route: route,
     b_viewtable: null,
     b_savetable: null,
-    b_keyfield: "b_id",
-    b_orderfield: "b_id",
-    b_ordertype: "DESC",
-    b_canmenu: 0,
+    b_keyfield: isDirectory ? null : "b_id",
+    b_orderfield: isDirectory ? null : "b_id",
+    b_ordertype: isDirectory ? null : "DESC",
+    b_canmenu: isDirectory || route ? 1 : 0,
     b_canuse: 1,
     b_xh: 100,
   };
   draft.fields = [];
   draft.powers = [];
-  selectedFieldKeys.value = [];
-  selectedPowerKeys.value = [];
-  draft.translations = { [`module.${id}`]: { "zh-CN": draft.module.b_name } };
+  draft.translations = {
+    ["module." + id]: { "zh-CN": draft.module.b_name },
+  };
+  customI18nKeys.value = [];
   selectedKey.value = id;
   isNew.value = true;
   original.value = "";
   activeTab.value = "basic";
 }
 
-async function createDirectory() {
-  const code = directoryForm.b_id.trim().toUpperCase();
-  if (!/^[A-Z][A-Z0-9_]{1,49}$/.test(code)) {
-    message.warning("目录代码格式不正确");
-    return;
-  }
-  if (!directoryForm.b_name.trim()) {
-    message.warning("目录名称不能为空");
-    return;
-  }
-  if (data.modules.some((item) => item.b_id === code)) {
-    message.warning("目录代码已经存在");
-    return;
-  }
-
-  directorySaving.value = true;
-  try {
-    const [translationId] = await nextIds(1);
-    const i18nKey = directoryForm.b_i18n.trim() || `module.${code}`;
-    const now = new Date().toISOString().slice(0, 19).replace("T", " ");
-    await saveChanges([
-      tableRequest("b_module", {
-        inserts: [
-          {
-            b_id: code,
-            b_parent_id: directoryForm.b_parent_id,
-            b_name: directoryForm.b_name.trim(),
-            b_i18n: i18nKey,
-            b_type: "directory",
-            b_route: null,
-            b_viewtable: null,
-            b_savetable: null,
-            b_keyfield: null,
-            b_orderfield: null,
-            b_ordertype: null,
-            b_canmenu: directoryForm.b_canmenu,
-            b_canuse: directoryForm.b_canuse,
-            b_xh: directoryForm.b_xh,
-          },
-        ],
-      }),
-      tableRequest("b_i18n", {
-        inserts: [
-          {
-            b_id: translationId,
-            b_key: i18nKey,
-            b_locale: "zh-CN",
-            b_value: directoryForm.b_name.trim(),
-            b_inputuser_id: String(authStore.user.id),
-            b_inputdatetime: now,
-            b_updateuser_id: null,
-            b_updatedatetime: null,
-          },
-        ],
-      }),
-    ]);
-    directoryOpen.value = false;
-    message.success("目录已创建");
-    await loadAll(code);
-  } catch (error) {
-    message.error(error.message || "目录创建失败");
-  } finally {
-    directorySaving.value = false;
-  }
-}
-
-function updateRoute(value) {
-  draft.module.b_route = value || null;
-  if (!String(value || "").trim()) draft.module.b_canmenu = 0;
-}
-
-function normalizeModuleType() {
-  if (draft.module.b_type === "directory") return;
-  draft.module.b_type = draft.module.b_route?.trim() ? "page" : "data";
-  if (draft.module.b_type === "data") draft.module.b_canmenu = 0;
+function handleAdd(kind, contextKey) {
+  addModule(kind === "module" ? "directory" : "page", contextKey);
 }
 
 function updateModuleId(value) {
   if (!isNew.value) return;
+
   const oldId = draft.module.b_id;
   const oldKey = draft.module.b_i18n;
   const newId = String(value || "").toUpperCase();
   draft.module.b_id = newId;
-  if (oldKey === `module.${oldId}`) {
-    draft.module.b_i18n = `module.${newId}`;
-    draft.translations[draft.module.b_i18n] = draft.translations[oldKey] || {};
+  if (oldKey === "module." + oldId) {
+    const newKey = "module." + newId;
+    draft.module.b_i18n = newKey;
+    draft.translations[newKey] = draft.translations[oldKey] || {};
     delete draft.translations[oldKey];
   }
   selectedKey.value = newId;
-  draft.fields.forEach((item) => (item.b_module_id = newId));
-  draft.powers.forEach((item) => (item.b_module_id = newId));
+  draft.fields.forEach((item) => {
+    item.b_module_id = newId;
+  });
+  draft.powers.forEach((item) => {
+    item.b_module_id = newId;
+  });
 }
 
 async function addField() {
+  if (!draft.module) return;
+
   const [id] = await nextIds(1);
   const index = draft.fields.length + 1;
+  const fieldCode = "b_field" + index;
+  const i18nKey = "field." + draft.module.b_id + "." + fieldCode;
   draft.fields.push({
     b_id: id,
     b_module_id: draft.module.b_id,
-    b_field: `b_field${index}`,
+    b_field: fieldCode,
     b_name: "新字段",
-    b_i18n: `field.${draft.module.b_id}.b_field${index}`,
+    b_i18n: i18nKey,
     b_type: "string",
     b_canlist: 1,
     b_canform: 1,
@@ -418,75 +236,49 @@ async function addField() {
     b_xh: index * 10,
     b_canuse: 1,
   });
-  draft.translations[`field.${draft.module.b_id}.b_field${index}`] = { "zh-CN": "新字段" };
-  editingFieldId.value = id;
+  draft.translations[i18nKey] = { "zh-CN": "新字段" };
 }
 
 async function addPower() {
+  if (!draft.module) return;
+
   const [id] = await nextIds(1);
   const index = draft.powers.length + 1;
+  const code = "action" + index;
+  const i18nKey = "power." + draft.module.b_id + "." + code;
   draft.powers.push({
     b_id: id,
     b_module_id: draft.module.b_id,
-    b_code: `action${index}`,
+    b_code: code,
     b_name: "新操作",
-    b_i18n: `power.${draft.module.b_id}.action${index}`,
+    b_i18n: i18nKey,
     b_xh: index * 10,
     b_canuse: 1,
   });
-  draft.translations[`power.${draft.module.b_id}.action${index}`] = { "zh-CN": "新操作" };
-  editingPowerId.value = id;
+  draft.translations[i18nKey] = { "zh-CN": "新操作" };
 }
 
-function onFieldSelectChange(keys) {
-  selectedFieldKeys.value = keys;
-}
-
-function onPowerSelectChange(keys) {
-  selectedPowerKeys.value = keys;
-}
-
-function deleteSelectedFields() {
-  const ids = new Set(selectedFieldKeys.value.map(String));
-  draft.fields = draft.fields.filter((item) => !ids.has(String(item.b_id)));
-  selectedFieldKeys.value = [];
-}
-
-function deleteSelectedPowers() {
-  const ids = new Set(selectedPowerKeys.value.map(String));
-  draft.powers = draft.powers.filter((item) => !ids.has(String(item.b_id)));
-  selectedPowerKeys.value = [];
-}
-
-function addCustomI18nKey() {
-  const key = newI18nKey.value.trim();
-  if (!key) return;
-  if (customI18nKeys.value.includes(key)) {
-    message.warning("多语言键已存在");
-    return;
-  }
-  customI18nKeys.value.push(key);
-  draft.translations[key] = {};
-  newI18nKey.value = "";
-  showI18nInput.value = false;
-}
-
-function removeCustomI18nKey(key) {
-  customI18nKeys.value = customI18nKeys.value.filter((k) => k !== key);
-  delete draft.translations[key];
+function normalizeModuleType() {
+  if (draft.module.b_type === "directory") return;
+  draft.module.b_type = draft.module.b_route?.trim() ? "page" : "data";
+  if (draft.module.b_type === "data") draft.module.b_canmenu = 0;
 }
 
 function validate() {
   const module = draft.module;
-  if (!/^[A-Z][A-Z0-9_]{1,49}$/.test(module.b_id)) return "模块代码格式不正确";
+  if (!/^[A-Z][A-Z0-9_]{1,49}$/.test(module.b_id)) return "模块编码格式不正确";
   if (!module.b_name?.trim()) return "模块名称不能为空";
+  if (isNew.value && data.modules.some((item) => item.b_id === module.b_id)) {
+    return "模块编码已经存在";
+  }
   if (
     module.b_type === "directory" &&
     (module.b_route || module.b_viewtable || module.b_savetable)
   ) {
-    return "目录不能配置路由或数据表";
+    return "模块不能配置路由或数据表";
   }
   if (module.b_type === "data" && module.b_canmenu === 1) return "数据模块不能显示在菜单";
+
   const identifiers = [
     module.b_viewtable,
     module.b_savetable,
@@ -496,10 +288,13 @@ function validate() {
   if (identifiers.some((item) => !/^[A-Za-z_][A-Za-z0-9_]*$/.test(item))) {
     return "表名和字段名只能包含字母、数字和下划线";
   }
+
   const fieldCodes = draft.fields.map((item) => item.b_field);
   if (new Set(fieldCodes).size !== fieldCodes.length) return "字段编码不能重复";
-  if (fieldCodes.some((item) => !/^[A-Za-z_][A-Za-z0-9_]*$/.test(item)))
+  if (fieldCodes.some((item) => !/^[A-Za-z_][A-Za-z0-9_]*$/.test(item))) {
     return "字段编码格式不正确";
+  }
+
   const powerCodes = draft.powers.map((item) => item.b_code);
   if (new Set(powerCodes).size !== powerCodes.length) return "权限代码不能重复";
   if (
@@ -532,6 +327,7 @@ async function translationChanges(previousKeys) {
   const oldRows = data.translations.filter((item) => relevantKeys.has(item.b_key));
   const desired = [];
   const missing = [];
+
   for (const key of currentKeys) {
     for (const locale of LOCALES) {
       const value = draft.translations[key]?.[locale.value]?.trim();
@@ -544,9 +340,10 @@ async function translationChanges(previousKeys) {
       }
     }
   }
+
   const ids = await nextIds(missing.length);
   const now = new Date().toISOString().slice(0, 19).replace("T", " ");
-  missing.forEach((item, index) =>
+  missing.forEach((item, index) => {
     desired.push({
       b_id: ids[index],
       b_key: item.key,
@@ -556,8 +353,9 @@ async function translationChanges(previousKeys) {
       b_inputdatetime: now,
       b_updateuser_id: null,
       b_updatedatetime: null,
-    }),
-  );
+    });
+  });
+
   const changes = diffRows(desired, oldRows);
   changes.updates = changes.updates.map((item) => ({
     ...item,
@@ -574,6 +372,7 @@ async function saveModule() {
     message.warning(error);
     return;
   }
+
   saving.value = true;
   try {
     const oldModule = isNew.value
@@ -599,9 +398,11 @@ async function saveModule() {
       .filter((item) => removedPowerIds.has(String(item.b_power_id)))
       .map((item) => ({ b_id: item.b_id }));
     const requests = [];
+
     if (assignedPowerDeletes.length) {
       requests.push(tableRequest("b_user_power", { deletes: assignedPowerDeletes }));
     }
+
     requests.push(
       tableRequest("b_module", {
         inserts: isNew.value ? [draft.module] : [],
@@ -612,23 +413,37 @@ async function saveModule() {
       tableRequest("b_i18n", await translationChanges(previousKeys)),
     );
     await saveChanges(requests);
+
     const savedKey = draft.module.b_id;
     message.success("模块配置已保存");
     await loadAll(savedKey);
-  } catch (saveError) {
-    message.error(saveError.message || "模块保存失败");
+  } catch (error) {
+    message.error(error.message || "模块保存失败");
   } finally {
     saving.value = false;
   }
 }
 
-async function deleteModule() {
-  const moduleId = draft.module.b_id;
-  if (["M_SYSTEM", "M_MODULE"].includes(moduleId)) return;
+function requestDeleteModule(moduleId) {
+  const module = data.modules.find((item) => item.b_id === moduleId);
+  if (!module || ["M_SYSTEM", "M_MODULE"].includes(moduleId)) return;
   if (data.modules.some((item) => item.b_parent_id === moduleId)) {
     message.warning("请先删除下级模块");
     return;
   }
+
+  pendingDeleteKey.value = moduleId;
+  deleteConfirmOpen.value = true;
+}
+
+async function deleteModule(moduleId = draft.module?.b_id) {
+  const module = data.modules.find((item) => item.b_id === moduleId);
+  if (!module || ["M_SYSTEM", "M_MODULE"].includes(moduleId)) return;
+  if (data.modules.some((item) => item.b_parent_id === moduleId)) {
+    message.warning("请先删除下级模块");
+    return;
+  }
+
   saving.value = true;
   try {
     const powers = data.powers.filter((item) => item.b_module_id === moduleId);
@@ -636,11 +451,12 @@ async function deleteModule() {
     const fields = data.fields.filter((item) => item.b_module_id === moduleId);
     const keys = new Set(
       [
-        draft.module.b_i18n,
+        module.b_i18n,
         ...fields.map((item) => item.b_i18n),
         ...powers.map((item) => item.b_i18n),
       ].filter(Boolean),
     );
+
     await saveChanges([
       tableRequest("b_user_power", {
         deletes: data.userPowers
@@ -661,9 +477,11 @@ async function deleteModule() {
       }),
       tableRequest("b_module", { deletes: [{ b_id: moduleId }] }),
     ]);
+
     message.success("模块已删除");
-    selectedKey.value = "";
-    await loadAll();
+    deleteConfirmOpen.value = false;
+    pendingDeleteKey.value = "";
+    await loadAll(selectedKey.value === moduleId ? "" : selectedKey.value);
   } catch (error) {
     message.error(error.message || "模块删除失败");
   } finally {
@@ -673,64 +491,33 @@ async function deleteModule() {
 
 function resetDraft() {
   if (isNew.value) {
-    selectModule(data.modules[0]?.b_id, true);
-  } else {
-    selectModule(selectedKey.value, true);
+    clearDraft();
+    return;
   }
+  selectModule(selectedKey.value);
 }
 
 function setBoolean(record, field, checked) {
   record[field] = checked ? 1 : 0;
-  if (field === "b_canform" && !checked) record.b_must = 0;
-}
-
-function updateTableHeight(tableArea, scrollHeight) {
-  if (!tableArea?.clientHeight) return;
-
-  const headerHeight =
-    tableArea.querySelector(".ant-table-thead")?.getBoundingClientRect().height ?? 39;
-  scrollHeight.value = Math.max(Math.floor(tableArea.clientHeight - headerHeight), 1);
-}
-
-function observeTableAreas() {
-  nextTick(() => {
-    const areas = [
-      [fieldTableAreaRef.value, fieldTableScrollY],
-      [powerTableAreaRef.value, powerTableScrollY],
-    ];
-    areas.forEach(([area, scrollHeight]) => {
-      if (!area) return;
-      tableResizeObserver?.observe(area);
-      updateTableHeight(area, scrollHeight);
-    });
-  });
 }
 
 onMounted(async () => {
-  tableResizeObserver = new ResizeObserver((entries) => {
-    entries.forEach(({ target }) => {
-      if (target === fieldTableAreaRef.value) updateTableHeight(target, fieldTableScrollY);
-      if (target === powerTableAreaRef.value) updateTableHeight(target, powerTableScrollY);
-    });
-  });
-  observeTableAreas();
   await permissionStore.load();
-  await loadAll("M_MODULE");
+  await loadAll();
 });
-
-watch(activeTab, observeTableAreas, { flush: "post" });
-onBeforeUnmount(() => tableResizeObserver?.disconnect());
 </script>
 
 <template>
-  <div class="module-management" @click="leaveRowEditing">
+  <div class="module-management">
     <ModuleTreePanel
       :modules="data.modules"
       :selected-key="selectedKey"
       :loading="loading"
       :can-create="canCreate"
+      :can-delete="canDelete"
       @select="selectModule"
       @add="handleAdd"
+      @delete="requestDeleteModule"
       @refresh="loadAll()"
     />
 
@@ -745,6 +532,7 @@ onBeforeUnmount(() => tableResizeObserver?.disconnect());
                 <a-tag color="blue">{{ moduleKindLabel }}</a-tag>
               </div>
             </div>
+
             <div class="header-switches">
               <div class="switch-item">
                 <span class="switch-label">菜单显示</span>
@@ -755,33 +543,35 @@ onBeforeUnmount(() => tableResizeObserver?.disconnect());
                 />
               </div>
               <div class="switch-item">
-                <span class="switch-label">{{
-                  draft.module.b_type === "directory" ? "启用目录" : "启用模块"
-                }}</span>
+                <span class="switch-label">
+                  {{ draft.module.b_type === "directory" ? "启用模块" : "启用页面" }}
+                </span>
                 <a-switch
                   :checked="draft.module.b_canuse === 1"
                   @change="setBoolean(draft.module, 'b_canuse', $event)"
                 />
               </div>
             </div>
+
             <div class="header-actions">
-              <a-button :disabled="!dirty" @click="resetDraft"
-                ><RotateCcw :size="15" />取消</a-button
-              >
+              <a-button :disabled="!dirty" @click="resetDraft">
+                <RotateCcw :size="15" />取消
+              </a-button>
               <a-popconfirm
                 title="确定删除当前模块吗？"
                 :disabled="
                   isNew || !canDelete || ['M_SYSTEM', 'M_MODULE'].includes(draft.module.b_id)
                 "
-                @confirm="deleteModule"
+                @confirm="deleteModule()"
               >
                 <a-button
                   danger
                   :disabled="
                     isNew || !canDelete || ['M_SYSTEM', 'M_MODULE'].includes(draft.module.b_id)
                   "
-                  ><Trash2 :size="15" />删除</a-button
                 >
+                  <Trash2 :size="15" />删除
+                </a-button>
               </a-popconfirm>
               <a-button
                 type="primary"
@@ -794,449 +584,79 @@ onBeforeUnmount(() => tableResizeObserver?.disconnect());
             </div>
           </header>
 
-          <div v-if="draft.module.b_type === 'directory'" class="directory-editor">
-            <a-form layout="vertical" class="directory-form">
-              <div class="directory-grid">
-                <a-form-item label="目录代码" required>
-                  <a-input :value="draft.module.b_id" disabled />
-                </a-form-item>
-                <a-form-item label="目录名称" required>
-                  <a-input v-model:value="draft.module.b_name" />
-                </a-form-item>
-                <a-form-item label="上级目录">
-                  <a-select
-                    v-model:value="draft.module.b_parent_id"
-                    allow-clear
-                    show-search
-                    option-filter-prop="label"
-                    :options="
-                      directoryParentOptions.filter((item) => item.value !== draft.module.b_id)
-                    "
-                  />
-                </a-form-item>
-                <a-form-item label="多语言键">
-                  <a-input v-model:value="draft.module.b_i18n" />
-                </a-form-item>
-                <a-form-item label="显示顺序">
-                  <a-input-number v-model:value="draft.module.b_xh" :min="0" />
-                </a-form-item>
-              </div>
-            </a-form>
-          </div>
+          <ModuleBasicInfoPanel
+            v-if="draft.module.b_type === 'directory'"
+            v-model:module="draft.module"
+            :directory-parent-options="directoryParentOptions"
+            :is-new="isNew"
+            :parent-options="parentOptions"
+            @update-module-id="updateModuleId"
+          />
 
           <a-tabs v-else v-model:active-key="activeTab" class="workspace-tabs">
             <a-tab-pane key="basic">
-              <template #tab
-                ><span class="tab-label"><FileText :size="15" />基本信息</span></template
-              >
-              <a-form layout="vertical" class="basic-form">
-                <div class="form-grid">
-                  <a-form-item label="模块代码" required>
-                    <a-input
-                      :value="draft.module.b_id"
-                      :disabled="!isNew"
-                      @update:value="updateModuleId"
-                    />
-                  </a-form-item>
-                  <a-form-item label="模块名称" required
-                    ><a-input v-model:value="draft.module.b_name"
-                  /></a-form-item>
-                  <a-form-item label="上级模块">
-                    <a-select
-                      v-model:value="draft.module.b_parent_id"
-                      allow-clear
-                      show-search
-                      option-filter-prop="label"
-                      :options="parentOptions"
-                    />
-                  </a-form-item>
-                  <a-form-item label="页面路由（可选）"
-                    ><a-input
-                      :value="draft.module.b_route"
-                      placeholder="不填写时作为数据模块使用"
-                      @update:value="updateRoute"
-                  /></a-form-item>
-                  <a-form-item label="多语言键"
-                    ><a-input v-model:value="draft.module.b_i18n"
-                  /></a-form-item>
-                  <a-form-item label="查询表或视图"
-                    ><a-input v-model:value="draft.module.b_viewtable"
-                  /></a-form-item>
-                  <a-form-item label="保存表"
-                    ><a-input v-model:value="draft.module.b_savetable"
-                  /></a-form-item>
-                  <a-form-item label="主键字段"
-                    ><a-input v-model:value="draft.module.b_keyfield"
-                  /></a-form-item>
-                  <a-form-item label="排序字段"
-                    ><a-input v-model:value="draft.module.b_orderfield"
-                  /></a-form-item>
-                  <a-form-item label="排序方向">
-                    <a-segmented
-                      v-model:value="draft.module.b_ordertype"
-                      :options="['ASC', 'DESC']"
-                    />
-                  </a-form-item>
-                  <a-form-item label="显示顺序"
-                    ><a-input-number v-model:value="draft.module.b_xh" :min="0"
-                  /></a-form-item>
-                </div>
-              </a-form>
+              <template #tab>
+                <span class="tab-label"><FileText :size="15" />基本信息</span>
+              </template>
+              <ModuleBasicInfoPanel
+                v-model:module="draft.module"
+                :directory-parent-options="directoryParentOptions"
+                :is-new="isNew"
+                :parent-options="parentOptions"
+                @update-module-id="updateModuleId"
+              />
             </a-tab-pane>
-
             <a-tab-pane key="fields">
-              <template #tab
-                ><span class="tab-label"
-                  ><Database :size="15" />字段定义 <a-badge :count="draft.fields.length" /></span
-              ></template>
-              <div class="table-pane" @click="leaveFieldEdit">
-                <div class="table-toolbar">
-                  <a-button type="primary" ghost :disabled="!canSave" @click="addField"
-                    ><Plus :size="15" />新增字段</a-button
-                  >
-                  <a-popconfirm title="确定删除选中的字段吗？" @confirm="deleteSelectedFields">
-                    <a-button danger :disabled="!canSave || !selectedFieldKeys.length"
-                      ><Trash2 :size="15" />批量删除 ({{ selectedFieldKeys.length }})</a-button
-                    >
-                  </a-popconfirm>
-                </div>
-                <div
-                  ref="fieldTableAreaRef"
-                  class="table-body-wrap"
-                  :style="{ '--table-body-height': `${fieldTableScrollY}px` }"
-                >
-                  <a-table
-                    :columns="fieldColumns"
-                    :data-source="draft.fields"
-                    :pagination="false"
-                    row-key="b_id"
-                    size="small"
-                    :scroll="{ x: 'max-content', y: fieldTableScrollY }"
-                    :row-class-name="
-                      (record) => (String(record.b_id) === editingFieldId ? 'editing-row' : '')
-                    "
-                    :row-selection="{
-                      selectedRowKeys: selectedFieldKeys,
-                      onChange: onFieldSelectChange,
-                      columnWidth: 40,
-                    }"
-                    @row="fieldRow"
-                  >
-                    <template #bodyCell="{ column, record }">
-                      <a-tooltip v-if="column.key === 'operation'" title="删除字段">
-                        <a-button
-                          type="text"
-                          danger
-                          @click.stop="draft.fields.splice(draft.fields.indexOf(record), 1)"
-                          ><Trash2 :size="15"
-                        /></a-button>
-                      </a-tooltip>
-                      <template v-else-if="String(record.b_id) === editingFieldId">
-                        <a-input v-if="column.key === 'b_field'" v-model:value="record.b_field" />
-                        <div v-else-if="column.key === 'b_name'" class="field-name-editor">
-                          <a-input
-                            :value="record.b_name"
-                            @update:value="setFieldTranslation(record, 'zh-CN', $event)"
-                          />
-                          <a-popover trigger="click" placement="bottomRight">
-                            <template #content>
-                              <a-space direction="vertical" size="small" style="width: 260px">
-                                <div v-for="locale in LOCALES" :key="locale.value">
-                                  <div class="locale-label">{{ locale.label }}</div>
-                                  <a-input
-                                    :value="fieldTranslationValue(record, locale.value)"
-                                    @update:value="
-                                      setFieldTranslation(record, locale.value, $event)
-                                    "
-                                  />
-                                </div>
-                              </a-space>
-                            </template>
-                            <a-button type="text" class="i18n-button" @click.stop>
-                              <Languages :size="15" />
-                            </a-button>
-                          </a-popover>
-                        </div>
-                        <a-select
-                          v-else-if="column.key === 'b_type'"
-                          v-model:value="record.b_type"
-                          :options="fieldTypes"
-                        />
-                        <a-switch
-                          v-else-if="
-                            [
-                              'b_canlist',
-                              'b_canform',
-                              'b_must',
-                              'b_canquery',
-                              'b_readonly',
-                            ].includes(column.key)
-                          "
-                          size="small"
-                          :checked="record[column.key] === 1"
-                          :disabled="column.key === 'b_must' && record.b_canform === 0"
-                          @change="setBoolean(record, column.key, $event)"
-                        />
-                        <a-input-number
-                          v-else-if="column.key === 'b_width'"
-                          v-model:value="record.b_width"
-                          :min="40"
-                        />
-                        <a-input-number
-                          v-else-if="column.key === 'b_xh'"
-                          v-model:value="record.b_xh"
-                          :min="0"
-                        />
-                      </template>
-                      <template v-else>
-                        <span v-if="column.key === 'b_field'" class="cell-code">{{
-                          record.b_field
-                        }}</span>
-                        <span v-else-if="column.key === 'b_name'" class="cell-name">
-                          {{ record.b_name }}<Languages v-if="record.b_i18n" :size="13" />
-                        </span>
-                        <span v-else-if="column.key === 'b_type'">{{
-                          fieldTypeLabel(record.b_type)
-                        }}</span>
-                        <a-switch
-                          v-else-if="
-                            [
-                              'b_canlist',
-                              'b_canform',
-                              'b_must',
-                              'b_canquery',
-                              'b_readonly',
-                            ].includes(column.key)
-                          "
-                          size="small"
-                          :checked="record[column.key] === 1"
-                          :disabled="true"
-                        />
-                        <span v-else-if="column.key === 'b_width'">{{
-                          record.b_width || "-"
-                        }}</span>
-                        <span v-else-if="column.key === 'b_xh'">{{ record.b_xh }}</span>
-                      </template>
-                    </template>
-                  </a-table>
-                </div>
-              </div>
+              <template #tab>
+                <span class="tab-label">
+                  <Database :size="15" />字段定义 <a-badge :count="draft.fields.length" />
+                </span>
+              </template>
+              <ModuleFieldDefinitionPanel
+                v-model:fields="draft.fields"
+                v-model:translations="draft.translations"
+                :can-save="canSave"
+                @add="addField"
+              />
             </a-tab-pane>
-
             <a-tab-pane key="powers">
-              <template #tab
-                ><span class="tab-label"
-                  ><ShieldCheck :size="15" />操作权限 <a-badge :count="draft.powers.length" /></span
-              ></template>
-              <div class="table-pane" @click="leavePowerEdit">
-                <div class="table-toolbar">
-                  <a-button type="primary" ghost :disabled="!canSave" @click="addPower"
-                    ><Plus :size="15" />新增权限</a-button
-                  >
-                  <a-popconfirm title="确定删除选中的权限吗？" @confirm="deleteSelectedPowers">
-                    <a-button danger :disabled="!canSave || !selectedPowerKeys.length"
-                      ><Trash2 :size="15" />批量删除 ({{ selectedPowerKeys.length }})</a-button
-                    >
-                  </a-popconfirm>
-                </div>
-                <div
-                  ref="powerTableAreaRef"
-                  class="table-body-wrap"
-                  :style="{ '--table-body-height': `${powerTableScrollY}px` }"
-                >
-                  <a-table
-                    :columns="powerColumns"
-                    :data-source="draft.powers"
-                    :pagination="false"
-                    row-key="b_id"
-                    size="small"
-                    :scroll="{ x: 'max-content', y: powerTableScrollY }"
-                    :row-class-name="
-                      (record) => (String(record.b_id) === editingPowerId ? 'editing-row' : '')
-                    "
-                    :row-selection="{
-                      selectedRowKeys: selectedPowerKeys,
-                      onChange: onPowerSelectChange,
-                      columnWidth: 40,
-                    }"
-                    @row="powerRow"
-                  >
-                    <template #bodyCell="{ column, record }">
-                      <a-tooltip v-if="column.key === 'operation'" title="删除权限">
-                        <a-button
-                          type="text"
-                          danger
-                          @click.stop="draft.powers.splice(draft.powers.indexOf(record), 1)"
-                          ><Trash2 :size="15"
-                        /></a-button>
-                      </a-tooltip>
-                      <template v-else-if="String(record.b_id) === editingPowerId">
-                        <a-input v-if="column.key === 'b_code'" v-model:value="record.b_code" />
-                        <a-input
-                          v-else-if="column.key === 'b_name'"
-                          v-model:value="record.b_name"
-                        />
-                        <a-input
-                          v-else-if="column.key === 'b_i18n'"
-                          v-model:value="record.b_i18n"
-                        />
-                        <a-switch
-                          v-else-if="column.key === 'b_canuse'"
-                          size="small"
-                          :checked="record.b_canuse === 1"
-                          @change="setBoolean(record, 'b_canuse', $event)"
-                        />
-                        <a-input-number
-                          v-else-if="column.key === 'b_xh'"
-                          v-model:value="record.b_xh"
-                          :min="0"
-                        />
-                      </template>
-                      <template v-else>
-                        <span v-if="column.key === 'b_code'" class="cell-code">{{
-                          record.b_code
-                        }}</span>
-                        <span v-else-if="column.key === 'b_name'">{{ record.b_name }}</span>
-                        <span v-else-if="column.key === 'b_i18n'" class="cell-code">{{
-                          record.b_i18n || "-"
-                        }}</span>
-                        <a-switch
-                          v-else-if="column.key === 'b_canuse'"
-                          size="small"
-                          :checked="record.b_canuse === 1"
-                          :disabled="true"
-                        />
-                        <span v-else-if="column.key === 'b_xh'">{{ record.b_xh }}</span>
-                      </template>
-                    </template>
-                  </a-table>
-                </div>
-              </div>
+              <template #tab>
+                <span class="tab-label">
+                  <ShieldCheck :size="15" />操作权限 <a-badge :count="draft.powers.length" />
+                </span>
+              </template>
+              <ModulePowerPanel v-model:powers="draft.powers" :can-save="canSave" @add="addPower" />
             </a-tab-pane>
-
             <a-tab-pane key="i18n">
-              <template #tab
-                ><span class="tab-label"><Languages :size="15" />多语言</span></template
-              >
-              <div class="table-pane" @click="leaveTranslationEdit">
-                <div class="table-toolbar">
-                  <template v-if="showI18nInput">
-                    <a-input
-                      v-model:value="newI18nKey"
-                      placeholder="输入多语言键名，回车确认"
-                      size="small"
-                      style="width: 240px"
-                      @press-enter="addCustomI18nKey"
-                    />
-                    <a-button
-                      type="primary"
-                      ghost
-                      size="small"
-                      :disabled="!newI18nKey.trim()"
-                      @click="addCustomI18nKey"
-                    >
-                      <Plus :size="15" />添加
-                    </a-button>
-                    <a-button size="small" @click="showI18nInput = false">取消</a-button>
-                  </template>
-                  <a-button
-                    v-else
-                    type="primary"
-                    ghost
-                    :disabled="!canSave"
-                    @click="showI18nInput = true"
-                  >
-                    <Plus :size="15" />新增多语言键
-                  </a-button>
-                </div>
-                <div class="translation-table">
-                  <div class="translation-head">
-                    <span>多语言键</span
-                    ><span v-for="locale in LOCALES" :key="locale.value">{{ locale.label }}</span>
-                  </div>
-                  <div
-                    v-for="key in rowKeys()"
-                    :key="key"
-                    class="translation-row"
-                    :class="{ 'translation-row--editing': editingTranslationKey === key }"
-                    @click="editingTranslationKey = key"
-                  >
-                    <code>{{ key }}</code>
-                    <template v-if="editingTranslationKey === key">
-                      <a-input
-                        v-for="locale in LOCALES"
-                        :key="locale.value"
-                        v-model:value="translationEntry(key)[locale.value]"
-                        :placeholder="locale.value === 'zh-CN' ? '必填' : '可选'"
-                      />
-                    </template>
-                    <template v-else>
-                      <span
-                        v-for="locale in LOCALES"
-                        :key="locale.value"
-                        class="translation-value"
-                        >{{ translationEntry(key)[locale.value] || "-" }}</span
-                      >
-                    </template>
-                  </div>
-                  <a-empty v-if="!rowKeys().length" description="当前模块没有多语言键" />
-                </div>
-              </div>
+              <template #tab>
+                <span class="tab-label"><Languages :size="15" />多语言</span>
+              </template>
+              <ModuleTranslationsPanel
+                v-model:custom-keys="customI18nKeys"
+                v-model:translations="draft.translations"
+                :can-save="canSave"
+                :keys="translationKeys"
+              />
             </a-tab-pane>
           </a-tabs>
         </template>
-        <a-empty v-else description="暂无模块数据" />
+        <a-empty v-else description="请选择模块，或右键树节点创建模块和页面" />
       </a-spin>
     </main>
 
     <a-modal
-      v-model:open="directoryOpen"
-      title="新增目录"
-      width="560px"
-      ok-text="创建"
+      v-model:open="deleteConfirmOpen"
+      title="删除模块"
+      ok-text="删除"
       cancel-text="取消"
-      :confirm-loading="directorySaving"
-      :mask="{ closable: false }"
-      destroy-on-hidden
-      @ok="createDirectory"
+      ok-type="danger"
+      :confirm-loading="saving"
+      @ok="deleteModule(pendingDeleteKey)"
     >
-      <a-form layout="vertical" class="directory-dialog-form">
-        <div class="dialog-grid">
-          <a-form-item label="目录代码" required>
-            <a-input :value="directoryForm.b_id" @update:value="updateDirectoryCode" />
-          </a-form-item>
-          <a-form-item label="目录名称" required>
-            <a-input v-model:value="directoryForm.b_name" />
-          </a-form-item>
-          <a-form-item label="上级目录">
-            <a-select
-              v-model:value="directoryForm.b_parent_id"
-              allow-clear
-              show-search
-              option-filter-prop="label"
-              :options="directoryParentOptions"
-            />
-          </a-form-item>
-          <a-form-item label="显示顺序">
-            <a-input-number v-model:value="directoryForm.b_xh" :min="0" />
-          </a-form-item>
-        </div>
-        <a-form-item label="多语言键">
-          <a-input v-model:value="directoryForm.b_i18n" />
-        </a-form-item>
-        <div class="dialog-switches">
-          <a-checkbox
-            :checked="directoryForm.b_canmenu === 1"
-            @change="directoryForm.b_canmenu = $event.target.checked ? 1 : 0"
-            >显示在菜单</a-checkbox
-          >
-          <a-checkbox
-            :checked="directoryForm.b_canuse === 1"
-            @change="directoryForm.b_canuse = $event.target.checked ? 1 : 0"
-            >启用目录</a-checkbox
-          >
-        </div>
-      </a-form>
+      <p>
+        确定删除
+        {{ pendingDeleteModule?.b_name || pendingDeleteKey }} 吗？关联字段、权限和多语言将一并删除。
+      </p>
     </a-modal>
   </div>
 </template>
@@ -1254,6 +674,7 @@ onBeforeUnmount(() => tableResizeObserver?.disconnect());
   border-radius: 6px;
   background: #fff;
 }
+
 .module-workspace {
   display: flex;
   height: 100%;
@@ -1263,271 +684,140 @@ onBeforeUnmount(() => tableResizeObserver?.disconnect());
   overflow: hidden;
   padding: 0 10px 6px;
 }
+
 .workspace-header {
   display: flex;
+  min-height: 56px;
   flex: 0 0 auto;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   flex-wrap: wrap;
-  min-height: 56px;
   padding: 6px 0;
   border-bottom: 1px solid #f0f0f0;
 }
-.header-switches {
-  flex: 0 0 auto;
+
+.header-switches,
+.switch-item,
+.title-line,
+.header-actions,
+.tab-label {
   display: flex;
   align-items: center;
+}
+
+.header-switches {
+  flex: 0 0 auto;
   gap: 16px;
   padding: 0 14px;
 }
+
 .switch-item {
-  display: flex;
-  align-items: center;
   gap: 8px;
 }
+
 .switch-label {
   color: #4b5563;
   font-size: 13px;
   white-space: nowrap;
 }
-.title-line,
-.header-actions,
-.tab-label,
-.table-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
+
 .title-line {
   gap: 9px;
 }
+
 h1 {
   margin: 0;
   color: #111827;
   font-size: 20px;
   line-height: 1.3;
 }
+
 .header-actions {
   flex-wrap: wrap;
   justify-content: flex-end;
   gap: 8px;
 }
-.workspace-tabs {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow: hidden;
-}
-.directory-editor {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow: auto;
-  padding-top: 10px;
-}
-.directory-form {
-  max-width: 760px;
-}
-.directory-grid,
-.dialog-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0 10px;
-}
-.dialog-switches {
-  display: flex;
-  gap: 20px;
-}
+
 .tab-label {
   gap: 6px;
 }
-.basic-form {
-  max-width: 1040px;
-  padding-top: 2px;
-}
-.form-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 0 10px;
-}
-.table-pane {
-  display: flex;
-  height: 100%;
-  min-height: 0;
-  flex-direction: column;
-  overflow: hidden;
-}
-.table-body-wrap {
-  flex: 1;
+
+.workspace-tabs {
   min-height: 0;
+  flex: 1 1 auto;
   overflow: hidden;
 }
 
-.table-toolbar {
-  flex: 0 0 auto;
-  justify-content: flex-start;
-  min-height: 40px;
-  margin-bottom: 4px;
-}
-.translation-table {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow: auto;
-  border: 1px solid #e5e7eb;
-  border-radius: 6px;
-}
-.translation-head,
-.translation-row {
-  display: grid;
-  grid-template-columns: minmax(220px, 1.3fr) repeat(3, minmax(160px, 1fr));
-  gap: 12px;
-  align-items: center;
-  min-width: 800px;
-  padding: 7px 10px;
-}
-.translation-head {
-  position: sticky;
-  z-index: 1;
-  top: 0;
-  background: #f9fafb;
-  color: #4b5563;
-  font-size: 12px;
-  font-weight: 600;
-}
-.translation-row {
-  border-top: 1px solid #f0f0f0;
-}
-.translation-row code {
-  overflow: hidden;
-  color: #374151;
-  font-size: 12px;
-  text-overflow: ellipsis;
-}
-.translation-row {
-  cursor: pointer;
-}
-.translation-row--editing,
-:deep(.editing-row > td) {
-  background: #f0f7ff !important;
-}
-.translation-value {
-  overflow: hidden;
-  color: #4b5563;
-  font-size: 12px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.field-name-editor,
-.cell-name {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-.field-name-editor .ant-input {
-  min-width: 0;
-}
-.i18n-button {
-  flex: 0 0 auto;
-  padding-inline: 5px;
-}
-.cell-name svg {
-  flex: 0 0 auto;
-  color: #8c8c8c;
-}
-.cell-code {
-  color: #475569;
-  font-family: Consolas, monospace;
-  font-size: 12px;
-}
 :deep(.ant-spin-nested-loading),
 :deep(.ant-spin-container) {
   height: 100%;
   min-height: 0;
 }
+
+:deep(.module-workspace > .ant-spin) {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+:deep(.module-workspace > .ant-spin > .ant-spin-container),
 :deep(.module-workspace > .ant-spin-nested-loading > .ant-spin-container) {
   display: flex;
-  flex-direction: column;
-}
-:deep(.workspace-tabs > .ant-tabs-body-holder) {
-  flex: 1 1 auto;
+  height: 100%;
   min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  overflow: hidden;
 }
+
+:deep(.workspace-tabs > .ant-tabs-body-holder) {
+  min-height: 0;
+  flex: 1 1 auto;
+}
+
 :deep(.workspace-tabs > .ant-tabs-body-holder > .ant-tabs-body),
 :deep(.workspace-tabs > .ant-tabs-body-holder > .ant-tabs-body > .ant-tabs-content),
 :deep(.workspace-tabs .ant-tabs-tabpane) {
   height: 100%;
   min-height: 0;
 }
+
 :deep(.workspace-tabs .ant-tabs-tabpane) {
-  overflow: auto;
-}
-:deep(.workspace-tabs .ant-tabs-tabpane:has(.table-pane)),
-:deep(.workspace-tabs .ant-tabs-tabpane:has(.translation-table)) {
+  display: flex;
+  flex-direction: column;
   overflow: hidden;
 }
+
 :deep(.workspace-tabs > .ant-tabs-nav) {
   flex: 0 0 auto;
   margin-bottom: 4px;
 }
-:deep(.table-body-wrap .ant-table-wrapper),
-:deep(.table-body-wrap .ant-table),
-:deep(.table-body-wrap .ant-table-container) {
-  height: 100%;
-  min-height: 0;
-}
-:deep(.table-body-wrap .ant-table-container) {
-  display: flex;
-  flex-direction: column;
-}
-:deep(.table-body-wrap .ant-table-header) {
-  flex: 0 0 auto;
-}
-:deep(.table-body-wrap .ant-table-body) {
-  flex: 1 1 auto;
-  height: var(--table-body-height);
-  min-height: var(--table-body-height);
-  overflow-y: auto !important;
-}
-:deep(.basic-form .ant-form-item) {
-  margin-bottom: 8px;
-}
-:deep(.directory-form .ant-form-item),
-:deep(.directory-dialog-form .ant-form-item) {
-  margin-bottom: 10px;
-}
-:deep(.ant-table-row) {
-  cursor: pointer;
-}
-:deep(.ant-table-cell .ant-input-number),
-:deep(.ant-table-cell .ant-select) {
-  width: 100%;
-}
+
 @media (max-width: 980px) {
   .module-management {
     grid-template-columns: 220px minmax(0, 1fr);
   }
+
   .workspace-header {
     align-items: flex-start;
     flex-direction: column;
     padding-block: 8px;
   }
-  .form-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
 }
+
 @media (max-width: 720px) {
   .module-management {
     grid-template-rows: 180px minmax(0, 1fr);
     grid-template-columns: 1fr;
   }
+
   .module-workspace {
     padding: 0 8px 8px;
   }
-  .form-grid {
-    grid-template-columns: 1fr;
-  }
-  .directory-grid,
-  .dialog-grid {
-    grid-template-columns: 1fr;
-  }
 }
 </style>
diff --git a/code/fms/fms-vue/src/views/module-management/components/ModuleBasicInfoPanel.vue b/code/fms/fms-vue/src/views/module-management/components/ModuleBasicInfoPanel.vue
new file mode 100644
index 00000000..d3cdf8c6
--- /dev/null
+++ b/code/fms/fms-vue/src/views/module-management/components/ModuleBasicInfoPanel.vue
@@ -0,0 +1,143 @@
+<script setup>
+const props = defineProps({
+  directoryParentOptions: { type: Array, default: () => [] },
+  isNew: Boolean,
+  parentOptions: { type: Array, default: () => [] },
+});
+const emit = defineEmits(["update-module-id"]);
+const module = defineModel("module", { type: Object, default: null });
+
+function updateRoute(value) {
+  module.value.b_route = value || null;
+  if (!String(value || "").trim()) module.value.b_canmenu = 0;
+}
+</script>
+
+<template>
+  <section v-if="module" class="module-basic-info">
+    <a-form v-if="module.b_type === 'directory'" layout="vertical" class="directory-form">
+      <div class="directory-grid">
+        <a-form-item label="模块编码" required>
+          <a-input :value="module.b_id" disabled />
+        </a-form-item>
+        <a-form-item label="模块名称" required>
+          <a-input v-model:value="module.b_name" />
+        </a-form-item>
+        <a-form-item label="上级模块">
+          <a-select
+            v-model:value="module.b_parent_id"
+            allow-clear
+            show-search
+            option-filter-prop="label"
+            :options="directoryParentOptions.filter((item) => item.value !== module.b_id)"
+          />
+        </a-form-item>
+        <a-form-item label="多语言键">
+          <a-input v-model:value="module.b_i18n" />
+        </a-form-item>
+        <a-form-item label="显示顺序">
+          <a-input-number v-model:value="module.b_xh" :min="0" />
+        </a-form-item>
+      </div>
+    </a-form>
+
+    <a-form v-else layout="vertical" class="basic-form">
+      <div class="form-grid">
+        <a-form-item label="模块编码" required>
+          <a-input
+            :value="module.b_id"
+            :disabled="!isNew"
+            @update:value="emit('update-module-id', $event)"
+          />
+        </a-form-item>
+        <a-form-item label="模块名称" required>
+          <a-input v-model:value="module.b_name" />
+        </a-form-item>
+        <a-form-item label="上级模块">
+          <a-select
+            v-model:value="module.b_parent_id"
+            allow-clear
+            show-search
+            option-filter-prop="label"
+            :options="parentOptions"
+          />
+        </a-form-item>
+        <a-form-item label="页面路由（可选）">
+          <a-input
+            :value="module.b_route"
+            placeholder="留空时作为数据模块使用"
+            @update:value="updateRoute"
+          />
+        </a-form-item>
+        <a-form-item label="多语言键">
+          <a-input v-model:value="module.b_i18n" />
+        </a-form-item>
+        <a-form-item label="查询表或视图">
+          <a-input v-model:value="module.b_viewtable" />
+        </a-form-item>
+        <a-form-item label="保存表">
+          <a-input v-model:value="module.b_savetable" />
+        </a-form-item>
+        <a-form-item label="主键字段">
+          <a-input v-model:value="module.b_keyfield" />
+        </a-form-item>
+        <a-form-item label="排序字段">
+          <a-input v-model:value="module.b_orderfield" />
+        </a-form-item>
+        <a-form-item label="排序方向">
+          <a-segmented v-model:value="module.b_ordertype" :options="['ASC', 'DESC']" />
+        </a-form-item>
+        <a-form-item label="显示顺序">
+          <a-input-number v-model:value="module.b_xh" :min="0" />
+        </a-form-item>
+      </div>
+    </a-form>
+  </section>
+</template>
+
+<style scoped>
+.module-basic-info {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  padding-top: 10px;
+}
+
+.directory-form {
+  max-width: 760px;
+}
+
+.basic-form {
+  max-width: 1040px;
+  padding-top: 2px;
+}
+
+.directory-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0 10px;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0 10px;
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 8px;
+}
+
+@media (max-width: 980px) {
+  .form-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 720px) {
+  .directory-grid,
+  .form-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/code/fms/fms-vue/src/views/module-management/components/ModuleFieldDefinitionPanel.vue b/code/fms/fms-vue/src/views/module-management/components/ModuleFieldDefinitionPanel.vue
new file mode 100644
index 00000000..aa3e645a
--- /dev/null
+++ b/code/fms/fms-vue/src/views/module-management/components/ModuleFieldDefinitionPanel.vue
@@ -0,0 +1,248 @@
+<script setup>
+import { computed, ref } from "vue";
+import { Languages, Plus, Trash2 } from "@lucide/vue";
+import { LOCALES } from "../../../services/moduleManagement";
+import AutoHeightTable from "../../../components/AutoHeightTable.vue";
+
+defineProps({
+  canSave: Boolean,
+});
+const emit = defineEmits(["add"]);
+const fields = defineModel("fields", { type: Array, default: () => [] });
+const translations = defineModel("translations", { type: Object, default: () => ({}) });
+
+const editingFieldId = ref("");
+const selectedFieldKeys = ref([]);
+const columns = [
+  { title: "字段", key: "b_field", width: 150 },
+  { title: "名称", key: "b_name", width: 150 },
+  { title: "类型", key: "b_type", width: 120 },
+  { title: "列表", key: "b_canlist", width: 64, align: "center" },
+  { title: "表单", key: "b_canform", width: 64, align: "center" },
+  { title: "必填", key: "b_must", width: 64, align: "center" },
+  { title: "查询", key: "b_canquery", width: 64, align: "center" },
+  { title: "只读", key: "b_readonly", width: 64, align: "center" },
+  { title: "宽度", key: "b_width", width: 90 },
+  { title: "顺序", key: "b_xh", width: 80 },
+  { title: "操作", key: "operation", width: 58, fixed: "right" },
+];
+const fieldTypes = [
+  ["string", "单行文本"],
+  ["text", "多行文本"],
+  ["number", "数字"],
+  ["select", "选择"],
+  ["date", "日期"],
+  ["boolean", "布尔"],
+].map(([value, label]) => ({ value, label }));
+const rowSelection = computed(() => ({
+  selectedRowKeys: selectedFieldKeys.value,
+  onChange: (keys) => {
+    selectedFieldKeys.value = keys;
+  },
+  columnWidth: 40,
+}));
+
+function translationEntry(key) {
+  translations.value[key] ||= {};
+  return translations.value[key];
+}
+
+function setFieldTranslation(record, locale, value) {
+  translationEntry(record.b_i18n)[locale] = value;
+  if (locale === "zh-CN") record.b_name = value;
+}
+
+function fieldTranslationValue(record, locale) {
+  return translationEntry(record.b_i18n)[locale] ?? (locale === "zh-CN" ? record.b_name : "");
+}
+
+function fieldTypeLabel(value) {
+  return fieldTypes.find((item) => item.value === value)?.label || value;
+}
+
+function setBoolean(record, field, checked) {
+  record[field] = checked ? 1 : 0;
+  if (field === "b_canform" && !checked) record.b_must = 0;
+}
+
+function fieldRow(record) {
+  return {
+    onClick: () => {
+      editingFieldId.value = String(record.b_id);
+    },
+  };
+}
+
+function leaveEdit(event) {
+  if (!event.target.closest(".ant-table-row")) editingFieldId.value = "";
+}
+
+function removeField(record) {
+  fields.value = fields.value.filter((item) => String(item.b_id) !== String(record.b_id));
+  selectedFieldKeys.value = selectedFieldKeys.value.filter(
+    (key) => String(key) !== String(record.b_id),
+  );
+}
+
+function deleteSelectedFields() {
+  const ids = new Set(selectedFieldKeys.value.map(String));
+  fields.value = fields.value.filter((item) => !ids.has(String(item.b_id)));
+  selectedFieldKeys.value = [];
+}
+</script>
+
+<template>
+  <section class="table-pane" @click="leaveEdit">
+    <div class="table-toolbar">
+      <a-button type="primary" ghost :disabled="!canSave" @click="emit('add')">
+        <Plus :size="15" />新增字段
+      </a-button>
+      <a-popconfirm title="确定删除选中的字段吗？" @confirm="deleteSelectedFields">
+        <a-button danger :disabled="!canSave || !selectedFieldKeys.length">
+          <Trash2 :size="15" />批量删除 ({{ selectedFieldKeys.length }})
+        </a-button>
+      </a-popconfirm>
+    </div>
+
+    <AutoHeightTable
+      :columns="columns"
+      :data-source="fields"
+      :pagination="false"
+      :row-class-name="(record) => (String(record.b_id) === editingFieldId ? 'editing-row' : '')"
+      :row-selection="rowSelection"
+      row-key="b_id"
+      @row="fieldRow"
+    >
+      <template #bodyCell="{ column, record }">
+        <a-tooltip v-if="column.key === 'operation'" title="删除字段">
+          <a-button type="text" danger @click.stop="removeField(record)">
+            <Trash2 :size="15" />
+          </a-button>
+        </a-tooltip>
+
+        <template v-else-if="String(record.b_id) === editingFieldId">
+          <a-input v-if="column.key === 'b_field'" v-model:value="record.b_field" />
+          <div v-else-if="column.key === 'b_name'" class="field-name-editor">
+            <a-input
+              :value="record.b_name"
+              @update:value="setFieldTranslation(record, 'zh-CN', $event)"
+            />
+            <a-popover trigger="click" placement="bottomRight">
+              <template #content>
+                <a-space direction="vertical" size="small" style="width: 260px">
+                  <div v-for="locale in LOCALES" :key="locale.value">
+                    <div class="locale-label">{{ locale.label }}</div>
+                    <a-input
+                      :value="fieldTranslationValue(record, locale.value)"
+                      @update:value="setFieldTranslation(record, locale.value, $event)"
+                    />
+                  </div>
+                </a-space>
+              </template>
+              <a-button type="text" class="i18n-button" @click.stop>
+                <Languages :size="15" />
+              </a-button>
+            </a-popover>
+          </div>
+          <a-select
+            v-else-if="column.key === 'b_type'"
+            v-model:value="record.b_type"
+            :options="fieldTypes"
+          />
+          <a-switch
+            v-else-if="
+              ['b_canlist', 'b_canform', 'b_must', 'b_canquery', 'b_readonly'].includes(column.key)
+            "
+            size="small"
+            :checked="record[column.key] === 1"
+            :disabled="column.key === 'b_must' && record.b_canform === 0"
+            @change="setBoolean(record, column.key, $event)"
+          />
+          <a-input-number
+            v-else-if="column.key === 'b_width'"
+            v-model:value="record.b_width"
+            :min="40"
+          />
+          <a-input-number v-else-if="column.key === 'b_xh'" v-model:value="record.b_xh" :min="0" />
+        </template>
+
+        <template v-else>
+          <span v-if="column.key === 'b_field'" class="cell-code">{{ record.b_field }}</span>
+          <span v-else-if="column.key === 'b_name'" class="cell-name">
+            {{ record.b_name }}<Languages v-if="record.b_i18n" :size="13" />
+          </span>
+          <span v-else-if="column.key === 'b_type'">{{ fieldTypeLabel(record.b_type) }}</span>
+          <a-switch
+            v-else-if="
+              ['b_canlist', 'b_canform', 'b_must', 'b_canquery', 'b_readonly'].includes(column.key)
+            "
+            size="small"
+            :checked="record[column.key] === 1"
+            disabled
+          />
+          <span v-else-if="column.key === 'b_width'">{{ record.b_width || "-" }}</span>
+          <span v-else-if="column.key === 'b_xh'">{{ record.b_xh }}</span>
+        </template>
+      </template>
+    </AutoHeightTable>
+  </section>
+</template>
+
+<style scoped>
+.table-pane {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.table-toolbar {
+  display: flex;
+  min-height: 40px;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.field-name-editor,
+.cell-name {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.field-name-editor .ant-input {
+  min-width: 0;
+}
+
+.i18n-button {
+  flex: 0 0 auto;
+  padding-inline: 5px;
+}
+
+.cell-name svg {
+  flex: 0 0 auto;
+  color: #8c8c8c;
+}
+
+.cell-code {
+  color: #475569;
+  font-family: Consolas, monospace;
+  font-size: 12px;
+}
+
+:deep(.editing-row > td) {
+  background: #f0f7ff !important;
+}
+
+:deep(.ant-table-row) {
+  cursor: pointer;
+}
+
+:deep(.ant-table-cell .ant-input-number),
+:deep(.ant-table-cell .ant-select) {
+  width: 100%;
+}
+</style>
diff --git a/code/fms/fms-vue/src/views/module-management/components/ModulePowerPanel.vue b/code/fms/fms-vue/src/views/module-management/components/ModulePowerPanel.vue
new file mode 100644
index 00000000..177aa9be
--- /dev/null
+++ b/code/fms/fms-vue/src/views/module-management/components/ModulePowerPanel.vue
@@ -0,0 +1,156 @@
+<script setup>
+import { computed, ref } from "vue";
+import { Plus, Trash2 } from "@lucide/vue";
+import AutoHeightTable from "../../../components/AutoHeightTable.vue";
+
+defineProps({
+  canSave: Boolean,
+});
+const emit = defineEmits(["add"]);
+const powers = defineModel("powers", { type: Array, default: () => [] });
+
+const editingPowerId = ref("");
+const selectedPowerKeys = ref([]);
+const columns = [
+  { title: "权限代码", key: "b_code", width: 180 },
+  { title: "名称", key: "b_name", width: 200 },
+  { title: "多语言键", key: "b_i18n" },
+  { title: "启用", key: "b_canuse", width: 74, align: "center" },
+  { title: "顺序", key: "b_xh", width: 90 },
+  { title: "操作", key: "operation", width: 58 },
+];
+const rowSelection = computed(() => ({
+  selectedRowKeys: selectedPowerKeys.value,
+  onChange: (keys) => {
+    selectedPowerKeys.value = keys;
+  },
+  columnWidth: 40,
+}));
+
+function setBoolean(record, field, checked) {
+  record[field] = checked ? 1 : 0;
+}
+
+function powerRow(record) {
+  return {
+    onClick: () => {
+      editingPowerId.value = String(record.b_id);
+    },
+  };
+}
+
+function leaveEdit(event) {
+  if (!event.target.closest(".ant-table-row")) editingPowerId.value = "";
+}
+
+function removePower(record) {
+  powers.value = powers.value.filter((item) => String(item.b_id) !== String(record.b_id));
+  selectedPowerKeys.value = selectedPowerKeys.value.filter(
+    (key) => String(key) !== String(record.b_id),
+  );
+}
+
+function deleteSelectedPowers() {
+  const ids = new Set(selectedPowerKeys.value.map(String));
+  powers.value = powers.value.filter((item) => !ids.has(String(item.b_id)));
+  selectedPowerKeys.value = [];
+}
+</script>
+
+<template>
+  <section class="table-pane" @click="leaveEdit">
+    <div class="table-toolbar">
+      <a-button type="primary" ghost :disabled="!canSave" @click="emit('add')">
+        <Plus :size="15" />新增权限
+      </a-button>
+      <a-popconfirm title="确定删除选中的权限吗？" @confirm="deleteSelectedPowers">
+        <a-button danger :disabled="!canSave || !selectedPowerKeys.length">
+          <Trash2 :size="15" />批量删除 ({{ selectedPowerKeys.length }})
+        </a-button>
+      </a-popconfirm>
+    </div>
+
+    <AutoHeightTable
+      :columns="columns"
+      :data-source="powers"
+      :pagination="false"
+      :row-class-name="(record) => (String(record.b_id) === editingPowerId ? 'editing-row' : '')"
+      :row-selection="rowSelection"
+      row-key="b_id"
+      @row="powerRow"
+    >
+      <template #bodyCell="{ column, record }">
+        <a-tooltip v-if="column.key === 'operation'" title="删除权限">
+          <a-button type="text" danger @click.stop="removePower(record)">
+            <Trash2 :size="15" />
+          </a-button>
+        </a-tooltip>
+
+        <template v-else-if="String(record.b_id) === editingPowerId">
+          <a-input v-if="column.key === 'b_code'" v-model:value="record.b_code" />
+          <a-input v-else-if="column.key === 'b_name'" v-model:value="record.b_name" />
+          <a-input v-else-if="column.key === 'b_i18n'" v-model:value="record.b_i18n" />
+          <a-switch
+            v-else-if="column.key === 'b_canuse'"
+            size="small"
+            :checked="record.b_canuse === 1"
+            @change="setBoolean(record, 'b_canuse', $event)"
+          />
+          <a-input-number v-else-if="column.key === 'b_xh'" v-model:value="record.b_xh" :min="0" />
+        </template>
+
+        <template v-else>
+          <span v-if="column.key === 'b_code'" class="cell-code">{{ record.b_code }}</span>
+          <span v-else-if="column.key === 'b_name'">{{ record.b_name }}</span>
+          <span v-else-if="column.key === 'b_i18n'" class="cell-code">
+            {{ record.b_i18n || "-" }}
+          </span>
+          <a-switch
+            v-else-if="column.key === 'b_canuse'"
+            size="small"
+            :checked="record.b_canuse === 1"
+            disabled
+          />
+          <span v-else-if="column.key === 'b_xh'">{{ record.b_xh }}</span>
+        </template>
+      </template>
+    </AutoHeightTable>
+  </section>
+</template>
+
+<style scoped>
+.table-pane {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.table-toolbar {
+  display: flex;
+  min-height: 40px;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.cell-code {
+  color: #475569;
+  font-family: Consolas, monospace;
+  font-size: 12px;
+}
+
+:deep(.editing-row > td) {
+  background: #f0f7ff !important;
+}
+
+:deep(.ant-table-row) {
+  cursor: pointer;
+}
+
+:deep(.ant-table-cell .ant-input-number) {
+  width: 100%;
+}
+</style>
diff --git a/code/fms/fms-vue/src/views/module-management/components/ModuleTranslationsPanel.vue b/code/fms/fms-vue/src/views/module-management/components/ModuleTranslationsPanel.vue
new file mode 100644
index 00000000..eb1b0efd
--- /dev/null
+++ b/code/fms/fms-vue/src/views/module-management/components/ModuleTranslationsPanel.vue
@@ -0,0 +1,140 @@
+<script setup>
+import { computed, ref } from "vue";
+import { Plus, Trash2 } from "@lucide/vue";
+import { App } from "antdv-next";
+import { LOCALES } from "../../../services/moduleManagement";
+import AutoHeightTable from "../../../components/AutoHeightTable.vue";
+
+const props = defineProps({
+  canSave: Boolean,
+  keys: { type: Array, default: () => [] },
+});
+const customKeys = defineModel("customKeys", { type: Array, default: () => [] });
+const translations = defineModel("translations", { type: Object, default: () => ({}) });
+const { message } = App.useApp();
+
+const newI18nKey = ref("");
+const showI18nInput = ref(false);
+const columns = [
+  { title: "多语言键", key: "key", width: 280, fixed: "left" },
+  ...LOCALES.map((locale) => ({
+    title: locale.label,
+    key: locale.value,
+    width: 220,
+  })),
+  { title: "操作", key: "operation", width: 58, fixed: "right" },
+];
+const rows = computed(() =>
+  props.keys.map((key) => ({
+    key,
+    isCustom: customKeys.value.includes(key),
+  })),
+);
+
+function translationEntry(key) {
+  translations.value[key] ||= {};
+  return translations.value[key];
+}
+
+function setTranslation(key, locale, value) {
+  translationEntry(key)[locale] = value;
+}
+
+function addCustomKey() {
+  const key = newI18nKey.value.trim();
+  if (!key) return;
+  if (props.keys.includes(key)) {
+    message.warning("多语言键已存在");
+    return;
+  }
+
+  customKeys.value = [...customKeys.value, key];
+  translationEntry(key);
+  newI18nKey.value = "";
+  showI18nInput.value = false;
+}
+
+function removeCustomKey(key) {
+  customKeys.value = customKeys.value.filter((item) => item !== key);
+  delete translations.value[key];
+}
+</script>
+
+<template>
+  <section class="translation-pane">
+    <div class="table-toolbar">
+      <template v-if="showI18nInput">
+        <a-input
+          v-model:value="newI18nKey"
+          placeholder="输入多语言键名，回车确认"
+          size="small"
+          class="new-key-input"
+          @press-enter="addCustomKey"
+        />
+        <a-button
+          type="primary"
+          ghost
+          size="small"
+          :disabled="!newI18nKey.trim()"
+          @click="addCustomKey"
+        >
+          <Plus :size="15" />添加
+        </a-button>
+        <a-button size="small" @click="showI18nInput = false">取消</a-button>
+      </template>
+      <a-button v-else type="primary" ghost :disabled="!canSave" @click="showI18nInput = true">
+        <Plus :size="15" />新增多语言键
+      </a-button>
+    </div>
+
+    <AutoHeightTable :columns="columns" :data-source="rows" :pagination="false" row-key="key">
+      <template #bodyCell="{ column, record }">
+        <code v-if="column.key === 'key'" class="translation-key">{{ record.key }}</code>
+        <a-input
+          v-else-if="LOCALES.some((locale) => locale.value === column.key)"
+          :value="translationEntry(record.key)[column.key]"
+          size="small"
+          :placeholder="column.key === 'zh-CN' ? '必填' : '可选'"
+          @update:value="setTranslation(record.key, column.key, $event)"
+        />
+        <a-tooltip v-else-if="column.key === 'operation' && record.isCustom" title="删除多语言键">
+          <a-button type="text" danger @click="removeCustomKey(record.key)">
+            <Trash2 :size="15" />
+          </a-button>
+        </a-tooltip>
+      </template>
+      <template #emptyText>
+        <a-empty description="当前模块没有多语言键" />
+      </template>
+    </AutoHeightTable>
+  </section>
+</template>
+
+<style scoped>
+.translation-pane {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.table-toolbar {
+  display: flex;
+  min-height: 40px;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.new-key-input {
+  width: 260px;
+}
+
+.translation-key {
+  color: #374151;
+  font-family: Consolas, monospace;
+  font-size: 12px;
+}
+</style>
diff --git a/code/fms/fms-vue/src/views/module-management/components/ModuleTreePanel.vue b/code/fms/fms-vue/src/views/module-management/components/ModuleTreePanel.vue
index 837be50b..a2210c93 100644
--- a/code/fms/fms-vue/src/views/module-management/components/ModuleTreePanel.vue
+++ b/code/fms/fms-vue/src/views/module-management/components/ModuleTreePanel.vue
@@ -1,22 +1,17 @@
 <script setup>
 import { computed, ref } from "vue";
-import { FileText, Folder, Plus, RefreshCw, Search } from "@lucide/vue";
+import { RefreshCw, Search } from "@lucide/vue";
 
 const props = defineProps({
   modules: { type: Array, required: true },
   selectedKey: { type: String, default: "" },
   loading: Boolean,
   canCreate: Boolean,
+  canDelete: Boolean,
 });
-const emit = defineEmits(["select", "add", "refresh"]);
+const emit = defineEmits(["select", "add", "delete", "refresh"]);
 const searchText = ref("");
-const addMenu = {
-  items: [
-    { key: "module", label: "新增模块" },
-    { key: "directory", label: "新增目录" },
-  ],
-  onClick: ({ key }) => emit("add", key),
-};
+const contextNode = ref(null);
 
 const treeData = computed(() => {
   const keyword = searchText.value.trim().toLowerCase();
@@ -25,8 +20,8 @@ const treeData = computed(() => {
         props.modules
           .filter(
             (item) =>
-              item.b_id.toLowerCase().includes(keyword) ||
-              item.b_name.toLowerCase().includes(keyword),
+              String(item.b_id).toLowerCase().includes(keyword) ||
+              String(item.b_name).toLowerCase().includes(keyword),
           )
           .flatMap((item) => [item.b_id, item.b_parent_id]),
       )
@@ -43,16 +38,46 @@ const treeData = computed(() => {
       .map((item) => ({
         key: item.b_id,
         title: item.b_name,
-        code: item.b_id,
-        type: item.b_type,
         children: build(item.b_id),
       }));
+
   return build("__root__");
 });
 
 function onSelect(keys) {
   if (keys[0]) emit("select", keys[0]);
 }
+
+function onRightClick({ node }) {
+  contextNode.value = node;
+  emit("select", node.key);
+}
+
+const contextMenu = computed(() => {
+  const node = contextNode.value;
+  return {
+    items: [
+      { key: "module", label: "新增模块", disabled: !props.canCreate },
+      { key: "page", label: "新增页面", disabled: !props.canCreate },
+      { type: "divider" },
+      {
+        key: "delete",
+        label: "删除",
+        danger: true,
+        disabled: !node || !props.canDelete || ["M_SYSTEM", "M_MODULE"].includes(node.key),
+      },
+    ],
+    onClick: ({ key }) => {
+      if (!node) return;
+      if (key === "delete") {
+        emit("delete", node.key);
+        return;
+      }
+
+      emit("add", key, node.key);
+    },
+  };
+});
 </script>
 
 <template>
@@ -62,43 +87,29 @@ function onSelect(keys) {
         <strong>模块</strong>
         <span>{{ modules.length }}</span>
       </div>
-      <div class="tree-header-actions">
-        <a-tooltip title="新增">
-          <a-dropdown :menu="addMenu" :trigger="['click']" :disabled="!canCreate">
-            <a-button type="text" size="small" :disabled="!canCreate">
-              <Plus :size="16" />
-            </a-button>
-          </a-dropdown>
-        </a-tooltip>
-        <a-tooltip title="刷新">
-          <a-button type="text" size="small" :loading="loading" @click="emit('refresh')">
-            <RefreshCw :size="16" />
-          </a-button>
-        </a-tooltip>
-      </div>
+      <a-tooltip title="刷新">
+        <a-button type="text" size="small" :loading="loading" @click="emit('refresh')">
+          <RefreshCw :size="16" />
+        </a-button>
+      </a-tooltip>
     </header>
 
-    <a-input v-model:value="searchText" allow-clear placeholder="搜索名称或代码">
+    <a-input v-model:value="searchText" allow-clear size="small" placeholder="搜索名称或编码">
       <template #prefix><Search :size="15" /></template>
     </a-input>
 
-    <a-spin :spinning="loading">
-      <a-tree
-        block-node
-        default-expand-all
-        :tree-data="treeData"
-        :selected-keys="selectedKey ? [selectedKey] : []"
-        @select="onSelect"
-      >
-        <template #title="node">
-          <div class="tree-title">
-            <Folder v-if="node.type === 'directory'" :size="15" />
-            <FileText v-else :size="15" />
-            <span>{{ node.title }}</span>
-            <small>{{ node.code }}</small>
-          </div>
-        </template>
-      </a-tree>
+    <a-spin :spinning="loading" class="tree-spin">
+      <a-dropdown :menu="contextMenu" :trigger="['contextmenu']">
+        <a-tree
+          block-node
+          default-expand-all
+          show-line
+          :tree-data="treeData"
+          :selected-keys="selectedKey ? [selectedKey] : []"
+          @right-click="onRightClick"
+          @select="onSelect"
+        />
+      </a-dropdown>
     </a-spin>
   </aside>
 </template>
@@ -113,45 +124,34 @@ function onSelect(keys) {
   background: #fff;
   padding: 10px 8px;
 }
+
 header,
-header > div,
-.tree-title {
+header > div {
   display: flex;
   align-items: center;
 }
+
 header {
   justify-content: space-between;
 }
+
 header > div {
   gap: 8px;
 }
+
 header span {
   color: #8c8c8c;
   font-size: 12px;
 }
-.tree-header-actions {
-  gap: 4px;
-}
-.tree-title {
-  min-width: 0;
-  gap: 7px;
-}
-.tree-title span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.tree-title small {
-  margin-left: auto;
-  color: #9ca3af;
-  font-size: 10px;
-}
-:deep(.ant-spin-nested-loading) {
+
+.tree-spin {
   min-height: 0;
-  flex: 1;
+  flex: 1 1 auto;
   overflow: auto;
 }
-:deep(.ant-tree) {
-  background: transparent;
+
+:deep(.ant-spin-nested-loading),
+:deep(.ant-spin-container) {
+  min-height: 0;
 }
 </style>