# 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*