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
50
51
52
53
54
55
56
57
58
59
60
61
|
# shadcn-svelte 迁移交付说明（第 3 轮）
状态：READY_FOR_LEADER_REVIEW
日期：2026-09-18
## 生产部署记录（2026-09-18）
- 结论：**生产已处于目标版本，deploy 幂等守卫生效**。
- `runtime.env` 已 pin `WORKER_IMAGE=sha256:34a61c22c5135b6cc8453e5e3621674caf12284c5aa5dbfba1cda15299a656e3`（strategy-lab-worker:etf-sina-candidate-r3），deploy.sh precheck 以"already pins"拒绝重复部署（退出码 1，未做任何改动/停服）。
- 生产 release 二进制 sha256 `87f490854bde…` 与 `server/target/release/strategy-lab-server` 一致（含 worker.rs 挂载修复）。
- 线上前端资产 `index-CXMPmOOf.js` / `index-DaempZZR.css` 与本地最新 dist 逐名一致（时间戳版本资产，非缓存混淆）。
- 健康检查：`https://fin.somhairle.bid/api/health` → 200，`{"status":"ok","ai_configured":true,"worker_available":true}`。
- 上线 UI 验证：随机 query bust 访问 `#/login`，375/1440 两档真浏览器截图存
`artifacts/deploy-20260918/login-375.png`、`login-1440.png`；overflow=0、pageErrors=0。
- 回滚 id：本次无新 release（幂等拒绝）；当前线上的上一 release 备份为
`release-backups/20260917-132928`（可用 `rollback.sh 20260917-132928`）。
- 当前回滚支持：`artifacts/etf-recovery-candidate/ops/rollback.sh list`。
## 本轮范围（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 个用例，
临时探针文件未提交（按约定不留件）。
|
