'commit'
This commit is contained in:
135
dsLightRag/static/vue/login.css
Normal file
135
dsLightRag/static/vue/login.css
Normal file
@@ -0,0 +1,135 @@
|
||||
:root {
|
||||
--primary-color: #4361ee;
|
||||
--secondary-color: #3a0ca3;
|
||||
--accent-color: #7209b7;
|
||||
--light-bg: #f8f9fa;
|
||||
--card-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
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 {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
padding: 40px 30px;
|
||||
box-shadow: var(--card-shadow);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.login-logo {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: var(--primary-color);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 20px;
|
||||
color: white;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
color: #2c3e50;
|
||||
font-weight: 700;
|
||||
font-size: 28px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
color: #7f8c8d;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 12px;
|
||||
padding: 15px 20px;
|
||||
font-size: 16px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 0.2rem rgba(67, 97, 238, 0.25);
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.btn-login {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
padding: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-login:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 20px rgba(67, 97, 238, 0.3);
|
||||
}
|
||||
|
||||
.login-footer {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.forgot-password:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.alert {
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.login-container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
94
dsLightRag/static/vue/login.html
Normal file
94
dsLightRag/static/vue/login.html
Normal file
@@ -0,0 +1,94 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>系统登录</title>
|
||||
<!-- Vue 3 CDN -->
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
|
||||
<!-- Bootstrap 5 CDN -->
|
||||
<link href="https://gcore.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Bootstrap Icons -->
|
||||
<link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
|
||||
<!-- 外部CSS -->
|
||||
<link rel="stylesheet" href="login.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div class="login-container">
|
||||
<div class="login-card">
|
||||
<div class="login-header">
|
||||
<div class="login-logo">
|
||||
<i class="bi bi-shield-lock"></i>
|
||||
</div>
|
||||
<h1 class="login-title">欢迎登录</h1>
|
||||
<p class="login-subtitle">请输入您的账号信息</p>
|
||||
</div>
|
||||
|
||||
<div v-if="errorMessage" class="alert alert-danger" role="alert">
|
||||
<i class="bi bi-exclamation-triangle me-2"></i>
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="handleLogin">
|
||||
<div class="form-group">
|
||||
<label class="form-label">用户名</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="请输入用户名"
|
||||
v-model="form.username"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">密码</label>
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
placeholder="请输入密码"
|
||||
v-model="form.password"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-group form-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
id="rememberMe"
|
||||
v-model="form.rememberMe"
|
||||
>
|
||||
<label class="form-check-label" for="rememberMe">
|
||||
记住我
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-login"
|
||||
:disabled="loading"
|
||||
>
|
||||
<span v-if="loading">
|
||||
<span class="spinner-border spinner-border-sm me-2" role="status"></span>
|
||||
登录中...
|
||||
</span>
|
||||
<span v-else>
|
||||
<i class="bi bi-box-arrow-in-right me-2"></i>
|
||||
登录
|
||||
</span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="login-footer">
|
||||
<a href="#" class="forgot-password">忘记密码？</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 外部JS -->
|
||||
<script src="login.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
43
dsLightRag/static/vue/login.js
Normal file
43
dsLightRag/static/vue/login.js
Normal file
@@ -0,0 +1,43 @@
|
||||
const { createApp, ref, reactive } = Vue;
|
||||
|
||||
createApp({
|
||||
setup() {
|
||||
const form = reactive({
|
||||
username: '',
|
||||
password: '',
|
||||
rememberMe: false
|
||||
});
|
||||
|
||||
const loading = ref(false);
|
||||
const errorMessage = ref('');
|
||||
|
||||
const handleLogin = async () => {
|
||||
loading.value = true;
|
||||
errorMessage.value = '';
|
||||
|
||||
try {
|
||||
// 模拟登录请求
|
||||
await new Promise(resolve => setTimeout(resolve, 1500));
|
||||
|
||||
if (form.username === 'admin' && form.password === '123456') {
|
||||
alert('登录成功！');
|
||||
// 这里可以跳转到首页
|
||||
console.log('登录成功', form);
|
||||
} else {
|
||||
errorMessage.value = '用户名或密码错误';
|
||||
}
|
||||
} catch (error) {
|
||||
errorMessage.value = '登录失败，请稍后重试';
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
form,
|
||||
loading,
|
||||
errorMessage,
|
||||
handleLogin
|
||||
};
|
||||
}
|
||||
}).mount('#app');
|
||||
Reference in New Issue
Block a user