# 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 的仪表盘风格。
- **美观**: 统一的光影与圆角语言。
- **响应式**: 平滑适配 桌面 -> 平板 -> 手机。