gpui-components

用途

GPUI Components Skill 用于生成可直接用于生产的 Rust 代码，用于构建 GPUI 桌面 UI 组件，代码模式参照 Zed 编辑器和 gpui-component 库。

适用场景

• 使用 GPUI 框架构建桌面 UI 应用
• 使用 RenderOnce 或 Render trait 创建自定义组件
• 使用 ActiveTheme 实现主题化组件
• 构建自动补全/完成菜单
• 创建命令面板和弹出菜单
• 使用 gpui-component crate

核心概念与使用方式

应用初始化

通过 Application::new().run 启动，并调用 gpui_component::init(cx) 初始化组件库，再通过 cx.open_window 打开窗口，使用 Root::new 包装根组件。

组件模式

• RenderOnce（无状态）：结构体派生 IntoElement，实现 RenderOnce 的 render 方法，返回基于 div() 的元素。
• Render with Entity（有状态）：结构体实现 Render 的 render 方法，通过 cx.listener 处理事件并调用 cx.notify() 触发更新。

可用组件（gpui-component）

• 表单组件：Button（primary、danger、ghost、link 变体）、Input（支持 LSP 补全）、NumberInput（含步进控制）、Checkbox、Switch、Radio、Select、Slider
• 布局组件：Dialog、Popover、Menu / PopupMenu、Tab、Accordion、Sidebar、Dock
• 显示组件：Badge、Avatar、Icon（IconName 枚举）、Label、Tooltip、Notification
• 数据组件：Table、List / VirtualList、Tree、Chart

主题系统

通过 cx.theme() 访问主题颜色，包括背景色（background、secondary、muted、card）、前景色（foreground、muted_foreground）、语义色（primary、destructive、success、warning）以及边框色（border、ring）。可在渲染中直接用于 bg、text_color、border_color 等样式方法。

组件示例

• Button：使用 Button::new 配合 label、icon、primary()、on_click。
• Input with State：通过 cx.new 创建 InputState，在渲染中使用 Input::new 并设置 placeholder、cleanable。
• PopupMenu / Command Palette：使用 PopupMenu::build 构建菜单项，支持图标、分隔符和 action。
• Completion Provider：实现 CompletionProvider trait 的 completions 与 is_completion_trigger 方法，返回补全项。

项目设置

在 Cargo.toml 中添加依赖：

[dependencies]
gpui = "0.2"
gpui-component = { version = "0.4", features = ["webview"] }

基础应用结构使用 Root::new 包裹布局，并在 main 中初始化 gpui_component::init 后打开窗口。

参考资料

技能内提供详细参考文件：reference/components.md（完整组件 API）、reference/theming.md（主题系统细节）、reference/input-lsp.md（带补全的输入）、reference/menus.md（菜单与命令面板）。

限制

资料未提供收费、价格、平台支持范围或具体性能数据，暂未提供。