Mplan/opencloud
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add fallback pages and refine page interactions

Browse Source
This commit is contained in:
Mplan
2026-05-22 00:09:00 +08:00
parent 78b1c952e7
commit f35baf4a67
9 changed files with 175 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/router/index.ts
+11 -1
View File
@@ -62,6 +62,16 @@ const router = createRouter({
component: () => import('@/views/admin/AdminView.vue'),
meta: { requiresAuth: true, requiresAdmin: true },
},
{
path: '/403',
name: 'forbidden',
component: () => import('@/views/system/ForbiddenView.vue'),
},
{
path: '/:pathMatch(.*)*',
name: 'not-found',
component: () => import('@/views/system/NotFoundView.vue'),
},
],
scrollBehavior() {
return { top: 0 }
@@ -74,7 +84,7 @@ router.beforeEach((to, _from, next) => {
if (to.meta.requiresAuth && !authStore.isLoggedIn) {
next({ name: 'login', query: { redirect: to.fullPath } })
} else if (to.meta.requiresAdmin && !authStore.isAdmin) {
next({ name: 'map' })
next({ name: 'forbidden' })
} else if ((to.name === 'login' || to.name === 'register') && authStore.isLoggedIn) {
next({ name: 'map' })
} else {
src/views/encyclopedia/EncyclopediaView.vue
+12 -5
View File
@@ -1,9 +1,10 @@
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { NAlert, NCard, NEmpty, NProgress, NSkeleton } from 'naive-ui'
import { NAlert, NCard, NEmpty, NIcon, NProgress, NSkeleton } from 'naive-ui'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { useEncyclopediaStore } from '@/stores/encyclopedia'
import { Lock } from '@vicons/tabler'
import type { CloudType } from '@/types/database'
const router = useRouter()
@@ -66,7 +67,7 @@ onMounted(async () => {
<div class="relative">
<div class="bg-[linear-gradient(180deg,#e0f2fe_0%,#f8fafc_100%)] border-b border-sky-100">
<div class="max-w-6xl mx-auto px-4 py-10">
<div class="grid gap-6 lg:grid-cols-[1.4fr_0.9fr] lg:items-end">
<div class="grid gap-6 lg:grid-cols-[1.4fr_0.9fr] lg:items-start">
<div>
<p class="text-sm font-medium tracking-[0.24em] text-sky-700 uppercase">Cloud Encyclopedia</p>
<h1 class="mt-3 text-4xl font-bold text-slate-900">云朵图鉴</h1>
@@ -91,8 +92,7 @@ onMounted(async () => {
type="line"
:show-indicator="false"
:percentage="authStore.isLoggedIn ? encyclopediaStore.unlockPercent : 0"
color="linear-gradient(90deg,#0ea5e9 0%,#f59e0b 100%)"
rail-color="#dbe4ee"
color="{stops:['#0ea5e9','#f59e0b']}"
:height="12"
/>
@@ -161,7 +161,14 @@ onMounted(async () => {
<div class="absolute inset-0 bg-gradient-to-t from-slate-950/70 via-slate-950/10 to-transparent"></div>
<div v-if="!isUnlocked(cloudType.id)" class="absolute inset-0 flex items-center justify-center bg-slate-950/22 backdrop-blur-[2px]">
<div class="border border-white/45 bg-white/15 px-4 py-2 text-sm font-medium text-white">🔒 尚未解锁</div>
<div class="border border-white/45 bg-white/15 px-4 py-2 text-sm font-medium text-white">
<span style="display: inline-flex; align-items: center; gap: 4px;">
<NIcon size="16" style="display: inline-flex;">
<Lock />
</NIcon>
<span>尚未解锁</span>
</span>
</div>
</div>
<div class="absolute left-4 top-4">
src/views/gallery/GalleryView.vue
+21 -4
View File
@@ -1,9 +1,11 @@
<script setup lang="ts">
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
import { NAlert, NButton, NEmpty, NSkeleton, NTag } from 'naive-ui'
import { NAlert, NButton, NEmpty, NIcon, NSkeleton, NTag } from 'naive-ui'
import ImageDetailModal from '@/components/cloud/ImageDetailModal.vue'
import { supabase } from '@/lib/supabase'
import { useCloudsStore } from '@/stores/clouds'
import { Clock, User ,Location} from '@vicons/tabler'
import type { CloudType } from '@/types/database'
interface GalleryCloud {
@@ -260,9 +262,24 @@ onUnmounted(() => {
{{ rarityMeta[cloud.cloudTypeRarity].label }}
</NTag>
</div>
<p class="mt-2 truncate text-xs text-white/82">📷 {{ cloud.username }}</p>
<p class="mt-1 truncate text-xs text-white/82">🕐 {{ formatUploadTime(cloud) }}</p>
<p class="mt-1 truncate text-xs text-white/68">{{ cloud.location_name || '未填写位置' }}</p>
<p class="mt-2 flex items-center gap-1.5 truncate text-xs text-white/82">
<NIcon size="14">
<User />
</NIcon>
<span class="truncate">{{ cloud.username }}</span>
</p>
<p class="mt-1 flex items-center gap-1.5 truncate text-xs text-white/82">
<NIcon size="14">
<Clock />
</NIcon>
<span class="truncate">{{ formatUploadTime(cloud) }}</span>
</p>
<p class="mt-1 flex items-center gap-1.5 truncate text-xs text-white/82">
<NIcon size="14">
<Location />
</NIcon>
<span class="truncate">{{ cloud.location_name || '未填写位置' }}</span>
</p>
</div>
</div>
</button>
src/views/map/MapView.vue
+15 -2
View File
@@ -3,6 +3,8 @@ import { ref, onMounted, onUnmounted } from 'vue'
import ImageDetailModal from '@/components/cloud/ImageDetailModal.vue'
import { supabase } from '@/lib/supabase'
import { loadAMap } from '@/lib/amap'
import { NIcon } from 'naive-ui'
import { Refresh,Map,Satellite} from '@vicons/tabler'
interface CloudMarkerData {
id: string
@@ -292,8 +294,19 @@ onUnmounted(() => {
<div ref="mapEl" class="w-full h-full"></div>
<div class="absolute bottom-6 right-4 flex flex-col gap-2 z-10">
<button @click="refresh" class="w-10 h-10 bg-white rounded-lg shadow-md flex items-center justify-center hover:bg-gray-50" title="刷新"><span class="text-lg">🔄</span></button>
<button @click="toggleSat" class="w-10 h-10 bg-white rounded-lg shadow-md flex items-center justify-center hover:bg-gray-50" :title="satelliteOn ? '切换普通视图' : '切换卫星视图'"><span class="text-lg">{{ satelliteOn ? '🗺️' : '🛰️' }}</span></button>
<button @click="refresh" class="w-10 h-10 bg-white rounded-lg shadow-md flex items-center justify-center hover:bg-gray-50" title="刷新">
<span class="text-lg">
<NIcon>
<Refresh/>
</NIcon>
</span>
</button>
<button @click="toggleSat" class="w-10 h-10 bg-white rounded-lg shadow-md flex items-center justify-center hover:bg-gray-50" :title="satelliteOn ? '切换普通视图' : '切换卫星视图'">
<NIcon size="20" style="display: inline-flex; vertical-align: middle;">
<Map v-if="satelliteOn" />
<Satellite v-else />
</NIcon>
</button>
</div>
<ImageDetailModal
src/views/system/ForbiddenView.vue
+26
View File
@@ -0,0 +1,26 @@
<script setup lang="ts">
import { NButton } from 'naive-ui'
import { RouterLink } from 'vue-router'
</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-rose-600">403 Forbidden</p>
<h1 class="mt-3 text-4xl font-bold text-slate-900">这里不让进</h1>
<p class="mx-auto mt-4 max-w-xl text-sm leading-7 text-slate-600">
你当前没有访问这个页面的权限。通常是因为这个区域只对管理员开放。
</p>
<div class="mt-8 flex flex-wrap items-center justify-center gap-3">
<RouterLink to="/">
<NButton type="primary" secondary strong>返回地图</NButton>
</RouterLink>
<RouterLink to="/profile">
<NButton secondary strong>前往个人主页</NButton>
</RouterLink>
</div>
</div>
</div>
</template>
src/views/system/NotFoundView.vue
+26
View File
@@ -0,0 +1,26 @@
<script setup lang="ts">
import { NButton } from 'naive-ui'
import { RouterLink } from 'vue-router'
</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-amber-600">404 Not Found</p>
<h1 class="mt-3 text-4xl font-bold text-slate-900">我也没想明白</h1>
<p class="mx-auto mt-4 max-w-xl text-sm leading-7 text-slate-600">
这个页面不存在，或者它已经被移动到了别的地方。换个入口再试一次。
</p>
<div class="mt-8 flex flex-wrap items-center justify-center gap-3">
<RouterLink to="/">
<NButton type="primary" secondary strong>返回地图</NButton>
</RouterLink>
<RouterLink to="/gallery">
<NButton secondary strong>去画廊看看</NButton>
</RouterLink>
</div>
</div>
</div>
</template>
src/views/upload/UploadView.vue
+4 -4
View File
@@ -447,7 +447,7 @@ onUnmounted(() => {
<input
v-model="activeItem.customCloudType"
type="text"
placeholder="输入云型名称"
placeholder="输入云的类型"
@input="activeItem.errors = {}"
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-transparent transition-colors"
/>
@@ -517,7 +517,7 @@ onUnmounted(() => {
</button>
</div>
</div>
<p class="text-xs text-gray-400 mt-1">选填，可手动输入，或点击右侧小地图图标选点</p>
<p class="text-xs text-gray-400 mt-1">选填，可手动输入，或点击右侧小地图图标选择</p>
</div>
<!-- 位置名称 -->
@@ -545,7 +545,7 @@ onUnmounted(() => {
<!-- 隐身模式 -->
<div class="flex items-center gap-2">
<input v-model="activeItem.isHidden" type="checkbox" :id="'isHidden-' + activeItem.id" class="w-4 h-4 text-sky-500 border-gray-300 rounded focus:ring-sky-500" />
<label :for="'isHidden-' + activeItem.id" class="text-sm text-gray-600">隐身模式（地图不显示位置）</label>
<label :for="'isHidden-' + activeItem.id" class="text-sm text-gray-600">隐身模式（不在地图上显示）</label>
</div>
</div>
</NCard>
@@ -553,7 +553,7 @@ onUnmounted(() => {
</div>
<div class="mt-6 flex items-center justify-between">
<p class="text-sm text-gray-500">共 {{ items.length }} 张图片，类别和拍摄时间为必填项</p>
<p class="text-sm text-gray-500">共 {{ items.length }} 张图片</p>
<div class="flex gap-3">
<NButton secondary strong @click="clearAll()" :disabled="uploading">清空</NButton>
<NButton type="primary" secondary strong @click="handleSubmit" :disabled="uploading">