You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
|
|
# 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. 分模块测试验证
|
