66 lines
2.9 KiB
Vue
66 lines
2.9 KiB
Vue
<template>
|
|
<div class="min-h-screen w-full flex items-center justify-center bg-[var(--c-paper)] relative overflow-hidden">
|
|
<!-- 背景装饰 -->
|
|
<div class="absolute -top-24 -right-24 w-80 h-80 rounded-full bg-[var(--c-primary)]/10 blur-3xl"></div>
|
|
<div class="absolute -bottom-24 -left-24 w-80 h-80 rounded-full bg-[#e8a5b2]/10 blur-3xl"></div>
|
|
<div class="absolute inset-0 pointer-events-none opacity-[0.04]"
|
|
style="background-image: radial-gradient(var(--c-primary) 1px, transparent 1px); background-size: 22px 22px;"></div>
|
|
|
|
<div class="relative z-10 w-[360px] bg-white/80 backdrop-blur-xl border border-[var(--c-primary)]/15 rounded-3xl shadow-2xl p-9 animate-fade-up">
|
|
<div class="text-center mb-8">
|
|
<div class="text-3xl mb-3 text-[var(--c-primary)] font-serif">❀</div>
|
|
<h1 class="text-xl tracking-[0.3em] text-[var(--c-ink)] font-light">婚礼邀请函 · 后台</h1>
|
|
<p class="text-[11px] text-[var(--c-muted)] tracking-[0.25em] mt-2">制作者 · 年糕崽崽</p>
|
|
</div>
|
|
|
|
<a-form :model="form" layout="vertical" @finish="onSubmit">
|
|
<a-form-item name="account" :rules="[{ required: true, message: '请输入账号' }]">
|
|
<a-input v-model:value="form.account" size="large" placeholder="管理员账号">
|
|
<template #prefix><i class="fa-solid fa-user text-[var(--c-primary)]"></i></template>
|
|
</a-input>
|
|
</a-form-item>
|
|
<a-form-item name="password" :rules="[{ required: true, message: '请输入密码' }]">
|
|
<a-input-password v-model:value="form.password" size="large" placeholder="密码">
|
|
<template #prefix><i class="fa-solid fa-lock text-[var(--c-primary)]"></i></template>
|
|
</a-input-password>
|
|
</a-form-item>
|
|
<a-button type="primary" html-type="submit" size="large" block :loading="loading"
|
|
class="!bg-[var(--c-primary)] hover:!bg-[var(--c-primary-deep)] !border-[var(--c-primary)] !rounded-xl !tracking-[0.2em]">
|
|
登 录
|
|
</a-button>
|
|
</a-form>
|
|
|
|
<div class="mt-6 text-center">
|
|
<router-link to="/" class="text-[12px] text-[var(--c-primary)] hover:underline">返回请柬预览</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref } from 'vue'
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
import { message } from 'ant-design-vue'
|
|
import { useAdminStore } from '@/stores/admin'
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const adminStore = useAdminStore()
|
|
const loading = ref(false)
|
|
const form = reactive({ account: '', password: '' })
|
|
|
|
const onSubmit = async () => {
|
|
loading.value = true
|
|
try {
|
|
await adminStore.login(form)
|
|
message.success('登录成功')
|
|
router.replace(route.query.redirect || '/admin')
|
|
} catch (e) {
|
|
const msg = e?.response?.data?.error || e?.message || '登录失败'
|
|
message.error(msg)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
</script>
|