123 lines
7.1 KiB
Markdown
123 lines
7.1 KiB
Markdown
---
|
||
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 至紧凑值
|
||
``` |