20260723173317
This commit is contained in:
oneao committed
1 parent
59b3ccfb1c
commit
5f73b54802
33 files changed
+3064
-2108
No files matched your search
@@ -0,0 +1,123 @@
|
||||
---
|
||||
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 至紧凑值
|
||||
```
|
||||
Reference in new issue
Block a user