DreamWeaver/dreamweaver
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve generation analytics and maintenance

Browse Source
This commit is contained in:
Yuyan
2026-04-19 09:03:40 +08:00
parent d5a173aa0d
commit 5318de670f
21 changed files with 1155 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
admin-frontend/src/views/MyStories.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, ref, onMounted } from 'vue'
import { computed, ref, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { api } from '../api/client'
import BaseButton from '../components/ui/BaseButton.vue'
@@ -45,6 +45,8 @@ interface GenerationProviderStat {
}
interface GenerationProviderAnalytics {
window_days: number | null
capability: string | null
total_calls: number
successful_calls: number
failed_calls: number
@@ -53,14 +55,43 @@ interface GenerationProviderAnalytics {
job_count: number
story_count: number
by_provider: GenerationProviderStat[]
failure_reasons: Array<{
reason: string
count: number
}>
}
interface GenerationRecentFailure {
job_id: string
story_id: number | null
story_title: string | null
output_mode: string
current_step: string
error_message: string | null
failure_label: string
updated_at: string
}
interface GenerationOpsSummary {
window_hours: number
stale_threshold_minutes: number
active_jobs: number
stale_running_jobs: number
failed_jobs: number
degraded_jobs: number
asset_retry_jobs: number
recent_failures: GenerationRecentFailure[]
}
const router = useRouter()
const stories = ref<StoryItem[]>([])
const providerAnalytics = ref<GenerationProviderAnalytics | null>(null)
const opsSummary = ref<GenerationOpsSummary | null>(null)
const loading = ref(true)
const error = ref('')
const showCreateModal = ref(false)
const selectedWindow = ref<'7' | '30' | 'all'>('30')
const selectedCapability = ref<'all' | 'text' | 'image' | 'tts' | 'storybook'>('all')
const readableCount = computed(() =>
stories.value.filter((story) => isReadableGenerationStatus(story.generation_status)).length,
)
@@ -74,15 +105,30 @@ const providerSuccessRate = computed(() => {
)
})
const topProvider = computed(() => providerAnalytics.value?.by_provider[0] ?? null)
const topFailureReason = computed(() => providerAnalytics.value?.failure_reasons[0] ?? null)
function buildProviderAnalyticsPath() {
const params = new URLSearchParams()
if (selectedWindow.value !== 'all') {
params.set('days', selectedWindow.value)
}
if (selectedCapability.value !== 'all') {
params.set('capability', selectedCapability.value)
}
const query = params.toString()
return `/api/generations/provider-analytics${query ? `?${query}` : ''}`
}
async function fetchStories() {
try {
const [storyList, analytics] = await Promise.all([
const [storyList, analytics, ops] = await Promise.all([
api.get<StoryItem[]>('/api/stories'),
api.get<GenerationProviderAnalytics>('/api/generations/provider-analytics'),
api.get<GenerationProviderAnalytics>(buildProviderAnalyticsPath()),
api.get<GenerationOpsSummary>('/api/generations/ops-summary'),
])
stories.value = storyList
providerAnalytics.value = analytics
opsSummary.value = ops
} catch (e) {
error.value = e instanceof Error ? e.message : '加载失败'
} finally {
@@ -123,6 +169,27 @@ function formatCost(value?: number | null) {
return typeof value === 'number' ? `$${value.toFixed(4)}` : '$0.0000'
}
function formatOutputMode(value: string) {
switch (value) {
case 'storybook':
return '绘本'
case 'asset_retry':
return '资源重试'
case 'asset_generation':
return '资源生成'
default:
return '故事'
}
}
function setWindow(value: '7' | '30' | 'all') {
selectedWindow.value = value
}
function setCapability(value: 'all' | 'text' | 'image' | 'tts' | 'storybook') {
selectedCapability.value = value
}
onMounted(() => {
fetchStories()
if (router.currentRoute.value.query.openCreate) {
@@ -130,6 +197,10 @@ onMounted(() => {
router.replace({ query: { ...router.currentRoute.value.query, openCreate: undefined } })
}
})
watch([selectedWindow, selectedCapability], () => {
void fetchStories()
})
</script>
<template>
@@ -213,6 +284,18 @@ onMounted(() => {
<p class="mt-2 text-sm leading-6 text-gray-500">
生成、资源补全和失败恢复留下的供应商调用轨迹。
</p>
<div class="mt-4 flex flex-wrap gap-2">
<button type="button" class="rounded-lg border px-3 py-1.5 text-sm transition-colors" :class="selectedWindow === '7' ? 'border-gray-900 bg-gray-900 text-white' : 'border-gray-200 bg-white text-gray-600 hover:border-gray-400'" @click="setWindow('7')">最近 7 天</button>
<button type="button" class="rounded-lg border px-3 py-1.5 text-sm transition-colors" :class="selectedWindow === '30' ? 'border-gray-900 bg-gray-900 text-white' : 'border-gray-200 bg-white text-gray-600 hover:border-gray-400'" @click="setWindow('30')">最近 30 天</button>
<button type="button" class="rounded-lg border px-3 py-1.5 text-sm transition-colors" :class="selectedWindow === 'all' ? 'border-gray-900 bg-gray-900 text-white' : 'border-gray-200 bg-white text-gray-600 hover:border-gray-400'" @click="setWindow('all')">全部</button>
</div>
<div class="mt-3 flex flex-wrap gap-2">
<button type="button" class="rounded-lg border px-3 py-1.5 text-sm transition-colors" :class="selectedCapability === 'all' ? 'border-emerald-600 bg-emerald-600 text-white' : 'border-gray-200 bg-white text-gray-600 hover:border-gray-400'" @click="setCapability('all')">全部能力</button>
<button type="button" class="rounded-lg border px-3 py-1.5 text-sm transition-colors" :class="selectedCapability === 'text' ? 'border-emerald-600 bg-emerald-600 text-white' : 'border-gray-200 bg-white text-gray-600 hover:border-gray-400'" @click="setCapability('text')">文本</button>
<button type="button" class="rounded-lg border px-3 py-1.5 text-sm transition-colors" :class="selectedCapability === 'image' ? 'border-emerald-600 bg-emerald-600 text-white' : 'border-gray-200 bg-white text-gray-600 hover:border-gray-400'" @click="setCapability('image')">图片</button>
<button type="button" class="rounded-lg border px-3 py-1.5 text-sm transition-colors" :class="selectedCapability === 'tts' ? 'border-emerald-600 bg-emerald-600 text-white' : 'border-gray-200 bg-white text-gray-600 hover:border-gray-400'" @click="setCapability('tts')">语音</button>
<button type="button" class="rounded-lg border px-3 py-1.5 text-sm transition-colors" :class="selectedCapability === 'storybook' ? 'border-emerald-600 bg-emerald-600 text-white' : 'border-gray-200 bg-white text-gray-600 hover:border-gray-400'" @click="setCapability('storybook')">绘本</button>
</div>
</div>
<div class="grid grid-cols-2 gap-3 sm:grid-cols-4 lg:min-w-[520px]">
<div class="rounded-lg border border-gray-100 bg-gray-50 px-3 py-3">
@@ -236,6 +319,70 @@ onMounted(() => {
<p v-if="topProvider" class="mt-4 text-sm text-gray-500">
当前样本中最前面的能力组合是 {{ topProvider.capability }} / {{ topProvider.adapter }}，成功 {{ topProvider.success_count }} 次，失败 {{ topProvider.failure_count }} 次。
</p>
<p v-if="topFailureReason" class="mt-2 text-sm text-rose-600">
最常见失败原因：{{ topFailureReason.reason }}（{{ topFailureReason.count }} 次）
</p>
</BaseCard>
<BaseCard
v-if="opsSummary"
class="mb-8"
padding="lg"
>
<div class="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
<div>
<h2 class="text-xl font-bold text-gray-800">任务运行概览</h2>
<p class="mt-2 text-sm leading-6 text-gray-500">
最近 {{ opsSummary.window_hours }} 小时的任务健康度，运行超过
{{ opsSummary.stale_threshold_minutes }} 分钟会被视为卡住。
</p>
</div>
<div class="grid grid-cols-2 gap-3 sm:grid-cols-4 lg:min-w-[520px]">
<div class="rounded-lg border border-gray-100 bg-gray-50 px-3 py-3">
<div class="text-xs text-gray-500">运行中</div>
<div class="mt-1 text-lg font-semibold text-gray-800">{{ opsSummary.active_jobs }}</div>
</div>
<div class="rounded-lg border border-gray-100 bg-gray-50 px-3 py-3">
<div class="text-xs text-gray-500">超时待收敛</div>
<div class="mt-1 text-lg font-semibold" :class="opsSummary.stale_running_jobs ? 'text-amber-600' : 'text-gray-800'">
{{ opsSummary.stale_running_jobs }}
</div>
</div>
<div class="rounded-lg border border-gray-100 bg-gray-50 px-3 py-3">
<div class="text-xs text-gray-500">最近失败</div>
<div class="mt-1 text-lg font-semibold" :class="opsSummary.failed_jobs ? 'text-rose-600' : 'text-gray-800'">
{{ opsSummary.failed_jobs }}
</div>
</div>
<div class="rounded-lg border border-gray-100 bg-gray-50 px-3 py-3">
<div class="text-xs text-gray-500">资源任务</div>
<div class="mt-1 text-lg font-semibold text-gray-800">{{ opsSummary.asset_retry_jobs }}</div>
</div>
</div>
</div>
<p v-if="opsSummary.degraded_jobs" class="mt-4 text-sm text-amber-600">
最近 {{ opsSummary.window_hours }} 小时有 {{ opsSummary.degraded_jobs }} 个任务以降级完成收尾。
</p>
<div v-if="opsSummary.recent_failures.length" class="mt-4 space-y-3">
<div
v-for="failure in opsSummary.recent_failures"
:key="failure.job_id"
class="rounded-lg border border-rose-100 bg-rose-50 px-4 py-3"
>
<div class="flex flex-wrap items-center justify-between gap-3">
<div class="text-sm font-semibold text-gray-800">
{{ failure.story_title || `${formatOutputMode(failure.output_mode)}任务` }}
</div>
<div class="text-xs text-gray-500">{{ formatDate(failure.updated_at) }}</div>
</div>
<div class="mt-1 text-xs text-rose-600">
{{ failure.failure_label }} · {{ failure.error_message || '请打开任务轨迹查看原因' }}
</div>
</div>
</div>
<p v-else class="mt-4 text-sm text-emerald-600">
最近 {{ opsSummary.window_hours }} 小时没有失败任务，当前链路比较稳定。
</p>
</BaseCard>
<!-- 故事网格 -->