--- id: "contract" title: "组件交付与验收合同" category: "可用性" document_type: "component-specification" spec_status: "local-current-draft" element_ui: "2.15.6" vue: "2.6.14" page: "../index.html#spec-contract" source_data: "../component-data.json" official_components: [] template_components: [] scenario_count: 14 verification: "scenario-checklist-not-full-test-pass" --- # 组件交付与验收合同 专题 `contract` · 可用性 · Element UI 2.15.6 ## 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 本专题为基础规则、同一组件的补充场景或组合模式，不作为独立的 Element UI 官方组件声明。 ## 通用基线 - 组件库：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`；保留点击热区。 - 本规范库的深色目录、蓝色展示区属于文档排版，不是业务组件颜色或业务导航规范。 ## 本页用法与分类 默认用法：先写清组件用途、默认用法与允许变化的条件，再按六项审核流程逐页验收并同步文档。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 可配置内容 | 用途、功能配置、外观、尺寸 | 分开列出默认值、允许变化和适用条件，不能把不同维度合计为几种样式。 | | 自动变化 | 交互、数据边界、反馈结果 | 记录触发、退出和恢复；不是设计人员任意选择的外观。 | | 交付范围 | 规则、静态示意、运行样例、业务接入 | 逐项标明已提供和待接入能力；组件库支持不等于本后台已采用。 | | 验收结果 | 通过、不适用、未测、待修复 | 根据实际证据登记，与组件样式或演示切换状态无关。 | 使用边界：分类清楚、文档一致和真实交互通过需要分别核对，不能互相代替。 ## 组件规则 - **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)