Ely GPUI Component

一个为 GPUI 打造的组件库，GPUI 是 Zed 背后的 Rust UI 框架。每个组件都提供明暗两种主题。配色温暖而安静。色彩承载含义，而非装饰。

每个组件都在 https://elygpui.com 上实时运行，编译为 WebAssembly。

状态：早期阶段。TASKS.md 逐章记录每个组件的进展。如需参与贡献，请参阅 CONTRIBUTING.md。

使用

[dependencies]
ely-gpui-component = { git = "https://github.com/ZacharyZhang-NY/Ely-GPUI-Components" }
gpui = { git = "https://github.com/zed-industries/zed", rev = "1a28cff4b409169bac058bca40dfbfeb7621d19b" }
gpui_platform = { git = "https://github.com/zed-industries/zed", rev = "1a28cff4b409169bac058bca40dfbfeb7621d19b", features = ["font-kit"] }

use ely_gpui_component::{Assets, theme::{Mode, Theme}};
use gpui::App;

fn main() {
    gpui_platform::application().with_assets(Assets).run(|cx: &mut App| {
        ely_gpui_component::init(cx);
        Theme::set_mode(Mode::Dark, cx);
    });
}

init 会注册字体和主题。如果 Assets 未接入应用程序，它会 panic。

组件画廊

cargo run --example gallery
cargo run --example gallery -- --page buttons
cargo run --example gallery -- --capture shots   # macOS：每一页的 PNG，明暗两种主题
ELY_GALLERY_ASSETS=https://example.com/gallery/assets/ scripts/web.sh dist   # 用于浏览器

在浏览器中，?page=buttons&story=icon-button&theme=dark 可单独绘制某个区块；examples/gallery/stories.json 列出了全部区块。

网站

cd frontend
pnpm install
ELY_GALLERY_ASSETS=https://<site>/gallery/assets/ pnpm gallery   # wasm 画廊，输出到 public/gallery
pnpm dev        # 或者：pnpm build && pnpm preview
node scripts/og.mjs   # 在 pnpm preview 运行时：从 hero 区生成 public/og.png
pnpm deploy     # Cloudflare，通过 wrangler

构建说明

gpui 在此于运行时编译其 Metal 着色器（runtime_shaders，默认开启），因此无需完整安装 Xcode。gpui_platform 需要 font-kit，否则 macOS 上无法绘制文本。
仅在 macOS 上测试。截图工具需要 macOS。

许可证

MIT 或 Apache-2.0，任选其一。Lucide 图标：ISC。Inter、JetBrains Mono、IBM Plex Sans 以及画廊所用的 Noto Sans Hebrew：SIL Open Font License 1.1。 examples/gallery/assets 中的画廊照片由 gpt-image-2 为本项目生成。