144 lines
4.0 KiB
Markdown
144 lines
4.0 KiB
Markdown
|
# 版本切换功能测试文档
|
|||
|
|
|
|||
|
|
## 功能说明
|
|||
|
|
|
|||
|
|
在设置的开发者选项中添加了版本切换功能，用户可以在 V1 和 V2 版本之间切换。当选择 V2 时，如果有对应的 V2 路由则自动跳转，否则保持当前路由。
|
|||
|
|
|
|||
|
|
## 实现文件
|
|||
|
|
|
|||
|
|
1. **Store**: `Web/src/stores/version.js` - 版本状态管理
|
|||
|
|
2. **View**: `Web/src/views/SettingView.vue` - 设置页面添加版本切换入口
|
|||
|
|
3. **Router**: `Web/src/router/index.js` - 路由守卫实现版本路由重定向
|
|||
|
|
|
|||
|
|
## 功能特性
|
|||
|
|
|
|||
|
|
- ✅ 版本状态持久化存储（localStorage）
|
|||
|
|
- ✅ 设置页面显示当前版本（V1/V2）
|
|||
|
|
- ✅ 点击弹出对话框选择版本
|
|||
|
|
- ✅ 自动检测并跳转到对应版本路由
|
|||
|
|
- ✅ 如果没有对应版本路由，保持当前路由
|
|||
|
|
- ✅ 路由守卫自动处理版本路由
|
|||
|
|
|
|||
|
|
## 测试步骤
|
|||
|
|
|
|||
|
|
### 1. 基础功能测试
|
|||
|
|
|
|||
|
|
1. 启动应用并登录
|
|||
|
|
2. 进入"设置"页面
|
|||
|
|
3. 找到"开发者"分组下的"切换版本"选项
|
|||
|
|
4. 当前版本应显示为 "V1"（首次使用）
|
|||
|
|
|
|||
|
|
### 2. 切换到 V2 测试
|
|||
|
|
|
|||
|
|
1. 点击"切换版本"
|
|||
|
|
2. 弹出对话框，显示"选择版本"标题
|
|||
|
|
3. 对话框有两个按钮："V1"（取消按钮）和"V2"（确认按钮）
|
|||
|
|
4. 点击"V2"按钮
|
|||
|
|
5. 应显示提示"已切换到 V2"
|
|||
|
|
6. "切换版本"选项的值应更新为 "V2"
|
|||
|
|
|
|||
|
|
### 3. V2 路由跳转测试
|
|||
|
|
|
|||
|
|
#### 测试有 V2 路由的情况（日历页面）
|
|||
|
|
|
|||
|
|
1. 确保当前版本为 V2
|
|||
|
|
2. 点击导航栏的"日历"（路由名：`calendar`）
|
|||
|
|
3. 应自动跳转到 `calendar-v2`（CalendarV2.vue）
|
|||
|
|
4. 地址栏 URL 应为 `/calendar-v2`
|
|||
|
|
|
|||
|
|
#### 测试没有 V2 路由的情况
|
|||
|
|
|
|||
|
|
1. 确保当前版本为 V2
|
|||
|
|
2. 点击导航栏的"账单分析"（路由名：`bill-analysis`）
|
|||
|
|
3. 应保持在 `bill-analysis` 路由（没有 v2 版本）
|
|||
|
|
4. 地址栏 URL 应为 `/bill-analysis`
|
|||
|
|
|
|||
|
|
### 4. 切换回 V1 测试
|
|||
|
|
|
|||
|
|
1. 当前版本为 V2，在 `calendar-v2` 页面
|
|||
|
|
2. 进入"设置"页面，点击"切换版本"
|
|||
|
|
3. 点击"V1"按钮
|
|||
|
|
4. 应显示提示"已切换到 V1"
|
|||
|
|
5. 如果当前在 V2 路由（如 `calendar-v2`），应自动跳转到 V1 路由（`calendar`）
|
|||
|
|
6. 地址栏 URL 应为 `/calendar`
|
|||
|
|
|
|||
|
|
### 5. 持久化测试
|
|||
|
|
|
|||
|
|
1. 切换到 V2 版本
|
|||
|
|
2. 刷新页面
|
|||
|
|
3. 重新登录后，进入"设置"页面
|
|||
|
|
4. "切换版本"选项应仍显示 "V2"
|
|||
|
|
5. 访问有 V2 路由的页面，应自动跳转到 V2 版本
|
|||
|
|
|
|||
|
|
### 6. 路由守卫测试
|
|||
|
|
|
|||
|
|
#### 直接访问 V2 路由（V1 模式下）
|
|||
|
|
|
|||
|
|
1. 确保当前版本为 V1
|
|||
|
|
2. 在地址栏直接输入 `/calendar-v2`
|
|||
|
|
3. 应自动重定向到 `/calendar`
|
|||
|
|
|
|||
|
|
#### 直接访问 V1 路由（V2 模式下）
|
|||
|
|
|
|||
|
|
1. 确保当前版本为 V2
|
|||
|
|
2. 在地址栏直接输入 `/calendar`
|
|||
|
|
3. 应自动重定向到 `/calendar-v2`
|
|||
|
|
|
|||
|
|
## 当前支持 V2 的路由
|
|||
|
|
|
|||
|
|
- `calendar` → `calendar-v2` (CalendarV2.vue)
|
|||
|
|
|
|||
|
|
## 代码验证
|
|||
|
|
|
|||
|
|
### 版本 Store 检查
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// 打开浏览器控制台
|
|||
|
|
const versionStore = useVersionStore()
|
|||
|
|
console.log(versionStore.currentVersion) // 应输出 'v1' 或 'v2'
|
|||
|
|
console.log(versionStore.isV2()) // 应输出 true 或 false
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### LocalStorage 检查
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// 打开浏览器控制台
|
|||
|
|
console.log(localStorage.getItem('app-version')) // 应输出 'v1' 或 'v2'
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 预期结果
|
|||
|
|
|
|||
|
|
- ✅ 所有路由跳转正常
|
|||
|
|
- ✅ 版本切换提示正常显示
|
|||
|
|
- ✅ 版本状态持久化正常
|
|||
|
|
- ✅ 路由守卫正常工作
|
|||
|
|
- ✅ 没有控制台错误
|
|||
|
|
- ✅ UI 响应流畅
|
|||
|
|
|
|||
|
|
## 潜在问题
|
|||
|
|
|
|||
|
|
1. 如果用户在 V2 路由页面直接切换到 V1，可能会出现短暂的页面重载
|
|||
|
|
2. 某些页面可能没有 V2 版本，切换后会保持在 V1 版本
|
|||
|
|
|
|||
|
|
## 后续扩展
|
|||
|
|
|
|||
|
|
如需添加更多 V2 路由，只需：
|
|||
|
|
|
|||
|
|
1. 创建新的 Vue 组件（如 `XXXViewV2.vue`）
|
|||
|
|
2. 在 `router/index.js` 中添加路由，命名格式为 `原路由名-v2`
|
|||
|
|
3. 路由守卫会自动处理版本切换逻辑
|
|||
|
|
|
|||
|
|
## 示例：添加新的 V2 路由
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// router/index.js
|
|||
|
|
{
|
|||
|
|
path: '/budget-v2',
|
|||
|
|
name: 'budget-v2',
|
|||
|
|
component: () => import('../views/BudgetViewV2.vue'),
|
|||
|
|
meta: { requiresAuth: true }
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
添加后，当用户选择 V2 版本并访问 `/budget` 时，会自动跳转到 `/budget-v2`。
|