feat(admin): 实现管理员模式切换和扫码登录功能

- 新增管理员模式切换方案,统一管理所有管理员功能
- 实现扫码登录功能,支持用户通过小程序扫描网页端二维码快速登录
- 添加管理员面板组件,集中展示所有管理员功能
- 开发扫码登录按钮和扫描器组件,方便集成到不同页面
- 优化用户界面设计,提高管理员用户的使用体验
This commit is contained in:
2025-09-01 14:26:00 +08:00
parent 7a7d8b4605
commit cbcf591f71
16 changed files with 1785 additions and 33 deletions

View File

@@ -0,0 +1,87 @@
import React from 'react';
import { View, Text } from '@tarojs/components';
import { Button } from '@nutui/nutui-react-taro';
import { Scan } from '@nutui/icons-react-taro';
import Taro from '@tarojs/taro';
import { useQRLogin } from '@/hooks/useQRLogin';
export interface QRLoginButtonProps {
/** 按钮类型 */
type?: 'primary' | 'success' | 'warning' | 'danger' | 'default';
/** 按钮大小 */
size?: 'large' | 'normal' | 'small';
/** 按钮文本 */
text?: string;
/** 是否显示图标 */
showIcon?: boolean;
/** 自定义样式类名 */
className?: string;
/** 点击成功回调 */
onSuccess?: (result: any) => void;
/** 点击失败回调 */
onError?: (error: string) => void;
/** 是否使用页面模式(跳转到专门页面) */
usePageMode?: boolean;
}
/**
* 扫码登录按钮组件
*/
const QRLoginButton: React.FC<QRLoginButtonProps> = ({
type = 'primary',
size = 'normal',
text = '扫码登录',
showIcon = true,
className = '',
onSuccess,
onError,
usePageMode = false
}) => {
const { startScan, isLoading, canScan } = useQRLogin();
// 处理点击事件
const handleClick = async () => {
if (usePageMode) {
// 跳转到专门的扫码登录页面
if (canScan()) {
Taro.navigateTo({
url: '/pages/qr-login/index'
});
} else {
Taro.showToast({
title: '请先登录小程序',
icon: 'error'
});
}
return;
}
// 直接执行扫码登录
try {
await startScan();
// 成功回调会在Hook内部处理
} catch (error: any) {
onError?.(error.message || '扫码登录失败');
}
};
const disabled = !canScan() || isLoading;
return (
<Button
type={type}
size={size}
loading={isLoading}
disabled={disabled}
onClick={handleClick}
className={className}
>
{showIcon && !isLoading && (
<Scan className="mr-1" />
)}
{isLoading ? '扫码中...' : (disabled && !canScan() ? '请先登录' : text)}
</Button>
);
};
export default QRLoginButton;