UHD_Media_Tool/apps/web/app/components/downloads/cache-volumes.tsx

import type { Dashboard } from "@umt/contracts";
import { Brush, HardDrive, SlidersHorizontal } from "lucide-react";
import { Link, useNavigate } from "react-router";
import { toast } from "sonner";
import { useCacheCleanup, useCacheVolumes } from "~/api/downloads.ts";
import { downloaders } from "~/api/instances.ts";
import { ConfirmDialog } from "~/components/console/confirm-dialog.tsx";
import { ErrorState, LoadingState } from "~/components/console/empty-state.tsx";
import { consolePath, settingsPath } from "~/components/console/nav.ts";
import { StatusBadge } from "~/components/console/status-badge.tsx";
import { Button } from "~/components/ui/button.tsx";
import { errorMessage } from "~/lib/api.ts";
import { cn, formatBytes } from "~/lib/utils.ts";

type Volume = Dashboard["cache"]["volumes"][number];

/** 缓存卷显示名:没填缓存卷标识时服务端用 `instance:<id>`,换成下载器实例名,不露内部 ID */
export function useVolumeLabel() {
  const list = downloaders.useList();
  return (v: Pick<Volume, "volumeKey" | "instanceIds">) => {
    if (!v.volumeKey.startsWith("instance:")) return v.volumeKey;
    const names = v.instanceIds.map((id) => list.data?.items.find((i) => i.id === id)?.name).filter(Boolean);
    return names.length ? names.join("、") : "下载器缓存";
  };
}

function VolumeBar({ v }: { v: Volume }) {
  const volumeLabel = useVolumeLabel();
  const pct = v.usedPercent;
  const tripped = pct !== null && pct >= v.hardThresholdPercent;
  const nearing = pct !== null && !tripped && pct >= v.resumePercent;
  return (
    <div className="min-w-0">
      <div className="flex flex-wrap items-baseline justify-between gap-2">
        <span className="flex min-w-0 items-center gap-1.5 text-sm font-medium text-foreground">
          <HardDrive className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
          <span className="truncate">{volumeLabel(v)}</span>
        </span>
        <span className="text-meta text-muted-foreground tabular-nums">
          {pct === null ? "使用率未知" : `${pct.toFixed(1)}%`}
          {v.usedBytes !== null && v.totalBytes !== null
            ? ` · ${formatBytes(v.usedBytes, 1)} / ${formatBytes(v.totalBytes, 1)}`
            : ""}
        </span>
      </div>
      <div className="relative mt-1.5 h-1.5 rounded-full bg-foreground/[0.08]">
        {pct !== null ? (
          <div
            className={cn(
              "h-full rounded-full",
              tripped ? "bg-destructive" : nearing ? "bg-warning" : "bg-foreground/60",
            )}
            style={{ width: `${Math.min(100, pct)}%` }}
          />
        ) : null}
        <span
          aria-hidden
          className="absolute -top-1 h-3.5 w-px bg-destructive"
          style={{ left: `${v.hardThresholdPercent}%` }}
          title={`硬阈值 ${v.hardThresholdPercent}%`}
        />
        <span
          aria-hidden
          className="absolute -top-1 h-3.5 w-px bg-muted-foreground"
          style={{ left: `${v.resumePercent}%` }}
          title={`恢复水位 ${v.resumePercent}%`}
        />
      </div>
      <div className="mt-1.5 flex flex-wrap gap-x-3 gap-y-1 text-meta text-muted-foreground">
        <span>
          硬阈值 {v.hardThresholdPercent}% / 恢复 {v.resumePercent}%
        </span>
        <span>在途 {formatBytes(v.pendingBytes, 1)}</span>
        <span>预留 {formatBytes(v.reservedBytes, 1)}</span>
        <span>可清理 {formatBytes(v.cleanableBytes, 1)}</span>
        <span>保留锁定 {formatBytes(v.retentionLockedBytes, 1)}</span>
      </div>
      <div className="mt-1.5 flex flex-wrap gap-1.5">
        {pct === null ? <StatusBadge tone="warning">读不到磁盘状态，已暂停新提交</StatusBadge> : null}
        {tripped ? <StatusBadge tone="destructive">已达硬阈值，停止新提交</StatusBadge> : null}
        {v.pausedByThreshold ? <StatusBadge tone="warning">阈值暂停 {v.pausedByThreshold} 个任务</StatusBadge> : null}
      </div>
      {v.notes.map((n) => (
        <p key={n} className="mt-1 text-meta text-muted-foreground">
          {n}
        </p>
      ))}
    </div>
  );
}

/** 缓存卷水位 / 阈值条 + 阈值设置与手动清理入口(下载队列页头) */
export function CacheVolumes() {
  const vols = useCacheVolumes();
  const cleanup = useCacheCleanup();
  const navigate = useNavigate();
  return (
    <section className="pg-slab mb-6 rounded-xl p-4">
      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
        <h2 className="text-label font-semibold tracking-[0.18em] text-muted-foreground uppercase">缓存水位</h2>
        <div className="flex flex-wrap gap-2">
          <Button asChild variant="ghost" size="sm">
            <Link to={settingsPath("automation", "cache")}>
              <SlidersHorizontal />
              调整阈值
            </Link>
          </Button>
          <ConfirmDialog
            trigger={
              <Button variant="outline" size="sm" disabled={cleanup.isPending}>
                <Brush />
                立即清理
              </Button>
            }
            title="按规则清理下载缓存？"
            description="只清理已入库、且满足保留期与 H&R 的本工具任务，其余不动。"
            confirmLabel="清理"
            onConfirm={() =>
              cleanup.mutateAsync(undefined).then(
                (r) => {
                  toast.success("清理已排队");
                  navigate(consolePath("tasks", r.taskId));
                },
                (e) => toast.error(errorMessage(e)),
              )
            }
          />
        </div>
      </div>
      {vols.isPending ? (
        <LoadingState rows={2} />
      ) : vols.error ? (
        <ErrorState plain error={vols.error} onRetry={() => void vols.refetch()} />
      ) : !vols.data.length ? (
        <p className="text-caption text-muted-foreground">还没有缓存卷数据。登记下载器并完成巡检后显示。</p>
      ) : (
        <div className="grid gap-5 md:grid-cols-2">
          {vols.data.map((v) => (
            <VolumeBar key={v.volumeKey} v={v} />
          ))}
        </div>
      )}
    </section>
  );
}