@tablestore/tablestore-agent-cli 0.1.8 → 0.2.0

package/dist/dashboard-runtime/dashboard/src/app/(dashboard)/memory/[store]/units/page.tsx

@@ -0,0 +1,277 @@
+'use client';
+
+import { useMemo, useState } from "react";
+import { useParams, useSearchParams } from "next/navigation";
+import { ChevronLeft, ChevronRight, Plus, Search } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { PageHeader } from "@/components/layout/page-header";
+import { ConfirmDialog } from "@/components/shared/confirm-dialog";
+import { RefreshButton } from "@/components/shared/refresh-button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { useMemoryUnits } from "@/hooks/use-memory-units";
+import { useDeleteMemoryUnit } from "@/hooks/use-delete-memory-unit";
+import { buildMemoryScope, hasWildcardScope } from "@/lib/memory";
+import type { MemoryUnit } from "@/types/memory";
+import { MemoryAddDialog } from "@/components/memory/memory-add-dialog";
+import { MemoryEditDialog } from "@/components/memory/memory-edit-dialog";
+import { MemoryUnitDetailPanel } from "@/components/memory/memory-unit-detail-panel";
+import { getMemoryUnitId, MemoryUnitTable } from "@/components/memory/memory-unit-table";
+import { apiGet } from "@/services/api-client";
+
+export default function MemoryUnitsPage() {
+  const params = useParams<{ store: string }>();
+  const searchParams = useSearchParams();
+  const memoryStoreName = decodeURIComponent(params.store);
+  const scope = useMemo(() => buildMemoryScope(searchParams), [searchParams.toString()]);
+  const wildcard = hasWildcardScope(scope);
+  const scopeKey = useMemo(() => 
+    `${scope.appId}|${scope.tenantId ?? ""}|${scope.agentId ?? ""}|${scope.runId ?? ""}`,
+    [scope.appId, scope.tenantId, scope.agentId, scope.runId]
+  );
+
+  const [pagination, setPagination] = useState<{
+    scopeKey: string;
+    tokenStack: string[];
+    currentToken?: string;
+  }>({ scopeKey, tokenStack: [] });
+  const [pageSize] = useState(20);
+  const [searchId, setSearchId] = useState("");
+  const [searchedUnit, setSearchedUnit] = useState<MemoryUnit | null>(null);
+  const [searching, setSearching] = useState(false);
+  const [addDialogState, setAddDialogState] = useState({ scopeKey, open: false });
+  const [detailState, setDetailState] = useState<{ scopeKey: string; unit: MemoryUnit | null }>({
+    scopeKey,
+    unit: null,
+  });
+  const [editState, setEditState] = useState<{ scopeKey: string; unit: MemoryUnit | null }>({
+    scopeKey,
+    unit: null,
+  });
+  const [deleteState, setDeleteState] = useState<{ scopeKey: string; unit: MemoryUnit | null }>({
+    scopeKey,
+    unit: null,
+  });
+  const tokenStack = pagination.scopeKey === scopeKey ? pagination.tokenStack : [];
+  const currentToken = pagination.scopeKey === scopeKey ? pagination.currentToken : undefined;
+  const showAddDialog = addDialogState.scopeKey === scopeKey && addDialogState.open;
+  const detailUnit = detailState.scopeKey === scopeKey ? detailState.unit : null;
+  const editUnit = editState.scopeKey === scopeKey ? editState.unit : null;
+  const deleteUnit = deleteState.scopeKey === scopeKey ? deleteState.unit : null;
+
+  const unitsQuery = useMemoryUnits(memoryStoreName, scope.appId ? scope : null, currentToken, pageSize);
+  const deleteMutation = useDeleteMemoryUnit();
+  const units = unitsQuery.data?.items ?? [];
+
+  function resolveActionScope(unit: MemoryUnit, fallbackScope: typeof scope) {
+    return unit.scope?.appId ? unit.scope : fallbackScope;
+  }
+
+  function canOperateOnUnit(unit: MemoryUnit, fallbackScope: typeof scope) {
+    const memoryId = getMemoryUnitId(unit);
+    const actionScope = resolveActionScope(unit, fallbackScope);
+    return !!actionScope.appId && !hasWildcardScope(actionScope) && memoryId !== "-";
+  }
+
+  const detailScope = detailUnit ? resolveActionScope(detailUnit, scope) : scope;
+  const editScope = editUnit ? resolveActionScope(editUnit, scope) : scope;
+  const deleteScope = deleteUnit ? resolveActionScope(deleteUnit, scope) : scope;
+
+  async function handleDeleteConfirm() {
+    if (!deleteUnit) return;
+    const memoryId = getMemoryUnitId(deleteUnit);
+    if (memoryId === "-") {
+      toast.error("记忆单元缺少 ID，无法删除");
+      return;
+    }
+    if (!canOperateOnUnit(deleteUnit, scope)) {
+      toast.error("当前记忆单元缺少精确 scope，无法删除");
+      return;
+    }
+    try {
+      await deleteMutation.mutateAsync({ memoryStoreName, memoryId, scope: deleteScope });
+      toast.success("记忆单元已删除");
+      setDeleteState({ scopeKey, unit: null });
+      unitsQuery.refetch();
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "删除记忆单元失败");
+    }
+  }
+
+  async function handleSearchById() {
+    if (!searchId.trim()) {
+      toast.error("请输入 Memory ID");
+      return;
+    }
+    if (!scope.appId) {
+      toast.error("请先设置精确的 Scope");
+      return;
+    }
+    setSearching(true);
+    try {
+      const data = await apiGet<{ memory: MemoryUnit; memoryStoreName: string }>(
+        `/api/v1/memory/stores/${encodeURIComponent(memoryStoreName)}/units/${encodeURIComponent(searchId.trim())}?${new URLSearchParams({
+          appId: scope.appId,
+          ...(scope.tenantId ? { tenantId: scope.tenantId } : {}),
+          ...(scope.agentId ? { agentId: scope.agentId } : {}),
+          ...(scope.runId ? { runId: scope.runId } : {}),
+        }).toString()}`
+      );
+      setSearchedUnit(data.memory);
+      toast.success("找到记忆单元");
+    } catch (error) {
+      setSearchedUnit(null);
+      toast.error(error instanceof Error ? error.message : "未找到该记忆单元");
+    } finally {
+      setSearching(false);
+    }
+  }
+
+  function clearSearch() {
+    setSearchId("");
+    setSearchedUnit(null);
+  }
+
+  // Display data: searched unit or paginated list
+  const displayUnits = searchedUnit ? [searchedUnit] : units;
+  const displayTotal = searchedUnit ? 1 : (unitsQuery.data?.totalCount ?? 0);
+
+  if (unitsQuery.isLoading && !searchedUnit) {
+    return (
+      <div className="space-y-4">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-10 w-full" />
+        <Skeleton className="h-64 w-full" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <PageHeader title={`长期记忆 (${displayTotal})`}>
+        <div className="flex items-center gap-2">
+          <RefreshButton
+            loading={unitsQuery.isRefetching}
+            onClick={() => {
+              unitsQuery.refetch();
+              clearSearch();
+            }}
+          />
+          {wildcard ? (
+            <TooltipProvider delayDuration={200}>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span tabIndex={0} className="inline-flex">
+                    <Button disabled className="pointer-events-none">
+                      <Plus className="mr-2 h-4 w-4" />添加记忆
+                    </Button>
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent side="bottom" className="max-w-[240px]">
+                  <p>请在上方 Scope 栏中为所有字段设置具体值后再添加记忆</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          ) : (
+            <Button onClick={() => setAddDialogState({ scopeKey, open: true })}>
+              <Plus className="mr-2 h-4 w-4" />添加记忆
+            </Button>
+          )}
+        </div>
+      </PageHeader>
+
+      {/* Search by memoryId */}
+      <div className="flex gap-2">
+        <Input
+          value={searchId}
+          onChange={(e) => setSearchId(e.target.value)}
+          placeholder="输入 Memory ID 查询单条记忆..."
+          className="max-w-md"
+          onKeyDown={(e) => e.key === "Enter" && handleSearchById()}
+        />
+        <Button onClick={handleSearchById} disabled={searching || !scope.appId}>
+          <Search className="mr-1.5 h-4 w-4" />{searching ? "查询中..." : "查询"}
+        </Button>
+        {searchedUnit && (
+          <Button variant="outline" onClick={clearSearch}>返回列表</Button>
+        )}
+      </div>
+
+      {wildcard && !searchedUnit && (
+        <p className="text-xs text-muted-foreground">
+          当前 scope 含通配符，仅支持只读查询，无法执行新增、查看详情、编辑或删除。
+        </p>
+      )}
+
+      <MemoryUnitTable
+        units={displayUnits}
+        readOnly={!!searchedUnit}
+        isActionDisabled={(unit) => !!searchedUnit || !canOperateOnUnit(unit, scope)}
+        onView={(unit) => setDetailState({ scopeKey, unit })}
+        onEdit={(unit) => setEditState({ scopeKey, unit })}
+        onDelete={(unit) => setDeleteState({ scopeKey, unit })}
+      />
+
+      {!searchedUnit && (
+        <div className="flex items-center justify-between py-2">
+          <span className="text-sm text-muted-foreground">第 {tokenStack.length + 1} 页</span>
+          <div className="flex items-center gap-4">
+            <Button variant="outline" size="sm" onClick={() => {
+              setPagination((prev) => {
+                const activeStack = prev.scopeKey === scopeKey ? prev.tokenStack : [];
+                const next = [...activeStack];
+                const previousToken = next.pop();
+                return { scopeKey, tokenStack: next, currentToken: previousToken || undefined };
+              });
+            }} disabled={tokenStack.length === 0}>
+              <ChevronLeft className="mr-1 h-4 w-4" />上一页
+            </Button>
+            <Button variant="outline" size="sm" onClick={() => {
+              if (unitsQuery.data?.nextToken) {
+                setPagination((prev) => ({
+                  scopeKey,
+                  tokenStack: [...(prev.scopeKey === scopeKey ? prev.tokenStack : []), currentToken ?? ""],
+                  currentToken: unitsQuery.data.nextToken,
+                }));
+              }
+            }} disabled={!unitsQuery.data?.nextToken}>
+              下一页<ChevronRight className="ml-1 h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      )}
+
+      <MemoryAddDialog
+        memoryStoreName={memoryStoreName}
+        scope={scope}
+        open={showAddDialog}
+        onOpenChange={(open) => setAddDialogState({ scopeKey, open })}
+        onSuccess={() => { unitsQuery.refetch(); clearSearch(); }}
+      />
+      <MemoryUnitDetailPanel
+        memoryStoreName={memoryStoreName}
+        scope={detailScope}
+        unit={detailUnit}
+        open={!!detailUnit && canOperateOnUnit(detailUnit, scope)}
+        onOpenChange={(open) => { if (!open) setDetailState({ scopeKey, unit: null }); }}
+      />
+      <MemoryEditDialog
+        memoryStoreName={memoryStoreName}
+        scope={editScope}
+        unit={editUnit}
+        open={!!editUnit && canOperateOnUnit(editUnit, scope)}
+        onOpenChange={(open) => { if (!open) setEditState({ scopeKey, unit: null }); }}
+      />
+      <ConfirmDialog
+        open={!!deleteUnit && canOperateOnUnit(deleteUnit, scope)}
+        onOpenChange={(open) => { if (!open) setDeleteState({ scopeKey, unit: null }); }}
+        title="删除记忆单元"
+        description={`确定要删除记忆单元 "${deleteUnit ? getMemoryUnitId(deleteUnit) : ""}" 吗？此操作不可撤销。`}
+        variant="danger"
+        onConfirm={handleDeleteConfirm}
+      />
+    </div>
+  );
+}

package/dist/dashboard-runtime/dashboard/src/app/(dashboard)/memory/create/page.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import Link from "next/link";
+import { ArrowLeft } from "lucide-react";
+import { PageHeader } from "@/components/layout/page-header";
+import { MemoryCreateForm } from "@/components/memory/memory-create-form";
+
+export default function CreateMemoryStorePage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <Link
+          href="/memory"
+          className="mb-4 inline-flex items-center gap-1 text-sm text-muted-foreground transition-colors hover:text-foreground"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          返回记忆库列表
+        </Link>
+        <PageHeader
+          title="创建记忆库"
+          description="创建一个新的 Agent Memory store"
+        />
+      </div>
+
+      <div className="max-w-2xl">
+        <MemoryCreateForm />
+      </div>
+    </div>
+  );
+}

package/dist/dashboard-runtime/dashboard/src/app/(dashboard)/memory/error.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { useEffect } from "react";
+import { AlertTriangle, RefreshCw } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+
+/**
+ * Error boundary scoped to the `/memory` route subtree. Catches failures
+ * from MemoryStoreList, the per-store detail pages and any of their
+ * SWR fetchers. The dashboard-level boundary one segment up still acts
+ * as the safety net for anything thrown before this component mounts.
+ */
+export default function MemoryError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error("Memory route error:", error);
+  }, [error]);
+
+  return (
+    <div className="flex min-h-[50vh] flex-col items-center justify-center gap-6 px-4 text-center">
+      <div className="flex h-12 w-12 items-center justify-center rounded-full bg-destructive/10 text-destructive">
+        <AlertTriangle className="h-6 w-6" aria-hidden="true" />
+      </div>
+      <div className="space-y-2 max-w-md">
+        <h2 className="text-xl font-semibold tracking-tight text-foreground">
+          记忆库加载失败
+        </h2>
+        <p className="text-sm text-muted-foreground break-words">
+          {error.message || "无法获取记忆库列表，请稍后重试。"}
+        </p>
+      </div>
+      <Button onClick={reset}>
+        <RefreshCw className="mr-2 h-4 w-4" aria-hidden="true" />
+        重试
+      </Button>
+    </div>
+  );
+}

package/dist/dashboard-runtime/dashboard/src/app/(dashboard)/memory/loading.tsx

@@ -0,0 +1,26 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+/**
+ * Initial loading state for the `/memory` route. Renders while the
+ * server component (or any nested suspended fetch) is in flight,
+ * replacing the parent dashboard skeleton with a list-style placeholder
+ * that more closely matches the final layout.
+ */
+export default function MemoryLoading() {
+  return (
+    <div className="space-y-6" aria-busy="true" aria-live="polite">
+      <div className="flex items-center justify-between">
+        <div className="space-y-2">
+          <Skeleton className="h-7 w-32" />
+          <Skeleton className="h-4 w-72" />
+        </div>
+        <Skeleton className="h-9 w-32 rounded-md" />
+      </div>
+      <div className="space-y-3">
+        {Array.from({ length: 5 }).map((_, idx) => (
+          <Skeleton key={idx} className="h-16 w-full rounded-md" />
+        ))}
+      </div>
+    </div>
+  );
+}

package/dist/dashboard-runtime/dashboard/src/app/(dashboard)/memory/page.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import Link from "next/link";
+import { Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { PageHeader } from "@/components/layout/page-header";
+import { MemoryStoreList } from "@/components/memory/memory-store-list";
+
+export default function MemoryPage() {
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title="记忆库"
+        description="管理 Agent 的长期记忆、检索记忆单元并观测请求记录"
+      >
+        <Button asChild>
+          <Link href="/memory/create">
+            <Plus className="mr-2 h-4 w-4" />
+            创建记忆库
+          </Link>
+        </Button>
+      </PageHeader>
+
+      <MemoryStoreList />
+    </div>
+  );
+}

package/dist/dashboard-runtime/dashboard/src/app/(dashboard)/projects/error.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { useEffect } from "react";
+import { AlertTriangle, RefreshCw } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+
+/**
+ * Error boundary scoped to the `/projects` route subtree. Surfaces
+ * failures from the project list query and the connect/edit/delete
+ * mutation hooks if they throw before the inline toast handler runs.
+ */
+export default function ProjectsError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error("Projects route error:", error);
+  }, [error]);
+
+  return (
+    <div className="flex min-h-[50vh] flex-col items-center justify-center gap-6 px-4 text-center">
+      <div className="flex h-12 w-12 items-center justify-center rounded-full bg-destructive/10 text-destructive">
+        <AlertTriangle className="h-6 w-6" aria-hidden="true" />
+      </div>
+      <div className="space-y-2 max-w-md">
+        <h2 className="text-xl font-semibold tracking-tight text-foreground">
+          项目列表加载失败
+        </h2>
+        <p className="text-sm text-muted-foreground break-words">
+          {error.message || "无法获取项目列表，请稍后重试。"}
+        </p>
+      </div>
+      <Button onClick={reset}>
+        <RefreshCw className="mr-2 h-4 w-4" aria-hidden="true" />
+        重试
+      </Button>
+    </div>
+  );
+}

package/dist/dashboard-runtime/dashboard/src/app/(dashboard)/projects/loading.tsx

@@ -0,0 +1,25 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+/**
+ * Initial loading state for the `/projects` route. Renders a list of
+ * card placeholders that align with the eventual project card layout
+ * so the page does not jump when the SWR query resolves.
+ */
+export default function ProjectsLoading() {
+  return (
+    <div className="space-y-6" aria-busy="true" aria-live="polite">
+      <div className="flex items-center justify-between">
+        <div className="space-y-2">
+          <Skeleton className="h-7 w-28" />
+          <Skeleton className="h-4 w-72" />
+        </div>
+        <Skeleton className="h-9 w-32 rounded-md" />
+      </div>
+      <div className="grid gap-4 sm:grid-cols-2">
+        {Array.from({ length: 4 }).map((_, idx) => (
+          <Skeleton key={idx} className="h-[140px] rounded-lg" />
+        ))}
+      </div>
+    </div>
+  );
+}

package/dist/dashboard-runtime/dashboard/src/app/(dashboard)/projects/page.tsx

@@ -0,0 +1,174 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Database, Plus } from "lucide-react";
+import { toast } from "sonner";
+
+import { PageHeader } from "@/components/layout/page-header";
+import { ConnectInstanceDialog } from "@/components/instance/connect-instance-dialog";
+import { EditInstanceDialog } from "@/components/instance/edit-instance-dialog";
+import { ProjectCard } from "@/components/instance/project-card";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Skeleton } from "@/components/ui/skeleton";
+import { EmptyState } from "@/components/shared/empty-state";
+import {
+  useDeleteInstance,
+  useExportInstanceToken,
+  useInstances,
+  useSwitchInstance,
+} from "@/hooks/use-instances";
+
+export default function ProjectsPage() {
+  const router = useRouter();
+  const { data, isLoading } = useInstances();
+  const switchMutation = useSwitchInstance();
+  const deleteMutation = useDeleteInstance();
+  const exportMutation = useExportInstanceToken();
+
+  const [connectOpen, setConnectOpen] = useState(false);
+  const [editTarget, setEditTarget] = useState<string | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<string | null>(null);
+
+  const activeName = data?.activeInstance ?? null;
+  const instances = (data?.instances ?? []).filter(
+    // Hide the legacy [default] fallback from the management grid; it is
+    // exposed only through CLI for backwards compatibility.
+    (item) => !item.isDefaultFallback,
+  );
+
+  async function handleSwitch(name: string) {
+    if (name === activeName) return;
+    await switchMutation.mutateAsync(name);
+    router.refresh();
+  }
+
+  async function handleExport(name: string) {
+    const result = await exportMutation.mutateAsync(name);
+    try {
+      await navigator.clipboard.writeText(result.token);
+      toast.success(`已复制 ${name} 的 Token`);
+    } catch {
+      // navigator.clipboard can fail on insecure origins; show the token so
+      // the user can copy manually.
+      toast.message("请手动复制 Token", { description: result.token });
+    }
+  }
+
+  async function handleConfirmDelete() {
+    if (!deleteTarget) return;
+    await deleteMutation.mutateAsync(deleteTarget);
+    setDeleteTarget(null);
+    router.refresh();
+  }
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title="项目管理"
+        description="连接、切换与管理多个项目"
+      >
+        <Button onClick={() => setConnectOpen(true)}>
+          <Plus className="mr-2 h-4 w-4" />
+          创建新项目
+        </Button>
+      </PageHeader>
+
+      {isLoading ? (
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {Array.from({ length: 3 }).map((_, index) => (
+            <Skeleton
+              key={index}
+              className="h-[200px] rounded-lg"
+              delay={index * 80}
+            />
+          ))}
+        </div>
+      ) : instances.length === 0 ? (
+        <EmptyState
+          icon={Database}
+          title="还没有项目"
+          description="创建你的第一个项目，解锁多环境切换"
+          action={
+            <Button onClick={() => setConnectOpen(true)}>
+              <Plus className="mr-2 h-4 w-4" />
+              创建新项目
+            </Button>
+          }
+        />
+      ) : (
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {instances.map((item, index) => {
+            const isActive = item.name === activeName;
+            return (
+              <ProjectCard
+                key={item.name}
+                item={item}
+                isActive={isActive}
+                isSwitching={switchMutation.isPending}
+                isExporting={exportMutation.isPending}
+                onSwitch={() => handleSwitch(item.name)}
+                onEdit={() => setEditTarget(item.name)}
+                onExport={() => handleExport(item.name)}
+                onDelete={() => setDeleteTarget(item.name)}
+                index={index}
+              />
+            );
+          })}
+        </div>
+      )}
+
+      <ConnectInstanceDialog
+        open={connectOpen}
+        onOpenChange={setConnectOpen}
+        onSuccess={() => router.refresh()}
+      />
+
+      <EditInstanceDialog
+        name={editTarget}
+        open={!!editTarget}
+        onOpenChange={(open) => {
+          if (!open) setEditTarget(null);
+        }}
+        onSuccess={() => router.refresh()}
+      />
+
+      <Dialog
+        open={!!deleteTarget}
+        onOpenChange={(open) => {
+          if (!open) setDeleteTarget(null);
+        }}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>删除项目</DialogTitle>
+            <DialogDescription>
+              确定要删除项目 &quot;{deleteTarget}&quot;
+              吗？此操作只影响本地配置，不会删除云端资源。
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDeleteTarget(null)}>
+              取消
+            </Button>
+            <Button
+              variant="destructive"
+              disabled={deleteMutation.isPending}
+              onClick={handleConfirmDelete}
+            >
+              {deleteMutation.isPending ? "删除中..." : "确认删除"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}