From 35198aa5486a8452b210649a5aef632fd984e56b Mon Sep 17 00:00:00 2001 From: zdl <3489966805@qq.com> Date: Wed, 22 Oct 2025 15:40:36 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BE=AE=E4=BF=A1UI=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Auth/AuthFormContent.js | 2 +- src/components/Auth/WechatRegister.js | 281 +++++++++++++++---------- 2 files changed, 175 insertions(+), 108 deletions(-) diff --git a/src/components/Auth/AuthFormContent.js b/src/components/Auth/AuthFormContent.js index 085fc3c9..793f2293 100644 --- a/src/components/Auth/AuthFormContent.js +++ b/src/components/Auth/AuthFormContent.js @@ -502,7 +502,7 @@ export default function AuthFormContent() { {/* 桌面端：右侧二维码扫描 */} {!isMobile && ( {/* ✅ 桌面端让右侧自适应宽度 */} -
{/* ✅ 完全移除padding，最大化空间利用 */} +
{/* ✅ 移除bg和p，WechatRegister自带白色背景和padding */}
diff --git a/src/components/Auth/WechatRegister.js b/src/components/Auth/WechatRegister.js index fd5a1ef7..67f81447 100644 --- a/src/components/Auth/WechatRegister.js +++ b/src/components/Auth/WechatRegister.js @@ -3,14 +3,18 @@ import { Box, Button, VStack, + HStack, + Center, Text, + Heading, Icon, useToast, Spinner } from "@chakra-ui/react"; import { FaQrcode } from "react-icons/fa"; +import { FiAlertCircle } from "react-icons/fi"; import { useNavigate } from "react-router-dom"; -import { authService, WECHAT_STATUS } from "../../services/authService"; +import { authService, WECHAT_STATUS, STATUS_MESSAGES } from "../../services/authService"; import { logger } from "../../utils/logger"; // 配置常量 @@ -18,6 +22,28 @@ const POLL_INTERVAL = 2000; // 轮询间隔：2秒 const BACKUP_POLL_INTERVAL = 3000; // 备用轮询间隔：3秒 const QR_CODE_TIMEOUT = 300000; // 二维码超时：5分钟 +/** + * 获取状态文字颜色 + */ +const getStatusColor = (status) => { + switch(status) { + case WECHAT_STATUS.WAITING: return "gray.600"; // ✅ 灰色文字 + case WECHAT_STATUS.SCANNED: return "green.600"; // ✅ 绿色文字 + case WECHAT_STATUS.AUTHORIZED: return "green.600"; // ✅ 绿色文字 + case WECHAT_STATUS.EXPIRED: return "orange.600"; // ✅ 橙色文字 + case WECHAT_STATUS.LOGIN_SUCCESS: return "green.600"; // ✅ 绿色文字 + case WECHAT_STATUS.REGISTER_SUCCESS: return "green.600"; + default: return "gray.600"; + } +}; + +/** + * 获取状态文字 + */ +const getStatusText = (status) => { + return STATUS_MESSAGES[status] || "点击按钮获取二维码"; +}; + export default function WechatRegister() { // 状态管理 const [wechatAuthUrl, setWechatAuthUrl] = useState(""); @@ -141,6 +167,18 @@ export default function WechatRegister() { // 处理成功状态 if (status === WECHAT_STATUS.LOGIN_SUCCESS || status === WECHAT_STATUS.REGISTER_SUCCESS) { clearTimers(); // 停止轮询 + + // 显示"扫码成功，登录中"提示 + if (isMountedRef.current) { + toast({ + title: "扫码成功", + description: "正在登录，请稍候...", + status: "info", + duration: 2000, + isClosable: false, + }); + } + await handleLoginSuccess(wechatSessionId, status); } // 处理过期状态 @@ -296,9 +334,9 @@ export default function WechatRegister() { * 测量容器尺寸并计算缩放比例 */ useLayoutEffect(() => { - // 微信授权页面的原始尺寸 - const ORIGINAL_WIDTH = 600; - const ORIGINAL_HEIGHT = 800; + // 微信授权页面的原始尺寸（需要与iframe实际尺寸匹配） + const ORIGINAL_WIDTH = 300; // ✅ 修正：与iframe width匹配 + const ORIGINAL_HEIGHT = 350; // ✅ 修正：与iframe height匹配 const calculateScale = () => { if (containerRef.current) { @@ -345,116 +383,145 @@ export default function WechatRegister() { // }; return ( - - {wechatStatus === WECHAT_STATUS.WAITING ? ( - <> - - 微信扫码 - + + {/* ========== 标题区域 ========== */} + + 微信扫码 + + + {/* ========== 二维码区域 ========== */} + + {wechatStatus === WECHAT_STATUS.WAITING ? ( + /* 已获取二维码：显示iframe */ +