diff options
| author | Somhairle H. Marisol <[email protected]> | 2026-09-18 08:27:41 +0800 |
|---|---|---|
| committer | Somhairle H. Marisol <[email protected]> | 2026-09-18 08:27:41 +0800 |
| commit | 088735b948d46896b8af30efcb0a2dc5d362b97f (patch) | |
| tree | 0dcab0d5ebc65309267a42d7cda827e9fdd866e7 /docs/ui-shadcn-handoff.md | |
| parent | bf6681eb29ac8b0c80ca17b2b5869f7de3da1198 (diff) | |
| download | strategy-lab-088735b948d46896b8af30efcb0a2dc5d362b97f.tar.gz | |
docs(release): 全周期交接文档入库(含 ui-shadcn 迁移交付说明)
[变更性质]
纯文档提交,无运行时逻辑。
[文档内容]
补齐此前各轮未入库的交接/验收文档:backend-auth/backend-domain/
domain-authorization-user(认证与授权域)、etf-recovery-release-
handoff(ETF 修复 + ops 演练定稿与生产部署命令)、recovery-* 系列、
frontend/parent-ui-findings(UI 迁移上下文)、worker/integration 等,
以及本轮 docs/ui-shadcn-handoff.md(shadcn-svelte 迁移交接,含
Chart.svelte 契约、runes $state 踩坑记录与 375/768/1440 验证证据)。
[更新方案]
按主题分文;每份文档只记录可复现的命令、验证结果与语义边界,
不导出密钥或生产敏感路径。
[影响范围]
文档渠道:后续 leader/client 审阅入口;与代码提交一一对应便于回溯。
Diffstat (limited to 'docs/ui-shadcn-handoff.md')
| -rw-r--r-- | docs/ui-shadcn-handoff.md | 49 |
1 files changed, 49 insertions, 0 deletions
diff --git a/docs/ui-shadcn-handoff.md b/docs/ui-shadcn-handoff.md new file mode 100644 index 0000000..423a6ee --- /dev/null +++ b/docs/ui-shadcn-handoff.md @@ -0,0 +1,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 个用例, + 临时探针文件未提交(按约定不留件)。 |
