组件总览

500+ 个内置 SVG 图标，类型化 name，React / Vue 组件直接内联渲染。

5 种 variant、3 种尺寸、2 种语义色、loading 态。

3 种 variant、3 种尺寸，可清空、prefix/suffix、错误态。

原生 input role=switch 语义保留，支持 loading 与禁用态。

3 种尺寸、indeterminate 半选状态，原生 input 语义保留。

Radio + RadioGroup 组合，单选互斥，键盘可达。

与 Input 同色系，autoResize、字符计数、resize 控制。

options 配置式 API，clearable、键盘导航、disabled item。

树形数据下拉选择，支持搜索、多选、清空与禁用节点。

预设 search 图标 + 清空按钮 + 可选快捷键提示。

+/− 步进、min/max/step 约束、键盘上下、自动 clamp。

单值范围拖拽，刻度、气泡、键盘 ←→↑↓ 全支持。

把多个 Input/Button/Select/静态标签拼到一起，共用一组外圆角和边框。

固定格子数字输入，自动跳格、Backspace 退格、整段粘贴自动分配。

表单封装层，统一 label / 提示 / 错误显示，把现有 input 接进来。

Select 的可输入变体，键入即过滤选项，可选择允许新增条目。

多标签输入控件，回车追加、退格删除、粘贴批量导入、可校验。

拖拽 + 点击双触发，内置文件列表、进度条与 reject 回调。

编辑 HTTP headers / query params / 环境变量等键值对，可启用开关与说明列。

在 textarea 中输入 @ 触发候选下拉，键盘 ↑↓ Enter / Tab 选择。

HSV 调色板 + 色相 / 透明度滑块 + HEX / RGB / HSL 输入 + 预设色块。

搜索并选择内置 SVG 图标，适合菜单配置、仪表盘和属性面板。

月历面板，日 / 月 / 年三视图切换，min/max/disabledDate 约束，可清除。

双月并列展示，hover 预览，近 7 / 30 / 90 天快捷预设。

嵌入式月视图，可显示周序号，与 DatePicker 共享日期工具。

多级选项的逐列展开选择器，路径式选取，常用于地区 / 部门 / 分类。

触发器 + 时分秒三列滚动面板，支持 HH:mm 与 HH:mm:ss 两种精度。

两栏列表 + 中间箭头，把元素在「可选 / 已选」之间移动，支持搜索。

两个 TimePicker 组合，选择「开始 – 结束」时间区间。

组件化管理 direction / align / justify / gap / wrap，减少内联样式。

自适应栅格，支持固定列数、最小卡片宽度、间距 token 与 dense 排布。

3 种 variant、Header / Body / Footer 三段式、可交互整卡。

标题 + 描述 + 面包屑 + 操作区 + 工具栏 + 标签页一体的页头容器。

header + sidebar + main + aside + footer 的 CSS Grid 布局，整站脚手架。

拖拽中间分隔条调整两侧面板尺寸，横竖两向、键盘可达。

3 种 variant、5 种 tone、3 种尺寸、可关闭与圆角。

独立 pill 或贴在子元素角落，dot/count 两种形态，超出溢出 +。

图片 / 缩写 / 图标三态自动 fallback，AvatarGroup 重叠排版。

通用列表，单选 / 多选、分组、卡片化、自定义渲染。

dt / dd 风格键值展示，横竖布局、多列、可描边。

数字 + 标签 + 趋势的指标卡片，dashboard 必备。

列定义式 API、列排序、行选择、3 种 variant、自定义渲染。

重型表格 — 列拖拽调宽、单元格双击编辑、固定表头滚动。

行 × 列二维聚合 + 自动合计 + 可选热力着色 + drill-down。

A1 风格可编辑网格，方向键 / Tab / Enter / F2 + Cmd+C/V 与系统剪贴板互通。

嵌套树形展示，单选 / 复选框（带级联）、展开 / 折叠、自定义图标。

显示快捷键的微小排印控件，支持组合键 + 自定义分隔符。

4 种 variant、自动识别外部链接、可禁用、设计稿一致的样式。

InlineCode + CodeBlock，支持标题、语言标签、行号、复制按钮。

锁定子元素宽高比的容器，图片 / 视频 / 嵌入帧占位。

星级评分，整数 / 半星精度、可只读 / 禁用、可显示数值。

文章侧边目录，按 depth 缩进，可手动指定或自动跟随阅读位置。

主题化滚动条容器，gutter stable + overscroll contain。

折叠式 JSON 树视图，按值类型上色，支持深度展开与类型徽标。

对两个 JSON 值做行级 LCS diff，按 add / del / eq 三态着色。

多列卡片看板，HTML5 拖拽在列间移动卡片，支持 WIP 限额与列强调色。

带 shimmer 加载占位、错误回退与原生懒加载的图片容器。

横向轮播图片或自定义内容，自动播放、循环、指示点、左右控制。

大字号数字 + 千分位 / 前后缀 / 倒计时，dashboard 顶部指标。

顺序事件流，每条带圆点 / 连线 / 时间戳，变更日志与流水审计。

横向时间轴 + 多行任务条，today 标线 / 周末高亮 / 拖拽缩放 / 依赖箭头。

横向匀速滚动，公告条 / 滚动消息 / logo 墙，悬停可暂停。

全屏图片查看器，滚轮缩放 + 鼠标拖拽 + 键盘 +/− / 0 / Esc 控制。

在长文本中高亮匹配关键字，搜索结果列表 / 命中标记必备。

多行文本溢出省略 + 可选「展开/收起」，仅在确实溢出时才显示按钮。

独立倒计时，支持 DD/HH/mm/ss/SSS 占位，归零回调。

52 周 × 7 天网格，按数值强度着色，活跃度 / 提交统计。

纯客户端零依赖编码，自动选版本 1–40，4 档纠错等级。

零依赖矢量地图底座，支持 marker、区域覆盖物、路线与点击事件。

line / segmented / pill 三种 variant、受控与非受控、items 数组式 API。

链路当前位置，最后一项不可点，分隔符可自定义。

数字按钮 + 上下页 + 跳转输入，自动算省略号。

items 数组式 API，键盘 ↑↓ Enter Esc 全支持，可分组与危险操作。

多步流程进度，3 种 variant、横竖两向、可点击切换。

竖直主导航，分组、嵌套子菜单、徽标、可收起为图标模式。

顶部水平导航栏，每项可挂富面板（多列链接 + 描述）。

Tabs segmented variant 的语义化别名，视图 / 时段切换专用。

显式锚点列表，滚动时高亮当前小节，点击平滑跳转。

横/竖分割线，3 种线型，可带标签和位置控制。

列表/表格/搜索结果为空时占位，可带图标和操作按钮。

线性 / 圆形进度条，5 种语义色，支持不确定状态。

旋转环加载图标，3 档尺寸 × 6 种 tone，可选文字标签。

单/多展开模式，3 种边框样式（bordered / flush / separated）。

滚动超过阈值后浮现的固定按钮，点击平滑回到容器顶部。

滚动经过元素时切换为固定定位，工具条 / 锚点 / 提交栏吸顶。

在内容容器上叠加倾斜重复的文字水印，追溯泄漏来源。

固定在视口角落的圆形按钮，可挂 tooltip 与 badge。

滚到底部时自动触发加载下一页，基于 IntersectionObserver。

分步高亮关键 UI 元素 + 解释气泡，新功能上线时引导用户。

内置 portal、focus trap、滚动锁、ESC/遮罩关闭、进出动画。

4 种 placement、自动避让边缘、hover 与 focus 双触发，不阻塞鼠标。

imperative API + 一次挂载的 Toaster，5 种语义、6 个位置、自动关闭。

4 种 tone × 3 种 variant，inline 静态消息，可带标题、图标、关闭按钮。

text / circle / rect 三种形状，shimmer 动画，多行文本占位辅助。

Modal 的边缘变体，上下左右滑入；共用 portal / focus trap / 滚动锁。

Tooltip 的可交互变体，内部支持任意富内容、表单、按钮。

顶部全宽通告条，6 种 tone × 2 种 variant、可关闭、可吸顶。

操作完成 / 失败 / 异常状态的整页反馈，支持 404 / 403 / 500 占位。

轻量代码编辑容器：textarea + 行号 + Tab 缩进。重型语法/补全请接 Monaco/CodeMirror。

行级 LCS diff，支持 split / unified 双模式，行号 + +/- 标识。

内置最小 markdown 渲染器，支持 split / edit / preview 三种模式。

实时编译 + 测试匹配，错误友好提示，flags 用 chip 切换。

解析 ANSI 转义序列渲染为彩色 span，纯展示，不依赖 xterm.js。

桌面应用窗口顶栏。macOS 风格 traffic light + 居中标题；Windows / Linux 风格 min/max/close 按钮 + 左对齐。

编辑器底栏。三段（左 / 中 / 右）槽位，6 种语义色调。

应用顶部菜单栏（File / Edit / View 风格），支持快捷键、分隔符、危险项。

通知历史面板，自带未读计数、全部已读、清空控件。

全屏覆盖式应用级搜索，支持分类切换 + 分组列表 + path / badge / shortcut。

递归 split + tabbed pane 的桌面应用布局壳。v1 声明式，v2 加入拖拽重排。

可拖拽的浮动面板，Teleport 到 body。配合 TearOffTab / DockLayout 的 detach 动作使用。

角落锚定的可折叠检查器面板，常用于性能监视、调试信息浮窗。

Tab 拖拽超过阈值时触发 tear-off 事件；消费方决定是 spawn DetachedPanel 还是新窗口。

只渲染可见行 + overscan；支持固定 / 变高；十万行无掉帧。

2D 虚拟滚动 + 自动列数（minColumnWidth）；图片墙 / 卡片墙首选。

多列 + 行树形展开；chevron + indent；childrenKey 自定义；rowKey 自定义。

CSS columns 实现，零 JS 布局开销；自动列数或固定列数；SSR 友好。

壳层 + FilterSection 子项；可选「已保存视图」横排；统一 apply/reset footer。

选中浮条：N selected + 自定义 action + 清空按钮；3 种 position。

表格列显隐 + 拖拽排序 + pin left/right；locked 列灰显不可改。

展开式 FAB；4 方向、5 位置、click/hover 触发；hover 显示标签。

自动滚到底部、stickToBottom、role/date 分组、“回到最新”浮动按钮。

user/assistant/system 三 role；sending/sent/streaming/error 四态；hover 工具条。

多行输入、附件、/ 命令、@ mention、Enter/Cmd+Enter 提交、loading stop 按钮。

SSE token-by-token 渲染、闪烁光标、轻量 markdown 解析（粗体/斜体/code）。

可折叠推理 trace；标题显示 “Thought for X.Xs”；status 切换自动收起。

展示一次 tool call：name / input / output / status / duration；error 红 X + 红框。

AI 生成的代码 / SVG / HTML / 图片 / CSV / JSON 统一容器；含 copy / download / open。

行内引用 chip，hover 弹出来源卡（标题 + 域名 + snippet + 打开链接）。

按 provider 分组；capability badge；context window pill；description 副文本。

已用 / 限额进度条；多段拆解（cached / fresh / system / completion）；自动 warning / error。

多停靠点（snap points）、grabber 拖动、下滑关闭、iOS 安全区适配。

scrollTop=0 时启动；弹性阻尼、阈值反馈、受控刷新状态。

列表行左右滑暴露 action rail；velocity/threshold 吸附；点外关闭。

三档 size、3 种 variant、extended pill、hideOnScroll、badge、safe-area。

App 底部路由级 tab；line / fill 激活样式、badge、safe-area。

label / 必填星标 / hint / 错误信息 / 控件容器的统一外壳；vertical 与 horizontal 两种布局。

基于容器宽度的栅格；按断点指定列数；不依赖 viewport 媒体查询。

标题 / 描述 / 锚点 / 可折叠；长表单分段。

字段数组声明式生成表单；搭配 useFormValidation 完成校验、提交、重置。

SVG 缩略地图 + 视口矩形；零依赖、无 canvas。

GeoJSON 区域按值填色；sequential / diverging / 自定义色阶；含 tooltip 和图例。

起点→终点弧线 + 箭头；value 自动映射线宽；可叠加底图。

XYZ 瓦片 + pointer 拖动 + 滚轮缩放，默认走 OSM；向子组件注入 Web Mercator 投影。

按值开方映射半径的点位图；独立使用或叠加在 MapTile 上。

canvas KDE 渲染的密度热图；与日历 CalendarHeatmap 不是一回事。

网格聚合把密集标记合并成数字气泡；点击拿回成员做下钻。

color / size 两种模式 + 连续 / 分级；角落覆盖层或内联。

按 lat + zoom 自动算”米/像素”，挑整齐刻度；km / mi 切换。

three.js 高程网格渲染；水深 / 陆地 / 冲淤色阶 + OrbitControls + 点击拾取。three 作为 optional peerDep 按需装。

通用 pointer-events 重排序，列表 / 网格 / 横向 chip 都能用；邻居自动让位。

把任意内容包成拖拽源；type 字符串匹配 Droppable.accept。

按 accept 过滤；暴露 isOver / canDrop 给作用域插槽。

Teleport 到 body 的跟手浮层，订阅全局 store 渲染自定义 ghost。

行拖拽重排的轻量表格，grid 布局 + 首列手柄；不取代 Table。

协作场景的头像行：颜色按 id 哈希、self 加粗 ring、away 半透明、+N 折叠。

把远端用户光标 + 名字标签叠加到工作区；颜色按 user id 哈希。

三圆点 bouncing；prefers-reduced-motion 退化为静态。

点 + 外圈扩散；在线 / live / 健康状态指示。

多步骤计划：每步 status / 时长 / 可折叠详情；Agent runbook / 运维流程通用。

Tree-of-Thoughts 可视化：每节点带 score；selected 路径加粗；子树折叠。

单 agent 行动流：thought / tool / action / observation / message / error 节点。

层级矩形性能图；点击 zoom-in，hover 显示 value 与占比；颜色按 category / 名字哈希。

终端风格日志流：level 着色、search 高亮、自动跟随底部、用户滚开后出现「跳到底部」。

macOS 风格终端面板：三圆点 + 等宽内容 + 行级 command / output / error 着色。

字段 + 操作符 + 值的可视化过滤；导出可序列化的 AND/OR AST。

类 DevTools Network：method/url/status/size/time 列；点击行展开 headers + body。

瀑布式请求时序，phases 分段着色显示 dns/connect/wait/receive 构成。

canvas + pointer 平滑签名；暴露 clear/toDataURL/toBlob 给业务调用。

签名板 + 调色板 + 笔刷尺寸 + 橡皮 + 撤销/重做/清空；笔画可序列化。

归一化坐标钉点；点空白添加、拖动改坐标、选中删除。

SVG overlay 渲染矩形 / 圆形热区；悬停高亮 + label tooltip。

紧凑播放器；传 peaks 渲染波形进度，否则退化为细横条。

HTML5 video 之上的控件栏：播放/进度/音量/倍速/全屏；overlay 插槽。

行内微缩走势线，常用于 KPI 卡的趋势线。

多 series 折线图，支持平滑曲线、网格线、x/y 轴标签。

OHLC 蜡烛图，涨绿跌红，wick + body。

中空饼图，可在中心放数值/标签。

逐层收窄的转化漏斗，每层显示绝对值。

层级矩形面积图，slice-and-dice 单层布局。

节点 + 加权边的流向图，节点高度 = 流量。

二维散点，可按 group 分色。

统计分布的 5 数概要 + outliers。

多维度对比的多边形图，支持多 series。

多组密度曲线垂直堆叠。

圆环型当前值仪表，4 种 tone。

数值 + 单位 + 涨跌 + 内嵌 sparkline 趋势。

横向请求阶段瀑布图，每段一个 phase。

二维矩阵热力图，绿→黄→红 OKLCH 色相 lerp。

节点 + 边的关系图，圆周等距默认布局。

可嵌入任何 SVG 图表的十字定位线 + tooltip 工具。

图表头部工具条：标题 + legend 切换 + zoom/export/refresh 按钮。

柱 + 折线双 Y 轴组合，营收 + 增长率 / PV + 跳出率这类业务报表头牌。

降序柱 + 累计百分比线 + 80/20 参考线，ABC 分析 / 客服归因标配。

A → B 两点连线，做版本对比 / AB 测试 / 季度回顾，方向一眼就看出来。

径向柱状图，循环数据（24 小时 / 7 天 / 12 月）天然贴合圆周表达。

变宽堆叠柱，列宽 × 段高同时表达双维度占比，市场结构分析利器。

中心轴对称的横向对比柱，敏感度分析 / 人口金字塔 / 男女对比。

螺旋排布关键词，按频次缩放字号；标签、评论高频词、技术栈展示。

2 集合 / 3 集合重叠，用户交叉、标签共现、AB 实验覆盖一图说清。

居中堆叠面积，时序构成演变有机表达，比传统堆叠更平衡。

多维数据折线穿越平行 Y 轴，探索性分析 / 异常实例定位。

KDE 近似分布形状 + 内嵌四分位区间，比箱线图更能看到峰型。

环形多节点关系/流量图，节点弧长 = 总流量，弦 = 双向流量。

2D 密度分箱，大量散点正确表达密度而不被遮盖。

左右对称条形图，人口年龄结构 / 性别对比 / 资金流入流出。

N×N 相关系数热图，正蓝负橙强度饱和度表达，EDA 标配。

节点一字排开 + 半圆弧连边，服务依赖图 / 词义共现网络。

多层正弦波填充动画，KPI / 进度 / 库存余量的走心动效。

SSE / MQTT / Kafka / gRPC 4 个 tab 的协议监视器外壳。

HAR / Hex / PCAP / Cert / Cookie 5 个 tab 的网络抓包面板。

Editor / Console / History 3 个 tab 的 SQL 工作台外壳。

Terminal / Output / CommandLine 3 个 tab 的终端面板外壳。

Crash Dialog / Stack Trace / Dump Uploader / Safe Mode 4 个 tab。

Card / Manifest / Permission / Marketplace 4 个 tab 的插件中心面板。

Collection / Request / Response / Mock / Workflow 5 个 tab 的 API 调试面板。

First-Run Wizard / Hotspot Tour / Full Flow 3 个 tab 的引导流外壳。

总览

表单

容器

数据展示

导航

布局与状态

反馈与覆盖层

编辑器

系统壳层

多窗口布局

数据 / 列表

AI 对话

移动端 / 触控

表单进阶

地图扩展

交互地图

拖拽 / Drag & Drop

协作 / Agent 可视化

开发者工具

媒体 / 标注

数据可视化

模版 / 页面模块

组件总览的讨论