Archived
79 lines
5.0 KiB
Markdown
79 lines
5.0 KiB
Markdown
# 设计中心 · 数据域页面改版记录(2026-08-25)
|
|
|
|
> 范围:设计中心 · 数据域首页(`DataHome`)与对象详情子页(`ObjPage`)。
|
|
> 约束:不改功能、不改接口,只改布局与 UI;全程按 `docs/DESIGN-SPEC.md` 走
|
|
> (§15 诊断 → 第二部分规范 → §17 验收 → §18 token 表),用户逐轮验收定稿。
|
|
|
|
## 涉及文件
|
|
|
|
| 文件 | 改动性质 |
|
|
|---|---|
|
|
| `apps/web/src/features/gov-data/internal/panel.tsx` | DOM 结构与类名、汇总带、模式转置矩阵、取值呈现(空值/时间格式);无逻辑与取数改动 |
|
|
| `apps/web/src/app/styles/console.css` | 重写 `.g-actdata*`/`.g-tbl*`,新增 `.g-data` 与 `.g-obj` 作用域;`.g-kpi` 色条改 inset 阴影 |
|
|
| `apps/web/src/shared/gov/primitives.tsx` | `Kpi` 加可选 `hint` 属性(角标 info 气泡);其余件零改动 |
|
|
| `apps/web/vite.config.ts` | `/api` 代理默认指向测试服务器 `150.158.83.131:46100`,`API_PROXY_TARGET` 环境变量可覆盖(开发环境配置,非页面) |
|
|
|
|
共享组件(`.g-card`/`.g-rows`/`.g-dbtable`/`.g-dh` 等)本体未动,其余治理面板不受影响
|
|
—— 所有覆盖都在 `.g-data` / `.g-obj` 作用域内。
|
|
|
|
## 数据域首页(DataHome)
|
|
|
|
1. **隐藏「无人声明」区**(2026-08-24 用户定):壳表数据仍在接口 `unclaimed` 里,
|
|
只是不渲染;空态判断相应只看有声明表的活动。
|
|
2. **页顶汇总带**:声明活动 / 声明表 / 正式行 / 在办行四个 KPI,纯前端合计已有数据
|
|
(不另取数);口径只含活动声明的表,无人声明的壳表不计入。
|
|
每盒右上角 info 角标,悬停出纯 CSS 气泡(`data-tip` + `::after`)讲口径。
|
|
3. **表块形态**:灰底格子 → 清单行(一版)→ **白卡片**(用户定稿)—— 1px 描边 `#DFE3EA`、
|
|
圆角 8;卡内自上而下 = 表名+性质徽(右上 chevron)→ 22px 大数字行数(`tabular-nums`)→
|
|
mono 地址+主键单行截断(全文在 `title`)。
|
|
4. **卡片交互**:hover 三层反馈(描边变深 `#C4CCD8` + 洗底 `#F6F7F9` + 行数染主色),
|
|
active `scale(.99)` 按压感,箭头染色前移 2px;全部 `0.16s ease-out`。
|
|
5. **节奏**:活动卡组间距合成 32px(组内紧组间松),间距全取 8 的倍数。
|
|
|
|
## 对象详情子页(ObjPage)
|
|
|
|
1. **上下结构**(用户定稿):记录浏览在上整宽(进来先看行数据),模式在下整宽;
|
|
主从两栏试过一版,两栏互相挤压,撤了。
|
|
2. **两个小节同构**:小标题都在盒子外(`Sec` 段标题),下面各一个白底描边圆角盒;
|
|
「模式」从 `Card` 换成 `Sec`,盒子描边挪给矩阵容器 `.g-sx`。
|
|
3. **记录浏览表**:套上白卡;斑马纹(偶数行 `#F8FAFC`)+ 行线 `#E2E7EE` +
|
|
列间发丝竖线 `#EEF1F5`;长 JSON 单元格单行截断(超宽横滚);
|
|
**数字列按 schema 类型右对齐 + 等宽**;**主键列表头挂蓝色小钥匙图标**;
|
|
空值(null/undefined)统一显示灰色 `-`。
|
|
4. **ISO 时间格式化**:取值函数 `cellText` 识别 ISO 8601 时间串,转本地
|
|
`YYYY-MM-DD HH:MM:SS`(如信号日期 `2026-05-31T16:00:00.000Z` → `2026-06-01 00:00:00`,
|
|
UTC+8),所有表的日期列同享。
|
|
5. **行数文案**:接口硬编码 `limit: 50` —— 截断时写「前 50 行 · 共 M 行」,
|
|
全量在页内写「共 N 行」,不虚报「前」。
|
|
6. **模式矩阵**:转置(用户定)—— 行 = 参数名/字段/数据类型,列 = 每个字段;
|
|
最左窄行标签列吸左(横滚不丢);斑马纹与记录表同套;**类型徽分色**
|
|
(number/integer 蓝、json 紫、text 灰);**悬停整列高亮**(`::after` 纵幕 +
|
|
`mix-blend-mode: multiply` 护住文字,`pointer-events: none`)。
|
|
|
|
## 踩过的坑(留给后来者)
|
|
|
|
- **`.g-kpi` 的 `overflow: hidden` 会裁掉内部气泡**(用户报):色条从 `::before` 伪元素
|
|
改 `inset box-shadow`(自动贴合圆角、无需裁切),撤掉 overflow。
|
|
注意 `.g-data .g-kpi` 的 `box-shadow` 覆盖必须保留 inset 色条,不能 `none` 一抹了之。
|
|
- **悬停幕直接画会糊住文字**:`::after` 定位元素绘制序在文字之上,
|
|
加 `mix-blend-mode: multiply` —— 深字几乎不变色,只染亮底。
|
|
|
|
## Token 表(§18)
|
|
|
|
| 类别 | 取值 | 说明 |
|
|
|---|---|---|
|
|
| 强调色 | `#3370FF`(站点既有飞书蓝) | 未换规范默认 #2563EB —— 整站令牌一致优先 |
|
|
| 文字灰阶 | `#1F2329` / `#646A73` / `#8F959E` | 同上,沿用站点令牌 |
|
|
| 卡片 | 白底 + 1px `#DFE3EA` 描边,无阴影 | §10 描边优于阴影 |
|
|
| 圆角 | 卡 8 / 块与徽 6 / 状态 chip 全圆 / 图标块 10 | §6,整站无 16px 以上 |
|
|
| 间距 | 8 / 12 / 16 / 32 | §6 全 8 倍数 |
|
|
| 数字 | `tabular-nums`,数字列右对齐 | §6 / §11 |
|
|
| 语义色 | 只进徽标(性质徽三色、类型徽蓝/紫、run chips 四色) | §7 |
|
|
| 动效 | 全部 `0.16s ease-out`,只动 transform/opacity/color | §13 |
|
|
|
|
## 验收(§17 三层 18 条)
|
|
|
|
底层 8 条、中层 6 条全过;顶层 4 条中「快捷键提示」本页无操作不涉及,其余齐
|
|
(hover/active/focus 环、空态、title 全文、aria 同源)。
|
|
每轮改动 `tsc --noEmit -p tsconfig.web.json` + `eslint` 均通过,并在浏览器实测截图验收。
|