首次提交：初始化项目代码
This commit is contained in:
sunct
@@ -0,0 +1,20 @@
|
||||
package main
|
||||
|
||||
import (
|
||||
"embed"
|
||||
"net/http"
|
||||
|
||||
"github.com/gin-gonic/gin"
|
||||
)
|
||||
|
||||
//go:embed web
|
||||
var webAssets embed.FS
|
||||
|
||||
func serveHTML(c *gin.Context, name string) {
|
||||
content, err := webAssets.ReadFile(name)
|
||||
if err != nil {
|
||||
c.String(http.StatusNotFound, "not found")
|
||||
return
|
||||
}
|
||||
c.Data(http.StatusOK, "text/html; charset=utf-8", content)
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
package main
|
||||
|
||||
import (
|
||||
"net/http"
|
||||
|
||||
"cloudnest/internal/bootstrap"
|
||||
"cloudnest/internal/config"
|
||||
"cloudnest/internal/di"
|
||||
"cloudnest/internal/pkg/logger"
|
||||
"github.com/gin-gonic/gin"
|
||||
)
|
||||
|
||||
func main() {
|
||||
// Step 1: Initialize logger FIRST to prevent nil pointer panics
|
||||
// 第一步：先初始化日志记录器以防止空指针 panic
|
||||
logger.Init("info")
|
||||
|
||||
// Step 2: Load configuration
|
||||
// 第二步：加载配置
|
||||
cfg := config.Load()
|
||||
|
||||
// Step 3: Re-initialize logger with the configured log level
|
||||
// 第三步：使用配置的日志级别重新初始化日志记录器
|
||||
logger.Init(cfg.App.LogLevel)
|
||||
|
||||
// Step 4: Initialize services
|
||||
// 第四步：初始化服务
|
||||
c := di.New()
|
||||
if err := c.InitializeServices(); err != nil {
|
||||
logger.Fatal("failed to initialize services", "error", err)
|
||||
}
|
||||
|
||||
// Step 5: Build the HTTP engine (auth service only registers auth routes)
|
||||
// 第五步：构建 HTTP 引擎（认证服务只注册认证路由）
|
||||
engine, err := c.BuildAuthEngine()
|
||||
if err != nil {
|
||||
logger.Fatal("failed to build engine", "error", err)
|
||||
}
|
||||
|
||||
setupStaticFiles(engine)
|
||||
|
||||
// Step 6: Create server with lifecycle management
|
||||
// 第六步：创建带生命周期管理的服务器
|
||||
srv := bootstrap.NewServer(cfg, engine)
|
||||
if err := srv.Run(); err != nil {
|
||||
if err == bootstrap.ErrReloadRequested {
|
||||
logger.Info("exiting for reload, supervisor should restart")
|
||||
} else {
|
||||
logger.Error("server exited with error", "error", err)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
func setupStaticFiles(engine *gin.Engine) {
|
||||
engine.GET("/", func(c *gin.Context) { serveHTML(c, "web/index.html") })
|
||||
engine.GET("/login", func(c *gin.Context) { serveHTML(c, "web/login.html") })
|
||||
engine.GET("/register", func(c *gin.Context) { serveHTML(c, "web/register.html") })
|
||||
engine.NoRoute(func(c *gin.Context) {
|
||||
if c.Request.Method == http.MethodGet {
|
||||
serveHTML(c, "web/index.html")
|
||||
} else {
|
||||
c.JSON(http.StatusNotFound, gin.H{"code": 404, "message": "not found"})
|
||||
}
|
||||
})
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,376 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CloudNest - 登录</title>
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
|
||||
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; overflow: hidden; }
|
||||
|
||||
/* 登录页面容器 / Login page container */
|
||||
.login-container {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 背景装饰圆形 / Background decoration circles */
|
||||
.bg-decoration {
|
||||
position: absolute;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.05);
|
||||
top: -200px;
|
||||
right: -100px;
|
||||
}
|
||||
.bg-decoration-2 {
|
||||
position: absolute;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.03);
|
||||
bottom: -150px;
|
||||
left: -50px;
|
||||
}
|
||||
|
||||
/* 浮动图标动画 / Floating icon animation */
|
||||
.floating-icon {
|
||||
position: absolute;
|
||||
font-size: 48px;
|
||||
color: rgba(255,255,255,0.08);
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
.floating-icon:nth-child(3) { top: 20%; left: 10%; animation-delay: 0s; }
|
||||
.floating-icon:nth-child(4) { top: 60%; right: 15%; animation-delay: 2s; }
|
||||
.floating-icon:nth-child(5) { bottom: 25%; left: 20%; animation-delay: 4s; }
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||||
50% { transform: translateY(-20px) rotate(10deg); }
|
||||
}
|
||||
|
||||
/* 登录卡片 / Login card */
|
||||
.login-card {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
padding: 50px 60px;
|
||||
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
|
||||
width: 100%;
|
||||
max-width: 450px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Logo区域 / Logo section */
|
||||
.logo-section {
|
||||
text-align: center;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
.logo {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background: linear-gradient(135deg, #2563eb, #1d4ed8);
|
||||
border-radius: 16px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32px;
|
||||
color: white;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 10px 25px rgba(37,99,235,0.3);
|
||||
}
|
||||
.logo-title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.logo-subtitle {
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* 表单项 / Form items */
|
||||
.form-item {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.el-input__wrapper {
|
||||
border-radius: 12px;
|
||||
padding: 0 15px;
|
||||
height: 48px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.el-input__wrapper:hover {
|
||||
box-shadow: 0 0 0 1px rgba(37,99,235,0.2);
|
||||
}
|
||||
.el-input__wrapper.is-focus {
|
||||
box-shadow: 0 0 0 2px rgba(37,99,235,0.4);
|
||||
border-color: #2563eb;
|
||||
}
|
||||
|
||||
/* 登录按钮 / Login button */
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
|
||||
border: none;
|
||||
transition: all 0.3s ease;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.login-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 25px rgba(37,99,235,0.4);
|
||||
}
|
||||
.login-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* 注册链接 / Register link */
|
||||
.register-link {
|
||||
text-align: center;
|
||||
margin-top: 25px;
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
}
|
||||
.register-link a {
|
||||
color: #2563eb;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
.register-link a:hover {
|
||||
color: #1d4ed8;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 验证码区域 / Captcha area */
|
||||
.captcha-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.captcha-row .el-input {
|
||||
flex: 1;
|
||||
}
|
||||
.captcha-img {
|
||||
width: 120px;
|
||||
height: 48px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #e2e8f0;
|
||||
background: #f8fafc;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.el-message {
|
||||
top: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div class="login-container">
|
||||
<div class="bg-decoration"></div>
|
||||
<div class="bg-decoration-2"></div>
|
||||
<i class="fa-solid fa-cloud floating-icon"></i>
|
||||
<i class="fa-solid fa-database floating-icon"></i>
|
||||
<i class="fa-solid fa-folder-open floating-icon"></i>
|
||||
|
||||
<div class="login-card">
|
||||
<div class="logo-section">
|
||||
<div class="logo">
|
||||
<i class="fa-solid fa-cloud"></i>
|
||||
</div>
|
||||
<div class="logo-title">CloudNest</div>
|
||||
<div class="logo-subtitle">轻量级个人云存储平台</div>
|
||||
</div>
|
||||
|
||||
<el-form :model="loginForm" :rules="rules" ref="loginFormRef" class="form-container">
|
||||
<el-form-item prop="username" class="form-item">
|
||||
<el-input
|
||||
v-model="loginForm.username"
|
||||
placeholder="请输入用户名"
|
||||
size="large"
|
||||
prefix-icon="User"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password" class="form-item">
|
||||
<el-input
|
||||
v-model="loginForm.password"
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
size="large"
|
||||
prefix-icon="Lock"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
<div class="captcha-row">
|
||||
<el-form-item prop="captcha_answer" class="form-item captcha-input-item">
|
||||
<el-input
|
||||
v-model="loginForm.captcha_answer"
|
||||
placeholder="请输入图形验证码"
|
||||
size="large"
|
||||
prefix-icon="Picture"
|
||||
/>
|
||||
</el-form-item>
|
||||
<img
|
||||
:src="captchaImage"
|
||||
class="captcha-img"
|
||||
@click="refreshCaptcha"
|
||||
title="点击刷新验证码"
|
||||
:alt="captchaImage ? '验证码' : '加载中...'"
|
||||
/>
|
||||
</div>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="login-btn"
|
||||
@click="handleLogin"
|
||||
:loading="loading"
|
||||
>
|
||||
<i class="fa-solid fa-right-to-bracket"></i> 登 录
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div class="register-link">
|
||||
还没有账号？<a href="/register">立即注册</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const { createApp, ref, reactive, onMounted } = Vue;
|
||||
|
||||
createApp({
|
||||
setup() {
|
||||
const loginFormRef = ref(null);
|
||||
const loading = ref(false);
|
||||
const captchaImage = ref('');
|
||||
const captchaLoading = ref(false);
|
||||
const captchaError = ref('');
|
||||
|
||||
// API基础路径配置（本地测试使用 localhost）
|
||||
// API base path configuration (use localhost for local testing)
|
||||
// 认证服务端口: 8081 / Auth service port: 8081
|
||||
const AUTH_API_BASE = 'http://localhost:8081/api/v1/auth';
|
||||
const CAPTCHA_API_BASE = 'http://localhost:8081/api/v1';
|
||||
|
||||
const loginForm = reactive({
|
||||
username: '',
|
||||
password: '',
|
||||
captcha_id: '',
|
||||
captcha_answer: ''
|
||||
});
|
||||
|
||||
const rules = {
|
||||
username: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
||||
{ min: 3, max: 50, message: '用户名长度为3-50个字符', trigger: 'blur' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||
{ min: 6, message: '密码长度至少为6个字符', trigger: 'blur' }
|
||||
],
|
||||
captcha_answer: [
|
||||
{ required: true, message: '请输入图形验证码', trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
|
||||
// 加载图形验证码 / Load captcha
|
||||
const loadCaptcha = async () => {
|
||||
captchaLoading.value = true;
|
||||
captchaError.value = '';
|
||||
try {
|
||||
console.log('[Captcha] 开始加载验证码...');
|
||||
const response = await axios.get(`${CAPTCHA_API_BASE}/captcha`);
|
||||
console.log('[Captcha] 响应:', response.data);
|
||||
if (response.data && response.data.code === 0 && response.data.data) {
|
||||
loginForm.captcha_id = response.data.data.captcha_id || '';
|
||||
captchaImage.value = response.data.data.image_url || '';
|
||||
console.log('[Captcha] 设置图片URL:', captchaImage.value);
|
||||
} else {
|
||||
captchaError.value = '验证码加载失败';
|
||||
console.error('[Captcha] 响应格式不正确:', response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
captchaError.value = '验证码加载失败，请刷新页面重试';
|
||||
console.error('[Captcha] 加载验证码失败:', error);
|
||||
} finally {
|
||||
captchaLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 刷新图形验证码 / Refresh captcha
|
||||
const refreshCaptcha = () => {
|
||||
loadCaptcha();
|
||||
};
|
||||
|
||||
// 处理登录 / Handle login
|
||||
// API路由: POST /api/v1/auth/login
|
||||
const handleLogin = async () => {
|
||||
const valid = await loginFormRef.value.validate().catch(() => false);
|
||||
if (!valid) return;
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
const response = await axios.post(`${AUTH_API_BASE}/login`, {
|
||||
username: loginForm.username,
|
||||
password: loginForm.password,
|
||||
captcha_id: loginForm.captcha_id,
|
||||
captcha_answer: loginForm.captcha_answer
|
||||
});
|
||||
|
||||
if (response.data.code === 0 && response.data.data?.token) {
|
||||
localStorage.setItem('cloudnest_token', response.data.data.token);
|
||||
localStorage.setItem('cloudnest_username', loginForm.username);
|
||||
ElementPlus.ElMessage.success('登录成功');
|
||||
setTimeout(() => {
|
||||
window.location.href = '/';
|
||||
}, 500);
|
||||
} else {
|
||||
ElementPlus.ElMessage.error(response.data.message || '登录失败');
|
||||
refreshCaptcha();
|
||||
}
|
||||
} catch (error) {
|
||||
const message = error.response?.data?.message || '登录失败，请检查网络连接';
|
||||
ElementPlus.ElMessage.error(message);
|
||||
refreshCaptcha();
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
loadCaptcha();
|
||||
});
|
||||
|
||||
return {
|
||||
loginFormRef,
|
||||
loading,
|
||||
loginForm,
|
||||
rules,
|
||||
captchaImage,
|
||||
handleLogin,
|
||||
refreshCaptcha
|
||||
};
|
||||
}
|
||||
}).use(ElementPlus).mount('#app');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,503 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CloudNest - 注册</title>
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
|
||||
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; overflow: hidden; }
|
||||
|
||||
/* 注册页面容器 / Register page container */
|
||||
.register-container {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #0f766e 0%, #14b8a6 50%, #2dd4bf 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 背景装饰圆形 / Background decoration circles */
|
||||
.bg-decoration {
|
||||
position: absolute;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.05);
|
||||
top: -200px;
|
||||
left: -150px;
|
||||
}
|
||||
.bg-decoration-2 {
|
||||
position: absolute;
|
||||
width: 450px;
|
||||
height: 450px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.03);
|
||||
bottom: -180px;
|
||||
right: -80px;
|
||||
}
|
||||
|
||||
/* 浮动图标动画 / Floating icon animation */
|
||||
.floating-icon {
|
||||
position: absolute;
|
||||
font-size: 52px;
|
||||
color: rgba(255,255,255,0.08);
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
.floating-icon:nth-child(3) { top: 15%; right: 12%; animation-delay: 0s; }
|
||||
.floating-icon:nth-child(4) { top: 55%; left: 8%; animation-delay: 2s; }
|
||||
.floating-icon:nth-child(5) { bottom: 20%; right: 18%; animation-delay: 4s; }
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||||
50% { transform: translateY(-25px) rotate(10deg); }
|
||||
}
|
||||
|
||||
/* 注册卡片 / Register card */
|
||||
.register-card {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
padding: 50px 60px;
|
||||
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
|
||||
width: 100%;
|
||||
max-width: 450px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Logo区域 / Logo section */
|
||||
.logo-section {
|
||||
text-align: center;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
.logo {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background: linear-gradient(135deg, #0f766e, #14b8a6);
|
||||
border-radius: 16px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32px;
|
||||
color: white;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 10px 25px rgba(15,118,110,0.3);
|
||||
}
|
||||
.logo-title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.logo-subtitle {
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* 表单项 / Form items */
|
||||
.form-item {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.el-input__wrapper {
|
||||
border-radius: 12px;
|
||||
padding: 0 15px;
|
||||
height: 48px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.el-input__wrapper:hover {
|
||||
box-shadow: 0 0 0 1px rgba(15,118,110,0.2);
|
||||
}
|
||||
.el-input__wrapper.is-focus {
|
||||
box-shadow: 0 0 0 2px rgba(15,118,110,0.4);
|
||||
border-color: #0f766e;
|
||||
}
|
||||
|
||||
/* 注册按钮 / Register button */
|
||||
.register-btn {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
|
||||
border: none;
|
||||
transition: all 0.3s ease;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.register-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 25px rgba(15,118,110,0.4);
|
||||
}
|
||||
.register-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* 登录链接 / Login link */
|
||||
.login-link {
|
||||
text-align: center;
|
||||
margin-top: 25px;
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
}
|
||||
.login-link a {
|
||||
color: #0f766e;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
.login-link a:hover {
|
||||
color: #0d9488;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 验证码区域 / Captcha area */
|
||||
.captcha-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.captcha-row .el-input {
|
||||
flex: 1;
|
||||
}
|
||||
.captcha-img {
|
||||
width: 120px;
|
||||
height: 48px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #e2e8f0;
|
||||
background: #f8fafc;
|
||||
object-fit: contain;
|
||||
}
|
||||
.email-code-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.email-code-row .el-input {
|
||||
flex: 1;
|
||||
}
|
||||
.email-code-btn {
|
||||
width: 120px;
|
||||
height: 48px;
|
||||
border-radius: 10px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.el-message {
|
||||
top: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div class="register-container">
|
||||
<div class="bg-decoration"></div>
|
||||
<div class="bg-decoration-2"></div>
|
||||
<i class="fa-solid fa-user-plus floating-icon"></i>
|
||||
<i class="fa-solid fa-shield-halved floating-icon"></i>
|
||||
<i class="fa-solid fa-key floating-icon"></i>
|
||||
|
||||
<div class="register-card">
|
||||
<div class="logo-section">
|
||||
<div class="logo">
|
||||
<i class="fa-solid fa-user-plus"></i>
|
||||
</div>
|
||||
<div class="logo-title">CloudNest</div>
|
||||
<div class="logo-subtitle">创建您的个人云存储账号</div>
|
||||
</div>
|
||||
|
||||
<el-form :model="registerForm" :rules="rules" ref="registerFormRef" class="form-container">
|
||||
<el-form-item prop="username" class="form-item">
|
||||
<el-input
|
||||
v-model="registerForm.username"
|
||||
placeholder="请输入用户名（3-50个字符）"
|
||||
size="large"
|
||||
prefix-icon="User"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="nickname" class="form-item">
|
||||
<el-input
|
||||
v-model="registerForm.nickname"
|
||||
placeholder="请输入昵称"
|
||||
size="large"
|
||||
prefix-icon="UserFilled"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password" class="form-item">
|
||||
<el-input
|
||||
v-model="registerForm.password"
|
||||
type="password"
|
||||
placeholder="请输入密码（至少6个字符）"
|
||||
size="large"
|
||||
prefix-icon="Lock"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="confirmPassword" class="form-item">
|
||||
<el-input
|
||||
v-model="registerForm.confirmPassword"
|
||||
type="password"
|
||||
placeholder="请确认密码"
|
||||
size="large"
|
||||
prefix-icon="Lock"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="email" class="form-item">
|
||||
<el-input
|
||||
v-model="registerForm.email"
|
||||
placeholder="请输入邮箱（可选）"
|
||||
size="large"
|
||||
prefix-icon="Message"
|
||||
/>
|
||||
</el-form-item>
|
||||
<div class="captcha-row">
|
||||
<el-form-item prop="captcha_answer" class="form-item captcha-input-item">
|
||||
<el-input
|
||||
v-model="registerForm.captcha_answer"
|
||||
placeholder="请输入图形验证码"
|
||||
size="large"
|
||||
prefix-icon="Picture"
|
||||
/>
|
||||
</el-form-item>
|
||||
<img
|
||||
:src="captchaImage"
|
||||
class="captcha-img"
|
||||
@click="refreshCaptcha"
|
||||
title="点击刷新验证码"
|
||||
:alt="captchaImage ? '验证码' : '加载中...'"
|
||||
/>
|
||||
</div>
|
||||
<el-form-item prop="email_code" class="form-item" v-if="registerForm.email">
|
||||
<div class="email-code-row">
|
||||
<el-input
|
||||
v-model="registerForm.email_code"
|
||||
placeholder="请输入邮箱验证码"
|
||||
size="large"
|
||||
prefix-icon="MessageBox"
|
||||
/>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="email-code-btn"
|
||||
@click="sendEmailCode"
|
||||
:disabled="emailCountdown > 0 || !registerForm.email || !registerForm.captcha_answer"
|
||||
:loading="emailCodeLoading"
|
||||
>
|
||||
{{ emailCountdown > 0 ? emailCountdown + 's' : '获取验证码' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="register-btn"
|
||||
@click="handleRegister"
|
||||
:loading="loading"
|
||||
>
|
||||
<i class="fa-solid fa-user-plus"></i> 注 册
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div class="login-link">
|
||||
已有账号？<a href="/login">立即登录</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const { createApp, ref, reactive, onMounted } = Vue;
|
||||
|
||||
createApp({
|
||||
setup() {
|
||||
const registerFormRef = ref(null);
|
||||
const loading = ref(false);
|
||||
const captchaImage = ref('');
|
||||
const emailCountdown = ref(0);
|
||||
const emailCountdownTimer = ref(null);
|
||||
const emailCodeLoading = ref(false);
|
||||
|
||||
// API基础路径配置（本地测试使用 localhost）
|
||||
// API base path configuration (use localhost for local testing)
|
||||
// 认证服务端口: 8081 / Auth service port: 8081
|
||||
const AUTH_API_BASE = 'http://localhost:8081/api/v1/auth';
|
||||
const CAPTCHA_API_BASE = 'http://localhost:8081/api/v1';
|
||||
|
||||
const registerForm = reactive({
|
||||
username: '',
|
||||
nickname: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
email: '',
|
||||
captcha_id: '',
|
||||
captcha_answer: '',
|
||||
email_code: ''
|
||||
});
|
||||
|
||||
const rules = {
|
||||
username: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
||||
{ min: 3, max: 50, message: '用户名长度为3-50个字符', trigger: 'blur' }
|
||||
],
|
||||
nickname: [
|
||||
{ required: true, message: '请输入昵称', trigger: 'blur' },
|
||||
{ min: 1, max: 50, message: '昵称长度为1-50个字符', trigger: 'blur' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||
{ min: 6, message: '密码长度至少为6个字符', trigger: 'blur' }
|
||||
],
|
||||
confirmPassword: [
|
||||
{ required: true, message: '请确认密码', trigger: 'blur' },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value !== registerForm.password) {
|
||||
callback(new Error('两次输入的密码不一致'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
email: [
|
||||
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
|
||||
],
|
||||
captcha_answer: [
|
||||
{ required: true, message: '请输入图形验证码', trigger: 'blur' }
|
||||
],
|
||||
email_code: [
|
||||
{ required: true, message: '请输入邮箱验证码', trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
|
||||
// 加载图形验证码 / Load captcha
|
||||
const loadCaptcha = async () => {
|
||||
try {
|
||||
const response = await axios.get(`${CAPTCHA_API_BASE}/captcha`);
|
||||
if (response.data.code === 0 && response.data.data) {
|
||||
registerForm.captcha_id = response.data.data.captcha_id || '';
|
||||
captchaImage.value = `${CAPTCHA_API_BASE}/captcha/${registerForm.captcha_id}/image`;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载验证码失败', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 刷新图形验证码 / Refresh captcha
|
||||
const refreshCaptcha = () => {
|
||||
loadCaptcha();
|
||||
};
|
||||
|
||||
// 发送邮箱验证码 / Send email code
|
||||
const sendEmailCode = async () => {
|
||||
if (!registerForm.email) {
|
||||
ElementPlus.ElMessage.warning('请先输入邮箱');
|
||||
return;
|
||||
}
|
||||
if (!registerForm.captcha_answer) {
|
||||
ElementPlus.ElMessage.warning('请先输入图形验证码');
|
||||
return;
|
||||
}
|
||||
emailCodeLoading.value = true;
|
||||
try {
|
||||
const response = await axios.post(`${AUTH_API_BASE}/email-code`, {
|
||||
email: registerForm.email,
|
||||
captcha_id: registerForm.captcha_id,
|
||||
captcha_answer: registerForm.captcha_answer
|
||||
});
|
||||
if (response.data.code === 0) {
|
||||
ElementPlus.ElMessage.success('邮箱验证码已发送');
|
||||
emailCountdown.value = 60;
|
||||
emailCountdownTimer.value = setInterval(() => {
|
||||
emailCountdown.value--;
|
||||
if (emailCountdown.value <= 0) {
|
||||
clearInterval(emailCountdownTimer.value);
|
||||
emailCountdownTimer.value = null;
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
ElementPlus.ElMessage.error(response.data.message || '发送失败');
|
||||
refreshCaptcha();
|
||||
}
|
||||
} catch (error) {
|
||||
const message = error.response?.data?.message || '发送失败，请检查网络连接';
|
||||
ElementPlus.ElMessage.error(message);
|
||||
refreshCaptcha();
|
||||
} finally {
|
||||
emailCodeLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 处理注册 / Handle register
|
||||
// API路由: POST /api/v1/auth/register
|
||||
const handleRegister = async () => {
|
||||
const valid = await registerFormRef.value.validate().catch(() => false);
|
||||
if (!valid) return;
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
const payload = {
|
||||
username: registerForm.username,
|
||||
password: registerForm.password,
|
||||
nickname: registerForm.nickname,
|
||||
email: registerForm.email,
|
||||
captcha_id: registerForm.captcha_id,
|
||||
captcha_answer: registerForm.captcha_answer,
|
||||
email_code: registerForm.email_code
|
||||
};
|
||||
// 如果邮箱为空，不发送邮箱验证码
|
||||
if (!registerForm.email) {
|
||||
delete payload.email;
|
||||
delete payload.email_code;
|
||||
}
|
||||
const response = await axios.post(`${AUTH_API_BASE}/register`, payload);
|
||||
|
||||
if (response.data.code === 0) {
|
||||
ElementPlus.ElMessage.success(response.data.message || '注册成功');
|
||||
setTimeout(() => {
|
||||
window.location.href = '/login';
|
||||
}, 1500);
|
||||
} else {
|
||||
ElementPlus.ElMessage.error(response.data.message || '注册失败');
|
||||
refreshCaptcha();
|
||||
}
|
||||
} catch (error) {
|
||||
const message = error.response?.data?.message || '注册失败，请检查网络连接';
|
||||
ElementPlus.ElMessage.error(message);
|
||||
refreshCaptcha();
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
loadCaptcha();
|
||||
});
|
||||
|
||||
return {
|
||||
registerFormRef,
|
||||
loading,
|
||||
registerForm,
|
||||
rules,
|
||||
captchaImage,
|
||||
emailCountdown,
|
||||
emailCodeLoading,
|
||||
handleRegister,
|
||||
refreshCaptcha,
|
||||
sendEmailCode
|
||||
};
|
||||
}
|
||||
}).use(ElementPlus).mount('#app');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user