fix https://github.com/jxxghp/MoviePilot/issues/2335

src/pages/appcenter.vue

@@ -2,26 +2,77 @@
 import { NavMenu } from '@/@layouts/types'
 import { SystemNavMenus } from '@/router/menu'
 import store from '@/store'
+import draggable from 'vuedraggable'
 
 // 从Vuex Store中获取superuser信息
 const superUser = store.state.auth.superUser
 
+// APP图标顺序
+const appOrder = ref<string[]>([])
+
 // 根据分类获取菜单列表
 const getMenuList = () => {
   return SystemNavMenus.filter((item: NavMenu) => !item.admin || superUser)
 }
+
+// APP列表
+const appList = ref<NavMenu[]>(getMenuList())
+
+// 保存APP图标顺序到localStorage
+function saveAppsOrder() {
+  appOrder.value = appList.value.map(app => app.title)
+  localStorage.setItem('MP_APPS_ORDER', JSON.stringify(appOrder.value))
+}
+
+onMounted(() => {
+  const localOrder = localStorage.getItem('MP_APPS_ORDER')
+  if (localOrder) {
+    appOrder.value = JSON.parse(localOrder)
+    // 对appList进行排序
+    appList.value.sort((a, b) => {
+      const aIndex = appOrder.value.findIndex(item => item === a.title)
+      const bIndex = appOrder.value.findIndex(item => item === b.title)
+      return (aIndex === -1 ? 999 : aIndex) - (bIndex === -1 ? 999 : bIndex)
+    })
+  }
+})
 </script>
 <template>
-  <div class="ps ps--active-y mx-3" tabindex="0">
+  <div class="ps ps--active-y mx-3 appcenter-grid" tabindex="0">
-    <VRow class="ma-0 mt-n1">
+    <draggable
-      <VCol cols="6" md="4" lg="3" class="text-center cursor-pointer shortcut-icon" v-for="item in getMenuList()">
+      v-model="appList"
-        <VCard class="pa-4" :to="item.to" variant="flat">
+      handle=".cursor-move"
-          <VAvatar size="64" variant="text">
+      item-key="pri"
-            <VIcon size="48" :icon="item.icon" color="primary" />
+      tag="VRow"
-          </VAvatar>
+      @end="saveAppsOrder"
-          <h6 class="text-base font-weight-medium mt-2 mb-0">{{ item.full_title || item.title }}</h6>
+      :component-data="{ 'class': 'ma-0 mt-n1' }"
-        </VCard>
+    >
-      </VCol>
+      <template #item="{ element }">
-    </VRow>
+        <VCol cols="6" md="4" lg="3" class="text-center cursor-pointer shortcut-icon">
+          <VHover>
+            <template #default="hover">
+              <VCard class="pa-4" :to="element.to" variant="flat" v-bind="hover.props">
+                <div v-if="hover.isHovering" class="absolute right-5 top-5">
+                  <VIcon class="cursor-move">mdi-drag</VIcon>
+                </div>
+                <VAvatar size="64" variant="text">
+                  <VIcon size="48" :icon="element.icon" color="primary" />
+                </VAvatar>
+                <h6 class="text-base font-weight-medium mt-2 mb-0">{{ element.full_title || element.title }}</h6>
+              </VCard>
+            </template>
+          </VHover>
+        </VCol>
+      </template>
+    </draggable>
   </div>
 </template>
+
+<style type="scss">
+.appcenter-grid .v-card {
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
+  background-color: rgb(var(--v-theme-surface), 0.8);
+}
+</style>

src/styles/styles.scss

@@ -188,3 +188,17 @@
 .v-fab__container {
   padding-block-end: env(safe-area-inset-bottom);
 }
+
+.v-overlay__content .v-list{
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  background-color: rgb(var(--v-theme-surface), 0.9) !important;
+}
+
+.v-overlay__content .v-card{
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  background-color: rgb(var(--v-theme-surface), 0.95) !important;
+}

src/views/discover/TorrentCardListView.vue

@@ -130,8 +130,8 @@ watchEffect(() => {
   // 清空列表
   dataList.value = []
   // 匹配过滤函数，filter中有任一值包含value则返回true
-  const match = (filter: Array<string>, value: string | undefined): boolean =>
+  const match = (filter: Array<string>, value: string | undefined) =>
-    filter.length === 0 || filter.includes(value ?? '') || filter.some(v => value?.includes(v) ?? false)
+    filter.length === 0 || (value && filter.includes(value))
 
   groupedDataList.value?.forEach(value => {
     if (value.length > 0) {