# 需求
用户连续两轮反馈：
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 数据字典浏览器专属样式块