feat: add cloud encyclopedia system

src/views/encyclopedia/EncyclopediaView.vue

@@ -1,9 +1,190 @@
 <script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+import { useEncyclopediaStore } from '@/stores/encyclopedia'
+import type { CloudType } from '@/types/database'
+
+const router = useRouter()
+const authStore = useAuthStore()
+const encyclopediaStore = useEncyclopediaStore()
+
+const lockHint = ref('')
+let lockHintTimer: number | null = null
+
+const rarityMeta = {
+  common: { label: '常见', chip: 'bg-sky-100 text-sky-700 border-sky-200', glow: 'from-sky-100 to-white' },
+  uncommon: { label: '少见', chip: 'bg-amber-100 text-amber-700 border-amber-200', glow: 'from-amber-100 to-white' },
+  rare: { label: '罕见', chip: 'bg-rose-100 text-rose-700 border-rose-200', glow: 'from-rose-100 to-white' },
+} satisfies Record<CloudType['rarity'], { label: string; chip: string; glow: string }>
+
+const totalTypes = computed(() => encyclopediaStore.cloudTypes.length || 10)
+const unlockedCount = computed(() => (authStore.isLoggedIn ? encyclopediaStore.unlockedCount : 0))
+const progressText = computed(() => `${unlockedCount.value}/${totalTypes.value}`)
+
+function isUnlocked(cloudTypeId: number) {
+  return authStore.isLoggedIn && encyclopediaStore.isUnlocked(cloudTypeId)
+}
+
+function getCollectionEntry(cloudTypeId: number) {
+  if (!authStore.isLoggedIn) return null
+  return encyclopediaStore.getCollectionEntry(cloudTypeId)
+}
+
+function formatUnlockedAt(iso: string) {
+  return new Date(iso).toLocaleDateString('zh-CN', {
+    month: 'numeric',
+    day: 'numeric',
+  })
+}
+
+function showLockHint(name: string) {
+  lockHint.value = `拍到 ${name} 后，这枚徽章就会亮起来。`
+  if (lockHintTimer) window.clearTimeout(lockHintTimer)
+  lockHintTimer = window.setTimeout(() => {
+    lockHint.value = ''
+    lockHintTimer = null
+  }, 2200)
+}
+
+function openCard(cloudType: CloudType) {
+  if (isUnlocked(cloudType.id)) {
+    router.push(`/encyclopedia/${cloudType.id}`)
+    return
+  }
+  showLockHint(cloudType.name)
+}
+
+onMounted(async () => {
+  await encyclopediaStore.fetchCloudTypes()
+  await encyclopediaStore.fetchMyCollection()
+})
 </script>
 
 <template>
-  <div class="max-w-5xl mx-auto px-4 py-12">
-    <h1 class="text-3xl font-bold text-gray-900 mb-8">☁️ 云朵图鉴</h1>
-    <p class="text-gray-500">图鉴功能开发中...</p>
+  <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>
+            <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>
+            <p class="mt-4 max-w-2xl text-slate-600 leading-7">
+              收集 10 种基础云属。每拍到一种新的云型，图鉴里就会点亮一枚徽章，并记录你第一次遇见它的时间。
+            </p>
+          </div>
+
+          <div class="rounded-[28px] border border-white/80 bg-white/80 p-6 shadow-sm backdrop-blur">
+            <div class="flex items-center justify-between">
+              <div>
+                <p class="text-sm text-slate-500">当前进度</p>
+                <p class="mt-1 text-3xl font-bold text-slate-900">{{ progressText }}</p>
+              </div>
+              <div class="flex h-16 w-16 items-center justify-center rounded-full bg-slate-900 text-xl font-semibold text-white">
+                {{ authStore.isLoggedIn ? encyclopediaStore.unlockPercent : 0 }}%
+              </div>
+            </div>
+
+            <div class="mt-5 h-3 overflow-hidden rounded-full bg-slate-200">
+              <div
+                class="h-full rounded-full bg-[linear-gradient(90deg,#0ea5e9_0%,#f59e0b_100%)] transition-all duration-500"
+                :style="{ width: `${authStore.isLoggedIn ? encyclopediaStore.unlockPercent : 0}%` }"
+              ></div>
+            </div>
+
+            <p class="mt-4 text-sm text-slate-500">
+              <template v-if="authStore.isLoggedIn">
+                已解锁 {{ unlockedCount }} 枚徽章，还差 {{ Math.max(totalTypes - unlockedCount, 0) }} 枚。
+              </template>
+              <template v-else>
+                登录后可同步你的个人图鉴进度。
+              </template>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="max-w-6xl mx-auto px-4 py-8">
+      <div v-if="encyclopediaStore.collectionError && authStore.isLoggedIn" class="mb-6 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-700">
+        图鉴收藏数据暂时不可用：{{ encyclopediaStore.collectionError }}
+      </div>
+
+      <div v-if="encyclopediaStore.loadingCloudTypes" class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
+        <div v-for="n in 6" :key="n" class="h-72 animate-pulse rounded-[28px] bg-slate-200"></div>
+      </div>
+
+      <div v-else class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
+        <button
+          v-for="cloudType in encyclopediaStore.cloudTypes"
+          :key="cloudType.id"
+          type="button"
+          @click="openCard(cloudType)"
+          class="group overflow-hidden rounded-[28px] border bg-white text-left shadow-sm transition-all hover:-translate-y-1 hover:shadow-lg"
+          :class="isUnlocked(cloudType.id) ? 'border-amber-300 shadow-amber-100/60' : 'border-slate-200 hover:border-slate-300'"
+        >
+          <div
+            class="relative h-44 overflow-hidden border-b"
+            :class="isUnlocked(cloudType.id) ? 'border-white/40' : 'border-slate-200'"
+          >
+            <img
+              v-if="getCollectionEntry(cloudType.id)?.firstCloud?.image_url"
+              :src="getCollectionEntry(cloudType.id)?.firstCloud?.image_url || ''"
+              :alt="cloudType.name"
+              class="h-full w-full object-cover transition duration-500 group-hover:scale-105"
+              :class="isUnlocked(cloudType.id) ? '' : 'grayscale'"
+            />
+            <div
+              v-else
+              class="flex h-full w-full items-center justify-center bg-gradient-to-br"
+              :class="isUnlocked(cloudType.id) ? rarityMeta[cloudType.rarity].glow : 'from-slate-300 to-slate-100'"
+            >
+              <span class="text-6xl font-bold text-slate-800/85">{{ cloudType.name.slice(0, 1) }}</span>
+            </div>
+
+            <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="rounded-full border border-white/45 bg-white/15 px-4 py-2 text-sm font-medium text-white">🔒 尚未解锁</div>
+            </div>
+
+            <div class="absolute left-4 top-4">
+              <span class="inline-flex rounded-full border px-3 py-1 text-xs font-medium" :class="rarityMeta[cloudType.rarity].chip">
+                {{ rarityMeta[cloudType.rarity].label }}
+              </span>
+            </div>
+
+            <div class="absolute bottom-4 left-4 right-4 text-white">
+              <p class="text-xl font-semibold">{{ cloudType.name }}</p>
+              <p class="mt-1 text-sm text-white/80">{{ cloudType.name_en }}</p>
+            </div>
+          </div>
+
+          <div class="p-5">
+            <p class="line-clamp-2 min-h-[3.25rem] text-sm leading-6 text-slate-600">
+              {{ cloudType.description || '云层特征和识别要点会显示在这里。' }}
+            </p>
+
+            <div class="mt-5 flex items-center justify-between text-sm">
+              <template v-if="isUnlocked(cloudType.id) && getCollectionEntry(cloudType.id)">
+                <span class="font-medium text-amber-700">已收录</span>
+                <span class="text-slate-500">首次记录于 {{ formatUnlockedAt(getCollectionEntry(cloudType.id)!.unlocked_at) }}</span>
+              </template>
+              <template v-else>
+                <span class="font-medium text-slate-700">等待发现</span>
+                <span class="text-slate-400">拍到后点亮</span>
+              </template>
+            </div>
+          </div>
+        </button>
+      </div>
+    </div>
+
+    <div
+      v-if="lockHint"
+      class="fixed bottom-6 left-1/2 z-50 -translate-x-1/2 rounded-full bg-slate-900 px-4 py-2 text-sm text-white shadow-lg"
+    >
+      {{ lockHint }}
+    </div>
   </div>
 </template>