feat: implement user authentication with login functionality

- Add auth-api for handling login requests. - Update index.ts to export AuthApi. - Modify HeroLayout to display username or login link based on authentication state. - Create LoginPage component for user login. - Update router to include login route with EmptyLayout. - Configure WebClient to include credentials in requests. - Add auth-slice for managing authentication state in Redux. - Update Redux store to include auth reducer. - Define LoginRequest and User types in types/index.ts. - Configure Vite to proxy API requests to the backend server.
2026-04-14 11:17:31 +08:00
parent b000336d22
commit ac76150915
12 changed files with 249 additions and 98 deletions
@@ -0,0 +1,67 @@
+import { useState } from "react"
+import { useNavigate } from "react-router-dom"
+import { App, Button, Card, Form, Input, Typography } from "antd"
+import { AuthApi } from "@/api"
+import { useAppDispatch } from "@/store"
+import { setCurrentUser } from "@/store/auth-slice"
+import { LoginRequest } from "@/types"
+
+export default function LoginPage() {
+  const navigate = useNavigate()
+  const { message } = App.useApp()
+  const dispatch = useAppDispatch()
+  const [loading, setLoading] = useState(false)
+
+  async function onFinish(values: LoginRequest) {
+    setLoading(true)
+    try {
+      const user = await AuthApi.login(values)
+      dispatch(setCurrentUser(user))
+      message.success(`欢迎回来，${user.username}`)
+      navigate("/firearms")
+    } catch {
+      message.error("登录失败，请检查帐号或密码")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-100 px-4 py-10 sm:py-16">
+      <div className="mx-auto max-w-md">
+        <Card bordered={false} className="shadow-sm">
+          <Typography.Title level={3} className="!mb-2 text-center">
+            登录
+          </Typography.Title>
+          <Typography.Paragraph className="!mb-6 text-center !text-gray-500">
+            使用你的帐号登录后即可继续操作
+          </Typography.Paragraph>
+
+          <Form<LoginRequest> layout="vertical" onFinish={onFinish} requiredMark={false}>
+            <Form.Item<LoginRequest>
+              name="principle"
+              label="帐号"
+              rules={[{ required: true, message: "请输入帐号" }]}
+            >
+              <Input autoComplete="username" placeholder="请输入帐号" />
+            </Form.Item>
+
+            <Form.Item<LoginRequest>
+              name="credential"
+              label="密码"
+              rules={[{ required: true, message: "请输入密码" }]}
+            >
+              <Input.Password autoComplete="current-password" placeholder="请输入密码" />
+            </Form.Item>
+
+            <Form.Item className="!mb-0">
+              <Button type="primary" htmlType="submit" loading={loading} block>
+                登录
+              </Button>
+            </Form.Item>
+          </Form>
+        </Card>
+      </div>
+    </div>
+  )
+}