596 lines
14 KiB
Plaintext
596 lines
14 KiB
Plaintext
## Aurora Admin 补充组件规范（第七批）
|
|
|
|
### 数据展示扩展组件
|
|
|
|
#### 树形表格 TreeTable
|
|
- 在普通表格基础上支持树形层级展示
|
|
- 层级缩进 16px/级，展开/折叠箭头
|
|
- 父级行可显示汇总数据（如合计）
|
|
- 支持懒加载子节点、异步加载
|
|
- 支持排序、筛选、多选，选择父级联动子级
|
|
- 适用于组织架构、商品分类、权限树等场景
|
|
|
|
#### 可展开表格 ExpandableTable
|
|
- 表格行支持展开显示额外内容
|
|
- 展开图标位于行首，默认收起
|
|
- 展开内容可为子表格、详情描述、图表
|
|
- 支持同时展开多行或仅一行
|
|
- 展开状态可记忆
|
|
- 适用于订单明细、日志详情等
|
|
|
|
#### 合并单元格表格 MergedCellTable
|
|
- 支持按字段合并相同内容单元格
|
|
- 合并规则可配置，纵向合并为主
|
|
- 合并后单元格垂直居中
|
|
- 表头支持多级合并
|
|
- 适用于报表、统计表格
|
|
|
|
#### 统计行表格 SummaryRowTable
|
|
- 表格底部或顶部显示汇总行
|
|
- 汇总类型：合计、平均值、最大值、最小值、计数
|
|
- 可配置汇总字段
|
|
- 汇总行样式加粗或浅色背景
|
|
- 支持固定汇总行
|
|
|
|
#### 固定列表格 FixedColumnTable
|
|
- 表格列过多时支持左右列固定
|
|
- 固定列阴影分隔
|
|
- 横向滚动查看其他列
|
|
- 支持固定表头、固定列同时使用
|
|
- 拖拽调整列宽时固定列宽度同步
|
|
- 适用于大数据量宽表
|
|
|
|
#### 卡片式列表 CardList
|
|
- 以卡片形式展示列表数据，替代传统表格
|
|
- 每行可显示多个卡片（栅格布局）
|
|
- 卡片内容可自定义：图片、标题、描述、标签、操作
|
|
- 支持分页、无限滚动、筛选排序
|
|
- 适用于商品、项目、联系人等
|
|
|
|
#### 时间轴列表 TimelineList
|
|
- 以时间轴形式展示事件或记录
|
|
- 左侧时间线，右侧内容卡片
|
|
- 支持垂直/水平两种模式
|
|
- 节点可表示不同状态（完成、进行中、错误）
|
|
- 适用于操作日志、审批历史、动态
|
|
|
|
#### 步骤列表 StepList
|
|
- 展示多步骤流程的详细列表
|
|
- 每步骤显示序号、标题、描述、状态图标
|
|
- 步骤之间用连接线串联
|
|
- 支持点击步骤跳转详情
|
|
- 适用于配置向导、任务进度
|
|
|
|
#### 图表面板 ChartPanel
|
|
- 可折叠的图表容器
|
|
- 标题栏带展开/折叠、刷新、导出按钮
|
|
- 图表区域可自定义高度
|
|
- 支持图表切换类型（折线、柱状、饼图）
|
|
- 适用于数据看板
|
|
|
|
#### 仪表板卡片 DashboardCard
|
|
- 用于数据看板中的卡片单元
|
|
- 支持拖拽调整大小和位置
|
|
- 可配置刷新频率
|
|
- 卡片可最大化、刷新、删除
|
|
- 布局可保存为模板
|
|
|
|
### 导航与路由扩展组件
|
|
|
|
#### 标签页导航增强 EnhancedTabNav
|
|
- 支持浏览器标签式导航
|
|
- 标签可拖拽排序、右键菜单（关闭、关闭其他、关闭全部）
|
|
- 当前标签高亮，未保存状态显示圆点
|
|
- 标签可固定
|
|
- 与路由联动，点击标签切换页面
|
|
|
|
#### 路由面包屑 RouteBreadcrumb
|
|
- 根据当前路由自动生成面包屑
|
|
- 支持自定义名称映射
|
|
- 动态路由参数显示
|
|
- 面包屑项可点击跳转
|
|
- 当前页面高亮不可点击
|
|
|
|
#### 侧边栏菜单 SideMenu
|
|
- 支持多级菜单、图标、徽章
|
|
- 菜单项可折叠、展开
|
|
- 选中态背景 #F0F5FF，左侧指示条
|
|
- 支持权限过滤、外链、隐藏
|
|
- 折叠模式显示图标，悬停弹出子菜单
|
|
|
|
#### 顶部菜单 TopMenu
|
|
- 水平导航菜单
|
|
- 支持多级下拉
|
|
- 选中态底部 2px 品牌色指示条
|
|
- 菜单项可带图标、徽章
|
|
- 适用于顶部导航布局
|
|
|
|
#### 混合导航 MixedNavigation
|
|
- 顶部一级菜单 + 侧边栏二级菜单
|
|
- 顶部菜单切换时侧边栏内容变化
|
|
- 支持权限过滤
|
|
- 菜单状态记忆
|
|
- 适用于复杂后台
|
|
|
|
#### 快捷导航 QuickNav
|
|
- 常用页面快捷入口
|
|
- 可配置为图标网格、列表或下拉
|
|
- 支持拖拽排序
|
|
- 点击跳转
|
|
- 显示在工作台或侧边栏顶部
|
|
|
|
#### 页签导航 PageTabs
|
|
- 页面内多视图切换
|
|
- 线型、卡片型、胶囊型
|
|
- 支持滚动、关闭、新增
|
|
- 可拖拽排序
|
|
- 适用于详情页多视角切换
|
|
|
|
#### 锚点导航 AnchorNav
|
|
- 长页面右侧固定目录
|
|
- 滚动时高亮当前章节
|
|
- 点击平滑滚动到对应位置
|
|
- 支持层级嵌套
|
|
- 适用于帮助文档、长表单
|
|
|
|
#### 返回顶部 BackToTop
|
|
- 页面滚动超过 400px 时出现
|
|
- 右下角悬浮按钮
|
|
- 点击平滑滚动回顶部
|
|
- 可带进度环显示滚动进度
|
|
- 支持自定义位置、样式
|
|
|
|
#### 页面跳转 PageTransition
|
|
- 路由切换动画
|
|
- 可选淡入、滑动、缩放
|
|
- 动画时长 0.3-0.5s
|
|
- 支持前进/后退方向感知
|
|
- 减少页面跳动，提升体验
|
|
|
|
### 表单控件扩展
|
|
|
|
#### 按钮组 ButtonGroup
|
|
- 多个按钮组合
|
|
- 可选中（单选/多选）、可分隔
|
|
- 按钮之间无缝连接，仅首尾有圆角
|
|
- 支持尺寸统一、禁用
|
|
- 适用于视图切换、筛选条件
|
|
|
|
#### 分段控件 SegmentedControl
|
|
- 用于选项切换
|
|
- 默认高度 32px，圆角 4px
|
|
- 选中项背景白色（在灰底容器内）或品牌色
|
|
- 支持图标+文字
|
|
- 适用于紧凑筛选、视图切换
|
|
|
|
#### 单选卡片 RadioCard
|
|
- 以卡片形式展示单选选项
|
|
- 选中态边框品牌色，背景 #F0F5FF
|
|
- 卡片内可包含图标、标题、描述
|
|
- 支持多列布局
|
|
- 适用于套餐选择、模板选择
|
|
|
|
#### 复选卡片 CheckboxCard
|
|
- 以卡片形式展示多选选项
|
|
- 选中态同单选卡片
|
|
- 支持卡片内操作按钮
|
|
- 适用于批量选择场景
|
|
|
|
#### 穿梭框 Transfer
|
|
- 左右两栏列表，中间操作按钮
|
|
- 支持搜索、过滤
|
|
- 列表项带复选框
|
|
- 支持拖拽
|
|
- 底部显示已选数量
|
|
- 适用于权限分配、成员选择
|
|
|
|
#### 列表选择器 ListPicker
|
|
- 下拉面板中显示列表，可多选
|
|
- 支持分组、搜索、全选
|
|
- 选中项显示为标签，可删除
|
|
- 适用于标签选择、分类选择
|
|
|
|
#### 级联选择器 Cascader
|
|
- 多级下拉选择
|
|
- 支持搜索、动态加载
|
|
- 选中路径显示
|
|
- 支持多选
|
|
- 适用于地区、分类选择
|
|
|
|
#### 颜色选择器 ColorPicker
|
|
- 预设色板 + 自定义拾色器
|
|
- 支持 HEX、RGB、HSL
|
|
- 透明度调节
|
|
- 实时预览
|
|
- 适用于主题配置、标签颜色
|
|
|
|
#### 日期范围快捷选择 RangeQuickPicker
|
|
- 日期范围选择器增强
|
|
- 内置快捷选项：今天、昨天、近7天、近30天、本月、上月、本年
|
|
- 自定义快捷项配置
|
|
- 支持时间范围
|
|
- 适用于报表筛选
|
|
|
|
#### 数字范围输入 NumberRangeInput
|
|
- 输入数字范围
|
|
- 两个数字输入框，中间分隔符
|
|
- 支持步长、单位
|
|
- 校验范围合法性
|
|
- 适用于价格、数量筛选
|
|
|
|
#### 评分输入 RateInput
|
|
- 星级评分，支持半星
|
|
- 可配置星数、尺寸、只读
|
|
- 支持自定义图标
|
|
- 可显示评分文字
|
|
- 适用于评价、满意度
|
|
|
|
#### 滑块输入 SliderInput
|
|
- 滑块选择数值
|
|
- 支持单滑块、双滑块范围
|
|
- 可显示刻度、标签
|
|
- 支持输入框联动
|
|
- 适用于价格、距离筛选
|
|
|
|
#### 开关组 SwitchGroup
|
|
- 多个开关组合，可分组
|
|
- 支持全选、联动
|
|
- 适用于权限开关、通知设置
|
|
- 分组标题、说明
|
|
|
|
#### 拖拽上传 DragUpload
|
|
- 支持点击或拖拽文件上传
|
|
- 拖拽区域虚线边框，悬停高亮
|
|
- 文件列表显示进度、状态
|
|
- 支持图片预览、删除
|
|
- 限制文件类型、大小、数量
|
|
|
|
#### 富文本编辑器 RichTextEditor
|
|
- 工具栏：字体、字号、加粗、斜体、下划线、颜色、对齐、列表、引用、表格、图片、链接、代码块
|
|
- 支持 Markdown 切换
|
|
- 支持实时预览
|
|
- 内容区高度 300-600px
|
|
- 支持图片粘贴上传
|
|
- 适用于公告、文章编辑
|
|
|
|
#### 代码编辑器 CodeEditor
|
|
- 行号、语法高亮、自动补全
|
|
- 支持主题切换（明/暗）
|
|
- 错误行标红
|
|
- 支持格式化、搜索替换
|
|
- 适用于配置、脚本编辑
|
|
|
|
#### JSON编辑器 JSONEditor
|
|
- 树形视图和文本视图切换
|
|
- 语法高亮、格式校验
|
|
- 支持折叠节点、搜索
|
|
- 错误提示行号与原因
|
|
- 适用于接口配置、数据映射
|
|
|
|
#### 表达式编辑器 ExpressionEditor
|
|
- 可视化构建表达式
|
|
- 支持字段、运算符、函数
|
|
- 自动补全、语法高亮
|
|
- 实时校验
|
|
- 适用于规则引擎、条件配置
|
|
|
|
#### 公式编辑器 FormulaEditor
|
|
- 用于计算公式
|
|
- 支持变量、函数、运算符
|
|
- 可视化插入函数
|
|
- 实时校验
|
|
- 适用于报表、计算字段
|
|
|
|
#### 签名板 SignaturePad
|
|
- 手写签名区域
|
|
- 支持鼠标、触屏
|
|
- 清除、撤销、保存
|
|
- 可导出图片
|
|
- 适用于合同、确认单
|
|
|
|
#### 验证码输入 CodeInput
|
|
- 多个独立输入格
|
|
- 自动聚焦下一个
|
|
- 支持粘贴、删除
|
|
- 输入完成自动提交
|
|
- 适用于短信验证码、支付密码
|
|
|
|
#### 密码输入 PasswordInput
|
|
- 密码可见切换
|
|
- 强度检测（弱/中/强）
|
|
- 可配置规则
|
|
- 支持一键生成强密码
|
|
- 适用于注册、修改密码
|
|
|
|
#### 手机号输入 PhoneInput
|
|
- 国际区号选择
|
|
- 自动格式化
|
|
- 支持校验
|
|
- 适用于注册、登录
|
|
|
|
#### 银行卡输入 BankCardInput
|
|
- 自动格式化每4位空格
|
|
- 识别卡类型
|
|
- Luhn校验
|
|
- 支持扫描识别
|
|
- 适用于支付、绑定银行卡
|
|
|
|
#### 身份证输入 IDCardInput
|
|
- 18位校验
|
|
- 自动提取出生日期、性别
|
|
- 支持扫描识别
|
|
- 错误提示具体
|
|
- 适用于实名认证
|
|
|
|
#### 车牌输入 PlateInput
|
|
- 省份简称下拉 + 字母数字
|
|
- 自动大写
|
|
- 支持新能源车牌
|
|
- 适用于车辆管理
|
|
|
|
### 反馈与通知扩展
|
|
|
|
#### 全局提示增强 MessagePro
|
|
- 支持多种类型：成功、错误、警告、信息、加载
|
|
- 可带关闭按钮、操作按钮
|
|
- 可配置持续时间、位置
|
|
- 支持自定义图标
|
|
- 可堆叠显示
|
|
|
|
#### 通知提醒增强 NotificationPro
|
|
- 右上角弹出
|
|
- 可带标题、描述、图标、操作按钮
|
|
- 停留时间可配置，可手动关闭
|
|
- 支持折叠、展开
|
|
- 适用于系统通知、任务结果
|
|
|
|
#### 进度条变体 ProgressVariants
|
|
- 线型、圆形、仪表盘型
|
|
- 支持状态颜色（成功、警告、错误）
|
|
- 可显示百分比文字
|
|
- 可带图标
|
|
- 适用于上传、任务进度
|
|
|
|
#### 骨架屏增强 SkeletonPro
|
|
- 支持多种占位形状
|
|
- 可组合成页面级骨架
|
|
- 微光动画
|
|
- 可配置加载速度
|
|
- 切换真实内容时淡入
|
|
|
|
#### 空状态增强 EmptyPro
|
|
- 多种场景：无数据、无权限、搜索无结果、网络错误
|
|
- 插画可静态或动效
|
|
- 主按钮、次按钮
|
|
- 可自定义文案
|
|
- 适用于所有列表页
|
|
|
|
#### 加载遮罩 LoadingOverlay
|
|
- 全屏或局部遮罩
|
|
- 转圈品牌色
|
|
- 可配置文案
|
|
- 阻止交互
|
|
- 适用于页面切换、数据提交
|
|
|
|
#### 结果页变体 ResultVariants
|
|
- 成功、失败、警告、信息
|
|
- 大图标、标题、描述
|
|
- 操作按钮
|
|
- 可附带摘要卡片、二维码
|
|
- 适用于提交完成、支付结果
|
|
|
|
#### 异常页变体 ExceptionVariants
|
|
- 403、404、500、502
|
|
- 大号状态码或插画
|
|
- 标题、描述
|
|
- 返回首页、重试按钮
|
|
- 适用于错误处理
|
|
|
|
#### 确认弹窗 ConfirmModal
|
|
- 用于危险操作
|
|
- 标题、描述、图标
|
|
- 确认按钮（红/主色）、取消按钮
|
|
- 支持加载状态
|
|
- 可勾选“不再提示”
|
|
|
|
#### 提示弹窗 AlertModal
|
|
- 信息提示
|
|
- 图标与颜色对应
|
|
- 确定按钮
|
|
- 支持自定义内容
|
|
- 适用于重要提示
|
|
|
|
#### 表单弹窗 FormModal
|
|
- 弹窗内嵌表单
|
|
- 表单字段可多列
|
|
- 确认提交，校验失败阻止关闭
|
|
- 支持加载状态
|
|
- 关闭重置
|
|
|
|
#### 全屏弹窗 FullScreenModal
|
|
- 全屏展示内容
|
|
- 标题栏、关闭按钮
|
|
- 内容区滚动
|
|
- 底部操作栏
|
|
- 适用于复杂表单、详情编辑
|
|
|
|
#### 底部面板 BottomSheet
|
|
- 从底部滑出
|
|
- 可拖拽关闭
|
|
- 内容滚动
|
|
- 支持遮罩点击关闭
|
|
- 适用于操作选择、筛选
|
|
|
|
### 系统与工具扩展
|
|
|
|
#### 权限管理 PermissionManager
|
|
- 用户、角色、权限点管理
|
|
- 权限树勾选
|
|
- 数据权限范围
|
|
- 字段权限
|
|
- 按钮权限
|
|
- 适用于后台权限配置
|
|
|
|
#### 角色管理 RoleManager
|
|
- 角色列表
|
|
- 角色权限分配
|
|
- 角色复制
|
|
- 数据权限设置
|
|
- 适用于权限系统
|
|
|
|
#### 用户管理 UserManager
|
|
- 用户列表
|
|
- 搜索、筛选
|
|
- 批量导入导出
|
|
- 编辑、禁用、重置密码
|
|
- 分配角色
|
|
- 适用于用户管理
|
|
|
|
#### 部门管理 DeptManager
|
|
- 组织架构树
|
|
- 部门增删改
|
|
- 拖拽调整层级
|
|
- 人员列表
|
|
- 适用于组织管理
|
|
|
|
#### 菜单管理 MenuManager
|
|
- 导航菜单配置
|
|
- 树形结构
|
|
- 菜单属性：名称、图标、路由、权限标识
|
|
- 排序、隐藏
|
|
- 适用于系统配置
|
|
|
|
#### 参数配置 ParamConfig
|
|
- 系统参数键值对
|
|
- 表格展示
|
|
- 编辑、重置
|
|
- 加密存储
|
|
- 变更日志
|
|
- 适用于系统设置
|
|
|
|
#### 字典管理 DictManager
|
|
- 数据字典维护
|
|
- 左侧类型树
|
|
- 右侧字典项列表
|
|
- 排序、启停
|
|
- 导入导出
|
|
- 适用于枚举值管理
|
|
|
|
#### 通知模板 NoticeTemplate
|
|
- 短信、邮件、站内信模板
|
|
- 变量占位符
|
|
- 预览、测试
|
|
- 审核状态
|
|
- 适用于消息通知
|
|
|
|
#### 定时任务 ScheduledTask
|
|
- 任务列表
|
|
- 表达式配置
|
|
- 暂停、恢复
|
|
- 执行日志
|
|
- 适用于系统自动化
|
|
|
|
#### 系统监控 SystemMonitor
|
|
- 服务器状态
|
|
- 实时图表
|
|
- 告警
|
|
- 在线用户
|
|
- 适用于运维
|
|
|
|
#### 日志查询 LogQuery
|
|
- 系统日志
|
|
- 筛选、搜索
|
|
- 高亮
|
|
- 导出
|
|
- 适用于问题排查
|
|
|
|
#### 操作审计 AuditLog
|
|
- 敏感操作记录
|
|
- 只读
|
|
- 导出
|
|
- 归档
|
|
- 适用于合规
|
|
|
|
#### 国际化 i18n
|
|
- 多语言切换
|
|
- 语言包管理
|
|
- 日期、数字格式
|
|
- 适用于多语言系统
|
|
|
|
#### 主题切换 ThemeSwitcher
|
|
- 明暗主题
|
|
- 品牌色切换
|
|
- 实时预览
|
|
- 保存偏好
|
|
- 适用于个性化
|
|
|
|
#### 布局切换 LayoutSwitcher
|
|
- 侧边、顶部、混合导航
|
|
- 侧边栏宽度
|
|
- 折叠状态
|
|
- 保存偏好
|
|
- 适用于布局配置
|
|
|
|
#### 密度切换 DensitySwitcher
|
|
- 宽松、默认、紧凑
|
|
- 影响表格、表单间距
|
|
- 局部可独立设置
|
|
- 保存偏好
|
|
- 适用于信息密度调整
|
|
|
|
#### 快捷键面板 ShortcutPanel
|
|
- 展示所有快捷键
|
|
- 自定义
|
|
- 搜索
|
|
- 适用于效率提升
|
|
|
|
#### 帮助中心 HelpCenter
|
|
- 搜索
|
|
- 分类
|
|
- 文档列表
|
|
- 反馈
|
|
- 适用于用户支持
|
|
|
|
#### 更新提示 UpdateNotice
|
|
- 新版本提示
|
|
- 版本号、内容
|
|
- 更新按钮
|
|
- 稍后提醒
|
|
- 适用于系统更新
|
|
|
|
#### 反馈入口 FeedbackEntry
|
|
- 悬浮按钮
|
|
- 反馈表单
|
|
- 截图
|
|
- 提交后进入工单
|
|
- 适用于收集意见
|
|
|
|
#### 工单系统 TicketSystem
|
|
- 工单列表
|
|
- 状态流转
|
|
- 对话时间线
|
|
- 附件
|
|
- 适用于客服支持
|
|
|
|
#### 审批中心 ApprovalCenter
|
|
- 审批列表
|
|
- 审批详情
|
|
- 通过、驳回
|
|
- 转交、加签
|
|
- 适用于审批流
|
|
|
|
#### 消息中心 MessageCenter
|
|
- 分类
|
|
- 未读
|
|
- 批量已读
|
|
- 删除
|
|
- 适用于站内信
|
|
|
|
#### 通知中心 NotificationCenter
|
|
- 面板
|
|
- 分类
|
|
- 全部已读
|
|
- 查看全部
|
|
- 适用于顶部通知
|
|
|
|
请基于以上规范生成/设计 [具体页面或组件名称]。 |