更新ios

src/components/Auth/AuthFormContent.js

@@ -2,8 +2,8 @@
 // 统一的认证表单组件 - Ant Design 版本 - 黑金主题 - Tab 切换布局
 import React, { useState, useEffect, useRef } from "react";
 import { useNavigate } from "react-router-dom";
-import { Form, Input, Button, Typography, Modal, message, Tooltip } from 'antd';
+import { Form, Input, Button, Typography, Modal, message, Tooltip, Popover } from 'antd';
-import { LockOutlined, WechatOutlined, MobileOutlined, QrcodeOutlined, UserOutlined, KeyOutlined } from '@ant-design/icons';
+import { LockOutlined, WechatOutlined, MobileOutlined, QrcodeOutlined, UserOutlined, KeyOutlined, CustomerServiceOutlined } from '@ant-design/icons';
 import { useBreakpointValue } from "@chakra-ui/react";
 import { useAuth } from "../../contexts/AuthContext";
 import { useAuthModal } from "../../hooks/useAuthModal";
@@ -15,7 +15,7 @@ import WechatRegister from './WechatRegister';
 import { logger } from '../../utils/logger';
 import { getApiBase } from '../../utils/apiConfig';
 import { useAuthEvents } from '../../hooks/useAuthEvents';
-import { isWeChatBrowser } from '../MiniProgramLauncher/hooks/useWechatEnvironment';
+import { isWeChatBrowser, isMobileDevice } from '../MiniProgramLauncher/hooks/useWechatEnvironment';
 
 const { Link } = Typography;
 
@@ -192,10 +192,15 @@ export default function AuthFormContent() {
 
     // 检测是否在微信浏览器中
     const isInWeChatBrowser = isWeChatBrowser();
+    // 检测是否为移动端设备
+    const isMobileEnv = isMobileDevice();
+    // 移动端非微信浏览器（如 iPhone Chrome）- 不支持微信登录
+    const isMobileNonWechat = isMobileEnv && !isInWeChatBrowser;
 
     // Tab 状态: 'wechat' | 'phone' | 'password'
     // 如果在微信浏览器中，默认显示 phone tab（因为微信 tab 会显示 H5 登录按钮）
-    const [activeTab, setActiveTab] = useState(isInWeChatBrowser ? 'phone' : 'wechat');
+    // 如果在移动端非微信浏览器中，默认显示 phone tab（不支持微信登录）
+    const [activeTab, setActiveTab] = useState((isInWeChatBrowser || isMobileNonWechat) ? 'phone' : 'wechat');
 
     // 表单状态
     const [isLoading, setIsLoading] = useState(false);
@@ -724,15 +729,16 @@ export default function AuthFormContent() {
         // 根据当前 Tab 决定显示哪些其他登录方式
         const otherMethods = [];
 
-        if (activeTab !== 'wechat') {
+        // 移动端非微信浏览器不显示微信登录选项（无法使用）
+        if (activeTab !== 'wechat' && !isMobileNonWechat) {
             otherMethods.push({
                 key: 'wechat',
                 label: isInWeChatBrowser ? '微信一键' : '微信',
                 icon: <WechatOutlined />,
                 color: THEME.wechat,
                 hoverBg: 'rgba(7, 193, 96, 0.1)',
-                // 微信浏览器内直接调用H5登录，否则切换到微信Tab
+                // 微信浏览器内直接调用H5登录，PC端切换到微信Tab显示二维码
-                onClick: isInWeChatBrowser ? handleWechatH5Login : (isMobile ? handleWechatH5Login : () => handleTabChange('wechat')),
+                onClick: isInWeChatBrowser ? handleWechatH5Login : () => handleTabChange('wechat'),
             });
         }
 
@@ -789,24 +795,40 @@ export default function AuthFormContent() {
 
     // 获取右上角折角的颜色（根据要切换到的登录方式）
     const getCornerColor = () => {
+        // 移动端非微信浏览器：只在微信Tab和手机Tab之间切换（手机Tab -> 密码Tab）
+        if (isMobileNonWechat) {
+            return activeTab === 'phone' ? THEME.textSecondary : THEME.goldPrimary;
+        }
         // 微信 Tab -> 显示手机颜色（金色），手机/密码 Tab -> 显示微信颜色（绿色）
         return activeTab === 'wechat' ? THEME.goldPrimary : THEME.wechat;
     };
 
     // 获取右上角图标
     const getCornerIcon = () => {
+        // 移动端非微信浏览器：手机Tab显示密码图标，密码Tab显示手机图标
+        if (isMobileNonWechat) {
+            return activeTab === 'phone' ? <KeyOutlined /> : <MobileOutlined />;
+        }
         // 微信 Tab -> 显示手机图标，手机/密码 Tab -> 显示二维码图标
         return activeTab === 'wechat' ? <MobileOutlined /> : <QrcodeOutlined />;
     };
 
     // 获取右上角切换的目标 Tab
     const getCornerTargetTab = () => {
+        // 移动端非微信浏览器：在手机和密码之间切换
+        if (isMobileNonWechat) {
+            return activeTab === 'phone' ? 'password' : 'phone';
+        }
         // 微信 Tab -> 切换到手机，手机/密码 Tab -> 切换到微信
         return activeTab === 'wechat' ? 'phone' : 'wechat';
     };
 
     // 获取右上角提示文字
     const getCornerTooltip = () => {
+        // 移动端非微信浏览器
+        if (isMobileNonWechat) {
+            return activeTab === 'phone' ? '切换到密码登录' : '切换到验证码登录';
+        }
         if (activeTab === 'wechat') return '切换到验证码登录';
         return isInWeChatBrowser ? '切换到微信一键登录' : '切换到微信登录';
     };
@@ -859,6 +881,51 @@ export default function AuthFormContent() {
             {/* 底部其他登录方式 */}
             {renderBottomDivider()}
 
+            {/* 客服联系 */}
+            <div style={{ textAlign: 'center', marginTop: '16px' }}>
+                <Popover
+                    content={
+                        <div style={{ textAlign: 'center', padding: '8px' }}>
+                            <img
+                                src="/img/service.jpg"
+                                alt="客服二维码"
+                                style={{
+                                    width: '150px',
+                                    height: '150px',
+                                    borderRadius: '8px',
+                                }}
+                            />
+                            <div style={{
+                                marginTop: '8px',
+                                fontSize: '12px',
+                                color: '#666'
+                            }}>
+                                扫码添加企业微信客服
+                            </div>
+                        </div>
+                    }
+                    trigger="hover"
+                    placement="top"
+                >
+                    <span
+                        style={{
+                            fontSize: '12px',
+                            color: THEME.textMuted,
+                            cursor: 'pointer',
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            gap: '4px',
+                            transition: 'color 0.2s',
+                        }}
+                        onMouseEnter={(e) => { e.currentTarget.style.color = THEME.goldPrimary; }}
+                        onMouseLeave={(e) => { e.currentTarget.style.color = THEME.textMuted; }}
+                    >
+                        <CustomerServiceOutlined />
+                        遇到问题？联系客服
+                    </span>
+                </Popover>
+            </div>
+
             {/* 昵称设置引导 */}
             <Modal
                 open={showNicknamePrompt}