scottpan/huangjingfen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
752ea4c54bab8442be601def86052dc3c22eb647
huangjingfen/docs/黄精粉小程序_Figma_UI设计说明文档.md

648 lines
24 KiB
Markdown
Raw Normal View History

Initial commit: queue workspace Made-with: Cursor
2026-03-21 02:55:24 +08:00
# 黄精粉健康商城小程序 · 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（颜色/字号/间距），确保开发一致性
Reference in New Issue Copy Permalink