Enagic 本希甄选 - UI/UX 页面详细设计

本文档详细说明小程序端和管理后台的页面设计，包括布局结构、关键组件、交互流程和数据来源。

一、小程序端页面设计

1.1 AI 数字人对话页面

页面：ai-chat/index.vue

入口： 个人中心 → AI 健康顾问

页面结构：

┌─────────────────────────────────┐
│  导航栏：AI 健康顾问       [?]  │
├─────────────────────────────────┤
│  ┌─────────────────────────┐   │
│  │     AI 头像 + 名称      │   │
│  └─────────────────────────┘   │
│  ┌─────────────────────────┐   │
│  │    对话消息列表区域     │   │
│  │  [用户消息右对齐]       │   │
│  │  [AI消息左对齐]         │   │
│  └─────────────────────────┘   │
│  ┌─────────────────────────┐   │
│  │  热门问题快捷入口       │   │
│  └─────────────────────────┘   │
├─────────────────────────────────┤
│  ┌─────────────────────────┐   │
│  │  输入框 + 发送按钮       │   │
│  └─────────────────────────┘   │
└─────────────────────────────────┘

关键组件：

组件	说明
NavBar	导航栏，显示标题，右侧问号按钮
ScrollView	对话列表区域，滚动查看历史
MessageBubble	消息气泡，左侧 AI（灰色），右侧用户（主题色）
QuickQuestions	热门问题标签，可点击直接发送
InputBar	输入框 + 发送按钮，底部固定
Loading	等待 AI 回复时的加载动画

数据来源：

数据	API
对话历史	GET /enagic/buyer/ai/history
热门问题	GET /enagic/buyer/ai/hot-questions
发送消息	POST /enagic/buyer/ai/chat

1.2 健康布施者中心页面

页面：health-advisor/home.vue

入口： 个人中心 → 健康布施者中心

页面结构：

┌─────────────────────────────────┐
│  背景图 + 头像 + 昵称            │
│  健康布施者 ⭐⭐⭐ 三星布施者     │
├─────────────────────────────────┤
│  数据概览                        │
│  ┌────────┬────────┬────────┐    │
│  │邀请人数│ 顾问积分│ 可用佣金│    │
│  │   25   │  250   │ ¥500   │    │
│  └────────┴────────┴────────┘    │
├─────────────────────────────────┤
│  功能菜单                        │
│  ┌────────┐  ┌────────┐         │
│  │我的客户│  │邀请二维码│        │
│  └────────┘  └────────┘         │
│  ┌────────┐  ┌────────┐         │
│  │我的勋章│  │   业绩  │         │
│  └────────┘  └────────┘         │
├─────────────────────────────────┤
│  最近客户动态                    │
│  张三  刚刚注册                   │
│  李四  购买商品                   │
└─────────────────────────────────┘

关键组件：

组件	说明
UserInfoSection	背景图 + 头像 + 昵称区域
MedalBadge	勋章徽章，显示当前等级
StatsCard	统计数据卡片
MenuGrid	功能菜单宫格，2x2 布局
RecentActivity	最近客户动态列表

数据来源：

数据	API
布施者信息	GET /enagic/buyer/advisor/info
客户列表	GET /enagic/buyer/advisor/my-customers
邀请二维码	GET /enagic/buyer/advisor/invite-qr
勋章信息	GET /enagic/buyer/advisor/medals

页面：health-advisor/customers.vue

页面结构：

┌─────────────────────────────────┐
│  ← 返回    我的客户      筛选 ▼ │
├─────────────────────────────────┤
│  搜索框：输入客户名称搜索        │
├─────────────────────────────────┤
│  客户列表                        │
│  ┌─────────────────────────┐   │
│  │头像│ 客户名  注册时间    │   │
│  │    │ 累计消费 ¥1000      │   │
│  └─────────────────────────┘   │
│  [加载更多]                      │
└─────────────────────────────────┘

页面：health-advisor/medals.vue

页面结构：

┌─────────────────────────────────┐
│  ← 返回    我的勋章              │
├─────────────────────────────────┤
│  当前等级：⭐⭐⭐ 三星布施者     │
│  进度：25/50 人                 │
├─────────────────────────────────┤
│  勋章记录                        │
│  👑 获得宗师勋章 2025-01-15      │
│  ⭐⭐ 获得三星勋章 2024-12-01    │
└─────────────────────────────────┘

1.3 VIP 页面

页面：vip/index.vue

页面结构：

┌─────────────────────────────────┐
│  VIP 会员专区                   │
│  您还未开通 VIP                  │
├─────────────────────────────────┤
│  VIP 权益说明                    │
│  ✓ 商品享 9 折                  │
│  ✓ 消费双倍积分                  │
│  ✓ 专属客服                      │
├─────────────────────────────────┤
│  VIP 套餐选择                    │
│  银卡 VIP   ¥99  /年            │
│  金卡 VIP   ¥299 / 永久 [推荐]   │
│  钻石 VIP   ¥699 / 永久         │
├─────────────────────────────────┤
│  [立即开通]                      │
└─────────────────────────────────┘

数据来源：

数据	API
VIP 配置列表	GET /enagic/buyer/vip/config-list
开通 VIP	POST /enagic/buyer/vip/open

页面：vip/my-vip.vue

页面结构：

┌─────────────────────────────────┐
│  我的 VIP                        │
│  金卡 VIP (永久)                 │
│  开通时间：2025-01-01            │
├─────────────────────────────────┤
│  权益使用情况                    │
│  已享折扣：省 ¥500              │
│  已得积分：2000 分               │
├─────────────────────────────────┤
│  [立即分享]                      │
└─────────────────────────────────┘

1.4 抵扣金页面

页面：deduction/index.vue

页面结构：

┌─────────────────────────────────┐
│  抵扣金账户                     │
│       ¥1,000.00                 │
│       可用余额                   │
│       ¥200.00 冻结               │
├─────────────────────────────────┤
│  功能按钮                        │
│  [充值]      [明细]            │
├─────────────────────────────────┤
│  使用说明                        │
│  • 订单支付时可使用抵扣金       │
│  • 最低抵扣 1 元                │
└─────────────────────────────────┘

数据来源：

数据	API
账户信息	GET /enagic/buyer/deduction/info
流水明细	GET /enagic/buyer/deduction/log

1.5 运维计划页面

页面：operation/my-plans.vue

页面结构：

┌─────────────────────────────────┐
│  我的运维计划                    │
│  全部(5)  进行中(2)              │
├─────────────────────────────────┤
│  计划列表                        │
│  流程：标准30天运维              │
│  当前：第 3 天 - 使用指导         │
│  状态：进行中                    │
│  下次提醒：3 天后               │
└─────────────────────────────────┘

数据来源：

数据	API
我的计划	GET /enagic/buyer/operation/my-plans
运维记录	GET /enagic/buyer/operation/records/{planId}

二、PC 管理后台页面设计

2.1 健康布施者管理

页面：health-advisor/list.vue

功能： 查看健康布施者列表、发放勋章

关键组件：

组件	说明
SearchBar	搜索栏：关键字、状态筛选
DataTable	数据表格：列定义、分页
MedalModal	发放勋章弹窗

数据来源：

数据	API
布施者列表	GET /enagic/manager/advisor/page
发放勋章	POST /enagic/manager/advisor/medal/grant

页面：health-advisor/medal.vue

功能： 查看勋章发放记录

数据来源：

数据	API
勋章记录	GET /enagic/manager/advisor/medal/page

2.2 VIP 配置管理

页面：vip/config-list.vue

功能： 管理 VIP 配置（增删改查）

关键组件：

组件	说明
ConfigForm	配置表单弹窗

数据来源：

数据	API
配置列表	GET /enagic/manager/vip/config/page
保存配置	POST /enagic/manager/vip/config/save
删除配置	DELETE /enagic/manager/vip/config/{id}

2.3 抵扣金管理

页面：deduction/account-list.vue

功能： 查看抵扣金账户、流水

关键组件：

组件	说明
AccountTable	账户列表表格
LogDrawer	流水查看抽屉

数据来源：

数据	API
账户列表	GET /enagic/manager/deduction/page
流水记录	GET /enagic/manager/deduction/log

2.4 运维流程管理

页面：operation/flow-list.vue

功能： 管理运维流程模板

数据来源：

数据	API
流程列表	GET /enagic/manager/operation/flow/page
保存流程	POST /enagic/manager/operation/flow/save
删除流程	DELETE /enagic/manager/operation/flow/{id}

页面：operation/plan-list.vue

功能： 查看运维计划、手动提醒、完成

数据来源：

数据	API
计划列表	GET /enagic/manager/operation/plan/page
手动提醒	POST /enagic/manager/operation/plan/remind
完成计划	POST /enagic/manager/operation/plan/complete
计划记录	GET /enagic/manager/operation/record/page

2.5 AI 知识库管理

页面：ai/knowledge-list.vue

功能： 管理 AI 知识库

数据来源：

数据	API
知识库列表	GET /enagic/manager/ai/knowledge/page
保存知识	POST /enagic/manager/ai/knowledge/save
删除知识	DELETE /enagic/manager/ai/knowledge/{id}

页面：ai/conversation-log.vue

功能： 查看对话记录

数据来源：

数据	API
对话记录	GET /enagic/manager/ai/conversation-log

2.6 客户移交管理

页面：transfer/list.vue

功能： 查看移交记录、手动移交

数据来源：

数据	API
移交列表	GET /enagic/manager/transfer/page
处理移交	POST /enagic/manager/transfer/process
布施者列表	GET /enagic/manager/transfer/advisor/list

三、页面通用规范

3.1 列表页面规范

规范项	说明
分页	默认 10 条/页，支持 10/20/50/100
搜索	条件搜索 + 重置按钮
排序	默认按创建时间倒序
空状态	显示暂无数据占位图

3.2 表单页面规范

规范项	说明
必填标识	必填字段标题后加 *
校验	提交前进行表单校验
反馈	成功/失败显示提示消息

文档版本：V1.0 创建日期：2026-05-08

SPEC_UIUX.md 14 KB Verlauf Originalformat

Enagic 本希甄选 - UI/UX 页面详细设计

一、小程序端页面设计

1.1 AI 数字人对话页面

页面：ai-chat/index.vue

1.2 健康布施者中心页面

页面：health-advisor/home.vue

页面：health-advisor/customers.vue

页面：health-advisor/medals.vue

1.3 VIP 页面

页面：vip/index.vue

页面：vip/my-vip.vue

1.4 抵扣金页面

页面：deduction/index.vue

1.5 运维计划页面

页面：operation/my-plans.vue

二、PC 管理后台页面设计

2.1 健康布施者管理

页面：health-advisor/list.vue

页面：health-advisor/medal.vue

2.2 VIP 配置管理

页面：vip/config-list.vue

2.3 抵扣金管理

页面：deduction/account-list.vue

2.4 运维流程管理

页面：operation/flow-list.vue

页面：operation/plan-list.vue

2.5 AI 知识库管理

页面：ai/knowledge-list.vue

页面：ai/conversation-log.vue

2.6 客户移交管理

页面：transfer/list.vue

三、页面通用规范

3.1 列表页面规范

3.2 表单页面规范

SPEC_UIUX.md 14 KB

Verlauf Originalformat