feat(pages): add login pages

package.json

@@ -32,6 +32,7 @@
     "@umijs/openapi": "^1.12.1",
     "commitizen": "^4.3.0",
     "conventional-changelog-cli": "^5.0.0",
+    "daisyui": "^4.12.10",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
     "postcss": "^8",

src/app/login/page.tsx

@@ -0,0 +1,48 @@
+"use client";
+import Footer from "@/components/footer";
+import { SYSTEM_ROLE } from "@/constants";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export default function Page() {
+  const router = useRouter();
+  const [role, setRole] = useState<string>(SYSTEM_ROLE.NORMAL);
+
+  const handleSelectChange = (e: any) => {
+    setRole(e.target.value);
+  };
+  const handleBtnClick = () => {
+    router.push("/");
+  };
+
+  return (
+    <div className="bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500 w-screen h-screen grid place-content-center">
+      <div className="card card-compact bg-base-100 w-96 shadow-xl flex items-center gap-8 p-10">
+        <div className="avatar">
+          <div className="w-20 rounded-full">
+            <img src="images/avatar.png" alt="avatar.png" />
+          </div>
+        </div>
+        <select
+          className="select select-bordered w-full"
+          onChange={handleSelectChange}
+          value={role}
+        >
+          <option value={SYSTEM_ROLE.ADMIN}>{SYSTEM_ROLE.ADMIN}</option>
+          <option value={SYSTEM_ROLE.NORMAL}>{SYSTEM_ROLE.NORMAL}</option>
+        </select>
+        {role === SYSTEM_ROLE.ADMIN && (
+          <input
+            type="text"
+            className="input input-bordered w-full"
+            placeholder="password"
+          />
+        )}
+        <button className="btn w-full" type="button" onClick={handleBtnClick}>
+          login
+        </button>
+      </div>
+      <Footer />
+    </div>
+  );
+}

src/app/page.tsx

@@ -1,13 +1,11 @@
 import IDock from "@/components/dock";
-import Footer from "@/components/footer";
 import IMenu from "@/components/menu";
 
 export default function Home() {
   return (
-    <div className="h-full flex flex-col">
+    <div className="container-bg">
       <IMenu />
-      {/*<IDock />*/}
-      <Footer />
+      <IDock />
     </div>
   );
 }

src/components/footer/index.tsx

@@ -1,27 +1,24 @@
 export default function () {
   return (
-    <div className="absolute bottom-0  left-[50%] translate-x-[-50%] text-center w-fulltext-[15px] text-[#fff] text-xs">
-      <p className="flex items-center justify-center">
-        <span>Copyright @ 2024 Design by Young &nbsp;</span>
-        <a
-          target="_blank"
-          rel="noreferrer"
-          href=" https://beian.miit.gov.cn/"
-          className="no-underline"
-        >
-          蜀ICP备2022005564号
-        </a>
-      </p>
-      <p className="h-[20px] grid place-content-center">
-        <a
-          target="_blank"
-          rel="noreferrer"
-          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=51082402000177"
-          className="no-underline inline-block w-full"
-        >
-          川公网安备 51082402000177号
-        </a>
-      </p>
+    <div className="absolute bottom-5 w-full text-white text-sm tracking-wider flex items-center justify-center">
+      <span>Copyright @ 2024 Design by Young &nbsp;&nbsp;</span>
+      <a
+        target="_blank"
+        rel="noreferrer"
+        href=" https://beian.miit.gov.cn/"
+        className="no-underline"
+      >
+        蜀ICP备2022005564号
+      </a>
+      &nbsp;&nbsp;
+      <a
+        target="_blank"
+        rel="noreferrer"
+        href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=51082402000177"
+        className="no-underline"
+      >
+        川公网安备 51082402000177号
+      </a>
     </div>
   );
 }

src/constants/index.ts

@@ -0,0 +1,6 @@
+export const SYSTEM_ROLE = {
+  /* 管理员 */
+  ADMIN: "admin",
+  /* 普通用户 */
+  NORMAL: "normal",
+};

src/styles/globals.css

@@ -4,20 +4,20 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
+.container-bg {
   width: 100vw;
   height: 100vh;
   background-size: cover;
   background: url("/images/bg/macos-01-1920x1080.jpg") no-repeat fixed;
 }
 
 @media only screen and (min-width: 2560px) and (max-width: 3840px) {
-  body {
+  .container-bg {
     background-image: url("/images/bg/macos-01-2560x1440.jpg");
   }
 }
 @media only screen and (min-width: 3840px) {
-  body {
+  .container-bg {
     background-image: url("/images/bg/macos-01-3840x2160.jpg");
   }
 }

tailwind.config.ts

@@ -1,3 +1,4 @@
+import daisyui from "daisyui";
 import type { Config } from "tailwindcss";
 
 const config: Config = {
@@ -18,6 +19,6 @@ const config: Config = {
       },
     },
   },
-  plugins: [],
+  plugins: [daisyui],
 };
 export default config;