375 lines
8.4 KiB
Vue
375 lines
8.4 KiB
Vue
|
<template>
|
|||
|
|
<div class="lock-container">
|
|||
|
|
<!-- 动态粒子背景 -->
|
|||
|
|
<canvas ref="particleCanvas" class="particle-bg"></canvas>
|
|||
|
|
|
|||
|
|
<!-- 时钟 -->
|
|||
|
|
<div class="lock-time">{{ currentTime }}</div>
|
|||
|
|
<div class="lock-date">{{ currentDate }}</div>
|
|||
|
|
|
|||
|
|
<!-- 锁屏卡片 -->
|
|||
|
|
<div class="lock-card">
|
|||
|
|
<div class="avatar-wrap">
|
|||
|
|
<img :src="userStore.avatar" class="lock-avatar" @error="onAvatarError" />
|
|||
|
|
<div class="lock-icon">🔒</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="lock-username">{{ userStore.nickName }}</div>
|
|||
|
|
<div class="lock-hint">系统已锁定，请输入密码解锁</div>
|
|||
|
|
|
|||
|
|
<div class="input-wrap" :class="{ shake: isShaking }">
|
|||
|
|
<input ref="passwordInput" v-model="password" type="password" placeholder="请输入登录密码" class="lock-input" @keydown.enter="handleUnlock" autocomplete="off" />
|
|||
|
|
<button class="unlock-btn" @click="handleUnlock" :disabled="loading">
|
|||
|
|
<span v-if="!loading">→</span>
|
|||
|
|
<span v-else class="loading-dot">···</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div v-if="errorMsg" class="error-msg">{{ errorMsg }}</div>
|
|||
|
|
|
|||
|
|
<div class="lock-footer">
|
|||
|
|
<a href="javascript:;" @click="goLogin">退出重新登录</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { useRouter } from 'vue-router'
|
|||
|
|
import useUserStore from '@/store/modules/user'
|
|||
|
|
import useLockStore from '@/store/modules/lock'
|
|||
|
|
import { unlockScreen } from '@/api/login'
|
|||
|
|
import defAva from '@/assets/images/profile.jpg'
|
|||
|
|
|
|||
|
|
const router = useRouter()
|
|||
|
|
const userStore = useUserStore()
|
|||
|
|
const lockStore = useLockStore()
|
|||
|
|
|
|||
|
|
const password = ref('')
|
|||
|
|
const loading = ref(false)
|
|||
|
|
const errorMsg = ref('')
|
|||
|
|
const isShaking = ref(false)
|
|||
|
|
const currentTime = ref('')
|
|||
|
|
const currentDate = ref('')
|
|||
|
|
const passwordInput = ref(null)
|
|||
|
|
const particleCanvas = ref(null)
|
|||
|
|
|
|||
|
|
let timer = null
|
|||
|
|
let animationId = null
|
|||
|
|
let particles = []
|
|||
|
|
|
|||
|
|
const onAvatarError = (e) => {
|
|||
|
|
e.target.src = defAva
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const startClock = () => {
|
|||
|
|
const update = () => {
|
|||
|
|
const now = new Date()
|
|||
|
|
const pad = n => String(n).padStart(2, '0')
|
|||
|
|
currentTime.value = `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`
|
|||
|
|
const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
|
|||
|
|
currentDate.value = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日 ${days[now.getDay()]}`
|
|||
|
|
}
|
|||
|
|
update()
|
|||
|
|
timer = setInterval(update, 1000)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleUnlock = async () => {
|
|||
|
|
if (!password.value) {
|
|||
|
|
showError('请输入密码')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
loading.value = true
|
|||
|
|
errorMsg.value = ''
|
|||
|
|
try {
|
|||
|
|
await unlockScreen(password.value)
|
|||
|
|
const lockPath = lockStore.lockPath
|
|||
|
|
lockStore.unlockScreen()
|
|||
|
|
router.replace(lockPath)
|
|||
|
|
} catch (err) {
|
|||
|
|
const msg = err.message || err.toString()
|
|||
|
|
showError(msg)
|
|||
|
|
password.value = ''
|
|||
|
|
nextTick(() => passwordInput.value?.focus())
|
|||
|
|
} finally {
|
|||
|
|
loading.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const showError = (msg) => {
|
|||
|
|
errorMsg.value = msg
|
|||
|
|
isShaking.value = true
|
|||
|
|
setTimeout(() => { isShaking.value = false }, 600)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const goLogin = () => {
|
|||
|
|
lockStore.unlockScreen()
|
|||
|
|
userStore.logOut().then(() => {
|
|||
|
|
router.push('/login')
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const initParticles = () => {
|
|||
|
|
const canvas = particleCanvas.value
|
|||
|
|
if (!canvas) return
|
|||
|
|
const ctx = canvas.getContext('2d')
|
|||
|
|
const resize = () => {
|
|||
|
|
canvas.width = window.innerWidth
|
|||
|
|
canvas.height = window.innerHeight
|
|||
|
|
}
|
|||
|
|
resize()
|
|||
|
|
window.addEventListener('resize', resize)
|
|||
|
|
|
|||
|
|
particles = Array.from({ length: 80 }, () => ({
|
|||
|
|
x: Math.random() * canvas.width,
|
|||
|
|
y: Math.random() * canvas.height,
|
|||
|
|
r: Math.random() * 2 + 1,
|
|||
|
|
dx: (Math.random() - 0.5) * 0.6,
|
|||
|
|
dy: (Math.random() - 0.5) * 0.6,
|
|||
|
|
alpha: Math.random() * 0.5 + 0.2
|
|||
|
|
}))
|
|||
|
|
|
|||
|
|
const draw = () => {
|
|||
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
|||
|
|
particles.forEach(p => {
|
|||
|
|
ctx.beginPath()
|
|||
|
|
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2)
|
|||
|
|
ctx.fillStyle = `rgba(255,255,255,${p.alpha})`
|
|||
|
|
ctx.fill()
|
|||
|
|
p.x += p.dx
|
|||
|
|
p.y += p.dy
|
|||
|
|
if (p.x < 0 || p.x > canvas.width) p.dx *= -1
|
|||
|
|
if (p.y < 0 || p.y > canvas.height) p.dy *= -1
|
|||
|
|
})
|
|||
|
|
for (let i = 0; i < particles.length; i++) {
|
|||
|
|
for (let j = i + 1; j < particles.length; j++) {
|
|||
|
|
const a = particles[i], b = particles[j]
|
|||
|
|
const dist = Math.hypot(a.x - b.x, a.y - b.y)
|
|||
|
|
if (dist < 120) {
|
|||
|
|
ctx.beginPath()
|
|||
|
|
ctx.moveTo(a.x, a.y)
|
|||
|
|
ctx.lineTo(b.x, b.y)
|
|||
|
|
ctx.strokeStyle = `rgba(255,255,255,${0.15 * (1 - dist / 120)})`
|
|||
|
|
ctx.lineWidth = 0.5
|
|||
|
|
ctx.stroke()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
animationId = requestAnimationFrame(draw)
|
|||
|
|
}
|
|||
|
|
draw()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
startClock()
|
|||
|
|
initParticles()
|
|||
|
|
nextTick(() => passwordInput.value?.focus())
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
onBeforeUnmount(() => {
|
|||
|
|
clearInterval(timer)
|
|||
|
|
cancelAnimationFrame(animationId)
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
/* 样式与原文件完全一致，无需改动 */
|
|||
|
|
.lock-container {
|
|||
|
|
position: fixed;
|
|||
|
|
inset: 0;
|
|||
|
|
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
z-index: 9999;
|
|||
|
|
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.particle-bg {
|
|||
|
|
position: absolute;
|
|||
|
|
inset: 0;
|
|||
|
|
z-index: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lock-time {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 1;
|
|||
|
|
font-size: 72px;
|
|||
|
|
font-weight: 200;
|
|||
|
|
color: #fff;
|
|||
|
|
letter-spacing: 4px;
|
|||
|
|
text-shadow: 0 0 40px rgba(255,255,255,0.3);
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
font-variant-numeric: tabular-nums;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lock-date {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 1;
|
|||
|
|
font-size: 15px;
|
|||
|
|
color: rgba(255,255,255,0.6);
|
|||
|
|
margin-bottom: 48px;
|
|||
|
|
letter-spacing: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lock-card {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 1;
|
|||
|
|
background: rgba(255, 255, 255, 0.08);
|
|||
|
|
backdrop-filter: blur(20px);
|
|||
|
|
-webkit-backdrop-filter: blur(20px);
|
|||
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|||
|
|
border-radius: 24px;
|
|||
|
|
padding: 40px 48px;
|
|||
|
|
width: 360px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
box-shadow: 0 25px 60px rgba(0,0,0,0.4);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.avatar-wrap {
|
|||
|
|
position: relative;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lock-avatar {
|
|||
|
|
width: 80px;
|
|||
|
|
height: 80px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
border: 3px solid rgba(255,255,255,0.3);
|
|||
|
|
object-fit: cover;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lock-icon {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: -4px;
|
|||
|
|
right: -4px;
|
|||
|
|
background: rgba(255,255,255,0.15);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
width: 26px;
|
|||
|
|
height: 26px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 13px;
|
|||
|
|
backdrop-filter: blur(8px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lock-username {
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
margin-bottom: 6px;
|
|||
|
|
letter-spacing: 1px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lock-hint {
|
|||
|
|
color: rgba(255,255,255,0.5);
|
|||
|
|
font-size: 13px;
|
|||
|
|
margin-bottom: 28px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-wrap {
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
background: rgba(255,255,255,0.1);
|
|||
|
|
border: 1px solid rgba(255,255,255,0.2);
|
|||
|
|
border-radius: 50px;
|
|||
|
|
padding: 4px 4px 4px 20px;
|
|||
|
|
transition: border-color 0.3s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-wrap:focus-within {
|
|||
|
|
border-color: rgba(255,255,255,0.6);
|
|||
|
|
background: rgba(255,255,255,0.13);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-wrap.shake {
|
|||
|
|
animation: shake 0.5s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes shake {
|
|||
|
|
0%, 100% { transform: translateX(0); }
|
|||
|
|
20% { transform: translateX(-8px); }
|
|||
|
|
40% { transform: translateX(8px); }
|
|||
|
|
60% { transform: translateX(-6px); }
|
|||
|
|
80% { transform: translateX(6px); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lock-input {
|
|||
|
|
flex: 1;
|
|||
|
|
background: transparent;
|
|||
|
|
border: none;
|
|||
|
|
outline: none;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 15px;
|
|||
|
|
padding: 10px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lock-input::placeholder {
|
|||
|
|
color: rgba(255,255,255,0.35);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.unlock-btn {
|
|||
|
|
width: 42px;
|
|||
|
|
height: 42px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
|||
|
|
border: none;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 18px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: transform 0.2s, opacity 0.2s;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.unlock-btn:hover:not(:disabled) {
|
|||
|
|
transform: scale(1.08);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.unlock-btn:disabled {
|
|||
|
|
opacity: 0.6;
|
|||
|
|
cursor: not-allowed;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.loading-dot {
|
|||
|
|
font-size: 13px;
|
|||
|
|
letter-spacing: 1px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.error-msg {
|
|||
|
|
margin-top: 14px;
|
|||
|
|
color: #ff7675;
|
|||
|
|
font-size: 13px;
|
|||
|
|
text-align: center;
|
|||
|
|
animation: fadeIn 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes fadeIn {
|
|||
|
|
from { opacity: 0; transform: translateY(-4px); }
|
|||
|
|
to { opacity: 1; transform: translateY(0); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lock-footer {
|
|||
|
|
margin-top: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lock-footer a {
|
|||
|
|
color: rgba(255,255,255,0.4);
|
|||
|
|
font-size: 13px;
|
|||
|
|
text-decoration: none;
|
|||
|
|
transition: color 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lock-footer a:hover {
|
|||
|
|
color: rgba(255,255,255,0.8);
|
|||
|
|
}
|
|||
|
|
</style>
|