Merge branch '1028_bugfix' into feature_2025/1028_bugfix

* 1028_bugfix:
  手机号格式适配-前端修改
  添加微信扫码的几种其他状态
  整合register端口进入login端口

app.py

@@ -1906,7 +1906,7 @@ def send_verification_code():
 
 @app.route('/api/auth/login-with-code', methods=['POST'])
 def login_with_verification_code():
-    """使用验证码登录"""
+    """使用验证码登录/注册（自动注册）"""
     try:
         data = request.get_json()
         credential = data.get('credential')  # 手机号或邮箱
@@ -1956,8 +1956,37 @@ def login_with_verification_code():
 
         if login_type == 'phone':
             user = User.query.filter_by(phone=credential).first()
+            if not user:
+                # 自动注册新用户
+                is_new_user = True
+                # 生成唯一用户名
+                base_username = f"user_{credential}"
+                username = base_username
+                counter = 1
+                while User.query.filter_by(username=username).first():
+                    username = f"{base_username}_{counter}"
+                    counter += 1
+
+                # 创建新用户
+                user = User(username=username, phone=credential)
+                user.phone_confirmed = True
+                user.email = f"{username}@valuefrontier.temp"  # 临时邮箱
+                db.session.add(user)
+                db.session.commit()
+
         elif login_type == 'email':
             user = User.query.filter_by(email=credential).first()
+            if not user:
+                # 自动注册新用户
+                is_new_user = True
+                # 从邮箱生成用户名
+                email_prefix = credential.split('@')[0]
+                base_username = f"user_{email_prefix}"
+                username = base_username
+                counter = 1
+                while User.query.filter_by(username=username).first():
+                    username = f"{base_username}_{counter}"
+                    counter += 1
 
         # 如果用户不存在，自动创建新用户
         if not user:
@@ -2092,8 +2121,8 @@ def register():
 
     except Exception as e:
         db.session.rollback()
-        print(f"注册失败: {e}")
+        print(f"验证码登录/注册错误: {e}")
-        return jsonify({'success': False, 'error': '注册失败，请重试'}), 500
+        return jsonify({'success': False, 'error': '登录失败'}), 500
 
 
 def send_sms_code(phone, code, template_id):
@@ -2932,61 +2961,6 @@ def login_with_wechat():
         }), 500
 
 
-@app.route('/api/auth/register/wechat', methods=['POST'])
-def register_with_wechat():
-    """微信注册（保留用于特殊情况）"""
-    data = request.get_json()
-    session_id = data.get('session_id')
-    username = data.get('username')
-    password = data.get('password')
-
-    if not all([session_id, username, password]):
-        return jsonify({'error': '所有字段都是必填的'}), 400
-
-    # 验证session
-    session = wechat_qr_sessions.get(session_id)
-    if not session:
-        return jsonify({'error': '微信验证失败或状态无效'}), 400
-
-    if User.query.filter_by(username=username).first():
-        return jsonify({'error': '用户名已存在'}), 400
-
-    # 检查微信OpenID是否已被其他用户使用
-    wechat_openid = session.get('wechat_openid')
-    wechat_unionid = session.get('wechat_unionid')
-
-    if wechat_unionid and User.query.filter_by(wechat_union_id=wechat_unionid).first():
-        return jsonify({'error': '该微信号已被其他用户绑定'}), 400
-    if User.query.filter_by(wechat_open_id=wechat_openid).first():
-        return jsonify({'error': '该微信号已被其他用户绑定'}), 400
-
-    # 创建用户
-    try:
-        wechat_info = session['user_info']
-        user = User(username=username)
-        user.set_password(password)
-        # 使用清理后的昵称
-        user.nickname = user._sanitize_nickname(wechat_info.get('nickname', username))
-        user.avatar_url = wechat_info.get('avatar_url')
-        user.wechat_open_id = wechat_openid
-        user.wechat_union_id = wechat_unionid
-
-        db.session.add(user)
-        db.session.commit()
-
-        # 清除session
-        del wechat_qr_sessions[session_id]
-
-        return jsonify({
-            'message': '注册成功',
-            'user': user.to_dict()
-        }), 201
-    except Exception as e:
-        db.session.rollback()
-        print(f"WeChat register error: {e}")
-        return jsonify({'error': '注册失败，请重试'}), 500
-
-
 @app.route('/api/account/wechat/unbind', methods=['POST'])
 def unbind_wechat_account():
     """解绑当前登录用户的微信"""

src/components/Auth/WechatRegister.js

@@ -15,6 +15,8 @@ import { FaQrcode } from "react-icons/fa";
 import { FiAlertCircle } from "react-icons/fi";
 import { useNavigate } from "react-router-dom";
 import { authService, WECHAT_STATUS, STATUS_MESSAGES } from "../../services/authService";
+import { useAuthModal } from "../../contexts/AuthModalContext";
+import { useAuth } from "../../contexts/AuthContext";
 import { logger } from "../../utils/logger";
 
 // 配置常量
@@ -47,6 +49,10 @@ const getStatusText = (status) => {
 };
 
 export default function WechatRegister() {
+    // 获取关闭弹窗方法
+    const { closeModal } = useAuthModal();
+    const { refreshSession } = useAuth();
+
     // 状态管理
     const [wechatAuthUrl, setWechatAuthUrl] = useState("");
     const [wechatSessionId, setWechatSessionId] = useState("");
@@ -60,6 +66,7 @@ export default function WechatRegister() {
     const timeoutRef = useRef(null);
     const isMountedRef = useRef(true); // 追踪组件挂载状态
     const containerRef = useRef(null); // 容器DOM引用
+    const sessionIdRef = useRef(null); // 存储最新的 sessionId，避免闭包陷阱
 
     const navigate = useNavigate();
     const toast = useToast();
@@ -92,6 +99,7 @@ export default function WechatRegister() {
 
     /**
      * 清理所有定时器
+     * 注意：不清理 sessionIdRef，因为 startPolling 时也会调用此函数
      */
     const clearTimers = useCallback(() => {
         if (pollIntervalRef.current) {
@@ -126,14 +134,14 @@ export default function WechatRegister() {
                 }
 
                 showSuccess(
-                    status === WECHAT_STATUS.LOGIN_SUCCESS ? "登录成功" : "注册成功",
+                    status === WECHAT_STATUS.LOGIN_SUCCESS ? "登录成功" : "欢迎回来！"
-                    "正在跳转..."
                 );
 
-                // 延迟跳转，让用户看到成功提示
+                // 刷新 AuthContext 状态
-                setTimeout(() => {
+                await refreshSession();
-                    navigate("/home");
+
-                }, 1000);
+                // 关闭认证弹窗，留在当前页面
+                closeModal();
             } else {
                 throw new Error(response?.error || '登录失败');
             }
@@ -141,17 +149,27 @@ export default function WechatRegister() {
             logger.error('WechatRegister', 'handleLoginSuccess', error, { sessionId });
             showError("登录失败", error.message || "请重试");
         }
-    }, [navigate, showSuccess, showError]);
+    }, [showSuccess, showError, closeModal, refreshSession]);
 
     /**
      * 检查微信扫码状态
+     * 使用 sessionIdRef.current 避免闭包陷阱
      */
     const checkWechatStatus = useCallback(async () => {
-        // 检查组件是否已卸载
+        // 检查组件是否已卸载，使用 ref 获取最新的 sessionId
-        if (!isMountedRef.current || !wechatSessionId) return;
+        if (!isMountedRef.current || !sessionIdRef.current) {
+            logger.debug('WechatRegister', 'checkWechatStatus 跳过', {
+                isMounted: isMountedRef.current,
+                hasSessionId: !!sessionIdRef.current
+            });
+            return;
+        }
+
+        const currentSessionId = sessionIdRef.current;
+        logger.debug('WechatRegister', '检查微信状态', { sessionId: currentSessionId });
 
         try {
-            const response = await authService.checkWechatStatus(wechatSessionId);
+            const response = await authService.checkWechatStatus(currentSessionId);
 
             // 安全检查：确保 response 存在且包含 status
             if (!response || typeof response.status === 'undefined') {
@@ -160,6 +178,7 @@ export default function WechatRegister() {
             }
 
             const { status } = response;
+            logger.debug('WechatRegister', '微信状态', { status });
 
             // 组件卸载后不再更新状态
             if (!isMountedRef.current) return;
@@ -169,23 +188,14 @@ export default function WechatRegister() {
             // 处理成功状态
             if (status === WECHAT_STATUS.LOGIN_SUCCESS || status === WECHAT_STATUS.REGISTER_SUCCESS) {
                 clearTimers(); // 停止轮询
+                sessionIdRef.current = null; // 清理 sessionId
 
-                // 显示"扫码成功，登录中"提示
+                await handleLoginSuccess(currentSessionId, status);
-                if (isMountedRef.current) {
-                    toast({
-                        title: "扫码成功",
-                        description: "正在登录，请稍候...",
-                        status: "info",
-                        duration: 2000,
-                        isClosable: false,
-                    });
-                }
-
-                await handleLoginSuccess(wechatSessionId, status);
             }
             // 处理过期状态
             else if (status === WECHAT_STATUS.EXPIRED) {
                 clearTimers();
+                sessionIdRef.current = null; // 清理 sessionId
                 if (isMountedRef.current) {
                     toast({
                         title: "授权已过期",
@@ -224,11 +234,12 @@ export default function WechatRegister() {
                 }
             }
         } catch (error) {
-            logger.error('WechatRegister', 'checkWechatStatus', error, { sessionId: wechatSessionId });
+            logger.error('WechatRegister', 'checkWechatStatus', error, { sessionId: currentSessionId });
             // 轮询过程中的错误不显示给用户，避免频繁提示
             // 但如果错误持续发生，停止轮询避免无限重试
             if (error.message.includes('网络连接失败')) {
                 clearTimers();
+                sessionIdRef.current = null; // 清理 sessionId
                 if (isMountedRef.current) {
                     toast({
                         title: "网络连接失败",
@@ -240,12 +251,17 @@ export default function WechatRegister() {
                 }
             }
         }
-    }, [wechatSessionId, handleLoginSuccess, clearTimers, toast]);
+    }, [handleLoginSuccess, clearTimers, toast]);
 
     /**
      * 启动轮询
      */
     const startPolling = useCallback(() => {
+        logger.debug('WechatRegister', '启动轮询', {
+            sessionId: sessionIdRef.current,
+            interval: POLL_INTERVAL
+        });
+
         // 清理旧的定时器
         clearTimers();
 
@@ -256,7 +272,9 @@ export default function WechatRegister() {
 
         // 设置超时
         timeoutRef.current = setTimeout(() => {
+            logger.debug('WechatRegister', '二维码超时');
             clearTimers();
+            sessionIdRef.current = null; // 清理 sessionId
             setWechatStatus(WECHAT_STATUS.EXPIRED);
         }, QR_CODE_TIMEOUT);
     }, [checkWechatStatus, clearTimers]);
@@ -283,10 +301,17 @@ export default function WechatRegister() {
                 throw new Error(response.message || '获取二维码失败');
             }
 
+            // 同时更新 ref 和 state，确保轮询能立即读取到最新值
+            sessionIdRef.current = response.data.session_id;
             setWechatAuthUrl(response.data.auth_url);
             setWechatSessionId(response.data.session_id);
             setWechatStatus(WECHAT_STATUS.WAITING);
 
+            logger.debug('WechatRegister', '获取二维码成功', {
+                sessionId: response.data.session_id,
+                authUrl: response.data.auth_url
+            });
+
             // 启动轮询检查扫码状态
             startPolling();
         } catch (error) {
@@ -322,43 +347,10 @@ export default function WechatRegister() {
         return () => {
             isMountedRef.current = false;
             clearTimers();
+            sessionIdRef.current = null; // 清理 sessionId
         };
     }, [clearTimers]);
 
-    /**
-     * 备用轮询机制 - 防止丢失状态
-     * 每3秒检查一次，仅在获取到二维码URL且状态为waiting时执行
-     */
-    useEffect(() => {
-        // 只在有auth_url、session_id且状态为waiting时启动备用轮询
-        if (wechatAuthUrl && wechatSessionId && wechatStatus === WECHAT_STATUS.WAITING) {
-            logger.debug('WechatRegister', '备用轮询：启动备用轮询机制');
-
-            backupPollIntervalRef.current = setInterval(() => {
-                try {
-                    if (wechatStatus === WECHAT_STATUS.WAITING && isMountedRef.current) {
-                        logger.debug('WechatRegister', '备用轮询：检查微信状态');
-                        // 添加 .catch() 静默处理异步错误，防止被 ErrorBoundary 捕获
-                        checkWechatStatus().catch(error => {
-                            logger.warn('WechatRegister', '备用轮询检查失败（静默处理）', { error: error.message });
-                        });
-                    }
-                } catch (error) {
-                    // 捕获所有同步错误，防止被 ErrorBoundary 捕获
-                    logger.warn('WechatRegister', '备用轮询执行出错（静默处理）', { error: error.message });
-                }
-            }, BACKUP_POLL_INTERVAL);
-        }
-
-        // 清理备用轮询
-        return () => {
-            if (backupPollIntervalRef.current) {
-                clearInterval(backupPollIntervalRef.current);
-                backupPollIntervalRef.current = null;
-            }
-        };
-    }, [wechatAuthUrl, wechatSessionId, wechatStatus, checkWechatStatus]);
-
     /**
      * 测量容器尺寸并计算缩放比例
      */
@@ -426,7 +418,7 @@ export default function WechatRegister() {
                 textAlign="center"
                 mb={3}                     // 12px底部间距
             >
-                微信扫码
+                微信登陆
             </Heading>
 
             {/* ========== 二维码区域 ========== */}
@@ -443,19 +435,26 @@ export default function WechatRegister() {
                 bg="gray.50"
                 boxShadow="sm"             // ✅ 添加轻微阴影
             >
-                {wechatStatus === WECHAT_STATUS.WAITING ? (
+                {wechatStatus !== WECHAT_STATUS.NONE ? (
                     /* 已获取二维码：显示iframe */
                     <iframe
                         src={wechatAuthUrl}
                         title="微信扫码登录"
                         width="300"
                         height="350"
+                        scrolling="no"  // ✅ 新增:禁止滚动         
                         style={{
                             border: 'none',
-                            transform: 'scale(0.77) translateY(-20px)',  // ✅ 裁剪顶部logo
+                            transform: 'scale(0.77) translateY(-35px)',  // ✅ 裁剪顶部logo
                             transformOrigin: 'top left',
-                            marginLeft: '-5px'
+                            marginLeft: '-5px',
+                            pointerEvents: 'auto',  // 允许点击                                                                                                     │ │
+                            overflow: 'hidden',      // 尝试隐藏滚动条（可能不起作用）    
                         }}
+                        // 使用 onWheel 事件阻止滚动                                                                                                                │ │
+                        onWheel={(e) => e.preventDefault()}  // ✅ 在父容器上阻止滚动
+                        onTouchMove={(e) => e.preventDefault()}  // ✅ 移动端也阻止
+                        
                     />
                 ) : (
                     /* 未获取：显示占位符 */

src/contexts/AuthContext.js

@@ -212,59 +212,6 @@ export const AuthProvider = ({ children }) => {
     }
   };
 
-  // 注册方法
-  const register = async (username, email, password) => {
-    try {
-      setIsLoading(true);
-
-      const formData = new URLSearchParams();
-      formData.append('username', username);
-      formData.append('email', email);
-      formData.append('password', password);
-
-      const response = await fetch(`/api/auth/register`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/x-www-form-urlencoded',
-        },
-        credentials: 'include',
-        body: formData
-      });
-
-      const data = await response.json();
-
-      if (!response.ok || !data.success) {
-        throw new Error(data.error || '注册失败');
-      }
-
-      // 注册成功后自动登录
-      setUser(data.user);
-      setIsAuthenticated(true);
-
-      toast({
-        title: "注册成功",
-        description: "欢迎加入价值前沿！",
-        status: "success",
-        duration: 3000,
-        isClosable: true,
-      });
-
-      // ⚡ 注册成功后显示欢迎引导（延迟2秒）
-      setTimeout(() => {
-        showWelcomeGuide();
-      }, 2000);
-
-      return { success: true };
-
-    } catch (error) {
-      logger.error('AuthContext', 'register', error);
-
-      // ❌ 移除错误 toast，静默失败
-      return { success: false, error: error.message };
-    } finally{
-      setIsLoading(false);
-    }
-  };
 
   // 手机号注册
   const registerWithPhone = async (phone, code, username, password) => {
@@ -475,7 +422,6 @@ export const AuthProvider = ({ children }) => {
     isLoading,
     updateUser,
     login,
-    register,
     registerWithPhone,
     registerWithEmail,
     sendSmsCode,

src/mocks/handlers/auth.js

@@ -136,7 +136,9 @@ export const authHandlers = [
         });
 
         // 模拟微信授权 URL（实际是微信的 URL）
-        const authUrl = `https://open.weixin.qq.com/connect/qrconnect?appid=mock&redirect_uri=&response_type=code&scope=snsapi_login&state=${sessionId}#wechat_redirect`;
+        // 使用真实的微信 AppID 和真实的授权回调地址（必须与微信开放平台配置的域名一致）
+        const mockRedirectUri = encodeURIComponent('http://valuefrontier.cn/api/auth/wechat/callback');
+        const authUrl = `https://open.weixin.qq.com/connect/qrconnect?appid=wxa8d74c47041b5f87&redirect_uri=${mockRedirectUri}&response_type=code&scope=snsapi_login&state=${sessionId}#wechat_redirect`;
 
         console.log('[Mock] 生成微信二维码:', { sessionId, authUrl });
 
@@ -147,16 +149,16 @@ export const authHandlers = [
                 session.status = 'scanned';
                 console.log(`[Mock] 模拟用户扫码: ${sessionId}`);
 
-                // 再过2秒自动确认登录
+                // 再过5秒自动确认登录（延长时间让用户看到 scanned 状态）
                 setTimeout(() => {
                     const session2 = mockWechatSessions.get(sessionId);
                     if (session2 && session2.status === 'scanned') {
-                        session2.status = 'confirmed';
+                        session2.status = 'authorized';  // ✅ 使用 'authorized' 状态，与后端保持一致
                         session2.user = {
                             id: 999,
                             nickname: '微信用户',
                             wechat_openid: 'mock_openid_' + sessionId,
-                            avatar_url: 'https://i.pravatar.cc/150?img=99',
+                            avatar_url: 'https://ui-avatars.com/api/?name=微信用户&size=150&background=4299e1&color=fff',
                             phone: null,
                             email: null,
                             has_wechat: true,
@@ -168,6 +170,7 @@ export const authHandlers = [
                             is_subscription_active: true,
                             subscription_days_left: 0
                         };
+                        session2.user_info = { user_id: session2.user.id };  // ✅ 添加 user_info 字段
                         console.log(`[Mock] 模拟用户确认登录: ${sessionId}`, session2.user);
                     }
                 }, 2000);
@@ -185,7 +188,7 @@ export const authHandlers = [
     }),
 
     // 4. 检查微信扫码状态
-    http.post('/api/auth/wechat/check-status', async ({ request }) => {
+    http.post('/api/auth/wechat/check', async ({ request }) => {
         await delay(200); // 轮询请求，延迟短一些
 
         const body = await request.json();
@@ -209,18 +212,16 @@ export const authHandlers = [
 
         console.log('[Mock] 检查微信状态:', { session_id, status: session.status });
 
+        // ✅ 返回与后端真实 API 一致的扁平化数据结构
         return HttpResponse.json({
-            code: 0,
-            message: '成功',
-            data: {
             status: session.status,
-                user: session.user
+            user_info: session.user_info,
-            }
+            expires_in: Math.floor((session.createdAt + 5 * 60 * 1000 - Date.now()) / 1000)
         });
     }),
 
     // 5. 微信登录确认
-    http.post('/api/auth/wechat/login', async ({ request }) => {
+    http.post('/api/auth/login/wechat', async ({ request }) => {
         await delay(NETWORK_DELAY);
 
         const body = await request.json();
@@ -228,7 +229,7 @@ export const authHandlers = [
 
         const session = mockWechatSessions.get(session_id);
 
-        if (!session || session.status !== 'confirmed') {
+        if (!session || session.status !== 'authorized') {  // ✅ 使用 'authorized' 状态，与前端保持一致
             return HttpResponse.json({
                 success: false,
                 error: '微信登录未确认或已过期'
@@ -386,12 +387,12 @@ if (process.env.NODE_ENV === 'development' || process.env.REACT_APP_ENABLE_MOCK
         setTimeout(() => {
             const session2 = mockWechatSessions.get(targetSessionId);
             if (session2 && session2.status === 'scanned') {
-                session2.status = 'confirmed';
+                session2.status = 'authorized';  // ✅ 使用 'authorized' 状态，与自动扫码流程保持一致
                 session2.user = {
                     id: 999,
                     nickname: '微信测试用户',
                     wechat_openid: 'mock_openid_' + targetSessionId,
-                    avatar_url: 'https://i.pravatar.cc/150?img=99',
+                    avatar_url: 'https://ui-avatars.com/api/?name=微信测试用户&size=150&background=4299e1&color=fff',
                     phone: null,
                     email: null,
                     has_wechat: true,
@@ -402,6 +403,7 @@ if (process.env.NODE_ENV === 'development' || process.env.REACT_APP_ENABLE_MOCK
                     is_subscription_active: true,
                     subscription_days_left: 0
                 };
+                session2.user_info = { user_id: session2.user.id };  // ✅ 添加 user_info 字段
                 console.log(`[Mock API] ✅ 模拟确认登录: ${targetSessionId}`, session2.user);
             }
         }, 1000);

src/services/authService.js

@@ -144,8 +144,8 @@ export const WECHAT_STATUS = {
     WAITING: 'waiting',
     SCANNED: 'scanned',
     AUTHORIZED: 'authorized',
-    LOGIN_SUCCESS: 'login_success',
+    LOGIN_SUCCESS: 'authorized',        // ✅ 与后端保持一致，统一使用 'authorized'
-    REGISTER_SUCCESS: 'register_success',
+    REGISTER_SUCCESS: 'authorized',     // ✅ 与后端保持一致，统一使用 'authorized'
     EXPIRED: 'expired',
     AUTH_DENIED: 'auth_denied',      // 用户拒绝授权
     AUTH_FAILED: 'auth_failed',      // 授权失败
@@ -155,7 +155,7 @@ export const WECHAT_STATUS = {
  * 状态提示信息映射
  */
 export const STATUS_MESSAGES = {
-    [WECHAT_STATUS.WAITING]: '请使用微信扫码',
+    [WECHAT_STATUS.WAITING]: '使用微信扫一扫登陆',
     [WECHAT_STATUS.SCANNED]: '扫码成功，请在手机上确认',
     [WECHAT_STATUS.AUTHORIZED]: '授权成功，正在登录...',
     [WECHAT_STATUS.EXPIRED]: '二维码已过期',

src/views/Home/HomePage.js

@@ -34,7 +34,6 @@ export default function HomePage() {
   const heroTextSize = useBreakpointValue({ base: 'md', md: 'lg', lg: 'xl' });
   const containerPx = useBreakpointValue({ base: 10, md: 10, lg: 10 });
   const showDecorations = useBreakpointValue({ base: false, md: true });
-  const isMobile = useBreakpointValue({ base: true, md: false });
 
   // 保留原有的调试信息
   useEffect(() => {
@@ -238,79 +237,49 @@ export default function HomePage() {
                   }}
                 >
                   <CardBody p={{ base: 6, md: 8 }} position="relative" zIndex={1}>
-                    {isMobile ? (
+                    {/* 响应式布局：移动端纵向，桌面端横向 */}
-                      /* 移动端：垂直布局 */
+                    <Flex
-                      <VStack spacing={4} align="stretch">
+                      direction={{ base: 'column', md: 'row' }}
-                        <HStack spacing={4}>
+                      align={{ base: 'stretch', md: 'center' }}
+                      justify={{ base: 'flex-start', md: 'space-between' }}
+                      gap={{ base: 4, md: 6 }}
+                    >
+                      <Flex align="center" gap={{ base: 4, md: 6 }} flex={1}>
                         <Box
-                            p={3}
+                          p={{ base: 3, md: 4 }}
-                            borderRadius="lg"
+                          borderRadius={{ base: 'lg', md: 'xl' }}
                           bg="yellow.400"
                           color="black"
                         >
-                            <Text fontSize="2xl">{coreFeatures[0].icon}</Text>
+                          <Text fontSize={{ base: '2xl', md: '3xl' }}>{coreFeatures[0].icon}</Text>
                         </Box>
-                          <VStack align="start" spacing={1} flex={1}>
+                        <VStack align="start" spacing={{ base: 1, md: 2 }} flex={1}>
-                            <Heading size="lg" color="white">
+                          <HStack>
+                            <Heading size={{ base: 'lg', md: 'xl' }} color="white">
                               {coreFeatures[0].title}
                             </Heading>
-                            <Badge colorScheme="yellow" variant="solid" fontSize="xs">
+                            <Badge colorScheme="yellow" variant="solid" fontSize={{ base: 'xs', md: 'sm' }}>
                               {coreFeatures[0].badge}
                             </Badge>
-                          </VStack>
                           </HStack>
-                        <Text color="whiteAlpha.800" fontSize="md" lineHeight="tall">
+                          <Text color="whiteAlpha.800" fontSize={{ base: 'md', md: 'lg' }} maxW={{ md: 'md' }} lineHeight="tall">
                             {coreFeatures[0].description}
                           </Text>
+                        </VStack>
+                      </Flex>
                       <Button
                         colorScheme="yellow"
-                          size="md"
+                        size={{ base: 'md', md: 'lg' }}
                         borderRadius="full"
                         fontWeight="bold"
-                          w="100%"
+                        w={{ base: '100%', md: 'auto' }}
                         onClick={() => handleProductClick(coreFeatures[0].url)}
                         minH="44px"
-                        >
+                        flexShrink={0}
-                          进入功能 →
-                        </Button>
-                      </VStack>
-                    ) : (
-                      /* 桌面端：横向布局 */
-                      <Flex align="center" justify="space-between">
-                        <HStack spacing={6}>
-                          <Box
-                            p={4}
-                            borderRadius="xl"
-                            bg="yellow.400"
-                            color="black"
-                          >
-                            <Text fontSize="3xl">{coreFeatures[0].icon}</Text>
-                          </Box>
-                          <VStack align="start" spacing={2}>
-                            <HStack>
-                              <Heading size="xl" color="white">
-                                {coreFeatures[0].title}
-                              </Heading>
-                              <Badge colorScheme="yellow" variant="solid" fontSize="sm">
-                                {coreFeatures[0].badge}
-                              </Badge>
-                            </HStack>
-                            <Text color="whiteAlpha.800" fontSize="lg" maxW="md">
-                              {coreFeatures[0].description}
-                            </Text>
-                          </VStack>
-                        </HStack>
-                        <Button
-                          colorScheme="yellow"
-                          size="lg"
-                          borderRadius="full"
-                          fontWeight="bold"
-                          onClick={() => handleProductClick(coreFeatures[0].url)}
                       >
                         进入功能 →
                       </Button>
                     </Flex>
-                    )}
                   </CardBody>
                 </Card>