200 lines
7.2 KiB
Plaintext
200 lines
7.2 KiB
Plaintext
## Aurora Admin 补充组件规范(第二批)
|
||
|
||
### 树形控件 Tree
|
||
- 用于层级数据展示:组织架构、菜单权限、分类目录
|
||
- 节点高度 32px,缩进 16px/级
|
||
- 展开/折叠箭头 12px,位于节点左侧
|
||
- 选中态:背景 #F0F5FF,文字 #2F54EB
|
||
- 支持复选框、拖拽排序、异步加载、搜索过滤
|
||
- 连接线默认隐藏,可选显示虚线 #E8ECF1
|
||
|
||
### 下拉菜单 Dropdown
|
||
- 触发器为按钮或文字,点击展开菜单
|
||
- 菜单项高度 32px,内边距左右 12px
|
||
- 悬停背景 #F5F7FA,危险项文字 #F5222D
|
||
- 支持分割线、禁用项、图标、子菜单
|
||
- 面板白底、圆角 6px、阴影中、最小宽度 120px
|
||
|
||
### 气泡确认框 Popconfirm
|
||
- 用于危险操作二次确认(删除、下线)
|
||
- 气泡内包含提示文字、确认按钮(危险红)、取消按钮(文字)
|
||
- 触发方式:点击,位置可配置(上/下/左/右)
|
||
- 气泡背景白色,圆角 6px,阴影中,宽度约 240px
|
||
|
||
### 分段控制器 Segmented
|
||
- 用于视图切换、筛选条件切换
|
||
- 默认高度 32px,选项内边距 8px 16px
|
||
- 选中项背景白色(在浅灰容器内)或品牌色(背景深色时)
|
||
- 圆角 4px,容器背景 #F5F7FA
|
||
- 支持图标+文字,禁用态文字 #BFBFBF
|
||
|
||
### 穿梭框 Transfer
|
||
- 用于批量选择,左右两栏列表
|
||
- 列表项高度 32px,带复选框
|
||
- 中间操作按钮:右移、左移、全部右移、全部左移
|
||
- 顶部搜索框,底部已选数量统计
|
||
- 面板宽度 200–240px,高度 256px,滚动
|
||
|
||
### 评分 Rate
|
||
- 用于评价、满意度打分
|
||
- 默认 5 星,可配置 1–10 星
|
||
- 选中星颜色 #FAAD14,未选中 #E8ECF1
|
||
- 尺寸 16/20/24px,支持半星、只读、字符自定义
|
||
|
||
### 滑块 Slider
|
||
- 用于范围筛选、参数调节
|
||
- 轨道高度 4px,圆角 2px
|
||
- 未选中段 #E8ECF1,选中段 #2F54EB
|
||
- 滑块圆点 14px,白色,阴影中,悬停放大
|
||
- 支持刻度标记、输入框联动、双滑块范围
|
||
|
||
### 提及 Mention
|
||
- 用于评论、任务分配中 @用户
|
||
- 输入框内输入 @ 触发面板
|
||
- 面板列出用户列表,含头像+姓名+部门
|
||
- 选中后以标签形式插入输入框,可删除
|
||
- 面板宽度 240px,阴影中,圆角 6px
|
||
|
||
### 自动完成 AutoComplete
|
||
- 输入时根据关键字匹配建议
|
||
- 面板样式同选择器下拉
|
||
- 高亮匹配文字使用品牌色
|
||
- 支持防抖、远程搜索、自定义渲染
|
||
|
||
### 全局搜索 GlobalSearch
|
||
- 顶部导航搜索框,宽度 240–320px
|
||
- 输入后显示下拉面板,含历史记录、搜索结果
|
||
- 结果分组:页面、文档、用户、工单
|
||
- 键盘上下选择,回车跳转
|
||
- 面板白底、阴影中、圆角 8px
|
||
|
||
### 命令面板 Command Palette
|
||
- 快捷键 Ctrl/Cmd+K 唤起
|
||
- 居中弹窗,宽度 480px,圆角 12px
|
||
- 输入关键词,列出可执行命令(新建、搜索、跳转)
|
||
- 分组显示,选中项背景 #F0F5FF
|
||
- 遮罩 rgba(0,0,0,0.45)
|
||
|
||
### 锚点 Anchor
|
||
- 用于长页面目录导航,右侧固定
|
||
- 链接文字 14px,当前项主色 #2F54EB
|
||
- 指示条 2px 宽,品牌色
|
||
- 支持点击滚动定位、嵌套层级
|
||
|
||
### 回到顶部 BackTop
|
||
- 右下角悬浮按钮,尺寸 40×40px
|
||
- 圆形,背景白色,阴影中,图标灰色
|
||
- 悬停背景 #F0F5FF,图标品牌色
|
||
- 页面滚动超过 400px 时出现
|
||
|
||
### 水印 Watermark
|
||
- 用于敏感信息防泄露
|
||
- 可配置文字、图片水印
|
||
- 默认文字颜色 #BFBFBF,旋转 -22°,间距 100px
|
||
- 覆盖整个页面或指定区域,不影响交互
|
||
|
||
### 折叠面板 Collapse
|
||
- 用于分组展示内容,默认展开第一项
|
||
- 标题栏高度 40px,左侧箭头图标
|
||
- 展开时箭头旋转 90°,内容区下方分割线
|
||
- 支持手风琴模式(同时只展开一个)
|
||
|
||
### 日历 Calendar
|
||
- 用于日程管理、考勤、排班
|
||
- 月视图、周视图、日视图切换
|
||
- 单元格高度 100px(月视图)
|
||
- 选中日期背景品牌色,今日日期边框品牌色
|
||
- 事件显示为彩色标签条,支持拖拽
|
||
|
||
### 轮播 Carousel
|
||
- 用于运营 Banner、公告轮播
|
||
- 高度 120–200px,圆角 8px
|
||
- 指示器圆点 8px,当前项品牌色
|
||
- 支持自动播放、左右箭头、触摸滑动
|
||
|
||
### 图片预览 ImagePreview
|
||
- 点击缩略图打开大图预览
|
||
- 遮罩深色 rgba(0,0,0,0.85)
|
||
- 支持缩放、旋转、左右切换、下载
|
||
- 底部显示当前序号/总数
|
||
|
||
### 文件预览 FilePreview
|
||
- 支持 PDF、Word、Excel、PPT 在线预览
|
||
- 弹窗宽度 80%,高度 80%
|
||
- 顶部工具栏:缩放、下载、打印、关闭
|
||
- 内容区域 iframe 或 canvas 渲染
|
||
|
||
### 二维码 QRCode
|
||
- 用于扫码登录、分享、设备绑定
|
||
- 尺寸 120–240px,容错率 M
|
||
- 支持嵌入 Logo(尺寸 20%)
|
||
- 背景白色,前景黑色,支持自定义颜色
|
||
|
||
### 倒计时 Countdown
|
||
- 用于秒杀、验证码、会议开始
|
||
- 数字使用 DIN 字体,字号 20–32px
|
||
- 时间单位分隔符冒号,颜色次要文字
|
||
- 支持天/时/分/秒显示,结束时触发回调
|
||
|
||
### 步骤表单 StepForm
|
||
- 将长表单分步填写,顶部步骤条
|
||
- 每步包含表单区、操作区(上一步/下一步/提交)
|
||
- 步骤切换时校验当前步骤,未通过标红
|
||
- 最后一步显示确认信息或结果页
|
||
|
||
### 高级详情页 ProDescriptions
|
||
- 详情信息分组展示,组标题 H2
|
||
- 使用描述列表布局,支持多列
|
||
- 关键数据可高亮,金额右对齐
|
||
- 底部操作:编辑、返回、更多操作
|
||
|
||
### 登录/注册模板 LoginForm
|
||
- 居中卡片,宽度 360–400px
|
||
- 品牌 Logo 顶部,标题 20px,副标题 14px
|
||
- 输入框 40px 高,间距 16px
|
||
- 主按钮全宽 40px 高
|
||
- 底部有第三方登录、协议勾选、忘记密码链接
|
||
|
||
### 个人中心 Profile
|
||
- 左侧信息卡:头像、姓名、部门、角色
|
||
- 右侧标签页:基本信息、修改密码、通知设置、安全设置
|
||
- 信息展示使用描述列表
|
||
- 保存按钮底部右对齐
|
||
|
||
### 消息中心 MessageCenter
|
||
- 左侧分类列表:全部、未读、系统通知、任务提醒
|
||
- 右侧消息列表,行高 64px
|
||
- 未读消息左侧品牌色圆点,加粗标题
|
||
- 支持批量已读、全部已读、删除
|
||
|
||
### 任务中心 TaskCenter
|
||
- 看板视图:待办、进行中、已完成
|
||
- 任务卡片:标题、负责人头像、截止时间、优先级标签
|
||
- 支持拖拽移动任务到不同列
|
||
- 优先级:高(红)、中(黄)、低(灰)
|
||
|
||
### 审批流 ApprovalFlow
|
||
- 用于请假、报销、合同审批
|
||
- 时间轴展示审批节点:提交、审批中、通过、驳回
|
||
- 节点状态:通过绿勾、驳回红叉、当前品牌色、未开始灰色
|
||
- 支持审批意见填写、附件上传、抄送人
|
||
|
||
### 权限树 PermissionTree
|
||
- 树形结构展示权限点,节点前复选框
|
||
- 父节点半选状态,子节点全选
|
||
- 权限分组使用 Tag 区分模块
|
||
- 底部显示已选权限数量
|
||
|
||
### 组织架构图 OrganizationChart
|
||
- 树形层级展示部门与人员
|
||
- 节点卡片:头像、姓名、职位
|
||
- 连接线为直角线,颜色 #E8ECF1
|
||
- 支持展开/折叠子节点、缩放拖动画布
|
||
|
||
### 数据看板模板 DashboardTemplate
|
||
- 顶部 4 个统计卡片,每列 6 栅格
|
||
- 中间大图表(折线/柱状)占 16 栅格,右侧列表占 8 栅格
|
||
- 底部表格或趋势图
|
||
- 所有卡片圆角 8px,间距 16px,背景白色
|
||
|
||
请基于以上规范生成/设计 [具体页面或组件名称]。 |