feat: 更新 AddDownloadDialog 组件以显示种子信息和文件大小,并优化布局

This commit is contained in:
jxxghp
2024-11-14 18:59:26 +08:00
parent e785997d99
commit 226efc3d85
+39 -13
View File
@@ -4,7 +4,7 @@ import api from '@/api'
import { doneNProgress, startNProgress } from '@/api/nprogress' import { doneNProgress, startNProgress } from '@/api/nprogress'
import type { DownloaderConf, MediaInfo, TorrentInfo, TransferDirectoryConf } from '@/api/types' import type { DownloaderConf, MediaInfo, TorrentInfo, TransferDirectoryConf } from '@/api/types'
import { formatFileSize } from '@/@core/utils/formatters' import { formatFileSize } from '@/@core/utils/formatters'
import { VCardTitle } from 'vuetify/lib/components/index.mjs' import { VCardTitle, VChip } from 'vuetify/lib/components/index.mjs'
// 输入参数 // 输入参数
const props = defineProps({ const props = defineProps({
@@ -119,37 +119,63 @@ onMounted(() => {
}) })
</script> </script>
<template> <template>
<VDialog max-width="40rem" scrollable> <VDialog max-width="45rem" scrollable>
<VCard> <VCard>
<VCardItem> <VCardItem>
<VCardTitle v-if="title">下载 - {{ title }}</VCardTitle> <VCardTitle v-if="title">下载 - {{ torrent?.site_name }}</VCardTitle>
<VCardTitle v-else>确认下载</VCardTitle> <VCardTitle v-else>确认下载</VCardTitle>
<DialogCloseBtn @click="emit('close')" /> <DialogCloseBtn @click="emit('close')" />
</VCardItem> </VCardItem>
<VDivider /> <VDivider />
<VCardText> <VCardText>
<VList lines="one">
<VListItem>
<template #prepend>
<VIcon icon="mdi-web"></VIcon>
</template>
<VListItemTitle>
<span class="whitespace-break-spaces me-2">{{ torrent?.title }}</span>
<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>
</VListItem>
<VListItem>
<template #prepend>
<VIcon icon="mdi-subtitles-outline"></VIcon>
</template>
<VListItemTitle>
<span class="text-body-1 whitespace-break-spaces">{{ torrent?.description }}</span>
</VListItemTitle>
</VListItem>
<VListItem>
<template #prepend>
<VIcon icon="mdi-database"></VIcon>
</template>
<VListItemTitle>
<span class="text-body-1">
<VChip variant="tonal" label>
{{ formatFileSize(torrent?.size || 0) }}
</VChip>
</span>
</VListItemTitle>
</VListItem>
</VList>
<VRow> <VRow>
<VCol cols="12" class="text-lg text-high-emphasis pb-0">
<div><strong>站点</strong>{{ props.torrent?.site_name }}</div>
<div><strong>标题</strong>{{ props.torrent?.title }}</div>
<div><strong>描述</strong>{{ props.torrent?.description }}</div>
<div><strong>大小</strong>{{ formatFileSize(props.torrent?.size || 0) }}</div>
</VCol>
<VCol cols="12" md="4"> <VCol cols="12" md="4">
<VSelect <VSelect
v-model="selectedDownloader" v-model="selectedDownloader"
:items="downloaderOptions" :items="downloaderOptions"
label="下载器" label="指定下载器"
variant="underlined" variant="underlined"
placeholder="默认" placeholder="留空默认"
/> />
</VCol> </VCol>
<VCol cols="12" md="8"> <VCol cols="12" md="8">
<VCombobox <VCombobox
v-model="selectedDirectory" v-model="selectedDirectory"
:items="targetDirectories" :items="targetDirectories"
label="保存目录" label="指定保存目录"
placeholder="自动" placeholder="留空自动匹配"
variant="underlined" variant="underlined"
/> />
</VCol> </VCol>