赵忠林
e47e34825a
feat(passport): 实现统一扫码功能并迁移二维码登录页面 将原有的扫码登录和扫码核销功能合并为统一扫码功能，支持智能识别二维码类型， 自动执行相应操作。同时将二维码登录相关页面迁移到 /passport 路径下，优化用户体验与代码结构。 主要变更： - 新增统一扫码 Hook (useUnifiedQRScan) 和按钮组件 (UnifiedQRButton)- 新增统一扫码页面 /passport/unified-qr/index - 迁移二维码登录页面路径：/pages/qr-login → /passport/qr-login - 更新管理员面板及用户卡片中的扫码入口为统一扫码- 移除旧的 QRLoginDemo 和 qr-test 测试页面- 补充统一扫码使用指南文档```
140 lines
4.1 KiB
TypeScript
140 lines
4.1 KiB
TypeScript
import React from 'react';
|
|
import { View, Text } from '@tarojs/components';
|
|
import { Button } from '@nutui/nutui-react-taro';
|
|
import { Scan, Setting, User, Shop } from '@nutui/icons-react-taro';
|
|
import navTo from '@/utils/common';
|
|
|
|
export interface AdminPanelProps {
|
|
/** 是否显示面板 */
|
|
visible: boolean;
|
|
/** 关闭面板回调 */
|
|
onClose?: () => void;
|
|
/** 自定义样式类名 */
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* 管理员功能面板组件
|
|
*/
|
|
const AdminPanel: React.FC<AdminPanelProps> = ({
|
|
visible,
|
|
onClose,
|
|
className = ''
|
|
}) => {
|
|
if (!visible) return null;
|
|
|
|
// 管理员功能列表
|
|
const adminFeatures = [
|
|
{
|
|
id: 'unified-qr',
|
|
title: '统一扫码',
|
|
description: '扫码登录和核销一体化功能',
|
|
icon: <Scan className="text-blue-500" size="24" />,
|
|
color: 'bg-blue-50 border-blue-200',
|
|
onClick: () => {
|
|
navTo('/passport/unified-qr/index', true);
|
|
onClose?.();
|
|
}
|
|
},
|
|
{
|
|
id: 'user-management',
|
|
title: '用户管理',
|
|
description: '管理系统用户信息',
|
|
icon: <User className="text-purple-500" size="24" />,
|
|
color: 'bg-purple-50 border-purple-200',
|
|
onClick: () => {
|
|
// TODO: 跳转到用户管理页面
|
|
console.log('跳转到用户管理');
|
|
onClose?.();
|
|
}
|
|
},
|
|
{
|
|
id: 'store-management',
|
|
title: '门店管理',
|
|
description: '管理门店信息和设置',
|
|
icon: <Shop className="text-orange-500" size="24" />,
|
|
color: 'bg-orange-50 border-orange-200',
|
|
onClick: () => {
|
|
// TODO: 跳转到门店管理页面
|
|
console.log('跳转到门店管理');
|
|
onClose?.();
|
|
}
|
|
},
|
|
{
|
|
id: 'system-settings',
|
|
title: '系统设置',
|
|
description: '系统配置和参数管理',
|
|
icon: <Setting className="text-gray-500" size="24" />,
|
|
color: 'bg-gray-50 border-gray-200',
|
|
onClick: () => {
|
|
// TODO: 跳转到系统设置页面
|
|
console.log('跳转到系统设置');
|
|
onClose?.();
|
|
}
|
|
}
|
|
];
|
|
|
|
return (
|
|
<View className={`admin-panel ${className}`}>
|
|
{/* 遮罩层 */}
|
|
<View
|
|
className="fixed inset-0 bg-black bg-opacity-50 z-40"
|
|
onClick={onClose}
|
|
/>
|
|
|
|
{/* 面板内容 */}
|
|
<View className="fixed bottom-0 left-0 right-0 bg-white rounded-t-3xl z-50 overflow-hidden">
|
|
{/* 面板头部 */}
|
|
<View className="flex items-center justify-between p-4 border-b border-gray-100">
|
|
<View className="flex items-center">
|
|
<Setting className="text-blue-500 mr-2" size="20" />
|
|
<Text className="text-lg font-bold text-gray-800">管理员面板</Text>
|
|
</View>
|
|
<Button
|
|
size="small"
|
|
type="default"
|
|
onClick={onClose}
|
|
className="text-gray-500"
|
|
>
|
|
关闭
|
|
</Button>
|
|
</View>
|
|
|
|
{/* 功能网格 */}
|
|
<View className="p-4 pb-8">
|
|
<View className="grid grid-cols-2 gap-3">
|
|
{adminFeatures.map((feature) => (
|
|
<View
|
|
key={feature.id}
|
|
className={`${feature.color} border rounded-xl p-4 admin-feature-item`}
|
|
onClick={feature.onClick}
|
|
>
|
|
<View className="flex items-center mb-2">
|
|
{feature.icon}
|
|
<Text className="ml-2 font-medium text-gray-800">
|
|
{feature.title}
|
|
</Text>
|
|
</View>
|
|
<Text className="text-xs text-gray-600 leading-relaxed">
|
|
{feature.description}
|
|
</Text>
|
|
</View>
|
|
))}
|
|
</View>
|
|
</View>
|
|
|
|
{/* 底部提示 */}
|
|
<View className="px-4 pb-4">
|
|
<View className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
|
|
<Text className="text-xs text-yellow-700 text-center">
|
|
💡 管理员功能仅对具有管理权限的用户开放
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default AdminPanel;
|