B端后台管理系统可视化设计规范

基于 Ant Design 设计价值观，生成企业级 B 端后台管理系统的高保真可交互原型 HTML。

执行流程

每次生成原型前，按以下顺序完成确认：

1. 解析需求：提取页面类型（列表/表单/详情/仪表盘/组合）、核心功能模块、数据实体。
2. 确认主题预设：如果用户提供了参考图且可识别品牌色，直接使用；否则用 AskUserQuestion 让用户选择：科技蓝 #185FA5（默认，中性通用）、youjun绿 #2A8371（品牌绿贯穿全站）、guoyi粉 #EA4070（品牌粉贯穿全站，危险色随主题改为橙色 #D46B08）、或自定义。自定义时只需提供品牌色十六进制值：低饱和冷色（绿/青/蓝）可兼任交互色走单色体系；高饱和暖色（粉/红/橙/黄）须另行指定交互色走双轨制，并检查它与危险色 / 警告色的色相距离。默认值科技蓝——用户未明确选择且不便询问时按默认生成。
3. 确认密度档：用 AskUserQuestion 让用户选择——紧凑档 .density-compact（列表页/数据报表/运营后台）、舒适档（不加 class，表单页/详情页/仪表盘）。默认紧凑：用户未明确选择时按紧凑档生成。判断依据见 design-system.md 的"两档密度"。密度、主题、货币单位一律在生成前确认，原型内不得内置任何切换控件。
4. 确认布局与页面标识载体：如果是新界面，给出专业建议后用 AskUserQuestion 让用户确认布局模式：左右布局（侧边导航）或上下布局（顶部导航）。建议依据见"布局选型建议"。页面标识载体默认顶栏面包屑；满足以下任一条件时改用页面多页签栏（tags-view），与面包屑互斥：用户参考图带多页签栏、单个原型文件合并两个及以上视图、用户明确要求多页签导航。多页签栏规则见 component-patterns.md 的"页面多页签栏"。
5. 套用列表页压缩布局：页面类型为列表页时，一律采用压缩布局，不需询问用户——不设独立页面标题区（页面标识并入顶栏面包屑，启用页面多页签栏时由其替代）、查询区默认行内式（标签在左、按钮固定行尾）；查询条件 ≥ 6 个或含日期范围且行内式在 1920px 下单行放不下时改用堆叠变体（标签在输入框上方、紧凑档面板 72px、该场景固定开销控制在 264px 以内）、工具栏 40px（左侧按操作顺序排业务按钮、右侧仅刷新）、表格行高固定 36px、分页 40px，固定开销控制在 236px 以内，纵向空间全部让给数据行；列顺序按「勾选框 → 序号 → 业务列 → 状态列 → 操作人/时间 → 操作列」编排，勾选框列默认折叠；数值列仅数据右对齐，表头保持左对齐，数据右侧留内边距以避免与下一列视觉粘连。完整规范见 design-system.md 的"列表页布局"。
6. 生成原型：输出单文件 HTML，包含全部 CSS 和内联交互逻辑。设计体系见 design-system.md，组件模式见 component-patterns.md，页面模板见 templates/ 目录。主题与密度一律通过根元素 class 挂载，例如 <body class="theme-guoyi density-compact">，不得逐处硬编码色值或尺寸；但不得为了实现"挂载"而产出页面内的切换器。
7. 展示交付：将 HTML 文件放到 outputs 目录，使用 present_files 工具呈现给用户。

布局选型建议

侧边栏主题：默认白色侧边栏（清爽、通用），适用于绝大多数场景。templates/base.css 未内置深色侧边栏预设；确需深色侧边栏（数据密集型/科技感场景）时，在页面内覆盖 .sidebar 的背景与文字色即可。

设计价值观

清晰：减少不确定因素，减少用户判断次数，明确信息层级导向。操作直观，流程一步到位；信息传达明确，用户能在极短时间内快速理解并作出判断。

控制：用户始终知道自己在哪、能做什么、如何回退。状态可见、操作可逆、权限明确，让用户掌控系统而非被系统支配。

反馈：操作有即时视觉反馈——按钮 hover/active 态变化、表单 focus 高亮、数据加载提示、操作结果消息提示。

强调：重要信息突出呈现，次要信息适度弱化。通过色彩对比、字号差异、间距疏密建立视觉层级，引导用户注意力到关键数据和操作上。

品牌色与交互色衍生规则

本体系有两种着色模式，内置预设一律走单色体系（品牌色与交互主色同值，一种主色贯穿全站）；双轨制（品牌色拆出来只作点缀，面积 ≤ 3%）只在自定义品牌色且该色不适合作交互色时启用。完整约束见 design-system.md 的"两种着色模式"。

• 预设组合可直接使用 templates/base.css 中的 .theme-techblue（默认）/ .theme-youjun / .theme-guoyi，无需手工拼装色值。
• guoyi粉 主题把危险色改为橙色 #D46B08：主色 #EA4070（H 343°）与 Ant 默认危险色 #ff4d4f（H 359°）色相仅差 16°，不换色会让「删除」与「新增」看起来是同一类按钮。科技蓝（H 210°）与 youjun绿（H 168°）离危险色都在 150° 以上，沿用默认危险色。
• 当用户自定义品牌色时，按以下规则衍生色阶（以品牌色 #HHHHHH 为基准）。低饱和冷色（绿/青/蓝）可兼任交互色，走单色体系，--color-primary 系列取同一组值；高饱和暖色（粉/红/橙/黄）须另行指定中性冷色（推荐 #185FA5）作交互色，走双轨制，且必须同时检查该品牌色与危险色 / 警告色的色相距离，过近时另指定危险色。

衍生方法：将主色转 HSL，调整 Lightness：
- hover: L - 8
- active: L - 16
- bg: L + 38（不超过 96）
- border: L + 20

内容红线（严格遵守）

1. 全局禁用 Emoji：不出现任何表情符号、装饰表情、花式符号。文案仅使用标准文字与常规标点。
2. 全局禁用注释/备注：不生成设计备注、原型说明、标注类文案。只呈现用户真实可见的业务文字、控件、表格、按钮。
3. 非业务必需图标一律不展示：仅保留导航图标、操作图标（编辑/删除/搜索等）和状态图标。
4. 填充真实业务数据：表格至少 5 行模拟数据，表单使用合理的默认值或占位文本，不使用 Lorem ipsum。
5. 着色模式与品牌色位置：内置预设（科技蓝 / youjun绿 / guoyi粉）都是单色体系，--color-brand 与 --color-primary 同值，一种主色贯穿全站，不存在面积上限。只有走双轨制（自定义品牌色且该色不适合作交互色）时，--color-brand 才仅允许出现在 .brand-mark / .brand-text / .brand-chip / .brand-dot 四类工具类、侧边栏标识块（logo 与品牌名）、非列表页的页面标题装饰条、登录/启动页、空状态，且合计面积不得超过界面的 3%；此时按钮、选中态、表单 focus、表格行 hover、分页 active、Tab 下划线、开关、进度条、图表序列、标签底色一律使用独立的 --color-primary。无论哪种模式，危险色都必须与主色保持可辨识的色相距离（如 guoyi粉 下危险色改用橙色 #D46B08）。
6. 列表页布局不得回退：禁用独立页面标题区，页面标识统一以顶栏面包屑呈现（层级 ≤ 2 时）；启用页面多页签栏时由页签栏承载页面标识，不得同时渲染面包屑，标识只出现一次，内容区不另加标题；查询区默认行内式（标签与输入框同行），堆叠变体（标签在输入框上方）仅在查询条件 ≥ 6 个或含日期范围且行内式在 1920px 下单行放不下时启用，堆叠时紧凑档面板 72px、该场景列表页固定开销由 236px 放宽至 264px；两种形态下按钮均固定行尾，条件数量变化时不得跳动；查询区标签宽随内容自适应、左对齐、紧贴自己的输入框（间隔 --filter-item-gap 8px，字段组之间 --filter-col-gap 16px），首个标签文字左边缘与表格「序号」列单元格内容左边缘、表格工具栏首个按钮左边缘落在同一条起始竖线上（紧凑档 24px / 舒适档 32px），堆叠形态的起始竖线同样由面板左内边距钉住；工具栏左侧按操作顺序排列业务按钮、主操作排首位并使用 .btn-primary，右侧仅保留一个刷新按钮；侧边栏菜单图标恒定 --color-text-secondary，不随 hover / 选中态变色；表格行高一律 36px，不随密度档变化。
7. 列表列不得自行编排：列顺序固定为 勾选框 → 序号 → 业务列 → 状态列 → 操作人/操作时间 → 操作列，状态列不得夹在业务列中间；勾选框列默认整列折叠（<col> 与单元格必须同时隐藏），仅在批量操作模式下展开；数值列仅数据右对齐、表头保持左对齐，数据右侧留 --table-num-pad-r 内边距（舒适 32px / 紧凑 24px），避免数字贴列边、也不与下一列视觉粘连；货币单位符号默认不显示；进度条一律 --color-primary 单色，不得按完成度换色。
8. 原型不得内置切换控件：主题、密度档、货币单位一律在生成前向用户确认，不得在页面里产出主题切换器、密度切换器、"显示单位"之类的演示控件。演示态的切换仅用于规范验证样张，不属于交付原型。
9. 规范与模板双向一致：component-patterns.md 是 templates/base.css 的镜像说明。任何改动只要动了 base.css 的令牌、类名或组件样式，必须同轮次更新 component-patterns.md 对应章节，并在自检时确认两者无冲突；templates/ 下四个模板的品牌名、页面标识方案、菜单行为、折叠按钮实现必须保持一致。

医疗场景数据替换指南

通用版模板使用中性的"项目管理系统"业务数据。如需适配医疗场景（含医生站/护士站等临床工作站），按以下映射替换数据字段即可，密度档仍按第 3 步确认结果挂载（临床工作站建议用紧凑档）。

示例数据片段：
- 通用："张明" → 医疗："李建国 主任医师"
- 通用："市场部" → 医疗："心血管内科"
- 通用："进行中" → 医疗："就诊中"
- 通用："张伟 / 产品经理" → 医疗："王芳 / 主治医师"

页面模板使用

模板位于 templates/ 目录，生成原型时作为结构参考，替换业务数据即可：

上表为推荐值；实际密度以执行流程第 3 步的确认结果为准，默认紧凑档。

模板的 <body> 密度 class 现状：list.html 已预置 density-compact（其 236px 空间预算正是按紧凑档计算的，去掉后固定开销会涨到约 264px）；dashboard.html / card.html / form.html 不带密度 class，即舒适档。复制模板后按第 3 步的确认结果决定是否改写 <body> 的 class，不要只改 base.css。

交互组件清单

原型中必须实现的 12 项交互（组件 CSS 见 component-patterns.md）：

自检清单

生成 HTML 后，逐项核对：

1. :root 中 CSS 变量完整，--color-brand 与 --color-primary 两套令牌均已声明且取值正确
2. 根元素已按确认结果挂上主题 class 与密度 class
3. 着色模式正确：内置预设（科技蓝 / youjun绿 / guoyi粉）下品牌色与交互主色同值、主色贯穿全站；仅在双轨制下才要求品牌色只出现在品牌点缀位且面积不超过 3%。同时确认危险色与主色的色相距离可辨识——主色为粉 / 红系时必须另指定危险色（guoyi粉 用橙色 #D46B08），确保「删除」与「新增」同屏可区分
4. 无 Emoji、无设计备注、无解释性文字
5. 所有间距为 8 的倍数
6. 字号使用在 3-5 种范围内，且与所选密度档一致
7. 表格有至少 5 行真实业务模拟数据
8. 布局模式、密度档与用户确认一致
9. 页面宽度 1920px 下正常展示
10. 所有按钮、输入框有 hover/focus 态
11. 弹窗/Tab/抽屉/下拉等交互可正常切换
12. 图标使用 Iconify CDN 引用，图标语义与操作一致，尺寸随密度档缩放
13. 图表使用 ECharts，配色从 CSS 变量动态读取，未硬编码色值
14. 组件层无硬编码的控件高、行内距、字号，全部走密度令牌
15. 列表页：查询区默认行内式；若用堆叠变体，触发条件成立（条件 ≥ 6 个或含日期范围且行内式在 1920px 下单行放不下）、紧凑档面板 72px 且开销按 264px 计；标签宽度随内容自适应、左对齐、紧贴自己的输入框（--filter-item-gap 8px），字段组之间 --filter-col-gap 16px，全行不出现异常空隙；首个标签文字左边缘与表格「序号」列单元格内容左边缘、工具栏首个按钮左边缘重合（紧凑 24px / 舒适 32px）；查询/重置按钮固定行尾不跳动
16. 列表页：表格行高统一 36px，表头已用 <colgroup> 显式指定列宽，长文本单元格已单行截断
17. 列表页：无独立页面标题区，页面标识以顶栏面包屑或页面多页签栏呈现（二者互斥、不同时出现）；无副标题、无页面描述文字、无表格上方说明文字
18. 列表页：工具栏左侧业务按钮按操作顺序排列（主操作在首位，使用 .btn-primary），右侧仅一个刷新按钮，高度 40px
19. 侧边栏菜单图标恒定中性色，不随 hover / 选中态变色；二级菜单折叠标识统一使用 ant-design:down-outlined（14px，收起朝右、展开朝下）
20. 列表页：首列为序号列（.col-index，居中、中性色）；状态列位于业务列之后、时间与操作列之前
21. 列表页：勾选框列默认不占宽度（<col> 与单元格同时 display: none），批量操作模式下才展开
22. 数值列（.col-number）仅数据右对齐、表头保持左对齐，数据右侧留内边距（舒适 32px / 紧凑 24px），数字不贴列边也不与下一列粘连；货币单位默认不显示（需展示时整表加 .show-unit）
23. 进度条全部使用 --color-primary，无按完成度换色的行
24. 主题与密度与执行流程第 2、3 步的确认结果一致，页面内无任何主题切换器、密度切换器、"显示单位"等演示控件
25. 侧边栏品牌名在 208px 侧栏宽度下不截断（可用宽 137px），超长时以省略号收尾而非换行
26. 与 templates/ 下的四个模板保持一致：品牌名文案、页面标识方案（顶栏面包屑）、折叠按钮实现（Iconify）、二级菜单手风琴行为
27. 本次改动若涉及 templates/base.css 的令牌、类名或组件样式，component-patterns.md 已同轮次同步且两者无冲突
28. 启用页面多页签栏时：页签芯片嵌在顶栏内、单行溢出横向滚动、禁换行以免撑高顶栏；选中态走 --color-primary、无硬编码独立色；首个页签锁定不可关闭、关闭当前页签回落到锁定页签；页签切换与侧边菜单选中态同步；未与面包屑同时渲染

版本记录