From de9fd8a73e6872a2bf8843b334c1d51503f1f0c5 Mon Sep 17 00:00:00 2001 From: beppeb Date: Wed, 16 Jul 2025 03:27:25 +0000 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E9=A6=96?= =?UTF-8?q?=E9=A1=B5=EF=BC=8C=E7=99=BB=E5=BD=95=E5=90=8E=E8=B7=B3=E8=BD=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 index.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..8d75afb --- /dev/null +++ b/index.html @@ -0,0 +1,58 @@ + + + + + + 首页 - 演示项目 + + + +
+
+

欢迎来到演示项目

+ +
+
+ +
+
+

欢迎，用户!

+

您已成功登录系统。

+
+
+ + + + + + + \ No newline at end of file -- 2.49.1 From 5941191ed64d26c84e1ea5192689bd97a70a51f5 Mon Sep 17 00:00:00 2001 From: beppeb Date: Wed, 16 Jul 2025 03:27:25 +0000 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=99=BB?= =?UTF-8?q?=E5=BD=95=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- login.html | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 login.html diff --git a/login.html b/login.html new file mode 100644 index 0000000..8dd4c68 --- /dev/null +++ b/login.html @@ -0,0 +1,37 @@ + + + + + + 用户登录 - 演示项目 + + + + + + + + \ No newline at end of file -- 2.49.1 From 54651daee16941330484164312172b2a24c3859c Mon Sep 17 00:00:00 2001 From: beppeb Date: Wed, 16 Jul 2025 03:27:26 +0000 Subject: [PATCH 3/5] =?UTF-8?q?style:=20=E6=96=B0=E5=A2=9E=E7=99=BB?= =?UTF-8?q?=E5=BD=95=E5=92=8C=E9=A6=96=E9=A1=B5=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/styles.css | 203 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 203 insertions(+) create mode 100644 css/styles.css diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..39e74ee --- /dev/null +++ b/css/styles.css @@ -0,0 +1,203 @@ +/* 基本样式重置 */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Microsoft YaHei', Arial, sans-serif; + line-height: 1.6; + color: #333; + background-color: #f4f4f4; +} + +.container { + width: 90%; + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +/* 头部样式 */ +header { + background-color: #3498db; + color: #fff; + padding: 1rem 0; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); +} + +header h1 { + margin: 0; + font-size: 1.8rem; +} + +nav { + margin-top: 1rem; +} + +nav ul { + list-style: none; + display: flex; +} + +nav ul li { + margin-right: 20px; +} + +nav ul li a { + color: #fff; + text-decoration: none; + padding: 5px 10px; + border-radius: 3px; + transition: background-color 0.3s; +} + +nav ul li a:hover, +nav ul li a.active { + background-color: rgba(255,255,255,0.2); +} + +/* 页脚样式 */ +footer { + background-color: #333; + color: #fff; + padding: 1rem 0; + margin-top: 2rem; + text-align: center; +} + +/* 主内容区域 */ +main { + padding: 2rem 0; +} + +.welcome-section { + background-color: #fff; + padding: 2rem; + border-radius: 5px; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); + margin-top: 2rem; +} + +/* 登录页面样式 */ +.login-page { + background-color: #f9f9f9; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; +} + +.login-container { + width: 100%; + max-width: 400px; + padding: 1rem; +} + +.login-box { + background-color: #fff; + padding: 2rem; + border-radius: 5px; + box-shadow: 0 2px 15px rgba(0,0,0,0.1); +} + +.login-box h1 { + text-align: center; + margin-bottom: 2rem; + color: #3498db; +} + +.form-group { + margin-bottom: 1.5rem; +} + +label { + display: block; + margin-bottom: 0.5rem; + font-weight: bold; +} + +input[type="text"], +input[type="password"] { + width: 100%; + padding: 0.8rem; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 1rem; + transition: border-color 0.3s; +} + +input[type="text"]:focus, +input[type="password"]:focus { + border-color: #3498db; + outline: none; + box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2); +} + +.btn-login { + background-color: #3498db; + color: #fff; + border: none; + padding: 0.8rem; + width: 100%; + font-size: 1rem; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.3s; +} + +.btn-login:hover { + background-color: #2980b9; +} + +.error-message { + color: #e74c3c; + font-size: 0.85rem; + margin-top: 5px; + display: block; +} + +.form-message { + text-align: center; + margin-top: 1rem; + font-weight: bold; +} + +.form-message.error { + color: #e74c3c; +} + +.form-message.success { + color: #2ecc71; +} + +/* 响应式设计 */ +@media screen and (max-width: 768px) { + header h1 { + font-size: 1.5rem; + } + + nav ul { + flex-direction: column; + } + + nav ul li { + margin-right: 0; + margin-bottom: 0.5rem; + } +} + +@media screen and (max-width: 480px) { + .login-container { + padding: 0.5rem; + } + + .login-box { + padding: 1.5rem; + } + + .login-box h1 { + font-size: 1.5rem; + } +} \ No newline at end of file -- 2.49.1 From 0caf063e0944b83852b01f2fde21f9f59a109d0d Mon Sep 17 00:00:00 2001 From: beppeb Date: Wed, 16 Jul 2025 03:27:27 +0000 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=E7=99=BB=E5=BD=95=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E8=A1=A8=E5=8D=95=E9=AA=8C=E8=AF=81=E4=B8=8E=E6=A8=A1?= =?UTF-8?q?=E6=8B=9F=E7=99=BB=E5=BD=95=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/login.js | 121 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 121 insertions(+) create mode 100644 js/login.js diff --git a/js/login.js b/js/login.js new file mode 100644 index 0000000..e6f9f35 --- /dev/null +++ b/js/login.js @@ -0,0 +1,121 @@ +/** + * 登录功能实现 + * 原生JavaScript，不依赖框架 + */ + +document.addEventListener('DOMContentLoaded', function() { + const loginForm = document.getElementById('loginForm'); + const usernameInput = document.getElementById('username'); + const passwordInput = document.getElementById('password'); + const usernameError = document.getElementById('username-error'); + const passwordError = document.getElementById('password-error'); + const formMessage = document.getElementById('form-message'); + + // 用于演示的模拟用户数据 + const mockUsers = [ + { username: 'admin', password: 'admin123' }, + { username: 'user', password: 'user123' } + ]; + + /** + * 表单提交处理 + */ + loginForm.addEventListener('submit', function(e) { + e.preventDefault(); + + // 重置错误信息 + resetErrors(); + + // 获取输入值 + const username = usernameInput.value.trim(); + const password = passwordInput.value.trim(); + + // 验证表单 + let isValid = validateForm(username, password); + + if (isValid) { + // 模拟登录请求 + mockLogin(username, password); + } + }); + + /** + * 表单验证 + */ + function validateForm(username, password) { + let isValid = true; + + // 验证用户名 + if (username === '') { + displayError(usernameError, '请输入用户名'); + isValid = false; + } else if (username.length < 3) { + displayError(usernameError, '用户名长度必须至少为3个字符'); + isValid = false; + } + + // 验证密码 + if (password === '') { + displayError(passwordError, '请输入密码'); + isValid = false; + } else if (password.length < 6) { + displayError(passwordError, '密码长度必须至少为6个字符'); + isValid = false; + } + + return isValid; + } + + /** + * 显示错误信息 + */ + function displayError(element, message) { + element.textContent = message; + } + + /** + * 重置错误信息 + */ + function resetErrors() { + usernameError.textContent = ''; + passwordError.textContent = ''; + formMessage.textContent = ''; + formMessage.className = 'form-message'; + } + + /** + * 模拟登录 + */ + function mockLogin(username, password) { + // 显示加载状态 + formMessage.textContent = '登录中...'; + formMessage.className = 'form-message'; + + // 模拟网络延迟 + setTimeout(function() { + // 检查用户是否存在 + const user = mockUsers.find(user => + user.username === username && user.password === password + ); + + if (user) { + // 登录成功 + formMessage.textContent = '登录成功，即将跳转...'; + formMessage.className = 'form-message success'; + + // 保存登录状态到本地存储 + localStorage.setItem('isLoggedIn', 'true'); + localStorage.setItem('username', username); + + // 重定向到首页 + setTimeout(function() { + window.location.href = 'index.html'; + }, 1000); + } else { + // 登录失败 + formMessage.textContent = '用户名或密码错误'; + formMessage.className = 'form-message error'; + } + }, 1000); + } +}); \ No newline at end of file -- 2.49.1 From 0aadca89a7c77106cec67be9e42c0ac223d14a85 Mon Sep 17 00:00:00 2001 From: beppeb Date: Wed, 16 Jul 2025 03:27:28 +0000 Subject: [PATCH 5/5] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=E7=99=BB?= =?UTF-8?q?=E5=BD=95=E7=8A=B6=E6=80=81=E6=A3=80=E6=B5=8B=E4=B8=8E=E9=80=80?= =?UTF-8?q?=E5=87=BA=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/main.js | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 js/main.js diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..f417269 --- /dev/null +++ b/js/main.js @@ -0,0 +1,56 @@ +/** + * 主页JavaScript + */ + +document.addEventListener('DOMContentLoaded', function() { + // 检查用户是否已登录 + checkLoginStatus(); + + // 初始化页面事件 + initEvents(); +}); + +/** + * 检查用户登录状态 + */ +function checkLoginStatus() { + const isLoggedIn = localStorage.getItem('isLoggedIn'); + + if (!isLoggedIn) { + // 如果未登录，重定向到登录页面 + window.location.href = 'login.html'; + return; + } + + // 获取并显示用户名 + const username = localStorage.getItem('username'); + if (username) { + document.getElementById('username').textContent = username; + } +} + +/** + * 初始化页面事件 + */ +function initEvents() { + // 退出登录 + const logoutBtn = document.getElementById('logout'); + if (logoutBtn) { + logoutBtn.addEventListener('click', function(e) { + e.preventDefault(); + logout(); + }); + } +} + +/** + * 退出登录 + */ +function logout() { + // 清除本地存储中的登录信息 + localStorage.removeItem('isLoggedIn'); + localStorage.removeItem('username'); + + // 重定向到登录页面 + window.location.href = 'login.html'; +} \ No newline at end of file -- 2.49.1