后台总设计 / 设计规范与公共组件
返回后台总目录后台设计规范与公共组件 v1.0
所有后台页面先引用共享文件，再选择对应语义控件。模块页面只配置业务内容，不再自行定义同类控件的尺寸、颜色、弹窗和导出流程。
单行输入32px / 14px
普通按钮32px / 14px
行内操作28px / 13px
结构控件热区至少 44px
文字层级
先按信息作用选层级，放不下时换行或删重复信息，禁止靠缩小字号解决。
用途
样式示例
固定规格
核心金额
¥299.00
29px / 600
页面主标题
用户管理
23px / 600
模块标题
基本信息
19px / 600
卡片标题 / 关键操作
发放权益
16px / 600
正文 / 表单 / 页签
用于主要信息、字段标签和操作说明。
14px / 400
辅助入口
查看订单详情
13px / 400
元信息 / 状态说明
12px / 400
表单控件
联系人管理筛选框是单行输入基准；用户管理 VIP 编辑中的日期控件是单个日期基准。
输入与选择
高度32px；正文14px、#303133；占位文字14px、#909399；左右内边距10px。
单个日期
可见高度32px、正文14px；统一年／月切换、清空、确定、Esc关闭和焦点恢复。日期范围另行使用范围控件。
多行输入
正文14px、行高1.6；最小高度80px，按内容需要增加。
按钮与操作层级
确定、取消和风险操作只使用以下语义；同一层级不通过高度区分。
页面与弹窗操作
普通按钮32px / 14px / 4px圆角。破坏性确认使用红色，且必须展示影响范围。
表格行内与分页
行内文字操作和分页28px / 13px；结构性关闭控件保持44px热区。
状态、表格和公共业务组件
业务页面声明数据与权限，公共组件负责一致的视觉、确认、焦点和反馈。
| 对象 | 状态 | 更新时间 | 操作 |
|---|---|---|---|
| 示例活动 | 已上架 | 2026-08-21 10:30 | |
| 示例申请 | 待处理 | 2026-08-21 09:15 |
导出 Excel
页面只声明文件内容、当前筛选范围和敏感字段；公共组件统一确认弹窗、取消、焦点、忙碌状态和结果提示。
调用：backend-ui-components.js单个日期选择
所有单个日期字段复用同一触发框和月历；不得改用自由文本、原生日期框或页面私有日历。
调用：BackendUI.datePicker()确认弹窗
普通确认用蓝色主按钮；删除、退款等高风险确认用红色按钮，并必须说明影响范围。
调用：BackendUI.confirm()反馈提示
操作结果使用统一右下角提示；原型只说明演示结果，不伪造接口或真实业务成功。
调用：BackendUI.toast()执行规则
新页面和旧页面精修都遵守同一入口。
必须
- 先引用共享CSS和公共组件脚本
- 只选择已有语义类和组件参数
- 新增公共模式先由后台总设计扩展
- 双桌面视口检查计算样式和溢出
禁止
- 页面内复制同义按钮、输入框和弹窗实现
- 为了放下内容自行缩小字号或高度
- 各模块分别实现导出、确认和结果提示
- 把原型交互描述成真实接口能力
公共规范只统一视觉与交互骨架，不替代权限、接口、数据、幂等、审计和真实Excel生成契约。