refactor: implement workflow usage and versions dialogs in the dashboard

web/app/dashboard/ai-workflows/_components/workflow-usage-dialog.tsx

@@ -0,0 +1,82 @@
+"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>
+  )
+}

web/app/dashboard/ai-workflows/_components/workflow-versions-dialog.tsx

@@ -0,0 +1,114 @@
+"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 { Button } from "@/components/ui/button"
+import {
+  fetchAIWorkflowVersions,
+  restoreAIWorkflowVersion,
+  type AIWorkflow,
+  type AIWorkflowVersion,
+} from "@/lib/api/admin"
+import { formatDateTime } from "@/lib/utils"
+
+export function WorkflowVersionsDialog({
+  workflow,
+  open,
+  onOpenChange,
+  onRestored,
+}: {
+  workflow: AIWorkflow | null
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onRestored: () => void
+}) {
+  const [versions, setVersions] = useState<AIWorkflowVersion[]>([])
+  const [loading, setLoading] = useState(false)
+  const [restoringId, setRestoringId] = useState<number | null>(null)
+
+  const load = useCallback(async () => {
+    if (!workflow || !open) return
+    setLoading(true)
+    try {
+      const page = await fetchAIWorkflowVersions({
+        workflowId: workflow.id,
+        limit: 50,
+      })
+      setVersions(page.results ?? [])
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "加载版本历史失败")
+    } finally {
+      setLoading(false)
+    }
+  }, [open, workflow])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  async function restore(version: AIWorkflowVersion) {
+    if (!workflow || restoringId !== null) return
+    setRestoringId(version.id)
+    try {
+      await restoreAIWorkflowVersion(workflow.id, version.id)
+      onRestored()
+      toast.success(`已将 v${version.version} 恢复为草稿`)
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "恢复失败")
+    } finally {
+      setRestoringId(null)
+    }
+  }
+
+  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>
+      ) : versions.length ? (
+        <div className="space-y-3">
+          {versions.map((version) => (
+            <div
+              key={version.id}
+              className="flex items-center gap-4 rounded-md border p-4"
+            >
+              <Badge>v{version.version}</Badge>
+              <div className="min-w-0 flex-1">
+                <div className="text-sm font-medium">
+                  {formatDateTime(version.publishedAt || version.createdAt)}
+                </div>
+                <div className="mt-1 text-xs text-muted-foreground">
+                  发布人：{version.publishedByName || "-"}
+                </div>
+              </div>
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={restoringId !== null}
+                onClick={() => void restore(version)}
+              >
+                {restoringId === version.id ? "恢复中…" : "恢复为草稿"}
+              </Button>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="flex min-h-64 items-center justify-center text-sm text-muted-foreground">
+          尚未发布版本
+        </div>
+      )}
+    </ProjectDialog>
+  )
+}

web/app/dashboard/ai-workflows/_components/workflow-workbench.tsx

@@ -2,8 +2,6 @@
 
 import { useCallback, useEffect, useState } from "react"
 
-import { ArrowLeftIcon } from "lucide-react"
-import { useRouter } from "next/navigation"
 import { toast } from "sonner"
 
 import { Badge } from "@/components/ui/badge"
@@ -16,28 +14,16 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog"
 import { Input } from "@/components/ui/input"
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/components/ui/tabs"
 import { Textarea } from "@/components/ui/textarea"
 import {
   createAIWorkflow,
   fetchAIWorkflow,
   fetchAIWorkflowDefaultDefinition,
-  fetchAIWorkflowUsage,
-  fetchAIWorkflowVersions,
   publishAIWorkflow,
-  restoreAIWorkflowVersion,
   updateAIWorkflow,
   type AIWorkflow,
   type AIWorkflowDefinition,
-  type AIWorkflowUsage,
-  type AIWorkflowVersion,
 } from "@/lib/api/admin"
-import { formatDateTime } from "@/lib/utils"
 
 import { OfficialWorkflowEditor } from "./official-workflow-editor"
 
@@ -68,23 +54,18 @@ const emptyDefinition: AIWorkflowDefinition = {
 
 type WorkflowWorkbenchProps = {
   workflowID?: number
-  onClose?: () => void
   onSaved?: () => void
 }
 
 export function WorkflowWorkbench({
   workflowID,
-  onClose,
   onSaved,
 }: WorkflowWorkbenchProps) {
-  const router = useRouter()
   const [active, setActive] = useState<AIWorkflow | null>(null)
   const [name, setName] = useState("")
   const [description, setDescription] = useState("")
   const [definition, setDefinition] =
     useState<AIWorkflowDefinition>(emptyDefinition)
-  const [versions, setVersions] = useState<AIWorkflowVersion[]>([])
-  const [usage, setUsage] = useState<AIWorkflowUsage[]>([])
   const [saving, setSaving] = useState(false)
   const [dirty, setDirty] = useState(false)
   const [loaded, setLoaded] = useState(false)
@@ -100,17 +81,11 @@ export function WorkflowWorkbench({
       return
     }
 
-    const [item, versionPage, uses] = await Promise.all([
+    const item = await fetchAIWorkflow(workflowID)
-      fetchAIWorkflow(workflowID),
-      fetchAIWorkflowVersions({ workflowId: workflowID, limit: 50 }),
-      fetchAIWorkflowUsage(workflowID),
-    ])
     setActive(item)
     setName(item.name)
     setDescription(item.description)
     setDefinition(item.draftDefinition)
-    setVersions(versionPage.results ?? [])
-    setUsage(uses ?? [])
     setDirty(false)
     setLoaded(true)
   }, [workflowID])
@@ -200,7 +175,18 @@ export function WorkflowWorkbench({
     setSaving(true)
     try {
       const version = await publishAIWorkflow(active.id, definition)
-      await load()
+      setActive((current) =>
+        current
+          ? {
+              ...current,
+              draftDefinition: definition,
+              publishedVersionId: version.id,
+              updatedAt: version.updatedAt,
+            }
+          : current
+      )
+      setDirty(false)
+      onSaved?.()
       toast.success(`已发布 v${version.version}`)
     } catch (error) {
       toast.error(error instanceof Error ? error.message : "发布失败")
@@ -209,17 +195,6 @@ export function WorkflowWorkbench({
     }
   }
 
-  async function restore(version: AIWorkflowVersion) {
-    if (!active) return
-    try {
-      await restoreAIWorkflowVersion(active.id, version.id)
-      await load()
-      toast.success(`已将 v${version.version} 恢复为草稿`)
-    } catch (error) {
-      toast.error(error instanceof Error ? error.message : "恢复失败")
-    }
-  }
-
   return (
     <div className="flex h-full min-h-0 flex-col overflow-hidden bg-background">
       <header className="shrink-0 border-b px-4 py-1.5">
@@ -260,100 +235,23 @@ export function WorkflowWorkbench({
               发布版本
             </Button>
           </div>
-          <div className="w-20 shrink-0" aria-hidden="true" />
+          <div className="w-8 shrink-0" aria-hidden="true" />
         </div>
       </header>
 
-      <Tabs defaultValue="editor" className="flex min-h-0 flex-1 flex-col">
+      <div className="min-h-0 flex-1 overflow-hidden">
-        <div className="shrink-0 border-b px-6">
+        {loaded ? (
-          <TabsList className="h-11 bg-transparent">
+          <OfficialWorkflowEditor
-            <TabsTrigger value="editor">编辑画布</TabsTrigger>
+            documentKey={workflowID ? `workflow-${workflowID}` : "new"}
-            <TabsTrigger value="versions">
+            definition={definition}
-              版本历史 ({versions.length})
+            onDefinitionChange={handleDefinitionChange}
-            </TabsTrigger>
+          />
-            <TabsTrigger value="usage">使用情况 ({usage.length})</TabsTrigger>
+        ) : (
-          </TabsList>
+          <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
-        </div>
+            正在加载节点能力…
-
+          </div>
-        <TabsContent
+        )}
-          value="editor"
+      </div>
-          className="min-h-0 flex-1 overflow-hidden data-[state=inactive]:hidden"
-        >
-          {loaded ? (
-            <OfficialWorkflowEditor
-              documentKey={workflowID ? `workflow-${workflowID}` : "new"}
-              definition={definition}
-              onDefinitionChange={handleDefinitionChange}
-            />
-          ) : (
-            <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
-              正在加载节点能力…
-            </div>
-          )}
-        </TabsContent>
-
-        <TabsContent
-          value="versions"
-          className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-6"
-        >
-          {versions.length ? (
-            versions.map((version) => (
-              <div
-                key={version.id}
-                className="mb-3 flex items-center gap-4 rounded-lg border p-4"
-              >
-                <Badge>v{version.version}</Badge>
-                <div className="min-w-0 flex-1">
-                  <div className="text-sm font-medium">
-                    发布于{" "}
-                    {formatDateTime(version.publishedAt || version.createdAt)}
-                  </div>
-                  <div className="text-xs text-muted-foreground">
-                    发布人：{version.publishedByName || "-"}
-                  </div>
-                </div>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => void restore(version)}
-                >
-                  恢复为草稿
-                </Button>
-              </div>
-            ))
-          ) : (
-            <p className="text-sm text-muted-foreground">尚未发布版本。</p>
-          )}
-        </TabsContent>
-
-        <TabsContent
-          value="usage"
-          className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-6"
-        >
-          {usage.length ? (
-            usage.map((item) => (
-              <div
-                key={`${item.aiAgentId}-${item.workflowVersionId}`}
-                className="mb-3 flex items-center justify-between rounded-lg 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>
-            ))
-          ) : (
-            <p className="text-sm text-muted-foreground">
-              暂未被任何 Agent 使用。
-            </p>
-          )}
-        </TabsContent>
-      </Tabs>
 
       <Dialog open={metadataOpen} onOpenChange={setMetadataOpen}>
         <DialogContent>

web/app/dashboard/ai-workflows/page.tsx

@@ -1,33 +1,166 @@
 "use client"
 
 import { useState } from "react"
-import { GitBranchIcon } from "lucide-react"
+
+import {
+  GitBranchIcon,
+  HistoryIcon,
+  UsersIcon,
+} from "lucide-react"
 
 import { DashboardCrudPage } from "@/components/dashboard/crud"
 import { ProjectDialog } from "@/components/project-dialog"
 import { Badge } from "@/components/ui/badge"
-import { deleteAIWorkflow, fetchAIWorkflows, type AIWorkflow, type CreateAIWorkflowPayload } from "@/lib/api/admin"
+import {
+  deleteAIWorkflow,
+  fetchAIWorkflows,
+  type AIWorkflow,
+  type CreateAIWorkflowPayload,
+} from "@/lib/api/admin"
 import { formatDateTime } from "@/lib/utils"
 
+import { WorkflowUsageDialog } from "./_components/workflow-usage-dialog"
+import { WorkflowVersionsDialog } from "./_components/workflow-versions-dialog"
 import { WorkflowWorkbench } from "./_components/workflow-workbench"
 
 export default function DashboardAIWorkflowsPage() {
   const [reloadKey, setReloadKey] = useState(0)
-  return <DashboardCrudPage<AIWorkflow, CreateAIWorkflowPayload>
+  const [versionsWorkflow, setVersionsWorkflow] =
-    filters={[{ name: "name", label: "工作流名称", placeholder: "搜索工作流名称", defaultValue: "", trim: true, className: "w-full sm:w-72" }]}
+    useState<AIWorkflow | null>(null)
-    columns={[
+  const [usageWorkflow, setUsageWorkflow] = useState<AIWorkflow | null>(null)
-      { key: "workflow", label: "工作流", render: (item) => <div className="flex items-start gap-3"><div className="mt-0.5 flex size-8 items-center justify-center rounded-md bg-muted text-muted-foreground"><GitBranchIcon className="size-4" /></div><div className="min-w-0"><div className="font-medium">{item.name}</div><div className="mt-1 line-clamp-2 text-sm text-muted-foreground">{item.description || "暂无业务说明"}</div></div></div> },
+
-      { key: "status", label: "状态", render: (item) => <Badge variant={item.publishedVersionId ? "secondary" : "outline"}>{item.publishedVersionId ? "已发布" : "草稿"}</Badge> },
+  return (
-      { key: "version", label: "当前版本", render: (item) => item.publishedVersionId ? `已发布 #${item.publishedVersionId}` : "-" },
+    <>
-      { key: "updatedAt", label: "更新时间", render: (item) => formatDateTime(item.updatedAt) },
+      <DashboardCrudPage<AIWorkflow, CreateAIWorkflowPayload>
-    ]}
+        filters={[
-    fetchList={(query) => fetchAIWorkflows({ name: typeof query.name === "string" ? query.name : undefined, page: Number(query.page), limit: Number(query.limit) })}
+          {
-    getItemId={(item) => item.id}
+            name: "name",
-    createItem={async () => undefined}
+            label: "工作流名称",
-    updateItem={async () => undefined}
+            placeholder: "搜索工作流名称",
-    deleteItem={(item) => deleteAIWorkflow(item.id)}
+            defaultValue: "",
-    reloadKey={reloadKey}
+            trim: true,
-    renderEditDialog={({ open, item, itemId, onOpenChange }) => <ProjectDialog open={open} onOpenChange={onOpenChange} title={item ? "编辑工作流" : "新建工作流"} size="xxl" defaultFullscreen allowFullscreen bodyScrollable={false} headerClassName="sr-only"><WorkflowWorkbench workflowID={itemId ?? undefined} onSaved={() => setReloadKey((value) => value + 1)} /></ProjectDialog>}
+            className: "w-full sm:w-72",
-    labels={{ refresh: "刷新", create: "创建工作流", query: "查询", loading: "正在加载工作流…", empty: "暂无工作流", actions: "操作", edit: "编辑", delete: "删除", processing: "处理中…", moreActions: (item) => `${item.name} 的更多操作`, loadFailed: "加载工作流失败", saveFailed: "保存工作流失败", deleteFailed: "删除工作流失败", created: (payload) => `已创建 ${payload.name}`, updated: (item) => `已更新 ${item.name}`, deleted: (item) => `已删除 ${item.name}` }}
+          },
-  />
+        ]}
+        columns={[
+          {
+            key: "workflow",
+            label: "工作流",
+            render: (item) => (
+              <div className="flex items-start gap-3">
+                <div className="mt-0.5 flex size-8 items-center justify-center rounded-md bg-muted text-muted-foreground">
+                  <GitBranchIcon className="size-4" />
+                </div>
+                <div className="min-w-0">
+                  <div className="font-medium">{item.name}</div>
+                  <div className="mt-1 line-clamp-2 text-sm text-muted-foreground">
+                    {item.description || "暂无业务说明"}
+                  </div>
+                </div>
+              </div>
+            ),
+          },
+          {
+            key: "status",
+            label: "状态",
+            render: (item) => (
+              <Badge
+                variant={item.publishedVersionId ? "secondary" : "outline"}
+              >
+                {item.publishedVersionId ? "已发布" : "草稿"}
+              </Badge>
+            ),
+          },
+          {
+            key: "version",
+            label: "当前版本",
+            render: (item) =>
+              item.publishedVersionId
+                ? `已发布 #${item.publishedVersionId}`
+                : "-",
+          },
+          {
+            key: "updatedAt",
+            label: "更新时间",
+            render: (item) => formatDateTime(item.updatedAt),
+          },
+        ]}
+        fetchList={(query) =>
+          fetchAIWorkflows({
+            name: typeof query.name === "string" ? query.name : undefined,
+            page: Number(query.page),
+            limit: Number(query.limit),
+          })
+        }
+        getItemId={(item) => item.id}
+        createItem={async () => undefined}
+        updateItem={async () => undefined}
+        deleteItem={(item) => deleteAIWorkflow(item.id)}
+        rowActions={[
+          {
+            key: "versions",
+            label: "版本历史",
+            icon: <HistoryIcon />,
+            run: ({ item }) => setVersionsWorkflow(item),
+          },
+          {
+            key: "usage",
+            label: "使用情况",
+            icon: <UsersIcon />,
+            run: ({ item }) => setUsageWorkflow(item),
+          },
+        ]}
+        reloadKey={reloadKey}
+        renderEditDialog={({ open, item, itemId, onOpenChange }) => (
+          <ProjectDialog
+            open={open}
+            onOpenChange={onOpenChange}
+            title={item ? "编辑工作流" : "新建工作流"}
+            defaultFullscreen
+            bodyScrollable={false}
+            headerClassName="sr-only"
+          >
+            <WorkflowWorkbench
+              workflowID={itemId ?? undefined}
+              onSaved={() => setReloadKey((value) => value + 1)}
+            />
+          </ProjectDialog>
+        )}
+        labels={{
+          refresh: "刷新",
+          create: "创建工作流",
+          query: "查询",
+          loading: "正在加载工作流…",
+          empty: "暂无工作流",
+          actions: "操作",
+          edit: "编辑",
+          delete: "删除",
+          processing: "处理中…",
+          moreActions: (item) => `${item.name} 的更多操作`,
+          loadFailed: "加载工作流失败",
+          saveFailed: "保存工作流失败",
+          deleteFailed: "删除工作流失败",
+          created: (payload) => `已创建 ${payload.name}`,
+          updated: (item) => `已更新 ${item.name}`,
+          deleted: (item) => `已删除 ${item.name}`,
+        }}
+      />
+
+      <WorkflowVersionsDialog
+        workflow={versionsWorkflow}
+        open={versionsWorkflow !== null}
+        onOpenChange={(open) => {
+          if (!open) setVersionsWorkflow(null)
+        }}
+        onRestored={() => setReloadKey((value) => value + 1)}
+      />
+      <WorkflowUsageDialog
+        workflow={usageWorkflow}
+        open={usageWorkflow !== null}
+        onOpenChange={(open) => {
+          if (!open) setUsageWorkflow(null)
+        }}
+      />
+    </>
+  )
 }