# 版本切换功能测试文档

## 功能说明

在设置的开发者选项中添加了版本切换功能，用户可以在 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`。