- {{ displayUsername.slice(0, 1).toUpperCase() }}
+
![]()
+
{{ displayUsername.slice(0, 1).toUpperCase() }}
@{{ displayUsername }}
diff --git a/src/lib/api.ts b/src/lib/api.ts
index ebf0999..bf567b1 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -139,7 +139,7 @@ export function toAuthUser(profile: BackendUserProfile): AuthUser {
id: profile.id,
email: profile.email,
username: profile.name,
- avatar_id: profile.avatar_id,
+ image: profile.image,
role: profile.role,
is_disabled: profile.is_disabled,
cloud_count: profile.cloud_count,
diff --git a/src/stores/auth.ts b/src/stores/auth.ts
index 44d8476..52422cc 100644
--- a/src/stores/auth.ts
+++ b/src/stores/auth.ts
@@ -20,7 +20,7 @@ export const useAuthStore = defineStore('auth', () => {
profile.value = {
id: normalized.id,
username: normalized.username,
- avatar_id: normalized.avatar_id,
+ image: normalized.image,
role: normalized.role,
is_disabled: normalized.is_disabled,
created_at: normalized.created_at,
@@ -127,6 +127,7 @@ export const useAuthStore = defineStore('auth', () => {
resetPassword,
logout,
updateUsername,
+ refreshProfile: fetchMe,
updatePassword,
initialize,
}
diff --git a/src/stores/likes.ts b/src/stores/likes.ts
new file mode 100644
index 0000000..68bb63b
--- /dev/null
+++ b/src/stores/likes.ts
@@ -0,0 +1,105 @@
+import { ref, watch } from 'vue'
+import { defineStore } from 'pinia'
+import { apiRequest } from '@/lib/api'
+import { useAuthStore } from '@/stores/auth'
+import type { ActionResponse, BackendCloudInfo } from '@/types/api'
+
+const PAGE_SIZE = 100
+
+export const useLikesStore = defineStore('likes', () => {
+ const authStore = useAuthStore()
+ const likedIds = ref
>(new Set())
+ const counts = ref>({})
+ const pendingIds = ref>(new Set())
+ const loadedForUser = ref(null)
+ let loadPromise: Promise | null = null
+ let loadingForUser: string | null = null
+
+ watch(() => authStore.user?.id, () => {
+ likedIds.value = new Set()
+ counts.value = {}
+ pendingIds.value = new Set()
+ loadedForUser.value = null
+ loadPromise = null
+ loadingForUser = null
+ })
+
+ function isLiked(cloudId: string) {
+ return likedIds.value.has(cloudId)
+ }
+
+ function countFor(cloudId: string, initialCount: number) {
+ return counts.value[cloudId] ?? initialCount
+ }
+
+ function isPending(cloudId: string) {
+ return pendingIds.value.has(cloudId)
+ }
+
+ async function ensureLoaded() {
+ const userId = authStore.user?.id
+ if (!userId || loadedForUser.value === userId) return
+ if (loadPromise && loadingForUser === userId) return loadPromise
+
+ loadingForUser = userId
+ const request = (async () => {
+ const nextIds = new Set()
+ for (let page = 1; ; page++) {
+ const params = new URLSearchParams({ page: String(page), page_size: String(PAGE_SIZE) })
+ const rows = await apiRequest(`/profile/me/likes?${params}`)
+ rows.forEach(row => nextIds.add(row.id))
+ if (rows.length < PAGE_SIZE) break
+ }
+ if (authStore.user?.id === userId) {
+ likedIds.value = nextIds
+ loadedForUser.value = userId
+ }
+ })()
+ loadPromise = request
+ try {
+ await request
+ } finally {
+ if (loadPromise === request) {
+ loadPromise = null
+ loadingForUser = null
+ }
+ }
+ }
+
+ async function toggle(cloudId: string, initialCount: number) {
+ const userId = authStore.user?.id
+ if (!userId) throw new Error('请先登录后点赞。')
+ await ensureLoaded()
+ if (authStore.user?.id !== userId) throw new Error('登录状态已改变，请重试。')
+ if (isPending(cloudId)) return
+
+ const wasLiked = isLiked(cloudId)
+ pendingIds.value = new Set(pendingIds.value).add(cloudId)
+ try {
+ await apiRequest(`/cloud/${cloudId}/like`, {
+ method: wasLiked ? 'DELETE' : 'PUT',
+ })
+ if (authStore.user?.id !== userId) return
+
+ const nextIds = new Set(likedIds.value)
+ if (wasLiked) nextIds.delete(cloudId)
+ else nextIds.add(cloudId)
+ likedIds.value = nextIds
+ counts.value[cloudId] = Math.max(0, countFor(cloudId, initialCount) + (wasLiked ? -1 : 1))
+
+ try {
+ const cloud = await apiRequest(`/cloud/${cloudId}`, { auth: false })
+ counts.value[cloudId] = cloud.received_like_count
+ if (cloud.owner.id === authStore.user?.id) await authStore.refreshProfile()
+ } catch {
+ // The mutation succeeded; keep the local count if a refresh fails.
+ }
+ } finally {
+ const nextPending = new Set(pendingIds.value)
+ nextPending.delete(cloudId)
+ pendingIds.value = nextPending
+ }
+ }
+
+ return { isLiked, countFor, isPending, ensureLoaded, toggle }
+})
diff --git a/src/stores/profile.ts b/src/stores/profile.ts
index c3822e2..fed9ae3 100644
--- a/src/stores/profile.ts
+++ b/src/stores/profile.ts
@@ -2,7 +2,7 @@ import { ref } from 'vue'
import { defineStore } from 'pinia'
import { ApiError, apiRequest, toApiCloud } from '@/lib/api'
import { useAuthStore } from '@/stores/auth'
-import type { ActionResponse, ApiCloud, BackendCloudInfo } from '@/types/api'
+import type { ActionResponse, ApiCloud, BackendCloudInfo, BackendUserProfile } from '@/types/api'
import type { Profile } from '@/types/database'
export interface ProfileCloudItem {
@@ -101,12 +101,22 @@ export const useProfileStore = defineStore('profile-page', () => {
if (isOwnProfile && authStore.profile) {
profilesByKey.value[identifier] = authStore.profile
+ } else if (identifier === authStore.profile?.username && authStore.profile) {
+ profilesByKey.value[identifier] = authStore.profile
} else {
const owner = backendRows[0]?.owner
+ let publicProfile: BackendUserProfile | null = null
+ if (owner?.id && authStore.isLoggedIn) {
+ try {
+ publicProfile = await apiRequest(`/profile/${owner.id}`)
+ } catch {
+ // Public clouds can still be displayed if the profile lookup fails.
+ }
+ }
profilesByKey.value[identifier] = {
id: owner?.id || identifier,
username: owner?.name || identifier,
- avatar_id: null,
+ image: publicProfile?.image ?? null,
role: 'user',
is_disabled: false,
created_at: '',
diff --git a/src/types/api.ts b/src/types/api.ts
index 5015fda..fa14979 100644
--- a/src/types/api.ts
+++ b/src/types/api.ts
@@ -4,7 +4,7 @@ export interface BackendUserProfile {
id: string
name: string
email: string
- avatar_id: string | null
+ image: string | null
cloud_count: number
received_like_count: number
last_online: string | null
@@ -62,7 +62,7 @@ export interface AuthUser {
id: string
email: string
username: string
- avatar_id: string | null
+ image: string | null
role: Profile['role']
is_disabled: boolean
cloud_count: number
diff --git a/src/types/database.ts b/src/types/database.ts
index 012df05..6487840 100644
--- a/src/types/database.ts
+++ b/src/types/database.ts
@@ -27,7 +27,7 @@ export interface Cloud {
export interface Profile {
id: string
username: string
- avatar_id: string | null
+ image: string | null
role: 'user' | 'admin'
is_disabled: boolean
created_at: string
diff --git a/src/views/encyclopedia/CloudTypeView.vue b/src/views/encyclopedia/CloudTypeView.vue
index 907f76f..0ddf83f 100644
--- a/src/views/encyclopedia/CloudTypeView.vue
+++ b/src/views/encyclopedia/CloudTypeView.vue
@@ -3,6 +3,7 @@ import { computed, onMounted, ref, watch } from 'vue'
import { NAlert, NButton, NEmpty, NSkeleton } from 'naive-ui'
import { RouterLink, useRoute } from 'vue-router'
import ImageDetailModal from '@/components/cloud/ImageDetailModal.vue'
+import CloudLikeButton from '@/components/cloud/CloudLikeButton.vue'
import MiniLocationMap from '@/components/cloud/MiniLocationMap.vue'
import { apiRequest, imageUrl, toApiCloud } from '@/lib/api'
import { useEncyclopediaStore } from '@/stores/encyclopedia'
@@ -137,6 +138,7 @@ watch(() => route.params.id, () => loadPage())
>
{{ selectedItem.description || '上传者没有留下额外说明。' }}
+
diff --git a/src/views/gallery/GalleryView.vue b/src/views/gallery/GalleryView.vue
index 2a7023e..1772d2a 100644
--- a/src/views/gallery/GalleryView.vue
+++ b/src/views/gallery/GalleryView.vue
@@ -4,6 +4,7 @@ import { RouterLink } from 'vue-router'
import { NAlert, NButton, NDropdown, NEmpty, NIcon, NSkeleton, NTag, useMessage } from 'naive-ui'
import { Clock, Location, Search, Settings, User, X } from '@vicons/tabler'
import CloudEditModal, { type CloudEditFormValue } from '@/components/cloud/CloudEditModal.vue'
+import CloudLikeButton from '@/components/cloud/CloudLikeButton.vue'
import ImageDetailModal from '@/components/cloud/ImageDetailModal.vue'
import MiniLocationMap from '@/components/cloud/MiniLocationMap.vue'
import { ApiError, apiRequest, toApiCloud } from '@/lib/api'
@@ -29,6 +30,7 @@ interface GalleryCloud {
cloudTypeName: string
cloudTypeRarity: number
username: string
+ receivedLikeCount: number
}
const PAGE_SIZE = 50
@@ -98,6 +100,7 @@ function toGalleryCloud(row: ApiCloud) {
cloudTypeName: row.cloud_type_name || '未知',
cloudTypeRarity: row.cloud_type_rarity_value ?? 0,
username: row.username || '匿名',
+ receivedLikeCount: row.received_like_count,
} satisfies GalleryCloud
}
@@ -551,6 +554,7 @@ onUnmounted(() => {
:latitude="selectedCloud.latitude"
:longitude="selectedCloud.longitude"
/>
+
diff --git a/src/views/map/MapView.vue b/src/views/map/MapView.vue
index cb3bf52..be12983 100644
--- a/src/views/map/MapView.vue
+++ b/src/views/map/MapView.vue
@@ -1,6 +1,7 @@