Refactor SiteTorrentTable.vue and AddDownloadDialog.vue components

src/components/cards/TorrentCard.vue

@@ -1,11 +1,9 @@
 <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'
-import type { Context, MediaInfo, TorrentInfo } from '@/api/types'
+import AddDownloadDialog from '../dialog/AddDownloadDialog.vue'
 
 // 输入参数
 const props = defineProps({
@@ -15,12 +13,6 @@ const props = defineProps({
   height: String,
 })
 
-// 提示框
-const $toast = useToast()
-
-// 确认框
-const createConfirm = useConfirm()
-
 // 更多来源界面
 const showMoreTorrents = ref(false)
 
@@ -37,7 +29,22 @@ const meta = ref(props.torrent?.meta_info)
 const siteIcon = ref('')
 
 // 存储是否已经下载过的记录
-const downloaded = ref<String[]>([])
+const downloaded = ref<string[]>([])
+
+// 添加下载对话框
+const addDownloadDialog = ref(false)
+
+// 添加下载成功
+function addDownloadSuccess(url: string) {
+  addDownloadDialog.value = false
+  // 添加下载成功
+  downloaded.value.push(url)
+}
+
+// 添加下载失败
+function addDownloadError(error: string) {
+  addDownloadDialog.value = false
+}
 
 // 查询站点图标
 async function getSiteIcon() {
@@ -49,50 +56,9 @@ async function getSiteIcon() {
 }
 
 // 询问并添加下载
-async function handleAddDownload(_site: any = undefined, _media: any = undefined, _torrent: any = undefined) {
+async function handleAddDownload() {
-  if (!_media || !_torrent || !_site) {
+  // 打开下载对话框
-    _site = torrent.value?.site_name
+  addDownloadDialog.value = true
-    _media = media.value
-    _torrent = torrent.value
-  }
-
-  const isConfirmed = await createConfirm({
-    title: '确认',
-    content: `是否确认下载【${_site}】${_torrent?.title} ?`,
-  })
-
-  if (!isConfirmed) return
-
-  addDownload(_media, _torrent)
-}
-
-// 添加下载
-async function addDownload(_media: MediaInfo, _torrent: TorrentInfo) {
-  startNProgress()
-  try {
-    let result: { [key: string]: any }
-
-    if (_media) {
-      result = await api.post('download/', {
-        media_in: _media,
-        torrent_in: _torrent,
-      })
-    } else {
-      result = await api.post('download/add', _torrent)
-    }
-
-    if (result && result.success) {
-      // 添加下载成功
-      $toast.success(`${_torrent?.site_name} ${_torrent?.title} 下载成功！`)
-      downloaded.value.push(_torrent?.enclosure || '')
-    } else {
-      // 添加下载失败
-      $toast.error(`${_torrent?.site_name} ${_torrent?.title} 下载失败：${result?.message}！`)
-    }
-  } catch (error) {
-    console.error(error)
-  }
-  doneNProgress()
 }
 
 // 打开种子详情页面
@@ -120,6 +86,7 @@ onMounted(() => {
 </script>
 
 <template>
+  <div>
     <VCard
       :width="props.width"
       :height="props.height"
@@ -243,4 +210,14 @@ onMounted(() => {
         </div>
       </VExpandTransition>
     </VCard>
+    <AddDownloadDialog
+      v-if="addDownloadDialog"
+      v-model="addDownloadDialog"
+      :media="props.torrent?.media_info"
+      :torrent="props.torrent?.torrent_info"
+      @done="addDownloadSuccess"
+      @error="addDownloadError"
+      @close="addDownloadDialog = false"
+    />
+  </div>
 </template>

src/components/cards/TorrentItem.vue

@@ -1,32 +1,21 @@
 <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'
-import type { Context, MediaInfo, TorrentInfo } from '@/api/types'
+import AddDownloadDialog from '../dialog/AddDownloadDialog.vue'
 
 // 输入参数
 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)
 
@@ -34,7 +23,10 @@ const meta = ref(props.torrent?.meta_info)
 const siteIcon = ref('')
 
 // 存储是否已经下载过的记录
-const downloaded = ref<String[]>([])
+const downloaded = ref<string[]>([])
+
+// 添加下载对话框
+const addDownloadDialog = ref(false)
 
 // 查询站点图标
 async function getSiteIcon() {
@@ -46,50 +38,21 @@ async function getSiteIcon() {
 }
 
 // 询问并添加下载
-async function handleAddDownload(_site: any = undefined, _media: any = undefined, _torrent: any = undefined) {
+async function handleAddDownload() {
-  if (!_media || !_torrent || !_site) {
+  // 打开下载对话框
-    _site = torrent.value?.site_name
+  addDownloadDialog.value = true
-    _media = media.value
-    _torrent = torrent.value
 }
 
-  const isConfirmed = await createConfirm({
-    title: '确认',
-    content: `是否确认下载【${_site}】${_torrent?.title} ?`,
-  })
-
-  if (!isConfirmed) return
-
-  addDownload(_media, _torrent)
-}
-
-// 添加下载
-async function addDownload(_media: MediaInfo, _torrent: TorrentInfo) {
-  startNProgress()
-  try {
-    let result: { [key: string]: any }
-
-    if (_media) {
-      result = await api.post('download/', {
-        media_in: _media,
-        torrent_in: _torrent,
-      })
-    } else {
-      result = await api.post('download/add', _torrent)
-    }
-
-    if (result && result.success) {
 // 添加下载成功
-      $toast.success(`${_torrent?.site_name} ${_torrent?.title} 下载成功！`)
+function addDownloadSuccess(url: string) {
-      downloaded.value.push(_torrent?.enclosure || '')
+  addDownloadDialog.value = false
-    } else {
+  // 添加下载成功
+  downloaded.value.push(url)
+}
+
 // 添加下载失败
-      $toast.error(`${_torrent?.site_name} ${_torrent?.title} 下载失败：${result?.message}！`)
+function addDownloadError(error: string) {
-    }
+  addDownloadDialog.value = false
-  } catch (error) {
-    console.error(error)
-  }
-  doneNProgress()
 }
 
 // 打开种子详情页面
@@ -117,7 +80,11 @@ onMounted(() => {
 </script>
 
 <template>
-  <VListItem @click="handleAddDownload" :variant="downloaded.includes(torrent?.enclosure || '') ? 'outlined' : 'flat'">
+  <div>
+    <VListItem
+      @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" />
@@ -201,4 +168,14 @@ onMounted(() => {
         </div>
       </template>
     </VListItem>
+    <AddDownloadDialog
+      v-if="addDownloadDialog"
+      v-model="addDownloadDialog"
+      :media="props.torrent?.media_info"
+      :torrent="props.torrent?.torrent_info"
+      @done="addDownloadSuccess"
+      @error="addDownloadError"
+      @close="addDownloadDialog = false"
+    />
+  </div>
 </template>

src/components/dialog/AddDownloadDialog.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { useToast } from 'vue-toast-notification'
+import api from '@/api'
+import { doneNProgress, startNProgress } from '@/api/nprogress'
+import type { DownloaderConf, MediaInfo, TorrentInfo, TransferDirectoryConf } from '@/api/types'
+import { formatFileSize } from '@/@core/utils/formatters'
+
+// 输入参数
+const props = defineProps({
+  media: Object as PropType<MediaInfo>,
+  torrent: Object as PropType<TorrentInfo>,
+})
+
+// 提示框
+const $toast = useToast()
+
+// 选择的下载器
+const selectedDownloader = ref(null)
+
+// 选择的保存目录
+const selectedDirectory = ref(null)
+
+// 定义成功和失败事件
+const emit = defineEmits(['done', 'error', 'close'])
+
+// 所有目录设置
+const directories = ref<TransferDirectoryConf[]>([])
+
+// 是否正在加载
+const loading = ref(false)
+
+// 计算按钮图标
+const icon = computed(() => (loading.value ? 'mdi-progress-download' : 'mdi-download'))
+
+// 计算按钮文字
+const buttonText = computed(() => (loading.value ? '下载中...' : '开始下载'))
+
+// 加载目录设置
+async function loadDirectories() {
+  try {
+    const result: { [key: string]: any } = await api.get('system/setting/Directories')
+    directories.value = result.data?.value ?? []
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 获取保存目录
+const targetDirectories = computed(() => {
+  const downloadDirectories = directories.value.map(item => item.download_path)
+  return [...new Set(downloadDirectories)]
+})
+
+// 下载器
+const downloaders = ref<DownloaderConf[]>([])
+
+// 调用API查询下载器设置
+async function loadDownloaderSetting() {
+  try {
+    const result: { [key: string]: any } = await api.get('system/setting/Downloaders')
+    downloaders.value = result.data?.value ?? []
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 下载器可选项
+const downloaderOptions = computed(() => {
+  return downloaders.value.map(item => ({
+    title: item.name,
+    value: item.name,
+  }))
+})
+
+// 添加下载
+async function addDownload() {
+  startNProgress()
+  loading.value = true
+  try {
+    let result: { [key: string]: any }
+
+    if (props.media) {
+      result = await api.post('download/', {
+        media_in: props.media,
+        torrent_in: props.torrent,
+      })
+    } else {
+      result = await api.post('download/add', props.torrent)
+    }
+
+    if (result && result.success) {
+      // 添加下载成功
+      $toast.success(`${props.torrent?.site_name} ${props.torrent?.title} 下载成功！`)
+      // 下载成功，返回链接
+      emit('done', props.torrent?.enclosure)
+    } else {
+      // 添加下载失败
+      $toast.error(`${props.torrent?.site_name} ${props.torrent?.title} 下载失败：${result?.message}！`)
+      // 下载失败，返回错误原因
+      emit('error', result?.message)
+    }
+  } catch (error) {
+    console.error(error)
+  }
+  loading.value = false
+  doneNProgress()
+}
+
+onMounted(() => {
+  loadDirectories()
+  loadDownloaderSetting()
+})
+</script>
+<template>
+  <VDialog max-width="40rem" scrollable>
+    <VCard title="下载确认">
+      <DialogCloseBtn @click="emit('close')" />
+      <VDivider />
+      <VCardText>
+        <VRow>
+          <VCol cols="12" class="text-lg text-high-emphasis">
+            是否确认下载 {{ props.torrent?.site_name }} - {{ props.torrent?.title }}，大小：
+            {{ formatFileSize(props.torrent?.size || 0) }} ？
+          </VCol>
+        </VRow>
+        <VRow>
+          <VCol cols="12" md="4">
+            <VSelect
+              v-model="selectedDownloader"
+              :items="downloaderOptions"
+              label="下载器"
+              density="compact"
+              variant="underlined"
+              placeholder="默认"
+            />
+          </VCol>
+          <VCol cols="12" md="8">
+            <VCombobox
+              v-model="selectedDirectory"
+              :items="targetDirectories"
+              label="保存目录"
+              placeholder="自动"
+              density="compact"
+              variant="underlined"
+            />
+          </VCol>
+        </VRow>
+      </VCardText>
+      <VCardText class="text-center mt-3">
+        <VBtn variant="elevated" :disabled="loading" @click="addDownload" :prepend-icon="icon" class="px-5">
+          {{ buttonText }}
+        </VBtn>
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>

src/components/table/SiteTorrentTable.vue

@@ -1,10 +1,8 @@
 <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 type { MediaInfo, TorrentInfo } from '@/api/types'
-import { doneNProgress, startNProgress } from '@/api/nprogress'
 import { formatFileSize } from '@core/utils/formatters'
+import AddDownloadDialog from '../dialog/AddDownloadDialog.vue'
 
 // 输入参数
 const props = defineProps({
@@ -13,12 +11,6 @@ const props = defineProps({
   height: String,
 })
 
-// 提示框
-const $toast = useToast()
-
-// 确认框
-const createConfirm = useConfirm()
-
 // 数据列表
 const resourceDataList = ref<TorrentInfo[]>([])
 
@@ -34,6 +26,9 @@ const resourceItemsPerPage = ref(25)
 // 加载状态
 const resourceLoading = ref(false)
 
+// 识别元数据
+const torrent = ref<TorrentInfo>()
+
 // 资源浏览表头
 const resourceHeaders = [
   { title: '标题', key: 'title', sortable: false },
@@ -75,28 +70,21 @@ function getVolumeFactorClass(downloadVolume: number, uploadVolume: number) {
 
 // 添加下载
 async function addDownload(_torrent: any) {
-  const isConfirmed = await createConfirm({
+  torrent.value = _torrent
-    title: '确认',
+  addDownloadDialog.value = true
-    content: `是否确认下载【${_torrent.site_name}】${_torrent?.title} ?`,
+}
-  })
 
-  if (!isConfirmed) return
+// 添加下载对话框
+const addDownloadDialog = ref(false)
 
-  startNProgress()
-  try {
-    const result: { [key: string]: any } = await api.post('download/add', _torrent)
-
-    if (result.success) {
 // 添加下载成功
-      $toast.success(`${_torrent?.site_name} ${_torrent?.title} 添加下载成功！`)
+function addDownloadSuccess(url: string) {
-    } else {
+  addDownloadDialog.value = false
+}
+
 // 添加下载失败
-      $toast.error(`${_torrent?.site_name} ${_torrent?.title} 添加下载失败：${result.message || '未知错误'}`)
+function addDownloadError(error: string) {
-    }
+  addDownloadDialog.value = false
-  } catch (error) {
-    console.error(error)
-  }
-  doneNProgress()
 }
 
 // 装载时查询站点图标
@@ -203,4 +191,12 @@ onMounted(() => {
     </template>
     <template #no-data> 没有数据 </template>
   </VDataTable>
+  <AddDownloadDialog
+    v-if="addDownloadDialog"
+    v-model="addDownloadDialog"
+    :torrent="torrent"
+    @done="addDownloadSuccess"
+    @error="addDownloadError"
+    @close="addDownloadDialog = false"
+  />
 </template>