From 97c10bf2cc769c59e77c40812dca4e0aab58a156 Mon Sep 17 00:00:00 2001 From: zdl <3489966805@qq.com> Date: Tue, 30 Dec 2025 17:35:55 +0800 Subject: [PATCH] =?UTF-8?q?style(Auth):=20=E7=99=BB=E5=BD=95=E5=BC=B9?= =?UTF-8?q?=E7=AA=97=E6=94=B9=E4=B8=BA=20Tab=20=E5=88=87=E6=8D=A2=E5=B8=83?= =?UTF-8?q?=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 改为单列布局 (450px)，右上角折角图标切换微信/手机登录 - 微信登录: 显示二维码图标，切换到手机显示手机图标 - 验证码登录: 添加内容区标题和副标题 - 关闭按钮移除，点击蒙层关闭弹窗 - 验证码倒计时按钮颜色改为金色 - 调整表单区域间距：上方紧凑，下方留白 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- src/components/Auth/AuthFormContent.js | 402 ++++++++++++++----- src/components/Auth/AuthModal.less | 133 +++++- src/components/Auth/AuthModalManager.js | 14 +- src/components/Auth/VerificationCodeInput.js | 6 +- src/components/Auth/WechatRegister.js | 5 +- 5 files changed, 444 insertions(+), 116 deletions(-) diff --git a/src/components/Auth/AuthFormContent.js b/src/components/Auth/AuthFormContent.js index f166c4b4..684b302f 100644 --- a/src/components/Auth/AuthFormContent.js +++ b/src/components/Auth/AuthFormContent.js @@ -1,9 +1,9 @@ // src/components/Auth/AuthFormContent.js -// 统一的认证表单组件 - Ant Design 版本 - 黑金主题 +// 统一的认证表单组件 - Ant Design 版本 - 黑金主题 - Tab 切换布局 import React, { useState, useEffect, useRef } from "react"; import { useNavigate } from "react-router-dom"; -import { Form, Input, Button, Typography, Space, Row, Col, Modal, message } from 'antd'; -import { LockOutlined, WechatOutlined } from '@ant-design/icons'; +import { Form, Input, Button, Typography, Modal, message, Tooltip } from 'antd'; +import { LockOutlined, WechatOutlined, MobileOutlined, QrcodeOutlined } from '@ant-design/icons'; import { useBreakpointValue } from "@chakra-ui/react"; import { useAuth } from "../../contexts/AuthContext"; import { useAuthModal } from "../../hooks/useAuthModal"; @@ -16,7 +16,7 @@ import { logger } from '../../utils/logger'; import { getApiBase } from '../../utils/apiConfig'; import { useAuthEvents } from '../../hooks/useAuthEvents'; -const { Text, Link, Title } = Typography; +const { Link } = Typography; // 黑金主题样式 const THEME = { @@ -27,18 +27,47 @@ const THEME = { bgElevated: '#1A1A2E', lineDefault: 'rgba(212, 175, 55, 0.3)', lineEmphasis: 'rgba(212, 175, 55, 0.5)', + lineSubtle: 'rgba(212, 175, 55, 0.15)', textPrimary: 'rgba(255, 255, 255, 0.95)', + textSecondary: 'rgba(255, 255, 255, 0.6)', textMuted: 'rgba(255, 255, 255, 0.4)', wechat: '#07C160', }; const styles = { - formTitle: { - color: THEME.goldPrimary, - fontWeight: 600, - letterSpacing: '0.05em', - marginBottom: '16px', + // 右上角折角切换图标 + cornerSwitch: { + position: 'absolute', + top: '-32px', + right: '-32px', + width: '64px', + height: '64px', + cursor: 'pointer', + zIndex: 10, + overflow: 'hidden', }, + cornerTriangle: { + position: 'absolute', + top: 0, + right: 0, + width: 0, + height: 0, + borderStyle: 'solid', + borderWidth: '0 64px 64px 0', + transition: 'all 0.2s ease', + }, + cornerIcon: { + position: 'absolute', + top: '12px', + right: '8px', + fontSize: '18px', + color: '#fff', + transform: 'rotate(0deg)', + }, + // 内容区域 + contentArea: { + }, + // 输入框 input: { background: THEME.bgInput, border: `1px solid ${THEME.lineDefault}`, @@ -46,6 +75,7 @@ const styles = { height: '44px', borderRadius: '8px', }, + // 提交按钮 submitBtn: { height: '48px', fontSize: '16px', @@ -56,31 +86,82 @@ const styles = { color: THEME.bgElevated, boxShadow: '0 4px 15px rgba(212, 175, 55, 0.3)', }, + // 隐私文本 privacyText: { textAlign: 'center', fontSize: '12px', color: THEME.textMuted, - marginTop: '12px', + marginTop: '8px', }, privacyLink: { color: THEME.goldPrimary, textDecoration: 'underline', + fontSize: '12px', }, - wechatBtn: { - color: THEME.wechat, - padding: '4px 8px', + // 底部分割线区域 + bottomDivider: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + marginTop: '24px', + gap: '12px', }, - otherLoginText: { + dividerLine: { + flex: 1, + height: '1px', + background: `linear-gradient(to right, transparent, ${THEME.lineDefault}, transparent)`, + }, + otherLoginWrapper: { + display: 'flex', + alignItems: 'center', + gap: '8px', color: THEME.textMuted, fontSize: '12px', + whiteSpace: 'nowrap', + }, + otherLoginIcon: { + cursor: 'pointer', + padding: '4px 8px', + borderRadius: '4px', + transition: 'all 0.2s ease', + display: 'flex', + alignItems: 'center', + gap: '4px', + }, + // 内容区小标题 + contentTitle: { + textAlign: 'left', + marginBottom: '4px', + }, + contentTitleText: { + color: THEME.goldPrimary, + fontSize: '20px', + fontWeight: 600, + letterSpacing: '0.05em', + }, + contentSubtitle: { + textAlign: 'left', + color: THEME.textSecondary, + fontSize: '12px', + marginBottom: '24px', }, }; // 统一配置对象 const AUTH_CONFIG = { + // 大标题（固定不变） title: "价值前沿", subtitle: "开启您的投资之旅", - formTitle: "登陆/注册", + // 微信登录内容区文案 + wechat: { + title: "微信安全登录", + subtitle: "未注册的微信号登录时将自动创建价值前沿账号", + }, + // 验证码登录内容区文案 + phone: { + title: "手机号登录", + subtitle: "未注册手机号登录时将自动创建价值前沿账号", + }, buttonText: "登录/注册", loadingText: "验证中...", successDescription: "欢迎！", @@ -102,7 +183,10 @@ export default function AuthFormContent() { const config = AUTH_CONFIG; const isMountedRef = useRef(true); - // 状态 + // Tab 状态: 'wechat' | 'phone' + const [activeTab, setActiveTab] = useState('wechat'); + + // 表单状态 const [isLoading, setIsLoading] = useState(false); const [showNicknamePrompt, setShowNicknamePrompt] = useState(false); const [currentPhone, setCurrentPhone] = useState(""); @@ -117,6 +201,12 @@ export default function AuthFormContent() { // 事件追踪 const authEvents = useAuthEvents({ component: 'AuthFormContent', isMobile }); + // 切换 Tab + const handleTabChange = (tab) => { + setActiveTab(tab); + authEvents.trackLoginPageViewed(); // 追踪切换 + }; + // 输入变化处理 const handleInputChange = (e) => { const { name, value } = e.target; @@ -266,7 +356,7 @@ export default function AuthFormContent() { } }; - // 微信H5登录 + // 微信H5登录（移动端） const handleWechatH5Login = async () => { authEvents.trackWechatLoginInitiated('icon_button'); try { @@ -295,96 +385,202 @@ export default function AuthFormContent() { // eslint-disable-next-line react-hooks/exhaustive-deps }, []); + // 渲染手机验证码登录表单 + const renderPhoneForm = () => ( +
+ {/* 内容区小标题 */} +
+ {config.phone.title} +
+
{config.phone.subtitle}
+ +
+ + } + /> + + + + + + + + + + +
+ 登录即表示您同意价值前沿{" "} + + 《用户协议》 + + {" "}和{" "} + + 《隐私政策》 + +
+
+
+ ); + + // 渲染微信登录区域 + const renderWechatLogin = () => ( +
+ +
+ 扫码即表示同意{" "} + + 《用户协议》 + + {" "}和{" "} + + 《隐私政策》 + +
+
+ ); + + // 渲染底部其他登录方式 + const renderBottomDivider = () => { + const isWechatTab = activeTab === 'wechat'; + + // 移动端微信 Tab 下不显示底部切换（因为移动端微信是 H5 跳转） + if (isMobile && isWechatTab) { + return null; + } + + return ( +
+
+
+ 其他登录方式: + {isWechatTab ? ( + handleTabChange('phone')} + onMouseEnter={(e) => { + e.currentTarget.style.background = 'rgba(212, 175, 55, 0.1)'; + }} + onMouseLeave={(e) => { + e.currentTarget.style.background = 'transparent'; + }} + > + 手机 + + ) : ( + handleTabChange('wechat')} + onMouseEnter={(e) => { + e.currentTarget.style.background = 'rgba(7, 193, 96, 0.1)'; + }} + onMouseLeave={(e) => { + e.currentTarget.style.background = 'transparent'; + }} + > + 微信 + + )} +
+
+
+ ); + }; + + // 获取右上角折角的颜色（根据要切换到的登录方式） + const getCornerColor = () => { + // 显示要切换到的方式的颜色 + return activeTab === 'wechat' ? THEME.goldPrimary : THEME.wechat; + }; + + // 获取右上角图标 + const getCornerIcon = () => { + // 显示要切换到的方式的图标：手机图标 或 二维码图标 + return activeTab === 'wechat' ? : ; + }; + return ( -
+
+ {/* 右上角折角切换图标 */} + +
handleTabChange(activeTab === 'wechat' ? 'phone' : 'wechat')} + > +
+ + {getCornerIcon()} + +
+ + + {/* 大标题（固定不变） */} - - {/* 左侧表单 */} - - {config.formTitle} + {/* 内容区域 */} +
+ {activeTab === 'wechat' ? renderWechatLogin() : renderPhoneForm()} +
-
- - - - - - - - - {/* 移动端微信登录 */} - {isMobile && ( -
- 其他登录方式： -
- )} - - - - - -
- 登录即表示您同意价值前沿{" "} - - 《用户协议》 - - {" "}和{" "} - - 《隐私政策》 - -
-
- - - {/* 右侧微信二维码 - 仅桌面端 */} - {!isMobile && ( - - - - )} - + {/* 底部其他登录方式 */} + {renderBottomDivider()} {/* 昵称设置引导 */} ✕ - } + closable={false} > diff --git a/src/components/Auth/VerificationCodeInput.js b/src/components/Auth/VerificationCodeInput.js index 8ad76696..e28e4516 100644 --- a/src/components/Auth/VerificationCodeInput.js +++ b/src/components/Auth/VerificationCodeInput.js @@ -35,13 +35,13 @@ const styles = { }, sendCodeBtnDisabled: { background: 'transparent', - color: THEME.textMuted, - border: `1px solid ${THEME.lineDefault}`, + color: THEME.goldPrimary, + border: `1px solid ${THEME.lineEmphasis}`, borderLeft: 'none', minWidth: '120px', height: '44px', borderRadius: '0 8px 8px 0', - opacity: 0.5, + opacity: 0.8, }, }; diff --git a/src/components/Auth/WechatRegister.js b/src/components/Auth/WechatRegister.js index 57a4db6a..ee76f343 100644 --- a/src/components/Auth/WechatRegister.js +++ b/src/components/Auth/WechatRegister.js @@ -139,7 +139,7 @@ const getStatusColor = (status) => { const getStatusText = (status) => STATUS_MESSAGES[status] || "点击按钮获取二维码"; -export default function WechatRegister() { +export default function WechatRegister({ subtitle }) { const { closeModal } = useAuthModal(); const { refreshSession } = useAuth(); const authEvents = useAuthEvents({ component: 'WechatRegister', isMobile: false }); @@ -299,6 +299,9 @@ export default function WechatRegister() { return (
微信登陆 + + 未注册的微信号登录时将自动创建价值前沿账号 +
{wechatStatus === WECHAT_STATUS.WAITING ? (