界面基础系统
桌面端信息展示页采用 12 列网格,正文最大宽度限定为约 864 px;控制台类复杂页面可拓宽至 1280 px。移动端采用 4 列网格,两侧安全间距保留至少 16 px。禁止使用固定像素宽度以免产生横向滚动条。
所有常规间距均基于 4 px 步进系统:4 / 8 / 12 / 16 / 24 / 32 / 48 / 64。组件内部间距推荐使用 8、12、16,组件间距推荐使用 16、24、32。避免为了追求视觉直觉而引入 13 px、19 px 等非标准临时值。
| 圆角类型 | 值 | 用途 |
|---|---|---|
| 小 | 6 px | 标签、小提示 |
| 控件 | 8 px | 按钮、输入框 |
| 卡片 | 12 px | 卡片、面板 |
| 大 | 16 px | 大型容器、品牌区 |
半圆角(胶囊形状)仅适用于短状态标签及头像,长文本按钮、表格和常规容器不得采用该样式。
卡片默认使用 1 px 边框定义边界,而非阴影。小号阴影适用于悬浮菜单,中号阴影适用于弹窗,大号阴影仅用于指示阻断式顶层浮层。同一元素避免叠加粗边框、强阴影和渐变效果。
- 100 ms:按压和即时状态。
- 150 ms:悬停和焦点。
- 200 ms:展开、收起和普通过渡。
- 300 ms:页面级或大型容器过渡。
仅对 opacity 和 transform 等不会引发页面排版重绘重排的属性配置过渡动画。同时必须适配 prefers-reduced-motion,以自动移除非必要动画。
站点的颜色与主题变量集中维护在全局样式中。主题状态通过在根元素上切换 data-theme="light|dark" 实现,未设置时默认跟随系统偏好。禁止在组件内部编写系统主题检测逻辑或重复定义主题色。