{
  "schemaVersion": "1.0",
  "item": {
    "slug": "dioxus-framework",
    "name": "Dioxus Framework",
    "source": "tencent",
    "type": "skill",
    "category": "开发工具",
    "sourceUrl": "https://clawhub.ai/space-water-bear/dioxus-framework",
    "canonicalUrl": "https://clawhub.ai/space-water-bear/dioxus-framework",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/dioxus-framework",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=dioxus-framework",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "SKILL.md",
      "assets/project-template.md",
      "assets/quick-start.md",
      "references/core-concepts.md"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "Download the package from Yavira.",
        "Extract it into a folder your agent can access.",
        "Paste one of the prompts below and point your agent at the extracted folder."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
        },
        {
          "label": "Upgrade existing",
          "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "slug": "dioxus-framework",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-05-02T14:14:32.299Z",
      "expiresAt": "2026-05-09T14:14:32.299Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=dioxus-framework",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=dioxus-framework",
        "contentDisposition": "attachment; filename=\"dioxus-framework-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null,
        "slug": "dioxus-framework"
      },
      "scope": "item",
      "summary": "Item download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this item.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/dioxus-framework"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/dioxus-framework",
    "agentPageUrl": "https://openagent3.xyz/skills/dioxus-framework/agent",
    "manifestUrl": "https://openagent3.xyz/skills/dioxus-framework/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/dioxus-framework/agent.md"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "Download the package from Yavira.",
      "Extract it into a folder your agent can access.",
      "Paste one of the prompts below and point your agent at the extracted folder."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
      },
      {
        "label": "Upgrade existing",
        "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "Dioxus Framework",
        "body": "Dioxus 是一个现代 Rust Web 框架，结合了 React 的编程模型与 Rust 的性能优势。它允许你构建高性能的 Web 应用，支持服务端渲染（SSR）、实时更新和跨平台部署。"
      },
      {
        "title": "安装依赖",
        "body": "# 在 Rust 项目中添加 Dioxus\ncargo add dioxus --features ssr\n\n# 使用 CLI 工具\ncargo install dioxus-cli"
      },
      {
        "title": "基本项目结构",
        "body": "src/\n├── main.rs           # 应用入口\n├── App.rsx           # 根组件\n├── components/        # 子组件目录\n├── routes/            # 路由模块\n├── server_fn/         # 服务端函数\n└── utils/             # 工具函数"
      },
      {
        "title": "定义组件",
        "body": "组件是使用 #[component] 宏定义的函数，它接受 Properties（props）并返回一个 Element。\n\nuse dioxus::prelude::*;\n\n#[component]\nfn DogApp(breed: String) -> Element {\n    rsx! {\n        div { class: \"card\" } {\n            h2 { \"Dogs of breed: {breed}\" }\n            ul {\n                (0..3).map(|i| rsx! {\n                    li { \"Dog {i}\" }\n                })\n            }\n        }\n    }\n}"
      },
      {
        "title": "Component Properties",
        "body": "所有组件都接受一个描述其参数的 struct。Props 需要 derive 以下 traits：\n\n#[derive(Props, PartialEq, Clone)]\nstruct DogAppProps {\n    breed: String,\n}\n\n重要特性：\n\n特性说明Props组件接受的参数对象PartialEqual允许部分更新 propsClone允许克隆 propsMemoized默认 memoized，只有 props 改变时重新渲染"
      },
      {
        "title": "组件生命周期",
        "body": "Dioxus 组件会在以下情况下重新渲染：\n\nProps 改变：当组件的 props 发生变化时\n信号变化：当组件监听的信号更新时\nScope.needs_update()：当父组件要求更新时\n\n重要： Dioxus 默认 memoized 所有组件，性能比 React 更好。"
      },
      {
        "title": "使用 Hooks",
        "body": "Dioxus 提供类似 React 的 hooks 用于管理状态。\n\nuse_signal()\n\n创建响应式状态：\n\n#[component]\nfn Counter() -> Element {\n    let mut count = use_signal(cx, || 0);\n\n    rsx! {\n        div {\n            button {\n                onclick: move |_| {\n                    count += 1;\n                }\n            } { \"Increment\" }\n            p { \"Count: {count}\" }\n            button {\n                onclick: move |_| {\n                    count -= 1;\n                }\n            } { \"Decrement\" }\n        }\n    }\n}\n\nuse_coroutine()\n\n运行异步操作：\n\n#[component]\nfn DataFetcher() -> Element {\n    let mut data = use_signal(cx, || None::<String>);\n    let loading = use_signal(cx, || false);\n\n    use_coroutine(cx, |cx| async move {\n        loading.set(true);\n        // 模拟异步数据获取\n        tokio::time::sleep(Duration::from_secs(2)).await;\n        data.set(Some(\"Fetched data\".to_string()));\n        loading.set(false);\n    });\n\n    rsx! {\n        div {\n            if *loading.get() {\n                p { \"Loading...\" }\n            } else if let Some(d) = data.get() {\n                p { \"Data: {d}\" }\n            } else {\n                p { \"No data yet\" }\n            }\n        }\n    }\n}\n\nuse_context()\n\n访问上下文值：\n\n#[derive(Clone, Props)]\nstruct ChildProps {\n    value: String,\n}\n\n#[component]\nfn Child(props: ChildProps) -> Element {\n    rsx! { p { \"Value from context: {props.value}\" } }\n}\n\n#[component]\nfn Parent() -> Element {\n    let value = use_context(cx, || \"default\".to_string());\n    rsx! { Child { value: value.clone() } }\n}"
      },
      {
        "title": "全局状态",
        "body": "使用信号进行全局状态管理：\n\n// main.rs\nuse dioxus::prelude::*;\n\nfn main() {\n    let theme_signal = RwSignal::new(\"light\".to_string());\n    dioxus::launch(App, (\n        AppContext::new(theme_signal)\n    ));\n}\n\n// App.rsx\n#[component]\nfn App() -> Element {\n    let theme = use_context(cx);\n    rsx! {\n        div {\n            button {\n                onclick: move |_| theme.set(\"dark\".to_string())\n            } { \"Dark Mode\" }\n            button {\n                onclick: move |_| theme.set(\"light\".to_string())\n            } { \"Light Mode\" }\n            p { \"Current theme: {theme.read()}\" }\n        }\n    }\n}"
      },
      {
        "title": "基本路由",
        "body": "// routes/mod.rs\nuse dioxus::prelude::*;\nuse dioxus::router::{Route, Router};\n\n#[component]\nfn Home() -> Element {\n    rsx! { h1 { \"Home Page\" } }\n}\n\n#[component]\nfn About() -> Element {\n    rsx! { h1 { \"About Page\" } }\n}\n\n// App.rsx\n#[component]\nfn App() -> Element {\n    rsx! {\n        Router {\n            Route { to: \"/\", Home {} }\n            Route { to: \"/about\", About {} }\n        }\n    }\n}"
      },
      {
        "title": "动态路由",
        "body": "use dioxus::router::NavLink;\n\nrsx! {\n    nav {\n        ul {\n            li { NavLink { to: \"/\" } { \"Home\" } }\n            li { NavLink { to: \"/about\" } { \"About\" } }\n        }\n    }\n}"
      },
      {
        "title": "表单处理",
        "body": "#[derive(Props, Clone)]\nstruct FormProps {\n    on_submit: Callback<String>,\n}\n\n#[component]\nfn Form(props: FormProps) -> Element {\n    let mut name = use_signal(cx, || String::new());\n    let mut email = use_signal(cx, || String::new());\n\n    rsx! {\n        form {\n            onsubmit: move |event| {\n                event.prevent_default();\n                props.on_submit.call((\n                    name.get().clone(),\n                    email.get().clone(),\n                ));\n            }\n        } {\n            input {\n                r#type: \"text\",\n                value: \"{name}\",\n                oninput: move |e| name.set(e.value())\n            }\n            input {\n                r#type: \"email\",\n                value: \"{email}\",\n                oninput: move |e| email.set(e.value())\n            }\n            button { r#type: \"submit\" } { \"Submit\" }\n        }\n    }\n}"
      },
      {
        "title": "启用 SSR",
        "body": "// main.rs\nuse dioxus::prelude::*;\n\nfn main() {\n    // 启用 SSR 功能\n    dioxus::launch(App);\n}\n\n// server_fn/api.rs\nuse dioxus::prelude::*;\n\n#[server_fn(\"/\")]\nasync fn serve_home() -> String {\n    // 渲染组件为字符串\n    render_to_string(|cx| rsx! { App {} })\n}"
      },
      {
        "title": "服务端函数（Server Functions）",
        "body": "use dioxus::prelude::*;\n\n#[server_fn(\"/api/hello\")]\nasync fn hello(name: String) -> String {\n    format!(\"Hello, {}!\", name)\n}"
      },
      {
        "title": "使用资源",
        "body": "#[server_fn(\"/api/data\")]\nasync fn fetch_data() -> Json<Vec<String>> {\n    use crate::data::fetch_from_db().await\n}"
      },
      {
        "title": "条件渲染",
        "body": "rsx! {\n    div {\n        if *count.get() > 0 {\n            p { \"Count is positive\" }\n        } else {\n            p { \"Count is zero\" }\n        }\n    }\n}"
      },
      {
        "title": "列表渲染",
        "body": "let items = vec![\"Item 1\", \"Item 2\", \"Item 3\"];\n\nrsx! {\n    ul {\n        items.iter().map(|item| rsx! {\n            li { key: \"{item}\" } { item }\n        })\n    }\n}"
      },
      {
        "title": "组件组合",
        "body": "#[component]\nfn Header() -> Element {\n    rsx! {\n        header {\n            h1 { \"My App\" }\n            nav {\n                a { href: \"/\" } { \"Home\" }\n                a { href: \"/about\" } { \"About\" }\n            }\n        }\n    }\n}\n\n#[component]\nfn PageLayout(content: Element) -> Element {\n    rsx! {\n        div { class: \"layout\" } {\n            Header {}\n            main { content }\n            Footer {}\n        }\n    }\n}"
      },
      {
        "title": "CSS 模块",
        "body": "// 在 main.rs 或组件中导入样式\nuse dioxus::prelude::*;\n\n// styles.css\n.card {\n    background-color: white;\n    padding: 1rem;\n    border-radius: 8px;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}"
      },
      {
        "title": "内联样式",
        "body": "rsx! {\n    div {\n        style: \"background-color: #f0f0f0; padding: 1rem;\" {\n            \"Content\"\n        }\n    }\n}"
      },
      {
        "title": "Tailwind CSS 集成",
        "body": "// Cargo.toml\n[dependencies]\ndioxus = { version = \"0.7\", features = [\"fullstack\"] }\n\n// 在组件中使用\nrsx! {\n    div { class: \"bg-blue-500 text-white p-4 rounded\" } {\n        \"Styled\"\n    }\n}"
      },
      {
        "title": "错误边界",
        "body": "#[component]\nfn ErrorBoundary() -> Element {\n    rsx! {\n        div {\n            p { \"Something went wrong!\" }\n            button {\n                onclick: move |_| {\n                    // 重试逻辑\n                }\n            } { \"Retry\" }\n        }\n    }\n}"
      },
      {
        "title": "验证 Props",
        "body": "#[component]\nfn ValidatedInput(props: ValidatedInputProps) -> Element {\n    rsx! {\n        input {\n            value: \"{props.value}\",\n            r#type: props.input_type,\n            disabled: props.disabled,\n        }\n    }\n}"
      },
      {
        "title": "Memoization",
        "body": "Dioxus 默认 memoized 所有组件。对于昂贵的计算，可以使用 use_memo：\n\nuse dioxus::hooks::*;\n\n#[component]\nfn ExpensiveCalculation() -> Element {\n    let count = use_signal(cx, || 0);\n\n    let result = use_memo(cx, move || {\n        // 昂贵的计算\n        expensive_calculation(*count)\n    }, (*count));\n\n    rsx! {\n        div {\n            p { \"Result: {result}\" }\n        }\n    }\n}"
      },
      {
        "title": "避免不必要的重新渲染",
        "body": "使用 PartialEqual 和 use_memo 来最小化重新渲染。"
      },
      {
        "title": "组件测试",
        "body": "#[cfg(test)]\nmod tests {\n    use super::*;\n    use dioxus::prelude::*;\n\n    #[test]\n    fn test_dog_app_renders() {\n        let breed = \"Golden Retriever\".to_string();\n        let vnode = dioxus::ssr::render_to_string(|cx| rsx! {\n            DogApp { breed: breed.clone() }\n        });\n        assert!(vnode.contains(&breed));\n    }\n}"
      },
      {
        "title": "静态构建",
        "body": "cargo build --release"
      },
      {
        "title": "使用 Tauri 打包",
        "body": "cargo install tauri-cli\ntauri build"
      },
      {
        "title": "使用 Docker",
        "body": "FROM rust:1.70-slim\nWORKDIR /app\nCOPY . .\nRUN cargo build --release\nCMD [\"./target/release/my-app\"]"
      },
      {
        "title": "参考资料",
        "body": "详细文档和更多示例，请参考：\n\nDioxus 文档\n组件参考\nGitHub\nDiscord 社区\nTwitter"
      },
      {
        "title": "Q: 如何处理异步操作？",
        "body": "A: 使用 use_coroutine hook 来运行异步代码并更新状态。"
      },
      {
        "title": "Q: 如何传递数据到子组件？",
        "body": "A: 使用 props 传递数据，使用全局上下文管理全局状态。"
      },
      {
        "title": "Q: 如何实现路由？",
        "body": "A: 使用 dioxus::router 提供的路由组件和 NavLink 进行导航。"
      },
      {
        "title": "Q: 如何优化性能？",
        "body": "A: Dioxus 默认 memoized 组件，使用 use_memo 进行昂贵的计算。"
      },
      {
        "title": "Q: 支持服务端渲染吗？",
        "body": "A: 是的，Dioxus 支持服务端渲染（SSR）和静态站点生成（SSG）。"
      },
      {
        "title": "Q: 如何集成 API？",
        "body": "A: 使用服务端函数（Server Functions）或异步 hooks 来获取数据。"
      },
      {
        "title": "Q: 支持 TypeScript 吗？",
        "body": "A: Dioxus 是纯 Rust 框架，但可以使用 wasm-bindgen 与 TypeScript 交互。"
      }
    ],
    "body": "Dioxus Framework\n\nDioxus 是一个现代 Rust Web 框架，结合了 React 的编程模型与 Rust 的性能优势。它允许你构建高性能的 Web 应用，支持服务端渲染（SSR）、实时更新和跨平台部署。\n\n快速开始\n安装依赖\n# 在 Rust 项目中添加 Dioxus\ncargo add dioxus --features ssr\n\n# 使用 CLI 工具\ncargo install dioxus-cli\n\n基本项目结构\nsrc/\n├── main.rs           # 应用入口\n├── App.rsx           # 根组件\n├── components/        # 子组件目录\n├── routes/            # 路由模块\n├── server_fn/         # 服务端函数\n└── utils/             # 工具函数\n\n组件基础\n定义组件\n\n组件是使用 #[component] 宏定义的函数，它接受 Properties（props）并返回一个 Element。\n\nuse dioxus::prelude::*;\n\n#[component]\nfn DogApp(breed: String) -> Element {\n    rsx! {\n        div { class: \"card\" } {\n            h2 { \"Dogs of breed: {breed}\" }\n            ul {\n                (0..3).map(|i| rsx! {\n                    li { \"Dog {i}\" }\n                })\n            }\n        }\n    }\n}\n\nComponent Properties\n\n所有组件都接受一个描述其参数的 struct。Props 需要 derive 以下 traits：\n\n#[derive(Props, PartialEq, Clone)]\nstruct DogAppProps {\n    breed: String,\n}\n\n\n重要特性：\n\n特性\t说明\nProps\t组件接受的参数对象\nPartialEqual\t允许部分更新 props\nClone\t允许克隆 props\nMemoized\t默认 memoized，只有 props 改变时重新渲染\n组件生命周期\n\nDioxus 组件会在以下情况下重新渲染：\n\nProps 改变：当组件的 props 发生变化时\n信号变化：当组件监听的信号更新时\nScope.needs_update()：当父组件要求更新时\n\n重要： Dioxus 默认 memoized 所有组件，性能比 React 更好。\n\n状态管理\n使用 Hooks\n\nDioxus 提供类似 React 的 hooks 用于管理状态。\n\nuse_signal()\n\n创建响应式状态：\n\n#[component]\nfn Counter() -> Element {\n    let mut count = use_signal(cx, || 0);\n\n    rsx! {\n        div {\n            button {\n                onclick: move |_| {\n                    count += 1;\n                }\n            } { \"Increment\" }\n            p { \"Count: {count}\" }\n            button {\n                onclick: move |_| {\n                    count -= 1;\n                }\n            } { \"Decrement\" }\n        }\n    }\n}\n\nuse_coroutine()\n\n运行异步操作：\n\n#[component]\nfn DataFetcher() -> Element {\n    let mut data = use_signal(cx, || None::<String>);\n    let loading = use_signal(cx, || false);\n\n    use_coroutine(cx, |cx| async move {\n        loading.set(true);\n        // 模拟异步数据获取\n        tokio::time::sleep(Duration::from_secs(2)).await;\n        data.set(Some(\"Fetched data\".to_string()));\n        loading.set(false);\n    });\n\n    rsx! {\n        div {\n            if *loading.get() {\n                p { \"Loading...\" }\n            } else if let Some(d) = data.get() {\n                p { \"Data: {d}\" }\n            } else {\n                p { \"No data yet\" }\n            }\n        }\n    }\n}\n\nuse_context()\n\n访问上下文值：\n\n#[derive(Clone, Props)]\nstruct ChildProps {\n    value: String,\n}\n\n#[component]\nfn Child(props: ChildProps) -> Element {\n    rsx! { p { \"Value from context: {props.value}\" } }\n}\n\n#[component]\nfn Parent() -> Element {\n    let value = use_context(cx, || \"default\".to_string());\n    rsx! { Child { value: value.clone() } }\n}\n\n全局状态\n\n使用信号进行全局状态管理：\n\n// main.rs\nuse dioxus::prelude::*;\n\nfn main() {\n    let theme_signal = RwSignal::new(\"light\".to_string());\n    dioxus::launch(App, (\n        AppContext::new(theme_signal)\n    ));\n}\n\n// App.rsx\n#[component]\nfn App() -> Element {\n    let theme = use_context(cx);\n    rsx! {\n        div {\n            button {\n                onclick: move |_| theme.set(\"dark\".to_string())\n            } { \"Dark Mode\" }\n            button {\n                onclick: move |_| theme.set(\"light\".to_string())\n            } { \"Light Mode\" }\n            p { \"Current theme: {theme.read()}\" }\n        }\n    }\n}\n\n路由\n基本路由\n// routes/mod.rs\nuse dioxus::prelude::*;\nuse dioxus::router::{Route, Router};\n\n#[component]\nfn Home() -> Element {\n    rsx! { h1 { \"Home Page\" } }\n}\n\n#[component]\nfn About() -> Element {\n    rsx! { h1 { \"About Page\" } }\n}\n\n// App.rsx\n#[component]\nfn App() -> Element {\n    rsx! {\n        Router {\n            Route { to: \"/\", Home {} }\n            Route { to: \"/about\", About {} }\n        }\n    }\n}\n\n动态路由\nuse dioxus::router::NavLink;\n\nrsx! {\n    nav {\n        ul {\n            li { NavLink { to: \"/\" } { \"Home\" } }\n            li { NavLink { to: \"/about\" } { \"About\" } }\n        }\n    }\n}\n\n表单处理\n#[derive(Props, Clone)]\nstruct FormProps {\n    on_submit: Callback<String>,\n}\n\n#[component]\nfn Form(props: FormProps) -> Element {\n    let mut name = use_signal(cx, || String::new());\n    let mut email = use_signal(cx, || String::new());\n\n    rsx! {\n        form {\n            onsubmit: move |event| {\n                event.prevent_default();\n                props.on_submit.call((\n                    name.get().clone(),\n                    email.get().clone(),\n                ));\n            }\n        } {\n            input {\n                r#type: \"text\",\n                value: \"{name}\",\n                oninput: move |e| name.set(e.value())\n            }\n            input {\n                r#type: \"email\",\n                value: \"{email}\",\n                oninput: move |e| email.set(e.value())\n            }\n            button { r#type: \"submit\" } { \"Submit\" }\n        }\n    }\n}\n\n服务端渲染（SSR）\n启用 SSR\n// main.rs\nuse dioxus::prelude::*;\n\nfn main() {\n    // 启用 SSR 功能\n    dioxus::launch(App);\n}\n\n// server_fn/api.rs\nuse dioxus::prelude::*;\n\n#[server_fn(\"/\")]\nasync fn serve_home() -> String {\n    // 渲染组件为字符串\n    render_to_string(|cx| rsx! { App {} })\n}\n\n服务端函数（Server Functions）\nuse dioxus::prelude::*;\n\n#[server_fn(\"/api/hello\")]\nasync fn hello(name: String) -> String {\n    format!(\"Hello, {}!\", name)\n}\n\n数据获取\n使用资源\n#[server_fn(\"/api/data\")]\nasync fn fetch_data() -> Json<Vec<String>> {\n    use crate::data::fetch_from_db().await\n}\n\n常见模式\n条件渲染\nrsx! {\n    div {\n        if *count.get() > 0 {\n            p { \"Count is positive\" }\n        } else {\n            p { \"Count is zero\" }\n        }\n    }\n}\n\n列表渲染\nlet items = vec![\"Item 1\", \"Item 2\", \"Item 3\"];\n\nrsx! {\n    ul {\n        items.iter().map(|item| rsx! {\n            li { key: \"{item}\" } { item }\n        })\n    }\n}\n\n组件组合\n#[component]\nfn Header() -> Element {\n    rsx! {\n        header {\n            h1 { \"My App\" }\n            nav {\n                a { href: \"/\" } { \"Home\" }\n                a { href: \"/about\" } { \"About\" }\n            }\n        }\n    }\n}\n\n#[component]\nfn PageLayout(content: Element) -> Element {\n    rsx! {\n        div { class: \"layout\" } {\n            Header {}\n            main { content }\n            Footer {}\n        }\n    }\n}\n\n样式和资源\nCSS 模块\n// 在 main.rs 或组件中导入样式\nuse dioxus::prelude::*;\n\n// styles.css\n.card {\n    background-color: white;\n    padding: 1rem;\n    border-radius: 8px;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n内联样式\nrsx! {\n    div {\n        style: \"background-color: #f0f0f0; padding: 1rem;\" {\n            \"Content\"\n        }\n    }\n}\n\nTailwind CSS 集成\n// Cargo.toml\n[dependencies]\ndioxus = { version = \"0.7\", features = [\"fullstack\"] }\n\n// 在组件中使用\nrsx! {\n    div { class: \"bg-blue-500 text-white p-4 rounded\" } {\n        \"Styled\"\n    }\n}\n\n错误处理\n错误边界\n#[component]\nfn ErrorBoundary() -> Element {\n    rsx! {\n        div {\n            p { \"Something went wrong!\" }\n            button {\n                onclick: move |_| {\n                    // 重试逻辑\n                }\n            } { \"Retry\" }\n        }\n    }\n}\n\n验证 Props\n#[component]\nfn ValidatedInput(props: ValidatedInputProps) -> Element {\n    rsx! {\n        input {\n            value: \"{props.value}\",\n            r#type: props.input_type,\n            disabled: props.disabled,\n        }\n    }\n}\n\n性能优化\nMemoization\n\nDioxus 默认 memoized 所有组件。对于昂贵的计算，可以使用 use_memo：\n\nuse dioxus::hooks::*;\n\n#[component]\nfn ExpensiveCalculation() -> Element {\n    let count = use_signal(cx, || 0);\n\n    let result = use_memo(cx, move || {\n        // 昂贵的计算\n        expensive_calculation(*count)\n    }, (*count));\n\n    rsx! {\n        div {\n            p { \"Result: {result}\" }\n        }\n    }\n}\n\n避免不必要的重新渲染\n\n使用 PartialEqual 和 use_memo 来最小化重新渲染。\n\n测试\n组件测试\n#[cfg(test)]\nmod tests {\n    use super::*;\n    use dioxus::prelude::*;\n\n    #[test]\n    fn test_dog_app_renders() {\n        let breed = \"Golden Retriever\".to_string();\n        let vnode = dioxus::ssr::render_to_string(|cx| rsx! {\n            DogApp { breed: breed.clone() }\n        });\n        assert!(vnode.contains(&breed));\n    }\n}\n\n部署\n静态构建\ncargo build --release\n\n使用 Tauri 打包\ncargo install tauri-cli\ntauri build\n\n使用 Docker\nFROM rust:1.70-slim\nWORKDIR /app\nCOPY . .\nRUN cargo build --release\nCMD [\"./target/release/my-app\"]\n\n参考资料\n\n详细文档和更多示例，请参考：\n\nDioxus 文档\n组件参考\nGitHub\nDiscord 社区\nTwitter\n常见问题\nQ: 如何处理异步操作？\n\nA: 使用 use_coroutine hook 来运行异步代码并更新状态。\n\nQ: 如何传递数据到子组件？\n\nA: 使用 props 传递数据，使用全局上下文管理全局状态。\n\nQ: 如何实现路由？\n\nA: 使用 dioxus::router 提供的路由组件和 NavLink 进行导航。\n\nQ: 如何优化性能？\n\nA: Dioxus 默认 memoized 组件，使用 use_memo 进行昂贵的计算。\n\nQ: 支持服务端渲染吗？\n\nA: 是的，Dioxus 支持服务端渲染（SSR）和静态站点生成（SSG）。\n\nQ: 如何集成 API？\n\nA: 使用服务端函数（Server Functions）或异步 hooks 来获取数据。\n\nQ: 支持 TypeScript 吗？\n\nA: Dioxus 是纯 Rust 框架，但可以使用 wasm-bindgen 与 TypeScript 交互。"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/space-water-bear/dioxus-framework",
    "publisherUrl": "https://clawhub.ai/space-water-bear/dioxus-framework",
    "owner": "space-water-bear",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/dioxus-framework",
    "downloadUrl": "https://openagent3.xyz/downloads/dioxus-framework",
    "agentUrl": "https://openagent3.xyz/skills/dioxus-framework/agent",
    "manifestUrl": "https://openagent3.xyz/skills/dioxus-framework/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/dioxus-framework/agent.md"
  }
}