jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-02-24 15:10:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add paginated tag loading

Browse Source
This commit is contained in:
Tim
2025-09-12 17:54:28 +08:00
parent c3758cafe8
commit 5e6c8a5e87
7 changed files with 125 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
frontend_nuxt/components/MenuComponent.vue
View File

@@ -115,22 +115,30 @@
<div v-if="isLoadingTag" class="menu-loading-container">
<l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
</div>
<div v-else v-for="t in tagData" :key="t.id" class="section-item" @click="gotoTag(t)">
<BaseImage
v-if="isImageIcon(t.smallIcon || t.icon)"
:src="t.smallIcon || t.icon"
class="section-item-icon"
:alt="t.name"
<div v-else>
<div v-for="t in tagData" :key="t.id" class="section-item" @click="gotoTag(t)">
<BaseImage
v-if="isImageIcon(t.smallIcon || t.icon)"
:src="t.smallIcon || t.icon"
class="section-item-icon"
:alt="t.name"
/>
<component
v-else-if="t.smallIcon || t.icon"
:is="t.smallIcon || t.icon"
class="section-item-icon"
/>
<tag-one v-else class="section-item-icon" />
<span class="section-item-text">
{{ t.name }} <span class="section-item-text-count">x {{ t.count }}</span>
</span>
</div>
<InfiniteLoadMore
v-if="tagData.length"
:on-load="loadMoreTags"
:pause="isLoadingTag"
root-margin="0px"
/>
<component
v-else-if="t.smallIcon || t.icon"
:is="t.smallIcon || t.icon"
class="section-item-icon"
/>
<tag-one v-else class="section-item-icon" />
<span class="section-item-text"
>{{ t.name }} <span class="section-item-text-count">x {{ t.count }}</span></span
>
</div>
</div>
</div>
@@ -154,6 +162,7 @@ import { authState, fetchCurrentUser } from '~/utils/auth'
import { fetchUnreadCount, notificationState } from '~/utils/notification'
import { useIsMobile } from '~/utils/screen'
import { cycleTheme, ThemeMode, themeState } from '~/utils/theme'
import InfiniteLoadMore from '~/components/InfiniteLoadMore.vue'
const isMobile = useIsMobile()
@@ -168,6 +177,7 @@ const emit = defineEmits(['item-click'])
const categoryOpen = ref(true)
const tagOpen = ref(true)
const myPoint = ref(null)
const tagPage = ref(0)
/** ✅ 用 useAsyncData 替换原生 fetch，避免 SSR+CSR 二次请求 */
const {
@@ -190,12 +200,23 @@ const {
data: tagData,
pending: isLoadingTag,
error: tagError,
} = await useAsyncData('menu:tags', () => $fetch(`${API_BASE_URL}/api/tags?limit=10`), {
} = await useAsyncData('menu:tags', () => $fetch(`${API_BASE_URL}/api/tags?page=0&pageSize=20`), {
server: true,
default: () => [],
staleTime: 5 * 60 * 1000,
})
const loadMoreTags = async () => {
const next = tagPage.value + 1
const res = await $fetch(`${API_BASE_URL}/api/tags?page=${next}&pageSize=20`)
if (Array.isArray(res) && res.length > 0) {
tagData.value.push(...res)
tagPage.value = next
return false
}
return true
}
/** 其余逻辑保持不变 */
const iconClass = computed(() => {
switch (themeState.mode) {