色彩 Color
全站语义色彩体系，基于 Ant Design 5.x Token
Design Token
Brand 品牌色 / 主色系
Primary
#1677FF
主品牌蓝 · 核心行动
Primary Hover
#4096FF
悬浮态
Primary Active
#0958D9
按下态
Primary BG
#E6F4FF
选中背景 / 轻填充
Text 文字色阶
Text Primary
#1D2129
一级主文字
Text Secondary
#4E5969
二级次要文字
Text Tertiary
#86909C
三级辅助/提示
Text Disabled
#C9CDD4
禁用状态
Semantic 语义色 / 功能色
Success
#00B42A
成功/在线/正常
Success BG
#E8FFEA
成功浅色底
Error
#F53F3F
错误/危险/停用
Error BG
#FFECE8
错误浅色底
Warning
#FF7D00
警告/注意
Warning BG
#FFF7E8
警告浅色底
Surface 表面色 / 边框
Background
#FFFFFF
全纯白大画布
BG Hover
#F7F8FA
悬浮/斑马纹
Border
#E5E6EB
全站统一细边框
Border Light
#F2F3F5
表格行间分隔
字体 Typography
PingFang SC / -apple-system · 双字重 400/600
Font Scale
线路管理
通话记录明细
华东专线配置
表单输入、表格内容、按钮文字、常规描述性段落正文
次要说明文字、表格次要列、操作提示、描述列表键值
表单辅助文字、时间戳、版本号、状态描述、标签文字
SECTION HEADER · 分组标题
L-20240601-0021 · 并发: 200 · ¥0.028/分钟
间距 Spacing
4px 为基础步长的原子间距体系
Spacing Scale
4px
微调
图标间距
图标间距
8px
组件
内部间距
内部间距
12px
筛选项
横向间距
横向间距
16px
卡片
标准内距
标准内距
20px
模块
纵向间距
纵向间距
24px
页面
全局外距
全局外距
32px
控件
标准高度
标准高度
40px
大号控件
高度
高度
48px
卡片头
固定高度
固定高度
56px
弹窗头脚
固定高度
固定高度
60px
顶栏
固定高度
固定高度
| 场景 | 属性 | 值 | 备注 |
|---|---|---|---|
| 页面全局 | padding | 24px | 四周内边距 |
| 筛选项横向 | margin-right | 12px | 表单项之间 |
| 筛选栏↓表格 | margin-bottom | 16px | 零按钮即时联动 |
| 并排操作按钮 | gap | 8px | 按钮组内 |
| 弹窗/抽屉内容区 | padding | 24px | 大区块标准 |
| 卡片头部 | height | 48px | 固定不可变 |
| 弹窗/抽屉头脚 | height | 56px | 含分割线 |
| 日期选择器 | width | 380px | 含时分秒时硬锁 |
按钮 Button
三级行动分流 · 全屏最多一个 Primary
a-button
Type 按钮类型
Size 按钮尺寸
Icon 图标按钮 / 按钮组
// 三级行动点规范
<a-button type="primary">新建</a-button> // 主行动 · 全屏最多1个
<a-button>导出</a-button> // 次级行动 · 白底默认
<a-button type="link" size="small">编辑</a-button> // 表格操作列链接
<a-button type="link" danger>删除</a-button> // ⚠️ 危险操作 · 语义红
输入框 Input
32px 统一高度 · 聚焦态禁用阴影
a-input
Basic 基础输入框
✕
线路名称格式不正确
Addon 前后缀 / 组合输入
https://
:5060
%
%
Size 三种尺寸
Textarea 多行文本
<a-input
v-model:value="keyword"
size="middle"
:allow-clear="true"
placeholder="搜索线路名称"
@change="handleSearch" // 防抖 300ms · 零按钮即时联动
@press-enter="fetchList"
/>
// ⚠️ 焦点阴影覆写 (LESS global)
.ant-input:focus, .ant-input-focused {
box-shadow: none !important;
border-color: #1677FF !important;
}
选择器 Select
showSearch · dropdownMatchSelectWidth=false
a-select
Demo 基础选择器
单选 Select
线路类型
地区筛选
<a-select
v-model:value="statusFilter"
size="middle"
:show-search="true" // 长列表必须开启模糊检索
:dropdown-match-select-width="false" // 防止下拉长文本截断
:allow-clear="true"
style="width: 160px"
@change="fetchList" // 即时联动，无查询按钮
/>
// 下拉弹窗样式覆写
.ant-select-dropdown {
background: #fff;
box-shadow: 0 4px 10px rgba(0,0,0,0.05); // 极轻扁平投影
}
.ant-select-item-option-selected {
color: #1677FF; background: #E6F4FF; font-weight: 500;
}
复选框 & 单选框
a-checkbox · a-radio
Form Controls
Checkbox 多选
Radio 单选
开关 Switch
行内状态切换 · 表格内常用
a-switch
启用线路
录音功能
小号 Small
禁用
Slider 滑块输入
并发数上限
0当前值: 120200
表单 Form
竖向标准表单 · 8px label间距 · 16px item间距
a-form
* 线路名称
线路名称将显示在报表和通话记录中
* 线路类型
服务地址
sip:
:5060
* 并发上限
请输入 1-500 之间的整数
计费方式
启用状态
创建后立即启用
备注
// ⚠️ 弹窗/抽屉表单防误触必须声明
<a-modal
:mask-closable="false" // 点击遮罩不关闭
:keyboard="false" // Esc 不关闭
:body-style="{ maxHeight: '480px', overflowY: 'auto' }"
@cancel="handleCancelWithConfirm" // 表单修改后弹二次确认
/>
上传 Upload
拖拽上传 / 点击上传
a-upload
点击或拖拽文件到此区域上传
支持 .csv .xlsx 格式，最大 10MB
线路配置模板_v2.xlsx
48 KB
已上传
×
标签 Tag · 徽标 Badge
Pill 胶囊 · 三语义色 · 四变体
a-tag · a-badge
Status Tag 语义状态标签 (Pill · 最常用)
运行中
质检中
接通
成功
已完成
已发布
异常
已暂停
阻断
待处理
告警
未启用
已归档
Bordered 描边型标签 (分类 / 属性)
SIP直连
中继线
华东区
华北区
默认路由
Badge 徽标数字 / 小红点
5
99+
Badge Status 行内状态指示器
服务正常运行
线路连接异常
并发接近上限
未配置
// Pill 胶囊标签实现
.status-tag {
border-radius: 999px; // 胶囊圆角
padding: 2px 10px;
font-size: 12px;
font-weight: 500;
}
数据表格 Table
三原则：ellipsis + Tooltip · fixed right · scroll x
a-table
| 线路ID | 线路名称 ↑ | 线路类型 | 状态 | 并发上限 | 今日通话量 | 更新时间 | 操作 | |
|---|---|---|---|---|---|---|---|---|
| L-0021 | SIP直连 | 运行中 | 200 | 3,420 | 2024-06-01 14:30 | 编辑 | 配置 | 停用 | ||
| L-0022 | 华北线路-备用 | 中继线 | 已暂停 | 100 | 0 | 2024-05-28 09:15 | 编辑 | 启用 | 删除 | |
| L-0023 | 质检专线-广州 | 云呼叫 | 质检中 | 50 | 891 | 2024-06-03 08:00 | 编辑 | 配置 | 强拆 |
// 表格三原则配置
const columns = [
{ title: '线路名称', dataIndex: 'name', width: 200,
ellipsis: true, // ①超长截断
customRender: ({ text }) => <a-tooltip title={text}>{text}</a-tooltip>
},
{ title: '操作', key: 'action', width: 140,
fixed: 'right', // ②操作列右固定
}
]
// ③横向滚动
<a-table :scroll="{ x: 'max-content' }" />
分页 Pagination
showSizeChanger · showQuickJumper · showTotal
a-pagination
‹
1
2
3
···
12
›
共 238 条
‹
1
2
3
4
5
›
前往 页
共 87 条
统计数字 Statistic
KPI 指标卡 · 概览面板
a-statistic
今日通话总量
12,840
↑ 8.2% 较昨日
接通率
87.3%
↑ 1.5%
平均通话时长
3分42秒
↓ 0.3%
今日费用
¥2,310
— 与昨日持平
活跃线路数
8 / 12
共 12 条线路
当前并发数
187
⚠ 接近上限 200
描述列表 Descriptions
详情展示 · 两列网格布局
a-descriptions
线路名称华东专线-01
线路IDL-20240601-0021
线路类型SIP直连
当前状态运行中
SIP地址sip:proxy.dailycomm.cn:5060
并发上限200 路
计费方式按分钟 ¥0.028/分钟
创建时间2024-06-01 09:30:00
头像 Avatar
圆形 / 方形 · 三尺寸
a-avatar
Shape 形状与尺寸
刘
刘
刘
王
王
王
李
张
陈
Group 头像组
张
王
李
陈
+8
张
张工
线路管理员 · 华东区
树形控件 Tree
层级组织结构 · 路由规则配置
a-tree
▾
华东区域路由组
▾
上海节点
L-0021 华东专线-01
L-0024 华东专线-02
▸
杭州节点
▸
华北区域路由组
时间轴 Timeline
操作日志 · 任务流状态
a-timeline
2024-06-03 14:30:00
线路 华东专线-01 已启用，并发上限设置为 200
2024-06-03 11:20:00
路由规则 R-0088 配置完成，已生效
2024-06-03 09:00:00
系统巡检完成，服务状态正常
2024-06-02 23:18:00
线路 华北线路-备 连接异常，已自动切换备用节点
2024-06-02 09:00:00
例行维护窗口开始
标签页 Tabs
type="line" 扁平线条型 · 禁用卡片型
a-tabs
Line 线条型（默认，推荐）
标签页内容区域
Card 卡片型（仅特殊场景）
// ✅ 推荐：线条型
<a-tabs type="line"></a-tabs>
// ❌ 禁止：卡片型（除非有充分理由）
// <a-tabs type="card"></a-tabs>
// Active 样式覆写
.ant-tabs-tab-active .ant-tabs-tab-btn { color: #1677FF !important; }
.ant-tabs-ink-bar { background: #1677FF !important; height: 2px !important; }
面包屑 Breadcrumb
页面层级导航 · 最多 4 层
a-breadcrumb
步骤条 Steps
表单向导 / 任务流状态
a-steps
✓
填写基本信息
✓
配置路由规则
3
设置计费方式
4
确认并发布
✓
待处理
✓
质检中
3
审批中
4
已完成
下拉菜单 Dropdown
批量操作 / 更多功能入口
a-dropdown
触发按钮
下拉面板
弹窗 Modal
maskClosable=false · keyboard=false · 内容区限高 480px
a-modal
Standard 标准表单弹窗 (width: 520px)
新建线路
×
* 线路名称
* 线路类型
备注
Confirm 确认弹窗 (width: 416px) · 危险操作用 a-popconfirm
⚠ 确认停用
×
停用后该线路将立即断开所有通话连接，确认要停用 华东专线-01 吗？
Popconfirm 气泡确认（表格内危险操作专用）
?
确认删除此条线路吗？此操作不可恢复。
// ⚠️ 防误触必须声明（最高优先级）
:mask-closable="false" // 禁止点击遮罩关闭
:keyboard="false" // 禁止 Esc 关闭
:body-style="{ maxHeight: '480px', overflowY: 'auto' }"
// 宽度规范
width=416 // 小号确认框
width=520 // 中号标准表单
width=800 // 大号复杂配置
// 表格内单行危险操作：严禁弹 Modal，必须用气泡
<a-popconfirm
ok-button-props="{ danger: true, type: 'primary' }"
/>
抽屉 Drawer
详情/表单 520px · 复杂配置 960px
a-drawer
线路详情
×
线路名称华东专线-01
当前状态运行中
并发上限200
今日通话3,420 次
<a-drawer
:width="520" // 标准详情 / 轻量表单
:width="960" // 复杂大表单 / 内嵌表格
:mask-closable="false"
:keyboard="false"
:body-style="{ padding: '24px', overflowY: 'auto' }"
:header-style="{ height: '56px', borderBottom: '1px solid #E5E6EB' }"
:footer-style="{ height: '56px', borderTop: '1px solid #E5E6EB', display: 'flex', justifyContent: 'flex-end', gap: '8px' }"
/>
提示 Alert
四语义类型 · 页面级内嵌提示
a-alert
系统通知
定于 2024-06-10 02:00-04:00 进行例行维护，届时服务将短暂不可用，请提前做好准备。
操作成功
线路 华东专线-01 已成功启用，当前并发数 0 / 200。
并发预警
当前并发数 187，已达上限 200 的 93.5%，建议及时扩容或调整路由策略。
线路异常
华北线路-备 连接失败，错误码 SIP 503，请检查服务器状态或联系运营商。
Message 全局提示 (顶部居中弹出)
✓ 线路配置保存成功
✕ 并发上限不能超过套餐允许的最大值 500
△ 操作处理中，请稍候...
进度 Progress
并发占用 / 任务完成度
a-progress
华东专线-01 并发占用
120/200
华北线路-备 并发占用
93/100
任务完成进度
34%
批量导入进度
75%
气泡提示 Tooltip · Popover
长文本截断必配 Tooltip
a-tooltip · a-popover
Tooltip 悬浮提示（纯文本）
华东专线-01（上海节点-SIP直连）
Popover 气泡卡片（含操作）
快速预览 · 华东专线-01
状态运行中
并发120 / 200
今日通话3,420
// 表格长文本截断 + Tooltip（缺一不可）
{
ellipsis: true,
customRender: ({ text }) => (
<a-tooltip title={text} placement="topLeft">
<span>{text}</span>
</a-tooltip>
)
}
空状态 Empty · 加载态 Loading
无数据 / 骨架屏 / 加载中
a-empty · a-spin
暂无数据
骨架屏 Skeleton
加载中...
正在获取线路列表数据
图标 Icons · 分割线 Divider
16px 标准 SVG 图标 · 1px 细分割线
SVG Icons
Icons 常用功能图标 (16×16)
列表
搜索
新建
确认
关闭
下载
文档
信息
警告
监控
用户
设置
Divider 分割线
模块标题上方
分割后内容
或
行内分割
编辑
删除