汉秋
87696a4774
Establish AppColor/AppFont/AppSpacing/AppRadius theming, shared components, and design-system docs so pilot screens align with Android while keeping iOS-native spacing and touch targets. Co-authored-by: Cursor <cursoragent@cursor.com>
129 lines
4.1 KiB
Markdown
129 lines
4.1 KiB
Markdown
# 随心瞰商家版 — 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 组件化
|