feat(nav,site): 完善导航界面并完成登录功能

完善了导航界面，优化了布局和样式。完成了用户登录功能，包括表单验证。
2025-11-16 22:20:23 +08:00
parent 7cc246fbf3
commit 696ec0689b
29 changed files with 1011 additions and 3 deletions
--- a/src/components/Login.tsx
+++ b/src/components/Login.tsx
@@ -0,0 +1,84 @@
+import { useState, type Dispatch, type FC, type SetStateAction } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from "./ui/dialog";
+import { Input } from "./ui/input";
+import { Button } from "./ui/button";
+import { LoginApi, MeApi } from "@/api";
+import { message } from "@/utils/message";
+import { useUserStore } from "@/stores";
+
+interface LoginProps {
+  className?: string;
+  isOpen: boolean;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+}
+
+const Login: FC<LoginProps> = ({ className = "", isOpen, setIsOpen }) => {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const { user, setUser } = useUserStore();
+
+  const handlerLogin = async () => {
+    // console.log(username, password);
+    const data = { username, password };
+
+    const res = await LoginApi({ data });
+    if (res.code === 0) {
+      const res2 = await MeApi({});
+      if (res2.code !== 0) {
+        message(res2.msg);
+        return;
+      }
+      setUser(res2.data);
+      setIsOpen(false);
+      setUsername("");
+      setPassword("");
+      message("登录成功！");
+    } else {
+      message(res.msg);
+    }
+  };
+
+  return (
+    <div className={className}>
+      <Dialog open={isOpen} onOpenChange={() => setIsOpen(!isOpen)}>
+        <DialogContent>
+          <DialogTitle>Login View</DialogTitle>
+          <DialogDescription></DialogDescription>
+          <div className="flex-row flex items-center space-x-4">
+            <span className="flex-1">用户名: </span>
+            <Input
+              className="flex-7"
+              autoComplete="off"
+              id="username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              placeholder="请输入用户名"
+            />
+          </div>
+          <div className="flex-row flex items-center space-x-4">
+            <span className="flex-1">密码: </span>
+            <Input
+              className="flex-7"
+              autoComplete="off"
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="请输入密码"
+            />
+          </div>
+          <Button className="mt-5" onClick={handlerLogin}>
+            登录
+          </Button>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+};
+
+export default Login;