# 黄精粉健康商城小程序 · Figma UI 界面设计说明文档

> **基于 CRMEB Pro v3.5 移动端（uni-app）二次开发**  
> **源码位置**：`/Users/a123/huangjingfen/pro_v3.5.1/`  
> **版本**：V1.0 · 2026年3月

---

## 1. 设计总则

### 1.1 设计目标

本文档指导 Figma 设计师完成微信小程序全部页面的 UI 设计。核心原则是**最大化复用 CRMEB Pro v3.5 现有的移动端页面和组件**，仅对需要新增或改造的页面进行独立设计，降低设计和开发成本。

### 1.2 设计方针

- **直接复用的页面**：截图现有 CRMEB Pro 小程序页面作为 Figma 中的参考图层，仅标注需要替换的文案/图片/颜色，不做结构性改动
- **改造复用的页面**：以现有页面为基线，在 Figma 中标注新增/修改/隐藏的元素区域
- **全新设计的页面**：严格遵循 CRMEB Pro 的设计语言（圆角、间距、字号、配色），保证视觉一致性

### 1.3 设计规范（对齐 CRMEB Pro v3.5）

| 维度 | 规范 | 说明 |
|---|---|---|
| 画布尺寸 | 375 × 812 pt | iPhone X 标准，适配微信小程序 |
| 栅格系统 | 左右边距 12pt，列间距 8pt | 与 CRMEB Pro 移动端一致 |
| 主题色 | 由后台 DIY 主题配置决定 | 建议使用健康绿（#4CAF50）或品牌金（#C8A86B） |
| 辅助色 | 警告 #FF5722 / 成功 #4CAF50 / 链接 #2196F3 | — |
| 背景色 | 页面背景 #F5F5F5 / 卡片背景 #FFFFFF | — |
| 文字色 | 主文字 #333333 / 次文字 #666666 / 辅助 #999999 | — |
| 标题字号 | 页面标题 18pt / 区域标题 16pt / 列表标题 14pt | — |
| 正文字号 | 正文 14pt / 辅助 12pt / 极小 10pt | — |
| 圆角 | 卡片 12pt / 按钮 20pt（胶囊）/ 头像 50% | — |
| 间距 | 模块间距 12pt / 内边距 12-16pt | — |
| 底部 TabBar | 4个Tab：首页、分类、购物车、我的 | 复用 CRMEB 的 TabBar 样式 |
| 状态栏 | 适配刘海屏安全区 | uni-app 自动处理 |

### 1.4 Figma 项目结构建议

```
黄精粉商城小程序 UI/
├── 🎨 设计规范 Design System
│   ├── 颜色 Colors
│   ├── 字体 Typography
│   ├── 图标 Icons
│   ├── 通用组件 Components（按钮、卡片、弹窗、输入框等）
│   └── 公排专用组件 Queue Components
├── 📱 TabBar 主页面（4页）
│   ├── P01 首页 Index
│   ├── P02 分类页 Category
│   ├── P03 购物车 Cart
│   └── P04 个人中心 Mine
├── 🛒 商品模块（3页）
│   ├── P05 商品列表 GoodsList
│   ├── P06 商品详情-报单商品 GoodsDetail-Queue
│   └── P07 商品详情-普通商品 GoodsDetail-Normal
├── 📦 订单模块（4页）
│   ├── P08 确认订单 OrderConfirm
│   ├── P09 支付方式选择 PaySelect
│   ├── P10 订单列表 OrderList
│   └── P11 订单详情（含公排状态）OrderDetail
├── 🔄 公排模块（3页）  ⭐ 全新设计
│   ├── P12 公排状态页 QueueStatus
│   ├── P13 公排历史记录 QueueHistory
│   └── P14 公排规则说明 QueueRules
├── 💰 资产模块（4页）  ⭐ 全新/改造
│   ├── P15 我的资产总览 Assets
│   ├── P16 提现页 Withdraw
│   ├── P17 余额明细 BalanceDetail
│   └── P18 积分明细 PointsDetail
├── 👥 团队模块（3页）  ⭐ 改造设计
│   ├── P19 我的推荐（团队）Team
│   ├── P20 推荐收益明细 TeamIncome
│   └── P21 推广海报 SharePoster
├── 🔐 登录模块（2页）
│   ├── P22 授权登录 Login
│   └── P23 新用户引导 Guide  ⭐ 全新设计
├── ⚙️ 其他页面（4页）
│   ├── P24 收货地址管理 Address
│   ├── P25 帮助与客服 Help
│   ├── P26 账号设置 Setting
│   └── P27 活动详情/报名 Activity
└── 📋 弹窗与浮层
    ├── C01 支付方式弹窗 PayModal
    ├── C02 提现确认弹窗 WithdrawModal
    ├── C03 公排退款通知弹窗 RefundNotice
    └── C04 等级升级祝贺弹窗 LevelUpModal
```

---

## 2. 逐页设计说明

---

### P01 首页 Index

**复用策略**：改造复用（基于 CRMEB Pro 首页 DIY 装修）

**CRMEB 源码对应**：`uni-app/pages/index/index.vue`

**页面结构**（从上到下）：

| 区域 | 内容 | 复用方式 | 设计要点 |
|---|---|---|---|
| 顶部搜索栏 | 搜索框 + 消息图标 | 直接复用 | 保持 CRMEB 原样 |
| Banner 轮播 | 3-5 张轮播图 | 直接复用 | 后台 DIY 配置，设计师提供轮播图素材模板（3600元套餐主图、品鉴会活动图） |
| 公告栏 | 滚动公告文字 | 直接复用 | 后台配置文案 |
| 快捷入口 | 图标导航（公排查询、我的团队、我的资产、活动报名） | **改造** | 替换 CRMEB 默认的金刚区图标，设计4个自定义图标，风格统一 |
| 活动专区 | 品鉴会/线下活动卡片 | 直接复用 | 使用 CRMEB 图片魔方或图文组件 |
| 报单商品推荐 | 黄精粉套餐大卡片 | **改造** | 在商品卡片上增加"参与公排"标签角标，设计一个小的绿色/金色角标 |
| 普通商品推荐 | 2列商品网格 | 直接复用 | 后台 DIY 商品组件 |
| 底部 TabBar | 首页/分类/购物车/我的 | 直接复用 | 替换 icon 图标为健康主题风格 |

**Figma 设计交付物**：
- 4个金刚区自定义图标（公排查询、我的团队、我的资产、活动报名）
- "参与公排"角标组件
- 2-3套 Banner 轮播图模板（含黄精粉主视觉）
- TabBar 图标（选中态+未选中态）共8个

---

### P02 分类页 Category

**复用策略**：直接复用

**CRMEB 源码对应**：`uni-app/pages/goods_cate/goods_cate.vue`

**设计要点**：完全复用 CRMEB Pro 的分类页面，后台配置分类即可。左侧为一级分类（如"报单商品""健康食品""养生茶饮"），右侧为商品列表。无需设计新页面。

**Figma 处理**：截图现有页面，标注分类名称和图片资源即可。

---

### P03 购物车 Cart

**复用策略**：直接复用

**CRMEB 源码对应**：`uni-app/pages/order_addcart/order_addcart.vue`

**设计要点**：完全复用 CRMEB Pro 购物车页面。无结构改动。

**Figma 处理**：截图参考，无需出新图。

---

### P04 个人中心 Mine

**复用策略**：改造复用

**CRMEB 源码对应**：`uni-app/pages/user/index.vue`

**页面结构**：

| 区域 | 内容 | 复用方式 | 设计要点 |
|---|---|---|---|
| 顶部用户信息卡 | 头像、昵称、会员等级标签 | **改造** | 增加等级标签（普通/创客/云店/服务商/分公司），设计5种等级 Badge 样式，用不同颜色区分 |
| 资产概览条 | 余额 / 待释放积分 / 已释放积分 / 优惠券 | **改造** | 原 CRMEB 是"余额/积分/优惠券"，改为4列展示，增加"待释放积分"和"已释放积分"两项 |
| 我的订单 | 待付款/待发货/待收货/已完成/售后 图标行 | 直接复用 | 保持原样 |
| 功能入口列表 | 我的资产、公排查询、我的推荐、收货地址、帮助客服、设置 | **改造** | 在 CRMEB 的"我的服务"配置中增加"公排查询""我的推荐""我的资产"入口，设计对应的列表 icon |

**Figma 设计交付物**：
- 5种会员等级 Badge 组件（普通会员-灰色、创客-蓝色、云店-绿色、服务商-橙色、分公司-金色）
- 4列资产概览条布局
- "公排查询""我的推荐""我的资产"菜单 icon（3个）

---

### P05 商品列表 GoodsList

**复用策略**：改造复用

**CRMEB 源码对应**：`uni-app/pages/goods_list/index.vue`

**设计要点**：复用 CRMEB 商品列表页面结构。在报单商品的卡片左上角增加"公排商品"角标。普通商品如支持积分支付，在价格下方显示"可用积分"标签。

**Figma 设计交付物**：
- "公排商品"角标组件
- "可用积分"标签组件

---

### P06 商品详情 — 报单商品 GoodsDetail-Queue

**复用策略**：改造复用

**CRMEB 源码对应**：`uni-app/pages/goods_details/index.vue`

**页面结构**：

| 区域 | 内容 | 复用方式 | 设计要点 |
|---|---|---|---|
| 商品轮播图 | 商品主图 | 直接复用 | — |
| 价格区域 | ¥3600 + "公排商品"标签 | **改造** | 价格右侧增加"公排商品"标签，下方增加一行文案："购买后进入公排池，每进4单退1单" |
| 公排信息卡 | 当前公排池状态 | **新增** | ⭐ 设计一个信息卡片：显示"当前排队总数 xxx 单""预计第 xxx 位退款"，卡片内有"查看详情"链接跳转公排状态页 |
| 商品规格 | 规格选择 | 直接复用 | 购买数量选择器，一次可买多单 |
| 商品详情 | 图文详情 | 直接复用 | — |
| 底部购买栏 | 加入购物车 + 立即购买 | **改造** | 隐藏"加入购物车"按钮（报单商品只能直接购买），仅保留"立即购买"按钮 |

**Figma 设计交付物**：
- 公排信息卡片组件（含排队数、预计位置）
- 报单商品专属购买栏（单按钮版）

---

### P07 商品详情 — 普通商品 GoodsDetail-Normal

**复用策略**：改造复用

**CRMEB 源码对应**：同 P06

**与 P06 的区别**：无公排信息卡、有加入购物车按钮、价格区域如支持积分支付则显示"xxx积分可兑"。其余完全复用 CRMEB 原页面。

**Figma 设计交付物**：
- "积分可兑"价格标签组件

---

### P08 确认订单 OrderConfirm

**复用策略**：改造复用

**CRMEB 源码对应**：`uni-app/pages/goods/order_confirm/index.vue`

**设计要点**：复用 CRMEB 确认订单页面。如果是报单商品，在页面顶部增加一条提示条："本商品为公排商品，付款后将进入公排池"。支付方式区域根据商品类型动态展示。

**Figma 设计交付物**：
- 公排商品提示条组件（黄色/橙色背景提示条）

---

### P09 支付方式选择 PaySelect

**复用策略**：改造复用

**CRMEB 源码对应**：CRMEB 原有支付弹窗

**设计要点**：底部弹窗形式。根据商品类型展示不同支付选项。报单商品：微信支付、支付宝、现金余额。普通商品（后台配置决定）：微信支付、支付宝、现金余额、待释放积分、已释放积分。

**Figma 设计交付物**：
- 支付方式选择弹窗（含5种支付方式的icon和布局）

---

### P10 订单列表 OrderList

**复用策略**：直接复用

**CRMEB 源码对应**：`uni-app/pages/goods/order_list/index.vue`

**设计要点**：完全复用 CRMEB 订单列表。Tab 筛选（全部/待付款/待发货/待收货/已完成），订单卡片展示商品图、名称、价格、状态。无新增设计。

---

### P11 订单详情 OrderDetail

**复用策略**：改造复用

**CRMEB 源码对应**：`uni-app/pages/goods/order_details/index.vue`

**设计要点**：复用 CRMEB 订单详情页面。如果是报单商品订单，在订单状态区域下方增加"公排状态模块"。

| 新增区域 | 内容 | 设计要点 |
|---|---|---|
| 公排状态卡片 | 排队序号、当前位置、状态（排队中/已退款） | 使用进度条组件展示"已退 x 单 / 共需 N 单"，绿色进度条 |

**Figma 设计交付物**：
- 公排进度条组件（嵌入订单详情）

---

### P12 公排状态页 QueueStatus ⭐ 全新设计

**复用策略**：全新设计

**对应路由**：`uni-app/pages/queue/status.vue`

**页面结构**（从上到下）：

| 区域 | 内容 | 设计要点 |
|---|---|---|
| 页面标题栏 | "公排状态" | 使用 CRMEB 通用导航栏样式 |
| 数据概览卡 | 3个数据指标：我的排队单数、已退款单数、排队中单数 | 横向3列布局，数字大字体加粗，标签在下方小字 |
| 我的排队列表 | 每条记录：排队序号、入队时间、金额、状态（排队中/已退款）、预计进度 | 卡片列表，每条卡片左侧圆形序号，右侧状态标签。排队中=橙色，已退款=绿色 |
| 空状态 | 无排队记录时 | "您暂无公排记录，购买报单商品即可参与" + 跳转商品列表按钮 |

**Figma 设计交付物**：
- 完整公排状态页面设计稿
- 数据概览卡组件
- 排队记录卡片组件（排队中态 + 已退款态）
- 空状态插画

---

### P13 公排历史记录 QueueHistory ⭐ 全新设计

**复用策略**：全新设计

**对应路由**：`uni-app/pages/queue/history.vue`

**页面结构**：

| 区域 | 内容 | 设计要点 |
|---|---|---|
| 顶部 Tab | 全部 / 排队中 / 已退款 | 使用 CRMEB 通用 Tab 组件样式 |
| 记录列表 | 每条：订单号、入队时间、金额、状态、退款时间（如已退款） | 列表样式参考 CRMEB 的交易流水列表 |
| 下拉加载 | 分页加载 | 使用 CRMEB 通用加载更多组件 |

**Figma 设计交付物**：
- 公排历史记录页面设计稿

---

### P14 公排规则说明 QueueRules ⭐ 全新设计

**复用策略**：全新设计

**对应路由**：`uni-app/pages/queue/rules.vue`

**页面结构**：图文说明页面，包含以下内容模块：

1. **什么是公排**：简明文字 + 示意图（4单进入→退1单的流程图）
2. **公排流程**：步骤图（购买→入队→排队→退款→到账）
3. **常见问题**：折叠式 FAQ 列表

**设计风格**：参考 CRMEB 的文章详情页面，使用图文混排。流程图需要设计师设计一张简洁的矢量插图。

**Figma 设计交付物**：
- 公排规则说明页面完整设计稿
- 公排流程示意图插画
- FAQ 折叠组件

---

### P15 我的资产总览 Assets ⭐ 全新设计

**复用策略**：全新设计（参考 CRMEB 余额/佣金页面的布局风格）

**对应路由**：`uni-app/pages/assets/index.vue`

**页面结构**：

| 区域 | 内容 | 设计要点 |
|---|---|---|
| 资产总览卡 | 大卡片，3行展示：现金余额（可点击提现）、待释放积分（显示今日预计释放）、已释放积分 | 深色渐变背景卡片（参考 CRMEB 的佣金卡片风格），金额大字体白色 |
| 提现按钮 | "申请提现" | 卡片内右上角或余额行右侧，白色胶囊按钮 |
| 功能入口 | 余额明细 / 积分明细 / 提现记录 | 横向3个图标入口 |
| 今日动态 | 今日积分释放 xxx、今日公排退款 xxx | 小卡片或信息条展示 |

**Figma 设计交付物**：
- 资产总览卡片组件（深色渐变背景）
- 功能入口图标（3个）
- 完整资产页面设计稿

---

### P16 提现页 Withdraw

**复用策略**：改造复用

**CRMEB 源码对应**：`uni-app/pages/users/user_cash/index.vue`

**设计要点**：复用 CRMEB 提现页面布局。顶部显示"可提现余额 ¥xxxx"，输入提现金额，下方实时计算"手续费 7%，实际到账 ¥xxxx"。提交按钮。

**改造点**：增加手续费实时计算显示行。

**Figma 设计交付物**：
- 手续费计算显示组件

---

### P17 余额明细 BalanceDetail

**复用策略**：改造复用

**CRMEB 源码对应**：`uni-app/pages/users/user_bill/index.vue`（账单明细）

**设计要点**：复用 CRMEB 账单流水页面。增加"公排退款"类型的流水标识。每条记录：时间、类型（公排退款/购物消费/提现）、金额（+/-）、余额。

**Figma 设计交付物**：
- "公排退款"类型标签样式

---

### P18 积分明细 PointsDetail ⭐ 全新设计

**复用策略**：全新设计（参考 CRMEB 积分明细页面风格）

**对应路由**：`uni-app/pages/assets/detail.vue`

**页面结构**：

| 区域 | 内容 | 设计要点 |
|---|---|---|
| 顶部 Tab | 待释放积分 / 已释放积分 | 两个 Tab 切换 |
| 待释放 Tab | 每条：积分数、来源（"张三购买，直推奖励"）、时间、状态"释放中" | 每条记录下方显示小进度条（已释放比例） |
| 已释放 Tab | 每条：积分数、来源（"每日释放"或"购物消费"）、时间 | 与 CRMEB 账单明细相同布局 |

**Figma 设计交付物**：
- 积分明细页面完整设计稿
- 积分释放进度条组件

---

### P19 我的推荐（团队）Team ⭐ 改造设计

**复用策略**：改造复用

**CRMEB 源码对应**：CRMEB Pro 分销推广人页面 / 团队分销页面

**页面结构**：

| 区域 | 内容 | 设计要点 |
|---|---|---|
| 数据概览 | 3列：直推人数、伞下总人数、伞下总单数 | 使用 CRMEB 分销数据卡片样式 |
| 我的等级 | 当前等级 + 升级进度 | 显示当前等级名称和 Badge，下方进度条"距下一级还需 xx 单" |
| 直推列表 | 我直推的成员列表：头像、昵称、等级、加入时间、贡献单数 | 列表卡片，使用 CRMEB 推广人列表的样式 |
| 查看伞下 | 点击某个直推成员可展开其下级（树状结构） | 树状展开或跳转新页面，初期可用列表嵌套实现 |

**Figma 设计交付物**：
- 等级进度条组件
- 团队成员卡片组件（含等级 Badge）
- 完整团队页面设计稿

---

### P20 推荐收益明细 TeamIncome

**复用策略**：改造复用

**CRMEB 源码对应**：CRMEB Pro 分销佣金明细页面

**设计要点**：复用 CRMEB 佣金明细的列表布局。每条记录展示：获得积分数、来源类型（直推奖励/伞下奖励）、来源成员昵称、关联订单、时间。

**Figma 设计交付物**：
- 收益记录卡片组件（标注"直推奖励"和"伞下奖励"用不同颜色标签区分）

---

### P21 推广海报 SharePoster

**复用策略**：直接复用

**CRMEB 源码对应**：CRMEB Pro 分销海报生成页面

**设计要点**：复用 CRMEB 的海报生成和分享功能。设计师需提供1-2套海报模板素材（包含黄精粉产品图、品牌logo、小程序码占位区域）。

**Figma 设计交付物**：
- 2套推广海报模板（竖版，适合微信朋友圈）

---

### P22 授权登录 Login

**复用策略**：直接复用

**CRMEB 源码对应**：`uni-app/pages/users/wechat_login/index.vue`

**设计要点**：完全复用 CRMEB 的微信授权登录页面。Logo 图标替换为黄精粉品牌 Logo。

---

### P23 新用户引导 Guide ⭐ 全新设计

**复用策略**：全新设计

**对应路由**：`uni-app/pages/queue/rules.vue`（可与规则说明合并或独立）

**页面结构**：Swiper 轮播式引导页（3-4页）

| 步骤 | 内容 | 设计要点 |
|---|---|---|
| 第1页 | 欢迎来到黄精粉商城 + 品牌介绍 | 品牌插画 + 简短文案 |
| 第2页 | "公排进四退一"规则图解 | 流程示意图 + 简短说明 |
| 第3页 | 推荐好友赚积分，多级会员体系说明 | 等级图谱 + 奖励概览 |
| 第4页 | 立即开始 | CTA 按钮"进入商城" |

**Figma 设计交付物**：
- 4页引导页完整设计稿
- 3张引导页插画

---

### P24 收货地址管理 Address

**复用策略**：直接复用

**CRMEB 源码对应**：`uni-app/pages/users/user_address/index.vue` 及 `user_address_list/index.vue`

**设计要点**：完全复用，无改动。

---

### P25 帮助与客服 Help

**复用策略**：直接复用

**CRMEB 源码对应**：CRMEB 在线客服系统

**设计要点**：完全复用 CRMEB 客服聊天功能。

---

### P26 账号设置 Setting

**复用策略**：直接复用

**CRMEB 源码对应**：`uni-app/pages/users/user_set/index.vue`

**设计要点**：复用 CRMEB 设置页。包含头像/昵称修改、手机号管理、退出登录。

---

### P27 活动详情/报名 Activity

**复用策略**：直接复用

**CRMEB 源码对应**：CRMEB Pro 活动管理的移动端展示页面

**设计要点**：复用 CRMEB 活动详情页（封面图、活动信息、报名按钮）。后台创建活动时填写具体信息。

---

## 3. 弹窗与浮层组件

### C01 支付方式弹窗 PayModal

**复用策略**：改造复用

**设计要点**：底部弹出式半屏弹窗。5种支付方式纵向排列，每种带 radio 单选。报单商品时灰置禁用积分选项。

### C02 提现确认弹窗 WithdrawModal

**复用策略**：新增组件

**设计要点**：居中弹窗。内容：提现金额、手续费(7%)、实际到账金额。两个按钮"取消""确认提现"。

### C03 公排退款通知弹窗 RefundNotice ⭐ 全新

**设计要点**：居中弹窗，带喜庆感。顶部🎉图标，主文案"恭喜，您的公排订单已退款！"，显示退款金额"¥3600已到账余额"，按钮"查看详情""我知道了"。

### C04 等级升级祝贺弹窗 LevelUpModal ⭐ 全新

**设计要点**：居中弹窗。顶部等级 Badge 图标，"恭喜升级为【云店】！"，展示新等级对应的奖励权益摘要。按钮"查看权益""好的"。

---

## 4. 设计师交付物清单

### 4.1 全新设计页面（7页，需完整设计稿）

| 编号 | 页面 | 优先级 |
|---|---|---|
| P12 | 公排状态页 | P0 |
| P14 | 公排规则说明 | P1 |
| P15 | 我的资产总览 | P0 |
| P18 | 积分明细 | P0 |
| P19 | 我的推荐（团队） | P0 |
| P23 | 新用户引导（4页） | P1 |
| C03/C04 | 退款通知+升级祝贺弹窗 | P0 |

### 4.2 改造设计页面（8页，基于截图标注改动区域）

| 编号 | 页面 | 改动要点 |
|---|---|---|
| P01 | 首页 | 金刚区图标、公排角标 |
| P04 | 个人中心 | 等级Badge、资产4列展示 |
| P05 | 商品列表 | 公排商品角标 |
| P06 | 商品详情-报单 | 公排信息卡、单按钮购买栏 |
| P08 | 确认订单 | 公排提示条 |
| P09 | 支付方式 | 5种支付方式弹窗 |
| P11 | 订单详情 | 公排进度条 |
| P16 | 提现页 | 手续费计算行 |

### 4.3 直接复用页面（12页，无需设计稿）

P02 分类、P03 购物车、P07 普通商品详情、P10 订单列表、P13 公排历史、P17 余额明细、P20 推荐收益、P21 推广海报、P22 登录、P24 地址、P25 客服、P26 设置、P27 活动

### 4.4 通用组件清单

| 组件 | 说明 | 使用页面 |
|---|---|---|
| 会员等级 Badge | 5种等级的彩色标签 | P04/P11/P19 |
| 公排商品角标 | "公排商品"小标签 | P01/P05/P06 |
| 公排进度条 | 显示 x/N 进度 | P06/P11/P12 |
| 积分释放进度条 | 小型进度条 | P18 |
| 资产卡片 | 深色渐变背景 | P15 |
| 数据指标卡 | 3列数字展示 | P12/P19 |
| 提示条 | 黄色/橙色背景提示 | P06/P08 |

### 4.5 插画与素材需求

| 素材 | 说明 | 数量 |
|---|---|---|
| 品牌 Logo | 黄精粉商城标识 | 1套（含白底/透明底） |
| Banner 模板 | 轮播图素材 | 3张 |
| 引导页插画 | 新用户引导页配图 | 3张 |
| 公排流程图 | 进四退一的流程示意 | 1张 |
| 空状态插画 | 无数据时展示 | 2张（公排空/团队空） |
| 推广海报模板 | 分享到朋友圈的海报 | 2套 |
| TabBar 图标 | 选中+未选中 | 8个 |
| 金刚区图标 | 首页快捷入口 | 4个 |
| 菜单 icon | 个人中心功能列表 | 3个 |

---

## 5. 开发对接说明

### 5.1 CRMEB Pro 现有页面路径参考

设计师和开发者可以参考以下现有页面路径，理解页面结构：

```
本地代码路径：/Users/a123/huangjingfen/pro_v3.5.1/

移动端前端代码：
  uni-app/pages/index/index.vue          → 首页
  uni-app/pages/goods_cate/goods_cate.vue → 分类页
  uni-app/pages/order_addcart/order_addcart.vue → 购物车
  uni-app/pages/user/index.vue            → 个人中心
  uni-app/pages/goods_details/index.vue   → 商品详情
  uni-app/pages/goods_list/index.vue      → 商品列表
  uni-app/pages/goods/order_confirm/index.vue → 确认订单
  uni-app/pages/goods/order_list/index.vue → 订单列表
  uni-app/pages/goods/order_details/index.vue → 订单详情
  uni-app/pages/users/user_cash/index.vue → 提现
  uni-app/pages/users/user_bill/index.vue → 账单明细
  uni-app/pages/users/user_address/index.vue → 地址管理
  uni-app/pages/users/user_address_list/index.vue → 地址列表
  uni-app/pages/users/user_set/index.vue  → 账号设置
  uni-app/pages/users/wechat_login/index.vue → 微信登录

全局样式文件：
  uni-app/uni.scss                        → 全局 SCSS 变量
  uni-app/static/                         → 静态资源（图片/图标）

组件目录：
  uni-app/components/                     → 公共组件
```

### 5.2 设计→开发交接流程

1. 设计师在 Figma 中完成设计后，标注每个页面对应的 CRMEB 源码路径
2. 对于直接复用的页面：无需标注，开发者直接使用现有代码
3. 对于改造页面：在 Figma 中用红色标注框标出"新增区域"和"修改区域"，注释具体改动内容
4. 对于全新页面：输出完整设计稿 + 切图 + 标注（使用 Figma 的 Dev Mode）
5. 所有自定义组件导出 Design Tokens（颜色/字号/间距），确保开发一致性