zhifu-platform/docs/design/wireframes

智服中台产品线稿

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

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

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

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

使用方法

后台登录、权限与会话行为的后续开发依据见 实现依据。

三个端的会话、通知及管理列表展示遵循 会话与列表展示规范。

消费者 H02 登录页面的信息、输入和反馈遵循 H5 登录页展示规范。

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

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

建议检查的流程

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

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。执行时需要 Node.js、Playwright 及 Chromium，依赖安装在已忽略的 .work 目录：

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 与点击、填写、确认操作，不使用截图或图像定位。结果见 线稿验证记录。