# 中控后台组件规范 · 合并版 本文件包含通用基线与全部 66 个专题，适合一次交给 AI 读取。专题的页面链接和原始文档链接均保留。 ## 通用约束 > 当前本地规范稿。适用于设计、实现与验收；不表示已同步到外部正式规范。 ## 范围 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 ## 通用基线 - 组件库：Element UI **2.15.6**；运行样例 Vue **2.6.14**。 - 系统中文字体：macOS 优先苹方，Windows 通常微软雅黑；工程顺序固定为 `"PingFang SC", "Microsoft YaHei", sans-serif`。不要求安装或加载网络字体，兼容回退不是另一套可选样式。 - 后续仅采用经验证且固定版本的兼容 Element UI 2.x；Element Plus 属于独立迁移路线。 - 正文、数据值、输入及已选值：`14px / 400 / 21px`，`#303133`。 - 表头及组件分组标题：`14px / 600 / 21px`；弹窗标题：`16px / 600 / 24px`，均使用 `#303133`。 - 辅助说明：`12px / 400 / 18px`，`#595959`；错误、链接、状态、禁用与占位按各自语义处理。 - 适用组件的默认尺寸为 `small / 32px`；不得将这一高度机械应用于表格、文本域、浮层等全部组件。 - 规范正文与场景说明使用 `14px / 400 / 24px`、`#303133`，不降成灰蓝小字。 - 筛选文本输入占位统一“请输入”；未选择下拉统一“请选择”；默认全部的下拉显示“全部”。字段标签保留业务含义；日期保留开始/结束语义。 - 次级文字操作（查看更多、编辑、详情、数据中心、更多）：`12px / 400 / 18px`，`#3377BB`；保留点击热区。 - 本规范库的深色目录、蓝色展示区属于文档排版，不是业务组件颜色或业务导航规范。 ## 文字与颜色 字体采用系统中文字体方案：macOS 优先使用苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序统一为 `"PingFang SC", "Microsoft YaHei", sans-serif`。前置字体不可用或缺字时继续回退，sans-serif 仅作最后兼容项。字体来自设备已有资源，不要求用户安装字体或等待网络字体加载；不允许页面作者按模块自由改选。 系统不同，实际字形、字重呈现和抗锯齿可能不同，不承诺像素完全一致。验收先以浏览器100%缩放检查实际呈现字体、字号、字重、字色和行高，再检查放大阅读。正文偏浅时同时排查字体、字重、透明度和缩放；不得通过对整页设置缩小变换适配标注或表格。 | 角色 | 色值 | 使用边界 | | --- | --- | --- | | 正文、数据、输入、已选值、只读值 | `#303133` | 主要读取内容；保留正常字重 | | 标题 / 表头 | `#303133` | 通过字号与 600 字重表达结构 | | 辅助说明 | `#595959` | 不承载必须读取的主值 | | 占位提示 | `#C0C4CC` | 未填写或未选择；不能代替标签 | | 禁用文字 | `#C0C4CC` | 当前不可操作 | | 交互主色 | `#409EFF` | 可操作语义 | | 成功 / 警告 / 失败 | `#67C23A` / `#E6A23C` / `#F56C6C` | 配合明确文案，不能只靠颜色 | 当前正文颜色依据最近的可读性调整更新。竞品截图仅用于观察清晰度，不作为准确 CSS 色值或字重的证据。历史样板中的正文 `#606266`、输入 `#616266`、辅助说明 `#909399` 不代表当前正文基线；历史内容只用于追溯。部分语义浅色未满足白底普通文字的对比度目标，不能据此宣称全量无障碍达标。 ## 尺寸 | 控件尺寸 | 参考高度 | 说明 | | --- | --- | --- | | 标准（`default`） | 40px | 标准尺寸 | | 中等（`medium`） | 36px | 中等尺寸 | | 常规（`small`） | 32px | 本库默认 | | 紧凑（`mini`） | 28px | 仅用于明确紧凑容器 | 以上及以下 px 都是 CSS 像素，是网页的尺寸单位，不等于每台屏幕上的一个物理发光点。基础间距步长 4px，常用 4px / 8px / 12px / 16px / 24px / 32px；按钮组保留 10px 间距。输入族圆角 0px（直角），按钮 4px，其他容器以对应专题为准。 ## 状态与数据约束 按组件能力区分默认、悬停、聚焦、按下、选中、禁用、只读、加载中和错误；不适用项应明确，不能给所有组件强加同一状态集。只读与禁用不同，加载需要防重复，错误需要清楚文案和退出方式。 默认值、临时输入、草稿、已提交值分别管理。取消不保存草稿；真实网络、权限、精度、时区、大数据与跨页选择策略由宿主明确，不从演示值推导业务规则。 ## 示例分类与采用原则 先判断用途，再分别看功能配置、外观样式和尺寸；这几个维度可以按条件组合，不能把示例总数当作可选样式的数量。 每个专题的“本页用法与分类”明确默认用法、选用或触发条件及使用边界。悬停、聚焦、禁用、加载、空数据、失败等根据操作、权限或数据变化，不能作为自由选择的外观。 组件库支持、规范页用于对照、本后台采用、业务已实现分别判断。优先复用默认方案，其他形式须有明确场景；静态示意与演示切换按钮不直接作为产品功能交付。 ## 文档结构与使用 每份专题文档包含稳定标识、分类、版本、组件映射、规则编号、场景验收清单、Vue 模板片段及来源。文件头部的 YAML 元数据用于机器索引，正文为标准 Markdown。 下载与复制得到的是规范正文；Markdown 压缩包仅包含文档，不含网页运行代码。相对链接依赖原目录，单独移走文件后需回到规范网页查看关联材料。 读取顺序：本文件 → 对应专题。需要整体上下文时使用 [ALL_COMPONENTS.md](ALL_COMPONENTS.md)。示例片段依赖库中的 Vue 数据、方法和 CSS，不是可以直接复制运行的独立组件。 ## 验证口径 “有专题和运行样例”不等于“全部场景已测试”。专题中的复选框是待执行验收项，不是测试通过记录。实际测试记录以 运行检查（内部检查记录）、[改版说明](../../组件展台改版说明.md) 和各自记录版本为准；旧测试结果不能自动覆盖后续修改。 ## 来源 - [规范结构化数据](../component-data.json) - [官方覆盖映射](../coverage-manifest.json) - 当前页面的完整样式依赖及加载顺序见下方清单；以页面实际入口为准。 - [本地历史原始样板](../original-20260621.html) 与 [历史规范条目](../spec-notes.json) - [Element UI v2.15.6 源码](https://github.com/ElemeFE/element/tree/v2.15.6) ## 当前页面样式加载顺序 1. [vendor/element-ui-2.15.6.css](../vendor/element-ui-2.15.6.css) 2. [components.css](../components.css) 3. [presentation.css](../presentation.css) 4. [typography.css](../typography.css) 5. [color-contract.css](../color-contract.css) 6. [input-contract.css](../input-contract.css) 7. [action-contract.css](../action-contract.css) 8. [reference-patterns.css](../reference-patterns.css) 9. [button-contract.css](../button-contract.css) 10. [pagination-contract.css](../pagination-contract.css) 11. [global-component-contract.css](../global-component-contract.css) 12. [feedback-patterns.css](../feedback-patterns.css) 13. [geometry-patterns.css](../geometry-patterns.css) 14. [icon-catalog.css](../icon-catalog.css) 15. [usage-guide.css](../usage-guide.css) 16. [container-variants.css](../container-variants.css) 17. [input-width-patterns.css](../input-width-patterns.css) 18. [badge-patterns.css](../badge-patterns.css) 19. [calendar-keyboard.css](../calendar-keyboard.css) 20. [official-types.css](../official-types.css) 21. [official-form-layout.css](../official-form-layout.css) 22. [official-navigation.css](../official-navigation.css) 23. [font-contract.css](../font-contract.css) 共享样式约束在基础样式后加载；字体合同 font-contract.css 最后加载，统一 --ui-font-family，--font 与 --scene-font 共同引用该值。图标、输入、按钮、分页等分别遵循对应文件；字体合同不覆盖图标字体。展示用容器样式不直接当作业务组件规范。 ## 统一色彩与维护原则 颜色仅从公共色值引用：主色系3个基础色值、辅助功能色3个、中性色10个，共16个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停或不同字段再新增近似颜色。遮罩35%与阴影12%从外壳深色派生。 统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 | Token | 色值 | 归属 | 使用条件 | | --- | --- | --- | --- | | `--ui-primary` | `#409EFF` | 主色 | 主按钮默认/按住/加载、勾选、开关开启、焦点边框 | | `--ui-action` | `#3377BB` | 主色 | 文字链接、次级操作、主按钮悬停及键盘焦点；与主题蓝同属主色系 | | `--ui-selected` | `#ECF5FF` | 主色 | 选中行、已选菜单底、日期范围；不是斑马纹 | | `--ui-success` | `#67C23A` | 辅助色／功能反馈 | 成功图标、完成进度、已完成标识 | | `--ui-warning` | `#E6A23C` | 辅助色／功能反馈 | 警告图标、需注意标识；不用于普通待处理 | | `--ui-danger` | `#F56C6C` | 辅助色／功能反馈 | 错误边框、错误提示、必填符号、失败图标、无框红字删除与危险按钮边框 | | `--ui-body` | `#303133` | 中性色 | 正文、字段名、数值、标题；层级用字号字重 | | `--ui-help` | `#595959` | 中性色 | 必须阅读的辅助说明、计数、说明性图标 | | `--ui-muted` | `#909399` | 中性色 | 无、非关键空值、非交互装饰图标；不用于正文 | | `--ui-disabled` | `#C0C4CC` | 中性色 | 禁用文字、占位符、不可用图标、未选评分 | | `--ui-white` | `#FFFFFF` | 中性色 | 内容、输入、弹层底；填充按钮的反白文字 | | `--ui-workspace` | `#F1F3F6` | 中性色 | 页面内容外的工作区背景 | | `--ui-subtle` | `#F5F7FA` | 中性色 | 表头、悬停底、禁用底；同色不同角色 | | `--ui-border` | `#DCDFE6` | 中性色 | 输入、按钮、卡片边框及骨架占位；悬停边框也复用，不新增灰 | | `--ui-divider` | `#EBEEF5` | 中性色 | 表格分隔、选项分隔、步骤未完成连线；骨架轻微动效的亮部 | | `--ui-shell` | `#00162A` | 中性色／外壳专用 | 深色侧栏；组件内容区不引用 | 先读取 [全局色彩规则](semantic.md)，再读取组件自身的状态表。新增色值必须先更新 color-tokens.json，再同步公共样式与受影响组件，不得在业务页局部新增近似色。 状态及颜色规则的覆盖不代表所有业务原型已迁移；组件交互与实际状态截图需逐项验收。 ## 维护层交互与字段语义 Element UI 2.15.6 原库不等于本规范的完整交互实现。实现后台时应同时实现下面的交互合同；单独引入原库或只复制截图，不能视为已符合规范。以下三项是维护适配，不能视为跨版本通用组件 API。 | 适配文件 | 当前作用范围 | 必须保留的条件 | | --- | --- | --- | | [form-semantics.js](../form-semantics.js) | 当前文档中的 Element 表单和明确声明的独立输入 | 依据真实 `.el-form-item.is-required/is-error`、稳定标签和显式 ARIA 同步语义；不推导业务规则，不把多选搜索框、上传按钮或每个复选项标为必填。每个 iframe 是独立文档，须在自身入口加载。 | | [choice-semantics.js](../choice-semantics.js) | 仅规范页 `#spec-slider`、`#spec-rate`、`#spec-color-picker` | 绑定 Vue **2.6.14** / Element UI **2.15.6** 的实际实例，读取 `__vue__`、实例引用和内部状态；这些不是稳定公共 API。必须保留对应专题宿主和标签 ID，且安装时组件已挂载。 | | [calendar-keyboard.js](../calendar-keyboard.js) 与 [calendar-keyboard.css](../calendar-keyboard.css) | 仅规范页 `#spec-calendar` 的原生日历示例 | 依赖 `YYYY年M月` 中文标题、只含日期数字的原生日格和原有月份按钮。自定义日期插槽、其他语言、动态插入整个宿主或业务日历不能直接视为已适配。 | 所有主题还需加载公共样式，键盘轮廓由 [global-component-contract.css](../global-component-contract.css) 与日历专用样式提供；输入族继续遵循 [input-contract.css](../input-contract.css)，只改变自身边框，不叠加外圈。 当前规范页为同步脚本入口。日历脚本先登记 `DOMContentLoaded` 初始化，`components.js` 随后挂载 Vue；表单与选择适配在后面加载。初始化实际运行时，对应宿主与组件实例必须已存在。`form-semantics.js` 观察本文件内后续弹窗，可通过 `ControlFormSemantics.refresh(root)`补充同步；另外两项没有公开的任意宿主初始化接口，不能假定路由后插入的新宿主会自动接入。 移植到业务模块时，应在组件生命周期中按实际实例引用实现等价交互，给多实例分配各自唯一的标签 ID，并在销毁时释放监听；不要在一页复制多个相同的 `spec-*` ID，也不要为适配脚本改写业务布局。更换 Vue/Element UI 版本或内部 DOM 结构后，必须重新检查键盘、名称、边界、焦点返回与动态销毁，不能沿用当前版本的通过记录。业务字段仍须提供稳定标签和真实规则，适配层不推导业务必填条件。 ### 当前规范页脚本加载顺序 1. [vendor/vue-2.6.14.js](../vendor/vue-2.6.14.js) 2. [vendor/element-ui-2.15.6.js](../vendor/element-ui-2.15.6.js) 3. [component-search.js](../component-search.js) 4. [danger-actions.js](../danger-actions.js) 5. [reference-patterns.js](../reference-patterns.js) 6. [button-states.js](../button-states.js) 7. [feedback-patterns.js](../feedback-patterns.js) 8. [icon-catalog.js](../icon-catalog.js) 9. [container-variants.js](../container-variants.js) 10. [input-width-patterns.js](../input-width-patterns.js) 11. [badge-patterns.js](../badge-patterns.js) 12. [calendar-keyboard.js](../calendar-keyboard.js) 13. [official-types.js](../official-types.js) 14. [official-form-layout.js](../official-form-layout.js) 15. [official-navigation.js](../official-navigation.js) 16. [components.js](../components.js) 17. [scroll-keyboard.js](../scroll-keyboard.js) 18. [form-semantics.js](../form-semantics.js) 19. [choice-semantics.js](../choice-semantics.js) ### 本次适配文件版本 以下为生成文档时文件的 SHA-256 前 12 位；发布入口的 `?v=` 应与实际文件一致。 | 文件 | 内容版本 | | --- | --- | | [form-semantics.js](../form-semantics.js) | `8a7dc716d881` | | [choice-semantics.js](../choice-semantics.js) | `98846acc84a0` | | [calendar-keyboard.js](../calendar-keyboard.js) | `c346f32c6d5a` | | [calendar-keyboard.css](../calendar-keyboard.css) | `e14e4f9743f7` | --- ## 字体、字号、字重与行高 · `type` 专题 `type` · 基础视觉 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 本专题为基础规则、同一组件的补充场景或组合模式，不作为独立的 Element UI 官方组件声明。 ### 本页用法与分类 默认用法：统一使用系统中文字体：macOS 优先苹方，Windows 通常使用微软雅黑。各页面遵守同一工程顺序与文字角色规格，不要求用户安装字体或等待字体下载。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 平台字体 | macOS：苹方；Windows：微软雅黑 | 浏览器按固定工程顺序使用设备已有字体；正文、表格、输入、弹窗和业务场景共同遵守。 | | 兼容回退 | "PingFang SC", "Microsoft YaHei", sans-serif | 前面的字体不可用或缺字时才继续回退；sans-serif 是最后兼容项，不是供页面作者自由选择。 | | 文字角色 | 标题、正文、辅助说明、次级操作 | 正文14px/400，表头和分组标题14px/600，弹窗标题16px/600，辅助说明与次级操作12px/400。 | | 验收条件 | 实际字体、颜色、字重与浏览器缩放 | 先在100%缩放下检查实际呈现字体及内部文字；macOS与Windows字形及渲染有正常差异，分别留证。 | 使用边界：不能按页面混用其他字体、把正文改成500/700或调低透明度；不通过整体缩小页面适配标注或表格。字体、字号、字重、字色和缩放一起核对，不能仅凭截图推定对方字体。 ### 组件规则 - **TYPE-R01**：统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **TYPE-R02**：正文与标题使用相同深色，通过字重区分，避免正文失去重心。次级操作12px，点击热区仍保留至少24px，不能连同按钮热区一起缩小。 - **TYPE-R03**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **TYPE-R04**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **TYPE-R05**：【正文与标题】正文使用正文深灰、14px/400；标题使用同一正文深灰和600字重，不靠新的深浅颜色制造层级。 - **TYPE-R06**：【辅助文字】必要说明使用辅助深灰；空值“无”使用空值灰；占位和禁用文字使用禁用灰，不能用于有效正文。 - **TYPE-R07**：【操作文字】普通次级操作使用操作蓝、12px/400；危险文字操作使用错误红、12px/400。只有真实操作具有交互态。 - **TYPE-R08**：【组件边界】本专题规定文字角色；字体样本本身没有悬停、选中或禁用状态，组件中的文字状态由对应组件定义。 - **TYPE-R09**：同一数据表中的名称、数值和说明统一正文14px/400/21px与#303133。只有明确数值内容启用等宽数字；不按列序号给说明列套数字规则。列宽按内容分配，上方规格说明表的首列宽度不沿用到下方阅读样例。 - **TYPE-R10**：带补充说明的选项分为两行：字段名称14px/400/21px，说明12px/400/18px、辅助深灰，间隔4px；复选框对齐字段名称第一行，不能下沉到说明旁。选中只改变适用状态颜色，不改变字号或字重。 - **TYPE-R11**：【平台与兼容】系统字体方案以无需安装和额外下载为前提；macOS 与 Windows 的字形、字重呈现和抗锯齿可能不同，不承诺跨系统像素完全一致。其他系统按 sans-serif 使用已有无衬线字体。 - **TYPE-R12**：【视觉验收】先以浏览器100%缩放检查实际呈现字体、字号、字重、字色、行高及内部子元素，再测试用户放大后的可读性。看起来偏浅时同时排查字体、字重、透明度和缩放，不只反复加深颜色；不为容纳标注而对整页设置缩小变换。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **TYPE-S01**：当前示例：弹窗标题、分组标题、正文、辅助说明和连续阅读样例按字号、字重、行高、字色核对；输入与次级操作在对应组件页验收。 - [ ] **TYPE-S02**：接入验收：macOS 优先苹方、Windows 通常微软雅黑；缺字或不可用时兼容回退。检查真实渲染字体及中英文数字混排，不以CSS声明存在代替已呈现。 - [ ] **TYPE-S03**：接入验收：正文和标题都使用正文深灰，通过字重表达层级；必要说明不冒充主内容。 - [ ] **TYPE-S04**：宽屏阅读样例：名称列不被强制为55%；名称与说明使用普通文字排版，数值列独立采用等宽数字，三列字号、字重和字色一致。 - [ ] **TYPE-S05**：关联验收：到“筛选设置与折叠边界”“列设置：固定、显隐、顺序”和“导出与列设置同步”专题核对单行与双行选项：名称字号大于说明，复选框与名称首行居中；选中、取消、禁用前后不改变文字尺寸或对齐。本页文字样本不提供这些选项交互。 - [ ] **TYPE-S06**：字体与缩放：规范页、业务列表、输入及弹出层共同遵守系统字体顺序；无需额外安装或下载字体。100%缩放下先核对，放大后内容仍可读；不得因标注使业务内容整体缩小。 ### 专题验收重点 在 macOS 与 Windows 分别核对实际呈现字体及中文、英文、数字混排；正文14px/400/#303133、标题600、次级操作12px/400，先在100%缩放下检查，再检查用户放大。不得通过整页缩小适配标注；跨平台字形差异单独记录。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html

系统中文字体 · 无需安装或下载

macOS 优先使用苹方，Windows 通常使用微软雅黑；所有页面遵守同一套顺序，不按模块另选字体。

跨系统字形和渲染可能不同；以下样例按当前设备的可用字体显示。先在100%缩放下核对，再检查放大阅读。

用途 / 可见样例 字号 字重 行高 字色
弹窗标题 16px 600 24px #303133
表头 / 分组标题 14px 600 21px #303133
正文 Abc 123，金额 2,600.00 14px 400 21px #303133
辅助说明 12px 400 18px #595959

连续阅读样例 · 正文 14px / 400 / #303133

示例名称 数值 说明
示例项目 A 2,600.00 字段和值保持清晰
示例项目 B 128.50 普通正文保留正常字重
示例项目 C 0.00 有效零值正常展示
``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：历史样板规范 1 / 6 / 9 / 35 / 64；DX typography。 - [打开本专题页面](../index.html#spec-type) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`type`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 正文与标题 | 正文使用正文深灰、14px/400；标题使用同一正文深灰和600字重，不靠新的深浅颜色制造层级。 | | 辅助文字 | 必要说明使用辅助深灰；空值“无”使用空值灰；占位和禁用文字使用禁用灰，不能用于有效正文。 | | 操作文字 | 普通次级操作使用操作蓝、12px/400；危险文字操作使用错误红、12px/400。只有真实操作具有交互态。 | 本专题规定文字角色；字体样本本身没有悬停、选中或禁用状态，组件中的文字状态由对应组件定义。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [会员列表 · 会员字段、正文、标题与行内操作的文字层级](../../showcase/index.html#members) · [场景文档](../../showcase/docs/members.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 全局色彩与使用规则 · `semantic` 专题 `semantic` · 基础视觉 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 本专题为基础规则、同一组件的补充场景或组合模式，不作为独立的 Element UI 官方组件声明。 ### 本页用法与分类 默认用法：先按主色、辅助功能色、中性色查公共色板，再按文字、背景、边框和交互状态查使用条件；全后台复用同一套16个基础色值。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 色板归属 | 主色3个、辅助功能色3个、中性色10个 | 用于管理基础色值；不同组件按用途复用，不各自新增色板。 | | 文字角色 | 正文、说明、操作、状态、空值、占位与禁用 | 正文与有效零值用正文深灰，只读不变淡；操作和反馈按真实语义取色。 | | 背景与边框 | 内容底、工作区、表头、悬停、选中、控件边框 | 按容器用途和真实状态使用已有色值；选中浅蓝不作为斑马纹。 | | 叠加优先级 | 禁用、错误与聚焦、选中与悬停 | 禁用阻断交互；错误边框优先于聚焦蓝；选中底优先于悬停底。 | 使用边界：文字颜色统一在本页维护；字号与字体见“字体、字号、字重与行高”。状态变化不是主色与辅助色的任意切换，规范页装饰也不是业务可选主题。 ### 组件规则 - **SEMANTIC-R01**：全局颜色统一在本页维护：主色系3个、辅助功能色3个、中性色10个，共16个基础色值。文字、背景、边框和反馈按用途复用，不为不同组件新增近似色；遮罩35%与阴影12%从外壳深色派生。 - **SEMANTIC-R02**：状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **SEMANTIC-R03**：蓝色表示可交互或当前选择，不是所有“启用”文字都必须变蓝。功能反馈必须同时有文案；无需强调的状态保持正文色。 - **SEMANTIC-R04**：详细数值、归属、迁移映射见本专题色板表。 - **SEMANTIC-R05**：主要内容及标题 正文深灰 #303133；必要说明 辅助深灰 #595959；空值“无” 空值灰 #909399；占位/禁用 禁用灰 #C0C4CC。 - **SEMANTIC-R06**：普通链接统一 操作蓝 #3377BB；删除/移除危险文字用 #F56C6C；正文链接14px/400；次级操作12px/400。金额、账号不额外加粗；有效零值不得变成空值灰。 - **SEMANTIC-R07**：不用透明度、灰蓝色或浅灰来弱化正文。字段错误提示使用 错误红；普通说明用 辅助深灰，详细错误原因可用 正文深灰，保留错误文案及功能图标。 - **SEMANTIC-R08**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **SEMANTIC-R09**：【默认】正文 正文深灰；标题 正文深灰 + 600；说明 辅助深灰；次级操作 操作蓝 + 12px/400。 - **SEMANTIC-R10**：【交互】主要控件默认使用主题蓝；表格行和候选项悬停使用浅灰背景，持续选中使用各组件规定的选中样式。主按钮悬停使用操作蓝，普通按钮悬停使用选中浅蓝底、操作蓝文字和主题蓝边框，文字动作悬停加下划线。输入类聚焦只改原边框为主题蓝；其他可交互控件按各专题保留键盘焦点提示。 - **SEMANTIC-R11**：【边界】非交互说明没有悬停、按下或选中状态；不可因鼠标经过而变蓝。 - **SEMANTIC-R12**：【组件边界】仅使用实际存在的组件状态；没有操作能力的内容不添加悬停、选中或禁用变色。 - **SEMANTIC-R13**：输入及选择触发框统一单层矩形：默认 白色 底、正文深灰 14px/400 字、禁用灰 占位、边框灰 边框；聚焦仅原边框 主题蓝，错误 错误红。鼠标点击与键盘进入均不新增外框或阴影。范围日期仅外层容器变边框，内部两个输入不重复画框。 - **SEMANTIC-R14**：示例与文档不一致时属于待修复缺陷；禁止以“说明已更新”代表所有页面已迁移。每次改动需同时检查规则、实际计算样式、鼠标与键盘、下拉弹层以及复制下载文档。 - **SEMANTIC-R15**：输入类反馈成组同步：普通聚焦仅原边框改为主题蓝，普通说明保持辅助深灰；校验失败时边框与就近错误短提示使用错误红，若配置错误图标也同步使用错误红。错误清除时相关视觉与 aria-invalid 一起恢复；不能仅因聚焦就报错，禁用后不触发新校验。当前基础示例不强制增加错误图标，错误含义必须有文字表达。 - **SEMANTIC-R16**：危险文字操作单独规定样式与交互：用于表单右侧删除、移除待上传附件、列表行删除等。默认红字 #F56C6C、12px/400，无底色、无边框、无水平内边距；点击区域至少24px高。悬停和按下保持同一红色并加下划线，键盘进入时显示红色焦点提示。禁用用 #C0C4CC 且不可执行；处理中显示原位进度并阻止重复点击。 - **SEMANTIC-R17**：删除、移除统一先打开居中确认弹窗，明确对象、数量和后果；确认按钮统一写“确认”，取消不改变数据。未保存项、待上传附件、已保存记录和批量删除都沿用这一入口规则；失败保留原内容和重试入口。普通清空输入、取消筛选或关闭弹层不是删除，不自动标红。 - **SEMANTIC-R18**：主题蓝、操作蓝、选中浅蓝都属于同一个主色系，分别服务于主要控件、链接/悬停和选中背景；它们不是成功绿、警告橙、错误红这组辅助功能色。交互状态不等于颜色分类，按钮按下也不等于持续选中。 - **SEMANTIC-R19**：主按钮状态固定为：默认主题蓝 #409EFF；悬停操作蓝 #3377BB；鼠标按住时恢复主题蓝 #409EFF，并下移1px；松开后若仍悬停则回到操作蓝，移出回到默认。仅键盘定位时保留当前填充并显示操作蓝2px外圈，普通鼠标点击不显示外圈；加载保持主题蓝并防重复，禁用用浅灰底和禁用灰文字。 - **SEMANTIC-R20**：提醒角标复用 #F56C6C 与白字，不新增红色色阶；红点表示新动态，数字角标表示未读数量，不能据此判断业务失败。具体尺寸、定位、计数与清除规则只在“标签与角标”专题（#spec-tags）维护。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **SEMANTIC-S01**：默认 / 悬停 / 激活 / 聚焦 / 选中浅蓝 / 禁用灰 - [ ] **SEMANTIC-S02**：品牌色与语义色映射 / 文案冗余 / 实际背景对比度 / 升级色值回归 - [ ] **SEMANTIC-S03**：核对本专题每个适用状态引用公共色值；禁用/错误+聚焦/选中+悬停组合按优先级检查。 - [ ] **SEMANTIC-S04**：核对正文14/400、次级操作12/400、标题600及同色深正文；检查实际弹出层和子 span，不能只检查父元素。 - [ ] **SEMANTIC-S05**：验证完整反馈组合：默认→聚焦→失败→再次聚焦→有效纠正→恢复；检查边框、提示、图标和 aria-invalid 一起变化。 - [ ] **SEMANTIC-S06**：核对红色文字删除：无框无底、12px/400、悬停、键盘、禁用、处理中；子文字不能被普通蓝链接样式覆盖。 - [ ] **SEMANTIC-S07**：未保存字段、待上传附件和已保存记录都先验证居中确认与取消保留；确认后再验证删除结果、可用的撤销及失败重试。入口颜色不代替确认流程。 - [ ] **SEMANTIC-S08**：当前示例核对文字角色表的色值与用途；有效零值到字体阅读样例核对，只读、占位与禁用到输入框专题核对，不能把角色表说明当作这些状态的交互实例。 - [ ] **SEMANTIC-S09**：接入验收：在实际背景上核对文字可读性，不通过透明度弱化正文。 - [ ] **SEMANTIC-S10**：接入验收：普通链接与危险文字动作保留各自语义色；错误红配明确错误文案，状态不只靠颜色。 ### 专题验收重点 同时核对色板归属与使用角色：正文、有效零值、只读值不变淡；占位、禁用、空值分开；状态色配文案。对比度按实际背景检查。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html

先控制数量，再统一使用

颜色仅从公共色值引用：主色系3个基础色值、辅助功能色3个、中性色10个，共16个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停或不同字段再新增近似颜色。遮罩35%与阴影12%从外壳深色派生。

“主色 / 辅助色 / 中性色”是色板归属；“文字 / 背景 / 边框 / 交互 / 反馈”是用途。它们是两个维度，不是每个组件各自再建一套主辅色。

色板归属 公共色值 / 色值 使用条件
主色 --ui-primary
#409EFF 		主按钮默认/按住/加载、勾选、开关开启、焦点边框
主色 --ui-action
#3377BB 		文字链接、次级操作、主按钮悬停及键盘焦点；与主题蓝同属主色系
主色 --ui-selected
#ECF5FF 		选中行、已选菜单底、日期范围；不是斑马纹
辅助色／功能反馈 --ui-success
#67C23A 		成功图标、完成进度、已完成标识
辅助色／功能反馈 --ui-warning
#E6A23C 		警告图标、需注意标识；不用于普通待处理
辅助色／功能反馈 --ui-danger
#F56C6C 		错误边框、错误提示、必填符号、失败图标、无框红字删除与危险按钮边框
中性色 --ui-body
#303133 		正文、字段名、数值、标题；层级用字号字重
中性色 --ui-help
#595959 		必须阅读的辅助说明、计数、说明性图标
中性色 --ui-muted
#909399 		无、非关键空值、非交互装饰图标；不用于正文
中性色 --ui-disabled
#C0C4CC 		禁用文字、占位符、不可用图标、未选评分
中性色 --ui-white
#FFFFFF 		内容、输入、弹层底；填充按钮的反白文字
中性色 --ui-workspace
#F1F3F6 		页面内容外的工作区背景
中性色 --ui-subtle
#F5F7FA 		表头、悬停底、禁用底；同色不同角色
中性色 --ui-border
#DCDFE6 		输入、按钮、卡片边框及骨架占位；悬停边框也复用，不新增灰
中性色 --ui-divider
#EBEEF5 		表格分隔、选项分隔、步骤未完成连线；骨架轻微动效的亮部
中性色／外壳专用 --ui-shell
#00162A 		深色侧栏；组件内容区不引用

文字颜色与使用边界

以下按阅读角色选择颜色。不可用透明度、额外加粗或整页缩放改变正文轻重；普通文字不因鼠标经过而变蓝。

文字角色 统一颜色 使用边界
正文、字段名、数值、标题与只读值 #303133 有效零值保持正文色；标题靠字号和字重表达层级。
辅助说明、计数 #595959 次要解释使用辅助深灰；承载主要结论的内容仍使用正文色。
空值“无” #909399 仅表示没有内容，不能把0或只读值显示成空值灰。
占位提示与禁用文字 #C0C4CC 占位不是已填值；禁用表示当前不可操作，只读不使用禁用灰。
普通链接与次级操作 #3377BB 正文中的链接14px；查看更多、编辑、详情等次级操作12px，字重均为400。
危险文字与错误短提示 #F56C6C 删除、移除使用12px红字；错误必须配明确文案，详细解释仍用正文色。
成功短状态 #67C23A 仅用于真实成功或完成的短状态与图标；长说明使用正文色。
警告短状态 #E6A23C 有明确风险或需注意事项时使用；普通待处理不自动使用警告色。
填充按钮内文字 #FFFFFF 只用于规定的有色填充背景；不在白底内容区使用。

字体、字号、字重和行高统一查看 字体规范；输入框、按钮和标签的具体交互查看各自专题。

状态不是另一套色板

状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。

现有原型的收敛映射

当前散落值 统一引用 适用范围
#1990FF / #1592F4 / #409EFF 主题蓝 主题填充与选中标识
#1677D2 / #245DCC / #3377BB / #3A8EE6 操作蓝 文字交互与主按钮悬停
#1F2329 / #303133 正文深灰 标题与正文，字重分层
#606266 / #616266 正文深灰 或 辅助深灰 按内容角色迁移，不能全局替换
#FAFAFA / #F5F7FA 浅灰背景 表头与轻背景
#DFE3E8 / #DCDFE6 边框灰 控件边框
#C0C4CD / #C0C4CC 禁用灰 占位与禁用

此表是新公共规则及迁移目标；业务原型尚有历史值，不能据此宣称所有业务页已完成迁移。红色标注圆点属于评审工具，不进入产品色板；品牌素材、图表系列及深色主题需要单独明确需求，不能借机新增通用色。

对比度边界

功能色用于图标、边框、进度以及明确的短状态反馈。字段错误提示及短状态文案使用对应功能色，较长解释使用 正文深灰；同时写明“失败 / 成功”等文案。下面按白底计算文字对比度；白字主按钮仍有已知对比度限制，不将当前样板称为完整无障碍认证。

``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：历史样板规范 10 / 43–46 / 76；W3C Contrast Minimum；原“文字颜色与使用边界”专题已合并，旧入口转至本页。 - [打开本专题页面](../index.html#spec-semantic) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`semantic`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 默认 | 正文 正文深灰；标题 正文深灰 + 600；说明 辅助深灰；次级操作 操作蓝 + 12px/400。 | | 交互 | 主要控件默认使用主题蓝；表格行和候选项悬停使用浅灰背景，持续选中使用各组件规定的选中样式。主按钮悬停使用操作蓝，普通按钮悬停使用选中浅蓝底、操作蓝文字和主题蓝边框，文字动作悬停加下划线。输入类聚焦只改原边框为主题蓝；其他可交互控件按各专题保留键盘焦点提示。 | | 边界 | 非交互说明没有悬停、按下或选中状态；不可因鼠标经过而变蓝。 | | 危险文字操作 | 查看、编辑、查看更多使用操作蓝；删除、移除使用危险红。字号同为12px/400，颜色表达动作类型，不通过加粗或更大字号表达危险。 | | 主按钮状态顺序 | 主按钮状态固定为：默认主题蓝 #409EFF；悬停操作蓝 #3377BB；鼠标按住时恢复主题蓝 #409EFF，并下移1px；松开后若仍悬停则回到操作蓝，移出回到默认。仅键盘定位时保留当前填充并显示操作蓝2px外圈，普通鼠标点击不显示外圈；加载保持主题蓝并防重复，禁用用浅灰底和禁用灰文字。 | | 有效内容 | 正文、字段值和标题使用正文深灰；必要说明使用辅助深灰，零值不变成空值灰。 | | 空值与不可用 | 空值提示使用空值灰；占位和禁用使用禁用灰；只读仍使用正文深灰，不能用禁用灰代替。 | | 普通与危险操作 | 普通操作使用操作蓝，删除/移除等危险操作使用错误红；次级操作统一12px/400，悬停加下划线且保留原语义色。 | | 状态提示 | 真实成功、警告和失败的图标或独立短状态标识分别使用成功绿、警告橙和错误红，并保留明确文案；详细说明使用正文深灰。 | 仅使用实际存在的组件状态；没有操作能力的内容不添加悬停、选中或禁用变色。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [会员列表 · 会员正文、操作蓝、禁用文字及选中行用色](../../showcase/index.html#members) · [场景文档](../../showcase/docs/members.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 尺寸、间距、圆角与边框 · `spacing` 专题 `spacing` · 基础视觉 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 本专题为基础规则、同一组件的补充场景或组合模式，不作为独立的 Element UI 官方组件声明。 本页模板直接使用的 Element UI 标签：`el-button`、`el-input`。 ### 本页用法与分类 默认用法：常规适用控件默认32px；间距按内容关系选档，圆角按组件类型固定，输入族保持0px直角。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 尺寸 | 28/32/36/40px控件高度 | 32px为默认；28px限紧凑容器，36/40px用于有明确较大操作区需求的场景，同组保持一致。 | | 间距 | 4/8/12/16/24/32px与按钮间10px | 按同行、说明、同组、分区关系采用；不把间距值当成控件高度。 | | 组件形状 | 输入0px、按钮4px、对话框2px等 | 跟随组件约定；悬停、聚焦或选中时不换圆角。 | | 状态边框 | 默认、聚焦、错误 | 由操作和校验触发，只改规定的颜色；边框宽度保持1px。 | 使用边界：这些数值不是一组选项供每个控件随意搭配；已明确的业务34px筛选容器等例外继续按原合同。 ### 组件规则 - **SPACING-R01**：本规范的px均指CSS像素，用于网页布局；浏览器缩放、设备像素比和截图缩放会改变看到的大小。验收使用浏览器计算尺寸，不直接从缩放截图量像素。 - **SPACING-R02**：尺寸口径与输入宽度统一参考“输入框：宽度、只读与禁用”的宽度规则：区分字段整项和控件边框，按容器布局分配宽度；本专题不另建一套输入宽度档位。 - **SPACING-R03**：以4px为间距基础，常用4/8/12/16/24/32px。推荐分别用于紧密同行、附属提示、紧凑内容、同组内距、内容分区和较大分区；同类关系保持同档，已有组件内部尺寸按各自合同。 - **SPACING-R04**：分开的相邻按钮保留10px间距，不额外叠加margin与gap。连接成一体的按钮组按拼接规则处理，不套10px空隙。 - **SPACING-R05**：控件高度提供28/32/36/40px四档，含上下边框；本库常规默认32px，28px只用于明确的紧凑容器，同组不混高。示例以显式高度展示四档，正文保持14px/400，不通过缩字达到小尺寸。 - **SPACING-R06**：输入族统一0px直角；普通矩形按钮四档统一4px，圆形按钮和连接按钮组拼接处单独定义。当前对话框2px，确认框/下拉/日期面板/气泡/文字提示/内容卡片4px，贴边抽屉0px；文档装饰卡片不作为产品面板标准。 - **SPACING-R07**：基础边框1px #DCDFE6；输入聚焦1px #409EFF，错误1px #F56C6C并同步错误提示；内部细分隔1px #EBEEF5。状态变化不改变边框宽度、内距或控件尺寸。 - **SPACING-R08**：控件高度固定；输入宽度按输入框专题区分整项、边框与可用空间。窄容器先换行，长内容自然增高，不压缩字体、图标和点击区域。输入焦点只改自身边框；按钮和链接保留键盘焦点轮廓。 - **SPACING-R09**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **SPACING-R10**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **SPACING-R11**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **SPACING-R12**：输入族统一直角 0px：普通输入、密码、文本域、自动补全、单选/多选触发框、级联、日期/时间与范围、数字输入及前后缀组合输入；默认/聚焦/错误/只读/禁用均不改变圆角。组合输入外侧和拼接处均不保留小圆角，弹出面板的圆角由面板规范独立定义。 - **SPACING-R13**：【容器与分隔】内容白底，边框使用边框灰，内部细分隔使用分隔灰；不同间距等级不增加不同底色。 - **SPACING-R14**：【输入族几何】输入及组合输入统一直角，默认/聚焦/错误/禁用都不改变圆角；聚焦只变原边框主题蓝，不增加外圈。 - **SPACING-R15**：【状态尺寸稳定】边框宽度和控件内距保持稳定，选中或错误不挤动内容；按钮按住下移1px仅按按钮专题执行。 - **SPACING-R16**：【组件边界】本专题是尺寸与几何约束；间距、圆角样本没有选中或加载状态，不将通用选择矩阵套给它。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **SPACING-S01**：当前间距样例：六档浅蓝测量区宽度准确；相邻按钮外框间为10px，不因margin叠加变成20px。 - [ ] **SPACING-S02**：当前高度样例：实际按钮计算高度为28/32/36/40px，文字14px/400；点击只显示本地尺寸提示。 - [ ] **SPACING-S03**：当前圆角样例：输入与组合拼接处0px；普通矩形按钮含28px/32px均4px；面板按2px/4px/0px类型分别核对。 - [ ] **SPACING-S04**：当前边框样例：默认、聚焦、错误均1px；静态错误红边与红字一致，分隔线使用独立分隔灰。 - [ ] **SPACING-S05**：接入验收：输入默认/聚焦/错误/只读/禁用不改圆角；按钮保留键盘焦点且状态不改变宽高。 - [ ] **SPACING-S06**：窄容器与160%/200%缩放：卡片先换行，无页面级横向溢出；CSS尺寸不按截图像素直接推算。 - [ ] **SPACING-S07**：宽度联动验收：按输入框专题核对整项与边框口径、同组对齐、长内容、窄容器换行及状态不跳宽。 ### 专题验收重点 用浏览器计算尺寸核对4/8/12/16/24/32px示意、按钮10px间距、四档28/32/36/40px高度与对应圆角；输入可聚焦且只有原边框。检查窄容器和160%/200%缩放可读取、可操作，静态边框图不当作交互通过证据。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html

先看懂px：这里说的是页面尺寸

左侧方块是16 × 16 CSS px。

CSS px是网页排版单位。浏览器缩放或截图缩放会改变看到的大小，不能直接用截图像素反推组件尺寸。

常用间距：按关系远近选择

每组浅蓝色部分就是标注的间距；两边灰块只表示相邻内容。

4px

同行紧密元素

8px

主内容与附属提示

12px

紧凑内容之间

16px

同组内容内距

24px

相邻内容分区

32px

较大分区之间

同类关系使用同一档；这是新组合的推荐间距，不强行改变已有组件内部明确的尺寸。

按钮组例外：间距10px
操作一 操作二

两个按钮外框之间为10px。连接为一体的按钮组另按拼接规则，不重复叠加间距。

四档控件高度：默认使用32px

28px · 紧凑
试用 28px

仅用于明确的紧凑容器

32px · 常规
试用 32px

本库默认，常规后台操作

36px · 中等
试用 36px

需要稍大操作区域时

40px · 标准
试用 40px

空间充足的独立操作区

高度包含上下边框，字体保持14px/400。这些按钮只显示尺寸提示；实际同一按钮组不混用四种高度，窄屏先换行。

圆角：按组件形状分别约定

可输入。聚焦只改自身边框，不会增加第二层外框。

普通矩形按钮：4px 按钮圆角示例

四档高度统一。圆形按钮、连接按钮组的拼接处单独定义。

对话框 · 2px

当前对话框外形，静态圆角示意。

常用浮层与卡片 · 4px

确认框、下拉、日期面板、气泡、文字提示和内容卡片。

抽屉 · 0px

贴边容器，静态圆角示意。

这里记录产品组件实际外形。规范页装饰卡片不作为产品面板标准，不能统一写成“面板6px”。

边框：宽度不变，用颜色表达状态

以下是静态边框示意；可操作聚焦效果见上方输入框，完整校验见“错误说明、必填与输入校验”。

默认 · 1px边框灰
请输入内容

#DCDFE6，白底，0px圆角。

聚焦 · 1px主题蓝
请输入内容

#409EFF，不加粗，不叠加外圈。

错误 · 1px错误红
请输入内容

请输入内容

内部内容分隔：1px #EBEEF5

上方细线只分隔内容。错误边框和错误提示一起变化；不增减边框宽度，避免内容跳动。按钮和链接的键盘焦点轮廓继续保留。

``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：本地vendor/element-ui-2.15.6.css、components.css、input-contract.css、button-contract.css及geometry-patterns.css；产品面板实际圆角与文档装饰容器分别记录。。 - [打开本专题页面](../index.html#spec-spacing) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`spacing`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 容器与分隔 | 内容白底，边框使用边框灰，内部细分隔使用分隔灰；不同间距等级不增加不同底色。 | | 输入族几何 | 输入及组合输入统一直角，默认/聚焦/错误/禁用都不改变圆角；聚焦只变原边框主题蓝，不增加外圈。 | | 状态尺寸稳定 | 边框宽度和控件内距保持稳定，选中或错误不挤动内容；按钮按住下移1px仅按按钮专题执行。 | 本专题是尺寸与几何约束；间距、圆角样本没有选中或加载状态，不将通用选择矩阵套给它。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [会员列表 · 筛选控件、表格与详情的尺寸间距](../../showcase/index.html#members) · [场景文档](../../showcase/docs/members.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 图标、命中热区与焦点 · `icons` 专题 `icons` · 基础视觉 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`icon`。 ### 本页用法与分类 默认用法：先按中文动作查目录并复用已采用图形；同一动作在不同页面使用同一图标。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 动作含义 | 复制、列设置、导出、关闭、通知等 | 按动作选择固定图形；不同动作的图形不能当作同义外观互换。 | | 图形与热区 | 图形尺寸和可点击区域 | 分别按目录规定；扩大热区不等于放大图标。 | | 使用范围 | 中控已引用、公共示例、组件附属图形 | 目录记录来源和用途，不代表每个业务页面都要添加这些入口。 | | 交互状态 | 禁用、聚焦与复制结果 | 按实际操作或资源状态出现；静态图形目录不自动具备对应业务能力。 | 使用边界：账户概览不添加显隐眼睛；头像形状、尺寸与失败回退按头像专题分别理解。 ### 组件规则 - **ICONS-R01**：先按中文动作查目录，再复用同一图形。本目录盘点当前中控和公共组件源码中明确引用的43个 Element 图标、8类业务原有 SVG，另列21个组件附属图形；源码引用不等于每个路由同时显示，不把整个图标字库视为项目已采用。 - **ICONS-R02**：业务原有 SVG 必须复用原路径、viewBox 和描边，不重新画近似图。列设置固定三横线，复制固定双纸，系统通知固定铃铛；通用齿轮不替代列设置，图片旋转不替代列表刷新。字体图标仅使用当前 Element UI 2.15.6 字库，不新增图标字体、emoji 或随意字符。 - **ICONS-R03**：图形尺寸与点击热区分别标注，px 表示页面中的 CSS 像素。常规图形16px；复制15px、热区至少24×24px；普通独立图标操作热区32×32px；关闭容器热区36×36px。现有顶栏通知为20px图形、40×40px入口；原有拖动手柄16×20px、安全锁24px、结果图48px在目录单独说明。 - **ICONS-R04**：图形在热区中居中，不以放大字符代替扩大热区。无文字操作必须有明确中文可访问名称，悬停/键盘聚焦时提供同义说明；装饰图标隐藏重复朗读，不进入Tab顺序。禁止只写“图标”“按钮”或用图形代替对象名称。 - **ICONS-R05**：仅键盘定位独立按钮时保留2px操作蓝焦点外圈和2px间隔；普通鼠标点击不增加外圈。危险动作沿用危险语义焦点；输入控件内部的清空、日期等附属图形服从所属输入组件，不额外给整个输入框增加外圈。禁用操作必须同时阻断鼠标和键盘。 - **ICONS-R06**：图标颜色跟随用途：静态说明、顶栏和工具栏普通图形使用正文或辅助深灰；链接式图标操作使用操作蓝；成功、警告、失败图标使用对应功能色并配文案。铃铛图形与命中热区在本页维护；小红点、数字角标及已读清除统一见“标签与角标”专题（#spec-tags），不因未读而把铃铛和正文染红。 - **ICONS-R07**：导出、下载、下载记录是不同动作，即使复用同一下箭头图形也必须分别命名。目录标注的“旧入口待统一”仅是迁移方向：本次没有替换业务入口。新增操作用普通加号，圆圈加号保留目录/指标用途；确认提交用文字，成功勾号只属于结果反馈。 - **ICONS-R08**：用户图标与头像分工不同：用户图标表示用户相关入口，头像承载某位用户的身份。完整头像尺寸、图片/文字及缺图回退只在头像专题（#spec-avatar）维护，不在图标页再做一套示例。当前顶栏为操作员姓名与下拉箭头；会员列表账户概览不因存在显隐组件而添加小眼睛。 - **ICONS-R09**：图标代码、中文用途、采用状态、源文件及迁移映射统一维护在 icon-catalog.json；渲染脚本由该数据生成。页面、复制规范与下载文档同时更新，新增业务图标必须登记用途和复用边界。 - **ICONS-R10**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **ICONS-R11**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **ICONS-R12**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **ICONS-R13**：【普通与装饰】静态说明、顶栏及列表工具普通图形使用正文深灰或辅助深灰；导航图标跟随导航状态。纯装饰没有单独悬停或键盘焦点。 - **ICONS-R14**：【可点击图标】链接式动作使用操作蓝；其他工具图标悬停时沿用宿主工具规则。危险动作保持错误红；仅键盘定位时显示可见焦点，不以图标颜色代替中文名称。 - **ICONS-R15**：【禁用】不可执行的动作图标使用禁用灰并阻断鼠标与键盘；静态只读图形不自动变灰。 - **ICONS-R16**：【反馈与未读】成功/警告/失败图形分别使用成功绿/警告橙/错误红并配文字；加载图标用主题蓝。未读数量独立使用提醒徽标，不改变通知入口的动作语义。 - **ICONS-R17**：【组件边界】目录图形用于查阅，不是假操作入口；仅复制示例实际复制虚构账号；头像失败回退由头像专题独立演示。目录区分中控已引用、公共组件示例和组件内置图形，旧入口待统一项不宣称已经迁移。 - **ICONS-R18**：多行提示的状态图标对齐第一行文字，不按整段文字垂直居中。确认框正文行高24px，图标24px；普通消息和区域提示沿用21px正文行高，图标居中于第一行。文字自然换行，图标和正文保留稳定间距。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **ICONS-S01**：按中文名称、用途和分类检索；清空筛选恢复完整目录；区分中控已引用、公共组件示例、组件内置三种范围。 - [ ] **ICONS-S02**：复制、列设置、导出、下载记录、刷新、关闭、拖动手柄与系统通知分别核对原图形，禁止用近似图替代。 - [ ] **ICONS-S03**：15px复制图形与24px热区、16px常规图形与32px热区、36px关闭热区分别验收，键盘焦点与鼠标点击分开检查。 - [ ] **ICONS-S04**：复制虚构账号 anxin123456 有结果反馈；禁用图标不触发复制。通知外观示例不发送或读取真实通知。 - [ ] **ICONS-S05**：用户图标仅作为通用用户入口图形；头像尺寸、文字与图片失败回退到头像专题验收，不重复维护一套示例。当前顶栏不新增头像，会员账户概览不增加显隐按钮。 - [ ] **ICONS-S06**：旧下载/刷新入口的迁移状态明确；仅目录登记不等于业务替换完成。 - [ ] **ICONS-S07**：导出与复制文档须包含图标中文用途、尺寸、热区、来源和代码映射，不能只输出自定义组件标签。 - [ ] **ICONS-S08**：用一行、两行和更长说明检查状态图标：与第一行文字对齐，段落增高后图标不下沉；同时复核字号、行高和图标间距。 ### 专题验收重点 中文搜索和分类能定位复制、列设置、导出/下载、关闭与通知；核对业务SVG原路径、图形尺寸与热区。复制示例可用且禁用态不触发；用户图标与头像用途区分，头像专题链接有效；页面目录与复制/下载文档包含相同映射。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html ``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：2026-09-15当前中控与公共组件源码盘点；图形与来源详见 icon-catalog.json，完整文档附录 icon-catalog.md。。 - [打开本专题页面](../index.html#spec-icons) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`icons`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) 自定义示例 `icon-catalog` 的实现：[icon-catalog.js](../icon-catalog.js)。 ### 公共图标目录 盘点当前中控入口和公共规范直接引用的模板、配置及组件附属图形。源码引用不等于每个路由同时显示；排除完整字库、历史冻结页面、图表和品牌图片。 ### 使用原则 - 先按动作查映射，再复用同一图形；不因个人习惯选另一种近似图标。 - 图形尺寸与点击热区分别约束。图标不能替代按钮名称，纯装饰不进入键盘焦点。 - 当前业务 SVG 原路径保留；未完成的旧入口迁移明确列出。 ### 操作映射 | 动作 | 统一映射 | 使用边界 | 状态 | |---|---|---|---| |复制账号、编号、文档|el-icon-document-copy|同一复制动作统一双纸图形；15px图形，至少24px独立热区。|沿用现有| |列设置|project-layout-horizontal|统一原有三横线 SVG；通用齿轮仅用于通用设置，不替代列设置。|沿用现有| |导出、下载文件、下载记录|project-download|业务列表与顶栏沿用原有下载 SVG；名称分别写导出、下载、下载记录。旧的 Element 下载入口按模块迁移，不能宣称已完成。|旧入口待统一| |列表刷新、失败后重试|project-refresh|同一列表采用相同刷新图形；重试使用“重试”名称。图片旋转不使用这一操作映射。|旧入口待统一| |关闭容器|el-icon-close / project-close|保留同一叉号语义：Element原生关闭、自定义容器原有SVG；均为36px热区，不替换成删除。|按容器复用| |新增操作|el-icon-plus|按钮内新增用普通加号；圆圈加号仅保留新增账号目录和指标用途。|限定使用边界| |确认、提交|文字动作；结果可用 el-icon-circle-check|确认动作使用清晰文字，不强制添加勾号；成功勾号属于结果反馈，不能提前显示。|动作与结果分开| |系统通知|el-icon-bell|铃铛表示系统通知；站内消息目录用信封。未读数由独立徽标表达。|沿用现有| |用户头像|Element Avatar + el-icon-user-solid 回退|图片、文字和无图占位归头像组件；当前顶栏为操作员姓名，不在此变更成头像按钮。|组件示例| ### 常用操作 | 中文名称 | 用途 | 图形尺寸 | 热区 | 采用状态 | 代码标识 | |---|---|---|---|---|---| |复制|复制编号、账号、文档等|15 × 15 px|至少24 × 24 px|中控已引用|`el-icon-document-copy`| |搜索|关键词输入和搜索入口|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-search`| |添加|添加条目、素材或规则|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-plus`| |编辑|修改当前条目或信息|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-edit`| |关闭|关闭弹窗、面板或标签；不能默认等同删除|16 × 16 px|36 × 36 px（容器关闭）|中控已引用|`el-icon-close`| |关闭|共享设置与导出弹窗关闭，与 Element close 字体图标需统一尺寸和热区。|16 × 16 px|36 × 36 px|中控已引用|`project-close`| |新增项目|新增账号的目录图标、统计指标图标|16 × 16 px|跟随目录/指标容器|中控已引用|`el-icon-circle-plus-outline`| ### 文件与列表工具 | 中文名称 | 用途 | 图形尺寸 | 热区 | 采用状态 | 代码标识 | |---|---|---|---|---|---| |列设置|列设置使用三横线；通用设置用齿轮，二者用途分开。|16 × 16 px|32 × 32 px|中控已引用|`project-layout-horizontal`| |下载／导出|列表导出与顶部下载记录共用下箭头图形，名称必须按动作分别说明。|16 × 16 px|32 × 32 px|中控已引用|`project-download`| |刷新|共享审核列表刷新，配刷新中和禁用状态。|16 × 16 px|32 × 32 px|中控已引用|`project-refresh`| |拖动排序手柄|列和筛选项排序；同步提供键盘上下与跨分组移动规则。|16 × 20 px|32 × 32 px|中控已引用|`project-drag-handle`| |上传|选择或上传文件|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-upload2`| |下载|下载规范、导出结果或文件|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-download`| |刷新／重试|刷新状态或重新拉取数据|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-refresh-right`| |场景文档|打开本页场景说明|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-reading`| |文档|文档、文件和日志入口|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-document`| |设置|公共组件中的通用设置；不能默认取代业务已采用的列设置三横线|16 × 16 px|32 × 32 px（独立操作）|公共组件示例|`el-icon-setting`| ### 展开与方向 | 中文名称 | 用途 | 图形尺寸 | 热区 | 采用状态 | 代码标识 | |---|---|---|---|---|---| |下拉箭头|下拉菜单、更多操作与选项展开|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-arrow-down`| |向上三角|返回顶部入口|16 × 16 px|32 × 32 px（独立操作）|公共组件示例|`el-icon-caret-top`| |向右箭头|下一页、进入下级或向右切换|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-arrow-right`| |向左箭头|上一页、返回上一层或向左切换|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-arrow-left`| |定位目标|定位关联业务对象|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-location-outline`| |展开导航|展开左侧导航|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-s-unfold`| |打开关联页面|跳往关联页面或外部资料|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-top-right`| |收起导航|收起左侧导航|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-s-fold`| |进入箭头|进入关联详情或下一步|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-right`| ### 状态反馈 | 中文名称 | 用途 | 图形尺寸 | 热区 | 采用状态 | 代码标识 | |---|---|---|---|---|---| |圆形确认|校验通过、低风险等已确认结果；并非提交按钮的必配图标|16 × 16 px|静态反馈，无点击热区|中控已引用|`el-icon-circle-check`| |信息说明|帮助说明或信息提示|16 × 16 px|静态反馈，无点击热区|中控已引用|`el-icon-info`| |信息说明|审核状态解释，不表示业务成功或警告。|16 × 16 px|至少24 × 24 px|中控已引用|`project-info-circle-solid`| |加载中|处理中进度，需配合防重复交互|16 × 16 px|静态反馈，无点击热区|公共组件示例|`el-icon-loading`| |校验通过|个人中心校验通过结果；提示明确为尚未连接服务，不能表示密码已修改。|48 × 48 px|静态图形，无点击热区|中控已引用|`project-result-check`| |警告提示|风险或需注意的信息|16 × 16 px|静态反馈，无点击热区|中控已引用|`el-icon-warning-outline`| ### 通知与身份 | 中文名称 | 用途 | 图形尺寸 | 热区 | 采用状态 | 代码标识 | |---|---|---|---|---|---| |系统通知|打开系统通知；未读数量单独显示|20 × 20 px|40 × 40 px（当前顶栏）|中控已引用|`el-icon-bell`| |用户头像占位|用户类入口或头像缺图回退|16 × 16 px|跟随导航或头像容器|中控已引用|`el-icon-user-solid`| |消息说明|会员详情备注旁的说明图形|16 × 16 px|静态说明，无点击热区|中控已引用|`el-icon-chat-line-square`| |用户|会员或用户目录|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-user`| ### 安全与显隐 | 中文名称 | 用途 | 图形尺寸 | 热区 | 采用状态 | 代码标识 | |---|---|---|---|---|---| |安全锁|个人中心密码安全说明图形，装饰用途不添加按钮行为。|24 × 24 px|静态图形，无点击热区|中控已引用|`project-security-lock`| |查看／显隐|显示与隐藏脱敏内容；图形与动作名称须同步|16 × 16 px|32 × 32 px（独立操作）|公共组件示例|`el-icon-view`| |锁定／无权限|禁止访问、权限受限或安全设置|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-lock`| ### 业务目录 | 中文名称 | 用途 | 图形尺寸 | 热区 | 采用状态 | 代码标识 | |---|---|---|---|---|---| |关系连接|关系或代理结构栏目|16 × 16 px|跟随整行导航热区|中控已引用|`el-icon-connection`| |图片素材|广告或图片内容栏目|16 × 16 px|跟随整行导航热区|中控已引用|`el-icon-picture-outline`| |审核文档|审核记录栏目|16 × 16 px|跟随整行导航热区|中控已引用|`el-icon-document-checked`| |数据分析|报表、运营分析目录|16 × 16 px|跟随整行导航热区|中控已引用|`el-icon-data-analysis`| |标签|人群与会员标签|16 × 16 px|跟随整行导航热区|中控已引用|`el-icon-price-tag`| |活动礼品|活动管理或活动类型|16 × 16 px|跟随整行导航热区|中控已引用|`el-icon-present`| |消息|通知管理栏目|16 × 16 px|跟随整行导航热区|中控已引用|`el-icon-message`| |统计概览|运营总览入口|16 × 16 px|跟随整行导航热区|中控已引用|`el-icon-pie-chart`| |资料卡|会员资料与详情栏目|16 × 16 px|跟随整行导航热区|中控已引用|`el-icon-postcard`| |运营设置|运营管理目录|16 × 16 px|跟随整行导航热区|中控已引用|`el-icon-set-up`| |钱包|钱包与取款栏目|16 × 16 px|跟随整行导航热区|中控已引用|`el-icon-wallet`| |银行卡|资金管理、银行卡或存款栏目|16 × 16 px|跟随整行导航热区|中控已引用|`el-icon-bank-card`| ### 组件附属图标 | 中文名称 | 用途 | 图形尺寸 | 热区 | 采用状态 | 代码标识 | |---|---|---|---|---|---| |减少数值|数字输入减小一步；到下限禁用。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-minus`| |勾选确认|选择项或结果勾选标记；普通“确认”按钮仍以文字命名，不强配图标。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-check`| |向前跨组|日期向前年份或分页向前跨页组；名称由所在组件明确。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-d-arrow-left`| |向后跨组|日期向后年份或分页向后跨页组；名称由所在组件明确。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-d-arrow-right`| |向左旋转|图片查看器旋转图片；不能因为图形相近就用来刷新列表。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-refresh-left`| |图片占位|图片组件加载失败的占位图形，不能把它当作上传成功。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-picture`| |失败反馈|反馈组件显示失败原因，不替代就近错误文字。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-error`| |展开树节点|树节点有子项时显示，可展开/折叠；叶子不冒充可展开。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-caret-right`| |已选星级|评分组件中已选择的星形。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-star-on`| |成功反馈|消息、警告条等组件的成功结果，配中文状态文字。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-success`| |收起选项|选择组件中随展开状态旋转的箭头。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-arrow-up`| |放大预览|图片查看器放大当前图片。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-zoom-in`| |日期|日期选择触发框中的日期标识。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-date`| |时间|时间选择触发框中的时间标识。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-time`| |未选星级|评分组件中未选择的星形。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-star-off`| |清空输入|输入、选择控件内清空当前值；不是危险删除。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-circle-close`| |省略页码|分页省略中间页；悬停后跨组箭头按原分页实现变化。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-more`| |移除图片|图片卡片列表的原生移除图标；正文行内删除仍用12px红色文字。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-delete`| |缩小预览|图片查看器缩小当前图片。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-zoom-out`| |警告反馈|反馈组件提示需要注意的信息，不表示操作失败。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-warning`| |适应或铺满预览|图片查看器显示模式切换，名称应随当前动作变化。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-full-screen`| ### 代码与来源 #### 复制（el-icon-document-copy） 只复制对应完整值；与账号跳转热区分离，成功/失败都有反馈。 来源：`source-html/index.html`。 ```html ``` #### 搜索（el-icon-search） 常规图形基准16px；按用途选择热区，不按字形大小缩小点击范围。 来源：`showcase/index.html`、`showcase/shared-components.js`、`showcase/showcase.js`、`source-html/index.html`。 ```html ``` #### 添加（el-icon-plus） 常规图形基准16px；按用途选择热区，不按字形大小缩小点击范围。 来源：`showcase/index.html`、`source-html/index.html`。 ```html ``` #### 编辑（el-icon-edit） 常规图形基准16px；按用途选择热区，不按字形大小缩小点击范围。 来源：`showcase/index.html`。 ```html ``` #### 关闭（el-icon-close） 关闭面板不是删除记录；原生弹层保留 Element 关闭图形。 来源：`showcase/index.html`、`showcase/notification-components.js`、`showcase/shared-components.js`、`source-html/index.html`。 ```html ``` #### 关闭（project-close） 用于自定义设置/导出容器；原生弹层使用 Element close。统一叉号方向和36px关闭热区，不改成删除图标。 来源：`showcase/shared-components.js`。 ```html ``` #### 新增项目（el-icon-circle-plus-outline） 目录用圆圈加号；新增操作按钮统一普通加号，不因动作同名混用两个形状。 来源：`showcase/scenes.js`、`showcase/showcase.js`。 ```html ``` #### 列设置（project-layout-horizontal） 列设置专用三横线，调整列显隐、顺序与固定位置；不是“更多”，也不是导航折叠。 来源：`showcase/deposit-records.js`、`showcase/index.html`、`showcase/shared-components.js`。 ```html ``` #### 下载／导出（project-download） 导出是生成/选择数据，下载是获取已有文件；共用同一图形时必须用不同中文名称区分动作。 来源：`showcase/deposit-records.js`、`showcase/index.html`、`showcase/shared-components.js`。 ```html ``` #### 刷新（project-refresh） 直接复用原 SVG 路径与 viewBox，不重画近似图形。 来源：`showcase/shared-components.js`。 ```html ``` #### 拖动排序手柄（project-drag-handle） 当前手柄为16×20px。可拖动时提供键盘上下移动；不可移动项不能保留误导性拖拽光标。 来源：`showcase/shared-components.js`。 ```html ``` #### 上传（el-icon-upload2） 常规图形基准16px；按用途选择热区，不按字形大小缩小点击范围。 来源：`showcase/index.html`、`source-html/index.html`。 ```html ``` #### 下载（el-icon-download） 现用于文档下载及部分旧导出入口；同一列表的导出/下载统一映射到项目 download SVG，旧入口属于待迁移项。 来源：`source-html/index.html`。 ```html ``` #### 刷新／重试（el-icon-refresh-right） 现用于重试等旧入口；同一列表刷新优先复用项目 refresh SVG，不能随机换用另一种箭头。 来源：`showcase/shared-components.js`。 ```html ``` #### 场景文档（el-icon-reading） 常规图形基准16px；按用途选择热区，不按字形大小缩小点击范围。 来源：`showcase/index.html`。 ```html ``` #### 文档（el-icon-document） 常规图形基准16px；按用途选择热区，不按字形大小缩小点击范围。 来源：`showcase/scenes.js`、`showcase/shared-components.js`。 ```html ``` #### 设置（el-icon-setting） 仅通用设置；列设置用项目已有三横线 SVG，不以齿轮近似代替。 来源：`source-html/index.html`。 ```html ``` #### 下拉箭头（el-icon-arrow-down） 常规图形基准16px；按用途选择热区，不按字形大小缩小点击范围。 来源：`showcase/content-management.js`、`showcase/index.html`、`showcase/site-messages.js`、`source-html/index.html`。 ```html ``` #### 向上三角（el-icon-caret-top） 常规图形基准16px；按用途选择热区，不按字形大小缩小点击范围。 来源：`source-html/index.html`。 ```html ``` #### 向右箭头（el-icon-arrow-right） 常规图形基准16px；按用途选择热区，不按字形大小缩小点击范围。 来源：`showcase/index.html`、`showcase/notification-components.js`、`showcase/shared-components.js`。 ```html ``` #### 向左箭头（el-icon-arrow-left） 常规图形基准16px；按用途选择热区，不按字形大小缩小点击范围。 来源：`showcase/index.html`、`showcase/notification-components.js`、`showcase/shared-components.js`。 ```html ``` #### 定位目标（el-icon-location-outline） 常规图形基准16px；按用途选择热区，不按字形大小缩小点击范围。 来源：`showcase/notification-components.js`。 ```html ``` #### 展开导航（el-icon-s-unfold） 常规图形基准16px；按用途选择热区，不按字形大小缩小点击范围。 来源：`showcase/index.html`。 ```html ``` #### 打开关联页面（el-icon-top-right） 常规图形基准16px；按用途选择热区，不按字形大小缩小点击范围。 来源：`source-html/index.html`。 ```html ``` #### 收起导航（el-icon-s-fold） 常规图形基准16px；按用途选择热区，不按字形大小缩小点击范围。 来源：`showcase/index.html`。 ```html ``` #### 进入箭头（el-icon-right） 常规图形基准16px；按用途选择热区，不按字形大小缩小点击范围。 来源：`showcase/index.html`。 ```html ``` #### 圆形确认（el-icon-circle-check） 配合明确状态文字；反馈图标不能代表操作已经执行。 来源：`showcase/notification-components.js`、`showcase/shared-components.js`。 ```html ``` #### 信息说明（el-icon-info） 配合明确状态文字；反馈图标不能代表操作已经执行。 来源：`showcase/overview.js`、`source-html/index.html`。 ```html ``` #### 信息说明（project-info-circle-solid） 直接复用原 SVG 路径与 viewBox，不重画近似图形。 来源：`showcase/shared-components.js`。 ```html ``` #### 加载中（el-icon-loading） 配合明确状态文字；反馈图标不能代表操作已经执行。 来源：`source-html/button-states.js`、`source-html/danger-actions.js`、`source-html/index.html`。 ```html ``` #### 校验通过（project-result-check） 个人中心现用48px结果图形。只表示当前校验通过，尚未连接服务时不能宣称密码已修改。 来源：`showcase/personal-center.js`。 ```html ``` #### 警告提示（el-icon-warning-outline） 配合明确状态文字；反馈图标不能代表操作已经执行。 来源：`showcase/notification-components.js`、`showcase/shared-components.js`。 ```html ``` #### 系统通知（el-icon-bell） 当前系统通知为20px图形、40px入口；未读徽标独立表达数量，不把铃铛全部染红。 来源：`showcase/notification-components.js`、`showcase/scenes.js`。 ```html ``` #### 用户头像占位（el-icon-user-solid） 用于会员目录或头像无图回退；当前顶栏为姓名加下拉箭头，未添加头像按钮。 来源：`showcase/showcase.js`、`source-html/index.html`。 ```html ``` #### 消息说明（el-icon-chat-line-square） 图形辅助识别备注，不自动新增消息或通知入口。 来源：`showcase/index.html`。 ```html ``` #### 用户（el-icon-user） 常规图形基准16px；按用途选择热区，不按字形大小缩小点击范围。 来源：`showcase/scenes.js`、`showcase/showcase.js`。 ```html ``` #### 安全锁（project-security-lock） 直接复用原 SVG 路径与 viewBox，不重画近似图形。 来源：`showcase/personal-center.js`。 ```html ``` #### 查看／显隐（el-icon-view） 仅在业务明确授权的显隐组件中使用；不能直接添加到会员列表账户概览标题。 来源：`source-html/reference-patterns.js`。 ```html ``` #### 锁定／无权限（el-icon-lock） 常规图形基准16px；按用途选择热区，不按字形大小缩小点击范围。 来源：`showcase/notification-components.js`、`source-html/reference-patterns.js`。 ```html ``` #### 关系连接（el-icon-connection） 用于目录辨识，跟随导航状态；不是独立操作按钮。 来源：`showcase/scenes.js`。 ```html ``` #### 图片素材（el-icon-picture-outline） 用于目录辨识，跟随导航状态；不是独立操作按钮。 来源：`showcase/scenes.js`。 ```html ``` #### 审核文档（el-icon-document-checked） 用于目录辨识，跟随导航状态；不是独立操作按钮。 来源：`showcase/scenes.js`。 ```html ``` #### 数据分析（el-icon-data-analysis） 用于目录辨识，跟随导航状态；不是独立操作按钮。 来源：`showcase/scenes.js`、`showcase/showcase.js`。 ```html ``` #### 标签（el-icon-price-tag） 用于目录辨识，跟随导航状态；不是独立操作按钮。 来源：`showcase/scenes.js`。 ```html ``` #### 活动礼品（el-icon-present） 用于目录辨识，跟随导航状态；不是独立操作按钮。 来源：`showcase/scenes.js`、`showcase/showcase.js`。 ```html ``` #### 消息（el-icon-message） 用于目录辨识，跟随导航状态；不是独立操作按钮。 来源：`showcase/scenes.js`。 ```html ``` #### 统计概览（el-icon-pie-chart） 用于目录辨识，跟随导航状态；不是独立操作按钮。 来源：`showcase/scenes.js`、`showcase/showcase.js`。 ```html ``` #### 资料卡（el-icon-postcard） 用于目录辨识，跟随导航状态；不是独立操作按钮。 来源：`showcase/scenes.js`。 ```html ``` #### 运营设置（el-icon-set-up） 用于目录辨识，跟随导航状态；不是独立操作按钮。 来源：`showcase/showcase.js`。 ```html ``` #### 钱包（el-icon-wallet） 用于目录辨识，跟随导航状态；不是独立操作按钮。 来源：`showcase/scenes.js`、`showcase/showcase.js`。 ```html ``` #### 银行卡（el-icon-bank-card） 用于目录辨识，跟随导航状态；不是独立操作按钮。 来源：`showcase/scenes.js`、`showcase/showcase.js`。 ```html ``` #### 减少数值（el-icon-minus） 属于数字输入的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。 来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。 ```html ``` #### 勾选确认（el-icon-check） 属于选择与反馈的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。 来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。 ```html ``` #### 向前跨组（el-icon-d-arrow-left） 属于日期与分页的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。 来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。 ```html ``` #### 向后跨组（el-icon-d-arrow-right） 属于日期与分页的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。 来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。 ```html ``` #### 向左旋转（el-icon-refresh-left） 属于图片预览的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。 来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。 ```html ``` #### 图片占位（el-icon-picture） 属于图片组件的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。 来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。 ```html ``` #### 失败反馈（el-icon-error） 属于反馈组件的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。 来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。 ```html ``` #### 展开树节点（el-icon-caret-right） 属于树与级联的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。 来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。 ```html ``` #### 已选星级（el-icon-star-on） 属于评分组件的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。 来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。 ```html ``` #### 成功反馈（el-icon-success） 属于反馈组件的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。 来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。 ```html ``` #### 收起选项（el-icon-arrow-up） 属于选择组件的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。 来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。 ```html ``` #### 放大预览（el-icon-zoom-in） 属于图片预览的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。 来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。 ```html ``` #### 日期（el-icon-date） 属于日期选择的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。 来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。 ```html ``` #### 时间（el-icon-time） 属于时间选择的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。 来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。 ```html ``` #### 未选星级（el-icon-star-off） 属于评分组件的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。 来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。 ```html ``` #### 清空输入（el-icon-circle-close） 属于输入控件的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。 来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。 ```html ``` #### 省略页码（el-icon-more） 属于分页的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。 来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。 ```html ``` #### 移除图片（el-icon-delete） 属于上传组件的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。 来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。 ```html ``` #### 缩小预览（el-icon-zoom-out） 属于图片预览的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。 来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。 ```html ``` #### 警告反馈（el-icon-warning） 属于反馈组件的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。 来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。 ```html ``` #### 适应或铺满预览（el-icon-full-screen） 属于图片预览的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。 来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。 ```html ``` ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 普通与装饰 | 静态说明、顶栏及列表工具普通图形使用正文深灰或辅助深灰；导航图标跟随导航状态。纯装饰没有单独悬停或键盘焦点。 | | 可点击图标 | 链接式动作使用操作蓝；其他工具图标悬停时沿用宿主工具规则。危险动作保持错误红；仅键盘定位时显示可见焦点，不以图标颜色代替中文名称。 | | 禁用 | 不可执行的动作图标使用禁用灰并阻断鼠标与键盘；静态只读图形不自动变灰。 | | 反馈与未读 | 成功/警告/失败图形分别使用成功绿/警告橙/错误红并配文字；加载图标用主题蓝。未读数量独立使用提醒徽标，不改变通知入口的动作语义。 | 目录图形用于查阅，不是假操作入口；仅复制示例实际复制虚构账号；头像失败回退由头像专题独立演示。目录区分中控已引用、公共组件示例和组件内置图形，旧入口待统一项不宣称已经迁移。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [会员列表 · 顶栏通知、下载与列表操作图标](../../showcase/index.html#members) · [场景文档](../../showcase/docs/members.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 统一组件状态矩阵 · `states` 专题 `states` · 基础视觉 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 本专题为基础规则、同一组件的补充场景或组合模式，不作为独立的 Element UI 官方组件声明。 ### 本页用法与分类 默认用法：先到对应组件页确定适用状态，再检查状态的进入、退出和组合。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 组件能力 | 按钮、输入、选择、反馈容器 | 不同组件有不同状态集合；静态内容标记不适用。 | | 操作状态 | 悬停、聚焦、按住、选中 | 由鼠标、键盘或当前值触发，不是设计时任选的样式。 | | 条件与反馈 | 只读、禁用、加载、错误 | 由权限、业务条件或请求结果控制；禁用不等于只读，加载不等于成功。 | 使用边界：本页是状态索引；静态矩阵不能代替实际组件的交互验收。 ### 组件规则 - **STATES-R01**：按组件能力覆盖默认、悬停、聚焦、按住、选中、禁用、只读、加载中、错误；不适用的状态应明确标记，不为每种组件强行造状态。 - **STATES-R02**：禁用灰 阻止交互；只读 可聚焦和复制；加载中 防重复并保留占位尺寸；错误 同时提供文案与字段关联。 - **STATES-R03**：不能只画正常态。需要检查鼠标移出、失焦、取消、失败、重试、关闭后恢复等反向过程。 - **STATES-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **STATES-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **STATES-R06**：【默认】正文 正文深灰；标题 正文深灰 + 600；说明 辅助深灰；次级操作 操作蓝 + 12px/400。 - **STATES-R07**：【交互】主要控件默认使用主题蓝；表格行和候选项悬停使用浅灰背景，持续选中使用各组件规定的选中样式。主按钮悬停使用操作蓝，普通按钮悬停使用选中浅蓝底、操作蓝文字和主题蓝边框，文字动作悬停加下划线。输入类聚焦只改原边框为主题蓝；其他可交互控件按各专题保留键盘焦点提示。 - **STATES-R08**：【边界】非交互说明没有悬停、按下或选中状态；不可因鼠标经过而变蓝。 - **STATES-R09**：【组件边界】仅使用实际存在的组件状态；没有操作能力的内容不添加悬停、选中或禁用变色。 - **STATES-R10**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **STATES-R11**：输入及选择触发框统一单层矩形：默认 白色 底、正文深灰 14px/400 字、禁用灰 占位、边框灰 边框；聚焦仅原边框 主题蓝，错误 错误红。鼠标点击与键盘进入均不新增外框或阴影。范围日期仅外层容器变边框，内部两个输入不重复画框。 - **STATES-R12**：输入类反馈成组同步：普通聚焦仅原边框改为主题蓝，普通说明保持辅助深灰；校验失败时边框与就近错误短提示使用错误红，若配置错误图标也同步使用错误红。错误清除时相关视觉与 aria-invalid 一起恢复；不能仅因聚焦就报错，禁用后不触发新校验。当前基础示例不强制增加错误图标，错误含义必须有文字表达。 - **STATES-R13**：输入族统一直角 0px：普通输入、密码、文本域、自动补全、单选/多选触发框、级联、日期/时间与范围、数字输入及前后缀组合输入；默认/聚焦/错误/只读/禁用均不改变圆角。组合输入外侧和拼接处均不保留小圆角，弹出面板的圆角由面板规范独立定义。 - **STATES-R14**：主题蓝、操作蓝、选中浅蓝都属于同一个主色系，分别服务于主要控件、链接/悬停和选中背景；它们不是成功绿、警告橙、错误红这组辅助功能色。交互状态不等于颜色分类，按钮按下也不等于持续选中。 - **STATES-R15**：主按钮状态固定为：默认主题蓝 #409EFF；悬停操作蓝 #3377BB；鼠标按住时恢复主题蓝 #409EFF，并下移1px；松开后若仍悬停则回到操作蓝，移出回到默认。仅键盘定位时保留当前填充并显示操作蓝2px外圈，普通鼠标点击不显示外圈；加载保持主题蓝并防重复，禁用用浅灰底和禁用灰文字。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **STATES-S01**：状态进入 / 退出 / 恢复 / 中断 / 不适用项 - [ ] **STATES-S02**：接入验收：外部受控值、默认值与未提交草稿分别定义；异步动作检查处理中、已完成和失败后的状态恢复。 - [ ] **STATES-S03**：核对本专题每个适用状态引用公共色值；禁用/错误+聚焦/选中+悬停组合按优先级检查。 - [ ] **STATES-S04**：核对正文14/400、次级操作12/400、标题600及同色深正文；检查实际弹出层和子 span，不能只检查父元素。 - [ ] **STATES-S05**：验证完整反馈组合：默认→聚焦→失败→再次聚焦→有效纠正→恢复；检查边框、提示、图标和 aria-invalid 一起变化。 - [ ] **STATES-S06**：检查输入族四角及组合拼接处为0px，包含默认、聚焦、错误、禁用和只读状态。 ### 专题验收重点 按各组件专题实际演示检查进入、反馈、退出及组合状态；本页状态矩阵为静态索引。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html
组件 适用状态
按钮 默认 / 悬停 / 聚焦 / 按住 / 禁用 / 加载中
输入 默认 / 悬停 / 聚焦 / 只读 / 禁用 / 错误
选择控件 默认 / 聚焦 / 选中 / 禁用 / 错误
复选 未选 / 已选 / 半选 / 禁用
反馈容器 加载中 / 空数据 / 错误 / 成功
``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：本次补充。 - [打开本专题页面](../index.html#spec-states) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`states`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 默认 | 正文 正文深灰；标题 正文深灰 + 600；说明 辅助深灰；次级操作 操作蓝 + 12px/400。 | | 交互 | 主要控件默认使用主题蓝；表格行和候选项悬停使用浅灰背景，持续选中使用各组件规定的选中样式。主按钮悬停使用操作蓝，普通按钮悬停使用选中浅蓝底、操作蓝文字和主题蓝边框，文字动作悬停加下划线。输入类聚焦只改原边框为主题蓝；其他可交互控件按各专题保留键盘焦点提示。 | | 边界 | 非交互说明没有悬停、按下或选中状态；不可因鼠标经过而变蓝。 | | 主按钮状态顺序 | 主按钮状态固定为：默认主题蓝 #409EFF；悬停操作蓝 #3377BB；鼠标按住时恢复主题蓝 #409EFF，并下移1px；松开后若仍悬停则回到操作蓝，移出回到默认。仅键盘定位时保留当前填充并显示操作蓝2px外圈，普通鼠标点击不显示外圈；加载保持主题蓝并防重复，禁用用浅灰底和禁用灰文字。 | 仅使用实际存在的组件状态；没有操作能力的内容不添加悬停、选中或禁用变色。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [会员列表 · 筛选输入、按钮、勾选行与禁用入口的适用状态](../../showcase/index.html#members) · [场景文档](../../showcase/docs/members.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 按钮层级与状态 · `buttons` 专题 `buttons` · 动作组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`button`、`button-group`。 本页模板直接使用的 Element UI 标签：`el-button`。 ### 本页用法与分类 默认用法：主要动作使用32px主按钮；次要动作使用普通按钮；列表行和字段旁的轻量操作使用12px文字按钮。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 动作层级 | 主要、次要、轻量文字 | 按动作重要程度选择；单个局部操作组最多一个主动作。危险与否另按实际后果判断。 | | 尺寸 | 40/36/32/28px | 常规采用32px；其他高度需有明确容器需求，同组不混高；12px文字操作另按其规则。 | | 交互状态 | 默认、悬停、键盘焦点、按住、禁用、加载 | 由真实操作或条件触发，同一按钮保持原动作层级。 | | 风险语义与流程 | 危险文字、危险确认；未保存与已保存对象 | 危险描述的是后果，不是第四种动作层级。删除和移除统一使用居中确认弹窗，正文明确对象与后果；确认按钮统一写“确认”，取消保留原内容。 | 使用边界：成功、警告、信息等组件库类型不是本后台新增的常规按钮配色；圆形、胶囊、朴素等能力不能仅因组件库支持就直接采用。 ### 组件规则 - **BUTTONS-R01**：先按重要程度选择主按钮、普通按钮或文字按钮，单个局部操作组最多一个主动作。再按实际后果判断是否为危险操作：危险是风险语义，不是第四种动作层级；危险动作使用规定的危险语义色。 - **BUTTONS-R02**：默认 32px、14px / 400，图标文字间距 6px，按钮间距 10px。按钮内容改变时不跳宽。 - **BUTTONS-R03**：加载态禁用并显示进行中；完成或失败退出 加载中。实际按钮保留交互；此处色样仅对照状态，不另设执行计数演示。 - **BUTTONS-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **BUTTONS-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **BUTTONS-R06**：【默认】主按钮 主题蓝底、白字；普通按钮 白底、正文深灰、边框灰；普通文本操作采用操作蓝、12px/400；危险文字操作采用错误红。 - **BUTTONS-R07**：【悬停 / 按下】主按钮悬停用操作蓝/白字；按住用主题蓝/白字并下移1px；普通按钮悬停 选中浅蓝底、操作蓝文字、主题蓝边框；普通文本操作保持操作蓝，危险文字操作保持错误红，悬停均加下划线。 - **BUTTONS-R08**：【聚焦】键盘 操作蓝 2px 外轮廓；不可仅依靠 悬停。 - **BUTTONS-R09**：【禁用 / 加载】禁用 浅灰底、禁用灰文字、边框灰，禁止提交；加载保留原层级及文字，增加转圈并防重复提交。 - **BUTTONS-R10**：【危险动作】危险操作分两种：行内或字段右侧使用无框无底红字“删除 / 移除”；独立确认操作可使用带框危险按钮。二者共用错误红，不得用黑字红框替代所有危险文字入口。 - **BUTTONS-R11**：【组件边界】仅使用实际存在的组件状态；没有操作能力的内容不添加悬停、选中或禁用变色。 - **BUTTONS-R12**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **BUTTONS-R13**：危险文字操作单独规定样式与交互：用于表单右侧删除、移除待上传附件、列表行删除等。默认红字 #F56C6C、12px/400，无底色、无边框、无水平内边距；点击区域至少24px高。悬停和按下保持同一红色并加下划线，键盘进入时显示红色焦点提示。禁用用 #C0C4CC 且不可执行；处理中显示原位进度并阻止重复点击。 - **BUTTONS-R14**：删除、移除统一先打开居中确认弹窗，明确对象、数量和后果；确认按钮统一写“确认”，取消不改变数据。未保存项、待上传附件、已保存记录和批量删除都沿用这一入口规则；失败保留原内容和重试入口。普通清空输入、取消筛选或关闭弹层不是删除，不自动标红。 - **BUTTONS-R15**：主题蓝、操作蓝、选中浅蓝都属于同一个主色系，分别服务于主要控件、链接/悬停和选中背景；它们不是成功绿、警告橙、错误红这组辅助功能色。交互状态不等于颜色分类，按钮按下也不等于持续选中。 - **BUTTONS-R16**：主按钮状态固定为：默认主题蓝 #409EFF；悬停操作蓝 #3377BB；鼠标按住时恢复主题蓝 #409EFF，并下移1px；松开后若仍悬停则回到操作蓝，移出回到默认。仅键盘定位时保留当前填充并显示操作蓝2px外圈，普通鼠标点击不显示外圈；加载保持主题蓝并防重复，禁用用浅灰底和禁用灰文字。 - **BUTTONS-R17**：官方支持圆形、全圆角、按钮组与多种语义类型。本项目默认4px矩形；圆形仅用于有明确名称的独立图标入口，参见图标规范；按钮组仅组织强相关操作。全圆角与额外语义色不是默认可选皮肤。 - **BUTTONS-R18**：表单与弹窗的主要操作区统一右侧对齐，次要动作在左、主动作在右，按钮间距10px。常规文案使用“确认、取消、保存、删除、重置”等两字动作；取消不保存并退出，重置恢复初始值，两者不能互相替换。涉及特殊业务时以准确表达为先。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **BUTTONS-S01**：按动作层级选择主按钮、普通按钮或文字按钮；危险文字操作使用无框红字。成功/警告/信息属于反馈语义，不作为常规按钮任意换色的依据。 - [ ] **BUTTONS-S02**：常规默认32px；仅有明确容器需求时采用40px、36px或28px，同组不混高。图标按动作需要配置；朴素、圆形、胶囊等库能力未作为本页默认采用项，新增使用需另列统一规则。 - [ ] **BUTTONS-S03**：按实际能力核对按钮组、禁用、加载中、键盘聚焦、按住、防重复提交与失败恢复。 - [ ] **BUTTONS-S04**：本页检查主按钮的默认、悬停、按住、键盘焦点、禁用和加载状态，以及危险文字操作的对应反馈。按住不是持续选中，按钮本身不套输入错误边框或半选规则。 - [ ] **BUTTONS-S05**：核对正文14/400、次级操作12/400、标题600及同色深正文；检查实际弹出层和子 span，不能只检查父元素。 - [ ] **BUTTONS-S06**：核对红色文字删除：无框无底、12px/400、悬停、键盘、禁用、处理中；子文字不能被普通蓝链接样式覆盖。 - [ ] **BUTTONS-S07**：本页分别核对未保存字段、待上传附件和已保存演示记录的居中确认、取消保留及确认结果。草稿/附件演示提供撤销；已保存记录演示提供失败重试，删除后的“重置示例”不等于业务撤销。 ### 专题验收重点 在上方实际按钮检查默认主题蓝→悬停操作蓝→按住主题蓝并下移1px→松开或移出恢复；鼠标点击不出现外圈，Tab 定位保留键盘焦点外圈。下方状态色样用于对照，不是可执行按钮；危险文字示例另验删除、取消、撤销与失败重试。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html
常规高度 32 px 字号 / 字重 14 / 400 圆角 4 px 组件间距 10 px

01动作层级与风险

主/次/文字是层级；危险是风险语义
主要按钮 主要操作
次要按钮 次要操作 · 默认
文字按钮 轻量操作 · 文字操作
移除项目 危险文字操作 · 无框红字

02交互状态

明确颜色归属，也明确何时变化

主题蓝、操作蓝、选中浅蓝都属于同一个主色系，分别服务于主要控件、链接/悬停和选中背景；它们不是成功绿、警告橙、错误红这组辅助功能色。交互状态不等于颜色分类，按钮按下也不等于持续选中。

03尺寸与节奏

中控常规操作默认 32px 常规规格
标准尺寸 40 px · 标准
中等尺寸 36 px · 中等
常规尺寸 32 px · 常规
紧凑尺寸 28 px · 紧凑

04危险文字操作

字段右侧与列表行内 · 红字、无框、无底色
默认 · 红色文字
悬停示意 · 加下划线
禁用 · 灰色且不可点击
处理中示意 · 防重复

普通点击不增加外框；用键盘进入时保留焦点提示。下面的场景可以实际删除、撤销、取消和模拟失败。

表单右侧：删除未保存的字段
附件列表：移除待上传文件
列表行：删除已保存记录前确认
``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：历史样板规范 3 / 39 / 41 / 42 / 53。 - [打开本专题页面](../index.html#spec-buttons) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`buttons`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) 自定义示例 `button-state-pattern` 的实现：[button-states.js](../button-states.js)。 自定义示例 `danger-action-demo` 的实现：[danger-actions.js](../danger-actions.js)。 按钮状态色样为静态对照；键盘聚焦可在本页上方实际按钮体验。样式见 [公共按钮状态](../button-contract.css)。 危险操作样式见 [action-contract.css](../action-contract.css)；示例使用本地演示数据。 ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 默认 | 主按钮 主题蓝底、白字；普通按钮 白底、正文深灰、边框灰；普通文本操作采用操作蓝、12px/400；危险文字操作采用错误红。 | | 悬停 / 按下 | 主按钮悬停用操作蓝/白字；按住用主题蓝/白字并下移1px；普通按钮悬停 选中浅蓝底、操作蓝文字、主题蓝边框；普通文本操作保持操作蓝，危险文字操作保持错误红，悬停均加下划线。 | | 聚焦 | 键盘 操作蓝 2px 外轮廓；不可仅依靠 悬停。 | | 禁用 / 加载 | 禁用 浅灰底、禁用灰文字、边框灰，禁止提交；加载保留原层级及文字，增加转圈并防重复提交。 | | 危险动作 | 危险操作分两种：行内或字段右侧使用无框无底红字“删除 / 移除”；独立确认操作可使用带框危险按钮。二者共用错误红，不得用黑字红框替代所有危险文字入口。 | | 危险文字操作 | 查看、编辑、查看更多使用操作蓝；删除、移除使用危险红。字号同为12px/400，颜色表达动作类型，不通过加粗或更大字号表达危险。 | | 主按钮状态顺序 | 主按钮状态固定为：默认主题蓝 #409EFF；悬停操作蓝 #3377BB；鼠标按住时恢复主题蓝 #409EFF，并下移1px；松开后若仍悬停则回到操作蓝，移出回到默认。仅键盘定位时保留当前填充并显示操作蓝2px外圈，普通鼠标点击不显示外圈；加载保持主题蓝并防重复，禁用用浅灰底和禁用灰文字。 | 仅使用实际存在的组件状态；没有操作能力的内容不添加悬停、选中或禁用变色。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [会员列表 · 查询等主要操作和会员行文字操作](../../showcase/index.html#members) · [场景文档](../../showcase/docs/members.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 文本链接、复制与说明 · `link-copy` 专题 `link-copy` · 动作组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`link`。 本页模板直接使用的 Element UI 标签：`el-button`、`el-tooltip`。 ### 本页用法与分类 默认用法：跳转使用链接；展开、编辑和删除使用文字按钮；复制使用独立入口，与字段主操作分开。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 操作用途 | 跳转、查看说明、编辑、删除、复制 | 按行为选择元素和文案，不能因都呈蓝色而复用同一点击范围。 | | 语义与字号 | 普通链接、次级操作、危险文字 | 正文内链接14px；次级操作12px，编辑蓝字、删除红字，无框无底。 | | 操作结果 | 复制成功或失败、删除确认 | 由执行结果触发反馈；样例提示不等于业务已提交。 | 使用边界：本页并列的是不同用途的入口；完整删除流程和禁用/处理中状态见按钮与确认专题。 ### 组件规则 - **LINK-COPY-R01**：跳转使用链接元素（a）；查看说明、展开和其他动作使用按钮元素（button）。不让整行同时承接链接、复制和说明。 - **LINK-COPY-R02**：复制仅复制对应字段完整值，数值0是有效值；只有复制操作实际成功才显示成功。权限拒绝、不可用、兼容接口返回失败或异常时显示失败；临时复制节点始终清理，兼容复制结束后恢复原有焦点。复制与链接热区分离，点击复制不触发链接。 - **LINK-COPY-R03**：说明紧跟字段名或主值；说明热区可由键盘聚焦。文字提示（Tooltip）不放按钮、表单等交互内容。 - **LINK-COPY-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **LINK-COPY-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **LINK-COPY-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **LINK-COPY-R07**：危险文字操作单独规定样式与交互：用于表单右侧删除、移除待上传附件、列表行删除等。默认红字 #F56C6C、12px/400，无底色、无边框、无水平内边距；点击区域至少24px高。悬停和按下保持同一红色并加下划线，键盘进入时显示红色焦点提示。禁用用 #C0C4CC 且不可执行；处理中显示原位进度并阻止重复点击。 - **LINK-COPY-R08**：删除、移除统一先打开居中确认弹窗，明确对象、数量和后果；确认按钮统一写“确认”，取消不改变数据。未保存项、待上传附件、已保存记录和批量删除都沿用这一入口规则；失败保留原内容和重试入口。普通清空输入、取消筛选或关闭弹层不是删除，不自动标红。 - **LINK-COPY-R09**：【普通链接与动作】正文链接操作蓝、14px/400；次级动作操作蓝、12px/400；悬停加下划线，按下保留操作蓝。 - **LINK-COPY-R10**：【危险文字动作】删除/移除使用错误红、12px/400、无框透明底；悬停加下划线，按下仍为错误红。 - **LINK-COPY-R11**：【键盘焦点】普通入口用操作蓝焦点轮廓；危险文字入口用错误红焦点轮廓，危险文字仍为错误红。 - **LINK-COPY-R12**：【禁用与复制反馈】不可执行的入口使用禁用灰并阻止触发；复制成功/失败使用独立反馈，不改变原字段颜色。 - **LINK-COPY-R13**：【组件边界】跳转用链接，执行动作用按钮；这里没有半选或只读变色。复制成功不把链接长期染绿，危险动作按下仍保持错误红。 - **LINK-COPY-R14**：需要填写跳转链接时，必须解析出有效的HTTPS协议与主机；空主机、只有问号或井号、空白字符和错误格式均不得判为有效。校验只检查格式，不等于目标页面可访问。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **LINK-COPY-S01**：当前示例：查看组件说明与独立复制分别触发；前者打开说明弹窗，复制得到字段完整值，成功反馈与实际结果一致。 - [ ] **LINK-COPY-S02**：当前示例：编辑显示本地提示；删除入口可检查默认、悬停和键盘焦点，并打开可取消的居中确认框。关联验收：禁用、处理中、确认后撤销和失败重试到“按钮层级与状态”的危险文字操作区检查；本页不提供这些完整实例。 - [ ] **LINK-COPY-S03**：接入验收：分别验证复制成功、权限拒绝、剪贴板不可用及兼容复制失败/异常；反馈与实际结果一致，不残留临时输入框或丢失原焦点；有效0能复制，复制不顺带打开链接或切换整行。 - [ ] **LINK-COPY-S04**：接入验收：跳转用链接、动作用按钮；独立图标有中文名称，禁用操作阻止鼠标和键盘触发。 ### 专题验收重点 本页检查查看说明与复制互不触发、复制成功后回读完整值；接入验收检查复制失败不显示成功，真实跳转链接与复制热区相互独立。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html
查看组件说明 COMP-0001
编辑 删除

并列操作：编辑用蓝色，删除用红色；同为12px，均无框无底。禁用、处理中、撤销和失败重试见按钮层级与状态 · 危险文字操作；确认流程见确认框与危险动作。

``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：历史样板规范 17 / 18 / 49 / 75 / 77。 - [打开本专题页面](../index.html#spec-link-copy) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`link-copy`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 普通链接与动作 | 正文链接操作蓝、14px/400；次级动作操作蓝、12px/400；悬停加下划线，按下保留操作蓝。 | | 危险文字动作 | 删除/移除使用错误红、12px/400、无框透明底；悬停加下划线，按下仍为错误红。 | | 键盘焦点 | 普通入口用操作蓝焦点轮廓；危险文字入口用错误红焦点轮廓，危险文字仍为错误红。 | | 禁用与复制反馈 | 不可执行的入口使用禁用灰并阻止触发；复制成功/失败使用独立反馈，不改变原字段颜色。 | 跳转用链接，执行动作用按钮；这里没有半选或只读变色。复制成功不把链接长期染绿，危险动作按下仍保持错误红。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [会员列表 · 会员账号链接与列表字段旁独立操作](../../showcase/index.html#members) · [场景文档](../../showcase/docs/members.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 输入框：宽度、只读与禁用 · `input` 专题 `input` · 输入组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`input`。 本页模板直接使用的 Element UI 标签：`el-input`。 ### 本页用法与分类 默认用法：普通短文本默认使用有独立标签的单行输入框，32px高、直角；密码、单位和字数限制只在字段需要时增加，正文样式保持统一。 宽度由字段所在内容列及本页宽度规则决定，不把所有输入统一写死为一个宽度。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 输入内容（用途） | 普通文本、密码和带单位的内容是不同字段用途。 | 普通文字用普通输入；密码用密码显隐；有单位时用复合输入，不因外观偏好改字段类型。 | | 宽度（布局约束） | 字段整项、控件边框和容器可用宽度是三个不同数值。 | 普通筛选整项280px；金额范围整项576px；时间范围控件400px；编辑表单填满内容列，新增账号内容列上限400px。按实际用途采用，不能当四种任意可选皮肤。 | | 附属功能（可组合） | 清除、搜索图标、单位和字数计数是输入功能。 | 本页分别演示这些功能；按字段任务启用，不要求所有输入同时具备。删除整项字段另按危险操作处理。 | | 编辑权限（约束） | 可编辑、只读和禁用取决于当前是否允许修改。 | 允许修改用可编辑；只查看且需复制用只读；当前不可操作才禁用，不能为了文字变浅而禁用。 | | 焦点与校验（自动状态） | 聚焦、错误和错误恢复由操作及校验结果产生。 | 本页必填示例失焦后检查非空；错误红边优先于蓝色焦点边，纠正后恢复，不由设计者任选颜色。 | 使用边界：不要把错误、只读、禁用当成三款皮肤；不要把清空输入值与删除整个字段混为一项操作。 ### 组件规则 - **INPUT-R01**：有独立标签；占位提示 默认“请输入”；默认 32px，输入值 #303133、14px / 400。错误说明不写进 占位提示。 - **INPUT-R02**：输入 / 清除 / 失焦 / 回车键 的响应由宿主定义；组件本身不暗中提交或发起查询。输入法候选阶段 回车键 不提交。 - **INPUT-R03**：只读可选择与复制，禁用不可编辑；可清除输入保留 清除 按钮名称和点击热区。 - **INPUT-R04**：【宽度口径】本页是输入族宽度规则的统一来源。控件宽度指最外层边框到边框的CSS像素，包含内距、图标和前后缀；字段整项宽度还包含标签及标签间距。两种宽度不能混写，32px等高度档位也不决定宽度。 - **INPUT-R05**：【先定内容列】新增/编辑表单中的输入、下拉、密码、文本域及组合输入默认填满所在内容列；同组左缘、右缘保持一致。当前新增账号场景内容列最大400px，窄容器随可用宽度收缩；400px是该表单的既有上限，不强制推广到所有页面和弹窗。 - **INPUT-R06**：【普通筛选项】沿用现有筛选合同：普通字段整项280px，包含实际标签文字宽度、8px标签间距和剩余输入空间；框本身不写成280px。字段间横向16px、纵向12px，放不下时整项换行；容器小于整项宽度时最多占满容器。新增/编辑表单的独立标签列不套筛选标签规则。 - **INPUT-R07**：【范围筛选项】双输入金额范围整项576px，包含标签、8px标签间距、两框与中间分隔；日期/日期时间范围的控件边框宽400px，不含标签，整项为实际标签宽+8px+400px。日期规则已替代旧的日期整项576px，不与金额范围混用。 - **INPUT-R08**：【短数字与长内容】位数和范围明确的短计数允许沿用现有有限宽步进框：本页0–10示例沿用常规组件130px外框，增减按钮计入宽度；这不是所有金额或数字的统一宽度。长账号、链接、地址不随字数横向撑开容器；单行保留编辑滚动与完整值读取，多行备注在内容列内换行。 - **INPUT-R09**：【组合与弹层】前后缀、单位、按钮、清除图标和字数计数都计入组合控件总宽，不能在既定宽度之外另加。单选、多选、自动补全与级联的触发框沿用所在内容列，候选弹层的宽度和长选项处理由对应组件规定。 - **INPUT-R10**：【窄容器与稳定性】先让字段整项换行；仍不足时收缩至可用宽度，必要时标签置于上方，金额两端或日期起止值按各自规则分行。字体、图标和命中区域不缩小，完整时间不省略。默认、聚焦、错误、只读、禁用和清除按钮显隐均不改变已分配宽度；错误文字在同一内容列内换行。 - **INPUT-R11**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **INPUT-R12**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **INPUT-R13**：【可编辑 / 已填写】白底 白色、正文 正文深灰、边框 边框灰；能输入不等于用主色填满。 - **INPUT-R14**：【悬停 / 聚焦】悬停保持 边框灰；鼠标与键盘聚焦均只将现有 1px 边框改为 主题蓝，不增加外圈、阴影或第二层框。 - **INPUT-R15**：【错误 / 错误聚焦】边框 错误红；说明 错误红 + 明确错误文案，错误边框优先于蓝色聚焦边框，不叠加第二层外框。 - **INPUT-R16**：【只读 / 禁用】只读 白底、正文深灰、边框灰，可选择复制；禁用 浅灰底、禁用灰文字、边框灰，不响应操作。 - **INPUT-R17**：【占位 / 加载】占位 禁用灰，标签仍用 正文深灰；加载图标 主题蓝，值仍 正文深灰，不把值改成占位灰。 - **INPUT-R18**：【组件边界】仅使用实际存在的组件状态；没有操作能力的内容不添加悬停、选中或禁用变色。 - **INPUT-R19**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **INPUT-R20**：输入及选择触发框统一单层矩形：默认 白色 底、正文深灰 14px/400 字、禁用灰 占位、边框灰 边框；聚焦仅原边框 主题蓝，错误 错误红。鼠标点击与键盘进入均不新增外框或阴影。范围日期仅外层容器变边框，内部两个输入不重复画框。 - **INPUT-R21**：输入类反馈成组同步：普通聚焦仅原边框改为主题蓝，普通说明保持辅助深灰；校验失败时边框与就近错误短提示使用错误红，若配置错误图标也同步使用错误红。错误清除时相关视觉与 aria-invalid 一起恢复；不能仅因聚焦就报错，禁用后不触发新校验。当前基础示例不强制增加错误图标，错误含义必须有文字表达。 - **INPUT-R22**：下方提示通过 aria-describedby 关联输入；错误状态同步 aria-invalid，动态提示使用 aria-live。 - **INPUT-R23**：输入族统一直角 0px：普通输入、密码、文本域、自动补全、单选/多选触发框、级联、日期/时间与范围、数字输入及前后缀组合输入；默认/聚焦/错误/只读/禁用均不改变圆角。组合输入外侧和拼接处均不保留小圆角，弹出面板的圆角由面板规范独立定义。 - **INPUT-R24**：危险文字操作单独规定样式与交互：用于表单右侧删除、移除待上传附件、列表行删除等。默认红字 #F56C6C、12px/400，无底色、无边框、无水平内边距；点击区域至少24px高。悬停和按下保持同一红色并加下划线，键盘进入时显示红色焦点提示。禁用用 #C0C4CC 且不可执行；处理中显示原位进度并阻止重复点击。 - **INPUT-R25**：删除、移除统一先打开居中确认弹窗，明确对象、数量和后果；确认按钮统一写“确认”，取消不改变数据。未保存项、待上传附件、已保存记录和批量删除都沿用这一入口规则；失败保留原内容和重试入口。普通清空输入、取消筛选或关闭弹层不是删除，不自动标红。 - **INPUT-R26**：条件改变后，只让当前有效分支参与校验与提交；隐藏或禁用的字段不能带着旧值误提交。各分支草稿分别保留，切换时清除过期错误；清除整组时一并清除草稿。 - **INPUT-R27**：复合输入的前置选择、后置单位或按钮计入整个输入组件的宽度上限；拼接处直角且同高，错误显示在原输入边框及就近提示，不给组合外再套一层焦点框。 - **INPUT-R28**：填写区只保留影响操作的格式、限制、必填或错误说明；不逐字段重复“本地演示、不代表正式数据”等提示。原型数据保存范围、接口与未接入能力集中记录在规范文档，不写进业务操作文案。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **INPUT-S01**：按实际能力核对普通文本、密码可见性、前后缀图标，以及前置与后置内容组成的复合输入；前置内容插槽（prepend）与后置内容插槽（append）沿用输入框状态。 - [ ] **INPUT-S02**：功能核对：清除与字数限制；权限核对：只读与禁用；校验核对：错误与纠正恢复。三类分别验收，不视为并列的可选样式。 - [ ] **INPUT-S03**：输入法组合中 回车键、前后空格、全角字符、粘贴超长值；禁止自动改写有意义输入 - [ ] **INPUT-S04**：本页核对普通、聚焦、只读、禁用与必填错误的公共色值；错误边框和提示同时保持，错误再次聚焦不变蓝。文本框不套列表行选中或半选规则。 - [ ] **INPUT-S05**：核对正文14/400、次级操作12/400、标题600及同色深正文；检查实际弹出层和子 span，不能只检查父元素。 - [ ] **INPUT-S06**：验证完整反馈组合：默认→聚焦→失败→再次聚焦→有效纠正→恢复；检查边框、提示、图标和 aria-invalid 一起变化。 - [ ] **INPUT-S07**：检查输入族四角及组合拼接处为0px，包含默认、聚焦、错误、禁用和只读状态。 - [ ] **INPUT-S08**：核对红色文字删除：无框无底、12px/400、悬停、键盘、禁用、处理中；子文字不能被普通蓝链接样式覆盖。 - [ ] **INPUT-S09**：本页只核对未保存字段的居中确认、取消保留、确认移除和撤销。待上传附件到上传专题、已保存记录及失败重试到确认框专题验收；入口颜色不代替确认流程。 - [ ] **INPUT-S10**：宽度口径：分别测量整项、标签、8px间距及控件最外框；普通字段280px不误写成输入边框宽280px。 - [ ] **INPUT-S11**：宽度来源：金额整项576px；日期/日期时间范围控件400px不含标签；新增账号内容列最大400px。旧日期576px规则不再采用。 - [ ] **INPUT-S12**：当前宽度示例：宽容器可并列，窄容器280px时字段换行，表单内容列与组合输入随容器收缩；130px短计数例只用于0–10。 - [ ] **INPUT-S13**：状态几何：输入文字、清除、聚焦、失焦校验错误、纠正、只读和禁用均保持同一已分配宽度；长错误说明在框下换行。 - [ ] **INPUT-S14**：接入验收：160%/200%缩放、窄弹窗、长账号/地址、金额极值与完整秒值；同组左右缘一致，没有页面级横向溢出，不通过缩字解决。 ### 专题验收重点 输入中文、粘贴长文本、制表键 聚焦；只读与禁用行为不同。 核对宽度示例的实测边框：普通筛选整项280px但输入框扣除标签和8px间距，金额整项576px；编辑内容列最大400px，组合前后缀计入。切换宽/窄容器后值不丢、整项换行、不横向撑开；聚焦、清空、错误、只读、禁用均不跳宽。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html
常规高度 32 px 输入文字 #303133 字号 / 字重 14 / 400 焦点边框 #409EFF

01编辑权限与校验状态

标签始终可见；占位提示不代替标签

02按内容选择输入功能

同一输入基础，适配不同内容

表单右侧删除

删除字段是危险文字操作，不等同于清空输入值

03宽度规则与可用空间

区分字段整项宽度和输入框实际宽度
``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：历史样板规范 35 / 73；宽度沿用项目已确认的scene-consistency.css筛选280px/金额576px/时间范围400px、account-create.css内容列400px及当前Element常规步进框130px；交互示例input-width-patterns.js/css。。 - [打开本专题页面](../index.html#spec-input) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`input`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) 自定义示例 `danger-action-demo` 的实现：[danger-actions.js](../danger-actions.js)。 自定义示例 `input-width-patterns` 的实现：[input-width-patterns.js](../input-width-patterns.js)。 危险操作样式见 [action-contract.css](../action-contract.css)；示例使用本地演示数据。 ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 可编辑 / 已填写 | 白底 白色、正文 正文深灰、边框 边框灰；能输入不等于用主色填满。 | | 悬停 / 聚焦 | 悬停保持 边框灰；鼠标与键盘聚焦均只将现有 1px 边框改为 主题蓝，不增加外圈、阴影或第二层框。 | | 错误 / 错误聚焦 | 边框 错误红；说明 错误红 + 明确错误文案，错误边框优先于蓝色聚焦边框，不叠加第二层外框。 | | 只读 / 禁用 | 只读 白底、正文深灰、边框灰，可选择复制；禁用 浅灰底、禁用灰文字、边框灰，不响应操作。 | | 占位 / 加载 | 占位 禁用灰，标签仍用 正文深灰；加载图标 主题蓝，值仍 正文深灰，不把值改成占位灰。 | | 危险文字操作 | 查看、编辑、查看更多使用操作蓝；删除、移除使用危险红。字号同为12px/400，颜色表达动作类型，不通过加粗或更大字号表达危险。 | 仅使用实际存在的组件状态；没有操作能力的内容不添加悬停、选中或禁用变色。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [会员列表 · 会员账号等筛选字段；详情内可编辑字段](../../showcase/index.html#members) · [场景文档](../../showcase/docs/members.md) - [会员详情 · 详情字段旁编辑入口 · 输入值](../../showcase/index.html#member-detail) · [场景文档](../../showcase/docs/member-detail.md) - [新增账号 · 新增会员账号、密码等输入字段](../../showcase/index.html#create-account) · [场景文档](../../showcase/docs/create-account.md) - [人群标签 · 标签目录搜索和穿梭框账号搜索](../../showcase/index.html#segments) · [场景文档](../../showcase/docs/segments.md) - [存款记录 · 存款记录筛选输入](../../showcase/index.html#deposits) · [场景文档](../../showcase/docs/deposits.md) - [账户调整审核 · 筛选账号、申请单号等输入](../../showcase/index.html#account-audit) · [场景文档](../../showcase/docs/account-audit.md) - [活动管理 · 活动筛选、名称与标题](../../showcase/index.html#campaigns) · [场景文档](../../showcase/docs/campaigns.md) - [广告管理 · 广告筛选、标题与链接](../../showcase/index.html#adverts) · [场景文档](../../showcase/docs/adverts.md) - [公告管理 · 公告筛选、标题和内容输入](../../showcase/index.html#notifications) · [场景文档](../../showcase/docs/notifications.md) - [通知管理 · 通知标题、账号与筛选输入](../../showcase/index.html#site-messages) · [场景文档](../../showcase/docs/site-messages.md) - [操作日志 · 日志账号、操作内容等筛选输入](../../showcase/index.html#logs) · [场景文档](../../showcase/docs/logs.md) - [个人中心 · 个人资料与安全设置表单](../../showcase/index.html#personal-center) · [场景文档](../../showcase/docs/personal-center.md) - [客服工单管理 · 工单筛选、标题及会员账号](../../showcase/index.html#tickets) · [场景文档](../../showcase/docs/tickets.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 错误说明、必填与输入校验 · `input-error` 专题 `input-error` · 输入组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 本专题为基础规则、同一组件的补充场景或组合模式，不作为独立的 Element UI 官方组件声明。 本页模板直接使用的 Element UI 标签：`el-button`、`el-input`。 ### 本页用法与分类 默认用法：默认只显示标签、必填标记和可编辑输入；占位已提供输入指引时不重复添加默认说明。当前示例点击“检查输入”后校验非空，初次进入不自动报错；仅错误时显示对应提示。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 校验规则（字段约束） | 必填、长度和格式描述哪些值有效。 | 本页只演示必填非空；长度、格式及跨字段规则须由对应业务定义，不能把清单当成已接入功能。 | | 校验时机（功能配置） | 按钮检查、失焦检查及值变化检查决定何时判断。 | 本页用“检查输入”按钮触发；输入有效内容后清除已有错误。宿主采用其他时机时，应明确其触发条件。 | | 普通、错误与恢复（自动状态） | 红边、红色短提示和错误标识随校验结果同步。 | 未触发或已有效时用普通状态；校验失败才显示错误。再次聚焦错误字段仍保留红边，不能手工任选。 | 使用边界：不要把红边输入作为默认必填样式，也不要把远程校验写成本页已经具备的能力。 ### 组件规则 - **INPUT-ERROR-R01**：仅定义单个输入组件错误态，不规定任何业务表单。必填标记与辅助技术识别的必填状态（aria-required）一致；标签、说明和错误通过唯一标识（id）关联。 - **INPUT-ERROR-R02**：必填标记统一放在字段名称前：使用错误红星号，与文字间距4px；只显示一次，不放在输入框后。星号对辅助技术隐藏，控件按真实规则设置aria-required；复选组合只表达整组至少选一项，不把组内每项标成必填。 - **INPUT-ERROR-R03**：输入与错误说明共用输入框专题的宽度规则；校验不改变控件边框宽、内距或所在内容列，长错误文字只在框下换行，不挤宽输入。 - **INPUT-ERROR-R04**：错误文案就近显示 12px / 400 / 18px；边框与文字同时提示。首次进入未操作时不满屏报错。 - **INPUT-ERROR-R05**：示例只校验非空；业务长度、格式和金额限制必须由实际合同提供。修正后清除对应错误。 - **INPUT-ERROR-R06**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **INPUT-ERROR-R07**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **INPUT-ERROR-R08**：【可编辑 / 已填写】白底 白色、正文 正文深灰、边框 边框灰；能输入不等于用主色填满。 - **INPUT-ERROR-R09**：【悬停 / 聚焦】悬停保持 边框灰；鼠标与键盘聚焦均只将现有 1px 边框改为 主题蓝，不增加外圈、阴影或第二层框。 - **INPUT-ERROR-R10**：【错误 / 错误聚焦】边框 错误红；说明 错误红 + 明确错误文案，错误边框优先于蓝色聚焦边框，不叠加第二层外框。 - **INPUT-ERROR-R11**：【只读 / 禁用】只读 白底、正文深灰、边框灰，可选择复制；禁用 浅灰底、禁用灰文字、边框灰，不响应操作。 - **INPUT-ERROR-R12**：【占位 / 加载】占位 禁用灰，标签仍用 正文深灰；加载图标 主题蓝，值仍 正文深灰，不把值改成占位灰。 - **INPUT-ERROR-R13**：【组件边界】必填星号 错误红；未提交前不要把所有空输入都画成错误。 - **INPUT-ERROR-R14**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **INPUT-ERROR-R15**：输入类反馈成组同步：普通聚焦仅原边框改为主题蓝，普通说明保持辅助深灰；校验失败时边框与就近错误短提示使用错误红，若配置错误图标也同步使用错误红。错误清除时相关视觉与 aria-invalid 一起恢复；不能仅因聚焦就报错，禁用后不触发新校验。当前基础示例不强制增加错误图标，错误含义必须有文字表达。 - **INPUT-ERROR-R16**：输入族统一直角 0px：普通输入、密码、文本域、自动补全、单选/多选触发框、级联、日期/时间与范围、数字输入及前后缀组合输入；默认/聚焦/错误/只读/禁用均不改变圆角。组合输入外侧和拼接处均不保留小圆角，弹出面板的圆角由面板规范独立定义。 - **INPUT-ERROR-R17**：条件改变后，只让当前有效分支参与校验与提交；隐藏或禁用的字段不能带着旧值误提交。各分支草稿分别保留，切换时清除过期错误；清除整组时一并清除草稿。 - **INPUT-ERROR-R18**：填写区只保留影响操作的格式、限制、必填或错误说明；不逐字段重复“本地演示、不代表正式数据”等提示。原型数据保存范围、接口与未接入能力集中记录在规范文档，不写进业务操作文案。 - **INPUT-ERROR-R19**：必填和错误语义必须落到实际控件：标签与错误提示关联稳定ID；组合选择的必填属于整组，不能让每个复选项、筛选关键词或上传按钮都变成必填。切换状态后同步更新，保留明确选填的字段。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **INPUT-ERROR-S01**：当前示例只核对必填非空。长度、格式、跨字段依赖及服务端错误属于业务接入规则，按实际采用的规则另行验收。 - [ ] **INPUT-ERROR-S02**：当前示例：默认无重复帮助文案；按钮触发检查时显示错误并建立描述关联，有效纠正后移除提示和关联。宿主若采用失焦、值变化或异步校验，再核对旧结果丢弃与字段卸载后的取消处理。 - [ ] **INPUT-ERROR-S03**：当前必填示例核对普通、聚焦、错误和有效纠正后的恢复；红色边框、短提示及 aria-invalid 同步。只读和禁用按宿主实际配置验收，不把行选中状态套到文本框。 - [ ] **INPUT-ERROR-S04**：核对正文14/400、次级操作12/400、标题600及同色深正文；检查实际弹出层和子 span，不能只检查父元素。 - [ ] **INPUT-ERROR-S05**：验证完整反馈组合：默认→聚焦→失败→再次聚焦→有效纠正→恢复；检查边框、提示、图标和 aria-invalid 一起变化。 - [ ] **INPUT-ERROR-S06**：检查输入族四角及组合拼接处为0px，包含默认、聚焦、错误、禁用和只读状态。 - [ ] **INPUT-ERROR-S07**：宿主联合表单接入后验收：输入、下拉、文本域和数字各自校验；修正一项只清除对应错误，错误状态再次聚焦仍无外圈。当前专题基础示例不等于完整业务表单。 - [ ] **INPUT-ERROR-S08**：宽度联动验收：按输入框专题核对整项与边框口径、同组对齐、长内容、窄容器换行及状态不跳宽。 - [ ] **INPUT-ERROR-S09**：核对必填星号在字段名前、间距4px且无重复；非必填字段无星号。错误短提示在对应内容列下方，与输入框左边界对齐；标签、必填和错误语义与真实字段规则一致。 ### 专题验收重点 首次进入及单纯聚焦不报错，输入下方不显示重复默认说明；点击“检查输入”检查空值并关联实际错误提示。输入有效内容后移除该错误提示及其aria-describedby关联，恢复aria-invalid；关联不能指向空提示或不存在的节点。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html

请输入示例值

检查输入 ``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：历史样板规范 74；本次可访问关联补充。 - [打开本专题页面](../index.html#spec-input-error) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`input-error`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 可编辑 / 已填写 | 白底 白色、正文 正文深灰、边框 边框灰；能输入不等于用主色填满。 | | 悬停 / 聚焦 | 悬停保持 边框灰；鼠标与键盘聚焦均只将现有 1px 边框改为 主题蓝，不增加外圈、阴影或第二层框。 | | 错误 / 错误聚焦 | 边框 错误红；说明 错误红 + 明确错误文案，错误边框优先于蓝色聚焦边框，不叠加第二层外框。 | | 只读 / 禁用 | 只读 白底、正文深灰、边框灰，可选择复制；禁用 浅灰底、禁用灰文字、边框灰，不响应操作。 | | 占位 / 加载 | 占位 禁用灰，标签仍用 正文深灰；加载图标 主题蓝，值仍 正文深灰，不把值改成占位灰。 | 必填星号 错误红；未提交前不要把所有空输入都画成错误。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [新增账号 · 新增会员提交 · 必填、格式及重复账号校验](../../showcase/index.html?example=member-form#create-account) · [场景文档](../../showcase/docs/create-account.md) - [存款记录 · 筛选金额等条件的合法性提示](../../showcase/index.html#deposits) · [场景文档](../../showcase/docs/deposits.md) - [账户调整审核 · 审核备注为空、超限及操作限制提示](../../showcase/index.html#account-audit) · [场景文档](../../showcase/docs/account-audit.md) - [活动管理 · 编辑活动 · 必填、日期范围校验与逐字段纠错](../../showcase/index.html#campaigns) · [场景文档](../../showcase/docs/campaigns.md)；落地范围：采用当前字段规则、逐字段纠错和条件分支校验；不代表已接入生产服务端校验。 - [广告管理 · 新增/编辑广告 · 标题、链接与中文素材校验](../../showcase/index.html#adverts) · [场景文档](../../showcase/docs/adverts.md)；落地范围：采用当前字段规则、逐字段纠错和条件分支校验；不代表已接入生产服务端校验。 - [公告管理 · 新增/编辑公告 · 必填校验与逐字段纠错](../../showcase/index.html#notifications) · [场景文档](../../showcase/docs/notifications.md)；落地范围：采用当前字段规则、逐字段纠错和条件分支校验；不代表已接入生产服务端校验。 - [通知管理 · 新增/编辑通知 · 接收范围、定时分支与逐字段纠错](../../showcase/index.html#site-messages) · [场景文档](../../showcase/docs/site-messages.md)；落地范围：采用当前字段规则、逐字段纠错和条件分支校验；不代表已接入生产服务端校验。 - [个人中心 · 资料和密码字段校验 · 存储失败后的草稿恢复](../../showcase/index.html#personal-center) · [场景文档](../../showcase/docs/personal-center.md)；落地范围：采用当前字段规则、逐字段纠错和条件分支校验；不代表已接入生产服务端校验。 - [客服工单管理 · 新增工单 · 条件必填与格式提示](../../showcase/index.html?example=ticket-create#tickets) · [场景文档](../../showcase/docs/tickets.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 文本域与字数计数 · `textarea` 专题 `textarea` · 输入组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 本专题为基础规则、同一组件的补充场景或组合模式，不作为独立的 Element UI 官方组件声明。 本页模板直接使用的 Element UI 标签：`el-input`。 ### 本页用法与分类 默认用法：多行纯文本使用文本域，文字保持14px/400/21px。本页初始显示3行、上限100个计数单位并显示计数；100是演示参数，不是所有业务字段的统一上限。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 内容形式（用途） | 文本域承载需要换行的纯文本。 | 备注、说明等多行内容使用文本域；短字段沿用单行输入，不靠更大字号区分。 | | 可见高度（尺寸配置） | 初始行数和高度约束决定一次能看到多少内容。 | 本页采用初始3行；自动高度是另行接入配置，本页没有可切换的高度档位。调整高度不改变正文行高。 | | 长度与计数（功能配置） | 最大长度限制输入，计数显示已用数量。 | 本页两者采用相同计数口径；真实上限按字段定义，不能按容器大小推算。 | | 焦点与错误（自动状态） | 聚焦沿用输入框规则；只读、禁用和错误须由对应条件触发。 | 本页基础文本域可输入，没有单独的业务校验流程；宿主接入校验后才按结果显示错误。 | 使用边界：不要把3行、100字和错误红框列成可互换样式；不要宣称本页演示了自动高度或业务错误校验。 ### 组件规则 - **TEXTAREA-R01**：长文本用文本域，正文 14px / 21px；计数放控件内部右下角，预留内距避免覆盖正文。 - **TEXTAREA-R02**：文本域宽度统一参考输入框专题：填满所在内容列，长备注在框内换行；只允许按高度规则增高，不允许拖拽横向撑开布局。字数计数占用预留空间，不另外增加控件外宽。 - **TEXTAREA-R03**：最大长度由业务传入，当前示例为100个计数单位、初始3行，允许纵向调整。业务容器若要求限制高度，须明确最小/最大行数并在超出后内部滚动；当前基础示例未设置最大高度，不能写成已实现固定上限。 - **TEXTAREA-R04**：统计口径须与后端一致。本示例 maxlength 与计数均按 UTF-16 code unit，emoji 可能计 2；不要擅自宣称按“人眼字符”统计。 - **TEXTAREA-R05**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **TEXTAREA-R06**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **TEXTAREA-R07**：【可编辑 / 已填写】白底 白色、正文 正文深灰、边框 边框灰；能输入不等于用主色填满。 - **TEXTAREA-R08**：【悬停 / 聚焦】悬停保持 边框灰；鼠标与键盘聚焦均只将现有 1px 边框改为 主题蓝，不增加外圈、阴影或第二层框。 - **TEXTAREA-R09**：【错误 / 错误聚焦】边框 错误红；说明 错误红 + 明确错误文案，错误边框优先于蓝色聚焦边框，不叠加第二层外框。 - **TEXTAREA-R10**：【只读 / 禁用】只读 白底、正文深灰、边框灰，可选择复制；禁用 浅灰底、禁用灰文字、边框灰，不响应操作。 - **TEXTAREA-R11**：【占位 / 加载】占位 禁用灰，标签仍用 正文深灰；加载图标 主题蓝，值仍 正文深灰，不把值改成占位灰。 - **TEXTAREA-R12**：【组件边界】仅使用实际存在的组件状态；没有操作能力的内容不添加悬停、选中或禁用变色。 - **TEXTAREA-R13**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **TEXTAREA-R14**：输入及选择触发框统一单层矩形：默认 白色 底、正文深灰 14px/400 字、禁用灰 占位、边框灰 边框；聚焦仅原边框 主题蓝，错误 错误红。鼠标点击与键盘进入均不新增外框或阴影。范围日期仅外层容器变边框，内部两个输入不重复画框。 - **TEXTAREA-R15**：输入类反馈成组同步：普通聚焦仅原边框改为主题蓝，普通说明保持辅助深灰；校验失败时边框与就近错误短提示使用错误红，若配置错误图标也同步使用错误红。错误清除时相关视觉与 aria-invalid 一起恢复；不能仅因聚焦就报错，禁用后不触发新校验。当前基础示例不强制增加错误图标，错误含义必须有文字表达。 - **TEXTAREA-R16**：输入族统一直角 0px：普通输入、密码、文本域、自动补全、单选/多选触发框、级联、日期/时间与范围、数字输入及前后缀组合输入；默认/聚焦/错误/只读/禁用均不改变圆角。组合输入外侧和拼接处均不保留小圆角，弹出面板的圆角由面板规范独立定义。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **TEXTAREA-S01**：当前示例采用初始3行、最多100个计数单位并显示计数。初始行数、自动高度及拖动调整属于尺寸或功能配置；未在本页展示的配置不计为已采用样式。 - [ ] **TEXTAREA-S02**：多行换行 / 中文与emoji计数 / 只读 / 禁用灰 / 错误 / 长文本滚动 - [ ] **TEXTAREA-S03**：当前示例核对普通、聚焦与计数文字的公共色值；只读、禁用和业务错误在宿主接入后按条件验收，文本域不套行选中或半选状态。 - [ ] **TEXTAREA-S04**：核对正文14/400、次级操作12/400、标题600及同色深正文；检查实际弹出层和子 span，不能只检查父元素。 - [ ] **TEXTAREA-S05**：宿主接入校验后验收：默认→聚焦→校验失败→再次聚焦仍保留错误→有效纠正→恢复；边框、提示和 aria-invalid 同步。当前基础文本域只有输入与计数，不把此链路标为本页已演示。 - [ ] **TEXTAREA-S06**：检查输入族四角及组合拼接处为0px，包含默认、聚焦、错误、禁用和只读状态。 - [ ] **TEXTAREA-S07**：宿主联合表单接入后验收：输入、下拉、文本域和数字各自校验；修正一项只清除对应错误，错误状态再次聚焦仍无外圈。当前专题基础示例不等于完整业务表单。 - [ ] **TEXTAREA-S08**：宽度联动验收：按输入框专题核对整项与边框口径、同组对齐、长内容、窄容器换行及状态不跳宽。 ### 专题验收重点 中英、换行和 emoji 输入；计数不盖字，粘贴超限保持一致。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html ``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：历史样板规范 68；本次统计口径补充。 - [打开本专题页面](../index.html#spec-textarea) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`textarea`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 可编辑 / 已填写 | 白底 白色、正文 正文深灰、边框 边框灰；能输入不等于用主色填满。 | | 悬停 / 聚焦 | 悬停保持 边框灰；鼠标与键盘聚焦均只将现有 1px 边框改为 主题蓝，不增加外圈、阴影或第二层框。 | | 错误 / 错误聚焦 | 边框 错误红；说明 错误红 + 明确错误文案，错误边框优先于蓝色聚焦边框，不叠加第二层外框。 | | 只读 / 禁用 | 只读 白底、正文深灰、边框灰，可选择复制；禁用 浅灰底、禁用灰文字、边框灰，不响应操作。 | | 占位 / 加载 | 占位 禁用灰，标签仍用 正文深灰；加载图标 主题蓝，值仍 正文深灰，不把值改成占位灰。 | 基础文本域沿用输入框视觉规则；聚焦是自动状态，只读/禁用来自编辑约束，错误来自宿主校验。高度和字数限制不改变这些用色。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [新增账号 · 新增会员申请信息 / 新增代理备注](../../showcase/index.html#create-account) · [场景文档](../../showcase/docs/create-account.md) - [人群标签 · 右侧 · 分组说明](../../showcase/index.html#segments) · [场景文档](../../showcase/docs/segments.md) - [取款审核 · 审核确认 · 备注输入](../../showcase/index.html#withdrawals) · [场景文档](../../showcase/docs/withdrawals.md) - [资料审核 · 拒绝或审核说明输入](../../showcase/index.html#profile-audit) · [场景文档](../../showcase/docs/profile-audit.md) - [账户调整审核 · 审核备注 · 1–100字](../../showcase/index.html#account-audit) · [场景文档](../../showcase/docs/account-audit.md) - [通知管理 · 多语言通知正文](../../showcase/index.html#site-messages) · [场景文档](../../showcase/docs/site-messages.md) - [客服工单管理 · 工单描述与处理补充说明](../../showcase/index.html#tickets) · [场景文档](../../showcase/docs/tickets.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 数值输入、精度和范围 · `numeric` 专题 `numeric` · 输入组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`input-number`。 本页模板直接使用的 Element UI 标签：`el-input-number`。 ### 本页用法与分类 默认用法：普通整数计数可使用带增减按钮的数值输入。本页基础示例为0–10、步长1、整数精度；固定值和比例示例使用独立字符串草稿，真实高精度金额不直接交给基础步进组件计算。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 数值含义（用途） | 整数计数、固定值和比例分别有自己的单位及含义。 | 计数采用基础步进；业务需要固定值或比例时使用下方对应分支，切换不得互相覆盖草稿。 | | 范围、步长、精度（数据约束） | 范围限制可用数值，步长规定每次增减量，精度规定小数位。 | 按字段合同分别传入；本页0–10/步长1及比例0–100%只是示例，不能推广成所有字段规则。 | | 增减按钮（布局配置） | 两侧、右侧与隐藏增减按钮改变操作布局，不改变数值的业务含义。 | 基础示例默认两侧；右侧适合紧凑排列，只保留输入适合直接填写。三种均已展示，隐藏按钮不代表只读；严格步长另按数据约束选择。 | | 边界与校验（自动状态） | 到达上下限后相应按钮禁用；业务校验失败才显示错误。 | 基础步进采用组件的取整与范围约束；下方组合按输入结果给出空值、精度或比例错误，二者不能混称同一校验效果。 | 使用边界：不要按外观选金额输入，也不要把组件自动取整当成业务校验报错。 ### 组件规则 - **NUMERIC-R01**：数值组件声明最小 / 最大 / 步长 / 精度；不把所有金额统一裁成两位小数。输入过程中允许临时未完成态，提交时验证。 - **NUMERIC-R02**：宽度统一参考输入框专题：短计数可沿用当前常规步进框130px且包含增减按钮；真实金额按已分配内容列和完整数值确定，不按0–10示例推广。金额双输入筛选整项576px含标签及分隔，窄容器按端点分行。 - **NUMERIC-R03**：金额、比例、汇率使用十进制字符串或可靠的十进制处理；展示格式与原始值分离。超长编号不是数字输入。 Element InputNumber 基于 JavaScript Number，高精度金额必须另用字符串输入与十进制处理，不能直接用 InputNumber 充当金额引擎。 - **NUMERIC-R04**：增减按钮到边界禁用。基础步进示例为0–10的整数；下方固定值/比例示例使用独立字符串草稿，并校验非负数、最多两位小数及0–100%的比例范围。业务范围的下限大于上限须明确报错，不能静默交换；这项业务配置校验不由基础步进示例提供。 - **NUMERIC-R05**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **NUMERIC-R06**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **NUMERIC-R07**：【可编辑 / 已填写】白底 白色、正文 正文深灰、边框 边框灰；能输入不等于用主色填满。 - **NUMERIC-R08**：【悬停 / 聚焦】悬停保持 边框灰；鼠标与键盘聚焦均只将现有 1px 边框改为 主题蓝，不增加外圈、阴影或第二层框。 - **NUMERIC-R09**：【错误 / 错误聚焦】边框 错误红；说明 错误红 + 明确错误文案，错误边框优先于蓝色聚焦边框，不叠加第二层外框。 - **NUMERIC-R10**：【只读 / 禁用】只读 白底、正文深灰、边框灰，可选择复制；禁用 浅灰底、禁用灰文字、边框灰，不响应操作。 - **NUMERIC-R11**：【占位 / 加载】占位 禁用灰，标签仍用 正文深灰；加载图标 主题蓝，值仍 正文深灰，不把值改成占位灰。 - **NUMERIC-R12**：【组件边界】仅使用实际存在的组件状态；没有操作能力的内容不添加悬停、选中或禁用变色。 - **NUMERIC-R13**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **NUMERIC-R14**：输入及选择触发框统一单层矩形：默认 白色 底、正文深灰 14px/400 字、禁用灰 占位、边框灰 边框；聚焦仅原边框 主题蓝，错误 错误红。鼠标点击与键盘进入均不新增外框或阴影。范围日期仅外层容器变边框，内部两个输入不重复画框。 - **NUMERIC-R15**：输入类反馈成组同步：普通聚焦仅原边框改为主题蓝，普通说明保持辅助深灰；校验失败时边框与就近错误短提示使用错误红，若配置错误图标也同步使用错误红。错误清除时相关视觉与 aria-invalid 一起恢复；不能仅因聚焦就报错，禁用后不触发新校验。当前基础示例不强制增加错误图标，错误含义必须有文字表达。 - **NUMERIC-R16**：输入族统一直角 0px：普通输入、密码、文本域、自动补全、单选/多选触发框、级联、日期/时间与范围、数字输入及前后缀组合输入；默认/聚焦/错误/只读/禁用均不改变圆角。组合输入外侧和拼接处均不保留小圆角，弹出面板的圆角由面板规范独立定义。 - **NUMERIC-R17**：条件改变后，只让当前有效分支参与校验与提交；隐藏或禁用的字段不能带着旧值误提交。各分支草稿分别保留，切换时清除过期错误；清除整组时一并清除草稿。 - **NUMERIC-R18**：数值与单位分离；比例、固定值分别定义精度和范围，不因为共用输入外观而复用业务值。本示例的0–100%与两位小数仅用于演练；实际单位、上限和金额精度必须由业务定义。 - **NUMERIC-R19**：数值输入支持两侧增减、右侧增减和隐藏增减按钮；布局不改变最小值、最大值、步长与精度，隐藏按钮也不是只读。 - **NUMERIC-R20**：严格步长会限制可提交值落在指定步长上；精度限制小数位。它们是数据规则，不是外观样式，必须明确单位及允许范围。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **NUMERIC-S01**：当前基础示例为整数0–10、步长1和两侧增减；补充示例有右侧增减、只保留输入、严格步长2与两位小数时长。下方固定值/比例使用独立草稿。按钮布局与数据约束分别选择，不作为可任意替换的业务类型。 - [ ] **NUMERIC-S02**：上下限 / 空输入 / 非法输入 / 科学计数法 / 负数 / 超出安全整数 - [ ] **NUMERIC-S03**：高精度资金字段不使用 JS Number 做真实计算 - [ ] **NUMERIC-S04**：本页核对数值步进的默认、焦点、上下限禁用和固定值/比例组合的错误提示；只有当前业务分支参与校验，不把列表选中或半选规则套到数值输入。 - [ ] **NUMERIC-S05**：核对正文14/400、次级操作12/400、标题600及同色深正文；检查实际弹出层和子 span，不能只检查父元素。 - [ ] **NUMERIC-S06**：验证完整反馈组合：默认→聚焦→失败→再次聚焦→有效纠正→恢复；检查边框、提示、图标和 aria-invalid 一起变化。 - [ ] **NUMERIC-S07**：检查输入族四角及组合拼接处为0px，包含默认、聚焦、错误、禁用和只读状态。 - [ ] **NUMERIC-S08**：固定值/比例分别输入并来回切换；空值/负数/超精度/比例超上限错误；单位不进入原始数值。 - [ ] **NUMERIC-S09**：宿主联合表单接入后验收：输入、下拉、文本域和数字各自校验；修正一项只清除对应错误，错误状态再次聚焦仍无外圈。当前专题基础示例不等于完整业务表单。 - [ ] **NUMERIC-S10**：宽度联动验收：按输入框专题核对整项与边框口径、同组对齐、长内容、窄容器换行及状态不跳宽。 - [ ] **NUMERIC-S11**：核对两侧、右侧和纯输入布局，以及严格步长与两位精度；各组值独立，0与10边界限制生效。 ### 专题验收重点 基础步进检查0和10的边界、输入后的取整与范围约束；空值与非法文本检查组件实际回显，不把自动约束宣称为业务错误提示。下方组合示例检查空值、负数、超精度与比例超100时的红色提示，以及切换后各分支草稿独立保留。 补充示例核对右侧增减、隐藏按钮、严格步长2和步长0.25/两位精度的独立值及边界，不相互覆盖。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html

范围 0–10，步长 1；当前 {{ numberValue }}

固定值、比例与单位

参考截图用于提取场景结构；切换、校验、撤销等演示行为按本规范定义。查看参考页

``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：本次补充；2026-09-15 参考抽样：https://wt37gq.axshare.com/#g=1&id=i50z9y&p=首存活动。 - [打开本专题页面](../index.html#spec-numeric) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`numeric`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) 自定义示例 `official-number-types` 的实现：[official-types.js](../official-types.js)。 自定义示例 `numeric-mode-pattern` 的实现：[reference-patterns.js](../reference-patterns.js)。 组合样式见 [reference-patterns.css](../reference-patterns.css)；来源及扩展范围见 [参考补充记录](../reference-supplements.md)。 ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 可编辑 / 已填写 | 白底 白色、正文 正文深灰、边框 边框灰；能输入不等于用主色填满。 | | 悬停 / 聚焦 | 悬停保持 边框灰；鼠标与键盘聚焦均只将现有 1px 边框改为 主题蓝，不增加外圈、阴影或第二层框。 | | 错误 / 错误聚焦 | 边框 错误红；说明 错误红 + 明确错误文案，错误边框优先于蓝色聚焦边框，不叠加第二层外框。 | | 只读 / 禁用 | 只读 白底、正文深灰、边框灰，可选择复制；禁用 浅灰底、禁用灰文字、边框灰，不响应操作。 | | 占位 / 加载 | 占位 禁用灰，标签仍用 正文深灰；加载图标 主题蓝，值仍 正文深灰，不把值改成占位灰。 | 固定值与比例是业务用途，范围/步长/精度是数据约束；焦点、边界禁用及校验失败是条件触发的状态，不能按外观任选。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [活动管理 · 编辑活动 · 排序](../../showcase/index.html?example=numeric#campaigns) · [场景文档](../../showcase/docs/campaigns.md) - [广告管理 · 新增/编辑广告 · 排序](../../showcase/index.html?example=advert-editor#adverts) · [场景文档](../../showcase/docs/adverts.md) - [客服工单管理 · 无订单存款工单 · 金额输入](../../showcase/index.html?example=ticket-create#tickets) · [场景文档](../../showcase/docs/tickets.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 单选下拉与选项状态 · `select` 专题 `select` · 选择组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`select`、`option`、`option-group`。 本页模板直接使用的 Element UI 标签：`el-option`、`el-option-group`、`el-select`。 ### 本页用法与分类 默认用法：一个字段只允许一个值时使用普通单选下拉。未选显示“请选择”，默认值由业务传入；只有范围确实包含所有对象时才提供“全部”，不把它当通用默认值。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 选择数量（用途） | 单选只保留一个值。 | 本页用于单选；允许多个值并存时参考多选专题，不把单选/多选当配色差异。 | | 搜索、清除、分组（功能配置） | 搜索帮助找候选，清除回到未选，分组组织已有候选。 | 本页左侧演示搜索和清除，右侧演示分组。按候选规模及是否允许空值决定，不要求每个下拉都同时配置。 | | 关联字段（业务组合） | 下拉结果决定后续应填写的内容。 | 本页下方按链接、页面或不跳转显示不同目标内容；仅当前分支参与校验和结果，不增加另一套下拉样式。 | | 选中、定位与错误（自动状态） | 当前值、键盘定位、禁用项和校验错误含义不同。 | 选择后保留已选标记；方向键只移动候选焦点；受限项禁用，真实校验失败才显示红边。 | 使用边界：不要默认给所有业务增加“全部”，也不要把库的远程搜索、创建新项等能力直接列为本后台已采用。 ### 组件规则 - **SELECT-R01**：闭合态显示当前选择；未选择占位统一“请选择”，默认范围为全部时显示“全部”。无选择与全部是不同语义，默认值由宿主传入；字段标签须独立可见。展开层提供当前选中、悬停、禁用。 - **SELECT-R02**：触发框宽度统一参考输入框专题，填满字段所在内容列；普通筛选整项280px包含标签和8px间距。长已选名称不撑宽触发框，候选面板容纳选项且不得超出视口；不因清除图标或箭头显隐改变外宽。 - **SELECT-R03**：沿用 Element Select 键盘模式，方向键移动候选、回车键 确认、退出键 关闭；补充宿主焦点回返与读屏验证。禁用项不可选。 - **SELECT-R04**：空选项 / 搜索无结果 / 加载失败分别提示；选中项文本过长时折行或补全文，不撑破弹层。 - **SELECT-R05**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **SELECT-R06**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **SELECT-R07**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **SELECT-R08**：输入及选择触发框统一单层矩形：默认 白色 底、正文深灰 14px/400 字、禁用灰 占位、边框灰 边框；聚焦仅原边框 主题蓝，错误 错误红。鼠标点击与键盘进入均不新增外框或阴影。范围日期仅外层容器变边框，内部两个输入不重复画框。 - **SELECT-R09**：输入类反馈成组同步：普通聚焦仅原边框改为主题蓝，普通说明保持辅助深灰；校验失败时边框与就近错误短提示使用错误红，若配置错误图标也同步使用错误红。错误清除时相关视觉与 aria-invalid 一起恢复；不能仅因聚焦就报错，禁用后不触发新校验。当前基础示例不强制增加错误图标，错误含义必须有文字表达。 - **SELECT-R10**：输入族统一直角 0px：普通输入、密码、文本域、自动补全、单选/多选触发框、级联、日期/时间与范围、数字输入及前后缀组合输入；默认/聚焦/错误/只读/禁用均不改变圆角。组合输入外侧和拼接处均不保留小圆角，弹出面板的圆角由面板规范独立定义。 - **SELECT-R11**：条件改变后，只让当前有效分支参与校验与提交；隐藏或禁用的字段不能带着旧值误提交。各分支草稿分别保留，切换时清除过期错误；清除整组时一并清除草稿。 - **SELECT-R12**：指定链接显示链接输入，指定页面显示对象选择，不跳转不要求目标；当前目标错误时红边与红提示同步。链接协议、可信域及对象权限以实际业务合同校验。 - **SELECT-R13**：【触发框】白底、正文深灰、边框灰；占位禁用灰；聚焦仅原边框主题蓝，不叠加外圈。 - **SELECT-R14**：【候选项与选中项】普通项正文深灰；悬停或键盘定位用浅灰背景；已选项用选中浅蓝底、操作蓝文字和已选语义。 - **SELECT-R15**：【禁用】整个控件禁用时使用浅灰背景、禁用灰和边框灰；单项禁用只影响该项，保留已选值但不能重新触发。 - **SELECT-R16**：【错误与无结果】真实表单校验失败时触发框与短提示同步错误红；没有候选项时显示空值灰提示，不伪造加载失败。 - **SELECT-R17**：【远程加载】仅远程候选项请求时显示主题蓝加载图标；失败显示错误红短提示及操作蓝重试，已有选值保持可读。 - **SELECT-R18**：【组件边界】单选下拉没有半选横线和复选方框；已选值、菜单高亮和输入焦点是三个不同状态。 - **SELECT-R19**：远程检索与允许创建条目是额外数据能力，不等于本地filterable搜索。本页已有本地筛选；真实远程需接入加载、失败与重试，创建新值必须获得业务允许并校验唯一性后采用，当前未实现这两项业务能力。 - **SELECT-R20**：填写区只保留影响操作的格式、限制、必填或错误说明；不逐字段重复“本地演示、不代表正式数据”等提示。原型数据保存范围、接口与未接入能力集中记录在规范文档，不写进业务操作文案。 - **SELECT-R21**：指定链接使用可解析的HTTPS主机地址；只有问号/井号、缺主机、空白等格式不算有效。校验只作用于当前分支，不能把格式通过称为目标可访问。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **SELECT-S01**：当前示例核对单选、本地搜索、清除、禁用选项及分组选择；下方核对选择结果与目标字段联动。远程搜索和创建新选项未在本页演示，不计为本后台已采用功能。 - [ ] **SELECT-S02**：单选清除表示回到未选值；折叠已选标签属于多选配置，转到“多选、搜索与折叠展示”核对，不作为本页的另一款单选样式。 - [ ] **SELECT-S03**：当前核对默认具体值、全部、清除与本地搜索无匹配；无选项、加载中、远程失败和响应竞态按宿主实际接入能力另验，不计为本地搜索已具备。 - [ ] **SELECT-S04**：本页核对触发框焦点、选项悬停、已选项和禁用项，以及下方目标字段的校验错误。已选与悬停叠加按选项规范处理，错误规则只作用于真实校验失败的字段。 - [ ] **SELECT-S05**：核对正文14/400、次级操作12/400、标题600及同色深正文；检查实际弹出层和子 span，不能只检查父元素。 - [ ] **SELECT-S06**：验证完整反馈组合：默认→聚焦→失败→再次聚焦→有效纠正→恢复；检查边框、提示、图标和 aria-invalid 一起变化。 - [ ] **SELECT-S07**：检查输入族四角及组合拼接处为0px，包含默认、聚焦、错误、禁用和只读状态。 - [ ] **SELECT-S08**：链接/页面/不跳转三分支；空值及非法链接失败；切换移除旧错误；其他分支草稿不参与当前结果。 - [ ] **SELECT-S09**：宿主联合表单接入后验收：输入、下拉、文本域和数字各自校验；修正一项只清除对应错误，错误状态再次聚焦仍无外圈。当前专题基础示例不等于完整业务表单。 - [ ] **SELECT-S10**：宽度联动验收：按输入框专题核对整项与边框口径、同组对齐、长内容、窄容器换行及状态不跳宽。 ### 专题验收重点 方向键、禁用项与选择持久显示；“全部”不能强加给业务。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html

选择方式决定下一项内容

参考截图用于提取场景结构；切换、校验、撤销等演示行为按本规范定义。查看参考页

``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：历史样板规范 36；本次键盘与异常态补充；2026-09-15 参考抽样：https://ztqpvr.axshare.com/#id=8ff79v&p=系统公告&g=1。 - [打开本专题页面](../index.html#spec-select) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`select`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) 自定义示例 `destination-pattern` 的实现：[reference-patterns.js](../reference-patterns.js)。 组合样式见 [reference-patterns.css](../reference-patterns.css)；来源及扩展范围见 [参考补充记录](../reference-supplements.md)。 ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 触发框 | 白底、正文深灰、边框灰；占位禁用灰；聚焦仅原边框主题蓝，不叠加外圈。 | | 候选项与选中项 | 普通项正文深灰；悬停或键盘定位用浅灰背景；已选项用选中浅蓝底、操作蓝文字和已选语义。 | | 禁用 | 整个控件禁用时使用浅灰背景、禁用灰和边框灰；单项禁用只影响该项，保留已选值但不能重新触发。 | | 错误与无结果 | 真实表单校验失败时触发框与短提示同步错误红；没有候选项时显示空值灰提示，不伪造加载失败。 | | 远程加载 | 仅远程候选项请求时显示主题蓝加载图标；失败显示错误红短提示及操作蓝重试，已有选值保持可读。 | 单选下拉没有半选横线和复选方框；已选值、菜单高亮和输入焦点是三个不同状态。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [会员列表 · 筛选区状态、会员等级等下拉](../../showcase/index.html#members) · [场景文档](../../showcase/docs/members.md) - [会员详情 · 详情编辑中枚举字段下拉](../../showcase/index.html#member-detail) · [场景文档](../../showcase/docs/member-detail.md) - [新增账号 · 新增表单 · 商户、性别、代理配置下拉](../../showcase/index.html#create-account) · [场景文档](../../showcase/docs/create-account.md) - [存款记录 · 筛选区渠道、状态等下拉](../../showcase/index.html#deposits) · [场景文档](../../showcase/docs/deposits.md) - [账户调整审核 · 筛选调整类型、方式等下拉](../../showcase/index.html#account-audit) · [场景文档](../../showcase/docs/account-audit.md) - [活动管理 · 活动类型、状态等下拉](../../showcase/index.html#campaigns) · [场景文档](../../showcase/docs/campaigns.md) - [广告管理 · 设备、状态及投放位置下拉](../../showcase/index.html#adverts) · [场景文档](../../showcase/docs/adverts.md) - [公告管理 · 公告设备、状态等下拉](../../showcase/index.html#notifications) · [场景文档](../../showcase/docs/notifications.md) - [通知管理 · 通知类型、设备、发送范围下拉](../../showcase/index.html#site-messages) · [场景文档](../../showcase/docs/site-messages.md) - [操作日志 · 日志类型、结果等下拉](../../showcase/index.html#logs) · [场景文档](../../showcase/docs/logs.md) - [运营总览 · 指标、口径等选项](../../showcase/index.html#overview) · [场景文档](../../showcase/docs/overview.md) - [客服工单管理 · 工单类型、支付方式等下拉](../../showcase/index.html#tickets) · [场景文档](../../showcase/docs/tickets.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 多选、搜索与折叠展示 · `multi` 专题 `multi` · 选择组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 本专题为基础规则、同一组件的补充场景或组合模式，不作为独立的 Element UI 官方组件声明。 本页模板直接使用的 Element UI 标签：`el-option`、`el-select`。 ### 本页用法与分类 默认用法：多个值允许同时成立时使用多选下拉。本页采用本地搜索、清除和已选标签折叠；下方“已选”文字用于核对完整选择集合。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 多值选择（用途） | 一次保存多个独立选择，已选标签代表值。 | 仅允许一个值时用单选；普通业务状态不放进已选标签集合。 | | 搜索与清除（功能配置） | 搜索缩小候选范围；关闭一项或清空改变选择集合。 | 本页支持这些功能；搜索无匹配也保留已选项，取消一项不影响其他项。 | | 标签折叠（展示配置） | 折叠只减少输入框内展示的标签数量。 | 本页已启用折叠，保留首项并将其余数量记为+N；这不是按容器宽度临时选择的另一种样式。 | | 已选、无匹配与禁用（自动状态） | 候选高亮和无匹配随选择/搜索产生，禁用由限制条件决定。 | 按真实结果显示；无匹配不等于请求失败。本页没有远程请求、创建新项或分组全选控件。 | 使用边界：不要把+N当成第三种多选皮肤，也不要把取消已选标签标成删除业务记录。 ### 组件规则 - **MULTI-R01**：多选允许多个值并存；标签用于已选项，不代替业务状态。本页已启用标签折叠：保留首项，其余数量显示为+N；折叠不改变已选集合，也不是由容器宽度自动切换。 - **MULTI-R02**：触发框宽度统一参考输入框专题，不随已选数量增长而横向撑开。当前+N折叠在既定内容列内展示；未折叠模式如需接入，应让标签换行并按高度规则增长，不能另加输入宽度。 - **MULTI-R03**：搜索只过滤候选项，不清空已选值；无匹配显示明确结果。隐藏候选仍保留选择。 - **MULTI-R04**：移除只影响该项；标签关闭按钮有名称。组件允许清除能力，不强制给所有业务增加“清空”工具栏。 - **MULTI-R05**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **MULTI-R06**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **MULTI-R07**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **MULTI-R08**：输入及选择触发框统一单层矩形：默认 白色 底、正文深灰 14px/400 字、禁用灰 占位、边框灰 边框；聚焦仅原边框 主题蓝，错误 错误红。鼠标点击与键盘进入均不新增外框或阴影。范围日期仅外层容器变边框，内部两个输入不重复画框。 - **MULTI-R09**：输入类反馈成组同步：普通聚焦仅原边框改为主题蓝，普通说明保持辅助深灰；校验失败时边框与就近错误短提示使用错误红，若配置错误图标也同步使用错误红。错误清除时相关视觉与 aria-invalid 一起恢复；不能仅因聚焦就报错，禁用后不触发新校验。当前基础示例不强制增加错误图标，错误含义必须有文字表达。 - **MULTI-R10**：输入族统一直角 0px：普通输入、密码、文本域、自动补全、单选/多选触发框、级联、日期/时间与范围、数字输入及前后缀组合输入；默认/聚焦/错误/只读/禁用均不改变圆角。组合输入外侧和拼接处均不保留小圆角，弹出面板的圆角由面板规范独立定义。 - **MULTI-R11**：【触发框与标签】白底、正文深灰、边框灰；聚焦仅原边框主题蓝；已选标签使用选中浅蓝底和操作蓝文字。 - **MULTI-R12**：【候选项】普通项正文深灰，悬停或键盘定位浅灰背景；已选项选中浅蓝底、操作蓝文字并保留已选标记。 - **MULTI-R13**：【移除与清空】关闭选择标签表示取消该选择，使用普通操作蓝；不是删除已保存业务对象，不自动套用错误红危险动作。 - **MULTI-R14**：【禁用】控件或具体选项禁用使用禁用灰，已选标签保留内容；禁用项不可关闭，不能因搜索变回可选。 - **MULTI-R15**：【错误与查询】校验失败时触发框和短提示同步错误红；无匹配为空值灰，远程加载用主题蓝图标，失败才用错误红。 - **MULTI-R16**：【组件边界】多选下拉以标签和已选标记表达多个值；只有另设分组全选复选框才存在半选，不给每个已选标签加半选横线。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **MULTI-S01**：当前示例核对单项、多项与+N折叠展示；最大可选数量和创建新选项未在本页配置，不计为已采用功能。 - [ ] **MULTI-S02**：当前示例核对删除单项、清空、退格删除与搜索后保留选择；不可删除项仅在宿主实际配置后验收。 - [ ] **MULTI-S03**：接入验收：长标签与重名不同标识；若业务另加全选，须明确作用域及过滤后的选择语义。本页没有分组全选控件，不把半选作为多选标签的样式。 - [ ] **MULTI-S04**：本页核对触发框焦点、选项已选与悬停、已选标签和清空反馈；业务必填错误及禁用条件在宿主接入后验收，不把标签折叠视为半选状态。 - [ ] **MULTI-S05**：核对正文14/400、次级操作12/400、标题600及同色深正文；检查实际弹出层和子 span，不能只检查父元素。 - [ ] **MULTI-S06**：宿主接入多选必填等校验后，核对失败、再次聚焦、有效纠正和恢复，边框/提示/aria-invalid同步。当前本地多选示例没有独立业务校验流程。 - [ ] **MULTI-S07**：检查输入族四角及组合拼接处为0px，包含默认、聚焦、错误、禁用和只读状态。 - [ ] **MULTI-S08**：宽度联动验收：按输入框专题核对整项与边框口径、同组对齐、长内容、窄容器换行及状态不跳宽。 ### 专题验收重点 选中后搜索无结果，选择仍在；移除一项不丢其他项。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html

已选：{{ multiValues.join(' / ') || '无' }}

``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：历史样板规范 30；本次交互补全。 - [打开本专题页面](../index.html#spec-multi) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`multi`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 触发框与标签 | 白底、正文深灰、边框灰；聚焦仅原边框主题蓝；已选标签使用选中浅蓝底和操作蓝文字。 | | 候选项 | 普通项正文深灰，悬停或键盘定位浅灰背景；已选项选中浅蓝底、操作蓝文字并保留已选标记。 | | 移除与清空 | 关闭选择标签表示取消该选择，使用普通操作蓝；不是删除已保存业务对象，不自动套用错误红危险动作。 | | 禁用 | 控件或具体选项禁用使用禁用灰，已选标签保留内容；禁用项不可关闭，不能因搜索变回可选。 | | 错误与查询 | 校验失败时触发框和短提示同步错误红；无匹配为空值灰，远程加载用主题蓝图标，失败才用错误红。 | 多选下拉以标签和已选标记表达多个值；只有另设分组全选复选框才存在半选，不给每个已选标签加半选横线。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [会员列表 · 筛选区会员标签等多选条件](../../showcase/index.html#members) · [场景文档](../../showcase/docs/members.md) - [新增账号 · 新增总代 · 多币种/终端选择](../../showcase/index.html#create-account) · [场景文档](../../showcase/docs/create-account.md) - [活动管理 · 编辑活动 · 参与范围/标签多选](../../showcase/index.html#campaigns) · [场景文档](../../showcase/docs/campaigns.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 单选、复选与半选 · `checks` 专题 `checks` · 选择组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`radio`、`radio-group`、`radio-button`、`checkbox`、`checkbox-group`、`checkbox-button`。 本页模板直接使用的 Element UI 标签：`el-checkbox`、`el-checkbox-button`、`el-checkbox-group`、`el-divider`、`el-radio`、`el-radio-button`、`el-radio-group`。 ### 本页用法与分类 默认用法：少量互斥选项默认用普通单选圆点；允许并存默认用普通复选方框。先决定选择规则，再决定是否需要本页演示的按钮式呈现。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 选择数量（用途） | 单选只能选一个，复选可以同时选多个。 | 由业务约束决定，不能因为更喜欢圆点或方框而互换。 | | 普通与按钮式（呈现方式） | 按钮式只改变选项的呈现，不改变单选或复选规则。 | 默认用普通标记；明确需要把简短选项连续展示为一组按钮时才用本页按钮式呈现，同组保持一致。 | | 分组与全选（功能配置） | 组名、全选和受限项处理组织同一组候选。 | 项目较多时按真实分组组织；全选只作用于声明的可选项目，不能选中禁用项。 | | 已选、半选与禁用（自动状态） | 已选来自当前值；半选由部分子项选中计算；禁用来自条件限制。 | 半选只用于分组复选，不是可任选标记；选择变化后自动更新，单选没有半选。 | 使用边界：不要把单选、复选、按钮式、半选列为四款任选样式。 ### 组件规则 - **CHECKS-R01**：先按业务数量约束选择单选或复选：互斥项默认用普通单选，可并存项默认用普通复选。按钮式只是呈现方式，不改变选择规则；组名、每项标签和禁用原因均须可读取。 - **CHECKS-R02**：复选覆盖未勾选、已勾选、半选和禁用状态。全选仅作用于明确作用域，不暗示全库数据已选。 - **CHECKS-R03**：半选反映子项部分选中；点击全选后全部选中，再点清除当前组。 - **CHECKS-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **CHECKS-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **CHECKS-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **CHECKS-R07**：单选和复选的焦点跟随圆点、方框或按钮式选项；组级必选校验由宿主表单提供，就近显示错误红文字并关联组名。不要给整组选项套输入框蓝边或错误红框；禁用项不参与新操作，修正后清除对应组的错误。 - **CHECKS-R08**：密集选择用组名组织，组内保持正常文字与行距；全选/半选只统计可选项目，禁用项不因全选变为可用。选项帮助就近展示，长组选项区滚动，底部说明与确认保持可见。 - **CHECKS-R09**：条件改变后，只让当前有效分支参与校验与提交；隐藏或禁用的字段不能带着旧值误提交。各分支草稿分别保留，切换时清除过期错误；清除整组时一并清除草稿。 - **CHECKS-R10**：【未选】选择标记白底、边框灰，标签正文深灰；悬停不擅自改变选择值或给整行填选中浅蓝。 - **CHECKS-R11**：【单选与复选】单选圆标记与复选方框使用主题蓝；单选保留白色圆点，复选保留白色对勾。 - **CHECKS-R12**：【半选】仅分组复选的部分选中使用主题蓝方框和白色横线；不能将半选表示为单选圆点。 - **CHECKS-R13**：【键盘与禁用】可操作标记的键盘焦点使用操作蓝轮廓；禁用标记浅灰背景、边框灰，标签禁用灰，并保留选中形状。 - **CHECKS-R14**：【组级校验】仅有必选组约束并校验失败时显示错误红短提示；不把整个组伪装成红色输入框。 - **CHECKS-R15**：【组件边界】单选圆点、复选对勾和半选横线分别定义；单选没有半选。此组件没有输入触发框、候选项加载或无结果态。 - **CHECKS-R16**：带补充说明的选项分为两行：字段名称14px/400/21px，说明12px/400/18px、辅助深灰，间隔4px；复选框对齐字段名称第一行，不能下沉到说明旁。选中只改变适用状态颜色，不改变字号或字重。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **CHECKS-S01**：先分别核对单选与复选的选择规则，再核对普通标记与按钮式呈现；按钮式不改变单选/复选含义，半选不是另一种呈现方式。 - [ ] **CHECKS-S02**：当前核对全选、半选及受限禁用项；已勾选且禁用、最少/最多可选数量仅在宿主实际配置后验收，本页不声明已有这些完整示例。 - [ ] **CHECKS-S03**：组内方向键；组级标签；默认值 / 受控更新 / 清除 - [ ] **CHECKS-S04**：本页核对普通与按钮式单选/复选的选中、半选、悬停、键盘焦点和禁用项隔离。当前未接入组级必填校验，不按矩形输入框套红边规则。 - [ ] **CHECKS-S05**：核对正文14/400、次级操作12/400、标题600及同色深正文；检查实际弹出层和子 span，不能只检查父元素。 - [ ] **CHECKS-S06**：检查单选切换、复选半选/全选和禁用项隔离；宿主配置必选校验后，另验组级错误提示、关联名称及修正恢复，不按矩形输入框验收。 - [ ] **CHECKS-S07**：当前分组示例核对部分选择半选、全选/取消排除受限项及禁用原因可读；长组滚动在宿主提供长列表后验收。 - [ ] **CHECKS-S08**：关联验收：单行选项在本页检查；带说明的双行选项到列设置和导出专题检查名称14px、说明12px及首行对齐。选择状态不改变字号或字重。 ### 专题验收重点 部分选中→半选；全选→全部勾选；禁用灰 不随全选误改变。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html 选项 A 选项 B 禁用项 全选本组

按钮式选项：左侧仍为单选，右侧仍为复选；只改变呈现方式，不改变可选数量。

分组复选与受限选项

参考截图用于提取场景结构；切换、校验、撤销等演示行为按本规范定义。查看参考页

``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：历史样板规范 67；2026-09-15 参考抽样：https://resycb.axshare.com/#id=u80zov&p=会员列表c&g=1。 - [打开本专题页面](../index.html#spec-checks) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`checks`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) 自定义示例 `grouped-checks-pattern` 的实现：[reference-patterns.js](../reference-patterns.js)。 组合样式见 [reference-patterns.css](../reference-patterns.css)；来源及扩展范围见 [参考补充记录](../reference-supplements.md)。 ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 未选 | 选择标记白底、边框灰，标签正文深灰；悬停不擅自改变选择值或给整行填选中浅蓝。 | | 单选与复选 | 单选圆标记与复选方框使用主题蓝；单选保留白色圆点，复选保留白色对勾。 | | 半选 | 仅分组复选的部分选中使用主题蓝方框和白色横线；不能将半选表示为单选圆点。 | | 键盘与禁用 | 可操作标记的键盘焦点使用操作蓝轮廓；禁用标记浅灰背景、边框灰，标签禁用灰，并保留选中形状。 | | 组级校验 | 仅有必选组约束并校验失败时显示错误红短提示；不把整个组伪装成红色输入框。 | 单选圆点、复选对勾和半选横线分别定义；单选没有半选。此组件没有输入触发框、候选项加载或无结果态。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [会员列表 · 会员列表首列勾选与表头全选](../../showcase/index.html#members) · [场景文档](../../showcase/docs/members.md) - [新增账号 · 新增总代 · 所属币种与终端复选](../../showcase/index.html#create-account) · [场景文档](../../showcase/docs/create-account.md) - [取款审核 · 审核列表首列与批量选择](../../showcase/index.html#withdrawals) · [场景文档](../../showcase/docs/withdrawals.md) - [账户调整审核 · 账户调整列表 · 单选与批量勾选](../../showcase/index.html#account-audit) · [场景文档](../../showcase/docs/account-audit.md) - [广告管理 · 广告列表 · 勾选与批量删除](../../showcase/index.html#adverts) · [场景文档](../../showcase/docs/adverts.md) - [公告管理 · 公告勾选与自动弹窗类型选择](../../showcase/index.html#notifications) · [场景文档](../../showcase/docs/notifications.md) - [通知管理 · 消息勾选、发送设备等复选](../../showcase/index.html#site-messages) · [场景文档](../../showcase/docs/site-messages.md) - [推广报表 · 日报 · 报表列设置内字段勾选](../../showcase/index.html#reports) · [场景文档](../../showcase/docs/reports.md) - [推广报表 · 报表列设置内字段勾选](../../showcase/index.html#agents) · [场景文档](../../showcase/docs/agents.md) - [运营总览 · 指标或比较项勾选](../../showcase/index.html#overview) · [场景文档](../../showcase/docs/overview.md) - [客服工单管理 · 工单条件与订单选择](../../showcase/index.html#tickets) · [场景文档](../../showcase/docs/tickets.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 开关与异步反馈 · `switch` 专题 `switch` · 选择组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`switch`。 本页模板直接使用的 Element UI 标签：`el-switch`。 ### 本页用法与分类 默认用法：真实二元值使用开关，默认沿用同一套轨道和圆钮。本页演示本地开启/关闭及禁用；是否立即保存由所在业务定义，本页不连接保存接口。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 二元值（用途） | 开关表示一个持续存在的开启/关闭值。 | 需要切换二元设置时使用；一次性执行任务使用动作按钮。 | | 保存时机（业务流程） | 立即保存或随表单确认保存决定何时写入结果。 | 沿用宿主已定义的流程；本页只有本地切换，不能把异步保存当作可直接选择的外观。 | | 开启、关闭与禁用（自动状态） | 位置、轨道颜色及状态文字跟随值和可操作条件。 | 根据真实值更新；禁用保留当前开关位置，不能为了配色而改值。 | | 请求中与失败（接入后状态） | 锁定、失败提示及回滚由实际保存请求产生。 | 仅接入保存后按请求结果触发；本地演示不伪造加载、成功或失败。 | 使用边界：不要把开启蓝色当业务成功，也不要把禁用或请求中当成可选开关皮肤。 ### 组件规则 - **SWITCH-R01**：开关表达二元状态，不代替一次性执行按钮。可见状态文案与 aria-checked 一致。 - **SWITCH-R02**：接入真实保存后，保存中锁定，成功确认新值，失败按提交策略回滚并说明；立即保存还是随表单确认由业务决定。当前本地示例没有保存请求。 - **SWITCH-R03**：本例为本地状态切换，不接入业务。空格键 / 回车键 可操作，禁用态不可切换。 - **SWITCH-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **SWITCH-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **SWITCH-R06**：【关闭 / 开启】关闭轨道 边框灰、开启 主题蓝、圆钮 白色；开启表示选择，不表示业务成功。 - **SWITCH-R07**：【悬停 / 聚焦】悬停不额外换色；键盘 操作蓝 轮廓。 - **SWITCH-R08**：【请求中 / 失败】仅接入真实保存请求后：保持当前提交策略的开关位置，主题蓝加载标记并防重复；失败回滚，显示错误红说明及适用图标。本页本地开关不触发该流程。 - **SWITCH-R09**：【禁用】轨道 浅灰背景、钮 边框灰、标签 禁用灰；保留位置区别，不能点击。 - **SWITCH-R10**：【组件边界】仅使用实际存在的组件状态；没有操作能力的内容不添加悬停、选中或禁用变色。 - **SWITCH-R11**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **SWITCH-S01**：当前示例：本地开关的开启/关闭/禁用，状态文字与 aria-checked 一致。 - [ ] **SWITCH-S02**：接入验收：开启值和关闭值可映射字符串或数值，不能依赖显示文字作为数据值。 - [ ] **SWITCH-S03**：接入验收：键盘切换、保存中锁定、失败回滚并说明；当前本地开关未接入远程保存。 - [ ] **SWITCH-S04**：接入验收：明确立即保存或确认后保存；禁用阻止切换，普通只读展示不冒充可操作开关。 ### 专题验收重点 键盘可切换；状态文字和 aria-checked 同步。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html
``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：历史样板规范 66。 - [打开本专题页面](../index.html#spec-switch) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`switch`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 关闭 / 开启 | 关闭轨道 边框灰、开启 主题蓝、圆钮 白色；开启表示选择，不表示业务成功。 | | 悬停 / 聚焦 | 悬停不额外换色；键盘 操作蓝 轮廓。 | | 请求中 / 失败 | 仅接入真实保存请求后：保持当前提交策略的开关位置，主题蓝加载标记并防重复；失败回滚，显示错误红说明及适用图标。本页本地开关不触发该流程。 | | 禁用 | 轨道 浅灰背景、钮 边框灰、标签 禁用灰；保留位置区别，不能点击。 | 仅使用实际存在的组件状态；没有操作能力的内容不添加悬停、选中或禁用变色。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [公告管理 · 弹窗设置 · 自动弹窗开关](../../showcase/index.html#notifications) · [场景文档](../../showcase/docs/notifications.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 日期、时间与范围 · `date` 专题 `date` · 选择组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`date-picker`、`time-select`、`time-picker`。 本页模板直接使用的 Element UI 标签：`el-date-picker`、`el-time-picker`、`el-time-select`。 ### 本页用法与分类 默认用法：先按要填写的数据确定类型：只记录一天用单日期；需要起止且精确到时间用日期时间范围。各类型沿用同一套矩形触发框与文字规范，不先挑面板外观。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 日期与时间内容（用途） | 单日期、日期/月份/日期时间范围、单独时间，以及年/月/周精度用于不同数据。 | 上方演示单日期、日期时间范围、任意时间和固定时间；下方补充年、月、周、日期范围和月份范围。按实际字段需要的精度选用；只需时间时再决定是否限定固定时段。 | | 精度、步长与边界（数据约束） | 是否到秒、可选时段、默认起止时间和时区决定值的含义。 | 按业务合同设置；本页固定时间以30分钟为间隔，日期时间范围展示到秒，不推广成所有字段的固定参数。 | | 有效期方式（业务组合） | 永久有效与指定时间决定是否需要日期范围。 | 指定时间才填写完整起止；永久有效时保留草稿但不参与提交。它不是另一套日期组件皮肤。 | | 焦点、选区与错误（自动状态） | 今天、已选起止、区间、禁选和错误各有触发条件。 | 根据日期与用户操作自动显示；不能手工选成“范围浅蓝款”或“错误红框款”。 | | 日期精度 | 单日、周、月、年与日期/月份/日期时间范围表示不同精度。 | 按查询或配置需要的精度选择；月份不填成某一天，周的起止与跨年归属由业务确定。 | 使用边界：不要将数据类型、面板范围、精度和自动状态混列成几种任选样式；库支持的类型不等于本后台已采用。 ### 组件规则 - **DATE-R01**：按提交内容区分单日期、单时间、日期时间及范围；范围明确起点和终点，精度由业务传入。各类型仍复用公共矩形触发框、字体与字色，不按用途另建一套视觉风格。 - **DATE-R02**：时间宽度与口径统一参考输入框专题：当前日期/日期时间范围控件最外框400px，不含标签；筛选整项为实际标签宽+8px+400px。它已替代旧日期整项576px及以单段204px推导总宽的说法。完整日期时间含秒不省略，窄容器放不下时先换行，再将范围两端分行展示。 - **DATE-R03**：支持禁选范围、快捷项、清除、取消、确认的适用性合同；结束早于开始时报错。时区由宿主明确，组件不能自行猜测。 - **DATE-R04**：当前使用 Element UI 2.15.6 的日期与时间组件；本页展示单日期、年、月、周、日期范围、月份范围、日期时间范围、任意时间和固定时间选项。多日期等其他配置未在本页展示；规范样例不直接等于业务已采用清单；历史双月面板尺寸也不能套到所有类型。 - **DATE-R05**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **DATE-R06**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **DATE-R07**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **DATE-R08**：输入及选择触发框统一单层矩形：默认 白色 底、正文深灰 14px/400 字、禁用灰 占位、边框灰 边框；聚焦仅原边框 主题蓝，错误 错误红。鼠标点击与键盘进入均不新增外框或阴影。范围日期仅外层容器变边框，内部两个输入不重复画框。 - **DATE-R09**：输入类反馈成组同步：普通聚焦仅原边框改为主题蓝，普通说明保持辅助深灰；校验失败时边框与就近错误短提示使用错误红，若配置错误图标也同步使用错误红。错误清除时相关视觉与 aria-invalid 一起恢复；不能仅因聚焦就报错，禁用后不触发新校验。当前基础示例不强制增加错误图标，错误含义必须有文字表达。 - **DATE-R10**：输入族统一直角 0px：普通输入、密码、文本域、自动补全、单选/多选触发框、级联、日期/时间与范围、数字输入及前后缀组合输入；默认/聚焦/错误/只读/禁用均不改变圆角。组合输入外侧和拼接处均不保留小圆角，弹出面板的圆角由面板规范独立定义。 - **DATE-R11**：条件改变后，只让当前有效分支参与校验与提交；隐藏或禁用的字段不能带着旧值误提交。各分支草稿分别保留，切换时清除过期错误；清除整组时一并清除草稿。 - **DATE-R12**：指定时间必填完整起止范围；永久有效时日期禁用且不参与提交。定时启用、定时停用、置顶有效期属于不同字段，不能互相覆盖；时区与时间边界由业务声明。 - **DATE-R13**：【输入与焦点】白底、正文深灰、边框灰；占位禁用灰；聚焦只变单层原边框为主题蓝，范围内部输入不重复加框。 - **DATE-R14**：【日期与范围】普通日期正文深灰；悬停浅灰背景；选中起止日主题蓝底白字，范围中间选中浅蓝；今天用操作蓝文字。 - **DATE-R15**：【时间与快捷项】已选时间或快捷项使用操作蓝与明确选中语义；键盘定位使用浅灰背景，不能套复选或按钮按下位移。 - **DATE-R16**：【禁用与只读】不可选日期/时间使用禁用灰且不可提交；整个禁用框浅灰背景；只读值保持正文深灰和复制能力。 - **DATE-R17**：【范围错误】真实格式或起止范围校验失败时，原边框和错误短提示共同错误红；错误优先于聚焦蓝，纠正后恢复。 - **DATE-R18**：【组件边界】日期/时间选择没有勾选框或半选横线；范围的起点、终点和区间是独立视觉角色。日期不可选也不等于加载失败。 - **DATE-R19**：日期精度区分单日、周、月、年、日期范围、月份范围和日期时间范围；按业务所需精度选择，周的起止与跨年归属由业务明确。2.15.6中已核对的类型才可用于本运行样例。 - **DATE-R20**：多日期、周与月份按精度选用；当前运行例补充月份/年份/周及两类范围。官方后续版本的多月/多年等配置须先核对固定版本，不从当前官方目录推定2.15.6全部支持。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **DATE-S01**：接入验收按实际配置核对年、月、周、单日、多日、日期范围、月份范围、日期时间及日期时间范围；本页未提供的类型不计为已演示。 - [ ] **DATE-S02**：接入验收按实际配置核对面板选项、不可选日期、快捷范围、默认时间、提交值格式及左右面板独立切换。 - [ ] **DATE-S03**：跨月 / 跨年 / 闰日 / 最小最大日期 / 空值 / 时区与夏令时宿主转换 - [ ] **DATE-S04**：接入验收按实际能力核对任意时间选择器的单值与范围、固定步长时间列表，以及只读、禁用和清除；本页未提供的类型不计为已演示。 - [ ] **DATE-S05**：本页核对触发框焦点、今天、选中日期/区间、不可选日期和清除；下方指定有效期缺少完整范围时才使用错误反馈。已选区间与悬停叠加按日期面板规则处理。 - [ ] **DATE-S06**：核对正文14/400、次级操作12/400、标题600及同色深正文；检查实际弹出层和子 span，不能只检查父元素。 - [ ] **DATE-S07**：验证完整反馈组合：默认→聚焦→失败→再次聚焦→有效纠正→恢复；检查边框、提示、图标和 aria-invalid 一起变化。 - [ ] **DATE-S08**：检查输入族四角及组合拼接处为0px，包含默认、聚焦、错误、禁用和只读状态。 - [ ] **DATE-S09**：切换永久/指定时间；空范围失败；完整范围成功；再切回永久不带日期；禁用态无新校验。 - [ ] **DATE-S10**：宽度验收：400px只指范围控件边框，不含标签；不再套日期整项576px。单值控件填满其分配的内容列；窄容器完整起止及秒值可读。 - [ ] **DATE-S11**：核对单日、周、月、年及三类范围的标签、清空、返回值精度与各自独立选值；周边界按业务口径验收。 ### 专题验收重点 检查单日期禁选、日期时间范围、完整秒值、清除和时间选择；范围框宽400px不含标签，实际容器不足400px时起止分行并保留完整秒值，增高由换行触发。下方有效期示例检查指定时间缺少完整范围的错误，以及永久有效时不使用日期草稿。真实时区换算、业务起止边界及服务端校验由宿主补齐。 补充示例核对年、月、周、日期范围、月份范围的独立值与返回精度；周的起止及跨年口径在业务接入时确认。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html

永久有效与指定时间

参考截图用于提取场景结构；切换、校验、撤销等演示行为按本规范定义。查看参考页

``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：历史样板规范 37 / 38；当前规则索引时间适用性；2026-09-15 参考抽样：https://wt37gq.axshare.com/#g=1&id=i50z9y&p=首存活动。 - [打开本专题页面](../index.html#spec-date) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`date`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) 自定义示例 `official-date-types` 的实现：[official-types.js](../official-types.js)。 自定义示例 `validity-pattern` 的实现：[reference-patterns.js](../reference-patterns.js)。 组合样式见 [reference-patterns.css](../reference-patterns.css)；来源及扩展范围见 [参考补充记录](../reference-supplements.md)。 ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 输入与焦点 | 白底、正文深灰、边框灰；占位禁用灰；聚焦只变单层原边框为主题蓝，范围内部输入不重复加框。 | | 日期与范围 | 普通日期正文深灰；悬停浅灰背景；选中起止日主题蓝底白字，范围中间选中浅蓝；今天用操作蓝文字。 | | 时间与快捷项 | 已选时间或快捷项使用操作蓝与明确选中语义；键盘定位使用浅灰背景，不能套复选或按钮按下位移。 | | 禁用与只读 | 不可选日期/时间使用禁用灰且不可提交；整个禁用框浅灰背景；只读值保持正文深灰和复制能力。 | | 范围错误 | 真实格式或起止范围校验失败时，原边框和错误短提示共同错误红；错误优先于聚焦蓝，纠正后恢复。 | 日期/时间选择没有勾选框或半选横线；范围的起点、终点和区间是独立视觉角色。日期不可选也不等于加载失败。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [会员列表 · 筛选区登录时间范围](../../showcase/index.html#members) · [场景文档](../../showcase/docs/members.md) - [存款记录 · 存款记录筛选 · 时间范围](../../showcase/index.html#deposits) · [场景文档](../../showcase/docs/deposits.md) - [账户调整审核 · 申请时间筛选](../../showcase/index.html#account-audit) · [场景文档](../../showcase/docs/account-audit.md) - [活动管理 · 筛选与编辑 · 展示/活动时间范围](../../showcase/index.html#campaigns) · [场景文档](../../showcase/docs/campaigns.md) - [广告管理 · 广告展示周期与筛选时间](../../showcase/index.html#adverts) · [场景文档](../../showcase/docs/adverts.md) - [公告管理 · 公告展示周期与筛选时间](../../showcase/index.html#notifications) · [场景文档](../../showcase/docs/notifications.md) - [通知管理 · 创建时间、定时发布条件](../../showcase/index.html#site-messages) · [场景文档](../../showcase/docs/site-messages.md) - [推广报表 · 日报 · 报表统计日期](../../showcase/index.html#reports) · [场景文档](../../showcase/docs/reports.md) - [推广报表 · 代理报表统计日期](../../showcase/index.html#agents) · [场景文档](../../showcase/docs/agents.md) - [操作日志 · 日志发生时间范围](../../showcase/index.html#logs) · [场景文档](../../showcase/docs/logs.md) - [运营总览 · 总览统计日期范围](../../showcase/index.html#overview) · [场景文档](../../showcase/docs/overview.md) - [客服工单管理 · 工单时间筛选](../../showcase/index.html#tickets) · [场景文档](../../showcase/docs/tickets.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 上传控件与文件状态 · `upload` 专题 `upload` · 输入组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`upload`。 本页模板直接使用的 Element UI 标签：`el-button`、`el-upload`。 ### 本页用法与分类 默认用法：当前基础示例使用选择文件按钮和文件列表，列表最多保留3个，仅选择本地文件，不发送上传请求。素材有终端或类型差异时使用下方独立分组。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 文件与素材分组（用途） | 普通附件列表与分终端/类型素材管理承载不同内容结构。 | 普通附件保持简单列表；确有终端、规格或媒体类型要求时分组，各组文件独立，不为了美观增加分组。 | | 类型、大小与数量（业务限制） | 这些参数限制允许选择或上传的文件。 | 按所在业务定义；本页数量上限和本地类型检查只是演示，不能代替正式服务校验。 | | 选择与上传（功能边界） | 选择文件只是建立本地候选，实际上传是另一段流程。 | 本页演示点击与拖拽建立本地待上传列表，并提供图片列表、图片卡片和预览；自动/手动网络上传未接入，不能把选择完成写成上传成功。 | | 等待、进度与结果（自动状态） | 状态由具体文件和真实请求结果决定；移除是用户动作。 | 接入上传后逐文件反馈，不把选择完成显示成上传成功；待上传附件移除与撤销按现有危险操作示例执行。 | | 文件呈现与选择方式 | 列表、图片卡片、拖拽区用于不同素材与选择方式。 | 需要看缩略图用图片卡片；批量本地文件可拖拽；本页只选择和验证，不执行上传。 | 使用边界：不要按颜色挑选上传成功或失败状态，也不要把本地文件名列表冒充上传完成列表。 ### 组件规则 - **UPLOAD-R01**：基础示例采用选择文件按钮和文件列表，不包含业务资料提交表单。选择和移除属于用户动作；待上传、上传中、成功、失败属于文件流程状态；拖入等入口能力只在实际接入后提供。 - **UPLOAD-R02**：文件类型、大小、数量由宿主配置；accept 不是安全校验，真实服务仍要验证。失败保留文件和原因，可重试。 - **UPLOAD-R03**：下载与预览是不同动作；无文件不显示虚假预览。此例只读取本地文件名，不上传内容。 - **UPLOAD-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **UPLOAD-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **UPLOAD-R06**：【普通 / 加载】普通内容 正文深灰，说明 辅助深灰；加载图标及进行中进度 主题蓝。 - **UPLOAD-R07**：【成功 / 警告 / 失败】图标、进度或独立短状态提示分别使用成功绿、警告橙、错误红；详细说明使用正文深灰，必须显示状态文案，不只靠颜色。 - **UPLOAD-R08**：【空 / 未开始 / 取消】空提示 空值灰；未开始与取消用 正文深灰 或 辅助深灰；不自动判成失败或警告。 - **UPLOAD-R09**：【背景 / 操作】白底 白色、分隔 分隔灰；重试与关闭按公共 操作蓝；不为每类消息增加彩底和浅色边框。 - **UPLOAD-R10**：【组件边界】上传成功用 成功绿 图标；文件名 正文深灰，预览/重试 操作蓝；移除使用无框无底危险红文字；上传失败单项提示，不把正常文件染红。 - **UPLOAD-R11**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **UPLOAD-R12**：上传反馈按文件或素材分组显示：文件名保持正文色，类型或上传失败就近显示错误红原因，配置的失败图标同步错误红；不能把所有文件或选择文件按钮画成错误输入框。按钮键盘焦点沿用按钮规则。当前示例仅执行本地选择；补充的图片列表、图片卡片和拖拽示例包含非空、类型、大小与数量检查，真实进度、上传失败与重试由正式接入补齐。 - **UPLOAD-R13**：危险文字操作单独规定样式与交互：用于表单右侧删除、移除待上传附件、列表行删除等。默认红字 #F56C6C、12px/400，无底色、无边框、无水平内边距；点击区域至少24px高。悬停和按下保持同一红色并加下划线，键盘进入时显示红色焦点提示。禁用用 #C0C4CC 且不可执行；处理中显示原位进度并阻止重复点击。 - **UPLOAD-R14**：删除、移除统一先打开居中确认弹窗，明确对象、数量和后果；确认按钮统一写“确认”，取消不改变数据。未保存项、待上传附件、已保存记录和批量删除都沿用这一入口规则；失败保留原内容和重试入口。普通清空输入、取消筛选或关闭弹层不是删除，不自动标红。 - **UPLOAD-R15**：按终端、规格、媒体类型分别管理文件、进度、失败与预览，移除只影响当前组；组名、格式、尺寸、数量与大小上限应就近说明。 - **UPLOAD-R16**：语言分组是基于本项目广告草稿需求的扩展，不是本次参考截图已证实的内容。每种语言也独立保存，不默认回退成另一语言素材。 - **UPLOAD-R17**：本演示仅本地选文件和撤销移除；正式接入必须补充实际上传进度、解码、尺寸/大小检查及失败重试。异步结果按记录与草稿版本归属，关闭或切换后不得误回写。 - **UPLOAD-R18**：文件列表、图片卡片和拖拽区按素材用途选用，不按成功或失败切换样式。新增图片卡片与拖拽样例均仅本地选择，分别校验图片类型/大小或文件大小，不执行远端上传。 - **UPLOAD-R19**：图片列表与图片卡片按查看密度选择，拖拽是选择方式；同样执行类型/大小/数量限制。用户主动移除待上传文件同样打开居中确认框，确认按钮统一“确认”；取消保留列表。校验不通过的文件直接拒绝，不走删除确认。 - **UPLOAD-R20**：补充图片列表与卡片样例允许预览；各文件组独立。图片须非空PNG/JPEG且单张不超过2MB，拖拽文件须非空且单个不超过5MB，每组最多3个；这些是本页样例条件，生产额度由业务定义。拒绝无效文件并保留已选有效项，用户确认移除后释放临时预览资源。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **UPLOAD-S01**：当前示例包含文字文件列表、图片列表、图片卡片、拖拽选择及分组素材管理。按各示例实际限制核对本地选择、非空/类型/大小/数量校验、预览和移除；这些能力不代表已接入网络上传。 - [ ] **UPLOAD-S02**：接入验收按实际配置核对自动或手动上传、上传前的文件类型与大小校验，以及移除前的检查和拦截。 - [ ] **UPLOAD-S03**：选择 / 等待 / 进度 / 成功 / 失败 / 超时 / 取消 / 重试 / 移除 / 超限 - [ ] **UPLOAD-S04**：文件名安全文本 / 同名不同文件 / 大文件 / 返回错误 / 预览失败；服务器校验独立 - [ ] **UPLOAD-S05**：本页核对本地选择入口、文件列表、无效文件错误、预览与移除入口的适用颜色；网络等待、上传进度、成功及失败仅在真实上传接入后验收，不把文件列表当选择行套选中色。 - [ ] **UPLOAD-S06**：核对正文14/400、次级操作12/400、标题600及同色深正文；检查实际弹出层和子 span，不能只检查父元素。 - [ ] **UPLOAD-S07**：本地演示检查取消文件选择、无效类型、切换素材分组、移除与撤销；正式上传接入后再验等待、进度、成功、失败和重试，每次反馈归属正确文件。 - [ ] **UPLOAD-S08**：核对红色文字删除：无框无底、12px/400、悬停、键盘、禁用、处理中；子文字不能被普通蓝链接样式覆盖。 - [ ] **UPLOAD-S09**：本页核对待上传附件的居中确认、取消保留与确认移除；带撤销的本地示例另验撤销。图片列表/卡片的临时资源移除后不承诺撤销；已保存记录与失败重试到确认框专题检查。 - [ ] **UPLOAD-S10**：图片/视频与终端/语言来回切换保持独立列表；无效类型失败；移除后撤销；不触发真实上传。 - [ ] **UPLOAD-S11**：核对文字列表、图片列表、图片卡片和拖拽入口的适用条件；选择文件仅更新本地列表，不伪报远端成功。 - [ ] **UPLOAD-S12**：上传样例核对非空/类型/大小/数量限制、连续选择后非法项不回流、分组错误独立、预览关闭回焦、取消移除保留与确认移除释放临时资源。 ### 专题验收重点 取消选择不报错，文件名安全渲染；核对文字列表、图片列表、图片卡片和拖拽入口的本地限制、分组独立、图片预览及移除确认。普通附件、图片和分组素材按各自示例规则检查，不把本地选择宣称为上传成功。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html 选择本地文件
最多选择 3 个文件

待上传附件的文字移除

多终端素材独立管理

参考截图用于提取场景结构；切换、校验、撤销等演示行为按本规范定义。查看参考页

``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：历史样板规范 72；2026-09-15 参考抽样：https://ztqpvr.axshare.com/#id=fzzrfh&p=app闪屏页广告a&g=1。 - [打开本专题页面](../index.html#spec-upload) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`upload`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) 自定义示例 `danger-action-demo` 的实现：[danger-actions.js](../danger-actions.js)。 自定义示例 `official-upload-types` 的实现：[official-types.js](../official-types.js)。 自定义示例 `media-slots-pattern` 的实现：[reference-patterns.js](../reference-patterns.js)。 组合样式见 [reference-patterns.css](../reference-patterns.css)；来源及扩展范围见 [参考补充记录](../reference-supplements.md)。 危险操作样式见 [action-contract.css](../action-contract.css)；示例使用本地演示数据。 ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 普通 / 加载 | 普通内容 正文深灰，说明 辅助深灰；加载图标及进行中进度 主题蓝。 | | 成功 / 警告 / 失败 | 图标、进度或独立短状态提示分别使用成功绿、警告橙、错误红；详细说明使用正文深灰，必须显示状态文案，不只靠颜色。 | | 空 / 未开始 / 取消 | 空提示 空值灰；未开始与取消用 正文深灰 或 辅助深灰；不自动判成失败或警告。 | | 背景 / 操作 | 白底 白色、分隔 分隔灰；重试与关闭按公共 操作蓝；不为每类消息增加彩底和浅色边框。 | | 危险文字操作 | 查看、编辑、查看更多使用操作蓝；删除、移除使用危险红。字号同为12px/400，颜色表达动作类型，不通过加粗或更大字号表达危险。 | 本页只演示本地选择和移除，不触发上传成功/失败。正式接入后按文件实际结果使用状态图标；文件名保持正文色，预览/重试用操作蓝，危险移除用无框无底红字。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [广告管理 · 编辑广告 · 各语言图片素材](../../showcase/index.html#adverts) · [场景文档](../../showcase/docs/adverts.md) - [客服工单管理 · 新增工单或处理补充 · 本地附件](../../showcase/index.html?example=ticket-create#tickets) · [场景文档](../../showcase/docs/tickets.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 表格文字、对齐与行密度 · `table` 专题 `table` · 数据展示 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`table`、`table-column`。 本页模板直接使用的 Element UI 标签：`el-table`、`el-table-column`。 ### 本页用法与分类 默认用法：普通数据默认使用白底、无斑马纹、统一左对齐的展示表格；表头参考46px、普通单行至少48px。当前上方示例可按数值排序，下方单独演示可增删的规则行。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 展示与编辑（用途） | 只读数据表与可输入规则行承担不同任务。 | 查阅已有记录用展示表；确需维护规则时用下方可编辑行组合，不能给所有数据单元格默认加输入框。 | | 排序、选择等（功能配置） | 这些能力决定可以对数据做什么，不决定表格皮肤。 | 本页采用数值三态排序；行选择到会员列表核对，固定列到关联专题核对，未演示功能不算当前已采用。 | | 行高与内距（尺寸规则） | 46px表头、至少48px数据行及16px左右内距保证阅读。 | 默认按公共密度；多行自然增高，文字仍14px/21px。模板中的库尺寸参数不是给使用方再选一套密度。 | | 悬停、选中与排序结果（自动状态） | 鼠标位置、已选集合及排序值决定高亮。 | 启用对应功能后由实际操作产生状态；默认不加斑马纹，不手工把某行画成已选来强调内容。 | 使用边界：不要把有排序、可编辑、紧凑行高和浅蓝选中列为四种表格样式。 ### 组件规则 - **TABLE-R01**：表头 14px / 600 / 21px、#303133，数据 14px / 400 / 21px、#303133；依已确认业务原型，表头、正文、金额及操作统一左对齐，单元格左右16px；不得让样板默认数值右对齐覆盖项目规则。 - **TABLE-R02**：普通单行参考最小 48px，表头参考 46px；多行内容自然增高，固定列和滚动列同高。单元格内距上下10px、左右16px。 - **TABLE-R03**：悬停与选中有区别；表头排序如启用，应准确标记升序、降序或未排序，并保留当前条件。样例为本地数值三态排序。 - **TABLE-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **TABLE-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **TABLE-R06**：【默认】数据与标签 正文深灰 14px/400；标题 正文深灰 14px/600；底 白色，表头 浅灰背景，分隔 分隔灰。 - **TABLE-R07**：【行悬停 / 行选中】悬停 浅灰背景；选中 选中浅蓝，选中且悬停仍 选中浅蓝；勾选 主题蓝。默认不做斑马纹。 - **TABLE-R08**：【链接 / 空值】正文链接 操作蓝 14px/400；普通行操作 操作蓝 12px/400；危险删除/移除用错误红；无备注用“无” 空值灰 12px/400，0 仍 正文深灰。 - **TABLE-R09**：【排序 / 焦点 / 只读】当前排序图标 主题蓝；键盘 操作蓝 轮廓；静态或只读数据仍 正文深灰，整行不可因不可编辑而变灰。 - **TABLE-R10**：【加载 / 失败】保留表结构，转圈 主题蓝；失败短提示 错误红，写明原因与重试 操作蓝；金额不因正负自动变红绿。 - **TABLE-R11**：【组件边界】仅使用实际存在的组件状态；没有操作能力的内容不添加悬停、选中或禁用变色。 - **TABLE-R12**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **TABLE-R13**：选中底必须同步到主体、左/右固定列、操作列及其副本；选中且悬停仍为 选中浅蓝。横向滚动、全选、取消、展开增高后均不得断色。 - **TABLE-R14**：危险文字操作单独规定样式与交互：用于表单右侧删除、移除待上传附件、列表行删除等。默认红字 #F56C6C、12px/400，无底色、无边框、无水平内边距；点击区域至少24px高。悬停和按下保持同一红色并加下划线，键盘进入时显示红色焦点提示。禁用用 #C0C4CC 且不可执行；处理中显示原位进度并阻止重复点击。 - **TABLE-R15**：删除、移除统一先打开居中确认弹窗，明确对象、数量和后果；确认按钮统一写“确认”，取消不改变数据。未保存项、待上传附件、已保存记录和批量删除都沿用这一入口规则；失败保留原内容和重试入口。普通清空输入、取消筛选或关闭弹层不是删除，不自动标红。 - **TABLE-R16**：可编辑行用稳定标识保持行值、错误和删除对象对应；添加行继承字段规则，不继承上一行数据。首行不可删等业务限制必须显示原因。 - **TABLE-R17**：计算结果保持正文色与只读说明，可以复制，不伪装成禁用输入。删除入口使用红色纯文字；未保存行与已保存记录均先进入统一确认流程，确认后再删除。支持撤销时，删除后另提供撤销入口。 - **TABLE-R18**：普通“处理中”使用正文深灰，不表示异常；只有实际警告才用警告橙。已完成状态可使用成功绿，并配明确文字。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **TABLE-S01**：接入验收按实际能力核对行选择、跨数据更新保留已选项、稳定行标识、行序号、展开行、树形表格和延迟加载；本页基础表格未提供的能力不计为已演示。 - [ ] **TABLE-S02**：当前示例核对本地数值排序的未排序/升序/降序，三者是点击表头后产生的状态。服务端排序、筛选及默认条件恢复仅在实际接入对应功能后验收。 - [ ] **TABLE-S03**：关联验收：固定表头、左右固定列、横向滚动、溢出内容提示、自定义列和合并单元格；按实际接入能力分别核对。 - [ ] **TABLE-S04**：关联/接入验收：合计到固定列、滚动与合计专题；行选择及禁用选择到业务列表；空数据、加载中、请求失败和性能仅在对应数据来源及状态实际接入后检查。 - [ ] **TABLE-S05**：可编辑单元格属于宿主组合能力，需独立提交 / 取消 / 校验合同 - [ ] **TABLE-S06**：本页检查普通表格文字、数值排序和新增规则行的适用颜色；行选中与固定操作列背景到会员列表验证。只有实际可编辑且接入校验的单元格才检查输入错误，不把共用矩阵全套到基础表。 - [ ] **TABLE-S07**：核对正文14/400、次级操作12/400、标题600及同色深正文；检查实际弹出层和子 span，不能只检查父元素。 - [ ] **TABLE-S08**：关联验收（业务会员列表）：选中底必须同步到主体、左/右固定列、操作列及其副本；选中且悬停仍为选中浅蓝。横向滚动、全选、取消、展开增高后均不得断色；本页基础表格未提供行选择或固定操作列。 - [ ] **TABLE-S09**：核对红色文字删除：无框无底、12px/400、悬停、键盘、禁用、处理中；子文字不能被普通蓝链接样式覆盖。 - [ ] **TABLE-S10**：本页核对可增删规则行：首行删除不可用，新增行确认后移除、取消保留，并可撤销。附件移除和已保存记录的失败重试到上传与确认框专题验收，不计为本页基础表格能力。 - [ ] **TABLE-S11**：新增两行独立输入；首行删除禁用；删除指定新增行并撤销；序号改变后输入值仍属于原行。 ### 专题验收重点 本页检查数值排序三态、表头与正文统一左对齐、长值不改变字号，并检查新增规则行的值与删除对象对应。关联验收：固定列滚动与合计到“固定列、滚动与合计”专题检查；行选中背景贯穿主体和固定操作列到业务会员列表检查。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html

本页演示数值排序及下方可增删规则行。固定列滚动与合计见固定列、滚动与合计；行选中及固定操作列背景同步需到会员列表复核。

可增删规则行

参考截图用于提取场景结构；切换、校验、撤销等演示行为按本规范定义。查看参考页

``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：历史样板规范 9 / 23 / 64；DX size tokens；2026-09-15 参考抽样：https://wt37gq.axshare.com/#g=1&id=te6pby&p=规则配置。 - [打开本专题页面](../index.html#spec-table) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`table`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) 自定义示例 `editable-rows-pattern` 的实现：[reference-patterns.js](../reference-patterns.js)。 组合样式见 [reference-patterns.css](../reference-patterns.css)；来源及扩展范围见 [参考补充记录](../reference-supplements.md)。 ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 默认 | 数据与标签 正文深灰 14px/400；标题 正文深灰 14px/600；底 白色，表头 浅灰背景，分隔 分隔灰。 | | 行悬停 / 行选中 | 悬停 浅灰背景；选中 选中浅蓝，选中且悬停仍 选中浅蓝；勾选 主题蓝。默认不做斑马纹。 | | 链接 / 空值 | 正文链接 操作蓝 14px/400；普通行操作 操作蓝 12px/400；危险删除/移除用错误红；无备注用“无” 空值灰 12px/400，0 仍 正文深灰。 | | 排序 / 焦点 / 只读 | 当前排序图标 主题蓝；键盘 操作蓝 轮廓；静态或只读数据仍 正文深灰，整行不可因不可编辑而变灰。 | | 加载 / 失败 | 保留表结构，转圈 主题蓝；失败短提示 错误红，写明原因与重试 操作蓝；金额不因正负自动变红绿。 | | 固定列 / 操作列 | 选中底必须同步到主体、左/右固定列、操作列及其副本；选中且悬停仍为 选中浅蓝。横向滚动、全选、取消、展开增高后均不得断色。 | | 危险文字操作 | 查看、编辑、查看更多使用操作蓝；删除、移除使用危险红。字号同为12px/400，颜色表达动作类型，不通过加粗或更大字号表达危险。 | 本页基础表采用普通展示与数值排序；行选中颜色仅在启用选择功能后出现。会员列表中的选中底须覆盖主体与固定操作列；这些是功能对应状态，不是另选表格皮肤。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [会员列表 · 会员列表组合列](../../showcase/index.html#members) · [场景文档](../../showcase/docs/members.md) - [会员详情 · 返回原会员列表 · 组合字段表](../../showcase/index.html#member-detail) · [场景文档](../../showcase/docs/member-detail.md) - [新增账号 · 新增账号结果列表](../../showcase/index.html#create-account) · [场景文档](../../showcase/docs/create-account.md) - [存款记录 · 存款记录列表](../../showcase/index.html#deposits) · [场景文档](../../showcase/docs/deposits.md) - [取款审核 · 取款审核列表](../../showcase/index.html#withdrawals) · [场景文档](../../showcase/docs/withdrawals.md) - [资料审核 · 资料审核列表](../../showcase/index.html#profile-audit) · [场景文档](../../showcase/docs/profile-audit.md)；落地范围：资料审核列表与详情中的普通待审核均使用正文深灰 #303133，不因尚未审核显示警告色；本例没有异常或逾期条件。审核通过使用成功语义，审核驳回使用错误语义，状态文字始终保留。 - [账户调整审核 · 待审核 / 审核记录列表](../../showcase/index.html#account-audit) · [场景文档](../../showcase/docs/account-audit.md) - [活动管理 · 活动列表](../../showcase/index.html#campaigns) · [场景文档](../../showcase/docs/campaigns.md) - [广告管理 · 广告列表](../../showcase/index.html#adverts) · [场景文档](../../showcase/docs/adverts.md) - [公告管理 · 系统公告列表](../../showcase/index.html#notifications) · [场景文档](../../showcase/docs/notifications.md) - [通知管理 · 站内消息列表 · 17列字段](../../showcase/index.html#site-messages) · [场景文档](../../showcase/docs/site-messages.md) - [推广报表 · 日报 · 推广报表 · 日报预选视图（共用既有表格）](../../showcase/index.html#reports) · [场景文档](../../showcase/docs/reports.md)；落地范围：reports 保留为推广报表日报视图的兼容直达入口，与 agents 共用一个内嵌实例；首次直达及已访问后的 #reports 切换均预选日报，#agents 恢复共享实例的当前状态。18个场景标识包含共享实例的不同入口，不代表18个独立页面。 团队人数、德州人数、大厅人数、俱乐部主人数、俱乐部数量及局数按整数显示，0显示0；列表与总计使用相同精度。金额仍保留两位小数。此修复仅作用于派生页面的显示，不改变原始数值、查询与合计口径或导出数据。 - [推广报表 · 多级代理报表](../../showcase/index.html#agents) · [场景文档](../../showcase/docs/agents.md)；落地范围：团队人数、德州人数、大厅人数、俱乐部主人数、俱乐部数量及局数按整数显示，0显示0；列表与总计使用相同精度。金额仍保留两位小数。此修复仅作用于派生页面的显示，不改变原始数值、查询与合计口径或导出数据。 - [操作日志 · 操作日志结果列表](../../showcase/index.html#logs) · [场景文档](../../showcase/docs/logs.md) - [运营总览 · 留存、新鲜度与活跃度数据表](../../showcase/index.html#overview) · [场景文档](../../showcase/docs/overview.md) - [客服工单管理 · 工单列表与处理记录表](../../showcase/index.html#tickets) · [场景文档](../../showcase/docs/tickets.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 固定列、滚动与合计 · `table-boundary` 专题 `table-boundary` · 数据展示 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 本专题为基础规则、同一组件的补充场景或组合模式，不作为独立的 Element UI 官方组件声明。 本页模板直接使用的 Element UI 标签：`el-table`、`el-table-column`。 ### 本页用法与分类 默认用法：沿用普通表格视觉。宽表需要在滚动时持续辨认记录才固定关键列；列总宽度超出容器时只让表格区域横向滚动。本页660px仅用于展示这一情形。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 固定关键列（功能配置） | 固定列让滚动时仍能看见记录标识。 | 只有确需持续辨认的少量关键列才固定；普通窄表不必加固定列。 | | 单层与分组表头（数据结构） | 分组表头表达一组指标与子列的真实关系。 | 存在指标分组时采用下方二级表头；无分组关系时保留单层，不为装饰增加层级。 | | 合计及范围（业务功能） | 合计表达可聚合指标，并说明本页或全部口径。 | 字段确有汇总意义才显示；本页演示本页合计，未取到的全量合计不能用0补位。 | | 滚动与行高同步（自动布局） | 横向滚动由超宽触发，多行内容使对应行同步增高。 | 固定区与主表始终同步高度和适用状态背景；有无滚动不作为一款可任选样式。 | 使用边界：不要把固定列、分组表头与合计当作互斥皮肤，也不要将演示容器660px当成所有业务表格宽度。 ### 组件规则 - **TABLE-BOUNDARY-R01**：宽表需要持续辨认记录时才固定关键列；固定列保持不透明背景和正确偏移。列总宽度超出容器才出现横向滚动，且仅限表格容器；表头、正文与合计保持对齐。 - **TABLE-BOUNDARY-R02**：浮层不能被固定列遮住；多行单元格按实际高度同步。选择列出现时重算左侧偏移。 - **TABLE-BOUNDARY-R03**：本页 / 全部合计只在实际有聚合意义时展示；分别按当前页与当前筛选结果计算并明确范围。列内出现未知、无效值或求和溢出时该列合计保留未知，不能将未知按0计入；其他有效列可独立汇总。 - **TABLE-BOUNDARY-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **TABLE-BOUNDARY-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **TABLE-BOUNDARY-R06**：【默认】数据与标签 正文深灰 14px/400；标题 正文深灰 14px/600；底 白色，表头 浅灰背景，分隔 分隔灰。 - **TABLE-BOUNDARY-R07**：【行悬停 / 行选中】悬停 浅灰背景；选中 选中浅蓝，选中且悬停仍 选中浅蓝；勾选 主题蓝。默认不做斑马纹。 - **TABLE-BOUNDARY-R08**：【链接 / 空值】正文链接 操作蓝 14px/400；普通行操作 操作蓝 12px/400；危险删除/移除用错误红；无备注用“无” 空值灰 12px/400，0 仍 正文深灰。 - **TABLE-BOUNDARY-R09**：【排序 / 焦点 / 只读】当前排序图标 主题蓝；键盘 操作蓝 轮廓；静态或只读数据仍 正文深灰，整行不可因不可编辑而变灰。 - **TABLE-BOUNDARY-R10**：【加载 / 失败】保留表结构，转圈 主题蓝；失败短提示 错误红，写明原因与重试 操作蓝；金额不因正负自动变红绿。 - **TABLE-BOUNDARY-R11**：【组件边界】仅使用实际存在的组件状态；没有操作能力的内容不添加悬停、选中或禁用变色。 - **TABLE-BOUNDARY-R12**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **TABLE-BOUNDARY-R13**：选中底必须同步到主体、左/右固定列、操作列及其副本；选中且悬停仍为 选中浅蓝。横向滚动、全选、取消、展开增高后均不得断色。 - **TABLE-BOUNDARY-R14**：危险文字操作单独规定样式与交互：用于表单右侧删除、移除待上传附件、列表行删除等。默认红字 #F56C6C、12px/400，无底色、无边框、无水平内边距；点击区域至少24px高。悬停和按下保持同一红色并加下划线，键盘进入时显示红色焦点提示。禁用用 #C0C4CC 且不可执行；处理中显示原位进度并阻止重复点击。 - **TABLE-BOUNDARY-R15**：删除、移除统一先打开居中确认弹窗，明确对象、数量和后果；确认按钮统一写“确认”，取消不改变数据。未保存项、待上传附件、已保存记录和批量删除都沿用这一入口规则；失败保留原内容和重试入口。普通清空输入、取消筛选或关闭弹层不是删除，不自动标红。 - **TABLE-BOUNDARY-R16**：多级表头由组名与子列构成，列显隐/移动/导出后仍保留组与指标关系。横向滚动下固定列、正文与合计对齐，合计标明本页或全部数据范围。 - **TABLE-BOUNDARY-R17**：合计正文用正文深灰与600字重，不整行染红；输赢、差额等需按明确业务语义决定是否使用功能色，不能由正负号自动推断成功或失败。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **TABLE-BOUNDARY-S01**：当前上方基础宽表核对横向滚动、固定列和本页数值合计2600+100+0=2700；下方分组表另核对二级表头、访问12+8=20和订单5+3=8。两组为独立示例，不共用合计口径。 - [ ] **TABLE-BOUNDARY-S02**：接入验收：主表与固定列的行高、选中背景和悬停背景同步，选中底覆盖悬停底；操作列不得断色。 - [ ] **TABLE-BOUNDARY-S03**：接入验收：列显隐、排序、展开增高后重算宽度与偏移；页面不跟随表格横向溢出。 - [ ] **TABLE-BOUNDARY-S04**：接入验收：合计说明本页或全部口径，未知值不得写成0；表头、正文、合计和操作按统一左基准排列。 ### 专题验收重点 键盘和触控板横向滚动；固定列背景不透字；页面本身不横向溢出。 分别核对上方基础表合计2700与下方分组表的20/8，数值与各自当前表格逐行相加一致。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html

分组表头与本页合计

参考截图用于提取场景结构；切换、校验、撤销等演示行为按本规范定义。查看参考页

``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：历史样板规范 4 / 13 / 54 / 64；2026-09-15 参考抽样：https://mcmcmc.axshare.com/基本页面-日报_2.html。 - [打开本专题页面](../index.html#spec-table-boundary) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`table-boundary`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) 自定义示例 `grouped-report-pattern` 的实现：[reference-patterns.js](../reference-patterns.js)。 组合样式见 [reference-patterns.css](../reference-patterns.css)；来源及扩展范围见 [参考补充记录](../reference-supplements.md)。 ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 默认 | 数据与标签 正文深灰 14px/400；标题 正文深灰 14px/600；底 白色，表头 浅灰背景，分隔 分隔灰。 | | 行悬停 / 行选中 | 悬停 浅灰背景；选中 选中浅蓝，选中且悬停仍 选中浅蓝；勾选 主题蓝。默认不做斑马纹。 | | 链接 / 空值 | 正文链接 操作蓝 14px/400；普通行操作 操作蓝 12px/400；危险删除/移除用错误红；无备注用“无” 空值灰 12px/400，0 仍 正文深灰。 | | 排序 / 焦点 / 只读 | 当前排序图标 主题蓝；键盘 操作蓝 轮廓；静态或只读数据仍 正文深灰，整行不可因不可编辑而变灰。 | | 加载 / 失败 | 保留表结构，转圈 主题蓝；失败短提示 错误红，写明原因与重试 操作蓝；金额不因正负自动变红绿。 | | 固定列 / 操作列 | 选中底必须同步到主体、左/右固定列、操作列及其副本；选中且悬停仍为 选中浅蓝。横向滚动、全选、取消、展开增高后均不得断色。 | | 危险文字操作 | 查看、编辑、查看更多使用操作蓝；删除、移除使用危险红。字号同为12px/400，颜色表达动作类型，不通过加粗或更大字号表达危险。 | 固定列是功能，滚动是内容超宽后的布局结果，合计取决于字段是否可聚合。若业务另启用行选择，其选中底须同步主体与固定列；本页不把这些能力列为可互换皮肤。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [推广报表 · 日报 · 宽报表横向滚动、固定列与合计](../../showcase/index.html#reports) · [场景文档](../../showcase/docs/reports.md) - [推广报表 · 宽报表横向滚动、固定列与合计](../../showcase/index.html#agents) · [场景文档](../../showcase/docs/agents.md) - [客服工单管理 · 处理记录 · 内部滚动与操作列](../../showcase/index.html#tickets) · [场景文档](../../showcase/docs/tickets.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 金额、单位、零值与空值 · `data-values` 专题 `data-values` · 数据展示 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 本专题为基础规则、同一组件的补充场景或组合模式，不作为独立的 Element UI 官方组件声明。 ### 本页用法与分类 默认用法：有效数值及单位默认使用正文层级，并按字段约定格式化。先判断真实值、是否缺失和查看权限，再决定显示内容；0始终保留为有效数值。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 精度、币种与单位（字段格式） | 格式用于表达数值含义，不是视觉主题。 | 同字段统一精度及单位；展示与原始值分开，复制或导出遵守字段合同。 | | 零、空与未返回（数据状态） | 它们分别表示有效零、确实缺失或尚未得到结果。 | 按真实数据区分；本页数值空值用“-”，备注空值用“无”，不能由使用方任选一个替代所有情况。 | | 脱敏与无权限（权限状态） | 脱敏是有数据但隐藏，无权限是不可查看。 | 只有需要保护且有授权查看的字段才提供显隐；无权限和空值不能伪装为可显示的有效值。 | 使用边界：不要用空值样式隐藏0，不要把所有字段都加显隐按钮，也不要按正负号自动选择红绿。 ### 组件规则 - **DATA-VALUES-R01**：数据精度、币种和单位服从字段合同；同列使用等宽数字与统一小数展示约定。保留原始精确值供复制 / 导出。 - **DATA-VALUES-R02**：0 是有效数值；空值按字段合同显示，当前数值样例使用“-”，备注为空使用“无”，两者都使用空值灰 #909399。加载中、未返回与无权限必须有明确且不同的文字，不得统一渲染成横杠。USDT 紧凑币种符号沿用 ₮。 - **DATA-VALUES-R03**：正负、百分比、千分位、单位与时区须明确定义；数值不可用浮点四舍五入随意改变实际意义。使用整数最小单位时检查安全整数与求和溢出。未知或无效金额不按0参与范围筛选；某金额列含未知或无效值时，该列合计保持未知，不能将部分已知值伪装成完整合计。显示、复制和导出使用同一口径。 - **DATA-VALUES-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **DATA-VALUES-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **DATA-VALUES-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **DATA-VALUES-R07**：掩码表示数据存在但当前隐藏；无权限、未返回、空值分别表达。显示入口必须可识别、有文字名称，并明确当前显示/隐藏状态。 - **DATA-VALUES-R08**：接口权限控制与前端显隐分开：没有查看权限时不得把明文下发后仅用CSS隐藏。本示例全为虚构编号，权限复选框仅用于状态演练。 - **DATA-VALUES-R09**：复制行为要明确复制当前显示值还是完整值；完整值复制同样需要权限。关闭详情或切换记录应恢复默认脱敏；不可把显示开关直接添加到所有业务字段。 - **DATA-VALUES-R10**：【有效值与单位】金额、单位和有效零值使用正文深灰、14px/400；不按正负或大小自动变红绿。 - **DATA-VALUES-R11**：【空值】确实缺失的内容使用空值灰，文案按字段约定：当前数值样例为“-”，备注为“无”；0保留有效数值，不替换为空值提示。 - **DATA-VALUES-R12**：【只读与脱敏】只读真实值仍为正文深灰；脱敏掩码保留正文层级，显示/复制入口使用操作蓝，并按权限控制真实行为。 - **DATA-VALUES-R13**：【读取反馈】只有异步读取时使用主题蓝加载标记；失败使用错误红短提示，不把失败伪装成0或正常空值。 - **DATA-VALUES-R14**：【组件边界】金额、单位和零值是数据角色，不自带行选中、排序或禁用态；处于表格时背景由表格管理。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **DATA-VALUES-S01**：整数 / 小数 / 极大极小 / 正负 / 千分位 / 单位 / 精度 - [ ] **DATA-VALUES-S02**：零 / 空 / 未返回 / 无权限 / 格式化后复制原值；业务金额验证未知不匹配零值范围、列内未知传播到合计、求和安全整数溢出及显示/CSV口径一致。 - [ ] **DATA-VALUES-S03**：本页核对有效值、0、空值、未返回、脱敏和无权限的文字角色；显隐入口单独检查焦点与禁用。静态数值不套输入错误、行选中或半选规则。 - [ ] **DATA-VALUES-S04**：核对正文14/400、次级操作12/400、标题600及同色深正文；检查实际弹出层和子 span，不能只检查父元素。 - [ ] **DATA-VALUES-S05**：当前示例：隐藏→显示→隐藏；关闭查看权限后恢复遮蔽且按钮禁用。接入验收：有权限但字段为空时不提供显隐动作；本地编号样例本身不切换为空值。 ### 专题验收重点 当前静态对照核对有效0、空值、未返回和无权限的独立文案，精确小数不丢位且与正文使用同一字体；本地显隐及权限切换不泄漏明文。格式化后复制原值、真实请求等待/失败和关闭记录恢复默认脱敏，须在宿主接入后验收。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html
类型 示例 说明
有效零值 0.00 不显示为 -
空值 - 尚无此值
精确数值 0.123456789 按字段合同保留精度
未返回 尚未返回 结果尚未取得，不表示有效0或确实缺失
无权限 不可见 与空值不同

脱敏、显示与无权限

参考截图用于提取场景结构；切换、校验、撤销等演示行为按本规范定义。查看参考页

``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：历史样板规范 47 / 50 / 62；2026-09-15 参考抽样：https://resycb.axshare.com/#id=n9tpcj&p=会员列表d&g=1。 - [打开本专题页面](../index.html#spec-data-values) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`data-values`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) 自定义示例 `masked-value-pattern` 的实现：[reference-patterns.js](../reference-patterns.js)。 组合样式见 [reference-patterns.css](../reference-patterns.css)；来源及扩展范围见 [参考补充记录](../reference-supplements.md)。 ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 有效值与单位 | 金额、单位和有效零值使用正文深灰、14px/400；不按正负或大小自动变红绿。 | | 空值 | 确实缺失的内容使用空值灰，文案按字段约定：当前数值样例为“-”，备注为“无”；0保留有效数值，不替换为空值提示。 | | 只读与脱敏 | 只读真实值仍为正文深灰；脱敏掩码保留正文层级，显示/复制入口使用操作蓝，并按权限控制真实行为。 | | 读取反馈 | 只有异步读取时使用主题蓝加载标记；失败使用错误红短提示，不把失败伪装成0或正常空值。 | 金额、单位和零值是数据角色，不自带行选中、排序或禁用态；处于表格时背景由表格管理。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [存款记录 · 存款金额、手续费等数值列](../../showcase/index.html#deposits) · [场景文档](../../showcase/docs/deposits.md) - [运营总览 · 指标值、单位、零值及热力表](../../showcase/index.html#overview) · [场景文档](../../showcase/docs/overview.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 长文本、单号与完整值 · `long-text` 专题 `long-text` · 数据展示 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 本专题为基础规则、同一组件的补充场景或组合模式，不作为独立的 Element UI 官方组件声明。 本页模板直接使用的 Element UI 标签：`el-button`、`el-tooltip`。 ### 本页用法与分类 默认用法：普通说明默认自然换行，保持正文字号；本页长单号采用前6后6缩略，并保留完整值提示和复制入口。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 说明与标识（内容用途） | 说明需要连续阅读，单号需要辨识并可取得完整值。 | 说明优先自然换行；符合本项目单号约定的长标识使用前6后6，不把该规则套到所有长文本。 | | 换行与省略（空间处理） | 省略仅解决固定区域的长度限制，不改变内容含义。 | 空间允许就换行；列表确需限制占高时才省略，并提供现有完整值承接方式。本页没有行数档位切换器。 | | 查看与复制（附属功能） | 完整值提示和复制属于实际操作。 | 截短的单号必须能用键盘查看完整值；复制原始完整值。焦点和复制结果按操作自动反馈。 | 使用边界：不要用缩小字号解决溢出，也不要把缩略单号误称为权限脱敏。 ### 组件规则 - **LONG-TEXT-R01**：单号沿用前 6 后 6，tooltip 和复制保留完整值；不对所有普通文本套用同一种截断。 - **LONG-TEXT-R02**：普通说明默认自然折行；列表确需限制占高时才使用省略，并通过悬停/键盘聚焦提示或现有详情提供完整内容，不缩小字号。本页展示自然折行与单号缩略，没有可切换的行数档位。 - **LONG-TEXT-R03**：说明类完整值支持键盘查看；tooltip 不遮挡触发点，页面边缘自动调整位置。 - **LONG-TEXT-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **LONG-TEXT-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **LONG-TEXT-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **LONG-TEXT-R07**：【静态长文本】普通正文使用正文深灰；必要说明辅助深灰；换行或省略不改变有效内容颜色。 - **LONG-TEXT-R08**：【查看与复制】完整值查看、展开或复制入口使用操作蓝；次级动作12px/400，悬停加下划线并保留原语义。 - **LONG-TEXT-R09**：【焦点与不可用】可操作入口使用操作蓝键盘焦点；无可复制值时明确禁用灰并阻止复制，不伪造成功。 - **LONG-TEXT-R10**：【空值与结果】空内容使用空值灰；复制的成功/失败通过独立消息表达，不把长文本长期改成绿色或红色。 - **LONG-TEXT-R11**：【组件边界】长文本本身没有危险动作、半选或禁用状态；只有真实的展开、完整值查看和复制入口可以交互。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **LONG-TEXT-S01**：当前示例：长单号采用前6后6缩略，提示和复制保留完整值；普通长文本可换行。 - [ ] **LONG-TEXT-S02**：接入验收：无空格长串、中文、数字、换行和表情内容不截断关键语义；窄容器不挤占操作区。 - [ ] **LONG-TEXT-S03**：接入验收：省略文本能用键盘查看完整值，复制范围不包含省略号或额外说明。 ### 专题验收重点 复制值与全文一致；键盘 聚焦 显示完整单号。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html
CR2026...092570

固定宽度内自然折行：较长的组件说明不会缩小字号，也不会撑开相邻列。

``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：历史样板规范 17 / 48 / 61。 - [打开本专题页面](../index.html#spec-long-text) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`long-text`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 静态长文本 | 普通正文使用正文深灰；必要说明辅助深灰；换行或省略不改变有效内容颜色。 | | 查看与复制 | 完整值查看、展开或复制入口使用操作蓝；次级动作12px/400，悬停加下划线并保留原语义。 | | 焦点与不可用 | 可操作入口使用操作蓝键盘焦点；无可复制值时明确禁用灰并阻止复制，不伪造成功。 | | 空值与结果 | 空内容使用空值灰；复制的成功/失败通过独立消息表达，不把长文本长期改成绿色或红色。 | 长文本本身没有危险动作、半选或禁用状态；只有真实的展开、完整值查看和复制入口可以交互。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [操作日志 · 日志行 · 完整请求/响应参数](../../showcase/index.html#logs) · [场景文档](../../showcase/docs/logs.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 字段标签、分隔符与子字段 · `description` 专题 `description` · 数据展示 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 本专题为基础规则、同一组件的补充场景或组合模式，不作为独立的 Element UI 官方组件声明。 ### 本页用法与分类 默认用法：静态字段默认按“字段名：值”展示，标签与值同为14px/400/21px、正文深灰，左对齐且自然相邻。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 字段名与值（正文内容） | 这是一组静态信息，数值与普通文本都属于有效值。 | 使用中文冒号连接，不靠空格或两端对齐撑开；数值格式遵守数值专题。 | | 子字段清单（特定用途） | 列设置或导出说明需要列出实际包含的子字段。 | 此时用真实字段名和斜杠分隔；不要混入行样例值、冒号或规则说明。 | | 补充说明（文字角色） | 辅助说明解释字段，不是标签的禁用样式。 | 有必要说明时才使用辅助层级；静态标签和值没有悬停、选中或禁用配色选项。 | 使用边界：不要把字段标签、数值和子字段清单当成三款可互换排版皮肤。 ### 组件规则 - **DESCRIPTION-R01**：单元格内字段名和值用中文冒号；说明符号位于字段名后、冒号前。字段标签与值默认同级。 - **DESCRIPTION-R02**：列设置 / 导出子字段说明使用真实字段名，以斜杠分隔；不放行样例值、规则说明或冒号。 - **DESCRIPTION-R03**：字段标签、普通值与数值都按本项目规则左对齐；标签和值自然相邻，不靠空格对齐，不用 space-between 或铺满容器的右对齐制造大空洞。数值精度与等宽数字遵循数值专题。 - **DESCRIPTION-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **DESCRIPTION-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **DESCRIPTION-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **DESCRIPTION-R07**：【字段与值】字段名、中文冒号和有效值统一正文深灰、14px/400；静态只读内容不变禁用灰。 - **DESCRIPTION-R08**：【补充与空值】必要说明使用辅助深灰；真实空值使用空值灰；有效0仍使用正文深灰。 - **DESCRIPTION-R09**：【字段附属动作】只有实际说明、展开或复制入口使用操作蓝及焦点轮廓；字段文字不会随鼠标经过变蓝。 - **DESCRIPTION-R10**：【组件边界】字段标签、冒号和子字段说明属于静态内容，不自带表格行悬停、排序或勾选状态。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **DESCRIPTION-S01**：标签-说明-冒号-值 / 多行对齐 / 真实子字段斜杠清单 - [ ] **DESCRIPTION-S02**：标签与值同级 / 文本和数值左对齐 / 长标签 / 无数据 - [ ] **DESCRIPTION-S03**：当前静态字段只核对标签、有效值、必要说明与空值的文字角色；标签和值没有悬停、选中、禁用或输入错误状态。字段旁存在独立操作时再按操作组件验收。 - [ ] **DESCRIPTION-S04**：核对正文14/400、次级操作12/400、标题600及同色深正文；检查实际弹出层和子 span，不能只检查父元素。 ### 专题验收重点 同组标签与值字号字重一致；子字段说明不掺样例值。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html
字段名称： 示例值
数值字段： 2,600.00
子字段说明：字段一 / 字段二 / 字段三
``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：历史样板规范 55 / 60。 - [打开本专题页面](../index.html#spec-description) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`description`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 字段与值 | 字段名、中文冒号和有效值统一正文深灰、14px/400；静态只读内容不变禁用灰。 | | 补充与空值 | 必要说明使用辅助深灰；真实空值使用空值灰；有效0仍使用正文深灰。 | | 字段附属动作 | 只有实际说明、展开或复制入口使用操作蓝及焦点轮廓；字段文字不会随鼠标经过变蓝。 | 字段标签、冒号和子字段说明属于静态内容，不自带表格行悬停、排序或勾选状态。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [会员列表 · 会员组合列内字段标签、值及账户分项](../../showcase/index.html#members) · [场景文档](../../showcase/docs/members.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 标签与角标（小红点、数字） · `tags` 专题 `tags` · 数据展示 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`tag`、`badge`。 本页模板直接使用的 Element UI 标签：`el-button`、`el-tag`。 ### 本页用法与分类 默认用法：条件使用标签；新动态使用小红点；明确未读数量使用数字角标。三者按含义选用，不按外观喜好互换。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 用途 | 已选条件、分类、新动态、未读数量 | 已选条件或分类用标签；只有“有更新”用点，需知道数量用数字。同一目标不叠点与数字。 | | 显示规则 | 数字由真实数量产生，小红点由真实新动态产生。 | 0隐藏，1–99显示数字，超过99显示99+。未知不是0；数量失败在内容区域说明。 | | 尺寸与位置 | 纯点8px；数字高18px、12px字；右上角独立定位。 | 尺寸均含1px白边；入口至少28px，常规32px，已有顶栏40px保留。角标不单独点击。 | | 阅读与清除 | 进入列表、读取某条、全部已读是不同动作。 | 只在对应内容已查看或已读更新成功后清除；失败保持未读，新动态到达再出现。 | 使用边界：普通业务状态不附装饰红点，普通数量不全部做提醒角标；标签关闭不等于删除对象。 ### 组件规则 - **TAGS-R01**：标签与角标是两种用途：标签表达已选条件或分类，角标附着于入口提醒新动态或未读数量；普通业务状态保留正文文字，不加装饰圆点。小红点与数字角标是同一角标组件的两种信息表达，同一目标只显示一种，不能叠加。 - **TAGS-R02**：纯小红点表示有尚未查看的新动态，不提供具体数量；默认直径8px。数字角标仅接受已知、有效的非负整数：0隐藏，1–99显示实际数字，超过99显示99+；负数、小数、空值或获取失败不得伪造为0。数量未知时隐藏数字角标，在目标区域明确加载或失败；只有另有可靠的新动态标记时才可显示小红点。 - **TAGS-R03**：数字角标总高度18px；1–9为18×18px圆形，10–99与99+按12px/400文字、左右4px内边距自然形成胶囊，最小宽18px。纯点与数字角标均使用公共提醒红 #F56C6C，数字使用白色 #FFFFFF；尺寸包含1px白色边框，数字行高16px。复用公共字体栈，不另用Arial或加粗。 - **TAGS-R04**：角标采用绝对定位，附着于入口右上角，不参与文字与图标的排版。数字入口默认32px或更大，紧凑入口至少28px；角标不单独响应点击、悬停或键盘焦点，整个入口提供操作热区。常规入口角标右上外缘与入口右上边缘对齐（top:0、right:0）；宿主必须预留空间并避免祖先裁切。同一模块不可随数字位数改变入口位置。 - **TAGS-R05**：只有入口响应悬停、按下和键盘焦点；角标本体不因操作变蓝、变大或加外圈。入口中文可访问名称说明“有新动态”或完整未读数量，即使画面显示99+也要可读取真实数量；可用悬停说明补充全数，不能只靠颜色或悬停。 - **TAGS-R06**：打开通知列表不代表全部已读。阅读某条通知并成功更新后减去这一条；明确执行全部已读并成功后清零隐藏。更新中防重复，失败保留或恢复原未读状态并提供重试说明。筛选结果条数、其中未读与全部未读分别标注，不能混成同一口径；跨筛选执行全部已读时，按钮须明确作用于全部通知。纯点在对应新动态确实被查看后消失，不能仅因鼠标经过清除。 - **TAGS-R07**：已选标签使用选中浅蓝底和操作蓝文字，关闭只取消当前条件；普通分类标签使用白底、正文深灰与边框灰，不按分类随机配色。可关闭标签必须说明取消哪一项，不可移除时不提供可执行的关闭入口；恢复只恢复当前选择。删除已保存对象另走危险操作与居中确认。 - **TAGS-R08**：本页分开演示标签、纯点和数字角标。新增、阅读、全部已读、失败重试只改变当前示例集合，不请求业务接口；边界对照用于核对0、1、9、10、99、100、未知等显示规则，不是业务可选皮肤。 - **TAGS-R09**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **TAGS-R10**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **TAGS-R11**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **TAGS-R12**：角标的尺寸、计数与清除规则只在本专题维护。图标专题负责铃铛等图形和热区，反馈专题负责消息提示与通知内容容器；这些专题引用本页，不再另建角标规则。系统通知和下载记录沿用各自业务的读取含义，不能把新下载动态与通知未读数混成一个计数。 - **TAGS-R13**：本后台角标仅采用纯点和未读数字。官方支持字符串与多种类型色，不作为本项目默认方案；new/hot等营销字样及普通业务状态另按业务内容处理，不扩充角标配色。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **TAGS-S01**：标签取消与恢复只作用于当前项；分类、业务状态、新动态与未读数量的含义清晰。 - [ ] **TAGS-S02**：检查纯点8×8px，数字高18px且1–9为18×18px圆；10–99和99+胶囊随文字伸展，以上均包含1px白边。 - [ ] **TAGS-S03**：对照0隐藏、1、9、10、99、100→99+；非法数值及未知不伪造0；可访问名称保留完整数值。 - [ ] **TAGS-S04**：点击入口只展开列表而未读数不变；阅读单条后减一，全部已读后隐藏，再新增后恢复。纯点在对应动态被阅读后隐藏。 - [ ] **TAGS-S05**：开启模拟更新失败后阅读或全部已读，未读保持且有失败说明；关闭模拟失败可重试成功。此项仅为本地组件演示。 - [ ] **TAGS-S06**：角标不参与布局、不遮住入口图形；数字从一位变多位不挤动文字，同目标不叠数字和点；检查窄屏与裁切边界。 - [ ] **TAGS-S07**：Tab只进入完整入口和真实操作，小红点与数字不单独获焦。入口至少28px、常规32px，中文可访问名称说明新动态或完整未读数。 - [ ] **TAGS-S08**：核对页面、规范与场景、下载MD及复制文档一致；业务通知检查读取中/失败数量未知、全部服务页完整加载、筛选与全部未读口径、成功后才更新和重复操作阻断；下载记录单独检查动态已查看的含义。 ### 专题验收重点 标签取消与恢复、点的查看清除、数字的0/99+边界、逐条与全部已读、失败保持及完整数量朗读均需检查。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html

选择标签

已选项 A 恢复标签 普通分类
``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：现有中控系统通知、下载记录与公共标签实现；本次统一角标尺寸、定位及读取边界。 - [打开本专题页面](../index.html#spec-tags) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`tags`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) 自定义示例 `badge-patterns` 的实现：[badge-patterns.js](../badge-patterns.js)。 ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 选择与分类标签 | 已选条件用选中浅蓝底和操作蓝；分类用白底、正文深灰、边框灰，不随机着色。 | | 标签关闭与恢复 | 取消选择使用操作蓝，键盘进入保留可见焦点；不可移除项无可执行的关闭入口。 | | 新动态与未读数量 | 纯点和数字角标统一提醒红 #F56C6C；数字白色12px/400。红色表达提醒，不等于业务错误。 | | 已读、零值与未知 | 真实0或对应动态已查看后隐藏。未知与失败不显示伪造数字，不把角标自动染灰作为加载。 | | 入口交互 | 悬停、按下、禁用和键盘焦点属于整个入口；角标本体不增加交互变色或独立焦点。 | 本页统一维护标签与角标规则。图标和反馈容器只引用本页；角标是附着提示，不是独立业务状态或按钮。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [人群标签 · 标签目录 · 分组计数标签](../../showcase/index.html#segments) · [场景文档](../../showcase/docs/segments.md) - [运营总览 · 顶部系统通知 · 未读角标](../../showcase/index.html?example=notification-badges#overview) · [场景文档](../../showcase/docs/overview.md)；落地范围：系统通知数字角标与下载动态小红点；不代表标签筛选。 [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 分页与边界状态 · `pagination` 专题 `pagination` · 列表工具 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`pagination`。 本页模板直接使用的 Element UI 标签：`el-pagination`。 ### 本页用法与分类 默认用法：常规业务列表优先使用“完整分页”：总条数、每页条数、翻页与页码跳转齐全，采用普通页码外观和常规尺寸。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 功能配置 | 完整分页或仅保留翻页 | 主列表优先完整配置；嵌入弹窗等空间有限且不需调整条数/跳页时，才按需精简。 | | 外观样式 | 普通页码、带背景页码 | 普通页码为默认；背景示例仅用于外观对照，新页面不能单独换肤，采用前先明确统一范围。 | | 尺寸 | 常规、紧凑 | 常规为默认；紧凑仅用于受限容器，页码功能和选中语义保持一致。 | | 数据边界 | 空数据、单页、首尾页 | 随总数和当前页自动出现，不属于可自由挑选的样式。 | 使用边界：功能配置、外观和尺寸是不同维度，可以按条件组合；本页不是三套可任选的分页方案，5/10条是演示数据配置。 ### 组件规则 - **PAGINATION-R01**：由总条数、每页条数选择、上一页、页码、下一页和页码跳转组成；高度基线统一。上一页和下一页在边界禁用。 - **PAGINATION-R02**：总数、当前页与可见记录一致；修改每页条数或记录数减少后重算并约束到有效页，不能有数据却停在越界空页。筛选条件变化按宿主规则回第一页。Element 默认跳页会将越界值约束至首尾页；需显式报错的业务应在宿主层补校验。 - **PAGINATION-R03**：本例共 26 条，支持每页 5 / 10 条；当前页、每页条数与总数由分页控件直接表达，不在下方重复显示辅助统计。切换仅操作本地样例，业务是否保留已选项由宿主明确。 - **PAGINATION-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **PAGINATION-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **PAGINATION-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **PAGINATION-R07**：页码、前后翻页图标与跳页数字始终在各自点击框中居中；默认、悬停、当前页、禁用及省略跳转均不移动内容。表格正文左对齐规则不得命中分页 li.number；页码外框尺寸不因选中加边框发生变化。 - **PAGINATION-R08**：【普通页与箭头】白底、正文深灰、边框灰；可执行页码及箭头悬停用浅灰背景和操作蓝，数字与图标始终居中。 - **PAGINATION-R09**：【当前页】当前页白底、主题蓝边框、操作蓝数字；选中不改变内距、字重和对齐，不绘制对勾或半选横线。 - **PAGINATION-R10**：【边界禁用】首页上一页、末页下一页及真实不可执行入口使用禁用灰并阻止触发；空数据仍明确显示总数。 - **PAGINATION-R11**：【键盘与快速翻页】可执行页码、箭头和省略号快速翻页入口使用操作蓝键盘焦点；按下不套主按钮蓝底或下移效果。 - **PAGINATION-R12**：【页容量与跳页】页容量和跳页值保持正文深灰、白底、边框灰，聚焦仅原边框主题蓝；跳页数字居中，非法值按分页规则纠正，不杜撰表单红框错误态。 - **PAGINATION-R13**：【组件边界】分页没有复选、半选、错误触发框或已选禁用勾选；当前页、键盘定位、翻页禁用及跳页输入分别定义。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **PAGINATION-S01**：分别核对功能配置（总数、条数选择、翻页、跳页）、外观（普通/背景）和尺寸（常规/紧凑）。主列表优先完整配置、普通外观与常规尺寸；边界状态按总数和当前页自动变化。 - [ ] **PAGINATION-S02**：空数据、单页、末页、总数减少、切换每页条数与跳页越界；未读筛选下阅读末页最后一条后，页码回到最后有效页，当前筛选数量同步。 - [ ] **PAGINATION-S03**：服务端分页失败保留上下文；已选状态是否跨页由宿主明确 - [ ] **PAGINATION-S04**：本页核对当前页、可用页悬停、键盘焦点和首页/末页箭头禁用；当前页与悬停叠加仍保持当前页标识。页码跳转采用页码约束，不套业务输入错误红框或半选状态。 - [ ] **PAGINATION-S05**：核对正文14/400、次级操作12/400、标题600及同色深正文；检查实际弹出层和内部文字节点，不能只检查父元素。 - [ ] **PAGINATION-S06**：检查页码切换、首尾禁用和跳页越界约束；基础分页不提供表单错误红框。若业务要求显式跳页报错，由宿主单独补校验与提示，不能把页码当前态当作输入错误态。 - [ ] **PAGINATION-S07**：逐项点选1–6；检查当前页数字与边框水平/垂直居中；首末页箭头、省略跳转、页容量和跳页输入；切换后整体不跳动。 - [ ] **PAGINATION-S08**：切换页码或每页条数后，保留控件自身选中和禁用反馈，不新增重复的当前页、每页条数或展示范围统计。 - [ ] **PAGINATION-S09**：当前页码和省略号：Tab（制表键）可到达，Enter（回车键）或空格键执行；当前页标识 aria-current="page" 与选中页同步；禁用入口及隐藏专题不进入键盘导航，末页说明仅指初始状态。 ### 专题验收重点 鼠标点击或键盘确认第N页后，当前页必须为N且只翻页一次；说明文字不触发翻页。核对首尾禁用、修改条数、非法跳页及最后一页剩余数量。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html

01功能配置 · 完整分页（默认）

主列表优先；总数、条数选择、翻页与跳转齐全

02数据边界 · 自动变化

由总数与当前页决定，不是可选外观
空数据 · 0 条
单页 · 5 条
末页初始样例 · 可继续翻页

03外观对照 · 普通与背景

同为常规尺寸；外观不改变翻页功能
普通页码 · 默认
带背景页码 · 能力对照

背景外观不增加功能；业务采用前需明确统一范围，不在单个新页面自行换肤。

04尺寸对照 · 常规与紧凑

这里只比较尺寸，功能与外观相同
常规尺寸 · 默认
紧凑尺寸 · 受限容器

紧凑尺寸仅在容器空间受限时采用；不会自动取消总数、每页条数或跳页功能。

``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：历史样板规范 14 / 63。 - [打开本专题页面](../index.html#spec-pagination) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`pagination`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 普通页与箭头 | 白底、正文深灰、边框灰；可执行页码及箭头悬停用浅灰背景和操作蓝，数字与图标始终居中。 | | 当前页 | 当前页白底、主题蓝边框、操作蓝数字；选中不改变内距、字重和对齐，不绘制对勾或半选横线。 | | 边界禁用 | 首页上一页、末页下一页及真实不可执行入口使用禁用灰并阻止触发；空数据仍明确显示总数。 | | 键盘与快速翻页 | 可执行页码、箭头和省略号快速翻页入口使用操作蓝键盘焦点；按下不套主按钮蓝底或下移效果。 | | 页容量与跳页 | 页容量和跳页值保持正文深灰、白底、边框灰，聚焦仅原边框主题蓝；跳页数字居中，非法值按分页规则纠正，不杜撰表单红框错误态。 | 分页没有复选、半选、错误触发框或已选禁用勾选；当前页、键盘定位、翻页禁用及跳页输入分别定义。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [会员列表 · 会员列表底部分页](../../showcase/index.html#members) · [场景文档](../../showcase/docs/members.md) - [存款记录 · 存款列表底部分页](../../showcase/index.html#deposits) · [场景文档](../../showcase/docs/deposits.md) - [取款审核 · 取款审核列表底部分页](../../showcase/index.html#withdrawals) · [场景文档](../../showcase/docs/withdrawals.md) - [账户调整审核 · 账户调整列表底部分页](../../showcase/index.html#account-audit) · [场景文档](../../showcase/docs/account-audit.md) - [活动管理 · 活动列表底部分页](../../showcase/index.html#campaigns) · [场景文档](../../showcase/docs/campaigns.md) - [广告管理 · 广告列表底部分页](../../showcase/index.html#adverts) · [场景文档](../../showcase/docs/adverts.md) - [公告管理 · 公告列表底部分页](../../showcase/index.html#notifications) · [场景文档](../../showcase/docs/notifications.md) - [通知管理 · 通知列表底部分页](../../showcase/index.html#site-messages) · [场景文档](../../showcase/docs/site-messages.md) - [推广报表 · 日报 · 报表底部分页](../../showcase/index.html#reports) · [场景文档](../../showcase/docs/reports.md) - [推广报表 · 代理报表底部分页](../../showcase/index.html#agents) · [场景文档](../../showcase/docs/agents.md) - [操作日志 · 日志列表底部分页](../../showcase/index.html#logs) · [场景文档](../../showcase/docs/logs.md) - [运营总览 · 总览数据表分页](../../showcase/index.html#overview) · [场景文档](../../showcase/docs/overview.md) - [客服工单管理 · 工单列表底部分页](../../showcase/index.html#tickets) · [场景文档](../../showcase/docs/tickets.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 筛选设置与折叠边界 · `filter-settings` 专题 `filter-settings` · 列表工具 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 本专题为基础规则、同一组件的补充场景或组合模式，不作为独立的 Element UI 官方组件声明。 本页模板直接使用的 Element UI 标签：`el-button`。 ### 本页用法与分类 默认用法：默认用于设置哪些筛选字段可见：打开后修改草稿，确认才应用，取消保留原设置。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 用途 | 管理筛选字段是否显示，不是填写业务查询条件。 | 需要增减可见筛选字段时使用；查询值的输入仍由对应表单控件完成。 | | 功能配置 | 全选、恢复默认、锁定项和排序分别是设置能力。 | 本页采用字段选择、全选、恢复默认、确认和取消；锁定项、排序及两行折叠只有宿主确有需要并实现后才验收。 | | 数据状态 | 未确认草稿与已应用设置是不同数据阶段，锁定项由配置限制。 | 勾选只更新草稿，确认后才改变已应用设置；禁用和锁定不作为可选配色。 | | 内容布局 | 单行或带说明的两行取决于字段内容；长列表在面板内滚动。 | 字段需要解释时增加第二行说明；根据真实可用空间决定滚动或宿主折叠，不缩小正文字号。 | 使用边界：不要把已勾选、锁定、展开或已应用列成几种视觉样式；本页未提供的排序和折叠不写成已实现。 ### 组件规则 - **FILTER-SETTINGS-R01**：这里只规范设置组件，不设计业务筛选表单。顶部“全选 / 恢复默认”，底部“取消 / 确认”；长列表在弹窗内滚动。 - **FILTER-SETTINGS-R02**：筛选字段的宽度统一引用输入框专题；本页只管理显隐设置，显示、隐藏或恢复默认不改变同类字段的280px整项合同及日期/金额范围各自宽度口径。 - **FILTER-SETTINGS-R03**：字段显隐与查询值是不同状态；隐藏后保留还是清除查询值须由业务合同明确，组件不得偷偷改变。 - **FILTER-SETTINGS-R04**：接入时如需字段排序，可采用移动按钮或带键盘替代方式的拖拽；如需两行折叠，按真实可用空间计算并让动作区参与占位。本页只演示字段选择、确认与取消，排序和折叠由宿主实现。 - **FILTER-SETTINGS-R05**：筛选文本输入默认占位“请输入”，未选择的下拉默认“请选择”，默认全部的下拉为“全部”；保留字段标签、日期开始/结束提示，不将占位文案当作实际筛选值。 - **FILTER-SETTINGS-R06**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **FILTER-SETTINGS-R07**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **FILTER-SETTINGS-R08**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **FILTER-SETTINGS-R09**：【设置面板】白底、正文深灰，分组标题600字重，边框灰与分隔灰；分组不随机增加底色。 - **FILTER-SETTINGS-R10**：【条件选择】勾选标记主题蓝；已生效条件标签选中浅蓝底和操作蓝文字；草稿勾选不冒充已经应用。 - **FILTER-SETTINGS-R11**：【展开与收起】查看更多、收起使用操作蓝、12px/400；展开只改变内容和箭头，不把整个面板填蓝。 - **FILTER-SETTINGS-R12**：【应用与不可用】应用按钮按按钮规范；不可编辑条件使用禁用灰并保留原因；空条件说明为空值灰，不等于失败。 - **FILTER-SETTINGS-R13**：【组件边界】筛选设置容器不自带选中或错误颜色；条件复选、折叠入口和应用动作分别服从对应组件。 - **FILTER-SETTINGS-R14**：带补充说明的选项分为两行：字段名称14px/400/21px，说明12px/400/18px、辅助深灰，间隔4px；复选框对齐字段名称第一行，不能下沉到说明旁。选中只改变适用状态颜色，不改变字号或字重。 - **FILTER-SETTINGS-R15**：【关闭事件】确认、用户取消和程序关闭分别处理：确认后关闭不能再触发取消或回滚；用户一次取消只处理一次。关闭生命周期回调不等于用户取消。提交期间能否关闭及草稿去留按实际组件约定执行。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **FILTER-SETTINGS-S01**：当前示例：字段显示项、全选和恢复默认都只修改草稿；确认应用，取消保留此前已应用值。 - [ ] **FILTER-SETTINGS-S02**：接入验收：宿主增加系统锁定项或长列表时，再核对锁定限制和内部滚动；当前基础示例没有锁定项和长列表。 - [ ] **FILTER-SETTINGS-S03**：接入验收：排序、持久化作用域和两行折叠由宿主实现；按真实宽度计算，动作区也参与占位。 - [ ] **FILTER-SETTINGS-S04**：接入验收：隐藏查询值保留或清除的策略必须明确，避免不可见条件影响结果却无提示。 - [ ] **FILTER-SETTINGS-S05**：当前示例核对单行字段名称14px与复选框对齐；宿主增加说明时采用名称14px、说明12px、间隔4px，并与名称首行对齐。选中、取消和禁用不改变字号或对齐。 - [ ] **FILTER-SETTINGS-S06**：宽度联动验收：按输入框专题核对整项与边框口径、同组对齐、长内容、窄容器换行及状态不跳宽。 - [ ] **FILTER-SETTINGS-S07**：接入验收：分别检查确认、取消、叉号、Esc、遮罩及父级程序关闭；一次动作只产生一次对应业务结果，确认后不误发取消，禁用的关闭入口不能执行。 ### 专题验收重点 修改、全选与恢复默认只更新草稿；取消不影响已应用值，确认才应用。锁定项、排序、持久化和两行折叠属于宿主接入验收项。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html 打开筛选设置

已应用：{{savedSettings.join(' / ') || '无'}}

``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：历史样板规范 1 / 2 / 56；当前规则索引。 - [打开本专题页面](../index.html#spec-filter-settings) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`filter-settings`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 设置面板 | 白底、正文深灰，分组标题600字重，边框灰与分隔灰；分组不随机增加底色。 | | 条件选择 | 勾选标记主题蓝；已生效条件标签选中浅蓝底和操作蓝文字；草稿勾选不冒充已经应用。 | | 展开与收起 | 查看更多、收起使用操作蓝、12px/400；展开只改变内容和箭头，不把整个面板填蓝。 | | 应用与不可用 | 应用按钮按按钮规范；不可编辑条件使用禁用灰并保留原因；空条件说明为空值灰，不等于失败。 | 筛选设置容器不自带选中或错误颜色；条件复选、折叠入口和应用动作分别服从对应组件。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [会员列表 · 列表工具区 · 筛选设置](../../showcase/index.html#members) · [场景文档](../../showcase/docs/members.md) - [取款审核 · 取款列表 · 筛选设置](../../showcase/index.html#withdrawals) · [场景文档](../../showcase/docs/withdrawals.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 列设置：固定、显隐、顺序 · `column-settings` 专题 `column-settings` · 列表工具 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 本专题为基础规则、同一组件的补充场景或组合模式，不作为独立的 Element UI 官方组件声明。 本页模板直接使用的 Element UI 标签：`el-button`。 ### 本页用法与分类 默认用法：默认用同一个列设置面板管理列的显隐、固定位置与顺序；修改后确认应用，取消丢弃草稿。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 功能配置 | 可见性、固定左/不固定/固定右、显示顺序是三项独立设置。 | 按阅读和操作需要分别设置；固定在一侧不代表该字段必须导出，也不等于选中数据行。 | | 限制来源 | 系统锁定列与用户后来固定的列，允许操作不同。 | 系统锁定列按规则保持可见且不可移出；用户固定列可隐藏、移出或换侧，限制来自配置。 | | 修改方式 | 移动按钮与拖拽都是调整顺序的方式，不是两套配色。 | 沿用当前页面提供的移动操作；只有确实接入拖拽时才出现插入线与拖拽反馈，并保留键盘替代。 | | 数据状态 | 草稿、已应用、不可操作和无可见列分别反映配置结果。 | 确认后保存当前配置；取消不改已应用列，实际不合法时才给错误说明。 | 使用边界：不要把固定左/右、勾选、禁用或拖拽反馈写成可自由挑选的视觉主题。 ### 组件规则 - **COLUMN-SETTINGS-R01**：分组为固定左 / 不固定 / 固定右；默认固定项保持勾选且不可更改，不可移出。用户后固定项可隐藏、移出、换侧。 - **COLUMN-SETTINGS-R02**：全选 / 恢复默认只影响本组件配置。恢复默认包括显隐、固定侧、顺序；取消恢复打开前状态。 - **COLUMN-SETTINGS-R03**：不固定区排序与固定动作分别表达，操作图标要有明确名称。字段承接关系不随显示方式改变。 - **COLUMN-SETTINGS-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **COLUMN-SETTINGS-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **COLUMN-SETTINGS-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **COLUMN-SETTINGS-R07**：【面板与字段】白底、字段正文深灰、分组标题600；边框灰、分隔灰，不为列分组新增颜色。 - **COLUMN-SETTINGS-R08**：【显隐与固定】复选标记主题蓝并保留勾选/半选语义；固定方式用文字或图标表达，普通操作使用操作蓝。 - **COLUMN-SETTINGS-R09**：【排序与拖动】顺序按当前页面已有的移动操作调整；只有宿主实际接入拖拽时，拖动目标才使用选中浅蓝、插入位置使用主题蓝线。不可移动项用禁用灰并说明原因。 - **COLUMN-SETTINGS-R10**：【草稿与应用】应用动作按按钮规范；取消不改当前列；没有可见列等真实配置错误才使用错误红提示，不把面板整体染红。 - **COLUMN-SETTINGS-R11**：【组件边界】列设置的显隐复选、固定方式、顺序和拖放反馈相互独立；拖动是顺序变化，不是选中数据行。 - **COLUMN-SETTINGS-R12**：【关闭事件】确认、用户取消和程序关闭分别处理：确认后关闭不能再触发取消或回滚；用户一次取消只处理一次。关闭生命周期回调不等于用户取消。提交期间能否关闭及草稿去留按实际组件约定执行。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **COLUMN-SETTINGS-S01**：当前示例：固定左、不固定、固定右分组，显隐、顺序、全选、恢复默认、确认与取消。 - [ ] **COLUMN-SETTINGS-S02**：接入验收：系统锁定列不能隐藏或移出；用户固定列允许隐藏与换侧，固定身份与可见性分别保存。 - [ ] **COLUMN-SETTINGS-S03**：接入验收：取消丢弃草稿，重新打开读取已应用设置；配置按账号和页面隔离。 - [ ] **COLUMN-SETTINGS-S04**：接入验收：列宽与固定偏移重算；真实子字段说明保持可读，长列表内部滚动。 - [ ] **COLUMN-SETTINGS-S05**：接入验收：分别检查确认、取消、叉号、Esc、遮罩及父级程序关闭；一次动作只产生一次对应业务结果，确认后不误发取消，禁用的关闭入口不能执行。 ### 专题验收重点 固定身份与可见性分别保存；取消不泄漏草稿。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html 打开列设置

当前可见：{{visibleColumns.join(' / ')}}

``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：历史样板规范 5 / 59。 - [打开本专题页面](../index.html#spec-column-settings) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`column-settings`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 面板与字段 | 白底、字段正文深灰、分组标题600；边框灰、分隔灰，不为列分组新增颜色。 | | 显隐与固定 | 复选标记主题蓝并保留勾选/半选语义；固定方式用文字或图标表达，普通操作使用操作蓝。 | | 排序与拖动 | 顺序按当前页面已有的移动操作调整；只有宿主实际接入拖拽时，拖动目标才使用选中浅蓝、插入位置使用主题蓝线。不可移动项用禁用灰并说明原因。 | | 草稿与应用 | 应用动作按按钮规范；取消不改当前列；没有可见列等真实配置错误才使用错误红提示，不把面板整体染红。 | 列设置的显隐复选、固定方式、顺序和拖放反馈相互独立；拖动是顺序变化，不是选中数据行。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [存款记录 · 列表工具区 · 列设置](../../showcase/index.html#deposits) · [场景文档](../../showcase/docs/deposits.md) - [取款审核 · 取款列表 · 列设置](../../showcase/index.html#withdrawals) · [场景文档](../../showcase/docs/withdrawals.md) - [推广报表 · 日报 · 报表工具区 · 列设置](../../showcase/index.html#reports) · [场景文档](../../showcase/docs/reports.md) - [推广报表 · 代理报表 · 列设置](../../showcase/index.html#agents) · [场景文档](../../showcase/docs/agents.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 导出与列设置同步 · `export` 专题 `export` · 列表工具 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 本专题为基础规则、同一组件的补充场景或组合模式，不作为独立的 Element UI 官方组件声明。 本页模板直接使用的 Element UI 标签：`el-button`。 ### 本页用法与分类 默认用法：默认从普通“导出”入口打开字段确认面板，初始勾选使用产品配置；本页只确认字段选择。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 勾选来源 | 初始配置和“同步列设置”决定当前勾选集合。 | 首次打开使用产品默认；用户点击同步时才按当前可见列更新，不改变导出字段顺序。 | | 功能范围 | 字段选择、全选、同步、确认和取消属于当前面板功能。 | 固定列仍可取消导出；操作列不作为数据列，合并字段的实际输出在真实导出接入时明确。 | | 自动可用状态 | 确认能否执行取决于勾选内容或权限条件。 | 当前空选时确认不可用；无权限等限制只在实际存在时使用禁用说明。 | | 任务反馈 | 生成中、完成、失败属于真实导出任务的阶段。 | 接入真实文件生成后按任务结果显示反馈；本页没有这些实际任务，不能通过选颜色假装下载成功。 | 使用边界：不要把初始勾选、同步列设置、生成中与失败当成几种可选样式；文件生成与下载必须有真实结果。 ### 组件规则 - **EXPORT-R01**：入口名“导出”，确认弹窗名“导出项确认”；顶部“全选 / 同步列设置”，底部“取消 / 确认”。 - **EXPORT-R02**：初始勾选由产品配置提供；固定列对应数据也允许取消。同步只按当前可见列更新勾选，不继承禁用状态，不改变字段顺序。 - **EXPORT-R03**：操作入口不作为数据导出。合并列实际导出展开为真实子字段；这里只展示字段选择组件，不模拟真实文件生成成功。 - **EXPORT-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **EXPORT-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **EXPORT-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **EXPORT-R07**：【导出入口】默认导出入口按普通按钮或操作蓝文字入口实现；只有被明确设为主动作时才使用主按钮完整状态。 - **EXPORT-R08**：【生成中】使用主题蓝加载图标及正文深灰进度文字；防重复提交，不提前显示成功绿。 - **EXPORT-R09**：【成功与失败】完成使用成功绿图标和明确文案；失败使用错误红图标及短提示，重试操作蓝；文件名始终正文深灰。 - **EXPORT-R10**：【不可导出与焦点】无权限或条件不满足时禁用灰并给原因；可执行入口保留操作蓝键盘焦点，不改成危险红。 - **EXPORT-R11**：【组件边界】导出属于有过程反馈的动作，不自带危险删除语义；准备、生成、下载及失败是不同阶段。 - **EXPORT-R12**：带补充说明的选项分为两行：字段名称14px/400/21px，说明12px/400/18px、辅助深灰，间隔4px；复选框对齐字段名称第一行，不能下沉到说明旁。选中只改变适用状态颜色，不改变字号或字重。 - **EXPORT-R13**：【关闭事件】确认、用户取消和程序关闭分别处理：确认后关闭不能再触发取消或回滚；用户一次取消只处理一次。关闭生命周期回调不等于用户取消。提交期间能否关闭及草稿去留按实际组件约定执行。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **EXPORT-S01**：当前示例：导出项确认中，全选、同步列设置、取消与确认；空选时确认不可用。 - [ ] **EXPORT-S02**：当前示例：同步当前可见列不继承锁定禁用态、不改变字段顺序；固定字段仍可取消导出。 - [ ] **EXPORT-S03**：接入验收：合并字段按真实子字段输出、排除操作列；实际文件表头、顺序、编码、金额精度及导出范围核对。 - [ ] **EXPORT-S04**：接入验收：当前只展示字段选择，不代表文件已经生成或下载；下载成功需真实文件证据。 - [ ] **EXPORT-S05**：核对单行与双行选项：名称字号大于说明，复选框与名称首行居中；选中、取消、禁用前后不改变文字尺寸或对齐。 - [ ] **EXPORT-S06**：接入验收：分别检查确认、取消、叉号、Esc、遮罩及父级程序关闭；一次动作只产生一次对应业务结果，确认后不误发取消，禁用的关闭入口不能执行。 ### 专题验收重点 初始勾选来自产品配置；点击同步后按当前可见列更新，二者是勾选来源规则。固定字段可取消，空选时确认不可用。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html 打开导出项确认

{{ exportResult }}

``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：历史样板规范 57 / 58；当前规则索引导出标题。 - [打开本专题页面](../index.html#spec-export) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`export`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 导出入口 | 默认导出入口按普通按钮或操作蓝文字入口实现；只有被明确设为主动作时才使用主按钮完整状态。 | | 生成中 | 使用主题蓝加载图标及正文深灰进度文字；防重复提交，不提前显示成功绿。 | | 成功与失败 | 完成使用成功绿图标和明确文案；失败使用错误红图标及短提示，重试操作蓝；文件名始终正文深灰。 | | 不可导出与焦点 | 无权限或条件不满足时禁用灰并给原因；可执行入口保留操作蓝键盘焦点，不改成危险红。 | 本页只演示导出字段选择；生成中、完成、下载和失败是接入真实导出后的任务阶段，由实际结果触发，不是可选视觉样式。导出不自带危险删除语义。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [存款记录 · 列表工具区 · 导出确认](../../showcase/index.html#deposits) · [场景文档](../../showcase/docs/deposits.md) - [取款审核 · 取款列表 · 导出与下载记录](../../showcase/index.html#withdrawals) · [场景文档](../../showcase/docs/withdrawals.md) - [推广报表 · 日报 · 报表工具区 · 导出](../../showcase/index.html#reports) · [场景文档](../../showcase/docs/reports.md) - [推广报表 · 代理报表 · 导出](../../showcase/index.html#agents) · [场景文档](../../showcase/docs/agents.md) - [运营总览 · 总览数据导出与下载记录](../../showcase/index.html#overview) · [场景文档](../../showcase/docs/overview.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 文字提示：悬停、聚焦与关闭 · `tooltip` 专题 `tooltip` · 浮层组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`tooltip`。 本页模板直接使用的 Element UI 标签：`el-button`、`el-tooltip`。 ### 本页用法与分类 默认用法：默认用统一白底的短文字提示解释控件；本页放在触发器上方，鼠标悬停或键盘聚焦显示。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 用途 | 只承载简短说明，不承载按钮、表单或唯一的错误信息。 | 短说明使用本组件；内容需要点击或填写时改用气泡浮层或对话框。 | | 位置与空间 | 上方位置、边缘翻转和长文本换行属于位置适配。 | 本页以上方为起点；靠近视口边缘时适配可见空间，不另选一套提示配色。 | | 自动显隐 | 显示和关闭由鼠标、焦点及退出键触发。 | 悬停或聚焦进入提示，按规则移出、失焦或退出键关闭；禁用动作仍不可执行。 | 使用边界：白底、正文深灰和灰边是统一外观；悬停、聚焦、关闭以及自动翻转不是可自由选择的样式。 ### 组件规则 - **TOOLTIP-R01**：非交互短说明统一白底 #FFFFFF、正文深灰 #303133、边框灰 #DCDFE6；文字12px/400/18px，复用公共阴影。提示宽度随内容，最大360px且不超过视口减24px，长文自然换行。鼠标悬停与键盘聚焦均可显示，退出键可关闭，移入提示层保持显示；不另设黑底白字样式。 - **TOOLTIP-R02**：放置在可见区域内，不被滚动层和固定列剪裁；长内容换行。纯 tooltip 不承载按钮或输入。 - **TOOLTIP-R03**：有交互的内容使用 气泡浮层 / 对话框，不把隐藏 tooltip 当作关键错误的唯一来源。 - **TOOLTIP-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **TOOLTIP-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **TOOLTIP-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **TOOLTIP-R07**：【提示外观】提示白底、正文深灰、边框灰，必要阴影复用公共阴影；不新增独立黑色提示底。 - **TOOLTIP-R08**：【打开条件】鼠标悬停或键盘聚焦触发同一文字提示；触发器焦点按原组件定义，提示正文不变主题色。 - **TOOLTIP-R09**：【关闭与不可用】移出、失焦或退出键关闭提示；没有内容时不显示空壳。禁用控件的说明不能让禁用动作重新可执行。 - **TOOLTIP-R10**：【组件边界】文字提示没有确认/取消按钮、模态遮罩、提交加载或危险动作；需要可交互内容时使用气泡浮层。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **TOOLTIP-S01**：鼠标悬停、键盘聚焦、退出键关闭、鼠标移入提示层保持显示。 - [ ] **TOOLTIP-S02**：位置与空间验收：边缘翻转、长文本换行；接入时按需配置显示延时和禁用触发器说明。所有情况沿用统一白底、正文深灰和灰边。 - [ ] **TOOLTIP-S03**：容器滚动和弹窗中的层级正确；关键信息不能只放在悬浮文字提示中。 - [ ] **TOOLTIP-S04**：核对本专题每个适用状态引用公共色值；禁用/错误+聚焦/选中+悬停组合按优先级检查。 - [ ] **TOOLTIP-S05**：提示层文字核对12px/400/18px与#303133；触发按钮保持自身组件规格。检查实际提示层及内部文字，不能用外层正文14px规则覆盖提示文字。 - [ ] **TOOLTIP-S06**：当前提示：退出键关闭后，辅助技术隐藏标识 aria-hidden 同步为 true；再次移入或重新聚焦可打开，不能只隐藏画面而保留展开状态。 ### 专题验收重点 悬停 / 聚焦 / 退出键 / 鼠标移入浮层 / 失焦。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html 悬停或键盘聚焦 ``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：历史样板规范 51；本次键盘补充。 - [打开本专题页面](../index.html#spec-tooltip) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`tooltip`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 提示外观 | 提示白底、正文深灰、边框灰，必要阴影复用公共阴影；不新增独立黑色提示底。 | | 打开条件 | 鼠标悬停或键盘聚焦触发同一文字提示；触发器焦点按原组件定义，提示正文不变主题色。 | | 关闭与不可用 | 移出、失焦或退出键关闭提示；没有内容时不显示空壳。禁用控件的说明不能让禁用动作重新可执行。 | 文字提示没有确认/取消按钮、模态遮罩、提交加载或危险动作；需要可交互内容时使用气泡浮层。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [通知管理 · 截断字段或图标的完整说明](../../showcase/index.html#site-messages) · [场景文档](../../showcase/docs/site-messages.md) - [推广报表 · 日报 · 报表截断字段完整说明](../../showcase/index.html#reports) · [场景文档](../../showcase/docs/reports.md) - [推广报表 · 代理报表截断字段完整说明](../../showcase/index.html#agents) · [场景文档](../../showcase/docs/agents.md) - [运营总览 · 图表点与指标说明](../../showcase/index.html#overview) · [场景文档](../../showcase/docs/overview.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 气泡浮层与下拉菜单 · `popover` 专题 `popover` · 浮层组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`dropdown`、`dropdown-menu`、`dropdown-item`、`popover`。 本页模板直接使用的 Element UI 标签：`el-button`、`el-dropdown`、`el-dropdown-item`、`el-dropdown-menu`、`el-popover`。 ### 本页用法与分类 默认用法：本页默认通过点击打开无页面遮罩的气泡浮层；“更多操作”使用同样点击触发的命令菜单。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 内容用途 | 气泡浮层承载小段可交互内容，菜单承载一组操作命令。 | 需要说明加内部按钮时用气泡；需要从多个命令中选择时用菜单。 | | 触发配置 | 点击、悬停等属于打开方式，不是视觉样式。 | 本页采用点击打开；其他打开方式只有业务明确需要并完成键盘处理后再接入。 | | 尺寸与位置 | 浮层宽度和出现位置按内容与可见空间安排。 | 本页内容气泡宽240px、从下方出现；实际接入应约束在视口内，不用尺寸区分业务风险。 | | 交互状态 | 菜单定位、禁用与关闭后的焦点由操作和能力决定。 | 可执行项响应定位与选择；禁用项不执行，主动关闭回入口，外点关闭保留新焦点。 | 使用边界：不要把菜单和内容气泡仅当两种皮肤；也不要把本页未采用的悬停/手动触发写成当前可选配置。 ### 组件规则 - **POPOVER-R01**：包含按钮或选项时用可交互浮层；按钮声明 aria-expanded 和 aria-controls。当前样例打开后聚焦内部关闭按钮；主动关闭或退出键关闭后回到触发器；点击外部关闭时保留用户新选择的焦点。 - **POPOVER-R02**：菜单选择后关闭；点击外部或 退出键 关闭；浮层宽度受视口约束。层级高于表格固定列。 - **POPOVER-R03**：菜单项不能用无法聚焦的普通 div。禁用项明确原因并阻止触发。 - **POPOVER-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **POPOVER-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **POPOVER-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **POPOVER-R07**：【浮层与菜单】白底、正文深灰、边框灰与公共阴影；普通浮层不叠加页面遮罩。 - **POPOVER-R08**：【菜单定位】普通项正文深灰；悬停或键盘定位浅灰背景、操作蓝文字；危险项保持错误红，不能因悬停变成普通蓝。 - **POPOVER-R09**：【执行与焦点】普通文字动作操作蓝，危险文字动作错误红；可执行入口保留操作蓝焦点，按钮按各自层级规范。 - **POPOVER-R10**：【禁用与关闭】不可执行项使用禁用灰并阻止选择；主动关闭或退出键关闭恢复触发器焦点，点击外部保留新的焦点；不给浮层整体增加选中色。 - **POPOVER-R11**：【组件边界】气泡浮层和下拉菜单默认不带模态遮罩；菜单项不自动拥有勾选/半选，只有实际可选菜单才表示当前选择。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **POPOVER-S01**：当前示例采用点击打开：气泡承载说明与关闭按钮，菜单承载操作命令。悬停、聚焦或手动控制等其他触发方式由宿主按用途选择并单独接入验收。 - [ ] **POPOVER-S02**：打开焦点 / 外部关闭 / 退出键 / 关闭回焦点 / 长内容滚动 - [ ] **POPOVER-S03**：下拉菜单的点击或悬停触发、按钮与菜单分开操作、禁用项、选择后动作、分组分隔和键盘操作。 - [ ] **POPOVER-S04**：本页核对气泡白底、菜单普通/悬停/键盘定位和禁用项，以及打开、主动关闭与外部关闭的焦点行为；浮层容器不套输入错误、持续选中或半选状态。 - [ ] **POPOVER-S05**：核对正文14/400、次级操作12/400、标题600及同色深正文；检查实际弹出层和内部文字节点，不能只检查父元素。 - [ ] **POPOVER-S06**：当前气泡浮层：打开后焦点进入关闭按钮；内部按退出键或点击关闭恢复触发器，点击外部不抢走外部焦点；展开状态与受控浮层标识保持同步。 ### 专题验收重点 检查打开、选择和关闭：主动关闭或退出键关闭后回到触发器；点击外部关闭时保留新点击目标的焦点。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html

交互内容使用气泡浮层

关闭浮层
打开气泡浮层 更多操作 动作 A 动作 B 不可用（禁用示例）
``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：本次补充。 - [打开本专题页面](../index.html#spec-popover) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`popover`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 浮层与菜单 | 白底、正文深灰、边框灰与公共阴影；普通浮层不叠加页面遮罩。 | | 菜单定位 | 普通项正文深灰；悬停或键盘定位浅灰背景、操作蓝文字；危险项保持错误红，不能因悬停变成普通蓝。 | | 执行与焦点 | 普通文字动作操作蓝，危险文字动作错误红；可执行入口保留操作蓝焦点，按钮按各自层级规范。 | | 禁用与关闭 | 不可执行项使用禁用灰并阻止选择；主动关闭或退出键关闭恢复触发器焦点，点击外部保留新的焦点；不给浮层整体增加选中色。 | 气泡浮层和下拉菜单默认不带模态遮罩；菜单项不自动拥有勾选或半选。本页可演示点击开关、外点关闭、关闭按钮与退出键、关闭后焦点返回，以及展开状态和关联面板的语义属性；宿主接入后需按实际内容重新验收。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [会员列表 · 会员行操作 · 更多下拉菜单](../../showcase/index.html#members) · [场景文档](../../showcase/docs/members.md) - [运营总览 · 图表点详情浮层](../../showcase/index.html#overview) · [场景文档](../../showcase/docs/overview.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 对话框：标题、滚动与焦点 · `dialog` 专题 `dialog` · 浮层组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`dialog`。 本页模板直接使用的 Element UI 标签：`el-button`。 ### 本页用法与分类 默认用法：默认使用带标题、内容和页脚的模态对话框；本页分别演示普通内容、长内容滚动和只读字段历史。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 内容用途 | 普通内容、长说明与只读历史是内容场景，沿用同一种对话框结构。 | 只读历史只显示记录并关闭；需要编辑或提交时由宿主提供对应表单与保存规则。 | | 尺寸与滚动 | 宽度根据内容选取，长内容在中间区域滚动。 | 参考520/620/920px并限制在视口内；这些是宽度建议，不是三套样式，本页不提供全屏配置。 | | 交互配置 | 遮罩、关闭入口、退出键与关闭前草稿处理构成模态交互规则。 | 按当前真实内容规定能否关闭；模态期间限制焦点、关闭回入口，避免层层嵌套。 | | 风险与反馈 | 普通确认或危险动作由实际行为决定；加载/失败由提交结果触发。 | 只有确有危险动作才用危险按钮和风险说明；当前只读内容不凭空增加保存、错误或加载状态。 | 使用边界：不要把内容长短、宽度、全屏、提交中和危险动作当成可任意互换的对话框样式。 ### 组件规则 - **DIALOG-R01**：对话框由标题、内容及按需配置的页脚组成；标题16px/600/24px，右上关闭热区36px。确认类页脚“取消 / 确认”靠右；只读字段历史使用“关闭”，不为只读内容添加虚构的保存动作。 - **DIALOG-R02**：宽度按内容选择，参考 520 / 620 / 920px，并限制为视口减 32px；高度不超过视口减 48px，长内容只滚动中间区域。 - **DIALOG-R03**：打开聚焦首个合理控件，模态期间背景不可操作、制表键 留在弹窗；关闭恢复触发器。退出键 关闭与未保存处理由宿主合同决定。 - **DIALOG-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **DIALOG-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **DIALOG-R06**：【默认】弹层 白底、正文深灰，标题 正文深灰、600字重，边框 边框灰；遮罩 外壳深色 的 35% 透明度，阴影 外壳深色 的 12%。 - **DIALOG-R07**：【操作 / 焦点】确认用 主题蓝 按钮；取消用普通按钮；次级操作 操作蓝 12px；焦点 操作蓝 轮廓。 - **DIALOG-R08**：【风险与执行反馈】仅在接入相应动作时适用：风险提醒用警告橙图标和正文深灰说明，实际执行失败才用错误红反馈；危险按钮按动作语义选择，提交中防重复，不给整个弹层染功能色。 - **DIALOG-R09**：【关闭 / 禁用】关闭图标 辅助深灰、悬停 操作蓝、禁用 禁用灰；关闭后焦点回到触发点。 - **DIALOG-R10**：【组件边界】仅使用实际存在的组件状态；没有操作能力的内容不添加悬停、选中或禁用变色。 - **DIALOG-R11**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **DIALOG-R12**：对话框中的文字动作复用按钮专题（#spec-buttons）的普通与危险文字操作；删除确认复用确认框专题（#spec-confirm）。本页不另维护一套危险文字字号、颜色和状态。 - **DIALOG-R13**：删除、移除统一先打开居中确认弹窗，明确对象、数量和后果；确认按钮统一写“确认”，取消不改变数据。未保存项、待上传附件、已保存记录和批量删除都沿用这一入口规则；失败保留原内容和重试入口。普通清空输入、取消筛选或关闭弹层不是删除，不自动标红。 - **DIALOG-R14**：字段历史入口紧邻字段，使用12px蓝字；弹窗标题说明对象和字段，内容为变更前/后、时间、操作人；只读信息保持正文色。 - **DIALOG-R15**：历史记录正式接入需覆盖读取中、空记录、读取失败与重试，错误不能伪装成无记录。本地历史示例仅切换有记录与空记录，不发起真实请求；关闭返回原入口，不修改当前字段。 - **DIALOG-R16**：多行提示的状态图标对齐第一行文字，不按整段文字垂直居中。确认框正文行高24px，图标24px；普通消息和区域提示沿用21px正文行高，图标居中于第一行。文字自然换行，图标和正文保留稳定间距。 - **DIALOG-R17**：表单与弹窗的主要操作区统一右侧对齐，次要动作在左、主动作在右，按钮间距10px。常规文案使用“确认、取消、保存、删除、重置”等两字动作；取消不保存并退出，重置恢复初始值，两者不能互相替换。涉及特殊业务时以准确表达为先。 - **DIALOG-R18**：【关闭事件】确认、用户取消和程序关闭分别处理：确认后关闭不能再触发取消或回滚；用户一次取消只处理一次。关闭生命周期回调不等于用户取消。提交期间能否关闭及草稿去留按实际组件约定执行。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **DIALOG-S01**：当前示例采用普通模态对话框，核对标题、正文、页脚及长内容滚动。宽度按内容与视口选择；全屏等库能力未在本页采用，确需时由宿主单独定义和验收。挂载位置用于保证层级，不是可选外观。 - [ ] **DIALOG-S02**：遮罩、退出键、关闭按钮、关闭前校验、取消条件、长内容滚动及嵌套限制。 - [ ] **DIALOG-S03**：焦点限制在弹窗内、关闭后回到入口、关闭时销毁或保留内容、加载中及防止重复提交。 - [ ] **DIALOG-S04**：当前普通、长内容和只读历史对话框核对白底、正文、标题、关闭入口和焦点；仅宿主实际包含表单或选择控件时，再按其组件检查错误/选中等状态，弹窗容器本身不套这些状态。 - [ ] **DIALOG-S05**：当前对话框标题核对16px/600/24px，正文14px/400/21px，次级操作及说明12px/400/18px；标题和正文均#303133，检查实际弹出层与内部子节点。 - [ ] **DIALOG-S06**：关联验收：宿主对话框确有危险文字操作时，按按钮专题核对红字、无框无底、12px/400及适用交互状态；当前只读示例不增加删除入口。 - [ ] **DIALOG-S07**：本页普通内容、长内容和只读历史不执行删除。宿主在对话框中增加删除/移除时，引用确认框专题的居中确认、取消保留及失败处理；草稿和附件撤销能力须按实际实现另验。 - [ ] **DIALOG-S08**：有历史与空历史切换；关闭回到入口；记录只读；业务接入后另测加载/失败/重试。 - [ ] **DIALOG-S09**：关联验收：多行风险说明的状态图标到确认框专题检查首行对齐、24px图标与24px正文行高；本页普通内容和只读历史没有此状态图标，不标为本页交互。 - [ ] **DIALOG-S10**：接入验收：分别检查确认、取消、叉号、Esc、遮罩及父级程序关闭；一次动作只产生一次对应业务结果，确认后不误发取消，禁用的关闭入口不能执行。 ### 专题验收重点 制表键 / 上档键+制表键、退出键、关闭恢复焦点、短屏内容滚动。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html
打开弹窗样例 查看长内容滚动

字段历史：只读列表弹窗

参考截图用于提取场景结构；切换、校验、撤销等演示行为按本规范定义。查看参考页

``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：历史样板规范 40 / 41；本次焦点及滚动补全；2026-09-15 参考抽样：https://resycb.axshare.com/#id=1dqetq&p=会员列表a&g=1。 - [打开本专题页面](../index.html#spec-dialog) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`dialog`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) 自定义示例 `field-history-pattern` 的实现：[reference-patterns.js](../reference-patterns.js)。 组合样式见 [reference-patterns.css](../reference-patterns.css)；来源及扩展范围见 [参考补充记录](../reference-supplements.md)。 ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 默认 | 弹层 白底、正文深灰，标题 正文深灰、600字重，边框 边框灰；遮罩 外壳深色 的 35% 透明度，阴影 外壳深色 的 12%。 | | 操作 / 焦点 | 确认用 主题蓝 按钮；取消用普通按钮；次级操作 操作蓝 12px；焦点 操作蓝 轮廓。 | | 风险与执行反馈 | 仅在接入相应动作时适用：风险提醒用警告橙图标和正文深灰说明，实际执行失败才用错误红反馈；危险按钮按动作语义选择，提交中防重复，不给整个弹层染功能色。 | | 关闭 / 禁用 | 关闭图标 辅助深灰、悬停 操作蓝、禁用 禁用灰；关闭后焦点回到触发点。 | | 危险文字操作 | 查看、编辑、查看更多使用操作蓝；删除、移除使用危险红。字号同为12px/400，颜色表达动作类型，不通过加粗或更大字号表达危险。 | 仅使用实际存在的组件状态；没有操作能力的内容不添加悬停、选中或禁用变色。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [会员列表 · 会员行编辑与数据中心弹窗](../../showcase/index.html#members) · [场景文档](../../showcase/docs/members.md) - [会员详情 · 会员详情字段编辑弹窗](../../showcase/index.html#member-detail) · [场景文档](../../showcase/docs/member-detail.md) - [新增账号 · 新增会员 / 新增代理 · 创建弹窗](../../showcase/index.html#create-account) · [场景文档](../../showcase/docs/create-account.md) - [存款记录 · 存款详情、列设置与导出确认](../../showcase/index.html#deposits) · [场景文档](../../showcase/docs/deposits.md) - [账户调整审核 · 审核详情与单条/批量审核弹窗](../../showcase/index.html#account-audit) · [场景文档](../../showcase/docs/account-audit.md) - [活动管理 · 编辑、详情和内容预览弹窗](../../showcase/index.html#campaigns) · [场景文档](../../showcase/docs/campaigns.md) - [广告管理 · 新增/编辑广告与素材预览弹窗](../../showcase/index.html#adverts) · [场景文档](../../showcase/docs/adverts.md) - [公告管理 · 编辑公告、内容预览与弹窗设置](../../showcase/index.html#notifications) · [场景文档](../../showcase/docs/notifications.md) - [通知管理 · 新增/编辑通知与详情预览](../../showcase/index.html#site-messages) · [场景文档](../../showcase/docs/site-messages.md) - [操作日志 · 日志行 · 请求/响应参数查看](../../showcase/index.html#logs) · [场景文档](../../showcase/docs/logs.md) - [个人中心 · 修改密码等安全设置弹窗](../../showcase/index.html#personal-center) · [场景文档](../../showcase/docs/personal-center.md) - [客服工单管理 · 新增工单与详情弹窗](../../showcase/index.html#tickets) · [场景文档](../../showcase/docs/tickets.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 确认框与危险动作 · `confirm` 专题 `confirm` · 浮层组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`message-box`。 本页模板直接使用的 Element UI 标签：`el-button`。 ### 本页用法与分类 默认用法：本页默认演示删除或移除前的危险确认：明确对象与后果，取消为安全默认焦点，确认按钮使用危险描边样式。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 确认用途 | 仅知晓提醒、动作二次确认和带输入确认处理不同任务。 | 本页采用危险动作二次确认；仅知晓提醒或带输入确认需有实际任务依据，不能因组件库提供就全部采用。 | | 动作风险 | 普通确认与危险确认由实际动作后果决定。 | 删除/移除沿用危险按钮；风险提醒用警告橙，失败用错误红，不按喜欢的颜色挑确认类型。 | | 示例能力 | 上方只演示打开与反馈，下方操作本地演示记录。 | 检查容器用上方入口；检查取消、确认及失败重试用下方记录示例，两处都不涉及真实业务数据。 | | 自动执行状态 | 执行中、成功、失败与按钮可用性来自实际处理结果。 | 真实动作执行中防重复，失败保留上下文；本页未采用的输入确认和异步关闭校验属于接入项。 | 使用边界：不要把安全焦点、风险提醒、加载中或带输入确认混成可选配色；确认反馈也不代表真实记录已删除。 ### 组件规则 - **CONFIRM-R01**：确认框正文明确动作、对象及后果；删除、移除的提交按钮统一写“确认”，安全退出按钮写“取消”。具体删除对象和风险写在正文，不改成只有“是 / 否”的模糊问句。 - **CONFIRM-R02**：默认焦点放在取消或安全项；正在执行时阻止重复。组件只提供容器，不规定任何业务审核流程。 - **CONFIRM-R03**：“查看危险确认框”入口只演示打开、取消和确认反馈，不移除列表记录；下方“行内红字删除”示例实际操作本地演示记录，可演练取消、确认与失败重试，两者均不涉及真实数据。 - **CONFIRM-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **CONFIRM-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **CONFIRM-R06**：【默认】弹层 白底、正文深灰，标题 正文深灰、600字重，边框 边框灰；遮罩 外壳深色 的 35% 透明度，阴影 外壳深色 的 12%。 - **CONFIRM-R07**：【操作 / 焦点】普通信息确认可使用主题蓝按钮；删除、移除等危险确认使用统一危险描边按钮（白底、错误红边框、正文深灰文字）；取消用普通按钮，默认焦点在取消，按钮保留操作蓝键盘轮廓。纯文字删除仍为红字无框，不因“确认”一词一律套主题蓝。 - **CONFIRM-R08**：【危险 / 加载】删除前的风险提醒使用警告橙图标和正文深灰说明；执行失败才使用错误红反馈。危险确认按钮使用错误红边框，提交中防重复，不给整个弹层染功能色。 - **CONFIRM-R09**：【关闭 / 禁用】关闭图标 辅助深灰、悬停 操作蓝、禁用 禁用灰；关闭后焦点回到触发点。 - **CONFIRM-R10**：【组件边界】仅使用实际存在的组件状态；没有操作能力的内容不添加悬停、选中或禁用变色。 - **CONFIRM-R11**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **CONFIRM-R12**：危险文字操作单独规定样式与交互：用于表单右侧删除、移除待上传附件、列表行删除等。默认红字 #F56C6C、12px/400，无底色、无边框、无水平内边距；点击区域至少24px高。悬停和按下保持同一红色并加下划线，键盘进入时显示红色焦点提示。禁用用 #C0C4CC 且不可执行；处理中显示原位进度并阻止重复点击。 - **CONFIRM-R13**：删除、移除统一先打开居中确认弹窗，明确对象、数量和后果；确认按钮统一写“确认”，取消不改变数据。未保存项、待上传附件、已保存记录和批量删除都沿用这一入口规则；失败保留原内容和重试入口。普通清空输入、取消筛选或关闭弹层不是删除，不自动标红。 - **CONFIRM-R14**：多行提示的状态图标对齐第一行文字，不按整段文字垂直居中。确认框正文行高24px，图标24px；普通消息和区域提示沿用21px正文行高，图标居中于第一行。文字自然换行，图标和正文保留稳定间距。 - **CONFIRM-R15**：【关闭事件】确认、用户取消和程序关闭分别处理：确认后关闭不能再触发取消或回滚；用户一次取消只处理一次。关闭生命周期回调不等于用户取消。提交期间能否关闭及草稿去留按实际组件约定执行。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **CONFIRM-S01**：用途区分：只需知晓的提醒、动作二次确认和带输入确认是不同功能。本页采用危险动作二次确认；其他功能只有明确需要并接入后验收。 - [ ] **CONFIRM-S02**：按实际动作选择普通或危险确认；风险提醒使用警告橙，执行失败使用错误红。默认焦点在取消，取消与关闭不执行动作，这些是交互规则，不是外观选项。 - [ ] **CONFIRM-S03**：接入验收：只有采用带输入确认或异步关闭校验时，才检查输入校验、确认处理中及失败恢复；本页不提供这些配置项。 - [ ] **CONFIRM-S04**：本页核对风险警告图标、正文、取消、危险确认及关闭入口的颜色与键盘焦点；下方本地删除再检查处理中和失败重试。不把输入错误或选中状态套到确认框容器。 - [ ] **CONFIRM-S05**：核对正文14/400、次级操作12/400、标题600及同色深正文；检查实际弹出层和内部文字节点，不能只检查父元素。 - [ ] **CONFIRM-S06**：核对红色文字删除：无框无底、12px/400、悬停、键盘、禁用、处理中；子文字不能被普通蓝链接样式覆盖。 - [ ] **CONFIRM-S07**：本页核对已保存演示记录的居中确认、取消保留、确认后处理中与失败重试；删除后的“重置示例”仅恢复演示数据。未保存字段和待上传附件的撤销到按钮专题检查，不推断真实已保存记录可撤销。 - [ ] **CONFIRM-S08**：当前两处危险确认的按钮都统一写“确认”，沿用危险描边样式；红字触发入口仍写删除或移除。取消为安全默认焦点，关闭图标有中文可访问名称。 - [ ] **CONFIRM-S09**：用一行、两行和更长说明检查状态图标：与第一行文字对齐，段落增高后图标不下沉；同时复核字号、行高和图标间距。 - [ ] **CONFIRM-S10**：接入验收：分别检查确认、取消、叉号、Esc、遮罩及父级程序关闭；一次动作只产生一次对应业务结果，确认后不误发取消，禁用的关闭入口不能执行。 ### 专题验收重点 取消不执行；确认反馈明确；关闭后回到触发器。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html 查看危险确认框

从行内红字删除进入确认

``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：历史样板规范 22 / 42。 - [打开本专题页面](../index.html#spec-confirm) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`confirm`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) 自定义示例 `danger-action-demo` 的实现：[danger-actions.js](../danger-actions.js)。 危险操作样式见 [action-contract.css](../action-contract.css)；示例使用本地演示数据。 ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 默认 | 弹层 白底、正文深灰，标题 正文深灰、600字重，边框 边框灰；遮罩 外壳深色 的 35% 透明度，阴影 外壳深色 的 12%。 | | 操作 / 焦点 | 普通信息确认可使用主题蓝按钮；删除、移除等危险确认使用统一危险描边按钮（白底、错误红边框、正文深灰文字）；取消用普通按钮，默认焦点在取消，按钮保留操作蓝键盘轮廓。纯文字删除仍为红字无框，不因“确认”一词一律套主题蓝。 | | 危险 / 加载 | 删除前的风险提醒使用警告橙图标和正文深灰说明；执行失败才使用错误红反馈。危险确认按钮使用错误红边框，提交中防重复，不给整个弹层染功能色。 | | 关闭 / 禁用 | 关闭图标 辅助深灰、悬停 操作蓝、禁用 禁用灰；关闭后焦点回到触发点。 | | 危险文字操作 | 查看、编辑、查看更多使用操作蓝；删除、移除使用危险红。字号同为12px/400，颜色表达动作类型，不通过加粗或更大字号表达危险。 | 仅使用实际存在的组件状态；没有操作能力的内容不添加悬停、选中或禁用变色。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [会员列表 · 会员行状态/修改等需二次确认的动作](../../showcase/index.html#members) · [场景文档](../../showcase/docs/members.md) - [会员详情 · 详情编辑关闭或变更的二次确认](../../showcase/index.html#member-detail) · [场景文档](../../showcase/docs/member-detail.md) - [新增账号 · 有修改时关闭创建弹窗 · 放弃确认](../../showcase/index.html#create-account) · [场景文档](../../showcase/docs/create-account.md) - [取款审核 · 选中记录 · 同意/拒绝确认](../../showcase/index.html#withdrawals) · [场景文档](../../showcase/docs/withdrawals.md) - [资料审核 · 详情内通过/拒绝 · 确认步骤](../../showcase/index.html#profile-audit) · [场景文档](../../showcase/docs/profile-audit.md) - [活动管理 · 停用、删除及未保存修改确认](../../showcase/index.html#campaigns) · [场景文档](../../showcase/docs/campaigns.md) - [广告管理 · 停用、删除、移除素材及未保存确认](../../showcase/index.html#adverts) · [场景文档](../../showcase/docs/adverts.md) - [公告管理 · 删除、停用与未保存修改确认](../../showcase/index.html#notifications) · [场景文档](../../showcase/docs/notifications.md) - [通知管理 · 删除及未保存修改确认](../../showcase/index.html#site-messages) · [场景文档](../../showcase/docs/site-messages.md) - [个人中心 · 未保存修改离开确认](../../showcase/index.html#personal-center) · [场景文档](../../showcase/docs/personal-center.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 抽屉容器 · `drawer` 专题 `drawer` · 浮层组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`drawer`。 本页模板直接使用的 Element UI 标签：`el-button`。 ### 本页用法与分类 默认用法：默认使用右侧进入、宽480px的模态抽屉保留页面上下文；本页只展示标题、可滚动内容和关闭入口。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 用途 | 抽屉用于侧向查看上下文内容，是容器选择。 | 需要在当前页面旁查看较长内容时使用；完整业务详情、编辑和保存需由相应场景定义。 | | 方向与尺寸 | 方向与宽度属于布局配置。 | 当前采用右侧和480px参考宽，窄视口不超过视口减16px；其他方向不在本页采用。 | | 内容与页脚 | 是否有编辑字段及操作页脚取决于业务功能。 | 本页无保存页脚；确有提交动作时才补固定页脚，并让内容区单独滚动。 | | 自动状态 | 焦点、开关、提交中和失败分别由实际操作与请求驱动。 | 当前只处理模态打开、关闭和焦点恢复；没有请求时不增加加载、错误或危险确认外观。 | 使用边界：不要把抽屉方向、宽度、确认/取消和加载中列成几种可选样式；不能给当前只读容器套未实现的提交能力。 ### 组件规则 - **DRAWER-R01**：抽屉适合保留上下文的侧向内容；本规范只定义容器，不增加详情页或编辑业务。 - **DRAWER-R02**：右侧进入、遮罩隔离背景，固定标题与中部滚动；需要操作页脚时由宿主补固定页脚。参考宽 480px，窄视口不超过视口减 16px。 - **DRAWER-R03**：与 对话框 共用焦点管理和关闭合同；避免模态层无限嵌套。 - **DRAWER-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **DRAWER-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **DRAWER-R06**：【默认】弹层 白底、正文深灰，标题 正文深灰、600字重，边框 边框灰；遮罩 外壳深色 的 35% 透明度，阴影 外壳深色 的 12%。 - **DRAWER-R07**：【操作 / 焦点】当前只读示例使用关闭入口及其键盘焦点；宿主确有提交时，普通确认用主题蓝、取消用普通按钮，危险确认引用确认框专题；次级操作为12px操作蓝。 - **DRAWER-R08**：【风险与执行反馈】仅在接入相应动作时适用：风险提醒用警告橙图标和正文深灰说明，实际执行失败才用错误红反馈；危险按钮按动作语义选择，提交中防重复，不给整个抽屉染功能色。 - **DRAWER-R09**：【关闭 / 禁用】关闭图标 辅助深灰、悬停 操作蓝、禁用 禁用灰；关闭后焦点回到触发点。 - **DRAWER-R10**：【组件边界】仅使用实际存在的组件状态；没有操作能力的内容不添加悬停、选中或禁用变色。 - **DRAWER-R11**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **DRAWER-R12**：当前示例为只读抽屉，只由抽屉正文区域承担纵向滚动，内部内容不再叠加第二套滚动条。业务若增加删除、移除或提交，引用按钮与确认框专题，不另维护危险操作样式。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **DRAWER-S01**：当前示例：右侧抽屉打开、关闭、标题和长内容滚动；基础样例使用参考宽480px。 - [ ] **DRAWER-S02**：接入验收：焦点限制在模态层，关闭回到入口；背景不可操作，窄屏不超出视口。 - [ ] **DRAWER-S03**：接入验收：需要操作页脚时保持固定，内容区单独滚动；关闭前有未保存草稿须明确处理。 - [ ] **DRAWER-S04**：当前采用右侧抽屉与480px参考宽；其他方向和宽度只有场景明确需要时才单独定义与验收，不因组件库支持就自动纳入本后台。避免多层嵌套编辑。 ### 专题验收重点 短屏滚动、焦点约束、关闭恢复；背景不可点击。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html 打开容器示例 ``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：本次补充。 - [打开本专题页面](../index.html#spec-drawer) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`drawer`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 默认 | 弹层 白底、正文深灰，标题 正文深灰、600字重，边框 边框灰；遮罩 外壳深色 的 35% 透明度，阴影 外壳深色 的 12%。 | | 操作 / 焦点 | 当前只读示例使用关闭入口及其键盘焦点；宿主确有提交时，普通确认用主题蓝、取消用普通按钮，危险确认引用确认框专题；次级操作为12px操作蓝。 | | 风险与执行反馈 | 仅在接入相应动作时适用：风险提醒用警告橙图标和正文深灰说明，实际执行失败才用错误红反馈；危险按钮按动作语义选择，提交中防重复，不给整个抽屉染功能色。 | | 关闭 / 禁用 | 关闭图标 辅助深灰、悬停 操作蓝、禁用 禁用灰；关闭后焦点回到触发点。 | | 危险文字操作 | 查看、编辑、查看更多使用操作蓝；删除、移除使用危险红。字号同为12px/400，颜色表达动作类型，不通过加粗或更大字号表达危险。 | 当前抽屉只展示内容和关闭入口；确认、取消、危险动作、提交中与失败仅在宿主实际接入对应功能时适用，由行为或请求结果触发，不是抽屉可选样式。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [会员列表 · 账号或详情入口 · 会员详情抽屉](../../showcase/index.html#members) · [场景文档](../../showcase/docs/members.md) - [会员详情 · 会员详情直达 · 既有会员详情抽屉](../../showcase/index.html#member-detail) · [场景文档](../../showcase/docs/member-detail.md)；落地范围：首次加载与已挂载后的 hash 切换均等内嵌页就绪后打开详情；保留 #member-detail，关闭该直达抽屉返回 #members。优先使用当前已选会员，否则使用首个现有会员，不创建会员或改写筛选草稿。 - [新增账号 · 账号行查看 · 只读详情抽屉](../../showcase/index.html#create-account) · [场景文档](../../showcase/docs/create-account.md) - [取款审核 · 取款记录详情抽屉](../../showcase/index.html#withdrawals) · [场景文档](../../showcase/docs/withdrawals.md) - [资料审核 · 资料审核 · 详情抽屉](../../showcase/index.html#profile-audit) · [场景文档](../../showcase/docs/profile-audit.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 层级、边缘与滚动条 · `layers` 专题 `layers` · 浮层组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 本专题为基础规则、同一组件的补充场景或组合模式，不作为独立的 Element UI 官方组件声明。 ### 本页用法与分类 默认用法：默认遵循正文、固定内容、普通浮层、模态容器、模态内浮层和消息反馈的层级关系；本页是静态规则表。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 容器关系 | 六层说明谁覆盖谁，不是六种外观。 | 先按内容所属组件确定层级，不按表中序号给业务页面手写固定层级值。 | | 模态能力 | 是否有遮罩由容器是否阻断背景操作决定。 | 对话框和当前模态抽屉使用遮罩；菜单和文字提示不额外加遮罩。 | | 空间适配 | 贴边翻转、挂载位置、滚动和退出顺序属于组合环境。 | 在实际表格、弹窗和浮层组合中验收；本页静态关系表不代表这些功能已测试或实现。 | 使用边界：不把层级高低、滚动条宽度或有无遮罩列成自由选择的主题样式。 ### 组件规则 - **LAYERS-R01**：层级关系：正文 < 固定表头 / 列 < 下拉 / 气泡浮层 < 模态遮罩与面板 < 模态内浮层 / 文字提示 < 消息反馈。 - **LAYERS-R02**：本库真实运行 Element PopupManager；业务禁止在各页面任意叠加 z-index。模态内部浮层需验证层级及 append-to-body 的位置。 - **LAYERS-R03**：下拉与独立列表滚动条统一6px，设置弹窗沿用4px；轨道浅灰背景、滑块边框灰。同一方向只显示一套原生或自定义滚动条，不因叠加两套轨道产生双滚动条；滚轮及拖拽须能到首尾，不能掩盖最后一项和焦点。 - **LAYERS-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **LAYERS-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **LAYERS-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **LAYERS-R07**：【内容层】固定表头、固定列使用不透明的对应行状态背景：默认白底，悬停及选中同步整行规则；不能因列固定而丢失选中背景。普通浮层使用白底，边界用边框灰或分隔灰，避免透出底层文字。 - **LAYERS-R08**：【模态层】真实模态遮罩复用外壳深色35%透明度；浮层阴影复用外壳深色12%，不新增分层专属颜色。 - **LAYERS-R09**：【焦点与滚动】焦点色由当前可操作组件定义；滚动条轨道浅灰背景、滑块边框灰，层级容器不自带悬停/选中状态。 - **LAYERS-R10**：【组件边界】层级是容器关系，不是确认流程。只有真正模态的对话框/抽屉使用遮罩；菜单和文字提示不继承模态遮罩。 - **LAYERS-R11**：本专题只提供静态层级示意；贴边定位、嵌套关闭与滚动行为必须在实际浮层组合中验收，不能由此示意宣称已通过。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **LAYERS-S01**：当前样例是正文、固定区域、普通浮层、模态容器、模态内浮层到消息反馈的静态关系表；序号不是样式中的实际层级数值，不代表已完成嵌套浮层测试。 - [ ] **LAYERS-S02**：接入验收：固定列、菜单、模态遮罩、模态内浮层、文字提示与消息的遮挡关系。 - [ ] **LAYERS-S03**：接入验收：浮层挂载位置（是否放到页面根节点）、容器滚动后的定位、贴边翻转、缩放与嵌套关闭顺序；同时检查同一方向无重复滚动条、末项可达，不能靠禁止内容滚动消除轨道。 - [ ] **LAYERS-S04**：共用视觉验收：仅核对本组件实际适用的颜色与组合状态；无此能力标为不适用，不给静态内容添加输入错误、半选或按下状态。 - [ ] **LAYERS-S05**：共用文字验收：正文14px/400、次级操作12px/400、标题600；检查实际子元素与弹出层。输入焦点只改自身边框，按钮和链接保留键盘焦点轮廓。 ### 专题验收重点 本专题核对层级说明；实际接入另验贴边触发、容器滚动、缩放、模态内弹层和退出顺序，不将静态示意视为通过证据。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html
层级阅读顺序（由下到上，静态说明）
层级 典型内容 覆盖关系与边界
1 · 正文 页面内容、普通表格单元格 基础内容层，不覆盖浮层
2 · 固定内容 固定表头、固定列 高于正文；使用不透明背景，不透出底层文字
3 · 普通浮层 下拉选项、菜单、气泡浮层 高于其所属固定区域；不附加模态遮罩
4 · 模态容器 模态遮罩、对话框、模态抽屉 面板位于自身遮罩之上；背景不可操作
5 · 模态内浮层 对话框内的下拉、文字提示 高于所属模态面板；退出时先关闭最上层
6 · 消息反馈 消息、通知 保持可见，避免遮挡当前关键操作

这是容器关系说明，序号不等于固定 z-index 数值。实际浮层统一交由 Element 浮层管理器分配；须在真实组合中核对挂载位置、滚动、贴边和关闭顺序。

``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：历史样板规范 54；DX 设置与下拉滚动条规则。 - [打开本专题页面](../index.html#spec-layers) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`layers`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 内容层 | 固定表头、固定列使用不透明的对应行状态背景：默认白底，悬停及选中同步整行规则；不能因列固定而丢失选中背景。普通浮层使用白底，边界用边框灰或分隔灰，避免透出底层文字。 | | 模态层 | 真实模态遮罩复用外壳深色35%透明度；浮层阴影复用外壳深色12%，不新增分层专属颜色。 | | 焦点与滚动 | 焦点色由当前可操作组件定义；滚动条轨道浅灰背景、滑块边框灰，层级容器不自带悬停/选中状态。 | 层级是容器关系，不是确认流程。只有真正模态的对话框/抽屉使用遮罩；菜单和文字提示不继承模态遮罩。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [会员列表 · 会员详情、下拉菜单与弹窗的层级](../../showcase/index.html#members) · [场景文档](../../showcase/docs/members.md) - [客服工单管理 · 新增/详情 · 上传预览与内部滚动](../../showcase/index.html?example=ticket-create#tickets) · [场景文档](../../showcase/docs/tickets.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 消息提示、区域提示与通知 · `message` 专题 `message` · 反馈组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`alert`、`message`、`notification`。 本页模板直接使用的 Element UI 标签：`el-alert`、`el-button`。 ### 本页用法与分类 默认用法：短时操作反馈默认用消息提示；需要一直放在内容区阅读时用区域提示，需要独立留意的系统信息用通知。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 用途与位置 | 消息、区域提示、通知按信息用途和承载位置区分。 | 操作完成后的短反馈用消息；区域内说明用区域提示；独立系统事项用通知，不重复展示同一结果。 | | 持续与关闭 | 自动消失或保持显示取决于信息是否需要继续阅读。 | 本页信息消息自动结束，也可主动关闭；区域提示与通知可关闭。唯一补救操作不能放在自动消失的消息里。 | | 语义反馈 | 成功、警告、错误、信息来自事件实际含义。 | 按真实结果选择图标和短状态色，详细内容保持正文深灰；不能为页面好看任意切换语义颜色。 | | 长度与排版 | 消息宽度随内容自然伸缩，达到最大宽度后换行，是自动排版规则。 | 短文案不保留固定大空白；长内容在视口内换行，图标对齐首行，关闭按钮独立占位。无需另选短款或长款样式。 | 使用边界：三类反馈容器不是三套皮肤，语义颜色不是自由配色；本页的按钮只用于触发示例。 ### 组件规则 - **MESSAGE-R01**：消息提示用于短时操作反馈；区域提示（Alert）用于当前区域需持续读取的说明；通知用于需要用户留意的系统信息。同一结果不重复弹三种反馈。 - **MESSAGE-R02**：消息包含图标 / 文字语义，不只依赖颜色；非紧急反馈使用礼貌播报状态（status），紧急错误使用即时警示（alert）。多个消息去重并避免遮挡关键操作。 - **MESSAGE-R03**：本例提供可自动结束、也可主动关闭的信息消息，以及可关闭区域提示和持续通知；自动消失的消息不能承载唯一补救操作。区域提示关闭后当前样例没有恢复按钮，需要恢复时由宿主定义入口。 - **MESSAGE-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **MESSAGE-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **MESSAGE-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **MESSAGE-R07**：【普通信息】白底、正文深灰和必要辅助深灰说明；信息图标使用主题蓝，内容不整体染蓝。 - **MESSAGE-R08**：【成功、警告与错误】图标或独立短状态标识分别使用成功绿、警告橙、错误红；详细内容仍正文深灰，并保留明确状态文案。 - **MESSAGE-R09**：【关闭与动作】支持关闭时图标辅助深灰，悬停操作蓝；附属操作使用操作蓝，真实危险动作才使用错误红。 - **MESSAGE-R10**：【持续任务】只有正在等待的任务才显示主题蓝加载标记；结束后替换为实际结果，不把通知容器当作进度条。 - **MESSAGE-R11**：【组件边界】消息、区域提示和通知用于反馈，不具有选中或半选；关闭只用于支持关闭的类型，不能给每条消息附加确认流程。 - **MESSAGE-R12**：消息提示按内容自然收缩，最大宽度520px，距视口左右至少16px；达到上限后正常换行，连续长字符也不能横向溢出。不设380px固定最小宽度。多行提示的状态图标对齐第一行文字；普通消息和区域提示沿用21px正文行高。消息关闭按钮保留24px热区并独立占位，不压住文字；无关闭按钮时不保留空位。确认框正文行高24px、图标24px，仍按确认框自身结构排版。 - **MESSAGE-R13**：本页负责消息、区域提示与通知内容容器；入口上的小红点和未读数字统一见“标签与角标”专题（#spec-tags）。关闭一条提示不等于读取全部通知，不在此另建角标的尺寸与清除规则。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **MESSAGE-S01**：当前样例：点击“消息提示”显示“消息提示示例”，容器随短文案自然收缩；消息可自动消失或主动关闭，持续通知与区域提示可关闭。 - [ ] **MESSAGE-S02**：接入验收：先按用途选择消息、区域提示或通知，再按真实事件决定成功、警告、错误或信息语义；持续时间、去重、堆叠和关闭分别按内容需要定义，不把它们列成同层样式选项。 - [ ] **MESSAGE-S03**：接入验收：区域提示和通知的长内容、关闭后是否需要恢复入口；恢复方式由宿主明确。 - [ ] **MESSAGE-S04**：接入验收：提示出现时的屏幕阅读器播报；不能自动销毁唯一补救入口。消息容器不使用输入校验失败标识 aria-invalid。 - [ ] **MESSAGE-S05**：共用视觉验收：仅核对本组件实际适用的颜色与组合状态；无此能力标为不适用，不给静态内容添加输入错误、半选或按下状态。 - [ ] **MESSAGE-S06**：共用文字验收：正文14px/400、次级操作12px/400、标题600；检查实际子元素与弹出层。输入焦点只改自身边框，按钮和链接保留键盘焦点轮廓。 - [ ] **MESSAGE-S07**：当前公共反馈样式：信息图标为主题蓝；成功、警告及错误保留各自图标语义，详细文字为正文深灰；关闭图标辅助深灰，悬停操作蓝。 - [ ] **MESSAGE-S08**：接入验收：用一行、两行和连续长字符检查消息宽度，短文案无固定大空白，长文在520px及视口边界内换行；图标对齐首行。分别验证有关闭按钮和无关闭按钮，24px关闭热区独立占位、不重叠文字。 ### 专题验收重点 当前样例验证信息消息自动结束或主动关闭、区域提示与持续通知可关闭；消息短文案自然收缩。接入时补验长内容与连续字符换行、24px关闭热区不遮挡文字，以及恢复入口、去重、四类语义和屏幕阅读器播报。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html
消息提示 通知
``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：历史样板规范 52；本次 警告提示 / 通知 边界。 - [打开本专题页面](../index.html#spec-message) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`message`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 普通信息 | 白底、正文深灰和必要辅助深灰说明；信息图标使用主题蓝，内容不整体染蓝。 | | 成功、警告与错误 | 图标或独立短状态标识分别使用成功绿、警告橙、错误红；详细内容仍正文深灰，并保留明确状态文案。 | | 关闭与动作 | 支持关闭时图标辅助深灰，悬停操作蓝；附属操作使用操作蓝，真实危险动作才使用错误红。 | | 持续任务 | 只有正在等待的任务才显示主题蓝加载标记；结束后替换为实际结果，不把通知容器当作进度条。 | 消息、区域提示和通知用于反馈，不具有选中或半选；关闭只用于支持关闭的类型，不能给每条消息附加确认流程。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [新增账号 · 创建、复制等动作的本地结果反馈](../../showcase/index.html#create-account) · [场景文档](../../showcase/docs/create-account.md) - [人群标签 · 保存标签分组反馈与本地保存说明](../../showcase/index.html#segments) · [场景文档](../../showcase/docs/segments.md) - [取款审核 · 审核结果与下载反馈](../../showcase/index.html#withdrawals) · [场景文档](../../showcase/docs/withdrawals.md) - [资料审核 · 资料审核本地结果反馈](../../showcase/index.html#profile-audit) · [场景文档](../../showcase/docs/profile-audit.md) - [账户调整审核 · 本地审核结果反馈](../../showcase/index.html#account-audit) · [场景文档](../../showcase/docs/account-audit.md) - [广告管理 · 素材读取、保存和操作反馈](../../showcase/index.html#adverts) · [场景文档](../../showcase/docs/adverts.md) - [公告管理 · 公告保存与状态操作反馈](../../showcase/index.html#notifications) · [场景文档](../../showcase/docs/notifications.md) - [个人中心 · 个人资料和安全设置结果反馈](../../showcase/index.html#personal-center) · [场景文档](../../showcase/docs/personal-center.md) - [客服工单管理 · 新增、补充及处理结果反馈](../../showcase/index.html#tickets) · [场景文档](../../showcase/docs/tickets.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 加载、空状态、失败与重试 · `load-empty` 专题 `load-empty` · 反馈组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`loading`。 本页模板直接使用的 Element UI 标签：`el-button`、`el-empty`。 ### 本页用法与分类 默认用法：真实页面根据读取过程自动展示当前状态：等待时加载，读取完成后显示数据或相应空提示，失败时显示原因与重试。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 请求阶段 | 加载中和读取完成由请求过程决定。 | 开始等待时显示加载反馈；内容到达后显示真实内容，不让用户选择“加载中样式”。 | | 数据结果 | 暂无数据表示没有记录，无匹配表示现有条件未找到结果。 | 按真实查询结果区分；有筛选条件时保留上下文并提示修改条件，不把两个空态随意互换。 | | 失败与恢复 | 加载失败和重试是错误处理流程。 | 真实失败才显示错误；本页重试约1秒后只显示本地恢复反馈，不发网络请求。 | 使用边界：四个演示按钮只用来模拟状态，不是产品配置；请求失败不能伪装成空数据，加载结束也不必先变成绿色成功页。 ### 组件规则 - **LOAD-EMPTY-R01**：首次加载可用骨架屏；局部更新保留结构并提供正在处理的状态标识；禁止因加载中让布局反复塌陷。 - **LOAD-EMPTY-R02**：暂无数据、筛选无结果与加载失败是不同状态；失败不伪装空表格。重试保留用户上下文。 - **LOAD-EMPTY-R03**：错误态给出可执行下一步；该卡片切换仅为状态演示，不发网络请求。 - **LOAD-EMPTY-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **LOAD-EMPTY-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **LOAD-EMPTY-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **LOAD-EMPTY-R07**：【加载中】主题蓝加载图标配正文深灰文字；保留可用表结构或浅灰骨架，不展示空结果或成功提示。 - **LOAD-EMPTY-R08**：【暂无数据】空值灰提示说明没有数据；新增等确有动作使用操作蓝或对应按钮，不能用错误红。 - **LOAD-EMPTY-R09**：【无匹配】空值灰提示说明当前条件无结果；重置或修改条件使用操作蓝，保留查询上下文。 - **LOAD-EMPTY-R10**：【加载失败】错误红图标与短提示共同表达失败，详细原因正文深灰，重试操作蓝；已有数据不伪造为0。 - **LOAD-EMPTY-R11**：【组件边界】暂无数据、无匹配、加载中和读取失败必须分别表达；加载结束显示正常内容，不需要先展示一套成功绿色状态。 - **LOAD-EMPTY-R12**：空状态的文案与结构统一引用“结果与空状态”专题：没有记录使用“暂无数据”，筛选无匹配使用“未找到符合条件的数据”；本页只定义加载、空态、失败与重试之间的转换。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **LOAD-EMPTY-S01**：当前样例：切换加载中、暂无数据、无匹配和加载失败；重试按钮约1秒后显示本地恢复文案，不请求接口。 - [ ] **LOAD-EMPTY-S02**：接入验收：首次加载与局部更新的范围、已有内容保留、没有数据与无匹配的不同下一步。 - [ ] **LOAD-EMPTY-S03**：接入验收：失败、权限失效、超时、取消和重复重试；请求状态与正在处理标识 aria-busy 同步。 - [ ] **LOAD-EMPTY-S04**：共用视觉验收：仅核对本组件实际适用的颜色与组合状态；无此能力标为不适用，不给静态内容添加输入错误、半选或按下状态。 - [ ] **LOAD-EMPTY-S05**：共用文字验收：正文14px/400、次级操作12px/400、标题600；检查实际子元素与弹出层。输入焦点只改自身边框，按钮和链接保留键盘焦点轮廓。 - [ ] **LOAD-EMPTY-S06**：当前样例快速切换：点击失败后的重试，再在 1 秒内切换暂无数据、无匹配或加载失败，旧计时任务不得覆盖后选状态。 ### 专题验收重点 当前四种状态可切换；失败重试约1秒后退出错误并显示本地恢复文案。真实请求、取消、超时及不同空态的下一步另行验收。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html

以下按钮只用于模拟不同请求状态。真实页面应由请求进度和数据结果自动决定显示内容，不能把这些状态当作可选样式。

加载中 暂无数据 无匹配 加载失败

加载失败

重试本地样例
重试完成，状态已恢复
``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：历史样板规范 26 / 27 / 28 / 53。 - [打开本专题页面](../index.html#spec-load-empty) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`load-empty`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 加载中 | 主题蓝加载图标配正文深灰文字；保留可用表结构或浅灰骨架，不展示空结果或成功提示。 | | 暂无数据 | 空值灰提示说明没有数据；新增等确有动作使用操作蓝或对应按钮，不能用错误红。 | | 无匹配 | 空值灰提示说明当前条件无结果；重置或修改条件使用操作蓝，保留查询上下文。 | | 加载失败 | 错误红图标与短提示共同表达失败，详细原因正文深灰，重试操作蓝；已有数据不伪造为0。 | 暂无数据、无匹配、加载中和读取失败必须分别表达；加载结束显示正常内容，不需要先展示一套成功绿色状态。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [存款记录 · 筛选无数据 · 空状态](../../showcase/index.html#deposits) · [场景文档](../../showcase/docs/deposits.md)；落地范围：覆盖筛选无数据，不代表远端请求失败与重试。 - [客服工单管理 · 工单查询等待与筛选无数据](../../showcase/index.html#tickets) · [场景文档](../../showcase/docs/tickets.md)；落地范围：查询等待为本地演示，没有远端失败与重试。 [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 进度条与骨架屏 · `progress` 专题 `progress` · 反馈组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`progress`、`skeleton`、`skeleton-item`。 本页模板直接使用的 Element UI 标签：`el-progress`。 ### 本页用法与分类 默认用法：有真实可测量进度时使用带名称和数值的进度条；仅等待内容到达时使用结构骨架或不确定加载反馈。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 反馈用途 | 进度条表达任务完成程度，骨架屏占住即将到达的内容结构。 | 能够计算真实比例才显示百分比；只知道正在等待时使用骨架或不确定加载，不编造数值。 | | 自动结果 | 进行中、完成、失败、暂停由任务结果决定。 | 本页60%和失败50%是固定对照；实际失败时停止递增，真实完成后才显示完成语义。 | | 占位结构 | 骨架的标题、字段和行数应匹配将要展示的内容。 | 根据实际区域安排占位，内容到达后在同一区域替换；本页按钮只模拟骨架和内容切换。 | | 动效设置 | 轻微动效是装饰配置，不代表加载速度或成功概率。 | 只有需要时开启，系统减少动态效果时保持静态；两种方式传达相同等待状态。 | | 进度外观 | 线形、环形、仪表盘显示同一类可测进度。 | 默认线形；独立概览可环形；仅有明确弧形刻度语义才采用仪表盘。固定数值只供对照。 | 使用边界：不把正常进度、失败进度、骨架屏和加载完成作为任意挑选的皮肤；也不把演示比例当真实业务进度。 ### 组件规则 - **PROGRESS-R01**：只有可测量进度才显示百分比；未知进度使用不确定 加载中，不生成假百分比。 - **PROGRESS-R02**：进度需包含名称、范围和当前值；失败不继续递增。骨架屏 只模拟结构，不展示虚假数据。 - **PROGRESS-R03**：这里定义基础视觉，不纳入任务中心、批处理或业务导出进度流程。动画遵循系统“减少动态效果”偏好。 - **PROGRESS-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **PROGRESS-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **PROGRESS-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **PROGRESS-R07**：【进行中】进度轨道分隔灰、已完成部分主题蓝；条外与环形中心数值14px/400正文深灰。条内文字是反白例外，20px高轨道内使用12px/400白字；空间不足时采用条外数值，不挤小字号。一般进行中不用警告橙。 - **PROGRESS-R08**：【完成与异常】真实完成使用成功绿，失败使用错误红，确有警告才使用警告橙，均配明确状态文案。 - **PROGRESS-R09**：【骨架占位】骨架使用边框灰 #DCDFE6，只在内容等待时展示；真实内容到达后替换，不给骨架加选中或焦点状态。 - **PROGRESS-R10**：【暂停与未知进度】暂停或无法确定百分比时使用明确说明，数值保持正文深灰；不把未知值显示成已完成。 - **PROGRESS-R11**：【组件边界】进度条和骨架屏是被动反馈，没有可拖动手柄、键盘调值、半选或输入禁用轨道；这些属于滑块组件。 - **PROGRESS-R12**：骨架屏使用标题、字段和列表行的结构占位，白底上使用已有边框灰 #DCDFE6，不能只画难以辨认的一条浅线。占位不放虚假值、不接受焦点；完成后在同一区域替换，失败时退出为失败提示和重试入口。 - **PROGRESS-R13**：当前示例提供带名称的固定进度对照、结构骨架与加载完成内容切换、可选轻微动效。真实请求的超时、重试和进度来源由宿主接入。 - **PROGRESS-R14**：进度外观包含线形、环形和仪表盘；默认使用线形，独立进度概览可采用环形，弧形刻度语义明确时才采用仪表盘。三者都要求可测进度；本页固定数值仅作对照。 - **PROGRESS-R15**：文字内置、0%和100%为显示配置及数值边界；100%只有真实任务结束时才与成功结果关联。样例固定百分比不代表实际处理。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **PROGRESS-S01**：当前示例：固定60%用于说明可测量进度，失败50%用于说明任务中断。两者是状态对照，不是可选视觉样式，实际数值和结果必须来自真实任务。 - [ ] **PROGRESS-S02**：当前示例的切换入口仅模拟骨架与已加载内容；真实页面在等待时显示骨架、数据到达后自动替换。标题、字段和列表行应对应实际结构，骨架不接受焦点。 - [ ] **PROGRESS-S03**：当前示例：开启轻微动效；系统减少动态偏好下保持静态。 - [ ] **PROGRESS-S04**：宿主接入：真实加载完成替换内容；超时与失败退出为重试提示；不要用骨架掩盖接口错误。 - [ ] **PROGRESS-S05**：宿主接入：避免短请求闪烁；按真实内容尺寸占位，控制布局跳动；未知进度不显示假百分比。 - [ ] **PROGRESS-S06**：核对线形、环形、仪表盘、0%/100%边界及条内外文字；静态对照不伪报业务执行。 ### 专题验收重点 核对骨架标题、字段、列表行清晰可辨；切换加载完成后占位消失；轻微动效可选，减少动态偏好下停用动画。确定进度与未知等待分开表达。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html

可测量进度

有真实进度时使用

正在处理 · 60%

处理失败 · 停止在 50%

内容加载占位 · 骨架屏

结构先占位，内容到达后替换
``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：本次补充。 - [打开本专题页面](../index.html#spec-progress) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`progress`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) 自定义示例 `skeleton-pattern` 的实现：[feedback-patterns.js](../feedback-patterns.js)。 自定义示例 `official-progress-types` 的实现：[official-types.js](../official-types.js)。 ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 进行中 | 进度轨道分隔灰、已完成部分主题蓝；条外与环形中心数值14px/400正文深灰。条内文字是反白例外，20px高轨道内使用12px/400白字；空间不足时采用条外数值，不挤小字号。一般进行中不用警告橙。 | | 完成与异常 | 真实完成使用成功绿，失败使用错误红，确有警告才使用警告橙，均配明确状态文案。 | | 骨架占位 | 骨架块使用边框灰 #DCDFE6，容器白底，细分隔使用分隔灰 #EBEEF5；轻微动效仅在这两个中性色间变化，减少动态时停用。等待时展示，内容到达后替换。 | | 暂停与未知进度 | 暂停或无法确定百分比时使用明确说明，数值保持正文深灰；不把未知值显示成已完成。 | 进度条和骨架屏是被动反馈，没有可拖动手柄、键盘调值、半选或输入禁用轨道；这些属于滑块组件。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [广告管理 · 选择图片 · 本地读取进度](../../showcase/index.html?example=upload-progress#adverts) · [场景文档](../../showcase/docs/adverts.md)；落地范围：仅覆盖 FileReader 本地图片读取进度，不是服务端上传，也没有业务骨架屏。 [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 图片与预览容器 · `preview` 专题 `preview` · 数据展示 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`image`。 本页模板直接使用的 Element UI 标签：`el-image`。 ### 本页用法与分类 默认用法：默认按比例完整展示缩略图，本页使用180×100px容器；点击或键盘打开单张本地图片预览。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 图片显示配置 | 完整包含、填充或裁剪决定素材如何放入容器。 | 本页采用完整包含以保留整张图；其他适配方式只有内容场景确有需要时另行定义，不改图片本身颜色。 | | 预览工具 | 关闭、缩放、旋转和显示模式是查看图片的操作。 | 使用当前提供的工具查看单张图片；多图切换须有真实预览组，下载不属于当前示例。 | | 自动加载状态 | 正在读取、读取失败和没有图片来自素材与请求结果。 | 按真实结果显示占位和说明；缺图时不提供虚假预览，失败或重试在业务接入时验收。 | 使用边界：不要把显示比例、工具功能和缺图状态当成几种图片样式；本页预览不是选图器，也不代表具备下载功能。 ### 组件规则 - **PREVIEW-R01**：图片保持比例，加载 / 失败 / 无图有各自占位；缩略图不冒充完整原图。 - **PREVIEW-R02**：预览容器支持关闭与键盘；缩放触发方式由当前组件合同明确，不继承某个业务页旧“小眼睛”交互。 - **PREVIEW-R03**：此例使用 Element Image 打开本地图像预览。业务图片还需验证加载失败、无图和替代说明。 - **PREVIEW-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **PREVIEW-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **PREVIEW-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **PREVIEW-R07**：【图片与缺失】图片保持素材自身颜色；容器白底和边框灰，未设置使用浅灰背景与空值灰说明。 - **PREVIEW-R08**：【预览入口】确实可放大的缩略图提供操作蓝键盘焦点；当前预览、缩放、旋转和显示模式工具沿用公共操作色，不给图片本身改色。本页不提供下载入口。 - **PREVIEW-R09**：【加载与错误】主题蓝加载图标；失败为错误红图标及短提示，详细原因正文深灰，并保留重试或关闭入口。 - **PREVIEW-R10**：【不可执行边界】没有图片时不提供虚假预览；不能缩放或切换的按钮使用禁用灰，不把整个图片变成禁用灰。 - **PREVIEW-R11**：【组件边界】图片预览不是图片选择器；普通可预览缩略图没有“已选择图片”的主题边框。选图场景另按选择组件定义。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **PREVIEW-S01**：当前样例：本地示例图按比例展示；鼠标点击或键盘回车、空格均能打开预览。 - [ ] **PREVIEW-S02**：显示配置与状态分开验收：本页缩略图采用按比例完整包含；填充、裁剪等其他适配方式需按业务另定。延迟加载属于加载配置，加载失败、无图和替代说明由真实素材结果决定。 - [ ] **PREVIEW-S03**：当前样例：关闭、缩放、旋转和显示模式工具有中文名称及36px热区；制表键可定位，回车或空格可执行，退出键关闭后焦点回缩略图。多图前后切换在接入真实预览组时另外验收。 - [ ] **PREVIEW-S04**：接入验收：超大图、容器滚动和错误重试；不把预览当图片选择或下载。 - [ ] **PREVIEW-S05**：共用视觉验收：仅核对本组件实际适用的颜色与组合状态；无此能力标为不适用，不给静态内容添加输入错误、半选或按下状态。 - [ ] **PREVIEW-S06**：共用文字验收：正文14px/400、次级操作12px/400、标题600；检查实际子元素与弹出层。输入焦点只改自身边框，按钮和链接保留键盘焦点轮廓。 ### 专题验收重点 当前示例核对鼠标及键盘打开、工具操作、关闭后焦点回缩略图；无图、加载失败、超大图和真实预览组须另验。演示可打开不代表所有图片场景均已覆盖。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html

点击图片或用键盘回车、空格打开预览；用制表键切换工具，退出键关闭并返回缩略图。

``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：历史样板规范 12 / 72；当前规则索引附件适用性。 - [打开本专题页面](../index.html#spec-preview) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`preview`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 图片与缺失 | 图片保持素材自身颜色；容器白底和边框灰，未设置使用浅灰背景与空值灰说明。 | | 预览入口 | 确实可放大的缩略图提供操作蓝键盘焦点；当前预览、缩放、旋转和显示模式工具沿用公共操作色，不给图片本身改色。本页不提供下载入口。 | | 加载与错误 | 主题蓝加载图标；失败为错误红图标及短提示，详细原因正文深灰，并保留重试或关闭入口。 | | 不可执行边界 | 没有图片时不提供虚假预览；不能缩放或切换的按钮使用禁用灰，不把整个图片变成禁用灰。 | 图片预览不是图片选择器；普通可预览缩略图没有“已选择图片”的主题边框。选图场景另按选择组件定义。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [广告管理 · 素材缩略图与广告预览](../../showcase/index.html#adverts) · [场景文档](../../showcase/docs/adverts.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 键盘、焦点与语义 · `keyboard` 专题 `keyboard` · 可用性 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 本专题为基础规则、同一组件的补充场景或组合模式，不作为独立的 Element UI 官方组件声明。 ### 本页用法与分类 默认用法：默认让真实控件遵循自身的键盘操作与焦点规则；本页键帽仅作静态说明，不提供另一套组件样式。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 操作方式 | 鼠标与键盘是输入方式，焦点提示帮助用户知道当前位置。 | 用制表键导航、回车或空格执行、退出键关闭；具体按键按真实组件能力定义。 | | 控件形状 | 输入框和无框操作使用不同焦点表达，是组件规则。 | 输入/选择框只改变自身边框，按钮和链接保留键盘焦点轮廓，不能让用户选择是否隐藏焦点。 | | 自动语义 | 焦点、选中、展开、禁用和错误分别代表真实状态。 | 控件操作后同步可见状态与辅助技术标识；键盘定位不自动等于选择或提交。 | 使用边界：键盘焦点不是可选主题，也不等于业务选中；静态键帽不代表当前页包含所有可操作控件。 ### 组件规则 - **KEYBOARD-R01**：交互元素按视觉顺序 制表键 导航；按钮支持 回车键 / 空格键，选择组件遵循相应键盘模式。不得用正数焦点顺序属性（tabindex）强行插队。 - **KEYBOARD-R02**：键盘焦点必须可见：输入/下拉/日期框以自身边框变蓝作为替代；其他无边框操作保留焦点轮廓，不被固定区域遮住。弹窗关闭回焦点，内容更新不随意抢焦点。 - **KEYBOARD-R03**：使用按钮（button）、输入框（input）、标签（label）、表格（table）等正确语义元素；aria-expanded（展开）、aria-checked（勾选）、aria-invalid（校验失败）、aria-busy（正在处理）与可见状态一致。 - **KEYBOARD-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **KEYBOARD-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **KEYBOARD-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **KEYBOARD-R07**：输入及选择触发框统一单层矩形：默认 白色 底、正文深灰 14px/400 字、禁用灰 占位、边框灰 边框；聚焦仅原边框 主题蓝，错误 错误红。鼠标点击与键盘进入均不新增外框或阴影。范围日期仅外层容器变边框，内部两个输入不重复画框。 - **KEYBOARD-R08**：【输入与选择触发框】键盘进入时只将现有边框改为主题蓝；输入错误仍保持错误红，不增加外圈或阴影。 - **KEYBOARD-R09**：【按钮与无框动作】普通按钮、链接和图标使用操作蓝键盘焦点轮廓；危险文字动作复用按钮专题的红色焦点提示。焦点保留原按钮层级和文字语义，不因键盘定位改变动作类型。 - **KEYBOARD-R10**：【候选项定位】列表中的键盘定位使用浅灰背景；已选择项按自身组件显示，不能用定位高亮冒充提交选择。 - **KEYBOARD-R11**：【不可交互内容】禁用入口阻止执行；静态文字不因键盘经过变蓝。焦点返回正确入口，不创造新的颜色级别。 - **KEYBOARD-R12**：【组件边界】键盘聚焦不等于选中；纯说明与装饰内容不添加伪焦点。此专题只定义焦点角色，具体变化以组件为准。 - **KEYBOARD-R13**：必填和错误语义必须落到实际控件：标签与错误提示关联稳定ID；组合选择的必填属于整组，不能让每个复选项、筛选关键词或上传按钮都变成必填。切换状态后同步更新，保留明确选填的字段。 - **KEYBOARD-R14**：同一滑块手柄仅保留一个Tab停靠点，范围滑块分别说明起点/终点及当前值；色板入口支持Enter/空格打开，退出后回到入口；评分控件有明确名称。非文本控件保留可见键盘焦点。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **KEYBOARD-S01**：本页为键盘操作静态指南，按键图用于说明。关联验收：到“按钮层级与状态”“输入框与只读、禁用”“单选、复选与半选”“单选下拉与选项状态”“对话框：标题、滚动与焦点”专题，用真实控件逐项检查键盘路径。 - [ ] **KEYBOARD-S02**：接入验收：Tab（制表键）向后导航，Shift+Tab（上档键+制表键）向前导航；Enter（回车键）或空格键执行，方向键定位，Esc（退出键）关闭，按组件真实语义定义。 - [ ] **KEYBOARD-S03**：输入框以原边框表现焦点；按钮、链接、图标保留键盘焦点轮廓。焦点不被固定区域遮住，关闭弹层返回触发入口。 - [ ] **KEYBOARD-S04**：无障碍属性使用真实标识：aria-expanded、aria-checked、aria-invalid、aria-busy，分别与展开、勾选、校验和等待状态同步。 - [ ] **KEYBOARD-S05**：共用视觉验收：仅核对本组件实际适用的颜色与组合状态；无此能力标为不适用，不给静态内容添加输入错误、半选或按下状态。 - [ ] **KEYBOARD-S06**：共用文字验收：正文14px/400、次级操作12px/400、标题600；检查实际子元素与弹出层。输入焦点只改自身边框，按钮和链接保留键盘焦点轮廓。 ### 专题验收重点 关联验收：在对应组件专题用键盘完成进入、执行、退出和恢复的操作路径，检查焦点可见且无陷阱或丢失；本页按键图不作为交互通过证据。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html
Tab（制表键） 移动焦点 Enter（回车键） 执行 Esc（退出键） 关闭

本页按键图为静态说明。请到按钮、输入框、单选与复选、下拉选择和对话框专题检查真实控件的键盘路径。

``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：W3C WCAG 2.2；本次补充。 - [打开本专题页面](../index.html#spec-keyboard) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`keyboard`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 输入与选择触发框 | 键盘进入时只将现有边框改为主题蓝；输入错误仍保持错误红，不增加外圈或阴影。 | | 按钮与无框动作 | 普通按钮、链接和图标使用操作蓝键盘焦点轮廓；危险文字动作复用按钮专题的红色焦点提示。焦点保留原按钮层级和文字语义，不因键盘定位改变动作类型。 | | 候选项定位 | 列表中的键盘定位使用浅灰背景；已选择项按自身组件显示，不能用定位高亮冒充提交选择。 | | 不可交互内容 | 禁用入口阻止执行；静态文字不因键盘经过变蓝。焦点返回正确入口，不创造新的颜色级别。 | 键盘聚焦不等于选中；纯说明与装饰内容不添加伪焦点。此专题只定义焦点角色，具体变化以组件为准。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [会员列表 · 筛选及行内操作的键盘焦点](../../showcase/index.html#members) · [场景文档](../../showcase/docs/members.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 缩放、窄容器与内容极值 · `responsive` 专题 `responsive` · 可用性 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 本专题为基础规则、同一组件的补充场景或组合模式，不作为独立的 Element UI 官方组件声明。 ### 本页用法与分类 默认用法：默认使用同一套文字、颜色和组件规则，按容器可用空间换行或内部滚动；本页只提供长文本测试内容。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 环境条件 | 窗口宽度、短屏、浏览器缩放和字体放大是使用环境。 | 分别在规定视口和缩放条件下验收，不把这些条件命名成用户可选样式。 | | 内容极值 | 空值、长文本、大数值和长错误信息决定布局压力。 | 按真实内容选择换行、完整值入口或允许的表内滚动，不能用缩小正文解决溢出。 | | 状态保持 | 布局变化不改变当前选中、错误或禁用含义。 | 调整容器宽度后继续保持原状态、可见焦点和可达操作，不生成窄屏专属配色。 | 使用边界：不把1440/768/390px和200%缩放当成四种样式；本页静态文字示例也不能代表全部响应式交互已通过。 ### 组件规则 - **RESPONSIVE-R01**：以组件容器宽度决定换行；在 200% 浏览器缩放下仍可读取和操作。不用 vw 缩字或 transform 缩放整个组件。 - **RESPONSIVE-R02**：输入族的宽度数值与口径以输入框专题为准：按字段整项换行，再在容器内收缩，必要时标签置顶或范围两端分行；同一状态不因空间变化改变字体、颜色、圆角或数据。 - **RESPONSIVE-R03**：覆盖空值、单字、长中英文、超大数值、长文件名、错误多行；有意横向滚动仅限数据表格。 - **RESPONSIVE-R04**：用户字体放大不裁切；弹窗页脚和关闭入口始终可达。动效不作为理解状态的必要条件。 - **RESPONSIVE-R05**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **RESPONSIVE-R06**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **RESPONSIVE-R07**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **RESPONSIVE-R08**：【不同视口】正文深灰、操作蓝与功能色保持一致，窄屏不把正文改成浅灰或新增配色。 - **RESPONSIVE-R09**：【换行与截断】长文本继续使用原文字角色；必要说明辅助深灰，查看完整值入口操作蓝。 - **RESPONSIVE-R10**：【状态保持】布局重排后控件保留原选中、错误和禁用语义；聚焦边界按对应组件，不给容器加选中色。 - **RESPONSIVE-R11**：【组件边界】宽度、缩放和文字极值不是交互状态；只改变布局，不生成移动端专属颜色或缩小有效正文。 - **RESPONSIVE-R12**：【保持真实字号】由页面布局处理窄容器、横向滚动和标注位置；不得对整个业务内容应用缩小变换以塞进屏幕。用户主动使用浏览器缩放不属于页面另设字体规格。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **RESPONSIVE-S01**：当前样例仅提供长中英文与连续编号的换行内容；不代表所有组件已通过窄屏与缩放验收。 - [ ] **RESPONSIVE-S02**：接入验收：按网页布局宽度 1440、768、390 像素（不是截图物理像素）检查；同时检查 200%浏览器缩放、操作系统字体放大和短屏。 - [ ] **RESPONSIVE-S03**：接入验收：表内横向滚动、弹窗内部滚动、长错误提示、极值与减少动态效果；无页面级横向溢出。 - [ ] **RESPONSIVE-S04**：共用视觉验收：仅核对本组件实际适用的颜色与组合状态；无此能力标为不适用，不给静态内容添加输入错误、半选或按下状态。 - [ ] **RESPONSIVE-S05**：共用文字验收：正文14px/400、次级操作12px/400、标题600；检查实际子元素与弹出层。输入焦点只改自身边框，按钮和链接保留键盘焦点轮廓。 - [ ] **RESPONSIVE-S06**：宽度联动验收：按输入框专题核对整项与边框口径、同组对齐、长内容、窄容器换行及状态不跳宽。 - [ ] **RESPONSIVE-S07**：标注开关前后，正文保持14px/400、次级操作12px/400；不缩小业务画布，超宽表格按容器横向滚动。 ### 专题验收重点 按1440、768、390 CSS像素及200%浏览器缩放分别验收，确保无页面级横向溢出；当前长文本样例不等于全组件响应式已通过。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html
长内容测试：A-very-long-identifier-without-normal-spaces-01234567890123456789，以及中文多行组件说明。
``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：本次补充。 - [打开本专题页面](../index.html#spec-responsive) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`responsive`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 不同视口 | 正文深灰、操作蓝与功能色保持一致，窄屏不把正文改成浅灰或新增配色。 | | 换行与截断 | 长文本继续使用原文字角色；必要说明辅助深灰，查看完整值入口操作蓝。 | | 状态保持 | 布局重排后控件保留原选中、错误和禁用语义；聚焦边界按对应组件，不给容器加选中色。 | 宽度、缩放和文字极值不是交互状态；只改变布局，不生成移动端专属颜色或缩小有效正文。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [会员列表 · 会员宽表、详情与标注面板的实际可用宽度](../../showcase/index.html#members) · [场景文档](../../showcase/docs/members.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 组件交付与验收合同 · `contract` 专题 `contract` · 可用性 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 本专题为基础规则、同一组件的补充场景或组合模式，不作为独立的 Element UI 官方组件声明。 ### 本页用法与分类 默认用法：先写清组件用途、默认用法与允许变化的条件，再按六项审核流程逐页验收并同步文档。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 可配置内容 | 用途、功能配置、外观、尺寸 | 分开列出默认值、允许变化和适用条件，不能把不同维度合计为几种样式。 | | 自动变化 | 交互、数据边界、反馈结果 | 记录触发、退出和恢复；不是设计人员任意选择的外观。 | | 交付范围 | 规则、静态示意、运行样例、业务接入 | 逐项标明已提供和待接入能力；组件库支持不等于本后台已采用。 | | 验收结果 | 通过、不适用、未测、待修复 | 根据实际证据登记，与组件样式或演示切换状态无关。 | 使用边界：分类清楚、文档一致和真实交互通过需要分别核对，不能互相代替。 ### 组件规则 - **CONTRACT-R01**：每个组件交付需包含用途、尺寸、文字颜色、状态、键盘、异常、边界、来源和验收项；不是一张正常态截图。 - **CONTRACT-R02**：受控值与草稿值分离：取消不保存，确认才提交；外部更新与默认恢复有确定行为。不隐式新增权限、接口或业务逻辑。 - **CONTRACT-R03**：本页运行真实Element UI 2.15.6，是组件规范和交互样例。远端请求、服务端错误、大数据性能和正式业务工程迁移分别记录验收状态；不能以本地规范页通过替代正式工程验收。 - **CONTRACT-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **CONTRACT-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **CONTRACT-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **CONTRACT-R07**：危险文字操作单独规定样式与交互：用于表单右侧删除、移除待上传附件、列表行删除等。默认红字 #F56C6C、12px/400，无底色、无边框、无水平内边距；点击区域至少24px高。悬停和按下保持同一红色并加下划线，键盘进入时显示红色焦点提示。禁用用 #C0C4CC 且不可执行；处理中显示原位进度并阻止重复点击。 - **CONTRACT-R08**：删除、移除统一先打开居中确认弹窗，明确对象、数量和后果；确认按钮统一写“确认”，取消不改变数据。未保存项、待上传附件、已保存记录和批量删除都沿用这一入口规则；失败保留原内容和重试入口。普通清空输入、取消筛选或关闭弹层不是删除，不自动标红。 - **CONTRACT-R09**：【视觉角色核对】核对公共正文深灰、操作蓝、错误红及其他已批准角色，实际样式必须与对应组件声明一致。 - **CONTRACT-R10**：【组合状态核对】对真实存在的错误+焦点、选中+悬停、已选+禁用分别验收；不得给没有半选的组件补半选截图。 - **CONTRACT-R11**：【证据与边界】静态说明使用正文深灰与辅助深灰；未实现交互明确标示草案，不能用成功绿或“已通过”冒充验证。 - **CONTRACT-R12**：【组件边界】交付合同本身不是交互组件。验收矩阵只保留组件真实适用状态，无此能力标“不适用”，不能用通用矩阵制造能力。 - **CONTRACT-R13**：【逐页六项检查】每页必须分别核对内容完整、文字与文案、布局与对齐、交互与状态、规则与关联、文档同步复核；按钮能点击只证明该动作可触发，不等于整页通过。 - **CONTRACT-R14**：【逐字段范围】从页面顶部滚动到末尾，打开适用的折叠区和弹层，逐项登记标题、标签、字段值或占位、辅助说明、图标、错误提示和操作。例如输入框核对输入、清空、只读、禁用与纠正；列表核对空值、长文本、固定操作列和末页；弹窗核对关闭、取消、确认和焦点返回。 - **CONTRACT-R15**：【文字与布局证据】实际截图和计算样式互相核对；检查一行、多行及长内容。状态图标对齐第一行文字，多行复选框的勾选框对应第一行标签；辅助说明不能压过正文。不能因样式数值相同就认定视觉一致，也不能只看父元素而遗漏内部文字。 规范页的普通说明、颜色状态表和规范与场景使用统一白底卡片，左右外边界对齐；区块内部留白不能变成额外外侧缩进，真实组件的状态底色另按组件规则。 - **CONTRACT-R16**：【完整交互路径】按组件真实能力检查悬停、按住、松开、键盘、选中、禁用、加载、错误、纠正、取消与关闭；补查重复操作、快速切换、空数据、极值及恢复。打开或关闭后等动效稳定再判断最终布局，按下态在仍按住时检查，过渡帧问题单独记录。 - **CONTRACT-R17**：【四种审核状态】通过表示该项已检查且符合规则，需有步骤和证据；不适用表示组件确无该能力，需说明原因；未测记录尚未检查的范围与条件；待修复记录复现、实际与预期及影响范围。适用项目仍有未测或待修复时，不得笼统标记整页通过。 - **CONTRACT-R18**：【关联范围与复测】区分本页内容、组合组件和公共规则问题；公共按钮、输入、图标、浮层及文字规则变更后，复查所有相关组件的适用状态，不能只给当前页面叠加修补。记录改动、关联页面、复测结果和剩余未测项。 - **CONTRACT-R19**：【文档与完成边界】修复后同步实际示例、规范与场景、颜色状态表、本页 Markdown、复制内容、合并文档及下载包；核对专题标识、版本、示例、依赖和链接。文档一致不能替代视觉或交互验收，局部通过不能写成全部通过；本流程不代表本次审核已完成。 这些内容从同一份专题与场景数据生成，再运行逐页一致性校验；后续规则或示例有变化时重复执行，不能只替换可见文案。 - **CONTRACT-R20**：【场景落点】每个已采用组件登记业务页面、具体入口和字段位置；优先补充现有模块，确需新页时注明参考目录和来源。场景链接直接到相关内容，不能用首页或接入说明代替缺失的高保真场景。当前未采用的组件明确标示，不能为覆盖数量编造业务字段。 - **CONTRACT-R21**：【版本与实际复制】交付前重新加载页面并核对当前资源版本；实际点击复制后，与磁盘上的最新本页Markdown逐字比较。只对比同一旧页面内的隐藏数据，不能排除缓存过期。 - **CONTRACT-R22**：【规则归属与去重】每个专题只保留一个目录入口；组件别名通过搜索定位，不另建重复页面。颜色分类、文字用色与使用边界统一在全局色彩专题，输入宽度细则统一在输入框专题，角标细则统一在标签与角标专题，头像规格统一在头像专题；其他页面只说明采用关系并链接主规范。共用基线允许随单页导出保留，不能因去重删掉该页必需的验收条件。 - **CONTRACT-R23**：【字体与缩放复核】逐页检查正文、字段、按钮、表格和弹层的实际呈现字体及内部子元素；按平台使用既定系统字体顺序。记录操作系统与浏览器缩放，正文400、标题600；不以额外加粗、透明度或整页缩小修补可读性。 - **CONTRACT-R24**：填写区只保留影响操作的格式、限制、必填或错误说明；不逐字段重复“本地演示、不代表正式数据”等提示。原型数据保存范围、接口与未接入能力集中记录在规范文档，不写进业务操作文案。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **CONTRACT-S01**：区分规则已有、静态示意、可运行样例、宿主接入、实际验收；每项记录证据，不能以文档存在代替通过。 - [ ] **CONTRACT-S02**：按具体组件分别核对用途、功能配置、外观、尺寸、自动状态；写清默认与其他配置的采用条件，不将示例数量当作可选样式数量。再核对公共样式值、接口事件、键盘、异常、边界、版本及来源。 - [ ] **CONTRACT-S03**：输入、删除、选择、浮层等能力分别引用对应专题验收，合同卡片本身不执行这些交互。 - [ ] **CONTRACT-S04**：页面正文、结构化数据、复制内容及下载文档使用同一份规则；与业务场景的迁移状态单独标明。 - [ ] **CONTRACT-S05**：共用视觉验收：仅核对本组件实际适用的颜色与组合状态；无此能力标为不适用，不给静态内容添加输入错误、半选或按下状态。 - [ ] **CONTRACT-S06**：共用文字验收：正文14px/400、次级操作12px/400、标题600；检查实际子元素与弹出层。输入焦点只改自身边框，按钮和链接保留键盘焦点轮廓。 - [ ] **CONTRACT-S07**：内容完整：按字段清单从顶部检查到末尾，展开规则与场景，打开适用弹层；记录标签、值、占位、说明、图标、操作与异常是否齐全。 - [ ] **CONTRACT-S08**：文字与文案：核对正文、辅助说明、次级操作、错误和禁用的实际字号、字重、字色、行高及内部文字节点，操作结果与文案一致。 - [ ] **CONTRACT-S09**：布局与对齐：检查一行、多行和长文本；图标与勾选框对应第一行文字，说明不抢正文；核对展开间距、固定操作列和稳定截图。 规范页同时核对普通说明白底、卡片左右对齐和窄屏留白，避免某个说明区额外缩进。 - [ ] **CONTRACT-S10**：交互与状态：完成鼠标与键盘路径，核对取消不应用、确认才应用、关闭后焦点返回、错误与纠正同步，以及快速切换和边界恢复。 - [ ] **CONTRACT-S11**：规则与关联：将实际字段与状态对应到规范和颜色状态表；公共规则修改后登记关联组件，复测原问题及相关状态。 - [ ] **CONTRACT-S12**：文档同步复核：检查页面、本页 Markdown、实际复制内容、合并文档和下载包；专题、规则、场景、示例、依赖及链接保持一致。 - [ ] **CONTRACT-S13**：审核记录：每项分别登记通过、不适用、未测或待修复，附原因或证据；未测及待修复未解决时，不将整页或整库标记为通过。 - [ ] **CONTRACT-S14**：字体验收：分别记录 macOS / Windows 实际呈现字体与100%缩放截图；未测平台如实标明，不把样式声明一致当作跨平台渲染完全一致。 ### 专题验收重点 每页按六项流程逐字段、逐适用状态登记；截图与计算样式互证，动效稳定后检查最终布局。修改后复测关联范围并核对页面、Markdown、复制内容及下载包同步；分别记录通过、不适用、未测、待修复，不能以按钮能点或文档一致代替整页通过。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html

交付资料清单

交付项目 需要说明的内容 核对方法
用途 适用场景、默认用法、各类配置的采用条件和组件边界 能判断什么时候选用该组件
视觉 平台字体、字号、字重、行高、色值、尺寸、圆角和间距 样例实际样式与说明一致
状态 默认、悬停、焦点、禁用、加载及适用组合 逐项触发真实状态，不只看静态色样
键盘 进入、操作、退出以及焦点回归 使用 Tab、Enter、Space 和 Esc 核对
边界 空数据、极值、长文本、失败与重试 检查内容不遮挡、错误不丢上下文
文档 页面规则、场景清单、下载与复制内容 同一份规范同步生成并校验

六项逐页审核

按钮能点击，只能证明该动作可触发，不能据此判定整页通过。每页需同时检查实际内容、交互、规则及交付文档。

每页都要覆盖的六项检查
审核项 逐项检查内容 证据与方法
1 · 内容完整 逐项核对标题、字段标签、值或占位、辅助说明、按钮、状态、异常和适用边界。 滚动到页面末尾；打开适用的折叠区、弹层和预览，按字段清单记录。
2 · 文字与文案 核对正文、说明、操作、错误和禁用文字的文案、字号、字重、字色及行高。 检查实际文字和内部文字节点；默认、展开、错误、禁用分别核对。
3 · 布局与对齐 检查图标与第一行文字、标签与字段、表头与数据、固定操作列、换行、间距和滚动。 一行、多行和长内容都查看稳定截图；结合计算样式与尺寸定位问题。
4 · 交互与状态 检查真实适用的悬停、按住、焦点、选中、禁用、加载、错误、纠正、取消和关闭。 实际走完操作路径；测试快速切换、重复操作、边界与恢复，核对焦点和结果。
5 · 规则与关联 先区分用途、功能、外观、尺寸与自动状态，写清默认和采用条件；示例对应规范与场景、状态表及组件边界，核对关联组件。 区分本页问题与公共规则问题；修复后列出关联页面并复测。
6 · 文档同步复核 核对页面、本页 Markdown、复制内容、合并文档及下载包是否属于同一版规范。 先重新加载并核对资源版本，再将实际复制结果与最新磁盘Markdown逐字比较，检查专题、规则、场景、依赖和链接。

四种审核状态

按具体字段、状态或场景登记，不给整类内容统一勾选。存在适用但未测或待修复的项目时，不能标记整页通过。

状态含义；不是本次审核结果
状态 何时使用 必须记录
通过 该项已检查，结果符合当前规则。 记录步骤、结果、版本与证据。
不适用 该组件确实没有这项能力或状态。 说明不适用原因；不能用于代替漏测。
未测 尚未执行，或缺少环境、数据、业务接入等条件。 记录未测范围和后续检查条件。
待修复 已发现与规则或预期不一致的问题。 记录复现、实际与预期、影响范围和复测结果。

重点复核与记录

可复用逐页登记字段
登记字段 填写内容
页面信息 专题名称、地址、版本、时间、操作系统、实际字体、窗口尺寸和缩放。
逐项记录 字段或控件、适用状态、操作步骤、预期、实际、审核状态及截图或其他证据。
修复复测 问题编号、关联规则、修复内容、影响页面、复测结果、文档同步结果和剩余未测项。

本页提供审核流程和登记格式；不代表当前全部专题已审核通过。静态规则存在、文档内容一致与真实交互通过分别记录。

``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：本次补充。 - [打开本专题页面](../index.html#spec-contract) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`contract`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 视觉角色核对 | 核对公共正文深灰、操作蓝、错误红及其他已批准角色，实际样式必须与对应组件声明一致。 | | 组合状态核对 | 对真实存在的错误+焦点、选中+悬停、已选+禁用分别验收；不得给没有半选的组件补半选截图。 | | 证据与边界 | 静态说明使用正文深灰与辅助深灰；未实现交互明确标示草案，不能用成功绿或“已通过”冒充验证。 | 交付合同本身不是交互组件。验收矩阵只保留组件真实适用状态，无此能力标“不适用”，不能用通用矩阵制造能力。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [会员列表 · 会员场景说明与来源适配边界；不代表已完成生产验收](../../showcase/index.html#members) · [场景文档](../../showcase/docs/members.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 自动补全 · `autocomplete` 专题 `autocomplete` · 输入组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`autocomplete`。 本页模板直接使用的 Element UI 标签：`el-autocomplete`。 ### 本页用法与分类 默认用法：需要键入内容并从建议中快速填写时，使用单行自动补全框。本页本地样例允许保留手动值；新增账号的上级代理则要求该值匹配所选商户下已启用的代理。是否接受自由值由字段规则确定。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 用途：可输入建议 | 自动补全提供可编辑输入与建议；手动输入值是否必须匹配已有记录由业务字段校验决定。 | 需要按完整账号等键入并匹配建议时可用自动补全；只需选择封闭枚举时优先单选下拉。不得用关闭候选面板、无建议或成功回填代替业务合法性校验。 | | 功能：建议与确认 | 输入文字、定位候选和接受候选是不同动作。 | 本页按关键词显示建议；方向键只定位，回车接受后才回填。聚焦查询、首项高亮和自定义候选由字段需要确定，未启用的不算默认配置。 | | 自动状态：查询反馈 | 有建议、无建议、加载和失败由数据结果产生。 | 本页验证本地有建议、无建议及手动值保留；需要远程查询时再接入加载、失败和请求防抖，无建议不自动等于输入错误。 | 使用边界：不把候选高亮当作已选值。不把无建议、加载或失败列成可任选的外观。 ### 组件规则 - **AUTOCOMPLETE-R01**：用于可键入内容并提供匹配建议的字段；手动输入是否必须匹配已有记录由字段校验决定，不能把可输入等同于任意值都可保存。仅需从封闭选项中选择、无需按账号等精确值检索时优先单选下拉。本页使用本地建议并支持清除，输入、查询和选择结果按实际状态反馈，不作为可选样式。 - **AUTOCOMPLETE-R02**：输入宽度统一参考输入框专题，与同组表单内容列对齐；建议面板以触发框为宽度基准，长建议换行或提供完整值读取，并受视口边界约束。查询、无结果或清除不改变输入外宽。 - **AUTOCOMPLETE-R03**：远程查询需要防抖，旧响应不得覆盖新关键词；组件失焦不吞掉用户输入。键盘上下只定位候选，回车键接受并回填，退出键关闭建议面板。 - **AUTOCOMPLETE-R04**：演示使用本地建议，不发网络；测试输入 A、Z 与清除。 - **AUTOCOMPLETE-R05**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **AUTOCOMPLETE-R06**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **AUTOCOMPLETE-R07**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **AUTOCOMPLETE-R08**：输入及选择触发框统一单层矩形：默认 白色 底、正文深灰 14px/400 字、禁用灰 占位、边框灰 边框；聚焦仅原边框 主题蓝，错误 错误红。鼠标点击与键盘进入均不新增外框或阴影。范围日期仅外层容器变边框，内部两个输入不重复画框。 - **AUTOCOMPLETE-R09**：仅接入真实字段校验时，触发框和就近错误短提示同步使用错误红；若配置错误图标，图标也同步。普通聚焦不报错，禁用不触发新校验；候选查询无匹配不等于字段错误，当前本地示例不伪造远端失败。 - **AUTOCOMPLETE-R10**：输入族统一直角 0px：普通输入、密码、文本域、自动补全、单选/多选触发框、级联、日期/时间与范围、数字输入及前后缀组合输入；默认/聚焦/错误/只读/禁用均不改变圆角。组合输入外侧和拼接处均不保留小圆角，弹出面板的圆角由面板规范独立定义。 - **AUTOCOMPLETE-R11**：【输入框】白底、正文深灰、边框灰；占位禁用灰；聚焦仅原边框主题蓝，不加外圈。 - **AUTOCOMPLETE-R12**：【候选项】普通项正文深灰；悬停或键盘定位使用浅灰背景，实际选中才回填输入值，不增加复选框。 - **AUTOCOMPLETE-R13**：【禁用与只读】禁用输入浅灰背景、禁用灰且不发起新查询；只读值正文深灰，可复制但不选择新建议。 - **AUTOCOMPLETE-R14**：【校验与查询反馈】真实输入错误时边框及短提示错误红；远程加载用主题蓝图标，无匹配为空值灰，失败才显示错误红。 - **AUTOCOMPLETE-R15**：【组件边界】自动补全包含可编辑输入和候选项定位；聚焦输入不等于选择候选项，没有复选半选态。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **AUTOCOMPLETE-S01**：当前样例使用本地Alpha/Atlas/Beta/Component建议；输入A、Z和清除，检查有建议、无建议及手动值保留。 - [ ] **AUTOCOMPLETE-S02**：当前样例：方向键定位、Enter接受、Esc关闭；候选高亮不等于最终选择。 - [ ] **AUTOCOMPLETE-S03**：接入验收：按字段需要确定聚焦查询、首项高亮和自定义候选；采用远程查询后再验证防抖、加载、失败、超时与旧响应竞态。上述配置不代表当前本地样例全部采用。 - [ ] **AUTOCOMPLETE-S04**：业务采用：新增账号 → 新增会员 → 上级代理。先选商户，再输入或选择该商户下已启用的代理账号；手动值必须匹配现有代理，未匹配时字段报错并保留待改输入。改变商户后清空原代理及继承配置。候选无匹配本身不直接报错，字段在既定校验时机判断必填和合法性。 - [ ] **AUTOCOMPLETE-S05**：共用视觉验收：仅核对本组件实际适用的颜色与组合状态；无此能力标为不适用，不给静态内容添加输入错误、半选或按下状态。 - [ ] **AUTOCOMPLETE-S06**：共用文字验收：正文14px/400、次级操作12px/400、标题600；检查实际子元素与弹出层。输入焦点只改自身边框，按钮和链接保留键盘焦点轮廓。 - [ ] **AUTOCOMPLETE-S07**：宽度联动验收：按输入框专题核对整项与边框口径、同组对齐、长内容、窄容器换行及状态不跳宽。 ### 专题验收重点 当前样例核对快速改词、空建议、键盘接受候选及手动值保留。业务新增会员另核对手动值必须匹配所选商户的已启用代理、未匹配时就近报错和改变商户后清除旧代理。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html ``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：本次补充。 - [打开本专题页面](../index.html#spec-autocomplete) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`autocomplete`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 输入框 | 白底、正文深灰、边框灰；占位禁用灰；聚焦仅原边框主题蓝，不加外圈。 | | 候选项 | 普通项正文深灰；悬停或键盘定位使用浅灰背景，实际选中才回填输入值，不增加复选框。 | | 禁用与只读 | 禁用输入浅灰背景、禁用灰且不发起新查询；只读值正文深灰，可复制但不选择新建议。 | | 校验与查询反馈 | 真实输入错误时边框及短提示错误红；远程加载用主题蓝图标，无匹配为空值灰，失败才显示错误红。 | 自动补全包含可编辑输入和候选项定位；聚焦输入不等于选择候选项，没有复选半选态。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [新增账号 · 新增会员 / 非总代 · 上级代理建议](../../showcase/index.html?example=member-form#create-account) · [场景文档](../../showcase/docs/create-account.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 级联选择与面板 · `cascader` 专题 `cascader` · 选择组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`cascader`、`cascader-panel`。 本页模板直接使用的 Element UI 标签：`el-cascader`、`el-cascader-panel`。 ### 本页用法与分类 默认用法：表单中的层级字段默认使用当前触发框：单选末级、展示完整路径，可搜索和清除；独立面板用于需要一直看见层级的区域。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 呈现：触发框或常驻面板 | 两种容器决定层级列表在哪里显示。 | 普通表单使用触发框展开；需要持续浏览层级时用当前独立面板。更换容器不自动改变单选或多选规则。 | | 功能：选择数量与父子关系 | 单选/多选决定可取多少项；父子关联决定父节点如何参与选择。 | 当前样例单选末级。只有明确需要多个结果或允许选父级时，才另行配置并验收，不把这些库能力默认全部打开。 | | 数据：路径显示与返回值 | 显示完整路径或末级名称影响可读性；返回值配置决定返回路径数组还是末级值。 | 本页保留完整路径。接入时分别确定显示内容和提交格式；只显示末级时仍需能查到完整路径。 | | 自动状态：展开、选中与反馈 | 展开路径用于浏览，选中才确定值；禁用与加载来自节点和请求。 | 点击展开不等于选中；禁用按实际父子关系处理。懒加载、失败和重试仅在接入异步数据时出现，本页为静态两级数据。 | 使用边界：不把触发框、面板、多选和半选称为几种同级外观。不把返回值配置当作路径显示样式。 ### 组件规则 - **CASCADER-R01**：用于真实层级选项，默认采用触发框内的单选末级选择；需要层级常驻时使用独立面板。单选/多选属于选择数量，父子关联属于选择规则，分别按业务需要配置，不能用平级筛选伪造上下级。 - **CASCADER-R02**：触发框宽度统一参考输入框专题；完整路径不得把内容列撑宽，超出时保留完整值读取入口。独立多级面板按面板容器和视口边界处理，不把触发框宽度直接当成所有层级列宽。 - **CASCADER-R03**：路径可全展示或仅末级展示，但必须有完整路径承接；覆盖禁用节点、空子级、懒加载失败与重试。 - **CASCADER-R04**：组件示例为静态两级级联；懒加载与异步错误需由宿主接入，不能宣称本样例已验证远端。 - **CASCADER-R05**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **CASCADER-R06**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **CASCADER-R07**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **CASCADER-R08**：输入及选择触发框统一单层矩形：默认 白色 底、正文深灰 14px/400 字、禁用灰 占位、边框灰 边框；聚焦仅原边框 主题蓝，错误 错误红。鼠标点击与键盘进入均不新增外框或阴影。范围日期仅外层容器变边框，内部两个输入不重复画框。 - **CASCADER-R09**：仅接入真实字段校验时，触发框和就近错误短提示同步使用错误红；若配置错误图标，图标也同步。普通聚焦不报错，禁用不触发新校验；候选查询无匹配不等于字段错误，当前本地示例不伪造远端失败。 - **CASCADER-R10**：输入族统一直角 0px：普通输入、密码、文本域、自动补全、单选/多选触发框、级联、日期/时间与范围、数字输入及前后缀组合输入；默认/聚焦/错误/只读/禁用均不改变圆角。组合输入外侧和拼接处均不保留小圆角，弹出面板的圆角由面板规范独立定义。 - **CASCADER-R11**：【触发框与路径】白底、正文深灰、边框灰；聚焦仅原边框主题蓝；路径分隔使用辅助深灰，不增加外圈。 - **CASCADER-R12**：【展开与选中】当前展开路径使用操作蓝文字与选中浅蓝定位；普通悬停浅灰背景；最终选择保留明确选中标记。 - **CASCADER-R13**：【多选模式】只有多选模式才使用主题蓝复选标记；父级部分选中用白色横线，单选模式不显示半选。 - **CASCADER-R14**：【禁用】不可选节点文字禁用灰并阻止选择；默认父子关联模式下父节点禁用会传递至后代。父子非关联模式（checkStrictly）按节点自身disabled值处理，切换模式须单独验收。 - **CASCADER-R15**：【懒加载与错误】请求子级时主题蓝加载图标；失败在对应层错误红提示及操作蓝重试；真实字段校验错误仅同步触发框与短提示。 - **CASCADER-R16**：【组件边界】级联单选没有复选半选；只有明确启用多选及父子勾选关系时才呈现勾选和半选。路径展开不是最终选中。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **CASCADER-S01**：当前样例：静态两级叶子选择、清除、路径搜索、禁用叶子以及独立面板。 - [ ] **CASCADER-S02**：接入验收：先确定选择数量与父子关联规则，再按需验证多选标签折叠、父子非关联选择（checkStrictly）；返回路径数组或末级值（emitPath）属于数据格式，不是显示样式。 - [ ] **CASCADER-S03**：接入验收：点击/悬停展开、完整路径承接、懒加载子级、叶子判断、空子级、失败重试与长路径。 - [ ] **CASCADER-S04**：父节点禁用是否传递至后代必须按实际 checkStrictly 配置检查，不把单选或严格模式误写成复选半选。 - [ ] **CASCADER-S05**：共用视觉验收：仅核对本组件实际适用的颜色与组合状态；无此能力标为不适用，不给静态内容添加输入错误、半选或按下状态。 - [ ] **CASCADER-S06**：共用文字验收：正文14px/400、次级操作12px/400、标题600；检查实际子元素与弹出层。输入焦点只改自身边框，按钮和链接保留键盘焦点轮廓。 - [ ] **CASCADER-S07**：宽度联动验收：按输入框专题核对整项与边框口径、同组对齐、长内容、窄容器换行及状态不跳宽。 ### 专题验收重点 选择叶子、清除、搜索路径、禁用分支；懒加载失败另行接入验收。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html

级联选择

独立层级面板

``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：本次补充。 - [打开本专题页面](../index.html#spec-cascader) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`cascader`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 触发框与路径 | 白底、正文深灰、边框灰；聚焦仅原边框主题蓝；路径分隔使用辅助深灰，不增加外圈。 | | 展开与选中 | 当前展开路径使用操作蓝文字与选中浅蓝定位；普通悬停浅灰背景；最终选择保留明确选中标记。 | | 多选模式 | 只有多选模式才使用主题蓝复选标记；父级部分选中用白色横线，单选模式不显示半选。 | | 禁用 | 不可选节点文字禁用灰并阻止选择；默认父子关联模式下父节点禁用会传递至后代。父子非关联模式（checkStrictly）按节点自身disabled值处理，切换模式须单独验收。 | | 懒加载与错误 | 请求子级时主题蓝加载图标；失败在对应层错误红提示及操作蓝重试；真实字段校验错误仅同步触发框与短提示。 | 级联单选没有复选半选；只有明确启用多选及父子勾选关系时才呈现勾选和半选。路径展开不是最终选中。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 **当前业务：暂未采用。** 现有代理树与普通下拉没有逐级选择路径；保留级联选择作为储备组件。 本页保留组件示例和接入规则。已核实的参考截图尚未提供合适业务落点，不链接无关首页，不为覆盖组件而新增业务字段。 **适用条件**：表单中的层级字段默认使用当前触发框：单选末级、展示完整路径，可搜索和清除；独立面板用于需要一直看见层级的区域。 **采用边界**：不把触发框、面板、多选和半选称为几种同级外观。不把返回值配置当作路径显示样式。 [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 树形选择 · `tree` 专题 `tree` · 选择组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`tree`。 本页模板直接使用的 Element UI 标签：`el-input`、`el-tree`。 ### 本页用法与分类 默认用法：选择多个层级节点时，默认沿用当前带过滤框的复选树，父子勾选联动；搜索只过滤可见节点，不清空已勾选项。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 用途：层级多选 | 树呈现层级结构；复选框用于收集多个节点。 | 当前专题默认用于层级多选，不作为侧边导航。仅展示结构或定位单个节点时，应按对应用途另定交互，不沿用复选结果语义。 | | 功能：父子勾选关系 | 父子联动和各节点独立勾选是选择规则。 | 当前使用父子联动；只有父子必须独立选择时再配置严格勾选，并单独检查禁用传递及返回结果。 | | 自动状态：展开、定位和勾选 | 展开控制可见层级；定位指出当前节点；勾选才改变选择集合。 | 半选由部分子节点勾选自动产生；当前节点高亮只有启用时才显示，不能把展开或鼠标经过算作勾选。 | | 扩展功能：编辑与异步数据 | 懒加载、节点增删和拖拽需要额外数据与操作规则。 | 当前只含静态树的过滤和勾选。业务确有需求后才接入这些能力，拖拽还需键盘替代与位置限制。 | 使用边界：不把未选、已选、半选、禁用当作四套树样式。不把编辑、拖拽或远端加载默认包含在本页演示内。 ### 组件规则 - **TREE-R01**：用于层级数据选择，不作为本次侧边导航；当前默认使用带过滤的父子联动复选树。展开、当前节点定位和勾选是独立行为，严格勾选仅在需要父子独立选择时另行配置。 - **TREE-R02**：提供未选 / 已选 / 半选 / 禁用 / 过滤无结果；搜索不清空原选择，node-key 稳定唯一。 - **TREE-R03**：按需使用懒加载、拖拽、节点编辑；拖拽需限定允许位置并提供键盘替代。此例覆盖过滤和父子勾选，不接入编辑及异步。 - **TREE-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **TREE-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **TREE-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **TREE-R07**：【节点与展开】节点正文深灰、展开箭头辅助深灰；展开只改变箭头方向和子节点，不自动表示选中。 - **TREE-R08**：【悬停与当前节点】悬停或键盘定位浅灰背景；启用当前节点高亮时使用选中浅蓝底和操作蓝文字。 - **TREE-R09**：【勾选与半选】只有启用复选时使用主题蓝方框、白色对勾；父节点部分选中显示白色横线，不混同当前节点。 - **TREE-R10**：【禁用节点】禁用节点使用禁用灰并阻止对应操作，保留已选形状；禁用父节点不擅自禁用全部子节点。 - **TREE-R11**：【懒加载与空结果】真实异步节点请求显示主题蓝加载图标；失败为错误红短提示和操作蓝重试，空树用空值灰，不绘制红色触发框。 - **TREE-R12**：【组件边界】独立树没有输入触发框；当前节点、复选勾选和展开分别定义。仅树选择框组合才另用输入校验边框。 - **TREE-R13**：树上方过滤框沿用输入框专题的内容列宽度；树节点展开层级不改变输入宽度，长节点名称按树容器提供完整值读取。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **TREE-S01**：当前样例：过滤、节点展开、父子勾选与半选、禁用叶子、空结果；过滤不丢失已选节点。 - [ ] **TREE-S02**：勾选与展开分别验收；只有启用当前节点高亮时再检查定位状态。搜索框只承担过滤，不为树容器制造输入错误框。 - [ ] **TREE-S03**：接入验收：严格勾选、懒加载、失败、节点增删、拖拽位置、自定义节点与键盘移动替代。 - [ ] **TREE-S04**：接入验收：稳定节点标识（node-key）、大树性能、刷新后的展开与勾选保持。 - [ ] **TREE-S05**：共用视觉验收：仅核对本组件实际适用的颜色与组合状态；无此能力标为不适用，不给静态内容添加输入错误、半选或按下状态。 - [ ] **TREE-S06**：共用文字验收：正文14px/400、次级操作12px/400、标题600；检查实际子元素与弹出层。输入焦点只改自身边框，按钮和链接保留键盘焦点轮廓。 ### 专题验收重点 父子半选、过滤保持已选、禁用节点、空结果。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html ``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：本次补充。 - [打开本专题页面](../index.html#spec-tree) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`tree`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 节点与展开 | 节点正文深灰、展开箭头辅助深灰；展开只改变箭头方向和子节点，不自动表示选中。 | | 悬停与当前节点 | 悬停或键盘定位浅灰背景；启用当前节点高亮时使用选中浅蓝底和操作蓝文字。 | | 勾选与半选 | 只有启用复选时使用主题蓝方框、白色对勾；父节点部分选中显示白色横线，不混同当前节点。 | | 禁用节点 | 禁用节点使用禁用灰并阻止对应操作，保留已选形状；禁用父节点不擅自禁用全部子节点。 | | 懒加载与空结果 | 真实异步节点请求显示主题蓝加载图标；失败为错误红短提示和操作蓝重试，空树用空值灰，不绘制红色触发框。 | 独立树没有输入触发框；当前节点、复选勾选和展开分别定义。仅树选择框组合才另用输入校验边框。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [人群标签 · 左侧标签目录 · 分类选择](../../showcase/index.html#segments) · [场景文档](../../showcase/docs/segments.md) - [推广报表 · 日报 · 报表内代理层级及展开](../../showcase/index.html#reports) · [场景文档](../../showcase/docs/reports.md) - [推广报表 · 代理层级树 · 展开与节点选择](../../showcase/index.html#agents) · [场景文档](../../showcase/docs/agents.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 穿梭框 · `transfer` 专题 `transfer` · 选择组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`transfer`。 本页模板直接使用的 Element UI 标签：`el-transfer`。 ### 本页用法与分类 默认用法：需要同时看见可选集合和已选集合、并批量移入移出时，默认使用当前双列穿梭框，保留搜索和两侧计数。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 用途：两集合迁移 | 穿梭框让来源和结果同时可见。 | 需要核对两个集合及批量移动时使用；简单选择少量选项不必引入双列结构。 | | 功能：过滤、排序与内容 | 搜索过滤可见项；标题、按钮文字和目标排序解释移动结果。 | 当前启用搜索并使用可选集合/已选集合标题；接入时只配置确有业务含义的排序或自定义内容，不将其列作不同外观。 | | 自动状态：勾选与可移动性 | 勾选表示准备移动，移入右侧才改变目标集合。 | 部分勾选自动显示半选；无可移动项时方向按钮禁用，禁用项目不能勾选。搜索无结果不清空已迁移集合。 | 使用边界：不把右侧全部项目持续画成蓝色选中行。不把移动完成当作保存成功。 ### 组件规则 - **TRANSFER-R01**：需要同时查看来源与结果并批量移入、移出时使用双列穿梭框；默认保留两侧标题、计数和搜索。标题表达集合含义，不将勾选中与已经迁入目标集合混为一类。 - **TRANSFER-R02**：覆盖搜索、无匹配、全选、部分选择、禁用、批量移入 / 移出；切换搜索不丢已迁移集合。 - **TRANSFER-R03**：迁移不是业务提交，是否保存由宿主决定；大量数据需限定查询范围，不能一次塞入全库。 - **TRANSFER-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **TRANSFER-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **TRANSFER-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **TRANSFER-R07**：穿梭框的搜索框仅在输入聚焦时改变自身边框；搜索无结果不报表单错误。宿主要求至少选择一项且校验失败时，在集合旁给出错误红短提示并关联组名，不给整个双列容器画输入错误框。 - **TRANSFER-R08**：【列表内容】双列白底、边框灰、项目正文深灰；搜索输入按输入框规范，仅聚焦原边框主题蓝。 - **TRANSFER-R09**：【勾选与半选】待移动项复选标记主题蓝、对勾白色；分组只选择部分可选项时头部复选显示白色横线。 - **TRANSFER-R10**：【移动按钮】有可移动项时按按钮规范显示；没有可移动项或方向不允许时浅灰背景、禁用灰并阻止执行。 - **TRANSFER-R11**：【禁用与空结果】禁用项目使用禁用灰且不可勾选；空列表/搜索无结果使用空值灰提示，不显示输入校验红框。 - **TRANSFER-R12**：【焦点与悬停】可操作项目悬停或键盘定位浅灰背景，按钮焦点操作蓝；位置移动不自动表示业务提交成功。 - **TRANSFER-R13**：【组件边界】穿梭框的列表勾选、分组半选和左右移动是不同状态；目标列表中的成员不是一直处于蓝色选中行。 - **TRANSFER-R14**：两侧搜索框各自填满所属面板的内容列，沿用输入框专题；不把普通筛选280px整项规则套到穿梭面板内部。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **TRANSFER-S01**：当前样例：左右集合、搜索、无匹配、全选/部分选择、移入/移出和禁用项。 - [ ] **TRANSFER-S02**：接入验收：按集合含义配置左右标题、计数和移动按钮文字；需要固定目标顺序时再定义目标排序（target-order），需要额外信息时再接入自定义行或底部。这些属于功能与内容配置。 - [ ] **TRANSFER-S03**：过滤不丢失已迁移集合；迁移是本地选择变化，不代表保存成功；无可移动项时按钮禁用。 - [ ] **TRANSFER-S04**：接入验收：远端集合稳定标识与大数据分批查询，不能把当前页全选宣称为全库全选。 - [ ] **TRANSFER-S05**：共用视觉验收：仅核对本组件实际适用的颜色与组合状态；无此能力标为不适用，不给静态内容添加输入错误、半选或按下状态。 - [ ] **TRANSFER-S06**：共用文字验收：正文14px/400、次级操作12px/400、标题600；检查实际子元素与弹出层。输入焦点只改自身边框，按钮和链接保留键盘焦点轮廓。 ### 专题验收重点 搜索后迁移、反向迁移、禁用项不可移动、窄屏不裁按钮。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html ``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：本次补充。 - [打开本专题页面](../index.html#spec-transfer) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`transfer`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 列表内容 | 双列白底、边框灰、项目正文深灰；搜索输入按输入框规范，仅聚焦原边框主题蓝。 | | 勾选与半选 | 待移动项复选标记主题蓝、对勾白色；分组只选择部分可选项时头部复选显示白色横线。 | | 移动按钮 | 有可移动项时按按钮规范显示；没有可移动项或方向不允许时浅灰背景、禁用灰并阻止执行。 | | 禁用与空结果 | 禁用项目使用禁用灰且不可勾选；空列表/搜索无结果使用空值灰提示，不显示输入校验红框。 | | 焦点与悬停 | 可操作项目悬停或键盘定位浅灰背景，按钮焦点操作蓝；位置移动不自动表示业务提交成功。 | 穿梭框的列表勾选、分组半选和左右移动是不同状态；目标列表中的成员不是一直处于蓝色选中行。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [人群标签 · 可选会员 / 已选会员 · 双列穿梭框](../../showcase/index.html#segments) · [场景文档](../../showcase/docs/segments.md)；落地范围：顶部已选人数为当前标签组的已选集合，会员总数为全部可分配会员；左侧可选集合是尚未加入当前组的会员，右侧是已选会员。默认已选6人、会员总数24人，对应左侧18人、右侧6人；两侧勾选计数不等于集合人数。 [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 滑块 · `slider` 专题 `slider` · 选择组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`slider`。 本页模板直接使用的 Element UI 标签：`el-slider`。 ### 本页用法与分类 默认用法：选择一个小范围数值时，默认使用当前单值滑块，并保留同步的数字输入；只有字段本身是起止区间时才用双手柄范围滑块。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 功能：单值或范围 | 单手柄返回一个数值，双手柄返回区间两端。 | 按字段是单值还是区间选择；双手柄不是更醒目的样式，也不是完成进度。 | | 功能：精度与输入方式 | 上下限、步长、单位和数字输入决定怎样修改数值。 | 当前单值示例提供数字输入，范围示例仅双手柄。需要精确编辑时明确补充输入方式；资金精确录入使用数字输入规范。 | | 布局：方向与刻度 | 纵向、刻度和停靠点帮助匹配空间与可枚举值。 | 当前默认横向。确有纵向空间或离散值需求才另行配置并验收，不能靠缩小控件和文字解决空间不足。 | | 自动状态：拖动与禁用 | 焦点、拖动和到达边界由操作产生；禁用来自不可修改条件。 | 禁用时阻止拖动和键盘改值并保留可读数值；错误只在真实字段约束失败时提示。 | 使用边界：不把单值、带输入、双手柄和禁用列成互斥的几种样式。不把滑块着色用于成功或失败进度。 ### 组件规则 - **SLIDER-R01**：适合连续或可枚举的小范围数值选择；要求精确输入时同时提供数字输入，不用于精确资金录入。 - **SLIDER-R02**：先按字段确定单值或起止范围，再确定最小值、最大值、步长与单位；数字输入属于精确编辑功能。禁用由业务是否允许修改决定，不作为可选样式。 - **SLIDER-R03**：键盘可按步长调整，范围两端不得交叉；最小 / 最大值有可读标签。 - **SLIDER-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **SLIDER-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **SLIDER-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **SLIDER-R07**：滑块拖动和键盘定位不触发表单红框。宿主约束校验失败时，就近显示错误红短提示；只有附属数字输入本身的值非法时才同步该输入框边框。未使用数字输入的范围滑块不凭空添加错误外框或图标。 - **SLIDER-R08**：【数值与轨道】未选轨道分隔灰、已选范围主题蓝；手柄白底主题蓝边，数值正文深灰。 - **SLIDER-R09**：【拖动与键盘】拖动保留主题蓝；键盘焦点操作蓝轮廓，数值提示同步当前值，不用按钮按下位移规则。 - **SLIDER-R10**：【禁用】禁用轨道浅灰背景、手柄边框灰，并阻止拖动和键盘调值；已有数值保持可读。 - **SLIDER-R11**：【范围与校验】双手柄只表示起止数值，不存在复选半选；真实表单约束失败时就近错误红提示，不把整个轨道当失败进度。 - **SLIDER-R12**：【组件边界】滑块表达数值选择，不是任务进度；没有“完成成功绿”或“异常红色进度”状态，也不包含骨架屏。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **SLIDER-S01**：当前样例：0–100单值滑块与数值输入同步、双端范围滑块。 - [ ] **SLIDER-S02**：接入验收：按数值规则检查步长、上下限和单位；需要离散值或纵向空间时再配置停靠点、刻度或纵向布局；禁用与键盘调整按实际可用条件验证。 - [ ] **SLIDER-S03**：区分滑动中的 input 与结束后的 change 事件；拖动不应连续触发业务提交。 - [ ] **SLIDER-S04**：若附加表单约束再检查错误说明；滑块自身不是带成功/失败状态的进度条。 - [ ] **SLIDER-S05**：共用视觉验收：仅核对本组件实际适用的颜色与组合状态；无此能力标为不适用，不给静态内容添加输入错误、半选或按下状态。 - [ ] **SLIDER-S06**：共用文字验收：正文14px/400、次级操作12px/400、标题600；检查实际子元素与弹出层。输入焦点只改自身边框，按钮和链接保留键盘焦点轮廓。 - [ ] **SLIDER-S07**：Tab只停靠每个真实手柄一次；范围手柄分别朗读起点/终点与当前值，方向键调整不突破上下界。 ### 专题验收重点 键盘步进、边界、双端范围、输入与拖拽值同步。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ### 本示例的运行依赖 - 下方只展示专题内部模板，不包含外层宿主。当前适配要求将它置于唯一的 `
` 中；只复制内部标签不会自动获得这里规定的键盘与语义行为。 - 使用 Vue **2.6.14**、Element UI **2.15.6**，接入 [components.js](../components.js) 中本例所需的数据和方法，并按 [通用基线](FOUNDATIONS.md) 加载公共样式。 - 键盘与读屏语义依赖 [choice-semantics.js](../choice-semantics.js)，可见焦点依赖 [global-component-contract.css](../global-component-contract.css)。共享字段名称另由 [form-semantics.js](../form-semantics.js) 补充。适配安装前必须存在上述专题宿主及已挂载组件。 - 保留`spec-slider-single-label`、`spec-slider-range-label`，用于关联可见名称。适配消除外围重复 Tab 停靠，给真实手柄分别命名，并关联单值示例的数字输入；范围起点、终点分别读取实际值。 - 此脚本读取 Vue 的 `__vue__`、实例引用和内部状态，绑定上述精确版本及固定 `spec-*` 作用域；这些不是公共 API。升级、多个实例或业务路由接入时，应改为组件生命周期内的实例引用方案，重新分配唯一标签 ID，并重新验证，不能仅复制脚本或更改外层 ID。 - 本片段及文档不是独立运行包。实际接入还需核对名称、键盘、边界、动态挂载与销毁；本地逻辑检查不代替浏览器及读屏验收。 ```html

单值选择（带数字输入，0–100）

范围选择（双手柄，0–100）

两组最小值0、最大值100，步长1；双手柄分别表示区间起点和终点。

``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：本次补充。 - [打开本专题页面](../index.html#spec-slider) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`slider`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 数值与轨道 | 未选轨道分隔灰、已选范围主题蓝；手柄白底主题蓝边，数值正文深灰。 | | 拖动与键盘 | 拖动保留主题蓝；键盘焦点操作蓝轮廓，数值提示同步当前值，不用按钮按下位移规则。 | | 禁用 | 禁用轨道浅灰背景、手柄边框灰，并阻止拖动和键盘调值；已有数值保持可读。 | | 范围与校验 | 双手柄只表示起止数值，不存在复选半选；真实表单约束失败时就近错误红提示，不把整个轨道当失败进度。 | 滑块表达数值选择，不是任务进度；没有“完成成功绿”或“异常红色进度”状态，也不包含骨架屏。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [运营总览 · 趋势图 · 区间选择滑块](../../showcase/index.html#overview) · [场景文档](../../showcase/docs/overview.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 评分 · `rate` 专题 `rate` · 选择组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`rate`。 本页模板直接使用的 Element UI 标签：`el-rate`。 ### 本页用法与分类 默认用法：需要用户填写真实评分时使用当前可编辑星级评分并显示分值；只展示已有结果时使用当前只读评分，不让用户改值。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 用途：填写或只读 | 填写评分接受输入，只读评分呈现已有结果。 | 按用户是否需要修改选择；本页只读结果借用原生禁用属性实现，不能据此把已有分数变成无权限灰色。 | | 规则：满分、精度与空值 | 满分和半星属于评分规则；未评分与0分属于数据含义。 | 当前示例为5分制，含3.5分只读结果。业务需要半星填写或清除时另行配置/补充入口，不把只读半星当作已启用半星输入。 | | 自动状态：预览与实际分数 | 悬停预览尚未提交；星形填充跟随实际评分。 | 保留分值文字，预览与结果统一使用主题蓝；禁用和空评分由权限及数据决定，不使用金黄或红绿制造评分样式。 | 使用边界：不把低分、高分、只读和禁用当作四种配色。不把原生只读属性等同于业务无权限。 ### 组件规则 - **RATE-R01**：仅用于真实评分指标；需要修改时用可编辑评分，只呈现已有结果时用只读评分。两者是使用用途差异，不用星星表达一般订单状态。 - **RATE-R02**：确定满分、步长、半星及无评分语义；0分与未评分由业务区分。Element UI 2.15.6原生Rate不提供独立清除属性，如需清空须由宿主添加明确入口并定义返回值。 - **RATE-R03**：只读态显示实际分数和替代文本；不要只用颜色表示值。 - **RATE-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **RATE-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **RATE-R06**：【未选 / 已评分】未选 禁用灰、已评分 主题蓝；评分不是警告，不默认加金黄色。 - **RATE-R07**：【悬停 / 聚焦】预览复用 主题蓝；键盘 操作蓝 轮廓，显示数值说明。 - **RATE-R08**：【只读 / 禁用】只读保留真实评分 主题蓝 与 正文深灰 数值；不可填写且无值的禁用评分 禁用灰。 - **RATE-R09**：【组件边界】仅使用实际存在的组件状态；没有操作能力的内容不添加悬停、选中或禁用变色。 - **RATE-R10**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **RATE-R11**：只读评分保留可读分值与满分说明，不进入可编辑Tab停靠；编辑评分具备名称、当前值与键盘调整能力。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **RATE-S01**：当前样例：可修改评分与3.5分只读展示；只读结果复用原生 disabled 属性，但业务语义不是无权限。 - [ ] **RATE-S02**：接入验收：先确定满分、填写精度和未评分/0分的含义，再检查分值文字、悬停预览与最终值。本页3.5分是只读展示，不代表已启用半星输入；需要清除时另提供明确入口。 - [ ] **RATE-S03**：接入验收：键盘操作与评分的替代文本，不能只靠星星颜色读取分数。 - [ ] **RATE-S04**：共用视觉验收：仅核对本组件实际适用的颜色与组合状态；无此能力标为不适用，不给静态内容添加输入错误、半选或按下状态。 - [ ] **RATE-S05**：共用文字验收：正文14px/400、次级操作12px/400、标题600；检查实际子元素与弹出层。输入焦点只改自身边框，按钮和链接保留键盘焦点轮廓。 ### 专题验收重点 当前可编辑评分与使用disabled属性呈现的3.5分只读结果区分清楚；无权限、空评分、清除入口和键盘能力按接入场景补验。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ### 本示例的运行依赖 - 下方只展示专题内部模板，不包含外层宿主。当前适配要求将它置于唯一的 `
` 中；只复制内部标签不会自动获得这里规定的键盘与语义行为。 - 使用 Vue **2.6.14**、Element UI **2.15.6**，接入 [components.js](../components.js) 中本例所需的数据和方法，并按 [通用基线](FOUNDATIONS.md) 加载公共样式。 - 键盘与读屏语义依赖 [choice-semantics.js](../choice-semantics.js)，可见焦点依赖 [global-component-contract.css](../global-component-contract.css)。共享字段名称另由 [form-semantics.js](../form-semantics.js) 补充。适配安装前必须存在上述专题宿主及已挂载组件。 - 保留可编辑与只读实例各自的明确名称（本例为“可编辑评分”“只读评分”），用于关联可见名称。只读评分保留真实分数、满分与只读语义，`tabindex=-1`；可编辑评分保留原生方向键操作和正常 Tab 入口。 - 此脚本读取 Vue 的 `__vue__`、实例引用和内部状态，绑定上述精确版本及固定 `spec-*` 作用域；这些不是公共 API。升级、多个实例或业务路由接入时，应改为组件生命周期内的实例引用方案，重新分配唯一标签 ID，并重新验证，不能仅复制脚本或更改外层 ID。 - 本片段及文档不是独立运行包。实际接入还需核对名称、键盘、边界、动态挂载与销毁；本地逻辑检查不代替浏览器及读屏验收。 ```html

可编辑评分

只读评分 3.5 / 5

``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：本次补充。 - [打开本专题页面](../index.html#spec-rate) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`rate`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 未选 / 已评分 | 未选 禁用灰、已评分 主题蓝；评分不是警告，不默认加金黄色。 | | 悬停 / 聚焦 | 预览复用 主题蓝；键盘 操作蓝 轮廓，显示数值说明。 | | 只读 / 禁用 | 只读保留真实评分 主题蓝 与 正文深灰 数值；不可填写且无值的禁用评分 禁用灰。 | 仅使用实际存在的组件状态；没有操作能力的内容不添加悬停、选中或禁用变色。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 **当前业务：暂未采用。** 会员等级和风控等级属于业务分类；当前未采用用户评分。 本页保留组件示例和接入规则。已核实的参考截图尚未提供合适业务落点，不链接无关首页，不为覆盖组件而新增业务字段。 **适用条件**：需要用户填写真实评分时使用当前可编辑星级评分并显示分值；只展示已有结果时使用当前只读评分，不让用户改值。 **采用边界**：不把低分、高分、只读和禁用当作四种配色。不把原生只读属性等同于业务无权限。 [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 颜色选择 · `color-picker` 专题 `color-picker` · 选择组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`color-picker`。 本页模板直接使用的 Element UI 标签：`el-color-picker`。 ### 本页用法与分类 默认用法：只有业务内容允许自定义颜色时，才采用当前颜色选择器；当前启用三个预设、面板选色、确认和清除，不用于修改后台公共主题。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 用途：业务颜色值 | 色块是字段内容，触发框和弹层仍使用公共样式。 | 业务确需选色时才提供；三个预设是快捷候选，不是三套组件主色方案。 | | 配置：预设与格式 | 预设提供常用颜色的快捷候选，不限制其他合法颜色输入；颜色格式和透明度属于字段的数据规则。 | 当前未启用透明度，也未制定多种格式的业务校验；确有要求再配置并检查，不能从库能力推定后台均支持。 | | 自动状态：待确认、无值和非法值 | 确认后应用当前颜色；清除得到无值；非法输入属于校验反馈。 | 清除显示未选择，不自动改回预设。格式校验红字与草稿保留需要接入补充，当前不声称已实现。 | 使用边界：不把预设色当作可任选的公共主题。不把清空和校验失败当作另一套配色样式。 ### 组件规则 - **COLOR-PICKER-R01**：只适用于业务明确允许自定义颜色的内容，不允许借此改变中控全局语义色。 - **COLOR-PICKER-R02**：当前三个预设是业务颜色的快捷候选，不是三套组件主题；颜色格式与透明度按字段需求另行确定。确认后应用颜色，清除后设置为无值并显示未选择，不自动恢复预设色。 - **COLOR-PICKER-R03**：手动输入色值与色块同时承接当前值；宿主须验证允许格式并为非法值提供就近错误提示、保留待改文本。当前原生示例未添加这类错误文案，不能视为已验证。 - **COLOR-PICKER-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **COLOR-PICKER-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **COLOR-PICKER-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **COLOR-PICKER-R07**：【触发与当前颜色】触发框白底、边框灰；内部色块显示当前内容颜色；无值用明确空值标记，不伪造任意默认色。 - **COLOR-PICKER-R08**：【面板与预设】面板白底、正文深灰；选中的预设以主题蓝边框或明确标记表达，不能只依赖色块颜色差异。 - **COLOR-PICKER-R09**：【焦点与禁用】可交互触发器使用操作蓝键盘焦点；禁用外壳浅灰背景、禁用灰并阻止改色，保留原内容颜色供辨认。 - **COLOR-PICKER-R10**：【值校验与清空】格式非法时错误红短提示并保留待改文本；清空是设置无值，按钮按普通动作规则，不冒充图片移除。 - **COLOR-PICKER-R11**：【组件边界】颜色选择器显示的是业务内容颜色，不是图片缩略图；没有缺图、图片加载或上传失败态。用户选色不能改写公共主题。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **COLOR-PICKER-S01**：当前样例：颜色面板、三个预设、颜色文本、确认与清除；清除后显示未选择。 - [ ] **COLOR-PICKER-S02**：接入验收：所需格式（HEX/RGB/HSL）、透明度、取消、禁用及非法色值；未启用的格式与透明度不算当前样例能力。 - [ ] **COLOR-PICKER-S03**：非法值的就近红字提示和草稿保留需由宿主补充；不能把原生输入回退当作已实现错误说明。 - [ ] **COLOR-PICKER-S04**：业务内容颜色可以变化，公共主题与组件外壳颜色不随选色改变。 - [ ] **COLOR-PICKER-S05**：共用视觉验收：仅核对本组件实际适用的颜色与组合状态；无此能力标为不适用，不给静态内容添加输入错误、半选或按下状态。 - [ ] **COLOR-PICKER-S06**：共用文字验收：正文14px/400、次级操作12px/400、标题600；检查实际子元素与弹出层。输入焦点只改自身边框，按钮和链接保留键盘焦点轮廓。 - [ ] **COLOR-PICKER-S07**：键盘打开色板、取消或Escape退出后回到入口；确认后保存色值，取消不采纳草稿；色值输入有名称。 ### 专题验收重点 当前样例验证预设、手动选色、确认与清除；非法色值提示、透明度及其他格式为接入验收项。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ### 本示例的运行依赖 - 下方只展示专题内部模板，不包含外层宿主。当前适配要求将它置于唯一的 `
` 中；只复制内部标签不会自动获得这里规定的键盘与语义行为。 - 使用 Vue **2.6.14**、Element UI **2.15.6**，接入 [components.js](../components.js) 中本例所需的数据和方法，并按 [通用基线](FOUNDATIONS.md) 加载公共样式。 - 键盘与读屏语义依赖 [choice-semantics.js](../choice-semantics.js)，可见焦点依赖 [global-component-contract.css](../global-component-contract.css)。共享字段名称另由 [form-semantics.js](../form-semantics.js) 补充。适配安装前必须存在上述专题宿主及已挂载组件。 - 保留`spec-color-picker-label`，用于关联可见名称。适配提供 Enter/Space 打开、进入颜色值输入、Escape 取消草稿并返回触发器，以及确认/清空后的焦点返回；点击外部关闭保留新的点击焦点。 - 此脚本读取 Vue 的 `__vue__`、实例引用和内部状态，绑定上述精确版本及固定 `spec-*` 作用域；这些不是公共 API。升级、多个实例或业务路由接入时，应改为组件生命周期内的实例引用方案，重新分配唯一标签 ID，并重新验证，不能仅复制脚本或更改外层 ID。 - 本片段及文档不是独立运行包。实际接入还需核对名称、键盘、边界、动态挂载与销毁；本地逻辑检查不代替浏览器及读屏验收。 ```html

选择颜色

{{ chosenColor || '未选择' }}
``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：本次补充。 - [打开本专题页面](../index.html#spec-color-picker) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`color-picker`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 触发与当前颜色 | 触发框白底、边框灰；内部色块显示当前内容颜色；无值用明确空值标记，不伪造任意默认色。 | | 面板与预设 | 面板白底、正文深灰；选中的预设以主题蓝边框或明确标记表达，不能只依赖色块颜色差异。 | | 焦点与禁用 | 可交互触发器使用操作蓝键盘焦点；禁用外壳浅灰背景、禁用灰并阻止改色，保留原内容颜色供辨认。 | | 值校验与清空 | 格式非法时错误红短提示并保留待改文本；清空是设置无值，按钮按普通动作规则，不冒充图片移除。 | 颜色选择器显示的是业务内容颜色，不是图片缩略图；没有缺图、图片加载或上传失败态。用户选色不能改写公共主题。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 **当前业务：暂未采用。** 当前后台使用固定公共色值，尚未出现需要用户自行选色的业务字段。 本页保留组件示例和接入规则。已核实的参考截图尚未提供合适业务落点，不链接无关首页，不为覆盖组件而新增业务字段。 **适用条件**：只有业务内容允许自定义颜色时，才采用当前颜色选择器；当前启用三个预设、面板选色、确认和清除，不用于修改后台公共主题。 **采用边界**：不把预设色当作可任选的公共主题。不把清空和校验失败当作另一套配色样式。 [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 页内标签 · `tabs` 专题 `tabs` · 容器组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`tabs`、`tab-pane`。 ### 本页用法与分类 默认用法：普通页内同级切换默认使用顶部线条标签；确需明确页签边界时选卡片，需要独立包住标签和内容时选容器卡片。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 视觉：三种外观 | 线条、卡片、容器卡片改变标签与内容的边界组织。 | 普通切换用线条；并列工作区域用卡片；独立内容单元用容器卡片。同一类页面保持选定外观，不按当前状态临时换样式。 | | 布局：位置与溢出 | 标签方向与宽度不足时的滚动属于布局条件。 | 本页三种外观均采用顶部位置；标签较多时内部滚动。其他方向按真实空间需要另行验收，不是第四种外观。 | | 功能：内容与草稿 | 当前示例切换固定标签并保留本地草稿；新增、关闭与离开校验是额外功能。 | 当前示例不保存数据；需要动态标签或切走前校验时再接入，并明确关闭后的焦点、草稿和滚动策略。 | | 自动状态：当前与禁用 | 当前项由切换结果产生，禁用由该项是否可进入决定。 | 鼠标与左右方向键切换内容；制表键只定位。禁用项阻止进入，加载和失败在内容面板内表达，不改变整个标签条的外观。 | 使用边界：不把顶部排列、可关闭、禁用或溢出滚动与三种外观混为同一类选项；容器卡片外面不要重复套卡片。 ### 组件规则 - **TABS-R01**：仅用于内容区域内部的同级切换，不替代全局导航或侧边栏。默认线条标签；页内并列工作区域需要页签边界时用卡片标签；标签与内容需组成独立容器时用容器卡片。三种外观均使用顶部标签条。 - **TABS-R02**：切换面板保留各自草稿与滚动的策略由宿主明确；关闭标签不能误删数据。 - **TABS-R03**：制表键进入当前标签；左右方向键跳过禁用项并立即切换内容，起始键和结束键切换首尾。标签与面板有唯一关联；溢出滚动箭头有中文名称并支持回车键、空格键。 - **TABS-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **TABS-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **TABS-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **TABS-R07**：【普通标签】文字正文深灰，容器白底和分隔灰；不为每个标签新增背景色。 - **TABS-R08**：【当前标签】三种外观的当前项均为操作蓝文字。线条标签用主题蓝下划线；卡片标签与容器卡片用白底当前页签和边界衔接内容，不额外画蓝色下划线、蓝底或勾选标记。 - **TABS-R09**：【悬停与键盘】可切换项悬停文字操作蓝；制表键定位只显示焦点，左右方向键按本例规则切换当前项与面板。键盘焦点用操作蓝轮廓，不改变字号或字重。 - **TABS-R10**：【禁用与内容反馈】禁用标签文字禁用灰并阻止切换；内容区的加载、空态和错误由内容组件表达，不把标签条整体染红。 - **TABS-R11**：【组件边界】页内标签只有当前项、非当前项、焦点及禁用；没有勾选、半选、表单触发框错误或按钮按下位移。 - **TABS-R12**：官方位置配置支持上、下、左、右；本项目默认顶部，具有明确左右结构才选侧置。动态新增/关闭工作页属于工作区导航，不能把普通页内标签自动变成可删除业务数据。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **TABS-S01**：当前样例：三种外观各有两个内容标签和一个禁用标签，分别检查鼠标切换、方向键跳过禁用项、首尾定位及标签与面板的唯一关联。先从其他专题首次进入并核对当前线条标签的下划线，再检查搜索显示、直达链接、隐藏后重开及容器尺寸改变；下划线和溢出范围应由当前尺寸计算，不靠首次点击修复，不改变当前标签或草稿。 - [ ] **TABS-S02**：当前样例：线条适用于普通页内切换，卡片强调页签边界，容器卡片把标签和内容包含在一起；长标签示例仅演示溢出滚动状态。其他方向、延迟渲染及切换前校验仍为接入功能。 - [ ] **TABS-S03**：当前样例保留各外观中内容A的备注草稿，不执行保存。宿主接入可增删标签时，另行验收关闭后的焦点、草稿和滚动保持；页签自身没有输入错误边框。 - [ ] **TABS-S04**：共用视觉验收：仅核对本组件实际适用的颜色与组合状态；无此能力标为不适用，不给静态内容添加输入错误、半选或按下状态。 - [ ] **TABS-S05**：共用文字验收：正文14px/400、次级操作12px/400、标题600；检查实际子元素与弹出层。输入焦点只改自身边框，按钮和链接保留键盘焦点轮廓。 ### 专题验收重点 首次从侧栏、搜索或链接显示专题时，无须先切换标签，线条下划线就应按当前标签实测宽度显示，溢出箭头和当前项位置正确；隐藏后重新显示应重算尺寸。分别操作线条、卡片、容器卡片：鼠标与键盘切换内容、跳过禁用项；填写草稿后切走再返回，草稿保留。检查标签较多时内部滚动且不撑宽页面。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html ``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：本次补充。 - [打开本专题页面](../index.html#spec-tabs) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`tabs`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) 自定义示例 `tabs-variants` 的实现：[container-variants.js](../container-variants.js)。 ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 普通标签 | 文字正文深灰，容器白底和分隔灰；不为每个标签新增背景色。 | | 当前标签 | 三种外观的当前项均为操作蓝文字。线条标签用主题蓝下划线；卡片标签与容器卡片用白底当前页签和边界衔接内容，不额外画蓝色下划线、蓝底或勾选标记。 | | 悬停与键盘 | 可切换项悬停文字操作蓝；制表键定位只显示焦点，左右方向键按本例规则切换当前项与面板。键盘焦点用操作蓝轮廓，不改变字号或字重。 | | 禁用与内容反馈 | 禁用标签文字禁用灰并阻止切换；内容区的加载、空态和错误由内容组件表达，不把标签条整体染红。 | 页内标签只有当前项、非当前项、焦点及禁用；没有勾选、半选、表单触发框错误或按钮按下位移。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [存款记录 · 存款记录 · 数据页签](../../showcase/index.html#deposits) · [场景文档](../../showcase/docs/deposits.md) - [取款审核 · 待审核 / 审核记录页签](../../showcase/index.html#withdrawals) · [场景文档](../../showcase/docs/withdrawals.md) - [活动管理 · 编辑活动 · 多语言](../../showcase/index.html?example=tabs#campaigns) · [场景文档](../../showcase/docs/campaigns.md) - [广告管理 · 编辑广告 · 多语言内容](../../showcase/index.html#adverts) · [场景文档](../../showcase/docs/adverts.md) - [公告管理 · 编辑公告 · 多语言内容](../../showcase/index.html#notifications) · [场景文档](../../showcase/docs/notifications.md) - [通知管理 · 通知管理 · 列表与编辑中的内容切换](../../showcase/index.html#site-messages) · [场景文档](../../showcase/docs/site-messages.md) - [操作日志 · 系统日志 / 登录日志](../../showcase/index.html#logs) · [场景文档](../../showcase/docs/logs.md) - [运营总览 · 运营总览 · 报表与指标页签](../../showcase/index.html#overview) · [场景文档](../../showcase/docs/overview.md) - [个人中心 · 个人资料 / 账号安全](../../showcase/index.html#personal-center) · [场景文档](../../showcase/docs/personal-center.md) - [客服工单管理 · 待处理 / 处理中 / 历史记录](../../showcase/index.html#tickets) · [场景文档](../../showcase/docs/tickets.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 折叠面板 · `collapse` 专题 `collapse` · 容器组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`collapse`、`collapse-item`。 ### 本页用法与分类 默认用法：次要信息需要按组收起时，默认使用标准分隔并允许多组展开；必须直接比较的关键内容直接展示。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 视觉：三种外观 | 标准分隔、独立卡片、嵌入无边框改变内容组的边界组织。 | 连续分组用标准分隔；相对独立的内容单元用独立卡片；已在父卡片或弹窗内时用无边框，避免重复套边框。 | | 用途：内容分组 | 折叠减少当前可见内容，不改变字段值。 | 次要或按需阅读内容才折叠；关键比较信息直接展示，收起不清除已有草稿。 | | 行为：多开或单开 | 可多开允许同时阅读几组；手风琴限制一次展开一组。 | 前三种外观默认可多开；需要互斥阅读且不必同时比较时才用手风琴。最后一组只对照此行为，不是新增外观。 | | 自动状态：展开与禁用 | 展开/收起来自操作；禁用来自是否允许展开；异步反馈来自请求。 | 箭头和内容同步；禁用项阻止展开，不用变色冒充另一外观。本页静态内容无异步请求，加载和失败仅在真实接入后出现。 | 使用边界：不把展开、收起、禁用、单开称为几种面板样式；折叠不代表选中或勾选，收起不清空字段。 ### 组件规则 - **COLLAPSE-R01**：次要内容按组收起，默认使用标准分隔外观；独立内容单元用独立卡片，已在卡片或弹窗内的补充信息用嵌入无边框。默认允许多组展开；互斥阅读时才用手风琴单开，这是展开行为，不是第四种外观。关键对比信息直接展示。 - **COLLAPSE-R02**：标题是明确的展开按钮，箭头、aria-expanded与实际内容同步。制表键定位标题，回车键或空格键展开和收起；禁用标题不进入导航顺序，隐藏内容不接受键盘焦点。 - **COLLAPSE-R03**：折叠不代表清除值；长标题允许折行，折叠动画遵循减少动态偏好。 - **COLLAPSE-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **COLLAPSE-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **COLLAPSE-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **COLLAPSE-R07**：【收起与展开】三种外观均为白底、标题正文深灰600。标准分隔使用分隔线，独立卡片使用边框灰和组间间距，嵌入无边框省去内部边框；展开只改变箭头和内容，不自动填选中浅蓝。 - **COLLAPSE-R08**：【悬停与焦点】可操作标题悬停浅灰背景，键盘焦点操作蓝轮廓；内部静态内容不变色。 - **COLLAPSE-R09**：【禁用】明确禁止展开的标题使用禁用灰且阻止触发；普通只读内容仍正文深灰。 - **COLLAPSE-R10**：【按需加载】仅异步展开时主题蓝加载图标；空内容空值灰，失败错误红短提示，面板整体不染红。 - **COLLAPSE-R11**：【组件边界】折叠只表示内容展开，不能当作选中；此专题没有分组勾选或半选，异步反馈仅在实际按需加载内容时适用。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **COLLAPSE-S01**：当前样例：标准分隔、独立卡片、嵌入无边框均可多开，包含备注草稿、长标题和不可展开分组；逐组检查展开/收起、禁用及键盘可达。 - [ ] **COLLAPSE-S02**：当前样例：手风琴采用相同标准分隔外观，只改变一次展开一组的行为；打开B时A收起，再打开A时草稿保留。额外标题操作、无内容和异步读取按实际业务接入后验收。 - [ ] **COLLAPSE-S03**：隐藏内容不进入Tab导航；收起保留字段值，减少动态效果时不依赖动画理解状态。 - [ ] **COLLAPSE-S04**：共用视觉验收：仅核对本组件实际适用的颜色与组合状态；无此能力标为不适用，不给静态内容添加输入错误、半选或按下状态。 - [ ] **COLLAPSE-S05**：共用文字验收：正文14px/400、次级操作12px/400、标题600；检查实际子元素与弹出层。输入焦点只改自身边框，按钮和链接保留键盘焦点轮廓。 ### 专题验收重点 分别检查三种外观的鼠标与键盘展开、禁用项、收起后草稿保留及输入框退出制表键顺序；前三组可多开，手风琴对照一次只开一组。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html ``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：本次补充。 - [打开本专题页面](../index.html#spec-collapse) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`collapse`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) 自定义示例 `collapse-variants` 的实现：[container-variants.js](../container-variants.js)。 ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 收起与展开 | 三种外观均为白底、标题正文深灰600。标准分隔使用分隔线，独立卡片使用边框灰和组间间距，嵌入无边框省去内部边框；展开只改变箭头和内容，不自动填选中浅蓝。 | | 悬停与焦点 | 可操作标题悬停浅灰背景，键盘焦点操作蓝轮廓；内部静态内容不变色。 | | 禁用 | 明确禁止展开的标题使用禁用灰且阻止触发；普通只读内容仍正文深灰。 | | 按需加载 | 仅异步展开时主题蓝加载图标；空内容空值灰，失败错误红短提示，面板整体不染红。 | 折叠只表示内容展开，不能当作选中；此专题没有分组勾选或半选，异步反馈仅在实际按需加载内容时适用。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [活动管理 · 编辑活动 · 字段分组](../../showcase/index.html?example=collapse#campaigns) · [场景文档](../../showcase/docs/campaigns.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 卡片与分割线 · `card-divider` 专题 `card-divider` · 容器组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`card`、`divider`。 本页模板直接使用的 Element UI 标签：`el-card`、`el-divider`。 ### 本页用法与分类 默认用法：同一信息单元默认用无阴影、16px内距的轻边框卡片；仅在相关子内容确需分组时加入分割线，本页对照无标题与带标题操作区两种结构。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 用途：承载或分隔 | 卡片承载一个信息单元；分割线分隔内部相关内容。 | 两者可组合但不必绑定；内容本来清楚时不为每个字段增加分割线，也不层层嵌套卡片。 | | 结构：标题与分割方向 | 有无标题取决于是否需要命名该信息组；横纵分割取决于内容排列。 | 当前提供无标题卡片、带标题操作区卡片和横向分割线；需要明确组名或行内分隔时再采用相应结构，不把空内容当作另一种结构。 | | 尺寸：内容内距 | 内距控制内容与卡片边界的距离。 | 默认内距16px；独立且较宽松的内容区域可统一使用24px，同类模块保持一档，不按单张卡片任意切换。 | | 视觉：边框与阴影 | 边框与阴影表达容器边界和层次。 | 当前默认轻边框、无阴影；其他阴影需明确用途后再接入，不因为库有常显或悬停阴影就自由混用。 | | 标题与操作区 | 卡片可仅显示内容，也可有标题和右侧操作。 | 需要标识内容分组才显示标题；查看更多需真实展开补充内容，不把整张卡片按钮化。 | 使用边界：不把有标题、24px内距、带阴影和加载中当作几种互斥卡片样式。不把静态卡片默认变成可点击入口。 ### 组件规则 - **CARD-DIVIDER-R01**：卡片 只承载同一信息单元，默认轻边框，不用多重卡片套层制造视觉负担。 - **CARD-DIVIDER-R02**：标题按是否需要命名内容组配置；内距默认16px，独立且较宽松的内容区域可统一采用24px，同类模块保持一档。当前提供无标题卡片与带标题操作区卡片，均无阴影，标题与内距不是同一维度的样式选项。 - **CARD-DIVIDER-R03**：分割线 分隔相关内容组，不能给所有设置字段加横线；分割线统一 分隔灰 #EBEEF5。 - **CARD-DIVIDER-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **CARD-DIVIDER-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **CARD-DIVIDER-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **CARD-DIVIDER-R07**：【卡片内容】白底、正文深灰，标题正文深灰600；边框灰；不为不同分组新增底色。 - **CARD-DIVIDER-R08**：【分割线】内容间分割使用分隔灰；分割文字使用辅助深灰，不因悬停变蓝。 - **CARD-DIVIDER-R09**：【承载内容状态】卡片内真实加载、空态或错误交由内容组件表达；卡片本身不附加红框、半选或禁用底色。 - **CARD-DIVIDER-R10**：【组件边界】普通卡片和分割线是静态容器，没有展开箭头、选中、禁用或焦点；可点击卡片应单独定义交互规则。 - **CARD-DIVIDER-R11**：卡片可有标题及右侧文字操作，或仅内容；默认不使用阴影。查看更多控制卡片内真实补充内容，整张内容卡片不自动变为可点击入口。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **CARD-DIVIDER-S01**：当前样例包含无标题卡片、两个相关内容区及横向分割线；带标题“会员资料”卡片包含右侧查看更多／收起操作，实际控制备注区域的显示与隐藏。 - [ ] **CARD-DIVIDER-S02**：接入验收：根据内容组是否需要命名决定是否使用标题，内距与同类模块保持一致；另查空内容和长内容。当前采用无阴影卡片，其他阴影仅在明确用途后验收；标题中的文字操作不使整张卡片可点击。 - [ ] **CARD-DIVIDER-S03**：接入验收：横向/纵向分割线、文字位置与对齐；不为每个表单字段增加分割线。 - [ ] **CARD-DIVIDER-S04**：共用视觉验收：仅核对本组件实际适用的颜色与组合状态；无此能力标为不适用，不给静态内容添加输入错误、半选或按下状态。 - [ ] **CARD-DIVIDER-S05**：共用文字验收：正文14px/400、次级操作12px/400、标题600；检查实际子元素与弹出层。输入焦点只改自身边框，按钮和链接保留键盘焦点轮廓。 - [ ] **CARD-DIVIDER-S06**：核对无标题卡片与标题操作区结构、查看更多展开与收起、按钮状态和受控区域关联；内容本身不可点击。 ### 专题验收重点 当前样例核对无标题卡片与带标题操作区卡片，均无阴影、内距16px；横向分割线清晰。点击“查看更多／收起”应实际显示或隐藏备注，aria-expanded与受控区域同步，整张卡片不可点击。空内容、长内容、纵向分割线及24px内距的业务采用另行验收。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html 组件内容区 相关补充内容 ``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：本次补充。 - [打开本专题页面](../index.html#spec-card-divider) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`card-divider`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) 自定义示例 `official-card-types` 的实现：[official-types.js](../official-types.js)。 ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 卡片内容 | 白底、正文深灰，标题正文深灰600；边框灰；不为不同分组新增底色。 | | 分割线 | 内容间分割使用分隔灰；分割文字使用辅助深灰，不因悬停变蓝。 | | 承载内容状态 | 卡片内真实加载、空态或错误交由内容组件表达；卡片本身不附加红框、半选或禁用底色。 | 普通卡片和分割线是静态容器，没有展开箭头、选中、禁用或焦点；可点击卡片应单独定义交互规则。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [运营总览 · 总览指标、图表与数据分区](../../showcase/index.html#overview) · [场景文档](../../showcase/docs/overview.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 描述列表 · `descriptions` 专题 `descriptions` · 数据展示 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`descriptions`、`descriptions-item`。 本页模板直接使用的 Element UI 标签：`el-descriptions`、`el-descriptions-item`。 ### 本页用法与分类 默认用法：只读字段概览默认沿用当前两列带边框的键值展示；字段和值统一左对齐，长说明按需跨列。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 布局：列数与跨列 | 列数决定一行放几组字段，跨列为长值分配宽度。 | 空间足够时沿用当前两列；窄容器或长字段密集时减少列数。只有需要完整阅读的长内容跨列，不让文字缩小或裁切。 | | 视觉：边界表达 | 带边框或无边框控制字段组之间的分隔。 | 当前采用带边框；同类只读模块统一沿用，确需无边框时另定场景。边框选择与列数独立，不视为第三种列布局。 | | 尺寸：内容密度 | 尺寸控制字段内距和行间空间。 | 默认沿用当前密度并保持公共14px正文，不按单个字段任意缩小文字；其他密度需要同类模块统一采用后再验收。 | | 自动状态：字段值与读取反馈 | 零值、空值、无权限和读取失败是实际数据含义。 | 0显示为有效值，空值与无权限按实际原因呈现；只读仍保留正文颜色，不能因不可编辑而把所有值变灰。 | 使用边界：不把单列、多列和带边框列成三种同级样式。不把只读、空值或读取失败当作外观选择。 ### 组件规则 - **DESCRIPTIONS-R01**：适合只读键值，不包含详情功能设计；标签和值保持同级，特殊主值和状态按语义覆盖。 - **DESCRIPTIONS-R02**：当前默认两列带边框；列数属于布局，边框属于视觉边界，分别确定。同类模块保持一致，窄容器减少列数、长值折行；空值、零值和无权限按真实数据区分。 - **DESCRIPTIONS-R03**：不把所有标签固定成过宽列；跨列只用于需要完整阅读的长内容。 - **DESCRIPTIONS-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **DESCRIPTIONS-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **DESCRIPTIONS-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **DESCRIPTIONS-R07**：【字段与值】字段名和值使用正文深灰、14px/400，分组标题600；白底，带框版本使用边框灰或分隔灰。 - **DESCRIPTIONS-R08**：【空值与只读】真实空值为空值灰；只读值保留正文深灰，不按不可编辑状态变禁用灰。 - **DESCRIPTIONS-R09**：【附属动作】实际查看/复制使用操作蓝、12px/400并有键盘焦点；只有明确危险动作使用错误红，不让整行变可点击。 - **DESCRIPTIONS-R10**：【加载与失败】仅异步读取详情时主题蓝加载图标；失败错误红短提示，保持字段标签以便定位。 - **DESCRIPTIONS-R11**：【组件边界】描述列表是只读字段展示，不是可选表格；没有行悬停、复选、排序或行禁用态。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **DESCRIPTIONS-S01**：当前样例：两列带边框键值、有效零值及跨列长说明。 - [ ] **DESCRIPTIONS-S02**：接入验收：先按容器宽度确定单列/多列与跨列（span），再统一是否带边框和内容密度；标签/内容插槽仅在需要额外内容时接入。列数、边框和尺寸不是同一级样式。 - [ ] **DESCRIPTIONS-S03**：接入验收：长标签、多行值、窄容器、空值/零值/无权限及统一左对齐。 - [ ] **DESCRIPTIONS-S04**：共用视觉验收：仅核对本组件实际适用的颜色与组合状态；无此能力标为不适用，不给静态内容添加输入错误、半选或按下状态。 - [ ] **DESCRIPTIONS-S05**：共用文字验收：正文14px/400、次级操作12px/400、标题600；检查实际子元素与弹出层。输入焦点只改自身边框，按钮和链接保留键盘焦点轮廓。 ### 专题验收重点 当前样例核对固定两列带边框、有效0、跨列说明及标签/值14px同级。长标签、空值/无权限与窄容器减少列数在宿主配置后验收；本页没有自动改列数的逻辑。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html 组件 A 0 用于展示名称、数量及补充说明。 ``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：本次补充。 - [打开本专题页面](../index.html#spec-descriptions) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`descriptions`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 字段与值 | 字段名和值使用正文深灰、14px/400，分组标题600；白底，带框版本使用边框灰或分隔灰。 | | 空值与只读 | 真实空值为空值灰；只读值保留正文深灰，不按不可编辑状态变禁用灰。 | | 附属动作 | 实际查看/复制使用操作蓝、12px/400并有键盘焦点；只有明确危险动作使用错误红，不让整行变可点击。 | | 加载与失败 | 仅异步读取详情时主题蓝加载图标；失败错误红短提示，保持字段标签以便定位。 | 描述列表是只读字段展示，不是可选表格；没有行悬停、复选、排序或行禁用态。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [新增账号 · 账号行查看 · 字段和值只读描述](../../showcase/index.html#create-account) · [场景文档](../../showcase/docs/create-account.md) - [取款审核 · 详情抽屉 · 申请、账户与核验字段](../../showcase/index.html#withdrawals) · [场景文档](../../showcase/docs/withdrawals.md) - [资料审核 · 资料详情 · 变更前后字段](../../showcase/index.html#profile-audit) · [场景文档](../../showcase/docs/profile-audit.md) - [客服工单管理 · 工单详情 · 订单与业务字段](../../showcase/index.html#tickets) · [场景文档](../../showcase/docs/tickets.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 时间线 · `timeline` 专题 `timeline` · 数据展示 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`timeline`、`timeline-item`。 本页模板直接使用的 Element UI 标签：`el-timeline`、`el-timeline-item`。 ### 本页用法与分类 默认用法：阅读最近发生的记录时，默认采用当前纵向倒序时间线，写明时间或继承明确时区；节点本身默认不可点击。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 内容规则：阅读顺序 | 倒序先看最近记录，正序先看事件起点。 | 默认倒序；需要从起点到终点阅读经过时可以改正序，同一列表必须明确且保持顺序，不代替流程步骤导航。 | | 布局：时间与正文位置 | 时间位置和自定义内容影响节点排版。 | 默认沿用当前时间与正文布局；确需调整时保持时间与记录关联，时区清晰，不伪造未知时间。 | | 功能：历史追加 | 分页或按需加载决定怎样继续读取较长历史。 | 当前仅两条本地记录；需要追加时再接入分页或加载，保留已读节点并去重，不由静态示例推定已支持。 | | 自动状态：事件与读取结果 | 节点颜色表达事件事实；加载失败表达读取请求结果。 | 普通事件用中性色，只有真实处理中、成功、警告或失败才用对应语义色并有文字；请求失败不篡改历史事件结果。 | 使用边界：不把正序、带时间、成功节点和加载中当作几种时间线样式。不为了区分记录随机给节点配色。 ### 组件规则 - **TIMELINE-R01**：用于按时间排列的记录，不定义审核流程。默认沿用当前纵向倒序展示以便先看最近记录；需要从起点阅读经过时再采用正序。顺序属于阅读规则，时间须标明时区或继承明确上下文。 - **TIMELINE-R02**：节点有文字和时间，不仅靠颜色；未知时间不能伪造精确日期。 - **TIMELINE-R03**：长记录可分页 / 按需加载，加载失败保留已显示节点，不重复插入。 - **TIMELINE-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **TIMELINE-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **TIMELINE-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **TIMELINE-R07**：【普通事件】节点边框灰、连接线分隔灰；内容正文深灰，时间和必要补充辅助深灰。 - **TIMELINE-R08**：【进行中与结果】真实当前处理节点主题蓝；确有成功、警告或失败时对应成功绿、警告橙、错误红，并配事件文字。 - **TIMELINE-R09**：【附属动作】只有实际详情/重试链接使用操作蓝和键盘焦点；整个节点不因鼠标经过变蓝。 - **TIMELINE-R10**：【空与分页加载】无事件使用空值灰；仅继续读取历史时主题蓝加载图标，读取失败显示错误红提示，不修改历史事件自身结果。 - **TIMELINE-R11**：【组件边界】时间线节点表达已发生或正在发生的事件；默认不可点击，不套用表单焦点、输入错误边框或进度条状态。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **TIMELINE-S01**：当前样例：两条虚构事件，按UTC+8时间倒序展示。 - [ ] **TIMELINE-S02**：接入验收：按阅读目的确定正序/倒序，按排版需要确定时间位置与自定义内容；节点标记按事件事实使用，不自由选择成功或错误色。同一时间与未知时间属于数据边界。 - [ ] **TIMELINE-S03**：接入验收：空列表、分页追加、读取失败与去重；读取错误不修改历史事件结果，不套输入校验边框。 - [ ] **TIMELINE-S04**：共用视觉验收：仅核对本组件实际适用的颜色与组合状态；无此能力标为不适用，不给静态内容添加输入错误、半选或按下状态。 - [ ] **TIMELINE-S05**：共用文字验收：正文14px/400、次级操作12px/400、标题600；检查实际子元素与弹出层。输入焦点只改自身边框，按钮和链接保留键盘焦点轮廓。 ### 专题验收重点 当前样例核对两条UTC+8虚构记录倒序、时间与正文层级、节点/连接线公共中性色。正序、相同时间、未知时间、长内容及追加/失败为接入验收，不能由这两条静态记录判为已覆盖。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html 记录 A 记录 B ``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：本次补充。 - [打开本专题页面](../index.html#spec-timeline) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`timeline`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 普通事件 | 节点边框灰、连接线分隔灰；内容正文深灰，时间和必要补充辅助深灰。 | | 进行中与结果 | 真实当前处理节点主题蓝；确有成功、警告或失败时对应成功绿、警告橙、错误红，并配事件文字。 | | 附属动作 | 只有实际详情/重试链接使用操作蓝和键盘焦点；整个节点不因鼠标经过变蓝。 | | 空与分页加载 | 无事件使用空值灰；仅继续读取历史时主题蓝加载图标，读取失败显示错误红提示，不修改历史事件自身结果。 | 时间线节点表达已发生或正在发生的事件；默认不可点击，不套用表单焦点、输入错误边框或进度条状态。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [取款审核 · 记录详情 · 操作记录](../../showcase/index.html#withdrawals) · [场景文档](../../showcase/docs/withdrawals.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 步骤条与步骤状态 · `steps` 专题 `steps` · 数据展示 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`steps`、`step`。 本页模板直接使用的 Element UI 标签：`el-step`、`el-steps`。 ### 本页用法与分类 默认用法：展示流程位置时，默认沿用当前横向步骤条；按真实流程显示已完成、当前与待开始步骤，步骤本身不提供跳转。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 视觉：普通或简洁形态 | 普通与简洁是库提供的不同外观。 | 当前采用普通步骤条；简洁形态未在本页采用，只有确定使用场景后再配置，不能把完成状态当作另一种外观。 | | 布局：横向或纵向 | 方向用于适配流程内容与可用空间。 | 当前默认横向；横向不足时优先评估纵向并验收，不能缩小标题。自定义换行不是本页已有能力。 | | 功能：是否允许跳转 | 点击步骤跳转需要额外业务行为。 | 当前仅展示流程位置，不执行提交或跳转；确需跳转时另定权限、草稿和返回规则。 | | 自动状态：流程结果 | 当前、待开始、完成和错误由流程数据决定。 | 按真实进度同步标记与文字；尚未发生的步骤不能人为显示完成，错误只作用于发生错误的步骤。 | 使用边界：不把待开始、当前、完成、错误称为四种可任选样式。不把库的简洁形态、纵向布局和可跳转混成同一组配置。 ### 组件规则 - **STEPS-R01**：默认用当前横向步骤条展示流程位置，不设计业务操作步骤；等待、进行中、完成与错误由真实流程数据决定，不作为可任选的视觉样式。 - **STEPS-R02**：当前步骤、已完成和失败必须有文字，不能只变色；步骤是否可点击由宿主明确。 - **STEPS-R03**：横向空间不足时优先评估纵向布局并验收；不缩小步骤标题，不造成页面级横向溢出。自定义换行不是当前样例已实现能力；未发生的步骤不显示虚构完成状态。 - **STEPS-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **STEPS-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **STEPS-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **STEPS-R07**：【未开始】未开始标记边框灰，补充说明辅助深灰；标题保持正文深灰并可读。 - **STEPS-R08**：【当前步骤】当前标记主题蓝并标明当前步骤，正文保持正文深灰，不要求整段文字染蓝。 - **STEPS-R09**：【完成与错误】真实完成标记成功绿；错误标记及短提示错误红；详细说明正文深灰，不能只靠颜色区分。 - **STEPS-R10**：【可跳转步骤】只有明确支持跳转时才为步骤入口定义操作蓝焦点和不可跳转禁用灰；普通展示步骤没有悬停、按下和禁用点击态。 - **STEPS-R11**：【组件边界】步骤条表示流程位置，默认不是可点击导航；完成不等于所有内容成功，错误仅标记发生错误的步骤。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **STEPS-S01**：当前样例：已完成、进行中、待开始三个展示步骤，未提供步骤跳转。 - [ ] **STEPS-S02**：接入验收：当前使用普通横向步骤条；需要纵向或简洁形态时再确定采用场景。零步/单步/多步与长标题属于内容边界，当前位置及完成/错误属于真实流程状态，分别检查。 - [ ] **STEPS-S03**：只有明确可跳转时才增加键盘入口与权限判断；普通步骤展示不执行提交或表单校验。 - [ ] **STEPS-S04**：共用视觉验收：仅核对本组件实际适用的颜色与组合状态；无此能力标为不适用，不给静态内容添加输入错误、半选或按下状态。 - [ ] **STEPS-S05**：共用文字验收：正文14px/400、次级操作12px/400、标题600；检查实际子元素与弹出层。输入焦点只改自身边框，按钮和链接保留键盘焦点轮廓。 ### 专题验收重点 当前样例只核对三步横向展示的已完成/进行中/待开始文字、图标和颜色一致；无步骤点击。零步、单步、长标题、失败及纵向布局在实际接入后验收。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html ``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：本次补充。 - [打开本专题页面](../index.html#spec-steps) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`steps`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 未开始 | 未开始标记边框灰，补充说明辅助深灰；标题保持正文深灰并可读。 | | 当前步骤 | 当前标记主题蓝并标明当前步骤，正文保持正文深灰，不要求整段文字染蓝。 | | 完成与错误 | 真实完成标记成功绿；错误标记及短提示错误红；详细说明正文深灰，不能只靠颜色区分。 | | 可跳转步骤 | 只有明确支持跳转时才为步骤入口定义操作蓝焦点和不可跳转禁用灰；普通展示步骤没有悬停、按下和禁用点击态。 | 步骤条表示流程位置，默认不是可点击导航；完成不等于所有内容成功，错误仅标记发生错误的步骤。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 **当前业务：暂未采用。** 当前处理记录使用表格或时间线，尚未采用图形步骤条。 本页保留组件示例和接入规则。已核实的参考截图尚未提供合适业务落点，不链接无关首页，不为覆盖组件而新增业务字段。 **适用条件**：展示流程位置时，默认沿用当前横向步骤条；按真实流程显示已完成、当前与待开始步骤，步骤本身不提供跳转。 **采用边界**：不把待开始、当前、完成、错误称为四种可任选样式。不把库的简洁形态、纵向布局和可跳转混成同一组配置。 [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 日历内容组件 · `calendar` 专题 `calendar` · 选择组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`calendar`。 本页模板直接使用的 Element UI 标签：`el-calendar`。 ### 本页用法与分类 默认用法：需要在内容区域查看整月日期时，默认使用当前月历，保留月份切换、今日定位与日期选择；仅填写日期字段时使用日期输入组件。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 用途：内容月历或日期字段 | 内容月历占用页面区域；日期输入负责表单字段。 | 本页只展示月历并选日期，不包含日程、预约或排班；不要为了填写单个日期引入整块月历。 | | 功能：展示范围与日期内容 | 展示范围配置限定可见区间，日期内容需业务自行提供。 | 默认沿用当前整月展示；需要固定展示范围或日格内容时另行接入。展示范围不等于禁止选择某日期。 | | 自动状态：今日、当前选择与月份归属 | 今日由系统日期决定，选中日由当前值决定，非本月由所在月份决定。 | 按真实日期自动显示，当前选中底覆盖悬停底；业务不可选日期需另行实现阻止选择，不能只把字改灰。 | 使用边界：不把今日、选中日和非本月当作几种可选样式。不把展示范围等同于表单的禁选日期能力。 ### 组件规则 - **CALENDAR-R01**：需要在内容区查看整月日期时，默认使用当前月历；仅填写日期字段时使用日期输入组件。两者用途不同，不是同一个输入框的大小样式。 - **CALENDAR-R02**：覆盖今日、选中日、非本月和无内容；range只规定展示范围，不等同DatePicker的禁选日期能力。需要阻止选择某日期时由宿主扩展，不声称原生示例已支持。 - **CALENDAR-R03**：本例只提供日期选择，不增加日程、预约或排班功能。 - **CALENDAR-R04**：当前日格补充键盘适配：制表键进入一个当前日期入口，左右方向键选择相邻日、上下方向键选择相隔一周的日格；起始/结束键选择本行首尾，回车/空格选择当前日。翻页键复用既有上个月/下个月按钮并将焦点移回选中日格；鼠标点击保留。每个日格提供完整中文日期名称、今天及已选语义。 - **CALENDAR-R05**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **CALENDAR-R06**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **CALENDAR-R07**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **CALENDAR-R08**：【普通日期】白底、正文深灰、分隔灰；非本月日期可用辅助深灰，事件内容保持可读。 - **CALENDAR-R09**：【今天与选中日】今天用操作蓝文字；选中日期单元格用选中浅蓝，不绘制对勾或半选横线。 - **CALENDAR-R10**：【悬停与键盘】实际可操作日期悬停或定位浅灰背景；当前选中底保持选中浅蓝；键盘焦点用操作蓝提示。 - **CALENDAR-R11**：【不可选与内容反馈】只有业务明确不可选日期才用禁用灰并阻止选择；空事件用空值提示，读取失败在内容区错误红提示，不给日期画表单红框。 - **CALENDAR-R12**：【组件边界】内容日历没有输入触发框、复选和半选；日期导航按钮按按钮规范，日格选择不套用主按钮按下位移。 - **CALENDAR-R13**：日历键盘方向键按实际日期连续移动：左右为前后一天，上下为前后七天；跨月、跨年和闰日必须落到正确日期并保持焦点。Home/End移动到当前周首/末；不能在当前网格边缘截断。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **CALENDAR-S01**：当前样例：原生内容日历、月份切换、今日与日期选择，不包含日程或预约。 - [ ] **CALENDAR-S02**：接入验收：需要固定展示区间时再配置范围展示（range），需要日格内容时再接入业务数据；跨月/跨年/闰日、非本月、空事件与高密度内容分别作为日期和内容边界检查。 - [ ] **CALENDAR-S03**：range规定展示区间，不等同日期输入控件的禁选函数；禁止选择某日期需宿主扩展并验证。日历格本身不使用输入错误边框。 - [ ] **CALENDAR-S04**：共用视觉验收：仅核对本组件实际适用的颜色与组合状态；无此能力标为不适用，不给静态内容添加输入错误、半选或按下状态。 - [ ] **CALENDAR-S05**：共用文字验收：正文14px/400、次级操作12px/400、标题600；检查实际子元素与弹出层。输入焦点只改自身边框，按钮和链接保留键盘焦点轮廓。 - [ ] **CALENDAR-S06**：当前键盘适配：日格仅一个制表键入口，左右/上下、行首尾、回车/空格可选日；上翻页/下翻页改变月份后焦点回到选中日。中文日期名称、aria-pressed和今天aria-current一起更新。源码/逻辑测试不代替实际浏览器读屏验收。 - [ ] **CALENDAR-S07**：跨月与跨年键盘：月首按左或上、月末按右或下；验证实际日期、选中状态、焦点及唯一Tab停靠一致。 ### 专题验收重点 检查日格鼠标选择与月份按钮；制表键进入日格，方向键/回车/空格沿用原生选日，翻页键复用月份按钮；焦点、完整日期名称、今天和已选状态一致。日程内容、禁选日期及远端事件不属于当前示例。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ### 本示例的运行依赖 - 下方只展示专题内部模板，不包含外层宿主。当前适配要求将它置于唯一的 `
` 中；只复制内部标签不会自动获得这里规定的键盘与语义行为。 - 使用 Vue **2.6.14**、Element UI **2.15.6**，接入 [components.js](../components.js) 中本例所需的数据和方法，并按 [通用基线](FOUNDATIONS.md) 加载公共样式。 - 键盘实现依赖 [calendar-keyboard.js](../calendar-keyboard.js)，焦点样式依赖 [calendar-keyboard.css](../calendar-keyboard.css)。脚本在 DOMContentLoaded 时初始化；若文档已经就绪则立即初始化，因此宿主和已挂载日历必须在初始化前存在。 - 当前读取中文 `YYYY年M月` 标题、只含日期数字的原生日格和月份按钮，提供日格唯一 Tab 入口、方向键跨日、Home/End、PageUp/PageDown 及焦点返回。日期内容插槽、其他语言或路由后插入的新日历需重新实现并验证对应映射；业务投放日历自身的按钮交互不能自动视为本适配已接入。 - 本片段及文档不是独立运行包。实际接入还需核对名称、键盘、边界、动态挂载与销毁；本地逻辑检查不代替浏览器及读屏验收。 ```html

制表键进入日格；方向键选择日期，回车或空格确认当前日。上翻页/下翻页键切换月份，也可使用上方月份按钮。

``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：本次补充；Element UI 2.15.6 packages/calendar/src/date-table.vue原生click日格，calendar-keyboard.js/css补充本规范页键盘与焦点适配。。 - [打开本专题页面](../index.html#spec-calendar) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`calendar`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 普通日期 | 白底、正文深灰、分隔灰；非本月日期可用辅助深灰，事件内容保持可读。 | | 今天与选中日 | 今天用操作蓝文字；选中日期单元格用选中浅蓝，不绘制对勾或半选横线。 | | 悬停与键盘 | 实际可操作日期悬停或定位浅灰背景；当前选中底保持选中浅蓝；键盘焦点用操作蓝提示。 | | 不可选与内容反馈 | 只有业务明确不可选日期才用禁用灰并阻止选择；空事件用空值提示，读取失败在内容区错误红提示，不给日期画表单红框。 | 内容日历没有输入触发框、复选和半选；日期导航按钮按按钮规范，日格选择不套用主按钮按下位移。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [广告管理 · 广告投放日历](../../showcase/index.html?example=calendar#adverts) · [场景文档](../../showcase/docs/adverts.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 头像与缺图 · `avatar` 专题 `avatar` · 数据展示 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`avatar`。 本页模板直接使用的 Element UI 标签：`el-avatar`。 ### 本页用法与分类 默认用法：常规列表身份识别默认沿用当前32px圆形头像并配可读名称；本页另展示40px方形图标头像，用于说明形状、尺寸与内容可以分别确定。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 形状：业务对象规则 | 圆形或方形用于保持同类对象识别方式一致。 | 当前常规头像沿用圆形；确需以方形区分某类业务对象时统一采用，不按个人喜好逐条切换。 | | 尺寸：显示位置 | 32px与40px决定头像占用空间，不改变数据含义。 | 列表默认32px；较独立的资料区需要更清楚识别时可采用当前已示范的40px。形状与尺寸独立，同类位置保持一致。 | | 内容与自动回退：图片、文字或图标 | 有效图片显示头像内容；未设置或加载失败显示替代内容。 | 文字首字与默认图标按统一回退规则使用并保留名称；本页无真实图片请求，加载失败回退需接入后验证。 | 使用边界：不把32px圆形文字与40px方形图标固定解释为仅有两套组合。不为每个账号随机分配背景色或把缺图当成无权限。 ### 组件规则 - **AVATAR-R01**：头像为辅助识别，必须同时有可读名称。形状按业务对象统一，尺寸按显示位置统一，两者分别确定：常规列表默认32px圆形，较独立资料区可用40px；方形需有明确对象区分规则。 - **AVATAR-R02**：图片失败回退为首字或默认图标，不显示破图；无图片不是无权限。 - **AVATAR-R03**：点击头像是否有动作由业务决定，无动作不显示手型。 - **AVATAR-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **AVATAR-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **AVATAR-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **AVATAR-R07**：【有效头像】图片保持原内容颜色；不根据账号随机生成一套彩色背景。 - **AVATAR-R08**：【未设置与缺图】统一浅灰背景和辅助深灰文字/图标；提供清晰替代名称，不显示虚假上传状态。 - **AVATAR-R09**：【附属入口】确实可以打开详情或更换时提供操作蓝焦点；不可执行的更换按钮用禁用灰，头像本身不全部变灰。 - **AVATAR-R10**：【加载失败】请求头像失败时使用缺图回退；如需提示用错误红短说明，不在小头像内堆叠成功/警告/失败色。 - **AVATAR-R11**：【组件边界】普通头像只是内容展示，没有“选中头像”边框或键盘焦点；只有真实账号入口或更换头像动作才具备交互。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **AVATAR-S01**：当前样例：32px文字头像、40px方形图标头像与可读名称；不包含真实图片请求。 - [ ] **AVATAR-S02**：接入验收：形状按对象、32/40px尺寸按位置分别确定；图片/文字/图标属于内容来源与回退规则。图片适配、替代名称和失败回退在实际接入图片后验收，不把两个示例固定成仅有两套组合。 - [ ] **AVATAR-S03**：静态头像不显示手型或伪焦点；只有明确的详情/更换入口才检查点击与键盘。 - [ ] **AVATAR-S04**：共用视觉验收：仅核对本组件实际适用的颜色与组合状态；无此能力标为不适用，不给静态内容添加输入错误、半选或按下状态。 - [ ] **AVATAR-S05**：共用文字验收：正文14px/400、次级操作12px/400、标题600；检查实际子元素与弹出层。输入焦点只改自身边框，按钮和链接保留键盘焦点轮廓。 ### 专题验收重点 当前样例核对32px文字头像、40px方形图标头像、中文可读名称和不可点击态；无真实图片请求。加载失败、长名称与图片适配在接入后验收。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html
用 名称示例
``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：本次补充。 - [打开本专题页面](../index.html#spec-avatar) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`avatar`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 有效头像 | 图片保持原内容颜色；不根据账号随机生成一套彩色背景。 | | 未设置与缺图 | 统一浅灰背景和辅助深灰文字/图标；提供清晰替代名称，不显示虚假上传状态。 | | 附属入口 | 确实可以打开详情或更换时提供操作蓝焦点；不可执行的更换按钮用禁用灰，头像本身不全部变灰。 | | 加载失败 | 请求头像失败时使用缺图回退；如需提示用错误红短说明，不在小头像内堆叠成功/警告/失败色。 | 普通头像只是内容展示，没有“选中头像”边框或键盘焦点；只有真实账号入口或更换头像动作才具备交互。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 **当前业务：暂未采用。** 当前顶栏使用姓名入口，个人中心未采用头像及缺图回退。 本页保留组件示例和接入规则。已核实的参考截图尚未提供合适业务落点，不链接无关首页，不为覆盖组件而新增业务字段。 **适用条件**：常规列表身份识别默认沿用当前32px圆形头像并配可读名称；本页另展示40px方形图标头像，用于说明形状、尺寸与内容可以分别确定。 **采用边界**：不把32px圆形文字与40px方形图标固定解释为仅有两套组合。不为每个账号随机分配背景色或把缺图当成无权限。 [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 轮播 · `carousel` 专题 `carousel` · 数据展示 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`carousel`、`carousel-item`。 本页模板直接使用的 Element UI 标签：`el-carousel`、`el-carousel-item`。 ### 本页用法与分类 默认用法：确有多张展示素材需要逐张浏览时，默认沿用当前普通横向轮播，关闭自动播放，通过前后按钮和外部指示器手动切换。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 视觉：普通或卡片 | 普通与卡片属于轮播的不同外观。 | 当前采用普通形态；卡片属于尚未采用的库能力，确有展示场景再统一决定，不用于隐藏后台关键数据。 | | 尺寸与布局：方向和高度 | 方向决定切换轴线，高度决定素材占用空间，两者分别配置。 | 当前默认横向；100px仅是演示高度。业务按素材确定容器高度，纵向布局需另行验收，不能把100px固定到所有素材。 | | 功能：切换与播放 | 箭头、指示器、循环和自动播放决定浏览方式。 | 默认手动切换且不自动播放；确有自动播放需求时另补暂停入口、聚焦/悬停暂停及减少动态效果规则，当前不演示自动播放。 | | 自动状态：当前项与读取反馈 | 当前指示器随实际页变化，加载和失败来自素材请求。 | 不用随机颜色区别轮播页，也不给内容本身画选中框；当前为静态内容块，不声称已验证图片请求状态。 | 使用边界：不把卡片、纵向、自动播放与加载失败列成同一级样式。不把示例100px高度设为所有业务素材的固定高度。 ### 组件规则 - **CAROUSEL-R01**：仅在确有多张展示内容时使用，不用于后台关键数据轮播；默认沿用当前普通横向、手动切换和外部指示器。演示高度不作为所有素材的固定尺寸。 - **CAROUSEL-R02**：默认不自动播放；若启用需提供暂停，聚焦或悬停时暂停，尊重系统“减少动态效果”偏好。 - **CAROUSEL-R03**：指示器、左右按钮和当前序号可识别；空内容和单项不展示无意义翻页。 - **CAROUSEL-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **CAROUSEL-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **CAROUSEL-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **CAROUSEL-R07**：【内容与缺失】素材保持本身颜色；无内容使用浅灰背景和空值灰提示，不保留无效切换入口。 - **CAROUSEL-R08**：【当前指示器】未选指示器边框灰，当前指示器主题蓝；不为不同轮播页随机配色。 - **CAROUSEL-R09**：【切换与暂停】确有切换/暂停入口时使用操作蓝及可理解名称，键盘焦点操作蓝；不可执行入口使用禁用灰。 - **CAROUSEL-R10**：【加载与错误】加载使用主题蓝图标，失败错误红短提示；图片错误不改变其他已加载内容的颜色。 - **CAROUSEL-R11**：【组件边界】轮播当前项用指示器表达，不是图片选择框；图片本身不增加主题蓝选中边框。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **CAROUSEL-S01**：当前样例：三个内容块、关闭自动播放、手动前后切换与指示器。 - [ ] **CAROUSEL-S02**：接入验收：当前采用普通横向；卡片形态或纵向布局需明确使用场景后再采用。指示器/箭头与循环是功能配置，零项/单项是内容边界，键盘是操作验收，分别检查。 - [ ] **CAROUSEL-S03**：若业务启用自动播放，另验播放间隔、可访问暂停入口、悬停/聚焦暂停和减少动态效果；当前样例不演示自动播放。 - [ ] **CAROUSEL-S04**：共用视觉验收：仅核对本组件实际适用的颜色与组合状态；无此能力标为不适用，不给静态内容添加输入错误、半选或按下状态。 - [ ] **CAROUSEL-S05**：共用文字验收：正文14px/400、次级操作12px/400、标题600；检查实际子元素与弹出层。输入焦点只改自身边框，按钮和链接保留键盘焦点轮廓。 ### 专题验收重点 当前样例核对3项静态内容、手动前后/指示器切换、可访问名称及关闭自动播放。零项、单项、素材失败和启用自动播放后的暂停规则为接入验收。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html
内容 {{ n }} / 3
 ``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：本次补充。 - [打开本专题页面](../index.html#spec-carousel) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`carousel`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 内容与缺失 | 素材保持本身颜色；无内容使用浅灰背景和空值灰提示，不保留无效切换入口。 | | 当前指示器 | 未选指示器边框灰，当前指示器主题蓝；不为不同轮播页随机配色。 | | 切换与暂停 | 确有切换/暂停入口时使用操作蓝及可理解名称，键盘焦点操作蓝；不可执行入口使用禁用灰。 | | 加载与错误 | 加载使用主题蓝图标，失败错误红短提示；图片错误不改变其他已加载内容的颜色。 | 轮播当前项用指示器表达，不是图片选择框；图片本身不增加主题蓝选中边框。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [广告管理 · 首页轮播预览](../../showcase/index.html?example=carousel#adverts) · [场景文档](../../showcase/docs/adverts.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 无限滚动 与 滚动条 · `infinite-scroll` 专题 `infinite-scroll` · 容器组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`infinite-scroll`、`scrollbar`。 本页模板直接使用的 Element UI 标签：`el-button`、`el-scrollbar`。 ### 本页用法与分类 默认用法：适合连续浏览的列表默认沿用当前“触底追加＋加载更多按钮”；需要精确定位和核对总数时优先分页。独立滚动容器只负责浏览已有内容。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 用途：追加数据或浏览已有内容 | 无限滚动改变已加载条数；滚动条只改变可见位置。 | 需要连续追加才用前者；内容已经齐备、只是超出容器高度时用后者。两者不是两种同级列表样式。 | | 功能：追加触发条件 | 触发距离、首次触发和手动入口决定何时继续读取。 | 当前初始6条，触底或按钮每次追加4条，最多20条；保留按钮作为可访问替代入口。远端延迟和防并发需接入后实现。 | | 统一滚动条 | 原生或自定义是组件实现方式，不是两套可选视觉。 | 本页两处竖向条均为6px、浅灰轨道和边框灰滑块；同方向只保留一套可拖动轨道。内容超出才滚动，不能显示重复或无用横向条。 | | 自动状态：加载、失败与末尾 | 这些状态由请求及剩余数据决定，不能自由选择。 | 有请求才显示加载；失败保留已有内容并提供重试；无剩余数据才显示没有更多。当前仅本地追加与末尾，不含真实失败或重试。 | 使用边界：不把独立滚动条当作另一种自动加载方案。不把没有更多、加载中与失败当作可配置外观。 ### 组件规则 - **INFINITE-SCROLL-R01**：无限滚动只用于适合连续浏览、需要继续追加数据的列表，默认保留触底追加与加载更多按钮；需要精确定位和总量核对的数据优先分页。独立滚动容器只浏览已有内容，不是另一种无限加载样式。 - **INFINITE-SCROLL-R02**：覆盖首次加载、继续加载、加载失败、没有更多；并发请求去重，保留滚动位置。 - **INFINITE-SCROLL-R03**：必须提供可访问的继续加载替代入口；以下本地样例同时支持滚动和加载更多，不连接接口。 - **INFINITE-SCROLL-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **INFINITE-SCROLL-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **INFINITE-SCROLL-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **INFINITE-SCROLL-R07**：【内容与滚动条】内容白底、正文深灰；独立竖向滚动条统一6px，轨道浅灰背景、滑块边框灰，悬停滑块用辅助深灰。同一方向只显示一套滚动条，滚动不改变正文颜色。 - **INFINITE-SCROLL-R08**：【继续加载】仅请求下一批时显示主题蓝图标与正文深灰说明；保留已加载内容，不重复提交请求。 - **INFINITE-SCROLL-R09**：【末尾与空列表】全部加载完成或没有内容时给空值灰/辅助深灰说明；“到底了”不使用成功绿冒充操作完成。 - **INFINITE-SCROLL-R10**：【失败与重试】失败错误红短提示，重试入口操作蓝并有焦点；不把滚动容器整体染红或禁用。 - **INFINITE-SCROLL-R11**：【组件边界】无限滚动没有展开箭头或容器选中态；滚动条位置只表示滚动位置，不表示业务步骤成功。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **INFINITE-SCROLL-S01**：当前样例：6条起始内容，每次触底或点加载更多追加4条，最多20条；到达末尾后禁止继续增加。 - [ ] **INFINITE-SCROLL-S02**：当前样例：连续加载容器使用原生6px竖向条，独立滚动容器保留Element自定义6px竖向条并隐藏重复原生轨道。滚轮、拖动滑块都应到首尾，最后一条完整可见；普通文本换行，内容仍可滚动，不能用禁止滚动掩盖问题。 - [ ] **INFINITE-SCROLL-S03**：接入验收：先确定触发距离、首次触发和请求延迟等功能配置，再验证防重复请求、下一批加载/失败/重试与已加载数据保留；请求状态不能作为可任选的样式。 - [ ] **INFINITE-SCROLL-S04**：大量数据性能与虚拟化另行验收，不能由20条本地演示推断通过。 - [ ] **INFINITE-SCROLL-S05**：共用视觉验收：仅核对本组件实际适用的颜色与组合状态；无此能力标为不适用，不给静态内容添加输入错误、半选或按下状态。 - [ ] **INFINITE-SCROLL-S06**：共用文字验收：正文14px/400、次级操作12px/400、标题600；检查实际子元素与弹出层。输入焦点只改自身边框，按钮和链接保留键盘焦点轮廓。 ### 专题验收重点 当前核对触底或按钮追加到最多20条、末尾停止追加；两处竖向滚动条均为6px，滚轮与拖拽都能到首尾，无原生与自定义轨道叠加、无多余横向条。真实请求失败/重试、并发控制、大数据性能及虚拟化另行接入验收。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html

连续加载列表

示例条目 {{ n }}
{{ infiniteCount >= 20 ? '没有更多' : '加载更多' }}

独立滚动容器

滚动条内容 {{n}}

 ``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：本次补充。 - [打开本专题页面](../index.html#spec-infinite-scroll) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`infinite-scroll`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 内容与滚动条 | 内容白底、正文深灰；独立竖向滚动条统一6px，轨道浅灰背景、滑块边框灰，悬停滑块用辅助深灰。同一方向只显示一套滚动条，滚动不改变正文颜色。 | | 继续加载 | 仅请求下一批时显示主题蓝图标与正文深灰说明；保留已加载内容，不重复提交请求。 | | 末尾与空列表 | 全部加载完成或没有内容时给空值灰/辅助深灰说明；“到底了”不使用成功绿冒充操作完成。 | | 失败与重试 | 失败错误红短提示，重试入口操作蓝并有焦点；不把滚动容器整体染红或禁用。 | 无限滚动没有展开箭头或容器选中态；滚动条位置只表示滚动位置，不表示业务步骤成功。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [客服工单管理 · 处理记录 · 独立滚动](../../showcase/index.html?example=ticket-history#tickets) · [场景文档](../../showcase/docs/tickets.md)；落地范围：只覆盖独立滚动容器，不覆盖触底追加数据。 [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 气泡确认 · `popconfirm` 专题 `popconfirm` · 浮层组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`popconfirm`。 ### 本页用法与分类 默认用法：仅用于轻量、非删除的局部设置确认；本页以恢复默认列设置为例，打开后焦点进入取消按钮。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 用途边界 | 恢复默认等轻量设置可用气泡确认；删除、移除统一用居中确认弹窗。 | 后果能在短文案中说清，且不删除对象时才考虑气泡；复杂说明或输入任务使用对话框。 | | 草稿与生效 | 恢复当前草稿与保存到实际展示是两个步骤，不是两种气泡样式。 | 规范示例直接恢复本地列选择；存款记录先恢复列设置草稿，再点击保存应用到表格，取消保留草稿。 | | 自动交互状态 | 打开、取消、确认与关闭由用户操作触发。 | 当前例子不发起后台请求，不展示虚构的处理中或失败；确认、取消、退出键及外部关闭按各自结果处理焦点。 | 使用边界：气泡与居中弹窗不是可随意替换的皮肤；删除、移除不使用气泡，也不以对象未保存为由跳过确认。 ### 组件规则 - **POPCONFIRM-R01**：仅用于轻量、局部、非删除的设置确认，例如恢复默认列设置。删除、移除统一使用居中确认弹窗；复杂或需要输入的任务使用对话框。 - **POPCONFIRM-R02**：确认文本表达具体动作，取消不执行；按退出键（Esc）或点击外部关闭均不执行确认动作。打开后焦点进入取消按钮；确认、取消或按退出键主动关闭后回到原入口，点击外部关闭时保留新点击目标的焦点。 - **POPCONFIRM-R03**：气泡不能被列表或滚动容器裁切；定位需保持在视口内并避开关键操作。同屏避免多个确认气泡同时展开。 - **POPCONFIRM-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **POPCONFIRM-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **POPCONFIRM-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **POPCONFIRM-R07**：恢复默认是普通设置动作，入口使用12px/400操作蓝文字，无框透明底；悬停加下划线并保留键盘焦点。不要把它标成红色删除入口。 - **POPCONFIRM-R08**：删除、移除统一先打开居中确认弹窗，明确对象、数量和后果；确认按钮统一写“确认”，取消不改变数据。未保存项、待上传附件、已保存记录和批量删除都沿用这一入口规则；失败保留原内容和重试入口。普通清空输入、取消筛选或关闭弹层不是删除，不自动标红。 - **POPCONFIRM-R09**：【气泡内容】白底、正文深灰、边框灰与公共阴影；普通设置说明可使用主题蓝信息图标，不使用删除风险图标。气泡自身不增加页面遮罩。 - **POPCONFIRM-R10**：【触发入口】轻量非删除操作使用操作蓝、12px/400、无框透明底，并保留键盘焦点；删除和移除的红字入口转到居中确认弹窗。 - **POPCONFIRM-R11**：【确认与取消】正文说明要执行的具体动作，按钮统一显示“确认”和“取消”；确认使用主按钮，取消使用普通按钮。取消、退出键和外部关闭均不修改设置。 - **POPCONFIRM-R12**：【关闭与后续处理】本地恢复默认在确认后立即更新设置草稿；业务列设置仍需保存后才作用于表格。确认、取消或按退出键主动关闭后回到触发器，点击外部关闭时保留新点击目标的焦点。 - **POPCONFIRM-R13**：【组件边界】气泡确认是局部非模态确认，默认没有页面遮罩和独立关闭叉。删除、移除不使用本组件；需要阻断页面的确认使用居中确认弹窗。 - **POPCONFIRM-R14**：当前规范示例会恢复账号、状态和备注列的本地显示选择；取消保留选择。存款记录的业务示例恢复列设置草稿，仍需点击保存才应用到表格；两处均不提交后台请求，也不提供请求失败模拟。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **POPCONFIRM-S01**：当前样例：可切换状态和备注列；点击恢复默认打开气泡，确认后显示账号、状态、备注三列，取消保留当前选择。 - [ ] **POPCONFIRM-S02**：接入验收：核对具体对象与动作；确认、取消或按退出键（Esc）主动关闭后回到原入口，点击外部关闭时保留新点击目标的焦点；取消或关闭不触发业务动作。 - [ ] **POPCONFIRM-S03**：业务场景：存款记录 → 列设置 → 恢复默认；先修改列草稿，取消气泡时保留修改，确认时恢复默认，点击保存后才应用到表格。通过本组件的场景链接可直接进入列设置。 - [ ] **POPCONFIRM-S04**：边界验收：本气泡只承载轻量非删除确认；删除和移除仍保留红字入口，但必须打开居中确认弹窗，不为草稿删除另用气泡或跳过确认。 - [ ] **POPCONFIRM-S05**：共用视觉验收：仅核对本组件实际适用的颜色与组合状态；无此能力标为不适用，不给静态内容添加输入错误、半选或按下状态。 - [ ] **POPCONFIRM-S06**：共用文字验收：正文14px/400、次级操作12px/400、标题600；检查实际子元素与弹出层。输入焦点只改自身边框，按钮和链接保留键盘焦点轮廓。 - [ ] **POPCONFIRM-S07**：当前示例：打开后聚焦取消按钮；确认、取消或退出键主动关闭后恢复入口焦点，点击外部关闭时保留新点击目标焦点。入口为操作蓝文字，确认按钮为主按钮，按钮文案统一“确认”。 ### 专题验收重点 当前样例验证恢复默认后列选择实际改变，取消、退出键或外部关闭保留选择；确认、取消或退出键主动关闭后回到入口，外部关闭保留新点击目标焦点。业务场景另核对恢复草稿、取消保留及保存后表格更新。删除、移除入口必须使用居中确认弹窗。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html ``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：本次补充。 - [打开本专题页面](../index.html#spec-popconfirm) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`popconfirm`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) 自定义示例 `confirm-popover-pattern` 的实现：[feedback-patterns.js](../feedback-patterns.js)。 ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 气泡内容 | 白底、正文深灰、边框灰与公共阴影；普通设置说明可使用主题蓝信息图标，不使用删除风险图标。气泡自身不增加页面遮罩。 | | 触发入口 | 轻量非删除操作使用操作蓝、12px/400、无框透明底，并保留键盘焦点；删除和移除的红字入口转到居中确认弹窗。 | | 确认与取消 | 正文说明要执行的具体动作，按钮统一显示“确认”和“取消”；确认使用主按钮，取消使用普通按钮。取消、退出键和外部关闭均不修改设置。 | | 关闭与后续处理 | 本地恢复默认在确认后立即更新设置草稿；业务列设置仍需保存后才作用于表格。确认、取消或按退出键主动关闭后回到触发器，点击外部关闭时保留新点击目标的焦点。 | 气泡确认是局部非模态确认，默认没有页面遮罩和独立关闭叉。删除、移除不使用本组件；需要阻断页面的确认使用居中确认弹窗。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [存款记录 · 列设置 · 恢复默认](../../showcase/index.html?example=popconfirm#deposits) · [场景文档](../../showcase/docs/deposits.md)；落地范围：恢复当前列设置草稿；需点保存才应用到列表。删除不使用气泡确认。 [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 结果与空状态 · `result` 专题 `result` · 反馈组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`empty`、`result`。 本页模板直接使用的 Element UI 标签：`el-empty`。 ### 本页用法与分类 默认用法：查询成功但没有记录时在原内容区显示空状态；操作或流程已有明确响应时显示结果标题，仅在有具体补充信息时显示副说明。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 用途 | 空状态解释内容容器没有数据，结果提示解释操作或流程的响应。 | 零记录用空状态；已受理、成功、失败或部分完成用结果说明，不根据图形好看程度选择。 | | 自动结果 | 等待后续处理、成功、失败和需要注意由实际响应决定。 | 真实页面按结果同步图标、标题与可选副说明；本页切换按钮只模拟对照，不执行请求。 | | 后续动作 | 返回、重试、清除筛选或继续处理取决于能做什么。 | 只显示确有真实入口的动作；正在等待请求时使用加载反馈，不提前展示已受理或成功结果。 | 使用边界：不把四个结果类型当成四套皮肤；已受理等待处理、请求仍在加载、查询零条记录是不同条件。副说明不重复标题，也不为填满区域添加空泛句子。 ### 组件规则 - **RESULT-R01**：结果页 用于独立结果区，空状态 用于内容容器无数据；不能把接口失败显示成普通空态。 - **RESULT-R02**：结果标题说明实际处理结论。副说明可选，仅补充真实原因、影响或可执行下一步；标题已讲清时不重复凑句子，没有内容时不保留空行。返回或重试由当前场景决定。 - **RESULT-R03**：图形是辅助，不引入业务提交成功的假反馈。样例均为展示状态。 - **RESULT-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **RESULT-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **RESULT-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **RESULT-R07**：【明确结果】成功/警告/失败的图标或独立短状态标识分别使用成功绿/警告橙/错误红；有具体补充信息时才显示副说明，使用正文深灰，未提供时不占位。 - **RESULT-R08**：【空状态】没有内容使用空值灰说明与浅灰背景插画，不自动视为失败或警告。 - **RESULT-R09**：【后续动作】返回、重试、创建等真实动作按按钮或操作蓝文字入口规范；不让结果容器整体成为可点击按钮。 - **RESULT-R10**：【无交互内容】静态标题和插画没有悬停、选中或禁用态；实际请求中的占位交给加载组件，不显示成功结果。 - **RESULT-R11**：【组件边界】结果提示表达已返回的处理状态，包括已受理但等待后续处理；空状态表示没有数据。它们不是输入或选择控件，也不代替正在请求时的骨架屏。 - **RESULT-R12**：暂无数据仅表示查询成功且记录数为零；筛选无结果显示“未找到符合条件的数据”，接口失败显示失败和重试。结果提示用于等待处理、处理成功、处理失败或部分完成的独立结果区，不能用“信息结果示例”代替出现条件。 - **RESULT-R13**：结果标题14px/600/21px，副说明14px/400/21px，均使用正文深灰。副说明仅在有实质补充时显示；结果变化通过礼貌播报通知辅助技术，静态说明与演示按钮不重复播报。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **RESULT-S01**：当前示例：无数据时展示“暂无数据”；结果示例区分等待、成功、失败和部分完成。等待与成功保留有独立信息的副说明，失败与部分完成仅显示清楚标题，不补空泛句子。 - [ ] **RESULT-S02**：当前切换入口仅用于模拟不同结果，图标、标题与可选副说明随之更新；没有副说明时不创建说明行，不执行业务操作。真实页面必须由实际响应决定结果，不能让用户选择“成功样式”或“失败样式”。 - [ ] **RESULT-S03**：宿主接入：请求成功且零条记录才进入空状态；筛选无结果提供清除筛选，失败提供重试。 - [ ] **RESULT-S04**：宿主接入：成功响应后才使用成功状态；待审核不视为审核通过。部分完成确有未完成数量、原因、影响或可执行下一步时才补充这些真实信息；不编造详情，也不以“请检查后继续”代替具体说明。 - [ ] **RESULT-S05**：宿主接入：返回、重试或继续操作需指向真实入口；结果变化可被辅助技术感知。 ### 专题验收重点 对照暂无数据与操作结果的不同出现条件；切换四种结果，检查标题和语义图标同步。有具体补充信息时显示副说明；失败和部分完成示例没有副说明，也不保留空白说明行。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html

空状态 · 查询成功但没有数据

列表本身没有记录时使用“暂无数据”；筛选无结果时使用“未找到符合条件的数据”。加载失败不显示空状态。

结果提示 · 操作或流程的结果

下方切换只用于对照结果说明。真实页面根据处理结果自动展示对应内容，结果类型不是可选视觉样式。

``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：本次补充。 - [打开本专题页面](../index.html#spec-result) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`result`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) 自定义示例 `result-pattern` 的实现：[feedback-patterns.js](../feedback-patterns.js)。 ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 明确结果 | 成功/警告/失败的图标或独立短状态标识分别使用成功绿/警告橙/错误红；有具体补充信息时才显示副说明，使用正文深灰，未提供时不占位。 | | 空状态 | 没有内容使用空值灰说明与浅灰背景插画，不自动视为失败或警告。 | | 后续动作 | 返回、重试、创建等真实动作按按钮或操作蓝文字入口规范；不让结果容器整体成为可点击按钮。 | | 无交互内容 | 静态标题和插画没有悬停、选中或禁用态；实际请求中的占位交给加载组件，不显示成功结果。 | 结果提示表达已返回的处理状态，包括已受理但等待后续处理；空状态表示没有数据。它们不是输入或选择控件，也不代替正在请求时的骨架屏。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [存款记录 · 筛选无数据 · 空状态](../../showcase/index.html#deposits) · [场景文档](../../showcase/docs/deposits.md)；落地范围：只覆盖列表无数据的空状态，不代表独立成功/失败结果页。 [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## Element UI 版本与扩展边界 · `version` 专题 `version` · 可用性 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 本专题为基础规则、同一组件的补充场景或组合模式，不作为独立的 Element UI 官方组件声明。 ### 本页用法与分类 默认用法：当前示例锁定Element UI 2.15.6与Vue 2.6.14；主题与交互遵循本规范的实际采用范围。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 运行版本 | 当前固定版本和后续兼容升级 | 后续2.x需单独验证并锁定；不能直接跟随最新版本。 | | 迁移路线 | Element Plus与Vue 3 | 属于独立迁移，不是当前组件外观的可选配置。 | | 扩展能力 | 富文本、图表、虚拟表格等 | 按需求单独选型、定义规范和验收；名称出现在清单中不代表已接入。 | 使用边界：组件库支持的全部形式不等于本后台允许使用的全部形式；先看对应专题的默认用法与采用条件。 ### 组件规则 - **VERSION-R01**：当前运行资源锁定 element-ui 2.15.6，Vue 2.6.14；原样板 2.13.2 的 DOM / 字体只能作历史参考。 - **VERSION-R02**：后续使用经验证的更高 Element UI 2.x 版本。每次升级记录版本与变更，回归样式、事件、焦点、弹层、日期、表格、选择和导出；不直接使用 latest。 - **VERSION-R03**：Element Plus 是另一条组件库 / Vue 3 迁移路线，不自动视为本规则的“以后版本”。 - **VERSION-R04**：富文本、虚拟表格、可编辑数据网格、树表增强、图表、JSON / 代码编辑、Markdown、地图不属于 Element UI 2.15.6 官方组件；未来若需要应作为扩展单独选型和版本锁定。 - **VERSION-R05**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **VERSION-R06**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **VERSION-R07**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **VERSION-R08**：本规范由三层构成：Element UI提供基础控件；公共主题定义颜色、字体、圆角；业务组件组合定义删除、校验、批量操作等场景。调整主题不等于重写组件库，也不代表所有业务规则已由官方提供。 - **VERSION-R09**：主题变量能统一配色，但无框红字删除、表单反馈联动和固定列选中等仍需要我们的组件级规则；不应在每个业务页面独立写近似样式。 - **VERSION-R10**：【版本信息】版本号和正文使用正文深灰，必要说明辅助深灰；不使用成功绿暗示版本已完成兼容验证。 - **VERSION-R11**：【来源链接】真实文档链接使用操作蓝并支持键盘焦点；静态版本名称不会因悬停变蓝。 - **VERSION-R12**：【未实现边界】未选型扩展明确标注规则草案，保持可读说明；不能用“已成功”等状态色冒充实际能力。 - **VERSION-R13**：【组件边界】版本与扩展边界是文档信息，没有勾选、按下或加载态；演示资源的交互必须由实际组件负责。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **VERSION-S01**：当前样例：运行时读取Element UI与Vue版本，与本地资源清单核对。 - [ ] **VERSION-S02**：升级验收：锁定版本、查看更高2.x版本差异、组件回归和回滚方案；不使用未锁定的最新版本。 - [ ] **VERSION-S03**：接入验收：Vue兼容、主题与图标字体、禁止混用Element Plus；扩展组件单独选型并锁定版本。 - [ ] **VERSION-S04**：共用视觉验收：仅核对本组件实际适用的颜色与组合状态；无此能力标为不适用，不给静态内容添加输入错误、半选或按下状态。 - [ ] **VERSION-S05**：共用文字验收：正文14px/400、次级操作12px/400、标题600；检查实际子元素与弹出层。输入焦点只改自身边框，按钮和链接保留键盘焦点轮廓。 ### 专题验收重点 运行版本必须与资源清单一致；升级有组件回归记录。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html
运行版本：{{ elementVersion }} · Vue {{ vueVersion }}
``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：本地vendor/element-package.json、vendor/element-ui-2.15.6.js、vendor/vue-2.6.14.js及运行时ELEMENT.version/Vue.version；更高版本兼容性未由当前演示证明。。 - [打开本专题页面](../index.html#spec-version) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`version`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 版本信息 | 版本号和正文使用正文深灰，必要说明辅助深灰；不使用成功绿暗示版本已完成兼容验证。 | | 来源链接 | 真实文档链接使用操作蓝并支持键盘焦点；静态版本名称不会因悬停变蓝。 | | 未实现边界 | 未选型扩展明确标注规则草案，保持可读说明；不能用“已成功”等状态色冒充实际能力。 | 版本与扩展边界是文档信息，没有勾选、按下或加载态；演示资源的交互必须由实际组件负责。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [会员列表 · 宿主与派生页使用固定 Element UI 2.15.6 资源](../../showcase/index.html#members) · [场景文档](../../showcase/docs/members.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 返回顶部 · `backtop` 专题 `backtop` · 容器组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`backtop`。 ### 本页用法与分类 默认用法：默认返回所属滚动容器顶部；本页在卡片内部滚动超过80px后，入口自动出现在容器右下角。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 作用范围 | 返回页面还是内部容器，由滚动对象决定。 | 当前仅返回本卡片内部顶部；接入其他页面时先明确所属容器，不能错误滚动整页。 | | 位置与阈值 | 出现位置和显示阈值属于滚动辅助配置。 | 本页超过80px后显示；距容器底部16px、距6px滚动条内侧16px。接入时为正文预留空间，并避让分页、页脚和弹层。 | | 统一尺寸 | 入口沿用公共图标按钮规格，不随滚动状态更换外观。 | 当前统一32×32px热区、4px圆角和16px向上箭头；白底、灰边框、操作蓝图标，不使用圆形小三角按钮。 | | 自动显隐 | 入口是否可见取决于当前滚动位置。 | 超过阈值后显示；回到顶部后隐藏、焦点回到滚动区。悬停和键盘反馈跟随操作产生，恢复焦点不能打断返回滚动。 | 使用边界：显示、隐藏、悬停和返回完成不是可选样式，也不需要成功绿色或加载状态。 ### 组件规则 - **BACKTOP-R01**：只定义滚动辅助组件，不属于侧边导航。滚动超过阈值后出现，到顶部隐藏。 - **BACKTOP-R02**：按钮距容器底部16px，距6px竖向滚动条内侧16px，正文预留右侧空间；不遮住末条内容、分页或关键操作。名称明确，鼠标、回车和空格均可触发。 - **BACKTOP-R03**：本页实例只在本卡片的内部滚动区展示；不会改变浏览器路由。 - **BACKTOP-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **BACKTOP-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **BACKTOP-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **BACKTOP-R07**：【可返回】入口统一为32×32px白底图标按钮，4px圆角、1px边框灰、16px操作蓝向上箭头；名称说明返回哪个滚动容器顶部，不另设圆形外观或阴影。 - **BACKTOP-R08**：【悬停与键盘】悬停可使用选中浅蓝背景，图标保留操作蓝；键盘焦点操作蓝轮廓，不套主按钮按下蓝底。 - **BACKTOP-R09**：【显示边界】未达到滚动阈值时不显示入口；平滑滚动不改变内容字色，不弹出成功绿提示。 - **BACKTOP-R10**：【组件边界】返回顶部是滚动操作，不是提交、危险删除或异步加载按钮；达到显示阈值前隐藏，不伪造加载态。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **BACKTOP-S01**：当前样例：卡片内部滚动区超过80px后显示入口，返回该容器顶部，不改变页面路由。 - [ ] **BACKTOP-S02**：接入验收：无滚动、阈值、定位、与其他浮层/分页避让、自定义内容及名称。 - [ ] **BACKTOP-S03**：当前样例：入口为原生按钮，使用回车键或空格键可返回内部滚动区顶部；返回后焦点回到滚动区。接入验收仍须复核名称、键盘触发和焦点位置，不能仅凭按钮外观判定通过。 - [ ] **BACKTOP-S04**：共用视觉验收：仅核对本组件实际适用的颜色与组合状态；无此能力标为不适用，不给静态内容添加输入错误、半选或按下状态。 - [ ] **BACKTOP-S05**：共用文字验收：正文14px/400、次级操作12px/400、标题600；检查实际子元素与弹出层。输入焦点只改自身边框，按钮和链接保留键盘焦点轮廓。 - [ ] **BACKTOP-S06**：在内部滚动低于或等于80px时隐藏、超过80px时显示入口；鼠标、回车和空格分别验证回到0px并隐藏。焦点恢复到滚动区，不能打断平滑滚动或带动页面滚动；末条内容完整可见。 ### 专题验收重点 检查内部滚动超过80px时显示32×32px方形入口；点击、回车或空格均让所属容器回到0px，入口隐藏、焦点回到滚动区，页面位置不被改变。核对滑块可拖到末尾且正文不被入口遮住。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html ``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：Element UI 2.15.6 官方组件。 - [打开本专题页面](../index.html#spec-backtop) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`backtop`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) 自定义示例 `backtop-pattern` 的实现：[feedback-patterns.js](../feedback-patterns.js)。 ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 可返回 | 入口统一为32×32px白底图标按钮，4px圆角、1px边框灰、16px操作蓝向上箭头；名称说明返回哪个滚动容器顶部，不另设圆形外观或阴影。 | | 悬停与键盘 | 悬停可使用选中浅蓝背景，图标保留操作蓝；键盘焦点操作蓝轮廓，不套主按钮按下蓝底。 | | 显示边界 | 未达到滚动阈值时不显示入口；平滑滚动不改变内容字色，不弹出成功绿提示。 | 返回顶部是滚动操作，不是提交、危险删除或异步加载按钮；达到显示阈值前隐藏，不伪造加载态。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [客服工单管理 · 处理记录 · 返回顶部](../../showcase/index.html?example=ticket-history#tickets) · [场景文档](../../showcase/docs/tickets.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 页面容器与栅格 · `layout` 专题 `layout` · 容器组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`container`、`header`、`aside`、`main`、`footer`、`row`、`col`。 ### 本页用法与分类 默认用法：先按顶栏、导航、内容及必要底栏建立页面容器，再根据主内容关系选择两列或三列栅格；窄容器按顺序改为单列。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 页面区域（结构职责） | 顶栏、侧栏、主内容与底栏表达不同区域。 | 只保留页面确实需要的区域；内容卡片不冒充整个页面外壳。 | | 栅格份数（内容布局） | 一行24份；12/12两列，8/8/8三列。 | 需要并排比较或同级概览时分栏；份数不是像素，也不规定输入框的绝对宽度。 | | 间距与对齐（几何约束） | 相邻列间隔16px，列内两侧各承担8px。 | 承接行负边距并保持内容外边缘对齐，不重复叠加外距。 | | 容器变化（环境条件） | 窄容器触发顺序换行，恢复后回到原分栏配置。 | 本例用576px阈值与400px预览检查收缩；真实业务断点继续使用原场景合同。 | 使用边界：不要把顶栏/侧栏、两列/三列、成功/错误状态列为同一级可选样式；结构示例不等于重新设计整个后台导航。 ### 组件规则 - **LAYOUT-R01**：页面容器组织顶栏、侧栏、主内容和底栏；内容栅格决定同一内容区如何分栏。分别使用Element UI 2.15.6的el-container/header/aside/main/footer与el-row/col，不能把一块内容卡片、一个输入框宽度和整页栅格当成同一层尺寸。 - **LAYOUT-R02**：页面区域按真实职责保留。顶栏放全局信息，侧栏放模块导航，主内容承载当前模块，底栏只在页面需要底部信息时保留；不为了凑齐组件而每页都添加四块区域。示例用会员管理、资金管理和运营管理说明结构，不新增业务页面或路由。 - **LAYOUT-R03**：容器方向明确：含顶栏/底栏的一层纵向排列，侧栏与内容的一层横向排列；嵌套区域继续使用容器承接。主内容设置可收缩宽度，长内容在所属区域换行或按其表格/列表规范滚动，不能让侧栏挤出页面。 - **LAYOUT-R04**：栅格一行划分24份，12/12表示两等列，8/8/8表示三等列；这些数字是份数，不是像素。一行分配合计24，列间距统一16 CSS px。内容多少、是否需要并排比较决定分栏数量，不按颜色或图形偏好选择。 - **LAYOUT-R05**：宽度变化按可用容器决定。当前结构示例在可用宽度不足576px时改为24份单列，导航移到内容上方；这个阈值是演示配置，不取代真实中控外壳已确认的断点。官方xs/sm/md/lg/xl按视口响应，本例额外用容器宽度适配内嵌预览，不把两种判定混写。 - **LAYOUT-R06**：栅格gutter=16表示相邻列内容之间的空隙，组件通过两侧各8px列内距实现；外层对齐需抵消行负边距，不能因此使内容向外溢出。本例外层保留8px承接空间，不重复叠加16px外距。 - **LAYOUT-R07**：分栏只分配内容区域，不自动改变内部输入高度、圆角、字号或色值；字段宽度引用输入框专题，组件间距引用尺寸间距专题，标签切换引用页内标签专题。默认字体与公共色值不另起一套布局配色。 - **LAYOUT-R08**：结构示例的侧栏160px与主区最小160px高度仅为缩小预览保留可读空间，不是业务外壳统一尺寸。实际顶栏、侧栏、页脚和内容留白沿用业务场景的既有合同；布局规范不能以示例参数覆盖会员或报表页面。 - **LAYOUT-R09**：窄容器保持内容原顺序，导航仍可触达，不将关键信息隐藏成无法到达的区域；两列/三列切换只改变分栏，当前模块选择保留。布局是结构，不设置成功、失败或禁用色块，内部可操作入口才有对应状态。 - **LAYOUT-R10**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **LAYOUT-R11**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **LAYOUT-R12**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **LAYOUT-S01**：当前示例：真实Container/Header/Aside/Main/Footer结构；模块按钮改变主内容说明，鼠标和键盘可操作，非真实业务跳转。 - [ ] **LAYOUT-S02**：当前栅格：两列12/12和三列8/8/8使用真实Row/Col；切换后列数量、份数及标题对应，列距16px。 - [ ] **LAYOUT-S03**：当前窄容器：400px切换或实际可用宽度不足576px时改成单列24份，导航置上；恢复宽度后恢复已选列数与模块。 - [ ] **LAYOUT-S04**：内容极值：长模块名、长说明与较大字体保持可读；行负边距没有向示例外溢出，列与主区允许收缩。 - [ ] **LAYOUT-S05**：状态：布局容器没有成功/失败皮肤；模块当前项只在真实选择后更新，键盘焦点可见且不改变栅格尺寸。 - [ ] **LAYOUT-S06**：接入验收：真实后台外壳的侧栏展开、全局导航、固定首尾、路由保持、页内滚动与短屏；当前结构示例不计为这些业务能力已经重做。 ### 专题验收重点 切换三个模块后主内容标题与说明同步；在两列/三列之间切换分别使用12/12和8/8/8，窄容器统一24份并按原顺序换行。检查16px列距、行负边距承接、主区不横向溢出；切换布局不清空模块选择，文字与按钮尺寸不变。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html ``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：Element UI官方Layout文档：https://github.com/ElemeFE/element/blob/dev/examples/docs/zh-CN/layout.md；Container文档：https://github.com/ElemeFE/element/blob/dev/examples/docs/zh-CN/container.md；本地vendor/element-ui-2.15.6.js/CSS的Container/Header/Aside/Main/Footer、Row/Col；official-form-layout.js/css。。 - [打开本专题页面](../index.html#spec-layout) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`layout`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) 自定义示例 `official-layout-pattern` 的实现：[official-form-layout.js](../official-form-layout.js)。 ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 容器与分隔 | 主要区域白底，顶部辅助区可用浅灰背景；边界用边框灰、内部线用分隔灰，说明辅助深灰。 | | 模块入口 | 普通入口正文深灰；鼠标悬停浅灰背景，实际当前模块选中浅蓝底与操作蓝文字；键盘保留操作蓝焦点。 | | 栅格与窄容器 | 两列、三列和单列使用相同白底、边框及正文，不因份数或宽度不同增加配色。 | 页面容器和栅格没有独立加载、禁用或错误状态；反馈只属于区域内实际数据与动作，不把布局占位画成业务反馈。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [运营总览 · 公共顶栏、侧栏与内容分区](../../showcase/index.html#overview) · [场景文档](../../showcase/docs/overview.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 导航菜单 · `navigation-menu` 专题 `navigation-menu` · 容器组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`menu`、`submenu`、`menu-item`、`menu-item-group`。 ### 本页用法与分类 默认用法：后台沿用深色侧栏；只有层级较少、顶部空间适合时才采用水平模块导航。当前两个实例是布局对照，不要求在同一系统重复摆放。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 用途：全局导航与页内切换 | 导航进入模块或页面；页内标签切换同一页面的内容。 | 会员列表、平台报表等模块入口用导航；同页详情分区采用页内标签，不重复制两套入口。 | | 布局：侧栏与水平 | 两种方向改变页面骨架与菜单展开位置。 | 后台默认侧栏200px，收起64px；水平菜单适用于较少顶层模块。选择由页面结构决定，不由选中或禁用状态决定。 | | 层级：父组与叶子 | 父组控制子菜单展开，叶子代表具体目的地。 | 展开父组不切换内容；选择可用叶子才切换。当前叶子保留高亮，隐藏与禁用由宿主权限策略决定。 | | 交互：本地示例与真实路由 | 当前样例只改变卡片内说明，不接入业务路由。 | 真实接入需同步地址、当前项与父组，验证深链接、后退、焦点和窄屏；不能把本页的方法测试称为业务壳验收完成。 | 使用边界：不把收起模式、禁用、当前项当成多套可随意选择的配色；不使用成功绿表示当前菜单；不展示看似可点却没有目的地的入口。 ### 组件规则 - **NAVIGATION-MENU-R01**：后台默认采用深色侧栏导航，用于切换模块或页面；页内标签用于同一页面的并列内容，不能当作全局导航替代品。默认沿用已存在的中控菜单与模块名称，不另造业务模块。 - **NAVIGATION-MENU-R02**：侧栏展开与收起使用官方菜单的折叠能力；收起后保留图标、可访问名称与子菜单入口。当前叶子项唯一，父组展开只是层级展示，不是另一个已选页面。 - **NAVIGATION-MENU-R03**：水平导航只作为层级较少且横向空间充足时的布局对照，当前样例通过点击展开子菜单。侧栏和水平菜单分别操作，不在真实业务壳里同时提供同一组重复入口。 - **NAVIGATION-MENU-R04**：菜单选择必须带来对应内容变化；本页仅切换组件内的概览、会员列表、平台报表说明，不改变浏览器路由、不发起业务请求。禁用项不可进入，不能仅改灰色却继续触发。 - **NAVIGATION-MENU-R05**：本页补充键盘适配：制表键进入可用项；方向键在同组移动；起始键/结束键定位首尾；回车或空格选择叶子或展开父组。右方向键进入侧栏子菜单，下方向键进入水平子菜单；左方向键或退出键关闭子菜单并回父项。折叠浮层离开菜单后关闭。 - **NAVIGATION-MENU-R06**：菜单文字正文14px/400；不通过加粗或改变大小来表达当前项。收起、悬停、展开、当前、禁用是交互状态，不是新的配色方案。 - **NAVIGATION-MENU-R07**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **NAVIGATION-MENU-R08**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **NAVIGATION-MENU-R09**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **NAVIGATION-MENU-R10**：【侧栏普通项】沿用后台深色侧栏：外壳深色背景、白色文字和图标；展开宽度200px、收起宽度64px。默认一级项高50px，子项高44px。窄屏样例缩至160px；业务壳继续遵循实际断点。 - **NAVIGATION-MENU-R11**：【侧栏当前与悬停】当前叶子项主题蓝底、白色文字；可用项悬停操作蓝底。当前态覆盖悬停态，不改变字号或字重，父组展开本身不等于选中。 - **NAVIGATION-MENU-R12**：【水平当前与悬停】白底正文深灰；当前顶层项操作蓝文字与2px主题蓝底线，子项当前为选中浅蓝底与操作蓝字。悬停浅灰底、操作蓝字。 - **NAVIGATION-MENU-R13**：【禁用与键盘焦点】禁用文字禁用灰、不降低整项透明度，阻止点击和键盘进入。浅底焦点为2px操作蓝轮廓；深色侧栏内使用白色轮廓以便与主题蓝当前底区分。焦点不代表内容已经切换。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **NAVIGATION-MENU-S01**：当前样例：侧栏展开/收起、一个会员管理子菜单、唯一当前项、禁用通知中心；选择切换组件内的模块说明。禁用只是组件状态示例，不代表业务通知中心已被停用。 - [ ] **NAVIGATION-MENU-S02**：当前样例：水平菜单使用点击展开子菜单；鼠标和键盘选择对应内容。不改变真实系统侧栏、浏览器地址或历史记录。 - [ ] **NAVIGATION-MENU-S03**：接入已有业务壳时：以真实路由更新当前项；直接打开深层页面时同步展开父组；权限与停用状态须由宿主数据决定，不能用本页示例替代权限控制。 - [ ] **NAVIGATION-MENU-S04**：键盘验收：制表键不落在禁用或隐藏项，方向键跳过禁用项；展开后可进入子项；收起后焦点不遗留在隐藏项。鼠标和键盘同样只触发一次选择。 - [ ] **NAVIGATION-MENU-S05**：业务采用：已有 overview 系统壳侧栏可作为导航落点；本页新增适配不等于已更新所有业务模块，业务壳的路由、键盘与窄屏能力需按实际实现独立验收。 - [ ] **NAVIGATION-MENU-S06**：视觉验收：公共色值、14px/400、当前态优先于悬停；不因折叠产生裁切、浮层遮挡或额外页面横向滚动。 ### 专题验收重点 分别操作侧栏和水平菜单：选择概览/会员列表/平台报表时内容同步改变，禁用项保持不变；侧栏收起再展开后当前项保留。另验子菜单鼠标、键盘开关和焦点恢复，深色当前项仍有清晰键盘轮廓。源码与方法检查不能代替浏览器里的浮层位置和窄屏实测。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html ``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：Element UI 2.15.6 官方 Menu / Submenu / MenuItem，结合现有中控导航壳；补充本页键盘与语义适配。。 - [打开本专题页面](../index.html#spec-navigation-menu) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`navigation-menu`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) 自定义示例 `official-navigation-menu` 的实现：[official-navigation.js](../official-navigation.js)。 ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 侧栏普通项 | 沿用后台深色侧栏：外壳深色背景、白色文字和图标；展开宽度200px、收起宽度64px。默认一级项高50px，子项高44px。窄屏样例缩至160px；业务壳继续遵循实际断点。 | | 侧栏当前与悬停 | 当前叶子项主题蓝底、白色文字；可用项悬停操作蓝底。当前态覆盖悬停态，不改变字号或字重，父组展开本身不等于选中。 | | 水平当前与悬停 | 白底正文深灰；当前顶层项操作蓝文字与2px主题蓝底线，子项当前为选中浅蓝底与操作蓝字。悬停浅灰底、操作蓝字。 | | 禁用与键盘焦点 | 禁用文字禁用灰、不降低整项透明度，阻止点击和键盘进入。浅底焦点为2px操作蓝轮廓；深色侧栏内使用白色轮廓以便与主题蓝当前底区分。焦点不代表内容已经切换。 | 导航切换与页面路由有关，成功绿、警告橙和错误红不用于当前菜单高亮；选中、展开和焦点分别表达不同含义。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [运营总览 · 左侧模块菜单与折叠](../../showcase/index.html#overview) · [场景文档](../../showcase/docs/overview.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 面包屑与返回页头 · `breadcrumb-header` 专题 `breadcrumb-header` · 容器组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`breadcrumb`、`breadcrumb-item`、`page-header`。 ### 本页用法与分类 默认用法：层级较多时展示面包屑；简单详情页使用明确的返回页头即可。选择依据是用户是否需要知道所在层级、返回哪里，不是新增一套可选皮肤。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 用途：层级定位 | 面包屑说明从父层到当前页面的关系。 | 仅父层可以返回；最后一项与页面标题对应且不可点击。没有真实目标的层级不用假链接。 | | 用途：返回与标题 | 返回页头提供一个明确返回目标和当前页面标题。 | 详情返回所属列表；路径简单时可单独使用页头。不要把 history.back 当作任何情况下都正确的返回策略。 | | 布局：窄宽与长名称 | 文字换行属于空间适配，不是新的文字样式。 | 保留完整名称和既定字号；本例可切换320px预览及长名称，父层、标题允许换行。 | | 接入：当前示例与业务状态 | 本页验证组件内目标切换；业务列表状态保持属于宿主工作。 | 本次尚未改造业务导航。接入会员详情前需要明确路由、页码、筛选、滚动和草稿恢复，避免宣称已具备未实现功能。 | 使用边界：不让当前页面名称可点击，不给分隔符加焦点，不盲退到站外或上一个无关页面，也不强制每个页面同时摆放面包屑与返回页头。 ### 组件规则 - **BREADCRUMB-HEADER-R01**：面包屑显示当前页面的层级位置，父层入口可返回相应层级；最后一项是当前页纯文本并标记当前位置，不带链接或按钮行为。 - **BREADCRUMB-HEADER-R02**：返回页头将返回动作与页面标题组合，返回目的地必须明确。会员详情返回会员列表，不能无条件调用浏览器后退而跳出当前功能。 - **BREADCRUMB-HEADER-R03**：面包屑定位层级，返回动作表达离开当前页的目标，两者不互相替代；路径简单的详情页可只保留明确的返回页头，不强制叠加两套导航。本页并列展示便于理解区别。 - **BREADCRUMB-HEADER-R04**：本页使用官方面包屑、面包屑项与页头组件；父层使用原生按钮承接示例内切换，移除无行为文字上的链接角色；为官方页头返回区域补充按钮语义、名称、制表键和回车/空格触发。 - **BREADCRUMB-HEADER-R05**：标题与当前层必须与实际内容同步。返回列表后可再次进入不同会员详情，示例不会改变浏览器路由或执行查询。真实页面的查询条件、滚动和草稿保持由宿主定义。 - **BREADCRUMB-HEADER-R06**：长名称完整可读、窄宽自然换行；不增加小字号以挤入一行。当前页、分隔符、静态说明均不加入制表键顺序。 - **BREADCRUMB-HEADER-R07**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **BREADCRUMB-HEADER-R08**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **BREADCRUMB-HEADER-R09**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **BREADCRUMB-HEADER-R10**：【父层入口】面包屑父层正文14px/400、操作蓝；原生按钮或真实链接可返回对应父层。悬停下划线，键盘焦点2px操作蓝轮廓。 - **BREADCRUMB-HEADER-R11**：【当前层与分隔符】当前层正文深灰14px/400、纯文本，不伪装链接；标记当前位置。斜杠用边框灰，只做分隔，不成为可聚焦项。 - **BREADCRUMB-HEADER-R12**：【页头标题与返回】页面标题正文深灰14px/600/21px；返回动作操作蓝12px/400/18px，图标16px，热区至少24px高。说明正文14px，不把说明做得比标题更醒目。 - **BREADCRUMB-HEADER-R13**：【长名称与窄宽】父层与当前层允许自然换行，长英文或连续字符可断行；不缩小字号、不裁掉当前页名称，不用固定高遮挡第二行。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **BREADCRUMB-HEADER-S01**：当前样例：概览 → 会员列表 → 会员详情的组件内层级；父层按钮返回相应内容，当前层纯文本。会员详情账号在列表进入时更新。 - [ ] **BREADCRUMB-HEADER-S02**：当前样例：详情页头返回会员列表、列表页头返回概览；使用明确目标，不依赖浏览器历史。组件示例不修改真实业务数据或路由。 - [ ] **BREADCRUMB-HEADER-S03**：当前样例：320px窄宽与长名称可分别切换，检查面包屑和页头完整换行；保持14px正文、14px/600标题及12px次级动作。 - [ ] **BREADCRUMB-HEADER-S04**：键盘验收：父层原生按钮与页头返回区域可用制表键到达，回车/空格各触发一次；当前层无操作角色；切换后焦点回到对应标题。 - [ ] **BREADCRUMB-HEADER-S05**：业务采用：现有业务尚未采用这组官方面包屑/页头组件；members 与 member-detail 仅为后续接入候选，不以通用业务首页链接冒充已落地场景。 - [ ] **BREADCRUMB-HEADER-S06**：接入真实详情页时，明确返回列表的筛选、页码、滚动与未保存内容策略；不能因示例返回正常就宣称真实业务状态已保留。 ### 专题验收重点 点击概览、会员列表等父层后内容与最后一项同步；在会员详情使用页头返回会员列表，再进入另一账号，标题随账号改变。键盘回车/空格触发返回，焦点回到目标标题；当前项无链接角色。切换320px窄宽与长名称后核对换行。当前为编译和方法检查，浏览器实际焦点、行高与视觉还需实测。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html ``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：Element UI 2.15.6 官方 Breadcrumb / BreadcrumbItem / PageHeader；本项目补充明确返回目标和键盘语义适配。。 - [打开本专题页面](../index.html#spec-breadcrumb-header) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`breadcrumb-header`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) 自定义示例 `official-breadcrumb-header` 的实现：[official-navigation.js](../official-navigation.js)。 ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 父层入口 | 面包屑父层正文14px/400、操作蓝；原生按钮或真实链接可返回对应父层。悬停下划线，键盘焦点2px操作蓝轮廓。 | | 当前层与分隔符 | 当前层正文深灰14px/400、纯文本，不伪装链接；标记当前位置。斜杠用边框灰，只做分隔，不成为可聚焦项。 | | 页头标题与返回 | 页面标题正文深灰14px/600/21px；返回动作操作蓝12px/400/18px，图标16px，热区至少24px高。说明正文14px，不把说明做得比标题更醒目。 | | 长名称与窄宽 | 父层与当前层允许自然换行，长英文或连续字符可断行；不缩小字号、不裁掉当前页名称，不用固定高遮挡第二行。 | 面包屑与页头不具有勾选、半选或成功状态；返回本身不使用危险红，当前页也不套选中按钮蓝底。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 **当前业务：暂未采用。** 当前业务壳使用左侧菜单与工作页签，尚未采用面包屑或独立返回页头；本页提供会员列表/详情的本地结构示例。只有页面存在稳定父级或明确返回目标时再接入，不能增加无意义层级。 本页保留组件示例和接入规则。已核实的参考截图尚未提供合适业务落点，不链接无关首页，不为覆盖组件而新增业务字段。 **适用条件**：层级较多时展示面包屑；简单详情页使用明确的返回页头即可。选择依据是用户是否需要知道所在层级、返回哪里，不是新增一套可选皮肤。 **采用边界**：不让当前页面名称可点击，不给分隔符加焦点，不盲退到站外或上一个无关页面，也不强制每个页面同时摆放面包屑与返回页头。 [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 富文本编辑与纯文本回退 · `rich-text` 专题 `rich-text` · 输入组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 本专题为基础规则、同一组件的补充场景或组合模式，不作为独立的 Element UI 官方组件声明。 本页模板直接使用的 Element UI 标签：`el-input`。 ### 本页用法与分类 默认用法：当前仅采用可输入的纯文本回退；富文本编辑器待选型，工具表和状态表是未来接入规范。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 采用范围 | 纯文本输入是当前能力，富文本格式编辑是待接入能力。 | 只需文字时使用当前文本域；确需格式、链接或图片时先完成编辑器选型与验收，不能把表格说明当可用工具。 | | 功能配置 | 段落、标题、加粗、列表、链接、图片等是编辑功能，不是几种视觉皮肤。 | 未来按实际内容需求启用预设工具，不提供任意字体和配色；当前没有这些可操作工具。 | | 当前输入限制 | 当前文本域四行、长度上限和计数按本页已有说明执行。 | 输入按纯文本处理，不解析HTML，也不执行持久化保存；需要改变限制时同步约定计数口径。 | | 自动状态与草案 | 当前聚焦沿用输入规则；富文本错误、保存中、图片失败和格式选中为拟定状态。 | 未来接入后由实际校验、请求和选区触发；不得把错误或保存中作为用户自由选样式。 | 使用边界：不要把静态中文工具清单写成已实现功能，也不要把纯文本回退和完整富文本编辑器当成可以立即切换的两套样式。 ### 组件规则 - **RICH-TEXT-R01**：【适用边界】Element UI 2.15.6 没有官方富文本编辑器。本专题先定义扩展合同，编辑器仍待选型和版本锁定；下方工具与状态表均为静态规范说明，唯一可输入示例是原生 Element 文本域的纯文本回退，不具有加粗、链接插入、图片上传或富文本保存能力。 - **RICH-TEXT-R02**：【工具与视觉】工具名称使用中文，按需启用段落、标题、加粗、列表、链接、图片、撤销、重做和清除格式；默认不提供任意字体、字号和颜色选择。界面复用统一系统中文字体（macOS优先苹方，Windows通常微软雅黑，兼容回退不作为任选样式）、14px/400 正文、12px/400 次级操作及现有色值；内容样式使用受控段落/标题规则，新增表现须集中定义，不能任意粘贴出其他字体和颜色。 - **RICH-TEXT-R03**：【输入与粘贴】纯文本回退将输入作为纯文本值处理，不解析HTML；当前演示不执行持久化保存。未来富文本粘贴须清理来源字体、字号、颜色和不支持的结构，保留允许的段落、列表、链接与图片。空白、空段落或仅有空标签视为空内容；图片能否独立满足必填由字段明确约定。统计口径、长度上限、粘贴超限处理与服务端一致，不静默丢失内容；撤销/重做覆盖编辑和格式变更，不能把已提交数据当作未保存草稿撤销。 - **RICH-TEXT-R04**：【链接与图片】链接插入需显示链接文字和目标地址，验证允许的协议及地址格式，拒绝脚本协议；非法地址就近给出红字错误，保留草稿。图片上传规则复用上传组件的格式、大小与数量限制，提供上传中、失败、重试、替换和移除状态；失败只标记对应图片并保留正文，不伪报成功，上传未完成时按明确规则阻止发布。 - **RICH-TEXT-R05**：【状态与反馈】默认白底、正文深灰、直角、边框灰；聚焦只变原边框为主题蓝，不增加外圈。错误边框、短提示和图标同步错误红，纠正后共同恢复。只读保留正文和复制能力，工具不可修改内容；禁用使用浅灰背景和禁用灰，不接收输入、上传或格式操作。加载与保存结果需明确反馈，不以变色代替状态文字。 - **RICH-TEXT-R06**：【输出与交付】未来富文本必须声明保存格式、允许的标签/属性/样式和输出清理策略；客户端与服务端均过滤不允许的脚本、事件属性和危险链接，展示端不直接渲染未经清理的 HTML。预览与最终展示使用同一渲染合同，草稿切换、取消、保存、失败重试及撤销边界需验收。编辑器选型前不得把这些拟定交互标成已实现。 - **RICH-TEXT-R07**：纯文本回退的宽度沿用输入框专题，填满所在内容列；内容在列内换行，字数计数预留空间。未来富文本工具栏按容器换行，不能横向撑开页面。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **RICH-TEXT-S01**：当前回退：中文、换行、表情和长文本输入；计数与上限一致；明确不解析 HTML、不模拟富文本成功。 - [ ] **RICH-TEXT-S02**：拟定工具：全部中文名称；仅预设字体和颜色；鼠标与键盘可达，状态与选区变化明确。 - [ ] **RICH-TEXT-S03**：拟定粘贴与空内容：外来文档/网页粘贴、空白、空段落、超限；清理后内容无静默丢失，撤销可恢复当前草稿编辑。 - [ ] **RICH-TEXT-S04**：拟定链接与素材：非法协议、空链接、图片超限、上传中/失败/重试；正文与草稿保留，结果反馈真实。 - [ ] **RICH-TEXT-S05**：拟定状态：默认、聚焦、错误、纠正、只读、禁用、保存中与失败；边框/提示/图标协同，禁用阻断全部编辑入口。 - [ ] **RICH-TEXT-S06**：拟定输出合同：保存格式、标签/属性/样式白名单、服务端清理、预览一致性；切换与取消不误提交，验收后才标记扩展能力已实现。 ### 专题验收重点 当前只验证中文静态说明与原生文本域输入、计数、直角和焦点样式。富文本编辑、粘贴清理、链接插入、图片上传、撤销、预览和输出清理须在编辑器选型后验收，不得提前记为通过。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html

规则草案：富文本编辑器待选型。下面的工具和状态是静态说明；底部文本域可输入纯文本，不会执行富文本操作。

中文工具 拟定用途 使用边界
段落、标题、加粗 建立内容层级 只允许公共规范预设样式，不开放任意字体、字号和颜色
有序列表、无序列表 表达步骤或并列内容 粘贴后归一化缩进与行距
插入链接 关联文字与目标地址 校验地址、协议与显示文字；错误保留草稿
插入图片 使用合规尺寸的正文素材 复用上传中、失败、重试、替换与移除规范
撤销、重做、清除格式 恢复编辑或移除外来格式 仅作用于当前草稿；不撤回已提交数据

状态说明（静态）

状态 界面说明 拟定行为
空内容 字段标签始终可见，占位提示为禁用灰 必填校验排除空白和空标签，不仅判断字符串长度
内容错误 请填写内容或修正链接地址 边框与短提示同时变红，纠正后共同恢复
图片上传失败 图片上传失败，请重试 仅标记失败图片，正文保留；不能出现上传成功的假状态
只读 正文深灰、白底 可以阅读和复制，不能编辑或上传
禁用 浅灰背景、禁用灰 阻止输入及工具操作，不触发新校验

纯文本回退（可输入）

这里只演示普通多行文本输入，最多 300 个 UTF-16 代码单元；不解析 HTML，也不支持富文本工具。

``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：2026-09-15参考运营后台C《首存活动》https://wt37gq.axshare.com/#g=1&id=i50z9y&p=%E9%A6%96%E5%AD%98%E6%B4%BB%E5%8A%A8 ：页面前段下方截图显示WEB/H5内容详情与富文本工具栏。位图只能证明工具栏外观，不能证明实际编辑或保存；扩展边界以version专题为准。。 - [打开本专题页面](../index.html#spec-rich-text) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`rich-text`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 默认 / 聚焦 | 白底、正文深灰、边框灰、直角；聚焦仅现有边框主题蓝，不增加外圈。 | | 错误 / 纠正（拟定） | 边框、错误短提示和图标共同使用错误红，纠正后共同恢复。 | | 只读 / 禁用（拟定） | 只读保留白底深正文和复制；禁用使用浅灰背景、禁用灰，阻止全部编辑操作。 | | 工具 / 选中（拟定） | 普通工具使用正文或操作蓝，选中工具复用主题蓝与选中浅蓝，不新增一套编辑器配色。 | 工具与富文本状态表为规则草案；只有纯文本回退演示可输入。颜色和字体复用公共规范，选型前不声明富文本交互已实现。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [活动管理 · 编辑活动 · 纯文本内容](../../showcase/index.html?example=rich-text#campaigns) · [场景文档](../../showcase/docs/campaigns.md)；落地范围：只覆盖纯文本回退，没有富文本格式编辑能力。 - [广告管理 · 新增/编辑广告 · 纯文本内容](../../showcase/index.html?example=advert-editor#adverts) · [场景文档](../../showcase/docs/adverts.md)；落地范围：只覆盖纯文本回退，没有富文本工具栏。 [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) --- ## 表单布局与整组校验 · `form` 专题 `form` · 输入组件 · Element UI 2.15.6 ### 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`form`、`form-item`。 ### 本页用法与分类 默认用法：多字段填写默认使用一个表单容器；统一标签列、字段prop和整组保存校验。简单短表单连续排列，确有内容分组时才加分组标题。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 容器与字段（组合关系） | 表单管理model、规则与提交，表单项管理单个字段标签和错误。 | 本例使用真实Form/FormItem；输入错误细节转到输入校验专题，不另造第二份规则。 | | 标签与内容列（布局） | 同组标签对齐，输入填满内容列。 | 本例标签80px、内容最多400px，窄容器标签置顶；实际业务的已确认标签列继续沿用。 | | 校验时机（流程） | 失焦/变更检查单项，保存检查整组。 | 错误由真实规则产生；初始空值不直接报错，整组失败定位首错。 | | 保存与重置（动作） | 保存通过后才采纳字段，重置恢复初始化值。 | 本例仅保留本页副本；正式请求和异步初始快照需按所在页面接入。 | 使用边界：表单分组、输入宽度、字段错误和提交结果不是四套可选样式；不要把本地校验通过说成后台保存成功。 ### 组件规则 - **FORM-R01**：表单将字段、标签、规则和提交动作组织成一个完整填写单元。使用Element UI 2.15.6的el-form与el-form-item；一个字段一个稳定prop，与model、校验规则和错误位置对应。单字段视觉、错误颜色和输入宽度分别引用输入框与输入校验专题，不重复维护另一套颜色或尺寸。 - **FORM-R02**：必填标记统一放在字段名称前：使用错误红星号，与文字间距4px；只显示一次，不放在输入框后。星号对辅助技术隐藏，控件按真实规则设置aria-required；复选组合只表达整组至少选一项，不把组内每项标成必填。 - **FORM-R03**：默认采用单列左对齐标签。相同表单组使用同一标签列宽，按最长标签统一设置；本例沿用会员表单80px标签列、最大400px内容列。标签列的8px右内距计入80px，不额外再加一条间距。实际容器不足480px时标签放上方，内容列最多占满容器且不超过400px。 - **FORM-R04**：标签始终可见，必填星号与aria-required一致。每个控件有唯一id并关联标签；就近说明和错误通过aria-describedby关联。首屏空表单不自动满屏报错；本例账号失焦检查必填和4–11位英文字母或数字；重置后尚未编辑的空账号不会仅因程序聚焦后失焦再次报错。商户改变时检查必选。示例限制不替代业务服务端合同。 - **FORM-R05**：保存时调用表单整组validate，全部通过后才生成本页保存结果；存在错误时逐字段显示文字，将焦点移到第一个错误字段并让它进入可见区域。一次提交只定位首错，不把每个错误轮流弹窗；改正后清除对应字段错误，其他未纠正错误保留。 - **FORM-R06**：重置调用resetFields，恢复该表单初始化值并清除校验、反馈与本地保存结果；本例初始值为空。重置后未编辑的空账号失焦不报错；真实输入后恢复失焦校验，提交始终检查全部必填项，已有错误继续随纠正更新。重置不等于取消关闭，也不等于恢复服务器最新值。后端数据异步到达的编辑表单应先建立明确初始快照，不能盲用首次挂载的空值。 - **FORM-R07**：保存和重置职责分开。表单通过后本例只记录内存中的示例副本，操作区显示“保存成功”，保存范围在交付文档中说明；不创建会员、不请求后台、不宣称跨页保存。正式接入需防重复提交、检查真实响应、保留失败草稿，并按服务端字段名映射错误。 - **FORM-R08**：分组仅用于真实相关字段，组内字段纵向间距16px、组间24px；说明和错误在所属内容列内换行，分组标题14px/600、正文14px/400。分组不意味着新增业务步骤；简单短表单可直接连续排列，不能给现有新增会员页强加本例分组。 - **FORM-R09**：按回车提交仅在宿主明确允许时开启，本例表单原生提交统一走同一个整组校验方法；中文输入法组合阶段按回车不另开旁路提交。文本域回车保留换行。长表单由所属弹窗或页面滚动，不在每个字段外围再套滚动条。 - **FORM-R10**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **FORM-R11**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **FORM-R12**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **FORM-R13**：表单与弹窗的主要操作区统一右侧对齐，次要动作在左、主动作在右，按钮间距10px。常规文案使用“确认、取消、保存、删除、重置”等两字动作；取消不保存并退出，重置恢复初始值，两者不能互相替换。涉及特殊业务时以准确表达为先。 - **FORM-R14**：填写区只保留影响操作的格式、限制、必填或错误说明；不逐字段重复“本地演示、不代表正式数据”等提示。原型数据保存范围、接口与未接入能力集中记录在规范文档，不写进业务操作文案。 - **FORM-R15**：必填和错误语义必须落到实际控件：标签与错误提示关联稳定ID；组合选择的必填属于整组，不能让每个复选项、筛选关键词或上传按钮都变成必填。切换状态后同步更新，保留明确选填的字段。 ### 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **FORM-S01**：当前示例包含会员账号、商户、申请信息三个字段，分为“基本信息”和“补充说明”两组；账号与商户必填，申请信息选填。核对独立标签、必填标记、可访问名称和就近说明一致。 - [ ] **FORM-S02**：当前示例：初始空表单不报错；账号失焦报必填或格式错误；商户清空后显示必选提示。 - [ ] **FORM-S03**：当前示例：整组提交失败后聚焦第一处错误；修正第一处不清空另一处；再次提交定位剩余错误。 - [ ] **FORM-S04**：当前示例：有效内容仅保存为本页副本，结果文案真实；修改字段撤去旧成功状态，刷新不保留。 - [ ] **FORM-S05**：当前示例：重置恢复初始空值，移除全部错误和保存结果，焦点回账号；未编辑就离开并返回时不重新制造空值错误，真实输入后失焦和整组提交仍校验；不触发新增业务记录。 - [ ] **FORM-S06**：布局：标签列80px含8px右内距，内容列最大400px；容器小于480px标签置顶，正文14px/400不缩小。 - [ ] **FORM-S07**：接入验收：异步初始数据、跨字段和服务端校验、隐藏字段是否参与提交、重复提交、失败草稿、取消离开及返回焦点；未接入接口的能力不得写成本例已完成。 - [ ] **FORM-S08**：核对必填星号在字段名前、间距4px且无重复；非必填字段无星号。错误短提示在对应内容列下方，与输入框左边界对齐；标签、必填和错误语义与真实字段规则一致。 - [ ] **FORM-S09**：操作区右侧对齐，重置在左、保存在右；常规按钮为两字动作。普通选择字段下不附加原型免责声明，错误时才出现有效错误说明。 ### 专题验收重点 空表单保存应同时提示账号和商户错误并聚焦账号；只修正账号后再次保存应聚焦商户；账号失焦与选择变更即时检查，非法账号不成功；全部有效后显示本地副本；修改后撤去旧成功反馈，重置恢复初始值并清除错误；未编辑就离开并返回时保持无错，真实输入后清空再失焦或直接保存仍须报必填。缩窄容器检查标签置顶、400px内容列上限、长错误换行和焦点可见。 ### 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html ``` ### 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ### 来源与关联 - 来源线索：Element UI官方Form文档：https://github.com/ElemeFE/element/blob/dev/examples/docs/zh-CN/form.md；本地vendor/element-ui-2.15.6.js的Form/FormItem、validate、resetFields；official-form-layout.js/css。本项目既有账号表单仅作为字段与布局参照，不改其业务合同。。 - [打开本专题页面](../index.html#spec-form) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`form`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) 自定义示例 `official-form-pattern` 的实现：[official-form-layout.js](../official-form-layout.js)。 ### 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 标签与有效内容 | 标签、输入值与正文使用正文深灰；分组标题同色600字重，必要说明辅助深灰。 | | 聚焦与单项错误 | 输入焦点和错误按输入框/输入校验专题；整组提交失败不把全部正常字段染红。 | | 保存与失败反馈 | 主保存按钮沿用按钮状态；字段失败显示对应红色短提示，本地保存通过只更新明确结果文字，不将全部表单染绿。 | | 重置 | 重置使用普通按钮；执行后恢复初始字段与原有颜色，不以危险红表示正常恢复。 | 表单是字段与流程的组合，没有独立的选中底或加载皮肤；状态分配到真实字段、按钮和反馈。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ### 业务落地场景 - [新增账号 · 新增会员 · 整组校验](../../showcase/index.html?example=member-form#create-account) · [场景文档](../../showcase/docs/create-account.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md) ---