mirror of
https://github.com/fawney19/Aether.git
synced 2026-10-08 18:37:46 +08:00
refactor: 重构异步任务系统和计费服务架构
- 重构任务系统：新增 lifecycle (TaskStatus/BillingStatus)、context、application 模块 - 将 video tasks 泛化为 async tasks，支持更通用的异步任务管理 - 新增 Gemini Files 管理模块和管理界面 - 重构 billing 服务：拆分 schema.py 和 service.py - 新增 candidate 服务模块用于请求候选管理 - 数据库迁移：添加 billing_status、request_id、gemini_file_mappings 表和索引 - 移除废弃的 video_telemetry、task orchestrator 等模块
This commit is contained in:
fawney19
@@ -0,0 +1,570 @@
|
||||
<template>
|
||||
<div class="space-y-6 pb-8">
|
||||
<!-- 统计卡片 -->
|
||||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<Card variant="default" class="p-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
<FileUp class="w-5 h-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-bold">{{ stats?.total_mappings ?? '-' }}</p>
|
||||
<p class="text-xs text-muted-foreground">总文件数</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Card variant="default" class="p-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-lg bg-green-500/10 flex items-center justify-center">
|
||||
<CheckCircle class="w-5 h-5 text-green-500" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-bold">{{ stats?.active_mappings ?? '-' }}</p>
|
||||
<p class="text-xs text-muted-foreground">有效文件</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Card variant="default" class="p-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-lg bg-amber-500/10 flex items-center justify-center">
|
||||
<Clock class="w-5 h-5 text-amber-500" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-bold">{{ stats?.expired_mappings ?? '-' }}</p>
|
||||
<p class="text-xs text-muted-foreground">已过期</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Card variant="default" class="p-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center">
|
||||
<Key class="w-5 h-5 text-blue-500" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-bold">{{ stats?.capable_keys_count ?? '-' }}</p>
|
||||
<p class="text-xs text-muted-foreground">支持的 Key</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- 上传区域 -->
|
||||
<Card variant="default" class="p-4">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h3 class="text-sm font-medium">上传文件</h3>
|
||||
<Button
|
||||
v-if="capableKeys.length > 0"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="h-7 text-xs"
|
||||
@click="toggleSelectAll"
|
||||
>
|
||||
{{ selectedKeyIds.length === capableKeys.length ? '取消全选' : '全选' }}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- Key 选择器 -->
|
||||
<div v-if="capableKeys.length > 0" class="mb-4">
|
||||
<p class="text-xs text-muted-foreground mb-2">选择要上传到的 Key（可多选）：</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button
|
||||
v-for="key in capableKeys"
|
||||
:key="key.id"
|
||||
class="px-3 py-1.5 text-xs rounded-lg border transition-colors"
|
||||
:class="selectedKeyIds.includes(key.id)
|
||||
? 'border-primary bg-primary/10 text-primary'
|
||||
: 'border-border hover:border-primary/50'"
|
||||
@click="toggleKeySelection(key.id)"
|
||||
>
|
||||
<span class="font-medium">{{ key.name }}</span>
|
||||
<span v-if="key.provider_name" class="text-muted-foreground ml-1">({{ key.provider_name }})</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="mb-4 text-sm text-amber-600 bg-amber-50 dark:bg-amber-950/30 rounded-lg p-3">
|
||||
暂无可用的 Key，请先配置具有「Gemini 文件 API」能力的 Key
|
||||
</div>
|
||||
|
||||
<!-- 拖拽上传区 -->
|
||||
<div
|
||||
class="border-2 border-dashed border-border/60 rounded-lg p-6 text-center transition-colors"
|
||||
:class="{
|
||||
'border-primary bg-primary/5': isDragging,
|
||||
'hover:border-primary/50': !isDragging && !uploading && selectedKeyIds.length > 0,
|
||||
'opacity-50 cursor-not-allowed': selectedKeyIds.length === 0
|
||||
}"
|
||||
@dragover.prevent="isDragging = true"
|
||||
@dragleave.prevent="isDragging = false"
|
||||
@drop.prevent="handleDrop"
|
||||
>
|
||||
<input
|
||||
ref="fileInputRef"
|
||||
type="file"
|
||||
class="hidden"
|
||||
@change="handleFileSelect"
|
||||
/>
|
||||
<div v-if="uploading" class="flex flex-col items-center gap-2">
|
||||
<Loader2 class="w-8 h-8 animate-spin text-primary" />
|
||||
<p class="text-sm text-muted-foreground">正在上传到 {{ selectedKeyIds.length }} 个 Key...</p>
|
||||
</div>
|
||||
<div v-else class="flex flex-col items-center gap-2">
|
||||
<Upload class="w-8 h-8 text-muted-foreground" />
|
||||
<p class="text-sm text-muted-foreground">
|
||||
<template v-if="selectedKeyIds.length > 0">
|
||||
拖拽文件到此处，或
|
||||
<button
|
||||
class="text-primary hover:underline"
|
||||
@click="fileInputRef?.click()"
|
||||
>
|
||||
点击选择
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
请先选择至少一个 Key
|
||||
</template>
|
||||
</p>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
支持视频、图片、音频、文档等，最大 2GB，有效期 48 小时
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<!-- MIME 类型分布 -->
|
||||
<Card v-if="stats?.by_mime_type && Object.keys(stats.by_mime_type).length > 0" variant="default" class="p-4">
|
||||
<h3 class="text-sm font-medium mb-3">文件类型分布</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Badge
|
||||
v-for="(count, mimeType) in stats.by_mime_type"
|
||||
:key="mimeType"
|
||||
variant="secondary"
|
||||
class="text-xs"
|
||||
>
|
||||
{{ mimeType }}: {{ count }}
|
||||
</Badge>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<!-- 文件映射表格 -->
|
||||
<Card variant="default" class="overflow-hidden">
|
||||
<!-- 标题和筛选器 -->
|
||||
<div class="px-4 sm:px-6 py-3.5 border-b border-border/60">
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<h3 class="text-base font-semibold">文件映射</h3>
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- 搜索 -->
|
||||
<Input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
placeholder="搜索文件名..."
|
||||
class="w-40 h-8 text-xs"
|
||||
/>
|
||||
<!-- 包含过期 -->
|
||||
<label class="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer">
|
||||
<input
|
||||
v-model="includeExpired"
|
||||
type="checkbox"
|
||||
class="rounded border-border"
|
||||
/>
|
||||
包含过期
|
||||
</label>
|
||||
<!-- 清理过期按钮 -->
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
class="h-8 text-xs"
|
||||
:disabled="loading || (stats?.expired_mappings ?? 0) === 0"
|
||||
@click="cleanupExpired"
|
||||
>
|
||||
<Trash2 class="w-3 h-3 mr-1" />
|
||||
清理过期
|
||||
</Button>
|
||||
<!-- 刷新按钮 -->
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="h-8 w-8"
|
||||
:disabled="loading"
|
||||
@click="fetchData"
|
||||
>
|
||||
<RefreshCw class="w-3.5 h-3.5" :class="{ 'animate-spin': loading }" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<div v-if="loading && !mappings.length" class="p-8 text-center">
|
||||
<Loader2 class="w-8 h-8 animate-spin mx-auto text-muted-foreground" />
|
||||
<p class="mt-2 text-sm text-muted-foreground">加载中...</p>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-else-if="!mappings.length" class="p-8 text-center">
|
||||
<FileUp class="w-12 h-12 mx-auto text-muted-foreground/50" />
|
||||
<p class="mt-2 text-sm text-muted-foreground">暂无文件映射</p>
|
||||
<p class="mt-1 text-xs text-muted-foreground">
|
||||
用户通过 Gemini Files API 上传文件后会在此显示
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 文件列表 -->
|
||||
<div v-else class="divide-y divide-border/60">
|
||||
<div
|
||||
v-for="mapping in mappings"
|
||||
:key="mapping.id"
|
||||
class="px-4 sm:px-6 py-4 hover:bg-muted/30 transition-colors"
|
||||
:class="{ 'opacity-50': mapping.is_expired }"
|
||||
>
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- 文件名和状态 -->
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<component :is="getFileIcon(mapping.mime_type)" class="w-4 h-4 text-muted-foreground" />
|
||||
<span class="font-mono text-sm font-medium">{{ mapping.file_name }}</span>
|
||||
<Badge v-if="mapping.is_expired" variant="secondary" class="text-xs">
|
||||
已过期
|
||||
</Badge>
|
||||
<Badge v-else variant="outline" class="text-xs text-green-600">
|
||||
有效
|
||||
</Badge>
|
||||
</div>
|
||||
<!-- 显示名 -->
|
||||
<p v-if="mapping.display_name" class="text-sm text-muted-foreground truncate">
|
||||
{{ mapping.display_name }}
|
||||
</p>
|
||||
<!-- 元信息 -->
|
||||
<div class="flex items-center gap-4 mt-2 text-xs text-muted-foreground">
|
||||
<span v-if="mapping.mime_type" class="flex items-center gap-1">
|
||||
<File class="w-3 h-3" />
|
||||
{{ mapping.mime_type }}
|
||||
</span>
|
||||
<span v-if="mapping.username" class="flex items-center gap-1">
|
||||
<User class="w-3 h-3" />
|
||||
{{ mapping.username }}
|
||||
</span>
|
||||
<span v-if="mapping.key_name" class="flex items-center gap-1">
|
||||
<Key class="w-3 h-3" />
|
||||
{{ mapping.key_name }}
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<Clock class="w-3 h-3" />
|
||||
{{ formatDate(mapping.created_at) }}
|
||||
</span>
|
||||
<span class="flex items-center gap-1" :class="{ 'text-red-500': mapping.is_expired }">
|
||||
<Timer class="w-3 h-3" />
|
||||
过期: {{ formatDate(mapping.expires_at) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 操作 -->
|
||||
<div class="flex items-center gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="h-8 w-8 text-muted-foreground hover:text-red-500"
|
||||
title="删除映射"
|
||||
@click.stop="deleteMapping(mapping)"
|
||||
>
|
||||
<Trash2 class="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div v-if="totalPages > 1" class="px-4 sm:px-6 py-3 border-t border-border/60 flex items-center justify-between">
|
||||
<p class="text-xs text-muted-foreground">
|
||||
共 {{ total }} 条记录
|
||||
</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:disabled="currentPage <= 1"
|
||||
@click="currentPage--"
|
||||
>
|
||||
上一页
|
||||
</Button>
|
||||
<span class="text-sm text-muted-foreground">
|
||||
{{ currentPage }} / {{ totalPages }}
|
||||
</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:disabled="currentPage >= totalPages"
|
||||
@click="currentPage++"
|
||||
>
|
||||
下一页
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted } from 'vue'
|
||||
import { useToast } from '@/composables/useToast'
|
||||
import Card from '@/components/ui/card.vue'
|
||||
import Badge from '@/components/ui/badge.vue'
|
||||
import Button from '@/components/ui/button.vue'
|
||||
import Input from '@/components/ui/input.vue'
|
||||
import {
|
||||
FileUp,
|
||||
CheckCircle,
|
||||
Clock,
|
||||
Key,
|
||||
RefreshCw,
|
||||
Loader2,
|
||||
Trash2,
|
||||
File,
|
||||
User,
|
||||
Timer,
|
||||
Video,
|
||||
Image,
|
||||
FileText,
|
||||
Music,
|
||||
Upload
|
||||
} from 'lucide-vue-next'
|
||||
import { geminiFilesApi } from '@/api/gemini-files'
|
||||
|
||||
const { toast } = useToast()
|
||||
|
||||
// 状态
|
||||
const loading = ref(false)
|
||||
const stats = ref<any>(null)
|
||||
const mappings = ref<any[]>([])
|
||||
const total = ref(0)
|
||||
const currentPage = ref(1)
|
||||
const pageSize = 20
|
||||
const searchQuery = ref('')
|
||||
const includeExpired = ref(false)
|
||||
|
||||
// 上传状态
|
||||
const uploading = ref(false)
|
||||
const isDragging = ref(false)
|
||||
const fileInputRef = ref<HTMLInputElement | null>(null)
|
||||
const capableKeys = ref<any[]>([])
|
||||
const selectedKeyIds = ref<string[]>([])
|
||||
|
||||
// 计算属性
|
||||
const totalPages = computed(() => Math.ceil(total.value / pageSize))
|
||||
|
||||
// 监听筛选条件变化
|
||||
watch([searchQuery, includeExpired], () => {
|
||||
currentPage.value = 1
|
||||
fetchMappings()
|
||||
})
|
||||
|
||||
watch(currentPage, () => {
|
||||
fetchMappings()
|
||||
})
|
||||
|
||||
// 获取数据
|
||||
async function fetchData() {
|
||||
await Promise.all([fetchStats(), fetchMappings(), fetchCapableKeys()])
|
||||
}
|
||||
|
||||
async function fetchCapableKeys() {
|
||||
try {
|
||||
const keys = await geminiFilesApi.getCapableKeys()
|
||||
capableKeys.value = keys
|
||||
// 默认全选
|
||||
if (selectedKeyIds.value.length === 0 && keys.length > 0) {
|
||||
selectedKeyIds.value = keys.map(k => k.id)
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('Failed to fetch capable keys:', error)
|
||||
}
|
||||
}
|
||||
|
||||
function toggleKeySelection(keyId: string) {
|
||||
const index = selectedKeyIds.value.indexOf(keyId)
|
||||
if (index === -1) {
|
||||
selectedKeyIds.value.push(keyId)
|
||||
} else {
|
||||
selectedKeyIds.value.splice(index, 1)
|
||||
}
|
||||
}
|
||||
|
||||
function toggleSelectAll() {
|
||||
if (selectedKeyIds.value.length === capableKeys.value.length) {
|
||||
selectedKeyIds.value = []
|
||||
} else {
|
||||
selectedKeyIds.value = capableKeys.value.map(k => k.id)
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchStats() {
|
||||
try {
|
||||
const data = await geminiFilesApi.getStats()
|
||||
stats.value = data
|
||||
} catch (error: any) {
|
||||
toast({
|
||||
title: '获取统计失败',
|
||||
description: error.message,
|
||||
variant: 'destructive'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchMappings() {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await geminiFilesApi.listMappings({
|
||||
page: currentPage.value,
|
||||
page_size: pageSize,
|
||||
include_expired: includeExpired.value,
|
||||
search: searchQuery.value || undefined
|
||||
})
|
||||
mappings.value = data.items
|
||||
total.value = data.total
|
||||
} catch (error: any) {
|
||||
toast({
|
||||
title: '获取文件列表失败',
|
||||
description: error.message,
|
||||
variant: 'destructive'
|
||||
})
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteMapping(mapping: any) {
|
||||
if (!confirm(`确定要删除映射 "${mapping.file_name}" 吗？\n\n注意：这只会删除映射记录，不会删除 Google 上的实际文件。`)) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await geminiFilesApi.deleteMapping(mapping.id)
|
||||
toast({
|
||||
title: '删除成功',
|
||||
description: `已删除映射 ${mapping.file_name}`
|
||||
})
|
||||
await fetchData()
|
||||
} catch (error: any) {
|
||||
toast({
|
||||
title: '删除失败',
|
||||
description: error.message,
|
||||
variant: 'destructive'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
async function cleanupExpired() {
|
||||
if (!confirm('确定要清理所有过期的文件映射吗？')) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await geminiFilesApi.cleanupExpired()
|
||||
toast({
|
||||
title: '清理完成',
|
||||
description: `已清理 ${result.deleted_count} 条过期映射`
|
||||
})
|
||||
await fetchData()
|
||||
} catch (error: any) {
|
||||
toast({
|
||||
title: '清理失败',
|
||||
description: error.message,
|
||||
variant: 'destructive'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 上传相关
|
||||
async function uploadFile(file: globalThis.File) {
|
||||
if (selectedKeyIds.value.length === 0) {
|
||||
toast({
|
||||
title: '请选择 Key',
|
||||
description: '请至少选择一个 Key 来上传文件',
|
||||
variant: 'destructive'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
uploading.value = true
|
||||
let hasSuccess = false
|
||||
try {
|
||||
const result = await geminiFilesApi.uploadFile(file, selectedKeyIds.value)
|
||||
if (result.fail_count === 0) {
|
||||
toast({
|
||||
title: '上传成功',
|
||||
description: `文件 ${result.display_name} 已上传到 ${result.success_count} 个 Key`
|
||||
})
|
||||
hasSuccess = true
|
||||
} else if (result.success_count > 0) {
|
||||
toast({
|
||||
title: '部分成功',
|
||||
description: `成功 ${result.success_count} 个，失败 ${result.fail_count} 个`
|
||||
})
|
||||
hasSuccess = true
|
||||
} else {
|
||||
const errors = result.results.map(r => r.error).filter(Boolean).join('; ')
|
||||
toast({
|
||||
title: '上传失败',
|
||||
description: errors || '所有 Key 上传都失败了',
|
||||
variant: 'destructive'
|
||||
})
|
||||
}
|
||||
} catch (error: any) {
|
||||
toast({
|
||||
title: '上传失败',
|
||||
description: error.response?.data?.detail || error.message,
|
||||
variant: 'destructive'
|
||||
})
|
||||
} finally {
|
||||
uploading.value = false
|
||||
isDragging.value = false
|
||||
// 有成功上传时刷新列表，并重置到第一页
|
||||
if (hasSuccess) {
|
||||
currentPage.value = 1
|
||||
await fetchData()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleDrop(e: DragEvent) {
|
||||
isDragging.value = false
|
||||
const files = e.dataTransfer?.files
|
||||
if (files && files.length > 0) {
|
||||
uploadFile(files[0])
|
||||
}
|
||||
}
|
||||
|
||||
function handleFileSelect(e: Event) {
|
||||
const input = e.target as HTMLInputElement
|
||||
if (input.files && input.files.length > 0) {
|
||||
uploadFile(input.files[0])
|
||||
input.value = '' // 清空以便重复选择同一文件
|
||||
}
|
||||
}
|
||||
|
||||
// 工具函数
|
||||
function formatDate(dateStr: string) {
|
||||
if (!dateStr) return '-'
|
||||
const date = new Date(dateStr)
|
||||
return date.toLocaleString('zh-CN', {
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})
|
||||
}
|
||||
|
||||
function getFileIcon(mimeType: string | null) {
|
||||
if (!mimeType) return File
|
||||
if (mimeType.startsWith('video/')) return Video
|
||||
if (mimeType.startsWith('image/')) return Image
|
||||
if (mimeType.startsWith('audio/')) return Music
|
||||
if (mimeType.startsWith('text/') || mimeType.includes('pdf')) return FileText
|
||||
return File
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user