云文件系统初始化
This commit is contained in:
254
web-vue/src/views/login/index.vue
Normal file
254
web-vue/src/views/login/index.vue
Normal file
@@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<!-- 左侧 60% -->
|
||||
<div class="login-left">
|
||||
<!-- SVG 背景图案 -->
|
||||
<div class="svg-bg">
|
||||
<img src="./LoginBg.svg" alt="" />
|
||||
</div>
|
||||
|
||||
<!-- 内容 -->
|
||||
<div class="left-content">
|
||||
<div class="logo-wrapper">
|
||||
<el-icon :size="80" color="#fff"><FolderOpened /></el-icon>
|
||||
</div>
|
||||
<h1 class="left-title">云文件管理系统</h1>
|
||||
<p class="left-desc">安全、高效、便捷的文件存储与共享平台</p>
|
||||
<div class="feature-list">
|
||||
<div class="feature-item">
|
||||
<el-icon><Check /></el-icon>
|
||||
<span>20GB 超大存储空间</span>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<el-icon><Check /></el-icon>
|
||||
<span>文件实时共享协作</span>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<el-icon><Check /></el-icon>
|
||||
<span>多端同步随时访问</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧 40% -->
|
||||
<div class="login-right">
|
||||
<div class="login-card">
|
||||
<!-- 标题 -->
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">{{ isLogin ? '欢迎登录' : '账号注册' }}</h2>
|
||||
</div>
|
||||
|
||||
<!-- 登录表单 -->
|
||||
<LoginForm v-if="isLogin" @success="onLoginSuccess" />
|
||||
|
||||
<!-- 注册表单 -->
|
||||
<RegisterForm v-else @success="onRegisterSuccess" />
|
||||
|
||||
<!-- 底部切换 -->
|
||||
<div class="card-footer">
|
||||
<span>{{ isLogin ? '还没有账号?' : '已有账号?' }}</span>
|
||||
<el-button link type="primary" @click="toggleMode">
|
||||
{{ isLogin ? '立即注册' : '立即登录' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { FolderOpened, Check } from '@element-plus/icons-vue'
|
||||
import LoginForm from './LoginForm.vue'
|
||||
import RegisterForm from './RegisterForm.vue'
|
||||
import { useUserStore } from '@/store/user'
|
||||
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
|
||||
const isLogin = ref(true)
|
||||
|
||||
const toggleMode = () => {
|
||||
isLogin.value = !isLogin.value
|
||||
}
|
||||
|
||||
const onLoginSuccess = (data) => {
|
||||
userStore.setToken(data.token)
|
||||
userStore.setUser(data.user)
|
||||
router.push('/desktop')
|
||||
}
|
||||
|
||||
const onRegisterSuccess = () => {
|
||||
isLogin.value = true
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* 左侧 60% */
|
||||
.login-left {
|
||||
width: 60%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* SVG 背景 */
|
||||
.svg-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.svg-bg img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.left-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.logo-wrapper {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.left-title {
|
||||
font-size: 42px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
text-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.left-desc {
|
||||
font-size: 18px;
|
||||
opacity: 0.9;
|
||||
margin: 0;
|
||||
max-width: 400px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 15px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* 右侧 40% */
|
||||
.login-right {
|
||||
width: 40%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(145deg, #e8f5e9 0%, #c8e6c9 100%);
|
||||
padding: 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.login-right::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
radial-gradient(circle at 20% 30%, rgba(76, 175, 80, 0.08) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 70%, rgba(139, 195, 74, 0.08) 0%, transparent 50%);
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: 100%;
|
||||
max-width: 380px;
|
||||
padding: 40px 36px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 16px;
|
||||
box-shadow:
|
||||
0 8px 32px rgba(76, 175, 80, 0.15),
|
||||
0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(76, 175, 80, 0.1);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.login-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #4caf50, #8bc34a);
|
||||
border-radius: 16px 16px 0 0;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
text-align: center;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #2e7d32;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
font-size: 14px;
|
||||
color: #689f38;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-top: 24px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid rgba(76, 175, 80, 0.15);
|
||||
font-size: 14px;
|
||||
color: #558b2f;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user