# PC 常用组件补齐批次（Element UI 左侧目录对照） 本批次补齐常用的后台基础、表单、数据、提示、导航和叠加层组件。实现以零运行时依赖为边界：原生日期/时间控件保留宿主能力，数据请求、权限、国际化和完整业务流程由接入方负责。 ### 布局 Layout - 用途：搭建后台页面的侧边栏、页头、内容区与页脚，并支持折叠和响应式排列。 - Anatomy：根节点 `kole-layout`，包含主体、状态/操作区域，交互控件保持原生语义。 - 变体：default、primary、compact；具体组件按自身属性展示方向、尺寸、状态或位置。 - 状态：default / hover / focus / disabled；含弹层或异步内容的组件另有 open、loading、done、error 状态。 - 无障碍：提供可见焦点、键盘可达、label/role/aria 属性；对话框和抽屉关联标题，进度/状态使用可读文本。 - 实现边界：搭建后台页面的侧边栏、页头、内容区与页脚，并支持折叠和响应式排列。 未声明的高级数据请求、服务端校验和第三方插件能力不由组件自行推断。 ### 布局容器 Container - 用途：组合页面级 Header、Sider、Main 与 Footer，统一内容宽度和间距。 - Anatomy：根节点 `kole-container`，包含主体、状态/操作区域，交互控件保持原生语义。 - 变体：default、primary、compact；具体组件按自身属性展示方向、尺寸、状态或位置。 - 状态：default / hover / focus / disabled；含弹层或异步内容的组件另有 open、loading、done、error 状态。 - 无障碍：提供可见焦点、键盘可达、label/role/aria 属性；对话框和抽屉关联标题，进度/状态使用可读文本。 - 实现边界：组合页面级 Header、Sider、Main 与 Footer，统一内容宽度和间距。 未声明的高级数据请求、服务端校验和第三方插件能力不由组件自行推断。 ### 排版 Typography - 用途：统一标题、正文、辅助文字、数字和省略文本的层级与阅读体验。 - Anatomy：根节点 `kole-typography`，包含主体、状态/操作区域，交互控件保持原生语义。 - 变体：default、primary、compact；具体组件按自身属性展示方向、尺寸、状态或位置。 - 状态：default / hover / focus / disabled；含弹层或异步内容的组件另有 open、loading、done、error 状态。 - 无障碍：提供可见焦点、键盘可达、label/role/aria 属性；对话框和抽屉关联标题，进度/状态使用可读文本。 - 实现边界：统一标题、正文、辅助文字、数字和省略文本的层级与阅读体验。 未声明的高级数据请求、服务端校验和第三方插件能力不由组件自行推断。 ### 图标 Icon - 用途：为菜单、状态、操作和提示提供一致的图形语义，可使用文本或 SVG 图标名。 - Anatomy：根节点 `kole-icon`，包含主体、状态/操作区域，交互控件保持原生语义。 - 变体：default、primary、compact；具体组件按自身属性展示方向、尺寸、状态或位置。 - 状态：default / hover / focus / disabled；含弹层或异步内容的组件另有 open、loading、done、error 状态。 - 无障碍：提供可见焦点、键盘可达、label/role/aria 属性；对话框和抽屉关联标题，进度/状态使用可读文本。 - 实现边界：为菜单、状态、操作和提示提供一致的图形语义，可使用文本或 SVG 图标名。 未声明的高级数据请求、服务端校验和第三方插件能力不由组件自行推断。 ### 文字链接 Link - 用途：跳转详情、下载文件或打开外部地址，提供主次和禁用状态。 - Anatomy：根节点 `kole-link`，包含主体、状态/操作区域，交互控件保持原生语义。 - 变体：default、primary、compact；具体组件按自身属性展示方向、尺寸、状态或位置。 - 状态：default / hover / focus / disabled；含弹层或异步内容的组件另有 open、loading、done、error 状态。 - 无障碍：提供可见焦点、键盘可达、label/role/aria 属性；对话框和抽屉关联标题，进度/状态使用可读文本。 - 实现边界：跳转详情、下载文件或打开外部地址，提供主次和禁用状态。 未声明的高级数据请求、服务端校验和第三方插件能力不由组件自行推断。 ### 单选框 Radio - 用途：在互斥选项中选择一个结果，例如审批结论、显示模式或筛选维度。 - Anatomy：根节点 `kole-radio`，包含主体、状态/操作区域，交互控件保持原生语义。 - 变体：default、primary、compact；具体组件按自身属性展示方向、尺寸、状态或位置。 - 状态：default / hover / focus / disabled；含弹层或异步内容的组件另有 open、loading、done、error 状态。 - 无障碍：提供可见焦点、键盘可达、label/role/aria 属性；对话框和抽屉关联标题，进度/状态使用可读文本。 - 实现边界：在互斥选项中选择一个结果，例如审批结论、显示模式或筛选维度。 未声明的高级数据请求、服务端校验和第三方插件能力不由组件自行推断。 ### 复选框 Checkbox - 用途：选择多个权限、筛选条件或数据记录，支持全选和半选状态。 - Anatomy：根节点 `kole-checkbox`，包含主体、状态/操作区域，交互控件保持原生语义。 - 变体：default、primary、compact；具体组件按自身属性展示方向、尺寸、状态或位置。 - 状态：default / hover / focus / disabled；含弹层或异步内容的组件另有 open、loading、done、error 状态。 - 无障碍：提供可见焦点、键盘可达、label/role/aria 属性；对话框和抽屉关联标题，进度/状态使用可读文本。 - 实现边界：选择多个权限、筛选条件或数据记录，支持全选和半选状态。 未声明的高级数据请求、服务端校验和第三方插件能力不由组件自行推断。 ### 计数器 InputNumber - 用途：输入数量、金额或排序权重，支持最小值、最大值、步长和精度。 - Anatomy：根节点 `kole-inputnumber`，包含主体、状态/操作区域，交互控件保持原生语义。 - 变体：default、primary、compact；具体组件按自身属性展示方向、尺寸、状态或位置。 - 状态：default / hover / focus / disabled；含弹层或异步内容的组件另有 open、loading、done、error 状态。 - 无障碍：提供可见焦点、键盘可达、label/role/aria 属性；对话框和抽屉关联标题，进度/状态使用可读文本。 - 实现边界：输入数量、金额或排序权重，支持最小值、最大值、步长和精度。 未声明的高级数据请求、服务端校验和第三方插件能力不由组件自行推断。 ### 开关 Switch - 用途：即时启停配置项或业务状态，例如启用通知、公开数据和自动同步。 - Anatomy：根节点 `kole-switch`，包含主体、状态/操作区域，交互控件保持原生语义。 - 变体：default、primary、compact；具体组件按自身属性展示方向、尺寸、状态或位置。 - 状态：default / hover / focus / disabled；含弹层或异步内容的组件另有 open、loading、done、error 状态。 - 无障碍：提供可见焦点、键盘可达、label/role/aria 属性；对话框和抽屉关联标题，进度/状态使用可读文本。 - 实现边界：即时启停配置项或业务状态，例如启用通知、公开数据和自动同步。 未声明的高级数据请求、服务端校验和第三方插件能力不由组件自行推断。 ### 时间选择器 TimePicker - 用途：设置营业时段、任务执行时间或提醒时间，采用无运行时依赖的原生时间控件。 - Anatomy：根节点 `kole-timepicker`，包含主体、状态/操作区域，交互控件保持原生语义。 - 变体：default、primary、compact；具体组件按自身属性展示方向、尺寸、状态或位置。 - 状态：default / hover / focus / disabled；含弹层或异步内容的组件另有 open、loading、done、error 状态。 - 无障碍：提供可见焦点、键盘可达、label/role/aria 属性；对话框和抽屉关联标题，进度/状态使用可读文本。 - 实现边界：设置营业时段、任务执行时间或提醒时间，采用无运行时依赖的原生时间控件。 未声明的高级数据请求、服务端校验和第三方插件能力不由组件自行推断。 ### 日期选择器 DatePicker - 用途：选择单日或起止日期，适用于查询条件、有效期和排期设置。 - Anatomy：根节点 `kole-datepicker`，包含主体、状态/操作区域，交互控件保持原生语义。 - 变体：default、primary、compact；具体组件按自身属性展示方向、尺寸、状态或位置。 - 状态：default / hover / focus / disabled；含弹层或异步内容的组件另有 open、loading、done、error 状态。 - 无障碍：提供可见焦点、键盘可达、label/role/aria 属性；对话框和抽屉关联标题，进度/状态使用可读文本。 - 实现边界：选择单日或起止日期，适用于查询条件、有效期和排期设置。 未声明的高级数据请求、服务端校验和第三方插件能力不由组件自行推断。 ### 日期时间选择器 DateTimePicker - 用途：设置精确到时分的预约、生效或发布时刻。 - Anatomy：根节点 `kole-datetimepicker`，包含主体、状态/操作区域，交互控件保持原生语义。 - 变体：default、primary、compact；具体组件按自身属性展示方向、尺寸、状态或位置。 - 状态：default / hover / focus / disabled；含弹层或异步内容的组件另有 open、loading、done、error 状态。 - 无障碍：提供可见焦点、键盘可达、label/role/aria 属性；对话框和抽屉关联标题，进度/状态使用可读文本。 - 实现边界：设置精确到时分的预约、生效或发布时刻。 未声明的高级数据请求、服务端校验和第三方插件能力不由组件自行推断。 ### 表单 Form - 用途：统一字段布局、必填标识、校验错误和提交/重置流程。 - Anatomy：根节点 `kole-form`，包含主体、状态/操作区域，交互控件保持原生语义。 - 变体：default、primary、compact；具体组件按自身属性展示方向、尺寸、状态或位置。 - 状态：default / hover / focus / disabled；含弹层或异步内容的组件另有 open、loading、done、error 状态。 - 无障碍：提供可见焦点、键盘可达、label/role/aria 属性；对话框和抽屉关联标题，进度/状态使用可读文本。 - 实现边界：统一字段布局、必填标识、校验错误和提交/重置流程。 未声明的高级数据请求、服务端校验和第三方插件能力不由组件自行推断。 ### 分页 Pagination - 用途：在表格或卡片列表底部浏览大数据集，支持页码、总数、每页条数和跳转。 - Anatomy：根节点 `kole-pagination`，包含主体、状态/操作区域，交互控件保持原生语义。 - 变体：default、primary、compact；具体组件按自身属性展示方向、尺寸、状态或位置。 - 状态：default / hover / focus / disabled；含弹层或异步内容的组件另有 open、loading、done、error 状态。 - 无障碍：提供可见焦点、键盘可达、label/role/aria 属性；对话框和抽屉关联标题，进度/状态使用可读文本。 - 实现边界：在表格或卡片列表底部浏览大数据集，支持页码、总数、每页条数和跳转。 未声明的高级数据请求、服务端校验和第三方插件能力不由组件自行推断。 ### 标记 Badge - 用途：显示未读数、待办数、小红点或紧贴对象的状态标记。 - Anatomy：根节点 `kole-badge`，包含主体、状态/操作区域，交互控件保持原生语义。 - 变体：default、primary、compact；具体组件按自身属性展示方向、尺寸、状态或位置。 - 状态：default / hover / focus / disabled；含弹层或异步内容的组件另有 open、loading、done、error 状态。 - 无障碍：提供可见焦点、键盘可达、label/role/aria 属性；对话框和抽屉关联标题，进度/状态使用可读文本。 - 实现边界：显示未读数、待办数、小红点或紧贴对象的状态标记。 未声明的高级数据请求、服务端校验和第三方插件能力不由组件自行推断。 ### 头像 Avatar - 用途：展示成员、审批人或操作者，支持文字、图片、尺寸和在线状态点。 - Anatomy：根节点 `kole-avatar`，包含主体、状态/操作区域，交互控件保持原生语义。 - 变体：default、primary、compact；具体组件按自身属性展示方向、尺寸、状态或位置。 - 状态：default / hover / focus / disabled；含弹层或异步内容的组件另有 open、loading、done、error 状态。 - 无障碍：提供可见焦点、键盘可达、label/role/aria 属性；对话框和抽屉关联标题，进度/状态使用可读文本。 - 实现边界：展示成员、审批人或操作者，支持文字、图片、尺寸和在线状态点。 未声明的高级数据请求、服务端校验和第三方插件能力不由组件自行推断。 ### 描述列表 Descriptions - 用途：以只读方式展示订单、客户、员工等对象的结构化详情，支持 1–4 列。 - Anatomy：根节点 `kole-descriptions`，包含主体、状态/操作区域，交互控件保持原生语义。 - 变体：default、primary、compact；具体组件按自身属性展示方向、尺寸、状态或位置。 - 状态：default / hover / focus / disabled；含弹层或异步内容的组件另有 open、loading、done、error 状态。 - 无障碍：提供可见焦点、键盘可达、label/role/aria 属性；对话框和抽屉关联标题，进度/状态使用可读文本。 - 实现边界：以只读方式展示订单、客户、员工等对象的结构化详情，支持 1–4 列。 未声明的高级数据请求、服务端校验和第三方插件能力不由组件自行推断。 ### 警告 Alert - 用途：在页面内持续展示风险、限制、成功结果或操作说明。 - Anatomy：根节点 `kole-alert`，包含主体、状态/操作区域，交互控件保持原生语义。 - 变体：default、primary、compact；具体组件按自身属性展示方向、尺寸、状态或位置。 - 状态：default / hover / focus / disabled；含弹层或异步内容的组件另有 open、loading、done、error 状态。 - 无障碍：提供可见焦点、键盘可达、label/role/aria 属性；对话框和抽屉关联标题，进度/状态使用可读文本。 - 实现边界：在页面内持续展示风险、限制、成功结果或操作说明。 未声明的高级数据请求、服务端校验和第三方插件能力不由组件自行推断。 ### 页头 PageHeader - 用途：在详情页提供返回、标题、副标题和页面级操作。 - Anatomy：根节点 `kole-pageheader`，包含主体、状态/操作区域，交互控件保持原生语义。 - 变体：default、primary、compact；具体组件按自身属性展示方向、尺寸、状态或位置。 - 状态：default / hover / focus / disabled；含弹层或异步内容的组件另有 open、loading、done、error 状态。 - 无障碍：提供可见焦点、键盘可达、label/role/aria 属性；对话框和抽屉关联标题，进度/状态使用可读文本。 - 实现边界：在详情页提供返回、标题、副标题和页面级操作。 未声明的高级数据请求、服务端校验和第三方插件能力不由组件自行推断。 ### 文字提示 Tooltip - 用途：解释图标、截断内容或术语，适合短文本的 hover、focus 和键盘提示。 - Anatomy：根节点 `kole-tooltip`，包含主体、状态/操作区域，交互控件保持原生语义。 - 变体：default、primary、compact；具体组件按自身属性展示方向、尺寸、状态或位置。 - 状态：default / hover / focus / disabled；含弹层或异步内容的组件另有 open、loading、done、error 状态。 - 无障碍：提供可见焦点、键盘可达、label/role/aria 属性；对话框和抽屉关联标题，进度/状态使用可读文本。 - 实现边界：解释图标、截断内容或术语，适合短文本的 hover、focus 和键盘提示。 未声明的高级数据请求、服务端校验和第三方插件能力不由组件自行推断。 ### 弹出框 Popover - 用途：展示比 Tooltip 更丰富的就近信息、表单或操作，支持点击和 Escape 关闭。 - Anatomy：根节点 `kole-popover`，包含主体、状态/操作区域，交互控件保持原生语义。 - 变体：default、primary、compact；具体组件按自身属性展示方向、尺寸、状态或位置。 - 状态：default / hover / focus / disabled；含弹层或异步内容的组件另有 open、loading、done、error 状态。 - 无障碍：提供可见焦点、键盘可达、label/role/aria 属性；对话框和抽屉关联标题，进度/状态使用可读文本。 - 实现边界：展示比 Tooltip 更丰富的就近信息、表单或操作，支持点击和 Escape 关闭。 未声明的高级数据请求、服务端校验和第三方插件能力不由组件自行推断。 ### 分割线 Divider - 用途：分隔表单段落、菜单组或内容块，支持水平/垂直方向和带文字分隔。 - Anatomy：根节点 `kole-divider`，包含主体、状态/操作区域，交互控件保持原生语义。 - 变体：default、primary、compact；具体组件按自身属性展示方向、尺寸、状态或位置。 - 状态：default / hover / focus / disabled；含弹层或异步内容的组件另有 open、loading、done、error 状态。 - 无障碍：提供可见焦点、键盘可达、label/role/aria 属性；对话框和抽屉关联标题，进度/状态使用可读文本。 - 实现边界：分隔表单段落、菜单组或内容块，支持水平/垂直方向和带文字分隔。 未声明的高级数据请求、服务端校验和第三方插件能力不由组件自行推断。 ### 无限滚动 InfiniteScroll - 用途：逐批加载动态流或长列表，明确展示加载中、完成和可重试状态。 - Anatomy：根节点 `kole-infinitescroll`，包含主体、状态/操作区域，交互控件保持原生语义。 - 变体：default、primary、compact；具体组件按自身属性展示方向、尺寸、状态或位置。 - 状态：default / hover / focus / disabled；含弹层或异步内容的组件另有 open、loading、done、error 状态。 - 无障碍：提供可见焦点、键盘可达、label/role/aria 属性；对话框和抽屉关联标题，进度/状态使用可读文本。 - 实现边界：逐批加载动态流或长列表，明确展示加载中、完成和可重试状态。 未声明的高级数据请求、服务端校验和第三方插件能力不由组件自行推断。 ### 抽屉 Drawer - 用途：不离开列表页，侧向查看或编辑详情，默认从右侧滑出并带遮罩。 - Anatomy：根节点 `kole-drawer`，包含主体、状态/操作区域，交互控件保持原生语义。 - 变体：default、primary、compact；具体组件按自身属性展示方向、尺寸、状态或位置。 - 状态：default / hover / focus / disabled；含弹层或异步内容的组件另有 open、loading、done、error 状态。 - 无障碍：提供可见焦点、键盘可达、label/role/aria 属性；对话框和抽屉关联标题，进度/状态使用可读文本。 - 实现边界：不离开列表页，侧向查看或编辑详情，默认从右侧滑出并带遮罩。 未声明的高级数据请求、服务端校验和第三方插件能力不由组件自行推断。