feat: ✨ 运营管理系统后台登录鉴权及后台框架开发

src/pages/AdminLogin.tsx

@@ -1,7 +1,8 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Form, Input, Button, Card, Typography, message, Space, Checkbox } from 'antd';
 import { UserOutlined, LockOutlined, SafetyOutlined } from '@ant-design/icons';
 import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../contexts/AuthContext';
 
 const { Title, Text } = Typography;
 
@@ -11,11 +12,20 @@ const { Title, Text } = Typography;
  */
 const AdminLogin: React.FC = () => {
   const [loading, setLoading] = useState(false);
+  const { login, isAuthenticated } = useAuth();
   const navigate = useNavigate();
+  const [form] = Form.useForm();
+
+  // 如果已登录，重定向到管理后台
+  useEffect(() => {
+    if (isAuthenticated) {
+      navigate('/admin/dashboard', { replace: true });
+    }
+  }, [isAuthenticated, navigate]);
 
   /**
    * 处理登录表单提交
-   * @param values - 表单值（故意未使用）
+   * @param values - 表单值
    */
   const handleLogin = async (values: { 
     username: string; 
@@ -24,19 +34,13 @@ const AdminLogin: React.FC = () => {
   }) => {
     setLoading(true);
     try {
-      // 模拟登录请求
-      await new Promise(resolve => setTimeout(resolve, 1200));
+      const success = await login(values.username, values.password);
       
-      // 这里应该是实际的API调用
-      // const response = await loginAdmin(values);
-      
-      // 模拟登录成功
-      message.success('登录成功！欢迎进入运营管理系统！');
-      navigate('/admin/dashboard');
-    } catch {
-      // 故意使用 values 参数以避免 TypeScript 未使用警告
-      void values;
-      message.error('登录失败，请检查用户名和密码！');
+      if (success) {
+        navigate('/admin/dashboard', { replace: true });
+      }
+    } catch (error) {
+      // 错误已在AuthContext中处理
     } finally {
       setLoading(false);
     }