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

import type { Dashboard } from "@umt/contracts";
import { Brush, HardDrive } from "lucide-react";
import { toast } from "sonner";
import { useCacheCleanup, useCacheVolumes } from "~/api/downloads.ts";
import { ConfirmDialog } from "~/components/console/confirm-dialog.tsx";
import { ErrorState, LoadingState } from "~/components/console/empty-state.tsx";
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];

function VolumeBar({ v }: { v: Volume }) {
  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">{v.volumeKey}</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();
  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>
        <ConfirmDialog
          trigger={
            <Button variant="outline" size="sm" disabled={cleanup.isPending}>
              <Brush />
              立即清理
            </Button>
          }
          title="按规则清理下载缓存?"
          description="只清理已核验入库、且满足保留期与 H&R 的纳管任务;未纳管任务与未满足保留的不会动。"
          confirmLabel="清理"
          onConfirm={() =>
            cleanup.mutateAsync(undefined).then(
              (r) => {
                const vols = (r.report as { volumes?: { removed?: unknown[]; skipped?: unknown[] }[] }).volumes ?? [];
                const removed = vols.reduce((n, v) => n + (v.removed?.length ?? 0), 0);
                const skipped = vols.reduce((n, v) => n + (v.skipped?.length ?? 0), 0);
                toast.success(`清理完成:移除 ${removed} 个任务的缓存${skipped ? `,${skipped} 个因保留/H&R 跳过` : ""}`);
              },
              (e) => toast.error(errorMessage(e)),
            )
          }
        />
      </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>
  );
}