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

refactor: extract EncyclopediaProgressCard component and limit map pitch

Browse Source 
- Create EncyclopediaProgressCard with dynamic progress color, reuse in
  encyclopedia and profile pages to unify styling
- Add skyColor and maxPitch to AMap 3D view to reduce empty tile area
  when tilting
- Extend AMap type declarations for skyColor, maxPitch, getPitch, getRotation
This commit is contained in:
Mplan
2026-05-24 17:43:25 +08:00
parent 1e0da1fe36
commit 2a9f8d6a9c
5 changed files with 93 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/profile/ProfileView.vue
+13 -27
View File
@@ -1,7 +1,8 @@
<script setup lang="ts">
import { computed, nextTick, ref, watch } from 'vue'
import { RouterLink, useRoute } from 'vue-router'
import { NAlert, NButton, NCard, NDropdown, NEmpty, NIcon, NProgress, NSkeleton, NTag, useMessage } from 'naive-ui'
import { NAlert, NButton, NCard, NDropdown, NEmpty, NIcon, NSkeleton, NTag, useMessage } from 'naive-ui'
import EncyclopediaProgressCard from '@/components/cloud/EncyclopediaProgressCard.vue'
import { Settings } from '@vicons/tabler'
import CloudEditModal, { type CloudEditFormValue } from '@/components/cloud/CloudEditModal.vue'
import ImageDetailModal from '@/components/cloud/ImageDetailModal.vue'
@@ -536,33 +537,18 @@ watch(selectedUploadDate, async newValue => {
</div>
</div>
<NCard class="border border-white/80 bg-white/85 shadow-sm backdrop-blur" :bordered="false">
<template v-if="isOwnProfile">
<p class="text-sm text-slate-500">图鉴进度</p>
<div class="mt-3 flex items-end justify-between gap-4">
<div>
<p class="text-3xl font-bold text-slate-900">{{ encyclopediaStore.unlockProgress }}</p>
<p class="mt-2 text-sm text-slate-500">已解锁 {{ encyclopediaStore.unlockedCount }} 种基础云型</p>
</div>
<div class="border border-slate-900 bg-slate-900 px-4 py-3 text-xl font-semibold text-white">
{{ encyclopediaStore.unlockPercent }}%
</div>
</div>
<NProgress
class="mt-5"
type="line"
:show-indicator="false"
:percentage="encyclopediaStore.unlockPercent"
color="{stops:['#0ea5e9','#f59e0b']}"
:height="12"
/>
</template>
<EncyclopediaProgressCard
v-if="isOwnProfile"
:unlocked-count="encyclopediaStore.unlockedCount"
:total-count="encyclopediaStore.cloudTypes.length || 10"
:percent="encyclopediaStore.unlockPercent"
:is-logged-in="true"
/>
<template v-else>
<p class="text-sm text-slate-500">公开贡献</p>
<p class="mt-3 text-3xl font-bold text-slate-900">{{ approvedShots }}</p>
<p class="mt-2 text-sm text-slate-500">当前公开可见的云图数量</p>
</template>
<NCard v-else class="border border-white/80 bg-white/85 shadow-sm backdrop-blur" :bordered="false">
<p class="text-sm text-slate-500">公开贡献</p>
<p class="mt-3 text-3xl font-bold text-slate-900">{{ approvedShots }}</p>
<p class="mt-2 text-sm text-slate-500">当前公开可见的云图数量</p>
</NCard>
</div>
</div>