Skip to content

界面基础系统

桌面端信息展示页采用 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:页面级或大型容器过渡。

仅对 opacitytransform 等不会引发页面排版重绘重排的属性配置过渡动画。同时必须适配 prefers-reduced-motion,以自动移除非必要动画。

站点的颜色与主题变量集中维护在全局样式中。主题状态通过在根元素上切换 data-theme="light|dark" 实现,未设置时默认跟随系统偏好。禁止在组件内部编写系统主题检测逻辑或重复定义主题色。