op 1
This commit is contained in:
Julian Freeman
@@ -1,11 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
import { watch } from 'vue'
|
||||
import { computed, watch } from 'vue'
|
||||
import { invoke } from '@tauri-apps/api/core'
|
||||
import { Loader2, List, Link } from 'lucide-vue-next'
|
||||
import { useQueueStore } from '../stores/queue'
|
||||
import { useSettingsStore } from '../stores/settings'
|
||||
import { useAnalysisStore } from '../stores/analysis'
|
||||
import AppSelect from '../components/ui/AppSelect.vue'
|
||||
import type { AnalysisMetadata, PlaylistMetadata, VideoMetadata } from '../types/media'
|
||||
import { isPlaylistMetadata } from '../types/media'
|
||||
import {
|
||||
countSelectedEntries,
|
||||
detectMixUrl,
|
||||
normalizeBatchLinks,
|
||||
stripPlaylistContext,
|
||||
toSelectableEntries
|
||||
} from '../utils/analysis'
|
||||
|
||||
const queueStore = useQueueStore()
|
||||
const settingsStore = useSettingsStore()
|
||||
@@ -38,169 +47,135 @@ const audioFormatOptions = [
|
||||
{ label: 'FLAC', value: 'flac' },
|
||||
]
|
||||
|
||||
// Sync default download path if not set
|
||||
const playlistMetadata = computed<PlaylistMetadata | null>(() => {
|
||||
return isPlaylistMetadata(analysisStore.metadata) ? analysisStore.metadata : null
|
||||
})
|
||||
|
||||
const singleMetadata = computed<VideoMetadata | null>(() => {
|
||||
return analysisStore.metadata && !isPlaylistMetadata(analysisStore.metadata)
|
||||
? analysisStore.metadata
|
||||
: null
|
||||
})
|
||||
|
||||
const selectedCount = computed(() => countSelectedEntries(playlistMetadata.value))
|
||||
|
||||
watch(() => settingsStore.settings.download_path, (newPath) => {
|
||||
if (newPath && !analysisStore.options.output_path) {
|
||||
analysisStore.options.output_path = newPath
|
||||
}
|
||||
if (newPath && !analysisStore.options.output_path) {
|
||||
analysisStore.options.output_path = newPath
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
// Detect Mix URL
|
||||
watch(() => analysisStore.url, (newUrl) => {
|
||||
if (newUrl && newUrl.includes('v=') && newUrl.includes('list=')) {
|
||||
analysisStore.isMix = true
|
||||
} else {
|
||||
analysisStore.isMix = false
|
||||
// Reset scanMix if URL changes to non-mix
|
||||
analysisStore.scanMix = false
|
||||
}
|
||||
analysisStore.isMix = !!newUrl && detectMixUrl(newUrl)
|
||||
if (!analysisStore.isMix) {
|
||||
analysisStore.scanMix = false
|
||||
}
|
||||
})
|
||||
|
||||
// Reset format to original when toggling audio-only mode
|
||||
watch(() => analysisStore.options.is_audio_only, () => {
|
||||
analysisStore.options.output_format = 'original'
|
||||
analysisStore.options.output_format = 'original'
|
||||
})
|
||||
|
||||
async function processThumbnail(url: string | undefined): Promise<string | undefined> {
|
||||
if (!url) return undefined;
|
||||
// Check if it's an Instagram URL or similar that needs proxying
|
||||
if (url.includes('instagram.com') || url.includes('fbcdn.net') || url.includes('cdninstagram.com')) {
|
||||
try {
|
||||
return await invoke<string>('fetch_image', { url });
|
||||
} catch (e) {
|
||||
console.warn('Thumbnail fetch failed, falling back to URL', e);
|
||||
return url;
|
||||
}
|
||||
async function processThumbnail(url: string | undefined | null): Promise<string | undefined> {
|
||||
if (!url) return undefined
|
||||
|
||||
if (url.includes('instagram.com') || url.includes('fbcdn.net') || url.includes('cdninstagram.com')) {
|
||||
try {
|
||||
return await invoke<string>('fetch_image', { url })
|
||||
} catch (error) {
|
||||
console.warn('Thumbnail fetch failed, falling back to URL', error)
|
||||
return url
|
||||
}
|
||||
return url;
|
||||
}
|
||||
|
||||
return url
|
||||
}
|
||||
|
||||
async function processMetadataThumbnails(metadata: any) {
|
||||
if (!metadata) return;
|
||||
|
||||
// Process single video thumbnail
|
||||
if (metadata.thumbnail) {
|
||||
metadata.thumbnail = await processThumbnail(metadata.thumbnail);
|
||||
async function processMetadataThumbnails(metadata: AnalysisMetadata) {
|
||||
if (isPlaylistMetadata(metadata)) {
|
||||
await Promise.all(metadata.entries.map(async (entry) => {
|
||||
if (entry.thumbnail) {
|
||||
entry.thumbnail = await processThumbnail(entry.thumbnail) ?? entry.thumbnail
|
||||
}
|
||||
}))
|
||||
return
|
||||
}
|
||||
|
||||
if (metadata.thumbnail) {
|
||||
metadata.thumbnail = await processThumbnail(metadata.thumbnail) ?? metadata.thumbnail
|
||||
}
|
||||
}
|
||||
|
||||
async function analyzeBatchLinks() {
|
||||
const validLinks = normalizeBatchLinks(analysisStore.url)
|
||||
|
||||
if (validLinks.length === 0) {
|
||||
throw new Error('未找到有效的单个视频链接（已忽略纯播放列表链接）。')
|
||||
}
|
||||
|
||||
const results: VideoMetadata[] = []
|
||||
|
||||
for (const link of validLinks) {
|
||||
try {
|
||||
const res = await invoke<AnalysisMetadata>('fetch_metadata', { url: link, parseMixPlaylist: false })
|
||||
if (!isPlaylistMetadata(res)) {
|
||||
results.push(res)
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn(`Failed to parse ${link}`, error)
|
||||
}
|
||||
|
||||
// Process playlist entries
|
||||
if (metadata.entries && Array.isArray(metadata.entries)) {
|
||||
await Promise.all(metadata.entries.map(async (entry: any) => {
|
||||
if (entry.thumbnail) {
|
||||
entry.thumbnail = await processThumbnail(entry.thumbnail);
|
||||
}
|
||||
}));
|
||||
}
|
||||
|
||||
if (results.length === 0) {
|
||||
throw new Error('所有链接解析失败或均为播放列表。')
|
||||
}
|
||||
|
||||
await Promise.all(results.map(result => processMetadataThumbnails(result)))
|
||||
|
||||
analysisStore.metadata = {
|
||||
id: `batch_download_${Date.now()}`,
|
||||
title: `批量解析结果 (${results.length} 个视频)`,
|
||||
entries: toSelectableEntries(results)
|
||||
}
|
||||
}
|
||||
|
||||
async function analyzeSingleLink() {
|
||||
let urlToScan = analysisStore.url
|
||||
let parseMix = false
|
||||
|
||||
if (analysisStore.isMix) {
|
||||
if (analysisStore.scanMix) {
|
||||
parseMix = true
|
||||
} else {
|
||||
urlToScan = stripPlaylistContext(urlToScan)
|
||||
}
|
||||
}
|
||||
|
||||
const res = await invoke<AnalysisMetadata>('fetch_metadata', { url: urlToScan, parseMixPlaylist: parseMix })
|
||||
await processMetadataThumbnails(res)
|
||||
|
||||
if (isPlaylistMetadata(res)) {
|
||||
res.entries = toSelectableEntries(res.entries)
|
||||
}
|
||||
|
||||
analysisStore.metadata = res
|
||||
}
|
||||
|
||||
async function analyze() {
|
||||
if (!analysisStore.url) return
|
||||
|
||||
analysisStore.loading = true
|
||||
analysisStore.error = ''
|
||||
analysisStore.metadata = null
|
||||
|
||||
|
||||
try {
|
||||
if (analysisStore.isBatchMode) {
|
||||
// Batch Mode Logic
|
||||
const lines = analysisStore.url.split('\n').map(l => l.trim()).filter(l => l);
|
||||
const validLinks = lines.filter(l => {
|
||||
if (!(l.startsWith('http://') || l.startsWith('https://'))) return false;
|
||||
|
||||
// Allow if it has NO list param
|
||||
if (!l.includes('list=')) return true;
|
||||
|
||||
// Allow if it has list param BUT ALSO has v= (video in playlist/mix)
|
||||
if (l.includes('list=') && l.includes('v=')) return true;
|
||||
|
||||
// Otherwise ignore (pure playlist)
|
||||
return false;
|
||||
});
|
||||
|
||||
if (validLinks.length === 0) {
|
||||
throw new Error("未找到有效的单个视频链接（已忽略纯播放列表链接）。");
|
||||
}
|
||||
|
||||
const results: any[] = [];
|
||||
|
||||
// Process sequentially to be safe
|
||||
for (let link of validLinks) {
|
||||
try {
|
||||
// If it's a mix/playlist context (has v= and list=), strip the list param to treat as single video
|
||||
if (link.includes('list=') && link.includes('v=')) {
|
||||
try {
|
||||
const u = new URL(link);
|
||||
u.searchParams.delete('list');
|
||||
u.searchParams.delete('index');
|
||||
u.searchParams.delete('start_radio');
|
||||
link = u.toString();
|
||||
} catch (e) {
|
||||
link = link.replace(/&list=[^&]+/, '');
|
||||
}
|
||||
}
|
||||
|
||||
// Ensure we don't accidentally trigger mix parsing on single links if logic fails
|
||||
const res = await invoke<any>('fetch_metadata', { url: link, parseMixPlaylist: false });
|
||||
|
||||
// Only add if it's a single video (no entries)
|
||||
if (!res.entries) {
|
||||
results.push(res);
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn(`Failed to parse ${link}`, e);
|
||||
}
|
||||
}
|
||||
|
||||
if (results.length === 0) {
|
||||
throw new Error("所有链接解析失败或均为播放列表。");
|
||||
}
|
||||
|
||||
// Process thumbnails for batch results
|
||||
await Promise.all(results.map(r => processMetadataThumbnails(r)));
|
||||
|
||||
// Construct synthetic playlist
|
||||
analysisStore.metadata = {
|
||||
id: 'batch_download_' + Date.now(),
|
||||
title: `批量解析结果 (${results.length} 个视频)`,
|
||||
entries: results.map(e => ({ ...e, selected: true }))
|
||||
};
|
||||
|
||||
await analyzeBatchLinks()
|
||||
} else {
|
||||
// Single Link Mode
|
||||
let urlToScan = analysisStore.url;
|
||||
let parseMix = false;
|
||||
|
||||
if (analysisStore.isMix) {
|
||||
if (analysisStore.scanMix) {
|
||||
// Keep URL as is, tell backend to limit scan
|
||||
parseMix = true;
|
||||
} else {
|
||||
// Strip list param
|
||||
try {
|
||||
const u = new URL(urlToScan);
|
||||
u.searchParams.delete('list');
|
||||
u.searchParams.delete('index');
|
||||
u.searchParams.delete('start_radio');
|
||||
urlToScan = u.toString();
|
||||
} catch (e) {
|
||||
// Fallback regex if URL parsing fails
|
||||
urlToScan = urlToScan.replace(/&list=[^&]+/, '');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const res = await invoke<any>('fetch_metadata', { url: urlToScan, parseMixPlaylist: parseMix })
|
||||
|
||||
await processMetadataThumbnails(res);
|
||||
|
||||
// Initialize selected state for playlist entries
|
||||
if (res.entries) {
|
||||
res.entries = res.entries.map((e: any) => ({ ...e, selected: true }))
|
||||
}
|
||||
|
||||
analysisStore.metadata = res
|
||||
await analyzeSingleLink()
|
||||
}
|
||||
} catch (e: any) {
|
||||
analysisStore.error = e.toString()
|
||||
} catch (error: unknown) {
|
||||
analysisStore.error = error instanceof Error ? error.message : String(error)
|
||||
} finally {
|
||||
analysisStore.loading = false
|
||||
}
|
||||
@@ -208,78 +183,63 @@ async function analyze() {
|
||||
|
||||
async function startDownload() {
|
||||
if (!analysisStore.metadata) return
|
||||
|
||||
// Ensure path is set
|
||||
|
||||
if (!analysisStore.options.output_path) {
|
||||
analysisStore.options.output_path = settingsStore.settings.download_path
|
||||
analysisStore.options.output_path = settingsStore.settings.download_path
|
||||
}
|
||||
|
||||
// Ensure cookies path is set from settings
|
||||
analysisStore.options.cookies_path = settingsStore.settings.cookies_path || ''
|
||||
|
||||
try {
|
||||
if (analysisStore.metadata.entries) {
|
||||
// Playlist Download
|
||||
const selectedEntries = analysisStore.metadata.entries.filter((e: any) => e.selected)
|
||||
|
||||
if (selectedEntries.length === 0) {
|
||||
analysisStore.error = "请至少选择一个要下载的视频。"
|
||||
return
|
||||
}
|
||||
if (playlistMetadata.value) {
|
||||
const selectedEntries = playlistMetadata.value.entries.filter(entry => entry.selected)
|
||||
|
||||
for (const entry of selectedEntries) {
|
||||
const videoUrl = entry.url || `https://www.youtube.com/watch?v=${entry.id}`
|
||||
const id = await invoke<string>('start_download', {
|
||||
url: videoUrl,
|
||||
options: analysisStore.options,
|
||||
metadata: entry // Pass the individual video metadata
|
||||
})
|
||||
if (selectedEntries.length === 0) {
|
||||
analysisStore.error = '请至少选择一个要下载的视频。'
|
||||
return
|
||||
}
|
||||
|
||||
queueStore.addTask({
|
||||
id,
|
||||
title: entry.title,
|
||||
thumbnail: entry.thumbnail,
|
||||
progress: 0,
|
||||
speed: '等待中...',
|
||||
status: 'pending'
|
||||
})
|
||||
}
|
||||
} else {
|
||||
// Single Video Download
|
||||
let urlToDownload = analysisStore.url;
|
||||
// Clean URL if it was a mix but we didn't scan it as one
|
||||
if (analysisStore.isMix && !analysisStore.scanMix) {
|
||||
try {
|
||||
const u = new URL(urlToDownload);
|
||||
u.searchParams.delete('list');
|
||||
u.searchParams.delete('index');
|
||||
u.searchParams.delete('start_radio');
|
||||
urlToDownload = u.toString();
|
||||
} catch (e) {
|
||||
urlToDownload = urlToDownload.replace(/&list=[^&]+/, '');
|
||||
}
|
||||
}
|
||||
|
||||
const id = await invoke<string>('start_download', {
|
||||
url: urlToDownload,
|
||||
options: analysisStore.options,
|
||||
metadata: analysisStore.metadata
|
||||
for (const entry of selectedEntries) {
|
||||
const videoUrl = entry.url || `https://www.youtube.com/watch?v=${entry.id}`
|
||||
const id = await invoke<string>('start_download', {
|
||||
url: videoUrl,
|
||||
options: analysisStore.options,
|
||||
metadata: entry
|
||||
})
|
||||
|
||||
queueStore.addTask({
|
||||
id,
|
||||
title: analysisStore.metadata.title,
|
||||
thumbnail: analysisStore.metadata.thumbnail,
|
||||
progress: 0,
|
||||
speed: '等待中...',
|
||||
status: 'pending'
|
||||
})
|
||||
queueStore.addTask({
|
||||
id,
|
||||
title: entry.title,
|
||||
thumbnail: entry.thumbnail,
|
||||
progress: 0,
|
||||
speed: '等待中...',
|
||||
status: 'pending'
|
||||
})
|
||||
}
|
||||
|
||||
// Reset state after successful download start
|
||||
analysisStore.reset()
|
||||
} catch (e: any) {
|
||||
analysisStore.error = "下载启动失败： " + e.toString()
|
||||
} else if (singleMetadata.value) {
|
||||
const urlToDownload = analysisStore.isMix && !analysisStore.scanMix
|
||||
? stripPlaylistContext(analysisStore.url)
|
||||
: analysisStore.url
|
||||
|
||||
const id = await invoke<string>('start_download', {
|
||||
url: urlToDownload,
|
||||
options: analysisStore.options,
|
||||
metadata: singleMetadata.value
|
||||
})
|
||||
|
||||
queueStore.addTask({
|
||||
id,
|
||||
title: singleMetadata.value.title,
|
||||
thumbnail: singleMetadata.value.thumbnail,
|
||||
progress: 0,
|
||||
speed: '等待中...',
|
||||
status: 'pending'
|
||||
})
|
||||
}
|
||||
|
||||
analysisStore.reset()
|
||||
} catch (error: unknown) {
|
||||
analysisStore.error = `下载启动失败： ${error instanceof Error ? error.message : String(error)}`
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -288,253 +248,223 @@ async function startDownload() {
|
||||
<div class="max-w-5xl mx-auto p-8">
|
||||
<header class="mb-8">
|
||||
<h1 class="text-3xl font-bold text-zinc-900 dark:text-white">新建下载</h1>
|
||||
<!-- <p class="text-gray-500 dark:text-gray-400 mt-2">粘贴 URL 开始下载媒体。</p> -->
|
||||
</header>
|
||||
|
||||
<!-- Input Section -->
|
||||
<div class="bg-white dark:bg-zinc-900 p-6 rounded-2xl shadow-sm border border-gray-200 dark:border-zinc-800 mb-8">
|
||||
|
||||
<!-- Input Area with Batch Toggle -->
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="flex justify-end mb-1">
|
||||
<button
|
||||
@click="analysisStore.isBatchMode = !analysisStore.isBatchMode"
|
||||
class="text-xs font-medium flex items-center gap-1.5 px-3 py-1.5 rounded-lg transition-colors"
|
||||
:class="analysisStore.isBatchMode ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400' : 'bg-gray-100 text-gray-600 dark:bg-zinc-800 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-zinc-700'"
|
||||
>
|
||||
<List v-if="analysisStore.isBatchMode" class="w-3.5 h-3.5" />
|
||||
<Link v-else class="w-3.5 h-3.5" />
|
||||
{{ analysisStore.isBatchMode ? '单链接模式' : '批量输入模式' }}
|
||||
</button>
|
||||
<button
|
||||
@click="analysisStore.isBatchMode = !analysisStore.isBatchMode"
|
||||
class="text-xs font-medium flex items-center gap-1.5 px-3 py-1.5 rounded-lg transition-colors"
|
||||
:class="analysisStore.isBatchMode ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400' : 'bg-gray-100 text-gray-600 dark:bg-zinc-800 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-zinc-700'"
|
||||
>
|
||||
<List v-if="analysisStore.isBatchMode" class="w-3.5 h-3.5" />
|
||||
<Link v-else class="w-3.5 h-3.5" />
|
||||
{{ analysisStore.isBatchMode ? '单链接模式' : '批量输入模式' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4 items-start">
|
||||
<div class="flex-1 relative">
|
||||
<textarea
|
||||
v-if="analysisStore.isBatchMode"
|
||||
v-model="analysisStore.url"
|
||||
placeholder="每行输入一个链接..."
|
||||
rows="5"
|
||||
class="w-full bg-gray-50 dark:bg-zinc-800 border-none rounded-xl px-4 py-3 text-zinc-900 dark:text-white focus:ring-2 focus:ring-blue-500 outline-none resize-none font-mono text-sm leading-relaxed"
|
||||
></textarea>
|
||||
<input
|
||||
v-else
|
||||
v-model="analysisStore.url"
|
||||
type="text"
|
||||
placeholder="https://..."
|
||||
class="w-full bg-gray-50 dark:bg-zinc-800 border-none rounded-xl px-4 py-3 text-zinc-900 dark:text-white focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
@keyup.enter="analyze"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
@click="analyze"
|
||||
:disabled="analysisStore.loading"
|
||||
class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-xl font-medium transition-colors disabled:opacity-50 flex items-center gap-2 shrink-0 h-[48px]"
|
||||
>
|
||||
<Loader2 v-if="analysisStore.loading" class="animate-spin w-5 h-5" />
|
||||
<span v-else>解析</span>
|
||||
</button>
|
||||
<div class="flex-1 relative">
|
||||
<textarea
|
||||
v-if="analysisStore.isBatchMode"
|
||||
v-model="analysisStore.url"
|
||||
placeholder="每行输入一个链接..."
|
||||
rows="5"
|
||||
class="w-full bg-gray-50 dark:bg-zinc-800 border-none rounded-xl px-4 py-3 text-zinc-900 dark:text-white focus:ring-2 focus:ring-blue-500 outline-none resize-none font-mono text-sm leading-relaxed"
|
||||
></textarea>
|
||||
<input
|
||||
v-else
|
||||
v-model="analysisStore.url"
|
||||
type="text"
|
||||
placeholder="https://..."
|
||||
class="w-full bg-gray-50 dark:bg-zinc-800 border-none rounded-xl px-4 py-3 text-zinc-900 dark:text-white focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
@keyup.enter="analyze"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
@click="analyze"
|
||||
:disabled="analysisStore.loading"
|
||||
class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-xl font-medium transition-colors disabled:opacity-50 flex items-center gap-2 shrink-0 h-[48px]"
|
||||
>
|
||||
<Loader2 v-if="analysisStore.loading" class="animate-spin w-5 h-5" />
|
||||
<span v-else>解析</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mix Toggle (Only in Single Mode) -->
|
||||
|
||||
<div v-if="!analysisStore.isBatchMode && analysisStore.isMix" class="mt-4 flex items-center gap-3">
|
||||
<button
|
||||
@click="analysisStore.scanMix = !analysisStore.scanMix"
|
||||
class="w-12 h-6 rounded-full relative transition-colors duration-200 ease-in-out flex-shrink-0"
|
||||
:class="analysisStore.scanMix ? 'bg-blue-600' : 'bg-gray-300 dark:bg-zinc-600'"
|
||||
>
|
||||
<span
|
||||
class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform duration-200"
|
||||
:class="analysisStore.scanMix ? 'translate-x-6' : 'translate-x-0'"
|
||||
/>
|
||||
</button>
|
||||
<span class="text-sm font-medium text-zinc-700 dark:text-gray-300">解析播放列表 (前20项)</span>
|
||||
<button
|
||||
@click="analysisStore.scanMix = !analysisStore.scanMix"
|
||||
class="w-12 h-6 rounded-full relative transition-colors duration-200 ease-in-out flex-shrink-0"
|
||||
:class="analysisStore.scanMix ? 'bg-blue-600' : 'bg-gray-300 dark:bg-zinc-600'"
|
||||
>
|
||||
<span
|
||||
class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform duration-200"
|
||||
:class="analysisStore.scanMix ? 'translate-x-6' : 'translate-x-0'"
|
||||
/>
|
||||
</button>
|
||||
<span class="text-sm font-medium text-zinc-700 dark:text-gray-300">解析播放列表 (前20项)</span>
|
||||
</div>
|
||||
|
||||
<p v-if="analysisStore.error" class="mt-3 text-red-500 text-sm">{{ analysisStore.error }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Analysis Result -->
|
||||
<div v-if="analysisStore.metadata" class="bg-white dark:bg-zinc-900 rounded-2xl shadow-sm border border-gray-200 dark:border-zinc-800 overflow-hidden mb-8">
|
||||
|
||||
<!-- Playlist Header / Global Controls -->
|
||||
<div v-if="analysisStore.metadata.entries" class="p-6 border-b border-gray-200 dark:border-zinc-800">
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h2 class="text-xl font-bold text-zinc-900 dark:text-white">{{ analysisStore.metadata.title }}</h2>
|
||||
<p class="text-blue-500 mt-1 font-medium">{{ analysisStore.metadata.entries.length }} 个视频</p>
|
||||
</div>
|
||||
<div v-if="playlistMetadata" class="p-6 border-b border-gray-200 dark:border-zinc-800">
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h2 class="text-xl font-bold text-zinc-900 dark:text-white">{{ playlistMetadata.title }}</h2>
|
||||
<p class="text-blue-500 mt-1 font-medium">{{ playlistMetadata.entries.length }} 个视频</p>
|
||||
</div>
|
||||
|
||||
<!-- Global Options Bar -->
|
||||
<div class="flex flex-col md:flex-row items-center justify-between gap-4 bg-gray-50 dark:bg-zinc-800/50 p-4 rounded-xl">
|
||||
|
||||
<!-- Left: Selection Controls -->
|
||||
<div class="flex items-center gap-2 w-full md:w-auto">
|
||||
<button @click="analysisStore.setAllEntries(true)" class="text-base font-medium px-3 py-1.5 rounded-lg bg-white dark:bg-zinc-700 hover:bg-gray-100 dark:hover:bg-zinc-600 text-zinc-700 dark:text-gray-200 border border-gray-200 dark:border-zinc-600 transition-colors shadow-sm">全选</button>
|
||||
<button @click="analysisStore.setAllEntries(false)" class="text-base font-medium px-3 py-1.5 rounded-lg bg-white dark:bg-zinc-700 hover:bg-gray-100 dark:hover:bg-zinc-600 text-zinc-700 dark:text-gray-200 border border-gray-200 dark:border-zinc-600 transition-colors shadow-sm">取消全选</button>
|
||||
<button @click="analysisStore.invertSelection()" class="text-base font-medium px-3 py-1.5 rounded-lg bg-white dark:bg-zinc-700 hover:bg-gray-100 dark:hover:bg-zinc-600 text-zinc-700 dark:text-gray-200 border border-gray-200 dark:border-zinc-600 transition-colors shadow-sm">反选</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Settings -->
|
||||
<div class="flex items-center gap-6 w-full md:w-auto justify-end">
|
||||
<!-- Audio Only Toggle -->
|
||||
<div class="flex items-center gap-x-4 p-3 bg-gray-50 dark:bg-zinc-800 rounded-xl">
|
||||
<span class="font-medium text-base text-zinc-700 dark:text-gray-300">仅音频</span>
|
||||
<button
|
||||
@click="analysisStore.options.is_audio_only = !analysisStore.options.is_audio_only"
|
||||
class="w-12 h-6 rounded-full relative transition-colors duration-200 ease-in-out"
|
||||
:class="analysisStore.options.is_audio_only ? 'bg-blue-600' : 'bg-gray-300 dark:bg-zinc-600'"
|
||||
>
|
||||
<span
|
||||
class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform duration-200"
|
||||
:class="analysisStore.options.is_audio_only ? 'translate-x-6' : 'translate-x-0'"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Quality Dropdown -->
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-44">
|
||||
<AppSelect
|
||||
v-model="analysisStore.options.quality"
|
||||
:options="qualityOptions"
|
||||
:disabled="analysisStore.options.is_audio_only"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Format Dropdown -->
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-48">
|
||||
<AppSelect
|
||||
v-model="analysisStore.options.output_format"
|
||||
:options="analysisStore.options.is_audio_only ? audioFormatOptions : videoFormatOptions"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col md:flex-row items-center justify-between gap-4 bg-gray-50 dark:bg-zinc-800/50 p-4 rounded-xl">
|
||||
<div class="flex items-center gap-2 w-full md:w-auto">
|
||||
<button @click="analysisStore.setAllEntries(true)" class="text-base font-medium px-3 py-1.5 rounded-lg bg-white dark:bg-zinc-700 hover:bg-gray-100 dark:hover:bg-zinc-600 text-zinc-700 dark:text-gray-200 border border-gray-200 dark:border-zinc-600 transition-colors shadow-sm">全选</button>
|
||||
<button @click="analysisStore.setAllEntries(false)" class="text-base font-medium px-3 py-1.5 rounded-lg bg-white dark:bg-zinc-700 hover:bg-gray-100 dark:hover:bg-zinc-600 text-zinc-700 dark:text-gray-200 border border-gray-200 dark:border-zinc-600 transition-colors shadow-sm">取消全选</button>
|
||||
<button @click="analysisStore.invertSelection()" class="text-base font-medium px-3 py-1.5 rounded-lg bg-white dark:bg-zinc-700 hover:bg-gray-100 dark:hover:bg-zinc-600 text-zinc-700 dark:text-gray-200 border border-gray-200 dark:border-zinc-600 transition-colors shadow-sm">反选</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Video List (Playlist Mode) -->
|
||||
<div v-if="analysisStore.metadata.entries" class="max-h-[500px] overflow-y-auto p-2 space-y-2 bg-gray-50/50 dark:bg-black/20">
|
||||
<div
|
||||
v-for="entry in analysisStore.metadata.entries"
|
||||
:key="entry.id"
|
||||
class="flex items-center gap-4 p-3 rounded-xl hover:bg-white dark:hover:bg-zinc-800 transition-colors border border-transparent hover:border-gray-200 dark:hover:border-zinc-700 group"
|
||||
:class="entry.selected ? 'opacity-100' : 'opacity-60 grayscale'"
|
||||
>
|
||||
<!-- Checkbox -->
|
||||
<button
|
||||
@click="entry.selected = !entry.selected"
|
||||
class="w-6 h-6 rounded-lg border-2 flex items-center justify-center transition-colors shrink-0"
|
||||
:class="entry.selected ? 'bg-blue-600 border-blue-600 text-white' : 'border-gray-300 dark:border-zinc-600 hover:border-blue-400'"
|
||||
<div class="flex items-center gap-6 w-full md:w-auto justify-end">
|
||||
<div class="flex items-center gap-x-4 p-3 bg-gray-50 dark:bg-zinc-800 rounded-xl">
|
||||
<span class="font-medium text-base text-zinc-700 dark:text-gray-300">仅音频</span>
|
||||
<button
|
||||
@click="analysisStore.options.is_audio_only = !analysisStore.options.is_audio_only"
|
||||
class="w-12 h-6 rounded-full relative transition-colors duration-200 ease-in-out"
|
||||
:class="analysisStore.options.is_audio_only ? 'bg-blue-600' : 'bg-gray-300 dark:bg-zinc-600'"
|
||||
>
|
||||
<svg v-if="entry.selected" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span
|
||||
class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform duration-200"
|
||||
:class="analysisStore.options.is_audio_only ? 'translate-x-6' : 'translate-x-0'"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Thumb -->
|
||||
<img :src="entry.thumbnail || '/placeholder.png'" class="w-24 h-14 object-cover rounded-lg bg-gray-200 dark:bg-zinc-700 shrink-0" />
|
||||
|
||||
<!-- Info -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<h4 class="font-medium text-zinc-900 dark:text-white truncate text-sm" :title="entry.title">{{ entry.title }}</h4>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{{ entry.duration ? Math.floor(entry.duration / 60) + ':' + String(Math.floor(entry.duration % 60)).padStart(2, '0') : '' }}
|
||||
<span v-if="entry.uploader" class="mx-1">•</span> {{ entry.uploader }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Single Video Layout -->
|
||||
<div v-else class="p-6 flex flex-col md:flex-row gap-6">
|
||||
<!-- Thumbnail -->
|
||||
<img :src="analysisStore.metadata.thumbnail || '/placeholder.png'" class="w-full md:w-64 aspect-video object-cover rounded-lg bg-gray-100 dark:bg-zinc-800" />
|
||||
|
||||
<!-- Details -->
|
||||
<div class="flex-1">
|
||||
<h2 class="text-xl font-bold text-zinc-900 dark:text-white line-clamp-2">{{ analysisStore.metadata.title }}</h2>
|
||||
<p v-if="analysisStore.metadata.uploader" class="text-gray-500 dark:text-gray-400 mt-1">{{ analysisStore.metadata.uploader }}</p>
|
||||
<p v-if="analysisStore.metadata.entries" class="text-blue-500 mt-1 font-medium">{{ analysisStore.metadata.entries.length }} 个视频 (播放列表)</p>
|
||||
|
||||
<!-- Options -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
|
||||
<!-- Audio Only Toggle -->
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-zinc-800 rounded-xl">
|
||||
<span class="font-medium text-base">仅音频</span>
|
||||
<button
|
||||
@click="analysisStore.options.is_audio_only = !analysisStore.options.is_audio_only"
|
||||
class="w-12 h-6 rounded-full relative transition-colors duration-200 ease-in-out"
|
||||
:class="analysisStore.options.is_audio_only ? 'bg-blue-600' : 'bg-gray-300 dark:bg-zinc-600'"
|
||||
>
|
||||
<span
|
||||
class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform duration-200"
|
||||
:class="analysisStore.options.is_audio_only ? 'translate-x-6' : 'translate-x-0'"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Quality Dropdown -->
|
||||
<div class="relative">
|
||||
<AppSelect
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-44">
|
||||
<AppSelect
|
||||
v-model="analysisStore.options.quality"
|
||||
:options="qualityOptions"
|
||||
:disabled="analysisStore.options.is_audio_only"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Format Dropdown -->
|
||||
<div class="relative">
|
||||
<AppSelect
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-48">
|
||||
<AppSelect
|
||||
v-model="analysisStore.options.output_format"
|
||||
:options="analysisStore.options.is_audio_only ? audioFormatOptions : videoFormatOptions"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="playlistMetadata" class="max-h-[500px] overflow-y-auto p-2 space-y-2 bg-gray-50/50 dark:bg-black/20">
|
||||
<div
|
||||
v-for="entry in playlistMetadata.entries"
|
||||
:key="entry.id"
|
||||
class="flex items-center gap-4 p-3 rounded-xl hover:bg-white dark:hover:bg-zinc-800 transition-colors border border-transparent hover:border-gray-200 dark:hover:border-zinc-700 group"
|
||||
:class="entry.selected ? 'opacity-100' : 'opacity-60 grayscale'"
|
||||
>
|
||||
<button
|
||||
@click="entry.selected = !entry.selected"
|
||||
class="w-6 h-6 rounded-lg border-2 flex items-center justify-center transition-colors shrink-0"
|
||||
:class="entry.selected ? 'bg-blue-600 border-blue-600 text-white' : 'border-gray-300 dark:border-zinc-600 hover:border-blue-400'"
|
||||
>
|
||||
<svg v-if="entry.selected" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<img :src="entry.thumbnail || '/placeholder.png'" class="w-24 h-14 object-cover rounded-lg bg-gray-200 dark:bg-zinc-700 shrink-0" />
|
||||
|
||||
<div class="flex-1 min-w-0">
|
||||
<h4 class="font-medium text-zinc-900 dark:text-white truncate text-sm" :title="entry.title">{{ entry.title }}</h4>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{{ entry.duration ? Math.floor(entry.duration / 60) + ':' + String(Math.floor(entry.duration % 60)).padStart(2, '0') : '' }}
|
||||
<span v-if="entry.uploader" class="mx-1">•</span> {{ entry.uploader }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="singleMetadata" class="p-6 flex flex-col md:flex-row gap-6">
|
||||
<img :src="singleMetadata.thumbnail || '/placeholder.png'" class="w-full md:w-64 aspect-video object-cover rounded-lg bg-gray-100 dark:bg-zinc-800" />
|
||||
|
||||
<div class="flex-1">
|
||||
<h2 class="text-xl font-bold text-zinc-900 dark:text-white line-clamp-2">{{ singleMetadata.title }}</h2>
|
||||
<p v-if="singleMetadata.uploader" class="text-gray-500 dark:text-gray-400 mt-1">{{ singleMetadata.uploader }}</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-zinc-800 rounded-xl">
|
||||
<span class="font-medium text-base">仅音频</span>
|
||||
<button
|
||||
@click="analysisStore.options.is_audio_only = !analysisStore.options.is_audio_only"
|
||||
class="w-12 h-6 rounded-full relative transition-colors duration-200 ease-in-out"
|
||||
:class="analysisStore.options.is_audio_only ? 'bg-blue-600' : 'bg-gray-300 dark:bg-zinc-600'"
|
||||
>
|
||||
<span
|
||||
class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform duration-200"
|
||||
:class="analysisStore.options.is_audio_only ? 'translate-x-6' : 'translate-x-0'"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<AppSelect
|
||||
v-model="analysisStore.options.quality"
|
||||
:options="qualityOptions"
|
||||
:disabled="analysisStore.options.is_audio_only"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<AppSelect
|
||||
v-model="analysisStore.options.output_format"
|
||||
:options="analysisStore.options.is_audio_only ? audioFormatOptions : videoFormatOptions"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-6 py-4 bg-gray-50 dark:bg-zinc-800/50 border-t border-gray-200 dark:border-zinc-800 flex justify-end">
|
||||
<button
|
||||
@click="startDownload"
|
||||
class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-xl font-bold transition-colors shadow-lg shadow-blue-600/20"
|
||||
>
|
||||
立即下载 {{ analysisStore.metadata.entries ? `(${analysisStore.metadata.entries.filter((e: any) => e.selected).length})` : '' }}
|
||||
</button>
|
||||
<button
|
||||
@click="startDownload"
|
||||
class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-xl font-bold transition-colors shadow-lg shadow-blue-600/20"
|
||||
>
|
||||
立即下载 {{ selectedCount > 0 ? `(${selectedCount})` : '' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Active Downloads -->
|
||||
<div v-if="queueStore.tasks.length > 0">
|
||||
<h3 class="text-lg font-bold mb-4">进行中的任务</h3>
|
||||
<div class="space-y-3">
|
||||
<!-- Reversed to show newest first -->
|
||||
<div v-for="task in queueStore.tasks.slice().reverse()" :key="task.id" class="bg-white dark:bg-zinc-900 p-4 rounded-xl border border-gray-200 dark:border-zinc-800 flex items-center gap-4">
|
||||
<img :src="task.thumbnail || '/placeholder.png'" class="w-16 h-16 object-cover rounded-lg bg-gray-100 dark:bg-zinc-800" />
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex justify-between mb-1">
|
||||
<h4 class="font-medium truncate pr-4">{{ task.title }}</h4>
|
||||
<span class="text-xs font-mono text-gray-500 whitespace-nowrap">
|
||||
{{ task.status === 'finished' ? '已完成' : (task.status === 'error' ? '失败' : task.speed) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="h-2 bg-gray-100 dark:bg-zinc-800 rounded-full overflow-hidden">
|
||||
<div
|
||||
class="h-full transition-all duration-300"
|
||||
:style="{ width: `${task.progress}%` }"
|
||||
:class="task.status === 'error' ? 'bg-red-500' : (task.status === 'finished' ? 'bg-green-500' : 'bg-blue-600')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold mb-4">进行中的任务</h3>
|
||||
<div class="space-y-3">
|
||||
<div v-for="task in queueStore.tasks.slice().reverse()" :key="task.id" class="bg-white dark:bg-zinc-900 p-4 rounded-xl border border-gray-200 dark:border-zinc-800 flex items-center gap-4">
|
||||
<img :src="task.thumbnail || '/placeholder.png'" class="w-16 h-16 object-cover rounded-lg bg-gray-100 dark:bg-zinc-800" />
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex justify-between mb-1">
|
||||
<h4 class="font-medium truncate pr-4">{{ task.title }}</h4>
|
||||
<span class="text-xs font-mono text-gray-500 whitespace-nowrap">
|
||||
{{ task.status === 'finished' ? '已完成' : (task.status === 'error' ? '失败' : task.speed) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="h-2 bg-gray-100 dark:bg-zinc-800 rounded-full overflow-hidden">
|
||||
<div
|
||||
class="h-full transition-all duration-300"
|
||||
:style="{ width: `${task.progress}%` }"
|
||||
:class="task.status === 'error' ? 'bg-red-500' : (task.status === 'finished' ? 'bg-green-500' : 'bg-blue-600')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user