Files
aurora-admin/组件2.txt
T

200 lines
7.2 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
## 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,背景白色
请基于以上规范生成/设计 [具体页面或组件名称]。