pref: 优化搜索页面的性能

src/panes/SearchPane/components/BangumiPanel.vue

@@ -1,7 +1,7 @@
 <script setup lang="tsx">
 import { BangumiSearchResult, commands, EpInBangumi } from '../../../bindings.ts'
-import { SelectionArea } from '@viselect/vue'
-import { ref, nextTick, watch, computed } from 'vue'
+import { PartialSelectionOptions, SelectionArea } from '@viselect/vue'
+import { ref, nextTick, watch, computed, useTemplateRef } from 'vue'
 import CollectionCard from './CollectionCard.vue'
 import { useEpisodeCard, useEpisodeDropdown, useEpisodeSelection } from '../../../utils.tsx'
 import EpisodeCard, { EpisodeInfo } from './EpisodeCard.vue'
@@ -13,15 +13,24 @@ const props = defineProps<{
 
 const collectionCardShowing = ref<boolean>(false)
 
+const selectionOptions: PartialSelectionOptions = {
+  selectables: '.selectable',
+  features: { deselectOnBlur: true },
+  boundaries: '.bangumi-panel-selection-container',
+}
+const selectionAreaRef = useTemplateRef('selectionAreaRef')
 const { selectedIds, updateSelectedIds, unselectAll } = useEpisodeSelection()
-const selectionAreaRef = ref<InstanceType<typeof SelectionArea>>()
 const checkedIds = ref<Set<number>>(new Set())
 
-const rootDivRef = ref<HTMLDivElement>()
-const episodeCardRefs = ref<InstanceType<typeof EpisodeCard>[]>([])
+const rootDivRef = useTemplateRef('rootDivRef')
+const episodeCardRefs = useTemplateRef('episodeCardRefs')
 const episodeCardRefsMap = computed<Map<number, InstanceType<typeof EpisodeCard>>>(() => {
   const map = new Map<number, InstanceType<typeof EpisodeCard>>()
-  episodeCardRefs.value.forEach((card) => map.set(card.episodeInfo.aid, card))
+  episodeCardRefs.value?.forEach((card) => {
+    if (card !== null) {
+      map.set(card.episodeInfo.aid, card)
+    }
+  })
   return map
 })
 
@@ -130,12 +139,12 @@ watch(
 
     await nextTick()
 
-    if (rootDivRef.value === undefined) {
+    if (rootDivRef.value === null) {
       return
     }
 
     const targetElement = rootDivRef.value.querySelector(`[data-key="${episode.aid}"]`)
-    if (targetElement !== null) {
+    if (targetElement !== undefined && targetElement !== null) {
       targetElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
     }
   },
@@ -184,13 +193,10 @@ function playCardDownloadAnimation(aid: number) {
 
 <template>
   <div class="flex flex-col h-full select-none" ref="rootDivRef">
-    <SelectionArea
-      ref="selectionAreaRef"
-      class="selection-container flex flex-col flex-1 px-2 pt-0 overflow-auto"
-      :options="{ selectables: '.selectable', features: { deselectOnBlur: true } }"
-      @contextmenu="showDropdown"
-      @move="updateSelectedIds"
-      @start="unselectAll">
+    <SelectionArea ref="selectionAreaRef" :options="selectionOptions" @move="updateSelectedIds" @start="unselectAll" />
+    <div
+      class="bangumi-panel-selection-container flex flex-col flex-1 px-2 pt-0 overflow-auto"
+      @contextmenu="showDropdown">
       <div class="animate-pulse text-violet">左键拖动进行框选，右键打开菜单，滚轮可以滚动底部的标签</div>
       <div class="flex flex-wrap gap-2">
         <EpisodeCard
@@ -207,7 +213,7 @@ function playCardDownloadAnimation(aid: number) {
           :handle-checkbox-click="handleCheckboxClick"
           :handle-context-menu="handleContextMenu" />
       </div>
-    </SelectionArea>
+    </div>
 
     <n-tabs class="select-none mt-2" v-model:value="currentTabIndex" type="line" size="small" placement="bottom">
       <n-tab v-for="(tabName, index) in tabNames" :key="index" :name="index" :tab="tabName" />
@@ -243,7 +249,7 @@ function playCardDownloadAnimation(aid: number) {
 </template>
 
 <style scoped>
-.selection-container .selected {
+.bangumi-panel-selection-container .selected {
   @apply bg-[rgb(204,232,255)];
 }
 

src/panes/SearchPane/components/CheesePanel.vue

@@ -1,7 +1,7 @@
 <script setup lang="tsx">
 import { CheeseSearchResult, commands } from '../../../bindings.ts'
-import { SelectionArea } from '@viselect/vue'
-import { ref, nextTick, watch, computed } from 'vue'
+import { PartialSelectionOptions, SelectionArea } from '@viselect/vue'
+import { ref, nextTick, watch, computed, useTemplateRef } from 'vue'
 import CollectionCard from './CollectionCard.vue'
 import { useEpisodeCard, useEpisodeDropdown, useEpisodeSelection } from '../../../utils.tsx'
 import EpisodeCard, { EpisodeInfo } from './EpisodeCard.vue'
@@ -13,16 +13,21 @@ const props = defineProps<{
 
 const collectionCardShowing = ref<boolean>(false)
 
+const selectionOptions: PartialSelectionOptions = {
+  selectables: '.selectable',
+  features: { deselectOnBlur: true },
+  boundaries: '.cheese-panel-selection-container',
+}
+const selectionAreaRef = useTemplateRef('selectionAreaRef')
 const { selectedIds, updateSelectedIds, unselectAll } = useEpisodeSelection()
-const selectionAreaRef = ref<InstanceType<typeof SelectionArea>>()
 const checkedIds = ref<Set<number>>(new Set())
 
-const rootDivRef = ref<HTMLDivElement>()
-const episodeCardRefs = ref<InstanceType<typeof EpisodeCard>[]>([])
+const rootDivRef = useTemplateRef('rootDivRef')
+const episodeCardRefs = useTemplateRef('episodeCardRefs')
 const episodeCardRefsMap = computed<Map<number, InstanceType<typeof EpisodeCard>>>(() => {
   const map = new Map<number, InstanceType<typeof EpisodeCard>>()
-  episodeCardRefs.value.forEach((card) => {
-    if (card.episodeInfo.epId !== undefined) {
+  episodeCardRefs.value?.forEach((card) => {
+    if (card !== null && card.episodeInfo.epId !== undefined) {
       map.set(card.episodeInfo.epId, card)
     }
   })
@@ -101,7 +106,7 @@ watch(
     checkedIds.value = new Set([ep.id])
     await nextTick()
 
-    if (rootDivRef.value === undefined) {
+    if (rootDivRef.value === null) {
       return
     }
 
@@ -135,13 +140,10 @@ async function downloadCheckedEpisodes() {
 
 <template>
   <div class="flex flex-col h-full select-none" ref="rootDivRef">
-    <SelectionArea
-      ref="selectionAreaRef"
-      class="selection-container flex flex-col flex-1 px-2 pt-0 overflow-auto"
-      :options="{ selectables: '.selectable', features: { deselectOnBlur: true } }"
-      @contextmenu="showDropdown"
-      @move="updateSelectedIds"
-      @start="unselectAll">
+    <SelectionArea ref="selectionAreaRef" :options="selectionOptions" @move="updateSelectedIds" @start="unselectAll" />
+    <div
+      class="cheese-panel-selection-container flex flex-col flex-1 px-2 pt-0 overflow-auto"
+      @contextmenu="showDropdown">
       <div class="animate-pulse text-violet">左键拖动进行框选，右键打开菜单</div>
       <div class="flex flex-wrap gap-2">
         <EpisodeCard
@@ -158,7 +160,7 @@ async function downloadCheckedEpisodes() {
           :handle-checkbox-click="handleCheckboxClick"
           :handle-context-menu="handleContextMenu" />
       </div>
-    </SelectionArea>
+    </div>
 
     <div class="p-2 ml-auto">
       <n-button class="mr-2" size="small" @click="collectionCardShowing = !collectionCardShowing">
@@ -189,7 +191,7 @@ async function downloadCheckedEpisodes() {
 </template>
 
 <style scoped>
-.selection-container .selected {
+.cheese-panel-selection-container .selected {
   @apply bg-[rgb(204,232,255)];
 }
 </style>

src/panes/SearchPane/components/NormalSeasonPanel.vue

@@ -1,10 +1,10 @@
 <script setup lang="tsx">
 import { commands, NormalSearchResult, UgcSeason, SectionInNormal } from '../../../bindings.ts'
-import { SelectionArea } from '@viselect/vue'
-import { ref, nextTick, computed, watch } from 'vue'
+import { PartialSelectionOptions, SelectionArea } from '@viselect/vue'
+import { ref, nextTick, computed, watch, useTemplateRef } from 'vue'
 import CollectionCard from './CollectionCard.vue'
 import { useEpisodeCard, useEpisodeDropdown, useEpisodeSelection } from '../../../utils.tsx'
-import { TabsInst, NButton, NCollapseTransition, NDropdown, NTab, NTabs } from 'naive-ui'
+import { NButton, NCollapseTransition, NDropdown, NTab, NTabs } from 'naive-ui'
 import EpisodeCard, { EpisodeInfo } from './EpisodeCard.vue'
 
 const props = defineProps<{
@@ -14,17 +14,26 @@ const props = defineProps<{
 
 const collectionCardShowing = ref<boolean>(false)
 
-const tabsInstRef = ref<TabsInst>()
+const tabsInstRef = useTemplateRef('tabsInstRef')
 
+const selectionOptions: PartialSelectionOptions = {
+  selectables: '.selectable',
+  features: { deselectOnBlur: true },
+  boundaries: '.normal-season-panel-selection-container',
+}
+const selectionAreaRef = useTemplateRef('selectionAreaRef')
 const { selectedIds, updateSelectedIds, unselectAll } = useEpisodeSelection()
-const selectionAreaRef = ref<InstanceType<typeof SelectionArea>>()
 const checkedIds = ref<Set<number>>(new Set())
 
-const rootDivRef = ref<HTMLDivElement>()
-const episodeCardRefs = ref<InstanceType<typeof EpisodeCard>[]>([])
+const rootDivRef = useTemplateRef('rootDivRef')
+const episodeCardRefs = useTemplateRef('episodeCardRefs')
 const episodeCardRefsMap = computed<Map<number, InstanceType<typeof EpisodeCard>>>(() => {
   const map = new Map<number, InstanceType<typeof EpisodeCard>>()
-  episodeCardRefs.value.forEach((card) => map.set(card.episodeInfo.aid, card))
+  episodeCardRefs.value?.forEach((card) => {
+    if (card !== null) {
+      map.set(card.episodeInfo.aid, card)
+    }
+  })
   return map
 })
 
@@ -104,7 +113,7 @@ watch(
     await nextTick()
     tabsInstRef.value?.syncBarPosition()
 
-    if (rootDivRef.value === undefined) {
+    if (rootDivRef.value === null) {
       return
     }
 
@@ -138,13 +147,10 @@ async function downloadCheckedEpisodes() {
 
 <template>
   <div class="flex flex-col h-full select-none" ref="rootDivRef">
-    <SelectionArea
-      ref="selectionAreaRef"
-      class="selection-container flex flex-col flex-1 px-2 pt-0 overflow-auto"
-      :options="{ selectables: '.selectable', features: { deselectOnBlur: true } }"
-      @contextmenu="showDropdown"
-      @move="updateSelectedIds"
-      @start="unselectAll">
+    <SelectionArea ref="selectionAreaRef" :options="selectionOptions" @move="updateSelectedIds" @start="unselectAll" />
+    <div
+      class="normal-season-panel-selection-container flex flex-col flex-1 px-2 pt-0 overflow-auto"
+      @contextmenu="showDropdown">
       <div class="animate-pulse text-violet">左键拖动进行框选，右键打开菜单，滚轮可以滚动底部的标签</div>
       <div class="flex flex-wrap gap-2">
         <EpisodeCard
@@ -161,7 +167,7 @@ async function downloadCheckedEpisodes() {
           :handle-checkbox-click="handleCheckboxClick"
           :handle-context-menu="handleContextMenu" />
       </div>
-    </SelectionArea>
+    </div>
 
     <n-tabs
       ref="tabsInstRef"
@@ -203,7 +209,7 @@ async function downloadCheckedEpisodes() {
 </template>
 
 <style scoped>
-.selection-container .selected {
+.normal-season-panel-selection-container .selected {
   @apply bg-[rgb(204,232,255)];
 }
 

src/panes/SearchPane/components/UserVideoPanel.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { commands, GetUserVideoInfoParams, UserVideoSearchResult } from '../../../bindings.ts'
-import { computed, inject, ref, watch } from 'vue'
+import { computed, inject, ref, useTemplateRef, watch } from 'vue'
 import EpisodeCard, { EpisodeInfo } from './EpisodeCard.vue'
 import { useEpisodeCard, useEpisodeDropdown, useEpisodeSelection } from '../../../utils.tsx'
-import { SelectionArea } from '@viselect/vue'
+import { PartialSelectionOptions, SelectionArea } from '@viselect/vue'
 import { searchPaneRefKey } from '../../../injection_keys.ts'
 import { NButton, NDropdown, NPagination } from 'naive-ui'
 
@@ -18,8 +18,13 @@ const pageCount = computed<number>(() => {
   return Math.ceil(count / ps)
 })
 
+const selectionOptions: PartialSelectionOptions = {
+  selectables: '.selectable',
+  features: { deselectOnBlur: true },
+  boundaries: '.user-video-panel-selection-container',
+}
+const selectionAreaRef = useTemplateRef('selectionAreaRef')
 const { selectedIds, updateSelectedIds, unselectAll } = useEpisodeSelection()
-const selectionAreaRef = ref<InstanceType<typeof SelectionArea>>()
 const checkedIds = ref<Set<number>>(new Set())
 
 watch(userVideoResult, () => {
@@ -31,10 +36,14 @@ watch(userVideoResult, () => {
   selectionAreaRef.value?.$el.scrollTo({ top: 0, behavior: 'instant' })
 })
 
-const episodeCardRefs = ref<InstanceType<typeof EpisodeCard>[]>([])
+const episodeCardRefs = useTemplateRef('episodeCardRefs')
 const episodeCardRefsMap = computed<Map<number, InstanceType<typeof EpisodeCard>>>(() => {
   const map = new Map<number, InstanceType<typeof EpisodeCard>>()
-  episodeCardRefs.value.forEach((card) => map.set(card.episodeInfo.aid, card))
+  episodeCardRefs.value?.forEach((card) => {
+    if (card !== null) {
+      map.set(card.episodeInfo.aid, card)
+    }
+  })
   return map
 })
 
@@ -121,13 +130,10 @@ async function getUserVideoInfo(page: number) {
 
 <template>
   <div class="flex flex-col h-full select-none overflow-auto">
-    <SelectionArea
-      ref="selectionAreaRef"
-      class="selection-container flex flex-col flex-1 px-2 overflow-auto"
-      :options="{ selectables: '.selectable', features: { deselectOnBlur: true } }"
-      @contextmenu="showDropdown"
-      @move="updateSelectedIds"
-      @start="unselectAll">
+    <SelectionArea ref="selectionAreaRef" :options="selectionOptions" @move="updateSelectedIds" @start="unselectAll" />
+    <div
+      class="user-video-panel-selection-container flex flex-col flex-1 px-2 overflow-auto"
+      @contextmenu="showDropdown">
       <div class="animate-pulse text-violet">左键拖动进行框选，右键打开菜单</div>
       <div class="flex flex-wrap gap-2">
         <EpisodeCard
@@ -145,7 +151,7 @@ async function getUserVideoInfo(page: number) {
           :handle-context-menu="handleContextMenu"
           :search="searchPaneRef?.search" />
       </div>
-    </SelectionArea>
+    </div>
 
     <div class="flex gap-2 m-2 box-border">
       <n-pagination :page-count="pageCount" :page="currentPage" @update:page="getUserVideoInfo($event)" />
@@ -164,7 +170,7 @@ async function getUserVideoInfo(page: number) {
 </template>
 
 <style scoped>
-.selection-container .selected {
+.user-video-panel-selection-container .selected {
   @apply bg-[rgb(204,232,255)];
 }
 </style>