RUI - Rust UI Component Library

一个基于 GPUI 0.2 的现代化 Rust UI 组件库，提供完整的、易用的组件集合。

⚠️ 开发中: RUI 目前处于早期开发阶段，API 可能会有变化。

✨ 特性

• 🎨 丰富的组件 - 46+ 个精心设计的 UI 组件
• 🚀 高性能 - 基于 GPUI 的 GPU 加速渲染
• 🎯 类型安全 - 充分利用 Rust 的类型系统
• 🛠️ 可定制 - 灵活的主题系统和样式定制
• 📚 完善文档 - 详细的 API 文档和示例代码
• 🔧 易于使用 - 简洁一致的 API 设计

📦 安装

从 crates.io (推荐)

[dependencies]
rui = "0.1"
gpui = "0.2"

从 Git 仓库

[dependencies]
rui = { git = "https://github.com/yourusername/rui" }
gpui = "0.2"

本地开发

[dependencies]
rui = { path = "../rui" }
gpui = "0.2"

🚀 快速开始

use rui::prelude::*;

fn main() {
    App::new().run(|window, cx| {
        let input = cx.new(|cx| {
            TextInput::new(cx)
                .placeholder("输入文本...")
        });

        window.open_window(cx, |window, cx| {
            cx.new(|cx| MyView { input })
        });
    });
}

struct MyView {
    input: Entity<TextInput>,
}

impl Render for MyView {
    fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
        div()
            .p_4()
            .child(self.input.clone())
    }
}

📚 组件列表

✅ 已实现 (2/46)

表单组件

• ✅ TextInput - 单行文本输入
• ✅ TextArea - 多行文本编辑器

🔄 开发中

基础组件 (19)

• Button - 按钮
• Icon - 图标
• Badge - 徽章
• Checkbox - 复选框
• Radio - 单选框
• Switch - 开关
• Tag - 标签
• Label - 标签文本
• Avatar - 头像
• Kbd - 键盘快捷键
• Progress - 进度条
• Slider - 滑块
• Skeleton - 骨架屏
• Tooltip - 工具提示
• Toggle - 切换按钮
• Image - 图片
• Indicator - 指示器
• Alert - 警告
• Accordion - 手风琴

表单组件 (6)

• ColorPicker - 颜色选择器
• DatePicker - 日期选择器
• Dropdown - 下拉选择
• Form - 表单容器
• NumberInput - 数字输入
• OtpInput - OTP 输入
• Editor - 代码编辑器

布局组件 (9)

• DescriptionList - 描述列表
• Drawer - 抽屉
• GroupBox - 分组框
• Modal - 模态框
• Notification - 通知
• Popover - 气泡卡片
• Resizable - 可调整大小
• Scrollable - 滚动容器
• Sidebar - 侧边栏

高级组件 (10)

• Calendar - 日历
• Chart - 图表
• List - 列表
• PopupMenu - 弹出菜单
• Table - 数据表格
• Tabs - 选项卡
• Tree - 树形组件
• VirtualList - 虚拟列表
• WebView - Web 视图

🎨 主题系统

RUI 提供了灵活的主题系统：

use rui::theme::*;

let theme = Theme::new();
let colors = theme.colors;

// 使用预定义颜色
colors.primary;          // 主色
colors.success;          // 成功色
colors.error;            // 错误色

// 使用尺寸系统
Size::Small.px();        // 28.0
Size::Medium.px();       // 36.0
Size::Large.px();        // 44.0

// 使用间距系统
Spacing::SM;             // 8.0
Spacing::MD;             // 12.0
Spacing::LG;             // 16.0

// 使用圆角系统
BorderRadius::SM;        // 4.0
BorderRadius::MD;        // 6.0
BorderRadius::LG;        // 8.0

📖 示例

运行示例项目：

# 运行 TextInput 示例
cargo run --example text_input_demo

# 未来会添加更多示例
cargo run --example button_demo
cargo run --example form_demo
cargo run --example showcase

🗺️ 开发路线图

详见 ROADMAP.md

Phase 1: 核心基础组件 (优先级: 高)

• Button, Icon, Label, Checkbox, Radio, Switch, Badge, Tag

Phase 2: 表单组件 (优先级: 高)

• Dropdown, Form, NumberInput, ColorPicker, DatePicker

Phase 3: 反馈组件 (优先级: 中)

• Alert, Tooltip, Modal, Notification, Progress, Indicator, Skeleton

Phase 4: 布局组件 (优先级: 中)

• Drawer, Sidebar, Tabs, Accordion, GroupBox, Resizable, Scrollable

Phase 5: 数据展示组件 (优先级: 中低)

• Table, List, VirtualList, Tree, Calendar, DescriptionList

Phase 6: 高级组件 (优先级: 低)

• Chart, PopupMenu, Popover, WebView, Editor, OtpInput

🤝 贡献

欢迎贡献！请查看 ROADMAP.md 了解当前进度和待实现的组件。

在贡献时请遵循：

1. 保持代码风格一致
2. 编写详细的文档和示例
3. 参考 gpui-component 的 API 设计
4. 更新 ROADMAP.md 中的进度

📄 许可证

MIT License

🔗 相关链接

• GPUI - 底层 UI 框架
• gpui-component - 参考实现
• 文档 - API 文档
• 示例 - 示例代码

🙏 致谢

• GPUI - 提供强大的 GPU 加速 UI 框架
• gpui-component - 设计灵感来源

当前版本: v0.1.0-dev
已实现组件: 2/46 (4.3%)
最后更新: 2025-10-25