feat: add fallback pages and refine page interactions

src/views/encyclopedia/EncyclopediaView.vue

@@ -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">