yuzhiran-dev
8665032da4
- 新建 mobile/src/styles/variables.css — Design Token 变量定义 - App.vue — 使用 var(--muted) / var(--foreground) 替代硬编码 - sandbox/index.vue — 完整迁移参考页（品牌色/边框/文字/背景） - docs/design-tokens.md — 更新 Mobile 迁移对照表
142 lines
4.3 KiB
Markdown
142 lines
4.3 KiB
Markdown
# Design Token — 宇之然 UI 规范
|
||
|
||
> 统一 Web (Next.js) 和 Mobile (Vue) 的设计语言。
|
||
|
||
## 色彩系统
|
||
|
||
### 语义色板 (CSS Variables)
|
||
|
||
| Token | 浅色 | 深色 | 用途 |
|
||
|-------|------|------|------|
|
||
| `--background` | `0 0% 100%` | `222.2 84% 4.9%` | 页面背景 |
|
||
| `--foreground` | `222.2 84% 4.9%` | `210 40% 98%` | 主要文字 |
|
||
| `--card` | `0 0% 100%` | `222.2 84% 4.9%` | 卡片/面板背景 |
|
||
| `--muted` | `210 40% 96.1%` | `217.2 32.6% 17.5%` | 次级背景（消息气泡、标签底） |
|
||
| `--muted-foreground` | `215.4 16.3% 46.9%` | `215 20.2% 65.1%` | 次级文字（描述、辅助信息） |
|
||
| `--accent` | `210 40% 96.1%` | `217.2 32.6% 17.5%` | Hover/激活背景 |
|
||
| `--border` | `214.3 31.8% 91.4%` | `217.2 32.6% 17.5%` | 边框/分割线 |
|
||
| `--ring` | `207 100% 38%` | `207 58% 52%` | Focus 环 |
|
||
| `--primary` (brand-600) | `207 100% 38%` | `207 58% 52%` | 品牌主色（按钮/链接） |
|
||
|
||
### Tailwind 映射
|
||
|
||
```css
|
||
/* 禁止使用的旧颜色 */
|
||
text-gray-* → text-foreground / text-muted-foreground
|
||
bg-gray-* → bg-card / bg-muted / bg-accent
|
||
border-gray-* → border-border
|
||
|
||
/* 品牌色阶梯 */
|
||
brand-50 ~ #f0f7ff 背景 tint
|
||
brand-100 ~ #e0effe 标签背景
|
||
brand-600 ~ #0070c4 主色（按钮/链接）
|
||
```
|
||
|
||
### Mobile (Vue) 对应
|
||
|
||
Mobile 使用 uni-app，CSS 变量命名相同，在 `App.vue` 定义：
|
||
|
||
```css
|
||
/* mobile/src/App.vue */
|
||
page {
|
||
--background: #ffffff;
|
||
--foreground: #0a0a0a;
|
||
--card: #ffffff;
|
||
--muted: #f5f5f5;
|
||
--muted-foreground: #666666;
|
||
--border: #e5e5e5;
|
||
--brand: #0070c4;
|
||
}
|
||
```
|
||
|
||
## 间距系统
|
||
|
||
| Token | 值 | 用途 |
|
||
|-------|-----|------|
|
||
| page padding | `px-4 sm:px-6 lg:px-8` | 页面级内边距 |
|
||
| card padding | `p-4 sm:p-6` | 卡片内边距 |
|
||
| section gap | `gap-4 md:gap-6` | 卡片/区块间距 |
|
||
| content max-w | `max-w-7xl` | 内容页宽度 |
|
||
| text max-w | `max-w-3xl` | 法律/文本页宽度 |
|
||
|
||
## 圆角
|
||
|
||
| Token | 值 | 用途 |
|
||
|-------|-----|------|
|
||
| `--radius` | `0.75rem` (12px) | 基础圆角 |
|
||
| `rounded-xl` | 12px | 卡片圆角 |
|
||
| `rounded-2xl` | 16px | 大圆角容器 |
|
||
| `rounded-lg` | 8px | 按钮/输入框 |
|
||
| `rounded-full` | 9999px | 标签/徽章 |
|
||
|
||
## 排版
|
||
|
||
| 层级 | 类名 | 字体大小 | 用途 |
|
||
|------|------|---------|------|
|
||
| H1 | `text-3xl font-bold` | 30px/1.2 | 页面标题 |
|
||
| H2 | `text-xl font-semibold` | 20px/1.4 | 区块标题 |
|
||
| H3 | `text-lg font-semibold` | 18px/1.4 | 卡片标题 |
|
||
| Body | `text-sm` | 14px/1.5 | 正文 |
|
||
| Caption | `text-xs` | 12px/1.5 | 辅助文字 |
|
||
| Mono | `text-sm font-mono` | 14px | 代码 |
|
||
|
||
## 组件模式
|
||
|
||
### PageLayout — 页面容器
|
||
```tsx
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||
<div className="mb-8">
|
||
<h1 className="text-3xl font-bold text-foreground">标题</h1>
|
||
<p className="mt-2 text-muted-foreground">描述</p>
|
||
</div>
|
||
{/* 内容 */}
|
||
</div>
|
||
```
|
||
|
||
### Card — 卡片容器
|
||
```tsx
|
||
<div className="bg-card rounded-2xl border border-border p-6">
|
||
{/* 内容 */}
|
||
</div>
|
||
```
|
||
|
||
### StatCard — 统计数字卡片
|
||
```tsx
|
||
<div className="bg-card rounded-xl border border-border p-6">
|
||
<div className="text-sm text-muted-foreground mb-1">标签</div>
|
||
<div className="text-2xl font-bold text-foreground">数值</div>
|
||
</div>
|
||
```
|
||
|
||
### FormField — 表单字段
|
||
```tsx
|
||
<div>
|
||
<label className="block text-sm font-medium text-foreground mb-1">标签</label>
|
||
<input className="w-full px-3 py-2 border border-border rounded-lg text-sm bg-background text-foreground" />
|
||
</div>
|
||
```
|
||
|
||
## Mobile (Vue) 迁移清单
|
||
|
||
| 文件 | 状态 | 备注 |
|
||
|------|------|------|
|
||
| `mobile/src/styles/variables.css` | ✅ 新建 | 完整 Design Token CSS 变量定义 |
|
||
| `mobile/src/App.vue` | ✅ 已修复 | 使用 `var(--muted)` / `var(--foreground)` |
|
||
| `mobile/src/pages/sandbox/index.vue` | ✅ 已修复 | 参考页面，全部替换为 CSS 变量 |
|
||
| 其余 16 个页面 | ⏳ | 按 sandbox 模式全局替换硬编码颜色 |
|
||
|
||
### Mobile 迁移对照表
|
||
|
||
| 旧值 | 新值 |
|
||
|------|------|
|
||
| `#fff` / `white` | `var(--card)` |
|
||
| `#f5f5f5` | `var(--muted)` |
|
||
| `#333` | `var(--foreground)` |
|
||
| `#666` / `#999` | `var(--muted-foreground)` |
|
||
| `#4f8cff` | `var(--brand)` |
|
||
| `#e0effe` | `var(--brand-light)` |
|
||
| `#f0f0f0` / `#e5e5e5` | `var(--border)` |
|
||
| `12rpx` border-radius | `var(--radius)` |
|
||
|
||
> 此文档在 UI 变更时同步更新。
|