137 lines
6.0 KiB
Vue
137 lines
6.0 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { invoke } from '@tauri-apps/api/core'
|
|
import { Trash2, FolderOpen } from 'lucide-vue-next'
|
|
import { formatDistanceToNow } from 'date-fns'
|
|
import { zhCN } from 'date-fns/locale'
|
|
|
|
interface HistoryItem {
|
|
id: string
|
|
title: string
|
|
thumbnail: string
|
|
url: string
|
|
output_path: string
|
|
timestamp: string
|
|
status: string
|
|
format: string
|
|
}
|
|
|
|
const history = ref<HistoryItem[]>([])
|
|
|
|
async function loadHistory() {
|
|
try {
|
|
const res = await invoke<HistoryItem[]>('get_history')
|
|
// Sort by timestamp desc
|
|
history.value = res.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime())
|
|
} catch (e) {
|
|
console.error(e)
|
|
}
|
|
}
|
|
|
|
async function clearHistory() {
|
|
await invoke('clear_history')
|
|
history.value = []
|
|
}
|
|
|
|
async function deleteItem(id: string) {
|
|
try {
|
|
await invoke('delete_history_item', { id })
|
|
history.value = history.value.filter(h => h.id !== id)
|
|
} catch (e) {
|
|
console.error(e)
|
|
}
|
|
}
|
|
|
|
async function openFolder(path: string) {
|
|
await invoke('open_in_explorer', { path })
|
|
}
|
|
|
|
onMounted(loadHistory)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="max-w-5xl mx-auto p-8">
|
|
<header class="mb-8 flex justify-between items-center">
|
|
<div>
|
|
<h1 class="text-3xl font-bold text-zinc-900 dark:text-white">下载历史</h1>
|
|
<!-- <p class="text-gray-500 dark:text-gray-400 mt-2">管理您的下载记录。</p> -->
|
|
</div>
|
|
<button
|
|
@click="clearHistory"
|
|
v-if="history.length > 0"
|
|
class="text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 px-4 py-2 rounded-lg transition-colors text-sm font-medium flex items-center gap-2"
|
|
>
|
|
<Trash2 class="w-4 h-4" />
|
|
清空所有
|
|
</button>
|
|
</header>
|
|
|
|
<div v-if="history.length === 0" class="text-center py-20">
|
|
<div class="bg-gray-100 dark:bg-zinc-900 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<FolderOpen class="w-8 h-8 text-gray-400" />
|
|
</div>
|
|
<h3 class="text-lg font-medium text-zinc-900 dark:text-white">暂无下载</h3>
|
|
<p class="text-gray-500">您的下载记录将显示在这里。</p>
|
|
</div>
|
|
|
|
<div v-else class="bg-white dark:bg-zinc-900 rounded-2xl shadow-sm border border-gray-200 dark:border-zinc-800 overflow-hidden">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left">
|
|
<thead class="bg-gray-50 dark:bg-zinc-800/50 text-xs uppercase text-gray-500 font-medium">
|
|
<tr>
|
|
<th class="px-6 py-4">媒体</th>
|
|
<th class="px-6 py-4">日期</th>
|
|
<th class="px-6 py-4">格式</th>
|
|
<th class="px-6 py-4">状态</th>
|
|
<th class="px-6 py-4 text-right">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-100 dark:divide-zinc-800">
|
|
<tr v-for="item in history" :key="item.id" class="hover:bg-gray-50 dark:hover:bg-zinc-800/50 transition-colors">
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-4">
|
|
<img :src="item.thumbnail || '/placeholder.png'" class="w-12 h-12 rounded-lg object-cover bg-gray-200" />
|
|
<div class="max-w-xs">
|
|
<div class="font-medium text-zinc-900 dark:text-white truncate" :title="item.title">{{ item.title }}</div>
|
|
<div class="text-xs text-gray-500 truncate">{{ item.url }}</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap">
|
|
{{ formatDistanceToNow(new Date(item.timestamp), { addSuffix: true, locale: zhCN }) }}
|
|
</td>
|
|
<td class="px-6 py-4 text-sm text-gray-500">
|
|
<span class="bg-gray-100 dark:bg-zinc-800 px-2 py-1 rounded text-xs font-mono">{{ item.format }}</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span
|
|
class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium"
|
|
:class="item.status === 'success' ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' : 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'"
|
|
>
|
|
<span class="w-1.5 h-1.5 rounded-full" :class="item.status === 'success' ? 'bg-green-500' : 'bg-red-500'"></span>
|
|
{{ item.status === 'success' ? '已完成' : '失败' }}
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-right whitespace-nowrap">
|
|
<button
|
|
@click="openFolder(item.output_path)"
|
|
class="p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"
|
|
title="打开输出文件夹"
|
|
>
|
|
<FolderOpen class="w-4 h-4" />
|
|
</button>
|
|
<button
|
|
@click="deleteItem(item.id)"
|
|
class="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors ml-1"
|
|
title="删除记录"
|
|
>
|
|
<Trash2 class="w-4 h-4" />
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> |