# Design: 前端现代化技术选型

## 技术栈升级

### 核心技术
- Vue 3.4+ (Composition API)
- Vite 5+ (构建工具)
- TypeScript 5+ (类型安全)
- Pinia (状态管理，替代 Vuex)
- Vue Router 4+ (路由)

### UI 框架
- 继续使用 Element Plus (Element UI 的 Vue3 版本)
- 自定义深色主题（参考 demo-dashboard-heatmap.html）
- ECharts 5 (数据可视化)

### 架构设计
```
src/
├── api/              # API 接口（按模块划分）
├── assets/           # 静态资源
├── components/       # 通用组件
│   ├── common/       # 基础组件
│   ├── chart/        # 图表组件
│   └── layout/       # 布局组件
├── composables/      # Composition API 复用逻辑
├── router/           # 路由配置
├── stores/           # Pinia 状态管理
├── views/            # 页面视图
│   ├── dashboard/    # 行情总览（参考 demo）
│   ├── heatmap/      # 趋势热力图
│   ├── system/       # 系统管理
│   └── business/     # 业务模块
├── styles/           # 全局样式
│   ├── variables.scss # CSS 变量
│   └── theme/        # 主题文件
└── utils/            # 工具函数
```

## 主题设计
参考 demo-dashboard-heatmap.html 的配色方案：
- 深色主题背景：#0d1117, #161b22, #1c2333
- 强调色：红色 #f85149, 绿色 #3fb950, 蓝色 #58a6ff
- 数据可视化渐变色系

## 数据流设计
```
用户操作 → View → Composable → Pinia Store → API → Backend
                                                    ↓
响应更新 ← View ← Composable ← Pinia Store ← Response
```

## 迁移策略
1. 使用 Vite 创建新项目骨架
2. 逐步迁移现有组件
3. 保持 API 接口兼容
4. 分模块测试验证