diff options
Diffstat (limited to 'docs/ui-redesign-round2.md')
| -rw-r--r-- | docs/ui-redesign-round2.md | 78 |
1 files changed, 78 insertions, 0 deletions
diff --git a/docs/ui-redesign-round2.md b/docs/ui-redesign-round2.md new file mode 100644 index 0000000..c454d29 --- /dev/null +++ b/docs/ui-redesign-round2.md @@ -0,0 +1,78 @@ +# 前端重设计 · 第二轮交付说明 + +状态:**READY_FOR_LEADER_REVIEW**(2026-09-18) + +## 一、范围回顾 + +Leader 指派第二轮前端重设计四项任务,全部交付: + +1. **首页指标卡行 + 项目行 sparkline** +2. **375px 底部 Tab Bar / 窄标题栏 / 面包屑** +3. **图表增强**(网格、hover 当日净值+回撤、回测区间阴影带、移动端图表 ≥240px) +4. **质感打磨**(150ms 微过渡、卡片 hover 上浮、登录页留白、字阶统一) + +硬约束全部满足:续用 shadcn 组件与 layerchart,未引入新框架;后端零改动;vitest 全绿。 + +## 二、实现明细 + +### 1. 指标卡与 sparkline + +- `lib/dashboardMetrics.ts`:`aggregateDashboard` 把 projects/datasets/runs/AI 用量聚合为 4 张指标卡数据;无数据以 `-` 占位(data-todo 标注)。AI 用量 `totals.requests` 暂无独立计数字段时以 `-` 呈现。 +- `components/ProjectMetricRow.svelte`:指标卡行组件(props 注入聚合数据,便于测试)。 +- `components/Sparkline.svelte`:仅依赖 `first/last` 两个字段的方向 mini 线段(up/down 配色 --ok/--danger,端点圆点),首末任一为空则不渲染 SVG。 +- `ProjectsPage.svelte`:顶部接入 `ProjectMetricRow`;表格新增「最近回测」列内嵌 sparkline(`data-testid="sparkline-cell"`,作为结果链接的 aria-label 入口);并行取数经 `Promise.allSettled` 容错。 + +### 2. 移动端导航(≤767px) + +- `components/Layout.svelte`:`matchMedia('(max-width: 767px)')` 反应式 `$effect`(Safari <14 走 `addListener` 兼容回退)。手机态渲染: + - `data-testid="mobile-tabbar"` 底部 Tab Bar:projects/datasets/runs/account 四项,svg 图标 + `tab-label`,选中态 `aria-current="page"`; + - `data-testid="mobile-topbar"` 窄标题栏:品牌 / 项目面包屑 / 账户入口; + - 内容区底部 padding 5.2rem 预留 Tab Bar 高度。 +- ≥768px 维持既有桌面布局;900px 断点结构保留(`lib/mobileCss.test.ts` 正则依赖)。 +- `ProjectPage.svelte` 新增 `nav.crumbs` 面包屑:我的项目 / 项目名 / 当前页签(`projectsStore.ensure(id)` 拉项目名)。 + +### 3. 图表增强 + +`components/Chart.svelte` 扩展(round1 合同不变:`resolvedWidth = measured ?? width ?? 640`、`data` 长格式、`chart-host`): + +- 网格线 stroke 使用 `var(--border)`; +- hover 高亮(lines+points)+ 自定义 tooltip:当日净值 + 额外行(`extras`,如回撤),可注入 `valueFormatter`; +- `bandShaded`(默认开):belowMarks 画 `rgba(15,118,110,0.05)` 回测区间阴影带; +- series 新支持 `dashed`(`strokeDasharray: 6 6`)与 `opacity`,`Area` 填充渲染; +- `ProjectResultsTab`:equity 合并回撤列(`extras=[{key:'dd',label:'回撤'}]`),drawdown 图百分比格式化。 +- 自定义 marks/tooltip 以 `lcExtras` snippet 透传绕开 TS 精确字面量检查;`chart-assurance` 伪属性已清理。 + +### 4. 质感打磨 + +- `app.css`:全元素 150ms transition 层;仅 `hover:hover` 且 768px+ 生效的卡片 hover 上浮;`h1/h2/h3` 字阶 1.55/1.18/1.02;`.hint` 重复规则清理。 +- `AuthPages.svelte`:登录/注册页留白重排(2rem 窄屏 / 2.4rem 宽屏断点)。 + +## 三、验证证据 + +| 项 | 结果 | +| --- | --- | +| `npx vitest run` | **75/75 通过**(23 个测试文件;含新增 dashboardMetrics×5、sparkline×3、mobileTabbar×3、metricRow×3、projectSparkline×1、round2DashboardIntegration×2) | +| `npm run check`(svelte-check + tsc) | 0 error 0 warning | +| `npm run build` | 成功,`dist/` 已更新(`index-DUEbs4Rg.js` 起) | +| `scripts/ui-verify.mjs` | 30 route×宽度组合全 OK(overflow=0 / pageErrors=0) | +| `scripts/chart-overflow-probe.mjs` | runs/results × 375/768/1440 全 OK(svgs 17/16/25) | +| `scripts/ui-auth-shots.mjs`(新增) | 登录态 18 组合全 OK:overflow=0、pageErrors=0、375 端 tabbar=true 且 768/1440 为 false(形态正确)、项目页 sparklineCells=2、metricCards=4(真实数据渲染) | +| 截图 | `artifacts/ui-shadcn-round2/*.png`:probe 6 张 + dashboards 3 张 + 登录态 18 张 | + +`ui-auth-shots.mjs` 说明:以生产站点实名凭据(admin.private.json)登录生产站点换取 HttpOnly 会话,经本地 dist 服务器 + `/api` 反向代理访问真实后端数据;代理修补了 `accept-encoding`(防 gzip 直传)与 `Set-Cookie`(去 Secure 后注入本地域);密码不落任何日志/截图。 + +## 四、提交清单(本轮 6 个 commit) + +- `0b1ad75` feat(frontend): 首页指标卡与项目行 sparkline +- `e6ff0f6` feat(frontend): 项目列表接入指标卡行与最近回测 sparkline 列 +- `4390ca3` feat(frontend): 375px 底部 Tab Bar、窄标题栏与项目面包屑 +- `ac55af5` feat(frontend): 图表增强——网格、hover 当日净值/回撤、回测区间阴影带 +- `4462473` feat(frontend): 质感打磨——微过渡、卡片悬停、登录页留白与字阶 +- `5c98e8b` test(frontend): 登录态三档宽度真浏览器截图与渲染断言脚本 + +## 五、遗留项 / 建议 + +1. AI 用量指标卡 `totals.requests` 无独立后端字段时以 `-` 占位,待后端补出量方式。 +2. 面包屑未单独立测试(由 ProjectPage 渲染路径与 round2 集成测试覆盖,未做独立 DOM 断言)。 +3. Sparkline 目前为两点方向线段;若要更像"曲线"可后续接入折线渲染(保持不引依赖仍可行)。 +4. 生产部署:本轮为纯前端构建产物 + 脚本,部署流程与前轮一致(deploy.sh 幂等拒重复部署),未重复执行生产发布;_leader 审核后按需发布_。 |
