# 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和独立筛选状态保持。顶栏通知接口失败时须说明计数暂不可用，既有真实值只能作为上次数据保留，不能归零伪装无通知。