Nexus/docs/audit/2026-06-13-watch-ui-polish.md

审计 — 监测 UI 视觉迭代

Changelog: docs/changelog/2026-06-13-watch-ui-polish.md
范围：监测历史页 / 趋势图 / 探针表 / 实时槽 — 纯前端视觉，无 API 或后端变更

审计范围

文件	变更	状态
frontend/src/pages/WatchMetricsPage.vue	卡片页头、共用时间窗、骨架屏/空态	☑
frontend/src/components/watch/WatchTrendChart.vue	主题色 ECharts、暗色 tooltip/轴	☑
frontend/src/components/watch/WatchProbeRecordsTable.vue	表容器、色阶、分页	☑
frontend/src/components/watch/WatchSlotCard.vue	I/O 网格、分隔线	☑
frontend/src/components/watch/WatchMetricBar.vue	进度条高度/过渡	☑
frontend/src/components/watch/WatchSparkline.vue	主题色折线、渐变面积	☑
frontend/src/components/watch/WatchSlotRow.vue	行首标题区	☑
frontend/src/utils/watchFormat.ts	metricPctClass / formatProbePct	☑

Step 3 规则扫描

H	规则	结论
H1	XSS / HTML 注入	SAFE — 趋势 tooltip 仅拼接固定 labels 与数值；探针错误列用 Vue 文本插值，非 v-html
H2	新 API / 鉴权面	SAFE — 无后端改动；仍走既有 /watch/metrics、/watch/probe-records
H3	密钥 / 凭据	SAFE — 无配置或环境变量变更
H4	时区语义	SAFE — 仅展示层；formatDateTimeBeijing / formatChartAxisBeijing 逻辑未改
H5	分页与筛选	SAFE — statusFilter 变更时 page = 1；pageCount 下限为 1
H6	主题色一致性	SAFE — WatchTrendChart 对齐 FleetTrendEChart 的 useTheme 模式
H7	Sparkline 渐变	P3 — areaStyle 使用 ${color}33 后缀透明度，依赖主题为 #hex；若主题为 rgb() 渐变可能失效（线条仍可见）

Closure

H	判定	依据
H1	SAFE	WatchTrendChart.vue L94–112：seriesName 来自本地 labels；时间经 formatDateTimeBeijing
H2	SAFE	diff 仅 frontend/src/**
H3	SAFE	无 server/、.env 变更
H4	SAFE	未改 datetime.ts
H5	SAFE	WatchProbeRecordsTable.vue L88、pageCount computed
H6	SAFE	与 FleetTrendEChart.vue 同模式 themeColor()
H7	P3 接受	与 Vuetify 默认 hex 主题兼容；后续可改为 color-mix 或固定 alpha 对象

验证

项	结果
cd frontend && npx vite build	✅ 6.5s
bash scripts/local_verify.sh	未重跑（纯前端 UI，无 API 变更）
门控 Gate 7 文件名	上表已列全 8 个源码文件 basename

DoD

• changelog 2026-06-13-watch-ui-polish.md（≥10 行）
• 本审计含 Step 3 / Closure / DoD
• vite build 通过
• 提交 4bbc47f + 生产部署（2026-06-13）
• 生产 /health ok、/app/ 200
• 浏览器终验：#/watch-metrics 暗色/亮色、探针分页、四槽空态

部署说明

• 仅前端：vite build → deploy/deploy-frontend.sh 或全量 deploy-production.sh
• 无需 重启后端或数据库迁移

待办（非阻塞）

优先级	项
P3	Sparkline areaStyle 在 rgb() 主题下的渐变兼容
P3	探针表 total=0 时隐藏分页器（UX）