# 已确认视觉风格规范

状态：用户已于 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 登录页展示规范](../h5-login-presentation.md)。

## 交互状态

会话与列表的正文预览、详情及高度限制见 [会话与列表展示规范](../conversation-list-presentation.md)，继续使用本规范的配色、字体和组件状态。

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

## 验证范围

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