配置Vite代理、API请求封装、JWT认证上下文、登录页面、路由鉴权

2026-07-14 11:30:33 +08:00
parent a0ced7bdde
commit 6d437b4e82
8 changed files with 264 additions and 17 deletions
@@ -0,0 +1,54 @@
+import { useState } from 'react'
+import { Form, Input, Button, Card, message } from 'antd'
+import { MessageOutlined } from '@ant-design/icons'
+import { useNavigate } from 'react-router-dom'
+import { useAuth } from '@/stores/auth'
+
+const Login = () => {
+  const [form] = Form.useForm()
+  const [loading, setLoading] = useState(false)
+  const { login } = useAuth()
+  const navigate = useNavigate()
+
+  const onFinish = async (values: { username: string; password: string }) => {
+    setLoading(true)
+    try {
+      await login(values.username, values.password)
+      message.success('登录成功')
+      navigate('/agent/dashboard', { replace: true })
+    } catch {
+      message.error('用户名或密码错误')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-neutral-100 flex items-center justify-center p-4">
+      <Card className="w-full max-w-[400px] shadow-lg !rounded-xl" bordered={false}>
+        <div className="text-center mb-6">
+          <div className="w-12 h-12 rounded-xl bg-blue-500 flex items-center justify-center mx-auto mb-3">
+            <MessageOutlined className="text-white text-xl" />
+          </div>
+          <h1 className="text-xl font-bold text-neutral-800">客服云</h1>
+          <p className="text-sm text-neutral-400 mt-1">在线客服系统</p>
+        </div>
+        <Form form={form} layout="vertical" onFinish={onFinish} autoComplete="off">
+          <Form.Item name="username" label="用户名" rules={[{ required: true, message: '请输入用户名' }]}>
+            <Input placeholder="admin / agent1" size="large" />
+          </Form.Item>
+          <Form.Item name="password" label="密码" rules={[{ required: true, message: '请输入密码' }]}>
+            <Input.Password placeholder="password123" size="large" />
+          </Form.Item>
+          <Form.Item>
+            <Button type="primary" htmlType="submit" block size="large" loading={loading}>
+              登录
+            </Button>
+          </Form.Item>
+        </Form>
+      </Card>
+    </div>
+  )
+}
+
+export default Login