From 617223777be492e9f4b5a138b589e017cdb96fdc Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Thu, 9 Apr 2026 13:03:58 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=BB=9F=E4=B8=80=E8=BF=87?=
 =?UTF-8?q?=E6=BB=A4=E5=9B=BE=E6=A0=87=E4=B8=BA=20mdi-filter-multiple-outl?=
 =?UTF-8?q?ine=EF=BC=8C=E6=8F=92=E4=BB=B6=E5=B8=82=E5=9C=BA=E7=AD=9B?=
 =?UTF-8?q?=E9=80=89=E6=94=B9=E4=B8=BA=E4=B8=8B=E6=8B=89=E5=A4=9A=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/subscribe.vue                 |   2 +-
 src/views/plugin/PluginCardListView.vue | 107 ++++++++++--------------
 src/views/site/SiteCardListView.vue     |   2 +-
 3 files changed, 48 insertions(+), 63 deletions(-)

diff --git a/src/pages/subscribe.vue b/src/pages/subscribe.vue
index 13c83e2f..cadf52e7 100644
--- a/src/pages/subscribe.vue
+++ b/src/pages/subscribe.vue
@@ -58,7 +58,7 @@ const searchShares = () => {
 // 筛选选项
 const filterOptions = computed(() => {
   const baseOptions = [
-    { value: 'all', label: t('common.all'), icon: 'mdi-format-list-bulleted' },
+    { value: 'all', label: t('common.all'), icon: 'mdi-filter-multiple-outline' },
     { value: 'best_version', label: t('subscribe.bestVersion'), icon: 'mdi-refresh', color: 'warning' },
   ]
 
diff --git a/src/views/plugin/PluginCardListView.vue b/src/views/plugin/PluginCardListView.vue
index 977d06a7..8d05f9eb 100644
--- a/src/views/plugin/PluginCardListView.vue
+++ b/src/views/plugin/PluginCardListView.vue
@@ -113,7 +113,7 @@ registerHeaderTab({
 const pluginId = ref(route.query.id)
 
 // 当前排序字段
-const activeSort = ref(null)
+const activeSort = ref<string | null>(null)
 
 // 插件顺序配置
 const orderConfig = ref<{ id: string; type?: string; order?: number }[]>([])
@@ -1363,9 +1363,8 @@ function onDragStartPlugin(evt: any) {
         :close-on-content-click="false"
         :activator="'[data-menu-activator=market-filter-btn]'"
         location="bottom end"
-        max-height="80vh"
       >
-        <VCard min-width="240" max-width="300">
+        <VCard min-width="260" max-width="320">
           <!-- 名称搜索 -->
           <div class="px-3 pt-3 pb-1">
             <VTextField
@@ -1380,7 +1379,7 @@ function onDragStartPlugin(evt: any) {
           </div>
           <VDivider class="mt-2" />
           <!-- 排序 -->
-          <VList v-if="sortOptions.length > 0" density="compact" class="px-2 py-1">
+          <VList density="compact" class="px-2 py-1">
             <VListSubheader>{{ t('plugin.sortTitle') }}</VListSubheader>
             <VListItem
               v-for="option in sortOptions"
@@ -1395,63 +1394,49 @@ function onDragStartPlugin(evt: any) {
               </template>
             </VListItem>
           </VList>
-          <!-- 作者筛选 -->
-          <template v-if="authorFilterOptions.length > 0">
-            <VDivider />
-            <VList density="compact" class="px-2 py-1">
-              <VListSubheader>{{ t('plugin.author') }}</VListSubheader>
-              <VListItem
-                v-for="author in authorFilterOptions"
-                :key="author"
-                :active="filterForm.author.includes(author)"
-                @click="toggleMarketFilter('author', author)"
-                density="compact"
-              >
-                <VListItemTitle>{{ author }}</VListItemTitle>
-                <template #append>
-                  <VIcon v-if="filterForm.author.includes(author)" icon="mdi-check" color="primary" size="small" />
-                </template>
-              </VListItem>
-            </VList>
-          </template>
-          <!-- 标签筛选 -->
-          <template v-if="labelFilterOptions.length > 0">
-            <VDivider />
-            <VList density="compact" class="px-2 py-1">
-              <VListSubheader>{{ t('plugin.label') }}</VListSubheader>
-              <VListItem
-                v-for="label in labelFilterOptions"
-                :key="label"
-                :active="filterForm.label.includes(label)"
-                @click="toggleMarketFilter('label', label)"
-                density="compact"
-              >
-                <VListItemTitle>{{ label }}</VListItemTitle>
-                <template #append>
-                  <VIcon v-if="filterForm.label.includes(label)" icon="mdi-check" color="primary" size="small" />
-                </template>
-              </VListItem>
-            </VList>
-          </template>
-          <!-- 仓库筛选 -->
-          <template v-if="repoFilterOptions.length > 0">
-            <VDivider />
-            <VList density="compact" class="px-2 py-1">
-              <VListSubheader>{{ t('plugin.repository') }}</VListSubheader>
-              <VListItem
-                v-for="repo in repoFilterOptions"
-                :key="repo"
-                :active="filterForm.repo.includes(repo)"
-                @click="toggleMarketFilter('repo', repo)"
-                density="compact"
-              >
-                <VListItemTitle class="text-truncate" style="max-width: 220px">{{ repo }}</VListItemTitle>
-                <template #append>
-                  <VIcon v-if="filterForm.repo.includes(repo)" icon="mdi-check" color="primary" size="small" />
-                </template>
-              </VListItem>
-            </VList>
-          </template>
+          <!-- 下拉多选筛选项 -->
+          <VDivider />
+          <div class="px-3 py-2 d-flex flex-column gap-2">
+            <VSelect
+              v-if="authorFilterOptions.length > 0"
+              v-model="filterForm.author"
+              :items="authorFilterOptions"
+              :label="t('plugin.author')"
+              multiple
+              chips
+              closable-chips
+              density="compact"
+              variant="outlined"
+              hide-details
+              clearable
+            />
+            <VSelect
+              v-if="labelFilterOptions.length > 0"
+              v-model="filterForm.label"
+              :items="labelFilterOptions"
+              :label="t('plugin.label')"
+              multiple
+              chips
+              closable-chips
+              density="compact"
+              variant="outlined"
+              hide-details
+              clearable
+            />
+            <VSelect
+              v-if="repoFilterOptions.length > 0"
+              v-model="filterForm.repo"
+              :items="repoFilterOptions"
+              :label="t('plugin.repository')"
+              multiple
+              chips
+              closable-chips
+              density="compact"
+              variant="outlined"
+              hide-details
+              clearable
+            />
+          </div>
         </VCard>
       </VMenu>
     </Teleport>
diff --git a/src/views/site/SiteCardListView.vue b/src/views/site/SiteCardListView.vue
index f19227b3..293ef8a8 100644
--- a/src/views/site/SiteCardListView.vue
+++ b/src/views/site/SiteCardListView.vue
@@ -57,7 +57,7 @@ const filterOption = ref('all') // all, active, inactive, connected, slow, faile
 
 // 筛选选项
 const filterOptions = computed(() => [
-  { value: 'all', label: t('common.all'), icon: 'mdi-format-list-bulleted' },
+  { value: 'all', label: t('common.all'), icon: 'mdi-filter-multiple-outline' },
   { value: 'active', label: t('common.active'), icon: 'mdi-check-circle', color: 'success' },
   { value: 'inactive', label: t('common.inactive'), icon: 'mdi-stop-circle', color: 'error' },
   { value: 'connected', label: t('site.connectionNormal'), icon: 'mdi-wifi', color: 'success' },