🎨 重构用户端前端为vue开发，完善基础类和角色相关接口
This commit is contained in:
175
web-app/public/auth.html
Normal file
175
web-app/public/auth.html
Normal 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>
|
||||
Reference in New Issue
Block a user