150 lines
8.6 KiB
Markdown
150 lines
8.6 KiB
Markdown
# 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和独立筛选状态保持。顶栏通知接口失败时须说明计数暂不可用，既有真实值只能作为上次数据保留，不能归零伪装无通知。
|
||
|
||
|
||
### 弹窗显式关闭补充（2026-09-09）
|
||
|
||
公共Modal默认closeOnBackdrop=false、closeOnEscape=false；全部创建/修改表单沿用该默认，点击遮罩、内容空白或Escape不关闭。页脚关闭/取消及右上角叉是显式关闭入口，仍保留dirty确认；提交成功可由业务关闭。只读公共弹窗同样采用显式关闭默认，自定义只读质量抽屉保持原交互。
|