BPOS-TMP-REPO/docs/数据域页面改版记录-2026-08-25.md

设计中心 · 数据域页面改版记录(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 均通过,并在浏览器实测截图验收。