# AIView 移动端设计规范

> 基于 TDesign Mobile、Material Design 3、微信设计规范，结合项目实际制定。
> 适用于 UniApp + wot-design-uni 框架，设计基准宽度 750rpx。

---

## 1. 字体排版 (Typography)

### 字号阶梯

| Token | rpx | px | 行高 | 字重 | 用途 |
|-------|-----|-----|------|------|------|
| `--font-display` | 60rpx | 30px | 1.2 | 900 | 品牌标题（仅 Logo） |
| `--font-h1` | 48rpx | 24px | 1.3 | 700 | 大数字、统计数值 |
| `--font-h2` | 36rpx | 18px | 1.3 | 700 | 页面标题 |
| `--font-h3` | 32rpx | 16px | 1.4 | 600 | 卡片标题、表单标签 |
| `--font-body` | 28rpx | 14px | 1.5 | 400 | 正文、列表项 |
| `--font-caption` | 24rpx | 12px | 1.5 | 400 | 辅助说明、时间戳 |
| `--font-overline` | 22rpx | 11px | 1.5 | 600 | 标签、Badge、Tab 文字 |

### 字重规则

| 字重 | 值 | 使用场景 |
|------|-----|----------|
| Regular | 400 | 正文、描述、占位符 |
| Semi-bold | 600 | 标签、Badge、次级标题、按钮文字 |
| Bold | 700 | 卡片标题、页面标题 |
| Black | 900 | 统计数字、品牌 Logo |

---

## 2. 间距系统 (Spacing)

基于 **8rpx** 网格，所有间距为 8 的倍数。

| Token | rpx | 用途 |
|-------|-----|------|
| `--space-xs` | 8rpx | 图标与文字间距、微间距 |
| `--space-s` | 16rpx | 元素内小间距、列表项内 |
| `--space-m` | 24rpx | 卡片内间距、组件间距 |
| `--space-l` | 32rpx | 屏幕边距、卡片间距 |
| `--space-xl` | 48rpx | 分区间距、大卡片内间距 |

### 应用规则

- **屏幕左右边距**: 32rpx (`mx-32rpx`)
- **卡片内间距**: 32rpx（标准）/ 48rpx（宽松，如表单）
- **卡片间距**: 24rpx (`mt-24rpx`)
- **列表项间距**: 24rpx
- **图标与文字**: 8rpx ~ 16rpx

---

## 3. 圆角系统 (Border Radius)

| Token | rpx | 用途 |
|-------|-----|------|
| `--radius-s` | 16rpx | 进度条、小徽标 |
| `--radius-m` | 24rpx | 按钮、输入框、小卡片 |
| `--radius-l` | 48rpx | 标准卡片 (`.ai-card`) |
| `--radius-xl` | 80rpx | 页面级弧形（Header 底部） |
| `--radius-full` | 999rpx | 圆形元素、胶囊按钮 |

### 登录页特殊圆角

- 表单容器顶部: `88rpx 88rpx 0 0`（与页面级弧度衔接）

---

## 4. 组件尺寸 (Component Sizing)

### 按钮

| 尺寸 | 高度 | 字号 | 圆角 | 用途 |
|------|------|------|------|------|
| Large | 96rpx | 32rpx / 600 | 24rpx | 主操作（登录、提交） |
| Medium | 72rpx | 28rpx / 600 | 24rpx | 次级操作 |
| Small | 56rpx | 24rpx / 600 | 999rpx | 胶囊按钮（切换区域等） |

### 输入框

| 属性 | 值 |
|------|-----|
| 最小高度 | 96rpx |
| 内边距 | 24rpx 32rpx |
| 背景色 | #F9FAFB |
| 圆角 | 24rpx |
| 字号 | 32rpx |
| 图标大小 | 20px |
| 图标颜色 | #F97316 |

### 头像

| 尺寸 | 大小 | 用途 |
|------|------|------|
| XL | 160rpx | 个人中心大头像 |
| L | 96rpx | 用户头部、列表头像 |
| M | 72rpx | 工单卡片头像 |
| S | 40rpx | 头像堆叠、小头像 |

### 图标

| 场景 | 大小 (px) | 大小 (rpx) |
|------|-----------|-----------|
| 表单输入前缀 | 20px | — |
| 导航栏操作 | 22px | — |
| 第三方登录 | 24px | — |
| 卡片操作图标 | — | 40rpx |
| 宫格菜单图标 | — | 40rpx |
| 扫码页大图标 | — | 48rpx |
| Logo / 品牌 | — | 64rpx ~ 80rpx |

> wot-design-uni 的 `wd-icon` 使用 px 单位；UnoCSS 图标类使用 rpx。

### 触控区域

所有可点击元素最小触控区域: **88rpx × 88rpx** (44px)，符合 iOS HIG 标准。

---

## 5. 颜色系统 (Colors)

### 品牌色

| Token | 色值 | 用途 |
|-------|------|------|
| `--color-primary` | #F97316 | 主色、按钮、链接 |
| `--color-secondary` | #FBBF24 | 渐变起始色 |
| `--color-primary-light` | #FFF7ED | 浅底色、边框 |
| `--color-primary-bg` | rgba(249,115,22,0.06) | 表单背景、次级按钮底色 |

### 文字色

| Token | 色值 | 用途 |
|-------|------|------|
| `--color-text-primary` | #1F2937 | 标题、正文 |
| `--color-text-secondary` | #9CA3AF | 说明文字、标签 |
| `--color-text-tertiary` | #D1D5DB | 箭头、禁用文字 |
| `--color-text-inverse` | #FFFFFF | 深色背景上的文字 |

### 背景色

| Token | 色值 | 用途 |
|-------|------|------|
| `--color-bg-page` | #FFFDF5 | 页面背景 |
| `--color-bg-card` | #FFFFFF | 卡片背景 |
| `--color-bg-input` | #F9FAFB | 输入框背景 |

### 状态色

| Token | 色值 | 用途 |
|-------|------|------|
| `--color-success` | #22C55E | 成功、在线 |
| `--color-error` | #EF4444 | 错误、紧急 |
| `--color-warning` | #F97316 | 警告（复用主色） |
| `--color-info` | #3B82F6 | 信息 |

---

## 6. 全局样式类 (Utility Classes)

| 类名 | 作用 |
|------|------|
| `.yd-page-container` | 页面容器：`min-h-screen` + 页面背景色 |
| `.ai-card` | 卡片：白底 + 48rpx 圆角 + #FFF7ED 边框 + 橙色阴影 |
| `.ai-gradient-header` | 渐变头部：135° #FBBF24→#F97316 + 80rpx 底部圆角 |
| `.ai-btn-primary` | 主按钮：渐变 + 24rpx 圆角 + 96rpx 高 + 阴影 |
| `.ai-badge--orange/red/green` | 状态标签 |

---

## 7. 页面结构模板

### 标准列表页

```
yd-page-container
├── wd-navbar (fixed + placeholder + safe-area-inset-top)
├── 搜索区域 (mx-32rpx mt-24rpx)
├── 列表区域 (px-32rpx pt-24rpx)
│   └── ai-card (mb-24rpx p-32rpx) × N
└── FAB 按钮 (fixed bottom-right)
```

### 认证页

```
auth-container (全屏渐变背景)
├── Header (Logo + 品牌名，透明背景)
└── form-container (白色卡片，88rpx 顶圆角)
    ├── input-item × N
    ├── auth-links (操作链接行)
    ├── login-btn-wrapper (主按钮)
    └── 第三方登录区域
```

---

## 变更记录

| 日期 | 说明 |
|------|------|
| 2026-02-07 | 初始创建，基于 TDesign/MD3/微信规范 |