feat: 登录模块完成

nkebao/src/pages/profile/Profile.tsx

@@ -1,5 +1,153 @@
 import React from 'react';
+import { useAuth } from '../../contexts/AuthContext';
+import { useToast } from '../../components/ui/toast';
+import { LogOut, User, Settings, Shield, Bell } from 'lucide-react';
 
 export default function Profile() {
-  return <div>个人中心页</div>;
+  const { user, logout, isAuthenticated } = useAuth();
+  const { toast } = useToast();
+
+  const handleLogout = () => {
+    logout();
+    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">
+        <div className="text-gray-500">请先登录</div>
+      </div>
+    );
+  }
+
+  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>
+        </div>
+
+        {/* 菜单列表 */}
+        <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>
+          ))}
+        </div>
+
+        {/* 退出登录按钮 */}
+        <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>
+      </div>
+    </div>
+  );
 }