1.8 KiB

Raw Blame History Unescape Escape

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
                                                    ↓
响应更新 ← View ← Composable ← Pinia Store ← Response

迁移策略

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

1.8 KiB Raw Blame History Unescape Escape