148 lines
3.5 KiB
Vue
148 lines
3.5 KiB
Vue
<template>
|
|
<div class="login-page">
|
|
<div class="login-card">
|
|
<h2 class="login-title">PPGo_Job 管理后台</h2>
|
|
|
|
<!-- 自动登录中 -->
|
|
<div v-if="loading && !autoLoginDone" class="auto-login-hint">
|
|
<el-icon class="is-loading" :size="32"><Loading /></el-icon>
|
|
<p>正在自动登录...</p>
|
|
</div>
|
|
|
|
<!-- 自动登录失败时显示登录表单 -->
|
|
<template v-else-if="error || autoLoginDone">
|
|
<el-form
|
|
ref="formRef"
|
|
:model="form"
|
|
:rules="rules"
|
|
size="large"
|
|
@keyup.enter="handleLogin"
|
|
>
|
|
<el-form-item prop="username">
|
|
<el-input
|
|
v-model="form.username"
|
|
placeholder="用户名"
|
|
:prefix-icon="User"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item prop="password">
|
|
<el-input
|
|
v-model="form.password"
|
|
type="password"
|
|
placeholder="密码"
|
|
show-password
|
|
:prefix-icon="Lock"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button
|
|
type="primary"
|
|
:loading="loading"
|
|
style="width: 100%"
|
|
@click="handleLogin"
|
|
>
|
|
登录
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<p v-if="error" class="login-error">{{ error }}</p>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { User, Lock, Loading } from '@element-plus/icons-vue'
|
|
import { useUserStore } from '@/stores/user'
|
|
import { login } from '@/api/login'
|
|
import type { FormInstance } from 'element-plus'
|
|
|
|
const router = useRouter()
|
|
const userStore = useUserStore()
|
|
const formRef = ref<FormInstance>()
|
|
const loading = ref(false)
|
|
const error = ref('')
|
|
const autoLoginDone = ref(false)
|
|
|
|
const form = reactive({
|
|
username: 'admin',
|
|
password: '123456',
|
|
})
|
|
|
|
const rules = {
|
|
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
|
|
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
|
|
}
|
|
|
|
async function handleLogin() {
|
|
const valid = await formRef.value?.validate().catch(() => false)
|
|
if (!valid) return
|
|
|
|
loading.value = true
|
|
error.value = ''
|
|
|
|
try {
|
|
const res = await login(form)
|
|
if (res.code === 0 && res.data) {
|
|
userStore.setToken(res.data.token)
|
|
userStore.setUser(res.data.userInfo)
|
|
// 获取菜单和用户信息
|
|
await userStore.fetchUserInfo()
|
|
router.push('/dashboard')
|
|
} else {
|
|
error.value = res.message || '登录失败'
|
|
}
|
|
} catch (e: any) {
|
|
error.value = e.message || '网络错误'
|
|
} finally {
|
|
loading.value = false
|
|
autoLoginDone.value = true
|
|
}
|
|
}
|
|
|
|
// 页面加载后自动登录
|
|
onMounted(() => {
|
|
handleLogin()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.login-page {
|
|
height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
}
|
|
.login-card {
|
|
width: 400px;
|
|
padding: 40px;
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
.login-title {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
color: #333;
|
|
font-size: 24px;
|
|
}
|
|
.login-error {
|
|
color: #f56c6c;
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
font-size: 14px;
|
|
}
|
|
.auto-login-hint {
|
|
text-align: center;
|
|
padding: 20px 0;
|
|
color: #666;
|
|
}
|
|
.auto-login-hint p {
|
|
margin-top: 12px;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|