【免费下载链接】Ely-GPUI-Components
A component library for GPUI, in light and dark. Every component runs live in the browser.
Ely-GPUI-Components 是一个基于 GPUI（Zed 编辑器背后的 Rust UI 框架）的开源组件库：44 个章节、1200 多个组件，全部支持亮色与暗色主题，并且每个组件都能编译成 WebAssembly 在浏览器里实时运行。如果你正在寻找一套用 Rust 构建跨平台桌面应用 UI 的方案，这个项目值得认真看一眼。
一、GPUI 是什么？为什么它值得关注
GPUI 是 Zed 编辑器底层使用的 Rust UI 框架，它的特点是：
- 用 Rust 写界面：UI 逻辑与业务代码同语言，类型安全、零成本抽象，不再有跨语言桥接的开销；
- GPU 加速渲染：布局走 Flex 模型，绘制走 GPU，动画和滚动可以稳定跑在高刷新率下；
- 跨平台：同一套代码可以跑在 macOS、Windows、Linux 上，还能编译到 WebAssembly 在浏览器中运行。
对新手来说，最直观的感知是：GPUI 让你像写 React 一样声明式地描述界面（链式调用 flex_col()、bg()、text_color()），但底层是 Rust 的性能和可靠性。
而 Ely-GPUI-Components 做的事情，就是把"从 GPUI 毛坯到完整产品界面"之间大量的重复劳动——按钮、表单、弹窗、表格、编辑器、图表——提前做成了组件，供开发者直接取用。
二、Ely-GPUI-Components 里有什么？
项目的入口文件 src/lib.rs 中可以看到它的模块组织：44 个功能章节，每个章节一个文件夹。完整的组件清单写在 gpui-components.md 里，涵盖场景包括：
| 场景 | 典型组件 |
|---|---|
| 代码编辑器 / IDE | 语法高亮编辑器、Diff 视图、终端、Git 面板 |
| 表单与输入 | 文本框、下拉、日期、颜色选择、拖拽上传 |
| 数据展示 | 表格、虚拟列表、树、图表（K线图、桑基图…） |
| AI 对话平台 | 流式消息、引用卡片、工具调用审批 |
| 窗口与桌面外壳 | 标题栏、启动页、崩溃报告、画中画窗口 |
值得注意的是它对"组件"的定义比常规组件库更广：不只是按钮和输入框，还包括终端仿真器、代码编辑器、地图、协作光标、AI Agent 步骤面板这类复合能力。官方文档 frontend/src/docs/introduction.md 中称，整个项目追踪了 1158 个组件条目，绝大部分已勾选完成，进度由 TASKS.md 逐项记录。
组件都在哪看？——Gallery 组件演示场
项目内置了一个组件画廊（gallery），每个章节一页，运行命令只需一行：
git clone https://gitcode.com/gh_mirrors/el/Ely-GPUI-Components
cd Ely-GPUI-Components
cargo run --example gallery # 打开全部44个章节
cargo run --example gallery -- --page forms # 只看表单章节
画廊页面源码位于 examples/gallery/pages/，同一份代码编译到 wasm32 后就变成了浏览器里的实时演示。
三、Rust + GPUI 如何实现跨平台 UI？
一份代码，四个运行环境
跨平台的关键证据藏在 Cargo.toml 里，它对不同目标平台声明了不同的依赖：
- 原生平台（macOS / Windows / Linux）：用
alacritty_terminal提供真实的伪终端； - 浏览器（
target_family = "wasm"）：换成web-time、wasm-bindgen等 Web 侧 crate； - macOS 专属能力（托盘图标、Dock 角标）通过
cocoa调用 AppKit。
也就是说，组件库本身用 cfg 条件编译来区分环境——终端仿真只在原生端存在，其余组件在浏览器中照常渲染。这正是 GPUI "编译到 WebAssembly" 能力的体现：同一套 Rust UI 代码，桌面跑原生渲染，浏览器跑 WebGPU/WebGL2。
三步接入你的项目
按照 frontend/src/docs/installation.md，接入只需三步：
- 加依赖：
ely-gpui-component通过 git 引入，gpui固定在与组件库相同的快照版本（gpui-pre =0.3.8），gpui_platform开启font-kit特性：
[dependencies]
ely-gpui-component = { git = "https://gitcode.com/gh_mirrors/el/Ely-GPUI-Components" }
gpui = { package = "gpui-pre", version = "=0.3.8" }
gpui_platform = { package = "gpui-pre-platform", version = "=0.3.8", features = ["font-kit"] }
- 初始化：调用一次
ely_gpui_component::init(cx)，它会注册内嵌字体（Inter、JetBrains Mono）和主题，并把 Tab / Shift-Tab 绑定为焦点切换键； - 跑起来：
cargo run后窗口里就是一个带主题、带焦点管理的界面。
最小可运行示例见 examples/docs/hello.rs——一个计数器加一个主按钮，不到 60 行 Rust 代码就构成了完整的跨平台窗口应用。
四、细节见功力：三个值得学习的设计决策
1️⃣ 设计令牌：组件只读主题，不写死任何颜色
主题系统位于 src/theme/，全局只有一个 Theme，持有配色板、密度、圆角、字体缩放、是否减少动画等所有设计令牌。项目规则（见 AGENTS.md）明确要求：组件内部禁止出现裸的像素字面量，颜色、控件尺寸、阴影一律从 cx.theme() 读取。
这样做的好处是全局换肤：亮/暗模式一键切换、支持高对比度、图表色板还提供色盲安全模式，且官方调色板通过了 4.5:1 对比度审计。
2️⃣ 键盘优先：每个可按压元素都是 Tab 停靠点
Ely 把可访问性当成一等公民：init 时绑定 Tab / Shift-Tab，根节点用 FocusScope 圈住焦点，所有按钮、列表行、开关都带 1px 焦点环，Enter 和空格都能触发点击。下面这张暗色截图就是一个支持模糊搜索、键盘导航的快捷启动器（类 Spotlight / Raycast）：
3️⃣ 动效尊重"减少动态效果"
src/motion/ 统一管理时长、缓动和弹簧参数。当系统开启"减弱动态效果"时，循环动画会静止而不是缩短——这避免了加载转圈器以 1ms/圈 的速度疯转这类新手容易踩的坑。
五、写在最后
Ely-GPUI-Components 目前仍处于早期阶段（macOS 经过完整测试，Windows/Linux 构建测试中），API 会随 GPUI 一起演进，但它展示了一条清晰的路径：用 Rust 和 GPUI，一套代码写桌面应用和浏览器里的同一套 UI。
如果你想动手试试，推荐路线：
- 打开 gallery 浏览 44 个章节，找到你项目需要的组件；
- 用
hello.rs的例子把组件库接入自己的 Rust 项目； - 想参与贡献的话，CONTRIBUTING.md 里有完整的开发环境与
scripts/check.sh检查命令。
【免费下载链接】Ely-GPUI-Components
A component library for GPUI, in light and dark. Every component runs live in the browser.
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
