diff --git a/src/App.css b/src/App.css
new file mode 100644
index 0000000..74b5e05
--- /dev/null
+++ b/src/App.css
@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/App.js b/src/App.js
new file mode 100644
index 0000000..50fb6da
--- /dev/null
+++ b/src/App.js
@@ -0,0 +1,23 @@
+import Navbar from './components/Navbar'; 
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import AuthPage from './pages/AuthPage';
+import HomePage from './pages/HomePage';
+import ForumPage from './pages/ForumPage';
+import { UserProvider } from './context/UserContext';
+
+function App() {
+  return (
+    <UserProvider>
+      <Router>
+        <Navbar /> 
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/auth" element={<AuthPage />} />
+          <Route path="/forum" element={<ForumPage />} />
+        </Routes>
+      </Router>
+    </UserProvider>
+  );
+}
+
+export default App;
\ No newline at end of file
diff --git a/src/App.test.js.txt b/src/App.test.js.txt
new file mode 100644
index 0000000..0e79337
--- /dev/null
+++ b/src/App.test.js.txt
@@ -0,0 +1,14 @@
+// import { render, screen } from '@testing-library/react';
+// import { BrowserRouter } from 'react-router-dom';
+// import App from './App';
+
+
+// test('renders learn react link', () => {
+//   render(
+//     <BrowserRouter>
+//       <App />
+//     </BrowserRouter>
+//   );
+//   const linkElement = screen.getByText(/learn react/i);
+//   expect(linkElement).toBeInTheDocument();
+// });
diff --git a/src/components/Auth/Auth.css b/src/components/Auth/Auth.css
new file mode 100644
index 0000000..5073ce3
--- /dev/null
+++ b/src/components/Auth/Auth.css
@@ -0,0 +1,96 @@
+.auth-container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end; /* 使卡片靠右 */
+  min-height: 100vh;
+  font-family: Arial, sans-serif;
+  background-color: #5F4437; /* 设置背景颜色 */
+  padding: 0 2rem; /* 添加左右内边距 */
+}
+
+.auth-container img {
+  margin-left: 250px; 
+}
+
+.auth-form-section {
+  background: #E4D8C9; /* 米白色 */
+  padding: 2rem;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  width: 300px;
+  margin: 0 auto;
+  max-width: 400px; /* 限制卡片最大宽度 */
+}
+
+.form-group {
+  margin-bottom: 1.2rem;
+  display: flex;
+  flex-direction: column;
+}
+
+label {
+  display: block;
+  font-size: 0.9rem;
+  margin-bottom: 0.5rem;
+  color: #4A3B34; /* 棕色 */
+}
+
+.form-input {
+  width: 100%;
+  padding: 0.8rem;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  font-size: 0.9rem;
+  box-sizing: border-box;
+}
+
+.auth-button {
+  padding: 0.8rem 8.4rem;
+  background: #BA929A; /* 粉色 */
+  color: #4A3B34; /* 棕色 */
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  display: inline-block;
+}
+
+.verify-button {
+  padding: 0.5rem 1rem; /* 更小的内边距 */
+  background: #BA929A; /* 粉色 */
+  color: #4A3B34; /* 棕色 */
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 0.8rem; /* 更小的字体 */
+  display: inline-block;
+}
+
+.link-button {
+  background: none;
+  border: none;
+  color: #4A3B34; /* 棕色 */
+  /* text-decoration: underline; */
+  cursor: pointer;
+  font-size: 0.8rem;
+  padding: 0;
+}
+
+.forgot-password {
+  position: absolute;
+  right: 10px; /* 让按钮靠右 */
+  bottom: 5px; /* 调整到底部 */
+  font-size: 12px;
+  background: none;
+  border: none;
+  color: #4A3B34; /* 颜色与 "点击注册" 一致 */
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+
+.register-link, .login-link {
+  text-align: center;
+  font-size: 0.8rem;
+  margin-top: 1rem;
+}
\ No newline at end of file
diff --git a/src/components/Auth/Login.jsx b/src/components/Auth/Login.jsx
new file mode 100644
index 0000000..e7495b5
--- /dev/null
+++ b/src/components/Auth/Login.jsx
@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import './Auth.css';
+import image from './logo.svg'; // 引入图片
+const Login = ({ onRegisterClick }) => {
+  const [formData, setFormData] = useState({
+    username: '',
+    password: ''
+  });
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const response = await fetch('http://localhost:8080/user/login', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(formData),
+      });
+  
+      const result = await response.json();
+      if (response.ok && result.code === "0") {
+        console.log('登录成功:', result);
+        // 处理成功逻辑
+      } else {
+        console.error('登录失败:', result);
+        // 处理失败逻辑
+      }
+    } catch (error) {
+      console.error('请求错误:', error);
+      // 处理请求错误
+    }
+  };
+
+  return (
+    <div className="auth-container">
+      <img 
+        src={image} 
+        alt="描述" 
+        style={{ width: '30%', height: 'auto'}} 
+      />
+      <div className="auth-form-section">
+        {/* <h3>欢迎来到EchoTorent !</h3> */}
+        <h3>用户登录</h3>
+        <form onSubmit={handleSubmit}>
+          <div className="form-group">
+            <label>用户名</label>
+            <input
+              type="text"
+              name="username"
+              placeholder="请输入用户名"
+              value={formData.username}
+              onChange={handleChange}
+              className="form-input"
+            />
+          </div>
+          <div className="form-group">
+            <label>密码</label>
+            <input
+              type="password"
+              name="password"
+              placeholder="请输入密码"
+              value={formData.password}
+              onChange={handleChange}
+              className="form-input"
+            />
+            <button 
+              type="button" 
+              className="link-button forgot-password" 
+              onClick={() => console.log('跳转到忘记密码页面')}
+            >
+              忘记密码？
+            </button>
+          </div>
+          <button type="submit" className="auth-button">
+            登录
+          </button>
+          <p className="register-link">
+            没有账号? 
+            <button onClick={onRegisterClick} className="link-button">
+               点击注册
+            </button>
+          </p>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Login;
\ No newline at end of file
diff --git a/src/components/Auth/Login.test.jsx b/src/components/Auth/Login.test.jsx
new file mode 100644
index 0000000..6da7659
--- /dev/null
+++ b/src/components/Auth/Login.test.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Login from './Login';
+
+describe('Login component', () => {
+  test('renders login form', () => {
+    const onRegisterClick = jest.fn();
+    render(<Login onRegisterClick={onRegisterClick} />);
+
+    const usernameInput = screen.getByPlaceholderText('请输入用户名');
+    const passwordInput = screen.getByPlaceholderText('请输入密码');
+    const loginButton = screen.getByText('登录');
+
+    expect(usernameInput).toBeInTheDocument();
+    expect(passwordInput).toBeInTheDocument();
+    expect(loginButton).toBeInTheDocument();
+  });
+
+  test('calls onRegisterClick when "点击注册" is clicked', () => {
+    const onRegisterClick = jest.fn();
+    render(<Login onRegisterClick={onRegisterClick} />);
+
+    const registerButton = screen.getByText('点击注册');
+    fireEvent.click(registerButton);
+
+    expect(onRegisterClick).toHaveBeenCalled();
+  });
+});
\ No newline at end of file
diff --git a/src/components/Auth/Register.jsx b/src/components/Auth/Register.jsx
new file mode 100644
index 0000000..417864f
--- /dev/null
+++ b/src/components/Auth/Register.jsx
@@ -0,0 +1,121 @@
+import React, { useState } from 'react';
+import './Auth.css';
+import image from './logo.svg'; // 引入图片
+
+const Register = ({ onLoginClick }) => {
+  const [formData, setFormData] = useState({
+    username: '',
+    password: '',
+    email: ''
+  });
+  const [verificationCode, setVerificationCode] = useState('');
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    // 注册逻辑
+  };
+
+  const verifyEmailCode = async () => {
+    try {
+      const response = await fetch('http://localhost:8080/user/verify-code', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          email: formData.email,
+          code: verificationCode,
+        }),
+      });
+
+      const result = await response.json();
+      if (response.ok && result.code === "0") {
+        console.log('邮箱验证成功:', result.msg);
+        // 处理成功逻辑
+      } else {
+        console.error('邮箱验证失败:', result.msg);
+        // 处理失败逻辑
+      }
+    } catch (error) {
+      console.error('请求错误:', error);
+      // 处理请求错误
+    }
+  };
+
+
+  return (
+    <div className="auth-container">
+      <img 
+        src={image} 
+        alt="描述" 
+        style={{ width: '30%', height: 'auto'}} 
+      />
+      <div className="auth-form-section">
+        <h3>用户注册</h3>
+        <form onSubmit={handleSubmit}>
+          <div className="form-group">
+            <label>用户名</label>
+            <input
+              type="text"
+              className="form-input"
+              placeholder="请输入用户名"
+              value={formData.username}
+              onChange={(e) => setFormData({ ...formData, username: e.target.value })}
+              required
+            />
+          </div>
+          <div className="form-group">
+            <label>密码</label>
+            <input
+              type="password"
+              className="form-input"
+              placeholder="请输入密码"
+              value={formData.password}
+              onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+              required
+            />
+          </div>
+          <div className="form-group">
+            <label>邮箱</label>
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <input
+                type="email"
+                className="form-input"
+                placeholder="请输入邮箱"
+                value={formData.email}
+                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                required
+                style={{ flex: 1, marginRight: '10px' }}
+              />
+              <button type="button" onClick={verifyEmailCode} className="verify-button">
+                验证邮箱
+              </button>
+            </div>
+          </div>
+          <div className="form-group">
+            <label>验证码</label>
+            <input
+              type="text"
+              className="form-input"
+              placeholder="请输入邮箱验证码"
+              value={verificationCode}
+              onChange={(e) => setVerificationCode(e.target.value)}
+              required
+            />
+          </div>
+          <button type="submit" className="auth-button">
+            注册
+          </button>
+          <p className="login-link">
+            已有账号? 
+            <button onClick={onLoginClick} className="link-button">
+              点击登录
+            </button>
+          </p>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Register;
\ No newline at end of file
diff --git a/src/components/Auth/Register.test.jsx b/src/components/Auth/Register.test.jsx
new file mode 100644
index 0000000..969e464
--- /dev/null
+++ b/src/components/Auth/Register.test.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Register from './Register';
+
+describe('Register component', () => {
+  test('renders register form', () => {
+    const onLoginClick = jest.fn();
+    render(<Register onLoginClick={onLoginClick} />);
+
+    const usernameInput = screen.getByPlaceholderText('请输入用户名');
+    const passwordInput = screen.getByPlaceholderText('请输入密码');
+    const emailInput = screen.getByPlaceholderText('请输入邮箱');
+    const verifyButton = screen.getByText('验证邮箱');
+    const registerButton = screen.getByText('注册');
+
+    expect(usernameInput).toBeInTheDocument();
+    expect(passwordInput).toBeInTheDocument();
+    expect(emailInput).toBeInTheDocument();
+    expect(verifyButton).toBeInTheDocument();
+    expect(registerButton).toBeInTheDocument();
+  });
+
+  test('calls onLoginClick when "点击登录" is clicked', () => {
+    const onLoginClick = jest.fn();
+    render(<Register onLoginClick={onLoginClick} />);
+
+    const loginButton = screen.getByText('点击登录');
+    fireEvent.click(loginButton);
+
+    expect(onLoginClick).toHaveBeenCalled();
+  });
+});
\ No newline at end of file
diff --git a/src/components/Auth/logo.svg b/src/components/Auth/logo.svg
new file mode 100644
index 0000000..38d62ff
--- /dev/null
+++ b/src/components/Auth/logo.svg
@@ -0,0 +1,24 @@
+<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M40.5 6.74951V74.2496" stroke="#FBF2E3" stroke-width="4" stroke-linecap="round"/>
+<path d="M57.375 20.2498V60.7498" stroke="#FBF2E3" stroke-width="4" stroke-linecap="round"/>
+<path d="M6.75 30.3748V50.6248" stroke="#FBF2E3" stroke-width="4" stroke-linecap="round"/>
+<path d="M74.25 30.3748V50.6248" stroke="#FBF2E3" stroke-width="4" stroke-linecap="round"/>
+<path d="M23.625 20.2498V60.7498" stroke="#FBF2E3" stroke-width="4" stroke-linecap="round"/>
+<g clip-path="url(#clip0_193_2)">
+<mask id="mask0_193_2" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="28" y="27" width="26" height="26">
+<path d="M54 27H28V53H54V27Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_193_2)">
+<path d="M30.1665 43.7918C30.1666 40.271 32.3334 38.937 33.9583 38.3852C35.5831 37.8335 36.6667 37.8335 38.2915 36.2085C39.9163 34.5835 39.9168 31.3335 43.1666 30.2501C46.4163 29.1668 50.2575 30.7918 51.2914 34.5835C52.3253 38.3751 49.3961 43.2501 48.0419 44.8751C46.6877 46.5001 43.9784 49.2085 39.3747 49.7501C34.7711 50.2918 30.1664 47.3126 30.1665 43.7918Z" fill="#4A3B34" stroke="#FBF2E3" stroke-width="2" stroke-linejoin="round"/>
+<path d="M34.5 38.3986C38.2917 43.25 43.7083 38.3986 39.9167 33.5Z" fill="#4A3B34"/>
+<path d="M34.5 38.3986C38.2917 43.25 43.7083 38.3986 39.9167 33.5" stroke="#FBF2E3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M33.9585 38.3851C35.5833 37.8333 36.667 37.8333 38.2918 36.2083C39.9166 34.5833 39.917 31.3333 43.1668 30.25" fill="#4A3B34"/>
+<path d="M33.9585 38.3851C35.5833 37.8333 36.667 37.8333 38.2918 36.2083C39.9166 34.5833 39.917 31.3333 43.1668 30.25" stroke="#FBF2E3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_193_2">
+<rect width="26" height="26" fill="white" transform="translate(28 27)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
new file mode 100644
index 0000000..eed15ec
--- /dev/null
+++ b/src/components/Navbar.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { useUser } from '../context/UserContext';
+import { Link } from 'react-router-dom';
+
+const Navbar = () => {
+  const { user, logout } = useUser();
+
+  return (
+    <nav className="navbar">
+      <div className="logo">EchoTorrent</div>
+      <div className="nav-links">
+        {user ? (
+          <>
+            <Link to="/">主页</Link>
+            <Link to="/profile">个人中心</Link>
+            <Link to="/forum">论坛</Link>
+            <button onClick={logout}>退出登录</button>
+          </>
+        ) : (
+          <>
+            <Link to="/auth">登录/注册</Link>
+            <Link to="/forum">论坛</Link>
+          </>
+        )}
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;
\ No newline at end of file
diff --git a/src/context/UserContext.js b/src/context/UserContext.js
new file mode 100644
index 0000000..64c1b9a
--- /dev/null
+++ b/src/context/UserContext.js
@@ -0,0 +1,37 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+
+const UserContext = createContext();
+
+export const UserProvider = ({ children }) => {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  // 加载本地存储的用户信息
+  useEffect(() => {
+    const storedUser = localStorage.getItem('user');
+    if (storedUser) {
+      setUser(JSON.parse(storedUser));
+    }
+    setLoading(false);
+  }, []);
+
+  // 保存用户信息到本地存储
+  const saveUser = (userData) => {
+    localStorage.setItem('user', JSON.stringify(userData));
+    setUser(userData);
+  };
+
+  // 退出登录
+  const logout = () => {
+    localStorage.removeItem('user');
+    setUser(null);
+  };
+
+  return (
+    <UserContext.Provider value={{ user, loading, saveUser, logout }}>
+      {children}
+    </UserContext.Provider>
+  );
+};
+
+export const useUser = () => useContext(UserContext);
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..ec2585e
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..d563c0f
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
diff --git a/src/logo.svg b/src/logo.svg
new file mode 100644
index 0000000..9dfc1c0
--- /dev/null
+++ b/src/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file
diff --git a/src/pages/AuthPage.jsx b/src/pages/AuthPage.jsx
new file mode 100644
index 0000000..e5effe1
--- /dev/null
+++ b/src/pages/AuthPage.jsx
@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+import Login from '../components/Auth/Login';
+import Register from '../components/Auth/Register';
+
+const AuthPage = () => {
+  const [isRegister, setIsRegister] = useState(false);
+
+  return (
+    <div>
+      {isRegister ? (
+        <Register onLoginClick={() => setIsRegister(false)} />
+      ) : (
+        <Login onRegisterClick={() => setIsRegister(true)} />
+      )}
+    </div>
+  );
+};
+
+export default AuthPage;
\ No newline at end of file
diff --git a/src/pages/AuthPage.test.jsx b/src/pages/AuthPage.test.jsx
new file mode 100644
index 0000000..e398536
--- /dev/null
+++ b/src/pages/AuthPage.test.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import AuthPage from './AuthPage';
+
+describe('AuthPage component', () => {
+  test('switches between login and register forms', () => {
+    render(<AuthPage />);
+
+    const registerButton = screen.getByText('点击注册');
+    fireEvent.click(registerButton);
+
+    const usernameInput = screen.getByPlaceholderText('请输入用户名');
+    const passwordInput = screen.getByPlaceholderText('请输入密码');
+    const emailInput = screen.getByPlaceholderText('请输入邮箱');
+
+    expect(usernameInput).toBeInTheDocument();
+    expect(passwordInput).toBeInTheDocument();
+    expect(emailInput).toBeInTheDocument();
+
+    const loginButton = screen.getByText('点击登录');
+    fireEvent.click(loginButton);
+
+    const loginUsernameInput = screen.getByPlaceholderText('请输入用户名');
+    const loginPasswordInput = screen.getByPlaceholderText('请输入密码');
+    const loginSubmitButton = screen.getByText('登录');
+
+    expect(loginUsernameInput).toBeInTheDocument();
+    expect(loginPasswordInput).toBeInTheDocument();
+    expect(loginSubmitButton).toBeInTheDocument();
+  });
+});
\ No newline at end of file
diff --git a/src/pages/ForumPage.css b/src/pages/ForumPage.css
new file mode 100644
index 0000000..af6bd75
--- /dev/null
+++ b/src/pages/ForumPage.css
@@ -0,0 +1,28 @@
+.forum-container {
+    padding: 20px;
+    background-color: #c13a3a;
+  }
+  
+  .forum-post {
+    margin-bottom: 20px;
+    padding: 15px;
+    background-color: #06e7b6;
+    border: 1px solid #a70dc2;
+    border-radius: 5px;
+  }
+  
+  .forum-post h2 {
+    margin: 0 0 10px;
+  }
+  
+  .forum-post img {
+    max-width: 100%;
+    height: auto;
+    margin-top: 10px;
+  }
+  
+  .forum-comment {
+    padding: 10px;
+    background-color: #9ae815;
+    border-radius: 5px;
+  }
\ No newline at end of file
diff --git a/src/pages/ForumPage.jsx b/src/pages/ForumPage.jsx
new file mode 100644
index 0000000..9734ab5
--- /dev/null
+++ b/src/pages/ForumPage.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import './ForumPage.css';
+
+const ForumPage = () => {
+  return (
+    <div className="forum-container">
+      <h1>论坛</h1>
+      <div className="forum-post">
+        <h2>示例帖子标题</h2>
+        <p>这是一个示例帖子内容，用于测试论坛页面的显示效果。</p>
+      </div>
+      <div className="forum-comment">
+        <p>示例评论内容：这是一条测试评论。</p>
+      </div>
+    </div>
+  );
+};
+
+export default ForumPage;
\ No newline at end of file
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
new file mode 100644
index 0000000..9f3b9ef
--- /dev/null
+++ b/src/pages/HomePage.jsx
@@ -0,0 +1,12 @@
+// src/pages/HomePage.jsx
+import React from 'react';
+
+const HomePage = () => {
+  return (
+    <div>
+      <h1>主页</h1>
+    </div>
+  );
+};
+
+export default HomePage;
\ No newline at end of file
diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js
new file mode 100644
index 0000000..5253d3a
--- /dev/null
+++ b/src/reportWebVitals.js
@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;
diff --git a/src/setupTests.js b/src/setupTests.js
new file mode 100644
index 0000000..8f2609b
--- /dev/null
+++ b/src/setupTests.js
@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';