suixinkan_uikit/design-system/随心瞰商家版/MASTER.md

随心瞰商家版 — 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 组件化