Novault-Frontend-web/implementation_plan.md

Implementation Plan - Home Page Modernization (Bento Grid)

目标

重构首页布局，采用现代化的 Bento Grid (便当盒网格) 设计理念，结合 "Ultra Premium Glass" 视觉风格，打造极具科技感与通透感的仪表盘界面。

设计理念

1. Bento Grid 布局: 采用统一的网格系统，将不同功能的模块（净资产、图表、快捷操作等）像便当盒一样规整而灵活地排列。
2. 层级重构: 打破原有的从上到下流式布局，增强模块间的关联性和视觉张力。
3. 视觉升级:
   • Hero Area: 强化 "每日洞察" 和 "净资产" 的核心地位。
   • 交互感: 每个 Grid Item 都是一个独立的玻璃容器，拥有独立的悬停动效。
   • 信息密度: 优化空间利用率，减少无意义的留白，增加信息呈现的精致度。

改造方案

1. 结构重构 (src/pages/Home/Home.tsx)

废弃原有的 <section> 堆叠结构，引入统一的 .home-bento-grid 容器。

网格规划 (Desktop 4列布局):

• Row 1:
  • DailyInsightCard -> 跨 3 列 (主要视觉焦点)
  • HealthScore (新封装) -> 跨 1 列 (右上角状态展示)
• Row 2:
  • NetWorthCard -> 跨 2 列 (主要资产展示)
  • AssetsCard -> 1 列
  • LiabilitiesCard -> 1 列
• Row 3:
  • SpendingTrendChart -> 跨 3 列 (宽屏图表)
  • QuickActions (重组) -> 1 列 (垂直排列或网格排列)
• Row 4:
  • RecentTransactions -> 跨 2 列
  • ContributionHeatmap -> 跨 2 列 (或移动到底部作为页脚装饰)

(具体排列会根据响应式断点自动调整)

2. 样式升级 (src/pages/Home/Home.css)

• Grid Container: 使用 display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
• Glass Tiles: 所有卡片统一使用 .bento-card 基础类，具备：
  • 高级磨砂玻璃背景 (backdrop-filter: blur(24px))
  • 细腻的边框 (1px solid rgba(255,255,255,0.4))
  • 深度阴影与悬浮微动效

3. 组件优化

• DailyInsightCard: 调整为更紧凑的横向布局，适应 Grid。
• QuickActions: 从 "3个大卡片" 优化为 "工具箱(Toolbox)" 样式，占用更小空间但更精致。
• Header: 简化顶部 Greeting 区域，使其与 Grid 融为一体。

涉及文件

• src/pages/Home/Home.tsx: 结构重写
• src/pages/Home/Home.css: 样式重写
• src/components/home/DailyInsightCard/DailyInsightCard.css: 适配 Grid
• src/components/home/ContributionHeatmap/ContributionHeatmap.css: 样式微调

预期效果

• 现代化: 类似 iOS Widget 或 Linear 的仪表盘风格。
• 美观: 统一的光影与圆角语言。
• 响应式: 平滑适配 桌面 -> 平板 -> 手机。