fix username logic

Tracy-Wei · Tracy-Wei · commit acd5e85bad4e · 2024-03-30T02:51:38.000+08:00
diff --git a/web/index.html b/web/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
+    <title>Camera AI</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/web/src/hooks/index.tsx b/web/src/hooks/index.tsx
@@ -103,6 +103,8 @@ export const AuthProvider = (props: { children: ReactElement }) => {
 
     const { count, rolePermissionData } = await GetMineRoleList();
 
+    setIsGetPermission(true);
+
     setMineRoles({
       count: count ?? 0,
       rolePermissionData: rolePermissionData ?? [],
diff --git a/web/src/pages/login/index.tsx b/web/src/pages/login/index.tsx
@@ -1,36 +1,36 @@
 import { UserOutlined } from "@ant-design/icons";
 import { Button, ConfigProvider, Input } from "antd";
 
-import loginImg from "../../assets/login.png";
+import loginImage from "../../assets/login.png";
 import { useAction } from "./hook";
 
 export const Login = () => {
   const { userInfo, loginLoading, handleOnLogin, updateUserInfo } = useAction();
 
   return (
-    <div className="w-screen h-screen bg-[#2866F1] flex justify-end md:justify-normal">
-      <div className="w-3/5 h-full hidden min-[75rem]:block">
+    <div className="w-screen h-screen bg-[#2866F1] flex justify-end md:justify-normal overflow-hidden no-scrollbar">
+      <div className="w-3/5 h-full hidden lg:block">
         <img
-          src={loginImg}
+          src={loginImage}
           alt=""
           className="w-full h-full bg-cover img-no-darg"
         />
       </div>
-      <div className="w-full min-[75rem]:w-2/5 lg:px-5 min-[75rem]:bg-white bg-[#2866F1] rounded-l-3xl box-border flex items-center justify-center relative">
-        <div className="absolute flex min-[75rem]:hidden top-2 left-2 text-3xl text-white select-none">
+      <div className="w-full lg:w-2/5 lg:px-5 lg:bg-white bg-[#2866F1] rounded-l-3xl box-border flex items-center justify-center relative">
+        <div className="absolute flex lg:hidden top-2 left-2 text-3xl text-white select-none">
           <strong>CAMERA AI</strong>
         </div>
-        <div className="w-96 h-[27.5rem] min-[75rem]:box-border box-content p-3 min-[75rem]:p-0 bg-white flex flex-col justify-center space-y-4 rounded-md min-[75rem]:rounded-none">
-          <strong className="text-3xl select-none">Welcome</strong>
+        <div className="w-96 h-[440px] lg:box-border box-content p-3 lg:p-0 bg-white flex flex-col justify-center space-y-4 rounded-md lg:rounded-none">
+          <strong className="text-3xl select-none">Welcome,</strong>
           <Input
-            placeholder="請輸入帳號"
+            placeholder="Basic usage"
             size="large"
             prefix={<UserOutlined />}
             value={userInfo.userName}
             onChange={(e) => updateUserInfo("userName", e.target.value)}
           />
           <Input.Password
-            placeholder="請輸入密碼"
+            placeholder="Basic usage"
             size="large"
             prefix={<UserOutlined />}
             value={userInfo.password}
diff --git a/web/src/pages/main/hook.ts b/web/src/pages/main/hook.ts
@@ -15,6 +15,7 @@ export const useAction = () => {
     signOut,
     navigate,
     changeLanguage,
+    userName,
     location,
     language,
     pagePermission,
@@ -107,6 +108,7 @@ export const useAction = () => {
   return {
     t,
     status,
+    userName,
     language,
     handleOnJump,
     delModalStatus,
diff --git a/web/src/pages/main/index.tsx b/web/src/pages/main/index.tsx
@@ -37,6 +37,7 @@ export const Main = () => {
     status,
     location,
     openKeys,
+    userName,
     language,
     collapsed,
     passwordDto,
@@ -278,7 +279,7 @@ export const Main = () => {
                 }}
                 size="default"
               >
-                {"".charAt(0)}
+                {userName.charAt(0)}
               </Avatar>
             </div>
 
@@ -288,7 +289,9 @@ export const Main = () => {
               onMouseLeave={() => setStatus(false)}
             >
               <div className="flex relative items-center space-x-1 cursor-pointer w-[5.5rem] justify-center">
-                <div className="text-sm relative select-none w-16 text-center truncate" />
+                <div className="text-sm relative select-none w-16 text-center truncate">
+                  {userName}
+                </div>
                 <img
                   src={chevronDownImg}
                   alt=""
