---
name: module-management-subtable-layout
overview: 修复 module-management 模块管理页子表（字段/列表/表单/查询/权限/翻译）的布局：1) 让子表区域通过 flex:1 正确填满可用高度（表格宽高 100%）；2) 缩小各子表列宽，避免列沾满整个页面。
todos:
  - id: fix-container-height
    content: 修复 index.vue 容器高度链，使子表区可纵向撑满
    status: completed
  - id: constrain-table-width
    content: 调整 MetadataTablePanel 约束表格宽度跟随内容，避免列拉伸占满
    status: completed
    dependencies:
      - fix-container-height
  - id: shrink-column-widths
    content: 缩小字段/列表/表单/权限/翻译/查询六个子表面板列宽至紧凑值
    status: completed
    dependencies:
      - 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 时表格纵向铺满、列不拉伸占满、必要时出现横向滚动而非撑满整页。
- 按开发规范，完成后不执行构建/测试，交付时说明未执行。

## 架构设计

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

```mermaid
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 至紧凑值
```