blob: 60147c3111af8f8fb6f12895b666c9e9eaa90d4b (
plain)
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
|
# UI 迁移 round3 — shadcn-svelte 全面化
round1/round2 已迁移 AuthPages/AdminPage 等部分页面；round3 完成剩余全部页面与
legacy 工具类的清除。组件统一来自 `shadcn-svelte` registry（CLI 生成于
`src/lib/components/ui`，style: mira）。
## 主题 tokens
- preset b1D0dv72 落后为 neutral 默认，按 Leader 截图（Stripe 风 mint 主色）
重配 `:root`：
- `--radius: 0.75rem`（--radius-lg/-xl/-2xl… 由其派生）
- `--primary: #0e3a30`（深墨绿，白字）
- `--ring` / `--brand: #70dab6 / #58d3aa`，`--accent: #e3f7ef`
- chart 家族 mint 梯度（--chart-1..5）
- 第二主题 `.theme-amber`：`--brand: #f0ae00`、`--ring`、`--primary: #b87700`
- `src/lib/theme.ts`：`currentTheme()/applyTheme()/toggleTheme()`，类挂在
`<html>`（`theme-amber`），localStorage `sl-brand-theme`，模块加载即生效。
- `html { font-size: 14.5px }` 保留（历史口径），probe 校验按 rem 等值换算。
## 迁移矩阵（旧选择器 → 新组件）
| legacy | 迁移后 |
| --- | --- |
| `.btn` / `.btn.primary` / `.btn.outline` | `Button`（variant default/outline/secondary/ghost/destructive，size sm/icon-sm） |
| `.banner error` / `.banner info` / `.banner warn` | `Alert`（destructive：`bg-[var(--danger-soft)] border-[#f2c7c7]`；info：`bg-[var(--brand-soft)] border-[#bfe9db]`；warn：`bg-[var(--warn-soft)] border-[#f0ddb4]`） |
| `table.data` | `Table.Root/Header/HeaderRow/Head/Body/Row/Cell` |
| `.badge`（grey/teal/warn） | `Badge`（secondary/outline/destructive） |
| `.tabs button` | `Tabs.Root + Tabs.List variant="line" + Tabs.Trigger`（bind:value / onValueChange） |
| `.metric-card` / `form.card` | `Card.Root class="m-tile"`（9 张 metric tile，resultsAccounting 断言锚点） |
| `.metric-row` 卡片 | `Card.Root class="metric-r3"`（ProjectMetricRow 四卡） |
| 配套表单 `.input` / `.label` | `Input` / `Label` |
保留为纯排印/布局 token（非组件选择器）：`.stack/.row/.spread/.grid2/.grid3/
.cols-2/.table-wrap/.hint/.num/.mlabel/.mvalue/.metric-grid/.run-split` 及
900px 收敛媒体查询。
## 验证
- `npm run check`：0 error 0 warning
- `npx vitest run`：88/88（strategyTab 超时放宽至 15s —— 页面加载组件变重后套件满载偶发 >5s）
- probe（scripts/ui-auth-shots.mjs，18/18，`artifacts/ui-shadcn-round4/`）：
三档宽度 0 overflow、0 pageError、tabbar 正确挂载/显隐、面包屑齐全、
metricCards=4、sparks=2、cardRadiusOk=true（--radius ≥ 0.75rem）
## 已知边界
- Layerchart 图表（round1 引入）保持原状。
- `Layout.svelte` 结构未大动（sidebar/topbar 保留），页宽已无 780px 上限。
- 使用 shadcn-svelte v1.7.0；`cn` 经本地 `clsx + tailwind-merge` 工具。
|
