UI 与路由（Dioxus 组件组织、路由结构、页面职责）

1) 快速定位

  • 根组件：src/app.rs
  • 路由定义：src/router.rs
  • 布局组件：src/components/layout/mod.rs
  • （备用）Sidebar 组件：src/components/layout/sidebar.rs
  • 页面：src/pages/*
  • 业务域组件：src/components/{asset,snapshot,plan,analysis,dashboard,common}/*

2) 路由结构（以代码为准）

路由枚举：src/router.rs 的 Route

特点：

  • 使用 #[layout(Layout)] 包裹多个页面
  • 每个页面是一个 enum variant（HomePage {} / AssetsPage {} 等）

这意味着：

  • Layout 会始终渲染（侧边栏/容器/背景等属于 Layout）
  • 页面内容通过 Outlet::<Route> {} 注入

3) Layout 与 Sidebar：当前实现的实际情况

目前存在两套“侧边栏”相关实现：

  1. Layout 内联导航（当前实际使用）
    文件：src/components/layout/mod.rs
    Layout 自己写了一个 nav { Link { ... } } 的简化版本导航。

  2. Sidebar 组件（目前未接线/未使用）
    文件：src/components/layout/sidebar.rs
    具备更完整的 UI 与 active 高亮逻辑（使用 use_route + discriminant）。

建议（未来可做的重构）：

  • 让 Layout 直接使用 Sidebar {} 组件，避免重复实现导航与样式分叉。

4) 页面职责（建议的理解方式）

4.1 Home（首页）

文件：src/pages/home.rs

职责：

  • 总览统计（总资产、资产数、当前方案）
  • 配置对比与偏离提示（基于可再平衡口径）
  • 投资建议（增配/减配）

4.2 Assets（资产管理）

文件：src/pages/assets.rs

职责：

  • 资产列表（按类别分组）
  • 新增/编辑/删除资产（modal + confirm）
  • 发起盘点（进入 inventory mode）

4.3 History（盘点历史）

文件：src/pages/history.rs

职责：

  • 展示快照时间线
  • 查看快照详情（detail modal）

4.4 Plans（配置方案）

文件：src/pages/plans.rs

职责：

  • 方案列表
  • 创建/编辑/删除
  • 切换激活方案（保证仅一个激活）

4.5 Analysis（收益分析）

文件：src/pages/analysis.rs

职责：

  • 周期筛选快照
  • 计算收益、归因与趋势（基于快照数据）
  • 空状态处理（不足两次快照时提示）

5) 组件组织方式

src/components/ 按业务域拆分：

  • common/：按钮、输入框、modal、confirm 等通用 UI
  • asset/：资产表单、列表、条目、分组等
  • snapshot/：盘点模式、时间线、快照卡片、详情等
  • plan/：方案列表、卡片、编辑器等
  • analysis/：周期选择、趋势图、归因表等

建议：

  • 页面只负责拼装与数据流协调
  • 组件尽量纯粹（props → UI），减少直接访问 DB/全局状态

6) 常见 UI 改动的推荐切入点

  • 新增一个“业务域组件”：放在对应 domain 目录，并在 mod.rs 导出
  • 新增页面：src/pages/xxx.rs + src/pages/mod.rs 导出 + src/router.rs 增加 Route + Layout/Sidebar 增加 Link
  • 通用交互（toast/banner/loading）：优先做在 Layout 或 common 组件中统一管理