mlogclub
83 lines
2.2 KiB
TypeScript
83 lines
2.2 KiB
TypeScript
"use client"
|
|
|
|
import { useCallback, useEffect, useState } from "react"
|
|
|
|
import { toast } from "sonner"
|
|
|
|
import { ProjectDialog } from "@/components/project-dialog"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import {
|
|
fetchAIWorkflowUsage,
|
|
type AIWorkflow,
|
|
type AIWorkflowUsage,
|
|
} from "@/lib/api/admin"
|
|
|
|
export function WorkflowUsageDialog({
|
|
workflow,
|
|
open,
|
|
onOpenChange,
|
|
}: {
|
|
workflow: AIWorkflow | null
|
|
open: boolean
|
|
onOpenChange: (open: boolean) => void
|
|
}) {
|
|
const [usage, setUsage] = useState<AIWorkflowUsage[]>([])
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
const load = useCallback(async () => {
|
|
if (!workflow || !open) return
|
|
setLoading(true)
|
|
try {
|
|
setUsage((await fetchAIWorkflowUsage(workflow.id)) ?? [])
|
|
} catch (error) {
|
|
toast.error(error instanceof Error ? error.message : "加载使用情况失败")
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}, [open, workflow])
|
|
|
|
useEffect(() => {
|
|
void load()
|
|
}, [load])
|
|
|
|
return (
|
|
<ProjectDialog
|
|
open={open}
|
|
onOpenChange={onOpenChange}
|
|
title="使用情况"
|
|
description={workflow?.name}
|
|
size="lg"
|
|
bodyClassName="min-h-[360px]"
|
|
>
|
|
{loading ? (
|
|
<div className="flex min-h-64 items-center justify-center text-sm text-muted-foreground">
|
|
正在加载使用情况…
|
|
</div>
|
|
) : usage.length ? (
|
|
<div className="space-y-3">
|
|
{usage.map((item) => (
|
|
<div
|
|
key={`${item.aiAgentId}-${item.workflowVersionId}`}
|
|
className="flex items-center justify-between rounded-md border p-4"
|
|
>
|
|
<div>
|
|
<div className="font-medium">{item.aiAgentName}</div>
|
|
<div className="mt-1 text-sm text-muted-foreground">
|
|
固定关联 v{item.workflowVersion}
|
|
</div>
|
|
</div>
|
|
<Badge variant={item.enabled ? "secondary" : "outline"}>
|
|
{item.enabled ? "启用" : "已停用"}
|
|
</Badge>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="flex min-h-64 items-center justify-center text-sm text-muted-foreground">
|
|
暂未被任何 Agent 使用
|
|
</div>
|
|
)}
|
|
</ProjectDialog>
|
|
)
|
|
}
|