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

feat: add cloud encyclopedia system

Browse Source
This commit is contained in:
Mplan
2026-05-21 17:15:52 +08:00
parent 2b7f393d7c
commit 76eb4dcfe1
6 changed files with 943 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/encyclopedia/CloudTypeView.vue
+249 -3
View File
@@ -1,9 +1,255 @@
<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import { RouterLink, useRoute } from 'vue-router'
import { supabase } from '@/lib/supabase'
import { useAuthStore } from '@/stores/auth'
import { useEncyclopediaStore } from '@/stores/encyclopedia'
import type { CloudType } from '@/types/database'
interface CloudGalleryItem {
id: string
image_url: string
thumbnail_url: string | null
location_name: string | null
description: string | null
captured_at: string | null
created_at: string
profiles: {
username: string
} | null
}
const route = useRoute()
const authStore = useAuthStore()
const encyclopediaStore = useEncyclopediaStore()
const loading = ref(true)
const loadError = ref('')
const gallery = ref<CloudGalleryItem[]>([])
const publicCount = ref(0)
const rarityMeta = {
common: { label: '常见', chip: 'bg-sky-100 text-sky-700 border-sky-200', glow: 'from-sky-100 via-white to-cyan-50' },
uncommon: { label: '少见', chip: 'bg-amber-100 text-amber-700 border-amber-200', glow: 'from-amber-100 via-white to-orange-50' },
rare: { label: '罕见', chip: 'bg-rose-100 text-rose-700 border-rose-200', glow: 'from-rose-100 via-white to-orange-50' },
} satisfies Record<CloudType['rarity'], { label: string; chip: string; glow: string }>
const cloudTypeId = computed(() => Number(route.params.id))
const cloudType = computed(() => encyclopediaStore.cloudTypes.find(item => item.id === cloudTypeId.value) ?? null)
const collectionEntry = computed(() => {
if (!authStore.isLoggedIn || !cloudType.value) return null
return encyclopediaStore.getCollectionEntry(cloudType.value.id)
})
const isUnlocked = computed(() => !!collectionEntry.value)
const heroImage = computed(() => collectionEntry.value?.firstCloud?.image_url || gallery.value[0]?.image_url || null)
function formatDate(iso: string | null) {
if (!iso) return '未知时间'
return new Date(iso).toLocaleDateString('zh-CN', {
year: 'numeric',
month: 'long',
day: 'numeric',
})
}
function formatGalleryTime(item: CloudGalleryItem) {
return formatDate(item.captured_at || item.created_at)
}
async function loadGallery(typeId: number) {
const galleryQuery = supabase
.from('clouds')
.select('id,image_url,thumbnail_url,location_name,description,captured_at,created_at,profiles(username)')
.eq('cloud_type_id', typeId)
.eq('status', 'approved')
.eq('is_hidden', false)
.order('captured_at', { ascending: false, nullsFirst: false })
.order('created_at', { ascending: false })
.limit(24)
const countQuery = supabase
.from('clouds')
.select('*', { head: true, count: 'exact' })
.eq('cloud_type_id', typeId)
.eq('status', 'approved')
.eq('is_hidden', false)
const [{ data: galleryData, error: galleryError }, { count, error: countError }] = await Promise.all([
galleryQuery,
countQuery,
])
if (galleryError) throw galleryError
if (countError) throw countError
gallery.value = ((galleryData || []) as Array<Record<string, unknown>>).map(row => {
const profiles = Array.isArray(row.profiles) ? row.profiles : []
const profile = profiles[0] as Record<string, unknown> | undefined
return {
id: row.id as string,
image_url: row.image_url as string,
thumbnail_url: (row.thumbnail_url as string | null) ?? null,
location_name: (row.location_name as string | null) ?? null,
description: (row.description as string | null) ?? null,
captured_at: (row.captured_at as string | null) ?? null,
created_at: row.created_at as string,
profiles: profile ? { username: profile.username as string } : null,
} satisfies CloudGalleryItem
})
publicCount.value = count || 0
}
async function loadPage() {
if (!Number.isFinite(cloudTypeId.value) || cloudTypeId.value <= 0) {
loadError.value = '云型不存在'
loading.value = false
return
}
loading.value = true
loadError.value = ''
try {
await encyclopediaStore.fetchCloudTypes()
await encyclopediaStore.fetchMyCollection()
if (!cloudType.value) {
loadError.value = '云型不存在'
gallery.value = []
publicCount.value = 0
return
}
await loadGallery(cloudType.value.id)
} catch (error) {
loadError.value = error instanceof Error ? error.message : '详情加载失败'
} finally {
loading.value = false
}
}
onMounted(loadPage)
watch(() => route.params.id, loadPage)
</script>
<template>
<div class="max-w-3xl mx-auto px-4 py-12">
<h1 class="text-3xl font-bold text-gray-900 mb-4">云型详情</h1>
<p class="text-gray-500">详情页开发中...</p>
<div class="max-w-6xl mx-auto px-4 py-8">
<div class="mb-6">
<RouterLink to="/encyclopedia" class="text-sm font-medium text-sky-700 hover:text-sky-800">
← 返回图鉴总览
</RouterLink>
</div>
<div v-if="loading" class="space-y-6">
<div class="h-80 animate-pulse rounded-[32px] bg-slate-200"></div>
<div class="grid gap-4 lg:grid-cols-3">
<div v-for="n in 3" :key="n" class="h-28 animate-pulse rounded-3xl bg-slate-200"></div>
</div>
</div>
<div v-else-if="loadError" class="rounded-[28px] border border-red-200 bg-red-50 p-6 text-red-700">
{{ loadError }}
</div>
<template v-else-if="cloudType">
<section class="overflow-hidden rounded-[32px] border border-slate-200 bg-white shadow-sm">
<div class="grid lg:grid-cols-[1.15fr_0.85fr]">
<div class="relative min-h-[360px] overflow-hidden">
<img
v-if="heroImage"
:src="heroImage"
:alt="cloudType.name"
class="absolute inset-0 h-full w-full object-cover"
/>
<div
v-else
class="absolute inset-0 bg-gradient-to-br"
:class="rarityMeta[cloudType.rarity].glow"
></div>
<div class="absolute inset-0 bg-gradient-to-t from-slate-950/78 via-slate-950/18 to-transparent"></div>
<div class="absolute bottom-8 left-8 right-8 text-white">
<span class="inline-flex rounded-full border px-3 py-1 text-xs font-medium backdrop-blur" :class="rarityMeta[cloudType.rarity].chip">
{{ rarityMeta[cloudType.rarity].label }}
</span>
<h1 class="mt-4 text-4xl font-bold">{{ cloudType.name }}</h1>
<p class="mt-2 text-lg text-white/82">{{ cloudType.name_en }}</p>
</div>
</div>
<div class="flex flex-col justify-between bg-slate-50 p-8">
<div>
<p class="text-sm font-medium uppercase tracking-[0.22em] text-slate-500">Meteorology Note</p>
<p class="mt-5 text-base leading-8 text-slate-700">
{{ cloudType.description || '这类云的图像、形成条件和观测要点会随着图鉴完善逐步补充。' }}
</p>
</div>
<div class="mt-8 rounded-[28px] border border-slate-200 bg-white p-5">
<p class="text-sm text-slate-500">你的收集状态</p>
<template v-if="isUnlocked && collectionEntry">
<p class="mt-2 text-2xl font-bold text-slate-900">已解锁</p>
<p class="mt-2 text-sm text-slate-600">首次解锁于 {{ formatDate(collectionEntry.unlocked_at) }}</p>
</template>
<template v-else>
<p class="mt-2 text-2xl font-bold text-slate-900">尚未解锁</p>
<p class="mt-2 text-sm text-slate-600">拍到并上传这种云朵后，这枚徽章就会被点亮。</p>
</template>
</div>
</div>
</div>
</section>
<section class="mt-6 grid gap-4 md:grid-cols-3">
<div class="rounded-[28px] border border-slate-200 bg-white p-5 shadow-sm">
<p class="text-sm text-slate-500">稀有度</p>
<p class="mt-2 text-2xl font-bold text-slate-900">{{ rarityMeta[cloudType.rarity].label }}</p>
</div>
<div class="rounded-[28px] border border-slate-200 bg-white p-5 shadow-sm">
<p class="text-sm text-slate-500">公开云图</p>
<p class="mt-2 text-2xl font-bold text-slate-900">{{ publicCount }}</p>
</div>
<div class="rounded-[28px] border border-slate-200 bg-white p-5 shadow-sm">
<p class="text-sm text-slate-500">首次解锁</p>
<p class="mt-2 text-xl font-bold text-slate-900">
{{ collectionEntry ? formatDate(collectionEntry.unlocked_at) : '等待记录' }}
</p>
</div>
</section>
<section class="mt-8">
<div class="mb-4 flex items-end justify-between gap-4">
<div>
<h2 class="text-2xl font-bold text-slate-900">该类型云图画廊</h2>
<p class="mt-1 text-sm text-slate-500">来自社区公开可见的已通过云图。</p>
</div>
</div>
<div v-if="gallery.length" class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
<article
v-for="item in gallery"
:key="item.id"
class="overflow-hidden rounded-[28px] border border-slate-200 bg-white shadow-sm"
>
<img :src="item.thumbnail_url || item.image_url" :alt="cloudType.name" class="h-56 w-full object-cover" />
<div class="p-5">
<div class="flex items-center justify-between gap-4">
<p class="text-sm font-medium text-slate-900">{{ item.profiles?.username || '匿名' }}</p>
<p class="text-xs text-slate-400">{{ formatGalleryTime(item) }}</p>
</div>
<p class="mt-2 text-sm text-slate-600">{{ item.location_name || '未填写位置' }}</p>
<p v-if="item.description" class="mt-3 line-clamp-3 text-sm leading-6 text-slate-500">
{{ item.description }}
</p>
</div>
</article>
</div>
<div v-else class="rounded-[28px] border border-dashed border-slate-300 bg-white p-8 text-center">
<p class="text-lg font-semibold text-slate-900">还没有公开作品</p>
<p class="mt-2 text-sm text-slate-500">等第一位观测者上传这类云图后，这里就会展示出来。</p>
</div>
</section>
</template>
</div>
</template>
src/views/encyclopedia/EncyclopediaView.vue
+184 -3
View File
@@ -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>
src/views/upload/UploadView.vue
+108 -7
View File
@@ -2,15 +2,19 @@
import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useCloudsStore } from '@/stores/clouds'
import { useAuthStore } from '@/stores/auth'
import { downloadCloudBadgeCard } from '@/lib/cloudBadges'
import { useUpload } from '@/composables/useUpload'
const router = useRouter()
const authStore = useAuthStore()
const cloudsStore = useCloudsStore()
const { items, uploading, overallProgress, currentItemIndex, totalItems, addFiles, removeItem, clearAll, validateAll, uploadAll } = useUpload()
const activeId = ref<string | null>(null)
const dragOver = ref(false)
const successMsg = ref(false)
const unlockedBadges = ref<Awaited<ReturnType<typeof uploadAll>>['unlockedBadges']>([])
const errorMsg = ref('')
const fileInput = ref<HTMLInputElement | null>(null)
@@ -68,15 +72,45 @@ async function handleSubmit() {
return
}
const ok = await uploadAll()
if (ok) {
const result = await uploadAll()
if (result.ok) {
unlockedBadges.value = result.unlockedBadges
successMsg.value = true
setTimeout(() => router.push('/profile'), 2000)
} else {
errorMsg.value = '上传失败，请稍后重试'
}
}
function resetAfterSuccess() {
successMsg.value = false
unlockedBadges.value = []
errorMsg.value = ''
}
async function saveBadge(badge: NonNullable<typeof unlockedBadges.value[number]>) {
await downloadCloudBadgeCard({
cloudName: badge.cloudName,
cloudNameEn: badge.cloudNameEn,
unlockedAt: badge.unlockedAt,
username: authStore.profile?.username || authStore.user?.email || 'OpenCloud 用户',
rarity: badge.rarity,
})
}
function rarityLabel(rarity: NonNullable<typeof unlockedBadges.value[number]>['rarity']) {
if (rarity === 'common') return '常见'
if (rarity === 'uncommon') return '少见'
return '罕见'
}
function formatUnlockedAt(iso: string) {
return new Date(iso).toLocaleDateString('zh-CN', {
year: 'numeric',
month: 'long',
day: 'numeric',
})
}
function onLatInput(e: Event) {
const val = parseFloat((e.target as HTMLInputElement).value)
if (activeItem.value) {
@@ -133,10 +167,77 @@ onUnmounted(() => { for (const item of items.value) URL.revokeObjectURL(item.pre
<input ref="fileInput" type="file" accept="image/*" multiple class="hidden" @change="handleFileSelect" />
<div v-if="successMsg" class="flex items-center justify-center min-h-[60vh]">
<div class="text-center">
<span class="text-5xl block mb-4">✅</span>
<h2 class="text-2xl font-bold text-gray-900 mb-2">上传成功！</h2>
<p class="text-gray-500">正在跳转到个人主页...</p>
<div class="w-full max-w-5xl">
<div class="text-center">
<span class="text-5xl block mb-4">✅</span>
<h2 class="text-3xl font-bold text-gray-900 mb-2">上传成功</h2>
<p class="text-gray-500">
<template v-if="unlockedBadges.length">
新点亮了 {{ unlockedBadges.length }} 枚图鉴徽章。
</template>
<template v-else>
这批云图已经进入你的收藏记录。
</template>
</p>
</div>
<div v-if="unlockedBadges.length" class="mt-8 grid gap-5 md:grid-cols-2 xl:grid-cols-3">
<article
v-for="badge in unlockedBadges"
:key="badge.cloudTypeId"
class="rounded-[28px] border border-amber-200 bg-[linear-gradient(180deg,#fffbeb_0%,#ffffff_100%)] p-6 shadow-sm"
>
<div class="flex h-16 w-16 items-center justify-center rounded-2xl bg-amber-400 text-3xl text-white shadow-sm">
{{ badge.cloudName.slice(0, 1) }}
</div>
<div class="mt-5">
<div class="flex items-center gap-3">
<h3 class="text-2xl font-bold text-gray-900">{{ badge.cloudName }}</h3>
<span class="rounded-full border border-amber-200 bg-white px-3 py-1 text-xs font-medium text-amber-700">
{{ rarityLabel(badge.rarity) }}
</span>
</div>
<p class="mt-1 text-sm text-gray-500">{{ badge.cloudNameEn }}</p>
<p class="mt-4 text-sm text-gray-600">解锁时间：{{ formatUnlockedAt(badge.unlockedAt) }}</p>
</div>
<div class="mt-6 flex gap-3">
<button
@click="saveBadge(badge)"
class="flex-1 rounded-xl bg-slate-900 px-4 py-2.5 text-sm font-medium text-white hover:bg-slate-800"
>
保存分享卡片
</button>
<button
@click="router.push(`/encyclopedia/${badge.cloudTypeId}`)"
class="flex-1 rounded-xl border border-gray-300 px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50"
>
查看详情
</button>
</div>
</article>
</div>
<div class="mt-8 flex flex-wrap items-center justify-center gap-3">
<button
@click="resetAfterSuccess"
class="rounded-xl border border-gray-300 px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50"
>
继续上传
</button>
<button
@click="router.push('/encyclopedia')"
class="rounded-xl bg-sky-500 px-5 py-2.5 text-sm font-medium text-white hover:bg-sky-600"
>
前往图鉴
</button>
<button
@click="router.push('/profile')"
class="rounded-xl border border-gray-300 px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50"
>
返回个人主页
</button>
</div>
</div>
</div>