feat: 根据路由元数据动态控制组件缓存并优化直播管理页面分页

src/components.d.ts

@@ -19,11 +19,17 @@ declare module 'vue' {
     LabelItem: typeof import('./components/LabelItem.vue')['default']
     LiveInfoContainer: typeof import('./components/LiveInfoContainer.vue')['default']
     MonacoEditorComponent: typeof import('./components/MonacoEditorComponent.vue')['default']
+    NAlert: typeof import('naive-ui')['NAlert']
+    NEllipsis: typeof import('naive-ui')['NEllipsis']
+    NEmpty: typeof import('naive-ui')['NEmpty']
     NFlex: typeof import('naive-ui')['NFlex']
     NFormItemGi: typeof import('naive-ui')['NFormItemGi']
     NGridItem: typeof import('naive-ui')['NGridItem']
+    NIcon: typeof import('naive-ui')['NIcon']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NTag: typeof import('naive-ui')['NTag']
+    NText: typeof import('naive-ui')['NText']
+    NTime: typeof import('naive-ui')['NTime']
     PointGoodsItem: typeof import('./components/manage/PointGoodsItem.vue')['default']
     PointHistoryCard: typeof import('./components/manage/PointHistoryCard.vue')['default']
     PointOrderCard: typeof import('./components/manage/PointOrderCard.vue')['default']

src/views/ManageLayout.vue

@@ -736,15 +736,29 @@ onMounted(() => {
           >
             <NElement>
               <!-- 已验证邮箱的用户显示内容 -->
-              <RouterView v-if="accountInfo?.isEmailVerified" v-slot="{ Component }">
+              <RouterView v-if="accountInfo?.isEmailVerified" v-slot="{ Component, route }">
-                <KeepAlive>
+                <template v-if="route.meta.keepAlive">
                   <Suspense>
+                    <template #default>
+                      <KeepAlive>
                         <component :is="Component" />
+                      </KeepAlive>
+                    </template>
                     <template #fallback>
                       <NSpin show />
                     </template>
                   </Suspense>
-                </KeepAlive>
+                </template>
+                <template v-else>
+                  <Suspense>
+                    <template #default>
+                      <component :is="Component" :key="route.fullPath" />
+                    </template>
+                    <template #fallback>
+                      <NSpin show />
+                    </template>
+                  </Suspense>
+                </template>
               </RouterView>
               <!-- 未验证邮箱的提示 -->
               <template v-else>

src/views/manage/LiveManager.vue

@@ -1,24 +1,34 @@
 <script setup lang="ts">
 import type { ResponseLiveInfoModel } from '@/api/api-models'
 import { NAlert, NDivider, NList, NListItem, NPagination, NSpace, useMessage } from 'naive-ui'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { useStorage } from '@vueuse/core'
 import { useAccount } from '@/api/account'
 import { QueryGetAPI } from '@/api/query'
 import EventFetcherStatusCard from '@/components/EventFetcherStatusCard.vue'
 import LiveInfoContainer from '@/components/LiveInfoContainer.vue'
 import { LIVE_API_URL } from '@/data/constants'
 
+defineOptions({ name: 'ManageLiveView' })
+
 const accountInfo = useAccount()
 const message = useMessage()
 const route = useRoute()
 const router = useRouter()
 
 const lives = ref<ResponseLiveInfoModel[]>(await getAll())
-const page = ref(1)
+const page = useSessionStorage<number>('ManageLive.page', 1)
-const pageSize = ref(10)
+const pageSize = useStorage<number>('ManageLive.pageSize', 10)
 const defaultDanmakusCount = ref(0)
 
+watch([lives, pageSize], () => {
+  const total = lives.value.length
+  const size = pageSize.value || 10
+  const maxPage = Math.max(1, Math.ceil(total / size))
+  if (page.value > maxPage) page.value = maxPage
+})
+
 async function getAll() {
   try {
     const data = await QueryGetAPI<ResponseLiveInfoModel[]>(`${LIVE_API_URL}get-all`)