- 初始化项目
- 添加登录注册功能
Change-Id: I4ceb5400dca3042f2f31232eaf246df83d57b9be
登录注册
Change-Id: Iee4aca2a0871ab46a95208ece13053e92b615b2e
init main page
Change-Id: I6c59617a37bbe71f115a43beb884c8596fb29c39
init main page, fix bug
Change-Id: I3eba8d45f017bbf303eb7462f305b5ca5661342f
首页
Change-Id: I7f6798780864af433b54f1c73721f631900d87f5
首页
Change-Id: I8368ab349bfa014ab306d0bf4bd4ced0e361cdd5
diff --git a/src/pages/AuthPage/AuthPage.css b/src/pages/AuthPage/AuthPage.css
new file mode 100644
index 0000000..5073ce3
--- /dev/null
+++ b/src/pages/AuthPage/AuthPage.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/pages/AuthPage/AuthPage.jsx b/src/pages/AuthPage/AuthPage.jsx
new file mode 100644
index 0000000..4238214
--- /dev/null
+++ b/src/pages/AuthPage/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/AuthPage.test.jsx b/src/pages/AuthPage/AuthPage.test.jsx
new file mode 100644
index 0000000..e398536
--- /dev/null
+++ b/src/pages/AuthPage/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