用户故事：响应式设计 - 支持桌面与移动端

Epic: E0 - 项目基础设施
Story ID: E0-S6
版本: 1.0.0
日期: 2025-01-11
优先级: 中
预计工时: 5-7 天

用户故事

作为个人投资者，
我希望在手机上也能查看和管理我的资产配置，
以便随时随地了解资产状况，不受设备限制。

背景分析

当前状态

目标状态

技术方案

1. 响应式断点定义

#![allow(unused)]
fn main() {
// src/utils/responsive.rs

/// 响应式断点
pub enum Breakpoint {
    Mobile,   // < 768px
    Tablet,   // 768-1023px
    Desktop,  // ≥ 1024px
}

/// 根据窗口宽度获取当前断点
pub fn get_breakpoint(width: u32) -> Breakpoint {
    match width {
        w if w < 768 => Breakpoint::Mobile,
        w if w < 1024 => Breakpoint::Tablet,
        _ => Breakpoint::Desktop,
    }
}
}

2. 布局架构改造

2.1 主布局组件

#![allow(unused)]
fn main() {
// src/components/layout/app_layout.rs

#[component]
pub fn AppLayout() -> Element {
    let window_size = use_window_size(); // 需要实现
    let breakpoint = get_breakpoint(window_size.width);
    
    rsx! {
        div {
            class: "app-container",
            style: "display: flex; flex-direction: column; height: 100vh;",
            
            match breakpoint {
                Breakpoint::Desktop | Breakpoint::Tablet => rsx! {
                    div {
                        style: "display: flex; flex: 1;",
                        Sidebar { collapsible: breakpoint == Breakpoint::Tablet }
                        main {
                            style: "flex: 1; overflow: auto;",
                            Outlet::<Route> {}
                        }
                    }
                },
                Breakpoint::Mobile => rsx! {
                    main {
                        style: "flex: 1; overflow: auto; padding-bottom: 60px;",
                        Outlet::<Route> {}
                    }
                    BottomNavBar {}
                }
            }
        }
    }
}
}

2.2 移动端底部导航栏（新增）

#![allow(unused)]
fn main() {
// src/components/layout/bottom_nav.rs

#[component]
pub fn BottomNavBar() -> Element {
    rsx! {
        nav {
            style: r#"
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                height: 60px;
                background: #1e1e2e;
                display: flex;
                justify-content: space-around;
                align-items: center;
                border-top: 1px solid #313244;
                z-index: 1000;
            "#,
            
            BottomNavItem { to: Route::HomePage {}, icon: "📊", label: "首页" }
            BottomNavItem { to: Route::AssetsPage {}, icon: "💰", label: "资产" }
            BottomNavItem { to: Route::HistoryPage {}, icon: "📅", label: "历史" }
            BottomNavItem { to: Route::PlansPage {}, icon: "🎯", label: "配置" }
            BottomNavItem { to: Route::AnalysisPage {}, icon: "📈", label: "收益" }
        }
    }
}
}

3. 组件响应式改造清单

3.1 布局组件（必须改造）

3.2 首页组件

3.3 资产管理组件

3.4 盘点组件

3.5 配置方案组件

3.6 收益分析组件

3.7 通用组件

技术任务

Phase 1: 基础设施（P0）

Phase 2: 核心页面适配（P1）

Phase 3: 优化与测试（P2）

配置变更

Dioxus.toml

[application]
name = "asset-light"
default_platform = "desktop"

[desktop]
title = "asset-light - 个人资产管理"

[desktop.window]
title = "asset-light"
width = 1440
height = 900
# 移除最小尺寸限制以支持窗口缩放测试
# min_width = 1280  
# min_height = 720
resizable = true
decorations = true

验收标准

桌面端（≥1024px）

• 侧边栏正常显示，布局与现有一致
• 所有页面功能正常

平板端（768-1023px）

• 侧边栏可折叠（点击汉堡按钮展开/收起）
• 内容区自适应宽度
• 表格/卡片自动调整列数

移动端（<768px）

• 侧边栏隐藏，显示底部导航栏
• 导航栏 5 个入口清晰可点击
• 所有页面单列布局
• 弹窗改为全屏页面
• 触控区域足够大（最小 44×44px）
• 无水平滚动条

通用

• 窗口缩放时布局平滑过渡
• 无样式错乱或重叠
• 编译成功，无 warning

移动端 UI 示意

底部导航栏

┌────────────────────────────────────┐
│  📊     💰     📅     🎯     📈   │
│ 首页   资产   历史   配置   收益  │
└────────────────────────────────────┘

首页布局（移动端）

┌──────────────────────┐
│   总资产: ¥1,234,567  │
├──────────────────────┤
│  ┌────┐ ┌────┐      │
│  │现金│ │权益│ ...   │ ← 统计卡片横向滚动
│  └────┘ └────┘      │
├──────────────────────┤
│    [饼图 - 资产分布]   │
├──────────────────────┤
│  配置偏离 ▼           │
│  ├ 现金类 +5.2%       │
│  ├ 权益类 -3.1%       │
│  └ 固收类 -2.1%       │
├──────────────────────┤
│ 📊   💰   📅   🎯   📈 │ ← 底部导航
└──────────────────────┘

后续扩展

完成响应式改造后，可进一步：

1. iOS/Android 打包：使用 Dioxus Mobile 或 Tauri 2.0
2. PWA 支持：编译为 Web 版本，支持离线使用
3. 手势交互：左滑删除、下拉刷新等移动端交互

参考资料

• Dioxus Desktop Window API
• 响应式设计最佳实践
• 移动端触控规范

修订历史