优化密码找回流程、管理后台批量操作和上传体验 (#2)

Reviewed-on: #2

src/views/system/AuthRequiredView.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { NButton } from 'naive-ui'
+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="flex min-h-[calc(100vh-4rem)] items-center justify-center px-4 py-10">
+    <div class="w-full max-w-2xl border border-slate-200 bg-white px-8 py-14 text-center shadow-sm">
+      <div class="text-7xl leading-none">🔐</div>
+      <p class="mt-6 text-sm font-medium uppercase tracking-[0.24em] text-sky-600">401 Login Required</p>
+      <h1 class="mt-3 text-4xl font-bold text-slate-900">{{ title }}</h1>
+      <p class="mx-auto mt-4 max-w-xl text-sm leading-7 text-slate-600">
+        {{ 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>