EmailBill/Web/VERSION_SWITCH_TEST.md

版本切换功能测试文档

功能说明

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

// 打开浏览器控制台
const versionStore = useVersionStore()
console.log(versionStore.currentVersion) // 应输出 'v1' 或 'v2'
console.log(versionStore.isV2()) // 应输出 true 或 false

LocalStorage 检查

// 打开浏览器控制台
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 路由

// router/index.js
{
  path: '/budget-v2',
  name: 'budget-v2',
  component: () => import('../views/BudgetViewV2.vue'),
  meta: { requiresAuth: true }
}

添加后，当用户选择 V2 版本并访问 /budget 时，会自动跳转到 /budget-v2。