update:Dialog替换

This commit is contained in:
xiaozhu
2026-08-26 16:48:19 +08:00
parent d7f3db1cc4
commit e326cc1a93
16 changed files with 738 additions and 675 deletions
@@ -2,11 +2,11 @@ import Icon from "../../components/common/Icon";
import type { StableVersion } from "../../services/api";
import { copyToClipboard } from "../../lib/clipboard";
import {
modalBackdropClass,
modalEyebrowClass,
modalPanelClass,
primaryButtonClass,
} from "./modalUi";
AppFormDialog,
dialogPrimaryButtonClass,
} from "~/components/common/AppFormDialog";
import { Button } from "~/components/ui/button";
import { modalEyebrowClass } from "./modalUi";
type VersionReceiptModalProps = {
publishedVersion: StableVersion | null;
@@ -19,50 +19,51 @@ export function VersionReceiptModal({
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>
<AppFormDialog
open={publishedVersion !== null}
onOpenChange={(nextOpen) => {
if (!nextOpen) onClose();
}}
showCloseButton={false}
contentClassName="sm:max-w-[min(470px,calc(100vw-40px))] px-7 py-[30px] pb-[25px] text-center"
bodyClassName="overflow-visible"
>
<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
className={`${primaryButtonClass} mt-[17px] h-[39px] w-full border-0 bg-[#1976cf] shadow-none`}
type="button"
onClick={onClose}
className="cursor-pointer rounded border border-[#bad3e8] bg-white px-2 py-1 text-[9px] text-[#2475b7]"
onClick={async () => {
if (!publishedVersion) return;
await copyToClipboard(publishedVersion.versions_id);
onCopy("versions_id 已复制");
}}
>
</button>
</section>
</div>
</div>
<Button
className={`${dialogPrimaryButtonClass} mt-[17px] h-[39px] w-full border-0 bg-[#1976cf] shadow-none`}
type="button"
onClick={onClose}
>
</Button>
</AppFormDialog>
);
}