workspace/code/fms/.codebuddy/plans/module-management-subtable-layout_a041dfb1.md

name, overview, todos

name	overview	todos
module-management-subtable-layout	修复 module-management 模块管理页子表（字段/列表/表单/查询/权限/翻译）的布局：1) 让子表区域通过 flex:1 正确填满可用高度（表格宽高 100%）；2) 缩小各子表列宽，避免列沾满整个页面。	id content status fix-container-height 修复 index.vue 容器高度链，使子表区可纵向撑满 completed id content status dependencies constrain-table-width 调整 MetadataTablePanel 约束表格宽度跟随内容，避免列拉伸占满 completed fix-container-height id content status dependencies shrink-column-widths 缩小字段/列表/表单/权限/翻译/查询六个子表面板列宽至紧凑值 completed constrain-table-width

用户需求

module-management（模块配置）页面中涉及子表的地方布局不合理，需要修正：

1. 子表区域通过外层 flex:1 撑满可用高度，表格宽高 100%。
2. 各子表列宽缩小、不要过大，且不要拉伸占满整个页面。

产品概述

优化模块管理页各子表面板（字段定义、列表配置、表单配置、查询配置、操作权限、翻译）的布局与列宽。这些面板共用 MetadataTablePanel + 共享组件 FmsTable（基于 stk-table-vue），目标是让子表纵向铺满、列宽紧凑、不拉伸占满整页。基本信息（表单）不在本次范围。

核心功能

• 子表纵向填满：修复 index.vue 容器高度链，使表格区随内容区高度自适应铺满。
• 列宽紧凑化：缩小各子表列定义的 width 数值，避免列过宽。
• 表格不拉伸：确保列宽合计小于页面时，表格宽度跟随内容，不自动拉伸占满整页。

技术栈

• 前端：Vue 3 <script setup> + Vite + antdv-next + SCSS（scoped）
• 表格：共享组件 FmsTable（封装 stk-table-vue 的 StkTable），子表统一通过 MetadataTablePanel 使用
• 仅调整样式与列宽数值，不新增/修改任何后端接口或业务逻辑

实施方案

1. 高度链修复（主因）

当前 .metadata-page 是 grid，但只定义了 grid-template-columns，未定义行，导致 .workspace 高度塌缩为内容高度；其下游 .config-tabs 的 height: calc(100% - 58px) 与 MetadataTablePanel 的 height:100% / .table-body 的 flex:1 全部失效，表格区拿不到高度。

修复方式（仅 CSS）：

• .metadata-page 增加 grid-template-rows: minmax(0, 1fr)，让第二列行撑满。
• .workspace 改为 display:flex; flex-direction:column; height:100%，使 header + tabs 纵向堆叠并铺满。
• .workspace-spin 及其 .ant-spin-container（deep）改为 display:flex; flex-direction:column; flex:1; min-height:0。
• .config-tabs 用 display:flex; flex-direction:column; flex:1; min-height:0 替代 height: calc(100% - 58px)。
• MetadataTablePanel 结构已正确（.metadata-table-panel flex 列 + 无 height prop 时 height:100%；.table-body flex:1；FmsTable 已是 width/height:100%），高度链补通后即可纵向铺满。

2. 宽度不拉伸约束

FmsTable 是共享组件（还被 authorization-management / i18n-management / dashboard 使用），不可全局改宽。在 MetadataTablePanel 内以 scoped :deep 选择器约束表格宽度跟随内容，确保列宽合计小于页面时不被拉伸占满：

.table-body {
  flex: 1;
  min-height: 0;
  :deep(.fms-table) {
    width: fit-content;
    max-width: 100%;
    height: 100%;
  }
}

3. 列宽紧凑化

在各子表面板中把列 width 改为紧凑值，规则：顺序/开关类 60–80、短文本（编码/类型/字段名/标题/语言）120–150、中长文本（名称/默认值/提示/多语言键）160–220、长文本（说明/JSON/翻译内容）220–300。示例目标值：

• ModuleFieldsPanel：字段 130 / 默认名称 150 / 多语言键 200 / 字段类型 110 / 字典编码 130 / 默认值 150 / 说明 200 / 启用 64
• ModuleListPanel：节点类型 90 / 关联字段 170 / 上级分组 140 / 分组·列标题 160 / 标题多语言键 200 / 显示 64 / 顺序 70 / 列宽 70 / 显示类型 110 / 排序 64 / 表内编辑 80
• ModuleEditPanel：分组表（分组编码 140 / 默认标题 160 / 标题多语言键 200 / 顺序 70 / 启用 64）；编辑表（字段 170 / 编辑器 100 / 表单分组 140 / 输入提示 160 / 必填·只读·禁用·Form 各 64 / 顺序 70 / 栅格 70 / 编辑器JSON 240）
• ModulePowersPanel：操作编码 140 / 默认名称 160 / 多语言键 220 / 顺序 70 / 启用 64
• ModuleTranslationsPanel：多语言键 260 / 语言 130 / 翻译内容 300
• ModuleQueryPanel：字段 180 / 查询组件 120 / 操作符 90 / 默认值 200 / 顺序 70 / 启用 64

实施注意

• 仅改样式与列 width 数值，不改动保存/同步/临时 ID/校验等任何业务逻辑，保留用户未提交改动。
• 不修改 FmsTable.vue 全局宽度，避免影响其他管理页。
• 浏览器核对（不自行 build）：切换字段/列表/表单/查询/权限/翻译各 Tab 时表格纵向铺满、列不拉伸占满、必要时出现横向滚动而非撑满整页。
• 按开发规范，完成后不执行构建/测试，交付时说明未执行。

架构设计

布局容器链（自上而下高度传递）：

graph TD
  A[.metadata-page grid 行=1fr] --> B[.workspace flex column]
  B --> C[.workspace-spin flex:1]
  C --> D[header.workspace-header 固定]
  C --> E[.config-tabs flex:1]
  E --> F[.ant-tabs-tabpane height:100%]
  F --> G[MetadataTablePanel height:100% flex column]
  G --> H[.panel-toolbar 固定]
  G --> I[.table-body flex:1]
  I --> J[FmsTable width:fit-content height:100%]

目录结构

本次仅修改前端 module-management 下的样式与列宽，不影响后端与其他页面。

fms-vue/src/views/module-management/
├── index.vue                                              # [MODIFY] 修复容器高度链：.metadata-page 增加 grid-template-rows；.workspace 改 flex column；.workspace-spin 与 .config-tabs 用 flex:1 替代 calc，确保子表纵向铺满
└── components/
    ├── MetadataTablePanel.vue                            # [MODIFY] 以 scoped :deep(.fms-table) 约束表格 width:fit-content / max-width:100% / height:100%，防止列拉伸占满整页
    ├── ModuleFieldsPanel.vue                             # [MODIFY] 缩小字段定义各列 width 至紧凑值
    ├── ModuleListPanel.vue                               # [MODIFY] 缩小列表列/字段节点各列 width 至紧凑值
    ├── ModuleEditPanel.vue                               # [MODIFY] 缩小表单分组表与编辑字段表各列 width 至紧凑值
    ├── ModulePowersPanel.vue                             # [MODIFY] 缩小操作权限各列 width 至紧凑值
    ├── ModuleTranslationsPanel.vue                       # [MODIFY] 缩小翻译各列 width 至紧凑值
    └── ModuleQueryPanel.vue                              # [MODIFY] 缩小查询条件各列 width 至紧凑值