# 随心瞰商家版 — Design System (MASTER)

> Global Source of Truth。页面级 override 见 `pages/[page].md`。

## 设计定位

| 维度 | 决策 |
|------|------|
| 产品 | B2B 户外作业工具（景区商户 / 摄影师 / 飞手） |
| 风格 | Flat Design + Executive Dashboard 卡片布局 |
| 字体 | SF Pro（System），不引入 Web 字体 |
| 主色 | `#0073FF`；Banner `#1677FF` |
| 触控 | 最小点击区域 44×44pt |
| 对比度 | 正文 ≥ 4.5:1 |

**不采用：** 渐变/Aurora 背景、Newsletter 布局、替换品牌主色。

## 色彩 Token（`AppColor`）

| Token | Hex | 用途 |
|-------|-----|------|
| `primary` | `#0073FF` | Tab 选中、主按钮、链接 |
| `primaryBanner` | `#1677FF` | 排队 Banner |
| `primaryLight` | `#EFF6FF` | 次要按钮底、info badge |
| `pageBackground` | `#F5F5F5` | 默认 Tab 页背景 |
| `pageBackgroundSoft` | `#F7FAFF` | 数据 / 个人中心 |
| `cardBackground` | `#FFFFFF` | 卡片、表单 |
| `inputBackground` | `#F4F4F4` | 输入框、离线 chip |
| `border` | `#EEEEEE` | 分割线 |
| `cardOutline` | `#E9ECEF` | 列表卡片描边 |
| `textPrimary` | `#333333` | 主文案 |
| `textSecondary` | `#666666` | 副文案 |
| `textTertiary` | `#999999` | 弱提示 |
| `textTabInactive` | `#7D8DA3` | Tab 未选中 |
| `success` / `successBackground` | `#10B981` / `#F0FDF4` | 成功、待叫号 |
| `warning` / `warningBackground` | `#FF7B00` / `#FFF0E2` | 待处理 |
| `danger` / `dangerBackground` | `#EF4444` / `#FFE7E7` | 错误、过号 |
| `info` / `infoBackground` | `#0073FF` / `#E8F4FF` | 进行中 |
| `online` | `#22C55E` | 在线 pill |
| `overlayScrim` | `#00000033` | Loading 遮罩 |

**规则：** 业务 View 禁止 `UIColor(hex:)`，一律引用 `AppColor`。

## 字体 Token（`AppFont`）

| Token | Size | Weight | 场景 |
|-------|------|--------|------|
| `caption` | 12 | regular | Tab、协议 |
| `captionMedium` | 12 | medium | Tab 选中 |
| `body` | 14 | regular | 按钮、列表 |
| `bodyMedium` | 14 | medium | Badge、chip |
| `subtitle` | 16 | medium | 卡片标题 |
| `title` | 16 | bold | Section 标题 |
| `metric` | 18 | bold | 统计数值 |
| `display` | 28 | semibold | 登录欢迎 |

## 间距 Token（`AppSpacing`）

| Token | pt |
|-------|-----|
| `xxs` | 4 |
| `xs` | 8 |
| `sm` | 12 |
| `md` | 16 |
| `lg` | 24 |
| `xl` | 32 |
| `xxl` | 48 |

常量：`screenHorizontalInset = 16`，`minTouchTarget = 44`，`homeHeaderHeight = 52`。

## 圆角 Token（`AppRadius`）

| Token | pt | 场景 |
|-------|-----|------|
| `xs` | 4 | Badge |
| `sm` | 8 | 小按钮 |
| `md` | 10 | 默认卡片、AppButton |
| `lg` | 12 | 输入框、统计卡 |
| `xl` | 16 | 登录表单、Dialog |
| `sheetTop` | 14 | 内容区顶圆角 |

## 阴影（`AppShadow`）

仅登录表单卡等浮层使用；普通卡片 **flat + 可选 1px `cardOutline` 描边**。

## 共享组件

| 组件 | 路径 | 说明 |
|------|------|------|
| `AppCardView` | `UI/Common/AppCardView.swift` | 白底卡片容器 |
| `AppStatusBadge` | `UI/Common/AppStatusBadge.swift` | 统一状态标签 |
| `AppButton` | `UI/Common/AppButton.swift` | 主/次按钮 |
| `AppNavigationBarAppearance` | `Theme/AppNavigationBarAppearance.swift` | 全局 NavBar |

## 页面模板（Tab 内页）

```
NavigationBar（白底，16pt title）— Home 例外：自定义 Header
pageBackground
  AppCardView × N（inset 16，stack gap 12）
TabBar（白底，primary tint）
```

## 反馈模式

| 场景 | 方式 |
|------|------|
| 提交 / 首次加载 | GlobalLoading |
| 列表刷新 | UIRefreshControl |
| 分页 | Footer UIActivityIndicatorView |
| 操作结果 | Toast |
|  destructive | Alert |

## Pre-Delivery Checklist

- [ ] 无 inline hex，使用 AppColor
- [ ] 触控区域 ≥ 44pt
- [ ] 正文对比度 ≥ 4.5:1
- [ ] 异步操作 >300ms 有 loading 反馈
- [ ] 状态不仅靠颜色（含文字标签）
- [ ] 圆角 / 间距来自 AppRadius / AppSpacing

## 路线图（后续）

1. Profile / Login / Auth 迁移
2. 排队管理（`Theme/Modules/ScenicQueueTokens.swift`）
3. 全工程 hex 清零
4. Orders EmptyState、FilterBar 组件化