320 lines
10 KiB
Plaintext
320 lines
10 KiB
Plaintext
## Aurora Admin 补充组件规范（第五批）
|
|
|
|
### 页面模板组件
|
|
|
|
#### 列表页模板 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
|
|
- 反馈“有帮助/无帮助”
|
|
|
|
请基于以上规范生成/设计 [具体页面或组件名称]。 |