52 lines
1.7 KiB
Vue
52 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { NButton, NIcon } from 'naive-ui'
|
|
import { Lock } from '@vicons/tabler'
|
|
import { RouterLink, useRoute } from 'vue-router'
|
|
|
|
const route = useRoute()
|
|
|
|
const redirect = computed(() => {
|
|
const value = route.query.redirect
|
|
return typeof value === 'string' && value.startsWith('/') ? value : '/'
|
|
})
|
|
|
|
const title = computed(() => {
|
|
if (redirect.value === '/upload') {
|
|
return '上传前先登录'
|
|
}
|
|
|
|
return '需要先登录'
|
|
})
|
|
|
|
const description = computed(() => {
|
|
if (redirect.value === '/upload') {
|
|
return '上传云图、使用地图快捷上传都需要先登录账号。登录后再回来，这里的上传入口就会开放。'
|
|
}
|
|
|
|
return '这个页面需要先登录才能继续访问。登录成功后可以返回刚才的目标页面继续操作。'
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="oc-system-page">
|
|
<div class="oc-system-card">
|
|
<NIcon size="72" class="text-sky-600"><Lock /></NIcon>
|
|
<p class="mt-6 text-sm font-medium uppercase tracking-[0.24em] text-sky-600">401 Login Required</p>
|
|
<h1 class="oc-page-title">{{ title }}</h1>
|
|
<p class="oc-page-description mx-auto max-w-xl">
|
|
{{ description }}
|
|
</p>
|
|
|
|
<div class="mt-8 flex flex-wrap items-center justify-center gap-3">
|
|
<RouterLink :to="{ path: '/login', query: redirect !== '/' ? { redirect } : undefined }">
|
|
<NButton type="default" secondary strong class="oc-panel-button oc-panel-button--sky">前往登录</NButton>
|
|
</RouterLink>
|
|
<RouterLink to="/">
|
|
<NButton type="default" secondary strong class="oc-panel-button oc-panel-button--neutral">返回地图</NButton>
|
|
</RouterLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|