docs: add design system and UI refresh plan
This commit is contained in:
@@ -1,188 +1,65 @@
|
||||
# 智绘微刻小程序设计规范
|
||||
# 智绘微刻 Design System
|
||||
|
||||
> 版本：v1（草案）
|
||||
> 适用范围：Taro + React + TypeScript 微信小程序的全部页面与组件
|
||||
> 交付物：本规范 `DESIGN.md` + 交互式样例页 `design-system.html`
|
||||
> 原则：一套 token、两套主题、统一组件行为，让设计语言先于页面实现。
|
||||
## Overview
|
||||
|
||||
智绘微刻是一个面向微信小程序的定制设计系统，服务于激光微雕笔记本、铜质杯垫、竹制笔盒、词云纪念等定制商品。它把现有手账感的装饰风格收敛为一套更克制、更现代、但仍保留品牌温度的设计语言。
|
||||
|
||||
整套系统以 `design-system.html` 交互样例为视觉基线，以 `设计变更文档.md` 为落地规则。落地到小程序时使用一套 token、两套主题（浅色 / 深色），所有组件行为都由统一变量驱动，不允许在页面内继续引入新的硬编码颜色、字号或组件形态。
|
||||
|
||||
---
|
||||
|
||||
## 1. 文档定位
|
||||
## Colors
|
||||
|
||||
这份规范把「智绘微刻」的小程序从现有的手账感装饰风，收敛为一套更现代、更克制、但保留品牌浪漫感的设计语言。
|
||||
所有颜色来自 `:root` 与 `.theme-dark` 的 CSS 变量，Web 版使用 `px`，小程序使用同一语义的 `rpx`。
|
||||
|
||||
它同时承担三种角色：
|
||||
- **页面背景** `--bg-page`: 浅色 `#FAF7F2` / 深色 `#191919`，暖白与深墨底色
|
||||
- **卡片背景** `--bg-card`: 浅色 `#FFFFFF` / 深色 `#23201D`，卡片、弹窗、浮层表面
|
||||
- **弱化背景** `--bg-muted`: 浅色 `#F3EEE7` / 深色 `#2B2622`，分组背景、Tabs 容器、骨架屏
|
||||
- **输入背景** `--bg-input`: 浅色 `#F5F1EB` / 深色 `#2B2622`，输入框、搜索框
|
||||
- **主文字** `--text-primary`: 浅色 `#2E2622` / 深色 `#F5EFE8`
|
||||
- **次要文字** `--text-secondary`: 浅色 `#8A7E76` / 深色 `#B3A79C`
|
||||
- **弱提示** `--text-muted`: 浅色 `#B3A89E` / 深色 `#82766C`，占位符、弱说明
|
||||
- **主色** `--accent-primary`: 浅色 `#D96C6A` / 深色 `#F09198`，主按钮、选中态、价格
|
||||
- **主色按压** `--accent-primary-strong`: 浅色 `#C75B59` / 深色 `#FFA7AD`
|
||||
- **主色浅底** `--accent-primary-soft`: 浅色 `#F6E0DC` / 深色 `rgba(240,145,152,.14)`
|
||||
- **辅助蓝紫** `--accent-secondary`: 浅色 `#6C7BDB` / 深色 `#8E97E8`，链接、地址、聚焦
|
||||
- **成功** `--success`: 浅色 `#4FA477` / 深色 `#67C58E`
|
||||
- **提醒** `--warning`: 浅色 `#D99A4E` / 深色 `#E0AD68`
|
||||
- **危险** `--danger`: 浅色 `#D85D5D` / 深色 `#EF7A7A`，删除、错误、取消
|
||||
- **常规边框** `--border`: 浅色 `#EDE5DC` / 深色 `#37312C`
|
||||
- **强调边框** `--border-strong`: 浅色 `#E0D5C8` / 深色 `#463E37`
|
||||
- **毛玻璃** `--glass`: 浅色 `rgba(255,255,255,.72)` / 深色 `rgba(25,25,25,.72)`
|
||||
- **毛玻璃描边** `--glass-line`: 浅色 `rgba(255,255,255,.55)` / 深色 `rgba(255,255,255,.14)`
|
||||
|
||||
1. **设计 Token 定义**：颜色、字体、间距、圆角、阴影、毛玻璃等全部由变量驱动。
|
||||
2. **组件行为定义**：按钮、卡片、表单、弹窗、导航等组件的尺寸、状态和交互。
|
||||
3. **微信适配约束**：rpx、安全区、自定义导航、深浅色、触控目标等微信小程序硬约束。
|
||||
|
||||
后续修改页面时，只允许从本规范取值，不允许继续引入新的硬编码颜色、字号或组件形态。
|
||||
|
||||
---
|
||||
|
||||
## 2. 设计原则
|
||||
|
||||
### 2.1 去装饰化
|
||||
|
||||
- 不再使用 `3px dashed` 虚线卡片作为默认容器。
|
||||
- 移除 `star-badge` 星星贴纸装饰。
|
||||
- 装饰只承担功能：状态、层级、动效提示，不承担“氛围”。
|
||||
|
||||
### 2.2 留白优先
|
||||
|
||||
- 用间距和字重建立信息层级，而不是用边框和卡片嵌套。
|
||||
- 页面横向统一 32rpx 留白，内容区不贴边。
|
||||
- 卡片之间用间距分隔，卡片内部用 padding 分隔。
|
||||
|
||||
### 2.3 克制色彩
|
||||
|
||||
- 珊瑚粉只用于主操作、选中态和价格等关键信息。
|
||||
- 大面积背景使用暖白/深墨等中性色。
|
||||
- 蓝紫只做次级信息色（链接、地址、聚焦状态）。
|
||||
|
||||
### 2.4 现代质感
|
||||
|
||||
- 毛玻璃只出现在需要浮层的场景：TabBar、吸顶栏、弹窗、底部操作区。
|
||||
- 阴影保持低饱和、低扩散，强调层级而不是“发光”。
|
||||
- 支持 160-240ms 的轻量过渡，不做夸张动画。
|
||||
|
||||
### 2.5 微信原生一致性
|
||||
|
||||
- 全局使用 `navigationStyle: custom` 自定义导航，自行留出状态栏和胶囊区域。
|
||||
- 全部使用系统字体栈，不打包自定义字体。
|
||||
- 全部尺寸基于 750rpx 设计稿，最终在微信中由 rpx 转换。
|
||||
|
||||
---
|
||||
|
||||
## 3. 设计 Token 总览
|
||||
|
||||
```css
|
||||
/* 浅色主题 */
|
||||
.theme-light {
|
||||
--bg-page: #faf7f2;
|
||||
--bg-card: #ffffff;
|
||||
--bg-muted: #f3eee7;
|
||||
--bg-input: #f5f1eb;
|
||||
--text-primary: #2e2622;
|
||||
--text-secondary: #8a7e76;
|
||||
--text-muted: #b3a89e;
|
||||
--accent-primary: #d96c6a;
|
||||
--accent-primary-strong: #c75b59;
|
||||
--accent-primary-soft: #f6e0dc;
|
||||
--accent-secondary: #6c7bdb;
|
||||
--accent-secondary-soft: rgba(108, 123, 219, 0.12);
|
||||
--success: #4fa477;
|
||||
--warning: #d99a4e;
|
||||
--danger: #d85d5d;
|
||||
--border: #ede5dc;
|
||||
--border-strong: #e0d5c8;
|
||||
--glass: rgba(255, 255, 255, 0.72);
|
||||
--shadow-card: 0 8rpx 24rpx rgba(46, 38, 34, 0.08);
|
||||
--shadow-elevated: 0 12rpx 40rpx rgba(46, 38, 34, 0.12);
|
||||
}
|
||||
|
||||
/* 深色主题 */
|
||||
.theme-dark {
|
||||
--bg-page: #191919;
|
||||
--bg-card: #23201d;
|
||||
--bg-muted: #2b2622;
|
||||
--bg-input: #2b2622;
|
||||
--text-primary: #f5efe8;
|
||||
--text-secondary: #b3a79c;
|
||||
--text-muted: #82766c;
|
||||
--accent-primary: #f09198;
|
||||
--accent-primary-strong: #ffa7ad;
|
||||
--accent-primary-soft: rgba(240, 145, 152, 0.14);
|
||||
--accent-secondary: #8e97e8;
|
||||
--accent-secondary-soft: rgba(142, 151, 232, 0.14);
|
||||
--success: #67c58e;
|
||||
--warning: #e0ad68;
|
||||
--danger: #ef7a7a;
|
||||
--border: #37312c;
|
||||
--border-strong: #463e37;
|
||||
--glass: rgba(25, 25, 25, 0.72);
|
||||
--shadow-card: 0 8rpx 24rpx rgba(0, 0, 0, 0.35);
|
||||
--shadow-elevated: 0 12rpx 40rpx rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
```
|
||||
|
||||
`design-system.html` 中使用的 Web 版本会把这些值转为 `px`，但命名、层级和语义完全一致。
|
||||
|
||||
---
|
||||
|
||||
## 4. 色彩系统
|
||||
|
||||
### 4.1 中性色（占视觉面积最大）
|
||||
|
||||
| Token | 浅色 | 深色 | 用途 |
|
||||
| --- | --- | --- | --- |
|
||||
| `--bg-page` | `#FAF7F2` 暖白 | `#191919` | 页面背景 |
|
||||
| `--bg-card` | `#FFFFFF` | `#23201D` | 卡片、弹窗、浮层表面 |
|
||||
| `--bg-muted` | `#F3EEE7` | `#2B2622` | 分组背景、表格表头 |
|
||||
| `--bg-input` | `#F5F1EB` | `#2B2622` | 输入框、搜索框 |
|
||||
| `--text-primary` | `#2E2622` 深墨 | `#F5EFE8` | 主标题、正文 |
|
||||
| `--text-secondary` | `#8A7E76` | `#B3A79C` | 说明、标签、辅助信息 |
|
||||
| `--text-muted` | `#B3A89E` | `#82766C` | 弱提示、占位符 |
|
||||
|
||||
### 4.2 品牌色（珊瑚粉）
|
||||
|
||||
| Token | 浅色 | 深色 | 用途 |
|
||||
| --- | --- | --- | --- |
|
||||
| `--accent-primary` | `#D96C6A` | `#F09198` | 主按钮、价格、选中态 |
|
||||
| `--accent-primary-strong` | `#C75B59` | `#FFA7AD` | 按压态、强调文本 |
|
||||
| `--accent-primary-soft` | `#F6E0DC` | `rgba(240,145,152,.14)` | 标签底、浅色选中背景 |
|
||||
|
||||
### 4.3 辅助色
|
||||
|
||||
| Token | 浅色 | 深色 | 用途 |
|
||||
| --- | --- | --- | --- |
|
||||
| `--accent-secondary` | `#6C7BDB` | `#8E97E8` | 二级链接、地址、聚焦 |
|
||||
| `--success` | `#4FA477` | `#67C58E` | 完成、成功、已下单 |
|
||||
| `--warning` | `#D99A4E` | `#E0AD68` | 待处理、提醒 |
|
||||
| `--danger` | `#D85D5D` | `#EF7A7A` | 删除、错误、取消 |
|
||||
|
||||
### 4.4 边框与阴影
|
||||
|
||||
- 常规边框：`1rpx solid var(--border)`
|
||||
- 强调边框：`1rpx solid var(--border-strong)`
|
||||
- 聚焦边框：`1rpx solid var(--accent-primary)`
|
||||
- 卡片阴影：`var(--shadow-card)`
|
||||
- 弹窗/吸顶：`var(--shadow-elevated)`
|
||||
|
||||
### 4.5 禁止事项
|
||||
禁止事项：
|
||||
|
||||
- 禁止整页彩色渐变背景。
|
||||
- 禁止大面积使用超过 2 种高饱和色。
|
||||
- 禁止在浅色页使用 `#000` 纯黑作为正文。
|
||||
- 禁止深色页使用 `#fff` 纯白作为正文。
|
||||
- 禁止浅色页使用纯黑 `#000` 作为正文，禁止深色页使用纯白 `#fff` 作为正文。
|
||||
- 禁止在 UI 内使用 emoji 替代图标。
|
||||
|
||||
---
|
||||
|
||||
## 5. 字体与排版
|
||||
## Typography
|
||||
|
||||
### 5.1 字体栈
|
||||
统一使用系统字体栈，不打包自定义字体：
|
||||
|
||||
```
|
||||
-apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB',
|
||||
'Noto Sans SC', 'Microsoft YaHei', 'Segoe UI', sans-serif
|
||||
```
|
||||
|
||||
不引入包内字体，控制小程序包体积并保证 iOS/Android 渲染一致。
|
||||
字号以 750rpx 设计稿为准：
|
||||
|
||||
### 5.2 字号阶梯（750rpx 设计稿）
|
||||
- **Display** 56rpx / 800 / 1.15：品牌大字、营销页主标题
|
||||
- **Title-LG** 44rpx / 700 / 1.2：页面主标题
|
||||
- **Title** 36rpx / 700 / 1.25：区块标题、卡片标题
|
||||
- **Heading** 32rpx / 600 / 1.3：小节标题、列表项名称
|
||||
- **Body** 28rpx / 400 / 1.6：正文、表单内容
|
||||
- **Caption** 24rpx / 400 / 1.4：说明文字、辅助信息
|
||||
- **Micro** 20rpx / 500 / 1.2：标签、角标、时间
|
||||
|
||||
| 名称 | 字号 | 字重 | 行高 | 用途 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| Display | 56rpx | 800 | 1.15 | 品牌大字、营销页面主标题 |
|
||||
| Title-LG | 44rpx | 700 | 1.2 | 页面主标题 |
|
||||
| Title | 36rpx | 700 | 1.25 | 区块标题、卡片标题 |
|
||||
| Heading | 32rpx | 600 | 1.3 | 小节标题、列表项名称 |
|
||||
| Body | 28rpx | 400 | 1.6 | 正文、表单内容 |
|
||||
| Caption | 24rpx | 400 | 1.4 | 说明文字、辅助信息 |
|
||||
| Micro | 20rpx | 500 | 1.2 | 标签、角标、时间 |
|
||||
|
||||
### 5.3 字重用例
|
||||
字重使用：
|
||||
|
||||
- `400`：正文
|
||||
- `500`：次级强调、输入内容
|
||||
@@ -190,59 +67,61 @@
|
||||
- `700`：页面标题、卡片标题
|
||||
- `800`：仅 Display 使用
|
||||
|
||||
### 5.4 排版规则
|
||||
排版规则：
|
||||
|
||||
- 标题不换行时使用 `ellipsis` 省略。
|
||||
- 正文行高默认 1.6，长条款可用 1.8。
|
||||
- 数字与货币使用 `tabular-nums` 风格，避免跳动。
|
||||
- 数字与货币使用 `tabular-nums`，避免跳动。
|
||||
- 段落间距 16-24rpx，不靠空行制造层级。
|
||||
- 页面顶部大标题与内容之间至少保留 24rpx。
|
||||
|
||||
---
|
||||
|
||||
## 6. 间距与布局
|
||||
## Spacing
|
||||
|
||||
### 6.1 间距梯度
|
||||
|
||||
所有间距从以下数值取：
|
||||
间距梯度：
|
||||
|
||||
```
|
||||
4rpx · 8rpx · 12rpx · 16rpx · 24rpx · 32rpx · 48rpx · 64rpx · 96rpx
|
||||
```
|
||||
|
||||
### 6.2 页面布局
|
||||
布局规则：
|
||||
|
||||
- 页面左右留白：32rpx
|
||||
- 页面底部安全区：`calc(24rpx + env(safe-area-inset-bottom))`
|
||||
- 卡片之间间隙：24rpx
|
||||
- 卡片内边距：24-32rpx
|
||||
- 分组标题与内容间距：24rpx
|
||||
- 页面左右留白统一 32rpx。
|
||||
- 页面底部安全区：`calc(24rpx + env(safe-area-inset-bottom))`。
|
||||
- 卡片之间间隙 24rpx。
|
||||
- 卡片内边距 24-32rpx。
|
||||
- 分组标题与内容间距 24rpx。
|
||||
- 顶部标题与内容之间至少保留 24rpx。
|
||||
|
||||
### 6.3 安全区
|
||||
固定底栏的场景，需要在可滚动内容底部预留额外留白，避免悬浮栏遮挡内容：
|
||||
|
||||
- 顶部：用 `Taro.getMenuButtonBoundingClientRect()` 计算状态栏和胶囊位置，Header 下方再留 16-24rpx。
|
||||
- 底部：`env(safe-area-inset-bottom)`，TabBar/操作栏必须避让。
|
||||
- 页面正文底部留白不小于 88px（Web 样例值），小程序落地时按 `112rpx + env(safe-area-inset-bottom)` 计算。
|
||||
- 只有真正不需要上下滚动的页面可以不加底部预留。
|
||||
|
||||
---
|
||||
|
||||
## 7. 圆角、边框、阴影与毛玻璃
|
||||
|
||||
### 7.1 圆角
|
||||
## Border Radius
|
||||
|
||||
| 场景 | 圆角 |
|
||||
| --- | --- |
|
||||
| 输入框、小标签 | 16rpx |
|
||||
| 普通卡片 | 24rpx |
|
||||
| 弹窗、底部弹层 | 32rpx |
|
||||
| 按钮、胶囊 | 999rpx |
|
||||
| 按钮、胶囊、分页 chip | 999rpx |
|
||||
| 圆形头像 / 圆形图标按钮 | 50% |
|
||||
|
||||
### 7.2 边框
|
||||
小程序中不使用 `3px dashed` 卡片，不使用星星贴纸做装饰边框。
|
||||
|
||||
- 只有一种默认边框：`1rpx solid var(--border)`。
|
||||
- 弹窗和吸顶层可以换成 `1rpx solid rgba(255,255,255,.16)`（深色同理）。
|
||||
- 不再使用 3px 虚线卡片。
|
||||
---
|
||||
|
||||
### 7.3 毛玻璃
|
||||
## Elevation
|
||||
|
||||
阴影只表达层级，不做发光或浓重投影。
|
||||
|
||||
- **卡片阴影** `--shadow-card`：浅色 `0 2px 10px rgba(46,38,34,.06)`；深色 `0 2px 12px rgba(0,0,0,.3)`
|
||||
- **浮层阴影** `--shadow-elevated`：浅色 `0 12px 30px rgba(46,38,34,.14)`；深色 `0 12px 36px rgba(0,0,0,.48)`
|
||||
|
||||
毛玻璃是本系统最重要的浮层质感，只用于需要浮在内容之上的场景。
|
||||
|
||||
```css
|
||||
.glass-surface {
|
||||
@@ -253,7 +132,16 @@
|
||||
}
|
||||
```
|
||||
|
||||
深色主题自动由 `--glass` 和 border 变量接管。
|
||||
底部 TabBar 与底部操作栏需要比普通玻璃更透、更明显地透出内容，使用更低透明度与更强模糊：
|
||||
|
||||
```css
|
||||
.floating-glass {
|
||||
background: rgba(255, 255, 255, 0.55); /* dark: rgba(25, 25, 25, 0.55) */
|
||||
backdrop-filter: blur(32px) saturate(1.2);
|
||||
-webkit-backdrop-filter: blur(32px) saturate(1.2);
|
||||
border: 1rpx solid var(--glass-line);
|
||||
}
|
||||
```
|
||||
|
||||
毛玻璃使用场景：
|
||||
|
||||
@@ -265,20 +153,9 @@
|
||||
|
||||
---
|
||||
|
||||
## 8. 图标与图片
|
||||
## Components
|
||||
|
||||
- 图标统一放 `src/icon/`，构建时随包输出。
|
||||
- 图标尺寸只允许 24 / 32 / 40 / 48 / 56 / 80rpx。
|
||||
- 功能图标优先使用线性风格，选中态使用填充变体。
|
||||
- 禁止在 UI 中使用 emoji 代替图标。
|
||||
- 商品大图走 OSS，`/icon/*` 小图标继续本地打包。
|
||||
- 图片统一 `aspectFill`，商品缩略图使用 `aspect-ratio` 固定比例，避免加载后跳动。
|
||||
|
||||
---
|
||||
|
||||
## 9. 组件规范
|
||||
|
||||
### 9.1 按钮
|
||||
### Buttons
|
||||
|
||||
| 变体 | 背景 | 文字 | 边框 |
|
||||
| --- | --- | --- | --- |
|
||||
@@ -289,9 +166,9 @@
|
||||
|
||||
尺寸：
|
||||
|
||||
- 大按钮：高度 96rpx，圆角 999rpx，字号 32rpx/600
|
||||
- 大按钮：高度 96rpx，圆角 999rpx，字号 32rpx / 600
|
||||
- 中按钮：高度 80rpx
|
||||
- 小按钮：高度 64rpx，字号 26rpx/600
|
||||
- 小按钮：高度 64rpx，字号 26rpx / 600
|
||||
|
||||
状态：
|
||||
|
||||
@@ -300,212 +177,127 @@
|
||||
- Loading：按钮内显示 24rpx 环形 loading 后再显示文案
|
||||
- 危险操作必须二次确认（`showModal`）
|
||||
|
||||
### 9.2 卡片
|
||||
### Cards
|
||||
|
||||
- **Surface Card**：默认内容容器，`--bg-card` + 1rpx border + `--shadow-card`。
|
||||
- **Glass Card**：信息浮层/图片上覆盖，使用毛玻璃。
|
||||
- **Media Card**：图片在上或居左，使用 `aspect-ratio`，文字区域带留白。
|
||||
- 卡片禁止再次嵌套 `dashed-card`，同一个视觉层最多出现一张卡片。
|
||||
- **Surface Card**：默认内容容器，`--bg-card` + 1rpx border + `--shadow-card`
|
||||
- **Glass Card**：信息浮层 / 图片上覆盖，使用毛玻璃
|
||||
- **Media Card**：图片在上或居左，使用 `aspect-ratio` 固定比例，文字区域带留白
|
||||
- 卡片禁止再次嵌套 dashed-card，同一个视觉层最多出现一张卡片。
|
||||
|
||||
### 9.3 表单
|
||||
### Forms
|
||||
|
||||
- 输入框高度 88rpx，圆角 16rpx，内边距 0 24rpx。
|
||||
- 占位符用 `--text-muted`，输入文字用 `--text-primary`。
|
||||
- 聚焦时边框 `--accent-primary`，并保留 1px 位移/轻阴影反馈。
|
||||
- 错误信息：`--danger`，24rpx，显示在控件下方 8rpx。
|
||||
- 聚焦边框 `--accent-primary`，并保留轻位移 / 轻阴影反馈。
|
||||
- 错误信息用 `--danger`，显示在控件下方 8rpx。
|
||||
- `textarea` 最小高度 240rpx，内边距 24rpx，行高 1.6。
|
||||
- 搜索框同样使用 `--bg-input`，聚焦时切到 `--bg-card` + 主色描边。
|
||||
|
||||
### 9.4 列表行
|
||||
### Lists
|
||||
|
||||
- 最小高度 112rpx。
|
||||
- 左侧图标 48rpx，标题 32rpx/600，辅助信息 24rpx。
|
||||
- 列表行最小高度 112rpx。
|
||||
- 左侧图标 48rpx，标题 32rpx / 600，辅助信息 24rpx。
|
||||
- 右侧箭头 28rpx，使用 `--text-muted`。
|
||||
- 分隔线：`1rpx solid var(--border)`，默认左右留 32rpx。
|
||||
|
||||
### 9.5 标签与徽标
|
||||
### Tags & Badges
|
||||
|
||||
- 高度 40rpx，圆角 999rpx，字号 22rpx/600。
|
||||
- 底色使用功能色的 12-15% 透明底，文字用对应功能色。
|
||||
- 徽标数字使用深色底或主色底，白字，最小宽高 28rpx。
|
||||
- 标签高度 40rpx，圆角 999rpx，字号 22rpx / 600。
|
||||
- 标签底色使用功能色的 12-15% 透明底，文字用对应功能色。
|
||||
- 徽标数字使用深色底或主色底、白字，最小宽高 28rpx。
|
||||
|
||||
### 9.6 Tabs 与分段控件
|
||||
### Tabs & Segmented Controls
|
||||
|
||||
- Tab 高度 88rpx，字号 28rpx/500。
|
||||
- Tab 高度 88rpx，字号 28rpx / 500。
|
||||
- 选中态：`--accent-primary` + 600 字重 + 48rpx 宽圆角指示条。
|
||||
- 分段控件置于 `--bg-muted` 容器，选中项为 `--bg-card` 浮起。
|
||||
|
||||
### 9.7 弹窗与底部弹层
|
||||
### Modals & Bottom Sheets
|
||||
|
||||
- 遮罩：`rgba(0,0,0,0.5)`
|
||||
- 遮罩：`rgba(0,0,0,.45)`。
|
||||
- 居中弹窗：圆角 32rpx，内边距 40rpx，最大宽度 640rpx。
|
||||
- 底部弹层：顶部圆角 32rpx，底部延伸到安全区，顶部带 64rpx 宽拖动条。
|
||||
- 内容超过一屏时允许滚动，操作按钮固定在弹层底部。
|
||||
|
||||
### 9.8 空状态
|
||||
### Empty States
|
||||
|
||||
- 图标 96rpx，主题色 12% 透明圆形底。
|
||||
- 标题 32rpx/700，说明 26rpx/`--text-secondary`。
|
||||
- 标题 32rpx / 700，说明 26rpx / `--text-secondary`。
|
||||
- 主 CTA 默认 80rpx 高度。
|
||||
- 空状态必须给出下一步动作，不让用户停在死胡同。
|
||||
- 空状态必须给出下一步动作。
|
||||
|
||||
### 9.9 步进器与滑块
|
||||
### Steppers & Sliders
|
||||
|
||||
- 步进器按钮 60rpx，圆角 16rpx，中缝数字宽度不小于 48rpx。
|
||||
- 滑块轨道高度 8rpx，圆角 999rpx。
|
||||
- 滑块圆点 32rpx，主色描边，拖动时 40rpx。
|
||||
- 滑块值实时显示在右侧，格式如 `80%`、`+12`。
|
||||
|
||||
### 9.10 Toast 与骨架屏
|
||||
### Toast & Skeleton
|
||||
|
||||
- Toast 使用 `rgba(40,35,32,0.92)` 深色底、白字，圆角 24rpx。
|
||||
- Toast 使用 `rgba(40,35,32,.92)` 深色底、白字，圆角 24rpx。
|
||||
- 短文案优先 `icon: 'none'`，成功才使用 `icon: 'success'`。
|
||||
- 骨架屏用 `--bg-muted`，以 1.4s 透明度呼吸动画，不闪烁。
|
||||
|
||||
---
|
||||
### Custom Navigation & TabBar
|
||||
|
||||
## 10. 页面结构规范
|
||||
|
||||
### 10.1 自定义导航
|
||||
|
||||
所有页面使用自定义导航，不再依赖系统导航栏背景：
|
||||
|
||||
```ts
|
||||
// app.config.ts
|
||||
window: {
|
||||
navigationStyle: 'custom',
|
||||
navigationBarTextStyle: 'black'
|
||||
}
|
||||
```
|
||||
|
||||
页面 Header 结构：
|
||||
|
||||
```
|
||||
[状态栏空白]
|
||||
[返回/标题/右侧操作]（与胶囊按钮同一水平线，左右留 24rpx）
|
||||
[16-24rpx 内容间距]
|
||||
```
|
||||
|
||||
规则：
|
||||
|
||||
- 返回按钮 48rpx 触控区，旧页面 `←` 字符统一替换为线性返回图标。
|
||||
- 标题 34rpx/600，居中，最多 8 个字。
|
||||
- 所有页面使用 `navigationStyle: custom`，自行避让状态栏和胶囊。
|
||||
- 页面结构：状态栏空白 + 返回/标题/右侧操作，同一水平线，左右留 24rpx。
|
||||
- 返回按钮触控区 48rpx，旧 `←` 字符替换为线性返回图标。
|
||||
- 标题 34rpx / 600，居中，最多 8 个字。
|
||||
- 右侧操作与左侧占位保持同宽，保证标题真正居中。
|
||||
|
||||
### 10.2 页面层级
|
||||
自定义 TabBar：
|
||||
|
||||
```
|
||||
自定义导航 Header
|
||||
页面内容区（左右 32rpx）
|
||||
固定操作栏 / TabBar（毛玻璃 + 安全区）
|
||||
```
|
||||
- 高度 96rpx + `env(safe-area-inset-bottom)`。
|
||||
- 毛玻璃半透明底，悬浮在内容之上。
|
||||
- 图标 44rpx，选中态填充 + 轻放大；文字 20rpx / 600。
|
||||
- 5 个 tab 均分，最大宽度 160rpx。
|
||||
|
||||
### 10.3 固定操作栏
|
||||
固定操作栏：
|
||||
|
||||
- 高度 112rpx + 安全区，圆角仅保留顶部 24rpx。
|
||||
- 高度 112rpx + 安全区。
|
||||
- 背景使用毛玻璃，不透明底 `--bg-card` 作为降级。
|
||||
- 主 CTA 永远在屏幕右下角或通栏。
|
||||
|
||||
### 10.4 自定义 TabBar
|
||||
|
||||
- 高度 96rpx + `env(safe-area-inset-bottom)`。
|
||||
- 毛玻璃半透明底。
|
||||
- 图标 44rpx，选中态填充 + 轻放大；文字 20rpx/600。
|
||||
- 5 个 tab 均分，最大宽度 160rpx。
|
||||
|
||||
---
|
||||
|
||||
## 11. 微交互动效
|
||||
## Motion
|
||||
|
||||
- 时长：160-240ms
|
||||
- 缓动：`cubic-bezier(0.22, 1, 0.36, 1)`
|
||||
- 时长：160-240ms。
|
||||
- 缓动：`cubic-bezier(0.22, 1, 0.36, 1)`。
|
||||
- 只动画 `opacity` 和 `transform`，避免重排。
|
||||
- 按压反馈：按钮 `scale(0.98)`，卡片 `scale(0.975)`。
|
||||
- 页面进入：内容区上移 24rpx + 淡入，不要做成满屏位移动画。
|
||||
- 页面进入：内容区上移 24rpx + 淡入，不做满屏位移动画。
|
||||
- Tab 切换、列表筛选不添加横向滑动动画，除非用户手势触发。
|
||||
|
||||
---
|
||||
|
||||
## 12. 深浅色模式
|
||||
## Do's and Don'ts
|
||||
|
||||
- 沿用现有 `theme.json` + `darkmode: true` 作为系统探测通道。
|
||||
- 页面根节点统一 `theme-light` / `theme-dark`。
|
||||
- 顶部状态栏文字只有黑/白两种，以 `useStatusBar` 控制。
|
||||
- 页面背景由 `applyPageBackground` 实时同步，避免顶部闪白。
|
||||
- 所有颜色必须走 token，不允许页面内再出现 `#b08d8d`、`#fce4ec` 等硬编码。
|
||||
1. **Do** 使用统一 token 管理颜色、字号、间距、圆角、阴影与毛玻璃。
|
||||
2. **Don't** 在页面里写硬编码颜色，尤其不要继续出现 `#b08d8d`、`#fce4ec` 等旧值。
|
||||
3. **Do** 用留白和字重建立层级，卡片和边框只表达真实容器。
|
||||
4. **Don't** 恢复 `3px dashed` 卡片和 `star-badge` 星星贴纸装饰。
|
||||
5. **Do** 让固定 TabBar 和底部操作栏保持悬浮毛玻璃，可滚动页面底部要预留空白，内容滑到顶部时不被底栏遮挡。
|
||||
6. **Don't** 把底栏做成完全不透明的纯色块，除非是降级兜底。
|
||||
7. **Do** 在深色模式下检查所有文字与背景对比度，页面背景由系统实时同步，避免顶部闪白。
|
||||
8. **Don't** 使用 emoji 代替图标，功能图标优先线性，选中态使用填充变体。
|
||||
9. **Do** 保证主要点击目标不小于 88rpx，所有尺寸基于 750rpx 设计稿。
|
||||
10. **Don't** 在一个视觉层里嵌套多个卡片，或把页面区块全部做成浮起的可滚动卡片。
|
||||
|
||||
---
|
||||
|
||||
## 13. 微信官方约束与应用
|
||||
|
||||
本项目相关约束都来自微信官方文档，引用如下：
|
||||
|
||||
| 约束 | 官方说明 | 链接 |
|
||||
| --- | --- | --- |
|
||||
| 小程序设计指南 | 官方对导航、触控、反馈等设计建议 | https://developers.weixin.qq.com/miniprogram/design/ |
|
||||
| rpx 尺寸单位 | 750rpx 屏幕宽度设计稿 | https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html |
|
||||
| app.json 全局配置 | `navigationStyle`、`darkmode`、`themeLocation` | https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html |
|
||||
| 深色模式适配 | `theme.json`、`onThemeChange` | https://developers.weixin.qq.com/miniprogram/dev/framework/ability/darkmode.html |
|
||||
| 自定义 tabBar | `custom: true` 与组件实现 | https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html |
|
||||
|
||||
本规范落地时必须满足：
|
||||
|
||||
1. **尺寸**：一律使用 rpx，基于 750 设计稿。
|
||||
2. **触控**：主要点击目标不小于 88rpx（约 44pt）。
|
||||
3. **导航**：`navigationStyle: custom`，自行避让胶囊按钮和状态栏。
|
||||
4. **背景**：系统顶栏文字只有黑/白，因此所有页面背景必须通过自定义导航的留白与 `backgroundColorTop/Bottom` 协同控制。
|
||||
5. **包体积**：小于 2MB，图标本地打包，大图走 OSS。
|
||||
6. **字体**：使用系统字体，降低排版与体积风险。
|
||||
7. **深色模式**：所有颜色走 `theme-light/theme-dark` token。
|
||||
|
||||
---
|
||||
|
||||
## 14. 当前代码映射
|
||||
|
||||
将现有 `src/app.scss` 变量迁到新规范：
|
||||
|
||||
| 现有变量 | 新规范 |
|
||||
| --- | --- |
|
||||
| `--bg-page: #ffffff` | `--bg-page: #faf7f2` |
|
||||
| `--bg-card: #ffffff` | `--bg-card: #ffffff` |
|
||||
| `--line-card: 3px dashed #ffb7c5` | 删除，卡片改 `1rpx solid var(--border)` |
|
||||
| `--line-star: #ffb7c5` | 删除，统一用 `--border` |
|
||||
| `--text-primary: #5c3a3a` | `--text-primary: #2e2622` |
|
||||
| `--text-secondary: #b08d8d` | `--text-secondary: #8a7e76` |
|
||||
| `--text-muted: #d28a8a` | `--text-muted: #b3a89e` |
|
||||
| `--accent-pink: #ff9a9e` | `--accent-primary: #d96c6a` |
|
||||
| `--accent-blue: #5b8cff` | `--accent-secondary: #6c7bdb` |
|
||||
| `--btn-gradient` | Primary 按钮改实色 `--accent-primary`，可保留极淡渐变 |
|
||||
| `--shadow-card` | `--shadow-card: 0 8rpx 24rpx rgba(46,38,34,.08)` |
|
||||
| `--bg-input: #f8f9fa` | `--bg-input: #f5f1eb` |
|
||||
|
||||
页面迁移检查项：
|
||||
|
||||
- 删除 `.dashed-card` 与 `.star-badge` 的视觉依赖。
|
||||
- `src/pages/orders/index.scss` 等硬编码颜色改为 token。
|
||||
- 全项目统一在 SCSS 中直接书写 `rpx`，减少 `px`/`rpx` 混用。
|
||||
- 弹窗、TabBar、底部操作栏统一使用毛玻璃。
|
||||
- 空状态、Toast、骨架屏按第 9.8/9.10 节统一。
|
||||
|
||||
---
|
||||
|
||||
## 15. 验收清单
|
||||
## Acceptance
|
||||
|
||||
- 所有页面使用同一套 CSS 变量，无新增硬编码颜色。
|
||||
- 页面没有 `3px dashed` 卡片和星星装饰。
|
||||
- 自定义导航在所有机型避让状态栏与胶囊按钮。
|
||||
- 深浅色切换后所有页面文字与背景可读。
|
||||
- 深浅色切换后页面文字与背景可读。
|
||||
- 主要点击目标 ≥ 88rpx。
|
||||
- 表单有聚焦、错误、禁用状态。
|
||||
- 空状态都有下一步动作。
|
||||
- TabBar、吸顶栏、底部弹层为毛玻璃。
|
||||
- 页面横向留白统一 32rpx。
|
||||
- 图片有固定比例，加载前后不跳动。
|
||||
|
||||
---
|
||||
|
||||
## 16. 下一步
|
||||
|
||||
1. 打开 `design-system.html` 检查样例细节。
|
||||
2. 按反馈修订本规范。
|
||||
3. 将 token 落地到 `src/app.scss`。
|
||||
4. 按页面迁移清单逐页替换，最后真机回归深浅色与安全区。
|
||||
- 可滚动页面在底部悬浮栏下预留足够空白。
|
||||
|
||||
+2859
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,428 @@
|
||||
# 智绘微刻小程序全量 UI 换肤实施计划
|
||||
|
||||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||
|
||||
**Goal:** 按 `design.md` 将 Taro 微信小程序的全局样式、主题配置、自定义 TabBar、通用组件和全部页面 UI 从旧手账风格迁移到新的克制现代风格。
|
||||
|
||||
**Architecture:** 以 `src/app.scss` 的 CSS Token 为单一视觉源；先建立新 token 和公共组件类，再把同名 `.btn-gradient`/`.btn-outline`/`.dashed-card`/`.star-badge` 逐页替换为 `--accent-primary` 等新语义；最后更新图标、主题配置并跑 `build:weapp` 验证。
|
||||
|
||||
**Tech Stack:** Taro 3 + React + TypeScript + Sass，微信小程序，自定义 TabBar，CSS variables，`rpx` 为主单位。
|
||||
|
||||
---
|
||||
|
||||
## Global Constraints
|
||||
|
||||
- 遵守 `/Users/broccoli/Project/wechat_wc/design.md` 的全部 token、组件、间距、圆角、毛玻璃和动效规范。
|
||||
- 浅色主背景 `#faf7f2`，深色主背景 `#191919`；主色 `#d96c6a` / 深色 `#f09198`；辅助色 `#6c7bdb` / 深色 `#8e97e8`。
|
||||
- 删除 `3px dashed` 卡片与 `star-badge` 星星贴纸装饰；所有卡片改为 `1rpx solid var(--border)` + `--shadow-card`。
|
||||
- 自定义 TabBar 和底部操作栏使用毛玻璃：浅色 `rgba(255,255,255,.55)`，深色 `rgba(25,25,25,.55)`，`backdrop-filter: blur(32px) saturate(1.2)` + `-webkit-backdrop-filter`。
|
||||
- 可滚动页面底部保留足够空白，避免浮动底栏遮挡内容；全局 `.safe-bottom-placeholder` 高度调整为 200px。
|
||||
- 尺寸以 750rpx 设计稿为准；主要触控目标不小于 88rpx。
|
||||
- 不使用 optional chaining、nullish coalescing；JS 中避免 `?.` 与 `??`。
|
||||
- 不直接修改 `dist/`；只改 `src/`，构建产物由 `npm run build:weapp` 重新生成。
|
||||
- 图标继续使用项目本地 SVG/PNG，不新增 emoji 图标；SVG 中旧粉色 `#ff9a9e` 统一换为 `#d96c6a`。
|
||||
|
||||
---
|
||||
|
||||
### Task 1: 全局 Token 与基础样式
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/app.scss`
|
||||
- Modify: `src/theme.json`
|
||||
- Modify: `src/app.config.ts`
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: `design.md` 的 token 表。
|
||||
- Produces: 新的全局 CSS 变量名与公共类名，供后续所有页面使用。
|
||||
|
||||
- [ ] **Step 1: 替换 `src/app.scss` 的 `.theme-light` token**
|
||||
把浅色 token 更新为：
|
||||
|
||||
```scss
|
||||
--bg-page: #faf7f2;
|
||||
--bg-card: #ffffff;
|
||||
--bg-muted: #f3eee7;
|
||||
--bg-input: #f5f1eb;
|
||||
--text-primary: #2e2622;
|
||||
--text-secondary: #8a7e76;
|
||||
--text-muted: #b3a89e;
|
||||
--accent-primary: #d96c6a;
|
||||
--accent-primary-strong: #c75b59;
|
||||
--accent-primary-soft: #f6e0dc;
|
||||
--accent-secondary: #6c7bdb;
|
||||
--accent-secondary-soft: rgba(108, 123, 219, 0.12);
|
||||
--success: #4fa477;
|
||||
--warning: #d99a4e;
|
||||
--danger: #d85d5d;
|
||||
--border: #ede5dc;
|
||||
--border-strong: #e0d5c8;
|
||||
--glass: rgba(255, 255, 255, 0.72);
|
||||
--glass-line: rgba(255, 255, 255, 0.55);
|
||||
--shadow-card: 0 8rpx 24rpx rgba(46, 38, 34, 0.08);
|
||||
--shadow-elevated: 0 12rpx 40rpx rgba(46, 38, 34, 0.12);
|
||||
```
|
||||
|
||||
保留旧 token 作为过渡别名，指向新值，供尚未迁移的页面继续使用；最后一轮统一清理：
|
||||
|
||||
```scss
|
||||
--line-card: 1rpx solid var(--border);
|
||||
--line-star: var(--border);
|
||||
--accent-pink: var(--accent-primary);
|
||||
--accent-blue: var(--accent-secondary);
|
||||
```
|
||||
|
||||
- [ ] **Step 2: 替换 `src/app.scss` 的 `.theme-dark` token**
|
||||
深色 token 更新为：
|
||||
|
||||
```scss
|
||||
--bg-page: #191919;
|
||||
--bg-card: #23201d;
|
||||
--bg-muted: #2b2622;
|
||||
--bg-input: #2b2622;
|
||||
--text-primary: #f5efe8;
|
||||
--text-secondary: #b3a79c;
|
||||
--text-muted: #82766c;
|
||||
--accent-primary: #f09198;
|
||||
--accent-primary-strong: #ffa7ad;
|
||||
--accent-primary-soft: rgba(240, 145, 152, 0.14);
|
||||
--accent-secondary: #8e97e8;
|
||||
--accent-secondary-soft: rgba(142, 151, 232, 0.14);
|
||||
--success: #67c58e;
|
||||
--warning: #e0ad68;
|
||||
--danger: #ef7a7a;
|
||||
--border: #37312c;
|
||||
--border-strong: #463e37;
|
||||
--glass: rgba(25, 25, 25, 0.72);
|
||||
--glass-line: rgba(255, 255, 255, 0.14);
|
||||
--shadow-card: 0 8rpx 24rpx rgba(0, 0, 0, 0.32);
|
||||
--shadow-elevated: 0 12rpx 40rpx rgba(0, 0, 0, 0.48);
|
||||
```
|
||||
|
||||
- [ ] **Step 3: 删除旧装饰类**
|
||||
删除 `.dashed-card`、`.star-badge` 的旧视觉实现，删除 `.btn-gradient` 旧渐变属性、`.btn-outline` 旧虚线属性，改为设计系统类：
|
||||
|
||||
```scss
|
||||
.surface-card {
|
||||
background: var(--bg-card);
|
||||
border: 1rpx solid var(--border);
|
||||
border-radius: 24rpx;
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent-primary);
|
||||
color: #fff;
|
||||
border-radius: 999rpx;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--bg-card);
|
||||
color: var(--text-primary);
|
||||
border: 1rpx solid var(--border-strong);
|
||||
border-radius: 999rpx;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--danger);
|
||||
color: #fff;
|
||||
border-radius: 999rpx;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
background: rgba(255, 255, 255, 0.55);
|
||||
backdrop-filter: blur(32px) saturate(1.2);
|
||||
-webkit-backdrop-filter: blur(32px) saturate(1.2);
|
||||
border-top: 1rpx solid var(--glass-line);
|
||||
}
|
||||
```
|
||||
|
||||
为兼容旧页面中的类名，保留两个按钮过渡别名：
|
||||
|
||||
```scss
|
||||
.btn-gradient { @extend .btn-primary; }
|
||||
.btn-outline { @extend .btn-secondary; }
|
||||
```
|
||||
|
||||
同时保留 `.badge`/`.badge-*` 基础结构，但颜色改为新 token：`--success`、`--warning`、`--danger`、`--accent-primary-soft`。
|
||||
|
||||
- [ ] **Step 4: 更新 `.safe-bottom-placeholder`**
|
||||
将 `height: 160px` 改为 `height: 200px`。
|
||||
|
||||
- [ ] **Step 5: 更新 `src/theme.json`**
|
||||
浅色 `bgColor`/`navBgColor`/`bgColorTop`/`bgColorBottom`/`tabBarBgColor` 改为 `#faf7f2`；`tabBarColor` 改为 `#8a7e76`；`tabBarSelectedColor` 改为 `#d96c6a`。
|
||||
深色 `tabBarColor` 改为 `#b3a79c`；`tabBarSelectedColor` 改为 `#f09198`。
|
||||
|
||||
- [ ] **Step 6: 更新 `src/app.config.ts`**
|
||||
`window.navigationBarBackgroundColor`、`backgroundColor`、`backgroundColorTop`、`backgroundColorBottom` 改为 `#faf7f2`。
|
||||
|
||||
- [ ] **Step 7: 提交**
|
||||
|
||||
```bash
|
||||
git add src/app.scss src/theme.json src/app.config.ts
|
||||
git commit -m "feat: update global tokens and remove legacy decorations"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 2: 主题背景与自定义导航
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/utils/themeBackground.ts`
|
||||
- Modify: `src/components/ThemedPageMeta/index.tsx`
|
||||
- Modify: `src/hooks/useStatusBar.ts`
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: Task 1 的浅色/深色背景 token。
|
||||
- Produces: 所有页面顶部状态栏、胶囊区、背景始终同步 `#faf7f2` / `#191919`。
|
||||
|
||||
- [ ] **Step 1:** 将 `themePageColor('light')` 由 `'#ffffff'` 改为 `'#faf7f2'`。
|
||||
- [ ] **Step 2:** `ThemedPageMeta` 中 `bg` 由浅色 `'#ffffff'` 改为 `'#faf7f2'`，深色保持 `'#191919'`。
|
||||
- [ ] **Step 3:** `useStatusBar` 中浅色 `backgroundColor` 改为 `'#faf7f2'`。
|
||||
- [ ] **Step 4:** 跑 `npm run build:weapp` 确认无编译错误后提交。
|
||||
|
||||
```bash
|
||||
git add src/utils/themeBackground.ts src/components/ThemedPageMeta/index.tsx src/hooks/useStatusBar.ts
|
||||
git commit -m "feat: sync theme background tokens"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 3: 自定义 TabBar 毛玻璃
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/custom-tab-bar/index.scss`
|
||||
- Modify: `src/custom-tab-bar/index.tsx`
|
||||
- Modify: `src/icon/*.svg`（默认色值批量替换）
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: 自定义 TabBar 现有的 5 个 tab 配置和图标。
|
||||
- Produces: 悬浮毛玻璃 TabBar，选中态使用新主色。
|
||||
|
||||
- [ ] **Step 1:** 重写 `src/custom-tab-bar/index.scss`
|
||||
- 容器改为 `left: 12px; right: 12px; bottom: 12px;`，`border-radius: 24px`，`height: calc(96px + env(safe-area-inset-bottom))`。
|
||||
- 浅色背景 `rgba(255, 255, 255, 0.55)`，深色背景 `rgba(25, 25, 25, 0.55)`，两者都加 `backdrop-filter: blur(32px) saturate(1.2)` 和 `-webkit-backdrop-filter`。
|
||||
- 文字普通态 `#8a7e76`，选中态 `#d96c6a`；深色普通态 `#b3a79c`，选中态 `#f09198`。
|
||||
- 图标尺寸沿用 40rpx，选中态 `transform: scale(1.08)`。
|
||||
|
||||
- [ ] **Step 2:** 批量更新 SVG 图标默认颜色
|
||||
|
||||
```bash
|
||||
perl -pi -e 's/#ff9a9e/#d96c6a/g; s/#b08d8d/#8a7e76/g' src/icon/*.svg
|
||||
```
|
||||
|
||||
只替换纯文本 SVG 颜色；PNG 图标保持不变。
|
||||
|
||||
- [ ] **Step 3:** 提交
|
||||
|
||||
```bash
|
||||
git add src/custom-tab-bar src/icon
|
||||
git commit -m "feat: frosted floating tab bar and updated icon colors"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 4: 通用组件登录与主题按钮
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/components/LoginModal/index.scss`
|
||||
- Modify: `src/components/LoginModal/index.tsx`
|
||||
- Modify: `src/components/LoginGuard/index.scss`
|
||||
- Modify: `src/components/LoginGuard/index.tsx`
|
||||
- Modify: `src/components/ThemeToggle/index.scss`
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: Task 1 的 `.surface-card`、`.btn-primary`、`.btn-secondary`。
|
||||
- Produces: 登录弹窗、登录守卫、主题按钮使用新视觉。
|
||||
|
||||
- [ ] **Step 1:** `LoginModal/index.tsx` 中把 `login-card dashed-card` 改为 `surface-card login-card`，删除 `star-badge`。
|
||||
- [ ] **Step 2:** `LoginModal/index.tsx` 中把 `btn-outline` 替换为 `btn-secondary`，`btn-gradient` 替换为 `btn-primary`。
|
||||
- [ ] **Step 3:** `LoginModal/index.scss` 删除 `3px dashed var(--line-star)`；`avatar-btn`、`.nickname-input` 改 `1rpx solid var(--border)`，聚焦/错误按设计规范补 `--accent-primary`。
|
||||
- [ ] **Step 4:** `LoginGuard/index.tsx` 中 `btn-gradient` 替换为 `btn-primary`，`index.scss` 更新 token 引用。
|
||||
- [ ] **Step 5:** `ThemeToggle/index.scss` 圆角保持 50%，背景改为 `rgba(25, 25, 25, 0.42)`，文字仍简短保留。
|
||||
|
||||
- [ ] **Step 6:** 跑 `npm run build:weapp` 后提交。
|
||||
|
||||
```bash
|
||||
git add src/components src/custom-tab-bar
|
||||
git commit -m "feat: refresh login components"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 5: 首页与商品列表
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/pages/index/index.scss`
|
||||
- Modify: `src/pages/index/index.tsx`
|
||||
- Modify: `src/pages/shop/index.scss`
|
||||
- Modify: `src/pages/shop/index.tsx`
|
||||
**Interfaces:**
|
||||
- Consumes: Task 1 的 public classes 与 token。
|
||||
- Produces: 首页、商品列表页无旧虚线/星星，且主题、间距、卡片符合 `design.md`。
|
||||
|
||||
- [ ] **Step 1:** 在 `index.tsx` 删除所有 `star-badge`，将所有 `dashed-card` 改为 `surface-card`，`btn-gradient` 改 `btn-primary`，`btn-outline` 改 `btn-secondary`。
|
||||
- [ ] **Step 2:** `index.scss` 中 `#f8f9fa`、`--accent-pink`、`--line-star` 全部替换为新 token；轮播 indicator 颜色改 `#d96c6a` / `#e0d5c8`。
|
||||
- [ ] **Step 3:** `shop/index.tsx` 底部 `height: 160px` 改为 `200px`；`shop-card-price` 颜色改 `var(--accent-primary)`。
|
||||
- [ ] **Step 4:** `shop/index.scss` 的 `#ff9a9e` 改 `var(--accent-primary)`，删除任何虚线和旧色硬编码。
|
||||
- [ ] **Step 5:** 跑构建并提交。
|
||||
|
||||
```bash
|
||||
git add src/pages/index src/pages/shop
|
||||
git commit -m "feat: refresh home and shop pages"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 6: 商品详情与定制流程
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/pages/product/index.scss`
|
||||
- Modify: `src/pages/product/index.tsx`
|
||||
- Modify: `src/pages/shop/detail/index.scss`
|
||||
- Modify: `src/pages/shop/detail/index.tsx`
|
||||
- Modify: `src/pages/diy/index.scss`
|
||||
- Modify: `src/pages/diy/index.tsx`
|
||||
- Modify: `src/pages/diy/stickerEdit/index.scss`
|
||||
- Modify: `src/pages/diy/stickerEdit/index.tsx`
|
||||
- Modify: `src/pages/checkout/index.scss`
|
||||
- Modify: `src/pages/checkout/index.tsx`
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: 全局毛玻璃 `.action-bar`、`.surface-card`、`.btn-primary`。
|
||||
- Produces: 商品详情、定制工作台、贴纸编辑、结算页统一为毛玻璃底部操作 + 新 token。
|
||||
|
||||
- [ ] **Step 1:** 在所有 TSX 中删除 `star-badge`，把 `dashed-card` 改为 `surface-card`，把 `btn-gradient`/`btn-outline` 改为 `btn-primary`/`btn-secondary`。
|
||||
- [ ] **Step 2:** `product/index.scss` 顶部 `padding-bottom: calc(24px + 160px)` 改为 `calc(24px + 200px)`；`.action-bar` 借用全局毛玻璃样式。
|
||||
- [ ] **Step 3:** `checkout/index.scss` 与 `orderDetail/index.scss` 中 `addr-picker-add`、虚线边框全部改为 `1rpx solid var(--border-strong)` 或 `var(--border)`。
|
||||
- [ ] **Step 4:** `shop/detail/index.scss` 删除 `#ff9a9e`、`#fecfef` 渐变，改成新 token 和新毛玻璃/卡片阴影。
|
||||
- [ ] **Step 5:** `diy` 与 `stickerEdit` 的虚线边框、`--accent-blue`、`--accent-pink` 全部替换为新 token；底部操作栏使用 `.action-bar` 毛玻璃规则。
|
||||
- [ ] **Step 6:** 跑构建并提交。
|
||||
|
||||
```bash
|
||||
git add src/pages/product src/pages/shop/detail src/pages/diy src/pages/checkout
|
||||
git commit -m "feat: refresh product and customization flows"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 7: 设计清单、订单、订单详情
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/pages/designList/index.scss`
|
||||
- Modify: `src/pages/designList/index.tsx`
|
||||
- Modify: `src/pages/orders/index.scss`
|
||||
- Modify: `src/pages/orders/index.tsx`
|
||||
- Modify: `src/pages/orderDetail/index.scss`
|
||||
- Modify: `src/pages/orderDetail/index.tsx`
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: `.surface-card`、`.btn-primary`、`.btn-secondary`、新 token。
|
||||
- Produces: 设计清单、订单列表、订单详情页符合设计规范。
|
||||
|
||||
- [ ] **Step 1:** 删除所有 `star-badge` 与 `dashed-card`，改用 `.surface-card`。
|
||||
- [ ] **Step 2:** 所有 TSX 的 `btn-gradient`/`btn-outline` 改 `btn-primary`/`btn-secondary`。
|
||||
- [ ] **Step 3:** `orders/index.scss` 删除 `#b08d8d`、`#ff9a9e`、`#5c3a3a`，改 token。
|
||||
- [ ] **Step 4:** `orderDetail/index.scss` 中虚线边框、`.addr-picker-*`、状态按钮颜色改为新 token 与毛玻璃规则。
|
||||
- [ ] **Step 5:** 跑构建并提交。
|
||||
|
||||
```bash
|
||||
git add src/pages/designList src/pages/orders src/pages/orderDetail
|
||||
git commit -m "feat: refresh design list and order pages"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 8: 个人中心与入口页
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/pages/profile/index.scss`
|
||||
- Modify: `src/pages/profile/index.tsx`
|
||||
- Modify: `src/pages/settings/index.scss`
|
||||
- Modify: `src/pages/settings/index.tsx`
|
||||
- Modify: `src/pages/address/index.scss`
|
||||
- Modify: `src/pages/address/index.tsx`
|
||||
- Modify: `src/pages/agreement/index.scss`
|
||||
- Modify: `src/pages/agreement/index.tsx`
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: Task 1 全局类。
|
||||
- Produces: 个人中心、设置、地址、协议页去掉旧装饰。
|
||||
|
||||
- [ ] **Step 1:** 删除各 TSX 中 `star-badge`，`dashed-card` 改 `surface-card`，按钮类名更新。
|
||||
- [ ] **Step 2:** `profile/index.scss` 线性渐变背景只保留中性 `--bg-card`/`--bg-muted` 或极淡辅助色，不继续使用旧粉色/蓝色大渐变。
|
||||
- [ ] **Step 3:** `settings/index.scss`、`address/index.scss` 中 `--accent-pink`/`--accent-blue` 全部替换。
|
||||
- [ ] **Step 4:** `agreement/index.scss` 只更新 token 与间距，无装饰元素可保留。
|
||||
- [ ] **Step 5:** 跑构建并提交。
|
||||
|
||||
```bash
|
||||
git add src/pages/profile src/pages/settings src/pages/address src/pages/agreement
|
||||
git commit -m "feat: refresh profile and settings pages"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 9: 客服、词云、用户数据库
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/pages/service/index.scss`
|
||||
- Modify: `src/pages/service/index.tsx`
|
||||
- Modify: `src/pages/wordcloud/index.scss`
|
||||
- Modify: `src/pages/wordcloud/index.tsx`
|
||||
- Modify: `src/pages/userDatabase/index.scss`
|
||||
- Modify: `src/pages/userDatabase/index.tsx`
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: Task 1 全局类。
|
||||
- Produces: 客服、词云、用户数据库页无旧装饰。
|
||||
|
||||
- [ ] **Step 1:** 删除 `star-badge`，`dashed-card` 改 `surface-card`，按钮更新为 `.btn-primary`/`.btn-secondary`。
|
||||
- [ ] **Step 2:** `wordcloud/index.scss` 中 `.upload-area`、`.input-section`、结果图容器改为 `1rpx solid var(--border)` + 24rpx 圆角。
|
||||
- [ ] **Step 3:** `userDatabase/index.scss` 中旧 `.btn-gradient`/`--accent-blue` 全部替换。
|
||||
- [ ] **Step 4:** 跑构建并提交。
|
||||
|
||||
```bash
|
||||
git add src/pages/service src/pages/wordcloud src/pages/userDatabase
|
||||
git commit -m "feat: refresh service and tool pages"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 10: 构建验证与残留清理
|
||||
|
||||
**Files:**
|
||||
- All `src/**/*.scss`, `src/**/*.tsx`
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: 前序任务成果。
|
||||
- Produces: 一个可构建、无旧风格残留的代码库。
|
||||
|
||||
- [ ] **Step 1:** 全局搜索确认不再出现旧风格残留（`--accent-pink`/`--accent-blue` 的过渡别名在此时移除后允许为 0 命中）：
|
||||
|
||||
```bash
|
||||
rg -n "star-badge|dashed-card|accent-pink|accent-blue|btn-gradient|btn-outline|#ff9a9e|#fecfef|#b08d8d|#5c3a3a|--line-card|--line-star" src --glob '!**/*.png'
|
||||
```
|
||||
|
||||
如仍有残留，修复到没有命中（除 Task 3 已批量替换外）。
|
||||
|
||||
- [ ] **Step 2:** 删除 `src/app.scss` 中的过渡别名 `--line-card`、`--line-star`、`--accent-pink`、`--accent-blue`，并移除 `.btn-gradient` / `.btn-outline` 的 `@extend` 别名；把页面中残留的这两个类名改为 `.btn-primary` / `.btn-secondary`。
|
||||
|
||||
- [ ] **Step 3:** 构建：
|
||||
|
||||
```bash
|
||||
cd /Users/broccoli/Project/wechat_wc && npm run build:weapp
|
||||
```
|
||||
|
||||
预期成功且无 TS/Sass 错误。
|
||||
|
||||
- [ ] **Step 4:** 检查 `dist/` 重新生成，若需要提交则加入提交；如用户未要求则不手动覆盖 dist。
|
||||
|
||||
---
|
||||
|
||||
## Completion
|
||||
|
||||
全部任务完成后执行 `superpowers:requesting-code-review` 做最终代码审查；确认无阻塞问题后用 `superpowers:finishing-a-development-branch` 收尾。
|
||||
@@ -0,0 +1,511 @@
|
||||
# 智绘微刻小程序设计规范
|
||||
|
||||
> 版本：v1（草案）
|
||||
> 适用范围：Taro + React + TypeScript 微信小程序的全部页面与组件
|
||||
> 交付物：本规范 `DESIGN.md` + 交互式样例页 `design-system.html`
|
||||
> 原则：一套 token、两套主题、统一组件行为，让设计语言先于页面实现。
|
||||
|
||||
---
|
||||
|
||||
## 1. 文档定位
|
||||
|
||||
这份规范把「智绘微刻」的小程序从现有的手账感装饰风，收敛为一套更现代、更克制、但保留品牌浪漫感的设计语言。
|
||||
|
||||
它同时承担三种角色：
|
||||
|
||||
1. **设计 Token 定义**：颜色、字体、间距、圆角、阴影、毛玻璃等全部由变量驱动。
|
||||
2. **组件行为定义**：按钮、卡片、表单、弹窗、导航等组件的尺寸、状态和交互。
|
||||
3. **微信适配约束**：rpx、安全区、自定义导航、深浅色、触控目标等微信小程序硬约束。
|
||||
|
||||
后续修改页面时，只允许从本规范取值，不允许继续引入新的硬编码颜色、字号或组件形态。
|
||||
|
||||
---
|
||||
|
||||
## 2. 设计原则
|
||||
|
||||
### 2.1 去装饰化
|
||||
|
||||
- 不再使用 `3px dashed` 虚线卡片作为默认容器。
|
||||
- 移除 `star-badge` 星星贴纸装饰。
|
||||
- 装饰只承担功能：状态、层级、动效提示，不承担“氛围”。
|
||||
|
||||
### 2.2 留白优先
|
||||
|
||||
- 用间距和字重建立信息层级，而不是用边框和卡片嵌套。
|
||||
- 页面横向统一 32rpx 留白，内容区不贴边。
|
||||
- 卡片之间用间距分隔，卡片内部用 padding 分隔。
|
||||
|
||||
### 2.3 克制色彩
|
||||
|
||||
- 珊瑚粉只用于主操作、选中态和价格等关键信息。
|
||||
- 大面积背景使用暖白/深墨等中性色。
|
||||
- 蓝紫只做次级信息色（链接、地址、聚焦状态）。
|
||||
|
||||
### 2.4 现代质感
|
||||
|
||||
- 毛玻璃只出现在需要浮层的场景：TabBar、吸顶栏、弹窗、底部操作区。
|
||||
- 阴影保持低饱和、低扩散，强调层级而不是“发光”。
|
||||
- 支持 160-240ms 的轻量过渡，不做夸张动画。
|
||||
|
||||
### 2.5 微信原生一致性
|
||||
|
||||
- 全局使用 `navigationStyle: custom` 自定义导航，自行留出状态栏和胶囊区域。
|
||||
- 全部使用系统字体栈，不打包自定义字体。
|
||||
- 全部尺寸基于 750rpx 设计稿，最终在微信中由 rpx 转换。
|
||||
|
||||
---
|
||||
|
||||
## 3. 设计 Token 总览
|
||||
|
||||
```css
|
||||
/* 浅色主题 */
|
||||
.theme-light {
|
||||
--bg-page: #faf7f2;
|
||||
--bg-card: #ffffff;
|
||||
--bg-muted: #f3eee7;
|
||||
--bg-input: #f5f1eb;
|
||||
--text-primary: #2e2622;
|
||||
--text-secondary: #8a7e76;
|
||||
--text-muted: #b3a89e;
|
||||
--accent-primary: #d96c6a;
|
||||
--accent-primary-strong: #c75b59;
|
||||
--accent-primary-soft: #f6e0dc;
|
||||
--accent-secondary: #6c7bdb;
|
||||
--accent-secondary-soft: rgba(108, 123, 219, 0.12);
|
||||
--success: #4fa477;
|
||||
--warning: #d99a4e;
|
||||
--danger: #d85d5d;
|
||||
--border: #ede5dc;
|
||||
--border-strong: #e0d5c8;
|
||||
--glass: rgba(255, 255, 255, 0.72);
|
||||
--shadow-card: 0 8rpx 24rpx rgba(46, 38, 34, 0.08);
|
||||
--shadow-elevated: 0 12rpx 40rpx rgba(46, 38, 34, 0.12);
|
||||
}
|
||||
|
||||
/* 深色主题 */
|
||||
.theme-dark {
|
||||
--bg-page: #191919;
|
||||
--bg-card: #23201d;
|
||||
--bg-muted: #2b2622;
|
||||
--bg-input: #2b2622;
|
||||
--text-primary: #f5efe8;
|
||||
--text-secondary: #b3a79c;
|
||||
--text-muted: #82766c;
|
||||
--accent-primary: #f09198;
|
||||
--accent-primary-strong: #ffa7ad;
|
||||
--accent-primary-soft: rgba(240, 145, 152, 0.14);
|
||||
--accent-secondary: #8e97e8;
|
||||
--accent-secondary-soft: rgba(142, 151, 232, 0.14);
|
||||
--success: #67c58e;
|
||||
--warning: #e0ad68;
|
||||
--danger: #ef7a7a;
|
||||
--border: #37312c;
|
||||
--border-strong: #463e37;
|
||||
--glass: rgba(25, 25, 25, 0.72);
|
||||
--shadow-card: 0 8rpx 24rpx rgba(0, 0, 0, 0.35);
|
||||
--shadow-elevated: 0 12rpx 40rpx rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
```
|
||||
|
||||
`design-system.html` 中使用的 Web 版本会把这些值转为 `px`，但命名、层级和语义完全一致。
|
||||
|
||||
---
|
||||
|
||||
## 4. 色彩系统
|
||||
|
||||
### 4.1 中性色（占视觉面积最大）
|
||||
|
||||
| Token | 浅色 | 深色 | 用途 |
|
||||
| --- | --- | --- | --- |
|
||||
| `--bg-page` | `#FAF7F2` 暖白 | `#191919` | 页面背景 |
|
||||
| `--bg-card` | `#FFFFFF` | `#23201D` | 卡片、弹窗、浮层表面 |
|
||||
| `--bg-muted` | `#F3EEE7` | `#2B2622` | 分组背景、表格表头 |
|
||||
| `--bg-input` | `#F5F1EB` | `#2B2622` | 输入框、搜索框 |
|
||||
| `--text-primary` | `#2E2622` 深墨 | `#F5EFE8` | 主标题、正文 |
|
||||
| `--text-secondary` | `#8A7E76` | `#B3A79C` | 说明、标签、辅助信息 |
|
||||
| `--text-muted` | `#B3A89E` | `#82766C` | 弱提示、占位符 |
|
||||
|
||||
### 4.2 品牌色（珊瑚粉）
|
||||
|
||||
| Token | 浅色 | 深色 | 用途 |
|
||||
| --- | --- | --- | --- |
|
||||
| `--accent-primary` | `#D96C6A` | `#F09198` | 主按钮、价格、选中态 |
|
||||
| `--accent-primary-strong` | `#C75B59` | `#FFA7AD` | 按压态、强调文本 |
|
||||
| `--accent-primary-soft` | `#F6E0DC` | `rgba(240,145,152,.14)` | 标签底、浅色选中背景 |
|
||||
|
||||
### 4.3 辅助色
|
||||
|
||||
| Token | 浅色 | 深色 | 用途 |
|
||||
| --- | --- | --- | --- |
|
||||
| `--accent-secondary` | `#6C7BDB` | `#8E97E8` | 二级链接、地址、聚焦 |
|
||||
| `--success` | `#4FA477` | `#67C58E` | 完成、成功、已下单 |
|
||||
| `--warning` | `#D99A4E` | `#E0AD68` | 待处理、提醒 |
|
||||
| `--danger` | `#D85D5D` | `#EF7A7A` | 删除、错误、取消 |
|
||||
|
||||
### 4.4 边框与阴影
|
||||
|
||||
- 常规边框：`1rpx solid var(--border)`
|
||||
- 强调边框：`1rpx solid var(--border-strong)`
|
||||
- 聚焦边框：`1rpx solid var(--accent-primary)`
|
||||
- 卡片阴影：`var(--shadow-card)`
|
||||
- 弹窗/吸顶：`var(--shadow-elevated)`
|
||||
|
||||
### 4.5 禁止事项
|
||||
|
||||
- 禁止整页彩色渐变背景。
|
||||
- 禁止大面积使用超过 2 种高饱和色。
|
||||
- 禁止在浅色页使用 `#000` 纯黑作为正文。
|
||||
- 禁止深色页使用 `#fff` 纯白作为正文。
|
||||
|
||||
---
|
||||
|
||||
## 5. 字体与排版
|
||||
|
||||
### 5.1 字体栈
|
||||
|
||||
```
|
||||
-apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB',
|
||||
'Noto Sans SC', 'Microsoft YaHei', 'Segoe UI', sans-serif
|
||||
```
|
||||
|
||||
不引入包内字体，控制小程序包体积并保证 iOS/Android 渲染一致。
|
||||
|
||||
### 5.2 字号阶梯（750rpx 设计稿）
|
||||
|
||||
| 名称 | 字号 | 字重 | 行高 | 用途 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| Display | 56rpx | 800 | 1.15 | 品牌大字、营销页面主标题 |
|
||||
| Title-LG | 44rpx | 700 | 1.2 | 页面主标题 |
|
||||
| Title | 36rpx | 700 | 1.25 | 区块标题、卡片标题 |
|
||||
| Heading | 32rpx | 600 | 1.3 | 小节标题、列表项名称 |
|
||||
| Body | 28rpx | 400 | 1.6 | 正文、表单内容 |
|
||||
| Caption | 24rpx | 400 | 1.4 | 说明文字、辅助信息 |
|
||||
| Micro | 20rpx | 500 | 1.2 | 标签、角标、时间 |
|
||||
|
||||
### 5.3 字重用例
|
||||
|
||||
- `400`：正文
|
||||
- `500`：次级强调、输入内容
|
||||
- `600`：按钮、小标题
|
||||
- `700`：页面标题、卡片标题
|
||||
- `800`：仅 Display 使用
|
||||
|
||||
### 5.4 排版规则
|
||||
|
||||
- 标题不换行时使用 `ellipsis` 省略。
|
||||
- 正文行高默认 1.6，长条款可用 1.8。
|
||||
- 数字与货币使用 `tabular-nums` 风格，避免跳动。
|
||||
- 段落间距 16-24rpx，不靠空行制造层级。
|
||||
- 页面顶部大标题与内容之间至少保留 24rpx。
|
||||
|
||||
---
|
||||
|
||||
## 6. 间距与布局
|
||||
|
||||
### 6.1 间距梯度
|
||||
|
||||
所有间距从以下数值取：
|
||||
|
||||
```
|
||||
4rpx · 8rpx · 12rpx · 16rpx · 24rpx · 32rpx · 48rpx · 64rpx · 96rpx
|
||||
```
|
||||
|
||||
### 6.2 页面布局
|
||||
|
||||
- 页面左右留白：32rpx
|
||||
- 页面底部安全区：`calc(24rpx + env(safe-area-inset-bottom))`
|
||||
- 卡片之间间隙：24rpx
|
||||
- 卡片内边距：24-32rpx
|
||||
- 分组标题与内容间距：24rpx
|
||||
|
||||
### 6.3 安全区
|
||||
|
||||
- 顶部：用 `Taro.getMenuButtonBoundingClientRect()` 计算状态栏和胶囊位置，Header 下方再留 16-24rpx。
|
||||
- 底部：`env(safe-area-inset-bottom)`，TabBar/操作栏必须避让。
|
||||
|
||||
---
|
||||
|
||||
## 7. 圆角、边框、阴影与毛玻璃
|
||||
|
||||
### 7.1 圆角
|
||||
|
||||
| 场景 | 圆角 |
|
||||
| --- | --- |
|
||||
| 输入框、小标签 | 16rpx |
|
||||
| 普通卡片 | 24rpx |
|
||||
| 弹窗、底部弹层 | 32rpx |
|
||||
| 按钮、胶囊 | 999rpx |
|
||||
|
||||
### 7.2 边框
|
||||
|
||||
- 只有一种默认边框：`1rpx solid var(--border)`。
|
||||
- 弹窗和吸顶层可以换成 `1rpx solid rgba(255,255,255,.16)`（深色同理）。
|
||||
- 不再使用 3px 虚线卡片。
|
||||
|
||||
### 7.3 毛玻璃
|
||||
|
||||
```css
|
||||
.glass-surface {
|
||||
background: var(--glass);
|
||||
backdrop-filter: blur(24rpx);
|
||||
-webkit-backdrop-filter: blur(24rpx);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.42);
|
||||
}
|
||||
```
|
||||
|
||||
深色主题自动由 `--glass` 和 border 变量接管。
|
||||
|
||||
毛玻璃使用场景：
|
||||
|
||||
- 自定义 TabBar
|
||||
- 页面吸顶信息条
|
||||
- 底部操作栏
|
||||
- 底部弹窗背景
|
||||
- 需要盖在图片上的卡片
|
||||
|
||||
---
|
||||
|
||||
## 8. 图标与图片
|
||||
|
||||
- 图标统一放 `src/icon/`，构建时随包输出。
|
||||
- 图标尺寸只允许 24 / 32 / 40 / 48 / 56 / 80rpx。
|
||||
- 功能图标优先使用线性风格，选中态使用填充变体。
|
||||
- 禁止在 UI 中使用 emoji 代替图标。
|
||||
- 商品大图走 OSS，`/icon/*` 小图标继续本地打包。
|
||||
- 图片统一 `aspectFill`，商品缩略图使用 `aspect-ratio` 固定比例，避免加载后跳动。
|
||||
|
||||
---
|
||||
|
||||
## 9. 组件规范
|
||||
|
||||
### 9.1 按钮
|
||||
|
||||
| 变体 | 背景 | 文字 | 边框 |
|
||||
| --- | --- | --- | --- |
|
||||
| Primary | `--accent-primary` | 白 | 无 |
|
||||
| Secondary | `--bg-card` | `--text-primary` | 1rpx `--border-strong` |
|
||||
| Ghost | 透明 | `--accent-primary` | 无 |
|
||||
| Destructive | `--danger` | 白 | 无 |
|
||||
|
||||
尺寸：
|
||||
|
||||
- 大按钮：高度 96rpx，圆角 999rpx，字号 32rpx/600
|
||||
- 中按钮：高度 80rpx
|
||||
- 小按钮：高度 64rpx，字号 26rpx/600
|
||||
|
||||
状态：
|
||||
|
||||
- 按压：`scale(0.98)` + 主色加深 4%
|
||||
- 禁用：`opacity: 0.45`，无点击反馈
|
||||
- Loading：按钮内显示 24rpx 环形 loading 后再显示文案
|
||||
- 危险操作必须二次确认（`showModal`）
|
||||
|
||||
### 9.2 卡片
|
||||
|
||||
- **Surface Card**：默认内容容器，`--bg-card` + 1rpx border + `--shadow-card`。
|
||||
- **Glass Card**：信息浮层/图片上覆盖，使用毛玻璃。
|
||||
- **Media Card**：图片在上或居左，使用 `aspect-ratio`，文字区域带留白。
|
||||
- 卡片禁止再次嵌套 `dashed-card`，同一个视觉层最多出现一张卡片。
|
||||
|
||||
### 9.3 表单
|
||||
|
||||
- 输入框高度 88rpx，圆角 16rpx，内边距 0 24rpx。
|
||||
- 占位符用 `--text-muted`，输入文字用 `--text-primary`。
|
||||
- 聚焦时边框 `--accent-primary`，并保留 1px 位移/轻阴影反馈。
|
||||
- 错误信息：`--danger`，24rpx，显示在控件下方 8rpx。
|
||||
- `textarea` 最小高度 240rpx，内边距 24rpx，行高 1.6。
|
||||
|
||||
### 9.4 列表行
|
||||
|
||||
- 最小高度 112rpx。
|
||||
- 左侧图标 48rpx，标题 32rpx/600，辅助信息 24rpx。
|
||||
- 右侧箭头 28rpx，使用 `--text-muted`。
|
||||
- 分隔线：`1rpx solid var(--border)`，默认左右留 32rpx。
|
||||
|
||||
### 9.5 标签与徽标
|
||||
|
||||
- 高度 40rpx，圆角 999rpx，字号 22rpx/600。
|
||||
- 底色使用功能色的 12-15% 透明底，文字用对应功能色。
|
||||
- 徽标数字使用深色底或主色底，白字，最小宽高 28rpx。
|
||||
|
||||
### 9.6 Tabs 与分段控件
|
||||
|
||||
- Tab 高度 88rpx，字号 28rpx/500。
|
||||
- 选中态：`--accent-primary` + 600 字重 + 48rpx 宽圆角指示条。
|
||||
- 分段控件置于 `--bg-muted` 容器，选中项为 `--bg-card` 浮起。
|
||||
|
||||
### 9.7 弹窗与底部弹层
|
||||
|
||||
- 遮罩：`rgba(0,0,0,0.5)`
|
||||
- 居中弹窗：圆角 32rpx，内边距 40rpx，最大宽度 640rpx。
|
||||
- 底部弹层：顶部圆角 32rpx，底部延伸到安全区，顶部带 64rpx 宽拖动条。
|
||||
- 内容超过一屏时允许滚动，操作按钮固定在弹层底部。
|
||||
|
||||
### 9.8 空状态
|
||||
|
||||
- 图标 96rpx，主题色 12% 透明圆形底。
|
||||
- 标题 32rpx/700，说明 26rpx/`--text-secondary`。
|
||||
- 主 CTA 默认 80rpx 高度。
|
||||
- 空状态必须给出下一步动作，不让用户停在死胡同。
|
||||
|
||||
### 9.9 步进器与滑块
|
||||
|
||||
- 步进器按钮 60rpx，圆角 16rpx，中缝数字宽度不小于 48rpx。
|
||||
- 滑块轨道高度 8rpx，圆角 999rpx。
|
||||
- 滑块圆点 32rpx，主色描边，拖动时 40rpx。
|
||||
- 滑块值实时显示在右侧，格式如 `80%`、`+12`。
|
||||
|
||||
### 9.10 Toast 与骨架屏
|
||||
|
||||
- Toast 使用 `rgba(40,35,32,0.92)` 深色底、白字，圆角 24rpx。
|
||||
- 短文案优先 `icon: 'none'`，成功才使用 `icon: 'success'`。
|
||||
- 骨架屏用 `--bg-muted`，以 1.4s 透明度呼吸动画，不闪烁。
|
||||
|
||||
---
|
||||
|
||||
## 10. 页面结构规范
|
||||
|
||||
### 10.1 自定义导航
|
||||
|
||||
所有页面使用自定义导航，不再依赖系统导航栏背景：
|
||||
|
||||
```ts
|
||||
// app.config.ts
|
||||
window: {
|
||||
navigationStyle: 'custom',
|
||||
navigationBarTextStyle: 'black'
|
||||
}
|
||||
```
|
||||
|
||||
页面 Header 结构：
|
||||
|
||||
```
|
||||
[状态栏空白]
|
||||
[返回/标题/右侧操作]（与胶囊按钮同一水平线，左右留 24rpx）
|
||||
[16-24rpx 内容间距]
|
||||
```
|
||||
|
||||
规则：
|
||||
|
||||
- 返回按钮 48rpx 触控区，旧页面 `←` 字符统一替换为线性返回图标。
|
||||
- 标题 34rpx/600，居中，最多 8 个字。
|
||||
- 右侧操作与左侧占位保持同宽，保证标题真正居中。
|
||||
|
||||
### 10.2 页面层级
|
||||
|
||||
```
|
||||
自定义导航 Header
|
||||
页面内容区（左右 32rpx）
|
||||
固定操作栏 / TabBar（毛玻璃 + 安全区）
|
||||
```
|
||||
|
||||
### 10.3 固定操作栏
|
||||
|
||||
- 高度 112rpx + 安全区，圆角仅保留顶部 24rpx。
|
||||
- 背景使用毛玻璃，不透明底 `--bg-card` 作为降级。
|
||||
- 主 CTA 永远在屏幕右下角或通栏。
|
||||
|
||||
### 10.4 自定义 TabBar
|
||||
|
||||
- 高度 96rpx + `env(safe-area-inset-bottom)`。
|
||||
- 毛玻璃半透明底。
|
||||
- 图标 44rpx，选中态填充 + 轻放大；文字 20rpx/600。
|
||||
- 5 个 tab 均分，最大宽度 160rpx。
|
||||
|
||||
---
|
||||
|
||||
## 11. 微交互动效
|
||||
|
||||
- 时长：160-240ms
|
||||
- 缓动：`cubic-bezier(0.22, 1, 0.36, 1)`
|
||||
- 只动画 `opacity` 和 `transform`，避免重排。
|
||||
- 按压反馈：按钮 `scale(0.98)`，卡片 `scale(0.975)`。
|
||||
- 页面进入：内容区上移 24rpx + 淡入，不要做成满屏位移动画。
|
||||
- Tab 切换、列表筛选不添加横向滑动动画，除非用户手势触发。
|
||||
|
||||
---
|
||||
|
||||
## 12. 深浅色模式
|
||||
|
||||
- 沿用现有 `theme.json` + `darkmode: true` 作为系统探测通道。
|
||||
- 页面根节点统一 `theme-light` / `theme-dark`。
|
||||
- 顶部状态栏文字只有黑/白两种，以 `useStatusBar` 控制。
|
||||
- 页面背景由 `applyPageBackground` 实时同步，避免顶部闪白。
|
||||
- 所有颜色必须走 token，不允许页面内再出现 `#b08d8d`、`#fce4ec` 等硬编码。
|
||||
|
||||
---
|
||||
|
||||
## 13. 微信官方约束与应用
|
||||
|
||||
本项目相关约束都来自微信官方文档，引用如下：
|
||||
|
||||
| 约束 | 官方说明 | 链接 |
|
||||
| --- | --- | --- |
|
||||
| 小程序设计指南 | 官方对导航、触控、反馈等设计建议 | https://developers.weixin.qq.com/miniprogram/design/ |
|
||||
| rpx 尺寸单位 | 750rpx 屏幕宽度设计稿 | https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html |
|
||||
| app.json 全局配置 | `navigationStyle`、`darkmode`、`themeLocation` | https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html |
|
||||
| 深色模式适配 | `theme.json`、`onThemeChange` | https://developers.weixin.qq.com/miniprogram/dev/framework/ability/darkmode.html |
|
||||
| 自定义 tabBar | `custom: true` 与组件实现 | https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html |
|
||||
|
||||
本规范落地时必须满足：
|
||||
|
||||
1. **尺寸**：一律使用 rpx，基于 750 设计稿。
|
||||
2. **触控**：主要点击目标不小于 88rpx（约 44pt）。
|
||||
3. **导航**：`navigationStyle: custom`，自行避让胶囊按钮和状态栏。
|
||||
4. **背景**：系统顶栏文字只有黑/白，因此所有页面背景必须通过自定义导航的留白与 `backgroundColorTop/Bottom` 协同控制。
|
||||
5. **包体积**：小于 2MB，图标本地打包，大图走 OSS。
|
||||
6. **字体**：使用系统字体，降低排版与体积风险。
|
||||
7. **深色模式**：所有颜色走 `theme-light/theme-dark` token。
|
||||
|
||||
---
|
||||
|
||||
## 14. 当前代码映射
|
||||
|
||||
将现有 `src/app.scss` 变量迁到新规范：
|
||||
|
||||
| 现有变量 | 新规范 |
|
||||
| --- | --- |
|
||||
| `--bg-page: #ffffff` | `--bg-page: #faf7f2` |
|
||||
| `--bg-card: #ffffff` | `--bg-card: #ffffff` |
|
||||
| `--line-card: 3px dashed #ffb7c5` | 删除，卡片改 `1rpx solid var(--border)` |
|
||||
| `--line-star: #ffb7c5` | 删除，统一用 `--border` |
|
||||
| `--text-primary: #5c3a3a` | `--text-primary: #2e2622` |
|
||||
| `--text-secondary: #b08d8d` | `--text-secondary: #8a7e76` |
|
||||
| `--text-muted: #d28a8a` | `--text-muted: #b3a89e` |
|
||||
| `--accent-pink: #ff9a9e` | `--accent-primary: #d96c6a` |
|
||||
| `--accent-blue: #5b8cff` | `--accent-secondary: #6c7bdb` |
|
||||
| `--btn-gradient` | Primary 按钮改实色 `--accent-primary`，可保留极淡渐变 |
|
||||
| `--shadow-card` | `--shadow-card: 0 8rpx 24rpx rgba(46,38,34,.08)` |
|
||||
| `--bg-input: #f8f9fa` | `--bg-input: #f5f1eb` |
|
||||
|
||||
页面迁移检查项：
|
||||
|
||||
- 删除 `.dashed-card` 与 `.star-badge` 的视觉依赖。
|
||||
- `src/pages/orders/index.scss` 等硬编码颜色改为 token。
|
||||
- 全项目统一在 SCSS 中直接书写 `rpx`，减少 `px`/`rpx` 混用。
|
||||
- 弹窗、TabBar、底部操作栏统一使用毛玻璃。
|
||||
- 空状态、Toast、骨架屏按第 9.8/9.10 节统一。
|
||||
|
||||
---
|
||||
|
||||
## 15. 验收清单
|
||||
|
||||
- 所有页面使用同一套 CSS 变量，无新增硬编码颜色。
|
||||
- 页面没有 `3px dashed` 卡片和星星装饰。
|
||||
- 自定义导航在所有机型避让状态栏与胶囊按钮。
|
||||
- 深浅色切换后所有页面文字与背景可读。
|
||||
- 主要点击目标 ≥ 88rpx。
|
||||
- 表单有聚焦、错误、禁用状态。
|
||||
- 空状态都有下一步动作。
|
||||
- TabBar、吸顶栏、底部弹层为毛玻璃。
|
||||
- 页面横向留白统一 32rpx。
|
||||
- 图片有固定比例，加载前后不跳动。
|
||||
|
||||
---
|
||||
|
||||
## 16. 下一步
|
||||
|
||||
1. 打开 `design-system.html` 检查样例细节。
|
||||
2. 按反馈修订本规范。
|
||||
3. 将 token 落地到 `src/app.scss`。
|
||||
4. 按页面迁移清单逐页替换，最后真机回归深浅色与安全区。
|
||||
Reference in New Issue
Block a user