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

### 数据可视化扩展组件

#### 桑基图 SankeyChart
- 用于展示流量、能量、资金流向
- 节点为矩形，连线宽度表示流量大小
- 支持拖拽节点调整位置
- 配色使用品牌色系，透明度表示层级
- 交互：hover 高亮关联路径，点击查看详情

#### 树图 TreeMap
- 用于展示层级占比，如磁盘空间、销售构成
- 矩形面积表示数值，颜色深浅表示类别或层级
- 支持钻取、面包屑返回
- 标签显示名称与百分比，空间不足时隐藏

#### 旭日图 SunburstChart
- 用于展示多层级占比关系
- 环形切片，内层为父级，外层为子级
- 点击切片展开/收缩
- 中心显示总计，悬停显示路径

#### 关系图 GraphChart
- 用于展示实体关系，如社交网络、知识图谱
- 节点与边组成，节点可拖拽
- 支持力导向布局、圆形布局
- 节点大小/颜色映射属性，边粗细映射权重
- 点击节点高亮关联节点与边

#### 词云 WordCloud
- 用于展示关键词频率
- 文字大小表示权重，颜色使用品牌色板
- 支持自定义形状遮罩
- 点击词语触发筛选

#### K线图 CandlestickChart
- 用于金融数据展示，开盘、收盘、最高、最低
- 上涨红色（国内习惯）或绿色（国际），可配置
- 支持缩放、十字光标、技术指标叠加
- 时间轴可切换日/周/月

#### 气泡图 BubbleChart
- 散点图变体，气泡大小表示第三维度
- 支持颜色分类、图例筛选
- 气泡可带标签，hover 显示详情
- 适用于多维对比分析

#### 时间序列图 TimeSeriesChart
- 专用于时间序列数据
- 支持多系列对比、面积填充
- 时间轴可缩放、平移
- 支持异常点标记、趋势线

#### 3D图表 ThreeDChart
- 用于立体数据展示，如3D柱状图、3D散点图
- 可旋转视角、缩放
- 颜色使用品牌色，光照柔和
- 适用于空间分布或特殊场景

#### 仪表盘 GaugeChart
- 用于单指标展示，如完成率、健康度
- 圆弧形，指针或数字显示
- 支持多段颜色区间（绿/黄/红）
- 可配置刻度、单位

### 移动端/响应式扩展组件

#### 底部导航 BottomNavigation
- 用于移动端或平板端主导航
- 3-5个标签项，图标+文字
- 选中项品牌色，未选中灰色
- 可带徽章数字提示
- 固定在底部，高度56px

#### 抽屉式菜单 DrawerMenu
- 移动端侧滑菜单，从左侧滑出
- 背景遮罩半透明，点击关闭
- 菜单内容与桌面侧边栏一致
- 支持手势滑动打开/关闭

#### 滑动操作 SwipeAction
- 列表项左右滑动显示操作按钮
- 左侧通常为“标为已读”等正向操作，右侧为“删除”等危险操作
- 按钮宽度60-80px，颜色区分
- 支持完全滑动触发

#### 下拉刷新 PullToRefresh
- 用于移动端列表刷新
- 下拉距离超过阈值触发
- 刷新指示器转圈，品牌色
- 支持自定义提示文字

#### 手势操作 GestureHandler
- 支持单击、双击、长按、捏合、旋转
- 用于图片查看、地图操作
- 手势冲突处理
- 提供回调事件

#### 响应式栅格 ResponsiveGrid
- 基于24列栅格，根据屏幕宽度自动调整列数
- 断点：<576px、≥576px、≥768px、≥992px、≥1200px
- 栅格间距16px或24px
- 支持列偏移、排序

#### 移动端表单 MobileForm
- 表单控件高度40-48px，适合触屏
- 标签顶部对齐，减少横向空间
- 输入框全宽，按钮全宽
- 错误提示图标+文字，位置下方

#### 移动端选择器 MobilePicker
- 底部弹出选择面板
- 滚轮式选择，支持多级联动
- 确定/取消按钮，点击遮罩关闭
- 支持日期、时间、地区、自定义数据

### 高级交互与协作组件

#### 协同光标 CollaborativeCursor
- 多人实时协作时显示他人鼠标位置
- 光标带用户名称标签，颜色区分用户
- 支持跟随、闪烁
- 仅在协作场景启用

#### 评论批注 CommentAnnotation
- 在文档、设计稿上添加批注
- 点击位置放置标记，弹出评论输入框
- 标记显示为小圆点或图钉，带未读数量
- 支持回复、解决、删除

#### 实时协作状态 RealTimeStatus
- 顶部显示在线协作者头像
- 头像组可展开查看名单
- 显示编辑中状态（如“张三正在编辑”）
- 网络断开时提示

#### 版本对比 VersionDiff
- 两个版本并排展示，差异高亮
- 支持文本、表格、图片对比
- 差异行/单元格用浅红/浅绿背景标记
- 可切换仅看差异

#### 代码差异 CodeDiff
- 类似 Git diff 的代码对比视图
- 左侧旧版本，右侧新版本
- 删除行红色背景，新增行绿色背景
- 行号显示，支持折叠未变更区域

#### 图片裁剪 ImageCropper
- 用于头像上传、图片编辑
- 支持拖拽调整裁剪框，固定比例或自由
- 缩放、旋转图片
- 输出指定尺寸，预览效果

#### 音频录制 AudioRecorder
- 用于语音输入、语音消息
- 录制按钮，显示波形或计时
- 录制完成可试听、重录、发送
- 权限请求、音量指示

#### 屏幕录制 ScreenRecorder
- 用于录屏反馈、教程制作
- 选择录制区域、是否录制声音
- 录制中显示工具栏，可暂停/停止
- 生成视频文件可下载

### 业务场景扩展组件

#### 客户卡片 CustomerCard
- 用于CRM客户列表
- 包含：头像/Logo、客户名称、等级标签、联系人、电话、最近跟进时间
- 卡片悬停显示快捷操作（打电话、发邮件、编辑）
- 支持拖拽到不同阶段（如线索→商机）

#### 合同卡片 ContractCard
- 展示合同关键信息
- 合同编号、名称、金额、起止日期、状态标签
- 进度条显示履约进度
- 操作：查看、续签、终止

#### 发票卡片 InvoiceCard
- 展示发票信息
- 发票号码、类型、金额、税额、状态
- 支持下载PDF、发送邮件
- 状态标签：待开、已开、已寄、已收

#### 项目卡片 ProjectCard
- 用于项目列表或看板
- 项目名称、负责人头像、进度条、里程碑
- 标签显示优先级、状态
- 点击进入详情

#### 会议日程 MeetingSchedule
- 用于日历中的会议安排
- 显示会议主题、时间、地点、参与者头像
- 点击弹出详情气泡
- 支持一键加入会议、提醒

#### 审批流节点配置 ApprovalNodeConfig
- 用于流程设计器中配置审批节点
- 节点类型：发起人、审批人、抄送、条件分支
- 每个节点可设置处理人、审批方式、超时时间
- 支持节点添加、删除、连线

#### 工单详情 TicketDetail
- 展示工单完整信息
- 左侧：工单描述、附件、处理记录时间线
- 右侧：工单属性（编号、状态、优先级、负责人、时间）
- 底部操作：回复、转交、关闭、催办

#### 数据字典管理 DictionaryManager
- 用于维护系统枚举值
- 左侧字典类型树，右侧字典项列表
- 字典项支持排序、启用/禁用
- 支持导入导出

#### 参数配置 ConfigSettings
- 系统参数键值对管理
- 表格展示参数名、键、值、类型、描述
- 支持编辑、重置、加密存储
- 变更记录日志

#### 菜单权限配置 MenuPermissionConfig
- 树形展示系统菜单与权限点
- 每个菜单可配置查看、新增、编辑、删除权限
- 角色分配时勾选权限点
- 支持全选、半选、展开/折叠

#### 组织架构选择器 OrgTreeSelect
- 用于选择部门或人员
- 树形下拉，支持搜索
- 可选择部门（含子部门）或单个人员
- 已选显示为标签

#### 报表设计器 ReportDesigner
- 可视化设计报表模板
- 拖拽字段到报表区域，支持表格、图表、文本
- 配置数据源、筛选条件
- 预览、导出报表

#### 大屏设计器 DashboardDesigner
- 用于数据可视化大屏搭建
- 画布可拖拽组件：图表、数字翻牌、地图、列表
- 组件支持数据绑定、样式配置
- 发布后全屏展示

### 其他补充组件

#### 分割线 Divider
- 用于内容分隔，水平/垂直
- 水平：1px 高，颜色 #E8ECF1，可带文字
- 垂直：1px 宽，高度自适应
- 间距默认 16px

#### 间距 Space
- 用于组件之间统一间距
- 支持水平/垂直排列
- 间距尺寸：4/8/12/16/24
- 可设置对齐方式

#### 排版 Typography
- 标题、段落、文本样式统一
- 支持省略、复制、可编辑
- 数字、金额格式化
- 链接样式，主色

#### 布局 Layout
- 页面整体布局框架
- 包含：Sider、Header、Content、Footer
- 支持侧边栏折叠、固定头部
- 响应式适配

#### 菜单 Menu
- 导航菜单，支持水平/垂直
- 菜单项、子菜单、分组
- 选中态、展开态、禁用态
- 图标、徽章、快捷键显示

#### 数字键盘 NumericKeyboard
- 用于金额输入、密码输入
- 键盘布局：数字0-9、小数点、删除、确认
- 可配置随机数字顺序（安全）
- 嵌入输入框下方或弹出

#### 手势密码 GesturePassword
- 九宫格手势绘制
- 用于解锁、身份验证
- 连线颜色品牌色，错误变红
- 支持设置、验证、重置

#### 验证码输入框 CodeInput
- 用于短信验证码、支付密码
- 多个独立输入格，自动聚焦下一个
- 支持粘贴、删除
- 输入完成自动提交

#### 倒计时按钮 CountdownButton
- 用于获取验证码
- 点击后开始倒计时（默认60秒）
- 倒计时中禁用，显示剩余秒数
- 结束后恢复可点击

#### 进度步骤 ProgressSteps
- 将长流程拆解为步骤，展示当前进度
- 步骤节点：完成、进行中、未开始
- 可点击已完成步骤返回
- 垂直/水平两种布局

#### 审批意见 ApprovalComment
- 用于审批流中填写意见
- 输入框 + 常用意见快捷选择
- 支持上传附件
- 显示历史意见列表

#### 审批操作栏 ApprovalActions
- 审批详情页底部操作
- 按钮：通过、驳回、转交、加签、撤回
- 通过/驳回为主按钮，其他为次按钮
- 驳回需填写原因弹窗

#### 审批状态标签 ApprovalStatusTag
- 审批状态展示
- 状态：草稿、审批中、已通过、已驳回、已撤回
- 颜色：灰、蓝、绿、红、橙
- 带图标小圆点

#### 通知设置 NotificationSettings
- 用户配置接收哪些通知
- 分类：系统通知、任务提醒、消息通知
- 每类可设置：站内信、邮件、短信
- 开关控制，保存生效

#### 隐私设置 PrivacySettings
- 用户隐私选项
- 是否公开手机号、邮箱、部门
- 是否允许他人查看在线状态
- 数据可见范围设置

#### 账号绑定 AccountBinding
- 绑定/解绑第三方账号
- 列表：微信、钉钉、邮箱、手机
- 显示绑定状态，操作按钮
- 解绑需验证身份

#### 安全中心 SecurityCenter
- 账号安全设置
- 修改密码、设置密保、登录设备管理
- 异常登录提醒
- 安全评分展示

#### 设备管理 DeviceManagement
- 当前登录设备列表
- 设备类型、IP、地点、时间
- 支持强制下线
- 信任设备标记

#### 消息订阅 MessageSubscription
- 订阅系统消息类型
- 如：工单提醒、审批提醒、公告
- 订阅方式：站内信、邮件、短信
- 可批量设置

#### 数据导出配置 ExportConfig
- 配置导出字段、格式
- 保存常用导出模板
- 导出历史记录
- 支持定时导出

#### 报表配置 ReportConfig
- 报表参数设置
- 数据源选择、筛选条件
- 报表模板管理
- 生成报表任务

#### 仪表板布局 DashboardLayout
- 仪表板可自定义布局
- 卡片可拖拽、缩放
- 布局保存、重置
- 支持多仪表板切换

#### 卡片列表 CardList
- 以卡片形式展示列表数据
- 每行可显示多个卡片（栅格）
- 卡片内容自定义
- 支持分页或无限滚动

#### 瀑布流布局 WaterfallLayout
- 用于图片、内容卡片展示
- 列数自适应，高度不固定
- 使用 JS 计算位置或 CSS columns
- 支持懒加载

#### 时间轴日志 TimelineLog
- 操作日志时间轴展示
- 节点时间、操作人、动作、结果
- 支持筛选、搜索
- 可折叠长列表

#### 图片裁剪上传 CropUpload
- 上传前裁剪图片
- 选择文件后弹出裁剪框
- 支持固定比例、圆形裁剪
- 上传后显示缩略图

#### 视频裁剪上传 VideoCropUpload
- 上传前裁剪视频片段
- 预览视频，选择起止时间
- 支持压缩、转码
- 显示上传进度

#### 地图轨迹 MapTrack
- 展示移动轨迹
- 地图上绘制路线，带起点/终点标记
- 支持播放轨迹动画
- 显示里程、时长

#### 热力图 Heatmap
- 地图或图表上的热力分布
- 颜色渐变表示密度
- 支持缩放、平移
- 用于位置数据分析

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