perf(frontend): 优化视频库列表性能，添加搜索功能

Signed-off-by: Myon <[email protected]>

frontend/src/pages/library/movies/index.vue

@@ -24,12 +24,20 @@
         map-options
         style="width: 200px"
       />
+
+      <q-input v-model="filterForm.search" outlined dense label="输入关键字搜索">
+        <template #append>
+          <q-icon name="search" />
+        </template>
+      </q-input>
     </div>
 
     <q-separator class="q-my-md" />
 
     <div v-if="movies.length" class="row q-gutter-x-md q-gutter-y-lg">
-      <list-item-movie v-for="item in filteredMovies" :data="item" :key="item.name" />
+      <q-intersection v-for="item in filteredMovies" :key="item.name" style="width: 160px; height: 280px">
+        <list-item-movie :data="item" />
+      </q-intersection>
     </div>
     <div v-else class="q-my-md text-grey">当前没有可用视频，点击"更新缓存"按钮可重建缓存</div>
   </q-page>
@@ -42,17 +50,25 @@ import ListItemMovie from './ListItemMovie';
 
 const filterForm = reactive({
   hasSubtitle: null,
+  search: '',
 });
 
 const { movies, refreshLibrary, refreshCacheLoading } = useLibrary();
 
 const filteredMovies = computed(() => {
-  if (filterForm.hasSubtitle === null) {
-    return movies.value;
-  }
+  let res = movies.value;
+
   if (filterForm.hasSubtitle === true) {
-    return movies.value.filter((item) => item.sub_f_path_list.length > 0);
+    res = movies.value.filter((item) => item.sub_f_path_list.length > 0);
   }
-  return movies.value.filter((item) => item.sub_f_path_list.length === 0);
+  if (filterForm.hasSubtitle === false) {
+    res = movies.value.filter((item) => item.sub_f_path_list.length === 0);
+  }
+
+  if (filterForm.search !== '') {
+    res = res.filter((item) => item.name.toLowerCase().includes(filterForm.search.toLowerCase()));
+  }
+
+  return res;
 });
 </script>

frontend/src/pages/library/tvs/index.vue

@@ -15,19 +15,30 @@
         dense
         outlined
         :options="[
-          { label: '有字幕', value: true },
-          { label: '无字幕', value: false },
+          { label: '无字幕', value: 1 },
+          { label: '部分有字幕', value: 2 },
+          { label: '全部有字幕', value: 3 },
         ]"
         label="有无字幕"
         clearable
-        style="width: 200px"
+        map-options
+        emit-value
+        style="width: 160px"
       />
+
+      <q-input v-model="filterForm.search" outlined dense label="输入关键字搜索">
+        <template #append>
+          <q-icon name="search" />
+        </template>
+      </q-input>
     </div>
 
     <q-separator class="q-my-md" />
 
     <div v-if="tvs.length" class="row q-gutter-x-md q-gutter-y-lg">
-      <list-item-t-v v-for="item in tvs" :data="item" :key="item.name" />
+      <q-intersection v-for="item in filteredTvs" :key="item.name" style="width: 160px; height: 280px">
+        <list-item-t-v :data="item" />
+      </q-intersection>
     </div>
     <div v-else class="q-my-md text-grey">当前没有可用视频，点击"更新缓存"按钮可重建缓存</div>
   </q-page>
@@ -35,12 +46,35 @@
 
 <script setup>
 import { useLibrary } from 'pages/library/useLibrary';
-import { reactive } from 'vue';
+import { computed, reactive } from 'vue';
 import ListItemTV from 'pages/library/tvs/ListItemTV';
 
 const filterForm = reactive({
-  hasSubtitle: undefined,
+  hasSubtitle: null,
+  search: '',
 });
 
 const { tvs, refreshLibrary, refreshCacheLoading } = useLibrary();
+
+const filteredTvs = computed(() => {
+  let res = tvs.value;
+
+  const getSubtitleCount = (item) => item.one_video_info.filter((e) => e.sub_f_path_list.length > 0).length;
+
+  if (filterForm.hasSubtitle === 1) {
+    res = res.filter((item) => getSubtitleCount(item) === 0);
+  }
+  if (filterForm.hasSubtitle === 2) {
+    res = res.filter((item) => getSubtitleCount(item) > 0 && getSubtitleCount(item) < item.one_video_info.length);
+  }
+  if (filterForm.hasSubtitle === 3) {
+    res = res.filter((item) => getSubtitleCount(item) === item.one_video_info.length);
+  }
+
+  if (filterForm.search !== '') {
+    res = res.filter((item) => item.name.toLowerCase().includes(filterForm.search.toLowerCase()));
+  }
+
+  return res;
+});
 </script>