01 / Colors
色彩体系 Tokens 规格
本色彩系统包含主色系与中性蓝灰系，采用基于 HSL 微调的科学配比。主色完全沿用系统原生的 #41b584 翡翠绿，严禁私自引入新色系。
| CSS 变量名 | 值 | 语义与用途 | 允许使用场景 | 禁止使用场景 |
|---|---|---|---|---|
--acme-color-primary |
#41b584 | 品牌主色 (翡翠绿) | 激活状态 Tab 底部横线、Loading 旋转圈、重要点击链接、关键图标高亮。 | 严禁将此主色当做大色块背景铺满页面（如表格头部、背景大面积填充）。 |
--acme-color-primary-hover |
#369d70 | 主色悬浮色 | 用于按钮 Hover、选中状态的交互反馈边界。 | 不能作为静态元素展示的默认底色。 |
--acme-color-primary-light |
#ecf8f3 | 浅绿背景色 | 轻选中项底色、列表 Hover 底色、信息高亮 Badge 浅背景。 | 严禁作为长表单或模态框的正文背景色。 |
--acme-color-primary-dark |
#208f67 | 品牌深绿色 | 高对比文字、激活边框、极弱选中横幅文字。 | 普通表格列标题等常规非重点文字。 |
--acme-color-text-main |
#1e293b | 一级文本 (深灰) | 主标题、正文、数字指标强文本、输入框输入值。 | 不能作为占位符 (placeholder) 文本或超轻 Meta。 |
--acme-color-text-sub |
#475569 | 二级文本 | 表单 Label 文字、卡片副标题、描述性长正文。 | 主要业务关键数值或主标题。 |
--acme-color-text-muted |
#94a3b8 | 禁用/弱辅助文本 | 输入占位符 (placeholder)、禁用状态文字、小 Meta 附加信息。 | 正文主体内容，否则会导致对比度过低不符无障碍标准。 |
--acme-color-border |
#e2e8f0 | 默认分割线/边框 | 表格行分割线、输入框默认描边、模态框底部固定线。 | 用于高亮强调的交互态外边框。 |
--acme-color-bg-base |
#f8fafc | 全局底色 (莫兰迪) | 整个页面视图的 Body 底色、浮层底部遮罩。 | 禁止作为卡片或表单输入框的默认白底。 |
02 / Geometry
圆角圆率与阴影 Elevation
Acme Harmony UI 摒弃了多余的重色描边与大块阴影，通过细腻的微投影和三档几何圆率，塑造出简洁的层次感。
| CSS 变量名 / 级别 | 值 | 语义与用途 | 允许使用场景 | 禁止使用场景 |
|---|---|---|---|---|
--acme-radius-sm |
4px | 表单与控件圆角 | 所有 .form-control 输入框、下拉绑定 select、常规按钮。 |
大卡片外层边框、弹窗/抽屉主容器。 |
--acme-radius-md |
6px | 普通内容容器圆角 | 摘要 KPI 状态卡片、ECharts 外部白卡片、局部面板包裹。 | 表单控件，防止控件过渡圆滑显幼稚。 |
--acme-radius-lg |
8px | 顶级浮层圆角 | 模态弹窗 (Modal) 容器、右侧抽屉 (Drawer) 头部圆角。 | 一般内层小组件。 |
--acme-shadow-sm |
0 1px 2px 0... | 微小层级阴影 | 普通静态内容卡片，表格轻浮起。 | Modal 弹窗，会导致层级感不够明显。 |
--acme-shadow-md |
0 4px 6px -1px... | 下拉菜单投影 | 表单 Select2 悬浮下拉板、操作区 Popover 菜单。 | 普通静态卡片，避免阴影重影喧宾夺主。 |
--acme-shadow-lg |
0 10px 15px -3px... | 顶级悬浮框投影 | Modal 弹窗主悬浮层、右侧抽屉浮空阻断。 | 普通表格列或摘要，导致页面噪点过重。 |
03 / Size Limits
Modal / Drawer 规格限宽
为避免开发人员或 AI 随机手写非标像素，我们规定了严格的三档宽度限制（SM / MD / LG），直接反映在栅格设计中：
| 容器类别 | 小档 (SM) | 中档 (MD) | 大档 (LG) | 业务适用与禁止准则 |
|---|---|---|---|---|
| 模态弹窗 (Modal) | 480px |
720px |
960px |
|
| 侧边抽屉 (Drawer) | 380px |
640px |
880px |
|
04 / Layers & Layout
层级与高度 Z-Index / Scroll
界面滚动条与层级关系直接影响工程质量。我们通过死规则杜绝一切双重滚动及层级遮挡：
| 层级与高度场景 | 工程基准值 | 设计目的 | 强制约束与禁止准则 |
|---|---|---|---|
| 普通列表表格高度 | calc(100vh - 170px) |
页面不产生外部滚动条 | 表格视口死锁，确保分页栏始终在屏幕最下方可见。禁止直接写死 `500px` 等定高值。 |
| 弹窗正文最大高度 | calc(100vh - 220px) |
限制弹窗总高 | 为 `modal-header` 和 `modal-footer` 留足空间，只让正文 `modal-body` 独立产生滚动条。 |
| 弹窗 (Modal) Z-Index | 1050 |
覆盖主视图层 | 统一由 Bootstrap 层级管理。所有局部自定义浮层、Toast Z-Index 必须小于 1050。 |
| 抽屉 (Drawer) Z-Index | 2100 |
多级穿透遮罩 | 多层详情抽屉叠加时，必须保证叠加层级高于 Modal。普通全局 toast 应该在此层级之上。 |