1.添加登录页面。

src/LoginPage.js

@@ -1,3 +1,50 @@
-export default function (){
+import React, { useState } from 'react';
-    return <div>Loin Page</div>
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+
+import styles from './LoginPage.module.css';
+
+export default function () {
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
+
+
+
+    const handleInputChange = (event) => {
+        const { name, value } = event.target;
+        if (name === 'username') setUsername(value);
+        if (name === 'password') setPassword(value);
+    };
+
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        console.log(`Username: ${username}\nPassword: ${password}`);
+    };
+
+    return (
+        <form className={styles.form} onSubmit={handleSubmit}>
+            <TextField
+                name="username"
+                label="请输入手机号码"
+                variant="outlined"
+                value={username}
+                onChange={handleInputChange}
+            />
+            <TextField
+                name="password"
+                label="请输入密码"
+                type="password"
+                variant="outlined"
+                value={password}
+                onChange={handleInputChange}
+            />
+            <Button
+                type="submit"
+                variant="contained"
+                color="primary"
+            >
+                登录
+            </Button>
+        </form>
+    );
 }

src/LoginPage.module.css

@@ -0,0 +1,7 @@
+.form {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}