blandarebiter/AIGC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: AIGC项目完整代码

Browse Source
This commit is contained in:
AIGC Developer
2025-10-21 16:50:33 +08:00
commit 47c8e02ab0
137 changed files with 30676 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

292
demo/src/main/resources/templates/login.html Normal file
View File

@@ -0,0 +1,292 @@
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户登录 - AIGC Demo</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style>
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.login-container {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
padding: 3rem;
width: 100%;
max-width: 450px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.login-header {
text-align: center;
margin-bottom: 2rem;
}
.login-header h2 {
color: #333;
font-weight: 600;
margin-bottom: 0.5rem;
}
.login-header p {
color: #666;
font-size: 0.9rem;
}
.form-floating {
margin-bottom: 1rem;
}
.form-control {
border: 2px solid #e9ecef;
border-radius: 10px;
padding: 1rem 0.75rem;
font-size: 1rem;
transition: all 0.3s ease;
}
.form-control:focus {
border-color: #667eea;
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}
.btn-login {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
border-radius: 10px;
padding: 0.75rem 2rem;
font-weight: 600;
font-size: 1rem;
color: white;
width: 100%;
transition: all 0.3s ease;
margin-bottom: 1rem;
}
.btn-login:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
color: white;
}
.form-check-input:checked {
background-color: #667eea;
border-color: #667eea;
}
.alert {
border: none;
border-radius: 10px;
margin-bottom: 1rem;
}
.alert-success {
background: linear-gradient(135deg, #d4edda, #c3e6cb);
color: #155724;
}
.alert-danger {
background: linear-gradient(135deg, #f8d7da, #f5c6cb);
color: #721c24;
}
.login-footer {
text-align: center;
margin-top: 2rem;
padding-top: 1rem;
border-top: 1px solid #e9ecef;
}
.login-footer a {
color: #667eea;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
.login-footer a:hover {
color: #764ba2;
}
.language-switcher {
margin-top: 1rem;
}
.language-switcher a {
color: #666;
text-decoration: none;
margin: 0 0.5rem;
font-size: 0.9rem;
}
.language-switcher a:hover {
color: #667eea;
}
.demo-info {
background: rgba(102, 126, 234, 0.1);
border-radius: 10px;
padding: 1rem;
margin-top: 1rem;
font-size: 0.85rem;
color: #666;
}
.loading {
display: none;
}
.loading.show {
display: inline-block;
}
</style>
</head>
<body>
<div class="login-container">
<div class="login-header">
<h2><i class="fas fa-rocket me-2"></i>AIGC Demo</h2>
<p>欢迎回来，请登录您的账户</p>
</div>
<!-- Success Message -->
<div id="msg" class="alert alert-success" style="display: none;"></div>
<!-- Error Message -->
<div th:if="${param.error}" class="alert alert-danger">
<i class="fas fa-exclamation-triangle me-2"></i>
<span th:text="#{msg.login.error}">用户名或密码错误</span>
</div>
<!-- Logout Message -->
<div th:if="${param.logout}" class="alert alert-success">
<i class="fas fa-check-circle me-2"></i>
<span th:text="#{msg.logout.success}">您已退出登录</span>
</div>
<form th:action="@{/login}" method="post" id="loginForm">
<div class="form-floating">
<input type="text" class="form-control" id="username" name="username"
placeholder="用户名" required autocomplete="username">
<label for="username">
<i class="fas fa-user me-2"></i>用户名
</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="password" name="password"
placeholder="密码" required autocomplete="current-password">
<label for="password">
<i class="fas fa-lock me-2"></i>密码
</label>
</div>
<div class="form-check mb-3">
<input type="checkbox" class="form-check-input" id="remember-me" name="remember-me">
<label class="form-check-label" for="remember-me">
<i class="fas fa-clock me-2"></i>记住我
</label>
</div>
<button type="submit" class="btn btn-login" id="loginBtn">
<span class="loading">
<i class="fas fa-spinner fa-spin me-2"></i>登录中...
</span>
<span class="login-text">
<i class="fas fa-sign-in-alt me-2"></i>登录
</span>
</button>
</form>
<div class="login-footer">
<p class="mb-2">
<span th:text="#{hint.noaccount}">还没有账号？</span>
<a th:href="@{/register}">立即注册</a>
</p>
<div class="language-switcher">
<a th:href="@{|?lang=zh_CN|}">中文</a> |
<a th:href="@{|?lang=en|}">English</a>
</div>
<div class="demo-info">
<i class="fas fa-info-circle me-2"></i>
<strong>演示账户：</strong><br>
用户名: demo, 密码: demo<br>
用户名: admin, 密码: admin
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Show registration success message
function fromQuery(name) {
const url = new URL(window.location.href);
return url.searchParams.get(name);
}
window.addEventListener('DOMContentLoaded', function() {
const registered = fromQuery('registered');
if (registered) {
const msgDiv = document.getElementById('msg');
msgDiv.textContent = '注册成功，请登录';
msgDiv.style.display = 'block';
}
});
// Form submission with loading state
document.getElementById('loginForm').addEventListener('submit', function(e) {
const loginBtn = document.getElementById('loginBtn');
const loading = loginBtn.querySelector('.loading');
const loginText = loginBtn.querySelector('.login-text');
// Show loading state
loading.classList.add('show');
loginText.style.display = 'none';
loginBtn.disabled = true;
});
// Auto-hide alerts after 5 seconds
setTimeout(function() {
const alerts = document.querySelectorAll('.alert');
alerts.forEach(function(alert) {
alert.style.transition = 'opacity 0.5s ease';
alert.style.opacity = '0';
setTimeout(function() {
alert.style.display = 'none';
}, 500);
});
}, 5000);
// Form validation
document.getElementById('loginForm').addEventListener('submit', function(e) {
const username = document.getElementById('username').value.trim();
const password = document.getElementById('password').value.trim();
if (!username || !password) {
e.preventDefault();
alert('请填写用户名和密码');
return false;
}
});
</script>
</body>
</html>