1

src/components/rpg-runtime-shell/rpgRuntimeLoaders.tsx

@@ -0,0 +1,47 @@
+import { getNineSliceStyle, UI_CHROME } from '../../uiAssets';
+
+/**
+ * RPG 运行态模态加载占位。
+ * 第三批收口后真实落点迁入 `rpg-runtime-shell`。
+ */
+export function ModalLoadingFallback({
+  label,
+  onClose,
+}: {
+  label: string;
+  onClose?: (() => void) | null;
+}) {
+  return (
+    <div
+      className="fixed inset-0 z-[90] flex items-center justify-center bg-black/70 p-4 backdrop-blur-sm"
+      onClick={onClose ?? undefined}
+    >
+      <div
+        className="pixel-nine-slice pixel-modal-shell flex min-h-40 w-full max-w-md items-center justify-center px-6 py-8 text-center text-sm text-zinc-300 shadow-[0_24px_80px_rgba(0,0,0,0.55)]"
+        style={getNineSliceStyle(UI_CHROME.modalPanel)}
+        onClick={(event) => event.stopPropagation()}
+      >
+        {label}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * RPG 运行态面板加载占位。
+ * 仅迁移命名落点，不改 UI 表现。
+ */
+export function PanelLoadingFallback({
+  label,
+}: {
+  label: string;
+}) {
+  return (
+    <div
+      className="pixel-nine-slice flex min-h-0 flex-1 items-center justify-center px-4 py-6 text-center text-xs uppercase tracking-[0.24em] text-zinc-500"
+      style={getNineSliceStyle(UI_CHROME.modalPanel)}
+    >
+      {label}
+    </div>
+  );
+}