aiot-uniapp/docs/DESIGN_SPEC.md

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/微信规范