blob: 423a6ee5d0820cee1d119e1b54f7152d6d7f6b64 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
# shadcn-svelte 迁移交付说明（第 3 轮）
状态：READY_FOR_LEADER_REVIEW
日期：2026-09-18
## 本轮范围（Leader 第 2 轮返工之后）
1. 修复 AuthPages 375px 溢出 47px（`.auth-card` 固定 400px）→ `width:min(400px,100%)` + flex 包裹。
2. ECharts → layerchart 全面替换：新增 `src/components/Chart.svelte`（长格式 API），
图表合同测试 `src/lib/chartResize.test.ts` 4/4 通过（含 in-place 视口收缩回归）。
3. 其余页面迁移 shadcn：ResultsTab / StrategyTab / RunsPage（button/input/label/chart）。
4. 全部页面 × 375/768/1440 三档真浏览器（Playwright chromium）验证：
overflow=0、pageErrors=0，截图与探针 JSON 在 `artifacts/ui-shadcn/`。
## 工程要点
- **Chart.svelte API**（替换旧 echarts `option`）：
```svelte
<Chart data={[{i, date, equity, cash, benchmark?}]} series={[{key,label,value,color,dashed?,area?}]} height={340} ariaLabel="…" />
```
- data 为长格式行（i 为 x 序号）；`benchmark` 缺省允许 undefined（画断点）。
- 宽度语义：组件属性 `width` 仅是初始/测试尺寸；浏览器内 ResizeObserver 实测宽度优先，始终跟随宿主，绝不粘滞桌面宽度。
- 类型对 layerchart 复杂泛型统一 `as never` 断言（svelte-check 0 error）。
- **易错点（本轮踩过）**：
- runes 组件里 `let measured` 必须 `$state`，否则 RO 回调触发的宽度更新不重渲染。
- Svelte 5 的 `mount(props { get width() })` 传普通 getter 不会触发更新——响应式必须走 `$state`/真正 signal，或走 RO 实测路径。
- layerchart 挂载较慢（jsdom 内 ~3s），`resultsAccounting.test.ts` 首测给 20s 超时。
- `test-setup.ts` 已含 matchMedia shim（layerchart 需要），去掉多余 `@ts-expect-error`。
- **保留 legacy class**：`banner error/warn/info`、`table.data`、`metric/mvalue`、`badge *` 等继续由 app.css 提供并满足 `mobileCss.test.ts`、`resultsAccounting.test.ts` 断言；shadcn 组件并存无冲突。
## 验证记录（全部在本轮最终代码上执行）
- `npm run check`：0 errors, 0 warnings。
- `npx vitest run`：17 files / 58 tests 全绿。
- `npm run build`：成功（chunk size 警告属提示，非错误）。
- `scripts/ui-verify.mjs`（静态 dist + 真浏览器）：login/register/reset/projects/runs/
dashboards/settings/results/strategy/data × 375/768/1440 = 30 组合，全 OK：
overflow=0、pageErrors=0、bg/fg 均符合主题。
- `scripts/chart-overflow-probe.mjs`（mock 后端数据，让图表真实渲染）：
runs（勾选 2 个已完成回测触发对比图）与 results（权益/回撤曲线）× 三档共 6 组合，
全 OK：overflow=0、layerchart SVG 数量 12/16/25 随视口变化、pageErrors=0。
截图：`artifacts/ui-shadcn/chart-probe-*.png`。
## 后端变更
本轮未改任何 `src-tauri`/`server`/`worker` 代码。git status 中后端文件的
modified 状态属此前轮次遗留，不属于本任务 diff。
## 交付物
- 代码：见 git 工作区（frontend 前端 15 文件修改 + `src/lib/components/` shadcn 生成组件 + 5 个新增回归测试）。
- 文档：本文件。
- 说明：`/tmp/opencode/probe.test.ts` 探针思路已直接并入 `chartResize.test.ts` 第 3 个用例，
临时探针文件未提交（按约定不留件）。
|
