Feat/UI enhancement (#26)

* feat: logo title update * feat: add app table in home screen
NJUPT-SAST · Jul 27, 2024 · 1ba7d69 · 1ba7d69
1 parent 6665904
commit 1ba7d69
Show file tree

Hide file tree

Showing 31 changed files with 713 additions and 136 deletions.
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-pnpm lint
+pnpm format && git add .
diff --git a/app/(tourist)/login/2/page.tsx b/app/(tourist)/login/2/page.tsx
@@ -56,7 +56,6 @@ const LoginStep2 = () => {
             setLoading(true);
             if (typeof args.password === "string") {
               const password = args.password;
-              console.log(loginTicket);
               userLogin(
                 password,
                 loginTicket ?? "",

diff --git a/app/(tourist)/login/layout.tsx b/app/(tourist)/login/layout.tsx
@@ -1,8 +1,10 @@
 import BackLayout from "@/components/Layout/BackLayout";
 import { Layout } from "@/components/Layout";
+import LinkLogo from "@/public/linklogo.svg";
+import Image from "next/image";
 import type { ReactNode } from "react";
-
 import type { Metadata } from "next";
+
 export const metadata: Metadata = {
   title: "Login",
 };
@@ -15,7 +17,9 @@ export default function LoginLayout(props: { children: ReactNode }) {
       <BackLayout type="orange" />
       <Layout>
         {" "}
-        <div className={"pageTitle"}>{"<sast link>"}</div>
+        <div className={"pageTitle"}>
+          <Image src={LinkLogo} width={220} height={40} alt="link logo" />
+        </div>
         <div className={"globalContainer"}>{children}</div>
       </Layout>
     </>

diff --git a/app/(tourist)/login/loginStep1.tsx b/app/(tourist)/login/loginStep1.tsx
@@ -99,7 +99,7 @@ const LoginStep1 = () => {
               });
           }}
         >
-          <div className={`${styles.inputDiv}`}>
+          <div className="w-full">
             <InputWithLabel
               setErrorState={setError}
               veridate={veridate}

diff --git a/app/(tourist)/login/page.module.scss b/app/(tourist)/login/page.module.scss
@@ -3,6 +3,7 @@
   gap: 17px;
   align-items: center;
   justify-content: space-between;
+  width: 332px;
   height: 36vh;
   min-height: 220px;
   max-height: 310px;
@@ -54,14 +55,14 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: start;
 
   height: 100%;
   min-height: 500px;
   max-height: 590px;
 
   .inputDiv {
-    width: 330px;
+    width: 100%;
     height: calc(36vh);
     min-height: 220px;
     max-height: 310px;

diff --git a/app/(tourist)/regist/page.module.scss b/app/(tourist)/regist/page.module.scss
@@ -21,7 +21,7 @@
     max-height: 310px;
     padding: 28px 0 85px;
     .descript {
-      width: 290px;
+      padding: 0 4px;
 
       font-size: 14px;
       text-align: initial;
@@ -41,10 +41,6 @@
 
 .mailInput {
   position: relative;
-  input {
-    width: 121px;
-    padding: 1px 180px 1px 13px;
-  }
 }
 
 .inputDiv.passInput {

diff --git a/app/(tourist)/reset/page.module.scss b/app/(tourist)/reset/page.module.scss
@@ -15,13 +15,13 @@
     flex-direction: column;
     gap: 12px;
     align-items: center;
-    width: 330px;
+    width: 332px;
     height: 36vh;
     min-height: 220px;
     max-height: 310px;
     padding: 28px 0 85px;
     .descript {
-      width: 290px;
+      padding: 0 4px;
 
       font-size: 14px;
       text-align: initial;
@@ -41,10 +41,6 @@
 
 .mailInput {
   position: relative;
-  input {
-    width: 121px;
-    padding: 1px 180px 1px 13px;
-  }
 }
 
 .inputDiv.passInput {

diff --git a/app/(user)/home/@appPanel/default.tsx b/app/(user)/home/@appPanel/default.tsx
@@ -48,7 +48,12 @@ const AppPanel = () => {
             className={classNames(styles.appItem)}
           >
             <div className={classNames(styles.appLogo)}>
-              <Image src={aprove} alt={"approve system"} />
+              <Image
+                width={32}
+                height={32}
+                src={aprove}
+                alt={"approve system"}
+              />
             </div>
 
             <span className={styles.appName}>审批系统</span>

diff --git a/app/(user)/home/@appPanel/page.module.scss b/app/(user)/home/@appPanel/page.module.scss
@@ -33,7 +33,7 @@
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  width: calc(100vw - 40px);
+  width: 100%;
   height: calc(150vh - 190px);
   padding: 20px;
   border-radius: 10px 10px 0 0;
@@ -50,7 +50,7 @@
     top: 0;
     left: -80px;
 
-    width: 374px;
+    width: max-content;
     height: 100vh;
     padding: 20px 20px 20px 100px;
     border-radius: 0 10px 10px 0;
@@ -118,7 +118,6 @@
     align-items: center;
     justify-content: center;
     width: calc(88px + max(0px, min(100vw - 360px, 60px) / 6));
-    height: 68px;
     padding: 11px 0px 19px 0px;
     border: 1px solid #000;
     border-radius: 10px;

diff --git a/app/(user)/home/@infoPanel/page.module.scss b/app/(user)/home/@infoPanel/page.module.scss
@@ -39,7 +39,7 @@
   flex-direction: column;
   gap: 8px;
   align-items: flex-start;
-  width: calc(100vw - 40px);
+  width: 100%;
   height: calc(150vh - 190px);
   padding: 20px;
   border-radius: 10px 10px 0 0;
@@ -97,7 +97,7 @@
     display: flex;
     flex-direction: column;
     gap: 18px;
-    width: calc(100% - 30px);
+    width: 100%;
     height: 100%;
     padding: 16px 15px 14px;
     overflow-y: auto;
@@ -200,7 +200,7 @@
     width: 100%;
     .anchor,
     .button {
-      width: min(338px, calc(100% - 15px));
+      width: 100%;
     }
     .anchor {
       @media screen and (min-width: 790px) {
@@ -214,7 +214,6 @@
       color: #ff584d;
 
       @media screen and (min-width: 790px) {
-        width: 6rem;
         height: 1.75rem;
         border: 2px solid #ff584d;
 
@@ -239,7 +238,6 @@
   flex-direction: column;
   gap: 1rem;
   order: -1;
-  width: calc(100% - 60px);
   padding: 20px 29px 20px 29px;
   border: 1px solid rgba(92, 92, 92, 0.27);
 

diff --git a/app/(user)/home/@profilePanel/page.module.scss b/app/(user)/home/@profilePanel/page.module.scss
@@ -3,7 +3,6 @@
   align-items: self-start;
   justify-content: space-between;
   order: -2;
-  width: calc(100% - 60px);
   margin: 0px;
   padding: 20px 20px 20px 40px;
 
@@ -61,7 +60,6 @@
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
-  width: calc(100% - 60px);
   margin: 0px;
   padding: 30px;
 

diff --git a/app/(user)/home/edit/page.module.scss b/app/(user)/home/edit/page.module.scss
@@ -8,7 +8,7 @@
   display: flex;
   flex-direction: column;
   gap: 40px;
-  width: calc(100% - 60px);
+  width: 100%;
 
   @media screen and (min-width: 500px) {
     padding: 30px 30px 40px;
@@ -43,23 +43,24 @@
     line-height: normal;
   }
   .formContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: center;
     width: 100%;
-    max-width: 332px;
-    @media screen and (min-width: 512px) and (max-width: 789px) {
-      padding: 0 0 0 40px;
-    }
-    @media screen and (min-width: 902px) {
-      padding: 0 0 0 40px;
-    }
   }
   .button {
     width: min(314px, calc(100% - 18px));
+    margin-top: 2.5rem;
 
     font-size: 1.125rem;
   }
   .input {
-    width: min(298px, calc(100% - 34px));
+    width: 100%;
+    padding: 8px 14px;
     border: 4px solid #000;
+
+    font-size: 16px;
   }
   .emailInput {
     color: #808080;

diff --git a/app/(user)/home/edit/page.tsx b/app/(user)/home/edit/page.tsx
@@ -117,7 +117,7 @@ const Edit = () => {
   return (
     <>
       {!avatarFile ? (
-        <PageTransition className={styles.settingPanelList}>
+        <div className={styles.settingPanelList}>
           <div className={classNames(styles.settingPanel)}>
             <Back />
             <div className={styles.settingPanelTitle}>头像设置</div>
@@ -209,9 +209,9 @@ const Edit = () => {
               </div>
             </div>
           </form>
-        </PageTransition>
+        </div>
       ) : (
-        <PageTransition
+        <div
           style={{ alignItems: "center" }}
           className={styles.settingPanelList}
         >
@@ -240,7 +240,7 @@ const Edit = () => {
           <Button loading={uploadLoading} onClick={handleAvatarUpdate}>
             确认提交
           </Button>
-        </PageTransition>
+        </div>
       )}
     </>
   );

diff --git a/app/(user)/home/edit/safety/page.tsx b/app/(user)/home/edit/safety/page.tsx
@@ -14,7 +14,7 @@ const Safety = () => {
   const route = useRouter();
   const userBasicInfo = useAppSelector((state) => state.userBasicInfo);
   return (
-    <PageTransition className={styles.settingPanelList}>
+    <div className={styles.settingPanelList}>
       <div className={classNames(styles.settingPanel)}>
         <Back />
         <div className={styles.settingPanelTitle}>邮箱设置</div>
@@ -40,7 +40,7 @@ const Safety = () => {
           </Button>
         </div>
       </div>
-    </PageTransition>
+    </div>
   );
 };
 

diff --git a/app/(user)/home/layout.tsx b/app/(user)/home/layout.tsx
@@ -12,19 +12,14 @@ const Layout = (props: {
   profilePanel: ReactNode;
   getInfo: ReactNode;
 }) => {
-  // console.log(props);
   const { children, infoPanel, appPanel, profilePanel, getInfo } = props;
   return (
     <>
       <BackLayout type="yellow" />
       <TopBar />
       {getInfo}
       <PageTransition
-        style={{
-          display: "flex",
-          width: "100vw",
-          justifyContent: "center",
-        }}
+        className="flex w-full justify-center px-5"
         position="bottomToTop"
       >
         <div className={classNames(styles.homeContainer)}>

diff --git a/app/(user)/home/page.module.scss b/app/(user)/home/page.module.scss
@@ -2,7 +2,7 @@
   display: grid;
   grid-template-columns: 1fr;
   gap: 30px;
-  width: calc(100vw - 40px);
+  width: 100%;
   max-width: 865px;
   margin: auto;
   padding: 25px 0;
@@ -24,6 +24,29 @@
   flex-direction: column;
   gap: 30px;
   width: 100%;
-  max-width: 475px;
-  margin: auto;
+  // margin: auto;
+}
+
+.settingPanelListLayout {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+  width: 100%;
+
+  @media screen and (min-width: 500px) {
+    padding: 30px 30px 40px;
+    border: 1px solid var(--card-highlight, rgba(92, 92, 92, 0.27));
+    border-radius: 10px;
+
+    background-color: rgba(255, 255, 255, 0.5);
+    box-shadow: 0px 4px 30px 0px rgba(68, 68, 68, 0.05);
+    backdrop-filter: blur(2px);
+  }
+}
+
+.title {
+  margin: 0;
+
+  font-weight: 600;
+  font-size: 1.5rem;
 }