69 lines
2.4 KiB
TypeScript
69 lines
2.4 KiB
TypeScript
import Icon from "../../components/common/Icon";
|
|
import type { StableVersion } from "../../services/api";
|
|
import { copyToClipboard } from "../../lib/clipboard";
|
|
import {
|
|
modalBackdropClass,
|
|
modalEyebrowClass,
|
|
modalPanelClass,
|
|
primaryButtonClass,
|
|
} from "./modalUi";
|
|
|
|
type VersionReceiptModalProps = {
|
|
publishedVersion: StableVersion | null;
|
|
onClose: () => void;
|
|
onCopy: (text: string) => void;
|
|
};
|
|
|
|
export function VersionReceiptModal({
|
|
publishedVersion,
|
|
onClose,
|
|
onCopy,
|
|
}: VersionReceiptModalProps) {
|
|
if (!publishedVersion) return null;
|
|
|
|
return (
|
|
<div className={modalBackdropClass} role="presentation">
|
|
<section
|
|
className={`${modalPanelClass} w-[min(470px,calc(100vw-40px))] px-7 py-[30px] pb-[25px] text-center`}
|
|
role="dialog"
|
|
aria-modal="true"
|
|
>
|
|
<div className="mx-auto mb-3.5 grid size-[58px] place-items-center rounded-full bg-gradient-to-br from-[#24b67d] to-[#149566] text-white shadow-[0_9px_24px_rgb(25_157_104/25%)]">
|
|
<Icon name="check" size={28} />
|
|
</div>
|
|
<span className={modalEyebrowClass}>STABLE VERSION</span>
|
|
<h2 className="mb-2 mt-[5px] text-xl text-[#24374a]">
|
|
稳定版本发布成功
|
|
</h2>
|
|
<p className="mx-auto mb-5 max-w-[360px] text-[11px] leading-[1.65] text-[#718093]">
|
|
{publishedVersion.version_label} 已成为不可变制品，
|
|
后续调度将通过 versions_id 引用它。
|
|
</p>
|
|
<div className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-[9px] rounded-[7px] border border-[#dce6ee] bg-[#f7fafc] px-3 py-[11px] text-left">
|
|
<span className="text-[9px] text-[#8795a4]">versions_id</span>
|
|
<code className="truncate text-[10px] text-[#275271]">
|
|
{publishedVersion.versions_id}
|
|
</code>
|
|
<button
|
|
type="button"
|
|
className="cursor-pointer rounded border border-[#bad3e8] bg-white px-2 py-1 text-[9px] text-[#2475b7]"
|
|
onClick={async () => {
|
|
await copyToClipboard(publishedVersion.versions_id);
|
|
onCopy("versions_id 已复制");
|
|
}}
|
|
>
|
|
复制
|
|
</button>
|
|
</div>
|
|
<button
|
|
className={`${primaryButtonClass} mt-[17px] h-[39px] w-full border-0 bg-[#1976cf] shadow-none`}
|
|
type="button"
|
|
onClick={onClose}
|
|
>
|
|
完成
|
|
</button>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|