fix

src/components/cards/SiteCard.vue

@@ -1,14 +1,12 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue'
 import { useToast } from 'vue-toast-notification'
-import { useConfirm } from 'vuetify-use-dialog'
 import SiteAddEditForm from '../form/SiteAddEditForm.vue'
-import { formatFileSize } from '@core/utils/formatters'
+import SiteTorrentTable from '../table/SiteTorrentTable.vue'
 import { requiredValidator } from '@/@validators'
 import api from '@/api'
-import type { Site, TorrentInfo } from '@/api/types'
+import type { Site } from '@/api/types'
 import ExistIcon from '@core/components/ExistIcon.vue'
-import { doneNProgress, startNProgress } from '@/api/nprogress'
 
 // 输入参数
 const cardProps = defineProps({
@@ -29,9 +27,6 @@ const siteIcon = ref<string>('')
 // 提示框
 const $toast = useToast()
 
-// 确认框
-const createConfirm = useConfirm()
-
 // 测试按钮文字
 const testButtonText = ref('测试')
 
@@ -56,31 +51,6 @@ const progressDialog = ref(false)
 // 进度文本
 const progressText = ref('请稍候 ...')
 
-// 资源浏览表头
-const resourceHeaders = [
-  { title: '标题', key: 'title', sortable: false },
-  { title: '时间', key: 'pubdate', sortable: true },
-  { title: '大小', key: 'size', sortable: true },
-  { title: '做种', key: 'seeders', sortable: true },
-  { title: '下载', key: 'peers', sortable: true },
-  { title: '', key: 'actions', sortable: false },
-]
-
-// 数据列表
-const resourceDataList = ref<TorrentInfo[]>([])
-
-// 搜索
-const resourceSearch = ref('')
-
-// 加载状态
-const resourceLoading = ref(false)
-
-// 总条数
-const resourceTotalItems = ref(0)
-
-// 每页条数
-const resourceItemsPerPage = ref(25)
-
 // 用户名密码表单
 const userPwForm = ref({
   username: '',
@@ -88,16 +58,6 @@ const userPwForm = ref({
   code: '',
 })
 
-// 打开种子详情页面
-function openTorrentDetail(page_url: string) {
-  window.open(page_url, '_blank')
-}
-
-// 下载种子文件
-async function downloadTorrentFile(enclosure: string) {
-  window.open(enclosure, '_blank')
-}
-
 // 查询站点图标
 async function getSiteIcon() {
   try {
@@ -136,7 +96,6 @@ async function handleSiteUpdate() {
 // 打开资源浏览弹窗
 async function handleResourceBrowse() {
   resourceDialog.value = true
-  getResourceList()
 }
 
 // 调用API，更新站点Cookie UA
@@ -176,72 +135,11 @@ async function updateSiteCookie() {
   }
 }
 
-// 促销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'
-}
-
-// 调用API，查询站点资源
-async function getResourceList() {
-  resourceLoading.value = true
-  try {
-    resourceDataList.value = await api.get(`site/resource/${cardProps.site?.id}`)
-    resourceLoading.value = false
-  }
-  catch (error) {
-    console.error(error)
-  }
-}
-
 // 打开站点页面
 function openSitePage() {
   window.open(cardProps.site?.url, '_blank')
 }
 
-// 添加下载
-async function addDownload(_torrent: any) {
-  const isConfirmed = await createConfirm({
-    title: '确认',
-    content: `是否确认下载【${_torrent.site_name}】${_torrent?.title} ?`,
-    confirmationText: '确认',
-    cancellationText: '取消',
-    dialogProps: {
-      maxWidth: '50rem',
-    },
-    confirmationButtonProps: {
-      variant: 'tonal',
-    },
-  })
-
-  if (!isConfirmed)
-    return
-
-  startNProgress()
-  try {
-    const result: { [key: string]: any } = await api.post('download/add', _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()
-}
-
 // 装载时查询站点图标
 onMounted(() => {
   getSiteIcon()
@@ -445,125 +343,7 @@ onMounted(() => {
     <VCard :title="`浏览站点 - ${cardProps.site?.name}`">
       <DialogCloseBtn @click="resourceDialog = false" />
       <VCardText class="pt-2">
-        <VDataTable
+        <SiteTorrentTable :site="cardProps.site?.id" />
-          v-model:items-per-page="resourceItemsPerPage"
-          :headers="resourceHeaders"
-          :items="resourceDataList"
-          :items-length="resourceTotalItems"
-          :search="resourceSearch"
-          :loading="resourceLoading"
-          density="compact"
-          item-value="title"
-          return-object
-          fixed-header
-          hover
-          items-per-page-text="每页条数"
-          page-text="{0}-{1} 共 {2} 条"
-        >
-          <template #item.title="{ item }">
-            <a href="javascript:void(0)" @click.stop="addDownload(item.raw)">
-              <div class="text-high-emphasis pt-1">
-                {{ item.raw.title }}
-              </div>
-              <div class="text-sm my-1">
-                {{ item.raw.description }}
-              </div>
-              <VChip
-                v-if="item.raw?.hit_and_run"
-                variant="elevated"
-                size="small"
-                class="me-1 mb-1 text-white bg-black"
-              >
-                H&R
-              </VChip>
-              <VChip
-                v-if="item.raw?.freedate_diff"
-                variant="elevated"
-                color="secondary"
-                size="small"
-                class="me-1 mb-1"
-              >
-                {{ item.raw?.freedate_diff }}
-              </VChip>
-              <VChip
-                v-for="(label, index) in item.raw?.labels"
-                :key="index"
-                variant="elevated"
-                size="small"
-                color="primary"
-                class="me-1 mb-1"
-              >
-                {{ label }}
-              </VChip>
-              <VChip
-                v-if="item.raw?.downloadvolumefactor !== 1 || item.raw?.uploadvolumefactor !== 1"
-                :class="
-                  getVolumeFactorClass(item.raw?.downloadvolumefactor, item.raw?.uploadvolumefactor)
-                "
-                variant="elevated"
-                size="small"
-                class="me-1 mb-1"
-              >
-                {{ item.raw?.volume_factor }}
-              </VChip>
-            </a>
-          </template>
-          <template #item.pubdate="{ item }">
-            <div>{{ item.raw.date_elapsed }}</div>
-            <div class="text-sm">
-              {{ item.raw.pubdate }}
-            </div>
-          </template>
-          <template #item.size="{ item }">
-            <div class="text-nowrap whitespace-nowrap">
-              {{ formatFileSize(item.raw.size) }}
-            </div>
-          </template>
-          <template #item.seeders="{ item }">
-            <div>{{ item.raw.seeders }}</div>
-          </template>
-          <template #item.peers="{ item }">
-            <div>{{ item.raw.peers }}</div>
-          </template>
-          <template #item.actions="{ item }">
-            <div class="me-n3">
-              <IconBtn>
-                <VIcon
-                  icon="mdi-dots-vertical"
-                />
-                <VMenu
-                  activator="parent"
-                  close-on-content-click
-                >
-                  <VList>
-                    <VListItem
-                      variant="plain"
-                      @click="openTorrentDetail(item.raw.page_url)"
-                    >
-                      <template #prepend>
-                        <VIcon icon="mdi-information" />
-                      </template>
-                      <VListItemTitle>查看详情</VListItemTitle>
-                    </VListItem>
-                    <VListItem
-                      v-if="item.raw.enclosure?.startsWith('http')"
-                      variant="plain"
-                      @click="downloadTorrentFile(item.raw.enclosure)"
-                    >
-                      <template #prepend>
-                        <VIcon icon="mdi-download" />
-                      </template>
-                      <VListItemTitle>下载种子文件</VListItemTitle>
-                    </VListItem>
-                  </VList>
-                </VMenu>
-              </IconBtn>
-            </div>
-          </template>
-          <template #no-data>
-            没有数据
-          </template>
-        </VDataTable>
       </VCardText>
     </VCard>
   </VDialog>

src/components/table/SiteTorrentTable.vue

@@ -0,0 +1,244 @@
+<script lang="ts" setup>
+import { useToast } from 'vue-toast-notification'
+import { useConfirm } from 'vuetify-use-dialog'
+import api from '@/api'
+import type { TorrentInfo } from '@/api/types'
+import { doneNProgress, startNProgress } from '@/api/nprogress'
+import { formatFileSize } from '@core/utils/formatters'
+
+// 输入参数
+const props = defineProps({
+  site: Number,
+  width: String,
+  height: String,
+})
+
+// 提示框
+const $toast = useToast()
+
+// 确认框
+const createConfirm = useConfirm()
+
+// 数据列表
+const resourceDataList = ref<TorrentInfo[]>([])
+
+// 搜索
+const resourceSearch = ref('')
+
+// 总条数
+const resourceTotalItems = ref(0)
+
+// 每页条数
+const resourceItemsPerPage = ref(25)
+
+// 加载状态
+const resourceLoading = ref(false)
+
+// 资源浏览表头
+const resourceHeaders = [
+  { title: '标题', key: 'title', sortable: false },
+  { title: '时间', key: 'pubdate', sortable: true },
+  { title: '大小', key: 'size', sortable: true },
+  { title: '做种', key: 'seeders', sortable: true },
+  { title: '下载', key: 'peers', sortable: true },
+  { title: '', key: 'actions', sortable: false },
+]
+
+// 打开种子详情页面
+function openTorrentDetail(page_url: string) {
+  window.open(page_url, '_blank')
+}
+
+// 下载种子文件
+async function downloadTorrentFile(enclosure: string) {
+  window.open(enclosure, '_blank')
+}
+
+// 调用API，查询站点资源
+async function getResourceList() {
+  resourceLoading.value = true
+  try {
+    resourceDataList.value = await api.get(`site/resource/${props.site}`)
+    resourceLoading.value = false
+  }
+  catch (error) {
+    console.error(error)
+  }
+}
+
+// 促销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'
+}
+
+// 添加下载
+async function addDownload(_torrent: any) {
+  const isConfirmed = await createConfirm({
+    title: '确认',
+    content: `是否确认下载【${_torrent.site_name}】${_torrent?.title} ?`,
+    confirmationText: '确认',
+    cancellationText: '取消',
+    dialogProps: {
+      maxWidth: '50rem',
+    },
+    confirmationButtonProps: {
+      variant: 'tonal',
+    },
+  })
+
+  if (!isConfirmed)
+    return
+
+  startNProgress()
+  try {
+    const result: { [key: string]: any } = await api.post('download/add', _torrent)
+
+    if (result.success) {
+      // 添加下载成功
+      $toast.success(`${_torrent?.site_name} ${_torrent?.title} 添加下载成功！`)
+    }
+    else {
+      // 添加下载失败
+      $toast.error(`${_torrent?.site_name} ${_torrent?.title} 添加下载失败：${result.message || '未知错误'}`)
+    }
+  }
+  catch (error) {
+    console.error(error)
+  }
+  doneNProgress()
+}
+
+// 装载时查询站点图标
+onMounted(() => {
+  getResourceList()
+})
+</script>
+
+<template>
+  <VDataTable
+    v-model:items-per-page="resourceItemsPerPage"
+    :headers="resourceHeaders"
+    :items="resourceDataList"
+    :items-length="resourceTotalItems"
+    :search="resourceSearch"
+    :loading="resourceLoading"
+    density="compact"
+    item-value="title"
+    return-object
+    fixed-header
+    hover
+    items-per-page-text="每页条数"
+    page-text="{0}-{1} 共 {2} 条"
+  >
+    <template #item.title="{ item }">
+      <a href="javascript:void(0)" @click.stop="addDownload(item.raw)">
+        <div class="text-high-emphasis pt-1">
+          {{ item.raw.title }}
+        </div>
+        <div class="text-sm my-1">
+          {{ item.raw.description }}
+        </div>
+        <VChip
+          v-if="item.raw?.hit_and_run"
+          variant="elevated"
+          size="small"
+          class="me-1 mb-1 text-white bg-black"
+        >
+          H&R
+        </VChip>
+        <VChip
+          v-if="item.raw?.freedate_diff"
+          variant="elevated"
+          color="secondary"
+          size="small"
+          class="me-1 mb-1"
+        >
+          {{ item.raw?.freedate_diff }}
+        </VChip>
+        <VChip
+          v-for="(label, index) in item.raw?.labels"
+          :key="index"
+          variant="elevated"
+          size="small"
+          color="primary"
+          class="me-1 mb-1"
+        >
+          {{ label }}
+        </VChip>
+        <VChip
+          v-if="item.raw?.downloadvolumefactor !== 1 || item.raw?.uploadvolumefactor !== 1"
+          :class="
+            getVolumeFactorClass(item.raw?.downloadvolumefactor, item.raw?.uploadvolumefactor)
+          "
+          variant="elevated"
+          size="small"
+          class="me-1 mb-1"
+        >
+          {{ item.raw?.volume_factor }}
+        </VChip>
+      </a>
+    </template>
+    <template #item.pubdate="{ item }">
+      <div>{{ item.raw.date_elapsed }}</div>
+      <div class="text-sm">
+        {{ item.raw.pubdate }}
+      </div>
+    </template>
+    <template #item.size="{ item }">
+      <div class="text-nowrap whitespace-nowrap">
+        {{ formatFileSize(item.raw.size) }}
+      </div>
+    </template>
+    <template #item.seeders="{ item }">
+      <div>{{ item.raw.seeders }}</div>
+    </template>
+    <template #item.peers="{ item }">
+      <div>{{ item.raw.peers }}</div>
+    </template>
+    <template #item.actions="{ item }">
+      <div class="me-n3">
+        <IconBtn>
+          <VIcon
+            icon="mdi-dots-vertical"
+          />
+          <VMenu
+            activator="parent"
+            close-on-content-click
+          >
+            <VList>
+              <VListItem
+                variant="plain"
+                @click="openTorrentDetail(item.raw.page_url)"
+              >
+                <template #prepend>
+                  <VIcon icon="mdi-information" />
+                </template>
+                <VListItemTitle>查看详情</VListItemTitle>
+              </VListItem>
+              <VListItem
+                v-if="item.raw.enclosure?.startsWith('http')"
+                variant="plain"
+                @click="downloadTorrentFile(item.raw.enclosure)"
+              >
+                <template #prepend>
+                  <VIcon icon="mdi-download" />
+                </template>
+                <VListItemTitle>下载种子文件</VListItemTitle>
+              </VListItem>
+            </VList>
+          </VMenu>
+        </IconBtn>
+      </div>
+    </template>
+    <template #no-data>
+      没有数据
+    </template>
+  </VDataTable>
+</template>

src/views/site/SiteCardListView.vue

@@ -4,6 +4,7 @@ import type { Site } from '@/api/types'
 import SiteCard from '@/components/cards/SiteCard.vue'
 import NoDataFound from '@/components/NoDataFound.vue'
 import SiteAddEditForm from '@/components/form/SiteAddEditForm.vue'
+import { useDefer } from '@/@core/utils/dom'
 
 // 数据列表
 const dataList = ref<Site[]>([])
@@ -14,11 +15,15 @@ const isRefreshed = ref(false)
 // 新增站点对话框
 const siteAddDialog = ref(false)
 
+// 延迟加载
+let defer = (_: number) => true
+
 // 获取站点列表数据
 async function fetchData() {
   try {
     dataList.value = await api.get('site/')
     isRefreshed.value = true
+    defer = useDefer(dataList.value.length)
   }
   catch (error) {
     console.error(error)
@@ -44,15 +49,20 @@ onBeforeMount(fetchData)
   <div
     v-if="dataList.length > 0"
     class="grid gap-3 grid-site-card"
+  >
+    <div
+      v-for="(data, index) in dataList"
+      :key="index"
     >
       <SiteCard
-      v-for="data in dataList"
+        v-if="defer(index)"
         :key="data.id"
         :site="data"
         @remove="fetchData"
         @update="fetchData"
       />
     </div>
+  </div>
   <NoDataFound
     v-if="dataList.length === 0 && isRefreshed"
     error-code="404"