feat torrents page

src/pages/resource.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
+import api from '@/api'
+import type { Context } from '@/api/types'
+import store from '@/store'
 import TorrentCardListView from '@/views/discover/TorrentCardListView.vue'
+import TorrentRowListView from '@/views/discover/TorrentRowListView.vue'
 
 // 路由参数
 const route = useRoute()
@@ -12,14 +16,114 @@ const type = route.query?.type?.toString() ?? ''
 
 // 搜索字段
 const area = route.query?.area?.toString() ?? ''
+
+// 视图类型，从localStorage中读取
+const viewType = localStorage.getItem('MPTorrentsViewType') ?? 'card'
+
+// 数据列表
+const dataList = ref<Array<Context>>([])
+
+// 是否刷新过
+const isRefreshed = ref(false)
+
+// 加载进度文本
+const progressText = ref('')
+
+// 加载进度
+const progressValue = ref(0)
+
+// 加载进度SSE
+const progressEventSource = ref<EventSource>()
+
+// 使用SSE监听加载进度
+function startLoadingProgress() {
+  progressText.value = '正在搜索，请稍候...'
+
+  const token = store.state.auth.token
+
+  progressEventSource.value = new EventSource(
+    `${import.meta.env.VITE_API_BASE_URL}system/progress/search?token=${token}`,
+  )
+  progressEventSource.value.onmessage = (event) => {
+    const progress = JSON.parse(event.data)
+    if (progress) {
+      progressText.value = progress.text
+      progressValue.value = progress.value
+    }
+  }
+}
+
+// 停止监听加载进度
+function stopLoadingProgress() {
+  progressEventSource.value?.close()
+}
+
+// 获取搜索列表数据
+async function fetchData(): Promise<Array<Context>> {
+  try {
+    let searchData: Array<Context>
+    if (!keyword) {
+      // 查询上次搜索结果
+      searchData = await api.get('search/last')
+    }
+    else {
+      startLoadingProgress()
+      // 优先按TMDBID精确查询
+      if (keyword?.startsWith('tmdb:') || keyword?.startsWith('douban:')) {
+        searchData = await api.get(`search/media/${keyword}`, {
+          params: {
+            mtype: type,
+            area,
+          },
+        })
+      }
+      else {
+        // 按标题模糊查询
+        searchData = await api.get(`search/title/${keyword}`)
+      }
+      stopLoadingProgress()
+    }
+    // 标记已刷新
+    isRefreshed.value = true
+    return Promise.resolve(searchData)
+  }
+  catch (error) {
+    console.error(error)
+    return Promise.reject(error)
+  }
+}
+
+// 加载数据
+onMounted(async () => {
+  try {
+    dataList.value = await fetchData()
+  }
+  catch (error) {
+    console.error(error)
+  }
+})
 </script>
 
 <template>
-  <div>
+  <div v-if="!isRefreshed" class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center">
+    <VProgressCircular v-if="!keyword" size="48" indeterminate color="primary" />
+    <VProgressCircular v-if="keyword" class="mb-3" color="primary" :model-value="progressValue" size="64" />
+    <span>{{ progressText }}</span>
+  </div>
+  <NoDataFound
+    v-if="dataList.length === 0 && isRefreshed"
+    error-code="404"
+    error-title="没有资源"
+    error-description="没有搜索到符合条件的资源。"
+  />
+  <div v-if="dataList.length > 0">
+    <TorrentRowListView
+      v-if="viewType === 'list'"
+      :items="dataList"
+    />
     <TorrentCardListView
-      :keyword="keyword"
-      :type="type"
-      :area="area"
+      v-else
+      :items="dataList"
     />
   </div>
 </template>

src/views/discover/TorrentCardListView.vue

@@ -1,66 +1,33 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import _ from 'lodash'
-import api from '@/api'
 import type { Context } from '@/api/types'
 import TorrentCard from '@/components/cards/TorrentCard.vue'
-import NoDataFound from '@/components/NoDataFound.vue'
-import store from '@/store'
-
-// 定义输入参数
-const props = defineProps({
-  // 关键字或TMDBID
-  keyword: String,
-
-  // 类型
-  type: String,
-
-  // 搜索字段
-  area: String,
-})
 
 interface SearchTorrent extends Context {
   more?: Array<Context>
 }
 
-// 数据列表
-const dataList = ref <Array<SearchTorrent>>([])
-
-// 分组后的数据列表
-const groupedDataList = ref<Map<string, Context[]>>()
-
-// 是否刷新过
-const isRefreshed = ref(false)
-
-// 加载进度文本
-const progressText = ref('')
-
-// 加载进度
-const progressValue = ref(0)
-
-// 加载进度SSE
-const progressEventSource = ref<EventSource>()
+// 定义输入参数
+const props = defineProps({
+  // 数据列表
+  items: Array as PropType<SearchTorrent[]>,
+})
 
 // 过滤表单
 const filterForm = reactive({
   // 站点
   site: [] as string[],
-
   // 季
   season: [] as string[],
-
   // 制作组
   releaseGroup: [] as string[],
-
   // 视频编码
   videoCode: [] as string[],
-
   // 促销状态
   freeState: [] as string[],
-
   // 质量
   edition: [] as string[],
-
   // 分辨率
   resolution: [] as string[],
 })
@@ -80,110 +47,7 @@ const editionFilterOptions = ref<Array<string>>([])
 // 获取分辨率过滤选项
 const resolutionFilterOptions = ref<Array<string>>([])
 
-// 按过滤项过滤卡片
-watchEffect(() => {
-  // 清空数据
-  dataList.value.splice(0)
-
-  const match = (filter: Array<string>, value: string | undefined) =>
-    filter.length === 0 || (value && filter.includes(value))
-
-  groupedDataList.value?.forEach((value) => {
-    if (value.length > 0) {
-      const matchData = value.filter((data) => {
-        const { meta_info, torrent_info } = data
-        // 季、制作组、视频编码
-        const { season_episode, resource_team, video_encode } = meta_info
-        return (
-          // 站点过滤
-          match(filterForm.site, torrent_info.site_name)
-          // 促销状态过滤
-          && match(filterForm.freeState, torrent_info.volume_factor)
-          // 季过滤
-          && match(filterForm.season, season_episode)
-          // 制作组过滤
-          && match(filterForm.releaseGroup, resource_team)
-          // 视频编码过滤
-          && match(filterForm.videoCode, video_encode)
-          // 分辨率过滤
-          && match(filterForm.resolution, meta_info.resource_pix)
-          // 质量过滤
-          && match(filterForm.edition, meta_info.edition)
-        )
-      })
-      if (matchData.length > 0) {
-        const firstData = _.cloneDeepWith(matchData[0]) as SearchTorrent
-        if (matchData.length > 1)
-          firstData.more = matchData.slice(1)
-
-        dataList.value.push(firstData)
-      }
-    }
-  })
-})
-
-// 获取订阅列表数据
-async function fetchData(): Promise<Array<Context>> {
-  try {
-    let searchData: Array<Context>
-    const keyword = props.keyword ?? ''
-    const mtype = props.type ?? ''
-    const area = props.area ?? ''
-    if (!keyword) {
-      // 查询上次搜索结果
-      searchData = await api.get('search/last')
-    }
-    else {
-      startLoadingProgress()
-      // 优先按TMDBID精确查询
-      if (props.keyword?.startsWith('tmdb:') || props.keyword?.startsWith('douban:')) {
-        searchData = await api.get(`search/media/${props.keyword}`, {
-          params: {
-            mtype,
-            area,
-          },
-        })
-      }
-      else {
-        // 按标题模糊查询
-        searchData = await api.get(`search/title/${props.keyword}`)
-      }
-      stopLoadingProgress()
-    }
-    isRefreshed.value = true
-    return Promise.resolve(searchData)
-  }
-  catch (error) {
-    console.error(error)
-    return Promise.reject(error)
-  }
-}
-
-function initData() {
-  // load data
-  fetchData().then((data) => {
-    const groupMap = new Map<string, Context[]>()
-
-    data.forEach((item) => {
-      const { torrent_info } = item
-      // init options
-      initOptions(item)
-      // group data
-      const key = `${torrent_info.title}_${torrent_info.size}`
-      if (groupMap.has(key)) {
-        // 已存在相同标题和大小的分组，将当前上下文信息添加到分组中
-        const group = groupMap.get(key)
-        group?.push(item)
-      }
-      else {
-        // 创建新的分组，并将当前上下文信息添加到分组中
-        groupMap.set(key, [item])
-      }
-    })
-    groupedDataList.value = groupMap
-  })
-}
-
+// 初始化过滤选项
 function initOptions(data: Context) {
   const { torrent_info, meta_info } = data
   const optionValue = (options: Array<string>, value: string | undefined) => {
@@ -198,31 +62,74 @@ function initOptions(data: Context) {
   optionValue(resolutionFilterOptions.value, meta_info?.resource_pix)
 }
 
-// 使用SSE监听加载进度
-function startLoadingProgress() {
-  progressText.value = '正在搜索，请稍候...'
-
-  const token = store.state.auth.token
-
-  progressEventSource.value = new EventSource(
-    `${import.meta.env.VITE_API_BASE_URL}system/progress/search?token=${token}`,
-  )
-  progressEventSource.value.onmessage = (event) => {
-    const progress = JSON.parse(event.data)
-    if (progress) {
-      progressText.value = progress.text
-      progressValue.value = progress.value
+// 计算分组后的列表
+const groupedDataList = computed(() => {
+  // 数据分组
+  const groupMap = new Map<string, Context[]>()
+  // 遍历数据
+  props.items?.forEach((item) => {
+    const { torrent_info } = item
+    // init options
+    initOptions(item)
+    // group data
+    const key = `${torrent_info.title}_${torrent_info.size}`
+    if (groupMap.has(key)) {
+      // 已存在相同标题和大小的分组，将当前上下文信息添加到分组中
+      const group = groupMap.get(key)
+      group?.push(item)
     }
-  }
-}
+    else {
+      // 创建新的分组，并将当前上下文信息添加到分组中
+      groupMap.set(key, [item])
+    }
+  })
+  return groupMap
+})
 
-// 停止监听加载进度
-function stopLoadingProgress() {
-  progressEventSource.value?.close()
-}
+// 计算过滤后的列表
+const dataList = computed(() => {
+  const list = groupedDataList.value
+  const filter = filterForm
 
-// 加载时获取数据
-onMounted(initData)
+  // 匹配过滤函数
+  const match = (filter: Array<string>, value: string | undefined) =>
+    filter.length === 0 || (value && filter.includes(value))
+
+  const result: Array<SearchTorrent> = []
+  list.forEach((value) => {
+    if (value.length > 0) {
+      const matchData = value.filter((data) => {
+        const { meta_info, torrent_info } = data
+        // 季、制作组、视频编码
+        const { season_episode, resource_team, video_encode } = meta_info
+        return (
+          // 站点过滤
+          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)
+        )
+      })
+      if (matchData.length > 0) {
+        const firstData = _.cloneDeepWith(matchData[0]) as SearchTorrent
+        if (matchData.length > 1)
+          firstData.more = matchData.slice(1)
+
+        result.push(firstData)
+      }
+    }
+  })
+  return result
+})
 </script>
 
 <template>
@@ -307,20 +214,14 @@ onMounted(initData)
       </VCol>
     </VRow>
   </VCard>
-  <div v-if="!isRefreshed" class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center">
-    <VProgressCircular v-if="!props.keyword" size="48" indeterminate color="primary" />
-    <VProgressCircular v-if="props.keyword" class="mb-3" color="primary" :model-value="progressValue" size="64" />
-    <span>{{ progressText }}</span>
+  <div class="grid gap-3 grid-torrent-card items-start">
+    <TorrentCard
+      v-for="data in dataList"
+      :key="`${data.torrent_info.title}_${data.torrent_info.site_name}_${data.torrent_info.page_url}`"
+      :torrent="data"
+      :more="data.more"
+    />
   </div>
-  <div v-if="dataList.length > 0" class="grid gap-3 grid-torrent-card items-start">
-    <TorrentCard v-for="data in dataList" :key="`${data.torrent_info.title}_${data.torrent_info.site_name}_${data.torrent_info.page_url}`" :torrent="data" :more="data.more" />
-  </div>
-  <NoDataFound
-    v-if="dataList.length === 0 && isRefreshed"
-    error-code="404"
-    error-title="没有资源"
-    error-description="没有搜索到符合条件的资源。"
-  />
 </template>
 
 <style lang="scss">

src/views/discover/TorrentRowListView.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { Context } from '@/api/types'
+
+// 定义输入参数
+defineProps({
+  // 数据列表
+  items: Array as PropType<Context[]>,
+})
+</script>
+
+<template>
+  <VList lines="one">
+    <VListItem
+      v-for="item in items"
+      :key="`${item.torrent_info.title}_${item.torrent_info.site_name}_${item.torrent_info.page_url}`"
+      :title="item.torrent_info.title"
+      :subtitle="item.torrent_info.description"
+    />
+  </VList>
+</template>