From 81f85b9e461fdf83be06d3f1e45ed1f6749344b2 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sat, 29 Mar 2025 08:11:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E7=BB=93=E6=9E=9C=E7=95=8C=E9=9D=A2UI=EF=BC=8C=E6=84=9F?=
 =?UTF-8?q?=E8=B0=A2=20@madrays?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/cards/TorrentCard.vue      | 645 ++++++++++++++++----
 src/components/cards/TorrentItem.vue      | 510 +++++++++++++---
 src/pages/resource.vue                    | 424 +++++++++++--
 src/views/torrent/TorrentCardListView.vue | 565 ++++++++++++++++--
 src/views/torrent/TorrentRowListView.vue  | 693 +++++++++++++++++-----
 5 files changed, 2405 insertions(+), 432 deletions(-)

diff --git a/src/components/cards/TorrentCard.vue b/src/components/cards/TorrentCard.vue
index 0108825e..da156a3a 100644
--- a/src/components/cards/TorrentCard.vue
+++ b/src/components/cards/TorrentCard.vue
@@ -78,12 +78,13 @@ async function downloadTorrentFile() {
   window.open(torrent.value?.enclosure, '_blank')
 }
 
-// 促销Chip类
-function getVolumeFactorClass(downloadVolume: number, uploadVolume: number) {
-  if (downloadVolume === 0) return 'text-white bg-lime-500'
-  else if (downloadVolume < 1) return 'text-white bg-green-500'
-  else if (uploadVolume !== 1) return 'text-white bg-sky-500'
-  else return 'text-white bg-gray-500'
+// 获取优惠类型样式
+function getPromotionClass(downloadVolumeFactor: number | undefined, uploadVolumeFactor: number | undefined) {
+  if (!downloadVolumeFactor) return 'free-discount'
+  if (downloadVolumeFactor === 0) return 'free-discount'
+  else if (downloadVolumeFactor < 1) return 'percent-discount'
+  else if (uploadVolumeFactor !== undefined && uploadVolumeFactor > 1) return 'upload-bonus'
+  else return ''
 }
 
 // 装载时查询站点图标
@@ -95,124 +96,153 @@ onMounted(() => {
 <template>
   <div>
     <VCard
-      :width="props.width"
-      :height="props.height"
-      :variant="downloaded.includes(torrent?.enclosure || '') ? 'outlined' : 'elevated'"
+      :width="props.width || '100%'"
+      height="300px"
+      :variant="downloaded.includes(torrent?.enclosure || '') ? 'outlined' : 'flat'"
       @click="handleAddDownload(props.torrent)"
+      class="torrent-card"
+      :class="{ 'downloaded-card': downloaded.includes(torrent?.enclosure || '') }"
     >
-      <template v-if="!showMoreTorrents" #image>
-        <VAvatar class="absolute right-2 bottom-2 rounded" variant="flat" rounded="0">
-          <VImg :src="siteIcon" />
-        </VAvatar>
-      </template>
-      <VCardItem class="py-1">
-        <VCardTitle class="break-words overflow-visible whitespace-break-spaces">
-          {{ media?.title ?? meta?.name }} {{ meta?.season_episode }}
-          <span class="text-green-700 ms-2 text-sm">↑{{ torrent?.seeders }}</span>
-          <span class="text-orange-700 ms-2 text-sm">↓{{ torrent?.peers }}</span>
-        </VCardTitle>
-        <template #append>
-          <div class="me-n3">
-            <IconBtn>
-              <VIcon icon="mdi-dots-vertical" />
-              <VMenu activator="parent" close-on-content-click>
-                <VList>
-                  <VListItem variant="plain" @click="openTorrentDetail()">
-                    <template #prepend>
-                      <VIcon icon="mdi-information" />
-                    </template>
-                    <VListItemTitle>查看详情</VListItemTitle>
-                  </VListItem>
-                  <VListItem
-                    v-if="props.torrent?.torrent_info?.enclosure?.startsWith('http')"
-                    variant="plain"
-                    @click="downloadTorrentFile()"
-                  >
-                    <template #prepend>
-                      <VIcon icon="mdi-download" />
-                    </template>
-                    <VListItemTitle>下载种子文件</VListItemTitle>
-                  </VListItem>
-                </VList>
-              </VMenu>
-            </IconBtn>
-          </div>
-        </template>
-      </VCardItem>
-      <VCardText class="text-subtitle-2">
-        {{ torrent?.title }}
-      </VCardText>
-      <VCardText>【{{ torrent?.site_name }}】{{ torrent?.description }}</VCardText>
-      <VCardItem v-if="torrent?.labels" class="pb-3 pt-0 pe-12">
-        <VChip v-if="torrent?.hit_and_run" variant="elevated" size="small" class="me-1 mb-1 text-white bg-black">
-          H&R
-        </VChip>
-        <VChip v-if="torrent?.freedate_diff" variant="elevated" color="secondary" size="small" class="me-1 mb-1">
-          {{ torrent?.freedate_diff }}
-        </VChip>
-        <VChip
-          v-for="(label, index) in torrent?.labels"
-          :key="index"
-          variant="elevated"
-          size="small"
-          color="primary"
-          class="me-1 mb-1"
-        >
-          {{ label }}
-        </VChip>
-        <VChip v-if="meta?.edition" variant="elevated" size="small" class="me-1 mb-1 text-white bg-red-500">
-          {{ meta?.edition }}
-        </VChip>
-        <VChip v-if="meta?.resource_pix" variant="elevated" size="small" class="me-1 mb-1 text-white bg-red-500">
-          {{ meta?.resource_pix }}
-        </VChip>
-        <VChip v-if="meta?.video_encode" variant="elevated" size="small" class="me-1 mb-1 text-white bg-orange-500">
-          {{ meta?.video_encode }}
-        </VChip>
-        <VChip v-if="torrent?.size" variant="elevated" size="small" class="me-1 mb-1 text-white bg-yellow-500">
-          {{ formatFileSize(torrent?.size) }}
-        </VChip>
-        <VChip v-if="meta?.resource_team" variant="elevated" size="small" class="me-1 mb-1 text-white bg-cyan-500">
-          {{ meta?.resource_team }}
-        </VChip>
-        <VChip
-          v-if="torrent?.downloadvolumefactor !== 1 || torrent?.uploadvolumefactor !== 1"
-          :class="getVolumeFactorClass(torrent?.downloadvolumefactor, torrent?.uploadvolumefactor)"
-          variant="elevated"
-          size="small"
-          class="me-1 mb-1"
-        >
-          {{ torrent?.volume_factor }}
-        </VChip>
-      </VCardItem>
-      <VCardActions>
-        <VBtn v-if="props.more && props.more.length > 0" @click.stop="showMoreTorrents = !showMoreTorrents">
-          <template #append>
-            <VIcon :icon="showMoreTorrents ? 'mdi-chevron-up' : 'mdi-chevron-down'" />
-          </template>
-          更多来源
-        </VBtn>
-      </VCardActions>
-      <VExpandTransition>
-        <div v-show="showMoreTorrents">
-          <VDivider />
-          <VChipGroup class="p-3" column>
-            <VChip v-for="(item, index) in props.more" :key="index" @click.stop="handleAddDownload(item)">
-              <template #append>
-                <VBadge color="primary" :content="`↑${item.torrent_info?.seeders}`" inline size="small" />
-                <VBadge
-                  v-if="item.torrent_info?.downloadvolumefactor !== 1 || item.torrent_info?.uploadvolumefactor !== 1"
-                  :content="item.torrent_info?.volume_factor"
-                  inline
-                  size="small"
-                />
-              </template>
-              {{ item.torrent_info.site_name }}
-            </VChip>
-          </VChipGroup>
+      <!-- 优惠标签 -->
+      <div
+        v-if="torrent?.downloadvolumefactor !== 1 || torrent?.uploadvolumefactor !== 1"
+        class="discount-banner"
+        :class="getPromotionClass(torrent?.downloadvolumefactor, torrent?.uploadvolumefactor)"
+      >
+        {{ torrent?.volume_factor }}
+      </div>
+
+      <!-- 媒体标题 -->
+      <div class="card-header">
+        <div class="media-title-wrapper">
+          <h3 class="media-title">
+            {{ media?.title ?? meta?.name }}
+            <span v-if="meta?.season_episode" class="season-tag">{{ meta?.season_episode }}</span>
+          </h3>
         </div>
-      </VExpandTransition>
+
+        <!-- 站点信息条 -->
+        <div class="site-info">
+          <div class="d-flex align-center">
+            <img v-if="siteIcon" :src="siteIcon" class="site-icon" />
+            <span v-else class="site-fallback">{{ torrent?.site_name?.substring(0, 1) }}</span>
+            <span class="site-name">{{ torrent?.site_name }}</span>
+          </div>
+
+          <div class="seeder-peers">
+            <span v-if="torrent?.seeders" class="seed-info">
+              <VIcon size="small" color="success" icon="mdi-arrow-up"></VIcon>{{ torrent?.seeders }}
+            </span>
+            <span v-if="torrent?.peers" class="peer-info">
+              <VIcon size="small" color="warning" icon="mdi-arrow-down"></VIcon>{{ torrent?.peers }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 种子内容 -->
+      <div class="card-content">
+        <!-- 种子标题 -->
+        <div class="torrent-title" :title="torrent?.title">
+          {{ torrent?.title }}
+        </div>
+
+        <!-- 种子描述 -->
+        <div
+          v-if="meta?.subtitle || torrent?.description"
+          class="torrent-desc"
+          :title="meta?.subtitle || torrent?.description"
+        >
+          {{ meta?.subtitle || torrent?.description }}
+        </div>
+
+        <!-- 资源标签区 -->
+        <div class="tags-container">
+          <div v-if="meta?.edition" class="resource-tag edition">{{ meta?.edition }}</div>
+          <div v-if="meta?.resource_pix" class="resource-tag resolution">{{ meta?.resource_pix }}</div>
+          <div v-if="meta?.video_encode" class="resource-tag codec">{{ meta?.video_encode }}</div>
+          <div v-if="meta?.resource_team" class="resource-tag team">{{ meta?.resource_team }}</div>
+          <div v-for="(label, index) in torrent?.labels" :key="index" class="resource-tag label">{{ label }}</div>
+          <div v-if="torrent?.hit_and_run" class="resource-tag hr">H&R</div>
+          <div v-if="torrent?.freedate_diff" class="resource-tag expire">{{ torrent?.freedate_diff }}</div>
+        </div>
+      </div>
+
+      <!-- 卡片底部信息 -->
+      <div class="card-footer">
+        <div class="more-sources-wrapper" v-if="props.more && props.more.length > 0">
+          <div class="more-sources-toggle" @click.stop="showMoreTorrents = !showMoreTorrents">
+            <VIcon :icon="showMoreTorrents ? 'mdi-chevron-up' : 'mdi-chevron-down'" size="small" class="me-1"></VIcon>
+            <span>更多来源 ({{ props.more.length }})</span>
+          </div>
+        </div>
+
+        <VSpacer />
+
+        <!-- 体积和详情按钮并排 -->
+        <div class="card-actions">
+          <div v-if="torrent?.size" class="size-badge">
+            {{ formatFileSize(torrent.size) }}
+          </div>
+
+          <VBtn
+            size="small"
+            icon="mdi-information-outline"
+            variant="text"
+            color="primary"
+            class="detail-btn"
+            @click.stop="openTorrentDetail"
+          ></VBtn>
+        </div>
+      </div>
     </VCard>
+
+    <!-- 更多来源对话框 - 改为独立对话框 -->
+    <VDialog v-model="showMoreTorrents" max-width="380px" location="center">
+      <VCard>
+        <VCardTitle class="py-2 d-flex align-center">
+          <span>其他来源</span>
+          <VSpacer />
+          <VBtn variant="text" size="small" icon="mdi-close" @click.stop="showMoreTorrents = false"></VBtn>
+        </VCardTitle>
+
+        <VDivider />
+
+        <VCardText class="more-sources-content">
+          <div
+            v-for="(item, index) in props.more"
+            :key="index"
+            @click.stop="handleAddDownload(item)"
+            class="more-source-item"
+          >
+            <div class="source-site-info">
+              <img v-if="siteIcon" :src="siteIcon" class="source-site-icon" />
+              <span v-else class="source-site-fallback">{{ item.torrent_info?.site_name?.substring(0, 1) }}</span>
+              <span class="source-site-name">{{ item.torrent_info.site_name }}</span>
+
+              <span
+                v-if="item.torrent_info?.downloadvolumefactor !== 1 || item.torrent_info?.uploadvolumefactor !== 1"
+                class="source-discount"
+                :class="
+                  getPromotionClass(item.torrent_info?.downloadvolumefactor, item.torrent_info?.uploadvolumefactor)
+                "
+              >
+                {{ item.torrent_info?.volume_factor }}
+              </span>
+            </div>
+
+            <div class="source-stats">
+              <span class="source-size">{{ formatFileSize(item.torrent_info?.size) }}</span>
+              <span class="source-seeders">
+                <VIcon size="x-small" color="success" icon="mdi-arrow-up"></VIcon>
+                {{ item.torrent_info?.seeders }}
+              </span>
+            </div>
+          </div>
+        </VCardText>
+      </VCard>
+    </VDialog>
+
     <AddDownloadDialog
       v-if="addDownloadDialog"
       v-model="addDownloadDialog"
@@ -227,3 +257,378 @@ onMounted(() => {
     />
   </div>
 </template>
+
+<style scoped>
+.torrent-card {
+  overflow: hidden;
+  border-radius: 12px;
+  box-shadow: none;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  transition: transform 0.3s ease;
+  position: relative;
+}
+
+.torrent-card:hover {
+  transform: translateY(-4px);
+  border-color: rgba(var(--v-theme-primary), 0.3);
+}
+
+.discount-banner {
+  position: absolute;
+  top: 0;
+  right: 0;
+  color: white;
+  padding: 4px 10px;
+  font-weight: 600;
+  font-size: 0.9rem;
+  border-radius: 0 0 0 12px;
+  z-index: 2;
+}
+
+.free-discount {
+  background-color: #4caf50;
+  font-weight: 700;
+}
+
+.percent-discount {
+  background-color: #ff5722;
+}
+
+.upload-bonus {
+  background-color: #9c27b0;
+}
+
+.size-badge {
+  background-color: rgba(var(--v-theme-primary), 0.9);
+  color: white;
+  padding: 2px 8px;
+  font-weight: 600;
+  font-size: 0.8rem;
+  border-radius: 4px;
+  margin-right: 6px;
+  display: flex;
+  align-items: center;
+}
+
+.card-header {
+  padding: 12px 16px 0;
+}
+
+.media-title-wrapper {
+  margin-bottom: 8px;
+}
+
+.media-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin: 0;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  color: rgba(var(--v-theme-on-surface), 0.87);
+}
+
+.season-tag {
+  font-size: 0.875rem;
+  background-color: rgba(var(--v-theme-primary), 0.08);
+  color: rgb(var(--v-theme-primary));
+  padding: 2px 8px;
+  border-radius: 4px;
+  margin-left: 8px;
+  font-weight: 600;
+}
+
+.site-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.site-icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 8px;
+  border-radius: 2px;
+}
+
+.site-fallback {
+  width: 20px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 8px;
+  font-weight: 700;
+  color: rgba(var(--v-theme-on-surface), 0.8);
+  background-color: rgba(var(--v-theme-on-surface), 0.1);
+  border-radius: 2px;
+}
+
+.site-name {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: rgba(var(--v-theme-on-surface), 0.85);
+}
+
+.seeder-peers {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.seed-info {
+  font-size: 0.95rem;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-weight: 600;
+}
+
+.peer-info {
+  font-size: 0.95rem;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-weight: 600;
+}
+
+.card-content {
+  padding: 0 16px;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow: hidden;
+}
+
+.torrent-title {
+  font-size: 0.9rem;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: rgba(var(--v-theme-on-surface), 0.87);
+  margin-bottom: 8px;
+}
+
+.torrent-desc {
+  font-size: 0.85rem;
+  color: rgba(var(--v-theme-on-surface), 0.6);
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  height: 4em;
+  margin-bottom: 8px;
+}
+
+.tags-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 8px;
+}
+
+.resource-tag {
+  font-size: 0.8rem;
+  padding: 3px 8px;
+  border-radius: 4px;
+  color: white;
+  font-weight: 700;
+}
+
+.edition {
+  background-color: #f44336;
+}
+
+.resolution {
+  background-color: #e91e63;
+}
+
+.codec {
+  background-color: #ff9800;
+}
+
+.team {
+  background-color: #03a9f4;
+}
+
+.expire {
+  background-color: #9c27b0;
+}
+
+.label {
+  background-color: #3f51b5;
+}
+
+.hr {
+  background-color: #000000;
+}
+
+.card-footer {
+  padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  border-top: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+  margin-top: auto;
+}
+
+.more-sources-wrapper {
+  position: relative;
+}
+
+.more-sources-toggle {
+  font-size: 0.875rem;
+  color: rgb(var(--v-theme-primary));
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.more-sources-toggle:hover {
+  background-color: rgba(var(--v-theme-primary), 0.08);
+}
+
+.more-sources-content {
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.more-source-item {
+  padding: 8px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: background-color 0.2s;
+  border-bottom: 1px solid rgba(var(--v-theme-on-surface), 0.05);
+}
+
+.more-source-item:hover {
+  background-color: rgba(var(--v-theme-primary), 0.05);
+}
+
+.source-site-info {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.source-site-icon {
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+}
+
+.source-site-fallback {
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 0.7rem;
+  color: rgba(var(--v-theme-on-surface), 0.8);
+  background-color: rgba(var(--v-theme-on-surface), 0.1);
+  border-radius: 2px;
+}
+
+.source-site-name {
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.source-discount {
+  font-weight: 700;
+  font-size: 0.8rem;
+  margin-left: 6px;
+  padding: 1px 5px;
+  border-radius: 3px;
+  color: white;
+}
+
+.source-stats {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.source-size {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: rgb(var(--v-theme-primary));
+}
+
+.source-seeders {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  font-weight: 600;
+  font-size: 0.8rem;
+}
+
+.card-actions {
+  display: flex;
+  align-items: center;
+}
+
+.detail-btn {
+  border-radius: 50%;
+  min-width: 36px;
+  height: 36px;
+}
+
+.downloaded-card {
+  border: 2px solid #4caf50 !important;
+  opacity: 0.85;
+}
+
+@media (max-width: 600px) {
+  .media-title {
+    font-size: 1rem;
+  }
+
+  .torrent-card {
+    height: 260px;
+  }
+
+  .resource-tag {
+    font-size: 0.75rem;
+    padding: 2px 6px;
+  }
+}
+
+.full-text {
+  white-space: normal;
+  word-break: break-word;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.menu-activator {
+  width: 100%;
+  cursor: pointer;
+}
+
+.break-words {
+  word-wrap: break-word;
+  word-break: break-word;
+}
+
+.overflow-visible {
+  overflow: visible !important;
+}
+
+.whitespace-break-spaces {
+  white-space: normal !important;
+}
+</style>
diff --git a/src/components/cards/TorrentItem.vue b/src/components/cards/TorrentItem.vue
index 5441c60f..6efd4665 100644
--- a/src/components/cards/TorrentItem.vue
+++ b/src/components/cards/TorrentItem.vue
@@ -25,6 +25,10 @@ const meta = ref(props.torrent?.meta_info)
 // 站点图标
 const siteIcon = ref('')
 
+// 站点图标加载状态
+const iconLoading = ref(false)
+const iconError = ref(false)
+
 // 存储是否已经下载过的记录
 const downloaded = ref<string[]>([])
 
@@ -33,11 +37,65 @@ const addDownloadDialog = ref(false)
 
 // 查询站点图标
 async function getSiteIcon() {
-  try {
-    siteIcon.value = (await api.get(`site/icon/${torrent?.value?.site}`)).data.icon
-  } catch (error) {
-    console.error(error)
+  if (!torrent?.value?.site || iconLoading.value) {
+    return
   }
+
+  iconLoading.value = true
+  iconError.value = false
+
+  try {
+    const response = await api.get(`site/icon/${torrent.value.site}`)
+    if (response && response.data && response.data.icon) {
+      siteIcon.value = response.data.icon
+    } else {
+      iconError.value = true
+    }
+  } catch (error) {
+    console.error('Failed to load site icon:', error)
+    iconError.value = true
+  } finally {
+    iconLoading.value = false
+  }
+}
+
+// 获取站点颜色
+function getSiteColor(siteId: string | number | undefined) {
+  if (!siteId) return '#3F51B5'
+
+  // 根据站点ID生成不同颜色
+  const colors = [
+    '#3F51B5',
+    '#673AB7',
+    '#9C27B0',
+    '#E91E63',
+    '#F44336',
+    '#FF5722',
+    '#FF9800',
+    '#FFC107',
+    '#4CAF50',
+    '#009688',
+    '#00BCD4',
+    '#03A9F4',
+  ]
+
+  // 简单哈希函数
+  let hash = 0
+  const idStr = String(siteId)
+  for (let i = 0; i < idStr.length; i++) {
+    hash = idStr.charCodeAt(i) + ((hash << 5) - hash)
+  }
+
+  return colors[Math.abs(hash) % colors.length]
+}
+
+// 获取优惠类型样式
+function getPromotionClass(downloadVolumeFactor: number | undefined, uploadVolumeFactor: number | undefined) {
+  if (!downloadVolumeFactor) return 'free-discount'
+  if (downloadVolumeFactor === 0) return 'free-discount'
+  else if (downloadVolumeFactor < 1) return 'percent-discount'
+  else if (uploadVolumeFactor !== undefined && uploadVolumeFactor > 1) return 'upload-bonus'
+  else return ''
 }
 
 // 询问并添加下载
@@ -69,10 +127,11 @@ async function downloadTorrentFile() {
 }
 
 // 促销Chip类
-function getVolumeFactorClass(downloadVolume: number, uploadVolume: number) {
+function getVolumeFactorClass(downloadVolume: number | undefined, uploadVolume: number | undefined) {
+  if (!downloadVolume) return 'text-white bg-gray-500'
   if (downloadVolume === 0) return 'text-white bg-lime-500'
   else if (downloadVolume < 1) return 'text-white bg-green-500'
-  else if (uploadVolume !== 1) return 'text-white bg-sky-500'
+  else if (uploadVolume !== undefined && uploadVolume !== 1) return 'text-white bg-sky-500'
   else return 'text-white bg-gray-500'
 }
 
@@ -83,96 +142,88 @@ onMounted(() => {
 </script>
 
 <template>
-  <div>
+  <div class="list-item-wrapper">
     <VListItem
+      :value="props.torrent?.torrent_info?.enclosure"
+      class="torrent-item"
+      :class="{ 'downloaded-item': downloaded.includes(torrent?.enclosure || '') }"
       @click="handleAddDownload"
-      :variant="downloaded.includes(torrent?.enclosure || '') ? 'outlined' : 'flat'"
     >
-      <template v-if="!showMoreTorrents" #prepend>
-        <VAvatar class="rounded" variant="flat" @click.stop="openTorrentDetail">
-          <VImg :src="siteIcon" />
-        </VAvatar>
+      <template v-slot:prepend>
+        <div class="site-wrapper">
+          <img v-if="siteIcon" :src="siteIcon" class="site-icon" />
+          <span v-else class="site-fallback">{{ torrent?.site_name?.substring(0, 1) }}</span>
+          <div class="site-name">{{ torrent?.site_name }}</div>
+          <span
+            v-if="torrent?.downloadvolumefactor !== 1 || torrent?.uploadvolumefactor !== 1"
+            class="free-tag"
+            :class="getPromotionClass(torrent?.downloadvolumefactor, torrent?.uploadvolumefactor)"
+            >{{ torrent?.volume_factor }}</span
+          >
+        </div>
       </template>
-      <VListItemTitle class="break-words overflow-visible whitespace-break-spaces">
-        {{ torrent?.title }}
-        <span class="text-green-700 ms-2 text-sm">↑{{ torrent?.seeders }}</span>
-        <span class="text-orange-700 ms-2 text-sm">↓{{ torrent?.peers }}</span>
+
+      <VListItemTitle class="item-content">
+        <div class="item-header">
+          <div class="media-info">
+            <span class="media-title">{{ media?.title ?? meta?.name }}</span>
+            <span v-if="meta?.season_episode" class="season-tag">{{ meta?.season_episode }}</span>
+          </div>
+        </div>
+
+        <div class="torrent-title" :title="torrent?.title">
+          {{ torrent?.title }}
+        </div>
+
+        <div class="torrent-description" :title="meta?.subtitle || torrent?.description || '暂无描述'">
+          {{ meta?.subtitle || torrent?.description || '暂无描述' }}
+        </div>
+
+        <div class="tags-container">
+          <div v-if="meta?.edition" class="resource-tag edition">{{ meta?.edition }}</div>
+          <div v-if="meta?.resource_pix" class="resource-tag resolution">{{ meta?.resource_pix }}</div>
+          <div v-if="meta?.video_encode" class="resource-tag codec">{{ meta?.video_encode }}</div>
+          <div v-if="meta?.resource_team" class="resource-tag team">{{ meta?.resource_team }}</div>
+          <div v-for="(label, index) in torrent?.labels" :key="index" class="resource-tag label">{{ label }}</div>
+          <div v-if="torrent?.hit_and_run" class="resource-tag hr">H&R</div>
+          <div v-if="torrent?.freedate_diff" class="resource-tag expire">{{ torrent?.freedate_diff }}</div>
+        </div>
       </VListItemTitle>
-      <VListItemSubtitle> 【{{ torrent?.site_name }}】{{ torrent?.description }} </VListItemSubtitle>
-      <div v-if="torrent?.labels" class="pt-2">
-        <VChip v-if="torrent?.hit_and_run" variant="elevated" size="small" class="me-1 mb-1 text-white bg-black">
-          H&R
-        </VChip>
-        <VChip v-if="torrent?.freedate_diff" variant="elevated" color="secondary" size="small" class="me-1 mb-1">
-          {{ torrent?.freedate_diff }}
-        </VChip>
-        <VChip
-          v-for="(label, index) in torrent?.labels"
-          :key="index"
-          variant="elevated"
-          size="small"
-          color="primary"
-          class="me-1 mb-1"
-        >
-          {{ label }}
-        </VChip>
-        <VChip v-if="meta?.edition" variant="elevated" size="small" class="me-1 mb-1 text-white bg-red-500">
-          {{ meta?.edition }}
-        </VChip>
-        <VChip v-if="meta?.resource_pix" variant="elevated" size="small" class="me-1 mb-1 text-white bg-red-500">
-          {{ meta?.resource_pix }}
-        </VChip>
-        <VChip v-if="meta?.video_encode" variant="elevated" size="small" class="me-1 mb-1 text-white bg-orange-500">
-          {{ meta?.video_encode }}
-        </VChip>
-        <VChip v-if="torrent?.size" variant="elevated" size="small" class="me-1 mb-1 text-white bg-yellow-500">
-          {{ formatFileSize(torrent?.size) }}
-        </VChip>
-        <VChip v-if="meta?.resource_team" variant="elevated" size="small" class="me-1 mb-1 text-white bg-cyan-500">
-          {{ meta?.resource_team }}
-        </VChip>
-        <VChip
-          v-if="torrent?.downloadvolumefactor !== 1 || torrent?.uploadvolumefactor !== 1"
-          :class="getVolumeFactorClass(torrent?.downloadvolumefactor, torrent?.uploadvolumefactor)"
-          variant="elevated"
-          size="small"
-          class="me-1 mb-1"
-        >
-          {{ torrent?.volume_factor }}
-        </VChip>
-      </div>
-      <template #append>
-        <div class="me-n3">
-          <IconBtn>
-            <VIcon icon="mdi-dots-vertical" />
-            <VMenu activator="parent" close-on-content-click>
-              <VList>
-                <VListItem variant="plain" @click="openTorrentDetail()">
-                  <template #prepend>
-                    <VIcon icon="mdi-information" />
-                  </template>
-                  <VListItemTitle>查看详情</VListItemTitle>
-                </VListItem>
-                <VListItem
-                  v-if="props.torrent?.torrent_info?.enclosure?.startsWith('http')"
-                  variant="plain"
-                  @click="downloadTorrentFile()"
-                >
-                  <template #prepend>
-                    <VIcon icon="mdi-download" />
-                  </template>
-                  <VListItemTitle>下载种子文件</VListItemTitle>
-                </VListItem>
-              </VList>
-            </VMenu>
-          </IconBtn>
+
+      <template v-slot:append>
+        <div class="item-actions">
+          <div class="torrent-stats">
+            <span v-if="torrent?.seeders" class="seed-info">
+              <VIcon size="small" color="success" icon="mdi-arrow-up"></VIcon>{{ torrent?.seeders }}
+            </span>
+            <span v-if="torrent?.peers" class="peer-info">
+              <VIcon size="small" color="warning" icon="mdi-arrow-down"></VIcon>{{ torrent?.peers }}
+            </span>
+          </div>
+
+          <div class="action-buttons">
+            <div v-if="torrent?.size" class="size-badge">
+              {{ formatFileSize(torrent.size) }}
+            </div>
+
+            <VBtn
+              density="comfortable"
+              variant="text"
+              color="primary"
+              icon="mdi-information-outline"
+              size="small"
+              class="detail-btn"
+              @click.stop="openTorrentDetail"
+            ></VBtn>
+          </div>
         </div>
       </template>
     </VListItem>
+
     <AddDownloadDialog
       v-if="addDownloadDialog"
       v-model="addDownloadDialog"
-      :title="`${media?.title_year || meta?.name} ${meta?.season_episode}`"
+      :title="`${media?.title_year || meta?.name} ${meta?.season_episode || ''}`"
       :media="media"
       :torrent="torrent"
       @done="addDownloadSuccess"
@@ -181,3 +232,292 @@ onMounted(() => {
     />
   </div>
 </template>
+
+<style scoped>
+.list-item-wrapper {
+  width: 100%;
+}
+
+.torrent-item {
+  border-radius: 12px;
+  transition: background-color 0.2s ease, transform 0.2s ease;
+  margin-bottom: 8px;
+  padding: 12px;
+  background-color: rgb(var(--v-theme-surface));
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+  box-shadow: none;
+}
+
+.torrent-item:hover {
+  background-color: rgba(var(--v-theme-primary), 0.04);
+  transform: translateY(-2px);
+  border-color: rgba(var(--v-theme-primary), 0.3);
+}
+
+.site-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 50px;
+  margin-right: 16px;
+}
+
+.site-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 2px;
+  margin-bottom: 4px;
+}
+
+.site-fallback {
+  width: 32px;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+  font-weight: 700;
+  color: rgba(var(--v-theme-on-surface), 0.8);
+  background-color: rgba(var(--v-theme-on-surface), 0.1);
+  border-radius: 2px;
+  margin-bottom: 4px;
+}
+
+.site-name {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: rgba(var(--v-theme-on-surface), 0.85);
+  text-align: center;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.free-tag {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  color: white;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 0.7rem;
+  font-weight: 700;
+  z-index: 1;
+}
+
+.free-discount {
+  background-color: #4caf50;
+  font-weight: 700;
+}
+
+.percent-discount {
+  background-color: #ff5722;
+}
+
+.upload-bonus {
+  background-color: #9c27b0;
+}
+
+.item-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+
+.item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.media-info {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.media-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: rgba(var(--v-theme-on-surface), 0.87);
+}
+
+.season-tag {
+  font-size: 0.9rem;
+  background-color: rgba(var(--v-theme-primary), 0.08);
+  color: rgb(var(--v-theme-primary));
+  padding: 2px 8px;
+  border-radius: 4px;
+  margin-left: 4px;
+  font-weight: 600;
+}
+
+.item-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 8px;
+}
+
+.torrent-stats {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.action-buttons {
+  display: flex;
+  align-items: center;
+}
+
+.seed-info {
+  font-size: 0.95rem;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-weight: 600;
+}
+
+.peer-info {
+  font-size: 0.95rem;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-weight: 600;
+}
+
+.size-badge {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: rgb(var(--v-theme-primary));
+  background-color: rgba(var(--v-theme-primary), 0.1);
+  padding: 2px 8px;
+  border-radius: 4px;
+  margin-right: 6px;
+}
+
+.torrent-title {
+  font-size: 0.9rem;
+  color: rgba(var(--v-theme-on-surface), 0.87);
+  margin-bottom: 6px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+.torrent-description {
+  font-size: 0.8rem;
+  color: rgba(var(--v-theme-on-surface), 0.65);
+  margin-bottom: 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
+.tags-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.resource-tag {
+  font-size: 0.8rem;
+  padding: 3px 8px;
+  border-radius: 4px;
+  color: white;
+  font-weight: 700;
+}
+
+.edition {
+  background-color: #f44336;
+}
+
+.resolution {
+  background-color: #e91e63;
+}
+
+.codec {
+  background-color: #ff9800;
+}
+
+.team {
+  background-color: #03a9f4;
+}
+
+.expire {
+  background-color: #9c27b0;
+}
+
+.label {
+  background-color: #3f51b5;
+}
+
+.hr {
+  background-color: #000000;
+}
+
+.detail-btn {
+  border-radius: 50%;
+}
+
+.downloaded-item {
+  border-left: 4px solid #4caf50;
+  opacity: 0.85;
+}
+
+.break-words {
+  word-wrap: break-word;
+  word-break: break-word;
+}
+
+.overflow-visible {
+  overflow: visible !important;
+}
+
+.whitespace-break-spaces {
+  white-space: normal !important;
+}
+
+@media (max-width: 600px) {
+  .torrent-item {
+    padding: 8px;
+  }
+
+  .media-title {
+    font-size: 0.95rem;
+  }
+
+  .site-icon,
+  .site-fallback {
+    width: 24px;
+    height: 24px;
+  }
+
+  .site-wrapper {
+    width: 40px;
+    margin-right: 10px;
+  }
+
+  .resource-tag {
+    font-size: 0.75rem;
+    padding: 2px 6px;
+  }
+
+  .action-buttons {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .torrent-description {
+    max-width: calc(100vw - 150px);
+  }
+}
+</style>
diff --git a/src/pages/resource.vue b/src/pages/resource.vue
index 1b70a47a..32d6e36c 100644
--- a/src/pages/resource.vue
+++ b/src/pages/resource.vue
@@ -37,6 +37,9 @@ const sites = route.query?.sites?.toString() ?? ''
 // 视图类型，从localStorage中读取
 const viewType = ref<string>(localStorage.getItem('MPTorrentsViewType') ?? 'card')
 
+// 视图切换中
+const isViewChanging = ref(false)
+
 // 数据列表
 const dataList = ref<Array<Context>>([])
 
@@ -77,9 +80,17 @@ function stopLoadingProgress() {
 }
 
 // 设置视图类型
-function setViewType(type: string) {
-  localStorage.setItem('MPTorrentsViewType', type)
-  viewType.value = type
+function changeViewType(newType: string) {
+  if (viewType.value !== newType) {
+    isViewChanging.value = true
+    viewType.value = newType
+    localStorage.setItem('MPTorrentsViewType', newType)
+
+    // 模拟视图切换的加载过程
+    setTimeout(() => {
+      isViewChanging.value = false
+    }, 600)
+  }
 }
 
 // 获取搜索列表数据
@@ -141,39 +152,378 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <LoadingBanner v-if="!isRefreshed" class="mt-12" :text="progressText" :progress="progressValue" />
-  <NoDataFound
-    v-if="dataList.length === 0 && isRefreshed"
-    :error-title="errorTitle"
-    :error-description="errorDescription"
-  />
-  <div v-if="dataList.length > 0">
-    <TorrentRowListView v-if="viewType === 'list'" :items="dataList" />
-    <TorrentCardListView v-else :items="dataList" />
-  </div>
-  <!-- 视图切换 -->
-  <div v-if="isRefreshed">
-    <VFab
-      v-if="viewType === 'list'"
-      icon="mdi-view-grid"
-      location="bottom"
-      size="x-large"
-      absolute
-      app
-      appear
-      @click="setViewType('card')"
-      :class="{ 'mb-12': appMode }"
-    />
-    <VFab
-      v-else
-      icon="mdi-view-list"
-      location="bottom"
-      size="x-large"
-      fixed
-      app
-      appear
-      @click="setViewType('list')"
-      :class="{ 'mb-12': appMode }"
-    />
+  <div>
+    <!-- 加载进度条 -->
+    <VFadeTransition>
+      <div v-if="progressValue > 0 && progressValue < 100" class="search-progress-container">
+        <div class="search-progress-card">
+          <div class="progress-header">
+            <VIcon icon="mdi-movie-search" color="primary" size="small" class="me-2" />
+            <span class="progress-title">{{ progressText }}</span>
+          </div>
+          <div class="progress-bar-container">
+            <div class="progress-bar-wrapper">
+              <div class="progress-bar" :style="{ width: `${progressValue}%` }"></div>
+            </div>
+            <div class="progress-percentage">{{ Math.ceil(progressValue) }}%</div>
+          </div>
+        </div>
+      </div>
+    </VFadeTransition>
+
+    <!-- 精简标题栏 -->
+    <div v-if="isRefreshed" class="search-header d-flex align-center mb-4">
+      <div class="search-info-container d-flex align-center flex-wrap">
+        <div class="search-title text-primary">资源搜索结果</div>
+        <div class="search-tags d-flex flex-wrap">
+          <VChip v-if="keyword" class="search-tag" color="primary" size="small" variant="flat">
+            关键词: {{ keyword }}
+          </VChip>
+          <VChip v-if="title" class="search-tag" color="primary" size="small" variant="flat"> 标题: {{ title }} </VChip>
+          <VChip v-if="year" class="search-tag" color="primary" size="small" variant="flat"> 年份: {{ year }} </VChip>
+          <VChip v-if="season" class="search-tag" color="primary" size="small" variant="flat"> 季: {{ season }} </VChip>
+        </div>
+      </div>
+
+      <VSpacer />
+
+      <!-- 重新设计的视图切换按钮 -->
+      <div class="view-toggle-container">
+        <div class="view-toggle-buttons">
+          <button class="view-toggle-btn" :class="{ active: viewType === 'card' }" @click="changeViewType('card')">
+            <VIcon icon="mdi-view-grid-outline" :color="viewType === 'card' ? 'primary' : undefined" />
+          </button>
+          <button class="view-toggle-btn" :class="{ active: viewType === 'row' }" @click="changeViewType('row')">
+            <VIcon icon="mdi-view-list-outline" :color="viewType === 'row' ? 'primary' : undefined" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 视图切换加载状态 -->
+    <VFadeTransition>
+      <div v-if="isRefreshed && isViewChanging" class="view-changing-container">
+        <div class="view-changing-content">
+          <div class="pulse-loader">
+            <div class="pulse-circle"></div>
+            <div class="pulse-circle"></div>
+            <div class="pulse-circle"></div>
+          </div>
+          <div class="view-changing-text">切换视图</div>
+        </div>
+      </div>
+    </VFadeTransition>
+
+    <!-- 搜索结果 -->
+    <div v-if="isRefreshed && dataList.length > 0 && !isViewChanging" class="search-results-container">
+      <!-- 卡片视图模式 -->
+      <VFadeTransition>
+        <TorrentCardListView v-if="viewType === 'card'" :items="dataList" />
+      </VFadeTransition>
+
+      <!-- 列表视图模式 -->
+      <VFadeTransition>
+        <TorrentRowListView v-if="viewType === 'row'" :items="dataList" />
+      </VFadeTransition>
+    </div>
+
+    <!-- 无数据显示 -->
+    <div v-else-if="isRefreshed && !isViewChanging" class="d-flex flex-column align-center justify-center py-8">
+      <NoDataFound
+        :title="errorTitle"
+        :description="errorDescription"
+        :image="require('@images/illustrations/no-results.png')"
+      />
+      <VBtn class="mt-4" color="primary" prepend-icon="mdi-magnify" to="/"> 返回首页 </VBtn>
+    </div>
+
+    <!-- 初始加载状态 -->
+    <div v-else-if="!isRefreshed" class="initial-loading-container">
+      <div class="initial-loading-content">
+        <div class="wave-loader">
+          <div class="wave-dot"></div>
+          <div class="wave-dot"></div>
+          <div class="wave-dot"></div>
+          <div class="wave-dot"></div>
+        </div>
+        <div class="initial-loading-text">搜索中</div>
+      </div>
+    </div>
   </div>
 </template>
+
+<style scoped>
+.search-progress-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  display: flex;
+  justify-content: center;
+  padding-top: 20px;
+}
+
+.search-progress-card {
+  max-width: 400px;
+  width: 90%;
+  background-color: rgb(var(--v-theme-surface));
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  border: 1px solid rgba(var(--v-theme-primary), 0.1);
+  backdrop-filter: blur(10px);
+}
+
+.progress-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.progress-title {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: rgb(var(--v-theme-on-surface));
+}
+
+.progress-bar-container {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.progress-bar-wrapper {
+  flex: 1;
+  height: 4px;
+  background-color: rgba(var(--v-theme-on-surface), 0.08);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.progress-bar {
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    rgb(var(--v-theme-primary)) 0%,
+    rgb(var(--v-theme-primary)) 70%,
+    rgba(var(--v-theme-primary), 0.8) 100%
+  );
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+.progress-percentage {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: rgb(var(--v-theme-primary));
+  min-width: 36px;
+  text-align: right;
+}
+
+/* 精简标题栏样式 */
+.search-header {
+  padding: 12px 16px;
+  background-color: rgb(var(--v-theme-surface));
+  border-radius: 12px;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.search-info-container {
+  gap: 12px;
+}
+
+.search-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.search-tags {
+  gap: 8px;
+}
+
+.search-tag {
+  font-size: 0.75rem;
+}
+
+/* 重新设计的视图切换按钮 */
+.view-toggle-container {
+  position: relative;
+}
+
+.view-toggle-buttons {
+  display: flex;
+  background-color: rgba(var(--v-theme-surface-variant), 0.1);
+  border-radius: 8px;
+  padding: 4px;
+}
+
+.view-toggle-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 36px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.view-toggle-btn.active {
+  background-color: rgb(var(--v-theme-surface));
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.view-toggle-btn:hover:not(.active) {
+  background-color: rgba(var(--v-theme-primary), 0.05);
+}
+
+/* 视图切换加载状态 */
+.view-changing-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(var(--v-theme-background), 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+  backdrop-filter: blur(8px);
+}
+
+.view-changing-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
+.pulse-loader {
+  display: flex;
+  gap: 8px;
+}
+
+.pulse-circle {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: rgb(var(--v-theme-primary));
+  animation: pulse 1.2s ease-in-out infinite;
+}
+
+.pulse-circle:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.pulse-circle:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 1;
+  }
+}
+
+.view-changing-text {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: rgb(var(--v-theme-primary));
+  letter-spacing: 1px;
+}
+
+/* 初始加载状态 */
+.initial-loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 50vh;
+}
+
+.initial-loading-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+
+.wave-loader {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 40px;
+}
+
+.wave-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: rgb(var(--v-theme-primary));
+  animation: wave 1.5s ease-in-out infinite;
+}
+
+.wave-dot:nth-child(1) {
+  animation-delay: 0s;
+}
+
+.wave-dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.wave-dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+.wave-dot:nth-child(4) {
+  animation-delay: 0.6s;
+}
+
+@keyframes wave {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-15px);
+  }
+}
+
+.initial-loading-text {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: rgb(var(--v-theme-primary));
+  letter-spacing: 1px;
+}
+
+.search-results-container {
+  min-height: 50vh;
+  position: relative;
+}
+
+@media (max-width: 600px) {
+  .search-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .search-info-container {
+    margin-bottom: 12px;
+    width: 100%;
+  }
+
+  .view-toggle-container {
+    align-self: flex-end;
+  }
+}
+</style>
diff --git a/src/views/torrent/TorrentCardListView.vue b/src/views/torrent/TorrentCardListView.vue
index 462dfba5..f3c9a9f9 100644
--- a/src/views/torrent/TorrentCardListView.vue
+++ b/src/views/torrent/TorrentCardListView.vue
@@ -31,6 +31,15 @@ const filterForm: Record<string, string[]> = reactive({
   resolution: [] as string[],
 })
 
+// 排序选项
+const sortField = ref('default')
+const sortTitles: Record<string, string> = {
+  default: '默认',
+  site: '站点',
+  size: '大小',
+  seeder: '做种数',
+}
+
 // 过滤项映射（保持中文标题）
 const filterTitles: Record<string, string> = {
   site: '站点',
@@ -70,6 +79,17 @@ const displayDataList = ref<Array<SearchTorrent>>([])
 // 分组后的数据列表
 const groupedDataList = ref<Map<string, Context[]>>()
 
+// 过滤菜单相关
+const filterMenuOpen = ref(false)
+const currentFilter = ref('site')
+const currentFilterTitle = computed(() => filterTitles[currentFilter.value])
+const currentFilterOptions = computed(() => {
+  if (currentFilter.value === 'season') {
+    return sortSeasonFilterOptions.value
+  }
+  return filterOptions[currentFilter.value]
+})
+
 // 初始化过滤选项
 function initOptions(data: Context) {
   const { torrent_info, meta_info } = data
@@ -226,8 +246,9 @@ onMounted(() => {
   groupedDataList.value = groupMap
 })
 
-// 只监听filterForm和groupedDataList的变化。因为displayDataList的变化不需要清空列表
-watch([filterForm, groupedDataList], filterData)
+// 修改watch监听，同时监听排序字段的变化
+watch([filterForm, groupedDataList, sortField], filterData)
+
 function filterData() {
   // 清空列表
   dataList = []
@@ -236,6 +257,9 @@ function filterData() {
   const match = (filter: Array<string>, value: string | undefined) =>
     filter.length === 0 || (value && filter.includes(value))
 
+  // 筛选数据
+  const filteredData: SearchTorrent[] = []
+
   groupedDataList.value?.forEach(value => {
     if (value.length > 0) {
       const matchData = value.filter(data => {
@@ -261,17 +285,115 @@ function filterData() {
       if (matchData.length > 0) {
         const firstData = cloneDeepWith(matchData[0]) as SearchTorrent
         if (matchData.length > 1) firstData.more = matchData.slice(1)
-
-        // 显示前20个，4行左右。
-        if (displayDataList.value.length < 20) {
-          displayDataList.value.push(firstData)
-        } else {
-          // 后续内容不显示，存在list里。loadMore的时候再加载。
-          dataList.push(firstData)
-        }
+        filteredData.push(firstData)
       }
     }
   })
+
+  // 排序数据
+  if (sortField.value !== 'default') {
+    filteredData.sort((a, b) => {
+      if (sortField.value === 'site') {
+        // 按站点名称排序
+        return (a.torrent_info.site_name || '').localeCompare(b.torrent_info.site_name || '')
+      } else if (sortField.value === 'size') {
+        // 按文件大小排序（降序）
+        return (Number(b.torrent_info.size) || 0) - (Number(a.torrent_info.size) || 0)
+      } else if (sortField.value === 'seeder') {
+        // 按做种数排序（降序）
+        return (Number(b.torrent_info.seeders) || 0) - (Number(a.torrent_info.seeders) || 0)
+      }
+      return 0
+    })
+  }
+
+  // 显示前20个
+  displayDataList.value = filteredData.slice(0, 20)
+  // 保存剩余数据
+  dataList = filteredData.slice(20)
+}
+
+// 给定过滤类型返回不同图标
+function getFilterIcon(key: string) {
+  const icons: Record<string, string> = {
+    site: 'mdi-server-network',
+    season: 'mdi-television-classic',
+    freeState: 'mdi-gift-outline',
+    resolution: 'mdi-monitor-screenshot',
+    videoCode: 'mdi-video-vintage',
+    edition: 'mdi-quality-high',
+    releaseGroup: 'mdi-account-group-outline',
+  }
+  return icons[key] || 'mdi-filter-variant'
+}
+
+// 开关筛选菜单
+function toggleFilterMenu(key: string) {
+  if (currentFilter.value === key && filterMenuOpen.value) {
+    filterMenuOpen.value = false
+  } else {
+    currentFilter.value = key
+    filterMenuOpen.value = true
+  }
+}
+
+// 切换过滤器选项
+function toggleFilter(key: string, value: string) {
+  const index = filterForm[key].indexOf(value)
+  if (index === -1) {
+    filterForm[key].push(value)
+  } else {
+    filterForm[key].splice(index, 1)
+  }
+}
+
+// 清除所有过滤条件
+function clearAllFilters() {
+  for (const key in filterForm) {
+    filterForm[key] = []
+  }
+}
+
+// 清除某个过滤项
+function clearFilter(key: string) {
+  filterForm[key] = []
+}
+
+// 全选某个过滤项
+function selectAll(key: string) {
+  if (key === 'season') {
+    filterForm[key] = [...sortSeasonFilterOptions.value]
+  } else {
+    filterForm[key] = [...filterOptions[key]]
+  }
+}
+
+// 计算已选择的过滤条件数量
+const getFilterCount = computed(() => {
+  let count = 0
+  for (const key in filterForm) {
+    count += filterForm[key].length
+  }
+  return count
+})
+
+// 计算已选择的过滤条件
+const getSelectedFilters = computed(() => {
+  const filters: Record<string, string[]> = {}
+  for (const key in filterForm) {
+    if (filterForm[key].length > 0) {
+      filters[key] = [...filterForm[key]]
+    }
+  }
+  return filters
+})
+
+// 移除单个过滤条件
+function removeFilter(key: string, value: string) {
+  const index = filterForm[key].indexOf(value)
+  if (index !== -1) {
+    filterForm[key].splice(index, 1)
+  }
 }
 
 function loadMore({ done }: { done: any }) {
@@ -282,34 +404,244 @@ function loadMore({ done }: { done: any }) {
 </script>
 
 <template>
-  <VCard class="bg-transparent mb-3 pt-2 shadow-none">
-    <VRow>
-      <VCol v-for="(options, key) in filterOptionsNotEmpty" :key="key" cols="6" md="">
-        <VSelect
-          v-if="key === 'season'"
-          v-model="filterForm[key]"
-          :items="sortSeasonFilterOptions"
-          size="small"
-          density="compact"
-          chips
-          :label="filterTitles[key]"
-          multiple
-          clearable
-        />
-        <VSelect
-          v-else
-          v-model="filterForm[key]"
-          :items="options"
-          size="small"
-          density="compact"
-          chips
-          :label="filterTitles[key]"
-          multiple
-          clearable
-        />
-      </VCol>
-    </VRow>
-  </VCard>
+  <div class="search-header mb-4 d-none d-sm-flex">
+    <!-- 页面头部和筛选栏 -->
+    <div class="view-header bg-surface rounded-xl">
+      <div class="d-flex align-center flex-wrap pa-3">
+        <VChip color="primary" variant="elevated" size="small" class="search-count me-3" prepend-icon="mdi-magnify">
+          {{ props.items?.length || 0 }} 个资源
+        </VChip>
+
+        <!-- 排序选择 -->
+        <div class="sort-container me-4">
+          <VSelect
+            v-model="sortField"
+            :items="Object.entries(sortTitles).map(([key, title]) => ({ title, value: key }))"
+            item-title="title"
+            item-value="value"
+            variant="plain"
+            density="compact"
+            hide-details
+            class="sort-select"
+            prepend-icon="mdi-sort"
+          ></VSelect>
+        </div>
+
+        <!-- 筛选按钮组 -->
+        <div class="filter-bar">
+          <VBtn
+            v-for="(title, key) in filterTitles"
+            :key="key"
+            variant="tonal"
+            size="small"
+            :color="filterForm[key].length > 0 ? 'primary' : undefined"
+            :prepend-icon="getFilterIcon(key)"
+            @click="toggleFilterMenu(key)"
+            class="filter-btn"
+            rounded="pill"
+          >
+            {{ title }}
+            <VChip v-if="filterForm[key].length > 0" size="x-small" color="primary" class="ms-1" variant="elevated">{{
+              filterForm[key].length
+            }}</VChip>
+          </VBtn>
+
+          <!-- 清除全部筛选按钮 -->
+          <VBtn
+            v-if="getFilterCount > 0"
+            variant="tonal"
+            size="small"
+            color="error"
+            @click="clearAllFilters"
+            class="filter-btn"
+            prepend-icon="mdi-close-circle-outline"
+            rounded="pill"
+          >
+            清除筛选
+          </VBtn>
+        </div>
+      </div>
+
+      <!-- 已选择的过滤项显示 -->
+      <div v-if="getFilterCount > 0" class="selected-filters pa-3 pt-0">
+        <div class="d-flex flex-wrap align-center">
+          <template v-for="(values, key) in getSelectedFilters" :key="key">
+            <VChip
+              v-for="(value, index) in values"
+              :key="`${key}-${index}`"
+              color="primary"
+              size="small"
+              closable
+              variant="elevated"
+              class="me-1 mb-1 filter-tag"
+              @click:close="removeFilter(key, value)"
+            >
+              <VIcon size="x-small" :icon="getFilterIcon(key)" class="me-1"></VIcon>
+              <strong>{{ filterTitles[key] }}:</strong> {{ value }}
+            </VChip>
+          </template>
+        </div>
+      </div>
+    </div>
+
+    <!-- 筛选菜单 -->
+    <VDialog v-model="filterMenuOpen" max-width="400px" location="center">
+      <VCard>
+        <VCardTitle class="py-2 d-flex align-center">
+          <VIcon :icon="getFilterIcon(currentFilter)" class="me-2"></VIcon>
+          <span>{{ currentFilterTitle }} 筛选</span>
+          <VSpacer />
+          <VBtn
+            v-if="filterForm[currentFilter].length > 0"
+            variant="text"
+            size="small"
+            color="error"
+            @click="clearFilter(currentFilter)"
+          >
+            清除
+          </VBtn>
+          <VBtn variant="text" size="small" color="primary" @click="selectAll(currentFilter)"> 全选 </VBtn>
+        </VCardTitle>
+
+        <VDivider />
+
+        <VCardText class="filter-menu-content pt-4">
+          <VChipGroup v-model="filterForm[currentFilter]" column multiple class="filter-options">
+            <VChip
+              v-for="option in currentFilterOptions"
+              :key="option"
+              :value="option"
+              filter
+              variant="elevated"
+              class="ma-1 filter-chip"
+              size="small"
+            >
+              {{ option }}
+            </VChip>
+          </VChipGroup>
+        </VCardText>
+
+        <VCardActions>
+          <VSpacer />
+          <VBtn variant="elevated" color="primary" @click="filterMenuOpen = false"> 确定 </VBtn>
+        </VCardActions>
+      </VCard>
+    </VDialog>
+  </div>
+
+  <div class="d-block d-sm-none">
+    <!-- 移动端头部 -->
+    <div class="view-header mb-3">
+      <div class="d-flex align-center flex-wrap pa-3">
+        <div class="d-flex align-center w-100 mb-2">
+          <VChip
+            color="primary"
+            variant="elevated"
+            size="small"
+            class="search-count me-auto"
+            prepend-icon="mdi-magnify"
+          >
+            {{ props.items?.length || 0 }} 个资源
+          </VChip>
+
+          <!-- 排序选择 -->
+          <VSelect
+            v-model="sortField"
+            :items="Object.entries(sortTitles).map(([key, title]) => ({ title, value: key }))"
+            item-title="title"
+            item-value="value"
+            variant="outlined"
+            density="compact"
+            hide-details
+            class="mobile-sort-select"
+            prepend-icon="mdi-sort"
+          ></VSelect>
+        </div>
+
+        <!-- 筛选图标按钮区域 -->
+        <div class="filter-buttons-grid w-100">
+          <VBtn variant="text" color="primary" class="filter-btn-mobile" @click="toggleFilterMenu('site')">
+            <VIcon icon="mdi-server" class="filter-icon"></VIcon>
+            <span class="filter-label">站点</span>
+            <VBadge
+              v-if="filterForm.site.length > 0"
+              :content="filterForm.site.length"
+              color="primary"
+              location="top end"
+              offset-x="2"
+              offset-y="2"
+            ></VBadge>
+          </VBtn>
+
+          <VBtn variant="text" color="primary" class="filter-btn-mobile" @click="toggleFilterMenu('season')">
+            <VIcon icon="mdi-movie-open" class="filter-icon"></VIcon>
+            <span class="filter-label">季集</span>
+            <VBadge
+              v-if="filterForm.season.length > 0"
+              :content="filterForm.season.length"
+              color="primary"
+              location="top end"
+              offset-x="2"
+              offset-y="2"
+            ></VBadge>
+          </VBtn>
+
+          <VBtn variant="text" color="primary" class="filter-btn-mobile" @click="toggleFilterMenu('freeState')">
+            <VIcon icon="mdi-gift" class="filter-icon"></VIcon>
+            <span class="filter-label">促销状态</span>
+            <VBadge
+              v-if="filterForm.freeState.length > 0"
+              :content="filterForm.freeState.length"
+              color="primary"
+              location="top end"
+              offset-x="2"
+              offset-y="2"
+            ></VBadge>
+          </VBtn>
+
+          <VBtn variant="text" color="primary" class="filter-btn-mobile" @click="toggleFilterMenu('resolution')">
+            <VIcon icon="mdi-video" class="filter-icon"></VIcon>
+            <span class="filter-label">视频质量</span>
+            <VBadge
+              v-if="filterForm.resolution.length > 0"
+              :content="filterForm.resolution.length"
+              color="primary"
+              location="top end"
+              offset-x="2"
+              offset-y="2"
+            ></VBadge>
+          </VBtn>
+
+          <VBtn variant="text" color="primary" class="filter-btn-mobile" @click="toggleFilterMenu('videoCode')">
+            <VIcon icon="mdi-quality-high" class="filter-icon"></VIcon>
+            <span class="filter-label">视频编码</span>
+            <VBadge
+              v-if="filterForm.videoCode.length > 0"
+              :content="filterForm.videoCode.length"
+              color="primary"
+              location="top end"
+              offset-x="2"
+              offset-y="2"
+            ></VBadge>
+          </VBtn>
+
+          <VBtn variant="text" color="primary" class="filter-btn-mobile" @click="toggleFilterMenu('releaseGroup')">
+            <VIcon icon="mdi-account-group" class="filter-icon"></VIcon>
+            <span class="filter-label">制作组</span>
+            <VBadge
+              v-if="filterForm.releaseGroup.length > 0"
+              :content="filterForm.releaseGroup.length"
+              color="primary"
+              location="top end"
+              offset-x="2"
+              offset-y="2"
+            ></VBadge>
+          </VBtn>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <VInfiniteScroll mode="intersect" side="end" :items="displayDataList" class="overflow-hidden" @load="loadMore">
     <template #loading />
     <template #empty />
@@ -323,3 +655,160 @@ function loadMore({ done }: { done: any }) {
     </div>
   </VInfiniteScroll>
 </template>
+
+<style scoped>
+.search-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: rgba(var(--v-theme-background), 0.95);
+  backdrop-filter: blur(10px);
+}
+
+.view-header {
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+  overflow: hidden;
+}
+
+.sort-container {
+  border-right: 1px solid rgba(var(--v-theme-on-surface), 0.12);
+  padding-right: 12px;
+}
+
+.filter-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.filter-btn {
+  min-width: 0;
+  transition: transform 0.2s;
+}
+
+.filter-btn:hover {
+  transform: translateY(-2px);
+}
+
+.sort-select {
+  font-size: 0.9rem;
+  min-width: 120px;
+  max-width: 160px;
+  font-weight: 500;
+}
+
+.sort-select :deep(.v-field__input) {
+  padding-top: 5px;
+  padding-bottom: 5px;
+  min-height: 36px;
+}
+
+.selected-filters {
+  background-color: rgba(var(--v-theme-surface-variant), 0.08);
+  border-radius: 0 0 12px 12px;
+  overflow: hidden;
+}
+
+.filter-menu-content {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.filter-options {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.filter-chip {
+  margin: 4px;
+  transition: all 0.2s ease;
+}
+
+.filter-chip:hover {
+  transform: translateY(-2px);
+}
+
+.filter-tag {
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+.filter-tag:hover {
+  transform: translateY(-2px);
+}
+
+.search-count {
+  font-weight: 600;
+}
+
+.grid-torrent-card {
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  background-color: rgb(var(--v-theme-surface));
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+  border-radius: 12px;
+  padding: 12px;
+}
+
+@media (max-width: 600px) {
+  .sort-select {
+    min-width: 100px;
+    max-width: 120px;
+  }
+
+  .filter-btn {
+    font-size: 0.75rem;
+  }
+
+  .sort-container {
+    border-right: none;
+    padding-right: 0;
+    margin-bottom: 8px;
+    width: 100%;
+  }
+
+  .sort-select {
+    width: 100%;
+  }
+
+  .filter-bar {
+    width: 100%;
+    margin-top: 8px;
+  }
+}
+
+.mobile-sort-select {
+  min-width: 130px;
+  max-width: 150px;
+  font-size: 0.9rem;
+}
+
+.filter-buttons-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 6px;
+}
+
+.filter-btn-mobile {
+  height: auto;
+  min-height: 64px;
+  padding: 8px 0;
+  background-color: rgba(var(--v-theme-surface), 1);
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+}
+
+.filter-icon {
+  margin-bottom: 4px;
+  font-size: 22px;
+}
+
+.filter-label {
+  font-size: 0.8rem;
+  text-align: center;
+}
+</style>
diff --git a/src/views/torrent/TorrentRowListView.vue b/src/views/torrent/TorrentRowListView.vue
index 1bb8f8f2..bf0a87b9 100644
--- a/src/views/torrent/TorrentRowListView.vue
+++ b/src/views/torrent/TorrentRowListView.vue
@@ -204,6 +204,41 @@ const sortField = ref('default')
 // 数据列表
 const dataList = ref<Array<Context>>([])
 
+// 计算已选择的过滤条件数量
+const getFilterCount = computed(() => {
+  let count = 0
+  for (const key in filterForm) {
+    count += filterForm[key].length
+  }
+  return count
+})
+
+// 计算已选择的过滤条件
+const getSelectedFilters = computed(() => {
+  const filters: Record<string, string[]> = {}
+  for (const key in filterForm) {
+    if (filterForm[key].length > 0) {
+      filters[key] = [...filterForm[key]]
+    }
+  }
+  return filters
+})
+
+// 移除单个过滤条件
+function removeFilter(key: string, value: string) {
+  const index = filterForm[key].indexOf(value)
+  if (index !== -1) {
+    filterForm[key].splice(index, 1)
+  }
+}
+
+// 清除所有过滤条件
+function clearAllFilters() {
+  for (const key in filterForm) {
+    filterForm[key] = []
+  }
+}
+
 // 初始化过滤选项
 function initOptions(data: Context) {
   const { torrent_info, meta_info } = data
@@ -242,169 +277,523 @@ watchEffect(() => {
   const match = (filter: Array<string>, value: string | undefined) =>
     filter.length === 0 || (value && filter.includes(value))
 
-  props.items?.forEach(data => {
-    const { meta_info, torrent_info } = data
-    if (
-      // 站点过滤
-      match(filterForm.site, torrent_info.site_name) &&
-      // 促销状态过滤
-      match(filterForm.freeState, torrent_info.volume_factor) &&
-      // 季过滤
-      match(filterForm.season, meta_info.season_episode) &&
-      // 制作组过滤
-      match(filterForm.releaseGroup, meta_info.resource_team) &&
-      // 视频编码过滤
-      match(filterForm.videoCode, meta_info.video_encode) &&
-      // 分辨率过滤
-      match(filterForm.resolution, meta_info.resource_pix) &&
-      // 质量过滤
-      match(filterForm.edition, meta_info.edition)
-    )
-      dataList.value.push(data)
-  })
+  // 先收集所有过滤选项，再过滤数据
+  if (props.items?.length) {
+    // 首先收集所有过滤选项
+    props.items.forEach(data => {
+      const { meta_info, torrent_info } = data
+      initOptions(data)
+    })
+
+    // 然后根据过滤条件筛选数据
+    props.items.forEach(data => {
+      const { meta_info, torrent_info } = data
+      if (
+        // 站点过滤
+        match(filterForm.site, torrent_info.site_name) &&
+        // 促销状态过滤
+        match(filterForm.freeState, torrent_info.volume_factor) &&
+        // 季过滤
+        match(filterForm.season, meta_info.season_episode) &&
+        // 制作组过滤
+        match(filterForm.releaseGroup, meta_info.resource_team) &&
+        // 视频编码过滤
+        match(filterForm.videoCode, meta_info.video_encode) &&
+        // 分辨率过滤
+        match(filterForm.resolution, meta_info.resource_pix) &&
+        // 质量过滤
+        match(filterForm.edition, meta_info.edition)
+      ) {
+        dataList.value.push(data)
+      }
+    })
+  }
 })
 
-// 初始化过滤选项
-onMounted(() => {
-  props.items?.forEach(initOptions)
+// 切换过滤器选项
+function toggleFilter(key: string, value: string) {
+  const index = filterForm[key].indexOf(value)
+  if (index === -1) {
+    filterForm[key].push(value)
+  } else {
+    filterForm[key].splice(index, 1)
+  }
+}
+
+// 过滤菜单相关
+const filterMenuOpen = ref(false)
+const filterMenuAnchor = ref(null)
+const currentFilter = ref('site')
+const currentFilterTitle = computed(() => filterTitles[currentFilter.value])
+const currentFilterOptions = computed(() => {
+  if (currentFilter.value === 'season') {
+    return sortSeasonFilterOptions.value
+  }
+  return filterOptions[currentFilter.value]
 })
+
+// 打开过滤菜单
+function openFilterMenu(key: string) {
+  currentFilter.value = key
+  filterMenuOpen.value = true
+}
+
+// 给定过滤类型返回不同图标
+function getFilterIcon(key: string) {
+  const icons: Record<string, string> = {
+    site: 'mdi-server-network',
+    season: 'mdi-television-classic',
+    freeState: 'mdi-gift-outline',
+    resolution: 'mdi-monitor-screenshot',
+    videoCode: 'mdi-video-vintage',
+    edition: 'mdi-quality-high',
+    releaseGroup: 'mdi-account-group-outline',
+  }
+  return icons[key] || 'mdi-filter-variant'
+}
+
+// 全选某个过滤项
+function selectAll(key: string) {
+  if (key === 'season') {
+    filterForm[key] = [...sortSeasonFilterOptions.value]
+  } else {
+    filterForm[key] = [...filterOptions[key]]
+  }
+}
+
+// 清除某个过滤项
+function clearFilter(key: string) {
+  filterForm[key] = []
+}
+
+// 添加toggleFilterMenu函数
+function toggleFilterMenu(key: string) {
+  if (currentFilter.value === key && filterMenuOpen.value) {
+    filterMenuOpen.value = false
+  } else {
+    currentFilter.value = key
+    filterMenuOpen.value = true
+  }
+}
 </script>
 
 <template>
-  <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-if="key === 'season'" v-model="filterForm[key]" column multiple>
-              <VChip
-                v-for="option in sortSeasonFilterOptions"
-                :key="option"
-                :color="filterForm[key].includes(option) ? 'primary' : ''"
-                filter
-                variant="outlined"
-                :value="option"
-              >
-                {{ option }}
-              </VChip>
-            </VChipGroup>
-            <VChipGroup v-else 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>
+  <div class="torrent-view">
+    <!-- PC端页面头部和筛选栏 -->
+    <div class="view-header mb-3 d-none d-sm-block">
+      <div class="d-flex align-center flex-wrap">
+        <VChip color="primary" variant="flat" size="small" class="search-count me-3" prepend-icon="mdi-magnify">
+          {{ dataList.length }} 个资源
+        </VChip>
 
-    <!-- 过滤弹窗 -->
-    <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]"
+        <div class="filter-bar">
+          <!-- 排序选择 -->
+          <VSelect
+            v-model="sortField"
+            :items="Object.entries(sortTitles).map(([key, title]) => ({ title, value: key }))"
+            item-title="title"
+            item-value="value"
+            variant="plain"
+            density="compact"
+            hide-details
+            class="sort-select"
           >
-            <VChipGroup v-if="key === 'season'" v-model="filterForm[key]" column multiple>
-              <VChip
-                v-for="option in sortSeasonFilterOptions"
-                :key="option"
-                :color="filterForm[key].includes(option) ? 'primary' : ''"
-                filter
-                variant="outlined"
-                :value="option"
-              >
-                {{ option }}
-              </VChip>
-            </VChipGroup>
-            <VChipGroup v-else 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>
+            <template v-slot:prepend>
+              <VIcon size="small" icon="mdi-sort"></VIcon>
+            </template>
+          </VSelect>
+
+          <div class="filter-divider"></div>
+
+          <!-- 筛选按钮 -->
+          <VBtn
+            v-for="(title, key) in filterTitles"
+            :key="key"
+            variant="tonal"
+            size="small"
+            :color="filterForm[key].length > 0 ? 'primary' : undefined"
+            :prepend-icon="getFilterIcon(key)"
+            @click="toggleFilterMenu(key)"
+            class="filter-btn"
+            rounded="pill"
+          >
+            {{ title }}
+            <VChip v-if="filterForm[key].length > 0" size="x-small" color="primary" class="ms-1" variant="elevated">{{
+              filterForm[key].length
+            }}</VChip>
+          </VBtn>
+
+          <!-- 清除全部筛选按钮 -->
+          <VBtn
+            v-if="getFilterCount > 0"
+            variant="text"
+            size="small"
+            color="error"
+            @click="clearAllFilters"
+            class="filter-btn"
+            prepend-icon="mdi-close-circle-outline"
+          >
+            清除筛选
+          </VBtn>
+        </div>
+      </div>
+    </div>
+
+    <!-- 移动端头部和筛选区域 -->
+    <div class="d-block d-sm-none">
+      <!-- 移动端头部 -->
+      <div class="view-header mb-3">
+        <div class="d-flex align-center flex-wrap pa-3">
+          <div class="d-flex align-center w-100 mb-2">
+            <VChip
+              color="primary"
+              variant="elevated"
+              size="small"
+              class="search-count me-auto"
+              prepend-icon="mdi-magnify"
+            >
+              {{ props.items?.length || 0 }} 个资源
+            </VChip>
+
+            <!-- 排序选择 -->
+            <VSelect
+              v-model="sortField"
+              :items="Object.entries(sortTitles).map(([key, title]) => ({ title, value: key }))"
+              item-title="title"
+              item-value="value"
+              variant="outlined"
+              density="compact"
+              hide-details
+              class="mobile-sort-select"
+              prepend-icon="mdi-sort"
+            ></VSelect>
+          </div>
+
+          <!-- 筛选图标按钮区域 -->
+          <div class="filter-buttons-grid w-100">
+            <VBtn variant="text" color="primary" class="filter-btn-mobile" @click="toggleFilterMenu('site')">
+              <VIcon icon="mdi-server" class="filter-icon"></VIcon>
+              <span class="filter-label">站点</span>
+              <VBadge
+                v-if="filterForm.site.length > 0"
+                :content="filterForm.site.length"
+                color="primary"
+                location="top end"
+                offset-x="2"
+                offset-y="2"
+              ></VBadge>
+            </VBtn>
+
+            <VBtn variant="text" color="primary" class="filter-btn-mobile" @click="toggleFilterMenu('season')">
+              <VIcon icon="mdi-movie-open" class="filter-icon"></VIcon>
+              <span class="filter-label">季集</span>
+              <VBadge
+                v-if="filterForm.season.length > 0"
+                :content="filterForm.season.length"
+                color="primary"
+                location="top end"
+                offset-x="2"
+                offset-y="2"
+              ></VBadge>
+            </VBtn>
+
+            <VBtn variant="text" color="primary" class="filter-btn-mobile" @click="toggleFilterMenu('freeState')">
+              <VIcon icon="mdi-gift" class="filter-icon"></VIcon>
+              <span class="filter-label">促销状态</span>
+              <VBadge
+                v-if="filterForm.freeState.length > 0"
+                :content="filterForm.freeState.length"
+                color="primary"
+                location="top end"
+                offset-x="2"
+                offset-y="2"
+              ></VBadge>
+            </VBtn>
+
+            <VBtn variant="text" color="primary" class="filter-btn-mobile" @click="toggleFilterMenu('resolution')">
+              <VIcon icon="mdi-video" class="filter-icon"></VIcon>
+              <span class="filter-label">视频质量</span>
+              <VBadge
+                v-if="filterForm.resolution.length > 0"
+                :content="filterForm.resolution.length"
+                color="primary"
+                location="top end"
+                offset-x="2"
+                offset-y="2"
+              ></VBadge>
+            </VBtn>
+
+            <VBtn variant="text" color="primary" class="filter-btn-mobile" @click="toggleFilterMenu('videoCode')">
+              <VIcon icon="mdi-quality-high" class="filter-icon"></VIcon>
+              <span class="filter-label">视频编码</span>
+              <VBadge
+                v-if="filterForm.videoCode.length > 0"
+                :content="filterForm.videoCode.length"
+                color="primary"
+                location="top end"
+                offset-x="2"
+                offset-y="2"
+              ></VBadge>
+            </VBtn>
+
+            <VBtn variant="text" color="primary" class="filter-btn-mobile" @click="toggleFilterMenu('releaseGroup')">
+              <VIcon icon="mdi-account-group" class="filter-icon"></VIcon>
+              <span class="filter-label">制作组</span>
+              <VBadge
+                v-if="filterForm.releaseGroup.length > 0"
+                :content="filterForm.releaseGroup.length"
+                color="primary"
+                location="top end"
+                offset-x="2"
+                offset-y="2"
+              ></VBadge>
+            </VBtn>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 已选择的过滤项显示 -->
+    <div v-if="getFilterCount > 0" class="selected-filters mb-3">
+      <div class="d-flex flex-wrap align-center">
+        <template v-for="(values, key) in getSelectedFilters" :key="key">
+          <VChip
+            v-for="(value, index) in values"
+            :key="`${key}-${index}`"
+            color="primary"
+            size="small"
+            closable
+            variant="elevated"
+            class="me-1 mb-1 filter-tag"
+            @click:close="removeFilter(key, value)"
+          >
+            <VIcon size="x-small" :icon="getFilterIcon(key)" class="me-1"></VIcon>
+            <strong>{{ filterTitles[key] }}:</strong> {{ value }}
+          </VChip>
+        </template>
+      </div>
+    </div>
+
+    <!-- 筛选菜单 -->
+    <VDialog v-model="filterMenuOpen" max-width="400px" location="center">
+      <VCard>
+        <VCardTitle class="py-2 d-flex align-center">
+          <VIcon :icon="getFilterIcon(currentFilter)" class="me-2"></VIcon>
+          <span>{{ currentFilterTitle }} 筛选</span>
+          <VSpacer />
+          <VBtn
+            v-if="filterForm[currentFilter].length > 0"
+            variant="text"
+            size="small"
+            color="error"
+            @click="clearFilter(currentFilter)"
+          >
+            清除
+          </VBtn>
+          <VBtn variant="text" size="small" color="primary" @click="selectAll(currentFilter)"> 全选 </VBtn>
+        </VCardTitle>
+
+        <VDivider />
+
+        <VCardText class="filter-menu-content pt-4">
+          <VChipGroup v-model="filterForm[currentFilter]" column multiple class="filter-options">
+            <VChip
+              v-for="option in currentFilterOptions"
+              :key="option"
+              :value="option"
+              filter
+              variant="elevated"
+              class="ma-1 filter-chip"
+              size="small"
+            >
+              {{ option }}
+            </VChip>
+          </VChipGroup>
+        </VCardText>
+
+        <VCardActions>
+          <VSpacer />
+          <VBtn variant="elevated" color="primary" @click="filterMenuOpen = false"> 确定 </VBtn>
+        </VCardActions>
       </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 class="resource-list-container">
+      <!-- 无结果时显示 -->
+      <div v-if="dataList.length === 0" class="no-results">
+        <VIcon icon="mdi-file-search-outline" size="64" color="grey-lighten-1" />
+        <div class="text-h6 text-grey mt-4">暂无符合条件的资源</div>
+      </div>
+
+      <!-- 资源列表 -->
+      <div v-else class="resource-list">
+        <div v-for="(item, index) in dataList" :key="`${item.torrent_info?.enclosure || ''}-${index}`">
+          <TorrentItem :torrent="item" />
+        </div>
+      </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+.torrent-view {
+  position: relative;
+  height: 100%;
+}
+
+.view-header {
+  padding: 12px 16px;
+  background-color: rgb(var(--v-theme-surface));
+  border-radius: 12px;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+  box-shadow: none;
+  margin-bottom: 16px;
+  overflow: hidden;
+}
+
+.search-count {
+  font-weight: 500;
+}
+
+.filter-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-items: center;
+}
+
+.filter-divider {
+  width: 1px;
+  height: 24px;
+  background-color: rgba(var(--v-theme-on-surface), 0.12);
+  margin: 0 8px;
+}
+
+.filter-btn {
+  min-width: 0;
+  transition: transform 0.2s;
+}
+
+.filter-btn:hover {
+  transform: translateY(-2px);
+}
+
+.sort-select {
+  font-size: 0.875rem;
+  min-width: 100px;
+  max-width: 120px;
+}
+
+.filter-menu-content {
+  max-height: 50vh;
+  overflow-y: auto;
+}
+
+.filter-options {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.filter-chip {
+  margin: 4px;
+  transition: all 0.2s ease;
+}
+
+.filter-chip:hover {
+  transform: translateY(-2px);
+}
+
+.filter-tag {
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+.filter-tag:hover {
+  transform: translateY(-2px);
+}
+
+.selected-filters {
+  background-color: rgba(var(--v-theme-surface-variant), 0.08);
+  border-radius: 8px;
+  padding: 8px 12px;
+  margin-bottom: 16px;
+  overflow: hidden;
+}
+
+.resource-list-container {
+  height: calc(100vh - 10rem - env(safe-area-inset-bottom));
+  overflow-y: auto;
+  position: relative;
+  border-radius: 12px;
+  background-color: rgb(var(--v-theme-surface));
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+  padding: 8px;
+  scrollbar-width: thin;
+}
+
+.resource-list-container::-webkit-scrollbar {
+  width: 6px;
+}
+
+.resource-list-container::-webkit-scrollbar-thumb {
+  background-color: rgba(var(--v-theme-on-surface), 0.2);
+  border-radius: 3px;
+}
+
+.resource-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.no-results {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 300px;
+}
+
+.mobile-sort-select {
+  min-width: 130px;
+  max-width: 150px;
+  font-size: 0.9rem;
+}
+
+.filter-buttons-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 6px;
+}
+
+.filter-btn-mobile {
+  height: auto;
+  min-height: 64px;
+  padding: 8px 0;
+  background-color: rgba(var(--v-theme-surface), 1);
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+}
+
+.filter-icon {
+  margin-bottom: 4px;
+  font-size: 22px;
+}
+
+.filter-label {
+  font-size: 0.8rem;
+  text-align: center;
+}
+
+@media (max-width: 600px) {
+  .resource-list-container {
+    height: calc(100vh - 18rem - env(safe-area-inset-bottom));
+  }
+}
+</style>