feat: 功能迁移过来了，接下来优化样式

nkebao/src/pages/profile/Profile.tsx

@@ -1,67 +1,50 @@
-import React from 'react';
+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 { 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 { LogOut, User, Settings, Shield, Bell } from 'lucide-react';
+
+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);
+
+  // 从localStorage获取用户信息
+  useEffect(() => {
+    const userInfoStr = localStorage.getItem('userInfo');
+    if (userInfoStr) {
+      setUserInfo(JSON.parse(userInfoStr));
+    }
+  }, []);
 
   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 menuItems = [
-    {
-      icon: <User className="h-5 w-5" />,
-      title: '个人信息',
-      description: '查看和编辑个人资料',
-      onClick: () => {
-        toast({
-          title: '功能开发中',
-          description: '个人信息编辑功能正在开发中',
-        });
-      }
-    },
-    {
-      icon: <Settings className="h-5 w-5" />,
-      title: '账户设置',
-      description: '密码、安全设置等',
-      onClick: () => {
-        toast({
-          title: '功能开发中',
-          description: '账户设置功能正在开发中',
-        });
-      }
-    },
-    {
-      icon: <Shield className="h-5 w-5" />,
-      title: '隐私安全',
-      description: '隐私设置和安全选项',
-      onClick: () => {
-        toast({
-          title: '功能开发中',
-          description: '隐私安全功能正在开发中',
-        });
-      }
-    },
-    {
-      icon: <Bell className="h-5 w-5" />,
-      title: '消息通知',
-      description: '通知设置和消息管理',
-      onClick: () => {
-        toast({
-          title: '功能开发中',
-          description: '消息通知功能正在开发中',
-        });
-      }
-    }
-  ];
-
   if (!isAuthenticated) {
     return (
       <div className="flex h-screen items-center justify-center">
@@ -71,83 +54,102 @@ export default function Profile() {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 p-4">
-      <div className="max-w-md mx-auto space-y-6">
-        {/* 用户信息卡片 */}
-        <div className="bg-white rounded-lg shadow-sm p-6">
-          <div className="flex items-center space-x-4">
-            <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
-              {user?.avatar ? (
-                <img 
-                  src={user.avatar} 
-                  alt="头像" 
-                  className="w-16 h-16 rounded-full object-cover"
-                />
-              ) : (
-                <User className="h-8 w-8 text-blue-600" />
-              )}
-            </div>
-            <div className="flex-1">
-              <h2 className="text-xl font-semibold text-gray-900">
-                {user?.username || '用户'}
-              </h2>
-              <p className="text-gray-500">
-                {user?.account || '暂无手机号'}
-              </p>
-              {user?.s2_accountId && (
-                <p className="text-sm text-gray-400">
-                  ID: {user.s2_accountId}
-                </p>
-              )}
-            </div>
+    <div className="flex-1 bg-gradient-to-b from-blue-50 to-white pb-16">
+      <header className="sticky top-0 z-10 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>
+      </header>
 
-        {/* 菜单列表 */}
-        <div className="bg-white rounded-lg shadow-sm">
-          {menuItems.map((item, index) => (
-            <div key={index}>
-              <button
-                onClick={item.onClick}
-                className="w-full flex items-center space-x-4 p-4 hover:bg-gray-50 transition-colors"
-              >
-                <div className="text-gray-400">
-                  {item.icon}
-                </div>
-                <div className="flex-1 text-left">
-                  <h3 className="font-medium text-gray-900">{item.title}</h3>
-                  <p className="text-sm text-gray-500">{item.description}</p>
-                </div>
-                <div className="text-gray-400">
-                  <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                  </svg>
-                </div>
-              </button>
-              {index < menuItems.length - 1 && (
-                <div className="border-b border-gray-100 mx-4" />
-              )}
+      <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>
+                {(userInfo?.username || user?.username || '用户').slice(0, 2)}
+              </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>
+            </div>
+          </div>
+        </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>
+              </div>
+              <ChevronRight className="w-5 h-5 text-gray-400" />
             </div>
           ))}
-        </div>
+        </Card>
 
         {/* 退出登录按钮 */}
-        <div className="bg-white rounded-lg shadow-sm">
-          <button
-            onClick={handleLogout}
-            className="w-full flex items-center space-x-4 p-4 text-red-600 hover:bg-red-50 transition-colors"
-          >
-            <LogOut className="h-5 w-5" />
-            <span className="font-medium">退出登录</span>
-          </button>
-        </div>
-
-        {/* 版本信息 */}
-        <div className="text-center text-sm text-gray-400">
-          <p>存客宝 v1.0.0</p>
-          <p className="mt-1">© 2024 存客宝. All rights reserved.</p>
-        </div>
+        <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>
+
+      {/* 退出登录确认对话框 */}
+      <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>
     </div>
   );
 }