feat: 本次提交更新内容如下

样式没问题了，库存流量

nkebao/src/pages/profile/Profile.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { ChevronRight, Settings, Bell, LogOut } from 'lucide-react';
-import { Card } from '@/components/ui/card';
+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';
@@ -9,21 +9,21 @@ 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';
 
-const menuItems = [
-  { href: '/devices', label: '设备管理' },
-  { href: '/wechat-accounts', label: '微信号管理' },
-  { href: '/traffic-pool', label: '流量池' },
-  { href: '/content', label: '内容库' },
-];
-
 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(() => {
@@ -33,6 +33,82 @@ export default function Profile() {
     }
   }, []);
 
+  // 用户信息
+  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');
@@ -43,11 +119,15 @@ export default function Profile() {
     logout();
     navigate('/login');
     toast({
-      title: '已退出登录',
-      description: '感谢使用存客宝',
+      title: '退出成功',
+      description: '您已安全退出系统',
     });
   };
 
+  const handleFunctionClick = (path: string) => {
+    navigate(path);
+  };
+
   if (!isAuthenticated) {
     return (
       <div className="flex h-screen items-center justify-center">
@@ -55,88 +135,105 @@ export default function Profile() {
       </div>
     );
   }
+
   return (
     <Layout
       header={
-        <div className="bg-white/80 backdrop-blur-sm border-b">
-        <div className="flex justify-between items-center p-4">
-          <h1 className="text-xl font-semibold text-blue-600">我的</h1>
-          <div className="flex items-center space-x-2">
-            <Button variant="ghost" size="icon">
-              <Settings className="w-5 h-5" />
-            </Button>
-            <Button variant="ghost" size="icon">
-              <Bell className="w-5 h-5" />
-            </Button>
-          </div>
-        </div>
-        </div>
+        <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-gradient-to-b from-blue-50 to-white">
-      <div className="p-4 space-y-6">
-        {/* 用户信息卡片 */}
-        <Card className="p-6">
-          <div className="flex items-center space-x-4">
-            <Avatar className="w-20 h-20">
-              <AvatarImage src={userInfo?.avatar || user?.avatar || ''} />
-              <AvatarFallback className="bg-gradient-to-br from-blue-500 to-purple-600 text-white text-xl font-semibold shadow-lg">
-                {(userInfo?.username || user?.username || '用户').slice(0, 2).toUpperCase()}
-              </AvatarFallback>
-            </Avatar>
-            <div className="flex-1">
-              <h2 className="text-xl font-semibold text-blue-600">
-                {userInfo?.username || user?.username || '用户'}
-              </h2>
-              <p className="text-gray-500">
-                账号: {userInfo?.account || user?.account || Math.floor(10000000 + Math.random() * 90000000).toString()}
-              </p>
-              <div className="mt-2">
-                <Button 
-                  variant="outline" 
-                  size="sm"
-                  onClick={() => {
-                    toast({
-                      title: '功能开发中',
-                      description: '编辑资料功能正在开发中',
-                    });
-                  }}
-                >
-                  编辑资料
-                </Button>
+      <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>
-            </div>
-          </div>
-        </Card>
+            </CardContent>
+          </Card>
 
-        {/* 功能菜单 */}
-        <Card className="divide-y">
-          {menuItems.map((item) => (
-            <div
-              key={item.href || item.label}
-              className="p-4 flex items-center justify-between cursor-pointer hover:bg-gray-50"
-              onClick={() => (item.href ? navigate(item.href) : null)}
-            >
-              <div className="flex items-center">
-                <span>{item.label}</span>
+          {/* 我的功能 */}
+          <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>
-              <ChevronRight className="w-5 h-5 text-gray-400" />
-            </div>
-          ))}
-        </Card>
+            </CardContent>
+          </Card>
 
-        {/* 退出登录按钮 */}
-        <Button
-          variant="ghost"
-          className="w-full text-red-500 hover:text-red-600 hover:bg-red-50 mt-6"
-          onClick={() => setShowLogoutDialog(true)}
-        >
-          <LogOut className="w-5 h-5 mr-2" />
-          退出登录
-        </Button>
-      </div>
+          {/* 退出登录 */}
+          <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>