mirror of
https://github.com/fawney19/Aether.git
synced 2026-09-02 17:30:23 +08:00
Fix Codex image progress heartbeat merge regressions
This commit is contained in:
@@ -28,12 +28,12 @@
|
||||
<div class="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center">
|
||||
<Loader2
|
||||
class="w-5 h-5 text-blue-500"
|
||||
:class="{ 'animate-spin': (stats?.processing_count ?? 0) > 0 }"
|
||||
:class="{ 'animate-spin': runningCount > 0 }"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-bold">
|
||||
{{ stats?.processing_count ?? stats?.by_status?.processing ?? '-' }}
|
||||
{{ runningCount || '-' }}
|
||||
</p>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
处理中
|
||||
@@ -51,7 +51,7 @@
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-bold">
|
||||
{{ stats?.by_status?.completed ?? '-' }}
|
||||
{{ stats?.by_status?.succeeded ?? '-' }}
|
||||
</p>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
已完成
|
||||
@@ -69,10 +69,10 @@
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-bold">
|
||||
{{ stats?.today_count ?? '-' }}
|
||||
{{ stats?.registered_tasks ?? '-' }}
|
||||
</p>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
今日任务
|
||||
已注册
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -102,14 +102,17 @@
|
||||
<SelectItem value="all">
|
||||
全部状态
|
||||
</SelectItem>
|
||||
<SelectItem value="submitted">
|
||||
已提交
|
||||
<SelectItem value="queued">
|
||||
排队中
|
||||
</SelectItem>
|
||||
<SelectItem value="processing">
|
||||
处理中
|
||||
<SelectItem value="running">
|
||||
运行中
|
||||
</SelectItem>
|
||||
<SelectItem value="completed">
|
||||
已完成
|
||||
<SelectItem value="retrying">
|
||||
重试中
|
||||
</SelectItem>
|
||||
<SelectItem value="succeeded">
|
||||
成功
|
||||
</SelectItem>
|
||||
<SelectItem value="failed">
|
||||
失败
|
||||
@@ -117,13 +120,16 @@
|
||||
<SelectItem value="cancelled">
|
||||
已取消
|
||||
</SelectItem>
|
||||
<SelectItem value="skipped">
|
||||
已跳过
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<!-- 模型筛选 -->
|
||||
<Input
|
||||
v-model="filterModel"
|
||||
type="text"
|
||||
placeholder="模型..."
|
||||
placeholder="任务 Key..."
|
||||
class="w-32 h-8 text-xs"
|
||||
/>
|
||||
<!-- 刷新按钮 -->
|
||||
@@ -207,13 +213,13 @@
|
||||
v-if="isVideoTask(task)"
|
||||
class="w-4 h-4 text-muted-foreground shrink-0"
|
||||
/>
|
||||
<span class="font-medium text-sm truncate">{{ task.model }}</span>
|
||||
<span class="font-medium text-sm truncate">{{ displayTaskName(task) }}</span>
|
||||
</div>
|
||||
<p
|
||||
class="text-xs text-muted-foreground truncate max-w-[280px]"
|
||||
:title="task.prompt"
|
||||
:title="displayTaskDescription(task)"
|
||||
>
|
||||
{{ task.prompt }}
|
||||
{{ displayTaskDescription(task) }}
|
||||
</p>
|
||||
</div>
|
||||
</TableCell>
|
||||
@@ -229,7 +235,7 @@
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 text-muted-foreground">
|
||||
<Server class="w-3 h-3" />
|
||||
<span class="truncate max-w-[100px]">{{ task.provider_name }}</span>
|
||||
<span class="truncate max-w-[100px]">{{ displayTaskSource(task) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
@@ -243,7 +249,7 @@
|
||||
{{ getStatusLabel(task.status) }}
|
||||
</Badge>
|
||||
<div
|
||||
v-if="task.progress_percent > 0 && task.status === 'processing'"
|
||||
v-if="task.progress_percent > 0 && isRunningStatus(task.status)"
|
||||
class="w-full"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
@@ -262,11 +268,11 @@
|
||||
<TableCell>
|
||||
<div class="text-xs space-y-0.5 text-muted-foreground">
|
||||
<div
|
||||
v-if="task.duration_seconds"
|
||||
v-if="task.duration_seconds || task.attempt"
|
||||
class="flex items-center gap-1"
|
||||
>
|
||||
<Timer class="w-3 h-3" />
|
||||
<span>{{ task.duration_seconds }}s</span>
|
||||
<span>{{ task.duration_seconds ? `${task.duration_seconds}s` : `${task.attempt}/${task.max_attempts ?? 1}` }}</span>
|
||||
</div>
|
||||
<div v-if="task.resolution">
|
||||
{{ task.resolution }}
|
||||
@@ -284,11 +290,11 @@
|
||||
<span>{{ formatDate(task.created_at) }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="task.completed_at"
|
||||
v-if="finishTime(task)"
|
||||
class="flex items-center gap-1.5 text-green-600 dark:text-green-400"
|
||||
>
|
||||
<CheckCircle class="w-3 h-3" />
|
||||
<span>{{ formatDate(task.completed_at) }}</span>
|
||||
<span>{{ formatDate(finishTime(task)) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
@@ -305,6 +311,7 @@
|
||||
<Eye class="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
v-if="isVideoTask(task)"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="h-7 w-7"
|
||||
@@ -337,7 +344,7 @@
|
||||
v-if="isVideoTask(task)"
|
||||
class="w-4 h-4 text-muted-foreground shrink-0"
|
||||
/>
|
||||
<span class="font-medium text-sm truncate">{{ task.model }}</span>
|
||||
<span class="font-medium text-sm truncate">{{ displayTaskName(task) }}</span>
|
||||
</div>
|
||||
<Badge
|
||||
:variant="getStatusVariant(task.status)"
|
||||
@@ -349,7 +356,7 @@
|
||||
|
||||
<!-- 进度条(如果有) -->
|
||||
<div
|
||||
v-if="task.progress_percent > 0 && task.status === 'processing'"
|
||||
v-if="task.progress_percent > 0 && isRunningStatus(task.status)"
|
||||
class="space-y-1"
|
||||
>
|
||||
<div class="h-1.5 bg-muted rounded-full overflow-hidden">
|
||||
@@ -365,7 +372,7 @@
|
||||
|
||||
<!-- Prompt -->
|
||||
<p class="text-sm text-muted-foreground line-clamp-2">
|
||||
{{ task.prompt }}
|
||||
{{ displayTaskDescription(task) }}
|
||||
</p>
|
||||
|
||||
<!-- 信息网格 -->
|
||||
@@ -379,24 +386,25 @@
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 text-muted-foreground">
|
||||
<Server class="w-3 h-3" />
|
||||
<span class="truncate">{{ task.provider_name }}</span>
|
||||
<span class="truncate">{{ displayTaskSource(task) }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 text-muted-foreground">
|
||||
<Clock class="w-3 h-3" />
|
||||
<span>{{ formatDate(task.created_at) }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="task.duration_seconds"
|
||||
v-if="task.duration_seconds || task.attempt"
|
||||
class="flex items-center gap-1.5 text-muted-foreground"
|
||||
>
|
||||
<Timer class="w-3 h-3" />
|
||||
<span>{{ task.duration_seconds }}s</span>
|
||||
<span>{{ task.duration_seconds ? `${task.duration_seconds}s` : `${task.attempt}/${task.max_attempts ?? 1}` }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="flex justify-end gap-2">
|
||||
<Button
|
||||
v-if="isVideoTask(task)"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
class="h-7 text-xs"
|
||||
@@ -459,7 +467,7 @@
|
||||
v-if="isVideoTask(selectedTask)"
|
||||
class="w-3.5 h-3.5 mr-1"
|
||||
/>
|
||||
<span>{{ selectedTask.model }}</span>
|
||||
<span>{{ displayTaskName(selectedTask) }}</span>
|
||||
</div>
|
||||
<Badge :variant="getStatusVariant(selectedTask.status)">
|
||||
{{ getStatusLabel(selectedTask.status) }}
|
||||
@@ -503,11 +511,11 @@
|
||||
<span>用户: {{ selectedTask.username }}</span>
|
||||
</template>
|
||||
<span class="opacity-40">|</span>
|
||||
<span>Provider: {{ selectedTask.provider_name }}</span>
|
||||
<span>{{ displayTaskSource(selectedTask) }}</span>
|
||||
</div>
|
||||
<!-- 进度条 -->
|
||||
<div
|
||||
v-if="selectedTask.progress_percent > 0 && selectedTask.status === 'processing'"
|
||||
v-if="selectedTask.progress_percent > 0 && isRunningStatus(selectedTask.status)"
|
||||
class="mt-3"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
@@ -641,7 +649,7 @@
|
||||
|
||||
<!-- 任务完成但无视频 -->
|
||||
<div
|
||||
v-else-if="selectedTask.status === 'completed'"
|
||||
v-else-if="isSucceededStatus(selectedTask.status) && isVideoTask(selectedTask)"
|
||||
class="p-4 bg-amber-50 dark:bg-amber-900/20 rounded-lg border border-amber-200 dark:border-amber-800 text-center"
|
||||
>
|
||||
<Video class="w-8 h-8 mx-auto mb-2 text-amber-500" />
|
||||
@@ -660,14 +668,14 @@
|
||||
variant="outline"
|
||||
size="sm"
|
||||
class="h-6 px-2 text-xs"
|
||||
@click="copyToClipboard(selectedTask.prompt)"
|
||||
@click="copyToClipboard(displayTaskDescription(selectedTask))"
|
||||
>
|
||||
<Copy class="w-3 h-3 mr-1" />
|
||||
复制
|
||||
</Button>
|
||||
</div>
|
||||
<div class="p-3 bg-muted/50 rounded-lg border border-border/60 text-sm whitespace-pre-wrap break-words max-h-32 overflow-y-auto leading-relaxed">
|
||||
{{ selectedTask.prompt }}
|
||||
{{ displayTaskDescription(selectedTask) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -738,7 +746,7 @@
|
||||
轮询
|
||||
</p>
|
||||
<p class="text-sm font-medium">
|
||||
{{ selectedTask.poll_count }} / {{ selectedTask.max_poll_count }}
|
||||
{{ selectedTask.poll_count ?? selectedTask.attempt ?? 0 }} / {{ selectedTask.max_poll_count ?? selectedTask.max_attempts ?? 1 }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="p-3 bg-muted/30 rounded-lg">
|
||||
@@ -746,7 +754,7 @@
|
||||
重试
|
||||
</p>
|
||||
<p class="text-sm font-medium">
|
||||
{{ selectedTask.retry_count }} / {{ selectedTask.max_retries }}
|
||||
{{ selectedTask.retry_count ?? 0 }} / {{ selectedTask.max_retries ?? selectedTask.max_attempts ?? 1 }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="p-3 bg-muted/30 rounded-lg">
|
||||
@@ -754,7 +762,7 @@
|
||||
轮询间隔
|
||||
</p>
|
||||
<p class="text-sm font-medium">
|
||||
{{ selectedTask.poll_interval_seconds }}s
|
||||
{{ selectedTask.poll_interval_seconds ? `${selectedTask.poll_interval_seconds}s` : selectedTask.trigger ?? '-' }}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
@@ -780,13 +788,13 @@
|
||||
<span>{{ formatTimeWithMs(selectedTask.created_at) }}</span>
|
||||
<span class="time-arrow-container">
|
||||
<span
|
||||
v-if="selectedTask.completed_at"
|
||||
v-if="finishTime(selectedTask)"
|
||||
class="time-duration"
|
||||
>+{{ calcDuration(selectedTask.created_at, selectedTask.completed_at) }}</span>
|
||||
>+{{ calcDuration(selectedTask.created_at, finishTime(selectedTask) || selectedTask.created_at) }}</span>
|
||||
<span class="time-arrow">→</span>
|
||||
</span>
|
||||
<template v-if="selectedTask.completed_at">
|
||||
<span>{{ formatTimeWithMs(selectedTask.completed_at) }}</span>
|
||||
<template v-if="finishTime(selectedTask)">
|
||||
<span>{{ formatTimeWithMs(finishTime(selectedTask)) }}</span>
|
||||
</template>
|
||||
<span
|
||||
v-else
|
||||
@@ -917,10 +925,47 @@ let overviewRefreshInFlight = false
|
||||
// 使用记录详情抽屉状态
|
||||
const usageDetailOpen = ref(false)
|
||||
const usageRequestId = ref<string | null>(null)
|
||||
const runningCount = computed(() => {
|
||||
return stats.value?.running_count
|
||||
?? stats.value?.processing_count
|
||||
?? stats.value?.by_status?.running
|
||||
?? stats.value?.by_status?.processing
|
||||
?? 0
|
||||
})
|
||||
|
||||
// 判断是否为视频任务
|
||||
function isVideoTask(task: AsyncTaskItem): boolean {
|
||||
return task.task_type === 'video' || !!task.video_url || !!task.duration_seconds
|
||||
return task.task_type === 'video' || !!task.video_url || !!task.duration_seconds || task.task_key === 'video.task.poller'
|
||||
}
|
||||
|
||||
function displayTaskName(task: AsyncTaskItem | AsyncTaskDetail): string {
|
||||
return task.model || task.task_key || task.id
|
||||
}
|
||||
|
||||
function displayTaskDescription(task: AsyncTaskItem | AsyncTaskDetail): string {
|
||||
if (task.prompt) return task.prompt
|
||||
if (task.progress_message) return task.progress_message
|
||||
if (task.error_message) return task.error_message
|
||||
if (task.payload) return formatJson(task.payload)
|
||||
return task.trigger || task.kind || '-'
|
||||
}
|
||||
|
||||
function displayTaskSource(task: AsyncTaskItem | AsyncTaskDetail): string {
|
||||
if (task.provider_name) return `Provider: ${task.provider_name}`
|
||||
if (task.kind || task.trigger) return `${task.kind ?? 'task'} / ${task.trigger ?? '-'}`
|
||||
return task.owner_instance || '-'
|
||||
}
|
||||
|
||||
function finishTime(task: AsyncTaskItem | AsyncTaskDetail): string | null {
|
||||
return task.finished_at || task.completed_at || null
|
||||
}
|
||||
|
||||
function isRunningStatus(status: string): boolean {
|
||||
return ['running', 'retrying', 'processing', 'submitted', 'pending', 'queued'].includes(status)
|
||||
}
|
||||
|
||||
function isSucceededStatus(status: string): boolean {
|
||||
return status === 'succeeded' || status === 'completed'
|
||||
}
|
||||
|
||||
// 获取任务列表
|
||||
@@ -929,7 +974,7 @@ async function fetchTasks() {
|
||||
try {
|
||||
const response = await asyncTasksApi.list({
|
||||
status: filterStatus.value !== 'all' ? filterStatus.value as AsyncTaskStatus : undefined,
|
||||
model: filterModel.value || undefined,
|
||||
task_key: filterModel.value || undefined,
|
||||
page: currentPage.value,
|
||||
page_size: pageSize.value,
|
||||
})
|
||||
@@ -1085,6 +1130,7 @@ async function cancelTask(task: AsyncTaskItem | AsyncTaskDetail) {
|
||||
// 状态相关
|
||||
function getStatusVariant(status: string): 'default' | 'secondary' | 'destructive' | 'outline' {
|
||||
switch (status) {
|
||||
case 'succeeded':
|
||||
case 'completed':
|
||||
return 'default'
|
||||
case 'failed':
|
||||
@@ -1101,16 +1147,20 @@ function getStatusLabel(status: string): string {
|
||||
pending: '待处理',
|
||||
submitted: '已提交',
|
||||
queued: '排队中',
|
||||
running: '运行中',
|
||||
retrying: '重试中',
|
||||
processing: '处理中',
|
||||
succeeded: '成功',
|
||||
completed: '已完成',
|
||||
failed: '失败',
|
||||
cancelled: '已取消',
|
||||
skipped: '已跳过',
|
||||
}
|
||||
return labels[status] || status
|
||||
}
|
||||
|
||||
function canCancel(status: string): boolean {
|
||||
return ['pending', 'submitted', 'queued', 'processing'].includes(status)
|
||||
return ['pending', 'submitted', 'queued', 'processing', 'running', 'retrying'].includes(status)
|
||||
}
|
||||
|
||||
// 格式化日期(简短格式,用于表格列表)
|
||||
@@ -1229,7 +1279,7 @@ watch(filterModel, () => {
|
||||
// 检查是否有进行中的任务
|
||||
const hasProcessingTasks = computed(() => {
|
||||
return tasks.value.some(t =>
|
||||
['pending', 'submitted', 'queued', 'processing'].includes(t.status)
|
||||
['pending', 'submitted', 'queued', 'processing', 'running', 'retrying'].includes(t.status)
|
||||
)
|
||||
})
|
||||
|
||||
|
||||
@@ -275,10 +275,104 @@
|
||||
<p>7. <strong>代理指标</strong>: 仅保留 1m/1h 聚合桶,清理任务按批次删除过期桶</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 border border-border rounded-lg overflow-hidden">
|
||||
<div class="flex items-center justify-between px-4 py-3 border-b border-border">
|
||||
<div>
|
||||
<h4 class="text-sm font-medium">
|
||||
最近清理记录
|
||||
</h4>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
自动清理、手动系统清理和请求体后台任务的执行结果
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:disabled="cleanupRunsLoading"
|
||||
@click="loadCleanupRuns"
|
||||
>
|
||||
<RefreshCw
|
||||
class="w-3.5 h-3.5 mr-1.5"
|
||||
:class="{ 'animate-spin': cleanupRunsLoading }"
|
||||
/>
|
||||
刷新
|
||||
</Button>
|
||||
</div>
|
||||
<div
|
||||
v-if="cleanupRuns.length === 0 && !cleanupRunsLoading"
|
||||
class="px-4 py-6 text-sm text-muted-foreground"
|
||||
>
|
||||
暂无清理记录
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="overflow-x-auto"
|
||||
>
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-muted/30 text-xs text-muted-foreground">
|
||||
<tr>
|
||||
<th class="px-4 py-2 text-left font-medium">
|
||||
时间
|
||||
</th>
|
||||
<th class="px-4 py-2 text-left font-medium">
|
||||
类型
|
||||
</th>
|
||||
<th class="px-4 py-2 text-left font-medium">
|
||||
来源
|
||||
</th>
|
||||
<th class="px-4 py-2 text-left font-medium">
|
||||
状态
|
||||
</th>
|
||||
<th class="px-4 py-2 text-left font-medium">
|
||||
结果
|
||||
</th>
|
||||
<th class="px-4 py-2 text-right font-medium">
|
||||
耗时
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="run in cleanupRuns"
|
||||
:key="run.id"
|
||||
class="border-t border-border"
|
||||
>
|
||||
<td class="px-4 py-2 whitespace-nowrap">
|
||||
{{ formatRunTime(run.started_at_unix_secs) }}
|
||||
</td>
|
||||
<td class="px-4 py-2 whitespace-nowrap">
|
||||
{{ cleanupKindLabel(run.kind) }}
|
||||
</td>
|
||||
<td class="px-4 py-2 whitespace-nowrap text-muted-foreground">
|
||||
{{ run.trigger === 'manual' ? '手动' : '自动' }}
|
||||
</td>
|
||||
<td class="px-4 py-2 whitespace-nowrap">
|
||||
<span :class="cleanupStatusClass(run.status)">
|
||||
{{ cleanupStatusLabel(run.status) }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-2 min-w-[18rem]">
|
||||
<div>{{ run.error || run.message }}</div>
|
||||
<div class="text-xs text-muted-foreground">
|
||||
{{ cleanupSummaryText(run.summary) }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-2 text-right whitespace-nowrap text-muted-foreground">
|
||||
{{ formatDuration(run.duration_ms) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</CardSection>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
import { RefreshCw } from 'lucide-vue-next'
|
||||
import { adminApi, type CleanupRunRecord } from '@/api/admin'
|
||||
import Button from '@/components/ui/button.vue'
|
||||
import Input from '@/components/ui/input.vue'
|
||||
import Label from '@/components/ui/label.vue'
|
||||
@@ -317,4 +411,95 @@ defineEmits<{
|
||||
'update:proxyNodeMetrics1hRetentionDays': [value: number]
|
||||
'update:proxyNodeMetricsCleanupBatchSize': [value: number]
|
||||
}>()
|
||||
|
||||
const cleanupRuns = ref<CleanupRunRecord[]>([])
|
||||
const cleanupRunsLoading = ref(false)
|
||||
let cleanupRunsTimer: ReturnType<typeof window.setInterval> | null = null
|
||||
|
||||
async function loadCleanupRuns() {
|
||||
cleanupRunsLoading.value = true
|
||||
try {
|
||||
const response = await adminApi.getCleanupRuns()
|
||||
cleanupRuns.value = response.items.slice(0, 10)
|
||||
} finally {
|
||||
cleanupRunsLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function cleanupKindLabel(kind: string): string {
|
||||
const labels: Record<string, string> = {
|
||||
usage_cleanup: '请求记录',
|
||||
audit_cleanup: '审计日志',
|
||||
request_candidate_cleanup: '候选记录',
|
||||
request_bodies: '请求体',
|
||||
config_purge: '配置清空',
|
||||
users_purge: '用户清空',
|
||||
usage_purge: '使用记录清空',
|
||||
audit_logs_purge: '审计日志清空',
|
||||
stats_purge: '统计聚合清空',
|
||||
system_cleanup: '系统清理',
|
||||
}
|
||||
return labels[kind] || kind
|
||||
}
|
||||
|
||||
function cleanupStatusLabel(status: string): string {
|
||||
if (status === 'processing') return '执行中'
|
||||
if (status === 'failed') return '失败'
|
||||
return '完成'
|
||||
}
|
||||
|
||||
function cleanupStatusClass(status: string): string {
|
||||
if (status === 'processing') return 'text-amber-500'
|
||||
if (status === 'failed') return 'text-destructive'
|
||||
return 'text-emerald-500'
|
||||
}
|
||||
|
||||
function formatRunTime(value: number): string {
|
||||
if (!value) return '-'
|
||||
return new Date(value * 1000).toLocaleString()
|
||||
}
|
||||
|
||||
function formatDuration(value: number | null): string {
|
||||
if (value === null || value === undefined) return '-'
|
||||
if (value < 1000) return `${value}ms`
|
||||
return `${(value / 1000).toFixed(1)}s`
|
||||
}
|
||||
|
||||
function cleanupSummaryText(summary: Record<string, unknown>): string {
|
||||
const total = typeof summary.total === 'number' ? summary.total : null
|
||||
if (total !== null) return `影响 ${total} 行`
|
||||
|
||||
const entries = Object.entries(summary)
|
||||
.filter(([, value]) => typeof value === 'number' && value > 0)
|
||||
.map(([key, value]) => `${summaryLabel(key)} ${value}`)
|
||||
return entries.length > 0 ? entries.join(' / ') : '无数据变更'
|
||||
}
|
||||
|
||||
function summaryLabel(key: string): string {
|
||||
const labels: Record<string, string> = {
|
||||
body_externalized: '压缩',
|
||||
legacy_body_refs_migrated: '迁移',
|
||||
body_cleaned: '清体',
|
||||
header_cleaned: '清头',
|
||||
keys_cleaned: 'Key',
|
||||
records_deleted: '删记录',
|
||||
audit_logs_deleted: '删日志',
|
||||
request_candidates_deleted: '删候选',
|
||||
}
|
||||
return labels[key] || key
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void loadCleanupRuns()
|
||||
cleanupRunsTimer = window.setInterval(() => {
|
||||
void loadCleanupRuns()
|
||||
}, 15_000)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (cleanupRunsTimer) {
|
||||
window.clearInterval(cleanupRunsTimer)
|
||||
cleanupRunsTimer = null
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -62,55 +62,55 @@ const purgeItems: PurgeItem[] = [
|
||||
{
|
||||
key: 'config',
|
||||
title: '清空配置',
|
||||
description: '删除所有提供商、端点、API Key 和模型配置',
|
||||
description: '后台删除所有提供商、端点、API Key 和模型配置',
|
||||
buttonText: '清空配置',
|
||||
icon: markRaw(Settings),
|
||||
confirmMessage: '确定要清空所有提供商配置吗?这将删除所有提供商、端点、API Key 和模型配置,操作不可逆。',
|
||||
confirmMessage: '确定要后台清空所有提供商配置吗?这将删除所有提供商、端点、API Key 和模型配置,操作不可逆。',
|
||||
action: () => adminApi.purgeConfig(),
|
||||
},
|
||||
{
|
||||
key: 'users',
|
||||
title: '清空用户',
|
||||
description: '删除所有非管理员用户及其 API Keys',
|
||||
description: '后台删除所有非管理员用户及其 API Keys',
|
||||
buttonText: '清空用户',
|
||||
icon: markRaw(Users),
|
||||
confirmMessage: '确定要清空所有非管理员用户吗?管理员账户将被保留,操作不可逆。',
|
||||
confirmMessage: '确定要后台清空所有非管理员用户吗?管理员账户将被保留,操作不可逆。',
|
||||
action: () => adminApi.purgeUsers(),
|
||||
},
|
||||
{
|
||||
key: 'usage',
|
||||
title: '清空使用记录',
|
||||
description: '删除全部使用记录和请求候选记录',
|
||||
description: '后台清空全部使用记录和请求候选记录',
|
||||
buttonText: '清空记录',
|
||||
icon: markRaw(BarChart3),
|
||||
confirmMessage: '确定要清空全部使用记录吗?所有请求统计数据将被永久删除,操作不可逆。',
|
||||
confirmMessage: '确定要后台清空全部使用记录吗?所有请求统计数据将被永久删除,操作不可逆。',
|
||||
action: () => adminApi.purgeUsage(),
|
||||
},
|
||||
{
|
||||
key: 'audit-logs',
|
||||
title: '清空审计日志',
|
||||
description: '删除全部审计日志记录',
|
||||
description: '后台删除全部审计日志记录',
|
||||
buttonText: '清空日志',
|
||||
icon: markRaw(Shield),
|
||||
confirmMessage: '确定要清空全部审计日志吗?所有安全事件记录将被永久删除,操作不可逆。',
|
||||
confirmMessage: '确定要后台清空全部审计日志吗?所有安全事件记录将被永久删除,操作不可逆。',
|
||||
action: () => adminApi.purgeAuditLogs(),
|
||||
},
|
||||
{
|
||||
key: 'request-bodies',
|
||||
title: '清空请求体',
|
||||
description: '清空所有请求/响应体数据,保留统计信息',
|
||||
description: '后台分批清空所有请求/响应体数据,保留统计信息',
|
||||
buttonText: '清空请求体',
|
||||
icon: markRaw(FileText),
|
||||
confirmMessage: '确定要清空全部请求体吗?请求/响应内容将被清除,但 token 和成本等统计信息会保留,操作不可逆。',
|
||||
action: () => adminApi.purgeRequestBodies(),
|
||||
confirmMessage: '确定要后台清空全部请求体吗?请求/响应内容将被分批清除,但 token 和成本等统计信息会保留,操作不可逆。',
|
||||
action: () => adminApi.purgeRequestBodiesAsync(),
|
||||
},
|
||||
{
|
||||
key: 'stats',
|
||||
title: '清空统计聚合',
|
||||
description: '删除统计聚合数据,保留原始使用记录;统计可从原始使用记录重新构建',
|
||||
description: '后台删除统计聚合数据并重建,保留原始使用记录',
|
||||
buttonText: '清空统计聚合',
|
||||
icon: markRaw(PieChart),
|
||||
confirmMessage: '确定要清空全部统计聚合数据吗?原始使用记录会保留,仪表盘和累计统计可从原始记录重新构建。',
|
||||
confirmMessage: '确定要后台清空全部统计聚合数据吗?原始使用记录会保留,仪表盘和累计统计会从原始记录重新构建。',
|
||||
action: () => adminApi.purgeStats(),
|
||||
},
|
||||
]
|
||||
|
||||
@@ -191,6 +191,15 @@
|
||||
<!-- 操作按钮 -->
|
||||
<TableCell class="py-4">
|
||||
<div class="flex justify-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="h-8 w-8"
|
||||
title="一键安装并配置 CLI"
|
||||
@click="openInstallDialog(apiKey)"
|
||||
>
|
||||
<Terminal class="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
@@ -273,6 +282,15 @@
|
||||
</Badge>
|
||||
</div>
|
||||
<div class="flex items-center gap-0.5 flex-shrink-0">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="h-7 w-7"
|
||||
title="一键安装并配置 CLI"
|
||||
@click="openInstallDialog(apiKey)"
|
||||
>
|
||||
<Terminal class="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
@@ -503,13 +521,110 @@
|
||||
<template #footer>
|
||||
<Button
|
||||
class="h-10 px-5"
|
||||
@click="showKeyDialog = false"
|
||||
@click="closeCreatedKeyDialog"
|
||||
>
|
||||
确定
|
||||
</Button>
|
||||
</template>
|
||||
</Dialog>
|
||||
|
||||
<!-- 一键安装并配置 CLI 对话框 -->
|
||||
<Dialog
|
||||
v-model="showInstallDialog"
|
||||
size="lg"
|
||||
>
|
||||
<template #header>
|
||||
<div class="border-b border-border px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 flex-shrink-0">
|
||||
<Terminal class="h-5 w-5 text-primary" />
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="text-lg font-semibold text-foreground leading-tight">
|
||||
一键安装并配置 CLI
|
||||
</h3>
|
||||
<p class="text-xs text-muted-foreground truncate">
|
||||
当前密钥:{{ selectedInstallApiKey?.name || '未选择' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="space-y-5">
|
||||
<div class="rounded-lg border border-border/60 bg-muted/30 p-3 text-xs text-muted-foreground">
|
||||
选择要配置的 CLI 和目标系统,Aether 会生成 15 分钟内有效的一次性 install code。页面命令不会包含原始 API Key。
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label class="text-sm font-semibold">目标 CLI</Label>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
|
||||
<Button
|
||||
v-for="option in installCliOptions"
|
||||
:key="option.value"
|
||||
:variant="installCli === option.value ? 'default' : 'outline'"
|
||||
class="justify-start h-auto py-3"
|
||||
@click="selectInstallCli(option.value)"
|
||||
>
|
||||
{{ option.label }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label class="text-sm font-semibold">目标系统</Label>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
|
||||
<Button
|
||||
v-for="option in installSystemOptions"
|
||||
:key="option.value"
|
||||
:variant="installSystem === option.value ? 'default' : 'outline'"
|
||||
class="justify-start h-auto py-3"
|
||||
@click="selectInstallSystem(option.value)"
|
||||
>
|
||||
{{ option.label }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<Label class="text-sm font-semibold">复制到目标机器执行</Label>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
:disabled="installLoading || !selectedInstallApiKey"
|
||||
@click="refreshInstallCommand"
|
||||
>
|
||||
{{ installLoading ? '生成中...' : '重新生成' }}
|
||||
</Button>
|
||||
</div>
|
||||
<div class="rounded-lg border border-border/60 bg-background overflow-hidden">
|
||||
<pre class="max-h-32 overflow-x-auto whitespace-pre-wrap break-all p-3 text-xs font-mono">{{ installCommand || '正在生成短命令...' }}</pre>
|
||||
</div>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
{{ installCommandHint }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<Button
|
||||
variant="outline"
|
||||
class="h-10 px-5"
|
||||
@click="showInstallDialog = false"
|
||||
>
|
||||
关闭
|
||||
</Button>
|
||||
<Button
|
||||
class="h-10 px-5 shadow-lg shadow-primary/20"
|
||||
:disabled="!installCommand || installLoading"
|
||||
@click="copyTextToClipboard(installCommand)"
|
||||
>
|
||||
复制命令
|
||||
</Button>
|
||||
</template>
|
||||
</Dialog>
|
||||
|
||||
<!-- 删除确认对话框 -->
|
||||
<AlertDialog
|
||||
v-model="showDeleteDialog"
|
||||
@@ -525,8 +640,8 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { meApi, type ApiKey } from '@/api/me'
|
||||
import { ref, onMounted, computed, watch } from 'vue'
|
||||
import { meApi, type ApiKey, type InstallTargetCli, type InstallTargetSystem, type ApiKeyInstallSession } from '@/api/me'
|
||||
import Card from '@/components/ui/card.vue'
|
||||
import Button from '@/components/ui/button.vue'
|
||||
import Input from '@/components/ui/input.vue'
|
||||
@@ -543,17 +658,28 @@ import {
|
||||
TableRow
|
||||
} from '@/components/ui'
|
||||
import RefreshButton from '@/components/ui/refresh-button.vue'
|
||||
import { Plus, Key, Copy, Trash2, Loader2, Activity, CheckCircle, Power, SquarePen } from 'lucide-vue-next'
|
||||
import { Plus, Key, Copy, Trash2, Loader2, Activity, CheckCircle, Power, SquarePen, Terminal } from 'lucide-vue-next'
|
||||
import { useToast } from '@/composables/useToast'
|
||||
import { log } from '@/utils/logger'
|
||||
import { parseApiError } from '@/utils/errorParser'
|
||||
import { formatRateLimitSimple } from '@/utils/format'
|
||||
import { parseNumberInput } from '@/utils/form'
|
||||
import { getErrorStatus } from '@/types/api-error'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const { success, error: showError } = useToast()
|
||||
|
||||
const installCliOptions: Array<{ value: InstallTargetCli; label: string }> = [
|
||||
{ value: 'claude_code', label: 'Claude Code' },
|
||||
{ value: 'codex_cli', label: 'Codex CLI' },
|
||||
{ value: 'gemini_cli', label: 'Gemini CLI' }
|
||||
]
|
||||
|
||||
const installSystemOptions: Array<{ value: Exclude<InstallTargetSystem, 'auto'>; label: string }> = [
|
||||
{ value: 'macos', label: 'macOS' },
|
||||
{ value: 'linux', label: 'Linux' },
|
||||
{ value: 'windows', label: 'Windows' }
|
||||
]
|
||||
|
||||
const apiKeys = ref<ApiKey[]>([])
|
||||
const loading = ref(false)
|
||||
const creating = ref(false)
|
||||
@@ -571,6 +697,7 @@ const paginatedApiKeys = computed(() => {
|
||||
const showCreateDialog = ref(false)
|
||||
const showKeyDialog = ref(false)
|
||||
const showDeleteDialog = ref(false)
|
||||
const showInstallDialog = ref(false)
|
||||
|
||||
const newKeyName = ref('')
|
||||
const newKeyRateLimit = ref<number | undefined>(undefined)
|
||||
@@ -578,11 +705,38 @@ const newKeyConcurrentLimit = ref<number | undefined>(undefined)
|
||||
const newKeyValue = ref('')
|
||||
const keyToDelete = ref<ApiKey | null>(null)
|
||||
const editingApiKey = ref<ApiKey | null>(null)
|
||||
const selectedInstallApiKey = ref<ApiKey | null>(null)
|
||||
const pendingFirstInstallApiKey = ref<ApiKey | null>(null)
|
||||
const installCli = ref<InstallTargetCli>('claude_code')
|
||||
const installSystem = ref<Exclude<InstallTargetSystem, 'auto'>>('linux')
|
||||
const installSession = ref<ApiKeyInstallSession | null>(null)
|
||||
const installLoading = ref(false)
|
||||
|
||||
const installCommand = computed(() => {
|
||||
if (!installSession.value) return ''
|
||||
return installSystem.value === 'windows'
|
||||
? installSession.value.powershell_command
|
||||
: installSession.value.unix_command
|
||||
})
|
||||
|
||||
const installCommandHint = computed(() => {
|
||||
if (installSystem.value === 'windows') {
|
||||
return 'Windows 请在 PowerShell 中执行。install code 使用后立即失效,如需再次执行请重新生成。'
|
||||
}
|
||||
return 'macOS / Linux 请在 sh 兼容终端中执行。install code 使用后立即失效,如需再次执行请重新生成。'
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
installSystem.value = detectCurrentSystem()
|
||||
loadApiKeys()
|
||||
})
|
||||
|
||||
watch(showKeyDialog, (isOpen) => {
|
||||
if (!isOpen && pendingFirstInstallApiKey.value) {
|
||||
closeCreatedKeyDialog()
|
||||
}
|
||||
})
|
||||
|
||||
async function loadApiKeys() {
|
||||
loading.value = true
|
||||
try {
|
||||
@@ -618,6 +772,57 @@ function openCreateApiKeyDialog() {
|
||||
showCreateDialog.value = true
|
||||
}
|
||||
|
||||
function detectCurrentSystem(): Exclude<InstallTargetSystem, 'auto'> {
|
||||
const platform = window.navigator.platform.toLowerCase()
|
||||
const userAgent = window.navigator.userAgent.toLowerCase()
|
||||
if (platform.includes('mac')) return 'macos'
|
||||
if (platform.includes('win') || userAgent.includes('windows')) return 'windows'
|
||||
return 'linux'
|
||||
}
|
||||
|
||||
async function openInstallDialog(apiKey: ApiKey) {
|
||||
selectedInstallApiKey.value = apiKey
|
||||
installSession.value = null
|
||||
showInstallDialog.value = true
|
||||
await refreshInstallCommand()
|
||||
}
|
||||
|
||||
async function selectInstallCli(value: InstallTargetCli) {
|
||||
installCli.value = value
|
||||
await refreshInstallCommand()
|
||||
}
|
||||
|
||||
async function selectInstallSystem(value: Exclude<InstallTargetSystem, 'auto'>) {
|
||||
installSystem.value = value
|
||||
await refreshInstallCommand()
|
||||
}
|
||||
|
||||
async function refreshInstallCommand() {
|
||||
if (!selectedInstallApiKey.value) return
|
||||
installLoading.value = true
|
||||
installSession.value = null
|
||||
try {
|
||||
installSession.value = await meApi.createApiKeyInstallSession(selectedInstallApiKey.value.id, {
|
||||
target_cli: installCli.value,
|
||||
target_system: installSystem.value,
|
||||
})
|
||||
} catch (error) {
|
||||
log.error('生成 CLI 安装命令失败:', error)
|
||||
showError(parseApiError(error, '生成 CLI 安装命令失败'))
|
||||
} finally {
|
||||
installLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function closeCreatedKeyDialog() {
|
||||
showKeyDialog.value = false
|
||||
const pending = pendingFirstInstallApiKey.value
|
||||
pendingFirstInstallApiKey.value = null
|
||||
if (pending) {
|
||||
void openInstallDialog(pending)
|
||||
}
|
||||
}
|
||||
|
||||
function closeApiKeyDialog() {
|
||||
showCreateDialog.value = false
|
||||
editingApiKey.value = null
|
||||
@@ -634,6 +839,7 @@ async function saveApiKey() {
|
||||
|
||||
creating.value = true
|
||||
try {
|
||||
const isCreatingFirstApiKey = !editingApiKey.value && apiKeys.value.length === 0
|
||||
if (editingApiKey.value) {
|
||||
await meApi.updateApiKey(editingApiKey.value.id, {
|
||||
name: newKeyName.value,
|
||||
@@ -648,6 +854,9 @@ async function saveApiKey() {
|
||||
concurrent_limit: newKeyConcurrentLimit.value,
|
||||
})
|
||||
newKeyValue.value = newKey.key || ''
|
||||
if (isCreatingFirstApiKey) {
|
||||
pendingFirstInstallApiKey.value = newKey
|
||||
}
|
||||
showKeyDialog.value = true
|
||||
success('API 密钥创建成功')
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user