8.2 KiB
8.2 KiB
CMPP 平台 UI 设计规范
设计原则
- 后台页面优先服务扫描、比对和操作，避免营销式大留白。
- 信息密度保持克制：列表、表格、卡片要紧凑，但标题、正文、状态之间必须保留可辨识层级。
- 页面以白色和浅灰为主，品牌黑用于导航和关键结构，蓝色只用于选中、主操作和链接。
- 所有业务页面优先复用
src/components/ui内的自研组件。
颜色
- 品牌主色：
#12121A，用于侧边栏、强品牌识别区域。 - 辅助金色：
#D9C3A0，用于品牌点缀，不作为大面积背景。 - 选中蓝色：
#2563EB，用于当前菜单、主按钮、链接、聚焦态。 - 背景色：页面背景
#F6F7F9，卡片和表单背景#FFFFFF。 - 边框色：默认
#E5E7EB，较强分隔#D1D5DB。 - 文本色：主文本
#1F2937，标题#111827，辅助文本#6B7280。 - 状态色：成功
#16A34A，警告#D97706，失败#DC2626，信息#2563EB。
字号与层级
- 页面标题：24px，700。只用于页面主标题、重要弹窗标题。
- 区块标题：16px，600。用于表单分组、卡片区块、小节标题。
- 卡片标题：16px，600。短信模板名称、彩信模板名称、应用名称等都使用这一档，不要放大到 20px 以上。
- 正文文本：14px，400-500，行高 1.5。用于表格正文、卡片正文、普通说明。
- 次要文本：13px，400-500，使用辅助色。用于 ID、时间、应用名、补充说明。
- 辅助标签：12px，500-600。用于 Tag、字段提示、状态旁注。
- 表格正文：14px，关键字段可 600。
- 状态 Tag：12px，600，保持短胶囊，不拉满列宽。
文字规范
- 同一业务类型的名称必须使用同一档字号：短信模板名称、彩信模板名称、签名名称、应用名称统一用卡片标题
16px / 600。 - 页面标题和卡片标题要明显区分：页面标题可 20-24px，卡片内标题不超过 16px，避免列表卡片视觉过重。
- ID、时间、哈希、编码等机器信息统一使用 13px、辅助色，可使用等宽字体。
- 大段短信/彩信内容统一使用 14px、辅助色、行高 1.5-1.6；卡片内最多展示 3 行，详情弹窗再展示全文。
- 字重优先使用 400 / 500 / 600 / 700，不使用 800 以上。
- 不使用负字距；后台界面文字不随视口宽度缩放。
- 中文按钮文字保持 2-6 个字为宜，动词优先，例如「预览」「编辑」「删除」「确认」。
间距
- 页面区块间距：20-24px。
- 工具栏和列表间距：16-20px。
- 卡片内边距：20px。
- 卡片内部常规间距：10-12px。
- 卡片顶部「名称 / ID / 标题」建议节奏：
- 名称到 ID：约 7-8px。
- ID 到标题：约 7-8px。
- 标题到媒体或正文：约 10-12px。
- 正文到状态区域：约 8-12px；不要使用
margin-top: auto把状态推到底部，除非卡片高度必须统一。
卡片
- 圆角统一不超过 8px。
- 列表卡片使用
1px边框，hover 可轻微阴影和边框变色。 - 彩信/短信模板类卡片可用左侧 5px 状态色条，但不要再叠加过多装饰。
- 业务标签放右上角时，要为标题保留右侧 padding，避免重叠。
- 卡片底部操作条高度建议 48-52px，背景用浅灰
#F4F6F8。
表格
- 表头使用浅灰背景，字号 13-14px，字体 600。
- 行高常规 64-86px，复杂两行信息可增加，但避免超过 110px。
- 操作按钮采用文字或图标加文字，危险操作使用红色。
- 备注、原因、说明、失败信息等不可预测长度的业务文本列必须显式设置列宽：桌面端最小240px，常规建议280-360px；不得省略
TableColumn.width后任由其被固定信息列挤窄。长文本使用全局.ui-table__long-text样式正常换行并允许在任意长单词处断行，完整内容仍应可通过详情查看。宽表因此超过容器时使用表格内部横向滚动，不压缩长文本列到不可读宽度。
表单和弹窗
- 弹窗默认
md，复杂编辑器使用xl。 - 弹窗必须采用 Header / Body / Footer 三段布局，Footer 固定完整显示。
- 表单字段在宽弹窗中可双列；编辑器内容、上传区、长文本保持单列。
- Footer 按钮顺序：辅助操作、取消、确认。确认按钮在最右侧。
- 弹窗内容高度超过视口时，只滚动 Body，不滚动 Header/Footer。
状态与反馈
已通过使用成功绿。审核中使用信息蓝。已驳回使用危险红。待报备 / 未开通 / 未知使用中性灰。- 同一行展示多个运营商状态时，使用「移动：Tag 联通：Tag 电信：Tag」的键值形式，便于横向扫描。
导航
左侧菜单
- 左侧菜单采用白底：背景使用
#FFFFFF，右侧使用1px #E5E7EB分隔线，不使用深色整栏背景。 - 菜单宽度默认使用全局变量
--sidebar-width: 248px；折叠态宽度为84px。 - 侧边栏固定在视口内：高度
100vh，页面主内容滚动时菜单不跟随滚动。 - 侧边栏内边距建议为上下 24px、左右 16px；菜单项之间保持紧凑，分组间距约 20px。
- 品牌区左上固定展示，图标使用浅蓝底和蓝色图形，品牌文字使用强文本色，不再使用大面积品牌黑底。
菜单分组
- 分组标题使用 12px、600、辅助浅灰色，字距为 0，不使用全大写或过强颜色。
- 分组标题左右内边距与菜单项保持对齐，建议
0 12px。 - 分组标题只承担结构提示，不作为强视觉元素。
菜单项
- 菜单项高度由
padding: 10px 12px控制，图标和文字间距约 12px。 - 菜单项圆角使用 8px 或
var(--radius-md)，不要使用过大的胶囊形。 - 默认文字使用主文本色，字重 500。
- 菜单文字单行展示，超长时省略号，不换行，不撑开侧栏。
- 图标使用线性图标，大小约 18-20px，颜色跟随文字状态。
选中与悬停
- 当前菜单和 hover 菜单统一使用浅蓝背景
var(--color-selected-soft)，文字和图标使用选中蓝#2563EB。 - 当前菜单左侧增加
3px蓝色内嵌竖条：box-shadow: inset 3px 0 0 var(--color-selected)。 - 选中态不使用投影，不使用大面积深蓝底，避免菜单视觉过重。
- hover 只改变背景和文字颜色，不改变尺寸，避免菜单跳动。
菜单滚动条
- 分组较多时，只让菜单列表区域滚动，不让整个侧边栏或页面标题区域滚动。
- 菜单滚动条默认隐藏：
scrollbar-color: transparent transparent，WebKit thumb 透明。 - 鼠标进入侧边栏时再显示滚动条，thumb 使用低透明蓝色：约
rgba(37, 99, 235, 0.18)。 - 鼠标悬停在滚动区域时可略微加深到
rgba(37, 99, 235, 0.22)；拖拽/hover thumb 时可到0.34。 - 滚动条宽度建议 6px，靠近侧栏右边界显示；通过负
margin-right和补偿padding-right让滚动条贴边但不遮挡菜单文字。
复用要求
- 客户端、运营端、系统管理类页面都应复用同一套左侧菜单规范。
- 新增一级模块时，优先加入现有分组；只有业务域明显不同才新增分组。
- 后续若抽离布局组件，应保留现有类名语义：
.sidebar、.side-nav、.side-nav-section、.side-nav-list。
组件约定
- 按钮：使用
Button。 - 输入框：使用
Input/Textarea。 - 下拉：使用
Select。 - 日期：使用
DateRangeInput/DateTimeInput。 - 表格：使用
Table。 - 状态：使用
Tag。 - 弹窗：使用
Modal。
新增页面或改版时，先检查是否可以复用以上组件；只有现有组件无法表达业务交互时，才新增全局组件。
公共分页容量展示补充（2026-09-08 夜）
公共Pagination中的容量Select只显示“10/25/50/100 条/页”选中项，不显示“每页数量”标题；与翻页控件放在同一操作区。复用sr-only隐藏标签并以唯一id关联，保持键盘和读屏可访问；不要删除其他表单Select的可见标签。签名质量四Tab和通道报备明细沿用该组件，默认25和独立筛选状态保持。顶栏通知接口失败时须说明计数暂不可用，既有真实值只能作为上次数据保留，不能归零伪装无通知。