又是一个陈年老博客，现在tailwind已经4.0了，leptos也已经7.0了，下面记载的很多都没有参考价值了，仅仅作为第一批博客来凑个数

最下面还包含了Osynic最初的构思，一开始还是打算all in rust的，不过现在前端还是vue写起来最舒服

Osynic

快速入门Leptos的csr开发

前期准备

安装rust工具链,直接去官网就行

安装trunk和wasm

cargo install --locked trunk
rustup toolchain install nightly
rustup default nightly
rustup target add wasm32-unknown-unknown

初始化leptos项目

新建项目文件夹并初始化cargo项目

mkdir your-leptos-project-name
cd your-leptos-project-name
cargo init

在Cargo.toml里面写入依赖

leptos = { version = "0.6.11", features = ["csr"] }

在main.rs里面初始化构建App页面

use leptos::*;

#[component]
fn App() -> impl IntoView {
    view! {
        <div>
            <h1>{"Hello, World!"}</h1>
        </div>
    }
}

fn main() {
    mount_to_body(|| view!{ <App />})
}

在项目根目录新建一个index.html文件，作为trunk的入口

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Leptos</title>
  </head>
  <body></body>
</html>

通过trunk运行网站

trunk serve

如果有定制化需要还可以新建一个Trunk.toml，默认配置是这样的，具体配置问GPT或者去官网

[build]
dist = "dist"
public_url = "/"
hash = false
inline = false
cache = ".trunk-cache"

[serve]
port = 8080
fallback = "index.html"
open = false
host = "127.0.0.1"
autoreload = true

入门要点

可以看结合文档学习，注意：GPT写的很多代码都是老的，例如0.5，里面会有cx:Scope这种写法，现在已经不需要了

porp属性来写参数
signal响应式
类jsx语法
在view!里面写页面逻辑
#[component]下面写组件
组件的返回值是impl IntoView

Osynic之中的Leptos开发设计与体验

使用的UI框架以及工具库如下
- ThawUI
- Tailwind_Fuse
项目结构
- components
  - downloader.rs
    - DownloadItem()
    - DownloadItemList()
  - pickuper.rs
    - PickupItem()
    - PickupItemList()
  - mod.rs
- views
  - app.rs
    - App()
  - mod.rs
- main.rs

Tailwind 在 Leptos框架中的使用

首先还是先生成tailwind配置

npx tailwind init

然后在配置文件里面加上rs文件类型

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,rs}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

新建一个input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

然后监听生成output.css

npx tailwindcss -i input.css -o output.css

最后在index.html里面引入output.css即可

<link data-trunk href="./output.css" rel="css" />

Tailwind_Fuse 安装与使用

这样安装就行

tailwind_fuse = { version="0.3.0", features=["variant"] }

主要就是使用tailwind的样式，然后可以通过cvs来管理样式模板

例如下面是官网的示例代码，已经很清晰如何使用了,

use leptos::*;
use tailwind_fuse::*;

#[component]
pub fn Button(
    #[prop(into, optional)] variant: MaybeSignal<ButtonVariant>,
    #[prop(into, optional)] size: MaybeSignal<ButtonSize>,
    #[prop(into, optional)] class: MaybeSignal<String>,
    #[prop(attrs)] attributes: Vec<(&'static str, Attribute)>,
    children: Children,
) -> impl IntoView {
    let class = create_memo(move |_| {
        let variant = variant.get();
        let size = size.get();
        let button = ButtonClass { variant, size };
        button.with_class(class.get())
    });

    view! {
        <button {..attributes} class=class>
            {children()}
        </button>
    }
}

#[derive(TwClass, Clone, Copy)]
#[tw(
    class = r#"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors
               focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"#
)]
pub struct ButtonClass {
    pub variant: ButtonVariant,
    pub size: ButtonSize,
}

#[derive(TwVariant)]
pub enum ButtonVariant {
    #[tw(
        default,
        class = "bg-primary text-primary-foreground shadow hover:bg-primary/90"
    )]
    Default,
    #[tw(class = "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90")]
    Destructive,
    #[tw(
        class = "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground"
    )]
    Outline,
    #[tw(class = "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80")]
    Secondary,
    #[tw(class = "hover:bg-accent hover:text-accent-foreground")]
    Ghost,
    #[tw(class = "text-primary underline-offset-4 hover:underline")]
    Link,
}

#[derive(TwVariant)]
pub enum ButtonSize {
    #[tw(default, class = "h-9 px-4 py-2")]
    Default,
    #[tw(class = "h-8 rounded-md px-3 text-xs")]
    Sm,
    #[tw(class = "h-10 rounded-md px-8")]
    Lg,
    #[tw(class = "h-9 w-9")]
    Icon,
}

ThawUI 安装与使用

这样安装就行

tailwind-fuse = { version="0.3.2", features=["csr"] }

官网使用例代码

use leptos::*;
use thaw::*;

fn main() {
    mount_to_body(App);
}

#[component]
pub fn App() -> impl IntoView {
    view! {
        <Button variant=ButtonVariant::Primary>"Primary"</Button>
    }
}

开发Osynic的初步分工

V1作为纯离线版本的开发，前后端的压力都不太大前端主要解决一下列表和布局的问题后端则是功能和交互接口的设计了

HakoChest's Blog

Leptos-Tailwind_Fuse-Bindgen开发入门