# 版本切换功能实现总结

## 实现概述

在设置的开发者选项中添加了版本切换功能，用户可以在 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. 可以为不同版本设置不同的主题样式