119 lines
4.4 KiB
Vue
119 lines
4.4 KiB
Vue
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import { useRouter, useRoute } from 'vue-router'
|
||
import { NAlert, NButton, NCard, NForm, NFormItem, NInput } from 'naive-ui'
|
||
import { useAuthStore } from '@/stores/auth'
|
||
|
||
const authStore = useAuthStore()
|
||
const router = useRouter()
|
||
const route = useRoute()
|
||
|
||
const email = ref(typeof route.query.email === 'string' ? route.query.email : '')
|
||
const password = ref('')
|
||
const error = ref('')
|
||
const loading = ref(false)
|
||
|
||
async function handleLogin() {
|
||
error.value = ''
|
||
loading.value = true
|
||
try {
|
||
await authStore.login(email.value, password.value)
|
||
const redirect = (route.query.redirect as string) || '/'
|
||
router.push(redirect)
|
||
} catch (e: unknown) {
|
||
error.value = e instanceof Error ? e.message : '登录失败，请稍后重试'
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="min-h-[calc(100vh-4rem)] px-4 py-10">
|
||
<div class="mx-auto grid max-w-6xl gap-8 lg:grid-cols-[1.1fr_0.9fr] lg:items-stretch">
|
||
<section class="flex h-full flex-col justify-between border border-slate-200 bg-[linear-gradient(135deg,#f0fdfa_0%,#ffffff_48%,#eff6ff_100%)] p-8 shadow-[10px_10px_0_0_rgba(15,23,42,0.08)]">
|
||
<div>
|
||
<p class="text-sm uppercase tracking-[0.26em] text-teal-700">Sky Log In</p>
|
||
<h1 class="mt-4 max-w-xl text-5xl font-black leading-[1.05] text-slate-900">
|
||
登录后继续记录
|
||
<span class="block text-teal-700">你眼中的每一朵云</span>
|
||
</h1>
|
||
<!-- <p class="mt-6 max-w-lg text-base leading-8 text-slate-600">
|
||
在地图、图鉴和画廊之间同步你的观测记录。上传新的云图后，图鉴会自动点亮，画廊也会按时间收纳你的作品。
|
||
</p> -->
|
||
</div>
|
||
<div class="mt-8 flex gap-4">
|
||
<div class="border border-slate-200 bg-white px-4 py-3">
|
||
<div class="text-xs uppercase tracking-[0.2em] text-slate-500">Collection</div>
|
||
<div class="mt-2 text-2xl font-bold text-slate-900">10</div>
|
||
<div class="mt-1 text-sm text-slate-500">基础云属待收集</div>
|
||
</div>
|
||
<div class="border border-slate-200 bg-white px-4 py-3">
|
||
<div class="text-xs uppercase tracking-[0.2em] text-slate-500">Mode</div>
|
||
<div class="mt-2 text-2xl font-bold text-slate-900">Atlas</div>
|
||
<div class="mt-1 text-sm text-slate-500">地图、图鉴、画廊一体</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<NCard class="h-full shadow-[12px_12px_0_0_rgba(15,23,42,0.08)]">
|
||
<div class="mb-8">
|
||
<div class="text-sm uppercase tracking-[0.22em] text-slate-500">Member Access</div>
|
||
<h2 class="mt-3 text-3xl font-bold text-slate-900">登录 OpenCloud</h2>
|
||
<p class="mt-2 text-sm text-slate-500">输入邮箱和密码，继续你的天空档案。</p>
|
||
</div>
|
||
|
||
<NForm @submit.prevent="handleLogin">
|
||
<NFormItem label="邮箱">
|
||
<NInput
|
||
v-model:value="email"
|
||
required
|
||
autocomplete="email"
|
||
placeholder="your@email.com"
|
||
/>
|
||
</NFormItem>
|
||
|
||
<NFormItem label="密码">
|
||
<NInput
|
||
v-model:value="password"
|
||
type="password"
|
||
required
|
||
show-password-on="click"
|
||
autocomplete="current-password"
|
||
placeholder="输入密码"
|
||
/>
|
||
</NFormItem>
|
||
|
||
<NAlert v-if="error" type="error" class="mb-4">
|
||
{{ error }}
|
||
</NAlert>
|
||
|
||
<NButton
|
||
attr-type="submit"
|
||
type="primary"
|
||
block
|
||
size="large"
|
||
class="oc-primary-button oc-primary-button--teal"
|
||
:loading="loading"
|
||
>
|
||
{{ loading ? '登录中...' : '登录' }}
|
||
</NButton>
|
||
</NForm>
|
||
|
||
<div class="mt-6 flex flex-wrap items-center justify-between gap-3 text-sm text-slate-500">
|
||
<p>
|
||
没有账号？
|
||
<RouterLink to="/register" class="font-semibold text-teal-700 hover:text-teal-800">去注册</RouterLink>
|
||
</p>
|
||
<RouterLink
|
||
:to="email ? { path: '/forgot-password', query: { email } } : { path: '/forgot-password' }"
|
||
class="font-semibold text-teal-700 transition-colors hover:text-teal-800"
|
||
>
|
||
忘记密码？
|
||
</RouterLink>
|
||
</div>
|
||
</NCard>
|
||
</div>
|
||
</div>
|
||
</template>
|