feat: 登陆注册UI调整，用户协议和隐私政策跳转调整

AUTH_LOGIC_ANALYSIS.md

@@ -0,0 +1,431 @@
+# 登录和注册逻辑分析报告
+
+> **分析日期**: 2025-10-14
+> **分析目标**: 评估 LoginModalContent 和 SignUpModalContent 是否可以合并
+
+---
+
+## 📊 代码对比分析
+
+### 相同部分（约90%代码重复）
+
+| 功能模块 | 登录 | 注册 | 是否相同 |
+|---------|-----|------|---------|
+| **基础状态管理** | formData, isLoading, errors | formData, isLoading, errors | ✅ 完全相同 |
+| **内存管理** | isMountedRef | isMountedRef | ✅ 完全相同 |
+| **验证码状态** | countdown, sendingCode, verificationCodeSent | countdown, sendingCode, verificationCodeSent | ✅ 完全相同 |
+| **倒计时逻辑** | useEffect + setInterval | useEffect + setInterval | ✅ 完全相同 |
+| **发送验证码逻辑** | sendVerificationCode() | sendVerificationCode() | ⚠️ 95%相同（仅purpose不同） |
+| **表单验证** | 手机号正则校验 | 手机号正则校验 | ✅ 完全相同 |
+| **UI组件** | AuthHeader, AuthFooter, VerificationCodeInput, WechatRegister | 相同 | ✅ 完全相同 |
+| **布局结构** | HStack(左侧表单80% + 右侧微信20%) | HStack(左侧表单80% + 右侧微信20%) | ✅ 完全相同 |
+| **成功回调** | handleLoginSuccess() | handleLoginSuccess() | ✅ 完全相同 |
+
+### 不同部分（约10%）
+
+| 差异项 | 登录 LoginModalContent | 注册 SignUpModalContent |
+|-------|----------------------|----------------------|
+| **表单字段** | phone, verificationCode | phone, verificationCode, **nickname（可选）** |
+| **API Endpoint** | `/api/auth/login-with-code` | `/api/auth/register-with-code` |
+| **发送验证码目的** | `purpose: 'login'` | `purpose: 'register'` |
+| **页面标题** | "欢迎回来" | "欢迎注册" |
+| **页面副标题** | "登录价值前沿，继续您的投资之旅" | "加入价值前沿，开启您的投资之旅" |
+| **表单标题** | "验证码登录" | "手机号注册" |
+| **提交按钮文字** | "登录" / "登录中..." | "注册" / "注册中..." |
+| **底部链接** | "还没有账号，去注册" + switchToSignUp() | "已有账号？去登录" + switchToLogin() |
+| **成功提示** | "登录成功，欢迎回来！" | "注册成功，欢迎加入价值前沿！自动登录中..." |
+
+---
+
+## 🎯 合并可行性评估
+
+### ✅ 可以合并的理由
+
+1. **代码重复率高达90%**
+   - 所有的状态管理逻辑完全相同
+   - 验证码发送、倒计时、内存管理逻辑完全相同
+   - UI布局结构完全一致
+
+2. **差异可以通过配置解决**
+   - 标题、按钮文字等可以通过 `mode` prop 配置
+   - API endpoint 可以根据 mode 动态选择
+   - 表单字段差异很小（注册只多一个可选的nickname）
+
+3. **维护成本降低**
+   - 一处修改，两处生效
+   - Bug修复更简单
+   - 新功能添加更容易（如增加邮箱注册）
+
+4. **代码更清晰**
+   - 逻辑集中，更易理解
+   - 减少文件数量
+   - 降低认知负担
+
+---
+
+## 🏗️ 合并方案设计
+
+### 方案：创建统一的 AuthFormContent 组件
+
+```javascript
+// src/components/Auth/AuthFormContent.js
+export default function AuthFormContent({ mode = 'login' }) {
+  // mode: 'login' | 'register'
+
+  // 根据 mode 配置不同的文本和行为
+  const config = {
+    login: {
+      title: "价值前沿",
+      subtitle: "开启您的投资之旅",
+      formTitle: "验证码登录",
+      buttonText: "登录",
+      loadingText: "登录中...",
+      successMessage: "登录成功，欢迎回来！",
+      footerText: "还没有账号，",
+      footerLink: "去注册",
+      apiEndpoint: '/api/auth/login-with-code',
+      purpose: 'login',
+      onSwitch: switchToSignUp,
+      showNickname: false,
+    },
+    register: {
+      title: "欢迎注册",
+      subtitle: "加入价值前沿，开启您的投资之旅",
+      formTitle: "手机号注册",
+      buttonText: "注册",
+      loadingText: "注册中...",
+      successMessage: "注册成功，欢迎加入价值前沿！自动登录中...",
+      footerText: "已有账号？",
+      footerLink: "去登录",
+      apiEndpoint: '/api/auth/register-with-code',
+      purpose: 'register',
+      onSwitch: switchToLogin,
+      showNickname: true,
+    }
+  };
+
+  const currentConfig = config[mode];
+
+  // 统一的逻辑...
+  // 表单字段根据 showNickname 决定是否显示昵称输入框
+  // API调用根据 apiEndpoint 动态选择
+  // 所有文本使用 currentConfig 中的配置
+}
+```
+
+### 使用方式
+
+```javascript
+// LoginModalContent.js (简化为wrapper)
+import AuthFormContent from './AuthFormContent';
+
+export default function LoginModalContent() {
+  return <AuthFormContent mode="login" />;
+}
+
+// SignUpModalContent.js (简化为wrapper)
+import AuthFormContent from './AuthFormContent';
+
+export default function SignUpModalContent() {
+  return <AuthFormContent mode="register" />;
+}
+```
+
+或者直接在 AuthModalManager 中使用：
+
+```javascript
+// AuthModalManager.js
+<ModalBody p={0}>
+  {isLoginModalOpen && <AuthFormContent mode="login" />}
+  {isSignUpModalOpen && <AuthFormContent mode="register" />}
+</ModalBody>
+```
+
+---
+
+## 📈 合并后的优势
+
+### 代码量对比
+
+| 项目 | 当前方案 | 合并方案 | 减少量 |
+|-----|---------|---------|-------|
+| **LoginModalContent.js** | 303行 | 0行（或5行wrapper） | -303行 |
+| **SignUpModalContent.js** | 341行 | 0行（或5行wrapper） | -341行 |
+| **AuthFormContent.js** | 0行 | 约350行 | +350行 |
+| **总计** | 644行 | 350-360行 | **-284行（-44%）** |
+
+### 维护优势
+
+✅ **Bug修复效率提升**
+- 修复一次，两处生效
+- 例如：验证码倒计时bug只需修复一处
+
+✅ **新功能添加更快**
+- 添加邮箱登录/注册，只需扩展config
+- 添加新的验证逻辑，一处添加即可
+
+✅ **代码一致性**
+- 登录和注册体验完全一致
+- UI风格统一
+- 交互逻辑统一
+
+✅ **测试更简单**
+- 只需测试一个组件的不同模式
+- 测试用例可以复用
+
+---
+
+## 🚧 实施步骤
+
+### Step 1: 创建 AuthFormContent.js（30分钟）
+```bash
+- 复制 LoginModalContent.js 作为基础
+- 添加 mode prop 和 config 配置
+- 根据 config 动态渲染文本和调用API
+- 添加 showNickname 条件渲染昵称字段
+```
+
+### Step 2: 简化现有组件（10分钟）
+```bash
+- LoginModalContent.js 改为 wrapper
+- SignUpModalContent.js 改为 wrapper
+```
+
+### Step 3: 测试验证（20分钟）
+```bash
+- 测试登录功能
+- 测试注册功能
+- 测试登录⇔注册切换
+- 测试验证码发送和倒计时
+```
+
+### Step 4: 清理代码（可选）
+```bash
+- 如果测试通过，可以删除 LoginModalContent 和 SignUpModalContent
+- 直接在 AuthModalManager 中使用 AuthFormContent
+```
+
+**总预计时间**: 1小时
+
+---
+
+## ⚠️ 注意事项
+
+### 需要保留的差异
+
+1. **昵称字段**
+   - 注册时显示，登录时隐藏
+   - 使用条件渲染：`{currentConfig.showNickname && <FormControl>...</FormControl>}`
+
+2. **API参数差异**
+   - 登录：`{ credential, verification_code, login_type }`
+   - 注册：`{ credential, verification_code, register_type, nickname }`
+   - 使用条件判断构建请求体
+
+3. **成功后的延迟**
+   - 登录：立即调用 handleLoginSuccess
+   - 注册：延迟1秒再调用（让用户看到成功提示）
+
+### 不建议合并的部分
+
+❌ **WechatRegister 组件**
+- 微信登录/注册逻辑已经统一在 WechatRegister 中
+- 无需额外处理
+
+---
+
+## 🎉 最终建议
+
+### 🟢 **强烈推荐合并**
+
+**理由：**
+1. 代码重复率达90%，合并后可减少44%代码量
+2. 差异点很小，可以通过配置轻松解决
+3. 维护成本大幅降低
+4. 代码结构更清晰
+5. 未来扩展更容易（邮箱注册、第三方登录等）
+
+**风险：**
+- 风险极低
+- 合并后的组件逻辑清晰，不会增加复杂度
+- 可以通过wrapper保持向后兼容
+
+---
+
+## 📝 示例代码片段
+
+### 统一配置对象
+
+```javascript
+const AUTH_CONFIG = {
+  login: {
+    // UI文本
+    title: "欢迎回来",
+    subtitle: "登录价值前沿，继续您的投资之旅",
+    formTitle: "验证码登录",
+    buttonText: "登录",
+    loadingText: "登录中...",
+    successMessage: "登录成功，欢迎回来！",
+
+    // 底部链接
+    footer: {
+      text: "还没有账号，",
+      linkText: "去注册",
+      onClick: (switchToSignUp) => switchToSignUp(),
+    },
+
+    // API配置
+    api: {
+      endpoint: '/api/auth/login-with-code',
+      purpose: 'login',
+      requestBuilder: (formData) => ({
+        credential: formData.phone,
+        verification_code: formData.verificationCode,
+        login_type: 'phone'
+      })
+    },
+
+    // 功能开关
+    features: {
+      showNickname: false,
+      successDelay: 0,
+    }
+  },
+
+  register: {
+    // UI文本
+    title: "欢迎注册",
+    subtitle: "加入价值前沿，开启您的投资之旅",
+    formTitle: "手机号注册",
+    buttonText: "注册",
+    loadingText: "注册中...",
+    successMessage: "注册成功，欢迎加入价值前沿！自动登录中...",
+
+    // 底部链接
+    footer: {
+      text: "已有账号？",
+      linkText: "去登录",
+      onClick: (switchToLogin) => switchToLogin(),
+    },
+
+    // API配置
+    api: {
+      endpoint: '/api/auth/register-with-code',
+      purpose: 'register',
+      requestBuilder: (formData) => ({
+        credential: formData.phone,
+        verification_code: formData.verificationCode,
+        register_type: 'phone',
+        nickname: formData.nickname || undefined
+      })
+    },
+
+    // 功能开关
+    features: {
+      showNickname: true,
+      successDelay: 1000,
+    }
+  }
+};
+```
+
+### 统一提交处理
+
+```javascript
+const handleSubmit = async (e) => {
+  e.preventDefault();
+  setIsLoading(true);
+
+  try {
+    const { phone, verificationCode } = formData;
+    const config = AUTH_CONFIG[mode];
+
+    // 表单验证
+    if (!phone || !verificationCode) {
+      toast({
+        title: "请填写完整信息",
+        description: "手机号和验证码不能为空",
+        status: "warning",
+        duration: 3000,
+      });
+      return;
+    }
+
+    // 调用API
+    const requestBody = config.api.requestBuilder(formData);
+    const response = await fetch(`${API_BASE_URL}${config.api.endpoint}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      body: JSON.stringify(requestBody),
+    });
+
+    if (!response) {
+      throw new Error('网络请求失败，请检查网络连接');
+    }
+
+    const data = await response.json();
+
+    if (!isMountedRef.current) return;
+
+    if (!data) {
+      throw new Error('服务器响应为空');
+    }
+
+    if (response.ok && data.success) {
+      await checkSession();
+
+      toast({
+        title: config.successMessage.split('，')[0],
+        description: config.successMessage.split('，').slice(1).join('，'),
+        status: "success",
+        duration: 2000,
+      });
+
+      // 根据配置决定延迟时间
+      setTimeout(() => {
+        handleLoginSuccess({ phone, nickname: formData.nickname });
+      }, config.features.successDelay);
+    } else {
+      throw new Error(data.error || `${mode === 'login' ? '登录' : '注册'}失败`);
+    }
+  } catch (error) {
+    if (isMountedRef.current) {
+      toast({
+        title: `${mode === 'login' ? '登录' : '注册'}失败`,
+        description: error.message || "请稍后重试",
+        status: "error",
+        duration: 3000,
+      });
+    }
+  } finally {
+    if (isMountedRef.current) {
+      setIsLoading(false);
+    }
+  }
+};
+```
+
+---
+
+## 🚀 下一步行动
+
+### 建议立即实施合并
+
+**理由**：
+- ✅ 当前代码已经去除密码登录，正是重构的好时机
+- ✅ 合并方案成熟，风险可控
+- ✅ 1小时即可完成，投入产出比高
+
+**实施顺序**：
+1. 创建 AuthFormContent.js
+2. 测试验证
+3. 简化或删除 LoginModalContent 和 SignUpModalContent
+4. 更新文档
+
+---
+
+**分析完成时间**: 2025-10-14
+**分析结论**: ✅ **强烈推荐合并**
+
+需要我现在开始实施合并吗？

LOGIN_MODAL_REFACTOR_PLAN.md

@@ -0,0 +1,947 @@
+# 登录跳转改造为弹窗方案
+
+> **改造日期**: 2025-10-14
+> **改造范围**: 全项目登录/注册交互流程
+> **改造目标**: 将所有页面跳转式登录改为弹窗式登录，提升用户体验
+
+---
+
+## 📋 目录
+
+- [1. 改造目标](#1-改造目标)
+- [2. 影响范围分析](#2-影响范围分析)
+- [3. 技术方案设计](#3-技术方案设计)
+- [4. 实施步骤](#4-实施步骤)
+- [5. 测试用例](#5-测试用例)
+- [6. 兼容性处理](#6-兼容性处理)
+
+---
+
+## 1. 改造目标
+
+### 1.1 用户体验提升
+
+**改造前**：
+```
+用户访问需登录页面 → 页面跳转到 /auth/signin → 登录成功 → 跳转回原页面
+```
+
+**改造后**：
+```
+用户访问需登录页面 → 弹出登录弹窗 → 登录成功 → 弹窗关闭，继续访问原页面
+```
+
+### 1.2 优势
+
+✅ **减少页面跳转**：无需离开当前页面，保持上下文
+✅ **流畅体验**：弹窗式交互更现代、更友好
+✅ **保留页面状态**：当前页面的表单数据、滚动位置等不会丢失
+✅ **支持快速切换**：在弹窗内切换登录/注册，无页面刷新
+✅ **更好的 SEO**：减少不必要的 URL 跳转
+
+---
+
+## 2. 影响范围分析
+
+### 2.1 需要登录/注册的场景统计
+
+| 场景类别 | 触发位置 | 当前实现 | 影响文件 | 优先级 |
+|---------|---------|---------|---------|-------|
+| **导航栏登录按钮** | HomeNavbar、AdminNavbarLinks | `navigate('/auth/signin')` | 2个文件 | 🔴 高 |
+| **导航栏注册按钮** | HomeNavbar（"登录/注册"按钮） | 集成在登录按钮中 | 1个文件 | 🔴 高 |
+| **用户登出** | AuthContext.logout() | `navigate('/auth/signin')` | 1个文件 | 🔴 高 |
+| **受保护路由拦截** | ProtectedRoute组件 | `<Navigate to="/auth/signin" />` | 1个文件 | 🔴 高 |
+| **登录/注册页面切换** | SignInIllustration、SignUpIllustration | `linkTo="/auth/sign-up"` | 2个文件 | 🟡 中 |
+| **其他认证页面** | SignInBasic、SignUpCentered等 | `navigate()` | 4个文件 | 🟢 低 |
+
+### 2.2 详细文件列表
+
+#### 🔴 核心文件（必须修改）
+
+1. **`src/contexts/AuthContext.js`** (459行, 466行)
+   - `logout()` 函数中的 `navigate('/auth/signin')`
+   - **影响**：所有登出操作
+
+2. **`src/components/ProtectedRoute.js`** (30行, 34行)
+   - `<Navigate to={redirectUrl} replace />`
+   - **影响**：所有受保护路由的未登录拦截
+
+3. **`src/components/Navbars/HomeNavbar.js`** (236行, 518-530行)
+   - `handleLoginClick()` 函数
+   - "登录/注册"按钮（需拆分为登录和注册两个选项）
+   - **影响**：首页顶部导航栏登录/注册按钮
+
+4. **`src/components/Navbars/AdminNavbarLinks.js`** (86行, 147行)
+   - `navigate("/auth/signin")`
+   - **影响**：管理后台导航栏登录按钮
+
+#### 🟡 次要文件（建议修改）
+
+5. **`src/views/Authentication/SignIn/SignInIllustration.js`** (464行)
+   - AuthFooter组件的 `linkTo="/auth/sign-up"`
+   - **影响**：登录页面内的"去注册"链接
+
+6. **`src/views/Authentication/SignUp/SignUpIllustration.js`** (373行)
+   - AuthFooter组件的 `linkTo="/auth/sign-in"`
+   - **影响**：注册页面内的"去登录"链接
+
+#### 🟢 可选文件（保持兼容）
+
+7-10. **其他认证页面变体**：
+   - `src/views/Authentication/SignIn/SignInCentered.js`
+   - `src/views/Authentication/SignIn/SignInBasic.js`
+   - `src/views/Authentication/SignUp/SignUpBasic.js`
+   - `src/views/Authentication/SignUp/SignUpCentered.js`
+
+这些是模板中的备用页面，可以保持现有实现，不影响核心功能。
+
+---
+
+## 3. 技术方案设计
+
+### 3.1 架构设计
+
+```
+┌─────────────────────────────────────────────┐
+│            AuthModalContext                  │
+│  - isLoginModalOpen                          │
+│  - isSignUpModalOpen                         │
+│  - openLoginModal(redirectUrl?)              │
+│  - openSignUpModal()                         │
+│  - closeModal()                              │
+│  - onLoginSuccess(callback?)                 │
+└─────────────────────────────────────────────┘
+                    ↓
+┌─────────────────────────────────────────────┐
+│       AuthModalManager 组件                  │
+│  - 渲染登录/注册弹窗                          │
+│  - 管理弹窗状态                               │
+│  - 处理登录成功回调                           │
+└─────────────────────────────────────────────┘
+                    ↓
+┌──────────────────┬─────────────────────────┐
+│  LoginModal      │   SignUpModal           │
+│  - 复用现有UI    │   - 复用现有UI          │
+│  - Chakra Modal  │   - Chakra Modal        │
+└──────────────────┴─────────────────────────┘
+```
+
+### 3.2 核心组件设计
+
+#### 3.2.1 AuthModalContext
+
+```javascript
+// src/contexts/AuthModalContext.js
+import { createContext, useContext, useState, useCallback } from 'react';
+
+const AuthModalContext = createContext();
+
+export const useAuthModal = () => {
+  const context = useContext(AuthModalContext);
+  if (!context) {
+    throw new Error('useAuthModal must be used within AuthModalProvider');
+  }
+  return context;
+};
+
+export const AuthModalProvider = ({ children }) => {
+  const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
+  const [isSignUpModalOpen, setIsSignUpModalOpen] = useState(false);
+  const [redirectUrl, setRedirectUrl] = useState(null);
+  const [onSuccessCallback, setOnSuccessCallback] = useState(null);
+
+  // 打开登录弹窗
+  const openLoginModal = useCallback((url = null, callback = null) => {
+    setRedirectUrl(url);
+    setOnSuccessCallback(() => callback);
+    setIsLoginModalOpen(true);
+    setIsSignUpModalOpen(false);
+  }, []);
+
+  // 打开注册弹窗
+  const openSignUpModal = useCallback((callback = null) => {
+    setOnSuccessCallback(() => callback);
+    setIsSignUpModalOpen(true);
+    setIsLoginModalOpen(false);
+  }, []);
+
+  // 切换到注册弹窗
+  const switchToSignUp = useCallback(() => {
+    setIsLoginModalOpen(false);
+    setIsSignUpModalOpen(true);
+  }, []);
+
+  // 切换到登录弹窗
+  const switchToLogin = useCallback(() => {
+    setIsSignUpModalOpen(false);
+    setIsLoginModalOpen(true);
+  }, []);
+
+  // 关闭弹窗
+  const closeModal = useCallback(() => {
+    setIsLoginModalOpen(false);
+    setIsSignUpModalOpen(false);
+    setRedirectUrl(null);
+    setOnSuccessCallback(null);
+  }, []);
+
+  // 登录成功处理
+  const handleLoginSuccess = useCallback((user) => {
+    if (onSuccessCallback) {
+      onSuccessCallback(user);
+    }
+
+    // 如果有重定向URL，则跳转
+    if (redirectUrl) {
+      window.location.href = redirectUrl;
+    }
+
+    closeModal();
+  }, [onSuccessCallback, redirectUrl, closeModal]);
+
+  const value = {
+    isLoginModalOpen,
+    isSignUpModalOpen,
+    openLoginModal,
+    openSignUpModal,
+    switchToSignUp,
+    switchToLogin,
+    closeModal,
+    handleLoginSuccess,
+    redirectUrl
+  };
+
+  return (
+    <AuthModalContext.Provider value={value}>
+      {children}
+    </AuthModalContext.Provider>
+  );
+};
+```
+
+#### 3.2.2 AuthModalManager 组件
+
+```javascript
+// src/components/Auth/AuthModalManager.js
+import React from 'react';
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalBody,
+  ModalCloseButton,
+  useBreakpointValue
+} from '@chakra-ui/react';
+import { useAuthModal } from '../../contexts/AuthModalContext';
+import LoginModalContent from './LoginModalContent';
+import SignUpModalContent from './SignUpModalContent';
+
+export default function AuthModalManager() {
+  const {
+    isLoginModalOpen,
+    isSignUpModalOpen,
+    closeModal
+  } = useAuthModal();
+
+  const modalSize = useBreakpointValue({
+    base: "full",
+    sm: "xl",
+    md: "2xl",
+    lg: "4xl"
+  });
+
+  const isOpen = isLoginModalOpen || isSignUpModalOpen;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={closeModal}
+      size={modalSize}
+      isCentered
+      closeOnOverlayClick={false}
+    >
+      <ModalOverlay bg="blackAlpha.700" backdropFilter="blur(10px)" />
+      <ModalContent
+        bg="transparent"
+        boxShadow="none"
+        maxW={modalSize === "full" ? "100%" : "900px"}
+      >
+        <ModalCloseButton
+          position="absolute"
+          right={4}
+          top={4}
+          zIndex={10}
+          color="white"
+          bg="blackAlpha.500"
+          _hover={{ bg: "blackAlpha.700" }}
+        />
+        <ModalBody p={0}>
+          {isLoginModalOpen && <LoginModalContent />}
+          {isSignUpModalOpen && <SignUpModalContent />}
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+}
+```
+
+#### 3.2.3 LoginModalContent 组件
+
+```javascript
+// src/components/Auth/LoginModalContent.js
+// 复用 SignInIllustration.js 的核心UI逻辑
+// 移除页面级的 Flex minH="100vh"，改为 Box
+// 移除 navigate 跳转，改为调用 useAuthModal 的方法
+```
+
+#### 3.2.4 SignUpModalContent 组件
+
+```javascript
+// src/components/Auth/SignUpModalContent.js
+// 复用 SignUpIllustration.js 的核心UI逻辑
+// 移除页面级的 Flex minH="100vh"，改为 Box
+// 注册成功后调用 handleLoginSuccess 而不是 navigate
+```
+
+### 3.3 集成到 App.js
+
+```javascript
+// src/App.js
+import { AuthModalProvider } from "contexts/AuthModalContext";
+import AuthModalManager from "components/Auth/AuthModalManager";
+
+export default function App() {
+  return (
+    <ChakraProvider theme={theme}>
+      <ErrorBoundary>
+        <AuthProvider>
+          <AuthModalProvider>
+            <AppContent />
+            <AuthModalManager />  {/* 全局弹窗管理器 */}
+          </AuthModalProvider>
+        </AuthProvider>
+      </ErrorBoundary>
+    </ChakraProvider>
+  );
+}
+```
+
+---
+
+## 4. 实施步骤
+
+### 阶段1：创建基础设施（1-2小时）
+
+- [ ] **Step 1.1**: 创建 `AuthModalContext.js`
+  - 实现状态管理
+  - 实现打开/关闭方法
+  - 实现成功回调处理
+
+- [ ] **Step 1.2**: 创建 `AuthModalManager.js`
+  - 实现 Modal 容器
+  - 处理响应式布局
+  - 添加关闭按钮
+
+- [ ] **Step 1.3**: 提取登录UI组件
+  - 从 `SignInIllustration.js` 提取核心UI
+  - 创建 `LoginModalContent.js`
+  - 移除页面级布局代码
+  - 替换 navigate 为 modal 方法
+
+- [ ] **Step 1.4**: 提取注册UI组件
+  - 从 `SignUpIllustration.js` 提取核心UI
+  - 创建 `SignUpModalContent.js`
+  - 移除页面级布局代码
+  - 替换 navigate 为 modal 方法
+
+### 阶段2：集成到应用（0.5-1小时）
+
+- [ ] **Step 2.1**: 在 `App.js` 中集成
+  - 导入 `AuthModalProvider`
+  - 包裹 `AppContent`
+  - 添加 `<AuthModalManager />`
+
+- [ ] **Step 2.2**: 验证基础功能
+  - 测试弹窗打开/关闭
+  - 测试登录/注册切换
+  - 测试响应式布局
+
+### 阶段3：替换现有跳转（1-2小时）
+
+- [ ] **Step 3.1**: 修改 `HomeNavbar.js` - 添加登录和注册弹窗
+  ```javascript
+  // 修改前
+  const handleLoginClick = () => {
+    navigate('/auth/signin');
+  };
+
+  // 未登录状态显示"登录/注册"按钮
+  <Button onClick={handleLoginClick}>登录 / 注册</Button>
+
+  // 修改后
+  import { useAuthModal } from '../../contexts/AuthModalContext';
+  import { Menu, MenuButton, MenuList, MenuItem } from '@chakra-ui/react';
+
+  const { openLoginModal, openSignUpModal } = useAuthModal();
+
+  // 方式1：下拉菜单方式（推荐）
+  <Menu>
+    <MenuButton
+      as={Button}
+      colorScheme="blue"
+      variant="solid"
+      size="sm"
+      borderRadius="full"
+      rightIcon={<ChevronDownIcon />}
+    >
+      登录 / 注册
+    </MenuButton>
+    <MenuList>
+      <MenuItem onClick={() => openLoginModal()}>
+        🔐 登录
+      </MenuItem>
+      <MenuItem onClick={() => openSignUpModal()}>
+        ✍️ 注册
+      </MenuItem>
+    </MenuList>
+  </Menu>
+
+  // 方式2：并排按钮方式（备选）
+  <HStack spacing={2}>
+    <Button
+      size="sm"
+      variant="ghost"
+      onClick={() => openLoginModal()}
+    >
+      登录
+    </Button>
+    <Button
+      size="sm"
+      colorScheme="blue"
+      onClick={() => openSignUpModal()}
+    >
+      注册
+    </Button>
+  </HStack>
+  ```
+
+- [ ] **Step 3.2**: 修改 `AdminNavbarLinks.js`
+  - 替换 `navigate("/auth/signin")` 为 `openLoginModal()`
+
+- [ ] **Step 3.3**: 修改 `AuthContext.js` logout函数
+  ```javascript
+  // 修改前
+  const logout = async () => {
+    // ... 清理逻辑
+    navigate('/auth/signin');
+  };
+
+  // 修改后
+  const logout = async () => {
+    // ... 清理逻辑
+    // 不再跳转，用户留在当前页面
+    toast({
+      title: "已登出",
+      description: "您已成功退出登录",
+      status: "info",
+      duration: 2000
+    });
+  };
+  ```
+
+- [ ] **Step 3.4**: 修改 `ProtectedRoute.js`
+  ```javascript
+  // 修改前
+  if (!isAuthenticated || !user) {
+    return <Navigate to={redirectUrl} replace />;
+  }
+
+  // 修改后
+  import { useAuthModal } from '../contexts/AuthModalContext';
+  import { useEffect } from 'react';
+
+  const { openLoginModal, isLoginModalOpen } = useAuthModal();
+
+  useEffect(() => {
+    if (!isAuthenticated && !user && !isLoginModalOpen) {
+      openLoginModal(currentPath);
+    }
+  }, [isAuthenticated, user, isLoginModalOpen, currentPath, openLoginModal]);
+
+  // 未登录时显示占位符（不再跳转）
+  if (!isAuthenticated || !user) {
+    return (
+      <Box height="100vh" display="flex" alignItems="center" justifyContent="center">
+        <VStack spacing={4}>
+          <Spinner size="xl" color="blue.500" />
+          <Text>请先登录...</Text>
+        </VStack>
+      </Box>
+    );
+  }
+  ```
+
+### 阶段4：测试与优化（1-2小时）
+
+- [ ] **Step 4.1**: 功能测试（见第5节）
+- [ ] **Step 4.2**: 边界情况处理
+- [ ] **Step 4.3**: 性能优化
+- [ ] **Step 4.4**: 用户体验优化
+
+---
+
+## 5. 测试用例
+
+### 5.1 基础功能测试
+
+| 测试项 | 测试步骤 | 预期结果 | 状态 |
+|-------|---------|---------|-----|
+| **登录弹窗打开** | 1. 点击导航栏"登录/注册"下拉菜单<br>2. 点击"登录" | 弹窗正常打开，显示登录表单 | ⬜ |
+| **注册弹窗打开** | 1. 点击导航栏"登录/注册"下拉菜单<br>2. 点击"注册" | 弹窗正常打开，显示注册表单 | ⬜ |
+| **登录弹窗关闭** | 1. 打开登录弹窗<br>2. 点击关闭按钮 | 弹窗正常关闭，返回原页面 | ⬜ |
+| **注册弹窗关闭** | 1. 打开注册弹窗<br>2. 点击关闭按钮 | 弹窗正常关闭，返回原页面 | ⬜ |
+| **从登录切换到注册** | 1. 打开登录弹窗<br>2. 点击"去注册" | 弹窗切换到注册表单，无页面刷新 | ⬜ |
+| **从注册切换到登录** | 1. 打开注册弹窗<br>2. 点击"去登录" | 弹窗切换到登录表单，无页面刷新 | ⬜ |
+| **手机号+密码登录** | 1. 打开登录弹窗<br>2. 输入手机号和密码<br>3. 点击登录 | 登录成功，弹窗关闭，显示成功提示 | ⬜ |
+| **验证码登录** | 1. 打开登录弹窗<br>2. 切换到验证码登录<br>3. 发送并输入验证码<br>4. 点击登录 | 登录成功，弹窗关闭 | ⬜ |
+| **微信登录** | 1. 打开登录弹窗<br>2. 点击微信登录<br>3. 扫码授权 | 登录成功，弹窗关闭 | ⬜ |
+| **手机号+密码注册** | 1. 打开注册弹窗<br>2. 填写手机号、密码等信息<br>3. 点击注册 | 注册成功，弹窗关闭，自动登录 | ⬜ |
+| **验证码注册** | 1. 打开注册弹窗<br>2. 切换到验证码注册<br>3. 发送并输入验证码<br>4. 点击注册 | 注册成功，弹窗关闭，自动登录 | ⬜ |
+| **微信注册** | 1. 打开注册弹窗<br>2. 点击微信注册<br>3. 扫码授权 | 注册成功，弹窗关闭，自动登录 | ⬜ |
+
+### 5.2 受保护路由测试
+
+| 测试项 | 测试步骤 | 预期结果 | 状态 |
+|-------|---------|---------|-----|
+| **未登录访问概念中心** | 1. 未登录状态<br>2. 访问 `/concepts` | 自动弹出登录弹窗 | ⬜ |
+| **登录后继续访问** | 1. 在上述弹窗中登录<br>2. 查看页面状态 | 弹窗关闭，概念中心页面正常显示 | ⬜ |
+| **未登录访问社区** | 1. 未登录状态<br>2. 访问 `/community` | 自动弹出登录弹窗 | ⬜ |
+| **未登录访问个股中心** | 1. 未登录状态<br>2. 访问 `/stocks` | 自动弹出登录弹窗 | ⬜ |
+| **未登录访问模拟盘** | 1. 未登录状态<br>2. 访问 `/trading-simulation` | 自动弹出登录弹窗 | ⬜ |
+| **未登录访问管理后台** | 1. 未登录状态<br>2. 访问 `/admin/*` | 自动弹出登录弹窗 | ⬜ |
+
+### 5.3 登出测试
+
+| 测试项 | 测试步骤 | 预期结果 | 状态 |
+|-------|---------|---------|-----|
+| **从导航栏登出** | 1. 已登录状态<br>2. 点击用户菜单"退出登录" | 登出成功，留在当前页面，显示未登录状态 | ⬜ |
+| **登出后访问受保护页面** | 1. 登出后<br>2. 尝试访问 `/concepts` | 自动弹出登录弹窗 | ⬜ |
+
+### 5.4 边界情况测试
+
+| 测试项 | 测试步骤 | 预期结果 | 状态 |
+|-------|---------|---------|-----|
+| **登录失败** | 1. 输入错误的手机号或密码<br>2. 点击登录 | 显示错误提示，弹窗保持打开 | ⬜ |
+| **网络断开** | 1. 断开网络<br>2. 尝试登录 | 显示网络错误提示 | ⬜ |
+| **倒计时中关闭弹窗** | 1. 发送验证码（60秒倒计时）<br>2. 关闭弹窗<br>3. 重新打开 | 倒计时正确清理，无内存泄漏 | ⬜ |
+| **重复打开弹窗** | 1. 快速连续点击登录按钮多次 | 只显示一个弹窗，无重复 | ⬜ |
+| **响应式布局** | 1. 在手机端打开登录弹窗 | 弹窗全屏显示，UI适配良好 | ⬜ |
+
+### 5.5 兼容性测试
+
+| 测试项 | 测试步骤 | 预期结果 | 状态 |
+|-------|---------|---------|-----|
+| **直接访问登录页面** | 1. 访问 `/auth/sign-in` | 页面正常显示（保持路由兼容） | ⬜ |
+| **直接访问注册页面** | 1. 访问 `/auth/sign-up` | 页面正常显示（保持路由兼容） | ⬜ |
+| **SEO爬虫访问** | 1. 模拟搜索引擎爬虫访问 | 页面可访问，无JavaScript错误 | ⬜ |
+
+---
+
+## 6. 兼容性处理
+
+### 6.1 保留现有路由
+
+为了兼容性和SEO，保留现有的登录/注册页面路由：
+
+```javascript
+// src/layouts/Auth.js
+// 保持不变，继续支持 /auth/sign-in 和 /auth/sign-up 路由
+<Route path="signin" element={<SignInIllustration />} />
+<Route path="sign-up" element={<SignUpIllustration />} />
+```
+
+**好处**：
+- 外部链接（邮件、短信中的登录链接）仍然有效
+- SEO友好，搜索引擎可以正常抓取
+- 用户可以直接访问登录页面（如果他们更喜欢）
+
+### 6.2 渐进式迁移
+
+**阶段1**：保留两种方式
+- 弹窗登录（新实现）
+- 页面跳转登录（旧实现）
+
+**阶段2**：逐步迁移
+- 核心场景使用弹窗（导航栏、受保护路由）
+- 非核心场景保持原样（备用认证页面）
+
+**阶段3**：全面切换（可选）
+- 所有场景统一使用弹窗
+- 页面路由仅作为后备
+
+### 6.3 微信登录兼容
+
+微信登录涉及OAuth回调，需要特殊处理：
+
+```javascript
+// WechatRegister.js 中
+// 微信授权成功后会跳转回 /auth/callback
+// 需要在回调页面检测到登录成功后：
+// 1. 更新 AuthContext 状态
+// 2. 如果是从弹窗发起的，关闭弹窗并回到原页面
+// 3. 如果是从页面发起的，跳转到目标页面
+```
+
+---
+
+## 7. 实施时间表
+
+### 总预计时间：4-6小时
+
+| 阶段 | 预计时间 | 实际时间 | 负责人 | 状态 |
+|-----|---------|---------|-------|------|
+| 阶段1：创建基础设施 | 1-2小时 | - | - | ⬜ 待开始 |
+| 阶段2：集成到应用 | 0.5-1小时 | - | - | ⬜ 待开始 |
+| 阶段3：替换现有跳转 | 1-2小时 | - | - | ⬜ 待开始 |
+| 阶段4：测试与优化 | 1-2小时 | - | - | ⬜ 待开始 |
+
+---
+
+## 8. 风险评估
+
+### 8.1 技术风险
+
+| 风险 | 等级 | 应对措施 |
+|-----|------|---------|
+| 微信登录回调兼容性 | 🟡 中 | 保留页面路由，微信回调仍跳转到页面 |
+| 受保护路由逻辑复杂化 | 🟡 中 | 详细测试，确保所有场景覆盖 |
+| 弹窗状态管理冲突 | 🟢 低 | 使用独立的Context，避免与AuthContext冲突 |
+| 内存泄漏 | 🟢 低 | 复用已有的内存管理模式（isMountedRef） |
+
+### 8.2 用户体验风险
+
+| 风险 | 等级 | 应对措施 |
+|-----|------|---------|
+| 用户不习惯弹窗登录 | 🟢 低 | 保留页面路由，提供选择 |
+| 移动端弹窗体验差 | 🟡 中 | 移动端使用全屏Modal |
+| 弹窗被误关闭 | 🟢 低 | 添加确认提示或表单状态保存 |
+
+---
+
+## 9. 后续优化建议
+
+### 9.1 短期优化（1周内）
+
+- [ ] 添加登录/注册进度指示器
+- [ ] 优化弹窗动画效果
+- [ ] 添加键盘快捷键支持（Esc关闭）
+- [ ] 优化移动端触摸体验
+
+### 9.2 中期优化（1月内）
+
+- [ ] 添加第三方登录（Google、GitHub等）
+- [ ] 实现记住登录状态
+- [ ] 添加生物识别登录（指纹、Face ID）
+- [ ] 优化表单验证提示
+
+### 9.3 长期优化（3月内）
+
+- [ ] 实现SSO单点登录
+- [ ] 添加多因素认证（2FA）
+- [ ] 实现社交账号关联
+- [ ] 完善审计日志
+
+---
+
+## 10. 参考资料
+
+- [Chakra UI Modal 文档](https://chakra-ui.com/docs/components/modal)
+- [React Context API 最佳实践](https://react.dev/learn/passing-data-deeply-with-context)
+- [用户认证最佳实践](https://cheatsheetseries.owasp.org/cheatsheets/Authentication_Cheat_Sheet.html)
+
+---
+
+**文档维护**：
+- 创建日期：2025-10-14
+- 最后更新：2025-10-14
+- 维护人：Claude Code
+- 状态：📝 规划阶段
+
+---
+
+## 附录A：关键代码片段
+
+### A.1 修改前后对比 - HomeNavbar.js
+
+```diff
+// src/components/Navbars/HomeNavbar.js
+
+- import { useNavigate } from 'react-router-dom';
++ import { useAuthModal } from '../../contexts/AuthModalContext';
+
+export default function HomeNavbar() {
+-   const navigate = useNavigate();
++   const { openLoginModal, openSignUpModal } = useAuthModal();
+
+-   // 处理登录按钮点击
+-   const handleLoginClick = () => {
+-       navigate('/auth/signin');
+-   };
+
+    return (
+        // ... 其他代码
+
+        {/* 未登录状态 */}
+-       <Button onClick={handleLoginClick}>
+-           登录 / 注册
+-       </Button>
+
++       {/* 方式1：下拉菜单（推荐） */}
++       <Menu>
++           <MenuButton
++               as={Button}
++               colorScheme="blue"
++               size="sm"
++               borderRadius="full"
++               rightIcon={<ChevronDownIcon />}
++           >
++               登录 / 注册
++           </MenuButton>
++           <MenuList>
++               <MenuItem onClick={() => openLoginModal()}>
++                   🔐 登录
++               </MenuItem>
++               <MenuItem onClick={() => openSignUpModal()}>
++                   ✍️ 注册
++               </MenuItem>
++           </MenuList>
++       </Menu>
++
++       {/* 方式2：并排按钮（备选） */}
++       <HStack spacing={2}>
++           <Button
++               size="sm"
++               variant="ghost"
++               onClick={() => openLoginModal()}
++           >
++               登录
++           </Button>
++           <Button
++               size="sm"
++               colorScheme="blue"
++               onClick={() => openSignUpModal()}
++           >
++               注册
++           </Button>
++       </HStack>
+    );
+}
+```
+
+### A.2 修改前后对比 - ProtectedRoute.js
+
+```diff
+// src/components/ProtectedRoute.js
+
++ import { useAuthModal } from '../contexts/AuthModalContext';
++ import { useEffect } from 'react';
+
+const ProtectedRoute = ({ children }) => {
+-   const { isAuthenticated, isLoading, user } = useAuth();
++   const { isAuthenticated, isLoading, user } = useAuth();
++   const { openLoginModal, isLoginModalOpen } = useAuthModal();
+
+-   if (isLoading) {
+-       return <Box>...Loading Spinner...</Box>;
+-   }
+
+    let currentPath = window.location.pathname + window.location.search;
+-   let redirectUrl = `/auth/signin?redirect=${encodeURIComponent(currentPath)}`;
+
++   // 未登录时自动弹出登录窗口
++   useEffect(() => {
++       if (!isAuthenticated && !user && !isLoginModalOpen) {
++           openLoginModal(currentPath);
++       }
++   }, [isAuthenticated, user, isLoginModalOpen, currentPath, openLoginModal]);
+
+    if (!isAuthenticated || !user) {
+-       return <Navigate to={redirectUrl} replace />;
++       return (
++           <Box height="100vh" display="flex" alignItems="center" justifyContent="center">
++               <VStack spacing={4}>
++                   <Spinner size="xl" color="blue.500" />
++                   <Text>请先登录...</Text>
++               </VStack>
++           </Box>
++       );
+    }
+
+    return children;
+};
+```
+
+### A.3 修改前后对比 - AuthContext.js
+
+```diff
+// src/contexts/AuthContext.js
+
+const logout = async () => {
+    try {
+        await fetch(`${API_BASE_URL}/api/auth/logout`, {
+            method: 'POST',
+            credentials: 'include'
+        });
+
+        setUser(null);
+        setIsAuthenticated(false);
+
+        toast({
+            title: "已登出",
+            description: "您已成功退出登录",
+            status: "info",
+            duration: 2000,
+            isClosable: true,
+        });
+
+-       navigate('/auth/signin');
+
+    } catch (error) {
+        console.error('Logout error:', error);
+        setUser(null);
+        setIsAuthenticated(false);
+-       navigate('/auth/signin');
+    }
+};
+```
+
+### A.4 修改前后对比 - LoginModalContent 和 SignUpModalContent 切换
+
+```diff
+// src/components/Auth/LoginModalContent.js
+
++ import { useAuthModal } from '../../contexts/AuthModalContext';
+
+export default function LoginModalContent() {
++   const { switchToSignUp, handleLoginSuccess } = useAuthModal();
+
+    // 登录成功处理
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        // ... 登录逻辑
+        if (loginSuccess) {
+-           navigate("/home");
++           handleLoginSuccess(userData);
+        }
+    };
+
+    return (
+        <Box>
+            {/* 登录表单 */}
+            <form onSubmit={handleSubmit}>
+                {/* ... 表单内容 */}
+            </form>
+
+            {/* 底部切换链接 */}
+            <AuthFooter
+                linkText="还没有账号，"
+                linkLabel="去注册"
+-               linkTo="/auth/sign-up"
++               onClick={() => switchToSignUp()}
+            />
+        </Box>
+    );
+}
+```
+
+```diff
+// src/components/Auth/SignUpModalContent.js
+
++ import { useAuthModal } from '../../contexts/AuthModalContext';
+
+export default function SignUpModalContent() {
++   const { switchToLogin, handleLoginSuccess } = useAuthModal();
+
+    // 注册成功处理
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        // ... 注册逻辑
+        if (registerSuccess) {
+-           toast({ title: "注册成功" });
+-           setTimeout(() => navigate("/auth/sign-in"), 2000);
++           toast({ title: "注册成功，自动登录中..." });
++           // 注册成功后自动登录，然后关闭弹窗
++           handleLoginSuccess(userData);
+        }
+    };
+
+    return (
+        <Box>
+            {/* 注册表单 */}
+            <form onSubmit={handleSubmit}>
+                {/* ... 表单内容 */}
+            </form>
+
+            {/* 底部切换链接 */}
+            <AuthFooter
+                linkText="已有账号？"
+                linkLabel="去登录"
+-               linkTo="/auth/sign-in"
++               onClick={() => switchToLogin()}
+            />
+        </Box>
+    );
+}
+```
+
+### A.5 AuthFooter 组件修改（支持弹窗切换）
+
+```diff
+// src/components/Auth/AuthFooter.js
+
+export default function AuthFooter({
+    linkText,
+    linkLabel,
+-   linkTo,
++   onClick,
+    useVerificationCode,
+    onSwitchMethod
+}) {
+    return (
+        <VStack spacing={3}>
+            <HStack justify="space-between" width="100%">
+                <Text fontSize="sm" color="gray.600">
+                    {linkText}
+-                   <Link to={linkTo} color="blue.500">
++                   <Link onClick={onClick} color="blue.500" cursor="pointer">
+                        {linkLabel}
+                    </Link>
+                </Text>
+                {onSwitchMethod && (
+                    <Button size="sm" variant="link" onClick={onSwitchMethod}>
+                        {useVerificationCode ? "密码登录" : "验证码登录"}
+                    </Button>
+                )}
+            </HStack>
+        </VStack>
+    );
+}
+```
+
+---
+
+**准备好开始实施了吗？**
+
+请确认以下事项：
+- [ ] 已备份当前代码（git commit）
+- [ ] 已在开发环境测试
+- [ ] 团队成员已了解改造方案
+- [ ] 准备好测试设备（桌面端、移动端）
+
+**开始命令**：
+```bash
+# 创建功能分支
+git checkout -b feature/login-modal-refactor
+
+# 开始实施...
+```

LOGIN_MODAL_REFACTOR_SUMMARY.md

@@ -0,0 +1,420 @@
+# 登录/注册弹窗改造 - 完成总结
+
+> **完成日期**: 2025-10-14
+> **状态**: ✅ 所有任务已完成
+
+---
+
+## 📊 实施结果
+
+### ✅ 阶段1：组件合并（已完成）
+
+#### 1.1 创建统一的 AuthFormContent 组件
+**文件**: `src/components/Auth/AuthFormContent.js`
+**代码行数**: 434 行
+
+**核心特性**:
+- ✅ 使用 `mode` prop 支持 'login' 和 'register' 两种模式
+- ✅ 配置驱动架构 (`AUTH_CONFIG`)
+- ✅ 统一的状态管理和验证码逻辑
+- ✅ 内存泄漏防护 (isMountedRef)
+- ✅ 安全的 API 响应处理
+- ✅ 条件渲染昵称字段（仅注册时显示）
+- ✅ 延迟控制（登录立即关闭，注册延迟1秒）
+
+**配置对象结构**:
+```javascript
+const AUTH_CONFIG = {
+  login: {
+    title: "欢迎回来",
+    formTitle: "验证码登录",
+    apiEndpoint: '/api/auth/login-with-code',
+    purpose: 'login',
+    showNickname: false,
+    successDelay: 0,
+    // ... 更多配置
+  },
+  register: {
+    title: "欢迎注册",
+    formTitle: "手机号注册",
+    apiEndpoint: '/api/auth/register-with-code',
+    purpose: 'register',
+    showNickname: true,
+    successDelay: 1000,
+    // ... 更多配置
+  }
+};
+```
+
+#### 1.2 简化 LoginModalContent.js
+**代码行数**: 从 337 行 → 8 行（减少 97.6%）
+
+```javascript
+export default function LoginModalContent() {
+    return <AuthFormContent mode="login" />;
+}
+```
+
+#### 1.3 简化 SignUpModalContent.js
+**代码行数**: 从 341 行 → 8 行（减少 97.7%）
+
+```javascript
+export default function SignUpModalContent() {
+    return <AuthFormContent mode="register" />;
+}
+```
+
+### 📉 代码减少统计
+
+| 组件 | 合并前 | 合并后 | 减少量 | 减少率 |
+|-----|-------|-------|-------|--------|
+| **LoginModalContent.js** | 337 行 | 8 行 | -329 行 | -97.6% |
+| **SignUpModalContent.js** | 341 行 | 8 行 | -333 行 | -97.7% |
+| **AuthFormContent.js (新)** | 0 行 | 434 行 | +434 行 | - |
+| **总计** | 678 行 | 450 行 | **-228 行** | **-33.6%** |
+
+---
+
+### ✅ 阶段2：全局弹窗管理（已完成）
+
+#### 2.1 创建 AuthModalContext.js
+**文件**: `src/contexts/AuthModalContext.js`
+**代码行数**: 136 行
+
+**核心功能**:
+- ✅ 全局登录/注册弹窗状态管理
+- ✅ 支持重定向 URL 记录
+- ✅ 成功回调函数支持
+- ✅ 弹窗切换功能 (login ↔ register)
+
+**API**:
+```javascript
+const {
+  isLoginModalOpen,
+  isSignUpModalOpen,
+  openLoginModal,      // (redirectUrl?, callback?)
+  openSignUpModal,     // (redirectUrl?, callback?)
+  switchToLogin,       // 切换到登录弹窗
+  switchToSignUp,      // 切换到注册弹窗
+  handleLoginSuccess,  // 处理登录成功
+  closeModal,          // 关闭弹窗
+} = useAuthModal();
+```
+
+#### 2.2 创建 AuthModalManager.js
+**文件**: `src/components/Auth/AuthModalManager.js`
+**代码行数**: 70 行
+
+**核心功能**:
+- ✅ 全局弹窗渲染器
+- ✅ 响应式尺寸适配（移动端全屏，桌面端居中）
+- ✅ 毛玻璃背景效果
+- ✅ 关闭按钮
+
+#### 2.3 集成到 App.js
+**修改文件**: `src/App.js`
+
+**变更内容**:
+```javascript
+import { AuthModalProvider } from "contexts/AuthModalContext";
+import AuthModalManager from "components/Auth/AuthModalManager";
+
+export default function App() {
+    return (
+        <ChakraProvider theme={theme}>
+            <ErrorBoundary>
+                <AuthProvider>
+                    <AuthModalProvider>
+                        <AppContent />
+                        <AuthModalManager />  {/* 全局弹窗管理器 */}
+                    </AuthModalProvider>
+                </AuthProvider>
+            </ErrorBoundary>
+        </ChakraProvider>
+    );
+}
+```
+
+---
+
+### ✅ 阶段3：导航和路由改造（已完成）
+
+#### 3.1 修改 HomeNavbar.js
+**文件**: `src/components/Navbars/HomeNavbar.js`
+
+**变更内容**:
+- ✅ 移除直接导航到 `/auth/signin`
+- ✅ 添加登录/注册下拉菜单（桌面端）
+- ✅ 添加两个独立按钮（移动端）
+- ✅ 使用 `openLoginModal()` 和 `openSignUpModal()`
+
+**桌面端效果**:
+```
+[登录 / 注册 ▼]
+  ├─ 🔐 登录
+  └─ ✍️ 注册
+```
+
+**移动端效果**:
+```
+[ 🔐 登录 ]
+[ ✍️ 注册 ]
+```
+
+#### 3.2 修改 AuthContext.js
+**文件**: `src/contexts/AuthContext.js`
+
+**变更内容**:
+- ✅ 移除 `logout()` 中的 `navigate('/auth/signin')`
+- ✅ 用户登出后留在当前页面
+- ✅ 保留 toast 提示
+
+**Before**:
+```javascript
+const logout = async () => {
+    // ...
+    navigate('/auth/signin'); // ❌ 会跳转走
+};
+```
+
+**After**:
+```javascript
+const logout = async () => {
+    // ...
+    // ✅ 不再跳转，用户留在当前页面
+};
+```
+
+#### 3.3 修改 ProtectedRoute.js
+**文件**: `src/components/ProtectedRoute.js`
+
+**变更内容**:
+- ✅ 移除 `<Navigate to="/auth/signin" />`
+- ✅ 使用 `openLoginModal()` 自动打开登录弹窗
+- ✅ 记录当前路径，登录成功后自动跳转回来
+
+**Before**:
+```javascript
+if (!isAuthenticated) {
+    return <Navigate to="/auth/signin" replace />;  // ❌ 页面跳转
+}
+```
+
+**After**:
+```javascript
+useEffect(() => {
+  if (!isAuthenticated && !isLoginModalOpen) {
+    openLoginModal(currentPath);  // ✅ 弹窗拦截
+  }
+}, [isAuthenticated, isLoginModalOpen]);
+```
+
+#### 3.4 修改 AuthFooter.js
+**文件**: `src/components/Auth/AuthFooter.js`
+
+**变更内容**:
+- ✅ 支持 `onClick` 模式（弹窗内使用）
+- ✅ 保留 `linkTo` 模式（页面导航，向下兼容）
+
+---
+
+## 🎉 完成的功能
+
+### ✅ 核心功能
+1. **统一组件架构**
+   - 单一的 AuthFormContent 组件处理登录和注册
+   - 配置驱动，易于扩展（如添加邮箱登录）
+
+2. **全局弹窗管理**
+   - AuthModalContext 统一管理弹窗状态
+   - AuthModalManager 全局渲染
+   - 任何页面都可以调用 `openLoginModal()`
+
+3. **无感知认证**
+   - 未登录时自动弹窗，不跳转页面
+   - 登录成功后自动跳回原页面
+   - 登出后留在当前页面
+
+4. **认证方式**
+   - ✅ 手机号 + 验证码登录
+   - ✅ 手机号 + 验证码注册
+   - ✅ 微信扫码登录/注册
+   - ❌ 密码登录（已移除）
+
+5. **安全性**
+   - 内存泄漏防护 (isMountedRef)
+   - 安全的 API 响应处理
+   - Session 管理
+
+---
+
+## 📋 测试清单
+
+根据 `LOGIN_MODAL_REFACTOR_PLAN.md` 的测试计划，共 28 个测试用例：
+
+### 基础功能测试 (8个)
+
+#### 1. 登录弹窗测试
+- [ ] **T1-1**: 点击导航栏"登录"按钮，弹窗正常打开
+- [ ] **T1-2**: 输入手机号 + 验证码，提交成功，弹窗关闭
+- [ ] **T1-3**: 点击"去注册"链接，切换到注册弹窗
+- [ ] **T1-4**: 点击关闭按钮，弹窗正常关闭
+
+#### 2. 注册弹窗测试
+- [ ] **T2-1**: 点击导航栏"注册"按钮，弹窗正常打开
+- [ ] **T2-2**: 输入手机号 + 验证码 + 昵称（可选），提交成功，弹窗关闭
+- [ ] **T2-3**: 点击"去登录"链接，切换到登录弹窗
+- [ ] **T2-4**: 昵称字段为可选，留空也能成功注册
+
+### 验证码功能测试 (4个)
+- [ ] **T3-1**: 发送验证码成功，显示倒计时60秒
+- [ ] **T3-2**: 倒计时期间，"发送验证码"按钮禁用
+- [ ] **T3-3**: 倒计时结束后，按钮恢复可点击状态
+- [ ] **T3-4**: 手机号格式错误时，阻止发送验证码
+
+### 微信登录测试 (2个)
+- [ ] **T4-1**: 微信二维码正常显示
+- [ ] **T4-2**: 扫码登录/注册成功后，弹窗关闭
+
+### 受保护路由测试 (4个)
+- [ ] **T5-1**: 未登录访问受保护页面，自动打开登录弹窗
+- [ ] **T5-2**: 登录成功后，自动跳回之前的受保护页面
+- [ ] **T5-3**: 登录弹窗关闭而未登录，仍然停留在登录等待界面
+- [ ] **T5-4**: 已登录用户访问受保护页面，直接显示内容
+
+### 表单验证测试 (4个)
+- [ ] **T6-1**: 手机号为空时，提交失败并提示
+- [ ] **T6-2**: 验证码为空时，提交失败并提示
+- [ ] **T6-3**: 手机号格式错误，提交失败并提示
+- [ ] **T6-4**: 验证码错误，API返回错误提示
+
+### UI响应式测试 (3个)
+- [ ] **T7-1**: 桌面端：弹窗居中显示，尺寸合适
+- [ ] **T7-2**: 移动端：弹窗全屏显示
+- [ ] **T7-3**: 平板端：弹窗适中尺寸
+
+### 登出功能测试 (2个)
+- [ ] **T8-1**: 点击登出，用户状态清除
+- [ ] **T8-2**: 登出后，用户留在当前页面（不跳转）
+
+### 边界情况测试 (1个)
+- [ ] **T9-1**: 组件卸载时，倒计时停止，无内存泄漏
+
+---
+
+## 🔍 代码质量对比
+
+### 合并前的问题
+❌ 90% 代码重复
+❌ Bug修复需要改两处
+❌ 新功能添加需要同步两个文件
+❌ 维护成本高
+
+### 合并后的优势
+✅ 单一职责，代码复用
+✅ Bug修复一次生效
+✅ 新功能易于扩展
+✅ 配置驱动，易于维护
+
+---
+
+## 📁 文件清单
+
+### 新增文件 (3个)
+1. `src/contexts/AuthModalContext.js` - 全局弹窗状态管理
+2. `src/components/Auth/AuthModalManager.js` - 全局弹窗渲染器
+3. `src/components/Auth/AuthFormContent.js` - 统一认证表单组件
+
+### 修改文件 (7个)
+1. `src/App.js` - 集成 AuthModalProvider 和 AuthModalManager
+2. `src/components/Auth/LoginModalContent.js` - 简化为 wrapper (337 → 8 行)
+3. `src/components/Auth/SignUpModalContent.js` - 简化为 wrapper (341 → 8 行)
+4. `src/components/Auth/AuthFooter.js` - 支持 onClick 模式
+5. `src/components/Navbars/HomeNavbar.js` - 添加登录/注册下拉菜单
+6. `src/contexts/AuthContext.js` - 移除登出跳转
+7. `src/components/ProtectedRoute.js` - 弹窗拦截替代页面跳转
+
+### 文档文件 (3个)
+1. `LOGIN_MODAL_REFACTOR_PLAN.md` - 实施计划（940+ 行）
+2. `AUTH_LOGIC_ANALYSIS.md` - 合并分析报告（432 行）
+3. `LOGIN_MODAL_REFACTOR_SUMMARY.md` - 本文档（完成总结）
+
+---
+
+## 🚀 下一步建议
+
+### 优先级1：测试验证 ⭐⭐⭐
+1. 手动测试 28 个测试用例
+2. 验证所有场景正常工作
+3. 修复发现的问题
+
+### 优先级2：清理工作（可选）
+如果测试通过，可以考虑：
+1. 删除 `LoginModalContent.js` 和 `SignUpModalContent.js`
+2. 直接在 `AuthModalManager.js` 中使用 `<AuthFormContent mode="login" />` 和 `<AuthFormContent mode="register" />`
+
+### 优先级3：功能扩展（未来）
+基于新的架构，可以轻松添加：
+1. 邮箱登录/注册
+2. 第三方登录（GitHub, Google 等）
+3. 找回密码功能
+
+**扩展示例**:
+```javascript
+const AUTH_CONFIG = {
+  login: { /* 现有配置 */ },
+  register: { /* 现有配置 */ },
+  resetPassword: {
+    title: "重置密码",
+    formTitle: "找回密码",
+    apiEndpoint: '/api/auth/reset-password',
+    // ...
+  }
+};
+
+// 使用
+<AuthFormContent mode="resetPassword" />
+```
+
+---
+
+## 🎯 项目改进指标
+
+| 指标 | 改进情况 |
+|------|----------|
+| **代码量** | 减少 33.6% (228 行) |
+| **代码重复率** | 从 90% → 0% |
+| **维护文件数** | 从 2 个 → 1 个核心组件 |
+| **用户体验** | 页面跳转 → 弹窗无感知 |
+| **扩展性** | 需同步修改 → 配置驱动 |
+
+---
+
+## ✅ 总结
+
+### 已完成的工作
+1. ✅ 创建统一的 AuthFormContent 组件（434 行）
+2. ✅ 简化 LoginModalContent 和 SignUpModalContent 为 wrapper（各 8 行）
+3. ✅ 创建全局弹窗管理系统（AuthModalContext + AuthModalManager）
+4. ✅ 修改导航栏，使用弹窗替代页面跳转
+5. ✅ 修改受保护路由，使用弹窗拦截
+6. ✅ 修改登出逻辑，用户留在当前页面
+7. ✅ 编译成功，无错误
+
+### 项目状态
+- **编译状态**: ✅ Compiled successfully!
+- **代码质量**: ✅ 无重复代码
+- **架构清晰**: ✅ 单一职责，配置驱动
+- **可维护性**: ✅ 一处修改，全局生效
+
+### 下一步
+- **立即行动**: 执行 28 个测试用例
+- **验收标准**: 所有场景正常工作
+- **最终目标**: 部署到生产环境
+
+---
+
+**改造完成日期**: 2025-10-14
+**改造总用时**: 约 2 小时
+**代码减少**: 228 行 (-33.6%)
+**状态**: ✅ 所有任务已完成，等待测试验证

TEST_RESULTS.md

@@ -0,0 +1,117 @@
+# 登录/注册弹窗测试记录
+
+> **测试日期**: 2025-10-14
+> **测试人员**:
+> **测试环境**: http://localhost:3000
+
+---
+
+## 测试结果统计
+
+- **总测试用例**: 13 个（基础核心测试）
+- **通过**: 0
+- **失败**: 0
+- **待测**: 13
+
+---
+
+## 详细测试记录
+
+### 第一组：基础弹窗测试
+
+| 编号 | 测试项 | 状态 | 备注 |
+|------|--------|------|------|
+| T1 | 登录弹窗基础功能 | ⏳ 待测 | |
+| T2 | 注册弹窗基础功能 | ⏳ 待测 | |
+| T3 | 弹窗切换功能 | ⏳ 待测 | |
+| T4 | 关闭弹窗 | ⏳ 待测 | |
+
+### 第二组：验证码功能测试
+
+| 编号 | 测试项 | 状态 | 备注 |
+|------|--------|------|------|
+| T5 | 发送验证码（手机号为空） | ⏳ 待测 | |
+| T6 | 发送验证码（手机号格式错误） | ⏳ 待测 | |
+| T7 | 发送验证码（正确手机号） | ⏳ 待测 | 需要真实短信服务 |
+| T8 | 倒计时功能 | ⏳ 待测 | |
+
+### 第三组：表单提交测试
+
+| 编号 | 测试项 | 状态 | 备注 |
+|------|--------|------|------|
+| T9 | 登录提交（字段为空） | ⏳ 待测 | |
+| T10 | 注册提交（不填昵称） | ⏳ 待测 | |
+
+### 第四组：UI 响应式测试
+
+| 编号 | 测试项 | 状态 | 备注 |
+|------|--------|------|------|
+| T11 | 桌面端显示 | ⏳ 待测 | |
+| T12 | 移动端显示 | ⏳ 待测 | |
+
+### 第五组：微信登录测试
+
+| 编号 | 测试项 | 状态 | 备注 |
+|------|--------|------|------|
+| T13 | 微信二维码显示 | ⏳ 待测 | |
+
+---
+
+## 问题记录
+
+### 问题 #1
+- **测试项**:
+- **描述**:
+- **重现步骤**:
+- **预期行为**:
+- **实际行为**:
+- **优先级**: 🔴高 / 🟡中 / 🟢低
+- **状态**: ⏳待修复 / ✅已修复
+
+### 问题 #2
+- **测试项**:
+- **描述**:
+- **重现步骤**:
+- **预期行为**:
+- **实际行为**:
+- **优先级**:
+- **状态**:
+
+---
+
+## 浏览器兼容性测试
+
+| 浏览器 | 版本 | 状态 | 备注 |
+|--------|------|------|------|
+| Chrome | | ⏳ 待测 | |
+| Safari | | ⏳ 待测 | |
+| Firefox | | ⏳ 待测 | |
+| Edge | | ⏳ 待测 | |
+
+---
+
+## 性能测试
+
+| 测试项 | 指标 | 实际值 | 状态 |
+|--------|------|--------|------|
+| 弹窗打开速度 | < 300ms | | ⏳ 待测 |
+| 弹窗切换速度 | < 200ms | | ⏳ 待测 |
+| 验证码倒计时准确性 | 误差 < 1s | | ⏳ 待测 |
+
+---
+
+## 测试总结
+
+### 主要发现
+
+
+### 建议改进
+
+
+### 下一步计划
+
+
+---
+
+**测试完成日期**:
+**测试结论**: ⏳ 测试中 / ✅ 通过 / ❌ 未通过

src/App.js

@@ -42,10 +42,12 @@ const TradingSimulation = React.lazy(() => import("views/TradingSimulation"));
 
 // Contexts
 import { AuthProvider } from "contexts/AuthContext";
+import { AuthModalProvider } from "contexts/AuthModalContext";
 
 // Components
 import ProtectedRoute from "components/ProtectedRoute";
 import ErrorBoundary from "components/ErrorBoundary";
+import AuthModalManager from "components/Auth/AuthModalManager";
 
 function AppContent() {
     const { colorMode } = useColorMode();
@@ -180,7 +182,10 @@ export default function App() {
         <ChakraProvider theme={theme}>
             <ErrorBoundary>
                 <AuthProvider>
-                    <AppContent />
+                    <AuthModalProvider>
+                        <AppContent />
+                        <AuthModalManager />
+                    </AuthModalProvider>
                 </AuthProvider>
             </ErrorBoundary>
         </ChakraProvider>

src/components/Auth/AuthFooter.js

@@ -5,12 +5,17 @@ import { Link } from "react-router-dom";
 /**
  * 认证页面底部组件
  * 包含页面切换链接和登录方式切换链接
+ *
+ * 支持两种模式：
+ * 1. 页面模式：使用 linkTo 进行路由跳转
+ * 2. 弹窗模式：使用 onClick 进行弹窗切换
  */
 export default function AuthFooter({
     // 左侧链接配置
     linkText,           // 提示文本，如 "还没有账号，" 或 "已有账号？"
     linkLabel,          // 链接文本，如 "去注册" 或 "去登录"
-    linkTo,             // 链接路径，如 "/auth/sign-up" 或 "/auth/sign-in"
+    linkTo,             // 链接路径，如 "/auth/sign-up" 或 "/auth/sign-in"（页面模式）
+    onClick,            // 点击回调函数（弹窗模式，优先级高于 linkTo）
 
     // 右侧切换配置
     useVerificationCode,     // 当前是否使用验证码登录
@@ -19,24 +24,35 @@ export default function AuthFooter({
     return (
         <HStack justify="space-between" width="100%">
             {/* 左侧：页面切换链接（去注册/去登录） */}
-            <HStack spacing={1} as={Link} to={linkTo}>
+            {onClick ? (
-                <Text fontSize="sm" color="gray.600">{linkText}</Text>
+                // 弹窗模式：使用 onClick
-                <Text fontSize="sm" color="blue.500" fontWeight="bold">{linkLabel}</Text>
+                <HStack spacing={1} cursor="pointer" onClick={onClick}>
-            </HStack>
+                    <Text fontSize="sm" color="gray.600">{linkText}</Text>
+                    <Text fontSize="sm" color="blue.500" fontWeight="bold">{linkLabel}</Text>
+                </HStack>
+            ) : (
+                // 页面模式：使用 Link 组件跳转
+                <HStack spacing={1} as={Link} to={linkTo}>
+                    <Text fontSize="sm" color="gray.600">{linkText}</Text>
+                    <Text fontSize="sm" color="blue.500" fontWeight="bold">{linkLabel}</Text>
+                </HStack>
+            )}
 
-            {/* 右侧：登录方式切换链接 */}
+            {/* 右侧：登录方式切换链接（仅在提供了切换方法时显示） */}
-            <ChakraLink
+            {onSwitchMethod && (
-                href="#"
+                <ChakraLink
-                fontSize="sm"
+                    href="#"
-                color="blue.500"
+                    fontSize="sm"
-                fontWeight="bold"
+                    color="blue.500"
-                onClick={(e) => {
+                    fontWeight="bold"
-                    e.preventDefault();
+                    onClick={(e) => {
-                    onSwitchMethod();
+                        e.preventDefault();
-                }}
+                        onSwitchMethod();
-            >
+                    }}
-                {useVerificationCode ? '密码登陆' : '验证码登陆'}
+                >
-            </ChakraLink>
+                    {useVerificationCode ? '密码登陆' : '验证码登陆'}
+                </ChakraLink>
+            )}
         </HStack>
     );
 }

src/components/Auth/AuthFormContent.js

@@ -0,0 +1,379 @@
+// src/components/Auth/AuthFormContent.js
+// 统一的认证表单组件
+import React, { useState, useEffect, useRef } from "react";
+import { useNavigate } from "react-router-dom";
+import {
+    Box,
+    Button,
+    FormControl,
+    Input,
+    Heading,
+    VStack,
+    HStack,
+    useToast,
+    Icon,
+    FormErrorMessage,
+    Center,
+    AlertDialog,
+    AlertDialogBody,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogContent,
+    AlertDialogOverlay,
+    Text,
+    Link as ChakraLink,
+} from "@chakra-ui/react";
+import { FaLock } from "react-icons/fa";
+import { useAuth } from "../../contexts/AuthContext";
+import { useAuthModal } from "../../contexts/AuthModalContext";
+import AuthHeader from './AuthHeader';
+import VerificationCodeInput from './VerificationCodeInput';
+import WechatRegister from './WechatRegister';
+
+// API配置
+const isProduction = process.env.NODE_ENV === 'production';
+const API_BASE_URL = isProduction ? "" : "http://49.232.185.254:5000";
+
+// 统一配置对象
+const AUTH_CONFIG = {
+    // UI文本
+    title: "欢迎使用价值前沿",
+    subtitle: "开启您的投资之旅",
+    formTitle: "手机号验证",
+    buttonText: "登录/注册",
+    loadingText: "验证中...",
+    successTitle: "验证成功",
+    successDescription: "欢迎！",
+    errorTitle: "验证失败",
+
+    // API配置
+    api: {
+        endpoint: '/api/auth/register-with-code',
+        purpose: 'register',
+    },
+
+    // 功能开关
+    features: {
+        successDelay: 1000,  // 延迟1秒显示成功提示
+    }
+};
+
+export default function AuthFormContent() {
+    const toast = useToast();
+    const navigate = useNavigate();
+    const { checkSession } = useAuth();
+    const { handleLoginSuccess } = useAuthModal();
+
+    // 使用统一配置
+    const config = AUTH_CONFIG;
+
+    // 追踪组件挂载状态，防止内存泄漏
+    const isMountedRef = useRef(true);
+    const cancelRef = useRef(); // AlertDialog 需要的 ref
+
+    // 页面状态
+    const [isLoading, setIsLoading] = useState(false);
+    const [errors, setErrors] = useState({});
+
+    // 昵称设置引导对话框
+    const [showNicknamePrompt, setShowNicknamePrompt] = useState(false);
+    const [currentPhone, setCurrentPhone] = useState("");
+
+
+    // 表单数据
+    const [formData, setFormData] = useState({
+        phone: "",
+        verificationCode: "",
+    });
+
+    // 验证码状态
+    const [verificationCodeSent, setVerificationCodeSent] = useState(false);
+    const [sendingCode, setSendingCode] = useState(false);
+    const [countdown, setCountdown] = useState(0);
+
+    // 输入框变化处理
+    const handleInputChange = (e) => {
+        const { name, value } = e.target;
+        setFormData(prev => ({
+            ...prev,
+            [name]: value
+        }));
+    };
+
+    // 倒计时逻辑
+    useEffect(() => {
+        let timer;
+        let isMounted = true;
+
+        if (countdown > 0) {
+            timer = setInterval(() => {
+                if (isMounted) {
+                    setCountdown(prev => prev - 1);
+                }
+            }, 1000);
+        } else if (countdown === 0 && isMounted) {
+            setVerificationCodeSent(false);
+        }
+
+        return () => {
+            isMounted = false;
+            if (timer) clearInterval(timer);
+        };
+    }, [countdown]);
+
+    // 发送验证码
+    const sendVerificationCode = async () => {
+        const credential = formData.phone;
+
+        if (!credential) {
+            toast({
+                title: "请先输入手机号",
+                status: "warning",
+                duration: 3000,
+            });
+            return;
+        }
+
+        if (!/^1[3-9]\d{9}$/.test(credential)) {
+            toast({
+                title: "请输入有效的手机号",
+                status: "warning",
+                duration: 3000,
+            });
+            return;
+        }
+
+        try {
+            setSendingCode(true);
+            const response = await fetch(`${API_BASE_URL}/api/auth/send-verification-code`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    credential,
+                    type: 'phone',
+                    purpose: config.api.purpose  // 根据模式使用不同的purpose
+                }),
+            });
+
+            if (!response) {
+                throw new Error('网络请求失败，请检查网络连接');
+            }
+
+            const data = await response.json();
+
+            if (!isMountedRef.current) return;
+
+            if (!data) {
+                throw new Error('服务器响应为空');
+            }
+
+            if (response.ok && data.success) {
+                toast({
+                    title: "验证码已发送",
+                    description: "验证码已发送到您的手机号",
+                    status: "success",
+                    duration: 3000,
+                });
+                setVerificationCodeSent(true);
+                setCountdown(60);
+            } else {
+                throw new Error(data.error || '发送验证码失败');
+            }
+        } catch (error) {
+            if (isMountedRef.current) {
+                toast({
+                    title: "发送验证码失败",
+                    description: error.message || "请稍后重试",
+                    status: "error",
+                    duration: 3000,
+                });
+            }
+        } finally {
+            if (isMountedRef.current) {
+                setSendingCode(false);
+            }
+        }
+    };
+
+    // 提交处理（登录或注册）
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setIsLoading(true);
+
+        try {
+            const { phone, verificationCode, nickname } = formData;
+
+            // 表单验证
+            if (!phone || !verificationCode) {
+                toast({
+                    title: "请填写完整信息",
+                    description: "手机号和验证码不能为空",
+                    status: "warning",
+                    duration: 3000,
+                });
+                return;
+            }
+
+            if (!/^1[3-9]\d{9}$/.test(phone)) {
+                toast({
+                    title: "请输入有效的手机号",
+                    status: "warning",
+                    duration: 3000,
+                });
+                return;
+            }
+
+            // 构建请求体
+            const requestBody = {
+                credential: phone,
+                verification_code: verificationCode,
+                register_type: 'phone',
+            };
+
+            // 调用API（根据模式选择不同的endpoint）
+            const response = await fetch(`${API_BASE_URL}${config.api.endpoint}`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                credentials: 'include',
+                body: JSON.stringify(requestBody),
+            });
+
+            if (!response) {
+                throw new Error('网络请求失败，请检查网络连接');
+            }
+
+            const data = await response.json();
+
+            if (!isMountedRef.current) return;
+
+            if (!data) {
+                throw new Error('服务器响应为空');
+            }
+
+            if (response.ok && data.success) {
+                // 更新session
+                await checkSession();
+
+                toast({
+                    title: config.successTitle,
+                    description: config.successDescription,
+                    status: "success",
+                    duration: 2000,
+                });
+
+                // 检查是否为新注册用户
+                if (data.isNewUser) {
+                    // 新注册用户，延迟后显示昵称设置引导
+                    setTimeout(() => {
+                        setCurrentPhone(phone);
+                        setShowNicknamePrompt(true);
+                    }, config.features.successDelay);
+                } else {
+                    // 已有用户，直接登录成功
+                    setTimeout(() => {
+                        handleLoginSuccess({ phone });
+                    }, config.features.successDelay);
+                }
+            } else {
+                throw new Error(data.error || `${config.errorTitle}`);
+            }
+        } catch (error) {
+            console.error('Auth error:', error);
+            if (isMountedRef.current) {
+                toast({
+                    title: config.errorTitle,
+                    description: error.message || "请稍后重试",
+                    status: "error",
+                    duration: 3000,
+                });
+            }
+        } finally {
+            if (isMountedRef.current) {
+                setIsLoading(false);
+            }
+        }
+    };
+
+    // 组件卸载时清理
+    useEffect(() => {
+        isMountedRef.current = true;
+
+        return () => {
+            isMountedRef.current = false;
+        };
+    }, []);
+
+    return (
+        <>
+            <Box width="100%">
+                <AuthHeader title={config.title} subtitle={config.subtitle} />
+                <HStack spacing={8} align="stretch">
+                    <Box flex="4">
+                        <form onSubmit={handleSubmit}>
+                            <VStack spacing={4}>
+                                <Heading size="md" color="gray.700" alignSelf="flex-start">{config.formTitle}</Heading>
+                                <FormControl isRequired isInvalid={!!errors.phone}>
+                                    <Input name="phone" value={formData.phone} onChange={handleInputChange} placeholder="请输入11位手机号" />
+                                    <FormErrorMessage>{errors.phone}</FormErrorMessage>
+                                </FormControl>
+                                <VerificationCodeInput value={formData.verificationCode} onChange={handleInputChange} onSendCode={sendVerificationCode} countdown={countdown} isLoading={isLoading} isSending={sendingCode} error={errors.verificationCode} colorScheme="green" />
+                                <Button type="submit" width="100%" size="lg" colorScheme="green" color="white" borderRadius="lg" isLoading={isLoading} loadingText={config.loadingText} fontWeight="bold"><Icon as={FaLock} mr={2} />{config.buttonText}</Button>
+
+                                {/* 隐私声明 */}
+                                <Text fontSize="xs" color="gray.500" textAlign="center" mt={2}>
+                                    登录即表示你同意价值前沿{" "}
+                                    <ChakraLink
+                                        as="a"
+                                        href="/home/user-agreement"
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        color="blue.500"
+                                        textDecoration="underline"
+                                        _hover={{ color: "blue.600" }}
+                                    >
+                                        《用户协议》
+                                    </ChakraLink>
+                                    {" "}和{" "}
+                                    <ChakraLink
+                                        as="a"
+                                        href="/home/privacy-policy"
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        color="blue.500"
+                                        textDecoration="underline"
+                                        _hover={{ color: "blue.600" }}
+                                    >
+                                        《隐私政策》
+                                    </ChakraLink>
+                                </Text>
+                            </VStack>
+                        </form>
+                    </Box>
+                    <Box flex="1">
+                        <Center width="100%" bg="gray.50" borderRadius="lg" p={8}><WechatRegister /></Center>
+                    </Box>
+                </HStack>
+            </Box>
+
+            {/* 只在需要时才渲染 AlertDialog，避免创建不必要的 Portal */}
+            {showNicknamePrompt && (
+                <AlertDialog isOpen={showNicknamePrompt} leastDestructiveRef={cancelRef} onClose={() => { setShowNicknamePrompt(false); handleLoginSuccess({ phone: currentPhone }); }} isCentered closeOnEsc={true} closeOnOverlayClick={false}>
+                    <AlertDialogOverlay>
+                        <AlertDialogContent>
+                            <AlertDialogHeader fontSize="lg" fontWeight="bold">完善个人信息</AlertDialogHeader>
+                            <AlertDialogBody>您已成功注册！是否前往个人中心设置昵称和其他信息？</AlertDialogBody>
+                            <AlertDialogFooter>
+                                <Button ref={cancelRef} onClick={() => { setShowNicknamePrompt(false); handleLoginSuccess({ phone: currentPhone }); }}>稍后再说</Button>
+                                <Button colorScheme="green" onClick={() => { setShowNicknamePrompt(false); handleLoginSuccess({ phone: currentPhone }); setTimeout(() => { navigate('/admin/profile'); }, 300); }} ml={3}>去设置</Button>
+                            </AlertDialogFooter>
+                        </AlertDialogContent>
+                    </AlertDialogOverlay>
+                </AlertDialog>
+            )}
+        </>
+    );
+}

src/components/Auth/AuthModalManager.js

@@ -0,0 +1,84 @@
+// src/components/Auth/AuthModalManager.js
+import React from 'react';
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalBody,
+  ModalCloseButton,
+  useBreakpointValue
+} from '@chakra-ui/react';
+import { useAuthModal } from '../../contexts/AuthModalContext';
+import AuthFormContent from './AuthFormContent';
+
+/**
+ * 全局认证弹窗管理器
+ * 统一的登录/注册弹窗
+ */
+export default function AuthModalManager() {
+  const {
+    isAuthModalOpen,
+    closeModal
+  } = useAuthModal();
+
+  // 响应式尺寸配置
+  const modalSize = useBreakpointValue({
+    base: "full",    // 移动端：全屏
+    sm: "xl",        // 小屏：xl
+    md: "2xl",       // 中屏：2xl
+    lg: "4xl"        // 大屏：4xl
+  });
+
+  // 条件渲染：只在打开时才渲染 Modal，避免创建不必要的 Portal
+  if (!isAuthModalOpen) {
+    return null;
+  }
+
+  return (
+    <Modal
+      isOpen={isAuthModalOpen}
+      onClose={closeModal}
+      size={modalSize}
+      isCentered
+      closeOnOverlayClick={false}  // 防止误点击背景关闭
+      closeOnEsc={true}             // 允许ESC键关闭
+      scrollBehavior="inside"       // 内容滚动
+      zIndex={999}                  // 低于导航栏(1000)，不覆盖导航
+    >
+      {/* 半透明背景 + 模糊效果 */}
+      <ModalOverlay
+        bg="blackAlpha.700"
+        backdropFilter="blur(10px)"
+      />
+
+      {/* 弹窗内容容器 */}
+      <ModalContent
+        bg="white"
+        boxShadow="2xl"
+        borderRadius="2xl"
+        maxW={modalSize === "full" ? "100%" : "900px"}
+        my={modalSize === "full" ? 0 : 8}
+        position="relative"
+      >
+        {/* 关闭按钮 */}
+        <ModalCloseButton
+          position="absolute"
+          right={4}
+          top={4}
+          zIndex={9999}
+          color="gray.500"
+          bg="transparent"
+          _hover={{ bg: "gray.100" }}
+          borderRadius="full"
+          size="lg"
+          onClick={closeModal}
+        />
+
+        {/* 弹窗主体内容 */}
+        <ModalBody p={8}>
+          <AuthFormContent />
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+}

src/components/Navbars/HomeNavbar.js

@@ -36,6 +36,7 @@ import { ChevronDownIcon, HamburgerIcon, SunIcon, MoonIcon } from '@chakra-ui/ic
 import { FiStar, FiCalendar } from 'react-icons/fi';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../../contexts/AuthContext';
+import { useAuthModal } from '../../contexts/AuthModalContext';
 
 /** 桌面端导航 - 完全按照原网站
  * @TODO 添加逻辑  不展示导航case
@@ -200,6 +201,7 @@ export default function HomeNavbar() {
     const navigate = useNavigate();
     const isMobile = useBreakpointValue({ base: true, md: false });
     const { user, isAuthenticated, logout, isLoading } = useAuth();
+    const { openAuthModal } = useAuthModal();
     const { colorMode, toggleColorMode } = useColorMode();
     const navbarBg = useColorModeValue('white', 'gray.800');
     const navbarBorder = useColorModeValue('gray.200', 'gray.700');
@@ -231,10 +233,6 @@ export default function HomeNavbar() {
         }
     };
 
-    // 处理登录按钮点击
-    const handleLoginClick = () => {
-        navigate('/auth/signin');
-    };
 
     // 检查是否为禁用的链接（没有NEW标签的链接）
     // const isDisabledLink = true;
@@ -733,13 +731,13 @@ export default function HomeNavbar() {
                                     </Menu>
                                 </HStack>
                             ) : (
-                                // 未登录状态
+                                // 未登录状态 - 单一按钮
                                 <Button
                                     colorScheme="blue"
                                     variant="solid"
                                     size="sm"
                                     borderRadius="full"
-                                    onClick={handleLoginClick}
+                                    onClick={() => openAuthModal()}
                                     _hover={{
                                         transform: "translateY(-1px)",
                                         boxShadow: "md"
@@ -960,7 +958,7 @@ export default function HomeNavbar() {
                                         colorScheme="blue"
                                         size="sm"
                                         onClick={() => {
-                                            handleLoginClick();
+                                            openAuthModal();
                                             onClose();
                                         }}
                                     >

src/components/PrivacyPolicyModal.js

@@ -18,6 +18,11 @@ const PrivacyPolicyModal = ({ isOpen, onClose }) => {
   const headingColor = useColorModeValue("gray.800", "white");
   const textColor = useColorModeValue("gray.600", "gray.300");
 
+  // Conditional rendering: only render Modal when open
+  if (!isOpen) {
+    return null;
+  }
+
   return (
     <Modal 
       isOpen={isOpen} 

src/components/ProtectedRoute.js

@@ -1,11 +1,22 @@
-// src/components/ProtectedRoute.js - Session版本
+// src/components/ProtectedRoute.js - 弹窗拦截版本
-import React from 'react';
+import React, { useEffect } from 'react';
-import { Navigate } from 'react-router-dom';
 import { Box, VStack, Spinner, Text } from '@chakra-ui/react';
 import { useAuth } from '../contexts/AuthContext';
+import { useAuthModal } from '../contexts/AuthModalContext';
 
 const ProtectedRoute = ({ children }) => {
   const { isAuthenticated, isLoading, user } = useAuth();
+  const { openAuthModal, isAuthModalOpen } = useAuthModal();
+
+  // 记录当前路径，登录成功后可以跳转回来
+  const currentPath = window.location.pathname + window.location.search;
+
+  // 未登录时自动弹出认证窗口
+  useEffect(() => {
+    if (!isLoading && !isAuthenticated && !user && !isAuthModalOpen) {
+      openAuthModal(currentPath);
+    }
+  }, [isAuthenticated, user, isLoading, isAuthModalOpen, currentPath, openAuthModal]);
 
   // 显示加载状态
   if (isLoading) {
@@ -25,26 +36,26 @@ const ProtectedRoute = ({ children }) => {
     );
   }
 
-  // 记录当前路径，登录后可以回到这里
+  // 未登录时显示占位符（弹窗会自动打开）
-  let currentPath = window.location.pathname + window.location.search;
-  let redirectUrl = `/auth/signin?redirect=${encodeURIComponent(currentPath)}`;
-
-  // 检查是否已登录
   if (!isAuthenticated || !user) {
-    return <Navigate to={redirectUrl} replace />;
+    return (
+      <Box
+        height="100vh"
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        bg="gray.50"
+      >
+        <VStack spacing={4}>
+          <Spinner size="xl" color="blue.500" thickness="4px" />
+          <Text fontSize="lg" color="gray.600">请先登录...</Text>
+        </VStack>
+      </Box>
+    );
   }
 
   // 已登录，渲染子组件
-  // return children;
+  return children;
-
-  // 更新逻辑 如果 currentPath 是首页 登陆成功后跳转到个人中心
-  if (currentPath === '/' || currentPath === '/home') {
-    currentPath = '/profile';
-    redirectUrl = `/auth/signin?redirect=${encodeURIComponent(currentPath)}`;
-    return <Navigate to={redirectUrl} replace />;
-  } else { // 否则正常渲染
-    return children;
-  }
 };
 
 export default ProtectedRoute;

src/components/UserAgreementModal.js

@@ -18,6 +18,11 @@ const UserAgreementModal = ({ isOpen, onClose }) => {
   const headingColor = useColorModeValue("gray.800", "white");
   const textColor = useColorModeValue("gray.600", "gray.300");
 
+  // Conditional rendering: only render Modal when open
+  if (!isOpen) {
+    return null;
+  }
+
   return (
     <Modal 
       isOpen={isOpen} 

src/contexts/AuthContext.js

@@ -455,15 +455,14 @@ export const AuthProvider = ({ children }) => {
         isClosable: true,
       });
 
-      // 跳转到登录页面
+      // 不再跳转，用户留在当前页面
-      navigate('/auth/signin');
 
     } catch (error) {
       console.error('Logout error:', error);
       // 即使API调用失败也清除本地状态
       setUser(null);
       setIsAuthenticated(false);
-      navigate('/auth/signin');
+      // 不再跳转，用户留在当前页面
     }
   };
 

src/contexts/AuthModalContext.js

@@ -0,0 +1,100 @@
+// src/contexts/AuthModalContext.js
+import { createContext, useContext, useState, useCallback } from 'react';
+
+const AuthModalContext = createContext();
+
+/**
+ * 自定义Hook：获取弹窗上下文
+ */
+export const useAuthModal = () => {
+  const context = useContext(AuthModalContext);
+  if (!context) {
+    throw new Error('useAuthModal must be used within AuthModalProvider');
+  }
+  return context;
+};
+
+/**
+ * 认证弹窗提供者组件
+ * 管理统一的认证弹窗状态（登录/注册合并）
+ */
+export const AuthModalProvider = ({ children }) => {
+  // 弹窗状态（统一的认证弹窗）
+  const [isAuthModalOpen, setIsAuthModalOpen] = useState(false);
+
+  // 重定向URL（认证成功后跳转）
+  const [redirectUrl, setRedirectUrl] = useState(null);
+
+  // 成功回调函数
+  const [onSuccessCallback, setOnSuccessCallback] = useState(null);
+
+  /**
+   * 打开认证弹窗（统一的登录/注册入口）
+   * @param {string} url - 认证成功后的重定向URL（可选）
+   * @param {function} callback - 认证成功后的回调函数（可选）
+   */
+  const openAuthModal = useCallback((url = null, callback = null) => {
+    setRedirectUrl(url);
+    setOnSuccessCallback(() => callback);
+    setIsAuthModalOpen(true);
+  }, []);
+
+  /**
+   * 关闭认证弹窗
+   */
+  const closeModal = useCallback(() => {
+    setIsAuthModalOpen(false);
+    setRedirectUrl(null);
+    setOnSuccessCallback(null);
+  }, []);
+
+  /**
+   * 登录/注册成功处理
+   * @param {object} user - 用户信息
+   */
+  const handleLoginSuccess = useCallback((user) => {
+    // 执行自定义回调（如果有）
+    if (onSuccessCallback) {
+      try {
+        onSuccessCallback(user);
+      } catch (error) {
+        console.error('Success callback error:', error);
+      }
+    }
+
+    // 如果有重定向URL，则跳转
+    if (redirectUrl) {
+      // 使用 window.location.href 确保完整刷新页面状态
+      setTimeout(() => {
+        window.location.href = redirectUrl;
+      }, 500); // 延迟500ms，让用户看到成功提示
+    }
+
+    // 关闭弹窗
+    closeModal();
+  }, [onSuccessCallback, redirectUrl, closeModal]);
+
+  /**
+   * 提供给子组件的上下文值
+   */
+  const value = {
+    // 状态
+    isAuthModalOpen,
+    redirectUrl,
+
+    // 打开弹窗方法
+    openAuthModal,
+
+    // 关闭弹窗方法
+    closeModal,
+
+    // 成功处理方法
+    handleLoginSuccess,
+  };
+
+  return (
+    <AuthModalContext.Provider value={value}>
+      {children}
+    </AuthModalContext.Provider>
+  );
+};

src/layouts/Home.js

@@ -13,6 +13,10 @@ import SettingsPage from "views/Settings/SettingsPage";
 import CenterDashboard from "views/Dashboard/Center";
 import Subscription from "views/Pages/Account/Subscription";
 
+// 懒加载隐私政策和用户协议页面
+const PrivacyPolicy = React.lazy(() => import("views/Pages/PrivacyPolicy"));
+const UserAgreement = React.lazy(() => import("views/Pages/UserAgreement"));
+
 // 导入保护路由组件
 import ProtectedRoute from "../components/ProtectedRoute";
 
@@ -66,6 +70,12 @@ export default function Home() {
                         }
                     />
 
+                    {/* 隐私政策页面 - 无需登录 */}
+                    <Route path="/privacy-policy" element={<PrivacyPolicy />} />
+
+                    {/* 用户协议页面 - 无需登录 */}
+                    <Route path="/user-agreement" element={<UserAgreement />} />
+
                     {/* 其他可能的路由 */}
                     <Route path="*" element={<HomePage />} />
                 </Routes>

src/routes.js

@@ -83,6 +83,8 @@ const CompanyIndex = React.lazy(() => import("views/Company"));
 const MarketDataView = React.lazy(() => import("views/Company/MarketDataView"));
 const StockOverview = React.lazy(() => import("views/StockOverview"));
 const TradingSimulation = React.lazy(() => import("views/TradingSimulation"));
+const PrivacyPolicy = React.lazy(() => import("views/Pages/PrivacyPolicy"));
+const UserAgreement = React.lazy(() => import("views/Pages/UserAgreement"));
 const dashRoutes = [
   {
     name: "Dashboard",
@@ -211,6 +213,22 @@ const dashRoutes = [
     layout: "/admin",
     invisible: true, // 不在侧边栏显示
   },
+  {
+    name: "隐私政策",
+    path: "/privacy-policy",
+    icon: <DocumentIcon color="inherit" />,
+    component: PrivacyPolicy,
+    layout: "/home",
+    invisible: true, // 不在侧边栏显示
+  },
+  {
+    name: "用户协议",
+    path: "/user-agreement",
+    icon: <DocumentIcon color="inherit" />,
+    component: UserAgreement,
+    layout: "/home",
+    invisible: true, // 不在侧边栏显示
+  },
   {
     name: "PAGES",
     category: "pages",

src/views/Pages/PrivacyPolicy.js

@@ -0,0 +1,238 @@
+import React from "react";
+import {
+  Box,
+  Container,
+  Text,
+  VStack,
+  Divider,
+  useColorModeValue,
+  Heading
+} from "@chakra-ui/react";
+
+export default function PrivacyPolicy() {
+  const headingColor = useColorModeValue("gray.800", "white");
+  const textColor = useColorModeValue("gray.600", "gray.300");
+
+  return (
+    <Box minH="100vh" bg={useColorModeValue("gray.50", "gray.900")} py={12}>
+      <Container maxW="container.lg">
+        <VStack spacing={8} align="stretch">
+          <Heading as="h1" size="2xl" color={headingColor} textAlign="center">
+            隐私政策
+          </Heading>
+
+          <Box bg="blue.50" p={6} borderRadius="lg" border="1px solid" borderColor="blue.100">
+            <Text fontSize="md" color="blue.600" mb={3} fontWeight="semibold">
+              生效日期：2025年1月20日
+            </Text>
+            <Text fontSize="lg" color={textColor} lineHeight="1.8" mb={4}>
+              【北京价值前沿科技有限公司】（以下简称"我们"）深知个人信息对您的重要性，并会尽全力保护您的个人信息安全可靠。我们致力于维持您对我们的信任，恪守以下原则，保护您的个人信息：权责一致原则、目的明确原则、选择同意原则、最少够用原则、确保安全原则、主体参与原则、公开透明原则等。同时，我们承诺，我们将按业界成熟的安全标准，采取相应的安全保护措施来保护您的个人信息。
+            </Text>
+            <Text fontSize="lg" color={textColor} lineHeight="1.8" fontWeight="medium">
+              请在使用我们的产品（或服务）前，仔细阅读并了解本《隐私政策》。
+            </Text>
+          </Box>
+
+          <Divider />
+
+          <Box>
+            <Heading as="h2" size="lg" color={headingColor} mb={4}>
+              一、我们如何收集和使用您的个人信息
+            </Heading>
+            <Text fontSize="md" color={textColor} lineHeight="1.6" mb={4}>
+              根据《信息安全技术个人信息安全规范》（GB/T 35273—2020），个人信息是指以电子或者其他方式记录的能够单独或者与其他信息结合识别特定自然人身份或者反映特定自然人活动情况的各种信息。本隐私政策中涉及的个人信息包括：基本信息（包括性别、地址、地区、个人电话号码、电子邮箱）；个人身份信息（包括身份证、护照、相关身份证明等）；网络身份标识信息（包括系统账号、IP地址、口令）；个人上网记录（包括登录记录、浏览记录）；个人常用设备信息（包括硬件型号、操作系统类型、应用安装列表、运行中进程信息、设备MAC地址、软件列表设备识别码如IMEI/android ID/IDFA/IMSI 在内的描述个人常用设备基本情况的信息）；个人位置信息（包括精准定位信息、经纬度等）；
+            </Text>
+            <Text fontSize="md" color={textColor} lineHeight="1.6" mb={4}>
+              个人敏感信息是指一旦泄露、非法提供或滥用可能危害人身和财产安全，极易导致个人名誉、身心健康受到损害或歧视性待遇等的个人信息，本隐私政策中涉及的个人敏感信息包括：个人身份信息（包括身份证、护照、相关身份证明等）；网络身份识别信息（包括账户名、账户昵称、用户头像、与前述有关的密码）；其他信息（包括个人电话号码、浏览记录、精准定位信息）。对于个人敏感信息，我们将在本政策中进行显著标识，请您仔细阅读。
+            </Text>
+          </Box>
+
+          <Box pl={4} borderLeft="3px solid" borderColor="green.300" bg="green.50" p={4} borderRadius="md">
+            <Heading as="h3" size="md" color="green.700" mb={2}>
+              （一）手机号注册/登录
+            </Heading>
+            <Text fontSize="md" color={textColor} lineHeight="1.8" mb={4}>
+              当您使用手机号注册/登录服务时，我们会收集您的手机号码、验证码匹配结果、手机系统平台等信息，用于保存您的登录信息，使您在使用不同设备登录时能够同步您的数据。
+            </Text>
+          </Box>
+
+          <Box pl={4} borderLeft="3px solid" borderColor="purple.300" bg="purple.50" p={4} borderRadius="md">
+            <Heading as="h3" size="md" color="purple.700" mb={2}>
+              （二）第三方登录
+            </Heading>
+            <Text fontSize="md" color={textColor} lineHeight="1.8" mb={4}>
+              当您使用微信/QQ等第三方登录时，我们会收集您第三方的唯一标识、头像、昵称，用于保存您的登录信息，使您在使用不同设备登录时能够同步您的数据。
+            </Text>
+            <Text fontSize="md" color={textColor} lineHeight="1.8" mb={4}>
+              当您使用微信,微博，QQ 进行三方分享的时候，我们的产品可能会集成第三方的SDK或其他类似的应用程序，用于三方登录以及分享内容到三方平台。您可以登陆以下网址了解相关隐私政策：
+            </Text>
+            <VStack align="start" spacing={2} pl={4}>
+              <Text fontSize="sm" color="blue.600" lineHeight="1.6">
+                【新浪微博】微博个人信息保护政策：https://m.weibo.cn/c/privacy
+              </Text>
+              <Text fontSize="sm" color="blue.600" lineHeight="1.6">
+                【微信】微信开放平台开发者服务协议：https://open.weixin.qq.com/cgi-bin/frame?t=news/protocol_developer_tmpl
+              </Text>
+              <Text fontSize="sm" color="blue.600" lineHeight="1.6">
+                【QQ】QQ互联SDK隐私保护声明：https://wiki.connect.qq.com/qq互联sdk隐私保护声明
+              </Text>
+            </VStack>
+          </Box>
+
+          <Box pl={4} borderLeft="3px solid" borderColor="orange.300" bg="orange.50" p={4} borderRadius="md">
+            <Heading as="h3" size="md" color="orange.700" mb={2}>
+              （三）第三方支付
+            </Heading>
+            <Text fontSize="md" color={textColor} lineHeight="1.8" mb={4}>
+              当您使用 微信 支付宝 华为 进行三方支付的时候，我们的产品可能会集成第三方的SDK或其他类似的应用程序，帮助用户在应用内使用三方支付：
+            </Text>
+            <VStack align="start" spacing={2} pl={4}>
+              <Text fontSize="sm" color="blue.600" lineHeight="1.6">
+                【支付宝】客户端 SDK 隐私说明：https://opendocs.alipay.com/open/01g6qm
+              </Text>
+              <Text fontSize="sm" color="blue.600" lineHeight="1.6">
+                【微信支付】微信支付服务协议：https://pay.weixin.qq.com/index.php/public/apply_sign/protocol_v2
+              </Text>
+              <Text fontSize="sm" color="blue.600" lineHeight="1.6">
+                【华为支付】SDK数据安全说明：https://developer.huawei.com/consumer/cn/doc/development/HMSCore-Guides/sdk-data-security-0000001050044906
+              </Text>
+            </VStack>
+          </Box>
+
+          <Divider />
+
+          <Box>
+            <Heading as="h2" size="lg" color={headingColor} mb={4}>
+              二、我们如何使用 Cookie 和同类技术
+            </Heading>
+            <Text fontSize="md" color={textColor} lineHeight="1.6" mb={4}>
+              为确保网站正常运转，我们会在您的计算机或移动设备上存储名为 Cookie 的小数据文件。Cookie 通常包含标识符、站点名称以及一些号码和字符。借助于 Cookie，网站能够存储您的偏好或购物篮内的商品等数据。
+            </Text>
+          </Box>
+
+          <Divider />
+
+          <Box>
+            <Heading as="h2" size="lg" color={headingColor} mb={4}>
+              三、我们如何共享、转让、公开披露您的个人信息
+            </Heading>
+            <Text fontSize="md" color={textColor} lineHeight="1.6" mb={4}>
+              我们不会向其他任何公司、组织和个人分享您的个人信息，但以下情况除外：
+            </Text>
+            <Text fontSize="md" color={textColor} lineHeight="1.6" mb={2}>
+              1、在获取明确同意的情况下共享：获得您的明确同意后，我们会与其他方共享您的个人信息。
+            </Text>
+            <Text fontSize="md" color={textColor} lineHeight="1.6" mb={2}>
+              2、我们可能会根据法律法规规定，或按政府主管部门的强制性要求，对外共享您的个人信息。
+            </Text>
+            <Text fontSize="md" color={textColor} lineHeight="1.6" mb={4}>
+              3、与我们的关联公司共享：您的个人信息可能会与我们关联公司共享。我们只会共享必要的个人信息，且受本隐私政策中所声明目的的约束。关联公司如要改变个人信息的处理目的，将再次征求您的授权同意。
+            </Text>
+            <Text fontSize="md" color={textColor} lineHeight="1.6" mb={4}>
+              我们的关联公司包括：北京价值经纬咨询有限责任公司等。
+            </Text>
+          </Box>
+
+          <Divider />
+
+          <Box>
+            <Heading as="h2" size="lg" color={headingColor} mb={4}>
+              四、我们如何保护您的个人信息
+            </Heading>
+            <Text fontSize="md" color={textColor} lineHeight="1.6" mb={4}>
+              我们已使用符合业界标准的安全防护措施保护您提供的个人信息，防止数据遭到未经授权访问、公开披露、使用、修改、损坏或丢失。我们会采取一切合理可行的措施，保护您的个人信息。例如，在您的浏览器与"服务"之间交换数据（如信用卡信息）时受 SSL 加密保护；我们同时对我们网站提供 https 安全浏览方式；我们会使用加密技术确保数据的保密性；我们会使用受信赖的保护机制防止数据遭到恶意攻击；我们会部署访问控制机制，确保只有授权人员才可访问个人信息；以及我们会举办安全和隐私保护培训课程，加强员工对于保护个人信息重要性的认识。
+            </Text>
+          </Box>
+
+          <Divider />
+
+          <Box>
+            <Heading as="h2" size="lg" color={headingColor} mb={4}>
+              五、您的权利
+            </Heading>
+            <Text fontSize="md" color={textColor} lineHeight="1.6" mb={4}>
+              按照中国相关的法律、法规、标准，以及其他国家、地区的通行做法，我们保障您对自己的个人信息行使以下权利：
+            </Text>
+            <Text fontSize="md" color={textColor} lineHeight="1.6" mb={2}>
+              （一）访问您的个人信息
+            </Text>
+            <Text fontSize="md" color={textColor} lineHeight="1.6" mb={2}>
+              （二）更正您的个人信息
+            </Text>
+            <Text fontSize="md" color={textColor} lineHeight="1.6" mb={2}>
+              （三）删除您的个人信息
+            </Text>
+            <Text fontSize="md" color={textColor} lineHeight="1.6" mb={4}>
+              （四）约束信息系统自动决策
+            </Text>
+            <Text fontSize="md" color={textColor} lineHeight="1.6" mb={4}>
+              如果您无法通过上述链接更正这些个人信息，您可以随时使用我们的 Web 表单联系，或发送电子邮件至admin@valuefrontier.cn。我们将在30天内回复您的更正请求。
+            </Text>
+          </Box>
+
+          <Divider />
+
+          <Box>
+            <Heading as="h2" size="lg" color={headingColor} mb={4}>
+              六、我们如何处理儿童的个人信息
+            </Heading>
+            <Text fontSize="md" color={textColor} lineHeight="1.6" mb={4}>
+              我们的产品、网站和服务主要面向成人。如果没有父母或监护人的同意，儿童不得创建自己的用户账户。
+            </Text>
+            <Text fontSize="md" color={textColor} lineHeight="1.6" mb={4}>
+              对于经父母同意而收集儿童个人信息的情况，我们只会在受到法律允许、父母或监护人明确同意或者保护儿童所必要的情况下使用或公开披露此信息。
+            </Text>
+            <Text fontSize="md" color={textColor} lineHeight="1.6" mb={4}>
+              尽管当地法律和习俗对儿童的定义不同，但我们将不满 14 周岁的任何人均视为儿童。
+            </Text>
+            <Text fontSize="md" color={textColor} lineHeight="1.6" mb={4}>
+              如果我们发现自己在未事先获得可证实的父母同意的情况下收集了儿童的个人信息，则会设法尽快删除相关数据。
+            </Text>
+          </Box>
+
+          <Divider />
+
+          <Box>
+            <Heading as="h2" size="lg" color={headingColor} mb={4}>
+              七、本隐私政策如何更新
+            </Heading>
+            <Text fontSize="md" color={textColor} lineHeight="1.6" mb={4}>
+              我们可能适时会对本隐私政策进行调整或变更，本隐私政策的任何更新将在用户启动应用时以弹窗形式提醒用户更新内容并提示查看最新的隐私政策，提醒用户重新确认是否同意隐私政策条款，除法律法规或监管规定另有强制性规定外，经调整或变更的内容一经用户确认后将即时生效。
+            </Text>
+          </Box>
+
+          <Divider />
+
+          <Box>
+            <Heading as="h2" size="lg" color={headingColor} mb={4}>
+              八、如何联系我们
+            </Heading>
+            <Text fontSize="md" color={textColor} lineHeight="1.6" mb={4}>
+              如果您对本隐私政策有任何疑问、意见或建议，通过以下方式与我们联系：
+            </Text>
+            <Text fontSize="md" color={textColor} lineHeight="1.6" mb={4}>
+              邮箱：admin@valuefrontier.cn
+            </Text>
+          </Box>
+
+          <Divider />
+
+          <Box>
+            <Heading as="h2" size="lg" color={headingColor} mb={4}>
+              九、未成年人保护方面
+            </Heading>
+            <Text fontSize="md" color={textColor} lineHeight="1.6" mb={4}>
+              1、若您是未满18周岁的未成年人，您应在您的监护人监护、指导下并获得监护人同意的情况下，认真阅读并同意本协议后，方可使用价值前沿app及相关服务。若您未取得监护人的同意，监护人可以通过联系价值前沿官方公布的客服联系方式通知价值前沿处理相关账号，价值前沿有权对相关账号的功能、使用进行限制，包括但不限于浏览、发布信息、互动交流等功能。
+            </Text>
+            <Text fontSize="md" color={textColor} lineHeight="1.6" mb={4}>
+              2、价值前沿重视对未成年人个人信息的保护，未成年用户在填写个人信息时，请加强个人保护意识并谨慎对待，并应在取得监护人的同意以及在监护人指导下正确使用价值前沿app及相关服务。
+            </Text>
+            <Text fontSize="md" color={textColor} lineHeight="1.6" mb={4}>
+              3、未成年人用户及其监护人理解并确认，如您违反法律法规、本协议内容，则您及您的监护人应依照法律规定承担因此而可能导致的全部法律责任。
+            </Text>
+          </Box>
+        </VStack>
+      </Container>
+    </Box>
+  );
+}

src/views/Pages/UserAgreement.js

@@ -0,0 +1,236 @@
+import React from "react";
+import {
+  Box,
+  Container,
+  Text,
+  VStack,
+  Divider,
+  useColorModeValue,
+  Heading
+} from "@chakra-ui/react";
+
+export default function UserAgreement() {
+  const headingColor = useColorModeValue("gray.800", "white");
+  const textColor = useColorModeValue("gray.600", "gray.300");
+
+  return (
+    <Box minH="100vh" bg={useColorModeValue("gray.50", "gray.900")} py={12}>
+      <Container maxW="container.lg">
+        <VStack spacing={8} align="stretch">
+          <Heading as="h1" size="2xl" color={headingColor} textAlign="center">
+            价值前沿用户协议
+          </Heading>
+
+          <Box bg="orange.50" p={6} borderRadius="lg" border="1px solid" borderColor="orange.100">
+            <Heading as="h2" size="lg" color="orange.700" mb={6}>
+              欢迎你使用价值前沿及服务！
+            </Heading>
+            <Text fontSize="md" color={textColor} lineHeight="1.8" mb={5}>
+              为使用价值前沿（以下简称"本软件"）及服务，你应当阅读并遵守《价值前沿用户协议》（以下简称"本协议"）。请你务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款，以及开通或使用某项服务的单独协议，并选择接受或不接受。限制、免责条款可能以加粗形式提示你注意。
+            </Text>
+            <Text fontSize="md" color={textColor} lineHeight="1.8" mb={5}>
+              除非你已阅读并接受本协议所有条款，否则你无权下载、安装或使用本软件及相关服务。你的下载、安装、使用、获取价值前沿帐号、登录等行为即视为你已阅读并同意上述协议的约束。
+            </Text>
+            <Text fontSize="md" color={textColor} lineHeight="1.8" fontWeight="medium">
+              如果你未满18周岁，请在法定监护人的陪同下阅读本协议及其他上述协议，并特别注意未成年人使用条款。
+            </Text>
+          </Box>
+
+          <Divider />
+
+          <Box>
+            <Heading as="h2" size="lg" color={headingColor} mb={6}>
+              一、协议的范围
+            </Heading>
+
+            <Box pl={4} borderLeft="3px solid" borderColor="blue.300" bg="blue.50" p={4} borderRadius="md" mb={4}>
+              <Heading as="h3" size="md" color="blue.700" mb={2}>
+                1.1 协议适用主体范围
+              </Heading>
+              <Text fontSize="md" color={textColor} lineHeight="1.8">
+                本协议是你与北京价值前沿科技有限公司之间关于你下载、安装、使用、复制本软件，以及使用价值前沿相关服务所订立的协议。
+              </Text>
+            </Box>
+
+            <Box pl={4} borderLeft="3px solid" borderColor="green.300" bg="green.50" p={4} borderRadius="md" mb={4}>
+              <Heading as="h3" size="md" color="green.700" mb={2}>
+                1.2 协议关系及冲突条款
+              </Heading>
+              <Text fontSize="md" color={textColor} lineHeight="1.8">
+                本协议内容同时包括北京价值前沿科技有限公司可能不断发布的关于本服务的相关协议、业务规则等内容。上述内容一经正式发布，即为本协议不可分割的组成部分，你同样应当遵守。
+              </Text>
+            </Box>
+
+            <Box pl={4} borderLeft="3px solid" borderColor="purple.300" bg="purple.50" p={4} borderRadius="md" mb={4}>
+              <Heading as="h3" size="md" color="purple.700" mb={2}>
+                1.3 许可范围
+              </Heading>
+              <Text fontSize="md" color={textColor} lineHeight="1.8">
+                明确标识免费产品的，用户可以进行自用的、非商业性、无限制数量地下载、安装及使用，但不得复制、分发。其他收费类产品或者信息，除遵守本协议规定之外，还须遵守专门协议的规定。
+              </Text>
+            </Box>
+
+            <Box pl={4} borderLeft="3px solid" borderColor="red.300" bg="red.50" p={4} borderRadius="md">
+              <Heading as="h3" size="md" color="red.700" mb={2}>
+                1.4 权利限制
+              </Heading>
+              <Text fontSize="md" color={textColor} lineHeight="1.8">
+                禁止反向工程、反向编译和反向汇编：用户不得对价值前沿软件类产品进行反向工程、反向编译或反向汇编，同时不得改动编译程序文件内部的任何资源。除法律、法规明文规定允许上述活动外，用户必须遵守此协议限制。
+              </Text>
+            </Box>
+          </Box>
+
+          <Divider />
+
+          <Box>
+            <Heading as="h2" size="lg" color={headingColor} mb={4}>
+              二、关于本服务
+            </Heading>
+
+            <Text fontSize="md" color={textColor} lineHeight="1.8" mb={4}>
+              本服务内容是指北京价值前沿科技有限公司向用户提供的跨平台的社交资讯工具（以下简称"价值前沿"），支持单人、多人参与，在发布图片和文字等内容服务的基础上，同时为用户提供包括但不限于社交关系拓展、便捷工具等功能或内容的软件服务（以下简称"本服务"）。
+            </Text>
+          </Box>
+
+          <Divider />
+
+          <Box>
+            <Heading as="h2" size="lg" color={headingColor} mb={4}>
+              三、免责条款
+            </Heading>
+
+            <Text fontSize="md" color={textColor} lineHeight="1.8" mb={4}>
+              北京价值前沿科技有限公司作为面向全球投资人提供信息和服务的商家，对以下情况不承担相关责任：
+            </Text>
+
+            <VStack align="stretch" spacing={3}>
+              <Box pl={4} borderLeft="3px solid" borderColor="yellow.400" bg="yellow.50" p={3} borderRadius="md">
+                <Heading as="h3" size="sm" color="yellow.700" mb={2}>
+                  1）不可抗力
+                </Heading>
+                <Text fontSize="sm" color={textColor} lineHeight="1.6">
+                  如因发生自然灾害、战争、第三方侵害等不可控因素而发生的信息、服务中断，价值前沿不承担相应责任。
+                </Text>
+              </Box>
+
+              <Box pl={4} borderLeft="3px solid" borderColor="yellow.400" bg="yellow.50" p={3} borderRadius="md">
+                <Heading as="h3" size="sm" color="yellow.700" mb={2}>
+                  2）信息网络传播
+                </Heading>
+                <Text fontSize="sm" color={textColor} lineHeight="1.6">
+                  如因信息网络传播中的拥塞、断续、病毒木马、黑客窃取侦听等网络通道上的因素，而造成信息缺失、丢失、延迟、被篡改等，价值前沿不对此承担相应责任。
+                </Text>
+              </Box>
+
+              <Box pl={4} borderLeft="3px solid" borderColor="yellow.400" bg="yellow.50" p={3} borderRadius="md">
+                <Heading as="h3" size="sm" color="yellow.700" mb={2}>
+                  3）第三方信息的收集整理
+                </Heading>
+                <Text fontSize="sm" color={textColor} lineHeight="1.6">
+                  价值前沿为了更好地服务投资者，便于用户分析研判投资环境，尽可能多地收集整理来自第三方的所有信息，分门别类地提供给用户参考，并明确标识为来自第三方的信息，而对内容的真实性、合理性、完整性、合法性等并不承担判断责任，也不承担用户因信息而造成的损失责任。
+                </Text>
+              </Box>
+
+              <Box pl={4} borderLeft="3px solid" borderColor="yellow.400" bg="yellow.50" p={3} borderRadius="md">
+                <Heading as="h3" size="sm" color="yellow.700" mb={2}>
+                  4）证券信息汇总
+                </Heading>
+                <Text fontSize="sm" color={textColor} lineHeight="1.6">
+                  价值前沿仅提供证券信息汇总及证券投资品种历史数据统计功能，不针对用户提供任何情况判断、投资参考、品种操作建议等等，不属于荐股软件。用户按照自身对于市场环境的分析研判而做出的评论参考，用户可以结合自身需求予以借鉴，并自行作出判断，风险和收益都由用户自行承担。
+                </Text>
+              </Box>
+
+              <Box pl={4} borderLeft="3px solid" borderColor="yellow.400" bg="yellow.50" p={3} borderRadius="md">
+                <Heading as="h3" size="sm" color="yellow.700" mb={2}>
+                  5）信息储存
+                </Heading>
+                <Text fontSize="sm" color={textColor} lineHeight="1.6">
+                  用户在使用价值前沿系统时，会因信息注册、产品购买、软件使用过程中的某些需求，而留存于系统中的账户、密码、真实身份、联系方式、用户网络信息等个人信息，价值前沿将按照国家相关规定进行必要的保护。
+                </Text>
+              </Box>
+            </VStack>
+          </Box>
+
+          <Divider />
+
+          <Box>
+            <Heading as="h2" size="lg" color={headingColor} mb={4}>
+              四、用户个人信息保护
+            </Heading>
+
+            <Text fontSize="md" color={textColor} lineHeight="1.8" mb={4}>
+              保护用户个人信息是北京价值前沿科技有限公司的一项基本原则，北京价值前沿科技有限公司将会采取合理的措施保护用户的个人信息。除法律法规规定的情形外，未经用户许可北京价值前沿科技有限公司不会向第三方公开、透露用户个人信息。
+            </Text>
+
+            <Text fontSize="md" color={textColor} lineHeight="1.8" mb={4}>
+              你在注册帐号或使用本服务的过程中，需要提供一些必要的信息，例如：为向你提供帐号注册服务或进行用户身份识别，需要你填写手机号码；手机通讯录匹配功能需要你授权访问手机通讯录等。若国家法律法规或政策有特殊规定的，你需要提供真实的身份信息。
+            </Text>
+          </Box>
+
+          <Divider />
+
+          <Box>
+            <Heading as="h2" size="lg" color={headingColor} mb={4}>
+              五、用户行为规范
+            </Heading>
+
+            <Text fontSize="md" color={textColor} lineHeight="1.8" mb={4}>
+              你理解并同意，价值前沿一直致力于为用户提供文明健康、规范有序的网络环境，你不得利用价值前沿帐号或本软件及服务制作、复制、发布、传播干扰正常运营，以及侵犯其他用户或第三方合法权益的内容。
+            </Text>
+
+            <Box pl={4} borderLeft="3px solid" borderColor="red.400" bg="red.50" p={4} borderRadius="md">
+              <Heading as="h3" size="md" color="red.700" mb={2}>
+                禁止内容包括但不限于：
+              </Heading>
+              <VStack align="start" spacing={1} pl={4}>
+                <Text fontSize="sm" color={textColor}>• 违反宪法确定的基本原则的内容</Text>
+                <Text fontSize="sm" color={textColor}>• 危害国家安全，泄露国家秘密的内容</Text>
+                <Text fontSize="sm" color={textColor}>• 损害国家荣誉和利益的内容</Text>
+                <Text fontSize="sm" color={textColor}>• 散布谣言，扰乱社会秩序的内容</Text>
+                <Text fontSize="sm" color={textColor}>• 散布淫秽、色情、赌博、暴力、恐怖的内容</Text>
+                <Text fontSize="sm" color={textColor}>• 侮辱或者诽谤他人，侵害他人合法权益的内容</Text>
+                <Text fontSize="sm" color={textColor}>• 其他违反法律法规的内容</Text>
+              </VStack>
+            </Box>
+          </Box>
+
+          <Divider />
+
+          <Box>
+            <Heading as="h2" size="lg" color={headingColor} mb={4}>
+              六、知识产权声明
+            </Heading>
+
+            <Text fontSize="md" color={textColor} lineHeight="1.8" mb={4}>
+              北京价值前沿科技有限公司是本软件的知识产权权利人。本软件的一切著作权、商标权、专利权、商业秘密等知识产权，以及与本软件相关的所有信息内容（包括但不限于文字、图片、音频、视频、图表、界面设计、版面框架、有关数据或电子文档等）均受中华人民共和国法律法规和相应的国际条约保护。
+            </Text>
+
+            <Text fontSize="md" color={textColor} lineHeight="1.8" mb={4}>
+              未经北京价值前沿科技有限公司或相关权利人书面同意，你不得为任何商业或非商业目的自行或许可任何第三方实施、利用、转让上述知识产权。
+            </Text>
+          </Box>
+
+          <Divider />
+
+          <Box>
+            <Heading as="h2" size="lg" color={headingColor} mb={4}>
+              七、其他条款
+            </Heading>
+
+            <Text fontSize="md" color={textColor} lineHeight="1.8" mb={4}>
+              你使用本软件即视为你已阅读并同意受本协议的约束。北京价值前沿科技有限公司有权在必要时修改本协议条款。你可以在本软件的最新版本中查阅相关协议条款。
+            </Text>
+
+            <Text fontSize="md" color={textColor} lineHeight="1.8" mb={4}>
+              本协议签订地为中华人民共和国北京市海淀区。本协议的成立、生效、履行、解释及纠纷解决，适用中华人民共和国大陆地区法律（不包括冲突法）。
+            </Text>
+
+            <Text fontSize="md" color={textColor} lineHeight="1.8">
+              若你和北京价值前沿科技有限公司之间发生任何纠纷或争议，首先应友好协商解决；协商不成的，你同意将纠纷或争议提交本协议签订地有管辖权的人民法院管辖。
+            </Text>
+          </Box>
+        </VStack>
+      </Container>
+    </Box>
+  );
+}