zhifu-platform/docs/design/wireframes/style-preview

已确认视觉风格规范

状态：用户已于 2026-09-20 确认后台与消费者 H5 两套视觉风格。后续前端开发必须严格遵循本规范、对应样式及已确认交互线稿，项目根目录 AGENTS.md 中的前端设计与实现规则具有强制性。

预览入口：style-preview/index.html。通过顶部切换消费者 H5、商家后台和平台后台；评审工具提供员工角色与页面目录。全部页面复用已确认线稿的交互逻辑，示例数据与登录仅用于原型演示。

后台

参考 https://shuhe-ai.com 首页的页面内容与 computed styles，采用海军蓝导航、蓝色主操作、白色内容和浅灰蓝工作区域。商家和平台使用同一套组件；管理员、客服和主管根据已有权限显示功能。

项目	规范
导航	#071126，文字 #D8E1FF
主操作	#2F6BFF，白色文字；悬停 #2057DF
工作区域 / 卡片	#F8FAFC / #FFFFFF
文字 / 辅助文字	#111827 / #667085
边框	#E6EBF3
字体	Inter、Noto Sans SC、Microsoft YaHei、Arial、sans-serif
字号	正文 14px，表格 13px，页面标题 22px
圆角	控件 8px，卡片 12px

登录页使用参考网站的海军蓝渐变背景与白色表单。系统侧栏保留分组导航，当前栏目使用蓝色。表格采用浅色表头与行分隔线，表单、对话框、通知和客服会话共用基础样式。

消费者 H5

采用白色卡片、浅蓝活动区域、浅灰蓝页面背景。主操作为 #245FE5；AI 入口使用浅蓝卡片与蓝色文字，悬浮入口采用蓝色。保留首页、分类、购物车、我的，以及商品和订单中的 AI 咨询入口。

正文 14px，页面标题 18px，卡片圆角 16px；按钮触控区域至少 44px。电脑端以最大宽度 414px 的手机容器展示，手机端使用整页宽度。商品图片保留位置标识，数据不替换为未经验证的经营指标。

H02 的登录卡片、输入框、密码显隐、错误提示和短屏滚动遵循 H5 登录页展示规范。

交互状态

会话与列表的正文预览、详情及高度限制见 会话与列表展示规范，继续使用本规范的配色、字体和组件状态。

按钮、输入框提供 hover、focus-visible、disabled 样式。状态继续显示文字标签，通知继续显示已读与未读文字。两套风格的页面与权限流程由已有原型脚本统一控制。

验证范围

使用 WIREFRAME_URL=http://127.0.0.1:18761/style-preview/ 运行 scripts/check_wireframes.cjs，检查登录、角色、通知和售后交互，以及 1440px 与 390px 下的全部页面宽度。此项验证仅覆盖浏览器原型，不代表业务接口验收。