258 lines
8.5 KiB
TypeScript
258 lines
8.5 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import { ChevronRight, Settings, Bell, LogOut, Smartphone, MessageCircle, Database, FolderOpen } from 'lucide-react';
|
||
import { Card, CardContent } from '@/components/ui/card';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||
import { useAuth } from '@/contexts/AuthContext';
|
||
import { useToast } from '@/components/ui/toast';
|
||
import Layout from '@/components/Layout';
|
||
import BottomNav from '@/components/BottomNav';
|
||
import UnifiedHeader from '@/components/UnifiedHeader';
|
||
import '@/components/Layout.css';
|
||
|
||
export default function Profile() {
|
||
const navigate = useNavigate();
|
||
const { user, logout, isAuthenticated } = useAuth();
|
||
const { toast } = useToast();
|
||
const [showLogoutDialog, setShowLogoutDialog] = useState(false);
|
||
const [userInfo, setUserInfo] = useState<any>(null);
|
||
const [stats, setStats] = useState({
|
||
devices: 12,
|
||
wechat: 25,
|
||
traffic: 8,
|
||
content: 156,
|
||
});
|
||
|
||
// 从localStorage获取用户信息
|
||
useEffect(() => {
|
||
const userInfoStr = localStorage.getItem('userInfo');
|
||
if (userInfoStr) {
|
||
setUserInfo(JSON.parse(userInfoStr));
|
||
}
|
||
}, []);
|
||
|
||
// 用户信息
|
||
const currentUserInfo = {
|
||
name: userInfo?.username || user?.username || "卡若",
|
||
email: userInfo?.email || "zhangsan@example.com",
|
||
role: "管理员",
|
||
joinDate: "2023-01-15",
|
||
lastLogin: "2024-01-20 14:30",
|
||
};
|
||
|
||
// 功能模块数据
|
||
const functionModules = [
|
||
{
|
||
id: "devices",
|
||
title: "设备管理",
|
||
description: "管理您的设备和微信账号",
|
||
icon: <Smartphone className="h-5 w-5 text-blue-500" />,
|
||
count: stats.devices,
|
||
path: "/devices",
|
||
bgColor: "bg-blue-50",
|
||
},
|
||
{
|
||
id: "wechat",
|
||
title: "微信号管理",
|
||
description: "管理微信账号和好友",
|
||
icon: <MessageCircle className="h-5 w-5 text-green-500" />,
|
||
count: stats.wechat,
|
||
path: "/wechat-accounts",
|
||
bgColor: "bg-green-50",
|
||
},
|
||
{
|
||
id: "traffic",
|
||
title: "流量池",
|
||
description: "管理用户流量池和分组",
|
||
icon: <Database className="h-5 w-5 text-purple-500" />,
|
||
count: stats.traffic,
|
||
path: "/traffic-pool",
|
||
bgColor: "bg-purple-50",
|
||
},
|
||
{
|
||
id: "content",
|
||
title: "内容库",
|
||
description: "管理营销内容和素材",
|
||
icon: <FolderOpen className="h-5 w-5 text-orange-500" />,
|
||
count: stats.content,
|
||
path: "/content",
|
||
bgColor: "bg-orange-50",
|
||
},
|
||
];
|
||
|
||
// 加载统计数据
|
||
const loadStats = async () => {
|
||
try {
|
||
// 这里可以调用实际的API
|
||
// const [deviceStats, wechatStats, trafficStats, contentStats] = await Promise.allSettled([
|
||
// getDeviceStats(),
|
||
// getWechatStats(),
|
||
// getTrafficStats(),
|
||
// getContentStats(),
|
||
// ]);
|
||
|
||
// 暂时使用模拟数据
|
||
setStats({
|
||
devices: 12,
|
||
wechat: 25,
|
||
traffic: 8,
|
||
content: 156,
|
||
});
|
||
} catch (error) {
|
||
console.error("加载统计数据失败:", error);
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
loadStats();
|
||
}, []);
|
||
|
||
const handleLogout = () => {
|
||
// 清除本地存储的用户信息
|
||
localStorage.removeItem('token');
|
||
localStorage.removeItem('token_expired');
|
||
localStorage.removeItem('s2_accountId');
|
||
localStorage.removeItem('userInfo');
|
||
setShowLogoutDialog(false);
|
||
logout();
|
||
navigate('/login');
|
||
toast({
|
||
title: '退出成功',
|
||
description: '您已安全退出系统',
|
||
});
|
||
};
|
||
|
||
const handleFunctionClick = (path: string) => {
|
||
navigate(path);
|
||
};
|
||
|
||
if (!isAuthenticated) {
|
||
return (
|
||
<div className="flex h-screen items-center justify-center">
|
||
<div className="text-gray-500">请先登录</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<Layout
|
||
header={
|
||
<UnifiedHeader
|
||
title="我的"
|
||
showBack={false}
|
||
titleColor="blue"
|
||
actions={[
|
||
{
|
||
type: 'icon',
|
||
icon: Bell,
|
||
onClick: () => console.log('Notifications'),
|
||
},
|
||
{
|
||
type: 'icon',
|
||
icon: Settings,
|
||
onClick: () => console.log('Settings'),
|
||
},
|
||
]}
|
||
/>
|
||
}
|
||
footer={<BottomNav />}
|
||
>
|
||
<div className="bg-gray-50 pb-16">
|
||
<div className="p-4 space-y-4">
|
||
{/* 用户信息卡片 */}
|
||
<Card>
|
||
<CardContent className="p-4">
|
||
<div className="flex items-center space-x-4">
|
||
<Avatar className="h-16 w-16">
|
||
<AvatarImage src={userInfo?.avatar || user?.avatar || ''} />
|
||
<AvatarFallback className="bg-gray-200 text-gray-600 text-lg font-medium">
|
||
{currentUserInfo.name.charAt(0)}
|
||
</AvatarFallback>
|
||
</Avatar>
|
||
<div className="flex-1">
|
||
<div className="flex items-center space-x-2 mb-1">
|
||
<h2 className="text-lg font-medium">{currentUserInfo.name}</h2>
|
||
<span className="px-2 py-1 text-xs bg-gradient-to-r from-orange-400 to-orange-500 text-white rounded-full font-medium shadow-sm">
|
||
{currentUserInfo.role}
|
||
</span>
|
||
</div>
|
||
<p className="text-sm text-gray-600 mb-2">{currentUserInfo.email}</p>
|
||
<div className="text-xs text-gray-500">
|
||
<div>最近登录: {currentUserInfo.lastLogin}</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-col space-y-2">
|
||
<Button variant="ghost" size="icon">
|
||
<Bell className="h-5 w-5" />
|
||
</Button>
|
||
<Button variant="ghost" size="icon">
|
||
<Settings className="h-5 w-5" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 我的功能 */}
|
||
<Card>
|
||
<CardContent className="p-4">
|
||
<div className="space-y-2">
|
||
{functionModules.map((module) => (
|
||
<div
|
||
key={module.id}
|
||
className="flex items-center p-4 rounded-lg border hover:bg-gray-50 cursor-pointer transition-colors w-full"
|
||
onClick={() => handleFunctionClick(module.path)}
|
||
>
|
||
<div className={`p-2 rounded-lg ${module.bgColor} mr-3`}>{module.icon}</div>
|
||
<div className="flex-1">
|
||
<div className="font-medium text-sm">{module.title}</div>
|
||
<div className="text-xs text-gray-500">{module.description}</div>
|
||
</div>
|
||
<div className="flex items-center space-x-2">
|
||
<span className="px-2 py-1 text-xs bg-gray-50 text-gray-700 rounded-full border border-gray-200 font-medium shadow-sm">
|
||
{module.count}
|
||
</span>
|
||
<ChevronRight className="h-4 w-4 text-gray-400" />
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 退出登录 */}
|
||
<Button
|
||
variant="outline"
|
||
className="w-full text-red-600 border-red-200 hover:bg-red-50 bg-transparent"
|
||
onClick={() => setShowLogoutDialog(true)}
|
||
>
|
||
<LogOut className="h-4 w-4 mr-2" />
|
||
退出登录
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 退出登录确认对话框 */}
|
||
<Dialog open={showLogoutDialog} onOpenChange={setShowLogoutDialog}>
|
||
<DialogContent>
|
||
<DialogHeader>
|
||
<DialogTitle>确认退出登录</DialogTitle>
|
||
<DialogDescription>
|
||
您确定要退出登录吗？退出后需要重新登录才能使用完整功能。
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
<div className="flex justify-end space-x-2 mt-4">
|
||
<Button variant="outline" onClick={() => setShowLogoutDialog(false)}>
|
||
取消
|
||
</Button>
|
||
<Button variant="destructive" onClick={handleLogout}>
|
||
确认退出
|
||
</Button>
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</Layout>
|
||
);
|
||
}
|