组件概览
Parrot UI Core — 11 分类 · 300 个组件 + Composables + Directives + Utils + Design Tokens
parrotui-core/
├─ index.ts # 统一导出（300 组件 + 全部 API）
├─ components/ # 组件源码（11 分类）
│ ├─ basic/ # 基础组件 (41)
│ ├─ layout/ # 布局组件 (32)
│ ├─ form/ # 表单组件 (53)
│ ├─ data/ # 数据组件 (18)
│ ├─ chart/ # 图表组件 (14)
│ ├─ display/ # 展示组件 (18)
│ ├─ feedback/ # 反馈组件 (30)
│ ├─ navigation/ # 导航组件 (23)
│ ├─ media/ # 媒体组件 (27)
│ ├─ advanced/ # 高级组件 (24)
│ └─ utility/ # 工具组件 (20)
├─ composables/ # 组合式 API
│ ├─ useColor.ts # 颜色访问
│ ├─ useResponsive.ts # 响应式断点
│ ├─ useLocale.ts # 国际化 i18n
│ └─ useTheme.ts # 主题管理
├─ directives/ # 自定义指令
│ ├─ vcopy.ts # 剪贴板复制
│ ├─ vloading.ts # 加载状态
│ └─ vpermission.ts # 权限控制
├─ utils/ # 工具函数
│ ├─ color.ts # 颜色操作
│ ├─ dom.ts # DOM 查询 / 滚动
│ ├─ event.ts # 事件总线 / 防抖 / 节流
│ └─ validator.ts # 表单验证
├─ tokens/ # 设计令牌
│ ├─ colors.ts # 7 色系 × 10 级
│ ├─ spacing.ts # 间距规范
│ ├─ typography.ts # 字体规范
│ └─ shadows.ts # 阴影规范
├─ theme/ # 主题配置
│ ├─ light.ts # 亮色主题
│ ├─ dark.ts # 暗色主题
│ └─ adminTheme.ts # 后台管理预设
├─ locale/ # 语言包
│ ├─ zhCN.ts # 简体中文
│ └─ enUS.ts # English
└─ styles/ # 全局样式
├─ variables.css # CSS 变量定义
├─ base.css # 140+ 工具类
├─ animations.css # 16 个关键帧动画
└─ reset.css # 样式重置目录说明
| 目录 | 说明 |
|---|---|
components/basic/ | 基础 UI 元素：排版、按钮、图标、徽标、进度、开关等 (41) |
components/layout/ | 布局容器：Flex / Grid / Stack / 页面结构 / 滚动 (32) |
components/form/ | 表单控件：输入、选择、日期、上传、编辑器、穿梭框 (53) |
components/data/ | 数据展示：表格、列表、树、数据网格、时间线、日历 (18) |
components/chart/ | 数据可视化：折线、柱状、饼图、雷达、热力图、仪表盘 (14) |
components/display/ | 内容展示：JSON/YAML/Markdown/Diff 查看器、文件树 (18) |
components/feedback/ | 操作反馈：弹窗、提示、通知、加载、引导、错误页 (30) |
components/navigation/ | 导航系统：菜单、标签页、面包屑、分页、搜索、筛选 (23) |
components/media/ | 媒体处理：图片、视频、音频、相机、扫码、动画 (27) |
components/advanced/ | 高级功能：拖拽、流程图、看板、构建器、虚拟滚动 (24) |
components/utility/ | 工具组件：焦点陷阱、快捷键、全屏、主题/语言提供者 (20) |
composables/ | 4 个 Composable Hook — 颜色、响应式断点、国际化、主题 |
directives/ | 3 个自定义指令 — 剪贴板、加载状态、权限控制 |
utils/ | 4 个工具模块 — 颜色操作、DOM 查询、事件总线、表单验证 |
tokens/ | 设计令牌 — 7 色系 × 10 级渐变色、间距、字体、阴影 |
11 分类 · 300 组件清单
basic 基础组件 (41)
Color颜色 — 色块展示、主题令牌、透明度Text文本 — link / price / phone / name 模式，可复制Heading标题 — h1-h6 六级标题，4 种颜色类型Paragraph段落 — 3 种尺寸、缩进、对齐Label标签文本 — 表单标签、必填标记Caption说明文字 — 固定 22rpx，4 种颜色Code代码块 — 行号、复制按钮、暗色主题Quote引用 — 边框 / 背景 / 图标 3 种类型Number数字 — 统计卡片、趋势指示、前后缀Statistic统计数值 — 趋势、精度、千分位Counter动画计数器 — 数字递增动画Countdown倒计时 — 天/时/分/秒、自定义格式Currency货币 — 符号、千分位、5 种尺寸Percentage百分比 — 趋势箭头、涨跌配色Icon图标 — 旋转、脉冲/弹跳动画、翻转IconButton图标按钮 — circle / square / round，徽标Button按钮 — solid / outline / ghost / link / text 变体ButtonGroup按钮组 — 水平 / 垂直，相邻边框合并Link链接 — 内部/外部链接、下划线、图标Divider分割线 — 水平 / 垂直、文字分割Spacer间距 — 水平 / 垂直方向占位Badge徽标 — 数字 / 圆点 / 自定义Tag标签 — 多色、可关闭Chip标签片 — 可选中、可关闭、图标+文本Avatar头像 — 圆形 / 方形、图片 / 文字AvatarGroup头像组 — 重叠展示、+N 计数Image图片 — 加载/错误占位、圆形、预览Picture图文 — 图片+说明文字组合AspectRatio宽高比 — 比例锁定容器Skeleton骨架屏 — 加载占位动画Spinner加载旋转 — 多种旋转样式Progress进度条 — 线性进度、百分比、颜色CircularProgress环形进度 — 环形进度条、仪表盘Rating评分 — 星级/心形、半星、只读Switch开关 — 开/关切换、自定义文字Slider滑块 — 单滑块、步长、刻度RangeSlider双滑块 — 范围选择Clipboard剪贴板 — 剪贴板读写操作CopyButton复制按钮 — 一键复制、成功提示Highlight高亮 — 关键词高亮、正则匹配VisuallyHidden视觉隐藏 — 无障碍隐藏元素
layout 布局组件 (32)
Container容器 — 最大宽度、居中、内边距Flex弹性布局 — 方向、对齐、换行、间距Grid网格布局 — 行列定义、间距、响应式Stack堆叠布局 — 层叠排列、z-index 管理HStack水平堆叠 — 水平方向排列、间距VStack垂直堆叠 — 垂直方向排列、间距Center居中容器 — 水平/垂直居中Space间距容器 — 子元素统一间距Wrap自动换行 — 子元素自动换行排列DividerLayout分割布局 — 带分割线的区域布局AspectRatioLayout比例布局 — 固定宽高比的布局容器Page页面容器 — 页面级容器、滚动管理PageHeader页头 — 标题、面包屑、操作区PageFooter页脚 — 底部信息、版权、链接Section区块 — 标题+内容区块Sidebar侧边栏 — 左/右侧边栏、可折叠SidebarLayout侧边栏布局 — 侧边栏+主内容区HeaderLayout顶栏布局 — 顶部导航+主内容区FooterLayout底栏布局 — 主内容区+底部栏SplitLayout分栏布局 — 左右/上下分栏、可拖拽DashboardLayout仪表盘布局 — 侧栏+顶栏+内容CardLayout卡片布局 — 多卡片网格排列ListLayout列表布局 — 列表+详情联动MediaLayout媒体布局 — 图文混排布局ScrollView滚动视图 — 区域滚动、下拉刷新Sticky粘性定位 — 滚动吸顶/吸底Portal传送门 — 渲染到指定 DOM 节点Overlay遮罩层 — 全屏遮罩、自定义透明度SafeArea安全区域 — 适配刘海屏/底部安全区Viewport视口容器 — 视口尺寸检测FixedLayout固定布局 — 固定定位容器FloatingLayout浮动布局 — 浮动定位容器
form 表单组件 (53)
Form表单容器 — 校验、提交、重置FormItem表单项 — 标签、校验消息、布局FormLabel表单标签 — 必填标记、提示FormDescription表单描述 — 字段说明文字FormError表单错误 — 错误消息展示FormGroup表单分组 — 字段分组、标题FormField表单字段 — 受控字段封装Input输入框 — 前后缀、图标、清除Textarea文本域 — 自动高度、字数限制PasswordInput密码输入 — 显示/隐藏切换、强度NumberInput数字输入 — 步进、范围限制OtpInput验证码输入 — 多格输入、自动聚焦SearchInput搜索输入 — 搜索图标、清除、防抖UrlInput网址输入 — 协议选择、URL 验证EmailInput邮箱输入 — 邮箱格式验证PhoneInput电话输入 — 区号选择、格式化Select下拉选择 — 单选、搜索、分组MultiSelect多选下拉 — 多选、标签展示TreeSelect树形选择 — 树形结构、多选Cascader级联选择 — 多级联动、搜索Checkbox复选框 — 选中/半选/禁用CheckboxGroup复选框组 — 多选、全选Radio单选框 — 选中/禁用RadioGroup单选框组 — 排列方向、按钮样式SwitchField开关字段 — 表单绑定开关SliderField滑块字段 — 表单绑定滑块RangeSliderField范围滑块字段 — 表单绑定范围滑块RatingField评分字段 — 表单绑定评分DatePicker日期选择 — 日期选择、范围、格式TimePicker时间选择 — 时分秒选择DateTimePicker日期时间 — 日期+时间联合RangePicker范围选择 — 日期范围WeekPicker周选择 — 选择周MonthPicker月选择 — 选择月YearPicker年选择 — 选择年ColorPicker颜色选择器 — 取色、预设色板FileUpload文件上传 — 文件选择、拖拽上传ImageUpload图片上传 — 预览、裁剪、压缩Dropzone拖拽上传区 — 拖拽文件到区域上传UploadList上传列表 — 文件列表、进度、删除SignaturePad手写签名 — 触摸签名、导出图片RichTextEditor富文本编辑 — 工具栏、格式化MarkdownEditorMarkdown 编辑 — 预览、语法高亮JsonEditorJSON 编辑器 — 格式化、校验CodeEditor代码编辑器 — 语法高亮、行号TagInput标签输入 — 添加/删除标签Autocomplete自动完成 — 联想建议、异步Mention提及 — @人员、#话题Transfer穿梭框 — 左右移动、搜索DualList双列表 — 双列表选择Stepper步进器 — 数字加减WizardForm向导表单 — 分步骤填写FormArray动态表单 — 动态增删表单项
data 数据组件 (18)
Table表格 — 基础表格、排序、筛选DataTable数据表格 — 分页、搜索、导出VirtualTable虚拟表格 — 大数据量虚拟滚动TreeTable树形表格 — 树形结构表格GridTable网格表格 — 可编辑网格List列表 — 基础列表、加载更多VirtualList虚拟列表 — 大数据量虚拟滚动Tree树形控件 — 展开/折叠、选中、拖拽DataGrid数据网格 — 多列数据展示StatisticCard统计卡片 — 数值+趋势+图标Metric指标卡 — KPI 指标展示Timeline时间线 — 纵向/横向时间线Calendar日历 — 月/周视图、事件标记Schedule日程 — 日程安排、时间段ActivityFeed动态流 — 活动记录、时间线Kanban看板 — 列拖拽、卡片管理DataCard数据卡片 — 数据摘要展示Waterfall瀑布流 — 不等高瀑布流布局
chart 图表组件 (14)
Chart图表容器 — 通用图表容器、响应式LineChart折线图 — 趋势、多线、面积BarChart柱状图 — 垂直/水平、堆叠、分组PieChart饼图 — 环形、标签、图例AreaChart面积图 — 渐变填充、堆叠RadarChart雷达图 — 多维度对比ScatterChart散点图 — 气泡、聚类Heatmap热力图 — 色阶矩阵Gauge仪表盘 — 进度弧、刻度、指针Sparkline迷你图 — 行内趋势图Map地图 — 区域着色、标注GeoMap地理地图 — 经纬度标注、轨迹FunnelChart漏斗图 — 转化率、层级TreemapChart矩形树图 — 层级占比、钻取
display 展示组件 (18)
DataViewer数据查看器 — 通用数据展示JsonViewerJSON 查看器 — 折叠/展开、搜索YamlViewerYAML 查看器 — 语法高亮KeyValue键值对 — 标签+值、复制LogViewer日志查看器 — 实时日志、过滤CodeViewer代码查看器 — 只读代码展示、高亮MarkdownViewerMarkdown 渲染 — Markdown 转 HTMLDiffViewer差异对比 — 文件差异、并排/内联FileTree文件树 — 文件目录结构展示FileList文件列表 — 文件列表展示FolderTree文件夹树 — 文件夹层级FolderList文件夹列表 — 文件夹平铺MediaGallery媒体画廊 — 图片/视频网格ProductList商品列表 — 商品卡片网格UserList用户列表 — 用户信息列表NotificationList通知列表 — 通知消息列表Watermark水印 — 全局/局部水印ProfileCard个人名片 — 用户信息卡片
feedback 反馈组件 (30)
Alert警告提示 — 成功/信息/警告/错误Banner横幅 — 全宽通知条Callout标注 — 带图标的提示块Toast轻提示 — 自动消失、位置可选Message消息提示 — 全局消息、可关闭Snackbar操作提示 — 底部提示、可操作Notification通知 — 弹出通知、可关闭NotificationCenter通知中心 — 通知列表、未读标记Dialog对话框 — 确认/取消、自定义内容Modal模态框 — 遮罩、关闭、动画ConfirmDialog确认对话框 — 确认/取消操作PromptDialog输入对话框 — 带输入框的对话框FullscreenModal全屏模态 — 全屏弹出、移动端Drawer抽屉 — 侧滑面板、多方向BottomSheet底部面板 — 底部弹出、拖拽Popover气泡卡片 — 点击触发、内容丰富Tooltip文字提示 — 悬停显示、多方向HoverCard悬停卡片 — 悬停展示详情ContextMenu右键菜单 — 上下文操作菜单Loading加载 — 全局/局部加载LoadingOverlay加载遮罩 — 覆盖区域的加载ProgressBar进度条 — 操作进度反馈SkeletonLoader骨架加载 — 内容占位加载EmptyState空状态 — 无数据时的占位Result结果页 — 操作结果展示ErrorPage错误页 — 404/500 等错误页面Offline离线提示 — 网络断开提示Retry重试 — 失败重试操作Tour引导 — 功能引导、步骤提示Guide指南 — 新手引导、遮罩高亮
navigation 导航组件 (23)
Menu菜单 — 垂直/水平、子菜单MenuBar菜单栏 — 顶部菜单栏DropdownMenu下拉菜单 — 点击触发、多级MegaMenu超级菜单 — 大面板、分栏Tabs标签页 — 切换面板、懒加载TabBar标签栏 — 底部标签栏、图标+文字Breadcrumb面包屑 — 层级导航、分隔符Pagination分页 — 页码、跳转、每页条数Pager翻页器 — 简洁上一页/下一页NavBar导航栏 — 顶部导航、返回、标题TopNav顶部导航 — 桌面端顶部导航SideNav侧边导航 — 侧边栏导航、折叠BottomNav底部导航 — 移动端底部标签栏MobileNav移动导航 — 移动端汉堡菜单CommandPalette命令面板 — 快捷命令搜索SearchBar搜索栏 — 搜索建议、历史SearchDialog搜索对话框 — 全屏搜索弹窗FilterBar筛选栏 — 多条件筛选SortBar排序栏 — 排序选项切换CategoryNav分类导航 — 分类标签导航TagNav标签导航 — 标签选择导航AnchorNav锚点导航 — 页内锚点跳转FloatingMenu浮动菜单 — 悬浮操作菜单
media 媒体组件 (27)
ImageViewer图片查看 — 缩放、旋转、多图ImagePreview图片预览 — 点击预览大图ImageZoom图片缩放 — 放大镜效果ImageCropper图片裁剪 — 自由/固定比例裁剪ImageEditor图片编辑 — 滤镜、标注、裁剪Gallery图库 — 网格展示、预览Carousel走马灯 — 轮播图、自动播放SliderGallery滑动画廊 — 横向滑动浏览Lightbox灯箱 — 全屏图片浏览VideoPlayer视频播放器 — 控制栏、全屏AudioPlayer音频播放器 — 播放控制、进度MediaPlayer媒体播放器 — 通用音视频播放MediaCard媒体卡片 — 封面+标题+描述MediaGrid媒体网格 — 媒体文件网格展示Camera相机 — 拍照、扫码ScreenRecorder录屏 — 屏幕录制AudioRecorder录音 — 音频录制QRScanner二维码扫描 — 扫码识别BarcodeScanner条码扫描 — 条形码识别AvatarEditor头像编辑 — 头像裁剪上传GifPlayerGIF 播放 — GIF 动图控制LottiePlayerLottie 播放 — Lottie 动画AnimationPlayer动画播放 — CSS/JS 动画PosterGenerator海报生成 — Canvas 海报Thumbnail缩略图 — 图片/视频缩略图DocumentViewer文档预览 — PDF/Office 预览Panorama全景 — 全景图查看
advanced 高级组件 (24)
GlobalSearch全局搜索 — 跨模块搜索Spotlight聚光灯 — 快捷搜索入口KanbanBoard看板面板 — 多列拖拽看板WorkflowDesigner工作流设计器 — 流程编排FlowChart流程图 — 节点连线图MindMap思维导图 — 树形发散OrgChart组织架构图 — 层级关系图TreeEditor树编辑器 — 树形数据编辑DragList拖拽列表 — 列表项拖拽排序DragGrid拖拽网格 — 网格拖拽布局DragTree拖拽树 — 树节点拖拽SortableList可排序列表 — 拖拽排序SortableTable可排序表格 — 行拖拽排序VirtualScroller虚拟滚动 — 超长列表虚拟渲染InfiniteScroll无限滚动 — 滚动加载更多SmartTable智能表格 — 自动配置表格QueryBuilder查询构建器 — 可视化查询条件FilterBuilder筛选构建器 — 可视化筛选条件LayoutBuilder布局构建器 — 拖拽搭建布局DashboardBuilder仪表盘构建器 — 拖拽搭建仪表盘PageBuilder页面构建器 — 可视化搭建页面ThemeEditor主题编辑器 — 可视化主题定制ComponentPlayground组件演练场 — 在线调试组件LiveEditor实时编辑器 — 代码实时预览
utility 工具组件 (20)
FocusTrap焦点陷阱 — 焦点锁定在区域内ClickOutside外部点击 — 检测外部点击ResizeObserver尺寸监听 — 元素尺寸变化监听IntersectionObserver交叉监听 — 元素可见性检测ScrollLock滚动锁定 — 禁止背景滚动ScrollSpy滚动监听 — 滚动位置追踪Keybinding快捷键绑定 — 键盘快捷键注册Hotkey热键 — 全局热键管理ClipboardManager剪贴板管理 — 读写剪贴板Fullscreen全屏 — 全屏切换IdleTimer空闲计时 — 用户空闲检测VisibilitySensor可见性传感 — 组件可见性检测DeviceDetector设备检测 — 设备类型/方向检测ThemeProvider主题提供者 — 主题上下文注入LocaleProvider语言提供者 — 国际化上下文注入ConfigProvider配置提供者 — 全局配置注入ErrorBoundary错误边界 — 子组件错误捕获RenderIf条件渲染 — 声明式条件渲染Breakpoint断点检测 — 响应式断点判断MediaQuery媒体查询 — CSS 媒体查询封装