71 lines
3.3 KiB
Markdown
71 lines
3.3 KiB
Markdown
|
# 审计 — 监测 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
|
|||
|
|
|
|||
|
|
- [x] changelog `2026-06-13-watch-ui-polish.md`（≥10 行）
|
|||
|
|
- [x] 本审计含 Step 3 / Closure / DoD
|
|||
|
|
- [x] `vite build` 通过
|
|||
|
|
- [x] 提交 `4bbc47f` + 生产部署（2026-06-13）
|
|||
|
|
- [x] 生产 `/health` ok、`/app/` 200
|
|||
|
|
- [ ] 浏览器终验：`#/watch-metrics` 暗色/亮色、探针分页、四槽空态
|
|||
|
|
|
|||
|
|
## 部署说明
|
|||
|
|
|
|||
|
|
- **仅前端**：`vite build` → `deploy/deploy-frontend.sh` 或全量 `deploy-production.sh`
|
|||
|
|
- **无需** 重启后端或数据库迁移
|
|||
|
|
|
|||
|
|
## 待办（非阻塞）
|
|||
|
|
|
|||
|
|
| 优先级 | 项 |
|
|||
|
|
|--------|-----|
|
|||
|
|
| P3 | Sparkline `areaStyle` 在 `rgb()` 主题下的渐变兼容 |
|
|||
|
|
| P3 | 探针表 `total=0` 时隐藏分页器（UX） |
|