组件总览Components · 495

固钉

将页面元素固定在可视范围某位置,滚动时保持可见。

音频播放器

音频播放器 — Chaos UI 的通用基础组件。

按钮

触发操作或事件,如提交表单、打开对话框、取消操作等。

折叠面板

折叠面板 — Chaos UI 的通用基础组件。

全局配置

为组件树提供全局配置(主题、尺寸、国际化、前缀)。

Direction

Direction — Chaos UI 的通用基础组件。

Icon

Icon — Chaos UI 的通用基础组件。

Infinite Scroll

Infinite Scroll — Chaos UI 的通用基础组件。

键盘快捷键

键盘快捷键 — Chaos UI 的通用基础组件。

Masonry

Masonry — Chaos UI 的通用基础组件。

提及输入

提及输入 — Chaos UI 的通用基础组件。

Mobile Pull Refresh

Mobile Pull Refresh — Chaos UI 的通用基础组件。

Mobile Swipe Action

```tsx <MobileSwipeAction rightActions={[{ key: "delete", label: "删除", onClick: handleDelete, color: "destructive" }]} > <Row /> </MobileSwipeAction> ```

数字跳动

数字跳动 — Chaos UI 的通用基础组件。

序列预览

序列预览 — Chaos UI 的通用基础组件。

签名板

签名板 — Chaos UI 的通用基础组件。

加载中

加载中 — Chaos UI 的通用基础组件。

分裂按钮

分裂按钮 — Chaos UI 的通用基础组件。

排版

排版 — Chaos UI 的通用基础组件。

用户选择

用户选择 — Chaos UI 的通用基础组件。

视频播放器

视频播放器 — Chaos UI 的通用基础组件。

With Permission

With Permission — Chaos UI 的通用基础组件。

宽高比

锁定内容宽高比的容器组件,常用于图片/视频占位。

分割线

区隔内容的分割线,支持水平/垂直、含文字。

弹性布局

弹性布局 — Chaos UI 的布局组件,用于组织页面区域结构。

栅格布局

栅格布局 — Chaos UI 的布局组件,用于组织页面区域结构。

栅格

栅格 — Chaos UI 的布局组件,用于组织页面区域结构。

页面容器

页面容器 — Chaos UI 的布局组件,用于组织页面区域结构。

可调整大小

可拖拽调整子面板尺寸的布局容器。

滚动区域

自定义样式的滚动区域,支持横/纵向滚动条。

分隔符

对内容区进行视觉分隔,通常为细线。

间距

间距 — Chaos UI 的布局组件,用于组织页面区域结构。

分割面板

可拖拽分割线的双栏/多栏布局容器。

锚点

跳转到页面指定位置的锚点导航,常用于目录。

回到顶部

页面右下角按钮,一键返回页面顶部。

面包屑

显示当前页面在层级结构中的位置,并能向上返回。

命令面板

类似 VS Code Ctrl+K 的命令面板,键盘驱动搜索/执行。

右键菜单

右键触发的上下文操作菜单。

状态点

小圆点状态指示器,常用于在线状态、消息提醒、列表项前。

下拉菜单

向下弹出的菜单列表,承载操作或导航选项。

导航菜单

页面层级导航菜单,支持横向/纵向、子菜单、图标。

菜单栏

水平菜单栏,通常提供多组下拉菜单。

导航菜单

导航菜单 — Chaos UI 的导航组件。

分页

数据量过多时,用分页分隔展示,每页加载部分数据。

侧边栏

侧边栏 — Chaos UI 的导航组件。

步骤条

水平步骤条,引导用户完成多步骤流程。

标签页

在同一页面切换不同内容区域的平级视图。

自动完成

输入框联想下拉,输入时实时建议匹配项。

浏览输入框

输入框右侧带浏览按钮,常用于选择文件/目录/业务对象。

日历

按照日历形式展示数据的容器,可用于日期选择或日程展示。

级联选择

从多级层级关联数据中进行选择,如省/市/区。

Chat Input

```tsx <ChatInput value={text} onChange={setText} onSend={handleSend} placeholder="发送消息" /> ```

复选框

在一组选项中进行多选,或单独表示两种状态切换。

颜色选择器

选择颜色的面板控件,支持色板、输入色值、透明度。

日期选择器

选择单个日期、日期范围或多个日期。

文件上传

通过点击或拖拽上传文件,支持多选、类型限制、预览。

表单栅格

表单栅格 — Chaos UI 的表单控件。

表单列表

表单列表 — Chaos UI 的表单控件。

表单分区

表单分区 — Chaos UI 的表单控件。

表单

表单容器,配合 FormField 实现数据收集、校验、提交。

全屏切换

全屏切换 — Chaos UI 的表单控件。

图标选择器

图标选择器 — Chaos UI 的表单控件。

输入组

输入组 — Chaos UI 的表单控件。

数字输入

专门输入数字的输入框,支持增减按钮、精度、范围限制。

搜索输入

搜索输入 — Chaos UI 的表单控件。

输入框

通过键盘输入内容,是最基础的表单字段组件。支持前缀/后缀、尺寸、状态。

标签文本

表单字段标签,支持 required 星号、字号、对齐。

Native Select

Native Select — Chaos UI 的表单控件。

验证码输入

一次性验证码输入框,多格子分别输入数字/字母,自动聚焦下一格。

单选组

单选组 — Chaos UI 的表单控件。

Schema 表单

Schema 表单 — Chaos UI 的表单控件。

选择器

下拉选项选择器,支持单选/搜索/自定义选项渲染。

序列输入

序列输入 — Chaos UI 的表单控件。

滑动输入条

在区间内拖动选择数值,比输入框更直观。

开关

开关选择器,代表两种状态之间的切换,比 Checkbox 更直观的开关形态。

标签输入框

标签输入框 — Chaos UI 的表单控件。

文本域

多行纯文本编辑控件,适用于评论、反馈、描述等较长内容输入。

开关组

开关组 — Chaos UI 的表单控件。

开关

开关 — Chaos UI 的表单控件。

树选择

从树形结构数据中选择,支持单选/多选/搜索。

手风琴

可折叠/展开的内容面板,垂直堆叠,每次可展开一个或多个。

头像

展示用户/实体头像,支持图片、图标、文字三种形式。

徽章

在右上角展示小数量或状态标记,常用于通知图标、头像、列表项。

条形码展示

条形码展示 — Chaos UI 的数据展示。

卡片

将信息聚合在卡片容器中展示,最通用的内容分组容器。

轮播

一组内容平级轮播展示,支持自动播放、指示点、箭头。

倒计时

展示倒计数字,常用于短信验证码等待、活动倒计时。

部门浏览

从组织架构中选择部门/人员,支持树状展开、搜索、多选。

描述列表

以键值对形式展示多个字段的只读详情,常见于详情页。

悬浮卡片

鼠标悬停时出现的卡片浮层,比 Tooltip 承载更多内容。

图片查看器

图片查看器 — Chaos UI 的数据展示。

图片

增强的图片组件,支持预览、加载失败占位、懒加载。

键盘按键

展示键盘按键样式的组件,用于快捷键提示。

KPI 面板

关键绩效指标面板,展示核心业务数值和趋势。

列表

列表 — Chaos UI 的数据展示。

气泡卡片

点击/悬停触发的浮层卡片,可承载富内容(表单、列表、图表),比 Tooltip 更丰富。

二维码展示

二维码展示 — Chaos UI 的数据展示。

二维码

二维码 — Chaos UI 的数据展示。

统计数值

突出展示某个统计数字,支持千分位、前缀/后缀、动画。

表格

展示行列数据,最基础的数据展示组件。

标签

用于标记和分类,小型彩色色块。

时间线

垂直展示时间流信息,如操作日志、进程跟踪。

文字提示

鼠标悬停时出现的简单文本提示,用于解释按钮/图标含义。

树形视图

树形视图 — Chaos UI 的数据展示。

虚拟列表

虚拟列表 — Chaos UI 的数据展示。

虚拟表格

虚拟表格 — Chaos UI 的数据展示。

警告对话框

需要用户确认的危险操作对话框,阻断式,含警告样式。

警告提示

静态展示需要关注的信息,非浮层。支持 default/info/success/warning/destructive 变体。

Chat Message

```tsx <ChatMessage role="user" content="你好" name="张三" time="10:00" /> ```

对话框

模态弹出框,用于需要用户处理事务的重要场景,不支持多框叠加。

抽屉

从屏幕边缘滑出的浮层面板,用于承载详情/表单等次要内容。

键盘快捷键对话框

键盘快捷键对话框 — Chaos UI 的反馈组件。

消息提供者

消息提供者 — Chaos UI 的反馈组件。

全局消息

顶部居中的轻量反馈浮层,自动消失。

模态提供者

模态提供者 — Chaos UI 的反馈组件。

通知提醒

右上角弹出的通知卡片,比 Toast 内容更丰富、驻留更久。

气泡确认框

气泡确认框 — Chaos UI 的反馈组件。

进度条

展示操作的当前进度,告知用户当前状态与剩余时长/进度。

结果页

向用户反馈操作结果(成功/失败/警告/404/403),常为整页。

面板

抽屉式底部/侧边面板,移动端常用。

骨架屏

在数据加载完成前提供占位,降低等待焦虑感。

通知提示

基于 sonner 的 opinionated 通知组件,堆叠展示在角落。

加载中

局部加载状态指示器,表示内容正在加载中。

Account Balance

Account Balance — 面向 ERP/企业场景的业务组件。

动态信息流

动态信息流 — 面向 ERP/企业场景的业务组件。

地址选择器

地址选择器 — 面向 ERP/企业场景的业务组件。

高级数据表格

高级数据表格 — 面向 ERP/企业场景的业务组件。

高级搜索

高级搜索 — 面向 ERP/企业场景的业务组件。

公告横幅

公告横幅 — 面向 ERP/企业场景的业务组件。

Announcement Card

Announcement Card — 面向 ERP/企业场景的业务组件。

Application Form

Application Form — 面向 ERP/企业场景的业务组件。

Approval Action Bar

Approval Action Bar — 面向 ERP/企业场景的业务组件。

审批流程

审批流程 — 面向 ERP/企业场景的业务组件。

审批时间线

审批时间线 — 面向 ERP/企业场景的业务组件。

Ar Ap Aging Table

Ar Ap Aging Table — 面向 ERP/企业场景的业务组件。

Area Chart

```tsx <AreaChart data={[10, 40, 25, 60, 45]} labels={["一","二","三","四","五"]} /> ``` 面积图(趋势+填充)

异步任务中心

异步任务中心 — 面向 ERP/企业场景的业务组件。

Async Task Trigger

Async Task Trigger — 面向 ERP/企业场景的业务组件。

Attachment List

Attachment List — 面向 ERP/企业场景的业务组件。

Attachment Preview

Attachment Preview — 面向 ERP/企业场景的业务组件。

Attachment Uploader

Attachment Uploader — 面向 ERP/企业场景的业务组件。

Attendance Calendar

Attendance Calendar — 面向 ERP/企业场景的业务组件。

人群分群构建器

人群分群构建器 — 面向 ERP/企业场景的业务组件。

审计日志

审计日志 — 面向 ERP/企业场景的业务组件。

审计侧栏

审计侧栏 — 面向 ERP/企业场景的业务组件。

Audit Trail Diff

Audit Trail Diff — 面向 ERP/企业场景的业务组件。

认证守卫

认证守卫 — 面向 ERP/企业场景的业务组件。

头像组

多个头像堆叠展示,显示剩余数量 +N。

Badge Delta

Badge Delta — 面向 ERP/企业场景的业务组件。

Bar Chart

```tsx <BarChart data={[{label:"Q1",value:30},{label:"Q2",value:60}]} /> ``` 柱状图(分组/堆叠/横向)

Bar List Card

```tsx <BarListCard title="销量TOP" data={[{label:"A",value:80},{label:"B",value:42}]} /> ``` 排名列表卡

Bar List

Bar List — 面向 ERP/企业场景的业务组件。

Batch Genealogy Tree

Batch Genealogy Tree — 面向 ERP/企业场景的业务组件。

Batch Print Dialog

Batch Print Dialog — 面向 ERP/企业场景的业务组件。

批量选择器

批量选择器 — 面向 ERP/企业场景的业务组件。

账单底部

账单底部 — 面向 ERP/企业场景的业务组件。

账单头部

账单头部 — 面向 ERP/企业场景的业务组件。

账单页

账单页 — 面向 ERP/企业场景的业务组件。

Bill Print Template

Bill Print Template — 面向 ERP/企业场景的业务组件。

账单状态栏

账单状态栏 — 面向 ERP/企业场景的业务组件。

Bill Timeline

Bill Timeline — 面向 ERP/企业场景的业务组件。

Bill Todo List

Bill Todo List — 面向 ERP/企业场景的业务组件。

业务状态标签

业务状态标签 — 面向 ERP/企业场景的业务组件。

Bom Tree Editor

Bom Tree Editor — 面向 ERP/企业场景的业务组件。

Browse Dialog

Browse Dialog — 面向 ERP/企业场景的业务组件。

Budget Allocator

```tsx <BudgetAllocator total={100000} categories={[ { id: "mkt", name: "市场", amount: 30000, cap: 60000 }, { id: "rnd", name: "研发", amount: 50000, cap: 80000 },

Budget Overview

Budget Overview — 面向 ERP/企业场景的业务组件。

预算节奏卡片

预算节奏卡片 — 面向 ERP/企业场景的业务组件。

批量操作工具栏

批量操作工具栏 — 面向 ERP/企业场景的业务组件。

批量导入向导

批量导入向导 — 面向 ERP/企业场景的业务组件。

Calendar View

<CalendarView events={[{id:"1",date:"2026-06-15",title:"盘点"}]} />

Callout

<Callout variant="warning" title="注意">请核对数据</Callout>

活动日历

活动日历 — 面向 ERP/企业场景的业务组件。

活动卡片

活动卡片 — 面向 ERP/企业场景的业务组件。

活动状态标签

活动状态标签 — 面向 ERP/企业场景的业务组件。

Category Bar

Category Bar — 面向 ERP/企业场景的业务组件。

渠道选择器

渠道选择器 — 面向 ERP/企业场景的业务组件。

Chart Card

<ChartCard title="月度营收" description="单位：万元">{...}</ChartCard>

Chart Suite

Chart Suite — 面向 ERP/企业场景的业务组件。

图表

图表 — 面向 ERP/企业场景的业务组件。

Chat Agent Status

Chat Agent Status — 面向 ERP/企业场景的业务组件。

Chat Artifact Panel

Chat Artifact Panel — 面向 ERP/企业场景的业务组件。

Chat Branch

Chat Branch — 面向 ERP/企业场景的业务组件。

Chat Card Message

Chat Card Message — 面向 ERP/企业场景的业务组件。

Chat Code Block

Chat Code Block — 面向 ERP/企业场景的业务组件。

Chat Command Menu

Chat Command Menu — 面向 ERP/企业场景的业务组件。

Chat Context Panel

Chat Context Panel — 面向 ERP/企业场景的业务组件。

Chat Conversation Search

Chat Conversation Search — 面向 ERP/企业场景的业务组件。

Chat Conversation

Chat Conversation — 面向 ERP/企业场景的业务组件。

Chat Feedback

Chat Feedback — 面向 ERP/企业场景的业务组件。

Chat Header

Chat Header — 面向 ERP/企业场景的业务组件。

Chat Image Gallery

Chat Image Gallery — 面向 ERP/企业场景的业务组件。

Chat Input Toolbar

Chat Input Toolbar — 面向 ERP/企业场景的业务组件。

Chat Markdown Renderer

Chat Markdown Renderer — 面向 ERP/企业场景的业务组件。

Chat Mention Picker

Chat Mention Picker — 面向 ERP/企业场景的业务组件。

Chat Message Actions

Chat Message Actions — 面向 ERP/企业场景的业务组件。

Chat Message Bubble

Chat Message Bubble — 面向 ERP/企业场景的业务组件。

Chat Message Group

Chat Message Group — 面向 ERP/企业场景的业务组件。

Chat Message Input

Chat Message Input — 面向 ERP/企业场景的业务组件。

Chat Model Switcher

Chat Model Switcher — 面向 ERP/企业场景的业务组件。

共享链接卡片

共享链接卡片 — 面向 ERP/企业场景的业务组件。

Chat Shell

Chat Shell — 面向 ERP/企业场景的业务组件。

Chat Sidebar

Chat Sidebar — 面向 ERP/企业场景的业务组件。

Chat Streaming Text

Chat Streaming Text — 面向 ERP/企业场景的业务组件。

Chat Suggest Replies

Chat Suggest Replies — 面向 ERP/企业场景的业务组件。

Chat Thinking Block

Chat Thinking Block — 面向 ERP/企业场景的业务组件。

Chat Tool Call Block

Chat Tool Call Block — 面向 ERP/企业场景的业务组件。

Chat Voice Message

Chat Voice Message — 面向 ERP/企业场景的业务组件。

Checkout Bar

Checkout Bar — 面向 ERP/企业场景的业务组件。

标签片

标签片 — 面向 ERP/企业场景的业务组件。

City Browse

City Browse — 面向 ERP/企业场景的业务组件。

代码块

代码块 — 面向 ERP/企业场景的业务组件。

代码编辑器

代码编辑器 — 面向 ERP/企业场景的业务组件。

Color Board

Color Board — 面向 ERP/企业场景的业务组件。

颜色标签

颜色标签 — 面向 ERP/企业场景的业务组件。

组合框

结合输入框和下拉列表的组合选择控件,支持自定义输入和选项匹配。

命令面板

命令面板 — 面向 ERP/企业场景的业务组件。

Commission Calculator

Commission Calculator — 面向 ERP/企业场景的业务组件。

Company Browse

Company Browse — 面向 ERP/企业场景的业务组件。

Company Picker

Company Picker — 面向 ERP/企业场景的业务组件。

Compliance Checklist

Compliance Checklist — 面向 ERP/企业场景的业务组件。

确认对话框

确认对话框 — 面向 ERP/企业场景的业务组件。

合同模板

合同模板 — 面向 ERP/企业场景的业务组件。

Cookie 横幅

Cookie 横幅 — 面向 ERP/企业场景的业务组件。

Cost Center Picker

/ Cost center picker — combobox trigger with a filterable popover. ```tsx <CostCenterPicker value="CC1" onChange={setId} options={[{ value: "CC1", label: "华东成本中

Coupon Card

Coupon Card — 面向 ERP/企业场景的业务组件。

创意预览

创意预览 — 面向 ERP/企业场景的业务组件。

Cron Editor

Cron Editor — 面向 ERP/企业场景的业务组件。

增删改查页面

增删改查页面 — 面向 ERP/企业场景的业务组件。

增删改查工具栏

增删改查工具栏 — 面向 ERP/企业场景的业务组件。

Customer 360 Card

Customer 360 Card — 面向 ERP/企业场景的业务组件。

Customer Browse

Customer Browse — 面向 ERP/企业场景的业务组件。

Customer Picker

Customer Picker — 面向 ERP/企业场景的业务组件。

Dashboard Canvas

<DashboardCanvas widgets={[{ id: "w1", title: "销售额", x: 0, y: 0, w: 6, h: 2 }]} />

仪表盘设计器

仪表盘设计器 — 面向 ERP/企业场景的业务组件。

Dashboard Grid

```tsx <DashboardGrid title="经营概览" stats={[ { label: "营收", value: 1280000, delta: 0.12 }, { label: "成本", value: 420000, delta: -0.05 }, ]} /> ```

数据表格

数据表格 — 面向 ERP/企业场景的业务组件。

日期范围选择器

日期范围选择器 — 面向 ERP/企业场景的业务组件。

Delta Bar

colored by positive/negative delta, with an accessible label. <DeltaBar value={42} maxValue={100} label="增长率" />

Department Picker

/ Department picker — combobox trigger with a filterable tree popover. ```tsx <DepartmentPicker value="D2" onChange={setId} options={[{ value: "D1", label: "总部"

字典选择

字典选择 — 面向 ERP/企业场景的业务组件。

差异表格查看器

差异表格查看器 — 面向 ERP/企业场景的业务组件。

差异查看器

差异查看器 — 面向 ERP/企业场景的业务组件。

Distributor Picker

/ Distributor picker — combobox trigger with a filterable popover. ```tsx <DistributorPicker value="D1" onChange={setId} options={[{ value: "D1", label: "华东经销A"

Dock Panel

<DockPanel side="left" collapsed={false} onToggle={() => {}}> <p>面板内容</p> </DockPanel>

Donut Card

<DonutCard data={[{label:"A",value:60,color:"#3b82f6"}]} centerLabel="总计" />

Donut Chart

```tsx <DonutChart data={[{label:"A",value:60,color:"#3b82f6"}]} /> ``` 环形图(占比)

Dynamic Form Builder

<DynamicFormBuilder schema={[{ name: "title", label: "标题", type: "text", required: true }]} />

编辑工具栏

编辑工具栏 — 面向 ERP/企业场景的业务组件。

可编辑树形表格

可编辑树形表格 — 面向 ERP/企业场景的业务组件。

Employee Picker

/ Employee picker — combobox trigger with a filterable popover. ```tsx <EmployeePicker value="E1" onChange={setId} options={[{ value: "E1", label: "张三", departm

空状态

当前没有数据时的占位展示,可搭配引导操作。

设备卡片

设备卡片 — 面向 ERP/企业场景的业务组件。

错误边界

错误边界 — 面向 ERP/企业场景的业务组件。

错误页

错误页 — 面向 ERP/企业场景的业务组件。

费用行编辑器

费用行编辑器 — 面向 ERP/企业场景的业务组件。

实验摘要

实验摘要 — 面向 ERP/企业场景的业务组件。

导出按钮

导出按钮 — 面向 ERP/企业场景的业务组件。

悬浮按钮

悬浮在页面右下角的圆形操作按钮,用于最主要的创建/新增操作。

Feature Tour

<FeatureTour open steps={[{ target:"#btn", title:"开始", content:"点击此处开始" }]} onClose={() => {}} />

Fee Type Browse

Fee Type Browse — 面向 ERP/企业场景的业务组件。

字段掩码

字段掩码 — 面向 ERP/企业场景的业务组件。

File Card

File Card — 面向 ERP/企业场景的业务组件。

文件上传管理器

文件上传管理器 — 面向 ERP/企业场景的业务组件。

筛选栏

筛选栏 — 面向 ERP/企业场景的业务组件。

筛选构建器

筛选构建器 — 面向 ERP/企业场景的业务组件。

Flow Tracker

<FlowTracker steps={[{ id:"1", name:"提交", status:"done", operator:"张三", time:"2026-01-01 09:00" }]} />

403 禁止访问

403 禁止访问 — 面向 ERP/企业场景的业务组件。

Form Designer Runtime

<FormDesignerRuntime schema={[{ id: "name", type: "text", label: "姓名", required: true }]} value={{ name: "张三" }} />

Form Designer

<FormDesigner fields={[{ id: "1", type: "text", label: "客户名称", required: true }]} onChange={(f) => console.log(f)} />

表单字段

表单字段 — 面向 ERP/企业场景的业务组件。

表单向导

表单向导 — 面向 ERP/企业场景的业务组件。

公式编辑器

公式编辑器 — 面向 ERP/企业场景的业务组件。

Funnel Chart

conversion percentages. <FunnelChart data={[{label:"访问",value:1000},{label:"下单",value:300}]} />

Gantt Chart Pro

Gantt Chart Pro — 面向 ERP/企业场景的业务组件。

Gantt Chart

<GanttChart tasks={[{id:"1",name:"设计",start:"2026-06-01",end:"2026-06-05"}]} />

Gauge Chart

```tsx <GaugeChart value={72} max={100} label="完成率" /> ``` 仪表盘图

仪表盘

仪表盘 — 面向 ERP/企业场景的业务组件。

全局加载

全局加载 — 面向 ERP/企业场景的业务组件。

热力日历

热力日历 — 面向 ERP/企业场景的业务组件。

Heatmap Chart

<HeatmapChart data={[{x:"周一",y:"上午",value:8}]} />

I18N Form Field

I18N Form Field — 面向 ERP/企业场景的业务组件。

Im Message

```tsx <ImMessage direction="sent" author="张三" content="请查收本月报表" timestamp="2026-06-30T10:00:00Z" attachments={["report.xlsx"]} /> ```

图片画廊

图片画廊 — 面向 ERP/企业场景的业务组件。

导入对话框

导入对话框 — 面向 ERP/企业场景的业务组件。

Import Error Table

Import Error Table — 面向 ERP/企业场景的业务组件。

Import Mapping Wizard

Import Mapping Wizard — 面向 ERP/企业场景的业务组件。

内联编辑

内联编辑 — 面向 ERP/企业场景的业务组件。

库存预警列表

库存预警列表 — 面向 ERP/企业场景的业务组件。

Inventory Snapshot

<InventorySnapshot items={[ { id: "s1", name: "原料A", qty: 120, status: "normal" }, { id: "s2", name: "原料B", qty: 5, status: "low" }, ]} />

Invite Link

Invite Link — 面向 ERP/企业场景的业务组件。

Invoice Manager

Invoice Manager — 面向 ERP/企业场景的业务组件。

Invoice Summary

Invoice Summary — 面向 ERP/企业场景的业务组件。

Iot Sensor Grid

Iot Sensor Grid — 面向 ERP/企业场景的业务组件。

Journal Entry Editor

Journal Entry Editor — 面向 ERP/企业场景的业务组件。

Json Editor

Json Editor — 面向 ERP/企业场景的业务组件。

JSON 查看器

JSON 查看器 — 面向 ERP/企业场景的业务组件。

看板

看板 — 面向 ERP/企业场景的业务组件。

Kanban Column

```tsx <KanbanColumn title="待处理" cards={[{ id: "c1", title: "对接支付通道" }]} onAddCard={() => {}} /> ```

KPI 卡片

KPI 卡片 — 面向 ERP/企业场景的业务组件。

Label Designer

Label Designer — 面向 ERP/企业场景的业务组件。

语言切换

语言切换 — 面向 ERP/企业场景的业务组件。

Lead Pipeline Board

Lead Pipeline Board — 面向 ERP/企业场景的业务组件。

Leave Request Form

Leave Request Form — 面向 ERP/企业场景的业务组件。

Line Chart

```tsx <LineChart series={[{name:"A",values:[10,40,30]}]} labels={["Q1","Q2","Q3"]} /> ``` 折线图(多线+标注)

行编辑器

行编辑器 — 面向 ERP/企业场景的业务组件。

加载页

加载页 — 面向 ERP/企业场景的业务组件。

维护日志

维护日志 — 面向 ERP/企业场景的业务组件。

Map Chart

markers (no real geo dependency). Markers are distributed in a deterministic grid so layout is stable. <MapChart region="华东" data={[{name:"上海",value:90},{name:"

地图标记

地图标记 — 面向 ERP/企业场景的业务组件。

地图轨迹

地图轨迹 — 面向 ERP/企业场景的业务组件。

地图视图

地图视图 — 面向 ERP/企业场景的业务组件。

Markdown Editor

Markdown Editor — 面向 ERP/企业场景的业务组件。

Marketing Activity Form

Marketing Activity Form — 面向 ERP/企业场景的业务组件。

Master Edit Template

<MasterEditTemplate title="编辑供应商" onSave={() => {}} onCancel={() => {}}> <input /> </MasterEditTemplate>

Master List Template

<MasterListTemplate title="供应商列表" onCreate={() => {}}> <table /> </MasterListTemplate>

Media Recorder

Media Recorder — 面向 ERP/企业场景的业务组件。

Meeting Room Booking

Meeting Room Booking — 面向 ERP/企业场景的业务组件。

Message List

```tsx <MessageList messages={[{ id: "m1", title: "审批通过", type: "success", time: "2026-06-30T10:00:00Z" }]} /> ```

指标趋势

指标趋势 — 面向 ERP/企业场景的业务组件。

Mobile Action Sheet

<MobileActionSheet open={open} onOpenChange={setOpen} actions={[{label:"编辑",onClick:edit},{label:"删除",onClick:del,danger:true}]} />

Mobile Camera

Mobile Camera — 面向 ERP/企业场景的业务组件。

Mobile Geolocation

Mobile Geolocation — 面向 ERP/企业场景的业务组件。

Mobile Infinite Scroll

Mobile Infinite Scroll — 面向 ERP/企业场景的业务组件。

Mobile List Item

<MobileListItem title="张三" subtitle="销售部" onClick={() => open(id)} />

Mobile Page Shell

<MobilePageShell title="订单详情" onBack={() => history.back()}> <p>内容</p> </MobilePageShell>

Mobile Picker

Mobile Picker — 面向 ERP/企业场景的业务组件。

Mobile Qrcode Scanner

Mobile Qrcode Scanner — 面向 ERP/企业场景的业务组件。

Mobile Signature

Mobile Signature — 面向 ERP/企业场景的业务组件。

Mobile Tab Bar

<MobileTabBar tabs={[{id:"home",label:"首页"},{id:"me",label:"我的"}]} activeId="home" onSelect={setTab} />

Multi Currency Input

Multi Currency Input — 面向 ERP/企业场景的业务组件。

多选

在弹出面板中选择多个选项,支持标签形式展示已选项。

通知中心

通知中心 — 面向 ERP/企业场景的业务组件。

Notification Rule Builder

Notification Rule Builder — 面向 ERP/企业场景的业务组件。

Oa Bridge

<OaBridge billId="EXP-2026-001" billType="报销单" onSubmit={async (id) => {}} />

Oee Dashboard

Oee Dashboard — 面向 ERP/企业场景的业务组件。

Operation Log

<OperationLog logs={[{ id:"1", action:"审批通过", operator:"李四", timestamp:"2026-01-01T09:00:00Z" }]} />

订单行编辑器

订单行编辑器 — 面向 ERP/企业场景的业务组件。

组织架构图

组织架构图 — 面向 ERP/企业场景的业务组件。

Overview Page

```tsx <OverviewPage title="经营总览" kpis={[{ label: "营收", value: 1280000, delta: 0.12 }]} activities={[{ id: "a1", text: "新增订单 120" }]} /> ```

页面头部

页面头部 — 面向 ERP/企业场景的业务组件。

Paste Upload

Paste Upload — 面向 ERP/企业场景的业务组件。

Payment Method Selector

Payment Method Selector — 面向 ERP/企业场景的业务组件。

Payment Result

Payment Result — 面向 ERP/企业场景的业务组件。

Payment Schedule

Payment Schedule — 面向 ERP/企业场景的业务组件。

PDF 查看器

PDF 查看器 — 面向 ERP/企业场景的业务组件。

Performance Rank Table

<PerformanceRankTable rows={[ { id: "r1", rank: 1, name: "张三", amount: 980000, growth: 0.15 }, { id: "r2", rank: 2, name: "李四", amount: 760000, growth: -0.03 },

Permission Button

```tsx <PermissionButton permission="bill:approve" permissions={["bill:approve"]} onClick={() => approve()} > 审批 </PermissionButton> ```

权限矩阵

权限矩阵 — 面向 ERP/企业场景的业务组件。

权限包装器

权限包装器 — 面向 ERP/企业场景的业务组件。

Photo Audit

<PhotoAudit photos={[{ src: "/a.jpg", alt: "收据" }]} />

Pie Chart

```tsx <PieChart data={[{label:"A",value:60,color:"#3b82f6"}]} /> ``` 饼图

数据透视表

数据透视表 — 面向 ERP/企业场景的业务组件。

Policy Line Editor

<PolicyLineEditor rows={[{ id: "1", name: "满100减20", type: "discount", condition: "≥100", reward: "-20", quota: 1000, used: 120 }]} />

Pool Tracker Table

each fund pool and renders a usage bar so finance teams can spot pools that are running low. ```tsx <PoolTrackerTable pools={[{ id: "p1", name: "运营池", total: 10

Preference Panel

Preference Panel — 面向 ERP/企业场景的业务组件。

Price Adjust Browse

Price Adjust Browse — 面向 ERP/企业场景的业务组件。

打印按钮

打印按钮 — 面向 ERP/企业场景的业务组件。

Print Service

Print Service — 面向 ERP/企业场景的业务组件。

Print Template Builder

Print Template Builder — 面向 ERP/企业场景的业务组件。

Product Browse

Product Browse — 面向 ERP/企业场景的业务组件。

Product Category Picker

Product Category Picker — 面向 ERP/企业场景的业务组件。

Promotion Rule Card

```tsx <PromotionRuleCard name="满 200 减 30" type="满减" discount={30} active /> ``` 促销规则展示卡

Promotion Rule Editor

```tsx <PromotionRuleEditor /> ``` 促销规则编辑器

提示对话框

提示对话框 — 面向 ERP/企业场景的业务组件。

Purchase Order Editor

Purchase Order Editor — 面向 ERP/企业场景的业务组件。

质检表单

质检表单 — 面向 ERP/企业场景的业务组件。

Quick Entry Grid

<QuickEntryGrid entries={[{ id: "bill", label: "新建账单", onClick: () => {} }]} />

Quotation Line Editor

Quotation Line Editor — 面向 ERP/企业场景的业务组件。

Radar Chart

```tsx <RadarChart axes={["速度","质量","成本"]} series={[{name:"A",values:[80,60,40]}]} /> ``` 雷达图(多维评估)

Radial Chart

```tsx <RadialChart value={78} label="达成率" /> ``` 径向图(达成率)

评分

评分 — 面向 ERP/企业场景的业务组件。

Rebut Node Select

<RebutNodeSelect nodes={[{ id: "n1", name: "部门审批" }]} onSelect={console.log} />

Reconciliation Line Editor

Reconciliation Line Editor — 面向 ERP/企业场景的业务组件。

Reconciliation Summary

Reconciliation Summary — 面向 ERP/企业场景的业务组件。

Red Packet

Red Packet — 面向 ERP/企业场景的业务组件。

Region Picker

Region Picker — 面向 ERP/企业场景的业务组件。

远程选择器

远程选择器 — 面向 ERP/企业场景的业务组件。

报表构建器

报表构建器 — 面向 ERP/企业场景的业务组件。

Resource Schedule

<ResourceSchedule resources={[{ id: "r1", name: "会议室 A" }]} bookings={[{ resourceId: "r1", start: "2026-06-30T09:00", end: "2026-06-30T10:00", title: "周会" }]} /

响应式预览

响应式预览 — 面向 ERP/企业场景的业务组件。

富文本编辑器

富文本编辑器 — 面向 ERP/企业场景的业务组件。

角色分配

角色分配 — 面向 ERP/企业场景的业务组件。

Rule Editor

Rule Editor — 面向 ERP/企业场景的业务组件。

Sales Order Browse

Sales Order Browse — 面向 ERP/企业场景的业务组件。

Sales Target Editor

<SalesTargetEditor rows={[{ id: "1", year: 2026, region: "华东", q1: 100, q2: 120, q3: 130, q4: 150, annual: 500 }]} />

Sankey Chart

with weighted connecting bands (pure SVG, no deps). ```tsx <SankeyChart flows={[{source:"广告",target:"下单",value:60}]} /> ``` 桑基图(流量流转)

已保存筛选

已保存筛选 — 面向 ERP/企业场景的业务组件。

Scatter Chart

```tsx <ScatterChart data={[{x:10,y:20,label:"A"}]} /> ``` 散点图

Seal Stamp Registry

Seal Stamp Registry — 面向 ERP/企业场景的业务组件。

搜索表格

搜索表格 — 面向 ERP/企业场景的业务组件。

分段控制器

分段控制器 — 面向 ERP/企业场景的业务组件。

Serial Number Manager

Serial Number Manager — 面向 ERP/企业场景的业务组件。

Settlement Status Tag

Settlement Status Tag — 面向 ERP/企业场景的业务组件。

班次日历

班次日历 — 面向 ERP/企业场景的业务组件。

Shipping Way Browse

Shipping Way Browse — 面向 ERP/企业场景的业务组件。

Sign Action Button

Sign Action Button — 面向 ERP/企业场景的业务组件。

Sku Picker

/ SKU picker — combobox trigger with a filterable popover. ```tsx <SkuPicker value="SKU1" onChange={setId} options={[{ value: "SKU1", label: "酱油 500ml", spec: "

Social Share

Social Share — 面向 ERP/企业场景的业务组件。

Spark Chart

```tsx <SparkChart data={[3,6,4,8,7,10]} /> ``` 迷你趋势图

Spc Control Chart

Spc Control Chart — 面向 ERP/企业场景的业务组件。

Sql Editor

Sql Editor — 面向 ERP/企业场景的业务组件。

统计卡片行

统计卡片行 — 面向 ERP/企业场景的业务组件。

Stat Card With Delta

```tsx <StatCardWithDelta label="月营收" value={1280000} delta={12.5} /> ``` 统计卡 + 增减标签

Stat Card With Sparkline

<StatCardWithSparkline label="日活" value="12,480" trend={8} sparklineData={[5,8,6,10]} />

统计卡片

统计卡片 — 面向 ERP/企业场景的业务组件。

状态徽章

状态徽章 — 面向 ERP/企业场景的业务组件。

状态标签

状态标签 — 面向 ERP/企业场景的业务组件。

Stock Transfer Dialog

Stock Transfer Dialog — 面向 ERP/企业场景的业务组件。

Subform Tabs

```tsx <SubformTabs /> ``` 子表单 tab

Supplier Scorecard

Supplier Scorecard — 面向 ERP/企业场景的业务组件。

Tab Crud Page

```tsx <TabCrudPage tabs={[{ id: "all", label: "全部" }, { id: "draft", label: "草稿" }]} defaultActive="all" > <TabsContent value="all">列表内容</TabsContent> </TabCru

Tab Pin

<TabPin id="tab-1" label="销售订单" pinned onPin={(id) => {}} />

Target Progress

<TargetProgress target={100000} actual={78000} period="2026 年 6 月" />

Task History

<TaskHistory tasks={[{ id:"1", type:"导出", status:"完成", startTime:"2026-01-01T09:00:00Z" }]} />

Task List Table

<TaskListTable tasks={[{ id:"1", title:"对账", status:"进行中", priority:"高" }]} />

Task Progress

<TaskProgress percent={75} status="running" message="正在生成报表…" />

Tax Detail Table

tax for each line item, with a totals footer. ```tsx <TaxDetailTable rows={[{ id: "t1", name: "商品A", amount: 1000, taxRate: 0.13, taxAmount: 130 }]} /> ```

Template Download

Template Download — 面向 ERP/企业场景的业务组件。

Territory Map

Territory Map — 面向 ERP/企业场景的业务组件。

主题切换

主题切换 — 面向 ERP/企业场景的业务组件。

时间选择器

时间选择器 — 面向 ERP/企业场景的业务组件。

Timeline View

<TimelineView events={[{ id: "e1", date: "2026-06-30", title: "创建账单" }]} />

Todo List Table

Todo List Table — 面向 ERP/企业场景的业务组件。

新手引导

新手引导 — 面向 ERP/企业场景的业务组件。

Tracking

<Tracking target={100} actual={76} label="回款率" />

穿梭框

穿梭框 — 面向 ERP/企业场景的业务组件。

Tree Crud Page

```tsx <TreeCrudPage tree={[{ id: "g1", label: "饮料", children: [{ id: "c1", label: "碳酸饮料" }] }]} defaultSelected="c1" > 详情内容 </TreeCrudPage> ``` 左树右表 CRUD

树形表格

树形表格 — 面向 ERP/企业场景的业务组件。

Treemap Chart

```tsx <TreemapChart data={[{name:"A",value:60},{name:"B",value:40}]} /> ``` 树图(层级占比)

单位换算

单位换算 — 面向 ERP/企业场景的业务组件。

用户菜单

用户菜单 — 面向 ERP/企业场景的业务组件。

UTM 构建器

UTM 构建器 — 面向 ERP/企业场景的业务组件。

Vehicle Booking

Vehicle Booking — 面向 ERP/企业场景的业务组件。

版本历史

版本历史 — 面向 ERP/企业场景的业务组件。

Warehouse Browse

Warehouse Browse — 面向 ERP/企业场景的业务组件。

Warehouse Picker

/ Warehouse picker — combobox trigger with a filterable popover. ```tsx <WarehousePicker value="W1" onChange={setId} options={[{ value: "W1", label: "中央仓", code

Waterfall Chart

absolute totals when `absolute` is true. ```tsx <WaterfallChart data={[{label:"期初",value:100},{label:"收入",value:40},{label:"支出",value:-20}]} /> ``` 瀑布图(财务分析)

水印

在内容上叠加指定文字/图片水印,用于版权标识。

Work Order Card

Work Order Card — 面向 ERP/企业场景的业务组件。

Workflow Designer

<WorkflowDesigner nodes={[{ id: "n1", type: "start", name: "开始" }]} edges={[{ from: "n1", to: "n2" }]} />

Workflow Preview

<WorkflowPreview nodes={[ { id: "n1", name: "提交申请", status: "done" }, { id: "n2", name: "主管审批", status: "active" }, ]} edges={[{ from: "n1", to: "n2" }]} />

Writeoff Browse

Writeoff Browse — 面向 ERP/企业场景的业务组件。

Writeoff Flow

status 取值：done | doing | pending | rejected <WriteoffFlow steps={[ { id: "s1", name: "申请核销", status: "done", amount: 1200 }, { id: "s2", name: "财务复核", status: "

移动端认证布局

移动端认证布局 — 面向 ERP/企业场景的业务组件。

移动端底部导航

移动端底部导航 — 面向 ERP/企业场景的业务组件。

移动端按钮

移动端按钮 — 面向 ERP/企业场景的业务组件。

移动端卡片

移动端卡片 — 面向 ERP/企业场景的业务组件。

Mobile Checkout

Mobile Checkout — 面向 ERP/企业场景的业务组件。

移动端仪表盘布局

移动端仪表盘布局 — 面向 ERP/企业场景的业务组件。

移动端数据表格

移动端数据表格 — 面向 ERP/企业场景的业务组件。

移动端对话框

移动端对话框 — 面向 ERP/企业场景的业务组件。

移动端空状态

移动端空状态 — 面向 ERP/企业场景的业务组件。

移动端筛选构建器

移动端筛选构建器 — 面向 ERP/企业场景的业务组件。

移动端表单字段

移动端表单字段 — 面向 ERP/企业场景的业务组件。

移动端表单向导

移动端表单向导 — 面向 ERP/企业场景的业务组件。

移动端表单

移动端表单 — 面向 ERP/企业场景的业务组件。

移动端输入

移动端输入 — 面向 ERP/企业场景的业务组件。

移动端看板

移动端看板 — 面向 ERP/企业场景的业务组件。

移动端 KPI 卡片

移动端 KPI 卡片 — 面向 ERP/企业场景的业务组件。

移动端导航

移动端导航 — 面向 ERP/企业场景的业务组件。

移动端页面头部

移动端页面头部 — 面向 ERP/企业场景的业务组件。

移动端下拉刷新

移动端下拉刷新 — 面向 ERP/企业场景的业务组件。

移动端选择器

移动端选择器 — 面向 ERP/企业场景的业务组件。

Mobile Share Sheet

Mobile Share Sheet — 面向 ERP/企业场景的业务组件。

移动端面板

移动端面板 — 面向 ERP/企业场景的业务组件。

移动端骨架屏

移动端骨架屏 — 面向 ERP/企业场景的业务组件。

移动端滑动操作

移动端滑动操作 — 面向 ERP/企业场景的业务组件。

Mobile Swipe Card

Mobile Swipe Card — 面向 ERP/企业场景的业务组件。

移动端标签页

移动端标签页 — 面向 ERP/企业场景的业务组件。

移动端文本域

移动端文本域 — 面向 ERP/企业场景的业务组件。

管理后台面包屑

管理后台面包屑 — 系统级布局外壳,用于后台/仪表盘/认证等整页布局。

管理后台头部

管理后台头部 — 系统级布局外壳,用于后台/仪表盘/认证等整页布局。

Admin Shell

Admin Shell — 系统级布局外壳,用于后台/仪表盘/认证等整页布局。

管理后台侧边栏

管理后台侧边栏 — 系统级布局外壳,用于后台/仪表盘/认证等整页布局。

管理后台标签页

管理后台标签页 — 系统级布局外壳,用于后台/仪表盘/认证等整页布局。

应用外壳

应用外壳 — 系统级布局外壳,用于后台/仪表盘/认证等整页布局。

Article Layout

```tsx <ArticleLayout title={<h1>指南</h1>} toc={<Toc />}> <p>正文内容…</p> </ArticleLayout> ```

认证布局

认证布局 — 系统级布局外壳,用于后台/仪表盘/认证等整页布局。

空白布局

空白布局 — 系统级布局外壳,用于后台/仪表盘/认证等整页布局。

Chat Layout

Chat Layout — 系统级布局外壳,用于后台/仪表盘/认证等整页布局。

仪表盘布局

仪表盘布局 — 系统级布局外壳,用于后台/仪表盘/认证等整页布局。

详情布局

详情布局 — 系统级布局外壳,用于后台/仪表盘/认证等整页布局。

弹窗表单主体

弹窗表单主体 — 系统级布局外壳,用于后台/仪表盘/认证等整页布局。

Embed Layout

Embed Layout — 系统级布局外壳,用于后台/仪表盘/认证等整页布局。

错误布局

错误布局 — 系统级布局外壳,用于后台/仪表盘/认证等整页布局。

主次布局

主次布局 — 系统级布局外壳,用于后台/仪表盘/认证等整页布局。

主次标签布局

主次标签布局 — 系统级布局外壳,用于后台/仪表盘/认证等整页布局。

打印布局

打印布局 — 系统级布局外壳,用于后台/仪表盘/认证等整页布局。

Print Template Layout

```tsx <PrintTemplateLayout title="出库单"> <InvoiceBody /> </PrintTemplateLayout> ```

公共布局

公共布局 — 系统级布局外壳,用于后台/仪表盘/认证等整页布局。

区域布局

区域布局 — 系统级布局外壳,用于后台/仪表盘/认证等整页布局。

Split Screen

Split Screen — 系统级布局外壳,用于后台/仪表盘/认证等整页布局。

顶部栏

顶部栏 — 系统级布局外壳,用于后台/仪表盘/认证等整页布局。

Wizard Layout

```tsx <WizardLayout steps={[{ id: "info", title: "信息" }, { id: "confirm", title: "确认" }]} current={0} > <StepBody /> </WizardLayout> ```