# 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="面包屑"]`。