feat：小屏搜索结果列表模式增加过滤按钮

src/@core/components/ThemeSwitcher.vue

@@ -209,7 +209,7 @@ onMounted(() => {
     </VList>
   </VMenu>
   <!-- 自定义 CSS -- -->
-  <VDialog v-model="cssDialog" persistent max-width="50rem" scrollable :fullscreen="!display.mdAndUp.value">
+  <VDialog v-if="cssDialog" v-model="cssDialog" persistent max-width="50rem" scrollable :fullscreen="!display.mdAndUp.value">
     <VCard title="自定义主题风格">
       <DialogCloseBtn @click="cssDialog = false" />
       <VDivider />

src/components/cards/CustomRuleCard.vue

@@ -104,7 +104,7 @@ function onClose() {
         <VImg :src="filter_svg" cover class="mt-7" max-width="3rem" />
       </VCardText>
     </VCard>
-    <VDialog v-model="ruleInfoDialog" scrollable max-width="40rem" persistent>
+    <VDialog v-if="ruleInfoDialog" v-model="ruleInfoDialog" scrollable max-width="40rem" persistent>
       <VCard :title="`${props.rule.id} - 配置`" class="rounded-t">
         <DialogCloseBtn v-model="ruleInfoDialog" />
         <VDivider />

src/components/cards/DownloaderCard.vue

@@ -172,7 +172,7 @@ onUnmounted(() => {
         </div>
       </VCardText>
     </VCard>
-    <VDialog v-model="downloaderInfoDialog" scrollable max-width="40rem" persistent>
+    <VDialog v-if="downloaderInfoDialog" v-model="downloaderInfoDialog" scrollable max-width="40rem" persistent>
       <VCard :title="`${props.downloader.name} - 配置`" class="rounded-t">
         <DialogCloseBtn v-model="downloaderInfoDialog" />
         <VDivider />

src/components/cards/FilterRuleGroupCard.vue

@@ -220,7 +220,7 @@ function onClose() {
         <VImg :src="filter_group_svg" cover class="mt-10" max-width="3rem" />
       </VCardText>
     </VCard>
-    <VDialog v-model="groupInfoDialog" scrollable max-width="80rem" persistent>
+    <VDialog v-if="groupInfoDialog" v-model="groupInfoDialog" scrollable max-width="80rem" persistent>
       <VCard :title="`${props.group.name} - 配置`" class="rounded-t">
         <DialogCloseBtn v-model="groupInfoDialog" />
         <VDivider />

src/components/cards/MediaServerCard.vue

@@ -185,7 +185,7 @@ onMounted(() => {
         <VImg :src="getIcon" cover class="mt-7 me-3" max-width="3rem" min-width="3rem" />
       </VCardText>
     </VCard>
-    <VDialog v-model="mediaServerInfoDialog" scrollable max-width="40rem" persistent>
+    <VDialog v-if="mediaServerInfoDialog" v-model="mediaServerInfoDialog" scrollable max-width="40rem" persistent>
       <VCard :title="`${props.mediaserver.name} - 配置`" class="rounded-t">
         <DialogCloseBtn v-model="mediaServerInfoDialog" />
         <VDivider />

src/components/cards/NotificationChannelCard.vue

@@ -7,7 +7,7 @@ import synologychat_image from '@images/logos/synologychat.png'
 import slack_image from '@images/logos/slack.webp'
 import chrome_image from '@images/logos/chrome.png'
 import { useToast } from 'vue-toast-notification'
-import { cloneDeep } from "lodash"
+import { cloneDeep } from 'lodash'
 
 // 定义输入
 const props = defineProps({
@@ -132,7 +132,7 @@ function onClose() {
         <VImg :src="getIcon" cover class="mt-7 me-3" max-width="3rem" />
       </VCardText>
     </VCard>
-    <VDialog v-model="notificationInfoDialog" scrollable max-width="40rem" persistent>
+    <VDialog v-if="notificationInfoDialog" v-model="notificationInfoDialog" scrollable max-width="40rem" persistent>
       <VCard :title="`${props.notification.name} - 配置`" class="rounded-t">
         <DialogCloseBtn v-model="notificationInfoDialog" />
         <VDivider />

src/components/cards/PluginCard.vue

@@ -485,7 +485,13 @@ watch(
     </VHover>
 
     <!-- 插件配置页面 -->
-    <VDialog v-model="pluginConfigDialog" scrollable max-width="60rem" :fullscreen="!display.mdAndUp.value">
+    <VDialog
+      v-if="pluginConfigDialog"
+      v-model="pluginConfigDialog"
+      scrollable
+      max-width="60rem"
+      :fullscreen="!display.mdAndUp.value"
+    >
       <VCard :title="`${props.plugin?.plugin_name} - 配置`" class="rounded-t">
         <DialogCloseBtn v-model="pluginConfigDialog" />
         <VDivider />
@@ -503,7 +509,13 @@ watch(
     </VDialog>
 
     <!-- 插件数据页面 -->
-    <VDialog v-model="pluginInfoDialog" scrollable max-width="80rem" :fullscreen="!display.mdAndUp.value">
+    <VDialog
+      v-if="pluginInfoDialog"
+      v-model="pluginInfoDialog"
+      scrollable
+      max-width="80rem"
+      :fullscreen="!display.mdAndUp.value"
+    >
       <VCard :title="`${props.plugin?.plugin_name}`" class="rounded-t">
         <DialogCloseBtn v-model="pluginInfoDialog" />
         <VCardText class="min-h-40">

src/components/filebrowser/FileToolbar.vue

@@ -169,7 +169,7 @@ const sortIcon = computed(() => {
         </IconBtn>
       </template>
     </VTooltip>
-    <VDialog v-model="newFolderPopper" max-width="50rem">
+    <VDialog v-if="newFolderPopper" v-model="newFolderPopper" max-width="50rem">
       <template #activator="{ props }">
         <IconBtn v-bind="props">
           <VTooltip text="新建文件夹">

src/components/misc/FilterOption.vue

@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+defineProps<{ title: string }>()
+</script>
+<template>
+  <VListSubheader>{{ title }}</VListSubheader>
+  <VListItem><slot /></VListItem>
+</template>

src/layouts/components/UserProfile.vue

@@ -156,7 +156,7 @@ const userLevel = computed(() => store.state.auth.level)
   <!-- 用户认证对话框 -->
   <UserAuthDialog v-if="siteAuthDialog" v-model="siteAuthDialog" @done="siteAuthDone" @close="siteAuthDialog = false" />
   <!-- 重启确认对话框 -->
-  <VDialog v-model="restartDialog" max-width="25rem">
+  <VDialog v-if="restartDialog" v-model="restartDialog" max-width="25rem">
     <VCard>
       <VCardItem>
         <div class="flex items-center justify-center mt-3">

src/pages/dashboard.vue

@@ -340,7 +340,7 @@ onDeactivated(() => {
   />
 
   <!-- 弹窗，根据配置生成选项 -->
-  <VDialog v-model="dialog" max-width="35rem" scrollable>
+  <VDialog v-if="dialog" v-model="dialog" max-width="35rem" scrollable>
     <VCard>
       <VCardItem>
         <VCardTitle>设置仪表板</VCardTitle>

src/views/plugin/PluginCardListView.vue

@@ -607,7 +607,7 @@ onMounted(async () => {
     </VCard>
   </VDialog>
   <!-- 安装插件进度框 -->
-  <VDialog v-model="progressDialog" :scrim="false" width="25rem">
+  <VDialog v-if="progressDialog" v-model="progressDialog" :scrim="false" width="25rem">
     <VCard color="primary">
       <VCardText class="text-center">
         {{ progressText }}

src/views/setting/AccountSettingAbout.vue

@@ -255,7 +255,7 @@ onMounted(() => {
       </div>
     </div>
   </div>
-  <VDialog v-model="releaseDialog" width="600" scrollable>
+  <VDialog v-if="releaseDialog" v-model="releaseDialog" width="600" scrollable>
     <VCard>
       <VCardItem>
         <DialogCloseBtn @click="releaseDialog = false" />

src/views/torrent/TorrentRowListView.vue

@@ -1,39 +1,71 @@
 <script lang="ts" setup>
 import type { Context } from '@/api/types'
 import TorrentItem from '@/components/cards/TorrentItem.vue'
-import { list } from 'postcss'
+import FilterOption from '@/components/misc/FilterOption.vue'
 import { useDisplay } from 'vuetify'
 
-// 显示器宽度
+// 设备模式
 const display = useDisplay()
-
-// APP
 const appMode = inject('pwaMode') && display.mdAndDown.value
 
+// 过滤弹窗
+const filterDialog = ref(false)
+
 // 定义输入参数
 const props = defineProps({
-  // 数据列表
   items: Array as PropType<Context[]>,
 })
 
 // 过滤表单
-const filterForm = reactive({
-  // 站点
+const filterForm: Record<string, string[]> = reactive({
   site: [] as string[],
-  // 季
   season: [] as string[],
-  // 制作组
   releaseGroup: [] as string[],
-  // 视频编码
   videoCode: [] as string[],
-  // 促销状态
   freeState: [] as string[],
-  // 质量
   edition: [] as string[],
-  // 分辨率
   resolution: [] as string[],
 })
 
+// 过滤项映射（保持中文标题）
+const filterTitles: Record<string, string> = {
+  site: '站点',
+  season: '季集',
+  freeState: '促销状态',
+  videoCode: '视频编码',
+  edition: '质量',
+  resolution: '分辨率',
+  releaseGroup: '制作组',
+}
+
+// 排序中文名
+const sortTitles: Record<string, string> = {
+  default: '默认',
+  site: '站点',
+  size: '大小',
+  seeder: '做种数',
+}
+
+// 统一存储过滤选项
+const filterOptions: Record<string, string[]> = reactive({
+  site: [] as string[],
+  season: [] as string[],
+  freeState: [] as string[],
+  edition: [] as string[],
+  resolution: [] as string[],
+  videoCode: [] as string[],
+  releaseGroup: [] as string[],
+})
+
+// 非空值的过滤选项
+const filterOptionsNotEmpty = computed(() => {
+  const options: Record<string, string[]> = {}
+  for (const key in filterOptions) {
+    if (filterOptions[key].length > 0) options[key] = filterOptions[key]
+  }
+  return options
+})
+
 // 列表样式
 const listStyle = computed(() => {
   return appMode
@@ -47,155 +79,23 @@ const sortField = ref('default')
 // 数据列表
 const dataList = ref<Array<Context>>([])
 
-// 获取站点过滤选项
-const siteFilterOptions = ref<Array<string>>([])
-// 获取季过滤选项
-const seasonFilterOptions = ref<Array<string>>([])
-// 获取制作组过滤选项
-const releaseGroupFilterOptions = ref<Array<string>>([])
-// 获取视频编码过滤选项
-const videoCodeFilterOptions = ref<Array<string>>([])
-// 获取促销状态过滤选项
-const freeStateFilterOptions = ref<Array<string>>([])
-// 获取质量过滤选项
-const editionFilterOptions = ref<Array<string>>([])
-// 获取分辨率过滤选项
-const resolutionFilterOptions = ref<Array<string>>([])
-
 // 初始化过滤选项
 function initOptions(data: Context) {
   const { torrent_info, meta_info } = data
   const optionValue = (options: Array<string>, value: string | undefined) => {
     value && !options.includes(value) && options.push(value)
   }
-  optionValue(siteFilterOptions.value, torrent_info?.site_name)
-  optionValue(seasonFilterOptions.value, meta_info?.season_episode)
-  optionValue(releaseGroupFilterOptions.value, meta_info?.resource_team)
-  optionValue(videoCodeFilterOptions.value, meta_info?.video_encode)
-  optionValue(freeStateFilterOptions.value, torrent_info?.volume_factor)
-  optionValue(editionFilterOptions.value, meta_info?.edition)
-  optionValue(resolutionFilterOptions.value, meta_info?.resource_pix)
+
+  optionValue(filterOptions.site, torrent_info?.site_name)
+  optionValue(filterOptions.season, meta_info?.season_episode)
+  optionValue(filterOptions.releaseGroup, meta_info?.resource_team)
+  optionValue(filterOptions.videoCode, meta_info?.video_encode)
+  optionValue(filterOptions.freeState, torrent_info?.volume_factor)
+  optionValue(filterOptions.edition, meta_info?.edition)
+  optionValue(filterOptions.resolution, meta_info?.resource_pix)
 }
 
-// 对季过滤选项进行排序
-const sortSeasonFilterOptions = computed(() => {
-  // 预解析所有选项
-  const parsedOptions = seasonFilterOptions.value.map((option, index) => {
-    const parseSeasonEpisode = (str: string) => {
-      const match = str.match(/^S(\d+)(?:-S(\d+))?(?:\s*E(\d+)(?:-E(\d+))?)?$/)
-
-      if (!match) {
-        // 如果字符串格式不正确，返回默认值
-        return {
-          original: str,
-          seasonStart: 0,
-          seasonEnd: 0,
-          episodeStart: 0,
-          episodeEnd: 0,
-          maxSeason: 0,
-          maxEpisode: 0,
-          index,
-        }
-      }
-
-      const seasonStart = match[1] ? parseInt(match[1], 10) : 0
-      const seasonEnd = match[2] ? parseInt(match[2], 10) : 0
-      const episodeStart = match[3] ? parseInt(match[3], 10) : 0
-      const episodeEnd = match[4] ? parseInt(match[4], 10) : 0
-      const maxSeason = seasonEnd > 0 ? seasonEnd : seasonStart
-      const maxEpisode = episodeEnd > 0 ? episodeEnd : episodeStart
-
-      return {
-        original: str,
-        seasonStart,
-        seasonEnd,
-        episodeStart,
-        episodeEnd,
-        maxSeason,
-        maxEpisode,
-        index,
-      }
-    }
-
-    return parseSeasonEpisode(option)
-  })
-
-  // 定义判断是否为整季或季范围的函数
-  const isWholeSeason = (parsed: (typeof parsedOptions)[0]) =>
-    parsed.seasonStart > 0 &&
-    (parsed.seasonEnd === 0 || parsed.seasonEnd > parsed.seasonStart) &&
-    parsed.episodeStart === 0 &&
-    parsed.episodeEnd === 0
-
-  // 定义判断是否包含集数的函数
-  const hasEpisodes = (parsed: (typeof parsedOptions)[0]) => parsed.episodeStart > 0 || parsed.episodeEnd > 0
-
-  // 排序逻辑
-  parsedOptions.sort((a, b) => {
-    const aIsWhole = isWholeSeason(a)
-    const bIsWhole = isWholeSeason(b)
-    const aHasEpisodes = hasEpisodes(a)
-    const bHasEpisodes = hasEpisodes(b)
-
-    // 优先级1：整季和季范围选项优先于带有集数的选项
-    if (aIsWhole && !bIsWhole) return -1
-    if (!aIsWhole && bIsWhole) return 1
-
-    // 优先级2：如果都是整季或季范围选项，按 maxSeason 降序排列
-    if (aIsWhole && bIsWhole) {
-      if (b.maxSeason !== a.maxSeason) {
-        return b.maxSeason - a.maxSeason
-      }
-      // 如果 maxSeason 相同，则按原始索引
-      return a.index - b.index
-    }
-
-    // 优先级3：如果都是带有集数的选项，先按 maxSeason 降序，再按 maxEpisode 降序
-    if (aHasEpisodes && bHasEpisodes) {
-      if (b.maxSeason !== a.maxSeason) {
-        return b.maxSeason - a.maxSeason
-      }
-      if (b.maxEpisode !== a.maxEpisode) {
-        return b.maxEpisode - a.maxEpisode
-      }
-      // 如果 maxSeason 和 maxEpisode 相同，则按原始索引
-      return a.index - b.index
-    }
-
-    // 优先级4：如果一个有集数，一个没有，优先有集数的选项
-    if (aHasEpisodes && !bHasEpisodes) return -1
-    if (!aHasEpisodes && bHasEpisodes) return 1
-
-    // 优先级5：对于没有集数且不是整季的选项，按 seasonStart 和 seasonEnd 降序排序
-    if (b.seasonStart !== a.seasonStart) {
-      return b.seasonStart - a.seasonStart
-    }
-    if (b.seasonEnd !== a.seasonEnd) {
-      return b.seasonEnd - a.seasonEnd
-    }
-
-    // 优先级6：按 episodeStart 和 episodeEnd 降序排序
-    if (b.episodeStart !== a.episodeStart) {
-      return b.episodeStart - a.episodeStart
-    }
-    if (b.episodeEnd !== a.episodeEnd) {
-      return b.episodeEnd - a.episodeEnd
-    }
-
-    // 优先级7：兜底按字母降序排列
-    if (a.original !== b.original) {
-      return b.original.localeCompare(a.original)
-    }
-
-    // 优先级8：如果所有条件都相同，则按原始索引
-    return a.index - b.index
-  })
-
-  // 返回排序后的原始字符串数组
-  return parsedOptions.map(option => option.original)
-})
-
-// 排序
+// 监听数据列表，进行排序
 watchEffect(() => {
   const list = dataList.value
   if (sortField.value === 'default') {
@@ -241,151 +141,122 @@ watchEffect(() => {
 
 // 初始化过滤选项
 onMounted(() => {
-  props.items?.forEach(item => {
-    initOptions(item)
-  })
+  props.items?.forEach(initOptions)
 })
 </script>
 
 <template>
-  <VRow>
-    <VCol>
-      <VList v-if="dataList.length === 0" lines="three" class="rounded p-0 shadow-lg">
-        <VListItem>
-          <VListItemTitle>没有附合当前过滤条件的资源。</VListItemTitle>
-        </VListItem>
-      </VList>
-      <VList v-if="dataList.length !== 0" lines="three" class="rounded p-0 torrent-list-vscroll shadow-lg">
-        <VVirtualScroll :items="dataList" :style="listStyle">
-          <template #default="{ item }">
-            <TorrentItem :torrent="item" :key="`${item.torrent_info.page_url}`" />
-          </template>
-        </VVirtualScroll>
-      </VList>
-    </VCol>
-    <VCol xl="2" md="3" v-if="display.mdAndUp.value">
-      <VList lines="one" class="rounded shadow-lg" :style="listStyle">
-        <VListSubheader> 排序 </VListSubheader>
-        <VListItem>
-          <VChipGroup column v-model="sortField">
-            <VChip :color="sortField == 'default' ? 'primary' : ''" filter variant="outlined" value="default">
-              默认
-            </VChip>
-            <VChip :color="sortField == 'site' ? 'primary' : ''" filter variant="outlined" value="site"> 站点 </VChip>
-            <VChip :color="sortField == 'size' ? 'primary' : ''" filter variant="outlined" value="size">
-              文件大小
-            </VChip>
-            <VChip :color="sortField == 'seeder' ? 'primary' : ''" filter variant="outlined" value="seeder">
-              做种数
-            </VChip>
-          </VChipGroup>
-        </VListItem>
-        <VListSubheader v-if="siteFilterOptions.length > 0"> 站点 </VListSubheader>
-        <VListItem>
-          <VChipGroup v-model="filterForm.site" column multiple>
-            <VChip
-              v-for="site in siteFilterOptions"
-              :key="site"
-              :color="filterForm.site.includes(site) ? 'primary' : ''"
-              filter
-              variant="outlined"
-              :value="site"
-            >
-              {{ site }}
-            </VChip>
-          </VChipGroup>
-        </VListItem>
-        <VListSubheader v-if="editionFilterOptions.length > 0"> 质量 </VListSubheader>
-        <VListItem>
-          <VChipGroup v-model="filterForm.edition" column multiple>
-            <VChip
-              v-for="edition in editionFilterOptions"
-              :key="edition"
-              :color="filterForm.edition.includes(edition) ? 'primary' : ''"
-              filter
-              variant="outlined"
-              :value="edition"
-            >
-              {{ edition }}
-            </VChip>
-          </VChipGroup>
-        </VListItem>
-        <VListSubheader v-if="resolutionFilterOptions.length > 0"> 分辨率 </VListSubheader>
-        <VListItem>
-          <VChipGroup v-model="filterForm.resolution" column multiple>
-            <VChip
-              v-for="resolution in resolutionFilterOptions"
-              :key="resolution"
-              :color="filterForm.resolution.includes(resolution) ? 'primary' : ''"
-              filter
-              variant="outlined"
-              :value="resolution"
-            >
-              {{ resolution }}
-            </VChip>
-          </VChipGroup>
-        </VListItem>
-        <VListSubheader v-if="releaseGroupFilterOptions.length > 0"> 制作组 </VListSubheader>
-        <VListItem>
-          <VChipGroup v-model="filterForm.releaseGroup" column multiple>
-            <VChip
-              v-for="releaseGroup in releaseGroupFilterOptions"
-              :key="releaseGroup"
-              :color="filterForm.releaseGroup.includes(releaseGroup) ? 'primary' : ''"
-              filter
-              variant="outlined"
-              :value="releaseGroup"
-            >
-              {{ releaseGroup }}
-            </VChip>
-          </VChipGroup>
-        </VListItem>
-        <VListSubheader v-if="videoCodeFilterOptions.length > 0"> 视频编码 </VListSubheader>
-        <VListItem>
-          <VChipGroup v-model="filterForm.videoCode" column multiple>
-            <VChip
-              v-for="videoCode in videoCodeFilterOptions"
-              :key="videoCode"
-              :color="filterForm.videoCode.includes(videoCode) ? 'primary' : ''"
-              filter
-              variant="outlined"
-              :value="videoCode"
-            >
-              {{ videoCode }}
-            </VChip>
-          </VChipGroup>
-        </VListItem>
-        <VListSubheader v-if="freeStateFilterOptions.length > 0"> 促销状态 </VListSubheader>
-        <VListItem>
-          <VChipGroup v-model="filterForm.freeState" column multiple>
-            <VChip
-              v-for="freeState in freeStateFilterOptions"
-              :key="freeState"
-              :color="filterForm.freeState.includes(freeState) ? 'primary' : ''"
-              filter
-              variant="outlined"
-              :value="freeState"
-            >
-              {{ freeState }}
-            </VChip>
-          </VChipGroup>
-        </VListItem>
-        <VListSubheader v-if="seasonFilterOptions.length > 0"> 季集 </VListSubheader>
-        <VListItem>
-          <VChipGroup v-model="filterForm.season" column multiple>
-            <VChip
-              v-for="season in sortSeasonFilterOptions"
-              :key="season"
-              :color="filterForm.season.includes(season) ? 'primary' : ''"
-              filter
-              variant="outlined"
-              :value="season"
-            >
-              {{ season }}
-            </VChip>
-          </VChipGroup>
-        </VListItem>
-      </VList>
-    </VCol>
-  </VRow>
+  <div>
+    <VRow>
+      <VCol>
+        <VList v-if="dataList.length === 0" lines="three" class="rounded p-0 shadow-lg">
+          <VListItem>
+            <VListItemTitle>没有符合当前过滤条件的资源。</VListItemTitle>
+          </VListItem>
+        </VList>
+        <VList v-else lines="three" class="rounded p-0 torrent-list-vscroll shadow-lg">
+          <VVirtualScroll :items="dataList" :style="listStyle">
+            <template #default="{ item }">
+              <TorrentItem :torrent="item" :key="item.torrent_info.page_url" />
+            </template>
+          </VVirtualScroll>
+        </VList>
+      </VCol>
+      <!-- 排序 & 过滤列表 -->
+      <VCol xl="2" md="3" v-if="display.mdAndUp.value">
+        <VList lines="one" class="rounded shadow-lg" :style="listStyle">
+          <FilterOption title="排序">
+            <VChipGroup column v-model="sortField">
+              <VChip
+                v-for="(title, key) in sortTitles"
+                :key="key"
+                :color="sortField === key ? 'primary' : ''"
+                filter
+                variant="outlined"
+                :value="key"
+              >
+                {{ title }}
+              </VChip>
+            </VChipGroup>
+          </FilterOption>
+          <!-- 过滤选项 -->
+          <FilterOption v-for="(options, key) in filterOptionsNotEmpty" :key="key" :title="filterTitles[key]">
+            <VChipGroup v-model="filterForm[key]" column multiple>
+              <VChip
+                v-for="option in options"
+                :key="option"
+                :color="filterForm[key].includes(option) ? 'primary' : ''"
+                filter
+                variant="outlined"
+                :value="option"
+              >
+                {{ option }}
+              </VChip>
+            </VChipGroup>
+          </FilterOption>
+        </VList>
+      </VCol>
+    </VRow>
+
+    <!-- 过滤弹窗 -->
+    <VDialog v-model="filterDialog" max-width="40rem">
+      <VCard title="排序 & 过滤" class="rounded-t">
+        <DialogCloseBtn v-model="filterDialog" />
+        <VDivider />
+        <VList lines="one">
+          <FilterOption title="排序">
+            <VChipGroup column v-model="sortField">
+              <VChip
+                v-for="(title, key) in sortTitles"
+                :key="key"
+                :color="sortField === key ? 'primary' : ''"
+                filter
+                variant="outlined"
+                :value="key"
+              >
+                {{ title }}
+              </VChip>
+            </VChipGroup>
+          </FilterOption>
+          <!-- 过滤选项 -->
+          <FilterOption
+            v-for="(options, key) in filterOptionsNotEmpty"
+            v-show="options.length > 0"
+            :key="key"
+            :title="filterTitles[key]"
+          >
+            <VChipGroup v-model="filterForm[key]" column multiple>
+              <VChip
+                v-for="option in options"
+                v-show="options.length > 0"
+                :key="option"
+                :color="filterForm[key].includes(option) ? 'primary' : ''"
+                filter
+                variant="outlined"
+                :value="option"
+              >
+                {{ option }}
+              </VChip>
+            </VChipGroup>
+          </FilterOption>
+        </VList>
+      </VCard>
+    </VDialog>
+
+    <!-- 底部操作按钮 -->
+    <div v-if="props.items">
+      <VFab
+        v-if="!display.mdAndUp.value"
+        icon="mdi-filter"
+        color="info"
+        location="bottom"
+        :class="appMode ? 'mb-28' : 'mb-16'"
+        size="x-large"
+        fixed
+        app
+        appear
+        @click="filterDialog = true"
+      />
+    </div>
+  </div>
 </template>

src/views/user/UserProfileView.vue

@@ -403,7 +403,7 @@ watch(
     </VRow>
 
     <!-- 双重验证弹窗 -->
-    <VDialog v-model="otpDialog" max-width="45rem" persistent scrollable>
+    <VDialog v-if="otpDialog" v-model="otpDialog" max-width="45rem" persistent scrollable>
       <!-- 开启双重验证弹窗内容 -->
       <VCard>
         <DialogCloseBtn @click="otpDialog = false" />