## 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 - 反馈“有帮助/无帮助” 请基于以上规范生成/设计 [具体页面或组件名称]。