Merge pull request #157 from MuxiKeStack/refactor/spzy/login-page

🔨 refactor：重构登录页

src/modules/login/components/AuthForm.tsx

@@ -0,0 +1,118 @@
+import { Button, Checkbox, Image, Input, Text, View } from '@tarojs/components';
+import Taro from '@tarojs/taro';
+import { memo, useCallback, useState } from 'react';
+
+import handleLogin from '@/common/api/handleLogin';
+import Icon from '@/common/assets/img/login/logo.png';
+import { FloatingWindow } from '@/common/components';
+
+type UserData = {
+  studentId: string;
+  password: string;
+  isAgreeTerms: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  userInfo: any;
+};
+
+const AuthForm: React.FC = memo(() => {
+  const [isPopperOpened, setIsPopperOpened] = useState<boolean>(false);
+  const [userData, setUserData] = useState<UserData>({
+    studentId: '',
+    password: '',
+    isAgreeTerms: false,
+    userInfo: null,
+  });
+
+  const handleGetUserProfile = useCallback(() => {
+    void Taro.getUserProfile({
+      desc: '用于完善用户资料',
+      success: (res) => {
+        setUserData({ ...userData, userInfo: res.userInfo });
+        Taro.setStorageSync('userInfo', res.userInfo);
+      },
+      fail: (err) => {
+        // eslint-disable-next-line no-console
+        console.error('获取用户信息失败:', err);
+      },
+    });
+  }, [userData]);
+
+  const handleLoginClick = useCallback(() => {
+    if (userData.isAgreeTerms) {
+      if (!userData.userInfo) {
+        handleGetUserProfile();
+      }
+      void handleLogin({
+        student_id: userData.studentId,
+        password: userData.password,
+      });
+    } else {
+      void Taro.showToast({
+        icon: 'error',
+        title: '请确认隐私条例',
+      });
+    }
+  }, [handleGetUserProfile, userData]);
+
+  return (
+    <>
+      <View className="absolute top-0 mt-[15vh] flex w-full flex-col items-center gap-4">
+        <View className="h-40 w-40 overflow-hidden rounded-2xl shadow-xl">
+          <Image src={Icon as string} className="h-full w-full"></Image>
+        </View>
+        <Text className="text-3xl font-semibold tracking-widest text-[#FFD777]">
+          木犀课栈
+        </Text>
+        <View className="flex flex-col items-center">
+          <View className="flex w-full flex-col items-center gap-3 px-[5%]">
+            <Input
+              className="h-12 w-full rounded-l-full rounded-r-full bg-gray-100 px-5"
+              placeholder="学号/昵称"
+              value={userData.studentId}
+              onInput={(e) => setUserData({ ...userData, studentId: e.detail.value })}
+            ></Input>
+            <Input
+              className="h-12 w-full rounded-l-full rounded-r-full bg-gray-100 px-5"
+              placeholder="密码"
+              value={userData.password}
+              password
+              onInput={(e) => setUserData({ ...userData, password: e.detail.value })}
+            ></Input>
+            <Text className="text-sm text-gray-500">Forget your password?</Text>
+          </View>
+          <View className="my-16 flex flex-col gap-2">
+            <Button
+              className="text-bold h-12 w-[90vw] rounded-l-full rounded-r-full border-none bg-[#ffd777] text-white"
+              onClick={handleLoginClick}
+            >
+              学号登录
+            </Button>
+          </View>
+        </View>
+        <View className="flex items-center gap-2">
+          <Checkbox
+            className="-m-1"
+            value=""
+            checked={userData.isAgreeTerms}
+            onClick={() =>
+              setUserData({ ...userData, isAgreeTerms: !userData.isAgreeTerms })
+            }
+          ></Checkbox>
+          <View className="flex w-full items-center">
+            <Text className="text-sm">我已同意</Text>
+            <View
+              className="text-sm text-blue-500"
+              onClick={() => setIsPopperOpened(true)}
+            >
+              《木犀课栈隐私条例》
+            </View>
+            <Text className="text-sm">内的所有内容</Text>
+          </View>
+        </View>
+      </View>
+      {isPopperOpened && <FloatingWindow />}
+    </>
+  );
+});
+
+export default AuthForm;

src/modules/login/components/Login.tsx

@@ -0,0 +1,18 @@
+import { Image, View } from '@tarojs/components';
+import { memo } from 'react';
+
+import TopBackground from '@/common/assets/img/login/top_background.png';
+
+import AuthForm from './AuthForm';
+
+const Login: React.FC = memo(() => (
+  <View className="h-screen w-full">
+    <Image
+      src={TopBackground as string}
+      className="relative left-[-3vh] top-[-13vh] h-[50vh] w-[120%]"
+    ></Image>
+    <AuthForm />
+  </View>
+));
+
+export default Login;

src/modules/login/index.ts

@@ -0,0 +1,3 @@
+import Login from './components/Login';
+
+export default Login;

src/pages/login/index.scss

@@ -1,107 +1,5 @@
-.login_top_background {
-  width: 110vw;
-  height: 30vh;
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  position: relative;
-  top: -13vh;
-  left: -3vh;
-}
-.login {
-  width: 100vw;
-  height: 100vh;
-}
-.logo {
-  display: flex;
-  align-items: center;
-  width: 40vw;
-  height: 40vw;
-  resize: horizontal;
-  margin: auto;
-}
-.login_content {
-  height: 60hv;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.login_main {
-  height: 40vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-}
-.login_main_text {
-  height: 18vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-}
-.login_main_button {
-  height: 20vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-evenly;
-  align-items: center;
-  //padding-top: -10vh;
-}
-.login_input {
-  width: 90vw;
-  height: 6vh;
-  margin: 0;
-  padding: 0 4vh;
-  box-sizing: border-box;
-  font-size: 2.5vh;
-  background-color: #f7f7f7;
-  border-radius: 5vh;
-  box-sizing: border-box;
-}
-.login_link {
-  font-size: 30px;
-  color: #c5c5c5;
-}
-.login_button {
-  width: 90vw;
-  height: 6vh;
-  color: #fff;
-  font-size: 2.5vh;
-  background-color: #ffd777;
-  border-radius: 5vh;
-  border: none;
-  font-weight: bold;
-}
 .guest_button {
   color: #565656;
   background-color: #fff;
   border: 1px solid;
 }
-
-.login_terms {
-  height: 5vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.login_checkbox {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-.login_terms_text {
-  font-size: 30px;
-  color: #707070;
-}
-
-.floating_window_switch {
-  padding: 0;
-  margin: 0;
-  border: none;
-  font-size: 30px;
-  color: #3055cf;
-  background-color: transparent;
-}

src/pages/login/index.tsx

@@ -1,112 +1,9 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-
-/* eslint-disable no-console */
-/* eslint-disable import/first */
-import { Button, Checkbox, Image, Input, Text, View } from '@tarojs/components';
-import Taro, { useLoad } from '@tarojs/taro';
-import React, { useState } from 'react';
+import { memo } from 'react';
 
 import './index.scss';
 
-import handleLogin from '@/common/api/handleLogin';
-import iconLogo from '@/common/assets/img/login/logo.png';
-import top_background from '@/common/assets/img/login/top_background.png';
-import { FloatingWindow } from '@/common/components';
-
-type LoginProps = object;
-
-const Login: React.FC<LoginProps> = () => {
-  useLoad(() => {
-    console.log('Page loaded.');
-  });
-
-  const [floatingWindowOpenning, setFloatingWindowOpenning] = useState(false);
-  const [studentId, setStudentId] = useState('');
-  const [password, setPassword] = useState('');
-  const [agreeTerms, setAgreeTerms] = useState(false);
-  const [userInfo, setUserInfo] = useState(null);
-  const handleGetUserProfile = () => {
-    void Taro.getUserProfile({
-      desc: '用于完善用户资料',
-      success: (res) => {
-        console.log('用户信息:', res.userInfo);
-
-        // @ts-expect-error
-        setUserInfo(res.userInfo);
-        Taro.setStorageSync('userInfo', res.userInfo);
-      },
-      fail: (err) => {
-        console.error('获取用户信息失败:', err);
-      },
-    });
-  };
-
-  const handleLoginClick = () => {
-    if (agreeTerms) {
-      if (!userInfo) {
-        handleGetUserProfile();
-      }
-      void handleLogin({ student_id: studentId, password: password }).then((r) =>
-        console.log(r)
-      );
-    } else {
-      void Taro.showToast({
-        icon: 'error',
-        title: '请确认隐私条例',
-      });
-    }
-  };
+import Login from '../../modules/login';
 
-  return (
-    <View className="login">
-      <Image src={top_background} className="login_top_background"></Image>
-      <View className="login_content">
-        <Image src={iconLogo} className="logo"></Image>
-        <View className="login_main">
-          <View className="login_main_text">
-            <Input
-              className="login_input"
-              placeholder="学号/昵称"
-              value={studentId}
-              onInput={(e) => setStudentId(e.detail.value)}
-            ></Input>
-            <Input
-              className="login_input"
-              placeholder="密码"
-              value={password}
-              password
-              onInput={(e) => setPassword(e.detail.value)}
-            ></Input>
-            <Text className="login_link">Forget your password?</Text>
-          </View>
-          <View className="login_main_button">
-            <Button className="login_button" onClick={handleLoginClick}>
-              学号登录
-            </Button>
-          </View>
-        </View>
-        <View className="login_terms">
-          <Checkbox
-            value=""
-            checked={agreeTerms}
-            onClick={() => setAgreeTerms(!agreeTerms)}
-            className="login_checkbox"
-          ></Checkbox>
-          <Text className="login_terms_text">我已同意</Text>
-          <View
-            className="floating_window_switch"
-            onClick={() => setFloatingWindowOpenning(true)}
-          >
-            《木犀课栈隐私条例》
-          </View>
-          <Text className="login_terms_text">内的所有内容</Text>
-        </View>
-      </View>
-      {floatingWindowOpenning && <FloatingWindow />}
-    </View>
-  );
-};
+const Page: React.FC = memo(() => <Login />);
 
-export default Login;
+export default Page;