feat: 调整注册逻辑

ERROR_FIX_REPORT.md

@@ -0,0 +1,364 @@
+# 黑屏问题修复报告
+
+## 🔍 问题描述
+
+**现象**: 注册页面点击"获取二维码"按钮，API 请求失败时页面变成黑屏
+
+**根本原因**:
+1. **缺少全局 ErrorBoundary** - 组件错误未被捕获，导致整个 React 应用崩溃
+2. **缺少 Promise rejection 处理** - 异步错误（AxiosError）未被捕获
+3. **ErrorBoundary 组件未正确导出** - 虽然组件存在但无法使用
+4. **错误提示被注释** - 用户无法看到具体错误信息
+
+---
+
+## ✅ 已实施的修复方案
+
+### 1. 修复 ErrorBoundary 导出 ✓
+
+**文件**: `src/components/ErrorBoundary.js`
+
+**问题**: 文件末尾只有 `export` 没有完整导出语句
+
+**修复**:
+```javascript
+// ❌ 修复前
+export
+
+// ✅ 修复后
+export default ErrorBoundary;
+```
+
+---
+
+### 2. 在 App.js 添加全局 ErrorBoundary ✓
+
+**文件**: `src/App.js`
+
+**修复**: 在最外层添加 ErrorBoundary 包裹
+
+```javascript
+export default function App() {
+    return (
+        <ChakraProvider theme={theme}>
+            <ErrorBoundary>  {/* ✅ 添加全局错误边界 */}
+                <AuthProvider>
+                    <AppContent />
+                </AuthProvider>
+            </ErrorBoundary>
+        </ChakraProvider>
+    );
+}
+```
+
+**效果**: 捕获所有 React 组件渲染错误，防止整个应用崩溃
+
+---
+
+### 3. 添加全局 Promise Rejection 处理 ✓
+
+**文件**: `src/App.js`
+
+**问题**: ErrorBoundary 只能捕获同步错误，无法捕获异步 Promise rejection
+
+**修复**: 添加全局事件监听器
+
+```javascript
+export default function App() {
+    // 全局错误处理：捕获未处理的 Promise rejection
+    useEffect(() => {
+        const handleUnhandledRejection = (event) => {
+            console.error('未捕获的 Promise rejection:', event.reason);
+            event.preventDefault(); // 阻止默认处理，防止崩溃
+        };
+
+        const handleError = (event) => {
+            console.error('全局错误:', event.error);
+            event.preventDefault(); // 阻止默认处理，防止崩溃
+        };
+
+        window.addEventListener('unhandledrejection', handleUnhandledRejection);
+        window.addEventListener('error', handleError);
+
+        return () => {
+            window.removeEventListener('unhandledrejection', handleUnhandledRejection);
+            window.removeEventListener('error', handleError);
+        };
+    }, []);
+
+    // ...
+}
+```
+
+**效果**:
+- 捕获所有未处理的 Promise rejection（如 AxiosError）
+- 记录错误到控制台便于调试
+- 阻止应用崩溃和黑屏
+
+---
+
+### 4. 在 Auth Layout 添加 ErrorBoundary ✓
+
+**文件**: `src/layouts/Auth.js`
+
+**修复**: 为认证路由添加独立的错误边界
+
+```javascript
+export default function Auth() {
+  return (
+    <ErrorBoundary>  {/* ✅ Auth 专属错误边界 */}
+      <Box minH="100vh">
+        <Routes>
+          {/* ... 路由配置 */}
+        </Routes>
+      </Box>
+    </ErrorBoundary>
+  );
+}
+```
+
+**效果**: 认证页面的错误不会影响整个应用
+
+---
+
+### 5. 恢复 WechatRegister 错误提示 ✓
+
+**文件**: `src/components/Auth/WechatRegister.js`
+
+**问题**: Toast 错误提示被注释，用户无法看到错误原因
+
+**修复**:
+```javascript
+} catch (error) {
+    console.error('获取微信授权失败:', error);
+    toast({  // ✅ 恢复 Toast 提示
+        title: "获取微信授权失败",
+        description: error.response?.data?.error || error.message || "请稍后重试",
+        status: "error",
+        duration: 3000,
+    });
+}
+```
+
+---
+
+## 🛡️ 完整错误保护体系
+
+现在系统有**四层错误保护**：
+
+```
+┌─────────────────────────────────────────────────┐
+│  第1层: 组件级 try-catch                         │
+│  • WechatRegister.getWechatQRCode()            │
+│  • SignIn.openWechatLogin()                    │
+│  • 显示 Toast 错误提示                          │
+└─────────────────────────────────────────────────┘
+                      ↓ 未捕获的错误
+┌─────────────────────────────────────────────────┐
+│  第2层: 页面级 ErrorBoundary (Auth.js)          │
+│  • 捕获认证页面的 React 错误                     │
+│  • 显示错误页面 + 重载按钮                       │
+└─────────────────────────────────────────────────┘
+                      ↓ 未捕获的错误
+┌─────────────────────────────────────────────────┐
+│  第3层: 全局 ErrorBoundary (App.js)             │
+│  • 捕获所有 React 组件错误                       │
+│  • 最后的防线，防止白屏                          │
+└─────────────────────────────────────────────────┘
+                      ↓ 异步错误
+┌─────────────────────────────────────────────────┐
+│  第4层: 全局 Promise Rejection 处理 (App.js)    │
+│  • 捕获所有未处理的 Promise rejection            │
+│  • 记录到控制台，阻止应用崩溃                     │
+└─────────────────────────────────────────────────┘
+```
+
+---
+
+## 📊 修复前 vs 修复后
+
+| 场景 | 修复前 | 修复后 |
+|-----|-------|-------|
+| **API 请求失败** | 黑屏 ❌ | Toast 提示 + 页面正常 ✅ |
+| **组件渲染错误** | 黑屏 ❌ | 错误页面 + 重载按钮 ✅ |
+| **Promise rejection** | 黑屏 ❌ | 控制台日志 + 页面正常 ✅ |
+| **用户体验** | 极差（无法恢复） | 优秀（可继续操作） |
+
+---
+
+## 🧪 测试验证
+
+### 测试场景 1: API 请求失败
+```
+操作: 点击"获取二维码"，后端返回错误
+预期:
+✅ 显示 Toast 错误提示
+✅ 页面保持正常显示
+✅ 可以重新点击按钮
+```
+
+### 测试场景 2: 网络错误
+```
+操作: 断网状态下点击"获取二维码"
+预期:
+✅ 显示网络错误提示
+✅ 页面不黑屏
+✅ 控制台记录 AxiosError
+```
+
+### 测试场景 3: 组件渲染错误
+```
+操作: 人为制造组件错误（如访问 undefined 属性）
+预期:
+✅ ErrorBoundary 捕获错误
+✅ 显示错误页面和"重新加载"按钮
+✅ 点击按钮可恢复
+```
+
+---
+
+## 🔍 调试指南
+
+### 查看错误日志
+
+打开浏览器开发者工具 (F12)，查看 Console 面板：
+
+1. **组件级错误**:
+   ```
+   ❌ 获取微信授权失败: AxiosError {...}
+   ```
+
+2. **Promise rejection**:
+   ```
+   ❌ 未捕获的 Promise rejection: Error: Network Error
+   ```
+
+3. **全局错误**:
+   ```
+   ❌ 全局错误: TypeError: Cannot read property 'xxx' of undefined
+   ```
+
+### 检查 ErrorBoundary 是否生效
+
+1. 在开发模式下，React 会显示错误详情 overlay
+2. 关闭 overlay 后，应该看到 ErrorBoundary 的错误页面
+3. 生产模式下直接显示 ErrorBoundary 错误页面
+
+---
+
+## 📝 修改文件清单
+
+| 文件 | 修改内容 | 状态 |
+|-----|---------|------|
+| `src/components/ErrorBoundary.js` | 添加 `export default` | ✅ |
+| `src/App.js` | 添加 ErrorBoundary + Promise rejection 处理 | ✅ |
+| `src/layouts/Auth.js` | 添加 ErrorBoundary | ✅ |
+| `src/components/Auth/WechatRegister.js` | 恢复 Toast 错误提示 | ✅ |
+
+---
+
+## ⚠️ 注意事项
+
+### 开发环境 vs 生产环境
+
+**开发环境**:
+- React 会显示红色错误 overlay
+- ErrorBoundary 的错误详情会显示
+- 控制台有完整的错误堆栈
+
+**生产环境**:
+- 不显示错误 overlay
+- 直接显示 ErrorBoundary 的用户友好页面
+- 控制台仅记录简化的错误信息
+
+### Promise Rejection 处理
+
+- `event.preventDefault()` 阻止浏览器默认行为（控制台红色错误）
+- 但错误仍会被记录到 `console.error`
+- 应用不会崩溃，用户可继续操作
+
+---
+
+## 🎯 后续优化建议
+
+### 1. 添加错误上报服务（可选）
+
+集成 Sentry 或其他错误监控服务：
+
+```javascript
+import * as Sentry from "@sentry/react";
+
+// 在 index.js 初始化
+Sentry.init({
+  dsn: "YOUR_SENTRY_DSN",
+  environment: process.env.NODE_ENV,
+});
+```
+
+### 2. 改进用户体验
+
+- 为不同类型的错误显示不同的图标和文案
+- 添加"联系客服"按钮
+- 提供常见问题解答链接
+
+### 3. 优化错误恢复
+
+- 实现细粒度的错误边界（特定功能区域）
+- 提供局部重试而不是刷新整个页面
+- 缓存用户输入，错误恢复后自动填充
+
+---
+
+## 📈 技术细节
+
+### ErrorBoundary 原理
+
+```javascript
+class ErrorBoundary extends React.Component {
+  componentDidCatch(error, errorInfo) {
+    // 捕获子组件树中的所有错误
+    // 但无法捕获：
+    // 1. 事件处理器中的错误
+    // 2. 异步代码中的错误 (setTimeout, Promise)
+    // 3. ErrorBoundary 自身的错误
+  }
+}
+```
+
+### Promise Rejection 处理原理
+
+```javascript
+window.addEventListener('unhandledrejection', (event) => {
+  // event.reason 包含 Promise rejection 的原因
+  // event.promise 是被 reject 的 Promise
+  event.preventDefault(); // 阻止默认行为
+});
+```
+
+---
+
+## 🎉 总结
+
+### 修复成果
+
+✅ **彻底解决黑屏问题**
+- API 请求失败不再导致崩溃
+- 用户可以看到清晰的错误提示
+- 页面可以正常继续使用
+
+✅ **建立完整错误处理体系**
+- 4 层错误保护机制
+- 覆盖同步和异步错误
+- 开发和生产环境都适用
+
+✅ **提升用户体验**
+- 从"黑屏崩溃"到"友好提示"
+- 提供错误恢复途径
+- 便于问题排查和调试
+
+---
+
+**修复完成时间**: 2025-10-14
+**修复者**: Claude Code
+**版本**: 3.0.0
+

src/App.js

@@ -9,7 +9,7 @@
  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Visionware.
  */
 
-import React, { Suspense } from "react";
+import React, { Suspense, useEffect } from "react";
 import { ChakraProvider } from '@chakra-ui/react';
 import { Routes, Route, Navigate } from "react-router-dom";
 
@@ -45,6 +45,7 @@ import { AuthProvider } from "contexts/AuthContext";
 
 // Components
 import ProtectedRoute from "components/ProtectedRoute";
+import ErrorBoundary from "components/ErrorBoundary";
 
 function AppContent() {
     const { colorMode } = useColorMode();
@@ -152,11 +153,36 @@ function AppContent() {
 }
 
 export default function App() {
+    // 全局错误处理：捕获未处理的 Promise rejection
+    useEffect(() => {
+        const handleUnhandledRejection = (event) => {
+            console.error('未捕获的 Promise rejection:', event.reason);
+            // 阻止默认的错误处理（防止崩溃）
+            event.preventDefault();
+        };
+
+        const handleError = (event) => {
+            console.error('全局错误:', event.error);
+            // 阻止默认的错误处理（防止崩溃）
+            event.preventDefault();
+        };
+
+        window.addEventListener('unhandledrejection', handleUnhandledRejection);
+        window.addEventListener('error', handleError);
+
+        return () => {
+            window.removeEventListener('unhandledrejection', handleUnhandledRejection);
+            window.removeEventListener('error', handleError);
+        };
+    }, []);
+
     return (
         <ChakraProvider theme={theme}>
+            <ErrorBoundary>
                 <AuthProvider>
                     <AppContent />
                 </AuthProvider>
+            </ErrorBoundary>
         </ChakraProvider>
     );
 }

src/components/Auth/AuthBackground.js

@@ -0,0 +1,55 @@
+// src/components/Auth/AuthBackground.js
+import React from "react";
+import { Box } from "@chakra-ui/react";
+
+/**
+ * 认证页面通用背景组件
+ * 用于登录和注册页面的动态渐变背景
+ */
+export default function AuthBackground() {
+  return (
+    <Box
+      position="absolute"
+      top={0}
+      left={0}
+      right={0}
+      bottom={0}
+      zIndex={0}
+      background={`linear-gradient(45deg, rgba(139, 69, 19, 0.9) 0%, rgba(160, 82, 45, 0.8) 15%, rgba(205, 133, 63, 0.7) 30%, rgba(222, 184, 135, 0.8) 45%, rgba(245, 222, 179, 0.6) 60%, rgba(255, 228, 196, 0.7) 75%, rgba(139, 69, 19, 0.8) 100%)`}
+      _before={{
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: `conic-gradient(from 0deg at 30% 20%, rgba(255, 140, 0, 0.6) 0deg, rgba(255, 69, 0, 0.4) 60deg, rgba(139, 69, 19, 0.5) 120deg, rgba(160, 82, 45, 0.6) 180deg, rgba(205, 133, 63, 0.4) 240deg, rgba(255, 140, 0, 0.5) 300deg, rgba(255, 140, 0, 0.6) 360deg)`,
+        mixBlendMode: 'multiply',
+        animation: 'fluid-rotate 20s linear infinite'
+      }}
+      _after={{
+        content: '""',
+        position: 'absolute',
+        top: '10%',
+        left: '20%',
+        width: '60%',
+        height: '80%',
+        borderRadius: '50%',
+        background: 'radial-gradient(ellipse at center, rgba(255, 165, 0, 0.3) 0%, rgba(255, 140, 0, 0.2) 50%, transparent 70%)',
+        filter: 'blur(40px)',
+        animation: 'wave-pulse 8s ease-in-out infinite'
+      }}
+      sx={{
+        '@keyframes fluid-rotate': {
+          '0%': { transform: 'rotate(0deg) scale(1)' },
+          '50%': { transform: 'rotate(180deg) scale(1.1)' },
+          '100%': { transform: 'rotate(360deg) scale(1)' }
+        },
+        '@keyframes wave-pulse': {
+          '0%, 100%': { opacity: 0.4, transform: 'scale(1)' },
+          '50%': { opacity: 0.8, transform: 'scale(1.2)' }
+        }
+      }}
+    />
+  );
+}

src/components/Auth/AuthFooter.js

@@ -0,0 +1,42 @@
+import React from "react";
+import { HStack, Text, Link as ChakraLink } from "@chakra-ui/react";
+import { Link } from "react-router-dom";
+
+/**
+ * 认证页面底部组件
+ * 包含页面切换链接和登录方式切换链接
+ */
+export default function AuthFooter({
+    // 左侧链接配置
+    linkText,           // 提示文本，如 "还没有账号，" 或 "已有账号？"
+    linkLabel,          // 链接文本，如 "去注册" 或 "去登录"
+    linkTo,             // 链接路径，如 "/auth/sign-up" 或 "/auth/sign-in"
+
+    // 右侧切换配置
+    useVerificationCode,     // 当前是否使用验证码登录
+    onSwitchMethod          // 切换登录方式的回调函数
+}) {
+    return (
+        <HStack justify="space-between" width="100%">
+            {/* 左侧：页面切换链接（去注册/去登录） */}
+            <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
+                href="#"
+                fontSize="sm"
+                color="blue.500"
+                fontWeight="bold"
+                onClick={(e) => {
+                    e.preventDefault();
+                    onSwitchMethod();
+                }}
+            >
+                {useVerificationCode ? '密码登陆' : '验证码登陆'}
+            </ChakraLink>
+        </HStack>
+    );
+}

src/components/Auth/AuthHeader.js

@@ -0,0 +1,23 @@
+// src/components/Auth/AuthHeader.js
+import React from "react";
+import { Heading, Text, VStack } from "@chakra-ui/react";
+
+/**
+ * 认证页面通用头部组件
+ * 用于显示页面标题和描述
+ *
+ * @param {string} title - 主标题文字
+ * @param {string} subtitle - 副标题文字
+ */
+export default function AuthHeader({ title, subtitle }) {
+  return (
+    <VStack spacing={2} mb={8}>
+      <Heading size="xl" color="gray.800" fontWeight="bold">
+        {title}
+      </Heading>
+      <Text color="gray.600" fontSize="md">
+        {subtitle}
+      </Text>
+    </VStack>
+  );
+}

src/components/Auth/VerificationCodeInput.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { FormControl, FormErrorMessage, HStack, Input, Button } from "@chakra-ui/react";
+
+/**
+ * 通用验证码输入组件
+ */
+export default function VerificationCodeInput({
+    value,
+    onChange,
+    onSendCode,
+    countdown,
+    isLoading,
+    isSending,
+    error,
+    placeholder = "请输入6位验证码",
+    buttonText = "获取验证码",
+    countdownText = (count) => `${count}s`,
+    colorScheme = "green",
+    isRequired = true
+}) {
+    return (
+        <FormControl isRequired={isRequired} isInvalid={!!error}>
+            <HStack>
+                <Input
+                    name="verificationCode"
+                    value={value}
+                    onChange={onChange}
+                    placeholder={placeholder}
+                    maxLength={6}
+                />
+                <Button
+                    colorScheme={colorScheme}
+                    onClick={onSendCode}
+                    isDisabled={countdown > 0 || isLoading}
+                    isLoading={isSending}
+                    minW="120px"
+                >
+                    {countdown > 0 ? countdownText(countdown) : buttonText}
+                </Button>
+            </HStack>
+            <FormErrorMessage>{error}</FormErrorMessage>
+        </FormControl>
+    );
+}

src/components/Auth/WechatRegister.js

@@ -0,0 +1,330 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import {
+    Box,
+    Button,
+    VStack,
+    Text,
+    Icon,
+    useToast,
+    Spinner
+} from "@chakra-ui/react";
+import { FaQrcode } from "react-icons/fa";
+import { useNavigate } from "react-router-dom";
+import { authService, WECHAT_STATUS, STATUS_MESSAGES } from "../../services/authService";
+
+// 配置常量
+const POLL_INTERVAL = 2000; // 轮询间隔：2秒
+const QR_CODE_TIMEOUT = 300000; // 二维码超时：5分钟
+
+export default function WechatRegister() {
+    // 状态管理
+    const [wechatAuthUrl, setWechatAuthUrl] = useState("");
+    const [wechatSessionId, setWechatSessionId] = useState("");
+    const [wechatStatus, setWechatStatus] = useState(WECHAT_STATUS.NONE);
+    const [isLoading, setIsLoading] = useState(false);
+
+    // 使用 useRef 管理定时器，避免闭包问题和内存泄漏
+    const pollIntervalRef = useRef(null);
+    const timeoutRef = useRef(null);
+    const isMountedRef = useRef(true); // 追踪组件挂载状态
+
+    const navigate = useNavigate();
+    const toast = useToast();
+
+    /**
+     * 显示统一的错误提示
+     */
+    const showError = useCallback((title, description) => {
+        toast({
+            title,
+            description,
+            status: "error",
+            duration: 3000,
+            isClosable: true,
+        });
+    }, [toast]);
+
+    /**
+     * 显示成功提示
+     */
+    const showSuccess = useCallback((title, description) => {
+        toast({
+            title,
+            description,
+            status: "success",
+            duration: 2000,
+            isClosable: true,
+        });
+    }, [toast]);
+
+    /**
+     * 清理所有定时器
+     */
+    const clearTimers = useCallback(() => {
+        if (pollIntervalRef.current) {
+            clearInterval(pollIntervalRef.current);
+            pollIntervalRef.current = null;
+        }
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+    }, []);
+
+    /**
+     * 处理登录成功
+     */
+    const handleLoginSuccess = useCallback(async (sessionId, status) => {
+        try {
+            const response = await authService.loginWithWechat(sessionId);
+
+            if (response?.success) {
+                // Session cookie 会自动管理，不需要手动存储
+                // 如果后端返回了 token，可以选择性存储（兼容旧方式）
+                if (response.token) {
+                    localStorage.setItem('token', response.token);
+                }
+                if (response.user) {
+                    localStorage.setItem('user', JSON.stringify(response.user));
+                }
+
+                showSuccess(
+                    status === WECHAT_STATUS.LOGIN_SUCCESS ? "登录成功" : "注册成功",
+                    "正在跳转..."
+                );
+
+                // 延迟跳转，让用户看到成功提示
+                setTimeout(() => {
+                    navigate("/home");
+                }, 1000);
+            } else {
+                throw new Error(response?.error || '登录失败');
+            }
+        } catch (error) {
+            console.error('登录失败:', error);
+            showError("登录失败", error.message || "请重试");
+        }
+    }, [navigate, showSuccess, showError]);
+
+    /**
+     * 检查微信扫码状态
+     */
+    const checkWechatStatus = useCallback(async () => {
+        // 检查组件是否已卸载
+        if (!isMountedRef.current || !wechatSessionId) return;
+
+        try {
+            const response = await authService.checkWechatStatus(wechatSessionId);
+
+            // 安全检查：确保 response 存在且包含 status
+            if (!response || typeof response.status === 'undefined') {
+                console.warn('微信状态检查返回无效数据:', response);
+                return;
+            }
+
+            const { status } = response;
+
+            // 组件卸载后不再更新状态
+            if (!isMountedRef.current) return;
+
+            setWechatStatus(status);
+
+            // 处理成功状态
+            if (status === WECHAT_STATUS.LOGIN_SUCCESS || status === WECHAT_STATUS.REGISTER_SUCCESS) {
+                clearTimers(); // 停止轮询
+                await handleLoginSuccess(wechatSessionId, status);
+            }
+            // 处理过期状态
+            else if (status === WECHAT_STATUS.EXPIRED) {
+                clearTimers();
+                if (isMountedRef.current) {
+                    toast({
+                        title: "授权已过期",
+                        description: "请重新获取授权",
+                        status: "warning",
+                        duration: 3000,
+                        isClosable: true,
+                    });
+                }
+            }
+        } catch (error) {
+            console.error("检查微信状态失败:", error);
+            // 轮询过程中的错误不显示给用户，避免频繁提示
+            // 但如果错误持续发生，停止轮询避免无限重试
+            if (error.message.includes('网络连接失败')) {
+                clearTimers();
+                if (isMountedRef.current) {
+                    toast({
+                        title: "网络连接失败",
+                        description: "请检查网络后重试",
+                        status: "error",
+                        duration: 3000,
+                        isClosable: true,
+                    });
+                }
+            }
+        }
+    }, [wechatSessionId, handleLoginSuccess, clearTimers, toast]);
+
+    /**
+     * 启动轮询
+     */
+    const startPolling = useCallback(() => {
+        // 清理旧的定时器
+        clearTimers();
+
+        // 启动轮询
+        pollIntervalRef.current = setInterval(() => {
+            checkWechatStatus();
+        }, POLL_INTERVAL);
+
+        // 设置超时
+        timeoutRef.current = setTimeout(() => {
+            clearTimers();
+            setWechatStatus(WECHAT_STATUS.EXPIRED);
+        }, QR_CODE_TIMEOUT);
+    }, [checkWechatStatus, clearTimers]);
+
+    /**
+     * 获取微信二维码
+     */
+    const getWechatQRCode = async () => {
+        try {
+            setIsLoading(true);
+
+            const response = await authService.getWechatQRCode();
+
+            // 检查组件是否已卸载
+            if (!isMountedRef.current) return;
+
+            // 安全检查：确保响应包含必要字段
+            if (!response) {
+                throw new Error('服务器无响应');
+            }
+
+            if (!response.auth_url || !response.session_id) {
+                throw new Error('获取二维码失败：响应数据不完整');
+            }
+
+            setWechatAuthUrl(response.auth_url);
+            setWechatSessionId(response.session_id);
+            setWechatStatus(WECHAT_STATUS.WAITING);
+
+            // 启动轮询检查扫码状态
+            startPolling();
+        } catch (error) {
+            console.error('获取微信授权失败:', error);
+            if (isMountedRef.current) {
+                showError("获取微信授权失败", error.message || "请稍后重试");
+            }
+        } finally {
+            if (isMountedRef.current) {
+                setIsLoading(false);
+            }
+        }
+    };
+
+    /**
+     * 组件卸载时清理定时器和标记组件状态
+     */
+    useEffect(() => {
+        isMountedRef.current = true;
+
+        return () => {
+            isMountedRef.current = false;
+            clearTimers();
+        };
+    }, [clearTimers]);
+
+    /**
+     * 渲染状态提示文本
+     */
+    const renderStatusText = () => {
+        if (!wechatAuthUrl || wechatStatus === WECHAT_STATUS.NONE || wechatStatus === WECHAT_STATUS.EXPIRED) {
+            return null;
+        }
+
+        return (
+            <Text fontSize="xs" color="gray.500">
+                {STATUS_MESSAGES[wechatStatus] || STATUS_MESSAGES[WECHAT_STATUS.WAITING]}
+            </Text>
+        );
+    };
+
+    return (
+        <VStack spacing={2}>
+            <Text fontSize="lg" fontWeight="bold" color="gray.700" whiteSpace="nowrap">
+                微信扫一扫
+            </Text>
+
+            <Box
+                position="relative"
+                minH="120px"
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+            >
+                {/* 灰色二维码底图 - 始终显示 */}
+                <Icon as={FaQrcode} w={24} h={24} color="gray.300" />
+
+                {/* 加载动画 */}
+                {isLoading && (
+                    <Box
+                        position="absolute"
+                        top="0"
+                        left="0"
+                        right="0"
+                        bottom="0"
+                        display="flex"
+                        alignItems="center"
+                        justifyContent="center"
+                    >
+                        <Spinner
+                            size="lg"
+                            color="green.500"
+                            thickness="4px"
+                        />
+                    </Box>
+                )}
+
+                {/* 显示获取/刷新二维码按钮 */}
+                {(wechatStatus === WECHAT_STATUS.NONE || wechatStatus === WECHAT_STATUS.EXPIRED) && (
+                    <Box
+                        position="absolute"
+                        top="0"
+                        left="0"
+                        right="0"
+                        bottom="0"
+                        display="flex"
+                        alignItems="center"
+                        justifyContent="center"
+                        bg="rgba(255, 255, 255, 0.3)"
+                        backdropFilter="blur(2px)"
+                    >
+                        <VStack spacing={2}>
+                            <Button
+                                variant="outline"
+                                colorScheme="green"
+                                size="sm"
+                                onClick={getWechatQRCode}
+                                isLoading={isLoading}
+                                leftIcon={<Icon as={FaQrcode} />}
+                                _hover={{ bg: "green.50" }}
+                            >
+                                {wechatStatus === WECHAT_STATUS.EXPIRED ? "点击刷新" : "获取二维码"}
+                            </Button>
+                            {wechatStatus === WECHAT_STATUS.EXPIRED && (
+                                <Text fontSize="xs" color="gray.500">
+                                    二维码已过期
+                                </Text>
+                            )}
+                        </VStack>
+                    </Box>
+                )}
+            </Box>
+
+            {/* 扫码状态提示 */}
+            {renderStatusText()}
+        </VStack>
+    );
+}

src/components/ErrorBoundary.js

@@ -77,4 +77,4 @@ class ErrorBoundary extends React.Component {
     }
 }
 
-export
+export default ErrorBoundary;

src/layouts/Auth.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { Routes, Route, Navigate } from 'react-router-dom';
 import { Box } from '@chakra-ui/react';
 import { useAuth } from '../contexts/AuthContext';
+import ErrorBoundary from '../components/ErrorBoundary';
 
 // 导入认证相关页面
 import SignInIllustration from '../views/Authentication/SignIn/SignInIllustration';
@@ -33,6 +34,7 @@ const AuthRoute = ({ children }) => {
 
 export default function Auth() {
   return (
+    <ErrorBoundary>
       <Box minH="100vh">
         <Routes>
           {/* 登录页面 */}
@@ -60,5 +62,6 @@ export default function Auth() {
           <Route path="*" element={<Navigate to="/auth/signin" replace />} />
         </Routes>
       </Box>
+    </ErrorBoundary>
   );
 }

src/services/authService.js

@@ -0,0 +1,121 @@
+// src/services/authService.js
+/**
+ * 认证服务层 - 处理所有认证相关的 API 调用
+ */
+
+const isProduction = process.env.NODE_ENV === 'production';
+const API_BASE_URL = isProduction ? "" : process.env.REACT_APP_API_URL;
+
+/**
+ * 统一的 API 请求处理
+ * @param {string} url - 请求路径
+ * @param {object} options - fetch 选项
+ * @returns {Promise} - 响应数据
+ */
+const apiRequest = async (url, options = {}) => {
+    try {
+        const response = await fetch(`${API_BASE_URL}${url}`, {
+            ...options,
+            headers: {
+                'Content-Type': 'application/json',
+                ...options.headers,
+            },
+            credentials: 'include', // 包含 cookies
+        });
+
+        // 检查响应是否为 JSON
+        const contentType = response.headers.get('content-type');
+        const isJson = contentType && contentType.includes('application/json');
+
+        if (!response.ok) {
+            let errorMessage = `HTTP error! status: ${response.status}`;
+            if (isJson) {
+                try {
+                    const errorData = await response.json();
+                    errorMessage = errorData.error || errorData.message || errorMessage;
+                } catch (parseError) {
+                    console.warn('Failed to parse error response as JSON');
+                }
+            }
+            throw new Error(errorMessage);
+        }
+
+        // 安全地解析 JSON 响应
+        if (isJson) {
+            try {
+                return await response.json();
+            } catch (parseError) {
+                console.error('Failed to parse response as JSON:', parseError);
+                throw new Error('服务器响应格式错误');
+            }
+        } else {
+            throw new Error('服务器响应不是 JSON 格式');
+        }
+    } catch (error) {
+        console.error(`Auth API request failed for ${url}:`, error);
+        // 如果是网络错误，提供更友好的提示
+        if (error.message === 'Failed to fetch' || error.name === 'TypeError') {
+            throw new Error('网络连接失败，请检查网络设置');
+        }
+        throw error;
+    }
+};
+
+export const authService = {
+    /**
+     * 获取微信二维码授权链接
+     * @returns {Promise<{auth_url: string, session_id: string}>}
+     */
+    getWechatQRCode: async () => {
+        return await apiRequest('/api/auth/wechat/qrcode');
+    },
+
+    /**
+     * 检查微信扫码状态
+     * @param {string} sessionId - 会话ID
+     * @returns {Promise<{status: string, user_info?: object}>}
+     */
+    checkWechatStatus: async (sessionId) => {
+        return await apiRequest('/api/auth/wechat/check', {
+            method: 'POST',
+            body: JSON.stringify({ session_id: sessionId }),
+        });
+    },
+
+    /**
+     * 使用微信 session 登录
+     * @param {string} sessionId - 会话ID
+     * @returns {Promise<{success: boolean, user?: object, token?: string}>}
+     */
+    loginWithWechat: async (sessionId) => {
+        return await apiRequest('/api/auth/login/wechat', {
+            method: 'POST',
+            body: JSON.stringify({ session_id: sessionId }),
+        });
+    },
+};
+
+/**
+ * 微信状态常量
+ */
+export const WECHAT_STATUS = {
+    NONE: 'none',
+    WAITING: 'waiting',
+    SCANNED: 'scanned',
+    AUTHORIZED: 'authorized',
+    LOGIN_SUCCESS: 'login_success',
+    REGISTER_SUCCESS: 'register_success',
+    EXPIRED: 'expired',
+};
+
+/**
+ * 状态提示信息映射
+ */
+export const STATUS_MESSAGES = {
+    [WECHAT_STATUS.WAITING]: '请使用微信扫码',
+    [WECHAT_STATUS.SCANNED]: '扫码成功，请在手机上确认',
+    [WECHAT_STATUS.AUTHORIZED]: '授权成功，正在登录...',
+    [WECHAT_STATUS.EXPIRED]: '二维码已过期',
+};
+
+export default authService;

src/views/Authentication/SignIn/SignInIllustration.js

@@ -17,14 +17,19 @@ import {
     IconButton,
     Link as ChakraLink,
     Center,
-    useDisclosure
+    useDisclosure,
+    FormErrorMessage
 } from "@chakra-ui/react";
 import { ViewIcon, ViewOffIcon } from "@chakra-ui/icons";
 import { FaMobile, FaWeixin, FaLock, FaQrcode } from "react-icons/fa";
-import { useNavigate, Link, useLocation } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import { useAuth } from "../../../contexts/AuthContext";
 import PrivacyPolicyModal from "../../../components/PrivacyPolicyModal";
 import UserAgreementModal from "../../../components/UserAgreementModal";
+import AuthBackground from "../../../components/Auth/AuthBackground";
+import AuthHeader from "../../../components/Auth/AuthHeader";
+import AuthFooter from "../../../components/Auth/AuthFooter";
+import VerificationCodeInput from "../../../components/Auth/VerificationCodeInput";
 
 // API配置
 const isProduction = process.env.NODE_ENV === 'production';
@@ -38,6 +43,7 @@ export default function SignInIllustration() {
 
     // 页面状态
     const [isLoading, setIsLoading] = useState(false);
+    const [errors, setErrors] = useState({});
 
     // 检查URL参数中的错误信息（微信登录失败时）
     useEffect(() => {
@@ -194,17 +200,13 @@ export default function SignInIllustration() {
         }
     };
 
-    // 获取微信授权URL
-    const getWechatQRCode = async () => {
-        
-    };
-
     // 点击扫码，打开微信登录窗口
     const openWechatLogin = async () => {
 
         try {
             setIsLoading(true);
 
+            console.log("请求微信登录1...");
             // 获取微信二维码地址
             const response = await fetch(`${API_BASE_URL}/api/auth/wechat/qrcode`);
 
@@ -346,240 +348,95 @@ export default function SignInIllustration() {
     };
 
     // 切换登录方式
-    const handleChangeMethod = (status) => {
+    const handleChangeMethod = () => {
-        if (!status) {
+        setUseVerificationCode(!useVerificationCode);
+        // 切换到密码模式时清空验证码
+        if (useVerificationCode) {
             setFormData(prev => ({ ...prev, verificationCode: "" }));
         }
-        setUseVerificationCode(!useVerificationCode);
+    };
-    }
 
     return (
         <Flex minH="100vh" position="relative" overflow="hidden">
-            {/* 流体波浪背景 */}
+            {/* 背景 */}
-            <Box
+            <AuthBackground />
-                position="absolute"
-                top={0}
-                left={0}
-                right={0}
-                bottom={0}
-                zIndex={0}
-                background={`
-          linear-gradient(45deg, 
-            rgba(139, 69, 19, 0.9) 0%,
-            rgba(160, 82, 45, 0.8) 15%,
-            rgba(205, 133, 63, 0.7) 30%,
-            rgba(222, 184, 135, 0.8) 45%,
-            rgba(245, 222, 179, 0.6) 60%,
-            rgba(255, 228, 196, 0.7) 75%,
-            rgba(139, 69, 19, 0.8) 100%
-          )
-        `}
-                _before={{
-                    content: '""',
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    background: `
-            conic-gradient(from 0deg at 30% 20%, 
-              rgba(255, 140, 0, 0.6) 0deg, 
-              rgba(255, 69, 0, 0.4) 60deg, 
-              rgba(139, 69, 19, 0.5) 120deg, 
-              rgba(160, 82, 45, 0.6) 180deg, 
-              rgba(205, 133, 63, 0.4) 240deg, 
-              rgba(255, 140, 0, 0.5) 300deg, 
-              rgba(255, 140, 0, 0.6) 360deg
-            )
-          `,
-                    mixBlendMode: 'multiply',
-                    animation: 'fluid-rotate 20s linear infinite'
-                }}
-                _after={{
-                    content: '""',
-                    position: 'absolute',
-                    top: '10%',
-                    left: '20%',
-                    width: '60%',
-                    height: '80%',
-                    borderRadius: '50%',
-                    background: 'radial-gradient(ellipse at center, rgba(255, 165, 0, 0.3) 0%, rgba(255, 140, 0, 0.2) 50%, transparent 70%)',
-                    filter: 'blur(40px)',
-                    animation: 'wave-pulse 8s ease-in-out infinite'
-                }}
-                sx={{
-                    '@keyframes fluid-rotate': {
-                        '0%': { transform: 'rotate(0deg) scale(1)' },
-                        '50%': { transform: 'rotate(180deg) scale(1.1)' },
-                        '100%': { transform: 'rotate(360deg) scale(1)' }
-                    },
-                    '@keyframes wave-pulse': {
-                        '0%, 100%': { opacity: 0.4, transform: 'scale(1)' },
-                        '50%': { opacity: 0.8, transform: 'scale(1.2)' }
-                    }
-                }}
-            />
 
             {/* 主要内容 */}
-            <Flex
+            <Flex width="100%" align="center" justify="center" position="relative" zIndex={1} px={6} py={12}>
-                width="100%"
-                align="center"
-                justify="center"
-                position="relative"
-                zIndex={1}
-                px={6}
-                py={12}
-            >
                 {/* 登录卡片 */}
-                <Box
+                <Box bg="white" borderRadius="2xl" boxShadow="2xl" p={8} width="100%" maxW="800px" backdropFilter="blur(20px)" border="1px solid rgba(255, 255, 255, 0.2)">
-                    bg="white"
-                    borderRadius="2xl"
-                    boxShadow="2xl"
-                    p={8}
-                    width="100%"
-                    maxW="600px"
-                    backdropFilter="blur(20px)"
-                    border="1px solid rgba(255, 255, 255, 0.2)"
-                >
                     {/* 头部区域 */}
-                    <VStack spacing={6} mb={8}>
+                    <AuthHeader title="欢迎回来" subtitle="登录价值前沿，继续您的投资之旅" />
-                        <VStack spacing={2}>
+                    {/* 左右布局 */}
-                            <Heading size="xl" color="gray.800" fontWeight="bold">
+                    <HStack spacing={8} align="stretch">
-                                欢迎回来
+                        {/* 左侧：手机号登陆 - 80% 宽度 */}
-                            </Heading>
+                        <Box flex="4">
-                            <Text color="gray.600" fontSize="md">
-                                登录价值前沿，继续您的投资之旅
-                            </Text>
-                        </VStack>
-
-                        {/* 登录表单 */}
-                        {/* setLoginType */}
-                        <VStack spacing={2} align="stretch">
-                            <HStack justify="center">
-                                {/* 传统登录 */}
                             <form onSubmit={handleTraditionalLogin}>
                                 <VStack spacing={4}>
-                                        <HStack spacing={2} width="100%" align="center"> {/* 设置 HStack 宽度为 100% */}
+                                    <Heading size="md" color="gray.700" alignSelf="flex-start">
-                                            <Text fontSize="md" fontWeight="bold" color="gray.700" minWidth="70px" mr={2} noOfLines={1} overflow="hidden" textOverflow="ellipsis">
+                                        手机号登陆
-                                                账号 ：
+                                    </Heading>
-                                            </Text>
+                                    <FormControl isRequired isInvalid={!!errors.phone}>
-                                            <FormControl isRequired flex="1 1 auto">
-                                                <InputGroup>
                                         <Input
-                                                        name={"phone"}
+                                            name="phone"
                                             value={formData.phone}
                                             onChange={handleInputChange}
-                                                        placeholder={"请输入手机号"}
+                                            placeholder="请输入11位手机号"
-                                                        size="lg"
+                                            pr="2.5rem"
-                                                        borderRadius="lg"
-                                                        bg="gray.50"
-                                                        border="1px solid"
-                                                        borderColor="gray.200"
-                                                        _focus={{
-                                                            borderColor: "blue.500",
-                                                            boxShadow: "0 0 0 1px #667eea"
-                                                        }}
                                         />
-                                                    <InputRightElement pointerEvents="none">
+                                        <FormErrorMessage>{errors.phone}</FormErrorMessage>
-                                                        <Icon as={FaMobile} color="gray.400" />
-                                                    </InputRightElement>
-                                                </InputGroup>
                                     </FormControl>
-                                        </HStack>
 
-                                        {/* 密码输入框 */}
+                                    {/* 密码/验证码输入框 */}
                                     {useVerificationCode ? (
-                                            // 验证码输入框
+                                        <VerificationCodeInput
-                                            <HStack spacing={2}>
-                                                <Text fontSize="md" fontWeight="bold" color={"gray.700"} minWidth="80px">验证码：</Text>
-                                                <VStack spacing={3} align="stretch">
-                                                    <HStack>
-                                                        <FormControl isRequired flex="1 1 auto">
-                                                            <InputGroup size="lg">
-                                                                <Input
-                                                                    name="verificationCode"
                                             value={formData.verificationCode}
                                             onChange={handleInputChange}
-                                                                    placeholder="请输入验证码"
+                                            onSendCode={sendVerificationCode}
-                                                                    borderRadius="lg"
+                                            countdown={countdown}
-                                                                    bg="gray.50"
+                                            isLoading={isLoading}
-                                                                    border="1px solid"
+                                            isSending={sendingCode}
-                                                                    borderColor="gray.200"
+                                            error={errors.verificationCode}
-                                                                    _focus={{
-                                                                        borderColor: "green.500",
-                                                                        boxShadow: "0 0 0 1px #48bb78"
-                                                                    }}
-                                                                    maxLength={6}
-                                                                />
-                                                                {/* <InputRightElement>
-                                                                    <Icon as={FaCode} color="gray.400"/>
-                                                                </InputRightElement> */}
-                                                            </InputGroup>
-                                                        </FormControl>
-                                                        <Button
-                                                            flex="0 0 auto"  // 让按钮大小根据内容自适应
-                                                            size="md"
                                             colorScheme="green"
-                                                            variant="outline"
+                                        />
-                                                            onClick={sendVerificationCode}
-                                                            isLoading={sendingCode}
-                                                            isDisabled={verificationCodeSent && countdown > 0}
-                                                            borderRadius="lg"
-                                                            fontSize="sm"  // 调整字体大小
-                                                            whiteSpace="nowrap"  // 防止文本换行
-                                                            minWidth="120px"  // 设置按钮最小宽度
-                                                        >
-                                                            {sendingCode ? "发送中..." : verificationCodeSent && countdown > 0 ? `${countdown}s` : "发送验证码"}
-                                                        </Button>
-                                                    </HStack>
-                                                </VStack>
-                                            </HStack>
                                     ) : (
-                                            <HStack spacing={2}>
+                                        <FormControl isRequired isInvalid={!!errors.password}>
-                                                <Text fontSize="md" fontWeight="bold" color="gray.700" minWidth="70px" mr={2} noOfLines={1} overflow="hidden" textOverflow="ellipsis">
+                                            <InputGroup>
-                                                    密码：
-                                                </Text>
-                                                <FormControl isRequired flex="1 1 auto">
-                                                    <InputGroup size="lg">
                                                 <Input
                                                     name="password"
                                                     type={showPassword ? "text" : "password"}
                                                     value={formData.password}
                                                     onChange={handleInputChange}
+                                                    pr="3rem"
                                                     placeholder="请输入密码"
-                                                            borderRadius="lg"
-                                                            bg="gray.50"
-                                                            border="1px solid"
-                                                            borderColor="gray.200"
                                                     _focus={{
                                                         borderColor: "blue.500",
                                                         boxShadow: "0 0 0 1px #667eea"
                                                     }}
                                                 />
-                                                        <InputRightElement>
+                                                <InputRightElement width="3rem">
                                                     <IconButton
+                                                        size="sm"
                                                         variant="ghost"
-                                                                aria-label={showPassword ? "隐藏密码" : "显示密码"}
                                                         icon={showPassword ? <ViewOffIcon /> : <ViewIcon />}
                                                         onClick={() => setShowPassword(!showPassword)}
+                                                        aria-label={showPassword ? "Hide password" : "Show password"}
                                                     />
                                                 </InputRightElement>
                                             </InputGroup>
+                                            <FormErrorMessage>{errors.password}</FormErrorMessage>
                                         </FormControl>
-                                            </HStack>
                                     )}
 
 
 
-                                        <HStack justify="space-between" width="100%">
+                                    <AuthFooter
-                                            <HStack spacing={1} as={Link} to="/auth/sign-up">
+                                        linkText="还没有账号，"
-                                                <Text fontSize="sm" color="gray.600">还没有账号，</Text>
+                                        linkLabel="去注册"
-                                                <Text fontSize="sm" color="blue.500" fontWeight="bold">去注册</Text>
+                                        linkTo="/auth/sign-up"
-                                            </HStack>
+                                        useVerificationCode={useVerificationCode}
-                                            <ChakraLink href="#" fontSize="sm" color="blue.500" fontWeight="bold" onClick={handleChangeMethod}>
+                                        onSwitchMethod={handleChangeMethod}
-                                                {useVerificationCode ? '密码登陆' : '验证码登陆'}
+                                    />
-                                            </ChakraLink>
-                                        </HStack>
 
                                     <Button
                                         type="submit"
@@ -602,9 +459,9 @@ export default function SignInIllustration() {
                                     </Button>
                                 </VStack>
                             </form>
-
+                        </Box>
-                                {/* 微信登录 - 简化版 */}
+                        {/* 右侧：微信登陆 - 20% 宽度 */}
-                                <VStack spacing={6}>
+                        <Box flex="1">
                             <Center width="100%" bg="gray.50" borderRadius="lg" p={8}>
                                 <VStack spacing={6}>
                                     <VStack spacing={2}>
@@ -627,10 +484,8 @@ export default function SignInIllustration() {
                                     </Button>
                                 </VStack>
                             </Center>
-                                </VStack>
+                        </Box>
                     </HStack>
-                        </VStack>
-                    </VStack>
 
                     {/* 底部链接 */}
                     <VStack spacing={4} mt={6}>

src/views/Authentication/SignUp/SignUpIllustration.js

@@ -6,34 +6,27 @@ import {
     Flex,
     FormControl,
     Input,
-  Stack,
     Text,
     Heading,
     VStack,
     HStack,
     useToast,
-  Icon,
     InputGroup,
     InputRightElement,
     IconButton,
-  Tab,
-  TabList,
-  Tabs,
-  Link as ChakraLink,
-  Image,
     Center,
-  Spinner,
-  FormLabel,
     FormErrorMessage,
-  Divider,
+    Link as ChakraLink,
-  useDisclosure,
+    useDisclosure
-  Checkbox
 } from "@chakra-ui/react";
 import { ViewIcon, ViewOffIcon } from "@chakra-ui/icons";
-import { FaWeixin, FaMobile, FaEnvelope, FaUser, FaLock } from "react-icons/fa";
+import { useNavigate } from "react-router-dom";
-import { useNavigate, Link } from "react-router-dom";
 import axios from "axios";
-import { useAuth } from '../../../contexts/AuthContext'; // 假设AuthContext在这个路径
+import AuthBackground from '../../../components/Auth/AuthBackground';
+import AuthHeader from '../../../components/Auth/AuthHeader';
+import AuthFooter from '../../../components/Auth/AuthFooter';
+import VerificationCodeInput from '../../../components/Auth/VerificationCodeInput';
+import WechatRegister from '../../../components/Auth/WechatRegister';
 import PrivacyPolicyModal from '../../../components/PrivacyPolicyModal';
 import UserAgreementModal from '../../../components/UserAgreementModal';
 
@@ -41,16 +34,10 @@ const isProduction = process.env.NODE_ENV === 'production';
 const API_BASE_URL = isProduction ? "" : process.env.REACT_APP_API_URL;
 
 export default function SignUpPage() {
-  const [registerType, setRegisterType] = useState(0); // 0: 微信, 1: 手机号
     const [showPassword, setShowPassword] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
     const [countdown, setCountdown] = useState(0);
-  const [wechatAuthUrl, setWechatAuthUrl] = useState("");
-  const [wechatSessionId, setWechatSessionId] = useState("");
-  const [wechatStatus, setWechatStatus] = useState("waiting");
     const [errors, setErrors] = useState({});
-  const [checkInterval, setCheckInterval] = useState(null);
-  const [agreeToTerms, setAgreeToTerms] = useState(false);
 
     const [formData, setFormData] = useState({
         username: "",
@@ -61,285 +48,27 @@ export default function SignUpPage() {
         verificationCode: ""
     });
 
-  // 隐私政策弹窗状态
-  const { 
-    isOpen: isPrivacyModalOpen, 
-    onOpen: onPrivacyModalOpen, 
-    onClose: onPrivacyModalClose 
-  } = useDisclosure();
-
-  // 用户协议弹窗状态
-  const { 
-    isOpen: isUserAgreementModalOpen, 
-    onOpen: onUserAgreementModalOpen, 
-    onClose: onUserAgreementModalClose 
-  } = useDisclosure();
-
     const navigate = useNavigate();
     const toast = useToast();
-  const { loginWithWechat } = useAuth(); // 使用认证上下文
 
-  // 监听微信授权窗口的消息
+    // 隐私政策弹窗状态
-  useEffect(() => {
+    const { isOpen: isPrivacyModalOpen, onOpen: onPrivacyModalOpen, onClose: onPrivacyModalClose } = useDisclosure();
-    const handleMessage = (event) => {
-      console.log('收到消息:', event.data, 'from:', event.origin);
 
-      // 放宽来源验证，包含所有可能的域名
+    // 用户协议弹窗状态
-      const allowedOrigins = [
+    const { isOpen: isUserAgreementModalOpen, onOpen: onUserAgreementModalOpen, onClose: onUserAgreementModalClose } = useDisclosure();
-        window.location.origin,
-        'https://valuefrontier.cn',
-        'http://localhost:3000', // 开发环境
-        'http://127.0.0.1:3000'  // 本地开发
-      ];
 
-      if (!allowedOrigins.includes(event.origin)) {
+    // 验证码登录状态 是否开启验证码
-        console.warn('消息来源不受信任:', event.origin);
+    const [useVerificationCode, setUseVerificationCode] = useState(false);
-        // 但仍然处理，因为可能是跨域问题
-      }
 
-      if (event.data && event.data.type === 'wechat_auth_success') {
+    // 切换注册方式
-        console.log('收到微信授权成功消息');
+    const handleChangeMethod = () => {
-        // 授权成功，立即检查状态
+        setUseVerificationCode(!useVerificationCode);
-        if (wechatSessionId) {
+        // 切换到密码模式时清空验证码
-          console.log('开始检查微信状态, sessionId:', wechatSessionId);
+        if (useVerificationCode) {
-          checkWechatStatus();
+            setFormData(prev => ({ ...prev, verificationCode: "" }));
-        } else {
-          console.error('wechatSessionId 为空');
-        }
         }
     };
 
-    window.addEventListener('message', handleMessage);
-
-    return () => {
-      window.removeEventListener('message', handleMessage);
-    };
-  }, [wechatSessionId]);
-
-  // 获取微信授权URL
-  const getWechatQRCode = async () => {
-    try {
-      setIsLoading(true);
-      const response = await axios.get(`${API_BASE_URL}/api/auth/wechat/qrcode`);
-      setWechatAuthUrl(response.data.auth_url);
-      setWechatSessionId(response.data.session_id);
-      setWechatStatus("waiting");
-
-      // 开始轮询检查扫码状态
-      startWechatStatusCheck(response.data.session_id);
-    } catch (error) {
-      toast({
-        title: "获取授权失败",
-        description: error.response?.data?.error || "请稍后重试",
-        status: "error",
-        duration: 3000,
-      });
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  // 立即检查微信状态（用于授权成功后）
-  const checkWechatStatus = async () => {
-    try {
-      console.log('检查微信状态, sessionId:', wechatSessionId);
-
-      const response = await axios.post(`${API_BASE_URL}/api/auth/wechat/check`, {
-        session_id: wechatSessionId
-      });
-
-      const { status, user_info } = response.data;
-      console.log('微信状态检查结果:', { status, user_info });
-      setWechatStatus(status);
-
-      if (status === "login_success" || status === "register_success") {
-        // 停止轮询
-        if (checkInterval) {
-          clearInterval(checkInterval);
-          setCheckInterval(null);
-        }
-
-        console.log('开始微信登录流程');
-
-        // 调用登录接口获取token
-        try {
-          let loginResult;
-
-          // 如果有 loginWithWechat 方法，使用它
-          if (loginWithWechat) {
-            console.log('使用 AuthContext 登录');
-            loginResult = await loginWithWechat(wechatSessionId);
-          } else {
-            console.log('使用传统登录方式');
-            // 否则使用原来的方式
-            const loginResponse = await axios.post(`${API_BASE_URL}/api/auth/login/wechat`, {
-              session_id: wechatSessionId
-            });
-
-            console.log('登录响应:', loginResponse.data);
-
-            // 保存登录信息（兼容旧方式）
-            if (loginResponse.data.token) {
-              localStorage.setItem('token', loginResponse.data.token);
-            }
-
-            if (loginResponse.data.user) {
-              localStorage.setItem('user', JSON.stringify(loginResponse.data.user));
-            }
-
-            loginResult = { success: true };
-          }
-
-          console.log('登录结果:', loginResult);
-
-          if (loginResult.success) {
-            toast({
-              title: status === "login_success" ? "登录成功" : "注册成功",
-              description: "正在跳转...",
-              status: "success",
-              duration: 2000,
-            });
-
-            // 跳转到首页
-            console.log('准备跳转到 /home');
-            setTimeout(() => {
-              navigate("/home"); // 修改为跳转到 /home
-            }, 1000);
-          } else {
-            throw new Error('登录失败');
-          }
-        } catch (loginError) {
-          console.error('登录失败:', loginError);
-          toast({
-            title: "登录失败",
-            description: loginError.response?.data?.error || loginError.message || "请重试",
-            status: "error",
-            duration: 3000,
-          });
-        }
-      }
-    } catch (error) {
-      console.error("检查微信状态失败:", error);
-    }
-  };
-
-  // 增加备用的状态检查机制
-  useEffect(() => {
-    if (registerType === 0 && wechatSessionId) {
-      // 每隔3秒检查一次状态（备用机制）
-      const backupCheck = setInterval(() => {
-        if (wechatStatus === "waiting") {
-          console.log('备用检查机制：检查微信状态');
-          checkWechatStatus();
-        }
-      }, 3000);
-
-      return () => clearInterval(backupCheck);
-    }
-  }, [registerType, wechatSessionId, wechatStatus]);
-  // 开始检查微信扫码状态
-  const startWechatStatusCheck = (sessionId) => {
-    // 清除之前的轮询
-    if (checkInterval) {
-      clearInterval(checkInterval);
-    }
-
-    const interval = setInterval(async () => {
-      try {
-        const response = await axios.post(`${API_BASE_URL}/api/auth/wechat/check`, {
-          session_id: sessionId
-        });
-
-        const { status, user_info } = response.data;
-        setWechatStatus(status);
-
-        if (status === "login_success" || status === "register_success") {
-          // 成功，停止轮询
-          clearInterval(interval);
-          setCheckInterval(null);
-
-          // 调用登录接口
-          let loginResult;
-
-          if (loginWithWechat) {
-            loginResult = await loginWithWechat(sessionId);
-          } else {
-            const loginResponse = await axios.post(`${API_BASE_URL}/api/auth/login/wechat`, {
-              session_id: sessionId
-            });
-
-            // 保存登录信息
-            if (loginResponse.data.token) {
-              localStorage.setItem('token', loginResponse.data.token);
-            }
-
-            if (loginResponse.data.user) {
-              localStorage.setItem('user', JSON.stringify(loginResponse.data.user));
-            }
-
-            loginResult = { success: true };
-          }
-
-          if (loginResult.success) {
-            toast({
-              title: status === "login_success" ? "登录成功" : "注册成功",
-              description: "正在跳转...",
-              status: "success",
-              duration: 2000,
-            });
-
-            setTimeout(() => {
-              navigate("/home"); // 跳转到首页
-            }, 1000);
-          }
-
-        } else if (status === "expired") {
-          clearInterval(interval);
-          setCheckInterval(null);
-          setWechatStatus("expired");
-          toast({
-            title: "授权已过期",
-            description: "请重新获取授权",
-            status: "warning",
-            duration: 3000,
-          });
-        }
-      } catch (error) {
-        console.error("检查微信状态失败:", error);
-        // 继续轮询，不中断
-      }
-    }, 2000); // 每2秒检查一次
-
-    setCheckInterval(interval);
-
-    // 5分钟后停止轮询
-    setTimeout(() => {
-      if (interval) {
-        clearInterval(interval);
-        setCheckInterval(null);
-        if (wechatStatus === "waiting") {
-          setWechatStatus("expired");
-        }
-      }
-    }, 300000);
-  };
-
-  // 组件卸载时清除轮询
-  useEffect(() => {
-    return () => {
-      if (checkInterval) {
-        clearInterval(checkInterval);
-      }
-    };
-  }, [checkInterval]);
-
-  // 初始化时如果选择了微信登录，获取授权URL
-  useEffect(() => {
-    if (registerType === 0 && agreeToTerms) {
-      getWechatQRCode();
-    }
-  }, [registerType, agreeToTerms]);
-
     // 发送验证码
     const sendVerificationCode = async () => {
         const contact = formData.phone;
@@ -402,32 +131,27 @@ export default function SignUpPage() {
     const validateForm = () => {
         const newErrors = {};
 
-    if (!formData.username || formData.username.length < 3) {
+        // 手机号验证（两种方式都需要）
-      newErrors.username = "用户名至少3个字符";
-    }
-
-    if (!/^[a-zA-Z0-9_]{3,20}$/.test(formData.username)) {
-      newErrors.username = "用户名只能包含字母、数字和下划线，3-20个字符";
-    }
-
-    if (!formData.password || formData.password.length < 6) {
-      newErrors.password = "密码至少6个字符";
-    }
-
-    if (formData.password !== formData.confirmPassword) {
-      newErrors.confirmPassword = "两次密码不一致";
-    }
-
-    if (registerType === 1) {
         if (!formData.phone) {
             newErrors.phone = "请输入手机号";
         } else if (!/^1[3-9]\d{9}$/.test(formData.phone)) {
             newErrors.phone = "请输入正确的手机号";
         }
 
+        if (useVerificationCode) {
+            // 验证码注册方式：只验证手机号和验证码
             if (!formData.verificationCode) {
                 newErrors.verificationCode = "请输入验证码";
             }
+        } else {
+            // 密码注册方式：验证用户名、密码和确认密码
+            if (!formData.password || formData.password.length < 6) {
+                newErrors.password = "密码至少6个字符";
+            }
+
+            if (formData.password !== formData.confirmPassword) {
+                newErrors.confirmPassword = "两次密码不一致";
+            }
         }
 
         setErrors(newErrors);
@@ -438,17 +162,6 @@ export default function SignUpPage() {
     const handleSubmit = async (e) => {
         e.preventDefault();
 
-    if (!agreeToTerms) {
-      toast({
-        title: "请先同意协议",
-        description: "请勾选同意用户协议和隐私政策后再注册",
-        status: "warning",
-        duration: 3000,
-        isClosable: true,
-      });
-      return;
-    }
-
         if (!validateForm()) {
             return;
         }
@@ -456,13 +169,24 @@ export default function SignUpPage() {
         setIsLoading(true);
 
         try {
-      const endpoint = "/api/auth/register/phone";
+            let endpoint, data;
-      const data = {
+
+            if (useVerificationCode) {
+                // 验证码注册：只发送手机号和验证码
+                endpoint = "/api/auth/register/phone-code";
+                data = {
+                    phone: formData.phone,
+                    code: formData.verificationCode
+                };
+            } else {
+                // 密码注册：发送手机号、用户名和密码
+                endpoint = "/api/auth/register/phone";
+                data = {
                     phone: formData.phone,
-        code: formData.verificationCode,
                     username: formData.username,
                     password: formData.password
                 };
+            }
 
             await axios.post(`${API_BASE_URL}${endpoint}`, data);
 
@@ -496,74 +220,10 @@ export default function SignUpPage() {
         }
     };
 
-  // 切换注册方式时的处理
-  const handleRegisterTypeChange = (newType) => {
-    if (checkInterval) {
-      clearInterval(checkInterval);
-      setCheckInterval(null);
-    }
-
-    setRegisterType(newType);
-    setErrors({});
-    setAgreeToTerms(false); // 切换注册方式时重置协议同意状态
-    setFormData({
-      username: "",
-      email: "",
-      phone: "",
-      password: "",
-      confirmPassword: "",
-      verificationCode: ""
-    });
-
-    if (newType === 0) {
-      setWechatStatus("waiting");
-      setWechatAuthUrl("");
-      setWechatSessionId("");
-      // 不自动获取二维码，等用户同意协议后再获取
-    }
-  };
-
-  const getWechatStatusText = () => {
-    switch (wechatStatus) {
-      case "waiting": return "请使用微信扫描二维码";
-      case "login_success": return "✓ 登录成功，正在跳转...";
-      case "register_success": return "✓ 注册成功，正在跳转...";
-      case "expired": return "授权已过期";
-      default: return "请使用微信扫描二维码";
-    }
-  };
-
-  const getWechatStatusColor = () => {
-    switch (wechatStatus) {
-      case "login_success":
-      case "register_success": return "green.600";
-      case "expired": return "red.600";
-      default: return "gray.600";
-    }
-  };
-
     // 公用的用户名和密码输入框组件
     const commonAuthFields = (
-      <>
+        <VStack spacing={4} width="100%">
-        <FormControl isRequired isInvalid={!!errors.username}>
-          <FormLabel fontSize="sm">用户名</FormLabel>
-          <InputGroup>
-            <InputRightElement pointerEvents="none">
-              <Icon as={FaUser} color="gray.400" />
-            </InputRightElement>
-            <Input
-                name="username"
-                value={formData.username}
-                onChange={handleInputChange}
-                placeholder="设置用户名（3-20个字符）"
-                pr="2.5rem"
-            />
-          </InputGroup>
-          <FormErrorMessage>{errors.username}</FormErrorMessage>
-        </FormControl>
-
             <FormControl isRequired isInvalid={!!errors.password}>
-          <FormLabel fontSize="sm">密码</FormLabel>
                 <InputGroup>
                     <Input
                         name="password"
@@ -587,7 +247,6 @@ export default function SignUpPage() {
             </FormControl>
 
             <FormControl isRequired isInvalid={!!errors.confirmPassword}>
-          <FormLabel fontSize="sm">确认密码</FormLabel>
                 <Input
                     name="confirmPassword"
                     type="password"
@@ -597,295 +256,137 @@ export default function SignUpPage() {
                 />
                 <FormErrorMessage>{errors.confirmPassword}</FormErrorMessage>
             </FormControl>
-      </>
+        </VStack>
     );
 
     return (
         <Flex minH="100vh" position="relative" overflow="hidden">
             {/* 背景 */}
-        <Box
+            <AuthBackground />
-            position="absolute" top={0} left={0} right={0} bottom={0} zIndex={0}
-            background={`linear-gradient(45deg, rgba(139, 69, 19, 0.9) 0%, rgba(160, 82, 45, 0.8) 15%, rgba(205, 133, 63, 0.7) 30%, rgba(222, 184, 135, 0.8) 45%, rgba(245, 222, 179, 0.6) 60%, rgba(255, 228, 196, 0.7) 75%, rgba(139, 69, 19, 0.8) 100%)`}
-            _before={{ content: '""', position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, background: `conic-gradient(from 0deg at 30% 20%, rgba(255, 140, 0, 0.6) 0deg, rgba(255, 69, 0, 0.4) 60deg, rgba(139, 69, 19, 0.5) 120deg, rgba(160, 82, 45, 0.6) 180deg, rgba(205, 133, 63, 0.4) 240deg, rgba(255, 140, 0, 0.5) 300deg, rgba(255, 140, 0, 0.6) 360deg)`, mixBlendMode: 'multiply', animation: 'fluid-rotate 20s linear infinite' }}
-            _after={{ content: '""', position: 'absolute', top: '10%', left: '20%', width: '60%', height: '80%', borderRadius: '50%', background: 'radial-gradient(ellipse at center, rgba(255, 165, 0, 0.3) 0%, rgba(255, 140, 0, 0.2) 50%, transparent 70%)', filter: 'blur(40px)', animation: 'wave-pulse 8s ease-in-out infinite' }}
-            sx={{ '@keyframes fluid-rotate': { '0%': { transform: 'rotate(0deg) scale(1)' }, '50%': { transform: 'rotate(180deg) scale(1.1)' }, '100%': { transform: 'rotate(360deg) scale(1)' } }, '@keyframes wave-pulse': { '0%, 100%': { opacity: 0.4, transform: 'scale(1)' }, '50%': { opacity: 0.8, transform: 'scale(1.2)' } } }}
-        />
 
             {/* 主要内容 */}
             <Flex width="100%" align="center" justify="center" position="relative" zIndex={1} px={6} py={12}>
-          <Box bg="white" borderRadius="2xl" boxShadow="2xl" p={8} width="100%" maxW="480px" backdropFilter="blur(20px)" border="1px solid rgba(255, 255, 255, 0.2)">
+                <Box bg="white" borderRadius="2xl" boxShadow="2xl" p={8} width="100%" maxW="800px" backdropFilter="blur(20px)" border="1px solid rgba(255, 255, 255, 0.2)">
-            <VStack spacing={6} mb={8}>
+                    {/* 头部区域 */}
-              <VStack spacing={2}>
+                    <AuthHeader title="创建账户" subtitle="加入价值前沿，开启投资新征程" />
-                <Heading size="xl" color="gray.800" fontWeight="bold">创建账户</Heading>
+                    {/* 左右布局 */}
-                <Text color="gray.600" fontSize="md">加入价值前沿，开启投资新征程</Text>
+                    <HStack spacing={8} align="stretch">
-              </VStack>
+                        {/* 左侧：手机号注册 - 80% 宽度 */}
-              <Box width="100%">
+                        <Box flex="4">
-                <Tabs index={registerType} onChange={handleRegisterTypeChange} variant="soft-rounded" colorScheme="orange" isFitted>
-                  <TabList bg="gray.100" borderRadius="xl" p={1}>
-                    <Tab borderRadius="lg" _selected={{ bg: "linear-gradient(135deg, #ff8c00 0%, #ff6347 100%)", color: "white", transform: "scale(1.02)" }} transition="all 0.2s">
-                      <Icon as={FaWeixin} mr={2} /><Text fontSize="sm">微信扫码</Text>
-                    </Tab>
-                    <Tab borderRadius="lg" _selected={{ bg: "linear-gradient(135deg, #ff8c00 0%, #ff6347 100%)", color: "white", transform: "scale(1.02)" }} transition="all 0.2s">
-                      <Icon as={FaMobile} mr={2} /><Text fontSize="sm">手机号</Text>
-                    </Tab>
-                  </TabList>
-                </Tabs>
-              </Box>
-            </VStack>
-
                             <form onSubmit={handleSubmit}>
                                 <VStack spacing={4}>
-                {/* 微信注册 */}
+                                    <Heading size="md" color="gray.700" alignSelf="flex-start">
-                {registerType === 0 && (
+                                        注册
-                    <>
+                                    </Heading>
-                      {/* 协议同意勾选框 - 微信注册 */}
-                      <Box width="100%" mb={4}>
-                        <Checkbox
-                            isChecked={agreeToTerms}
-                            onChange={(e) => setAgreeToTerms(e.target.checked)}
-                            colorScheme="orange"
-                            size="sm"
-                        >
-                          <Text fontSize="sm" color="gray.600">
-                            我已阅读并同意{" "}
-                            <ChakraLink 
-                              color="orange.500" 
-                              fontSize="sm" 
-                              onClick={onUserAgreementModalOpen}
-                              textDecoration="underline"
-                              _hover={{ color: "orange.600" }}
-                            >
-                              《用户协议》
-                            </ChakraLink>
-                            {" "}和{" "}
-                            <ChakraLink 
-                              color="orange.500" 
-                              fontSize="sm" 
-                              onClick={onPrivacyModalOpen}
-                              textDecoration="underline"
-                              _hover={{ color: "orange.600" }}
-                            >
-                              《隐私政策》
-                            </ChakraLink>
-                          </Text>
-                        </Checkbox>
-                        {!agreeToTerms && (
-                          <Text fontSize="xs" color="red.500" mt={1} ml={6}>
-                            请先同意用户协议和隐私政策
-                          </Text>
-                        )}
-                      </Box>
-
-                      <Center width="100%" height="420px" bg="gray.50" borderRadius="lg" p={4} mb={4}>
-                        {agreeToTerms ? (
-                          wechatAuthUrl && wechatStatus !== "expired" ? (
-                              <Box position="relative" width="100%" height="100%">
-                                <iframe
-                                    src={wechatAuthUrl}
-                                    width="100%"
-                                    height="100%"
-                                    frameBorder="0"
-                                    scrolling="no"
-                                    style={{ borderRadius: '8px' }}
-                                />
-                                {(wechatStatus === "login_success" || wechatStatus === "register_success") && (
-                                    <Box position="absolute" top={0} left={0} right={0} bottom={0}
-                                         bg="rgba(0,0,0,0.7)" display="flex" alignItems="center"
-                                         justifyContent="center" borderRadius="lg">
-                                      <VStack>
-                                        <Spinner color="white" />
-                                        <Text color="white" fontWeight="bold">
-                                          {wechatStatus === "login_success" ? "正在登录..." : "正在创建账号..."}
-                                        </Text>
-                                      </VStack>
-                                    </Box>
-                                )}
-                              </Box>
-                          ) : wechatStatus === "expired" ? (
-                              <VStack>
-                                <Text color="gray.500" fontWeight="bold" mb={4}>授权已过期</Text>
-                                <Button colorScheme="orange" size="sm" onClick={getWechatQRCode}
-                                        isLoading={isLoading}>重新获取</Button>
-                              </VStack>
-                          ) : (
-                              <VStack>
-                                <Spinner size="xl" color="orange.500" />
-                                <Text color="gray.500" fontSize="sm">加载中...</Text>
-                              </VStack>
-                          )
-                        ) : (
-                          <VStack spacing={4}>
-                            <Icon as={FaWeixin} w={20} h={20} color="gray.400" />
-                            <VStack spacing={2}>
-                              <Text fontSize="lg" fontWeight="bold" color="gray.400">
-                                微信扫码注册
-                              </Text>
-                              <Text fontSize="sm" color="gray.400" textAlign="center">
-                                请先同意用户协议和隐私政策
-                              </Text>
-                            </VStack>
-                            <Button
-                                colorScheme="orange"
-                                variant="outline"
-                                size="lg"
-                                isDisabled
-                                opacity={0.6}
-                            >
-                              同意协议后显示二维码
-                            </Button>
-                          </VStack>
-                        )}
-                      </Center>
-                      <Text textAlign="center" color={getWechatStatusColor()} fontSize="sm"
-                            fontWeight={wechatStatus === "login_success" || wechatStatus === "register_success" ? "bold" : "normal"}>
-                        {agreeToTerms ? getWechatStatusText() : "请先同意用户协议和隐私政策"}
-                      </Text>
-                      <Text fontSize="xs" color="gray.500" textAlign="center">
-                        {agreeToTerms 
-                          ? "扫码即表示同意创建账号，系统将使用您的微信昵称作为初始用户名"
-                          : "同意协议后即可使用微信快速注册"}
-                      </Text>
-                    </>
-                )}
-
-                {/* 手机号注册 */}
-                {registerType === 1 && (
-                    <>
                                     <FormControl isRequired isInvalid={!!errors.phone}>
-                        <FormLabel fontSize="sm">手机号</FormLabel>
+                                        <Input
-                        <InputGroup>
+                                            name="phone"
-                          <InputRightElement pointerEvents="none"><Icon as={FaMobile} color="gray.400" /></InputRightElement>
+                                            value={formData.phone}
-                          <Input name="phone" value={formData.phone} onChange={handleInputChange} placeholder="请输入11位手机号" pr="2.5rem" />
+                                            onChange={handleInputChange}
-                        </InputGroup>
+                                            placeholder="请输入11位手机号"
+                                            pr="2.5rem"
+                                        />
                                         <FormErrorMessage>{errors.phone}</FormErrorMessage>
                                     </FormControl>
-                      <FormControl isRequired isInvalid={!!errors.verificationCode}>
+
-                        <FormLabel fontSize="sm">验证码</FormLabel>
+                                    {/* 表单字段区域 */}
-                        <HStack>
+                                    <Box width="100%">
-                          <Input name="verificationCode" value={formData.verificationCode} onChange={handleInputChange} placeholder="请输入6位验证码" />
+                                        {
-                          <Button colorScheme="orange" onClick={sendVerificationCode} isDisabled={countdown > 0 || isLoading} isLoading={isLoading && countdown === 0} minW="120px">
+                                            useVerificationCode ? (
-                            {countdown > 0 ? `${countdown}秒后重试` : "获取验证码"}
+                                                <VStack spacing={4} width="100%">
-                          </Button>
+                                                    <VerificationCodeInput
-                        </HStack>
+                                                        value={formData.verificationCode}
-                        <FormErrorMessage>{errors.verificationCode}</FormErrorMessage>
+                                                        onChange={handleInputChange}
-                      </FormControl>
+                                                        onSendCode={sendVerificationCode}
-                      <Divider my={2} />
+                                                        countdown={countdown}
+                                                        isLoading={isLoading}
+                                                        isSending={isLoading && countdown === 0}
+                                                        error={errors.verificationCode}
+                                                        colorScheme="green"
+                                                    />
+                                                    {/* 隐藏的占位元素，保持与密码模式相同的高度 */}
+                                                    <Box height="40px" width="100%" visibility="hidden" />
+                                                </VStack>
+                                            ) : (
+                                                <>
                                                     {commonAuthFields}
-                      
-                      {/* 协议同意勾选框 - 手机号注册 */}
-                      <Box width="100%" py={3}>
-                        <Checkbox
-                            isChecked={agreeToTerms}
-                            onChange={(e) => setAgreeToTerms(e.target.checked)}
-                            colorScheme="orange"
-                            size="sm"
-                        >
-                          <Text fontSize="sm" color="gray.600">
-                            我已阅读并同意{" "}
-                            <ChakraLink 
-                              color="orange.500" 
-                              fontSize="sm" 
-                              onClick={onUserAgreementModalOpen}
-                              textDecoration="underline"
-                              _hover={{ color: "orange.600" }}
-                            >
-                              《用户协议》
-                            </ChakraLink>
-                            {" "}和{" "}
-                            <ChakraLink 
-                              color="orange.500" 
-                              fontSize="sm" 
-                              onClick={onPrivacyModalOpen}
-                              textDecoration="underline"
-                              _hover={{ color: "orange.600" }}
-                            >
-                              《隐私政策》
-                            </ChakraLink>
-                          </Text>
-                        </Checkbox>
-                        {!agreeToTerms && (
-                          <Text fontSize="xs" color="red.500" mt={1} ml={6}>
-                            请先同意用户协议和隐私政策
-                          </Text>
-                        )}
-                      </Box>
                                                 </>
-                )}
+                                            )
+                                        }
+                                    </Box>
 
+                                    <AuthFooter
+                                        linkText="已有账号？"
+                                        linkLabel="去登录"
+                                        linkTo="/auth/sign-in"
+                                        useVerificationCode={useVerificationCode}
+                                        onSwitchMethod={handleChangeMethod}
+                                    />
 
-                {registerType !== 0 && (
                                     <Button
                                         type="submit"
                                         width="100%"
                                         size="lg"
-                        background={agreeToTerms 
+                                        colorScheme="green"
-                          ? "linear-gradient(135deg, #ff8c00 0%, #ff6347 100%)" 
-                          : "gray.300"
-                        }
                                         color="white"
                                         borderRadius="lg"
-                        _hover={agreeToTerms ? { 
+                                        _hover={{
                                             transform: "translateY(-2px)",
                                             boxShadow: "lg"
-                        } : {}}
+                                        }}
-                        _active={agreeToTerms ? { 
+                                        _active={{ transform: "translateY(0)" }}
-                          transform: "translateY(0)" 
-                        } : {}}
                                         isLoading={isLoading}
                                         loadingText="注册中..."
                                         fontWeight="bold"
-                        isDisabled={!agreeToTerms}
+                                        cursor="pointer"
-                        cursor={agreeToTerms ? "pointer" : "not-allowed"}
                                     >
-                      完成注册
+                                        注册
                                     </Button>
-                )}
 
-                <Text fontSize="sm" color="gray.600" textAlign="center">
+                                    {/* 协议同意文本 */}
-                  已有账号？{" "}
+                                    <Text fontSize="sm" color="gray.600" textAlign="center" width="100%">
-                  <ChakraLink as={Link} to="/auth/sign-in" color="orange.500" fontWeight="bold">
+                                        注册登录即表示阅读并同意{" "}
-                    立即登录
+                                        <ChakraLink
+                                            color="blue.500"
+                                            fontSize="sm"
+                                            onClick={onUserAgreementModalOpen}
+                                            textDecoration="underline"
+                                            _hover={{ color: "blue.600" }}
+                                            cursor="pointer"
+                                        >
+                                            《用户协议》
+                                        </ChakraLink>
+                                        {" "}和{" "}
+                                        <ChakraLink
+                                            color="blue.500"
+                                            fontSize="sm"
+                                            onClick={onPrivacyModalOpen}
+                                            textDecoration="underline"
+                                            _hover={{ color: "blue.600" }}
+                                            cursor="pointer"
+                                        >
+                                            《隐私政策》
                                         </ChakraLink>
                                     </Text>
                                 </VStack>
                             </form>
                         </Box>
-        </Flex>
 
-        <Box position="absolute" bottom={8} left="50%" transform="translateX(-50%)" zIndex={1}>
+                        {/* 右侧：微信注册 - 20% 宽度 */}
-          <HStack spacing={6}>
+                        <Box flex="1">
-            <ChakraLink 
+                            <Center width="100%" bg="gray.50" borderRadius="lg" p={8}>
-              color="white" 
+                                <WechatRegister />
-              fontSize="sm" 
+                            </Center>
-              opacity={0.8} 
+                        </Box>
-              _hover={{ opacity: 1 }}
-              onClick={onUserAgreementModalOpen}
-            >
-              用户协议
-            </ChakraLink>
-            <ChakraLink 
-              color="white" 
-              fontSize="sm" 
-              opacity={0.8} 
-              _hover={{ opacity: 1 }}
-              onClick={onPrivacyModalOpen}
-            >
-              隐私政策
-            </ChakraLink>
                     </HStack>
                 </Box>
+            </Flex>
 
             {/* 隐私政策弹窗 */}
-        <PrivacyPolicyModal 
+            <PrivacyPolicyModal isOpen={isPrivacyModalOpen} onClose={onPrivacyModalClose} />
-          isOpen={isPrivacyModalOpen} 
-          onClose={onPrivacyModalClose} 
-        />
 
             {/* 用户协议弹窗 */}
-        <UserAgreementModal 
+            <UserAgreementModal isOpen={isUserAgreementModalOpen} onClose={onUserAgreementModalClose} />
-          isOpen={isUserAgreementModalOpen} 
-          onClose={onUserAgreementModalClose} 
-        />
         </Flex>
     );
 }