UI 详细设计规范用于 Qmai 国际后台页面和组件。
它的重点不是“让页面更花”，而是让后台业务界面更清晰、更稳定、更适合国际化。
什么时候必须读
只要任务涉及下面任意内容，就要先读 UI 规范：
- 新增或改造后台页面。
- 页面布局、视觉层级、表格、筛选区、配置页。
- 组件视觉、弹窗、选择器、工作台、画布页。
- 长文本、多语言、RTL。
console-vue-international壳层和容器视觉。common-vue-international公共页或打印模板视觉。vue-kylin-international共享组件视觉和交互。
这套 UI 的定位
Qmai 国际后台是给连锁餐饮总部、区域运营、门店管理、实施、财务、营销和配置人员使用的高频工作台。
它不是：
- 营销官网。
- 数据大屏秀场。
- 通用 SaaS 卡片模板。
- 每个仓库各自发明风格的拼盘。
它应该是：
- 专业。
- 克制。
- 清晰。
- 高信任。
- 可复用。
- 国际化友好。
五个核心原则
| 原则 | 解释 |
|---|---|
| 结构先于装饰 | 优先用布局、对齐、分组、边框、留白解决问题 |
| 层级先于颜色 | 标题、主信息、辅助信息先通过位置和字号表达 |
| 绿色是默认动作色 | 主动作、启用态、正向状态优先使用绿色体系 |
| 白底是工作面 | 普通业务内容区保持白底和清晰边界 |
| 页面先归类，再设计 | 先判断页面类型，再套合适骨架 |
页面类型
新增或改造页面时，先判断它属于哪种类型。
| 页面类型 | 适合场景 | 设计重点 |
|---|---|---|
| 列表页 | 订单、商品、会员、优惠券等列表 | 表格是主角，筛选区清晰，主 CTA 不抢查询按钮 |
| 配置页 | 规则、开关、策略、参数配置 | 保存路径稳定，说明短而准确 |
| 全屏编辑器 | 深度编辑、复杂表单、规则编排 | 顶部返回和保存明确，分区节奏统一 |
| 选择器 | 商品、门店、渠道、会员等选择 | 搜索、分页、选中态和已选汇总清楚 |
| 工作台 / 画布页 | 打印模板、票据预览、设计编辑器 | 画布是主角，配置器是辅助 |
| 数据总览页 | KPI、趋势、排行、异常关注 | 数据帮助行动，不做装饰性大屏 |
如果无法归入这些类型，再考虑新增页面骨架。
组件规则
按钮
- 同一区域只保留一个最高权重主按钮。
- 删除、停用、解绑等危险操作不能用主绿色。
- 按钮文案走 i18n，不依赖中文短文案固定宽度。
表单
- label、输入区、提示和错误状态要清晰。
- 长文本和多语言场景不能固定死宽。
- 必填、校验、保存中、禁用状态必须完整。
表格
- 列表页优先保留主身份字段。
- 状态使用浅底胶囊或清晰文本，不只靠颜色表达。
- 行内操作超过 3 个时考虑收进更多菜单。
弹窗和抽屉
- 轻确认用弹窗。
- 复杂编辑用全屏页或专门编辑器。
- 高风险弹窗必须写清影响范围和后果。
卡片和容器
- 普通业务内容使用白底、轻边框、少阴影。
- 不把列表页做成卡片墙。
- 不在卡片里再嵌套卡片。
原型还原和组件边界
产品原型已经给出明确结构时，优先还原业务页内部体验。
但要注意：
- 不复制示例工程的壳层、侧栏、导航或调试水印。
- 不为了复用 Element UI 而牺牲关键业务结构。
- 已有成熟能力，例如商品选择、门店选择、渠道选择，应先搜索项目和
vue-kylin-international是否已有组件。 - 接口没有字段承载的说明性提示，不应做成可保存、可切换的配置控件。
技术归属
| UI 问题 | 优先处理位置 |
|---|---|
| 菜单、头部、侧栏、容器、主题注入 | console-vue-international |
| 当前业务页面局部布局 | 当前业务子应用 |
| 多仓重复出现的组件视觉或行为 | vue-kylin-international |
| 公共业务页、打印模板、票据预览 | common-vue-international |
| 打印插件、桥接、国际打印运行时代码 | operation |
共享组件问题不要在多个业务仓库复制补丁。
i18n、RTL 和可访问性
UI 改动必须考虑国际化：
- 所有新增可见文案进入仓库既有 i18n 流程。
- 不把中文、英文或临时文案硬编码进模板。
- 长英文、泰文、阿语等文本要预留换行和宽度。
- 尽量使用
gap、逻辑属性或自适应布局，避免只写margin-left、padding-left。 - 颜色不能成为唯一状态表达，必须有文字或图标辅助。
- focus、loading、disabled、empty、error 状态要完整。
样式落地规则
- 局部样式优先写在当前组件 scoped 样式里。
- 微前端全局样式必须加项目级前缀，避免污染其他子应用。
- 不为单个需求新增全局样式文件，除非已有模块模式要求。
- 优先复用仓库已有 CSS 变量和组件库 token。
- 不引入新的 UI 依赖或图标体系。
- 不用大面积浅彩背景、彩色阴影、过大圆角制造高级感。
设计系统预览模板
新版规则中心新增了可运行的 Vue2 预览模板，位置在：
04-样式与组件库/设计系统预览模板/它的作用是把抽象 UI 规则翻译成一张可以对照的后台页面。
- 看布局：侧栏、页面头、内容区和工作台区域怎么分层。
- 看组件：按钮、状态、表单、表格、空状态、确认弹窗怎么保持一致。
- 看边界：页面局部样式、共享组件、打印/票据预览分别应该落到哪里。
- 看国际化：文案只是预览 fallback，进入业务代码时必须换成目标仓库 i18n key。
模板页面预览
下面是文档内的静态预览。完整运行版以新版规则中心里的 Vue2 组件为准。
组件库预览
用于统一国际后台的按钮、表单、表格、状态、弹窗和工作台类页面视觉基线。
设计原则
先定结构，再做视觉；先判断归属，再落代码。
先用结构、对齐、留白和信息顺序解决问题。
一个局部区域只保留一个最高权重动作。
重复组件问题优先回到共享组件库处理。
颜色与层级
绿色承担动作，中性色承担大部分界面表达。
按钮
危险操作不用主绿色，保存中、禁用态、二次确认都要完整。
状态
状态必须有文字，不只依赖颜色表达。
表单
表格
| 模板名称 | 编码 | 状态 | 操作 |
|---|---|---|---|
| 总部默认票据模板 | TPL-001 | 已启用 | 编辑 · 复制 |
| 外卖渠道小票模板 | TPL-002 | 待同步 | 编辑 · 复制 |
空状态
调整筛选条件，或新建一个模板后继续配置。
确认弹窗
停用后，关联门店将不再使用该模板。请确认已有替代模板。
工作台 / 画布页
画布是主角，配置器是辅助；适合打印模板、票据预览、设计编辑器。
配置器
布局密度
打印模块
运行版入口
新版规则中心提供三种查看方式：
| 方式 | 适合场景 | 入口 |
|---|---|---|
| 独立本地预览项目 | 不依赖业务仓库，直接查看完整模板 | standalone-preview-app/ |
| 嵌入式预览入口 | 复用 common-vue-international 已安装依赖，不修改业务代码 | embedded-preview/main.js |
| Vue2 单文件组件 | 挂到目标仓库临时路由或作为评审对照页 | components/QmaiInternationalDesignSystemPreview.vue |
独立预览启动命令：
cd <qmai-rule-root>/04-样式与组件库/设计系统预览模板/standalone-preview-apppnpm installpnpm dev嵌入式预览启动命令：
cd <common-vue-international-root>./node_modules/.bin/vue-cli-service serve \ <qmai-rule-root>/04-样式与组件库/设计系统预览模板/embedded-preview/main.js \ --host 127.0.0.1 \ --port 5177预览模板不是生产业务页面。真正进入业务代码时，示例数据和 fallback 文案必须替换为目标仓库的真实数据与 i18n key；重复组件问题优先回到 vue-kylin-international，不要在多个业务仓库复制补丁。
交付前检查
- 这页属于哪种页面类型？
- 主工作面是否明确？
- 页面标题是否可以减少一层？
- 文案是否都走 i18n？
- 是否出现多个同权重主按钮？
- 是否把列表页做成卡片墙？
- 是否把壳层装饰带进内容区？
- 保存、返回、确认路径是否稳定？
- 是否需要联查基座或组件库？
- RTL 和长文本是否会撑破布局？
- 空、错、加载、禁用、保存中状态是否完整？
一句话总结
Qmai 国际后台 UI 不是追求装饰感，而是追求清楚、有秩序、可复用、能承载真实业务操作。