用户故事：Dioxus 0.7 框架升级

Epic: E0 - 项目基础设施
Story ID: E0-S5
版本: 1.0.0
日期: 2025-01-09
优先级: 高
预计工时: 0.5 天

用户故事

作为项目维护者，
我希望将 Dioxus 框架从 0.5/0.6 升级到 0.7 版本，
以便获得更好的性能、更新的依赖项支持，以及更灵活的表单处理能力。

Dioxus 0.7 新特性概览

1. 依赖项结构变更

dioxus-lib crate 已被移除，现在直接使用 dioxus 作为依赖：

# Cargo.toml
[dependencies]
dioxus = { version = "0.7", features = ["desktop", "router"] }

影响范围:

• ✅ 已完成 - Cargo.toml 已更新

2. 表单提交行为变更（重要）

在 0.7 之前，Dioxus 默认阻止所有表单提交以防止桌面端页面破坏。0.7 版本中这一行为已改变：

• 表单提交不再被默认阻止
• 需要手动调用 prevent_default() 来阻止默认行为

当前代码影响分析：

建议： 当前项目使用按钮 on_click 事件处理表单提交，而非原生 <form onsubmit>，因此不受此变更影响。如后续使用原生表单，需注意：

#![allow(unused)]
fn main() {
// 如果使用原生表单，需要显式阻止默认行为
form {
    onsubmit: move |event| {
        event.prevent_default();
        // 处理表单数据...
    },
    // 表单内容...
}
}

3. 依赖项版本升级

Dioxus 0.7 升级了多个核心依赖：

影响范围:

• 桌面端渲染可能有性能改进
• 暂无需额外代码调整

4. 事件监听器类型变更

事件处理程序的类型签名有所变化：

#![allow(unused)]
fn main() {
// 0.6 及之前
impl SuperInto<EventHandler<Event<$data>>, __Marker>

// 0.7
impl SuperInto<ListenerCallback<$data>, __Marker>
}

影响范围:

• 仅影响自定义渲染器
• 本项目使用标准 Desktop 渲染器，无需修改

5. 新增特性建议

基于 Dioxus 0.7 的改进，建议后续考虑以下优化：

5.1 使用原生表单验证（可选增强）

#![allow(unused)]
fn main() {
// 可以利用浏览器原生表单验证
form {
    onsubmit: move |event| {
        event.prevent_default();
        let form_data = event.data();
        // 使用 FormData 获取表单值
    },
    input {
        r#type: "text",
        required: true,  // HTML5 原生验证
        pattern: "[A-Za-z0-9]+",  // 正则验证
    }
}
}

5.2 改进的错误边界处理

Dioxus 0.7 提供了更好的错误边界支持，可以考虑为关键组件添加：

#![allow(unused)]
fn main() {
use dioxus::prelude::*;

#[component]
fn SafeComponent() -> Element {
    // 使用 throw 和 ErrorBoundary 进行优雅降级
    rsx! {
        ErrorBoundary {
            fallback: |error| rsx! {
                div { class: "error-state",
                    "发生错误: {error}"
                }
            },
            RiskyComponent {}
        }
    }
}
}

技术任务

验收标准

• cargo build --release 编译成功
• cargo run 应用正常启动
• 所有表单功能正常工作（新增、编辑、删除资产）
• 路由导航正常
• 盘点功能正常
• 文档已更新

迁移检查清单

已验证项目

• 移除 dioxus-lib 引用（如有）
• 更新 Cargo.toml 中的版本号
• 检查所有表单提交处理
• 验证事件处理器签名
• 运行完整功能测试

未来可选优化

• 评估使用原生 HTML5 表单验证
• 添加错误边界组件
• 探索 Dioxus 0.7 的性能改进特性

参考资料

• Dioxus 0.7 迁移指南
• Dioxus 官方文档

修订历史