# 智服中台产品线稿

本目录用于确认购物商城 H5、商家后台和平台后台的需求、权限与页面交互。商家后台按当前员工的角色与授权展示管理功能，客服接待和主管审批属于商家后台内的业务模块。使用正常购物应用及中台系统的信息结构和布局，保持灰度低保真表现。

打开 [index.html](index.html) 即可使用。所有脚本和样式均保存在当前目录，无外部资源依赖。也可以在项目根目录运行：

```powershell
.venv/Scripts/python.exe -m http.server 18761 --bind 127.0.0.1 --directory docs/design/wireframes
```

浏览器访问 `http://127.0.0.1:18761`。该服务只提供线稿目录。

## 使用方法

后台登录、权限与会话行为的后续开发依据见 [实现依据](implementation-baseline.md)。

三个端的会话、通知及管理列表展示遵循 [会话与列表展示规范](conversation-list-presentation.md)。

消费者 H02 登录页面的信息、输入和反馈遵循 [H5 登录页展示规范](h5-login-presentation.md)。

- 顶部提供购物商城、商家后台、平台后台三个入口。
- 商城使用底部导航及页面内入口；后台使用系统侧栏、顶部账户区、面包屑与内容页签。
- 点击顶部“评审工具”展开页面目录、异常情景及重置按钮。在商家后台可以演示管理员、客服、主管三种员工角色，业务状态保持不变。正式产品根据登录员工的授权显示菜单和操作。
- 页面下方说明当前操作规则。需要再次确认的操作使用确认窗口。
- 刷新页面清空演示状态；页面地址保留当前位置。也可以点击“重置全部演示”。
- 消费者及两个后台的登录页只用于演示，填写任意非空内容即可，请勿输入真实密码。商家、平台登录状态独立，刷新后清空。

所有操作只修改当前浏览器内存。这里展示包括尚未开发能力在内的目标产品行为，不代表业务服务已经实现，也不代表接口、权限或模型已经验收。线稿不请求后端，不发送消息，不读取业务数据库。

## 建议检查的流程

### 客户申请、主管审批、客户查看结果

1. 从商城首页、商品页或个人中心进入 AI 客服；查询本人业务时登录。
2. 打开订单，查看申请条件和规则引用。
3. 填写换货数量与故障描述，检查方案版本，再由客户确认。
4. 进入商家后台，通过评审工具切换主管角色，打开待审批资料，检查客户确认记录并批准或拒绝。
5. 切回消费者查看当前工单。通过主管情景选择“审批通过后的进度”或“履约已完成”，检查两种结果的区别。

### 人工协助

1. 消费者申请人工协助。
2. 商家后台切换客服角色，从会话队列进入会话并接管。
3. 客服回复、整理或修订方案；消费者查看相同消息和方案。
4. 消费者本人确认，主管审批。
5. 客服结束接管，下一条消息恢复助手服务。

### 内容与费用管理

1. 商家保存规则草稿，检查影响范围并发布；已经确认的方案保留原规则版本。
2. 保存知识草稿，预览内容后发布，检查撤回操作。
3. 检查 Agent 发布清单，确认规则与知识有效后演示发布。
4. 申请调整每日预算。左侧切换另一位费用员工，批准或拒绝，检查预算生效时刻。
5. 平台查看失败投递并重试，确认状态为等待投递；只有接收端确认情景才显示完成。

## 页面目录

| 入口 | 页面 | 需要确认的内容 |
| --- | --- | --- |
| 商家后台 | M00 员工登录 | 商家标识、员工账户、密码、权限加载与返回原页 |
| 平台后台 | P00 员工登录 | 平台身份、密码、独立登录状态 |
| 购物商城 H5 | H11 首页、H12 分类、H13 商品详情、H14 购物车、H15 个人中心 | 搜索、分类、商品与购买区域、底部导航及 AI 入口 |
| 购物商城 H5 | H16 消息、H17 地址、H18 收藏、H19 设置 | 正常商城栏目结构，地址等页面只说明功能范围 |
| 消费者 H5 | H01 咨询、H02 登录、H03 订单列表、H04 订单详情、H05 规则依据 | 身份、订单选择、依据及人工协助 |
| 消费者 H5 | H06 申请编辑、H07 方案确认、H08 售后进度 | 版本、本人确认、取消、结果未知与修订 |
| 消费者 H5 | H09 沟通习惯、H10 身份关联 | 授权、更正、清空、撤销与双身份验证 |
| 商家后台 · 客服权限 | S01 客服接待、S02 会话处理、S03 方案编辑、S04 工单详情 | 接管、回复、业务上下文、客户确认和控制权释放 |
| 商家后台 · 主管权限 | S05 待审批、S06 审批资料、S07 审批后进度 | 证据完整、自己审批限制、版本检查及决定结果 |
| 商家后台 | M01 待办、M02 店铺员工、M03 渠道配置 | 本商家范围、授权、停用与渠道接入检查 |
| 商家后台 | M04 规则、M05 知识、M06 发布清单、M07 费用 | 草稿与发布、撤回影响、版本和双人审批 |
| 平台后台 | P01 商家、P02 额度、P03 投递、P04 监控、P05 审计 | 接入、资源分配、通知重试、运行元数据和操作记录 |
| 平台后台 | P06 平台概览 | 商家接入、任务、告警、运行趋势和待办 |
| 各管理系统 | 商品、交易订单、客户、营销、团队、统计、应用及系统设置等栏目 | 完整系统导航；学习范围之外只提供栏目结构说明 |

共 63 个可访问页面，包含登录页、通知列表与详情、学习业务交互页和系统结构说明页。客服接待采用左侧会话列表、中间聊天处理、右侧客户订单与工单信息的三栏工作区；商家首页提供经营指标、趋势、待办和常用管理；平台首页提供接入与运行管理。

商家管理员、客服和主管可从顶部消息入口或侧栏通知中心查看各自通知，筛选未读、查看详情并进入授权业务页面。评审工具切换员工后可以检查通知内容及未读状态的独立性。

## 交互规则

- 客服整理方案后交客户检查，客户确认后生成审批任务。
- 方案业务字段变更产生新版本，原确认和审批失效。
- 主管只处理客户已确认的当前版本，申请人不能审批自己提交的申请。
- 外部受理与最终履约完成使用不同状态。受理结果未知时继续核实原申请。
- 取消仅在草稿、等待审批、批准但尚未登记外部操作时开放。
- 接管改变会话控制权；已提交业务持续跟踪，助手后续输出受限制。
- 新规则服务新申请，已经确认的有效方案使用原规则。撤销使相关方案需要修订。
- 金额预算、价格和费用核对需要另一位具有费用权限的员工审批。
- 平台管理展示运行信息，客户正文和业务资料需要独立授权。

## 评审边界

本轮关注页面结构、关键操作和业务反馈。列表使用代表记录，未展开批量操作、复杂筛选及所有字段。文件导入、价格申请和账单核对展示流程与字段说明；真实解析、身份验证、网络异常恢复和支付供应商调用均不在本线稿执行。

需要产品确认的设计选择：

1. 消费者使用“首页 / 分类 / 购物车 / 我的”四个底部入口。AI 在首页、悬浮入口、商品详情、订单和个人中心可进入。
2. 客服采用会话队列、消息区、订单及工单上下文的工作区。
3. 商家后台统一承载经营、客服和审批；当前员工授权决定可见菜单及可执行操作。平台后台围绕商家、应用、资源与系统管理。
4. 客户确认后自动创建审批任务；客服不再重复提交相同审批。
5. 跨渠道关联明确展示两个已验证身份，具体渠道认证页面由正式接入能力确定。

## 浏览器检查

验证脚本为 [check_wireframes.cjs](../../../scripts/check_wireframes.cjs)。执行时需要 Node.js、Playwright 及 Chromium，依赖安装在已忽略的 `.work` 目录：

```powershell
npm install --prefix .work/wireframe-tools --no-audit --no-fund playwright
node scripts/check_wireframes.cjs
```

默认访问 `http://127.0.0.1:18761`，可通过 `WIREFRAME_URL` 指定其他地址。已有 Chromium 可以通过 `PLAYWRIGHT_CHROMIUM_EXECUTABLE` 指定完整路径；未提供时使用 Playwright 管理的浏览器。

检查使用实际浏览器 DOM 与点击、填写、确认操作，不使用截图或图像定位。结果见 [线稿验证记录](../wireframes-verification.md)。