This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.
# 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
