104 lines
3.4 KiB
TypeScript
104 lines
3.4 KiB
TypeScript
import { X } from "lucide-react";
|
|
import type { ReactNode } from "react";
|
|
|
|
interface ConfirmDialogProps {
|
|
open: boolean;
|
|
title: string;
|
|
description: ReactNode;
|
|
confirmLabel: string;
|
|
danger?: boolean;
|
|
busy?: boolean;
|
|
onConfirm: () => void;
|
|
onCancel: () => void;
|
|
children?: ReactNode;
|
|
}
|
|
|
|
export function ConfirmDialog({ open, title, description, confirmLabel, danger, busy, onConfirm, onCancel, children }: ConfirmDialogProps) {
|
|
if (!open) {
|
|
return null;
|
|
}
|
|
return (
|
|
<div className="confirm-backdrop" role="presentation" onClick={onCancel}>
|
|
<div className="confirm-panel" role="dialog" aria-modal="true" aria-label={title} onClick={(event) => event.stopPropagation()}>
|
|
<h2>{title}</h2>
|
|
<p>{description}</p>
|
|
{children}
|
|
<div className="confirm-actions">
|
|
<button type="button" onClick={onCancel} disabled={busy}>
|
|
取消
|
|
</button>
|
|
<button type="button" className={danger ? "confirm-danger" : "confirm-primary"} onClick={onConfirm} disabled={busy}>
|
|
{busy ? "提交中…" : confirmLabel}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface ManagementDialogProps {
|
|
open: boolean;
|
|
title: string;
|
|
description?: ReactNode;
|
|
wide?: boolean;
|
|
onClose: () => void;
|
|
children: ReactNode;
|
|
}
|
|
|
|
export function ManagementDialog({ open, title, description, wide, onClose, children }: ManagementDialogProps) {
|
|
if (!open) {
|
|
return null;
|
|
}
|
|
return (
|
|
<div className="confirm-backdrop management-dialog-backdrop" role="presentation" onClick={onClose}>
|
|
<div className={`drawer-panel management-dialog-panel${wide ? " management-dialog-wide" : ""}`} role="dialog" aria-modal="true" aria-label={title} onClick={(event) => event.stopPropagation()}>
|
|
<div className="panel-header">
|
|
<h2>{title}</h2>
|
|
<button type="button" className="theme-upload drawer-close" onClick={onClose}>
|
|
<X size={14} />
|
|
<span>关闭</span>
|
|
</button>
|
|
</div>
|
|
{description && <p className="dialog-description">{description}</p>}
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface UsageMeterProps {
|
|
label: string;
|
|
percent?: number;
|
|
}
|
|
|
|
export function UsageMeter({ label, percent }: UsageMeterProps) {
|
|
const known = typeof percent === "number" && Number.isFinite(percent);
|
|
const clamped = known ? Math.max(0, Math.min(100, percent)) : 0;
|
|
return (
|
|
<div className="usage-meter">
|
|
<span>{label}</span>
|
|
<span className="usage-meter-track" role="img" aria-label={known ? `${label} ${Math.round(clamped)}%` : `${label} 暂无数据`}>
|
|
{known && <span className={`usage-meter-fill${clamped >= 85 ? " usage-high" : ""}`} style={{ width: `${clamped}%` }} />}
|
|
</span>
|
|
<span className="usage-meter-value">{known ? `${Math.round(clamped)}%` : "--"}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface DiffViewProps {
|
|
lines: Array<{ kind: "same" | "added" | "removed"; text: string }>;
|
|
}
|
|
|
|
export function DiffView({ lines }: DiffViewProps) {
|
|
return (
|
|
<div className="diff-view" role="figure" aria-label="配置变更对比">
|
|
{lines.map((line, index) => (
|
|
<span key={`${index}-${line.text}`} className={`diff-line diff-line-${line.kind}`}>
|
|
<span aria-hidden="true">{line.kind === "added" ? "+" : line.kind === "removed" ? "-" : " "}</span>
|
|
<span>{line.text || " "}</span>
|
|
</span>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|