lq/spa-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

注册、隐藏第三方登录

Browse Source
This commit is contained in:
年糕崽崽
2025-05-05 10:48:02 +08:00
parent a04c21152a
commit ec94aa7ba4
2 changed files with 175 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
src/components/common/AuthModal.vue
View File

@@ -9,10 +9,17 @@ const loading = ref(false)
const formState = ref({
username: '',
password: '',
remember: true
remember: true,
email: '',
code: ''
})
const userStore = useUserStore() // Initialize the store outside the handleSubmit function
const loginType = ref(1)
const isSend = ref(1)
const reloadSendTime = ref(60)
let timer = null
const userStore = useUserStore()
onMounted(() => {
AOS.init({
@@ -25,7 +32,6 @@ onMounted(() => {
const show = () => {
visible.value = true
// 在下一个渲染周期触发AOS动画
setTimeout(() => {
document.querySelectorAll('[data-aos]').forEach(el => {
el.classList.add('aos-animate')
@@ -47,12 +53,26 @@ const handleSubmit = async () => {
}
}
const sendEmailCode = () => {
// 模拟发送验证码
alert('验证码已发送，验证码为：123456')
isSend.value = 2
timer = setInterval(() => {
if (reloadSendTime.value > 0) {
reloadSendTime.value--
} else {
clearInterval(timer)
isSend.value = 1
reloadSendTime.value = 60
}
}, 1000)
}
defineExpose({
show,
close
})
</script>
<template>
<!-- 模态框背景遮罩 -->
<div
@@ -92,7 +112,8 @@ defineExpose({
</button>
</div>
<div class="px-8 pt-12 pb-8">
<!-- 登录表单 -->
<div v-if="loginType === 1" class="px-8 pt-12 pb-8">
<div class="text-center mb-8" data-aos="fade-down" data-aos-delay="100">
<h3 class="text-2xl font-bold text-gray-900 dark:text-white" id="modal-title">
欢迎登录
@@ -184,51 +205,163 @@ defineExpose({
</button>
</div>
<!-- 分割线和其他登录方式 -->
<div class="mt-6" data-aos="fade-up" data-aos-delay="600">
<div class="relative">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white/90 dark:bg-gray-800/90 text-gray-500 dark:text-gray-400">
其他登录方式
</span>
<!-- 注册链接 -->
<div class="text-sm text-center mt-6" data-aos="fade-up" data-aos-delay="700">
<span class="text-gray-600 dark:text-gray-400">还没有账号? </span>
<a href="javascript:;" @click="loginType = 2" class="font-medium text-rose-600 hover:text-rose-500 dark:text-rose-400 dark:hover:text-rose-300 cursor-pointer">
立即注册
</a>
</div>
</form>
</div>
<!-- 注册表单 -->
<div v-else-if="loginType === 2" class="px-8 pt-12 pb-8">
<div class="text-center mb-8" data-aos="fade-down" data-aos-delay="100">
<h3 class="text-2xl font-bold text-gray-900 dark:text-white" id="modal-title">
欢迎注册
</h3>
</div>
<form @submit.prevent="handleSubmit" class="space-y-6">
<!-- 用户名 -->
<div data-aos="fade-up" data-aos-delay="200">
<label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
用户名
</label>
<div class="relative rounded-lg shadow-sm">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
</div>
<input
id="username"
v-model="formState.username"
type="text"
name="username"
autocomplete="username"
required
class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-rose-500 focus:border-rose-500 bg-white/50 dark:bg-gray-700/50 backdrop-blur-sm text-gray-900 dark:text-white text-sm"
placeholder="请输入用户名"
/>
</div>
</div>
<div class="mt-6 grid grid-cols-3 gap-3">
<div>
<a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white/70 dark:bg-gray-700/70 backdrop-blur-sm text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-white dark:hover:bg-gray-600 cursor-pointer transition-all duration-300">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<!-- 密码 -->
<div data-aos="fade-up" data-aos-delay="300">
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
密码
</label>
<div class="relative rounded-lg shadow-sm">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</div>
<input
id="password"
v-model="formState.password"
type="password"
name="password"
autocomplete="current-password"
required
class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-rose-500 focus:border-rose-500 bg-white/50 dark:bg-gray-700/50 backdrop-blur-sm text-gray-900 dark:text-white text-sm"
placeholder="请输入密码"
/>
</div>
</div>
<div>
<a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white/70 dark:bg-gray-700/70 backdrop-blur-sm text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-white dark:hover:bg-gray-600 cursor-pointer transition-all duration-300">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
<!-- 邮箱 -->
<div data-aos="fade-up" data-aos-delay="400" class="flex items-center">
<div class="flex-1">
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
邮箱
</label>
<div class="relative rounded-lg shadow-sm">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</a>
</div>
<div>
<a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white/70 dark:bg-gray-700/70 backdrop-blur-sm text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-white dark:hover:bg-gray-600 cursor-pointer transition-all duration-300">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
</svg>
</a>
</div>
<input id="email" v-model="formState.email" type="email" name="email" autocomplete="email" required
class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-rose-500 focus:border-rose-500 bg-white/50 dark:bg-gray-700/50 backdrop-blur-sm text-gray-900 dark:text-white text-sm"
placeholder="请输入您的邮箱">
</div>
</div>
</div>
<!-- 注册链接 -->
<!-- 邮箱验证码 -->
<div data-aos="fade-up" data-aos-delay="500" class="flex items-center">
<div class="flex-1">
<label for="verification-code" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
验证码
</label>
<div class="relative rounded-lg shadow-sm">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</div>
<input id="verification-code" v-model="formState.code" type="text" name="code" autocomplete="one-time-code"
required
class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-rose-500 focus:border-rose-500 bg-white/50 dark:bg-gray-700/50 backdrop-blur-sm text-gray-900 dark:text-white text-sm"
placeholder="请输入验证码">
</div>
</div>
<button v-if="isSend === 1" @click="sendEmailCode" class="mt-6 ml-3 px-4 py-3 bg-rose-500 text-white rounded-lg hover:bg-rose-600 focus:outline-none focus:ring-rose-500 focus:border-rose-500">
发送验证码
</button>
<!-- 假设这里有个用于重新发送验证码的按钮 -->
<button v-else id="resend-code-btn" class="mt-6 ml-3 px-4 py-3 bg-rose-500 text-white rounded-lg hover:bg-rose-600 focus:outline-none focus:ring-rose-500 focus:border-rose-500" :disabled="reloadSendTime > 0">
{{ reloadSendTime > 0 ? `重新发送 (${reloadSendTime})` : '重新发送' }}
</button>
</div>
<!-- 记住我 -->
<div class="flex items-center justify-between" data-aos="fade-up" data-aos-delay="400">
<div class="flex items-center">
<input
id="remember-me"
v-model="formState.remember"
name="remember-me"
type="checkbox"
class="h-4 w-4 text-rose-600 focus:ring-rose-500 border-gray-300 dark:border-gray-600 rounded cursor-pointer"
/>
<label for="remember-me" class="ml-2 block text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
记住我
</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-rose-600 hover:text-rose-500 dark:text-rose-400 dark:hover:text-rose-300 cursor-pointer">
忘记密码?
</a>
</div>
</div>
<!-- 注册按钮 -->
<div data-aos="fade-up" data-aos-delay="500">
<button
type="submit"
class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-rose-600 hover:bg-rose-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500 cursor-pointer transition-all duration-300 hover:shadow-lg"
:disabled="loading"
>
<svg v-if="loading" class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
{{ loading ? '注册中...' : '立即注册' }}
</button>
</div>
<!-- 登录链接 -->
<div class="text-sm text-center mt-6" data-aos="fade-up" data-aos-delay="700">
<span class="text-gray-600 dark:text-gray-400">还没有账号? </span>
<a href="#" class="font-medium text-rose-600 hover:text-rose-500 dark:text-rose-400 dark:hover:text-rose-300 cursor-pointer">
立即注册
<span class="text-gray-600 dark:text-gray-400">已有账号? </span>
<a href="javascript:;" @click="loginType = 1" class="font-medium text-rose-600 hover:text-rose-500 dark:text-rose-400 dark:hover:text-rose-300 cursor-pointer">
立即登录
</a>
</div>
</form>
@@ -263,4 +396,4 @@ button, a, [role="button"], .cursor-pointer {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
</style>
</style>

3
src/layouts/MainLayout.vue
View File

@@ -109,7 +109,8 @@ onMounted(() => {
</a>
<hr class="my-1 border-gray-200 dark:border-gray-700" />
<a
href="#"
@click="userStore.logout()"
href="javascript:;"
class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-rose-50 dark:hover:bg-rose-900/20 hover:text-rose-600 dark:hover:text-rose-400"
>
退出登录