refactor(qr-confirm): 简化二维码确认登录页面逻辑

- 移除未使用的组件和图标导入,减少包大小
- 注释掉登录卡片相关样式和元素,隐藏界面内容
- 删除手动确认登录函数及相关按钮渲染逻辑
- 去除状态图标、标题、描述和用户信息的渲染函数
- 删除所有操作按钮和安全提示组件渲染
- 取消整体页面布局,仅直接渲染授权页面部分
- 修改品牌文本首字母小写,统一风格
This commit is contained in:
2026-04-11 08:30:31 +08:00
parent 4507cd484e
commit 2fd6f073c3

View File

@@ -1,7 +1,6 @@
import React, { useState, useEffect } from 'react';
import { View, Text } from '@tarojs/components';
import { Loading, Card, Button } from '@nutui/nutui-react-taro';
import { Success, Failure, Tips, User } from '@nutui/icons-react-taro';
import { Button } from '@nutui/nutui-react-taro';
import Taro, { useRouter } from '@tarojs/taro';
import { confirmQRLogin } from '@/api/passport/qr-login';
import { loginByOpenId } from '@/api/passport/wx-login';
@@ -321,13 +320,6 @@ const QRConfirmPage: React.FC = () => {
}
};
/**
* 手动确认登录(主动扫码场景)
*/
const handleManualConfirm = () => {
handleConfirmLogin();
};
/**
* 取消登录
*/
@@ -545,7 +537,7 @@ const QRConfirmPage: React.FC = () => {
WebkitTextFillColor: 'transparent',
backgroundClip: 'text',
marginBottom: '8px',
}}>WebSopy</Text>
}}>websopy</Text>
{/* 标语 */}
<Text style={{
@@ -565,55 +557,55 @@ const QRConfirmPage: React.FC = () => {
</View>
{/* 登录卡片 */}
<View style={{
width: '100%',
maxWidth: '320px',
background: 'rgba(255, 255, 255, 0.05)',
backdropFilter: 'blur(20px)',
WebkitBackdropFilter: 'blur(20px)',
borderRadius: '20px',
border: '1px solid rgba(255, 255, 255, 0.1)',
padding: '24px',
marginBottom: '24px',
}}>
{/* 提示图标 */}
<View style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginBottom: '16px',
}}>
<View style={{
width: '48px',
height: '48px',
borderRadius: '50%',
background: 'linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(59, 130, 246, 0.3))',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
border: '1px solid rgba(168, 85, 247, 0.4)',
}}>
<Text style={{ fontSize: '24px' }}>📱</Text>
</View>
</View>
{/*<View style={{*/}
{/* width: '100%',*/}
{/* maxWidth: '320px',*/}
{/* background: 'rgba(255, 255, 255, 0.05)',*/}
{/* backdropFilter: 'blur(20px)',*/}
{/* WebkitBackdropFilter: 'blur(20px)',*/}
{/* borderRadius: '20px',*/}
{/* border: '1px solid rgba(255, 255, 255, 0.1)',*/}
{/* padding: '24px',*/}
{/* marginBottom: '24px',*/}
{/*}}>*/}
{/* /!* 提示图标 *!/*/}
{/* <View style={{*/}
{/* display: 'flex',*/}
{/* alignItems: 'center',*/}
{/* justifyContent: 'center',*/}
{/* marginBottom: '16px',*/}
{/* }}>*/}
{/* <View style={{*/}
{/* width: '48px',*/}
{/* height: '48px',*/}
{/* borderRadius: '50%',*/}
{/* background: 'linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(59, 130, 246, 0.3))',*/}
{/* display: 'flex',*/}
{/* alignItems: 'center',*/}
{/* justifyContent: 'center',*/}
{/* border: '1px solid rgba(168, 85, 247, 0.4)',*/}
{/* }}>*/}
{/* <Text style={{ fontSize: '24px' }}>📱</Text>*/}
{/* </View>*/}
{/* </View>*/}
{/* 标题 */}
<Text style={{
textAlign: 'center',
color: '#fff',
fontSize: '18px',
fontWeight: '600',
marginBottom: '8px',
}}></Text>
{/* /!* 标题 *!/*/}
{/* <Text style={{*/}
{/* textAlign: 'center',*/}
{/* color: '#fff',*/}
{/* fontSize: '18px',*/}
{/* fontWeight: '600',*/}
{/* marginBottom: '8px',*/}
{/* }}>授权登录</Text>*/}
{/* 描述 */}
<Text style={{
textAlign: 'center',
color: 'rgba(255, 255, 255, 0.6)',
fontSize: '13px',
lineHeight: '1.5',
}}>使</Text>
</View>
{/* /!* 描述 *!/*/}
{/* <Text style={{*/}
{/* textAlign: 'center',*/}
{/* color: 'rgba(255, 255, 255, 0.6)',*/}
{/* fontSize: '13px',*/}
{/* lineHeight: '1.5',*/}
{/* }}>点击下方按钮,使用微信手机号快速登录</Text>*/}
{/*</View>*/}
{/* 主按钮 - 渐变发光按钮 */}
<View
@@ -737,255 +729,10 @@ const QRConfirmPage: React.FC = () => {
);
};
// 渲染状态图标
const renderStatusIcon = () => {
if (loading || authLoading) return (
<View className="mb-6">
<View className="w-16 h-16 mx-auto flex items-center justify-center">
<Loading className="text-blue-500" />
</View>
</View>
);
if (confirmed) return (
<View className="mb-6">
<View className="w-16 h-16 mx-auto bg-green-100 rounded-full flex items-center justify-center">
<Success className="text-green-500" size="32" />
</View>
</View>
);
if (error && !needAuth) return (
<View className="mb-6">
<View className="w-16 h-16 mx-auto bg-red-100 rounded-full flex items-center justify-center">
<Failure className="text-red-500" size="32" />
</View>
</View>
);
if (needAuth) {
// 需要授权时显示授权页面
return renderAuthPage();
}
return (
<View className="mb-6">
<View className="w-16 h-16 mx-auto bg-blue-100 rounded-full flex items-center justify-center">
<User size="32" className="text-blue-500" />
</View>
</View>
);
};
// 获取标题
const getTitle = () => {
if (loading || authLoading) return '正在处理...';
if (confirmed) return '登录确认成功';
if (needAuth) return ''; // 授权页面有自己的标题
if (error) return '登录确认失败';
return loginMethod === 'url' ? '扫码登录确认' : '确认登录';
};
// 获取描述
const getDescription = () => {
if (loading) return '请稍候,正在为您确认登录';
if (authLoading) return '正在授权登录...';
if (confirmed) return '您已成功确认登录,网页端将自动登录';
if (needAuth) return ''; // 授权页面有自己的描述
if (error) return error;
if (loginMethod === 'url') {
return '检测到登录请求,是否确认登录?';
}
const displayName = userInfo?.nickname || userInfo?.username || '当前用户';
return `确认使用 ${displayName} 登录网页端?`;
};
// 渲染操作按钮
const renderActions = () => {
// 需要授权登录时,按钮在授权页面内部渲染
if (needAuth) {
return null;
}
if (loading) {
return (
<View
className="w-full h-12 bg-gray-300 text-white text-base font-medium rounded-lg flex items-center justify-center"
>
...
</View>
);
}
if (confirmed) {
return (
<View
className="w-full h-12 bg-green-500 text-white text-base font-medium rounded-lg flex items-center justify-center"
onClick={handleCancel}
>
</View>
);
}
if (error) {
return (
<View className="space-y-3">
<View
className="w-full h-12 bg-blue-500 text-white text-base font-medium rounded-lg flex items-center justify-center"
onClick={handleRetry}
>
</View>
<View
className="w-full h-12 bg-gray-100 text-gray-700 text-base font-medium rounded-lg flex items-center justify-center"
onClick={handleScan}
>
</View>
<View
className="w-full h-10 text-gray-500 text-sm flex items-center justify-center"
onClick={handleCancel}
>
</View>
</View>
);
}
if (loginMethod === 'scan') {
return (
<View className="space-y-3">
<View
className="w-full h-12 bg-blue-500 text-white text-base font-medium rounded-lg flex items-center justify-center"
onClick={handleManualConfirm}
>
</View>
<View
className="w-full h-12 text-gray-500 text-base flex items-center justify-center"
onClick={handleCancel}
>
</View>
</View>
);
}
return (
<View
className="w-full h-12 bg-blue-500 text-white text-base font-medium rounded-lg flex items-center justify-center"
onClick={handleManualConfirm}
>
</View>
);
};
// 如果是授权页面,直接返回授权页面
if (needAuth) {
return renderAuthPage();
}
return (
<View className="min-h-screen bg-gradient-to-b from-blue-50 to-white">
<View className="p-4">
{/* Logo/品牌区域 */}
<View className="text-center pt-8 pb-6">
<View className="w-20 h-20 mx-auto bg-white rounded-2xl shadow-lg flex items-center justify-center mb-4">
<Text className="text-3xl">🔐</Text>
</View>
<Text className="text-gray-400 text-sm">WebSoft Platform</Text>
</View>
{/* 主要内容卡片 */}
<Card className="bg-white rounded-2xl shadow-xl -mt-4">
<View className="p-6 text-center">
{/* 状态图标 */}
{renderStatusIcon()}
{/* 标题 */}
{getTitle() && (
<Text className="text-xl font-bold text-gray-800 mb-2 block">
{getTitle()}
</Text>
)}
{/* 描述 */}
{getDescription() && (
<Text className="text-gray-600 mb-6 block text-sm">
{getDescription()}
</Text>
)}
{/* 用户信息 */}
{!loading && !confirmed && !error && !needAuth && userInfo && (
<View className="bg-gray-50 rounded-xl p-4 mb-6">
<View className="flex items-center justify-center">
{userInfo.avatar ? (
<View
className="w-12 h-12 rounded-full bg-blue-100 mr-3 overflow-hidden"
style={{ backgroundImage: `url(${userInfo.avatar})`, backgroundSize: 'cover' }}
/>
) : (
<View className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-3">
<User className="text-blue-500" size="20" />
</View>
)}
<View className="text-left">
<Text className="text-sm font-medium text-gray-800 block">
{userInfo.nickname || userInfo.username || '用户'}
</Text>
<Text className="text-xs text-gray-500 block">
ID: {userInfo.userId}
</Text>
</View>
</View>
</View>
)}
{/* Token 信息 */}
{token && !loading && !confirmed && !needAuth && (
<View className="bg-blue-500 rounded-lg p-3 mb-4">
<Text className="text-xs text-blue-600">
{token.substring(0, 20)}...{token.substring(token.length - 10)}
</Text>
</View>
)}
{/* 操作按钮 */}
{renderActions()}
</View>
</Card>
{/* 安全提示 */}
{!needAuth && (
<Card className="bg-yellow-50 border border-yellow-200 rounded-xl mt-4">
<View className="p-4">
<View className="flex items-start">
<Tips className="text-yellow-600 mr-2 mt-1" size="16" />
<View>
<Text className="text-sm font-medium text-yellow-800 mb-1 block">
</Text>
<Text className="text-xs text-yellow-700 block">
</Text>
</View>
</View>
</View>
</Card>
)}
{/* 底部说明 */}
<View className="text-center mt-6 pb-8">
<Text className="text-xs text-gray-400">
</Text>
</View>
</View>
</View>
);
};
export default QRConfirmPage;