Skip to content

D
db-tools
Commit edd3d2e5 authored by Data Governance Dev's avatar Data Governance Dev
Browse files
Options

style(web): 数据字典浏览器 — 表名 / 表注释 拆两列 + 优化外观 

# 需求
用户连续两轮反馈：
1. 「表名 / 注释」外观扁平、长字段名被截断（`bui_history_field_label_table`
   → `bui_history_field_labe...`）
2. 第一轮我把表名 + 表注释塞在同一 cell 两行后：「错了，两个表还是在同一行，
   只是显示表信息的那个表，表名和注释不要挤在一行，显得一行很高，
   我希望表名和表注释分两列显示」—— 用户要求真正拆成两列

# 修改

## 1. style.css — 新增「数据字典浏览器」专属样式块 (+62)
```css
.dict-pane       { display: flex; gap: 16px; }   /* 左右结构保持 */
.dict-pane-left  { flex: 0 0 560px; }             /* 360 → 480 → 560，容纳 4 列 */
.dict-pane-right { flex: 1; min-width: 0; }

.dict-name       { display: block; white-space: nowrap; overflow: hidden;
                    text-overflow: ellipsis; font-family: Consolas; }
.dict-name--field{ display: inline-block; max-width: 100%;
                    background: #f5f7fa; padding: 1px 6px; border-radius: 3px;
                    color: #e6a23c; white-space: nowrap;
                    overflow: hidden; text-overflow: ellipsis; }
.dict-comment    { font-size: 12px; color: #909399; margin-top: 6px;
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dict-comment--empty { font-style: italic; opacity: 0.6; }
```

## 2. index.html — 拆列 + 类替换 (+12 / -17)
- 「表名 / 注释」1 列 → 「表名」+「表注释」两列（min-width=220/180）
- `<style>` 块里 dict-pane 7 行样式删除（已迁去 style.css 集中管理）
- 字段数列 64 → 72，selection 列 40 → 44（按钮点击更稳）
- 右侧字段表：表名列 180 → 200，字段名列 160 → min-width=200，
  改用 dict-name / dict-name--field 类

# 验证（jsdom 全页 mock + click 测试连接）

header: 4 列
  [0] 表名       min-width=220
  [1] 表注释     min-width=180
  [2] 字段数     width=72
  [3] (selection) width=44，含全选 checkbox

body row[0]: 4 td
  td[0] "bui_history_field_label_table"   ← 表名
  td[1] "数据源标识表"                     ← 表注释
  td[2] "1"
  td[3] ""  has-checkbox=true             ← selection 列行复选框

body row[2]（无注释）：
  td[1] "（无注释）" + dict-comment--empty ← 斜体灰字 0.6 透明

# 兼容性
- dict-pane 仍为 flex-row 左右结构（用户明确要求保持）
- .dict-name-cell 类暂保留（无引用，后续可清理）
- selection 列放最后约束保持不变（见上一提交 a07db7bb）

# 文件清单
- docs/WORKLOG.md       | +129 工作记录（拆分两轮反馈）
- web/static/index.html | +12 / -17 列结构 + 类替换
- web/static/style.css  | +62 数据字典浏览器专属样式块
parent a07db7bb
Show whitespace changes
Inline Side-by-side
Showing with 207 additions and 18 deletions
docs/WORKLOG.md
View file @ edd3d2e5
......@@ -2,6 +2,135 @@
> 任务做完一次记一次。最近的在最上面。
## 2026-08-07 · 数据字典浏览器：表名 / 表注释 拆成两列
### 问题
用户对上一版（表名 + 表注释挤在同一 cell 内两行）不满意：
> "两个表还是在同一行，只是显示表信息的那个表，表名和注释不要挤在一行，显得一行很高，我希望表名和表注释分两列显示"
把表名 + 表注释挤在一个 cell 里（上下两行）虽然紧凑，但每个表一行占两个文本的高度，整体看起来行很高。
### 修复
把左侧表格的「表名 / 注释」一列拆成「表名」「表注释」两个独立列。这样每行只有 1 行内容，行高回到正常。
#### 1. index.html [index.html:148-167](web/static/index.html#L148-L167)
```html
<!-- 改前：1 列（dict-name-cell 内 2 行：表名 + 注释） -->
<el-table-column label="表名 / 注释" min-width="320">
<template #default="{ row }">
<div class="dict-name-cell">
<code class="dict-name">{{ row.table_name }}</code>
<div class="dict-comment">{{ row.table_comment }}</div>
</div>
</template>
</el-table-column>
<!-- 改后：2 列 -->
<el-table-column label="表名" min-width="220">
<template #default="{ row }">
<code class="dict-name" :title="row.table_name">{{ row.table_name }}</code>
</template>
</el-table-column>
<el-table-column label="表注释" min-width="180">
<template #default="{ row }">
<span v-if="row.table_comment" class="dict-comment">{{ row.table_comment }}</span>
<span v-else class="dict-comment dict-comment--empty">（无注释）</span>
</template>
</el-table-column>
```
#### 2. style.css [style.css:4](web/static/style.css#L4) — 4 列后容器要更宽
```css
.dict-pane-left { flex: 0 0 560px; } /* 480 → 560，容纳 220+180+72+44 = 516 + 边距 */
```
### 验证（jsdom 全页 mock + click 测试连接）
| 列 | header text | 备注 |
|------------------|-------------------|-----------------------------------|
| 1 | 表名 | min-width=220 |
| 2 | 表注释 | min-width=180 |
| 3 | 字段数 | width=72 |
| 4 | (selection) | width=44，行复选框 OK |
body 行 4 td：
```
[0] "bui_history_field_label_table" ← 表名
[1] "数据源标识表" ← 表注释
[2] "1" ← 字段数
[3] "" has-checkbox=true ← selection 列行复选框 OK
```
第 3 行无注释：`td[1] = "（无注释）"` + `dict-comment--empty` 类（斜体 0.6 透明）
### 兼容性
- `.dict-name-cell` 类保留但已无引用（如需清理可后续删除）
- `.dict-name` / `.dict-comment` 类被右侧字段表复用，仍在用
- selection 列放最后约束保持不变
### 未提交
按用户要求，待 review 后再提交。
## 2026-08-07 · 数据字典浏览器「表名 / 注释」外观扁平 + 长字段名截断
### 问题
用户反馈左侧「表名 / 注释」列：
1. 外观扁平 —— 行内元素挤在一起，缺少层次
2. 表名 / 注释会被截断（`bui_history_field_label_table` 显示成 `bui_history_field_labe...`）
3. 字段数太窄
### 根因
1. `dict-pane-left` 宽度只有 **360px**，扣除字段数 (64) + selection (40) + padding 后，
表名列只剩 ~230px，长字段名会被 `show-overflow-tooltip` ellipsis 截掉
2. 表名 / 注释用普通 `<div>`，没设 `white-space: nowrap`，容易在空格 / 中文处换行
3. 行内间距 `margin-top: 2px` 太紧，视觉扁平
### 修复
#### 1. style.css 新增数据字典浏览器专属样式 [style.css:1-58](web/static/style.css#L1-L58)
```css
.dict-pane-left { flex: 0 0 480px; } /* 360 → 480 */
.dict-name-cell { padding: 6px 0; line-height: 1.4; }
.dict-name {
display: block;
font-size: 13px; font-weight: 500;
font-family: Consolas / Monaco;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dict-name--field {
display: inline-block; max-width: 100%;
background: #f5f7fa; padding: 1px 6px; border-radius: 3px; color: #e6a23c;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dict-comment {
font-size: 12px; color: #909399;
margin-top: 6px; /* 2 → 6 */
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dict-comment--empty { font-style: italic; opacity: 0.6; }
```
#### 2. index.html 删 / 改 [index.html:7-16](web/static/index.html#L7-L16) / [index.html:148-167](web/static/index.html#L148-L167) / [index.html:178-191](web/static/index.html#L178-L191)
- `<style>` 块里 dict-pane 相关 7 行删除（移到 style.css 集中管理）
- 左侧表名 / 注释列：用 `class="dict-name-cell"` / `class="dict-name"` / `class="dict-comment"`
+ `:title` 属性（hover 显示完整值）
- 列宽调整：`表名/注释` 加 `min-width="320"`，`字段数` 64 → 72，selection 40 → 44
- 右侧字段表 `表名` 列 180 → 200，`字段名` 列 160 → `min-width=200`，用 `dict-name` / `dict-name--field` 类
### 验证（jsdom 全页 mock + 「全选」按钮 click）
| 元素 | computed style |
|-------------------|----------------------------------------------------------|
| `.dict-pane-left` | `flex-basis: 480px` |
| `.dict-name` | `white-space: nowrap; overflow: hidden; text-overflow: ellipsis` |
| `.dict-comment` | `white-space: nowrap; margin-top: 6px; color: rgb(144,147,153)` |
| `.dict-name--field` | `white-space: nowrap; max-width: 100%` |
| `.dict-comment--empty` | 「（无注释）」斜体 + opacity 0.6 |
### 兼容性
- `min-width` 在 column 上 el-table 会按容器剩余空间分配，不会撑破 dict-pane
- 表注释 hover 通过 `:title` 而不是 tooltip el-popper，更轻量
### 未提交
按用户要求，待 review 后再提交。
## 2026-08-07 · 修复左侧表格 selection 列不渲染
### 问题
......
web/static/index.html
View file @ edd3d2e5
......@@ -10,13 +10,8 @@
.field-link:hover { background-color: #ecf5ff; text-decoration: underline; }
.field-link--active { background-color: #409eff; color: #fff !important; }
.field-link--active code { color: #fff !important; }
/* 数据字典浏览器 */
.dict-pane { display: flex; gap: 16px; }
.dict-pane-left { flex: 0 0 360px; }
.dict-pane-right { flex: 1; min-width: 0; }
.dict-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
/* 数据字典浏览器样式见 style.css —— 避免此处重复 */
.dict-toolbar .el-input { flex: 1; }
.dict-status { font-size: 12px; color: #909399; }
</style>
<!-- 前端依赖全部本地化（避免 CDN 被墙/慢） -->
<!-- Element Plus CSS -->
......@@ -148,21 +143,24 @@
<!-- 注意：selection 列必须放在最后 —— 放在带 default slot 的列前面时，
Element Plus 会算错 header 的 colspan / scope，导致 body 行
的 selection cell 不渲染（只显示 header 的全选框）。 -->
<el-table-column label="表名 / 注释" show-overflow-tooltip>
<!-- 表名 / 表注释 分两列展示，避免挤在一个 cell 里导致行高过高 -->
<el-table-column label="表名" min-width="220" show-overflow-tooltip>
<template #default="{ row }">
<div>
<code style="color: #303133">{{ row.table_name }}</code>
<div v-if="row.table_comment" class="muted" style="font-size: 12px; margin-top: 2px">{{ row.table_comment }}</div>
<div v-else class="muted" style="font-size: 12px; margin-top: 2px; font-style: italic">（无注释）</div>
</div>
<code class="dict-name" :title="row.table_name">{{ row.table_name }}</code>
</template>
</el-table-column>
<el-table-column label="字段数" width="64" align="right">
<el-table-column label="表注释" min-width="180" show-overflow-tooltip>
<template #default="{ row }">
<span v-if="row.table_comment" class="dict-comment" :title="row.table_comment">{{ row.table_comment }}</span>
<span v-else class="dict-comment dict-comment--empty">（无注释）</span>
</template>
</el-table-column>
<el-table-column label="字段数" width="72" align="right">
<template #default="{ row }">
<el-tag size="small" type="info" effect="plain">{{ fieldCountByTable[row.table_name] || 0 }}</el-tag>
</template>
</el-table-column>
<el-table-column type="selection" width="40" reserve-selection />
<el-table-column type="selection" width="44" reserve-selection />
</el-table>
</div>
......@@ -180,14 +178,14 @@
<el-input v-model="fieldSearch" placeholder="按字段名 / 字段注释筛选" clearable size="small" style="flex: 0 0 240px" />
</div>
<el-table :data="filteredFields" stripe size="small" height="520">
<el-table-column prop="table_name" label="表名" width="180" show-overflow-tooltip fixed>
<el-table-column prop="table_name" label="表名" width="200" show-overflow-tooltip fixed>
<template #default="{ row }">
<code style="color: #303133">{{ row.table_name }}</code>
<code class="dict-name" :title="row.table_name">{{ row.table_name }}</code>
</template>
</el-table-column>
<el-table-column prop="column_name" label="字段名" width="160" show-overflow-tooltip>
<el-table-column prop="column_name" label="字段名" min-width="200" show-overflow-tooltip>
<template #default="{ row }">
<code style="background: #f5f7fa; padding: 1px 6px; border-radius: 3px; color: #e6a23c;">{{ row.column_name }}</code>
<code class="dict-name--field" :title="row.column_name">{{ row.column_name }}</code>
</template>
</el-table-column>
<el-table-column prop="column_type" label="类型" width="120">
......
web/static/style.css
View file @ edd3d2e5
/* ── 数据字典浏览器 ── */
.dict-pane {
display: flex;
gap: 16px;
}
.dict-pane-left {
flex: 0 0 560px; /* 4 列（表名 + 表注释 + 字段数 + selection）最小宽度约 520px，留出余量 */
}
.dict-pane-right {
flex: 1;
min-width: 0;
}
.dict-toolbar {
display: flex;
gap: 8px;
align-items: center;
margin-bottom: 8px;
}
.dict-status {
font-size: 12px;
color: #909399;
}
/* 表名 / 注释 单元格：单行 ellipsis + 加大垂直间距，避免视觉扁平 */
.dict-name-cell {
padding: 6px 0; /* 上下各 6px，比默认紧凑模式更舒展 */
line-height: 1.4;
}
.dict-name {
display: block;
color: #303133;
font-size: 13px;
font-weight: 500;
font-family: "Consolas", "Monaco", monospace;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dict-name--field {
display: inline-block;
max-width: 100%;
background: #f5f7fa;
padding: 1px 6px;
border-radius: 3px;
color: #e6a23c;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dict-comment {
font-size: 12px;
color: #909399;
margin-top: 6px; /* 表名 → 注释 之间留 6px 间距 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dict-comment--empty {
font-style: italic;
opacity: 0.6;
}
/* 数据分析工具样式 */
* {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment