以下是基于提供的Sauron框架内容整理的完整示例Demo，包含注释说明：

// 引入必要的Sauron模块
use sauron::{html::*, Component, Node, Program, Cmd};
use wasm_bindgen::prelude::*;

// 主应用组件
struct TodoApp {
    todos: Vec<Todo>,
    new_todo: String,
}

// 单个待办事项结构体
struct Todo {
    id: u32,
    text: String,
    completed: bool,
}

// 消息枚举（用户交互事件）
enum Msg {
    AddTodo,
    UpdateNewTodo(String),
    ToggleTodo(u32),
    DeleteTodo(u32),
    ClearCompleted,
}

// 实现Component trait
impl Component for TodoApp {
    type MSG = Msg;

    // 视图渲染
    fn view(&self) -> Node<Msg> {
        div(
            [class("todo-container")],
            [
                // 标题
                h1([], [text("Sauron Todo App")]),
                
                // 添加新待办事项输入框
                div(
                    [class("add-todo")],
                    [
                        input(
                            [
                                value(&self.new_todo),
                                on_input(|input| Msg::UpdateNewTodo(input)),
                                on_key_down(|event| {
                                    if event.key() == "Enter" {
                                        Msg::AddTodo
                                    } else {
                                        Msg::UpdateNewTodo(event.value())
                                    }
                                }),
                                placeholder("What needs to be done?"),
                            ],
                            [],
                        ),
                        button(
                            [on_click(|_| Msg::AddTodo)],
                            [text("Add")],
                        ),
                    ],
                ),
                
                // 待办事项列表
                ul(
                    [class("todo-list")],
                    self.todos.iter().map(|todo| {
                        li(
                            [key(&todo.id)],  // 使用key优化渲染性能
                            [
                                input(
                                    [
                                        r#type("checkbox"),
                                        checked(todo.completed),
                                        on_click(move |_| Msg::ToggleTodo(todo.id)),
                                    ],
                                    [],
                                ),
                                span(
                                    [class(if todo.completed { "completed" } else { "" })],
                                    [text(&todo.text)],
                                ),
                                button(
                                    [
                                        class("delete"),
                                        on_click(move |_| Msg::DeleteTodo(todo.id)),
                                    ],
                                    [text("×")],
                                ),
                            ],
                        )
                    }),
                ),
                
                // 底部操作栏
                div(
                    [class("footer")],
                    [
                        span(
                            [],
                            [text(format!("{} items left", 
                                self.todos.iter().filter(|t| !t.completed).count()))],
                        ),
                        button(
                            [on_click(|_| Msg::ClearCompleted)],
                            [text("Clear completed")],
                        ),
                    ],
                ),
            ],
        )
    }

    // 状态更新逻辑
    fn update(&mut self, msg: Msg) -> Cmd<Self, Msg> {
        match msg {
            Msg::AddTodo if !self.new_todo.is_empty() => {
                let new_id = self.todos.last().map_or(0, |t| t.id) + 1;
                self.todos.push(Todo {
                    id: new_id,
                    text: self.new_todo.clone(),
                    completed: false,
                });
                self.new_todo.clear();
                Cmd::none()
            }
            Msg::UpdateNewTodo(text) => {
                self.new_todo = text;
                Cmd::none()
            }
            Msg::ToggleTodo(id) => {
                if let Some(todo) = self.todos.iter_mut().find(|t| t.id == id) {
                    todo.completed = !todo.completed;
                }
                Cmd::none()
            }
            Msg::DeleteTodo(id) => {
                self.todos.retain(|t| t.id != id);
                Cmd::none()
            }
            Msg::ClearCompleted => {
                self.todos.retain(|t| !t.completed);
                Cmd::none()
            }
            _ => Cmd::none(),
        }
    }
}

// 初始化WASM应用
#[wasm_bindgen(start)]
pub fn main() {
    // 初始化示例数据
    let initial_todos = vec![
        Todo { id: 1, text: "Learn Sauron".into(), completed: false },
        Todo { id: 2, text: "Build a Todo App".into(), completed: true },
        Todo { id: 3, text: "Deploy to Web".into(), completed: false },
    ];

    // 挂载应用到body
    Program::mount_to_body(TodoApp {
        todos: initial_todos,
        new_todo: String::new(),
    });
}

在HTML中使用：

<!DOCTYPE html>
<html>
<head>
    <title>Sauron Todo App</title>
    <style>
        .todo-container { width: 400px; margin: 0 auto; }
        .todo-list { list-style: none; padding: 0; }
        .completed { text-decoration: line-through; color: #999; }
        .delete { float: right; }
    </style>
</head>
<body>
    <script type="module">
        import init from './pkg/sauron_todo.js';
        init();
    </script>
</body>
</html>

构建步骤：

# 安装wasm-pack
cargo install wasm-pack

# 构建WASM目标
wasm-pack build --target web

# 启动本地服务器测试
python3 -m http.server 8000

这个完整示例展示了：

1. 组件化结构
2. 状态管理
3. 用户交互处理
4. 条件渲染
5. 列表渲染与key的使用
6. 样式绑定
7. 完整的Todo应用功能（添加/删除/切换状态/清空）

所有代码都保留了原始英文，仅对注释和说明文字进行了中文翻译。