r2mo-webel

Leptos-based UI component library for r2mo-web with built-in Tailwind CSS. 组件库已内置样式，使用时无需额外配置 Tailwind。

安装和使用

添加依赖

# Cargo.toml
dependencies =
leptos = { version = "0.8.12", features = ["csr"] }
r2mo-webel = { version = "0.1.0" }

初始化样式

在应用程序入口处初始化组件库样式：

// main.rs 或 lib.rs
use r2mo_webel::init;

fn main() {
    // 初始化 r2mo-webel 组件库样式
    init();
    
    // 正常启动应用
    // ...
}

或者在组件树中使用 StylesProvider 组件：

use r2mo_webel::{StylesProvider, UiButton};

#[component]
fn App() -> impl IntoView {
    view! {
        <StylesProvider />
        <div>
            <UiButton on_click=move || println!("点击了按钮")>"按钮示例"</UiButton>
        </div>
    }
}

注意事项

• 组件库已内置 Tailwind CSS 样式，无需在应用中单独配置 Tailwind
• 样式将自动通过 CSS 链接动态加载到页面中
• 支持组件自定义样式通过 class 属性传入

Scripts

• scripts/build.sh – 完整构建脚本，包括：
  • 安装 npm 依赖
  • 生成 Tailwind CSS safelist
  • 构建 Tailwind CSS 文件
  • 运行 cargo fmt 和 clippy 检查
  • 构建优化后的 Rust 库
• scripts/gen-safelist.js – 扫描 Rust 文件生成 Tailwind CSS 类列表

发布准备

组件库发布时会包含：

• 优化后的 WASM 代码
• 内置的 Tailwind CSS 样式文件
• 完整的类型定义和文档

使用标准的 cargo 发布流程：

# 构建并验证
./scripts/build.sh

# 发布到 crates.io
cargo publish