TaskDetails.vue 89.7 KB
Newer Older
LiangLiu's avatar
LiangLiu committed
1
<script setup>
LiangLiu's avatar
LiangLiu committed
2
import { ref, watch, onMounted, onUnmounted, computed, nextTick } from 'vue'
LiangLiu's avatar
LiangLiu committed
3
4
5
6
7
import { showTaskDetailModal,
        modalTask,
        closeTaskDetailModal,
        cancelTask,
        reuseTask,
LiangLiu's avatar
LiangLiu committed
8
        handleDownloadFile,
LiangLiu's avatar
LiangLiu committed
9
10
        deleteTask,
        getTaskTypeName,
LiangLiu's avatar
LiangLiu committed
11
        showFailureDetails,
LiangLiu's avatar
LiangLiu committed
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
        formatTime,
        getTaskStatusDisplay,
        getStatusTextClass,
        getProgressTitle,
        getProgressInfo,
        getOverallProgress,
        getSubtaskStatusText,
        getSubtaskProgress,
        formatEstimatedTime,
        generateShareUrl,
        copyShareLink,
        shareToSocial,
        copyPrompt,
        getTaskFileUrlSync,
        getTaskFileFromCache,
        getTaskFileUrl,
28
        getTaskInputAudio,
LiangLiu's avatar
LiangLiu committed
29
        downloadLoading,
LiangLiu's avatar
LiangLiu committed
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
        showAlert,
        apiRequest,
        startPollingTask,
        resumeTask,
         } from '../utils/other'
import { useI18n } from 'vue-i18n'
import { useRoute, useRouter } from 'vue-router'
const { t, locale } = useI18n()
const route = useRoute()
const router = useRouter()

// 添加响应式变量
const showDetails = ref(false)
const loadingTaskFiles = ref(false)

45
46
47
// 音频播放器相关(支持多个音频)
const audioElements = ref({}) // 使用对象存储多个音频元素,key 为 inputName
const audioStates = ref({}) // 存储每个音频的状态,key 为 inputName
LiangLiu's avatar
LiangLiu committed
48
49
const currentAudioUrl = ref('')

50
51
52
// 音频素材 URL(响应式,支持异步加载)
const audioMaterials = ref([])

LiangLiu's avatar
LiangLiu committed
53
54
55
56
57
58
// 获取图片素材
const getImageMaterials = () => {
    if (!modalTask.value?.inputs?.input_image) return []
    return [['input_image', getTaskFileUrlSync(modalTask.value.task_id, 'input_image')]]
}

59
60
61
62
63
64
65
// 获取视频素材
const getVideoMaterials = () => {
    if (!modalTask.value?.inputs?.input_video) return []
    return [['input_video', getTaskFileUrlSync(modalTask.value.task_id, 'input_video')]]
}

// 获取音频素材(使用响应式 ref)
LiangLiu's avatar
LiangLiu committed
66
const getAudioMaterials = () => {
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
    return audioMaterials.value
}

// 根据任务类型获取应该显示的内容类型
const getVisibleMaterials = computed(() => {
    if (!modalTask.value?.task_type) {
        return { image: false, video: false, audio: false, prompt: false }
    }

    const taskType = modalTask.value.task_type

    // 根据任务类型定义应该显示的内容
    const visibilityMap = {
        't2v': {
            image: false,
            video: false,
            audio: false,
            prompt: true
        },
        'i2v': {
            image: true,
            video: false,
            audio: false,
            prompt: true
        },
        's2v': {
            image: true,
            video: false,
            audio: true,
            prompt: true
        },
        'animate': {
            image: true,
            video: true,
            audio: false,
            prompt: false  // animate 任务不显示 prompt
        }
    }

    return visibilityMap[taskType] || {
        image: true,
        video: false,
        audio: true,
        prompt: true
    }
})

// 异步加载音频素材 URL(支持目录模式)
const loadAudioMaterials = async () => {
    if (!modalTask.value?.inputs?.input_audio) {
        audioMaterials.value = []
        return
    }

    try {
        // 使用 getTaskInputAudio 来获取音频 URL,它会自动处理目录情况
        const audioUrl = await getTaskInputAudio(modalTask.value)
        if (audioUrl) {
            audioMaterials.value = [['input_audio', audioUrl]]
        } else {
            audioMaterials.value = []
        }
    } catch (error) {
        console.error('Failed to load audio materials:', error)
        audioMaterials.value = []
    }
LiangLiu's avatar
LiangLiu committed
133
134
135
136
137
138
}

// 路由关闭功能
const closeWithRoute = () => {
    closeTaskDetailModal()
    modalTask.value = null
LiangLiu's avatar
LiangLiu committed
139
140
141
142
143
144
145
146
147
    // 只有当前路由是 /task/:id 时才进行路由跳转
    // 如果在其他页面(如 /generate)打开的弹窗,关闭时保持在原页面
    if (route.path.startsWith('/task/')) {
        // 从任务详情路由进入的,返回到上一页或首页
        if (window.history.length > 1) {
            router.go(-1)
        } else {
            router.push('/')
        }
LiangLiu's avatar
LiangLiu committed
148
    }
LiangLiu's avatar
LiangLiu committed
149
    // 如果不是任务详情路由,不做任何路由跳转,保持在当前页面
LiangLiu's avatar
LiangLiu committed
150
151
}

LiangLiu's avatar
LiangLiu committed
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
// 滚动到生成区域(仅在 generate 页面)
const scrollToCreationArea = () => {
    const mainScrollable = document.querySelector('.main-scrollbar')
    if (mainScrollable) {
        mainScrollable.scrollTo({
            top: 0,
            behavior: 'smooth'
        })
    }
}

// 包装 reuseTask 函数,复用任务后回到生成区域
const handleReuseTask = () => {
    const task = modalTask.value
    if (!task) {
        return
    }
    void reuseTask(task)
    if (route.path === '/generate' || route.name === 'Generate') {
        setTimeout(() => {
            scrollToCreationArea()
        }, 300)
    }
}

LiangLiu's avatar
LiangLiu committed
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
// 键盘事件处理
const handleKeydown = (event) => {
    if (event.key === 'Escape' && showTaskDetailModal.value) {
        closeWithRoute()
    }
}

// 获取文件扩展名
const getFileExtension = (fileKey) => {
    if (fileKey.includes('video')) return 'mp4'
    if (fileKey.includes('image')) return 'jpg'
    if (fileKey.includes('audio')) return 'mp3'
    return 'file'
}


const getTaskFailureInfo = (task) => {
                if (!task) return null;

                // 检查子任务的失败信息
                if (!task.fail_msg && task.subtasks && task.subtasks.length > 0) {
                    const failedSubtasks = task.subtasks.filter(subtask =>
                        (subtask.extra_info && subtask.extra_info.fail_msg) || subtask.fail_msg
                    );
                    if (failedSubtasks.length > 0) {
                        const msg = failedSubtasks.map(subtask =>
                            (subtask.extra_info && subtask.extra_info.fail_msg) || subtask.fail_msg
                        ).join('\n');
                        task.fail_msg = msg;
                    }
                }
                console.log('task.fail_msg', task.fail_msg);
                return task.fail_msg;
            };

const viewTaskDetail = async (task) => {
    try {
        const response = await apiRequest(`/api/v1/task/query?task_id=${task.task_id}`);
        console.log('viewTaskDetail: response=', response);
        if (response && response.ok) {
            modalTask.value = await response.json();
            console.log('updated task data:', modalTask.value);
        }
    } catch (error) {
        console.warn(`Failed to fetch updated task data: task_id=${task.task_id}`, error.message);
    }
    // 如果任务还在进行中,开始轮询状态
    if (['CREATED', 'PENDING', 'RUNNING'].includes(task.status)) {

        startPollingTask(task.task_id);
    }
    if (['FAILED'].includes(task.status)) {
        modalTask.value.fail_msg = getTaskFailureInfo(task);
    }
};

// 监听modalTask的第一次变化,确保任务详情正确加载
const hasLoadedTask = ref(false);
235
watch(modalTask, async (newTask) => {
LiangLiu's avatar
LiangLiu committed
236
237
238
239
240
    if (newTask && !hasLoadedTask.value) {
        console.log('modalTask第一次变化,加载任务详情:', newTask);
        viewTaskDetail(newTask);
        hasLoadedTask.value = true;
    }
241
242
243
244
    // 加载音频素材(支持目录模式)
    if (newTask) {
        await loadAudioMaterials();
    }
LiangLiu's avatar
LiangLiu committed
245
246
247
248
249
250
251
252
253
254
}, { immediate: true });

// 生命周期钩子
onMounted(async () => {
    document.addEventListener('keydown', handleKeydown)
    console.log('TaskDetails组件已挂载,当前modalTask:', modalTask.value);
})

onUnmounted(() => {
    document.removeEventListener('keydown', handleKeydown)
255
256
257
258
259
260
261
262
    // 清理所有音频资源
    Object.values(audioElements.value).forEach(audio => {
        if (audio) {
            audio.pause()
        }
    })
    audioElements.value = {}
    audioStates.value = {}
LiangLiu's avatar
LiangLiu committed
263
})
LiangLiu's avatar
LiangLiu committed
264
265
266
267
268
269
270
271
272

// 格式化音频时间
const formatAudioTime = (seconds) => {
    if (!seconds || isNaN(seconds)) return '0:00'
    const mins = Math.floor(seconds / 60)
    const secs = Math.floor(seconds % 60)
    return `${mins}:${secs.toString().padStart(2, '0')}`
}

273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
// 设置音频元素 ref(安全版本)
const setAudioElement = (inputName, el) => {
    if (!audioElements.value) {
        audioElements.value = {}
    }
    if (el) {
        audioElements.value[inputName] = el
    } else if (audioElements.value[inputName]) {
        // 元素被卸载时,清理 ref
        delete audioElements.value[inputName]
    }
}

// 获取音频元素
const getAudioElement = (inputName) => {
    if (!audioElements.value) {
        audioElements.value = {}
    }
    return audioElements.value[inputName]
}

// 获取音频状态
const getAudioState = (inputName) => {
    if (!audioStates.value) {
        audioStates.value = {}
    }
    if (!audioStates.value[inputName]) {
        audioStates.value[inputName] = {
            isPlaying: false,
            duration: 0,
            currentTime: 0,
            isDragging: false
        }
    }
    return audioStates.value[inputName]
LiangLiu's avatar
LiangLiu committed
308
309
310
}

// 切换播放/暂停
311
312
313
314
315
316
317
318
const toggleAudioPlayback = (inputName) => {
    const audio = getAudioElement(inputName)
    if (!audio) {
        console.warn('Audio element not found for:', inputName)
        return
    }

    const state = getAudioState(inputName)
LiangLiu's avatar
LiangLiu committed
319
320
321

    if (audio.paused) {
        audio.play().catch(error => {
322
323
            console.error('播放失败:', error)
            showAlert(t('audioPlaybackFailed') + ': ' + error.message, 'error')
LiangLiu's avatar
LiangLiu committed
324
325
326
327
328
329
330
        })
    } else {
        audio.pause()
    }
}

// 音频加载完成
331
332
333
334
335
const onAudioLoaded = (inputName) => {
    const audio = getAudioElement(inputName)
    const state = getAudioState(inputName)
    if (audio && state) {
        state.duration = audio.duration || 0
LiangLiu's avatar
LiangLiu committed
336
337
338
339
    }
}

// 时间更新
340
341
342
343
344
const onTimeUpdate = (inputName) => {
    const audio = getAudioElement(inputName)
    const state = getAudioState(inputName)
    if (audio && state && !state.isDragging) {
        state.currentTime = audio.currentTime || 0
LiangLiu's avatar
LiangLiu committed
345
346
347
348
    }
}

// 进度条变化处理
349
350
351
352
const onProgressChange = (event, inputName) => {
    const audio = getAudioElement(inputName)
    const state = getAudioState(inputName)
    if (state && state.duration > 0 && audio && event.target) {
LiangLiu's avatar
LiangLiu committed
353
        const newTime = parseFloat(event.target.value)
354
        state.currentTime = newTime
LiangLiu's avatar
LiangLiu committed
355
356
357
358
359
        audio.currentTime = newTime
    }
}

// 进度条拖拽结束处理
360
361
362
363
const onProgressEnd = (event, inputName) => {
    const audio = getAudioElement(inputName)
    const state = getAudioState(inputName)
    if (audio && state && state.duration > 0 && event.target) {
LiangLiu's avatar
LiangLiu committed
364
365
        const newTime = parseFloat(event.target.value)
        audio.currentTime = newTime
366
367
368
369
        state.currentTime = newTime
    }
    if (state) {
        state.isDragging = false
LiangLiu's avatar
LiangLiu committed
370
371
372
373
    }
}

// 播放结束
374
375
376
377
378
379
const onAudioEnded = (inputName) => {
    const state = getAudioState(inputName)
    if (state) {
        state.isPlaying = false
        state.currentTime = 0
    }
LiangLiu's avatar
LiangLiu committed
380
381
382
}

// 监听音频URL变化
383
watch(audioMaterials, (newMaterials) => {
LiangLiu's avatar
LiangLiu committed
384
385
    if (newMaterials && newMaterials.length > 0) {
        currentAudioUrl.value = newMaterials[0][1]
386
387
388
389
390
391
392
393
394
395
396
397
398
        // 确保 audioStates.value 存在
        if (!audioStates.value) {
            audioStates.value = {}
        }
        // 为每个音频初始化状态
        newMaterials.forEach(([inputName, url]) => {
            if (!audioStates.value[inputName]) {
                audioStates.value[inputName] = {
                    isPlaying: false,
                    duration: 0,
                    currentTime: 0,
                    isDragging: false
                }
LiangLiu's avatar
LiangLiu committed
399
400
            }
        })
401
402
403
404
405
406
407
408
409
        // 加载所有音频
        nextTick(() => {
            newMaterials.forEach(([inputName]) => {
                const audio = getAudioElement(inputName)
                if (audio) {
                    audio.load()
                }
            })
        })
LiangLiu's avatar
LiangLiu committed
410
411
    } else {
        currentAudioUrl.value = ''
412
        audioStates.value = {}
LiangLiu's avatar
LiangLiu committed
413
414
    }
}, { immediate: true })
LiangLiu's avatar
LiangLiu committed
415
416
</script>
<template>
LiangLiu's avatar
LiangLiu committed
417
            <!-- 任务详情弹窗 - Apple 极简风格 -->
LiangLiu's avatar
LiangLiu committed
418
419
            <div v-cloak>
                <div v-if="showTaskDetailModal"
LiangLiu's avatar
LiangLiu committed
420
                    class="fixed inset-0 bg-black/50 dark:bg-black/60 backdrop-blur-sm z-[60] flex items-center justify-center p-2 sm:p-1"
LiangLiu's avatar
LiangLiu committed
421
                    @click="closeWithRoute">
LiangLiu's avatar
LiangLiu committed
422
                    <!-- 任务完成时的大弹窗 - Apple 风格 -->
LiangLiu's avatar
LiangLiu committed
423
                    <div v-if="modalTask?.status === 'SUCCEED'"
LiangLiu's avatar
LiangLiu committed
424
425
426
427
428
                        class="w-full h-full max-w-7xl max-h-[100vh] bg-white/95 dark:bg-[#1e1e1e]/95 backdrop-blur-[40px] backdrop-saturate-[180%] border border-black/10 dark:border-white/10 rounded-3xl shadow-[0_20px_60px_rgba(0,0,0,0.2)] dark:shadow-[0_20px_60px_rgba(0,0,0,0.6)] overflow-hidden flex flex-col" @click.stop>
                        <!-- 弹窗头部 - Apple 风格 -->
                        <div class="flex items-center justify-between px-8 py-5 border-b border-black/8 dark:border-white/8 bg-white/50 dark:bg-[#1e1e1e]/50 backdrop-blur-[20px]">
                            <h3 class="text-xl font-semibold text-[#1d1d1f] dark:text-[#f5f5f7] flex items-center gap-3 tracking-tight">
                                <i class="fas fa-check-circle text-[color:var(--brand-primary)] dark:text-[color:var(--brand-primary-light)]"></i>
LiangLiu's avatar
LiangLiu committed
429
                                {{ t('taskDetail') }}
LiangLiu's avatar
LiangLiu committed
430
                            </h3>
LiangLiu's avatar
LiangLiu committed
431
432
433
434
435
                            <div class="flex items-center gap-2">
                                <button @click="closeWithRoute"
                                        class="w-9 h-9 flex items-center justify-center bg-white/80 dark:bg-[#2c2c2e]/80 border border-black/8 dark:border-white/8 text-[#86868b] dark:text-[#98989d] hover:text-red-500 dark:hover:text-red-400 hover:bg-white dark:hover:bg-[#3a3a3c] rounded-full transition-all duration-200 hover:scale-110 active:scale-100"
                                        :title="t('close')">
                                    <i class="fas fa-times text-sm"></i>
LiangLiu's avatar
LiangLiu committed
436
437
438
439
                                </button>
                            </div>
                        </div>

LiangLiu's avatar
LiangLiu committed
440
441
442
                        <!-- 主要内容区域 - Apple 风格 -->
                        <div class="flex-1 overflow-y-auto main-scrollbar">
                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 p-8 lg:p-12">
LiangLiu's avatar
LiangLiu committed
443
                                <!-- 左侧视频区域 -->
LiangLiu's avatar
LiangLiu committed
444
445
                                <div class="flex items-center justify-center">
                                    <div class="w-full max-w-[400px] aspect-[9/16] bg-black dark:bg-[#000000] rounded-2xl overflow-hidden shadow-[0_8px_24px_rgba(0,0,0,0.15)] dark:shadow-[0_8px_24px_rgba(0,0,0,0.5)]">
LiangLiu's avatar
LiangLiu committed
446
447
448
449
450
                                        <!-- 视频播放器 -->
                                        <video
                                            v-if="modalTask?.outputs?.output_video"
                                            :src="getTaskFileUrlSync(modalTask.task_id, 'output_video')"
                                            :poster="getTaskFileUrlSync(modalTask.task_id, 'input_image')"
LiangLiu's avatar
LiangLiu committed
451
                                            class="w-full h-full object-contain"
LiangLiu's avatar
LiangLiu committed
452
453
454
455
456
457
458
459
                                            controls
                                            loop
                                            preload="metadata"
                                            @loadstart="onVideoLoadStart"
                                            @canplay="onVideoCanPlay"
                                            @error="onVideoError">
                                            {{ t('browserNotSupported') }}
                                        </video>
LiangLiu's avatar
LiangLiu committed
460
461
462
                                        <div v-else class="w-full h-full flex flex-col items-center justify-center bg-[#f5f5f7] dark:bg-[#1c1c1e]">
                                            <div class="w-16 h-16 rounded-full bg-black/5 dark:bg-white/5 flex items-center justify-center mb-4">
                                                <i class="fas fa-video text-3xl text-[#86868b] dark:text-[#98989d]"></i>
LiangLiu's avatar
LiangLiu committed
463
                                            </div>
LiangLiu's avatar
LiangLiu committed
464
                                            <p class="text-sm text-[#86868b] dark:text-[#98989d] tracking-tight">{{ t('videoNotAvailable') }}</p>
LiangLiu's avatar
LiangLiu committed
465
466
467
468
469
                                        </div>
                                    </div>
                                </div>

                                <!-- 右侧信息区域 -->
LiangLiu's avatar
LiangLiu committed
470
471
                                <div class="flex items-center justify-center">
                                    <div class="w-full max-w-[400px] aspect-[9/16] relative flex flex-col">
LiangLiu's avatar
LiangLiu committed
472

LiangLiu's avatar
LiangLiu committed
473
474
475
                                        <!-- 居中的内容区域 -->
                                        <div class="flex-1 flex items-center justify-center px-8 py-6">
                                            <div class="w-full">
LiangLiu's avatar
LiangLiu committed
476
477
478
479
480
481
482
483
484
485
486
487
488
489
                                                <div class="flex flex-col items-center gap-3 mb-6">
                                                    <div class="flex items-center gap-3">
                                                        <button @click="copyShareLink(modalTask.task_id, 'task')"
                                                            class="w-12 h-12 flex items-center justify-center bg-white/95 dark:bg-[#1e1e1e]/95 backdrop-blur-[20px] border border-black/8 dark:border-white/8 text-[color:var(--brand-primary)] dark:text-[color:var(--brand-primary-light)] rounded-full shadow-[0_4px_16px_rgba(0,0,0,0.12)] dark:shadow-[0_4px_16px_rgba(0,0,0,0.4)] hover:scale-110 active:scale-100 transition-all duration-200"
                                                            :title="t('share')">
                                                            <i class="fas fa-share-alt text-base"></i>
                                                        </button>
                                                        <button @click="deleteTask(modalTask.task_id, true)"
                                                            class="w-12 h-12 flex items-center justify-center bg-white/95 dark:bg-[#1e1e1e]/95 backdrop-blur-[20px] border border-black/8 dark:border-white/8 text-red-500 dark:text-red-400 rounded-full shadow-[0_4px_16px_rgba(0,0,0,0.12)] dark:shadow-[0_4px_16px_rgba(0,0,0,0.4)] hover:scale-110 active:scale-100 transition-all duration-200"
                                                            :title="t('delete')">
                                                            <i class="fas fa-trash text-base"></i>
                                                        </button>
                                                    </div>
                                                </div>
LiangLiu's avatar
LiangLiu committed
490
491
492
493
494
495
496
497
498
                                                <!-- 标题 -->
                                                <div class="text-center mb-6">
                                                    <h1 class="text-3xl sm:text-4xl font-semibold text-[#1d1d1f] dark:text-[#f5f5f7] mb-3 tracking-tight">
                                                        {{ t('taskCompleted') }}
                                                    </h1>
                                                    <p class="text-sm sm:text-base text-[#86868b] dark:text-[#98989d] tracking-tight">
                                                        {{ t('taskCompletedSuccessfully') }}
                                                    </p>
                                                </div>
LiangLiu's avatar
LiangLiu committed
499

LiangLiu's avatar
LiangLiu committed
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
                                                <!-- 特性列表 - Apple 风格 -->
                                                <div class="grid grid-cols-3 gap-2 mb-6">
                                                    <div class="flex flex-col items-center gap-1.5 p-3 bg-white/80 dark:bg-[#2c2c2e]/80 backdrop-blur-[20px] border border-black/8 dark:border-white/8 rounded-xl">
                                                        <i class="fas fa-toolbox text-lg text-[color:var(--brand-primary)] dark:text-[color:var(--brand-primary-light)]"></i>
                                                        <span class="text-[11px] text-[#1d1d1f] dark:text-[#f5f5f7] font-medium tracking-tight">{{ getTaskTypeName(modalTask) }}</span>
                                                    </div>
                                                    <div class="flex flex-col items-center gap-1.5 p-3 bg-white/80 dark:bg-[#2c2c2e]/80 backdrop-blur-[20px] border border-black/8 dark:border-white/8 rounded-xl">
                                                        <i class="fas fa-robot text-lg text-[color:var(--brand-primary)] dark:text-[color:var(--brand-primary-light)]"></i>
                                                        <span class="text-[11px] text-[#1d1d1f] dark:text-[#f5f5f7] font-medium tracking-tight truncate max-w-full">{{ modalTask.model_cls }}</span>
                                                    </div>
                                                    <div class="flex flex-col items-center gap-1.5 p-3 bg-white/80 dark:bg-[#2c2c2e]/80 backdrop-blur-[20px] border border-black/8 dark:border-white/8 rounded-xl">
                                                        <i class="fas fa-clock text-lg text-[color:var(--brand-primary)] dark:text-[color:var(--brand-primary-light)]"></i>
                                                        <span class="text-[11px] text-[#1d1d1f] dark:text-[#f5f5f7] font-medium tracking-tight">{{ Math.round(modalTask.extra_info?.active_elapse || 0) }}s</span>
                                                    </div>
                                                </div>
LiangLiu's avatar
LiangLiu committed
515

LiangLiu's avatar
LiangLiu committed
516
517
518
519
                                                <!-- 操作按钮 - Apple 风格 -->
                                                <div class="space-y-2.5">
                                                    <button v-if="modalTask?.outputs?.output_video"
                                                            @click="handleDownloadFile(modalTask.task_id, 'output_video', modalTask.outputs.output_video)"
LiangLiu's avatar
LiangLiu committed
520
521
522
                                                            :disabled="downloadLoading"
                                                            class="w-full rounded-full bg-[color:var(--brand-primary)] dark:bg-[color:var(--brand-primary-light)] border-0 px-6 py-3 text-[15px] font-semibold text-white transition-all duration-200 ease-out tracking-tight flex items-center justify-center gap-2"
                                                            :class="downloadLoading ? 'opacity-60 cursor-not-allowed' : 'hover:scale-[1.02] hover:shadow-[0_8px_24px_rgba(var(--brand-primary-rgb),0.35)] dark:hover:shadow-[0_8px_24px_rgba(var(--brand-primary-light-rgb),0.4)] active:scale-100'">
LiangLiu's avatar
LiangLiu committed
523
524
525
                                                        <i class="fas fa-download text-sm"></i>
                                                        <span>{{ t('downloadVideo') }}</span>
                                                    </button>
LiangLiu's avatar
LiangLiu committed
526
                                                    <button @click="handleReuseTask"
LiangLiu's avatar
LiangLiu committed
527
528
529
530
531
532
533
534
535
536
537
                                                            class="w-full rounded-full bg-white dark:bg-[#3a3a3c] border border-black/8 dark:border-white/8 px-6 py-2.5 text-[15px] font-medium text-[#1d1d1f] dark:text-[#f5f5f7] hover:bg-white/80 dark:hover:bg-[#3a3a3c]/80 hover:border-black/12 dark:hover:border-white/12 hover:shadow-[0_4px_12px_rgba(0,0,0,0.1)] dark:hover:shadow-[0_4px_12px_rgba(0,0,0,0.3)] active:scale-[0.98] transition-all duration-200 tracking-tight flex items-center justify-center gap-2">
                                                        <i class="fas fa-magic text-sm"></i>
                                                        <span>{{ t('reuseTask') }}</span>
                                                    </button>
                                                    <button @click="showDetails = !showDetails"
                                                            class="w-full rounded-full bg-white dark:bg-[#3a3a3c] border border-black/8 dark:border-white/8 px-6 py-2.5 text-[15px] font-medium text-[#1d1d1f] dark:text-[#f5f5f7] hover:bg-white/80 dark:hover:bg-[#3a3a3c]/80 hover:border-black/12 dark:hover:border-white/12 hover:shadow-[0_4px_12px_rgba(0,0,0,0.1)] dark:hover:shadow-[0_4px_12px_rgba(0,0,0,0.3)] active:scale-[0.98] transition-all duration-200 tracking-tight flex items-center justify-center gap-2">
                                                        <i :class="showDetails ? 'fas fa-chevron-up' : 'fas fa-info-circle'" class="text-sm"></i>
                                                        <span>{{ showDetails ? t('hideDetails') : t('showDetails') }}</span>
                                                    </button>
                                                </div>
                                            </div>
LiangLiu's avatar
LiangLiu committed
538
539
540
541
542
                                        </div>
                                    </div>
                                </div>
                            </div>

LiangLiu's avatar
LiangLiu committed
543
544
545
546
547
548
549
                            <!-- 详细信息面板 - Apple 风格 (成功状态)-->
                            <div v-if="showDetails && modalTask" class="bg-[#f5f5f7] dark:bg-[#1c1c1e] border-t border-black/8 dark:border-white/8 py-12">
                                <div class="max-w-6xl mx-auto px-8">
                                    <!-- 输入素材标题 - Apple 风格 -->
                                    <h2 class="text-2xl font-semibold text-[#1d1d1f] dark:text-[#f5f5f7] flex items-center justify-center gap-3 mb-8 tracking-tight">
                                        <i class="fas fa-upload text-[color:var(--brand-primary)] dark:text-[color:var(--brand-primary-light)]"></i>
                                        <span>{{ t('inputMaterials') }}</span>
LiangLiu's avatar
LiangLiu committed
550
551
                                    </h2>

552
                                    <!-- 根据任务类型显示相应的素材卡片 - Apple 风格 -->
LiangLiu's avatar
LiangLiu committed
553
554
                                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                                        <!-- 图片卡片 - Apple 风格 -->
555
                                        <div v-if="getVisibleMaterials.image" class="bg-white/80 dark:bg-[#2c2c2e]/80 backdrop-blur-[20px] border border-black/8 dark:border-white/8 rounded-2xl overflow-hidden transition-all duration-200 hover:bg-white dark:hover:bg-[#3a3a3c] hover:border-black/12 dark:hover:border-white/12 hover:shadow-[0_8px_24px_rgba(0,0,0,0.1)] dark:hover:shadow-[0_8px_24px_rgba(0,0,0,0.3)]">
LiangLiu's avatar
LiangLiu committed
556
557
558
559
560
561
                                            <!-- 卡片头部 -->
                                            <div class="flex items-center justify-between px-5 py-4 bg-[color:var(--brand-primary)]/5 dark:bg-[color:var(--brand-primary-light)]/10 border-b border-black/8 dark:border-white/8">
                                                <div class="flex items-center gap-3">
                                                    <i class="fas fa-image text-lg text-[color:var(--brand-primary)] dark:text-[color:var(--brand-primary-light)]"></i>
                                                    <h3 class="text-base font-semibold text-[#1d1d1f] dark:text-[#f5f5f7] tracking-tight">{{ t('image') }}</h3>
                                                </div>
LiangLiu's avatar
LiangLiu committed
562
563
                                                <button v-if="getImageMaterials().length > 0"
                                                        @click="handleDownloadFile(modalTask.task_id, 'input_image', modalTask.inputs.input_image)"
LiangLiu's avatar
LiangLiu committed
564
565
566
                                                        :disabled="downloadLoading"
                                                        class="w-8 h-8 flex items-center justify-center bg-[color:var(--brand-primary)]/10 dark:bg-[color:var(--brand-primary-light)]/15 border border-[color:var(--brand-primary)]/20 dark:border-[color:var(--brand-primary-light)]/20 text-[color:var(--brand-primary)] dark:text-[color:var(--brand-primary-light)] rounded-lg transition-all duration-200"
                                                        :class="downloadLoading ? 'opacity-60 cursor-not-allowed' : 'hover:scale-110 active:scale-100'"
LiangLiu's avatar
LiangLiu committed
567
                                                        :title="t('download')">
LiangLiu's avatar
LiangLiu committed
568
                                                    <i class="fas fa-download text-xs"></i>
LiangLiu's avatar
LiangLiu committed
569
570
                                                </button>
                                            </div>
LiangLiu's avatar
LiangLiu committed
571
572
573
574
575
                                            <!-- 卡片内容 -->
                                            <div class="p-6 min-h-[200px]">
                                                <div v-if="getImageMaterials().length > 0">
                                                    <div v-for="[inputName, url] in getImageMaterials()" :key="inputName" class="rounded-xl overflow-hidden border border-black/8 dark:border-white/8">
                                                        <img :src="url" :alt="inputName" class="w-full h-auto object-contain">
LiangLiu's avatar
LiangLiu committed
576
577
                                                    </div>
                                                </div>
LiangLiu's avatar
LiangLiu committed
578
579
580
581
                                                <div v-else class="flex flex-col items-center justify-center h-[150px]">
                                                    <i class="fas fa-image text-3xl text-[#86868b]/30 dark:text-[#98989d]/30 mb-3"></i>
                                                    <p class="text-sm text-[#86868b] dark:text-[#98989d] tracking-tight">{{ t('noImage') }}</p>
                                                </div>
LiangLiu's avatar
LiangLiu committed
582
583
584
                                            </div>
                                        </div>

585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
                                        <!-- 视频卡片 - Apple 风格 -->
                                        <div v-if="getVisibleMaterials.video" class="bg-white/80 dark:bg-[#2c2c2e]/80 backdrop-blur-[20px] border border-black/8 dark:border-white/8 rounded-2xl overflow-hidden transition-all duration-200 hover:bg-white dark:hover:bg-[#3a3a3c] hover:border-black/12 dark:hover:border-white/12 hover:shadow-[0_8px_24px_rgba(0,0,0,0.1)] dark:hover:shadow-[0_8px_24px_rgba(0,0,0,0.3)]">
                                            <!-- 卡片头部 -->
                                            <div class="flex items-center justify-between px-5 py-4 bg-[color:var(--brand-primary)]/5 dark:bg-[color:var(--brand-primary-light)]/10 border-b border-black/8 dark:border-white/8">
                                                <div class="flex items-center gap-3">
                                                    <i class="fas fa-video text-lg text-[color:var(--brand-primary)] dark:text-[color:var(--brand-primary-light)]"></i>
                                                    <h3 class="text-base font-semibold text-[#1d1d1f] dark:text-[#f5f5f7] tracking-tight">{{ t('video') }}</h3>
                                                </div>
                                                <button v-if="getVideoMaterials().length > 0"
                                                        @click="handleDownloadFile(modalTask.task_id, 'input_video', modalTask.inputs.input_video)"
                                                        :disabled="downloadLoading"
                                                        class="w-8 h-8 flex items-center justify-center bg-[color:var(--brand-primary)]/10 dark:bg-[color:var(--brand-primary-light)]/15 border border-[color:var(--brand-primary)]/20 dark:border-[color:var(--brand-primary-light)]/20 text-[color:var(--brand-primary)] dark:text-[color:var(--brand-primary-light)] rounded-lg transition-all duration-200"
                                                        :class="downloadLoading ? 'opacity-60 cursor-not-allowed' : 'hover:scale-110 active:scale-100'"
                                                        :title="t('download')">
                                                    <i class="fas fa-download text-xs"></i>
                                                </button>
                                            </div>
                                            <!-- 卡片内容 -->
                                            <div class="p-6 min-h-[200px]">
                                                <div v-if="getVideoMaterials().length > 0">
                                                    <div v-for="[inputName, url] in getVideoMaterials()" :key="inputName" class="rounded-xl overflow-hidden border border-black/8 dark:border-white/8">
                                                        <video :src="url" :alt="inputName" class="w-full h-auto object-contain" controls preload="metadata">
                                                            {{ t('browserNotSupported') }}
                                                        </video>
                                                    </div>
                                                </div>
                                                <div v-else class="flex flex-col items-center justify-center h-[150px]">
                                                    <i class="fas fa-video text-3xl text-[#86868b]/30 dark:text-[#98989d]/30 mb-3"></i>
                                                    <p class="text-sm text-[#86868b] dark:text-[#98989d] tracking-tight">{{ t('noVideo') }}</p>
                                                </div>
                                            </div>
                                        </div>

LiangLiu's avatar
LiangLiu committed
618
                                        <!-- 音频卡片 - Apple 风格 -->
619
                                        <div v-if="getVisibleMaterials.audio" class="bg-white/80 dark:bg-[#2c2c2e]/80 backdrop-blur-[20px] border border-black/8 dark:border-white/8 rounded-2xl overflow-hidden transition-all duration-200 hover:bg-white dark:hover:bg-[#3a3a3c] hover:border-black/12 dark:hover:border-white/12 hover:shadow-[0_8px_24px_rgba(0,0,0,0.1)] dark:hover:shadow-[0_8px_24px_rgba(0,0,0,0.3)]">
LiangLiu's avatar
LiangLiu committed
620
621
622
623
624
625
                                            <!-- 卡片头部 -->
                                            <div class="flex items-center justify-between px-5 py-4 bg-[color:var(--brand-primary)]/5 dark:bg-[color:var(--brand-primary-light)]/10 border-b border-black/8 dark:border-white/8">
                                                <div class="flex items-center gap-3">
                                                    <i class="fas fa-music text-lg text-[color:var(--brand-primary)] dark:text-[color:var(--brand-primary-light)]"></i>
                                                    <h3 class="text-base font-semibold text-[#1d1d1f] dark:text-[#f5f5f7] tracking-tight">{{ t('audio') }}</h3>
                                                </div>
LiangLiu's avatar
LiangLiu committed
626
627
                                                <button v-if="getAudioMaterials().length > 0"
                                                        @click="handleDownloadFile(modalTask.task_id, 'input_audio', modalTask.inputs.input_audio)"
LiangLiu's avatar
LiangLiu committed
628
629
630
                                                        :disabled="downloadLoading"
                                                        class="w-8 h-8 flex items-center justify-center bg-[color:var(--brand-primary)]/10 dark:bg-[color:var(--brand-primary-light)]/15 border border-[color:var(--brand-primary)]/20 dark:border-[color:var(--brand-primary-light)]/20 text-[color:var(--brand-primary)] dark:text-[color:var(--brand-primary-light)] rounded-lg transition-all duration-200"
                                                        :class="downloadLoading ? 'opacity-60 cursor-not-allowed' : 'hover:scale-110 active:scale-100'"
LiangLiu's avatar
LiangLiu committed
631
                                                        :title="t('download')">
LiangLiu's avatar
LiangLiu committed
632
                                                    <i class="fas fa-download text-xs"></i>
LiangLiu's avatar
LiangLiu committed
633
634
                                                </button>
                                            </div>
LiangLiu's avatar
LiangLiu committed
635
636
637
638
                                            <!-- 卡片内容 -->
                                            <div class="p-6 min-h-[200px]">
                                                <div v-if="getAudioMaterials().length > 0" class="space-y-4">
                                                    <div v-for="[inputName, url] in getAudioMaterials()" :key="inputName">
LiangLiu's avatar
LiangLiu committed
639
640
641
642
643
644
645
646
647
                                                        <!-- 音频播放器卡片 - Apple 风格 -->
                                                        <div class="bg-white/80 dark:bg-[#2c2c2e]/80 backdrop-blur-[20px] border border-black/8 dark:border-white/8 rounded-xl transition-all duration-200 hover:bg-white dark:hover:bg-[#3a3a3c] hover:border-black/12 dark:hover:border-white/12 hover:shadow-[0_4px_12px_rgba(0,0,0,0.08)] dark:hover:shadow-[0_4px_12px_rgba(0,0,0,0.2)] w-full p-4">
                                                            <div class="relative flex items-center mb-3">
                                                                <!-- 头像容器 -->
                                                                <div class="relative mr-3 flex-shrink-0">
                                                                    <!-- 透明白色头像 -->
                                                                    <div class="w-12 h-12 rounded-full bg-white/40 dark:bg-white/20 border border-white/30 dark:border-white/20 transition-all duration-200"></div>
                                                                    <!-- 播放/暂停按钮 -->
                                                                    <button
648
                                                                        @click="toggleAudioPlayback(inputName)"
LiangLiu's avatar
LiangLiu committed
649
650
                                                                        class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 bg-[color:var(--brand-primary)]/90 dark:bg-[color:var(--brand-primary-light)]/90 rounded-full flex items-center justify-center text-white cursor-pointer hover:scale-110 transition-all duration-200 z-20 shadow-[0_2px_8px_rgba(var(--brand-primary-rgb),0.3)] dark:shadow-[0_2px_8px_rgba(var(--brand-primary-light-rgb),0.4)]"
                                                                    >
651
                                                                        <i :class="getAudioState(inputName).isPlaying ? 'fas fa-pause' : 'fas fa-play'" class="text-xs ml-0.5"></i>
LiangLiu's avatar
LiangLiu committed
652
653
654
655
656
657
658
659
660
661
662
663
                                                                    </button>
                                                                </div>

                                                                <!-- 音频信息 -->
                                                                <div class="flex-1 min-w-0">
                                                                    <div class="text-sm font-medium text-[#1d1d1f] dark:text-[#f5f5f7] tracking-tight truncate">
                                                                        {{ t('audio') }}
                                                                    </div>
                                                                </div>

                                                                <!-- 音频时长 -->
                                                                <div class="text-xs font-medium text-[#86868b] dark:text-[#98989d] tracking-tight flex-shrink-0">
664
                                                                    {{ formatAudioTime(getAudioState(inputName).currentTime) }} / {{ formatAudioTime(getAudioState(inputName).duration) }}
LiangLiu's avatar
LiangLiu committed
665
666
667
668
                                                                </div>
                                                            </div>

                                                            <!-- 进度条 -->
669
                                                            <div class="flex items-center gap-2" v-if="getAudioState(inputName).duration > 0">
LiangLiu's avatar
LiangLiu committed
670
671
672
                                                                <input
                                                                    type="range"
                                                                    :min="0"
673
674
675
676
677
678
679
680
                                                                    :max="getAudioState(inputName).duration"
                                                                    :value="getAudioState(inputName).currentTime"
                                                                    @input="(e) => onProgressChange(e, inputName)"
                                                                    @change="(e) => onProgressChange(e, inputName)"
                                                                    @mousedown="getAudioState(inputName).isDragging = true"
                                                                    @mouseup="(e) => onProgressEnd(e, inputName)"
                                                                    @touchstart="getAudioState(inputName).isDragging = true"
                                                                    @touchend="(e) => onProgressEnd(e, inputName)"
LiangLiu's avatar
LiangLiu committed
681
682
683
684
685
686
687
                                                                    class="flex-1 h-1 bg-black/6 dark:bg-white/15 rounded-full appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:bg-[color:var(--brand-primary)] dark:[&::-webkit-slider-thumb]:bg-[color:var(--brand-primary-light)] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:cursor-pointer"
                                                                />
                                                            </div>
                                                        </div>

                                                        <!-- 隐藏的音频元素 -->
                                                        <audio
688
                                                            :ref="(el) => setAudioElement(inputName, el)"
LiangLiu's avatar
LiangLiu committed
689
                                                            :src="url"
690
691
692
693
694
695
696
                                                            @loadedmetadata="() => onAudioLoaded(inputName)"
                                                            @timeupdate="() => onTimeUpdate(inputName)"
                                                            @ended="() => onAudioEnded(inputName)"
                                                            @play="() => getAudioState(inputName).isPlaying = true"
                                                            @pause="() => getAudioState(inputName).isPlaying = false"
                                                            @error="(e) => { console.error('Audio error:', e, url); showAlert(t('audioLoadFailed'), 'error') }"
                                                            preload="metadata"
LiangLiu's avatar
LiangLiu committed
697
698
                                                            class="hidden"
                                                        ></audio>
LiangLiu's avatar
LiangLiu committed
699
700
701
702
703
                                                    </div>
                                                </div>
                                                <div v-else class="flex flex-col items-center justify-center h-[150px]">
                                                    <i class="fas fa-music text-3xl text-[#86868b]/30 dark:text-[#98989d]/30 mb-3"></i>
                                                    <p class="text-sm text-[#86868b] dark:text-[#98989d] tracking-tight">{{ t('noAudio') }}</p>
LiangLiu's avatar
LiangLiu committed
704
705
706
707
                                                </div>
                                            </div>
                                        </div>

LiangLiu's avatar
LiangLiu committed
708
                                        <!-- 提示词卡片 - Apple 风格 -->
709
                                        <div v-if="getVisibleMaterials.prompt" class="bg-white/80 dark:bg-[#2c2c2e]/80 backdrop-blur-[20px] border border-black/8 dark:border-white/8 rounded-2xl overflow-hidden transition-all duration-200 hover:bg-white dark:hover:bg-[#3a3a3c] hover:border-black/12 dark:hover:border-white/12 hover:shadow-[0_8px_24px_rgba(0,0,0,0.1)] dark:hover:shadow-[0_8px_24px_rgba(0,0,0,0.3)]">
LiangLiu's avatar
LiangLiu committed
710
711
712
713
714
715
                                            <!-- 卡片头部 -->
                                            <div class="flex items-center justify-between px-5 py-4 bg-[color:var(--brand-primary)]/5 dark:bg-[color:var(--brand-primary-light)]/10 border-b border-black/8 dark:border-white/8">
                                                <div class="flex items-center gap-3">
                                                    <i class="fas fa-file-alt text-lg text-[color:var(--brand-primary)] dark:text-[color:var(--brand-primary-light)]"></i>
                                                    <h3 class="text-base font-semibold text-[#1d1d1f] dark:text-[#f5f5f7] tracking-tight">{{ t('prompt') }}</h3>
                                                </div>
LiangLiu's avatar
LiangLiu committed
716
717
                                                <button v-if="modalTask?.params?.prompt"
                                                        @click="copyPrompt(modalTask?.params?.prompt)"
LiangLiu's avatar
LiangLiu committed
718
                                                        class="w-8 h-8 flex items-center justify-center bg-[color:var(--brand-primary)]/10 dark:bg-[color:var(--brand-primary-light)]/15 border border-[color:var(--brand-primary)]/20 dark:border-[color:var(--brand-primary-light)]/20 text-[color:var(--brand-primary)] dark:text-[color:var(--brand-primary-light)] rounded-lg transition-all duration-200 hover:scale-110 active:scale-100"
LiangLiu's avatar
LiangLiu committed
719
                                                        :title="t('copy')">
LiangLiu's avatar
LiangLiu committed
720
                                                    <i class="fas fa-copy text-xs"></i>
LiangLiu's avatar
LiangLiu committed
721
722
                                                </button>
                                            </div>
LiangLiu's avatar
LiangLiu committed
723
724
725
726
727
728
729
730
731
                                            <!-- 卡片内容 -->
                                            <div class="p-6 min-h-[200px]">
                                                <div v-if="modalTask?.params?.prompt" class="bg-white/50 dark:bg-[#1e1e1e]/50 backdrop-blur-[10px] border border-black/6 dark:border-white/6 rounded-xl p-4">
                                                    <p class="text-sm text-[#1d1d1f] dark:text-[#f5f5f7] leading-relaxed tracking-tight break-words">{{ modalTask.params.prompt }}</p>
                                                </div>
                                                <div v-else class="flex flex-col items-center justify-center h-[150px]">
                                                    <i class="fas fa-file-alt text-3xl text-[#86868b]/30 dark:text-[#98989d]/30 mb-3"></i>
                                                    <p class="text-sm text-[#86868b] dark:text-[#98989d] tracking-tight">{{ t('noPrompt') }}</p>
                                                </div>
LiangLiu's avatar
LiangLiu committed
732
733
734
735
736
737
738
739
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

LiangLiu's avatar
LiangLiu committed
740
741
742
743
744
745
746
747
                    <!-- 其他状态的弹窗 - Apple 风格 -->
                    <div v-else class="w-full max-w-7xl max-h-[95vh] bg-white/95 dark:bg-[#1e1e1e]/95 backdrop-blur-[40px] backdrop-saturate-[180%] border border-black/10 dark:border-white/10 rounded-3xl shadow-[0_20px_60px_rgba(0,0,0,0.2)] dark:shadow-[0_20px_60px_rgba(0,0,0,0.6)] overflow-hidden flex flex-col" @click.stop>
                        <!-- 弹窗头部 - Apple 风格 -->
                        <div class="flex items-center justify-between px-8 py-5 border-b border-black/8 dark:border-white/8 bg-white/50 dark:bg-[#1e1e1e]/50 backdrop-blur-[20px]">
                            <h3 class="text-xl font-semibold text-[#1d1d1f] dark:text-[#f5f5f7] flex items-center gap-3 tracking-tight">
                                <i v-if="modalTask?.status === 'FAILED'" class="fas fa-exclamation-triangle text-red-500 dark:text-red-400"></i>
                                <i v-else-if="modalTask?.status === 'CANCEL'" class="fas fa-ban text-[#86868b] dark:text-[#98989d]"></i>
                                <i v-else class="fas fa-spinner fa-spin text-[color:var(--brand-primary)] dark:text-[color:var(--brand-primary-light)]"></i>
LiangLiu's avatar
LiangLiu committed
748
                                <span>{{ t('taskDetail') }}</span>
LiangLiu's avatar
LiangLiu committed
749
                            </h3>
LiangLiu's avatar
LiangLiu committed
750
751
752
753
754
                            <div class="flex items-center gap-2">
                                <button @click="closeWithRoute"
                                        class="w-9 h-9 flex items-center justify-center bg-white/80 dark:bg-[#2c2c2e]/80 border border-black/8 dark:border-white/8 text-[#86868b] dark:text-[#98989d] hover:text-red-500 dark:hover:text-red-400 hover:bg-white dark:hover:bg-[#3a3a3c] rounded-full transition-all duration-200 hover:scale-110 active:scale-100"
                                        :title="t('close')">
                                    <i class="fas fa-times text-sm"></i>
LiangLiu's avatar
LiangLiu committed
755
756
757
758
                                </button>
                            </div>
                        </div>

LiangLiu's avatar
LiangLiu committed
759
760
761
762
763
764
                        <!-- 主要内容区域 - Apple 风格 -->
                        <div class="flex-1 overflow-y-auto main-scrollbar">
                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 p-8 lg:p-12">
                                <!-- 左侧占位图区域 - Apple 风格 -->
                                <div class="flex items-center justify-center">
                                    <div class="w-full max-w-[400px] aspect-[9/16] bg-black dark:bg-[#000000] rounded-2xl overflow-hidden shadow-[0_8px_24px_rgba(0,0,0,0.15)] dark:shadow-[0_8px_24px_rgba(0,0,0,0.5)] relative">
LiangLiu's avatar
LiangLiu committed
765
                                        <!-- 根据状态显示不同的占位图 -->
LiangLiu's avatar
LiangLiu committed
766
767
768
769
770
                                        <!-- 进行中状态 -->
                                        <div v-if="['CREATED', 'PENDING', 'RUNNING'].includes(modalTask?.status)" class="w-full h-full flex flex-col items-center justify-center relative bg-[#f5f5f7] dark:bg-[#1c1c1e]">
                                            <!-- 如果有图像输入,显示为背景 -->
                                            <div v-if="getImageMaterials().length > 0" class="absolute top-0 left-0 w-full h-full z-[1]">
                                                <img :src="getImageMaterials()[0][1]" :alt="getImageMaterials()[0][0]" class="w-full h-full object-cover opacity-20 blur-sm">
LiangLiu's avatar
LiangLiu committed
771
                                            </div>
LiangLiu's avatar
LiangLiu committed
772
773
774
775
776
777
                                            <div class="absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center z-[2]">
                                                <div class="relative w-12 h-12 mb-6">
                                                    <div class="absolute inset-0 rounded-full border-2 border-black/8 dark:border-white/8"></div>
                                                    <div class="absolute inset-0 rounded-full border-2 border-transparent border-t-[color:var(--brand-primary)] dark:border-t-[color:var(--brand-primary-light)] animate-spin"></div>
                                                </div>
                                                <p class="text-sm font-medium text-[#86868b] dark:text-[#98989d] tracking-tight">{{ t('videoGenerating') }}...</p>
LiangLiu's avatar
LiangLiu committed
778
779
                                            </div>
                                        </div>
LiangLiu's avatar
LiangLiu committed
780
781
782
783
784
785
786
787
788
789
                                        <!-- 失败状态 -->
                                        <div v-else-if="modalTask?.status === 'FAILED'" class="w-full h-full flex flex-col items-center justify-center relative bg-[#fef2f2] dark:bg-[#2c1b1b]">
                                            <div v-if="getImageMaterials().length > 0" class="absolute top-0 left-0 w-full h-full z-[1]">
                                                <img :src="getImageMaterials()[0][1]" :alt="getImageMaterials()[0][0]" class="w-full h-full object-cover opacity-10 blur-sm">
                                            </div>
                                            <div class="absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center z-[2]">
                                                <div class="w-16 h-16 rounded-full bg-red-500/10 dark:bg-red-400/10 flex items-center justify-center mb-4">
                                                    <i class="fas fa-exclamation-triangle text-3xl text-red-500 dark:text-red-400"></i>
                                                </div>
                                                <p class="text-sm font-medium text-[#1d1d1f] dark:text-[#f5f5f7] tracking-tight">{{ t('videoGeneratingFailed') }}</p>
LiangLiu's avatar
LiangLiu committed
790
791
                                            </div>
                                        </div>
LiangLiu's avatar
LiangLiu committed
792
793
794
795
796
797
798
799
800
801
                                        <!-- 取消状态 -->
                                        <div v-else-if="modalTask?.status === 'CANCEL'" class="w-full h-full flex flex-col items-center justify-center relative bg-[#f5f5f7] dark:bg-[#1c1c1e]">
                                            <div v-if="getImageMaterials().length > 0" class="absolute top-0 left-0 w-full h-full z-[1]">
                                                <img :src="getImageMaterials()[0][1]" :alt="getImageMaterials()[0][0]" class="w-full h-full object-cover opacity-10 blur-sm">
                                            </div>
                                            <div class="absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center z-[2]">
                                                <div class="w-16 h-16 rounded-full bg-black/5 dark:bg-white/5 flex items-center justify-center mb-4">
                                                    <i class="fas fa-ban text-3xl text-[#86868b] dark:text-[#98989d]"></i>
                                                </div>
                                                <p class="text-sm font-medium text-[#1d1d1f] dark:text-[#f5f5f7] tracking-tight">{{ t('taskCancelled') }}</p>
LiangLiu's avatar
LiangLiu committed
802
803
804
805
806
                                            </div>
                                        </div>
                                    </div>
                                </div>

LiangLiu's avatar
LiangLiu committed
807
808
809
810
811
812
813
814
815
816
817
                                <!-- 右侧信息区域 - Apple 风格 -->
                                <div class="flex items-center justify-center">
                                    <div class="w-full max-w-[400px] aspect-[9/16] relative flex flex-col">
                                        <!-- 右上角删除按钮 - Apple 极简风格 -->
                                        <div class="absolute top-0 right-0 z-10">
                                            <button v-if="['FAILED', 'CANCEL'].includes(modalTask?.status)"
                                                    @click="deleteTask(modalTask.task_id, true)"
                                                    class="w-8 h-8 flex items-center justify-center bg-white/95 dark:bg-[#1e1e1e]/95 backdrop-blur-[20px] border border-black/10 dark:border-white/10 rounded-full shadow-[0_2px_8px_rgba(0,0,0,0.12)] dark:shadow-[0_2px_8px_rgba(0,0,0,0.4)] text-red-500 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/30 hover:scale-110 hover:shadow-[0_4px_12px_rgba(239,68,68,0.2)] dark:hover:shadow-[0_4px_12px_rgba(248,113,113,0.3)] active:scale-100 transition-all duration-200"
                                                    :title="t('delete')">
                                                <i class="fas fa-trash text-xs"></i>
                                            </button>
LiangLiu's avatar
LiangLiu committed
818
819
                                        </div>

LiangLiu's avatar
LiangLiu committed
820
821
822
823
824
825
826
827
828
829
830
                                        <!-- 居中的内容区域 -->
                                        <div class="flex-1 flex items-center justify-center px-8 py-6">
                                            <div class="w-full">
                                                <!-- 标题和状态 - Apple 风格 -->
                                                <div class="text-center mb-6">
                                                    <h1 class="text-3xl sm:text-4xl font-semibold text-[#1d1d1f] dark:text-[#f5f5f7] mb-3 tracking-tight">
                                                        <span v-if="modalTask?.status === 'SUCCEED'">{{ t('taskCompleted') }}</span>
                                                        <span v-else-if="modalTask?.status === 'FAILED'">{{ t('taskFailed') }}</span>
                                                        <span v-else-if="modalTask?.status === 'CANCEL'">{{ t('taskCancelled') }}</span>
                                                        <span v-else-if="modalTask?.status === 'RUNNING'">{{ t('taskRunning') }}</span>
                                                        <span v-else-if="modalTask?.status === 'PENDING'">{{ t('taskPending') }}</span>
LiangLiu's avatar
LiangLiu committed
831
                                                        <span v-else>{{ t('taskDetail') }}</span>
LiangLiu's avatar
LiangLiu committed
832
833
834
835
836
837
838
839
840
841
842
843
                                                    </h1>
                                                </div>

                                                <!-- 进度条 - Apple 风格 -->
                                                <div v-if="['CREATED', 'PENDING', 'RUNNING'].includes(modalTask?.status)" class="mb-6">
                                            <div v-for="(subtask, index) in (modalTask.subtasks || [])" :key="index">
                                                <!-- PENDING状态:Apple 风格排队显示 -->
                                                <div v-if="subtask.status === 'PENDING'" class="text-center">
                                                    <div v-if="subtask.estimated_pending_order !== null && subtask.estimated_pending_order !== undefined && subtask.estimated_pending_order >= 0" class="flex flex-col items-center gap-3">
                                                        <!-- 排队图标 -->
                                                        <div class="flex flex-wrap justify-center gap-1.5 mb-2">
                                                            <i v-for="n in Math.min(Math.max(subtask.estimated_pending_order, 0), 10)"
LiangLiu's avatar
LiangLiu committed
844
                                                               :key="n"
LiangLiu's avatar
LiangLiu committed
845
846
                                                               class="fas fa-circle text-[8px] text-[#86868b] dark:text-[#98989d] opacity-60"></i>
                                                            <span v-if="subtask.estimated_pending_order > 10" class="text-xs text-[#86868b] dark:text-[#98989d] font-medium ml-0.5">
LiangLiu's avatar
LiangLiu committed
847
848
849
                                                                +{{ subtask.estimated_pending_order - 10 }}
                                                            </span>
                                                        </div>
LiangLiu's avatar
LiangLiu committed
850
851
                                                        <!-- 排队文字 -->
                                                        <span class="text-sm text-[#1d1d1f] dark:text-[#f5f5f7] font-medium tracking-tight">
LiangLiu's avatar
LiangLiu committed
852
853
854
855
856
                                                            {{ t('queuePosition') }}: {{ subtask.estimated_pending_order }}
                                                        </span>
                                                    </div>
                                                </div>

LiangLiu's avatar
LiangLiu committed
857
858
859
860
861
862
                                                <!-- RUNNING状态:Apple 风格进度条 -->
                                                <div v-else-if="subtask.status === 'RUNNING'" class="w-full">
                                                    <!-- 进度条 -->
                                                    <div class="mb-4">
                                                        <div class="relative w-full h-1 bg-black/8 dark:bg-white/8 rounded-full overflow-hidden">
                                                            <div class="absolute top-0 left-0 h-full bg-[color:var(--brand-primary)] dark:bg-[color:var(--brand-primary-light)] rounded-full transition-all duration-500 ease-out" :style="{ width: getSubtaskProgress(subtask) + '%' }"></div>
LiangLiu's avatar
LiangLiu committed
863
864
                                                        </div>
                                                    </div>
LiangLiu's avatar
LiangLiu committed
865
866
867
                                                    <!-- 百分比显示 -->
                                                    <div class="flex justify-center items-center">
                                                        <span class="text-2xl font-semibold text-[#1d1d1f] dark:text-[#f5f5f7] tracking-tight">
LiangLiu's avatar
LiangLiu committed
868
869
870
871
872
873
                                                            {{ getSubtaskProgress(subtask) }}%
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
LiangLiu's avatar
LiangLiu committed
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894

                                                <!-- 描述 - Apple 风格 -->
                                                <div class="text-sm sm:text-base text-[#86868b] dark:text-[#98989d] text-center mb-6 tracking-tight">
                                                    <p v-if="['RUNNING'].includes(modalTask?.status)" class="mb-0">
                                                        {{ t('aiIsGeneratingYourVideo') }}
                                                    </p>
                                                    <p v-else-if="['CREATED'].includes(modalTask?.status)" class="mb-0">
                                                        {{ t('taskSubmittedSuccessfully') }}
                                                    </p>
                                                    <p v-else-if="['PENDING'].includes(modalTask?.status)" class="mb-0">
                                                        {{ t('taskQueuePleaseWait') }}
                                                    </p>
                                                    <div v-else-if="modalTask?.status === 'FAILED'">
                                                        <p class="mb-4">{{ t('sorryYourVideoGenerationTaskFailed') }}</p>
                                                        <button v-if="modalTask?.fail_msg"
                                                                @click="showFailureDetails = !showFailureDetails"
                                                                class="text-sm text-[#86868b] dark:text-[#98989d] hover:text-red-500 dark:hover:text-red-400 transition-colors underline underline-offset-2">
                                                            {{ showFailureDetails ? t('hideDetails') : t('viewErrorDetails') }}
                                                        </button>
                                                        <div v-if="showFailureDetails && modalTask?.fail_msg" class="mt-4 p-4 bg-black/2 dark:bg-white/2 border border-black/6 dark:border-white/6 rounded-xl text-left">
                                                            <p class="text-xs text-[#86868b] dark:text-[#98989d] whitespace-pre-wrap leading-relaxed">{{ modalTask?.fail_msg }}</p>
LiangLiu's avatar
LiangLiu committed
895
896
                                                        </div>
                                                    </div>
LiangLiu's avatar
LiangLiu committed
897
898
899
                                                    <p v-else-if="modalTask?.status === 'CANCEL'" class="mb-0">
                                                        {{ t('thisTaskHasBeenCancelledYouCanRegenerateOrViewTheMaterialsYouUploadedBefore') }}
                                                    </p>
LiangLiu's avatar
LiangLiu committed
900
901
                                                </div>

LiangLiu's avatar
LiangLiu committed
902
903
904
905
906
907
908
909
910
911
912
                                                <!-- 特性列表 - Apple 风格 -->
                                                <div class="grid grid-cols-2 gap-2 mb-6">
                                                    <div class="flex flex-col items-center gap-1.5 p-3 bg-white/80 dark:bg-[#2c2c2e]/80 backdrop-blur-[20px] border border-black/8 dark:border-white/8 rounded-xl">
                                                        <i class="fas fa-toolbox text-lg text-[color:var(--brand-primary)] dark:text-[color:var(--brand-primary-light)]"></i>
                                                        <span class="text-[11px] text-[#1d1d1f] dark:text-[#f5f5f7] font-medium tracking-tight">{{ getTaskTypeName(modalTask) }}</span>
                                                    </div>
                                                    <div class="flex flex-col items-center gap-1.5 p-3 bg-white/80 dark:bg-[#2c2c2e]/80 backdrop-blur-[20px] border border-black/8 dark:border-white/8 rounded-xl">
                                                        <i class="fas fa-robot text-lg text-[color:var(--brand-primary)] dark:text-[color:var(--brand-primary-light)]"></i>
                                                        <span class="text-[11px] text-[#1d1d1f] dark:text-[#f5f5f7] font-medium tracking-tight truncate max-w-full">{{ modalTask.model_cls }}</span>
                                                    </div>
                                                </div>
LiangLiu's avatar
LiangLiu committed
913

LiangLiu's avatar
LiangLiu committed
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
                                                <!-- 操作按钮 - Apple 风格 -->
                                                <div class="space-y-2.5">
                                                    <!-- 进行中状态:取消按钮 -->
                                                    <button v-if="['CREATED', 'PENDING', 'RUNNING'].includes(modalTask?.status)"
                                                            @click="cancelTask(modalTask.task_id, true)"
                                                            class="w-full rounded-full bg-white dark:bg-[#3a3a3c] border border-black/8 dark:border-white/8 px-6 py-3 text-[15px] font-semibold text-red-500 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 hover:border-red-500/30 dark:hover:border-red-400/30 hover:shadow-[0_8px_24px_rgba(239,68,68,0.2)] dark:hover:shadow-[0_8px_24px_rgba(248,113,113,0.3)] active:scale-[0.98] transition-all duration-200 tracking-tight flex items-center justify-center gap-2">
                                                        <i class="fas fa-times text-sm"></i>
                                                        <span>{{ t('cancelTask') }}</span>
                                                    </button>

                                                    <!-- 失败或取消状态:重试按钮 -->
                                                    <button v-if="modalTask?.status === 'FAILED' || modalTask?.status === 'CANCEL'"
                                                            @click="resumeTask(modalTask.task_id, true)"
                                                            class="w-full rounded-full bg-[color:var(--brand-primary)] dark:bg-[color:var(--brand-primary-light)] border-0 px-6 py-3 text-[15px] font-semibold text-white hover:scale-[1.02] hover:shadow-[0_8px_24px_rgba(var(--brand-primary-rgb),0.35)] dark:hover:shadow-[0_8px_24px_rgba(var(--brand-primary-light-rgb),0.4)] active:scale-100 transition-all duration-200 ease-out tracking-tight flex items-center justify-center gap-2">
                                                        <i class="fas fa-redo text-sm"></i>
                                                        <span>{{ modalTask?.status === 'CANCEL' ? t('regenerateTask') : t('retryTask') }}</span>
                                                    </button>

                                                    <!-- 通用按钮 -->
                                                    <button v-if="['SUCCEED', 'FAILED', 'CANCEL','CREATED', 'PENDING', 'RUNNING'].includes(modalTask?.status)"
LiangLiu's avatar
LiangLiu committed
934
                                                            @click="handleReuseTask"
LiangLiu's avatar
LiangLiu committed
935
936
937
938
939
940
941
942
943
944
945
946
                                                            class="w-full rounded-full bg-white dark:bg-[#3a3a3c] border border-black/8 dark:border-white/8 px-6 py-2.5 text-[15px] font-medium text-[#1d1d1f] dark:text-[#f5f5f7] hover:bg-white/80 dark:hover:bg-[#3a3a3c]/80 hover:border-black/12 dark:hover:border-white/12 hover:shadow-[0_4px_12px_rgba(0,0,0,0.1)] dark:hover:shadow-[0_4px_12px_rgba(0,0,0,0.3)] active:scale-[0.98] transition-all duration-200 tracking-tight flex items-center justify-center gap-2">
                                                        <i class="fas fa-copy text-sm"></i>
                                                        <span>{{ t('reuseTask') }}</span>
                                                    </button>

                                                    <button @click="showDetails = !showDetails"
                                                            class="w-full rounded-full bg-white dark:bg-[#3a3a3c] border border-black/8 dark:border-white/8 px-6 py-2.5 text-[15px] font-medium text-[#1d1d1f] dark:text-[#f5f5f7] hover:bg-white/80 dark:hover:bg-[#3a3a3c]/80 hover:border-black/12 dark:hover:border-white/12 hover:shadow-[0_4px_12px_rgba(0,0,0,0.1)] dark:hover:shadow-[0_4px_12px_rgba(0,0,0,0.3)] active:scale-[0.98] transition-all duration-200 tracking-tight flex items-center justify-center gap-2">
                                                        <i :class="showDetails ? 'fas fa-chevron-up' : 'fas fa-info-circle'" class="text-sm"></i>
                                                        <span>{{ showDetails ? t('hideDetails') : t('showDetails') }}</span>
                                                    </button>
                                                </div>
                                            </div>
LiangLiu's avatar
LiangLiu committed
947
948
949
950
951
                                        </div>
                                    </div>
                                </div>
                            </div>

LiangLiu's avatar
LiangLiu committed
952
953
954
955
956
957
958
959
960
                            <!-- 详细信息面板 - Apple 风格(其他状态)-->
                        <div v-if="showDetails && modalTask" class="bg-[#f5f5f7] dark:bg-[#1c1c1e] border-t border-black/8 dark:border-white/8 py-12">
                            <div class="max-w-6xl mx-auto px-8">
                                <!-- 输入素材标题 - Apple 风格 -->
                                <h2 class="text-2xl font-semibold text-[#1d1d1f] dark:text-[#f5f5f7] flex items-center justify-center gap-3 mb-8 tracking-tight">
                                    <i class="fas fa-upload text-[color:var(--brand-primary)] dark:text-[color:var(--brand-primary-light)]"></i>
                                    <span>{{ t('inputMaterials') }}</span>
                                </h2>

961
                                <!-- 根据任务类型显示相应的素材卡片 - Apple 风格 -->
LiangLiu's avatar
LiangLiu committed
962
963
                                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                                    <!-- 图片卡片 - Apple 风格 -->
964
                                    <div v-if="getVisibleMaterials.image" class="bg-white/80 dark:bg-[#2c2c2e]/80 backdrop-blur-[20px] border border-black/8 dark:border-white/8 rounded-2xl overflow-hidden transition-all duration-200 hover:bg-white dark:hover:bg-[#3a3a3c] hover:border-black/12 dark:hover:border-white/12 hover:shadow-[0_8px_24px_rgba(0,0,0,0.1)] dark:hover:shadow-[0_8px_24px_rgba(0,0,0,0.3)]">
LiangLiu's avatar
LiangLiu committed
965
966
967
968
969
                                        <!-- 卡片头部 -->
                                        <div class="flex items-center justify-between px-5 py-4 bg-[color:var(--brand-primary)]/5 dark:bg-[color:var(--brand-primary-light)]/10 border-b border-black/8 dark:border-white/8">
                                            <div class="flex items-center gap-3">
                                                <i class="fas fa-image text-lg text-[color:var(--brand-primary)] dark:text-[color:var(--brand-primary-light)]"></i>
                                                <h3 class="text-base font-semibold text-[#1d1d1f] dark:text-[#f5f5f7] tracking-tight">{{ t('image') }}</h3>
LiangLiu's avatar
LiangLiu committed
970
                                            </div>
LiangLiu's avatar
LiangLiu committed
971
972
                                            <button v-if="getImageMaterials().length > 0"
                                                    @click="handleDownloadFile(modalTask.task_id, 'input_image', modalTask.inputs.input_image)"
LiangLiu's avatar
LiangLiu committed
973
974
975
                                                    :disabled="downloadLoading"
                                                    class="w-8 h-8 flex items-center justify-center bg-[color:var(--brand-primary)]/10 dark:bg-[color:var(--brand-primary-light)]/15 border border-[color:var(--brand-primary)]/20 dark:border-[color:var(--brand-primary-light)]/20 text-[color:var(--brand-primary)] dark:text-[color:var(--brand-primary-light)] rounded-lg transition-all duration-200"
                                                    :class="downloadLoading ? 'opacity-60 cursor-not-allowed' : 'hover:scale-110 active:scale-100'"
LiangLiu's avatar
LiangLiu committed
976
977
978
                                                    :title="t('download')">
                                                <i class="fas fa-download text-xs"></i>
                                            </button>
LiangLiu's avatar
LiangLiu committed
979
                                        </div>
LiangLiu's avatar
LiangLiu committed
980
981
982
983
984
                                        <!-- 卡片内容 -->
                                        <div class="p-6 min-h-[200px]">
                                            <div v-if="getImageMaterials().length > 0">
                                                <div v-for="[inputName, url] in getImageMaterials()" :key="inputName" class="rounded-xl overflow-hidden border border-black/8 dark:border-white/8">
                                                    <img :src="url" :alt="inputName" class="w-full h-auto object-contain">
LiangLiu's avatar
LiangLiu committed
985
986
                                                </div>
                                            </div>
LiangLiu's avatar
LiangLiu committed
987
988
989
                                            <div v-else class="flex flex-col items-center justify-center h-[150px]">
                                                <i class="fas fa-image text-3xl text-[#86868b]/30 dark:text-[#98989d]/30 mb-3"></i>
                                                <p class="text-sm text-[#86868b] dark:text-[#98989d] tracking-tight">{{ t('noImage') }}</p>
LiangLiu's avatar
LiangLiu committed
990
991
992
993
                                            </div>
                                        </div>
                                    </div>

994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
                                    <!-- 视频卡片 - Apple 风格 -->
                                    <div v-if="getVisibleMaterials.video" class="bg-white/80 dark:bg-[#2c2c2e]/80 backdrop-blur-[20px] border border-black/8 dark:border-white/8 rounded-2xl overflow-hidden transition-all duration-200 hover:bg-white dark:hover:bg-[#3a3a3c] hover:border-black/12 dark:hover:border-white/12 hover:shadow-[0_8px_24px_rgba(0,0,0,0.1)] dark:hover:shadow-[0_8px_24px_rgba(0,0,0,0.3)]">
                                        <!-- 卡片头部 -->
                                        <div class="flex items-center justify-between px-5 py-4 bg-[color:var(--brand-primary)]/5 dark:bg-[color:var(--brand-primary-light)]/10 border-b border-black/8 dark:border-white/8">
                                            <div class="flex items-center gap-3">
                                                <i class="fas fa-video text-lg text-[color:var(--brand-primary)] dark:text-[color:var(--brand-primary-light)]"></i>
                                                <h3 class="text-base font-semibold text-[#1d1d1f] dark:text-[#f5f5f7] tracking-tight">{{ t('video') }}</h3>
                                            </div>
                                            <button v-if="getVideoMaterials().length > 0"
                                                    @click="handleDownloadFile(modalTask.task_id, 'input_video', modalTask.inputs.input_video)"
                                                    :disabled="downloadLoading"
                                                    class="w-8 h-8 flex items-center justify-center bg-[color:var(--brand-primary)]/10 dark:bg-[color:var(--brand-primary-light)]/15 border border-[color:var(--brand-primary)]/20 dark:border-[color:var(--brand-primary-light)]/20 text-[color:var(--brand-primary)] dark:text-[color:var(--brand-primary-light)] rounded-lg transition-all duration-200"
                                                    :class="downloadLoading ? 'opacity-60 cursor-not-allowed' : 'hover:scale-110 active:scale-100'"
                                                    :title="t('download')">
                                                <i class="fas fa-download text-xs"></i>
                                            </button>
                                        </div>
                                        <!-- 卡片内容 -->
                                        <div class="p-6 min-h-[200px]">
                                            <div v-if="getVideoMaterials().length > 0">
                                                <div v-for="[inputName, url] in getVideoMaterials()" :key="inputName" class="rounded-xl overflow-hidden border border-black/8 dark:border-white/8">
                                                    <video :src="url" :alt="inputName" class="w-full h-auto object-contain" controls preload="metadata">
                                                        {{ t('browserNotSupported') }}
                                                    </video>
                                                </div>
                                            </div>
                                            <div v-else class="flex flex-col items-center justify-center h-[150px]">
                                                <i class="fas fa-video text-3xl text-[#86868b]/30 dark:text-[#98989d]/30 mb-3"></i>
                                                <p class="text-sm text-[#86868b] dark:text-[#98989d] tracking-tight">{{ t('noVideo') }}</p>
                                            </div>
                                        </div>
                                    </div>

LiangLiu's avatar
LiangLiu committed
1027
                                    <!-- 音频卡片 - Apple 风格 -->
1028
                                    <div v-if="getVisibleMaterials.audio" class="bg-white/80 dark:bg-[#2c2c2e]/80 backdrop-blur-[20px] border border-black/8 dark:border-white/8 rounded-2xl overflow-hidden transition-all duration-200 hover:bg-white dark:hover:bg-[#3a3a3c] hover:border-black/12 dark:hover:border-white/12 hover:shadow-[0_8px_24px_rgba(0,0,0,0.1)] dark:hover:shadow-[0_8px_24px_rgba(0,0,0,0.3)]">
LiangLiu's avatar
LiangLiu committed
1029
1030
1031
1032
1033
                                        <!-- 卡片头部 -->
                                        <div class="flex items-center justify-between px-5 py-4 bg-[color:var(--brand-primary)]/5 dark:bg-[color:var(--brand-primary-light)]/10 border-b border-black/8 dark:border-white/8">
                                            <div class="flex items-center gap-3">
                                                <i class="fas fa-music text-lg text-[color:var(--brand-primary)] dark:text-[color:var(--brand-primary-light)]"></i>
                                                <h3 class="text-base font-semibold text-[#1d1d1f] dark:text-[#f5f5f7] tracking-tight">{{ t('audio') }}</h3>
LiangLiu's avatar
LiangLiu committed
1034
                                            </div>
LiangLiu's avatar
LiangLiu committed
1035
1036
                                            <button v-if="getAudioMaterials().length > 0"
                                                    @click="handleDownloadFile(modalTask.task_id, 'input_audio', modalTask.inputs.input_audio)"
LiangLiu's avatar
LiangLiu committed
1037
1038
1039
                                                    :disabled="downloadLoading"
                                                    class="w-8 h-8 flex items-center justify-center bg-[color:var(--brand-primary)]/10 dark:bg-[color:var(--brand-primary-light)]/15 border border-[color:var(--brand-primary)]/20 dark:border-[color:var(--brand-primary-light)]/20 text-[color:var(--brand-primary)] dark:text-[color:var(--brand-primary-light)] rounded-lg transition-all duration-200"
                                                    :class="downloadLoading ? 'opacity-60 cursor-not-allowed' : 'hover:scale-110 active:scale-100'"
LiangLiu's avatar
LiangLiu committed
1040
1041
1042
                                                    :title="t('download')">
                                                <i class="fas fa-download text-xs"></i>
                                            </button>
LiangLiu's avatar
LiangLiu committed
1043
                                        </div>
LiangLiu's avatar
LiangLiu committed
1044
1045
1046
1047
                                        <!-- 卡片内容 -->
                                        <div class="p-6 min-h-[200px]">
                                            <div v-if="getAudioMaterials().length > 0" class="space-y-4">
                                                <div v-for="[inputName, url] in getAudioMaterials()" :key="inputName">
LiangLiu's avatar
LiangLiu committed
1048
1049
1050
1051
1052
1053
1054
1055
1056
                                                    <!-- 音频播放器卡片 - Apple 风格 -->
                                                    <div class="bg-white/80 dark:bg-[#2c2c2e]/80 backdrop-blur-[20px] border border-black/8 dark:border-white/8 rounded-xl transition-all duration-200 hover:bg-white dark:hover:bg-[#3a3a3c] hover:border-black/12 dark:hover:border-white/12 hover:shadow-[0_4px_12px_rgba(0,0,0,0.08)] dark:hover:shadow-[0_4px_12px_rgba(0,0,0,0.2)] w-full p-4">
                                                        <div class="relative flex items-center mb-3">
                                                            <!-- 头像容器 -->
                                                            <div class="relative mr-3 flex-shrink-0">
                                                                <!-- 透明白色头像 -->
                                                                <div class="w-12 h-12 rounded-full bg-white/40 dark:bg-white/20 border border-white/30 dark:border-white/20 transition-all duration-200"></div>
                                                                <!-- 播放/暂停按钮 -->
                                                                <button
1057
                                                                    @click="toggleAudioPlayback(inputName)"
LiangLiu's avatar
LiangLiu committed
1058
1059
                                                                    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 bg-[color:var(--brand-primary)]/90 dark:bg-[color:var(--brand-primary-light)]/90 rounded-full flex items-center justify-center text-white cursor-pointer hover:scale-110 transition-all duration-200 z-20 shadow-[0_2px_8px_rgba(var(--brand-primary-rgb),0.3)] dark:shadow-[0_2px_8px_rgba(var(--brand-primary-light-rgb),0.4)]"
                                                                >
1060
                                                                    <i :class="getAudioState(inputName).isPlaying ? 'fas fa-pause' : 'fas fa-play'" class="text-xs ml-0.5"></i>
LiangLiu's avatar
LiangLiu committed
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
                                                                </button>
                                                            </div>

                                                            <!-- 音频信息 -->
                                                            <div class="flex-1 min-w-0">
                                                                <div class="text-sm font-medium text-[#1d1d1f] dark:text-[#f5f5f7] tracking-tight truncate">
                                                                    {{ t('audio') }}
                                                                </div>
                                                            </div>

                                                            <!-- 音频时长 -->
                                                            <div class="text-xs font-medium text-[#86868b] dark:text-[#98989d] tracking-tight flex-shrink-0">
1073
                                                                {{ formatAudioTime(getAudioState(inputName).currentTime) }} / {{ formatAudioTime(getAudioState(inputName).duration) }}
LiangLiu's avatar
LiangLiu committed
1074
1075
1076
1077
                                                            </div>
                                                        </div>

                                                        <!-- 进度条 -->
1078
                                                        <div class="flex items-center gap-2" v-if="getAudioState(inputName).duration > 0">
LiangLiu's avatar
LiangLiu committed
1079
1080
1081
                                                            <input
                                                                type="range"
                                                                :min="0"
1082
1083
1084
1085
1086
1087
1088
1089
                                                                :max="getAudioState(inputName).duration"
                                                                :value="getAudioState(inputName).currentTime"
                                                                @input="(e) => onProgressChange(e, inputName)"
                                                                @change="(e) => onProgressChange(e, inputName)"
                                                                @mousedown="getAudioState(inputName).isDragging = true"
                                                                @mouseup="(e) => onProgressEnd(e, inputName)"
                                                                @touchstart="getAudioState(inputName).isDragging = true"
                                                                @touchend="(e) => onProgressEnd(e, inputName)"
LiangLiu's avatar
LiangLiu committed
1090
1091
1092
1093
1094
1095
1096
                                                                class="flex-1 h-1 bg-black/6 dark:bg-white/15 rounded-full appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:bg-[color:var(--brand-primary)] dark:[&::-webkit-slider-thumb]:bg-[color:var(--brand-primary-light)] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:cursor-pointer"
                                                            />
                                                        </div>
                                                    </div>

                                                    <!-- 隐藏的音频元素 -->
                                                    <audio
1097
                                                        :ref="(el) => setAudioElement(inputName, el)"
LiangLiu's avatar
LiangLiu committed
1098
                                                        :src="url"
1099
1100
1101
1102
1103
1104
1105
                                                        @loadedmetadata="() => onAudioLoaded(inputName)"
                                                        @timeupdate="() => onTimeUpdate(inputName)"
                                                        @ended="() => onAudioEnded(inputName)"
                                                        @play="() => getAudioState(inputName).isPlaying = true"
                                                        @pause="() => getAudioState(inputName).isPlaying = false"
                                                        @error="(e) => { console.error('Audio error:', e, url); showAlert(t('audioLoadFailed'), 'error') }"
                                                        preload="metadata"
LiangLiu's avatar
LiangLiu committed
1106
1107
                                                        class="hidden"
                                                    ></audio>
LiangLiu's avatar
LiangLiu committed
1108
1109
                                                </div>
                                            </div>
LiangLiu's avatar
LiangLiu committed
1110
1111
1112
                                            <div v-else class="flex flex-col items-center justify-center h-[150px]">
                                                <i class="fas fa-music text-3xl text-[#86868b]/30 dark:text-[#98989d]/30 mb-3"></i>
                                                <p class="text-sm text-[#86868b] dark:text-[#98989d] tracking-tight">{{ t('noAudio') }}</p>
LiangLiu's avatar
LiangLiu committed
1113
1114
1115
1116
                                            </div>
                                        </div>
                                    </div>

LiangLiu's avatar
LiangLiu committed
1117
                                    <!-- 提示词卡片 - Apple 风格 -->
1118
                                    <div v-if="getVisibleMaterials.prompt" class="bg-white/80 dark:bg-[#2c2c2e]/80 backdrop-blur-[20px] border border-black/8 dark:border-white/8 rounded-2xl overflow-hidden transition-all duration-200 hover:bg-white dark:hover:bg-[#3a3a3c] hover:border-black/12 dark:hover:border-white/12 hover:shadow-[0_8px_24px_rgba(0,0,0,0.1)] dark:hover:shadow-[0_8px_24px_rgba(0,0,0,0.3)]">
LiangLiu's avatar
LiangLiu committed
1119
1120
1121
1122
1123
                                        <!-- 卡片头部 -->
                                        <div class="flex items-center justify-between px-5 py-4 bg-[color:var(--brand-primary)]/5 dark:bg-[color:var(--brand-primary-light)]/10 border-b border-black/8 dark:border-white/8">
                                            <div class="flex items-center gap-3">
                                                <i class="fas fa-file-alt text-lg text-[color:var(--brand-primary)] dark:text-[color:var(--brand-primary-light)]"></i>
                                                <h3 class="text-base font-semibold text-[#1d1d1f] dark:text-[#f5f5f7] tracking-tight">{{ t('prompt') }}</h3>
LiangLiu's avatar
LiangLiu committed
1124
                                            </div>
LiangLiu's avatar
LiangLiu committed
1125
1126
1127
1128
1129
1130
                                            <button v-if="modalTask?.params?.prompt"
                                                    @click="copyPrompt(modalTask?.params?.prompt)"
                                                    class="w-8 h-8 flex items-center justify-center bg-[color:var(--brand-primary)]/10 dark:bg-[color:var(--brand-primary-light)]/15 border border-[color:var(--brand-primary)]/20 dark:border-[color:var(--brand-primary-light)]/20 text-[color:var(--brand-primary)] dark:text-[color:var(--brand-primary-light)] rounded-lg transition-all duration-200 hover:scale-110 active:scale-100"
                                                    :title="t('copy')">
                                                <i class="fas fa-copy text-xs"></i>
                                            </button>
LiangLiu's avatar
LiangLiu committed
1131
                                        </div>
LiangLiu's avatar
LiangLiu committed
1132
1133
1134
1135
                                        <!-- 卡片内容 -->
                                        <div class="p-6 min-h-[200px]">
                                            <div v-if="modalTask?.params?.prompt" class="bg-white/50 dark:bg-[#1e1e1e]/50 backdrop-blur-[10px] border border-black/6 dark:border-white/6 rounded-xl p-4">
                                                <p class="text-sm text-[#1d1d1f] dark:text-[#f5f5f7] leading-relaxed tracking-tight break-words">{{ modalTask.params.prompt }}</p>
LiangLiu's avatar
LiangLiu committed
1136
                                            </div>
LiangLiu's avatar
LiangLiu committed
1137
1138
1139
                                            <div v-else class="flex flex-col items-center justify-center h-[150px]">
                                                <i class="fas fa-file-alt text-3xl text-[#86868b]/30 dark:text-[#98989d]/30 mb-3"></i>
                                                <p class="text-sm text-[#86868b] dark:text-[#98989d] tracking-tight">{{ t('noPrompt') }}</p>
LiangLiu's avatar
LiangLiu committed
1140
1141
1142
1143
1144
1145
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
LiangLiu's avatar
LiangLiu committed
1146
                        </div>
LiangLiu's avatar
LiangLiu committed
1147
                    </div>
LiangLiu's avatar
LiangLiu committed
1148
1149
                </div>
            </div>
LiangLiu's avatar
LiangLiu committed
1150
1151
1152
</template>

<style scoped>
LiangLiu's avatar
LiangLiu committed
1153
/* Apple 风格极简样式 - 所有样式已通过 Tailwind CSS 的 dark: 前缀在 template 中定义 */
LiangLiu's avatar
LiangLiu committed
1154
</style>