EmailBill/.doc/VERSION_SWITCH_SUMMARY.md

版本切换功能实现总结

实现概述

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

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

添加后即可自动支持版本切换。

技术细节

版本检测逻辑

// 在路由守卫中
if (versionStore.isV2()) {
  // 尝试跳转到 V2 路由
  const v2RouteName = `${routeName}-v2`
  if (存在 v2Route) {
    跳转到 v2Route
  } else {
    保持当前路由
  }
}

版本状态管理

// 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. 可以为不同版本设置不同的主题样式