vscode-workbench/.trae/documents/favorites-mobileguard-popup-fix.md

Favorites 页面 MobileGuard 弹窗警告修复

Summary

修复 /favorites 路由在桌面端未登录时弹出的 MobileGuard 登录弹窗警告问题。将 Favorites 页面从 MobileGuard 切换到 AuthGuard，使用与其他需要登录的页面一致的认证模式。

Current State Analysis

问题描述

• /favorites 路由目前使用 <MobileGuard> 包裹（App.tsx 第134行）
• MobileGuard 组件在桌面端检测到未登录用户时，会显示一个登录提示 Modal 弹窗（showLoginPrompt 状态控制）
• 这个弹窗是强制的（closable, maskClosable），用户需要手动关闭
• 这与其它需要登录的页面（如 /bug 使用 AuthGuard）的认证模式不一致

当前行为

1. 用户访问 /favorites 且未登录
2. MobileGuard 检测到 !isLogin，设置 showLoginPrompt = true
3. 显示登录提示 Modal，遮挡页面内容
4. 用户必须点击"去登录"或"稍后再说"才能继续

期望行为

1. 用户访问 /favorites 且未登录
2. 显示全局登录弹窗（通过 LoginModalContext）
3. 页面内容为空（AuthGuard 返回 null）
4. 登录后自动显示收藏夹内容

Proposed Changes

修改文件: src/App.tsx

变更内容： 将 /favorites 路由从 <MobileGuard> 改为 <AuthGuard>

修改前：

<Route path="/favorites" element={<MobileGuard><Favorites /></MobileGuard>} />

修改后：

<Route path="/favorites" element={<AuthGuard><Favorites /></AuthGuard>} />

原因：

• AuthGuard 使用全局的 LoginModalContext 显示登录弹窗，行为更一致
• AuthGuard 在未登录时返回 null，不会渲染子组件，避免不必要的 API 请求
• 与 /bug 等页面的认证模式保持一致

Assumptions & Decisions

1. 假设： 用户希望 Favorites 页面在桌面端不再显示 MobileGuard 的登录弹窗
2. 决策： 使用 AuthGuard 替代 MobileGuard，保持认证逻辑的一致性
3. 不修改范围： 仅修改 /favorites 路由，不影响其他使用 MobileGuard 的路由

Verification

1. 启动开发服务器 npm run dev
2. 确保未登录状态
3. 访问 /favorites
4. 验证：不再显示 MobileGuard 的登录弹窗，而是显示全局登录提示
5. 登录后验证：收藏夹内容正常加载显示