feat 资源页面视图切换

src/components/cards/SiteCard.vue

@@ -654,7 +654,7 @@ onMounted(() => {
                       <template #prepend>
                         <VIcon icon="mdi-download" />
                       </template>
-                      <VListItemTitle>下载种子</VListItemTitle>
+                      <VListItemTitle>下载种子文件</VListItemTitle>
                     </VListItem>
                   </VList>
                 </VMenu>

src/components/cards/TorrentCard.vue

@@ -176,7 +176,7 @@ onMounted(() => {
                   <template #prepend>
                     <VIcon icon="mdi-download" />
                   </template>
-                  <VListItemTitle>下载种子</VListItemTitle>
+                  <VListItemTitle>下载种子文件</VListItemTitle>
                 </VListItem>
               </VList>
             </VMenu>

src/components/cards/TorrentItem.vue

@@ -0,0 +1,249 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import { useToast } from 'vue-toast-notification'
+import { useConfirm } from 'vuetify-use-dialog'
+import { formatFileSize } from '@/@core/utils/formatters'
+import api from '@/api'
+import { doneNProgress, startNProgress } from '@/api/nprogress'
+import type { Context } from '@/api/types'
+
+// 输入参数
+const props = defineProps({
+  torrent: Object as PropType<Context>,
+})
+
+// 提示框
+const $toast = useToast()
+
+// 确认框
+const createConfirm = useConfirm()
+
+// 更多来源界面
+const showMoreTorrents = ref(false)
+
+// 种子信息
+const torrent = ref(props.torrent?.torrent_info)
+
+// 媒体信息
+const media = ref(props.torrent?.media_info)
+
+// 识别元数据
+const meta = ref(props.torrent?.meta_info)
+
+// 站点图标
+const siteIcon = ref('')
+
+// 查询站点图标
+async function getSiteIcon() {
+  try {
+    siteIcon.value = (await api.get(`site/icon/${torrent?.value?.site}`)).data.icon
+  }
+  catch (error) {
+    console.error(error)
+  }
+}
+
+// 询问并添加下载
+async function handleAddDownload(_site: any = undefined,
+  _media: any = undefined,
+  _torrent: any = undefined) {
+  if (!_media || !_torrent || !_site) {
+    _site = torrent.value?.site_name
+    _media = media.value
+    _torrent = torrent.value
+  }
+
+  const isConfirmed = await createConfirm({
+    title: '确认',
+    content: `是否确认下载【${_site}】${_torrent?.title} ?`,
+    confirmationText: '确认',
+    cancellationText: '取消',
+    dialogProps: {
+      maxWidth: '50rem',
+    },
+  })
+
+  if (!isConfirmed)
+    return
+
+  addDownload(_media, _torrent)
+}
+
+// 添加下载
+async function addDownload(_media: any, _torrent: any) {
+  startNProgress()
+  try {
+    const result: { [key: string]: any } = await api.post('download/', {
+      media_in: _media,
+      torrent_in: _torrent,
+    })
+
+    if (result.success) {
+      // 添加下载成功
+      $toast.success(`${_torrent?.site_name} ${_torrent?.title} 添加下载成功！`)
+    }
+    else {
+      // 添加下载失败
+      $toast.error(`${_torrent?.site_name} ${_torrent?.title} 添加下载失败！`)
+    }
+  }
+  catch (error) {
+    console.error(error)
+  }
+  doneNProgress()
+}
+
+// 打开种子详情页面
+function openTorrentDetail() {
+  window.open(torrent.value?.page_url, '_blank')
+}
+
+// 下载种子文件
+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'
+}
+
+// 装载时查询站点图标
+onMounted(() => {
+  getSiteIcon()
+})
+</script>
+
+<template>
+  <VListItem @click="handleAddDownload">
+    <template
+      v-if="!showMoreTorrents"
+      #prepend
+    >
+      <VAvatar
+        class="rounded"
+        variant="flat"
+        rounded="0"
+        @click.stop="openTorrentDetail"
+      >
+        <VImg :src="siteIcon" />
+      </VAvatar>
+    </template>
+    <VListItemTitle>
+      {{ 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>
+    <VListItemSubtitle>
+      {{ torrent?.description }}
+    </VListItemSubtitle>
+    <div
+      v-if="torrent?.labels"
+      class="pt-2"
+    >
+      <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>
+      </div>
+    </template>
+  </VListItem>
+</template>

src/views/discover/TorrentCardListView.vue

@@ -216,8 +216,8 @@ const dataList = computed(() => {
   </VCard>
   <div class="grid gap-3 grid-torrent-card items-start">
     <TorrentCard
-      v-for="data in dataList"
+      v-for="(data, index) in dataList"
-      :key="`${data.torrent_info.title}_${data.torrent_info.site_name}_${data.torrent_info.page_url}`"
+      :key="index"
       :torrent="data"
       :more="data.more"
     />

src/views/discover/TorrentRowListView.vue

@@ -1,20 +1,243 @@
 <script lang="ts" setup>
 import type { Context } from '@/api/types'
+import TorrentItem from '@/components/cards/TorrentItem.vue'
 
 // 定义输入参数
-defineProps({
+const props = defineProps({
   // 数据列表
   items: Array as PropType<Context[]>,
 })
+
+// 过滤表单
+const filterForm = reactive({
+  // 站点
+  site: [] as string[],
+  // 季
+  season: [] as string[],
+  // 制作组
+  releaseGroup: [] as string[],
+  // 视频编码
+  videoCode: [] as string[],
+  // 促销状态
+  freeState: [] as string[],
+  // 质量
+  edition: [] as string[],
+  // 分辨率
+  resolution: [] as string[],
+})
+
+// 获取站点过滤选项
+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)
+}
+
+// 计算过滤后的列表
+const dataList = computed(() => {
+  const filter = filterForm
+
+  // 匹配过滤函数
+  const match = (filter: Array<string>, value: string | undefined) =>
+    filter.length === 0 || (value && filter.includes(value))
+
+  const result: Array<Context> = []
+  props.items?.forEach((data) => {
+    const { meta_info, torrent_info } = data
+    // 季、制作组、视频编码
+    const { season_episode, resource_team, video_encode } = meta_info
+    if (
+      // 站点过滤
+      match(filter.site, torrent_info.site_name)
+        // 促销状态过滤
+        && match(filter.freeState, torrent_info.volume_factor)
+        // 季过滤
+        && match(filter.season, season_episode)
+        // 制作组过滤
+        && match(filter.releaseGroup, resource_team)
+        // 视频编码过滤
+        && match(filter.videoCode, video_encode)
+        // 分辨率过滤
+        && match(filter.resolution, meta_info.resource_pix)
+        // 质量过滤
+        && match(filter.edition, meta_info.edition)
+    )
+      result.push(data)
+  })
+  return result
+})
+
+// 初始化过滤选项
+onMounted(() => {
+  props.items?.forEach((item) => {
+    initOptions(item)
+  })
+})
 </script>
 
 <template>
-  <VList lines="one">
+  <VRow>
-    <VListItem
+    <VCol>
-      v-for="item in items"
+      <VList lines="three">
-      :key="`${item.torrent_info.title}_${item.torrent_info.site_name}_${item.torrent_info.page_url}`"
+        <TorrentItem
-      :title="item.torrent_info.title"
+          v-for="(item, index) in dataList"
-      :subtitle="item.torrent_info.description"
+          :key="index"
-    />
+          :torrent="item"
-  </VList>
+        />
+        <VListItem v-if="dataList.length === 0">
+          <VListItemTitle>没有附合当前过滤条件的资源。</VListItemTitle>
+        </VListItem>
+      </VList>
+    </VCol>
+    <VCol
+      xl="2"
+      md="3"
+      class="d-none d-md-block h-100"
+    >
+      <VList lines="one" class="sticky top-5">
+        <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="filterForm.resolution.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="filterForm.releaseGroup.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 seasonFilterOptions"
+              :key="season"
+              :color="filterForm.season.includes(season) ? 'primary' : ''"
+              filter
+              variant="outlined"
+              :value="season"
+            >
+              {{ season }}
+            </VChip>
+          </VChipGroup>
+        </VListItem>
+      </VList>
+    </VCol>
+  </VRow>
 </template>

tailwind.config.js

@@ -12,7 +12,6 @@ module.exports = {
   },
   plugins: [
     require('@tailwindcss/aspect-ratio'),
-
     // ...
   ],
 }