Instruction file imported from Sunday233/ai-front-end (.github/instructions/09-样式规范.instructions.md). Copyright stays with the author.

燕云 infinity 平台 Web 端基础设计规范 V1.0（总约束）

使用说明（NON-NEGOTIABLE）

本文件为燕云 infinity 平台 Web 端设计规范的唯一约束来源。
命中“PRD + UI 自动实现”语义时，OpenSpec Proposal、Apply、UI 验收都必须对照本文件执行。
本文件保留原始设计规范编号体系（01-32），其中 04、05 章节在原始资料中缺失，属于已知事实。

章节导航

01 布局
02 色彩
03 字体
06 文字链接
07 导航
08 选框
09 输入框
10 选择器
11 时间选择器
12 日期选择器
13 上传
14 开关
15 表单
16 表格
17 树形控件
18 选人控件
19 分页
20 状态标记
21 全局提示
22 头像
23 加载
24 通知提醒框
25 骨架屏
26 图片
27 文字提示
28 气泡卡片
29 标签
30 图片轮播
31 数据图
32 缺省图

0. 适用范围

本规范用于燕云 infinity 平台 Web 端的统一视觉与交互实现，覆盖布局、色彩、字体与 32 类基础组件。该文档为 PRD + UI 自动实现流程中的强制输入资产。

01 布局 (LAYOUT)

适配

市面上主流屏幕分辨率的尺寸可分为三种：1920*1080、1440*900、1366*768。为了尽可能减少后期的沟通与理解时间，在此固定设计尺寸 1440*900 为设计基准。

采用左右布局的适配方案，常见的做法是将左边的导航栏固定，对右边的工作区域进行动态缩放。

网格

通过网格体系来实现视觉体系的秩序。网格的基数为 8，不仅符合偶数的思路同时能够匹配多数主流的显示设备。通过建立网格的思考方式，还能帮助设计者快速实现布局空间的设计决策，同时也能简化设计到开发的沟通损耗。

栅格

采用 24栅格体系。以上下布局的结构为例，对内容区域进行24栅格的划分设置。

页面中栅格的 Gutter（栏间距）固定为16px，浏览器在一定范围扩大或缩小，栅格的 Column（列宽）宽度会随之扩大或缩小，但 Gutter 的宽度值固定不变。

不同视窗宽度下的栅格系统

视窗宽度 `vw`	栅格全宽 Width	列宽 Column Width (vw-2*Margin)/24	栏间距 Gutter	单侧页边距 Margin
`vw >= 1280px`	-	-	-	-
2560px (大屏场景)	2512px (最大)	88px	16px	24px
1920px	1872px	70px	16px	24px
1440px (设计基准)	1408px	53px	16px	16px
1536px	1504px	57px	16px	16px
1366px	1334px	50px	16px	16px
1280px (最小兼容值)	1248px	47px	16px	16px

注：

栏间距始终为16px。

我们使用 1440px 作为设计基准，1920px 则用于大屏场景，1280px 作为最小的兼容值。

视窗最大宽度为 2560px，栅格宽度最大即 2512px。

单侧页边距在小于 1920px 时固定为 16px，大于等于 1920px 时，为保证视觉比例相近，页边距也相应扩大为固定 24px。

综合考虑性能问题，仅列宽是动态计算的，即 (vw-2*Margin)/24。

常用模度

为了帮助不同设计能力的设计者们在界面布局上的一致性和韵律感，统一设计到开发的布局语言，减少还原损耗，参考Ant Design提出的UI模度的概念。

一组可以用于UI布局空间决策的数组，它们都保持了 8倍数 的原则、具备动态的韵律感。
经过验证，可以在一定程度上帮助我们更快更好的实现布局空间上的设计决策。

第一组（8倍数）：4, 16, 24, 40, 64, 104, 168, 272, 440, 720, 1152, 1920 第二组（4倍数）：8, 12, 20, 32, 48, 80, 128, 208, 336, 552, 896, 1440

02 色彩 (COLORS)

颜色是用户感知界面内容及产品特性的直观方式和媒介，合理且和谐的颜色搭配能够提高界面的可用性，为我们的界面带来统一且可识别的一致性，提升用户体验和感知。

品牌色

品牌色会作为品牌独有的主色，常用于强调视觉重量，包含导航栏、图标、品牌传播等。

主色：#0B66FD

功能色

名称	色值	说明
主色	`#0B66FD`	主色调，用于强调和突出的文字、按钮
辅助色（提示）	`#FFAE00`	提醒警示时使用
辅助色（成功）	`#24C366`	表示正确时、正向时使用
辅助色（错误）	`#FF4D4F`	错误时提醒使用
置灰色	`#BFBFBF`	置灰时使用

中性色

名称	色值	说明
边框色	`#D9DCE2`	通用边框或描边色
分割线颜色	`#F0F1F4`	通用描边色或分割线
模块内背景1	`#F4F5F7`	模块内背景（等级1），表格表头背景
模块内背景2	`#FAFAFB`	模块内背景（等级2，色彩弱于等级1），表格分背景、部分边框组件禁用填充色
白色背景色	`#FFFFFF`	用于线性模块内的填充色，如次要按钮等
黑色背景色	`#000000`	用于toast、背景遮照等填充层，通常会与透明度同时出现

字体颜色

名称	色值	说明
主要字体	`#262626`	文字标题、内容
副标题	`#595959`	副标题、内容
注释性文本	`#8C8C8C`	注释性字体
文本框默认	`#BFBFBF`	文本提示性字体
白色字体	`#FFFFFF`	用于有色底上的文字

色阶应用

品牌色阶（蓝色）

#e6f4ff @color-1 #bae0ff @color-2 #91caff @color-3 #69b1ff @color-4 #4096ff @color-5 #0b66fd @color-6（主色） #0758d9 @color-7 #003eb3 @color-8 #002c8c @color-9 #001d66 @color-10

成功色阶（绿色）

#ECF8F0 @color-1 #b1e9c8 @color-2 #9ce4ba @color-3 #74d99f @color-4 #4ace82 @color-5 #24c366 @color-6（主色） #19a154 @color-7 #107f3f @color-8 #07592b @color-9 #023314 @color-10

警示色阶（橙色）

#FFF7E8 @color-1 #ffefcc @color-2 #ffdb8c @color-3 #ffcb5d @color-4 #ffbd2a @color-5 #ffae00 @color-6（主色） #d28f00 @color-7 #a47000 @color-8 #754e00 @color-9 #442b00 @color-10

错误色阶（红色）

#FFF0F0 @color-1 #ffccc6 @color-2 #ffb0ac @color-3 #ff8682 @color-4 #ff6067 @color-5 #ff4d4f @color-6（主色） #cf1421 @color-7 #a8071a @color-8 #820014 @color-9 #5c0012 @color-10

中性色阶（灰色）

#FAFAFA @color-1 #f5f5f5 @color-2 #f0f0f0 @color-3 #e5e5e5 @color-4 #d9d9d9 @color-5 #bfbfbf @color-6 #8c8c8c @color-7 #595959 @color-8 #262626 @color-9 #000000 @color-10

03 字体 (FONTS)

字体选择

非特殊情况下建议一律使用系统默认字体。

Windows：中文：微软雅黑 (Microsoft Yahei)，英文：Arial
Mac OS：中文：苹方 (PingFang SC)，英文：Helvetica Neue

字体规范

采用统一字体字号范围，但不局限于此标准，具体按照要求进行合理应用。

层级	字号 `font-size`	行高 `line-height`	示例
大Banner标题	46px	54px	大Banner标题
Banner标题	38px	46px	Banner标题
超大标题	30px	38px	超大标题
大标题	24px	32px	大标题
主标题	20px	28px	主标题
小标题	16px	24px	小标题
正文	14px	22px	正文
辅助文字	12px	20px	辅助文字

06 文字链接 (TEXT LINK)

文字链接，用于页面跳转或打开标签页，打开信息内容弹框，操作结果与本页面无直接联系，链接代表着导览。

状态规范

类型	正常状态	悬停与按下状态	禁用状态
普通文字链接	`#595959`（带下划线）	`#0B66FD`（带下划线）	`#BFBFBF`
着重文字链接	`#0B66FD` / `#FFAE00` / `#FF4D4F`	正常状态色 + 6%黑色叠加	正常状态色，不透明度25%

文字示意

正常文字常态显示：#595959，无下划线
带跳转的文字链接hover：#0B66FD，带下划线
不带跳转的文字hover：#0B66FD，带下划线

07 导航 (NAVIGATION)

顶栏导航

适用于广泛的基础用法，用于燕云infinity整体平台模块的切换，为一级导航。

导航高度：
- 用于展示类且页面宽度1920及以上页面，统一使用64px
- 用于展示类且页面宽度1440页面，以上统一使用56px
- 用于信息密集型页面，统一使用48px
尺寸、间距：导航字体高度64px，模块字段间距48px，图标与文字间距8px，下方“ ”为icon占位符。
交互展示：模块字段中选中时色值变为主色；姓名字符数量≤4，超出使用“…”展示；“展开”、“收起”图标直接切换展示。

侧边栏导航

用于模块的侧边导航，模块切换；垂直菜单，可内嵌子菜单。

尺寸：导航文字字号16px,图标尺寸16*16px。每个导航栏高为56px，默认宽度1440屏幕尺寸固定208px，1920及以上屏幕固定宽度240px。
交互展示：选中后字段及图标变为白色，添加矩形背景（色值为：#0B66FD）。

页内导航

标签页

分隔内容上有关联但属于不同类别的数据集合。

基础用法：基础的、简洁的标签页。
卡片化样式：卡片化的标签页。

面包屑

显示当前页面的路径，快速返回之前的任意页面。

步骤条

引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于2步。

基础用法：简单的步骤条。
含状态步骤条：每一步骤显示出该步骤的状态（已完成、进行中、待完成）。

08 选框 (CHECKBOX & RADIO)

在一组备选项中进行单选或多选，已选项和未选项同时展示，仅样式不同。

单选框

样式	正常状态	悬停状态	选中状态	禁用状态
普通样式	空心圆，文字`#595959`	空心圆（边框色变`#0B66FD`），文字`#595959`	实心圆（填充`#0B66FD`），文字`#262626`	灰色空心圆，文字`#BFBFBF`
带边框	按钮样式，边框`#D9DCE2`，文字`#595959`	按钮样式，边框`#0B66FD`，文字`#595959`	按钮样式，背景`#E6F4FF`，边框`#0B66FD`，文字`#0B66FD`	按钮样式，背景`#F5F5F5`，文字`#BFBFBF`
连接式	多标签并排，未选中背景白，文字`#595959`	多标签并排，悬停项边框`#0B66FD`	多标签并排，选中项背景`#0B66FD`，文字`#FFFFFF`	多标签并排，禁用项背景`#F5F5F5`，文字`#BFBFBF`

多选框

样式	正常状态	悬停状态	选中状态	禁用状态
普通样式	空心方块，文字`#595959`	空心方块（边框色变`#0B66FD`），文字`#595959`	实心方块（填充`#0B66FD`），文字`#262626`	灰色空心方块，文字`#BFBFBF`
带边框	按钮样式，边框`#D9DCE2`，文字`#595959`	按钮样式，边框`#0B66FD`，文字`#595959`	按钮样式，背景`#E6F4FF`，边框`#0B66FD`，文字`#0B66FD`	按钮样式，背景`#F5F5F5`，文字`#BFBFBF`

09 输入框 (INPUT BOX)

通过鼠标或键盘输入字符。

样式与状态

样式	正常状态	输入状态	输入后状态	禁用状态
普通样式	边框`#D9DCE2`，提示文字`#BFBFBF`	边框`#0B66FD`，文字`#262626`	边框`#D9DCE2`，文字`#262626`	背景`#F5F5F5`，边框`#F5F5F5`，文字`#BFBFBF`
带Icon	同普通样式，右侧带放大镜图标	同普通样式，图标随输入状态变色	同普通样式	同普通样式
输入长度限制	下方显示`0/10`、`0/30`等	输入中，边框变`#0B66FD`，计数同步更新	输入完成，边框`#D9DCE2`，计数为`10/10`	背景`#F5F5F5`，文字`#BFBFBF`
自适应高度多行输入	文本域，边框`#D9DCE2`	文本域，边框`#0B66FD`	文本域，边框`#D9DCE2`，文字`#262626`	背景`#F5F5F5`，边框`#F5F5F5`，文字`#BFBFBF`
带模糊查询	输入后下拉显示选项列表	输入中，边框`#0B66FD`，下拉列表出现	选中后，边框`#D9DCE2`，文字为选中项	背景`#F5F5F5`，边框`#F5F5F5`
带输入建议	输入后下拉显示建议选项	输入中，边框`#0B66FD`，下拉列表出现	选中后，边框`#D9DCE2`，文字为选中项	背景`#F5F5F5`，边框`#F5F5F5`
带按钮	输入框+右侧按钮	输入框边框`#0B66FD`，按钮正常	输入框边框`#D9DCE2`，按钮正常	输入框背景`#F5F5F5`，按钮禁用
数字输入框	输入框+右侧上下箭头	输入中，边框`#0B66FD`	输入完成，边框`#D9DCE2`	背景`#F5F5F5`，边框`#F5F5F5`

10 选择器 (SELECTORS)

在一组备选项中进行单选或多选，仅选择过程展开显示选项，选择后仅展示选择结果。

样式说明

选择器宽度视业务情况而定，这里不做具体定义，组件需提供宽度高度可配置参数，由业务线研发根据效果图标注设定。
选择器展开选项区域最大高度为180px，选项显示不全时使用滚动条滚动显示。

基础样式

状态	描述
正常状态	下拉框，提示文字“请选择”
鼠标悬停状态	边框`#0B66FD`
鼠标悬停（展开）	下拉框边框`#0B66FD`，下拉选项列表展开，选项hover背景`#E6F4FF`
选择后再次选择状态	下拉框显示选中值，边框`#0B66FD`，下拉列表展开，选中项右侧带勾选标记
禁用状态	背景`#F5F5F5`，边框`#F5F5F5`，文字`#BFBFBF`

级联样式

展开状态：显示多级菜单，hover父级选项时显示子级选项
选中后状态：下拉框显示完整路径（如“选项二 / 子项二”）

多选样式

展开状态：下拉列表带复选框，支持多选
选中后状态：下拉框显示多个选中项的标签，可点击关闭；下拉列表中对应选项勾选

11 时间选择器 (TIME SELECTORS)

时间点与时间范围的选择控件。

样式说明

选择器宽度视业务情况而定，不做统一定义，组件需提供宽度、高度可配置参数，由业务线研发根据效果图标注设定。
展开选项区域最大高度：
- 固定时间选择器：最大高度为 168px
- 任意时间选择器：最大高度为 282px
选项显示不全时，使用滚动条滚动显示。

11.1 固定时间点

（每个时间点间隔为半小时）

状态	表现说明
正常状态	边框 `#D9DCE2`，提示文字“选择时间”，右侧时间图标
鼠标悬停状态	边框 `#0B66FD`，文字颜色不变
鼠标按下状态	边框 `#0B66FD`，下拉选项列表展开，显示 `08:00` / `08:30` / `09:00` / `09:30` / `10:00` 等半小时间隔选项
选择后再次选择状态	输入框显示选中时间（如 `09:30`），边框 `#0B66FD`，下拉列表中对应选项被高亮标记
禁用状态	背景色 `#F5F5F5`，边框 `#F5F5F5`，文字 `#BFBFBF`

11.2 任意时间点

（精确到秒）

状态	表现说明
正常状态	边框 `#D9DCE2`，提示文字“选择时间”，右侧时间图标
鼠标悬停状态	边框 `#0B66FD`，文字颜色不变
鼠标按下状态	边框 `#0B66FD`，下拉选项列表展开，显示「时/分/秒」三列滚动选择器，底部有“确定”按钮
选择后再次选择状态	输入框显示选中时间（如 `23:20:58`），边框 `#0B66FD`，下拉列表中对应时、分、秒高亮显示
快捷操作	列表底部提供“此刻”快捷按钮，点击可快速填充当前系统时间
禁用状态	背景色 `#F5F5F5`，边框 `#F5F5F5`，文字 `#BFBFBF`

11.3 固定时间范围

（每个时间点间隔为半小时）

状态	表现说明
正常状态	两个输入框，分别提示“开始时间”、“结束时间”，中间用箭头连接
鼠标悬停状态	输入框边框变为 `#0B66FD`
鼠标按下状态	点击任一输入框，弹出半小时间隔的时间选项列表
选择后状态	两个输入框分别显示选中的开始、结束时间（如 `09:00:00` → `09:35:00`），边框 `#0B66FD`
禁用状态	输入框背景色 `#F5F5F5`，边框 `#F5F5F5`，文字 `#BFBFBF`

11.4 任意时间范围

（每个时间点精确到秒）

状态	表现说明
正常状态	两个输入框，分别提示“开始时间”、“结束时间”，中间用箭头连接
鼠标悬停状态	输入框边框变为 `#0B66FD`
鼠标按下状态	点击任一输入框，弹出「开始时间-结束时间」双时间选择器，分别包含「时/分/秒」三列，底部有“确定”按钮
选择后状态	两个输入框分别显示选中的时间范围（如 `09:00:00` → `09:30:00`），边框 `#0B66FD`
禁用状态	输入框背景色 `#F5F5F5`，边框 `#F5F5F5`，文字 `#BFBFBF`

12 日期选择器 (DATE PICKERS)

日期与时间范围的选择控件，支持日期、日期+时间、日期范围等多种用法。

12.1 日期时间组合用法

12.1.1 日期和时间点（以日为单位，精确到分/秒）

状态	表现说明
正常/悬停/已选日期/禁用状态	输入框边框：正常为`#D9DCE2`，悬停为`#0B66FD`；禁用时背景为`#F5F5F5`，文字为`#BFBFBF`。提示文字“选择日期”
鼠标按下状态	弹出日期时间选择面板：1. 左侧日历：显示年月视图，可切换年月，日期hover背景为`#E6F4FF`，选中日期背景为`#0B66FD`、文字为白色2. 右侧时间：显示「时/分/秒」三列选择器3. 底部有“此刻”和“确定”按钮
选择后再次选择状态	输入框显示选中的日期时间（如`2025-07-16 23:00:00`），边框为`#0B66FD`，日历中对应日期高亮，时间选择器显示选中值

12.1.2 任意日期和时间范围（以日为单位，精确到分/秒）

状态	表现说明
正常/悬停/禁用状态	两个输入框，分别提示“开始日期”、“结束日期”，中间用箭头连接；悬停时边框变为`#0B66FD`，禁用时背景为`#F5F5F5`
鼠标按下状态	弹出日期时间范围选择面板：1. 左右双日历视图，可分别选择开始/结束日期2. 右侧「时/分/秒」选择器，可设置开始/结束时间3. 提供“立即开始”快捷选项4. 底部有“确定”按钮
快捷操作	支持预设快捷选项：`10天后`、`1周后`、`3天后`、`5年前`、`3个月后`、`20个小时后`、`5分钟后`等
选择后状态	输入框显示完整时间范围（如`2025-10-21 → 2025-10-22`），边框为`#0B66FD`

12.2 日期与日期范围的选择控件

12.2.1 任意日期范围整合面板（可便捷地选择一个时间范围）

状态	表现说明
正常/悬停/禁用状态	两个输入框，提示“开始日期”、“结束日期”，中间用箭头连接；悬停时边框变为`#0B66FD`
鼠标按下状态	弹出双日历范围选择面板：1. 左右双日历视图，支持跨月选择2. 开始日期hover为`#E6F4FF`，选中为`#0B66FD`；结束日期hover时，中间日期会显示淡蓝色背景，表示范围预览3. 底部有“近1周”等快捷选项
选择后再次选择状态	输入框显示完整日期范围（如`2020-07-05 → 2020-07-23`），边框为`#0B66FD`，日历中已选范围高亮

12.2.2 任意日期范围整合面板（精确到秒）

状态	表现说明
正常/悬停/禁用状态	两个输入框，提示“开始时间”、“结束时间”，中间用箭头连接；悬停时边框变为`#0B66FD`
鼠标按下状态	弹出日期时间范围选择面板：1. 左右双日历视图2. 右侧「时/分/秒」选择器3. 支持跨月、跨年选择
选择后状态	输入框显示完整时间范围（如`2020-07-05 → 2020-08-05`），边框为`#0B66FD`

交互与样式细节

日期hover：背景色为#E6F4FF，文字色为#0B66FD
日期选中：背景色为#0B66FD，文字色为#FFFFFF
范围选择预览：开始与结束日期之间的日期，背景色为淡蓝色，表示已选中范围
快捷操作：提供“此刻”、“近1周”、“立即开始”等快捷按钮，点击可快速填充时间
面板最大高度：展开面板支持滚动，超出部分可上下滑动查看

13 上传 (UPLOAD)

上传文件/图片的基础样式参考，后期可根据项目需求进行样式定制并总结至规范内。

样式说明

上传组件主要分为三种形式：图片上传、文件上传、拖拽上传，不同状态下有统一的交互与视觉表现。

13.1 图片/文件上传卡片样式

（适用于单文件上传，支持图片、文档等格式）

状态	表现说明
正常状态	虚线边框框，内部为灰色加号图标+文字（如“新建应用程序”、“上传图片”），边框颜色为`#D9DCE2`，文字颜色为`#8C8C8C`
鼠标悬停状态	边框变为`#0B66FD`，加号图标变为蓝色，文字变为蓝色
鼠标按下状态	边框为`#0B66FD`，背景色变为`#E6F4FF`，加号图标为蓝色
图片/文件上传后状态	已上传的文件以缩略图形式展示：• 图片文件：显示预览图，右上角带关闭按钮• 文档文件：显示文件图标（Word/PPT/通用文件）+文件名，右上角带关闭按钮
禁用状态	背景色`#F5F5F5`，加号图标和文字为浅灰色，不可点击

13.2 按钮式文件上传

（仅展示文件名称，适用于单/多文件上传）

状态	表现说明
正常状态	蓝色“点击上传”按钮，下方提示文字（如“只能上传jpg/png文件，且不超过500kb”）
上传中状态	按钮点击后，显示文件列表：• 文件名+加载中图标（蓝色转圈）• 下方显示进度
上传成功状态	文件列表中显示文件名+成功图标（蓝色对勾）
上传失败状态	文件列表中显示文件名+失败提示（红色文字）
已上传后状态	显示已上传文件的输入框样式，带文件名和关闭按钮
禁用状态	按钮为浅灰色，文字为浅灰色，不可点击

13.3 拖拽式文件上传

（点击或拖拽文件至指定区域上传，适用于多文件上传）

状态	表现说明
正常状态	虚线边框区域，内部为灰色加号图标+提示文字“点击或拖拽文件到指定区域上传”
拖拽/点击上传中状态	区域内显示上传进度：• 文件名+加载进度条• 下方可显示多个文件的上传状态（加载中、成功、失败）
上传成功状态	文件列表中显示文件名+成功图标（蓝色对勾）
上传失败状态	文件列表中显示文件名+失败提示（红色文字/图标）

通用规则

支持格式：可配置文件类型限制（如仅jpg/png）和大小限制（如不超过500kb）
文件删除：所有已上传文件的右上角均有关闭按钮，点击可删除文件
错误反馈：上传失败时，文件名会变为红色，并显示错误提示图标/文字
交互反馈：悬停、点击、上传中、成功、失败均有明确的视觉反馈，保持与平台主色#0B66FD统一

14 开关 (SWITCH)

表示两种相互对立的状态间的切换，多用于全局控制性功能开启或关闭。

普通样式开关状态规范

状态	表现说明
关闭状态	背景为灰色（`#BFBFBF`），滑块为白色，整体呈灰色调
开启状态	背景为主色（`#0B66FD`），滑块为白色，整体呈蓝色调
禁用状态（关闭）	背景为浅灰色（`#F5F5F5`），滑块为浅白色，不可点击
禁用状态（开启）	背景为淡蓝色（`#B3D4FF`），滑块为白色，整体为半透明的蓝色调，不可点击

交互说明

点击开关时，滑块会平滑地从一侧滑动到另一侧，同时背景色在灰色与蓝色之间过渡
禁用状态下，开关无交互反馈，鼠标样式为not-allowed
支持两种尺寸（常规/小型），视觉风格保持一致，仅整体尺寸按比例缩小

15 表单 (HTML FORM)

高性能表单控件，自带数据域管理，包含数据录入、校验以及对应样式。

左对齐表单

标签文字与输入框左对齐，标签在左，输入框在右。

典型样式与布局规则

标签与输入框间距为 40px
表单控件之间的垂直间距为 16px
按钮区域与表单内容间距为 32px
校验错误提示文字为红色，位于输入框下方，与输入框间距 8px

校验样式

基础校验样式：输入框边框变红，提示文字为红色，用于必填、格式错误等场景
二次校验样式：输入框边框正常，右侧显示加载中/成功/失败图标，用于异步校验（如用户名是否存在）
交互状态：输入框聚焦时边框变为#0B66FD，hover状态下边框为#0B66FD，禁用状态背景为#F5F5F5

顶对齐表单

标签文字与输入框顶对齐，标签在输入框上方。

典型样式与布局规则

标签与输入框垂直间距为 12px
表单控件之间的垂直间距为 24px
按钮区域与表单内容间距为 48px

校验样式

与左对齐表单保持一致，错误提示文字位于输入框下方。

行内表单

常用于数据表格的高级搜索，所有控件在同一行内展示，支持折叠/展开。

样式与布局规则

控件之间的水平间距为 24px
布局规则支持自动换行，间距为 12px
支持折叠/展开按钮，用于显示/隐藏更多搜索条件
包含“重置”和“搜索”按钮，搜索按钮为主色#0B66FD

16 表格 (TABLES)

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

表格列宽适配方案

列数较少：按等比或根据具体内容做适配
列数较多：文字最多显示8个字符，两边边框距离为16px，超出页面按下面固定列的形式配置

基础表格样式

基础表格：白底，无额外样式，适合简洁场景
带斑马纹表格：隔行背景色为#FAFAFB，便于区分不同行数据
带边框表格：横向和纵向均有边框，数据展示更独立清晰
固定表头：纵向内容过多时，表头固定在顶部，方便查看数据
带状态表格：支持行高亮（背景色为#E6F4FF），方便区分、对比数据
多级表头：用于数据结构复杂的场景，展示数据的层次关系
固定列：支持左边固定、右边固定、两边固定，横向内容过多时使用

表格交互

排序：表头支持升序/降序排序，显示排序箭头
筛选：支持表头筛选和表格内筛选，可快速过滤数据
操作列：提供查看、设置内容、更多操作等入口，操作文字为#0B66FD

17 树形控件 (TREE CONTROL)

用清晰的层级结构展示信息，可展开或折叠。

基础用法

基础的树形结构展示，支持：

节点展开/折叠：点击+/-图标或节点文字切换状态
连接线：层级间的连接线清晰展示父子关系
垂直间距：节点间的垂直间距为20px

可选择树形

适用于需要选择层级时的场景，节点前带有复选框：

支持单选/多选
支持部分选中（半选状态）
可设置节点的选择状态（如已选、未选）

默认展开和默认选中

可将Tree的某些节点设置为默认展开或默认选中：

默认展开：节点初始为展开状态
默认选中：节点初始为选中状态，支持父节点与子节点的联动选中

禁用状态

可将Tree的某些节点设置为禁用状态：

禁用的节点无法被选择、展开/折叠
视觉上呈置灰状态，鼠标样式为not-allowed

18 选人控件 (SELECTION CONTROL)

用于选择添加人员，支持多种场景下的人员选择。

选择人员弹窗

左侧为机构/人员树，右侧为已选人员列表
支持按姓名、部门筛选搜索
支持人员类型切换（如不同角色）
已选人员支持移除操作

选择学校/组织弹窗

左侧为学校/组织列表，右侧为已选项
支持按名称搜索筛选
支持单选或多选

新增人员控件

显示已选择的人员标签，支持移除
支持“点击选择”按钮打开选人弹窗
可配置操作权限（查看、导出等）

添加对象类型控件

左侧为可选对象类型列表，支持复选
右侧为已选对象类型列表，支持移除
支持按名称搜索筛选

19 分页 (PAGING)

当数据量过多时，使用分页分解数据。

简洁分页

适用于模块内的分页样式：

翻页较少：直接显示所有页码按钮
大于7页：显示省略号，中间页码折叠
支持设置最大页码按钮数
带有快捷跳转功能（输入页码跳转）
带有调整每页显示条数功能（下拉选择条数）

Mini分页

在空间有限的情况下使用的小型分页：

常规样式：页码按钮+上/下页箭头
简洁样式：仅显示当前页码/总页数
带快捷跳转功能：输入框直接跳转
带文字样式：如“第1/8页”

标准分页

适用于整个页面的翻页样式：

包含上一页、页码按钮、下一页
大于7页时，中间页码折叠为省略号
带有快捷跳转功能：输入框+确定按钮
带有调整每页显示条数功能：下拉选择条数

交互说明

当前页按钮背景色为#0B66FD，文字为白色
其他页码按钮边框为#D9DCE2，文字为#595959，hover状态下边框变为#0B66FD
禁用状态下的按钮为浅灰色，不可点击

20 状态标记 (STATUS FLAG)

出现在按钮、图标旁的数字或状态标记，用于提示用户关注的内容。

基础用法

显示具体数字，如消息数量（12、2）
背景色为红色#FF4D4F，文字为白色，右上角圆形标记

最大值

可自定义数字的最大值，超出后显示为 {max}+

如设置最大值为99，则显示99+
如设置最大值为10，则显示10+

自定义内容

可以显示数字以外的文本内容

如新、热等自定义文字标记，背景色为红色#FF4D4F，文字为白色

小红点

以红点的形式标注需要关注的内容，不显示具体数字

纯红色圆点，无文字，用于提示有新内容或待处理事项
可附加在按钮、图标等元素的右上角

21 全局提示 (MESSAGE PROMPT)

用图标、图片或者字符的形式展示用户或事物信息，提供系统级通知反馈。

Message 全局提示

悬浮出现在页面角落，显示全局的通知提醒消息，用于系统级通知的被动提醒。

类型	样式说明
错误提示	红色图标（`#FF4D4F`），文字为黑色，背景白色
警告提示	黄色图标（`#FFAE00`），文字为黑色，背景白色
成功提示	绿色图标（`#24C366`），文字为黑色，背景白色
消息提示	蓝色图标（`#0B66FD`），文字为黑色，背景白色
纯文字提示	无图标，仅文字提示
加载中	加载动画图标，文字为黑色，背景白色

带图标样式（可点击关闭）

右侧带关闭按钮，点击可主动关闭提示
样式与基础提示保持一致，仅增加关闭按钮

Message 消息提示

用于主动操作后的反馈提示，支持边框和背景色区分。

类型	带图标样式	纯文字样式
错误提示	红色边框+浅红背景，带错误图标	红色边框+浅红背景，无图标
警告提示	黄色边框+浅黄背景，带警告图标	黄色边框+浅黄背景，无图标
成功提示	绿色边框+浅绿背景，带成功图标	绿色边框+浅绿背景，无图标
消息提示	蓝色边框+浅蓝背景，带消息图标	蓝色边框+浅蓝背景，无图标

可点击关闭样式

右侧带关闭按钮，点击可主动关闭
支持所有提示类型，样式与基础提示保持一致

显示位置

可配置显示位置，如页面右上角、顶部居中
与页面边距为40px，多条消息间的垂直间距为20px

22 头像 (PROFILE PICTURE)

用图标、图片或者字符的形式展示用户头像。

基本用法

通过 shape 和 size 设置头像的形状和大小
支持圆形和方形两种形状
尺寸分为大、中、小三种规格，支持系统默认头像占位

展示类型

图标头像：默认用户图标
图片头像：用户上传的真实图片
字符头像：用户姓名首字母（如“user”、“召”），背景色可自定义

带徽标类型

头像右上角可添加状态徽标，如在线状态、消息数

徽标为红色圆点或数字标记，尺寸为12px

颜色对比

字符头像支持多种背景色，与文字颜色形成对比

主色系列：蓝色、黄色、绿色、红色、灰色
浅色系：浅蓝色、浅黄色、浅绿色、浅粉色、浅灰色

23 加载 (LOADING)

用于页面和区块的加载中状态，缓解用户等待焦虑。

基础用法

三种尺寸分别为：24px、16px、8px

大尺寸（24px）：用于页面级加载
中尺寸（16px）：默认用于卡片容器级加载
小尺寸（8px）：用于文本加载
环形加载动画，主色为#0B66FD，背景色为#F5F5F5

扩展用法

放入容器中，可自定义描述文案：

带“正在加载”文字说明，文字大小为12px，颜色为#262626
支持白色/深色背景模式，适配不同场景
可嵌入弹窗、卡片等容器中使用

24 通知提醒框 (NOTIFICATION)

全局展示通知提醒，将信息及时有效的传达给用户。对话框弹出时，页面蒙层为黑色不透明度40%。

基本弹窗

当用户进行操作时会被触发，中断用户操作，直到用户确认才可关闭。

包含标题、描述文字、“取消”和“确定”按钮
按钮主色为#0B66FD，取消按钮为白色边框

确认消息

提示用户确认已触发的动作，如删除、危险操作。

包含确认/警告/危险三种类型，对应蓝色/黄色/红色图标
文字说明可自定义，支持多行文本

信息提示

各种类型的信息提示，只提供一个按钮用于关闭。

包含通知、警告、成功、失败四种类型，对应不同颜色的图标和按钮
按钮为#0B66FD主色，文字为白色

提交内容

用户操作时触发，提示用户进行输入的对话框。

包含标题、输入框、“取消”和“确定”按钮
输入框支持文本输入，用于收集用户信息

自定义

支持自定义弹窗大小和内容区域

最小弹窗：紧凑布局，仅包含核心操作
设置模板：支持自定义宽高和内容区域，可嵌入富文本或复杂组件

25 骨架屏 (SKELETON SCREEN)

用于页面和区块的加载中状态，以灰色占位块展示内容结构。

基本骨架

最简单的灰色色块占位效果，模拟文本加载状态

多条灰色矩形，模拟文本行高和段落结构
背景色为#F5F5F5，高度根据实际文本行高设置

复杂的组合

包含头像和文本的组合骨架，模拟用户信息或列表项加载

圆形头像占位+多行文本占位
常用于列表、卡片等复杂内容的加载状态

图片的组合

包含图片和文本的骨架屏，模拟图片加载状态

矩形图片占位+文本占位，常用于图片列表、相册等场景

示例

展示加载前的骨架屏与加载完成后的实际内容对比

骨架屏：灰色占位块
加载完成：真实图片和文本内容

26 图片 (PICTURES)

图片容器，在保留原生img的特性下，支持懒加载、自定义占位、加载失败等。

基础用法

scale-down：图片保持宽高比，按容器等比缩小
cover：图片按容器宽高比填充，超出部分裁剪

缩略图显示

显示尺寸分为「矩形/方形/圆形」三种，加载流程分为「加载过程/加载失败/加载成功」

矩形：一般用于“单张图片”场景的缩略图显示
方形（1:1）：一般用于“多张图片”场景的缩略图显示，如九宫格
圆形：一般用于“头像”场景的缩略图显示

各状态样式

缺省：灰色图片占位图标
加载过程：加载动画图标
图片涉嫌违规：违规提示图标
加载失败：失败提示图标，支持点击重新加载
重新加载：失败状态下的重试按钮

大图显示

点击缩略图查看大图，支持主图格式：JPG/PNG/BMP/GIF

大图预览模式，带背景遮罩（70%透明度黑色）
支持左右切换、放大/缩小、下载、旋转等操作按钮
显示位置与页面边距为24px，上下居中显示

27 文字提示 (TEXT PROMPT)

用于显示简短的提示信息，以气泡形式出现。

基础用法

提供不同方向的展示方式，箭头位于提示文字的中间位置

位置：上左、上中、上右、左、右、下左、下中、下右
样式：背景色为黑色#262626，文字为白色，圆角4px，内边距8px

气泡提示带图标

展示多行文本或段落，支持带图标提示

图标与文字组合，增强提示的辨识度
支持不同提示类型的图标，如信息、警告等

28 气泡卡片 (POPOVER)

点击/鼠标移入元素，弹出气泡式的卡片浮层。和Tooltip的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。

基础用法

带标题：包含标题和内容区域，箭头可配置方向（上左、上中、下左、下中）
不带标题：仅内容区域，无标题，箭头方向可配置
带操作：包含标题、内容和操作按钮（如“取消”、“确定”），支持用户交互

布局规则

气泡卡片与触发元素的间距为16px
支持鼠标悬停或点击触发，可配置触发方式
卡片背景为白色，边框为#D9DCE2，圆角4px

29 标签 (TAG)

用于标记内容属性，可根据不同的颜色和样式区分不同的属性。

基础样式

提供四种基础颜色主题，支持多种变体样式：

样式类型	蓝色（主色）	橙色	绿色	红色
基础标签样式	蓝色背景，白色文字	橙色背景，白色文字	绿色背景，白色文字	红色背景，白色文字
线框式样式	蓝色边框，蓝色文字，透明背景	橙色边框，橙色文字，透明背景	绿色边框，绿色文字，透明背景	红色边框，红色文字，透明背景
浅背景样式	浅蓝色背景，蓝色文字	浅橙色背景，橙色文字	浅绿色背景，绿色文字	浅红色背景，红色文字
浅背景加描边	浅蓝色背景+蓝色描边，蓝色文字	浅橙色背景+橙色描边，橙色文字	浅绿色背景+绿色描边，绿色文字	浅红色背景+红色描边，红色文字

流程状态标签示例

蓝色（流程进行中）：等待中、启动中、暂停中、停止中、恢复中、执行中(手动/自动)
橙色（流程暂停/节点）：已暂停、暂停执行、暂停、等待确认
绿色（流程成功/正确）：成功、正确、审核通过、已启动、可用
红色（流程失败/错误）：失败、错误、被驳回
灰色（流程终止/未开始）：停止、终止、已中断、已失效、未审核、待补充、待开始、未设置、未执行

基础尺寸

文字大小：12px / 14px
标签高度：20px / 24px
内边距：左右 8px
圆角：4px

30 图片轮播 (PICTURE CAROUSEL)

用于展示多张图片、视频或内框架等内容的循环播放，支持系统自动播放或用户手动切换。

基础用法

指示器位置可配置，鼠标移入时显示切换按钮：

正常状态：仅显示图片和底部指示器，无切换按钮
鼠标移入：左右切换按钮显示，按钮背景为#000000（20%不透明度），箭头为#FFFFFF（100%不透明度）
不可点击状态：按钮箭头为#FFFFFF（50%不透明度），不可交互

指示器位置

内容区域内：指示器在图片下方，鼠标移入卡片区域时显示切换按钮
内容区域外：指示器在图片外部，鼠标移入卡片区域时显示切换按钮

区域模块用法

当页面宽度方向空间空余，但高度方向空间多余时，可指定使用卡片化风格：

多卡片横向排列，左右切换按钮悬浮在卡片两侧
底部指示器居中显示，支持多张图片的循环切换

31 数据图 (GRAPHS)

用于直观展示多数据多向对比，丰富纯文本数据的展示形式。

柱状图

单系列柱状图：单一数据系列，不同分组的数值对比
多系列柱状图：多组数据对比，支持堆叠或并列显示
带筛选样式：支持按时间/维度筛选数据，如按年份切换
宽彩带型样式：宽幅柱状图，避免数据量少时显示单薄的问题

折线图

单系列折线图：单一数据系列的趋势变化
多系列折线图：多组数据趋势对比，不同颜色区分系列
支持悬停提示，显示数据点的具体数值

饼状图

基础饼图：展示各分类占比，支持图例说明
环形饼图：中间空心的饼图，突出各部分占比

雷达图

用于多维度数据对比，展示各项指标的分布情况：

支持单系列/多系列雷达图
不同系列用不同颜色区分，可配置填充效果

面积图

单系列面积图：带填充的折线图，展示数据趋势和量级
多系列面积图：多组数据的面积对比，不同颜色区分系列

32 缺省图 (EMPTY)

用于当前场景没有对应的数据内容时，呈现的一种状态。

全局缺省

居中展示，图片大小为160px×160px，文字大小14px，文字颜色#8C8C8C
常用场景：暂无数据、暂无讨论、暂无作答、暂无图片、加载中、数据处理失败、暂无学生、网络异常、等待中、暂无搜索结果、暂无排序、写入文件、暂无权限、系统维护中、数据加载失败、系统建设中、加载异常、暂无知识库

大模块缺省用法

居于整体模块的居中位置，图片大小为120px×120px，文字14px，文字颜色#8C8C8C
常用于列表、卡片等较大容器的缺省状态

小模块缺省用法

文字居于整体模块的居中位置，文字14px，文字颜色#8C8C8C
常用于表格单元格、小卡片等狭小空间的缺省状态

404报错

因网络或其他问题导致的页面加载失败时展示，提供返回链接：

居中展示，带404图标和提示文字
包含“返回首页”等可点击链接，帮助用户快速导航

About

燕云 infinity 平台 Web 端基础设计规范 V1.0（总约束）

使用说明（NON-NEGOTIABLE）

章节导航

0. 适用范围

01 布局 (LAYOUT)

适配

网格

栅格

不同视窗宽度下的栅格系统

常用模度

02 色彩 (COLORS)

品牌色

功能色

中性色

字体颜色

色阶应用

品牌色阶（蓝色）

成功色阶（绿色）

警示色阶（橙色）

错误色阶（红色）

中性色阶（灰色）

03 字体 (FONTS)

字体选择

字体规范

06 文字链接 (TEXT LINK)

状态规范

文字示意

07 导航 (NAVIGATION)

顶栏导航

侧边栏导航

页内导航

标签页

面包屑

步骤条

08 选框 (CHECKBOX & RADIO)

单选框

多选框

09 输入框 (INPUT BOX)

样式与状态

10 选择器 (SELECTORS)

样式说明

基础样式

级联样式

多选样式

11 时间选择器 (TIME SELECTORS)

样式说明

11.1 固定时间点

11.2 任意时间点

11.3 固定时间范围

11.4 任意时间范围

12 日期选择器 (DATE PICKERS)

12.1 日期时间组合用法

12.1.1 日期和时间点（以日为单位，精确到分/秒）

12.1.2 任意日期和时间范围（以日为单位，精确到分/秒）

12.2 日期与日期范围的选择控件

12.2.1 任意日期范围整合面板（可便捷地选择一个时间范围）

12.2.2 任意日期范围整合面板（精确到秒）

交互与样式细节

13 上传 (UPLOAD)

样式说明

13.1 图片/文件上传卡片样式

13.2 按钮式文件上传

13.3 拖拽式文件上传

通用规则

14 开关 (SWITCH)

普通样式开关状态规范

交互说明

15 表单 (HTML FORM)

左对齐表单

典型样式与布局规则

校验样式

顶对齐表单

典型样式与布局规则

校验样式

行内表单

样式与布局规则

16 表格 (TABLES)

表格列宽适配方案

基础表格样式