530 lines
12 KiB
Vue
530 lines
12 KiB
Vue
<script setup lang="ts">
|
|
import { ref, reactive } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { message } from 'ant-design-vue'
|
|
import { login, getCaptcha } from '@/api/system'
|
|
import type { LoginInfo } from '@/api/system/model'
|
|
import type { Rule } from 'ant-design-vue/es/form';
|
|
import { setToken } from '@/utils/auth';
|
|
|
|
const router = useRouter()
|
|
|
|
// 表单数据
|
|
const formData = reactive<LoginInfo>({
|
|
username: '',
|
|
password: '',
|
|
uuid: '',
|
|
code: ''
|
|
})
|
|
|
|
// 验证码图片
|
|
const captchaImg = ref('')
|
|
const loading = ref(false)
|
|
const captchaLoading = ref(false)
|
|
|
|
// 表单验证规则
|
|
const rules: Record<string, Rule[]> = {
|
|
username: [
|
|
{ required: true, message: '请输入用户名', trigger: 'change' }
|
|
],
|
|
password: [
|
|
{ required: true, message: '请输入密码', trigger: 'change' }
|
|
],
|
|
code: [
|
|
{ required: true, message: '请输入验证码', trigger: 'change' }
|
|
]
|
|
}
|
|
|
|
// 获取验证码
|
|
const refreshCaptcha = async () => {
|
|
try {
|
|
captchaLoading.value = true
|
|
await getCaptcha().then((res: any) => {
|
|
if (res.captchaOnOff) {
|
|
captchaImg.value = "data:image/gif;base64," + res.img
|
|
rules.code[0].required = true;
|
|
} else {
|
|
rules.code[0].required = false;
|
|
}
|
|
formData.uuid = res.uuid
|
|
formData.code = '' // 清空验证码输入
|
|
})
|
|
} catch (error) {
|
|
message.error('获取验证码失败')
|
|
console.error('获取验证码失败:', error)
|
|
} finally {
|
|
captchaLoading.value = false
|
|
}
|
|
}
|
|
|
|
// 登录处理
|
|
const handleLogin = async () => {
|
|
try {
|
|
loading.value = true
|
|
await login(formData).then(async (res: any) => {
|
|
if (res.code === 200) {
|
|
message.success('登录成功')
|
|
setToken(res.token)
|
|
// 可以在这里保存用户信息到store
|
|
// 跳转到主页
|
|
router.push('/lms')
|
|
} else {
|
|
message.error(res.msg || '登录失败')
|
|
// 登录失败后重新获取验证码
|
|
await refreshCaptcha()
|
|
}
|
|
})
|
|
} catch (error: any) {
|
|
message.error(error.message || error.msg || '登录失败，请检查网络连接')
|
|
console.error('登录失败:', error)
|
|
// 登录失败后重新获取验证码
|
|
await refreshCaptcha()
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
// 组件挂载时获取验证码
|
|
refreshCaptcha()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="login-container">
|
|
<!-- 背景图 -->
|
|
<div class="login-background"></div>
|
|
|
|
<!-- 登录框 -->
|
|
<div class="login-box">
|
|
<div class="login-header">
|
|
<h2 class="login-title">
|
|
<i-lucide-cpu class="title-icon" />
|
|
工业控制系统 HMI
|
|
</h2>
|
|
<p class="login-subtitle">请登录您的账户</p>
|
|
</div>
|
|
|
|
<a-form
|
|
:model="formData"
|
|
:rules="rules"
|
|
@finish="handleLogin"
|
|
class="login-form"
|
|
layout="vertical"
|
|
>
|
|
<!-- 用户名 -->
|
|
<a-form-item name="username" class="form-item">
|
|
<a-input
|
|
v-model:value="formData.username"
|
|
placeholder="请输入用户名"
|
|
size="large"
|
|
class="login-input"
|
|
>
|
|
<template #prefix>
|
|
<i-lucide-user class="input-icon" />
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
|
|
<!-- 密码 -->
|
|
<a-form-item name="password" class="form-item">
|
|
<a-input-password
|
|
v-model:value="formData.password"
|
|
placeholder="请输入密码"
|
|
size="large"
|
|
class="login-input"
|
|
>
|
|
<template #prefix>
|
|
<i-lucide-lock class="input-icon" />
|
|
</template>
|
|
</a-input-password>
|
|
</a-form-item>
|
|
|
|
<!-- 验证码 -->
|
|
<a-form-item name="code" class="form-item" v-if="rules.code[0].required">
|
|
<div class="captcha-container">
|
|
<a-input
|
|
v-model:value="formData.code"
|
|
placeholder="请输入验证码"
|
|
size="large"
|
|
class="login-input captcha-input"
|
|
>
|
|
<template #prefix>
|
|
<i-lucide-shield-check class="input-icon" />
|
|
</template>
|
|
</a-input>
|
|
<div class="captcha-image-container" @click="refreshCaptcha">
|
|
<img
|
|
v-if="captchaImg"
|
|
:src="captchaImg"
|
|
alt="验证码"
|
|
class="captcha-image"
|
|
/>
|
|
<div v-else class="captcha-loading">
|
|
<i-lucide-loader class="loading-icon" />
|
|
</div>
|
|
<div class="captcha-refresh-hint">
|
|
<i-lucide-refresh-cw class="refresh-icon" />
|
|
点击刷新
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a-form-item>
|
|
|
|
<!-- 登录按钮 -->
|
|
<a-form-item class="form-item">
|
|
<a-button
|
|
type="primary"
|
|
html-type="submit"
|
|
size="large"
|
|
:loading="loading"
|
|
class="login-button"
|
|
block
|
|
>
|
|
{{ loading ? '登录中...' : '登录' }}
|
|
</a-button>
|
|
</a-form-item>
|
|
</a-form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
// 变量定义
|
|
$primary-color: #4a90e2;
|
|
$primary-light: #5ba0f2;
|
|
$primary-dark: #3a7bd5;
|
|
$success-color: #52c41a;
|
|
$warning-color: #faad14;
|
|
$error-color: #ff4d4f;
|
|
$white: #ffffff;
|
|
$text-light: #b8d4f0;
|
|
$text-dark: #333333;
|
|
$bg-overlay: rgba(255, 255, 255, 0.1);
|
|
$bg-glass: rgba(255, 255, 255, 0.15);
|
|
$border-light: rgba(255, 255, 255, 0.3);
|
|
$shadow-light: rgba(0, 0, 0, 0.1);
|
|
$shadow-medium: rgba(0, 0, 0, 0.2);
|
|
$border-radius: 8px;
|
|
$border-radius-lg: 12px;
|
|
$spacing-sm: 8px;
|
|
$spacing-md: 16px;
|
|
$spacing-lg: 24px;
|
|
$spacing-xl: 32px;
|
|
$transition: all 0.3s ease;
|
|
|
|
.login-container {
|
|
position: relative;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.login-background {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url('/bg.jpg');
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
filter: blur(2px);
|
|
z-index: 1;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(74, 144, 226, 0.3) 0%,
|
|
rgba(58, 123, 213, 0.4) 50%,
|
|
rgba(91, 160, 242, 0.3) 100%
|
|
);
|
|
}
|
|
}
|
|
|
|
.login-box {
|
|
position: relative;
|
|
z-index: 2;
|
|
width: 420px;
|
|
padding: $spacing-xl;
|
|
background: $bg-glass;
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid $border-light;
|
|
border-radius: $border-radius-lg;
|
|
box-shadow:
|
|
0 8px 32px rgba(0, 0, 0, 0.1),
|
|
0 4px 16px rgba(0, 0, 0, 0.1),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
|
animation: slideInUp 0.6s ease-out;
|
|
}
|
|
|
|
@keyframes slideInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.login-header {
|
|
text-align: center;
|
|
margin-bottom: $spacing-xl;
|
|
|
|
.login-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: $spacing-sm;
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: $white;
|
|
margin: 0 0 $spacing-sm 0;
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
|
|
.title-icon {
|
|
font-size: 28px;
|
|
color: $primary-light;
|
|
}
|
|
}
|
|
|
|
.login-subtitle {
|
|
font-size: 14px;
|
|
color: $text-light;
|
|
margin: 0;
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
.login-form {
|
|
.form-item {
|
|
margin-bottom: $spacing-lg;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.login-input {
|
|
height: 48px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: $border-radius;
|
|
transition: $transition;
|
|
|
|
&:hover {
|
|
border-color: rgba(255, 255, 255, 0.4);
|
|
background: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
&:focus-within {
|
|
border-color: $primary-light;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
|
|
}
|
|
|
|
:deep(.ant-input) {
|
|
background: transparent;
|
|
border: none;
|
|
color: $white;
|
|
font-size: 14px;
|
|
|
|
&::placeholder {
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
}
|
|
|
|
:deep(.ant-input-password-icon) {
|
|
color: rgba(255, 255, 255, 0.6);
|
|
|
|
&:hover {
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.input-icon {
|
|
color: rgba(255, 255, 255, 0.6);
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
.captcha-container {
|
|
display: flex;
|
|
gap: $spacing-md;
|
|
align-items: stretch;
|
|
|
|
.captcha-input {
|
|
flex: 1;
|
|
}
|
|
|
|
.captcha-image-container {
|
|
position: relative;
|
|
width: 120px;
|
|
height: 48px;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: $border-radius;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
transition: $transition;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
|
|
&:hover {
|
|
border-color: $primary-light;
|
|
|
|
.captcha-refresh-hint {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.captcha-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.captcha-loading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
|
|
.loading-icon {
|
|
color: $white;
|
|
font-size: 20px;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
}
|
|
|
|
.captcha-refresh-hint {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: $white;
|
|
font-size: 12px;
|
|
opacity: 0;
|
|
transition: $transition;
|
|
|
|
.refresh-icon {
|
|
font-size: 16px;
|
|
margin-bottom: 2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.login-button {
|
|
height: 48px;
|
|
background: linear-gradient(135deg, $primary-color 0%, $primary-dark 100%);
|
|
border: none;
|
|
border-radius: $border-radius;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
transition: $transition;
|
|
box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
|
|
|
|
&:hover {
|
|
background: linear-gradient(135deg, $primary-light 0%, $primary-color 100%);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4);
|
|
}
|
|
|
|
&:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.button-icon {
|
|
margin-right: $spacing-sm;
|
|
font-size: 18px;
|
|
}
|
|
|
|
:deep(.ant-btn-loading-icon) {
|
|
margin-right: $spacing-sm;
|
|
}
|
|
}
|
|
|
|
// 表单验证错误样式
|
|
:deep(.ant-form-item-has-error) {
|
|
.login-input {
|
|
border-color: $error-color;
|
|
|
|
&:focus-within {
|
|
box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
|
|
}
|
|
}
|
|
|
|
.captcha-image-container {
|
|
border-color: $error-color;
|
|
}
|
|
}
|
|
|
|
:deep(.ant-form-item-explain-error) {
|
|
color: rgba(255, 255, 255, 0.9);
|
|
background: rgba(255, 77, 79, 0.1);
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
margin-top: 4px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
// 响应式设计
|
|
@media (max-width: 768px) {
|
|
.login-box {
|
|
width: 90%;
|
|
max-width: 380px;
|
|
padding: $spacing-lg;
|
|
}
|
|
|
|
.captcha-container {
|
|
flex-direction: column;
|
|
|
|
.captcha-image-container {
|
|
width: 100%;
|
|
height: 60px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.login-box {
|
|
padding: $spacing-md;
|
|
}
|
|
|
|
.login-header .login-title {
|
|
font-size: 20px;
|
|
|
|
.title-icon {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
}
|
|
</style> |