aurora-admin/组件11.txt

# 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 属性；对话框和抽屉关联标题，进度/状态使用可读文本。
- 实现边界：不离开列表页，侧向查看或编辑详情，默认从右侧滑出并带遮罩。 未声明的高级数据请求、服务端校验和第三方插件能力不由组件自行推断。