GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-07-02 04:51:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: implement lazy-loaded tab components with silent background data refresh for settings pages

Browse Source
This commit is contained in:
jxxghp
2026-05-17 14:17:50 +08:00
parent 0e005c3c7e
commit c5e2b1349f
12 changed files with 222 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/pages/setting.vue
View File

@@ -19,6 +19,26 @@ const AccountSettingSearch = defineAsyncComponent(() => import('@/views/setting/
const AccountSettingSubscribe = defineAsyncComponent(() => import('@/views/setting/AccountSettingSubscribe.vue'))
const AccountSettingNotification = defineAsyncComponent(() => import('@/views/setting/AccountSettingNotification.vue'))
const visitedTabs = ref(new Set<string>())
const settingTabComponents = [
{ value: 'system', component: AccountSettingSystem },
{ value: 'directory', component: AccountSettingDirectory },
{ value: 'site', component: AccountSettingSite },
{ value: 'rule', component: AccountSettingRule },
{ value: 'search', component: AccountSettingSearch },
{ value: 'subscribe', component: AccountSettingSubscribe },
{ value: 'notification', component: AccountSettingNotification },
]
function markTabVisited(tab: string) {
if (!tab) return
const nextTabs = new Set(visitedTabs.value)
nextTabs.add(tab)
visitedTabs.value = nextTabs
}
// 使用动态标签页
const { registerHeaderTab } = useDynamicHeaderTab()
@@ -34,71 +54,23 @@ onMounted(() => {
if (!activeTab.value && settingTabs.value.length > 0) {
activeTab.value = settingTabs.value[0].tab
}
markTabVisited(activeTab.value)
})
watch(activeTab, markTabVisited, { immediate: true })
</script>
<template>
<div>
<VWindow v-model="activeTab" class="disable-tab-transition" :touch="false">
<!-- 系统 -->
<VWindowItem value="system">
<VWindowItem v-for="item in settingTabComponents" :key="item.value" :value="item.value">
<transition name="fade-slide" appear>
<div>
<AccountSettingSystem />
</div>
</transition>
</VWindowItem>
<!-- 目录 -->
<VWindowItem value="directory">
<transition name="fade-slide" appear>
<div>
<AccountSettingDirectory />
</div>
</transition>
</VWindowItem>
<!-- 站点 -->
<VWindowItem value="site">
<transition name="fade-slide" appear>
<div>
<AccountSettingSite />
</div>
</transition>
</VWindowItem>
<!-- 规则 -->
<VWindowItem value="rule">
<transition name="fade-slide" appear>
<div>
<AccountSettingRule />
</div>
</transition>
</VWindowItem>
<!-- 搜索 -->
<VWindowItem value="search">
<transition name="fade-slide" appear>
<div>
<AccountSettingSearch />
</div>
</transition>
</VWindowItem>
<!-- 订阅 -->
<VWindowItem value="subscribe">
<transition name="fade-slide" appear>
<div>
<AccountSettingSubscribe />
</div>
</transition>
</VWindowItem>
<!-- 通知 -->
<VWindowItem value="notification">
<transition name="fade-slide" appear>
<div>
<AccountSettingNotification />
<component
:is="item.component"
v-if="visitedTabs.has(item.value)"
:active="activeTab === item.value"
/>
</div>
</transition>
</VWindowItem>