Ely-GPUI-Components/gpui-components.md

GPUI 组件库完整组件清单

覆盖场景：代码编辑器 / IDE、文档与知识库、股票与金融平台、AI 桌面、AI 对话平台、设计工具、数据库与开发工具、IM 与邮件、项目管理、媒体、系统工具等桌面应用。

---

1. 基础原语（Primitives）

• Box / View — 最底层容器
• Text — 纯文本渲染
• Icon — 矢量图标
• IconSet / IconRegistry — 图标集注册与按名称加载
• Svg — 任意 SVG 渲染
• Image — 图片（加载中、失败、占位）
• Canvas — 自定义绘制区域
• Divider / Separator — 水平 / 垂直分割线
• Spacer — 弹性占位
• Portal — 渲染到顶层图层
• Overlay / Backdrop — 遮罩层
• Slot — 插槽 / 组件组合
• Show / When — 条件渲染
• For / Each — 列表渲染辅助
• Fragment — 无包裹分组
• VisuallyHidden — 仅屏幕阅读器可见
• FocusRing — 焦点环
• FocusScope / FocusTrap — 焦点作用域与限制
• ClickOutside — 外部点击检测
• HoverArea — 悬停检测区域
• Pressable — 可按压区域（按下态、长按）
• KeyboardHandler — 键盘事件区域
• Measure — 尺寸测量
• ResizeObserver — 尺寸变化监听
• IntersectionObserver — 可见性监听
• Clipboard — 剪贴板读写
• Tooltip Trigger — 通用提示触发器

---

2. 排版（Typography）

• Heading（H1–H6）
• Title / Subtitle
• Paragraph
• Label
• Caption
• Overline
• Code（行内代码）
• Kbd — 快捷键显示（支持 ⌘ / Ctrl 平台差异）
• KbdCombo — 组合键显示（⌘ + Shift + P）
• Blockquote
• Highlight / Mark — 高亮文本（搜索匹配）
• Truncate — 单行截断
• LineClamp — 多行截断
• MiddleEllipsis — 中间省略（长文件路径）
• EllipsisTooltip — 截断后悬停显示全文
• Link — 链接
• ExternalLink — 外部链接（带图标）
• RelativeTime — 相对时间（3 分钟前）
• DateTimeText — 格式化时间
• NumberText — 数字格式化（千分位、精度）
• CurrencyText — 货币显示
• PercentText — 百分比显示
• FileSizeText — 文件大小（KB / MB / GB）
• DurationText — 时长（01:23:45）
• PluralText — 复数处理
• CopyableText — 可复制文本
• SelectableText — 可选中文本
• Emoji — 表情渲染
• Latex / MathInline — 行内公式
• AnimatedNumber — 数字滚动动画
• Typewriter — 打字机效果文本
• GradientText — 渐变文字
• ShimmerText — 闪光文字（加载中）

---

3. 布局（Layout）

• Stack / HStack / VStack
• Flex
• Grid / GridItem
• SimpleGrid — 等宽响应网格
• Masonry — 瀑布流
• Center
• Container — 最大宽度约束容器
• AspectRatio
• Inset / Padding 容器
• Wrap — 自动换行布局
• Absolute / Positioned — 绝对定位容器
• Layer / ZStack — 层叠
• ScrollArea — 自定义滚动区域
• Scrollbar — 可样式化滚动条（悬停显示、覆盖式）
• ScrollShadow — 滚动边缘阴影
• ScrollToTop — 回到顶部
• StickyHeader — 吸顶
• SplitPane — 可拖拽分栏（水平 / 垂直 / 嵌套）
• ResizablePanel / ResizablePanelGroup
• ResizeHandle — 拖拽手柄
• Collapsible — 可折叠区域
• Accordion / AccordionItem
• Card / CardHeader / CardBody / CardFooter
• Panel / PanelHeader
• Section / SectionHeader
• Group / Fieldset
• Frame — 带边框区域
• Well — 内嵌凹陷区域
• Sidebar — 可折叠侧边栏
• Drawer — 抽屉
• Sheet — 边缘滑出面板
• Page / PageHeader / PageContent
• AppShell — 应用骨架（标题栏 + 侧栏 + 内容 + 状态栏）
• MasterDetail — 主从布局（列表 + 详情）
• ThreeColumnLayout — 三栏布局（邮件 / IM）
• Dock / DockPanel — 可停靠面板系统（上下左右停靠、浮动、合并为标签组）
• DockZone / DropIndicator — 停靠拖拽指示区域
• FloatingPanel — 浮动面板
• Pane / PaneGroup — 编辑器分屏
• Workspace — 工作区布局持久化
• Viewport — 画布视口（缩放平移）

---

4. 窗口与桌面外壳（Window & Shell）

• TitleBar — 自定义标题栏（可拖动区域）
• WindowControls — 最小化 / 最大化 / 关闭（macOS 红绿灯、Windows、Linux 样式）
• TrafficLights — macOS 风格窗口按钮
• WindowDragRegion — 窗口拖拽区域
• WindowResizeBorder — 无边框窗口缩放边缘
• MenuBar — 应用菜单栏（文件 / 编辑 / 视图…）
• NativeMenu 适配层
• Toolbar / ToolbarGroup / ToolbarSeparator
• StatusBar / StatusBarItem — 底部状态栏
• ActivityBar — 侧边图标导航（VS Code 风格）
• NavigationRail
• TabBar（窗口级）
• SplashScreen — 启动页
• AboutDialog — 关于窗口
• TrayIcon / TrayMenu — 系统托盘
• DockBadge — Dock / 任务栏角标
• JumpList — 任务栏快捷菜单
• SystemNotification — 系统级通知桥接
• MultiWindow Manager — 多窗口管理
• WindowSwitcher — 窗口切换器
• QuickLauncher — 快速启动器（类 Spotlight / Raycast）
• MiniWindow / CompactMode — 迷你模式窗口
• AlwaysOnTop 浮窗
• PictureInPicture — 画中画窗口
• UpdateBanner / UpdateDialog — 应用更新提示
• CrashReporter — 崩溃报告界面
• OfflineIndicator — 离线状态
• ZoomControl — 界面缩放

---

5. 按钮与操作（Buttons & Actions）

• Button（primary / secondary / outline / ghost / subtle / danger / link）
• IconButton
• ButtonGroup
• SplitButton — 主按钮 + 下拉
• DropdownButton / MenuButton
• ToggleButton
• ToggleGroup
• SegmentedControl
• FloatingActionButton
• LoadingButton — 带加载态
• ConfirmButton — 二次确认按钮（按住确认 / 点击两次）
• HoldToConfirm — 长按确认
• CopyButton — 复制并反馈
• ShareButton
• CloseButton
• BackButton
• MoreButton（…）
• ActionBar — 底部 / 浮动操作栏
• BulkActionBar — 批量选择后操作栏
• ActionSheet
• QuickActions — 快捷动作列表
• ShortcutHint — 按钮上附带快捷键提示

---

6. 表单输入（Form Inputs）

文本类

• Input / TextField
• TextArea（自动增高、最大行数）
• PasswordInput（显示 / 隐藏）
• SearchInput（清除、搜索历史）
• NumberInput（步进、键盘上下、拖拽改值）
• ScrubInput — 拖拽改数值（设计工具风格）
• CurrencyInput
• PercentInput
• UnitInput — 带单位输入（px / % / em）
• EmailInput
• UrlInput
• PhoneInput（区号）
• MaskedInput — 格式掩码
• PinInput / OTPInput
• InlineEdit / EditableText — 点击即编辑
• InputGroup / InputAddon — 前后缀
• ClearableInput
• AutoResizeInput
• MentionInput — @ 提及
• HashtagInput
• TagInput / TokenInput
• KeyValueInput — 键值对编辑
• ListInput — 可增删的字符串列表
• PathInput — 文件路径输入 + 浏览
• RegexInput — 正则输入（带校验高亮）
• ExpressionInput — 公式 / 表达式输入
• HotkeyInput / ShortcutRecorder — 快捷键录制

选择类

• Checkbox（含半选态）
• CheckboxGroup
• CheckboxCard
• Radio / RadioGroup
• RadioCard
• Switch / Toggle
• Select
• NativeSelect
• Combobox — 可搜索下拉
• Autocomplete
• MultiSelect
• CascadeSelect / Cascader — 级联选择
• TreeSelect — 树形选择
• TransferList — 穿梭框
• ListBox — 列表选择
• ChoiceChips / FilterChips
• Rating
• Slider
• RangeSlider
• VerticalSlider
• Knob / Dial — 旋钮（音频类）
• Stepper（数值加减）

日期时间

• Calendar
• DatePicker
• DateRangePicker
• TimePicker
• DateTimePicker
• MonthPicker / YearPicker / QuarterPicker
• WeekPicker
• RelativeDatePicker（最近 7 天、本月…）
• TimezoneSelect
• DurationPicker
• CronEditor — 定时规则编辑

颜色

• ColorPicker（HSV / RGB / HEX / Alpha）
• ColorSwatch
• ColorPalette
• EyeDropper — 取色器
• GradientEditor

文件

• FilePicker / FileInput
• FolderPicker
• DropZone — 拖拽上传区域
• UploadList — 上传进度列表
• ImageUpload（带预览、裁剪）
• AvatarUpload

其他

• SignaturePad — 签名板
• CodeInput — 单行代码输入（带高亮）
• JsonInput — JSON 输入（校验）
• FontPicker
• IconPicker
• EmojiPicker
• LanguageSelect
• CountrySelect
• CurrencySelect

表单结构

• Form
• FormField
• FormLabel（必填标记、帮助图标）
• FormDescription / HelperText
• FormError / ValidationMessage
• FormSection
• FormActions
• FieldArray — 动态字段组
• InlineForm
• WizardForm / MultiStepForm
• DirtyIndicator — 未保存改动提示

---

7. 导航（Navigation）

• Tabs（顶部 / 左侧 / 底部）
• EditorTabs — 可关闭、可拖拽排序、可固定、预览标签（斜体）、未保存圆点、溢出菜单
• TabOverflowMenu
• Breadcrumb（可点击每级展开同级下拉）
• Pagination
• LoadMore
• Stepper / Steps / Wizard
• Sidebar Navigation / NavItem / NavGroup
• NavigationMenu
• ActivityBar Item（带角标）
• BackForwardNavigation — 前进后退
• History Navigation
• Anchor / TableOfContents 导航
• JumpTo / GoToLine
• CommandPalette — 命令面板（分组、最近使用、模糊匹配高亮）
• QuickOpen — 快速打开文件
• QuickSwitcher — 快速切换（文档 / 会话 / 项目）
• SearchPalette — 全局搜索
• SpotlightSearch
• Tour / Onboarding 导航点

---

8. 菜单（Menus）

• Menu / MenuItem / MenuGroup / MenuSeparator
• SubMenu — 级联子菜单
• CheckboxMenuItem
• RadioMenuItem
• MenuItemShortcut — 右侧快捷键
• MenuItemIcon
• ContextMenu — 右键菜单
• DropdownMenu
• MenuBar Menu
• OverflowMenu（…）
• MegaMenu
• SearchableMenu — 带搜索框的菜单
• PieMenu / RadialMenu — 环形菜单

---

9. 浮层（Overlays）

• Tooltip（延迟、跟随鼠标、富内容）
• Popover
• HoverCard — 悬停卡片（用户信息、链接预览）
• Dialog / Modal
• AlertDialog
• ConfirmDialog
• PromptDialog — 输入对话框
• FullscreenDialog
• Sheet
• Drawer
• Lightbox
• Spotlight / Coachmark — 聚焦引导
• FloatingToolbar — 选中后浮动工具栏
• Callout / Peek — 内联浮窗（类 Peek Definition）
• DropdownPanel
• InlinePopup
• ToastViewport — 通知容器

---

10. 反馈（Feedback）

• Toast（成功 / 失败 / 警告 / 信息 / 带操作 / 可撤销）
• Notification — 带标题、正文、操作
• NotificationCenter — 通知中心列表
• Alert（inline）
• Banner — 顶部横幅
• Callout / Admonition（提示、注意、危险）
• InlineMessage
• StatusMessage
• Snackbar
• UndoToast — 撤销提示
• ErrorView — 错误页
• ErrorBoundary
• NotFound / 404
• NoPermission / 403
• Maintenance — 维护中
• Offline — 离线
• EmptyState（无数据 / 无搜索结果 / 首次使用）
• Result — 结果页（成功 / 失败）
• ConfirmationCard
• SavingIndicator — 保存中 / 已保存
• SyncStatus — 同步状态
• ConnectionStatus — 连接状态
• Countdown — 倒计时
• Timer

---

11. 加载与动画（Loading & Motion）

加载

• Spinner（圆环、点阵、条形、脉冲等多种样式）
• DotsLoader — 三点跳动
• BarsLoader
• PulseLoader
• RingLoader
• OrbitLoader
• WaveLoader
• Skeleton / SkeletonText / SkeletonAvatar / SkeletonCard / SkeletonTable
• Shimmer — 流光效果
• ProgressBar（确定 / 不确定 / 分段 / 缓冲）
• ProgressCircle / ProgressRing
• StepProgress
• LoadingOverlay — 覆盖式加载
• LoadingScreen — 全屏加载
• InlineLoader
• LazyLoad — 延迟加载容器
• Suspense / AsyncView — 异步加载状态封装
• RefreshIndicator
• TypingIndicator — 正在输入

动画与过渡

• Transition（fade / slide / scale / collapse）
• AnimatePresence — 进出场动画
• Motion — 声明式动画
• Spring — 弹簧动画
• Stagger — 交错动画
• Reorder — 列表重排动画
• Flip — 布局变化动画
• CountUp — 数字递增
• Marquee — 跑马灯
• Ripple — 点击波纹
• Confetti — 彩带庆祝
• Glow / Pulse — 发光 / 呼吸
• Blink / Flash — 闪烁（价格变化）
• Shake — 抖动（校验失败）
• ParticleBackground
• AnimatedGradient
• Lottie Player

---

12. 数据展示（Data Display）

• Badge / CountBadge / DotBadge
• Tag / Chip（可关闭、可选择）
• Avatar（图片 / 首字母 / 图标 / 在线状态）
• AvatarGroup — 堆叠头像
• UserChip — 头像 + 名字
• Statistic / KPI Card
• Metric — 指标 + 趋势
• TrendIndicator — 上涨 / 下跌箭头
• DescriptionList
• PropertyGrid — 属性面板（IDE / 设计工具）
• KeyValueList
• InfoRow
• Timeline / TimelineItem
• ActivityFeed — 动态流
• Changelog
• Carousel
• Gallery
• Accordion 列表
• Card Grid
• QRCode
• Barcode
• ColorSwatch 展示
• Meter — 容量条（磁盘、配额）
• Gauge
• UsageBar — 分段用量条
• Rating 展示
• Comparison — 对比视图
• BeforeAfter — 前后对比滑块
• Watermark

---

13. 列表与树（Lists & Trees）

• List / ListItem（主文本、副文本、前后缀、操作）
• VirtualList — 虚拟滚动（可变高度）
• InfiniteList — 无限滚动
• SortableList — 拖拽排序
• SelectableList — 单选 / 多选 / Shift 范围选
• GroupedList — 分组列表 + 分组吸顶
• SectionList
• ReorderableList
• SwipeableListItem
• Tree / TreeView（展开、多选、拖拽、懒加载、重命名、键盘导航）
• VirtualTree — 大数据量树
• FileTree — 文件树（图标、Git 状态、过滤）
• CheckboxTree
• Outline — 大纲
• NestedList
• DirectoryListing — 目录列表视图
• Menu List
• Transfer List

---

14. 表格（Tables）

• Table（基础）
• DataTable — 排序、筛选、分页、选择
• VirtualTable — 百万行虚拟滚动
• DataGrid — 可编辑单元格（类 Excel）
• Spreadsheet — 电子表格（公式、合并单元格、冻结、填充柄）
• TreeTable — 树形表格
• PivotTable — 透视表
• ColumnResizer — 列宽拖拽
• ColumnReorder — 列拖拽排序
• ColumnVisibility — 列显示控制
• ColumnPinning — 冻结列
• RowSelection
• RowExpansion — 展开行详情
• RowGrouping — 分组行
• InlineRowEdit
• CellRenderer（文本 / 数字 / 标签 / 进度 / 迷你图 / 头像 / 链接）
• TableToolbar（搜索、过滤、导出、密度切换）
• FilterBuilder — 高级筛选构建器
• SortBuilder
• AggregationFooter — 汇总行
• TableDensity — 紧凑 / 标准 / 宽松
• ConditionalFormatting — 条件格式（红绿色阶）
• HeatmapTable
• ComparisonTable

---

15. 通用图表（Charts）

• LineChart
• AreaChart / StackedArea
• BarChart（水平 / 垂直 / 堆叠 / 分组）
• PieChart / DonutChart
• ScatterChart
• BubbleChart
• RadarChart
• HeatmapChart
• CalendarHeatmap（贡献图）
• Treemap
• Sunburst
• SankeyChart
• FunnelChart
• WaterfallChart
• BoxPlot
• Histogram
• ViolinPlot
• GanttChart
• NetworkGraph / ForceGraph
• ChordDiagram
• ParallelCoordinates
• Sparkline / SparkBar / SparkArea
• Bullet Chart
• ProgressChart
• RealtimeChart — 实时流数据图
• ChartLegend
• ChartTooltip
• ChartCrosshair
• ChartAxis / ChartGrid
• ChartZoom / Brush — 缩放与区间选择
• ChartAnnotation — 标注
• ChartExport

---

16. 金融与股票平台（Finance & Trading）

行情

• CandlestickChart — K 线图
• OHLCChart
• HeikinAshiChart
• LineQuoteChart — 分时图
• VolumeChart — 成交量
• DepthChart — 深度图
• MarketProfile / VolumeProfile
• RenkoChart / PointAndFigure
• MultiChartLayout — 多图联动布局
• ChartSync — 多图十字光标同步
• TimeRangeSelector（1m / 5m / 1H / 1D / 1W / 1M / YTD / 5Y）
• IntervalSelector
• ChartTypeSwitcher

技术分析

• IndicatorOverlay（MA / EMA / BOLL / VWAP）
• IndicatorPane（MACD / RSI / KDJ / OBV）
• IndicatorSelector
• DrawingTools — 画线工具（趋势线、水平线、斐波那契、矩形、文字标注）
• DrawingToolbar
• CompareSymbol — 叠加对比
• PriceAlertLine — 价格预警线

报价与盘口

• Ticker / TickerTape — 滚动行情条
• QuoteCard — 报价卡片
• PriceText — 涨跌颜色、闪烁
• PriceChangeBadge
• OrderBook — 买卖盘口（深度条）
• Level2 Quotes
• TimeAndSales / TradeTape — 逐笔成交
• MarketDepthLadder / DOM — 价格阶梯
• SpreadIndicator
• BidAskBar

交易

• OrderEntry / TradePanel — 下单面板（限价、市价、止损、条件单）
• QuickTradeButtons — 快速买卖
• PositionTable — 持仓
• OrderTable — 委托
• TradeHistoryTable — 成交记录
• PnLDisplay — 盈亏显示
• LeverageSlider
• MarginIndicator
• RiskMeter
• OrderConfirmDialog
• OptionChain — 期权链
• GreeksTable
• PayoffDiagram — 期权损益图

市场与资产

• Watchlist — 自选列表（分组、拖拽、实时刷新）
• SymbolSearch — 代码搜索
• SymbolBadge — 股票代码标签
• MarketHeatmap — 板块热力图
• SectorTreemap
• Screener / FilterPanel — 选股器
• MarketOverview — 大盘概览
• IndexCard
• MarketStatus — 开盘 / 收盘 / 盘前盘后
• TradingSessionClock
• EconomicCalendar
• EarningsCalendar
• NewsFeed — 财经新闻流
• SentimentGauge
• PortfolioSummary
• AssetAllocationChart
• PerformanceChart（收益曲线、回撤）
• DividendTable
• FinancialStatementTable — 财报表格
• CurrencyConverter
• CryptoWalletCard
• TransactionList
• Candle Countdown — K 线倒计时

---

17. 代码编辑器与 IDE（Code Editor & IDE）

编辑器核心

• CodeEditor — 语法高亮、多光标、选区、撤销重做
• EditorGutter — 行号、折叠箭头、断点、Git 标记、诊断图标
• LineNumbers（绝对 / 相对）
• FoldingControl
• Minimap
• Ruler / IndentGuide — 标尺、缩进参考线
• BracketMatcher / RainbowBrackets
• WhitespaceRenderer
• CursorRenderer（块状 / 线条 / 下划线、闪烁）
• SelectionHighlight
• MultiCursor
• VimModeIndicator
• StickyScroll — 作用域吸顶
• Breadcrumb（符号路径）
• InlayHints — 内联提示
• CodeLens — 代码上方操作
• InlineDecoration — 波浪线、背景色
• GhostText — AI 灰色补全文本
• InlineChat — 行内 AI 对话
• InlineDiff — 行内差异
• ReadOnlyBanner

智能提示

• CompletionMenu — 自动补全（图标、类型、文档预览）
• SignatureHelp — 参数提示
• HoverInfo — 悬停文档
• QuickFix / CodeActionMenu — 灯泡菜单
• RenameInput — 行内重命名
• PeekView — 查看定义 / 引用
• ReferencesPanel
• SymbolOutline
• GoToSymbol
• CallHierarchy / TypeHierarchy

搜索

• FindWidget — 查找（大小写、全词、正则）
• ReplaceWidget
• SearchPanel — 全局搜索结果（按文件分组）
• SearchResultItem（匹配高亮、预览）
• SearchFilters（包含 / 排除 glob）

面板

• ProblemsPanel / DiagnosticsList
• OutputPanel
• DebugConsole
• ExtensionsPanel / PluginList
• SettingsEditor（UI + JSON 双模式）
• KeybindingsEditor
• ThemePreview
• WelcomePage
• RecentProjects
• ProjectSwitcher
• TaskRunner / RunConfiguration

状态栏项

• CursorPosition（Ln / Col）
• LanguageMode
• Encoding
• LineEnding
• IndentSettings
• BranchIndicator
• LspStatus
• NotificationBell

---

18. 终端（Terminal）

• Terminal — 终端模拟器（ANSI 颜色、真彩、光标、滚动缓冲）
• TerminalTabs
• TerminalSplit
• TerminalToolbar
• TerminalSearch
• TerminalLink — 可点击路径 / URL
• ShellSelector
• CommandBlock — 命令分块（类 Warp）
• CommandHistory
• AnsiText — ANSI 文本渲染
• LogViewer — 日志查看器（级别过滤、跟随、高亮）
• ProcessList

---

19. 版本控制（Git / VCS）

• DiffViewer — 并排 / 统一视图
• InlineDiff
• ThreeWayMerge — 三方合并
• ConflictResolver
• ChangesList — 暂存 / 未暂存
• CommitInput — 提交信息输入
• CommitGraph — 提交图谱
• CommitList / CommitItem
• BranchSelector
• BranchList
• TagList
• StashList
• BlameView / GitBlameAnnotation
• FileHistory
• PullRequestCard
• ReviewComment
• DiffStat（+12 −3）
• GitStatusBadge（M / A / D / U）

---

20. 调试与运行（Debug）

• DebugToolbar（继续、单步、步入、步出、停止）
• BreakpointList
• BreakpointGutter
• CallStack
• VariablesPanel（树形展开）
• WatchPanel
• ThreadList
• MemoryViewer / HexViewer
• Disassembly
• PerformanceProfiler / Flamegraph
• TimelineProfiler
• NetworkInspector
• ConsoleREPL

---

21. 文档与富文本（Documents & Rich Text）

编辑

• RichTextEditor
• MarkdownEditor（所见即所得 / 源码 / 分屏）
• BlockEditor — 块编辑器（类 Notion）
• Block 类型：段落、标题、列表、待办、引用、代码、分割线、表格、图片、视频、嵌入、公式、Callout、折叠块、列布局、同步块
• BlockHandle — 块拖拽手柄
• SlashMenu — 斜杠命令
• FloatingFormatToolbar — 选中格式工具栏
• FixedFormatToolbar — 固定工具栏
• LinkEditor — 链接编辑浮窗
• MentionMenu — @ 提及
• EmojiAutocomplete
• TableEditor — 表格编辑（增删行列、合并）
• ImageEditorBlock（缩放、对齐、说明文字）
• MathEditor / LatexBlock
• MermaidBlock / DiagramBlock
• CodeBlockEditor
• TodoItem / Checklist
• PlaceholderText — 空块提示
• WordCount / CharacterCount
• ReadingTime

阅读

• MarkdownRenderer
• DocumentViewer
• PDFViewer（缩略图、搜索、缩放、标注）
• EpubReader
• OfficePreview（docx / xlsx / pptx 预览）
• PageThumbnailList
• TableOfContents（滚动联动高亮）
• DocumentOutline
• Footnote
• Glossary / TooltipTerm
• ReadingProgress
• FocusMode / ZenMode
• PrintPreview

知识库

• PageTree — 页面层级树
• Backlinks — 反向链接
• GraphView — 双链关系图
• PageCover / PageIcon
• PageProperties — 页面属性（数据库字段）
• DatabaseView（表格 / 看板 / 画廊 / 日历 / 时间线视图）
• TemplatePicker
• TrashBin / 回收站
• VersionHistory — 版本历史
• PageHistoryDiff
• Favorites / Pinned

---

22. 协作（Collaboration）

• PresenceAvatars — 在线协作者
• RemoteCursor — 他人光标
• RemoteSelection — 他人选区
• CommentThread
• CommentBubble / CommentMarker
• CommentSidebar
• Reply / ReactionPicker
• Reactions（表情回应）
• Annotation / Highlight 批注
• SuggestionMode — 修订模式
• TrackChanges — 修订记录
• ShareDialog — 分享 & 权限
• PermissionSelect（可查看 / 可评论 / 可编辑）
• InviteInput
• AccessList
• ActivityLog
• FollowMode — 跟随他人视图
• LiveIndicator

---

23. AI 对话平台（AI Chat）

消息

• ChatContainer
• MessageList（虚拟化、自动滚动到底部、新消息提示）
• MessageBubble（用户 / 助手 / 系统 / 错误）
• MessageAvatar
• MessageHeader（模型名、时间）
• MessageFooter
• StreamingText — 流式渲染（平滑、光标）
• StreamingMarkdown — 增量 Markdown 解析渲染
• StreamingCursor — 流式输出光标
• CodeBlock（语言标签、复制、下载、运行、折叠、应用到文件）
• MathBlock
• TableBlock
• MermaidRenderer
• ImageMessage / ImageGrid
• FileMessage
• AudioMessage
• VideoMessage
• LinkPreviewCard
• QuoteReply — 引用回复
• MessageActions（复制、重新生成、编辑、点赞、点踩、朗读、分享）
• MessageEditor — 编辑已发送消息
• BranchNavigator（< 2/3 >）— 分支切换
• RegenerateButton
• StopGeneratingButton
• ContinueButton
• ErrorMessage / RetryMessage
• RateLimitNotice
• FeedbackForm — 反馈表单
• ScrollToBottomButton
• DateSeparator
• ThinkingBlock / ReasoningPanel — 可折叠思考过程
• ThinkingIndicator — 思考中动画
• ThinkingDuration（已思考 12 秒）

引用与检索

• CitationBadge / InlineCitation（[1]）
• SourceCard
• SourceList / SourcesPanel
• SearchProgress — 搜索中（显示正在搜索的关键词）
• WebResultCard
• DocumentChunkPreview

输入

• PromptInput / Composer（多行、快捷键发送、Shift 换行）
• AttachmentButton
• AttachmentChip / AttachmentPreview
• PasteImagePreview
• DragDropOverlay — 拖入文件遮罩
• VoiceInputButton
• VoiceWaveform / RecordingIndicator
• SlashCommandMenu
• PromptTemplateMenu
• ContextMentionMenu（@文件 / @文档 / @网页）
• ContextChips — 已附加上下文
• ModelSelector（能力标签、上下文长度）
• ModeSelector（对话 / 搜索 / 深度研究 / Agent）
• ToolToggleMenu（启用联网、代码执行等）
• TemperatureSlider / ParameterPanel
• SystemPromptEditor
• TokenCounter
• ContextWindowMeter — 上下文使用率
• CostEstimator
• SendButton（发送 / 停止 两态）
• InputHint（按 Enter 发送）

会话管理

• ConversationList（按时间分组：今天、昨天、7 天内）
• ConversationItem（重命名、删除、置顶、导出）
• ConversationSearch
• NewChatButton
• FolderList / ProjectList
• ProjectKnowledgePanel — 项目知识库
• SharedConversationView
• ConversationExport

引导

• WelcomeScreen / Greeting
• SuggestionChips / StarterPrompts
• PromptLibrary
• FollowUpSuggestions — 追问建议
• CapabilityCards

---

24. AI Agent 与工具调用（Agent）

• ToolCallCard — 工具调用（名称、参数、结果、耗时、状态）
• ToolCallGroup — 多个调用折叠
• ToolApprovalDialog — 执行前审批
• PermissionPrompt（允许一次 / 始终允许 / 拒绝）
• AgentStepList / TaskTimeline — 执行步骤
• AgentPlan / TodoList — 计划清单（实时勾选）
• AgentStatus（规划中 / 执行中 / 等待 / 完成 / 失败）
• AgentProgress
• SubAgentTree — 子 Agent 层级
• FileChangeCard — 文件变更预览（接受 / 拒绝）
• MultiFileDiff Review
• CommandExecutionCard — 命令执行 + 输出
• BrowserPreview / ScreenshotStream — Agent 浏览器画面
• ComputerUseViewer
• ArtifactPanel — 产物面板（代码、文档、网页预览）
• ArtifactVersionSwitcher
• LivePreview — 实时预览
• SandboxStatus
• MCPServerList / ConnectorList
• ToolRegistry Panel
• MemoryPanel — Agent 记忆管理
• CheckpointList / Rewind — 检查点回滚
• InterruptButton
• HumanInputRequest — Agent 请求用户输入
• TokenUsageChart
• CostBreakdown
• TraceViewer — 调用链追踪
• EvalResultTable

---

25. AI 创作与生成（Generative）

• ImageGenerationPanel
• GenerationQueue — 生成队列
• GenerationGrid — 结果网格
• VariationPicker
• PromptEnhancer
• NegativePromptInput
• StylePresetPicker
• SeedInput
• AspectRatioPicker
• InpaintCanvas — 局部重绘画布
• MaskBrush
• ImageCompare
• AudioGenerationPlayer
• VideoGenerationTimeline
• TTSVoicePicker
• ModelCard — 模型信息卡
• ModelDownloadManager — 本地模型下载
• ModelStatus（已加载 / 加载中 / GPU 占用）
• HardwareMonitor（GPU / VRAM / CPU）
• FineTuneJobCard
• DatasetViewer
• EmbeddingVisualizer（2D / 3D 散点）
• PromptPlayground — 提示词调试台
• PromptDiff / PromptVersionHistory
• ABCompareView — 多模型对比

---

26. 媒体（Media）

• ImageViewer（缩放、平移、旋转、适配）
• ImageCropper
• ImageAnnotator
• ImageThumbnail
• Lightbox / Gallery Viewer
• VideoPlayer（播放、进度、倍速、字幕、全屏、画中画）
• VideoTimeline / Scrubber
• VideoThumbnailStrip
• AudioPlayer
• AudioWaveform
• AudioSpectrum / Visualizer
• VolumeControl
• PlaybackSpeedControl
• MediaControls
• Playlist
• SubtitleEditor
• ScreenRecorderControls
• CameraPreview
• MicLevelMeter
• DeviceSelector（麦克风 / 摄像头 / 扬声器）
• 3DModelViewer

---

27. 文件管理（Files）

• FileExplorer — 文件浏览器（列表 / 图标 / 分栏视图）
• FileGrid
• FileList
• FileItem（图标、名称、大小、修改时间）
• FileIcon — 按扩展名自动图标
• FilePreview / QuickLook
• FileBreadcrumb / PathBar
• FolderTree
• FileContextMenu
• RenameInline
• DragDropFiles
• FileOperationProgress — 复制 / 移动进度
• TransferQueue — 上传下载队列
• DownloadManager
• StorageUsage
• RecentFiles
• Favorites / Bookmarks
• FileSearch
• DuplicateFinder 视图
• ArchiveViewer（zip 内容）
• HexViewer

---

28. 即时通讯（IM / Messaging）

• ChannelList / ChatList
• ChannelItem（未读数、静音、置顶）
• DirectMessageItem
• MessageThread
• ThreadPanel — 话题侧栏
• ChatMessage（连续消息合并、时间戳）
• UnreadDivider — 新消息分割线
• MessageReactions
• ReadReceipt — 已读回执
• TypingIndicator
• MemberList
• UserProfileCard
• OnlineStatus（在线 / 离开 / 忙碌 / 离线）
• StatusSetter — 自定义状态
• VoiceCallBar
• VideoCallGrid
• ScreenShareView
• CallControls（静音、摄像头、挂断、共享）
• ParticipantTile
• IncomingCallDialog
• StickerPicker
• GifPicker
• PinnedMessages
• ChannelHeader
• HuddleIndicator

---

29. 邮件（Mail）

• MailboxList / FolderList
• MailList（未读粗体、星标、附件图标）
• MailItem
• MailReader
• MailComposer（收件人、抄送、密送、附件）
• RecipientInput
• MailThreadView — 会话视图
• QuotedText — 折叠引用
• SignatureEditor
• LabelPicker
• SnoozePicker
• ScheduleSend
• InboxZeroState

---

30. 日历与日程（Calendar）

• CalendarMonthView
• CalendarWeekView
• CalendarDayView
• AgendaView
• YearView
• MiniCalendar
• EventCard / EventChip
• EventEditor
• EventPopover
• TimeGrid — 时间网格（拖拽创建、调整时长）
• AllDayRow
• CurrentTimeIndicator
• RecurrenceEditor — 重复规则
• AvailabilityPicker
• TimezoneOverlay
• ReminderPicker
• AttendeeList

---

31. 项目与任务管理（Project Management）

• KanbanBoard / KanbanColumn / KanbanCard
• TaskList
• TaskItem（复选、优先级、截止日期、负责人）
• TaskDetailPanel
• SubtaskList
• GanttChart / TimelineView
• Roadmap
• Sprint Board
• Burndown Chart
• PriorityIndicator
• StatusSelect
• AssigneePicker
• DueDatePicker
• LabelManager
• IssueCard
• IssueIdBadge（ENG-123）
• MilestoneProgress
• WorkloadView
• TimeTracker
• Pomodoro Timer

---

32. 设计与画布工具（Canvas & Design）

• InfiniteCanvas — 无限画布（缩放、平移）
• CanvasGrid / Guides — 网格与参考线
• Ruler — 标尺
• SelectionBox — 选框
• TransformHandles — 缩放旋转手柄
• SnapIndicator — 吸附提示
• LayerPanel — 图层面板
• AssetPanel
• InspectorPanel — 属性检查器
• AlignmentToolbar
• ToolPalette — 工具箱
• ZoomControls / ZoomIndicator
• MiniMap（画布）
• ArtboardFrame
• ShapeTools（矩形、椭圆、多边形、线条、箭头）
• PenTool / PathEditor
• TextTool
• BrushTool / BrushSettings
• ColorPanel
• GradientPanel
• ShadowEditor
• BorderEditor
• TypographyPanel
• ConstraintsEditor
• AutoLayoutControls
• ExportPanel
• NodeEditor / NodeGraph — 节点编辑器（ComfyUI / 蓝图风格）
• Node / Port / Edge / Connection
• FlowChart / DiagramEditor
• MindMap
• Whiteboard
• StickyNote
• Connector Line
• HistoryPanel — 操作历史

---

33. 数据库与开发工具（DB & Dev Tools）

• ConnectionManager — 数据库连接管理
• ConnectionForm
• SchemaTree — 库 / 表 / 字段树
• QueryEditor — SQL 编辑器
• QueryResultGrid
• QueryHistory
• QueryPlanViewer — 执行计划
• TableStructureEditor
• ERDiagram — 实体关系图
• IndexManager
• RedisKeyBrowser
• DocumentViewer（MongoDB / JSON）
• JsonViewer / JsonTree（折叠、路径复制、搜索）
• JsonEditor
• YamlViewer
• XmlViewer
• ApiRequestBuilder（方法、URL、Headers、Body、Auth）
• ResponseViewer（状态码、耗时、大小、美化）
• HeadersTable
• QueryParamsEditor
• EnvironmentSelector — 环境变量切换
• CollectionTree — 请求集合
• WebSocketConsole
• GraphQLExplorer
• RegexTester
• Base64 / Encoder 工具面板
• ColorContrastChecker
• ContainerList（Docker）
• PodList（K8s）
• ResourceMonitor

---

34. 监控与仪表盘（Dashboard & Monitoring）

• Dashboard Grid — 可拖拽调整的仪表盘网格
• Widget / DashboardCard
• StatCard
• MetricsChart
• AlertList
• IncidentCard
• UptimeBar — 可用性条
• ServiceStatus
• HealthCheck Indicator
• LogStream
• TraceWaterfall
• EventStream
• ResourceGauge（CPU / 内存 / 磁盘 / 网络）
• SystemMonitor
• ProcessTable
• NetworkGraph（实时速率）
• MapView / GeoHeatmap
• WorldMap
• RefreshIntervalSelector
• DashboardFilterBar

---

35. 设置与偏好（Settings）

• SettingsLayout — 左侧分类 + 右侧内容
• SettingsSection
• SettingsRow（标题、描述、控件）
• SettingsSearch
• ThemeSelector（亮 / 暗 / 跟随系统）
• AccentColorPicker
• FontSizeControl
• FontFamilySelect
• DensitySelector
• LanguageSelector
• KeyboardShortcutsList
• ShortcutEditor
• ProxySettings
• StorageSettings / CacheClear
• PrivacySettings
• NotificationSettings
• StartupSettings
• ImportExportSettings
• ResetToDefault
• AdvancedSettings / FeatureFlags
• DeveloperMode Toggle

---

36. 账户与用户（Account）

• LoginForm
• SignupForm
• OAuthButtons
• MagicLinkForm
• TwoFactorInput
• ForgotPassword
• ProfileCard
• ProfileEditor
• AccountSwitcher — 多账户切换
• WorkspaceSwitcher / OrgSwitcher
• UserMenu — 头像下拉菜单
• SessionList — 登录设备
• ApiKeyManager
• SubscriptionCard / PlanBadge
• UsageQuota
• BillingHistory
• PaymentMethodForm
• UpgradePrompt / Paywall
• TeamMemberTable
• RoleSelector
• InvitationList

---

37. 引导与帮助（Onboarding & Help）

• OnboardingWizard
• WelcomeTour
• Coachmark / Hotspot
• FeatureHighlight / NewBadge
• Checklist（新手任务）
• HelpTooltip（? 图标）
• HelpPanel / DocsSidebar
• KeyboardShortcutCheatsheet
• WhatsNewDialog
• FeedbackWidget
• ContactSupport
• InlineHelp
• EmptyStateWithAction

---

38. 交互原语（Interaction）

• Draggable
• Droppable / DropTarget
• DragOverlay / DragPreview
• DragGhost
• Sortable / SortableContext
• Resizable
• Rotatable
• Selectable / SelectionArea — 框选
• RubberBandSelection
• LongPress
• DoubleClick
• Gesture（滚轮缩放、触控板捏合、双指滑动）
• PanZoom
• Hotkeys / KeyBinding — 快捷键绑定与作用域
• KeyChord — 组合键序列（Ctrl+K Ctrl+S）
• Undo / Redo Manager
• InfiniteScroll Trigger
• VirtualScroller（底层）
• ScrollSync — 多区域滚动同步
• Autofocus
• RovingTabIndex — 方向键焦点管理
• TypeAhead — 按键快速定位
• FocusVisible

---

39. 主题与样式系统（Theme）

• ThemeProvider
• ThemeSwitcher
• ColorTokens / DesignTokens
• ThemeEditor — 主题编辑器
• ThemeImporter（VS Code 主题兼容）
• SyntaxThemes — 代码高亮主题
• IconThemeProvider
• DensityProvider
• RadiusProvider
• FontProvider
• HighContrastMode
• ReducedMotionProvider
• Platform Style（macOS / Windows / Linux 自适应）
• VibrancyBackground / Mica / Acrylic — 系统毛玻璃
• Elevation / Shadow 系统

---

40. 国际化与无障碍（i18n & a11y）

• I18nProvider
• Trans / LocalizedText
• LocaleNumber / LocaleDate
• RTL 布局支持
• LiveRegion / Announcer — 屏幕阅读器播报
• SkipLink
• AccessibleIcon
• AriaLabel 辅助
• KeyboardNavigationHelper
• ScreenReaderOnly
• ColorBlindSafe Palette

---

41. 地图与地理（Maps）

• MapView（瓦片）
• MapMarker
• MapPopup
• MapCluster
• RouteLine
• GeoJSON Layer
• ChoroplethMap
• LocationPicker
• CoordinateDisplay

---

42. 杂项与工具组件（Misc）

• Clock / WorldClock
• Stopwatch
• Calculator
• UnitConverter
• QRCodeScanner
• BarcodeDisplay
• Captcha
• Signature
• Rating Widget
• Poll / Survey
• Quiz / Flashcard
• ChangeLog Viewer
• LicenseViewer
• Terms / Consent Dialog
• CookieBanner（嵌入 Web 内容时）
• WebView 容器
• IframeEmbed / EmbedCard
• HTMLPreview
• PrintButton
• ExportDialog（PDF / PNG / CSV / JSON）
• ImportDialog（字段映射）
• CSVImporter
• ShareSheet

---

43. 开发与质量（Library Tooling）

• ComponentGallery / Storybook — 组件展示应用
• PlaygroundPanel — 属性实时调试
• InspectorOverlay — 布局检查（边框、尺寸）
• FPSMeter / PerfOverlay
• RenderCounter
• EventLogger
• DesignTokenViewer
• IconBrowser
• A11yChecker
• ScreenshotTest Harness

---

44. 渲染表面（Rendering）

• RenderSurface — 宿主按盒子的设备像素绘出帧
• FramebufferView / OffscreenRenderSurface / CustomRendererSurface / TextureView → RenderSurface
• ShaderView / GpuSurface / WebGPUSurface / Compute Visualization / GPU Particle View — 宿主自带 GPU，读回帧交给 RenderSurface
• CameraTexture / GStreamerTexture / ExternalTexture — 宿主的帧交给 RenderSurface
• ZeroCopyTexture / SharedTextureView / MetalSurface / OpenGLSurface / VulkanSurface / D3D11/D3D12Surface — gpui 不共享设备
• 3D Scene / 3D Viewport → media::ModelViewer