1433 lines
36 KiB
Markdown
1433 lines
36 KiB
Markdown
# 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 — 自定义标题栏（可拖动区域）
|
||
- ColumnShell — 分栏外壳：侧栏通到窗口顶部，每栏自带可拖动标题（双栏 / 三栏）
|
||
- 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
|