summaryrefslogtreecommitdiff
path: root/docs
diff options
context:
space:
mode:
Diffstat (limited to 'docs')
-rw-r--r--docs/ui-redesign-round5.md64
1 files changed, 64 insertions, 0 deletions
diff --git a/docs/ui-redesign-round5.md b/docs/ui-redesign-round5.md
new file mode 100644
index 0000000..9522f1d
--- /dev/null
+++ b/docs/ui-redesign-round5.md
@@ -0,0 +1,64 @@
+# UI 迁移 round5 — 全量 shadcn-svelte(preset b6t6C6CTw,零自定义样式)
+
+round4 残留自定义样式被判不合格,round5 全量重来:
+
+1. `src/app.css` 重置为 **仅 tailwind 导入 + shadcn 主题变量层**
+ (preset `b6t6C6CTw`,baseColor mist,style mira,字体 Inter Variable;
+ `:root/.dark/@theme inline/@layer base` 之外不留任何自定义选择器)。
+ round3 的自定义 token 层(mint/amber/brand-*/legacy alias/布局原语/.num/.mvalue/.hint 等)全部删除。
+2. `pnpm dlx shadcn-svelte init --preset b6t6C6CTw` 重新初始化;组件按需全量 add:
+ alert badge button card chart input label select separator tabs table(+此前已有的 9 个)。
+3. 12 个页面(src/pages/*)所有 UI 元素改用 shadcn 组件;卡片=Card、按钮=Button、
+ 表格=Table、Tab=Tabs、表单=Select/Input/Label、状态=Badge、图表=Chart(layerchart,
+ round1 契约保持);手机 375 档底部 Tab Bar 改用 **Tabs 组件**(Tabs.Root/List/Trigger
+ + data-testid="mobile-tabbar",aria-current + route 驱动 activeTab,与 Layout 主导航同源)。
+4. 投入口径 reporting 保留:`data-testid="capital-reporting"` 三张卡
+ (累计投入 / 最终持仓估值 / 投入回报率,锚点 run 26e9c9ab:12029.09 / 10846.00 / -9.84%),
+ 数值节流通过 `[data-testid="metric-value"]` 选择器断言。
+
+## 迁移矩阵(旧类 → 新组件/tailwind)
+
+| 旧类(round3 残留) | round5 迁移 |
+| --- | --- |
+| `.layout/.sidebar/.content`(css grid 全局) | Layout 布局改 tailwind:`grid md:grid-cols-[208px_1fr]`、`bg-sidebar`、`min-w-0`、断点 `max-md` 面包屑 |
+| `.tabbar .item`(底部导航) | `Tabs.Root/List/Trigger`(variant line + tailwind flex),data-tab 保留 |
+| `.topbar/.brand/.navlink/.nav-title/.projctx/.divider/.me/.me-name` | tailwind: `sticky top-0 z-30 bg-sidebar/90 backdrop-blur`、`rounded-md px-2 py-1.5 text-sm`、`bg-primary text-primary-foreground`、`Separator` |
+| `Page.svelte .page-head/.page-body(.wide)` | tailwind:`max-w-3xl` / 无宽度限制(wide) |
+| `.metric-row/.metric-r3/.mvalue/.mlabel/.run-split`(ProjectMetricRow) | `Card.Root` + `grid grid-cols-2 md:grid-cols-4 gap-2.5` + `text-xs text-muted-foreground` / `text-2xl font-bold tabular-nums`(`[data-testid=metric-value]`) |
+| `.m-tile + .metric-grid`(结果页 metric tiles ×9,含 capital-reporting ×3) | `Card.Root` + `grid md:grid-cols-3 gap-2.5`,tile 共享 `const tile/tileLabel/tileValue` tailwind 组合 |
+| `.hint`(全部页面) | `text-sm text-muted-foreground` |
+| `.num` | `tabular-nums` |
+| `.stack/.row/.spread/.wrap/.grid2/.grid3/.cols-2/.wrap-3/.rows-grid/.run-split` | `flex flex-col gap-3` / `flex items-center gap-2 flex-wrap` / `flex flex-wrap justify-between` / `grid md:grid-cols-[1.4fr_1fr]` 等 tailwind 原语 |
+| `form.card/.manual/.check/.field-list/.step-h`(DatasetWizard) | `Card.Root` + `Grid/Label/Input/Select`(market/type/adjustment 均为 Select 组件)+ foundation checkbox 输入保持原生 + label tailwind |
+| 登录/注册/恢复 `auth-wrap/auth-card/auth-brand/.mark/.sub` | `Card.Root w-[min(400px,100%)] p-8` 居中段 + `bg-primary size-8 rounded-lg` 品牌块 |
+| `<table class="data">`(版本历史/搜索结果) | `Table.Root/…` 组件全替 |
+| `.banner error/warn/info`(DatasetCard/DatasetWizard/Status) | `Alert`(variant 蒋 destructive/default) |
+| `.diff/.legend/.sw/.body/.ln/.code`(DiffView) | tailwind: `bg-emerald-50 text-emerald-900` / `bg-red-50 text-red-900`、`font-mono text-xs break-all`、legend `size-2.5 rounded-sm` |
+| Modal `.overlay/.dialog/.content` | `fixed inset-0 bg-black/40 grid place-items-center` + `Card.Root w-[min(760px,100%)]` |
+| `.loading-page/.spinner` | tailwind `animate-spin`(无双主题依赖) |
+| `.cm-host/.editor-label`(CodeEditor) | 宿主编排 tailwind:`rounded-md border border-border bg-card`;cm theme 变量改 var(--card/--secondary/--foreground/--muted-foreground) |
+| `lib/theme.ts`(mint/amber 切换) | 删除(依赖的自定义 token 层已不存在;shadcn preset 按 CLI 原样输出) |
+| Radius 断言(0.75rem) | 改为 preset 自带 `--radius: 0.625rem`,probe 断言改为"组件圆角 = --radius token 等值" |
+
+## 测试同步
+
+- `mobileCss.test.ts` 重写为守门测试:app.css 不含主题层外任何选择器;
+ src/pages class 全为 tailwind 工具类(无 Legacy 清单);无 body/html overflow-x hidden。
+- `resultsAccounting.test.ts`:tile 选择器改 `[data-slot="card"].gap-1`×9、
+ `td` 文本读取、`[data-testid="metric-value"]`。
+- `metricRow.test.ts / round2DashboardIntegration.test.ts`:`.metric-row .mvalue`
+ → `[data-testid="metric-value"]`。
+
+## 验证
+
+- `svelte-check`:0 error 0 warning
+- `vitest`:80/80(守门 3 条 + 全量回归)
+- `npm run build`:成功(index 1.2MB code-split 提示与 round4 相同)
+- probe `artifacts/ui-shadcn-round5/`:三档 **18/18**、0 overflow、0 pageError、
+ tabbar 375 attached/visible、面包屑齐全、metricCards=4、sparks=2、
+ capital-reporting 三档均检测到、radiusOk=true。
+
+## 已知边界
+
+- CodeMirror 编辑器内部主题(cm-editor theme)为编辑器自身必需的最小样式,非组件 facade。
+- probe 新增锚点:`data-testid="project-link"`(项目行链接)、`nav[aria-label="面包屑"]`。