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