update:css样式拆分

frontend/app/features/platform/VersionReceiptModal.tsx

@@ -1,6 +1,12 @@
 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;
@@ -16,22 +22,31 @@ export function VersionReceiptModal({
   if (!publishedVersion) return null;
 
   return (
-    <div className="modal-backdrop" role="presentation">
-      <section className="modal version-receipt" role="dialog" aria-modal="true">
-        <div className="version-receipt__check">
+    <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="modal__eyebrow">STABLE VERSION</span>
-        <h2>稳定版本发布成功</h2>
-        <p>
+        <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="version-id-box">
-          <span>versions_id</span>
-          <code>{publishedVersion.versions_id}</code>
+        <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 已复制");
@@ -41,7 +56,7 @@ export function VersionReceiptModal({
           </button>
         </div>
         <button
-          className="primary-button version-receipt__close"
+          className={`${primaryButtonClass} mt-[17px] h-[39px] w-full border-0 bg-[#1976cf] shadow-none`}
           type="button"
           onClick={onClose}
         >