131 lines
3.2 KiB
Markdown
131 lines
3.2 KiB
Markdown
|
# 版本切换功能实现总结
|
|||
|
|
|
|||
|
|
## 实现概述
|
|||
|
|
|
|||
|
|
在设置的开发者选项中添加了版本切换功能，用户可以在 V1 和 V2 版本之间切换。
|
|||
|
|
|
|||
|
|
## 修改的文件
|
|||
|
|
|
|||
|
|
### 1. Web/src/stores/version.js (新增)
|
|||
|
|
- 创建 Pinia store 管理版本状态
|
|||
|
|
- 使用 localStorage 持久化版本选择
|
|||
|
|
- 提供 `setVersion()` 和 `isV2()` 方法
|
|||
|
|
|
|||
|
|
### 2. Web/src/views/SettingView.vue (修改)
|
|||
|
|
- 在开发者选项中添加"切换版本"选项
|
|||
|
|
- 显示当前版本（V1/V2）
|
|||
|
|
- 实现版本切换对话框
|
|||
|
|
- 实现版本切换后的路由跳转逻辑
|
|||
|
|
|
|||
|
|
### 3. Web/src/router/index.js (修改)
|
|||
|
|
- 引入 version store
|
|||
|
|
- 在路由守卫中添加版本路由重定向逻辑
|
|||
|
|
- V2 模式下自动跳转到 V2 路由（如果存在）
|
|||
|
|
- V1 模式下自动跳转到 V1 路由（如果在 V2 路由）
|
|||
|
|
|
|||
|
|
## 核心功能
|
|||
|
|
|
|||
|
|
1. **版本选择界面**
|
|||
|
|
- 设置页面显示当前版本
|
|||
|
|
- 点击弹出对话框，选择 V1 或 V2
|
|||
|
|
- 切换成功后显示提示信息
|
|||
|
|
|
|||
|
|
2. **智能路由跳转**
|
|||
|
|
- 选择 V2 后，如果当前路由有 V2 版本，自动跳转
|
|||
|
|
- 选择 V1 后，如果当前在 V2 路由，自动跳转到 V1
|
|||
|
|
- 没有对应版本时，保持当前路由不变
|
|||
|
|
|
|||
|
|
3. **路由守卫保护**
|
|||
|
|
- 每次路由跳转时检查版本设置
|
|||
|
|
- 自动重定向到正确版本的路由
|
|||
|
|
- 保留 query 和 params 参数
|
|||
|
|
|
|||
|
|
4. **状态持久化**
|
|||
|
|
- 版本选择保存在 localStorage
|
|||
|
|
- 刷新页面后版本设置保持不变
|
|||
|
|
|
|||
|
|
## V2 路由命名规范
|
|||
|
|
|
|||
|
|
V2 路由必须遵循命名规范：`原路由名-v2`
|
|||
|
|
|
|||
|
|
示例：
|
|||
|
|
- V1: `calendar` → V2: `calendar-v2`
|
|||
|
|
- V1: `budget` → V2: `budget-v2`
|
|||
|
|
|
|||
|
|
## 当前支持的 V2 路由
|
|||
|
|
|
|||
|
|
- `calendar` → `calendar-v2` (CalendarV2.vue)
|
|||
|
|
|
|||
|
|
## 测试验证
|
|||
|
|
|
|||
|
|
- ✅ ESLint 检查通过（无错误）
|
|||
|
|
- ✅ 构建成功（pnpm build）
|
|||
|
|
- ✅ 所有修改文件符合项目代码规范
|
|||
|
|
|
|||
|
|
## 使用示例
|
|||
|
|
|
|||
|
|
### 用户操作流程
|
|||
|
|
|
|||
|
|
1. 进入"设置"页面
|
|||
|
|
2. 滚动到"开发者"分组
|
|||
|
|
3. 点击"切换版本"（当前版本显示在右侧）
|
|||
|
|
4. 选择"V1"或"V2"
|
|||
|
|
5. 系统自动跳转到对应版本的路由
|
|||
|
|
|
|||
|
|
### 开发者添加新 V2 路由
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// router/index.js
|
|||
|
|
{
|
|||
|
|
path: '/xxx-v2',
|
|||
|
|
name: 'xxx-v2',
|
|||
|
|
component: () => import('../views/XxxViewV2.vue'),
|
|||
|
|
meta: { requiresAuth: true }
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
添加后即可自动支持版本切换。
|
|||
|
|
|
|||
|
|
## 技术细节
|
|||
|
|
|
|||
|
|
### 版本检测逻辑
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// 在路由守卫中
|
|||
|
|
if (versionStore.isV2()) {
|
|||
|
|
// 尝试跳转到 V2 路由
|
|||
|
|
const v2RouteName = `${routeName}-v2`
|
|||
|
|
if (存在 v2Route) {
|
|||
|
|
跳转到 v2Route
|
|||
|
|
} else {
|
|||
|
|
保持当前路由
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 版本状态管理
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// stores/version.js
|
|||
|
|
const currentVersion = ref(localStorage.getItem('app-version') || 'v1')
|
|||
|
|
|
|||
|
|
const setVersion = (version) => {
|
|||
|
|
currentVersion.value = version
|
|||
|
|
localStorage.setItem('app-version', version)
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
1. V2 路由必须按照 `xxx-v2` 命名规范
|
|||
|
|
2. 如果页面没有 V2 版本，切换后会保持在 V1 版本
|
|||
|
|
3. 路由守卫会自动处理所有版本相关的路由跳转
|
|||
|
|
4. 版本状态持久化在 localStorage 中
|
|||
|
|
|
|||
|
|
## 后续改进建议
|
|||
|
|
|
|||
|
|
1. 可以在 UI 上添加更明显的版本标识
|
|||
|
|
2. 可以在无 V2 路由时给出提示
|
|||
|
|
3. 可以添加版本切换的动画效果
|
|||
|
|
4. 可以为不同版本设置不同的主题样式
|