diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/ui-redesign-round5.md | 64 |
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="面包屑"]`。 |
