Skip to content

Latest commit

 

History

History
236 lines (173 loc) · 12 KB

README.zh-CN.md

File metadata and controls

236 lines (173 loc) · 12 KB

GPUI Kit

English | 简体中文

Build Status Docs Crates.io

使用 Rust 和 GPUI 构建出色、高性能的桌面应用。

GPUI Kit 是一个综合性的 Rust 桌面应用开发框架。它将生产级 UI 系统、应用级数据与布局能力、编辑能力,以及可复用的行为、状态和基础设施整合在一起, 并让交付后的应用可以被 JavaScript 扩展。GPUI Kit 提供 75+ 个有完整文档的组件与原语, 并具备 WebAssembly、AccessKit 无障碍、UI 集成测试及可选的 JavaScript 扩展运行时。

文档:https://gpui-kit.com

gpui-kit             应用唯一需要依赖的 crate
├── gpui-base        无样式的行为、状态与基础设施
└── gpui-component   GPUI Component:完整的带样式 UI 系统

gpui-kit 会固定配套的 GPUI 版本并导出 GPUI、base、component 和 assets,Rust 应用只需声明这一个依赖。JavaScript 扩展宿主另行依赖 gpui-shell;它默认开启的 components feature 提供带样式的组件目录。

特性

  • 75+ 组件与原语:覆盖表单、导航、浮层、数据展示、编辑、反馈和布局等场景,提供成熟交互与高效默认值。
  • 生产就绪:从第一天起用于构建 Longbridge Pro,并在公开发布的商业桌面应用中持续打磨。
  • WebAssembly:应用与组件示例可通过 wasm32-unknown-unknown 在 Web 中运行。
  • 无障碍:交互层内置 AccessKit role、name、state、relationship 与 action,并有对应测试覆盖。
  • UI 集成测试:在 headless window 中渲染真实组件,驱动鼠标与键盘输入,并验证状态、Focus、布局和无障碍信息。
  • 原生体验:现代控件设计灵感来自 macOS 与 Windows,并提供语义化主题和多种尺寸。
  • 120 FPS:GPU 加速界面,在高负载下依然保持流畅。
  • 数据表格:虚拟滚动、固定列、列宽调整、排序与单元格选择,可承载数十万行数据。
  • 虚拟列表:只渲染可见区域,并支持不同尺寸的列表项。
  • 代码编辑器:20 万行规模下仍保持稳定,集成 Tree-sitter 高亮与 LSP 诊断、补全和悬浮提示。
  • Dock 布局:可调整面板、可拖拽标签、嵌套分割、边缘停靠,并可序列化保存。
  • 丰富内容:原生 Markdown 与 HTML 渲染、语法高亮和内置图表。
  • 设计自由:使用完整视觉系统,或基于 gpui-base 的行为与基础设施构建自己的系统。
  • JavaScript 扩展:gpui-shell 让已发布的 Rust 宿主以脚本方式加载面板与业务逻辑,每项能力都需显式授予。
  • 跨平台:通过一份 Rust 代码交付 macOS、Windows 和 Linux。

框架架构

三层架构,一个生态

使用 gpui-component,让整个应用保持统一、完整的视觉与交互风格;当产品需要创建并拥有自己的设计系统时,使用 gpui-base;当应用需要在交付后仍可被 JavaScript 扩展时,使用 gpui-shell。

gpui-component gpui-base gpui-shell
完整且带样式的组件 无预设样式的行为与基础设施 由 Rust 托管的 JavaScript 运行时
开箱即用,并支持主题定制 完全掌控结构与视觉设计 能力逐项授予
适合直接构建应用 适合构建设计系统 适合插件与脚本化应用
                             APPLICATION
                                  │
              ┌───────────────────┼───────────────────┐
              │                   │                   │
              ▼                   ▼                   ▼
    ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐
    │  gpui-component  │ │ Your Design      │ │    gpui-shell    │
    │    Styled UI     │ │ System           │ │  JS extensions   │
    └────────┬─────────┘ └────────┬─────────┘ └────────┬─────────┘
             │                    │                    │
             └────────────────────┼────────────────────┘
                                  ▼
                        ┌──────────────────┐
                        │    gpui-base     │
                        │ Behavior · State │
                        │ Infrastructure   │
                        └────────┬─────────┘
                                 ▼
                               GPUI

行为属于基础层,呈现属于应用。

如果希望使用精致、开箱即用且风格统一的控件,请选择 gpui-component。如果应用需要拥有组件源码、布局、样式和动效,同时复用复杂且可靠的交互行为,请直接构建于 gpui-base。如果希望贡献者无需 fork、也无需发新版本就能扩展产品,请加入 gpui-shell。

这种分层方式与 shadcn 生态的灵活性来源一致:

GPUI Kit 生态 Web 生态
GPUI HTML + Tailwind CSS
gpui-base Base UI
gpui-component shadcn 的完整样式组件层

深入了解架构 →

Showcase

GPUI Kit 从第一天起就用于构建 Longbridge Pro。 这个框架不是脱离应用场景凭空设计出来的,而是从一款公开发布的商业桌面应用中持续提炼而成。

GPUI 为渲染打下基础,Longbridge 为生产实践打下基础。

Image

Usage

[dependencies]
gpui-kit = "0.7"

gpui-kit 始终引入 GPUI 和 gpui-base;gpui-component 和默认图标集默认开启。只想保留部分层时关闭默认 feature 按需选择即可。gpui-component 的 feature(inspector、decimal、tree-sitter 及各 tree-sitter-<language>)在 gpui-kit 上同名可用。

GPUI Fast

启用可选的 gpui-fast feature,可以为核心、原生平台、WebAssembly 和所有已启用的 Kit 层统一选择 GPUI Fast:

[dependencies]
gpui-kit = { version = "0.7", features = ["gpui-fast"] }

原有导入、初始化流程和测试宏保持不变,应用无需 [patch] 或 crate 别名。 默认后端仍是固定版本的上游 GPUI 快照。Cargo features 是累加的,因此选择 Fast 后, 上游包仍会参与编译。feature 组合和对比命令见 Getting Started。

基础示例

use gpui_kit::component::button::*;
use gpui_kit::component::*;
use gpui_kit::*;

pub struct HelloWorld;
impl Render for HelloWorld {
    fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
        div()
            .v_flex()
            .gap_2()
            .size_full()
            .items_center()
            .justify_center()
            .child("Hello, World!")
            .child(
                Button::new("ok")
                    .primary()
                    .label("Let's Go!")
                    .on_click(|_, _, _| println!("Clicked!")),
            )
    }
}

fn main() {
    gpui_kit::application().run(move |cx| {
        // 使用任何 GPUI Component 功能之前必须先调用此函数。
        gpui_kit::init(cx);

        gpui_kit::open_window(WindowOptions::default(), cx, |_, cx| {
            cx.new(|_| HelloWorld)
        })
        .expect("Failed to open window");
    });
}

gpui_kit::open_window 是应用的窗口启动入口,始终挂载 Base Root。Component 初始化时注册窗口展示与浮层扩展;Cargo feature 不会选择不同的根类型。

图标

默认开启的 assets feature 会以 gpui-kit-assets 的形式内置 Lucide 图标集,通过 gpui_kit::application().with_assets(gpui_kit::assets::Assets) 交给应用即可。若想使用自己的图标,去掉该 feature,并按照 IconName 中的定义命名 SVG 文件。

AI 编码 Agent 技能 (Skills)

为你的 AI 编码助手(Cursor, Claude Code, Gemini CLI, Codex 等)安装 GPUI Kit 技能库:

npx skills add longbridge/gpui-kit
技能 描述
gpui-kit 初始化、组件目录、常用使用模式、GPUI 机制(Element、Entity、异步、Focus、Action、测试),以及 Coding Guides。
gpui-kit-design-guides Design Guides:布局、间距、层级、交互状态、浮层与界面文案的规范。

Development

桌面 Gallery(Story)

story crate 是一个展示所有可用组件的画廊应用程序,通过以下命令运行:

cargo run

Examples

一些较大的示例复用 story 画廊组件,并作为独立 package 运行:

# Dock 布局系统(面板、分割视图、标签页)
cargo run -p example-dock

# Markdown 渲染
cargo run -p example-markdown

# HTML 渲染
cargo run -p example-html

examples 目录还包含独立示例,每个示例专注于单一功能。每个示例是一个独立的 crate,使用 cargo run -p <name> 运行:

# 支持 LSP 和语法高亮的代码编辑器
cargo run -p example-editor

# 基础 Hello World
cargo run -p hello_world

# 系统监控器(实时 CPU/内存数据图表)
cargo run -p system_monitor

# 窗口标题自定义
cargo run -p window_title

查看 CONTRIBUTING.md 了解更多详情。

与其他框架对比

请查看站点上的与 Iced、egui、Qt 6 的对比。

许可证

软件源码与文档中的代码示例适用 Apache-2.0。

Docs、Base、Component、Shell 各章节(含中文译文)中 GPUI Kit 有权授权的文档正文与原创图示,另以 CC BY 4.0 提供。复制或改编这些内容时,请署名 GPUI Kit、链接到原文页面及 CC BY 4.0 许可,并注明修改。既有 Apache-2.0 使用权持续有效;较早版本仍遵循当时的许可,第三方贡献未经权利人另外授权时保留原许可。仅学习概念或使用事实、未复制受版权保护的表达时,不因 CC BY 4.0 产生署名要求。

  • 基于 Zed Industries 的 GPUI 构建,GPUI 同样采用 Apache-2.0。gpui-pre-* 是它的快照,发布时保留 Zed 的许可证与声明。
  • UI 设计基于 shadcn/ui,部分来自 Reui。
  • 图标来自 Lucide。