From fc952a2876362bf834a60c35ef0f70b0278df197 Mon Sep 17 00:00:00 2001 From: "Somhairle H. Marisol" Date: Fri, 18 Sep 2026 12:04:29 +0800 Subject: [变更性质] docs(frontend) [新增功能] round3 迁移矩阵文档：legacy 选择器→shadcn 组件映射、主题 token 来源、验证口径 [实现方案] docs/ui-redesign-round3.md [影响范围] docs/ MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/ui-redesign-round3.md | 49 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 docs/ui-redesign-round3.md (limited to 'docs/ui-redesign-round3.md') diff --git a/docs/ui-redesign-round3.md b/docs/ui-redesign-round3.md new file mode 100644 index 0000000..60147c3 --- /dev/null +++ b/docs/ui-redesign-round3.md @@ -0,0 +1,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()`，类挂在 + ``（`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` 工具。 -- cgit v1.2.3