loser/st
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 重构用户端前端为vue开发，完善基础类和角色相关接口

Browse Source
This commit is contained in:
loser
2026-02-10 21:55:45 +08:00
parent db934ebed7
commit 56e821b222
92 changed files with 18377 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
web-app/public/auth.html Normal file
View File

@@ -0,0 +1,175 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>云酒馆 - 登录注册</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/auth.css">
</head>
<body>
<div class="auth-container">
<!-- 背景装饰 -->
<div class="auth-background">
<div class="gradient-orb orb-1"></div>
<div class="gradient-orb orb-2"></div>
<div class="gradient-orb orb-3"></div>
</div>
<!-- 主内容区 -->
<div class="auth-card">
<!-- Logo 区域 -->
<div class="auth-header">
<img src="img/logo.png" alt="云酒馆" class="auth-logo">
<h1 class="auth-title">云酒馆</h1>
<p class="auth-subtitle">与 AI 角色开启奇妙对话</p>
</div>
<!-- 标签页切换 -->
<div class="auth-tabs">
<button class="auth-tab active" data-tab="login">
<i class="fa-solid fa-right-to-bracket"></i>
登录
</button>
<button class="auth-tab" data-tab="register">
<i class="fa-solid fa-user-plus"></i>
注册
</button>
</div>
<!-- 登录表单 -->
<form id="loginForm" class="auth-form active">
<div class="form-group">
<label for="loginUsername">
<i class="fa-solid fa-user"></i>
用户名
</label>
<input type="text" id="loginUsername" name="username" placeholder="请输入用户名" required
autocomplete="username">
</div>
<div class="form-group">
<label for="loginPassword">
<i class="fa-solid fa-lock"></i>
密码
</label>
<div class="password-input-wrapper">
<input type="password" id="loginPassword" name="password" placeholder="请输入密码" required
autocomplete="current-password">
<button type="button" class="password-toggle" data-target="loginPassword">
<i class="fa-solid fa-eye"></i>
</button>
</div>
</div>
<div class="form-actions">
<label class="remember-me">
<input type="checkbox" id="rememberMe">
<span>记住我</span>
</label>
<a href="#" class="forgot-password">忘记密码？</a>
</div>
<button type="submit" class="auth-button">
<i class="fa-solid fa-right-to-bracket"></i>
立即登录
</button>
</form>
<!-- 注册表单 -->
<form id="registerForm" class="auth-form">
<div class="form-group">
<label for="registerUsername">
<i class="fa-solid fa-user"></i>
用户名
</label>
<input type="text" id="registerUsername" name="username" placeholder="3-32个字符" required
minlength="3" maxlength="32" autocomplete="username">
<span class="form-hint">支持字母、数字、下划线</span>
</div>
<div class="form-group">
<label for="registerPassword">
<i class="fa-solid fa-lock"></i>
密码
</label>
<div class="password-input-wrapper">
<input type="password" id="registerPassword" name="password" placeholder="6-32个字符" required
minlength="6" maxlength="32" autocomplete="new-password">
<button type="button" class="password-toggle" data-target="registerPassword">
<i class="fa-solid fa-eye"></i>
</button>
</div>
<span class="form-hint">建议使用字母、数字、符号组合</span>
</div>
<div class="form-group">
<label for="registerPasswordConfirm">
<i class="fa-solid fa-lock"></i>
确认密码
</label>
<div class="password-input-wrapper">
<input type="password" id="registerPasswordConfirm" name="passwordConfirm"
placeholder="请再次输入密码" required minlength="6" maxlength="32"
autocomplete="new-password">
<button type="button" class="password-toggle" data-target="registerPasswordConfirm">
<i class="fa-solid fa-eye"></i>
</button>
</div>
</div>
<div class="form-group">
<label for="registerNickname">
<i class="fa-solid fa-signature"></i>
昵称（可选）
</label>
<input type="text" id="registerNickname" name="nickName" placeholder="设置你的显示昵称"
maxlength="50">
</div>
<div class="form-group">
<label for="registerEmail">
<i class="fa-solid fa-envelope"></i>
邮箱（可选）
</label>
<input type="email" id="registerEmail" name="email" placeholder="用于找回密码"
autocomplete="email">
</div>
<button type="submit" class="auth-button">
<i class="fa-solid fa-user-plus"></i>
立即注册
</button>
</form>
<!-- 错误/成功提示 -->
<div id="messageBox" class="message-box"></div>
</div>
<!-- 页脚 -->
<div class="auth-footer">
<p>© 2026 云酒馆 | Powered by AI</p>
</div>
</div>
<!-- 加载动画 -->
<div id="loadingOverlay" class="loading-overlay">
<div class="loading-spinner">
<i class="fa-solid fa-circle-notch fa-spin"></i>
<span>处理中...</span>
</div>
</div>
<!-- FontAwesome -->
<link href="css/fontawesome.min.css" rel="stylesheet">
<link href="css/solid.min.css" rel="stylesheet">
<!-- Auth Script -->
<script src="scripts/auth.js" type="module"></script>
</body>
</html>

517
web-app/public/css/auth.css Normal file
View File

@@ -0,0 +1,517 @@
/* ===== 全局样式 ===== */
:root {
--primary-color: #6366f1;
--primary-hover: #4f46e5;
--primary-light: #818cf8;
--danger-color: #ef4444;
--success-color: #10b981;
--warning-color: #f59e0b;
--bg-primary: #0f172a;
--bg-secondary: #1e293b;
--bg-tertiary: #334155;
--text-primary: #f1f5f9;
--text-secondary: #cbd5e1;
--text-tertiary: #94a3b8;
--border-color: #334155;
--border-radius: 12px;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.2);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.3);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', 'Noto Sans', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
min-height: 100vh;
overflow-x: hidden;
}
/* ===== 认证容器 ===== */
.auth-container {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
position: relative;
}
/* ===== 背景装饰 ===== */
.auth-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.gradient-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.5;
animation: float 20s infinite ease-in-out;
}
.orb-1 {
width: 500px;
height: 500px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
top: -150px;
left: -150px;
animation-delay: 0s;
}
.orb-2 {
width: 400px;
height: 400px;
background: linear-gradient(135deg, #ec4899, #f43f5e);
bottom: -100px;
right: -100px;
animation-delay: 7s;
}
.orb-3 {
width: 300px;
height: 300px;
background: linear-gradient(135deg, #14b8a6, #06b6d4);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-delay: 14s;
}
@keyframes float {
0%, 100% {
transform: translate(0, 0) scale(1);
}
33% {
transform: translate(30px, -30px) scale(1.1);
}
66% {
transform: translate(-20px, 20px) scale(0.9);
}
}
/* ===== 认证卡片 ===== */
.auth-card {
position: relative;
z-index: 1;
background: rgba(30, 41, 59, 0.8);
backdrop-filter: blur(20px);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: 40px;
width: 100%;
max-width: 480px;
box-shadow: var(--shadow-xl);
animation: slideIn 0.5s ease-out;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===== 头部区域 ===== */
.auth-header {
text-align: center;
margin-bottom: 32px;
}
.auth-logo {
width: 80px;
height: 80px;
margin-bottom: 16px;
animation: logoFloat 3s ease-in-out infinite;
}
@keyframes logoFloat {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.auth-title {
font-size: 32px;
font-weight: 700;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 8px;
}
.auth-subtitle {
font-size: 14px;
color: var(--text-secondary);
}
/* ===== 标签页 ===== */
.auth-tabs {
display: flex;
gap: 12px;
margin-bottom: 32px;
background: var(--bg-primary);
border-radius: 8px;
padding: 4px;
}
.auth-tab {
flex: 1;
padding: 12px 16px;
border: none;
background: transparent;
color: var(--text-secondary);
font-size: 15px;
font-weight: 500;
cursor: pointer;
border-radius: 6px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.auth-tab:hover {
background: var(--bg-secondary);
color: var(--text-primary);
}
.auth-tab.active {
background: var(--primary-color);
color: white;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
/* ===== 表单 ===== */
.auth-form {
display: none;
}
.auth-form.active {
display: block;
animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
margin-bottom: 8px;
}
.form-group label i {
color: var(--primary-color);
width: 16px;
}
.form-group input {
width: 100%;
padding: 12px 16px;
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: 8px;
color: var(--text-primary);
font-size: 15px;
transition: all 0.3s ease;
}
.form-group input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.form-group input::placeholder {
color: var(--text-tertiary);
}
.form-hint {
display: block;
font-size: 12px;
color: var(--text-tertiary);
margin-top: 6px;
}
/* ===== 密码输入框 ===== */
.password-input-wrapper {
position: relative;
}
.password-input-wrapper input {
padding-right: 48px;
}
.password-toggle {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--text-tertiary);
cursor: pointer;
padding: 8px;
border-radius: 4px;
transition: all 0.2s ease;
}
.password-toggle:hover {
background: var(--bg-secondary);
color: var(--text-primary);
}
/* ===== 表单操作 ===== */
.form-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
font-size: 14px;
}
.remember-me {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--text-secondary);
}
.remember-me input[type="checkbox"] {
width: auto;
cursor: pointer;
}
.forgot-password {
color: var(--primary-light);
text-decoration: none;
transition: color 0.2s ease;
}
.forgot-password:hover {
color: var(--primary-color);
}
/* ===== 提交按钮 ===== */
.auth-button {
width: 100%;
padding: 14px 24px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
border: none;
border-radius: 8px;
color: white;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
.auth-button:hover {
background: linear-gradient(135deg, #4f46e5, #7c3aed);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}
.auth-button:active {
transform: translateY(0);
}
.auth-button:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
/* ===== 消息提示框 ===== */
.message-box {
margin-top: 16px;
padding: 12px 16px;
border-radius: 8px;
font-size: 14px;
display: none;
animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.message-box.show {
display: block;
}
.message-box.success {
background: rgba(16, 185, 129, 0.1);
border: 1px solid var(--success-color);
color: var(--success-color);
}
.message-box.error {
background: rgba(239, 68, 68, 0.1);
border: 1px solid var(--danger-color);
color: var(--danger-color);
}
.message-box.warning {
background: rgba(245, 158, 11, 0.1);
border: 1px solid var(--warning-color);
color: var(--warning-color);
}
/* ===== 页脚 ===== */
.auth-footer {
position: relative;
z-index: 1;
margin-top: 24px;
text-align: center;
color: var(--text-tertiary);
font-size: 13px;
}
/* ===== 加载动画 ===== */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(15, 23, 42, 0.9);
backdrop-filter: blur(4px);
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
}
.loading-overlay.show {
display: flex;
}
.loading-spinner {
text-align: center;
color: white;
}
.loading-spinner i {
font-size: 48px;
color: var(--primary-color);
margin-bottom: 16px;
}
.loading-spinner span {
display: block;
font-size: 16px;
color: var(--text-secondary);
}
/* ===== 响应式设计 ===== */
@media (max-width: 640px) {
.auth-card {
padding: 24px;
}
.auth-title {
font-size: 24px;
}
.auth-logo {
width: 60px;
height: 60px;
}
.form-actions {
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
.gradient-orb {
filter: blur(60px);
}
}
/* ===== 深色模式优化 ===== */
@media (prefers-color-scheme: light) {
:root {
--bg-primary: #f8fafc;
--bg-secondary: #f1f5f9;
--bg-tertiary: #e2e8f0;
--text-primary: #0f172a;
--text-secondary: #475569;
--text-tertiary: #64748b;
--border-color: #e2e8f0;
}
.auth-card {
background: rgba(255, 255, 255, 0.9);
}
}
/* ===== 平滑滚动 ===== */
html {
scroll-behavior: smooth;
}
/* ===== 选中文本样式 ===== */
::selection {
background: var(--primary-color);
color: white;
}

342
web-app/public/scripts/auth.js Normal file
View File

@@ -0,0 +1,342 @@
/**
* 云酒馆 - 用户认证模块
* 处理用户登录和注册功能
*/
// ===== 配置 =====
const CONFIG = {
API_BASE_URL: 'http://localhost:8888/app',
TOKEN_KEY: 'st_access_token',
REFRESH_TOKEN_KEY: 'st_refresh_token',
USER_KEY: 'st_user_info',
};
// ===== DOM 元素 =====
const elements = {
tabs: document.querySelectorAll('.auth-tab'),
loginForm: document.getElementById('loginForm'),
registerForm: document.getElementById('registerForm'),
messageBox: document.getElementById('messageBox'),
loadingOverlay: document.getElementById('loadingOverlay'),
passwordToggles: document.querySelectorAll('.password-toggle'),
};
// ===== 初始化 =====
document.addEventListener('DOMContentLoaded', () => {
initTabs();
initForms();
initPasswordToggles();
checkAutoLogin();
});
// ===== 标签页切换 =====
function initTabs() {
elements.tabs.forEach(tab => {
tab.addEventListener('click', () => {
const tabName = tab.dataset.tab;
switchTab(tabName);
});
});
}
function switchTab(tabName) {
// 更新标签页状态
elements.tabs.forEach(tab => {
tab.classList.toggle('active', tab.dataset.tab === tabName);
});
// 更新表单显示
elements.loginForm.classList.toggle('active', tabName === 'login');
elements.registerForm.classList.toggle('active', tabName === 'register');
// 清空消息
hideMessage();
}
// ===== 表单初始化 =====
function initForms() {
// 登录表单
elements.loginForm.addEventListener('submit', async (e) => {
e.preventDefault();
await handleLogin();
});
// 注册表单
elements.registerForm.addEventListener('submit', async (e) => {
e.preventDefault();
await handleRegister();
});
}
// ===== 密码显示/隐藏切换 =====
function initPasswordToggles() {
elements.passwordToggles.forEach(toggle => {
toggle.addEventListener('click', () => {
const targetId = toggle.dataset.target;
const input = document.getElementById(targetId);
const icon = toggle.querySelector('i');
if (input.type === 'password') {
input.type = 'text';
icon.classList.remove('fa-eye');
icon.classList.add('fa-eye-slash');
} else {
input.type = 'password';
icon.classList.remove('fa-eye-slash');
icon.classList.add('fa-eye');
}
});
});
}
// ===== 登录处理 =====
async function handleLogin() {
const username = document.getElementById('loginUsername').value.trim();
const password = document.getElementById('loginPassword').value;
const rememberMe = document.getElementById('rememberMe').checked;
// 验证输入
if (!username || !password) {
showMessage('请填写完整的登录信息', 'error');
return;
}
showLoading();
try {
const response = await fetch(`${CONFIG.API_BASE_URL}/auth/login`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ username, password }),
});
const data = await response.json();
if (data.code === 0) {
// 登录成功
saveLoginData(data.data, rememberMe);
showMessage('登录成功！正在跳转...', 'success');
// 延迟跳转到主页
setTimeout(() => {
window.location.href = '/';
}, 1500);
} else {
// 登录失败
showMessage(data.msg || '登录失败，请检查用户名和密码', 'error');
}
} catch (error) {
console.error('登录错误:', error);
showMessage('网络错误，请检查服务器连接', 'error');
} finally {
hideLoading();
}
}
// ===== 注册处理 =====
async function handleRegister() {
const username = document.getElementById('registerUsername').value.trim();
const password = document.getElementById('registerPassword').value;
const passwordConfirm = document.getElementById('registerPasswordConfirm').value;
const nickName = document.getElementById('registerNickname').value.trim();
const email = document.getElementById('registerEmail').value.trim();
// 验证输入
if (!username || !password || !passwordConfirm) {
showMessage('请填写必填信息', 'error');
return;
}
if (username.length < 3 || username.length > 32) {
showMessage('用户名长度应为 3-32 个字符', 'error');
return;
}
if (password.length < 6 || password.length > 32) {
showMessage('密码长度应为 6-32 个字符', 'error');
return;
}
if (password !== passwordConfirm) {
showMessage('两次输入的密码不一致', 'error');
return;
}
// 验证用户名格式
if (!/^[a-zA-Z0-9_]+$/.test(username)) {
showMessage('用户名只能包含字母、数字和下划线', 'error');
return;
}
showLoading();
try {
const requestBody = {
username,
password,
nickName: nickName || username, // 如果没有昵称，使用用户名
};
// 如果填写了邮箱，添加到请求中
if (email) {
requestBody.email = email;
}
const response = await fetch(`${CONFIG.API_BASE_URL}/auth/register`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(requestBody),
});
const data = await response.json();
if (data.code === 0) {
// 注册成功
showMessage('注册成功！请登录', 'success');
// 清空注册表单
elements.registerForm.reset();
// 切换到登录标签页，并填充用户名
setTimeout(() => {
switchTab('login');
document.getElementById('loginUsername').value = username;
document.getElementById('loginPassword').focus();
}, 1500);
} else {
// 注册失败
showMessage(data.msg || '注册失败，请稍后重试', 'error');
}
} catch (error) {
console.error('注册错误:', error);
showMessage('网络错误，请检查服务器连接', 'error');
} finally {
hideLoading();
}
}
// ===== 保存登录数据 =====
function saveLoginData(loginData, rememberMe) {
const { token, refreshToken, user } = loginData;
// 保存到 localStorage 或 sessionStorage
const storage = rememberMe ? localStorage : sessionStorage;
storage.setItem(CONFIG.TOKEN_KEY, token);
storage.setItem(CONFIG.REFRESH_TOKEN_KEY, refreshToken);
storage.setItem(CONFIG.USER_KEY, JSON.stringify(user));
}
// ===== 自动登录检查 =====
function checkAutoLogin() {
// 检查是否已经登录
const token = localStorage.getItem(CONFIG.TOKEN_KEY) ||
sessionStorage.getItem(CONFIG.TOKEN_KEY);
if (token) {
// 已登录，尝试验证 token 是否有效
verifyToken(token);
}
}
// ===== 验证 Token =====
async function verifyToken(token) {
try {
const response = await fetch(`${CONFIG.API_BASE_URL}/auth/userinfo`, {
method: 'GET',
headers: {
'x-token': token,
},
});
if (response.ok) {
const data = await response.json();
if (data.code === 0) {
// Token 有效，直接跳转到主页
showMessage('检测到已登录，正在跳转...', 'success');
setTimeout(() => {
window.location.href = '/';
}, 1000);
}
}
} catch (error) {
console.error('Token 验证失败:', error);
// Token 无效，清除存储
clearLoginData();
}
}
// ===== 清除登录数据 =====
function clearLoginData() {
localStorage.removeItem(CONFIG.TOKEN_KEY);
localStorage.removeItem(CONFIG.REFRESH_TOKEN_KEY);
localStorage.removeItem(CONFIG.USER_KEY);
sessionStorage.removeItem(CONFIG.TOKEN_KEY);
sessionStorage.removeItem(CONFIG.REFRESH_TOKEN_KEY);
sessionStorage.removeItem(CONFIG.USER_KEY);
}
// ===== 消息提示 =====
function showMessage(message, type = 'error') {
elements.messageBox.textContent = message;
elements.messageBox.className = `message-box show ${type}`;
// 3秒后自动隐藏
setTimeout(() => {
hideMessage();
}, 5000);
}
function hideMessage() {
elements.messageBox.classList.remove('show');
}
// ===== 加载动画 =====
function showLoading() {
elements.loadingOverlay.classList.add('show');
}
function hideLoading() {
elements.loadingOverlay.classList.remove('show');
}
// ===== 工具函数：获取当前登录用户 =====
export function getCurrentUser() {
const userJson = localStorage.getItem(CONFIG.USER_KEY) ||
sessionStorage.getItem(CONFIG.USER_KEY);
return userJson ? JSON.parse(userJson) : null;
}
// ===== 工具函数：获取 Token =====
export function getToken() {
return localStorage.getItem(CONFIG.TOKEN_KEY) ||
sessionStorage.getItem(CONFIG.TOKEN_KEY);
}
// ===== 工具函数：登出 =====
export async function logout() {
const token = getToken();
if (token) {
try {
await fetch(`${CONFIG.API_BASE_URL}/auth/logout`, {
method: 'POST',
headers: {
'x-token': token,
},
});
} catch (error) {
console.error('登出请求失败:', error);
}
}
clearLoginData();
window.location.href = '/auth.html';
}
// ===== 导出配置供其他模块使用 =====
export { CONFIG };