## Kole UI 补充组件规范（第五批）

### 页面模板组件

#### 列表页模板 ListPageTemplate
- 标准列表页面布局：顶部搜索筛选区 + 中间表格 + 底部分页
- 搜索区可折叠，默认展示1-2个常用条件，展开显示全部
- 表格工具栏：左侧标题或批量操作，右侧刷新、密度、列设置、导出
- 表格支持多选、排序、筛选、固定列
- 分页右侧显示总条数，可选每页条数
- 页面边距24px，区域间距16px

#### 表单页模板 FormPageTemplate
- 标准表单页面布局：顶部页头（返回、标题、操作）+ 中间表单区 + 底部固定操作栏
- 表单区宽度通常600-800px，居中或左对齐
- 表单分组标题，组间分割线
- 底部操作栏：主按钮（提交）、次按钮（取消/保存草稿）
- 校验失败时自动滚动到第一个错误项

#### 详情页模板 DetailPageTemplate
- 标准详情页面布局：顶部页头（返回、标题、状态标签、操作）+ 内容区
- 内容区：描述列表展示基本信息，可分多组
- 支持标签页切换：基本信息、关联数据、操作日志
- 底部或页头放置操作按钮：编辑、删除、更多
- 关联数据区域可嵌套表格或列表

#### 结果页模板 ResultPageTemplate
- 居中布局：大图标（成功/失败/警告）+ 标题 + 描述
- 主要操作按钮、次要操作按钮
- 可附带摘要信息卡片、二维码、推荐操作
- 常用于提交成功、支付完成、流程结束

#### 异常页模板 ExceptionPageTemplate
- 居中布局：大号状态码（403/404/500）或插画
- 标题、描述文案
- 操作按钮：返回首页、返回上页、重试
- 可附带帮助链接、错误码

#### 工作台模板 WorkbenchTemplate
- 聚合型首页：欢迎语 + 快捷入口 + 待办 + 日程 + 数据卡片
- 布局可自定义拖拽卡片
- 顶部用户信息与日期
- 快捷入口图标网格
- 待办列表、日程日历、通知列表
- 支持卡片添加、删除、布局保存

#### 登录页模板 LoginPageTemplate
- 居中卡片或分栏布局
- 品牌Logo、系统名称、欢迎语
- 表单：用户名、密码、验证码、记住我、登录按钮
- 底部：忘记密码、注册、第三方登录
- 背景可选品牌色渐变或插画
- 响应式适配

### 组合组件

#### 组合输入框 InputGroup
- 将多个输入控件组合成一行
- 支持前缀/后缀、选择器+输入框、按钮+输入框
- 组件之间无缝连接，仅第一个和最后一个有圆角
- 尺寸统一，错误态整体标红
- 常用于金额输入、搜索、域名输入

#### 搜索框 SearchInput
- 输入框 + 搜索图标 + 清除按钮
- 支持搜索历史、热门搜索、自动完成
- 默认宽度200-320px，聚焦可扩展
- 回车触发搜索，显示加载状态
- 可配置搜索类别下拉

#### 筛选面板 FilterPanel
- 用于列表页高级筛选
- 折叠式，默认显示一行，展开显示全部
- 包含多种控件：输入框、选择器、日期范围、数字范围
- 底部“查询”“重置”按钮
- 可保存常用筛选方案

#### 列设置 ColumnSetting
- 表格工具栏按钮，弹出列配置面板
- 列表显示所有列，复选框控制显示/隐藏
- 拖拽调整列顺序
- 支持恢复默认、全选/全不选
- 配置保存在本地或服务端

#### 表格工具栏 TableToolbar
- 位于表格上方，左侧标题或批量操作，右侧操作按钮
- 常见按钮：刷新、密度切换、列设置、导出、新建
- 按钮使用文字按钮或图标按钮
- 工具栏高度40px，与表格间距8px

#### 行内操作 RowActions
- 表格操作列，右对齐
- 常见操作：查看、编辑、删除、更多
- 操作使用文字按钮，间距8px
- 超过3个操作时，多余的收进“更多”下拉菜单
- 危险操作（删除）红色文字

#### 批量操作栏 BatchActionBar
- 表格有选中行时出现，通常位于表格上方或下方
- 左侧显示“已选 N 项”，右侧操作按钮
- 操作：批量删除、批量导出、批量审批、批量移动
- 危险操作需二次确认
- 支持全选、取消选择

#### 数据面板 DataPanel
- 用于数据看板或详情页，聚合展示多个指标
- 由多个指标卡组成，可栅格排列
- 支持图表、列表、数值混合
- 面板标题可带操作链接（查看详情）
- 响应式布局

#### 指标卡 MetricCard
- 展示单个关键指标
- 结构：标题、数值、趋势（上升/下降）、对比说明、迷你图表
- 数值使用大号数字字体（24-32px）
- 趋势图标绿色上升、红色下降
- 可点击跳转详情

#### 排行列表 RankingList
- 用于展示排名数据，如销售排行、热门内容
- 前三名突出显示（金银铜颜色或大号排名数字）
- 每项：排名、名称、数值、趋势
- 支持切换时间段、分类
- 可配置最大显示条数

#### 进度仪表 ProgressGauge
- 用于展示完成率、健康度等百分比指标
- 圆形、半圆形、仪表盘样式
- 颜色根据阈值变化（如 <50% 红，50-80% 黄，>80% 绿）
- 中心显示百分比数字
- 支持动画

#### 步骤操作 StepActions
- 用于多步骤流程中的操作按钮
- 按钮组：上一步（次按钮）、下一步/提交（主按钮）
- 可选“保存草稿”“跳过”
- 按钮固定在底部或位于表单下方
- 第一步时“上一步”禁用，最后一步显示“提交”

#### 多步骤表单 MultiStepForm
- 将长表单拆分为多步，步骤条指示进度
- 每步包含表单字段，点击下一步时校验
- 支持保存草稿、返回上一步
- 最后一步显示摘要或直接提交
- 步骤状态：完成、进行中、未开始

#### 向导式配置 WizardConfig
- 用于复杂配置流程，如系统初始化、项目创建
- 步骤条 + 配置内容 + 底部操作
- 每步可包含说明、表单、选择项
- 支持跳过可选步骤
- 最后一步显示配置摘要

### 系统工具组件

#### 权限申请 PermissionRequest
- 用户申请权限的流程
- 选择需要申请的权限点（树形或列表）
- 填写申请理由
- 提交后进入审批流
- 可查看申请记录与审批状态

#### 审批模板 ApprovalTemplate
- 预定义的审批流程模板
- 列表展示模板名称、适用场景、节点数
- 创建模板时可配置节点、审批人、条件
- 模板可启用/停用
- 发起审批时选择模板

#### 消息模板 MessageTemplate
- 管理短信、邮件、站内信模板
- 模板列表：名称、类型、内容、状态
- 支持变量占位符，如 {用户名}、{金额}
- 可预览、测试发送
- 模板审核状态：草稿、待审核、已启用

#### 日程提醒 Reminder
- 创建提醒，设置时间、重复规则
- 提醒方式：弹窗、短信、邮件
- 提醒列表展示，支持启停
- 到期前触发，可延时提醒

#### 待办清单 TodoList
- 用户待办事项列表
- 事项：标题、截止时间、优先级、状态
- 支持勾选完成、拖拽排序
- 可分类：今天、本周、全部
- 与日历、任务系统关联

#### 便签 StickyNote
- 用于快速记录，可拖拽放置
- 便签卡片可编辑文本，颜色可选（黄/蓝/绿/粉）
- 支持置顶、删除
- 内容自动保存
- 可放在工作台或个人中心

#### 收藏夹 Favorites
- 用户收藏常用页面或功能
- 收藏列表展示，支持分组
- 快速访问入口
- 可添加/删除收藏
- 可同步到侧边栏快捷菜单

#### 最近访问 RecentVisited
- 记录用户最近访问的页面或记录
- 展示为列表或标签
- 支持清空
- 便于快速返回

#### 快捷操作 QuickActions
- 配置常用操作按钮，如“新建工单”“发起审批”
- 显示在工作台或侧边栏
- 支持自定义图标、名称、链接
- 可拖拽排序

#### 全局通知 GlobalNotification
- 系统级通知，通常显示在顶部
- 类型：系统公告、重要提醒
- 可配置展示方式：横幅、弹窗
- 支持关闭、查看详情

#### 系统公告 SystemAnnouncement
- 管理员发布公告
- 公告列表：标题、内容、发布时间、状态
- 支持置顶、定时发布、撤回
- 用户端展示在顶部或公告栏

#### 操作指引 Guide
- 分步骤引导用户完成某项操作
- 高亮目标元素，显示说明气泡
- 支持“下一步”“跳过”
- 常用于新功能引导

#### 键盘快捷键面板 ShortcutPanel
- 展示系统所有快捷键
- 弹窗列表：快捷键、功能描述
- 支持自定义快捷键
- 在设置中配置

#### 主题配置 ThemeConfig
- 系统主题颜色、模式配置
- 选择预设主题色或自定义
- 明暗模式切换
- 配置实时预览
- 保存后全局生效

#### 布局配置 LayoutConfig
- 设置页面布局：侧边栏位置、导航模式
- 选项：侧边导航、顶部导航、混合导航
- 侧边栏宽度、折叠默认状态
- 配置保存，记忆用户偏好

#### 语言切换 LanguageSwitcher
- 切换系统语言
- 支持中英文等多语言
- 切换后全局文案、日期格式变化
- 语言包管理

#### 时区选择 TimezonePicker
- 选择时区，支持搜索
- 显示UTC偏移和城市
- 用于国际化系统
- 保存用户偏好

#### 货币选择 CurrencyPicker
- 选择货币类型
- 支持搜索、常用货币置顶
- 显示货币符号、代码、名称
- 用于财务系统

#### 颜色对比度检查 ColorContrastChecker
- 工具组件，用于检查文字与背景对比度
- 输入前景色和背景色，计算对比度
- 显示是否满足WCAG AA/AAA
- 供设计师或开发使用

#### 图标预览 IconPreview
- 展示系统所有图标
- 网格布局，支持搜索
- 点击图标复制名称或代码
- 可调整图标大小

#### 组件示例 ComponentDemo
- 用于设计系统文档
- 展示组件不同状态、尺寸、变体
- 提供代码示例
- 交互式预览

#### 设计令牌查看 DesignTokenViewer
- 展示设计令牌（颜色、字体、间距等）
- 可复制令牌值
- 供设计与开发协作
- 支持导出

#### 版本信息 VersionInfo
- 显示当前系统版本、构建时间
- 更新日志链接
- 检查更新按钮
- 用于关于页面

#### 更新日志 Changelog
- 记录系统版本更新内容
- 按版本排列，显示发布日期
- 更新项分类：新增、修复、优化
- 支持搜索

#### 反馈入口 FeedbackEntry
- 悬浮按钮或菜单项
- 点击弹出反馈表单：问题描述、截图、联系方式
- 提交后进入工单系统
- 可查看反馈处理进度

#### 帮助文档 HelpDoc
- 在线帮助文档系统
- 左侧目录树，右侧内容
- 搜索、高亮
- 支持打印、下载PDF
- 反馈“有帮助/无帮助”

请基于以上规范生成/设计 [具体页面或组件名称]。