1

src/components/rpg-creation-result/RpgCreationResultActionBar.tsx

@@ -1,6 +1,9 @@
-import type { ReactNode } from 'react';
+import { X } from 'lucide-react';
+import { type ReactNode, useState } from 'react';
+import { createPortal } from 'react-dom';
 
 import type { CustomWorldProfile } from '../../types';
+import { useAuthUi } from '../auth/AuthUiContext';
 
 function SmallButton({
   children,
@@ -29,6 +32,85 @@ function SmallButton({
   );
 }
 
+function PublishBlockersDialog({
+  blockers,
+  onClose,
+}: {
+  blockers: string[];
+  onClose: () => void;
+}) {
+  const platformTheme = useAuthUi()?.platformTheme ?? 'light';
+
+  if (typeof document === 'undefined') {
+    return null;
+  }
+
+  return createPortal(
+    <div
+      className={`platform-theme platform-theme--${platformTheme} platform-overlay fixed inset-0 z-[140] flex items-end justify-center p-3 backdrop-blur-sm sm:items-center sm:p-4`}
+      onClick={(event) => {
+        if (event.target === event.currentTarget) {
+          onClose();
+        }
+      }}
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label="发布前检查"
+        className="platform-modal-shell platform-remap-surface flex max-h-[min(88vh,42rem)] w-full max-w-lg flex-col overflow-hidden rounded-t-[1.75rem] shadow-[0_24px_80px_rgba(0,0,0,0.55)] sm:rounded-[1.75rem]"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <div className="flex items-center justify-between gap-3 border-b border-[var(--platform-subpanel-border)] px-5 py-4">
+          <div>
+            <div className="text-base font-semibold text-[var(--platform-text-strong)]">
+              发布前还需要补齐这些内容
+            </div>
+            <div className="mt-1 text-sm leading-6 text-[var(--platform-text-soft)]">
+              当前还有 {blockers.length} 个阻断项，补齐后再发布并进入世界。
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="关闭"
+            className="platform-icon-button"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+        <div className="min-h-0 flex-1 overflow-y-auto px-5 py-4">
+          <div className="space-y-2">
+            {blockers.map((blocker, index) => (
+              <div
+                key={`publish-blocker-${index}-${blocker}`}
+                className="platform-banner platform-banner--warning text-sm leading-6"
+              >
+                <div className="text-xs font-semibold tracking-[0.14em] text-[var(--platform-warm-text)] opacity-80">
+                  阻断项 {index + 1}
+                </div>
+                <div className="mt-1 text-[var(--platform-text-strong)]">
+                  {blocker}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="flex justify-end border-t border-[var(--platform-subpanel-border)] px-5 py-4">
+          <button
+            type="button"
+            onClick={onClose}
+            className="platform-button platform-button--primary"
+          >
+            我知道了
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
 interface RpgCreationResultActionBarProps {
   editActionLabel: string;
   enterWorldActionLabel: string;
@@ -40,6 +122,7 @@ interface RpgCreationResultActionBarProps {
   profile: CustomWorldProfile;
   regenerateActionLabel: string;
   publishReady: boolean;
+  publishBlockers: string[];
 }
 
 export function RpgCreationResultActionBar({
@@ -53,7 +136,21 @@ export function RpgCreationResultActionBar({
   profile,
   regenerateActionLabel,
   publishReady,
+  publishBlockers,
 }: RpgCreationResultActionBarProps) {
+  const [showPublishBlockersDialog, setShowPublishBlockersDialog] =
+    useState(false);
+
+  // 结果页只在用户点击发布动作时展示阻断项，不做吸底常驻提示。
+  const handleEnterWorld = () => {
+    if (!publishReady) {
+      setShowPublishBlockersDialog(true);
+      return;
+    }
+
+    onEnterWorld?.();
+  };
+
   return (
     <div className="mt-4 flex flex-col gap-3">
       {profile.generationStatus === 'key_only' ? (
@@ -82,14 +179,24 @@ export function RpgCreationResultActionBar({
         {onEnterWorld ? (
           <button
             type="button"
-            onClick={onEnterWorld}
-            disabled={isGenerating || !publishReady}
+            onClick={handleEnterWorld}
+            disabled={isGenerating}
             className={`platform-button platform-button--primary ${isGenerating ? 'opacity-55' : ''}`}
           >
             {enterWorldActionLabel}
           </button>
         ) : null}
       </div>
+      {showPublishBlockersDialog ? (
+        <PublishBlockersDialog
+          blockers={
+            publishBlockers.length > 0
+              ? publishBlockers
+              : ['当前草稿还没有通过发布门槛，请先补齐必要内容。']
+          }
+          onClose={() => setShowPublishBlockersDialog(false)}
+        />
+      ) : null}
     </div>
   );
 }