提示框UI

src/App.tsx

@@ -387,6 +387,8 @@ export default function App() {
 
   // Conversion Settings States
   const [showSettingsModal, setShowSettingsModal] = useState(false);
+  const [showCreationGuardModal, setShowCreationGuardModal] = useState(false);
+  const [creationGuardMessage, setCreationGuardMessage] = useState('');
   const [conversionWorldview, setConversionWorldview] = useState(() => localStorage.getItem('scriptflow_conversion_worldview') || '');
   const [conversionOutline, setConversionOutline] = useState(() => localStorage.getItem('scriptflow_conversion_outline') || '');
   const [conversionCharacterProfiles, setConversionCharacterProfiles] = useState(() => localStorage.getItem('scriptflow_conversion_characterProfiles') || '');
@@ -1015,8 +1017,7 @@ ${script}`;
     
     // Validation: Require Story Outline and Worldview Settings
     if (!creationOutline.trim() || !creationWorldview.trim()) {
-      alert('\u8bf7\u5148\u5728\u201c\u5267\u60c5\u80cc\u666f\u201d\u4e2d\u586b\u5199\u201c\u6545\u4e8b\u5927\u7eb2\u201d\u548c\u201c\u4e16\u754c\u89c2\u8bbe\u5b9a\u201d\u540e\u518d\u6267\u884c\u751f\u6210\u3002');
+      showCreationBackgroundGuard('\u8bf7\u5148\u5728\u300c\u5267\u60c5\u80cc\u666f\u300d\u4e2d\u586b\u5199\u300c\u6545\u4e8b\u5927\u7eb2\u300d\u548c\u300c\u4e16\u754c\u89c2\u8bbe\u5b9a\u300d\uff0c\u518d\u5f00\u59cb\u751f\u6210\u5267\u672c\u3002');
-      setShowSettingsModal(true);
       return;
     }
 
@@ -1071,8 +1072,7 @@ ${script}`;
   const handleGenerateAll = async () => {
     // Validation: Require Story Outline and Worldview Settings
     if (!creationOutline.trim() || !creationWorldview.trim()) {
-      alert('\u8bf7\u5148\u5728\u201c\u5267\u60c5\u80cc\u666f\u201d\u4e2d\u586b\u5199\u201c\u6545\u4e8b\u5927\u7eb2\u201d\u548c\u201c\u4e16\u754c\u89c2\u8bbe\u5b9a\u201d\u540e\u518d\u6267\u884c\u6279\u91cf\u751f\u6210\u3002');
+      showCreationBackgroundGuard('\u8bf7\u5148\u5728\u300c\u5267\u60c5\u80cc\u666f\u300d\u4e2d\u586b\u5199\u300c\u6545\u4e8b\u5927\u7eb2\u300d\u548c\u300c\u4e16\u754c\u89c2\u8bbe\u5b9a\u300d\uff0c\u518d\u6267\u884c\u6279\u91cf\u751f\u6210\u3002');
-      setShowSettingsModal(true);
       return;
     }
 
@@ -1161,6 +1161,11 @@ ${script}`;
     setIsCreationCharacterProfilesEditing(value);
   };
 
+  const showCreationBackgroundGuard = (message: string) => {
+    setCreationGuardMessage(message);
+    setShowCreationGuardModal(true);
+  };
+
   const handleShowFinalizedCreation = () => {
     const finalizedPages = creationPages.filter(p => p.selectedScriptIndex !== null);
     
@@ -2545,6 +2550,54 @@ ${script}`;
           </div>
         )}
       </div>
+      {/* Creation Guard Modal */}
+      <AnimatePresence>
+        {showCreationGuardModal && (
+          <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/45 backdrop-blur-md">
+            <motion.div
+              initial={{ opacity: 0, y: 18, scale: 0.96 }}
+              animate={{ opacity: 1, y: 0, scale: 1 }}
+              exit={{ opacity: 0, y: 18, scale: 0.96 }}
+              className="w-full max-w-md overflow-hidden rounded-[30px] border border-white/60 bg-[linear-gradient(165deg,rgba(255,255,255,0.97),rgba(247,250,255,0.95))] shadow-[0_28px_80px_rgba(15,23,42,0.28)]"
+            >
+              <div className="relative p-6">
+                <div className="pointer-events-none absolute -right-10 -top-10 h-40 w-40 rounded-full bg-[#0071E3]/10 blur-2xl" />
+                <div className="relative flex items-start gap-3">
+                  <div className="mt-0.5 flex h-11 w-11 items-center justify-center rounded-2xl bg-[#0071E3] text-white shadow-lg shadow-blue-500/25">
+                    <Sparkles size={18} />
+                  </div>
+                  <div className="flex-1">
+                    <p className="text-[11px] font-bold uppercase tracking-[0.2em] text-[#0071E3]">Creation Notice</p>
+                    <h3 className="mt-1 text-[22px] font-semibold leading-tight text-[#1D1D1F]">{'\u4fe1\u606f\u4e0d\u5b8c\u6574'}</h3>
+                    <p className="mt-3 whitespace-pre-wrap text-[14px] leading-7 text-[#4A4A4F]">{creationGuardMessage}</p>
+                  </div>
+                </div>
+
+                <div className="mt-6 grid grid-cols-2 gap-3">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setShowCreationGuardModal(false);
+                      setShowSettingsModal(true);
+                    }}
+                    className="rounded-2xl bg-[#0071E3] px-4 py-3 text-sm font-bold text-white shadow-lg shadow-blue-500/20 transition-all hover:-translate-y-0.5 hover:bg-[#0077ED]"
+                  >
+                    {'\u53bb\u586b\u5199\u5267\u60c5\u80cc\u666f'}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setShowCreationGuardModal(false)}
+                    className="rounded-2xl border border-[#D2D2D7] bg-white px-4 py-3 text-sm font-bold text-[#1D1D1F] transition-all hover:bg-[#F5F5F7]"
+                  >
+                    {'\u6211\u77e5\u9053\u4e86'}
+                  </button>
+                </div>
+              </div>
+            </motion.div>
+          </div>
+        )}
+      </AnimatePresence>
+
       {/* Creation Settings Modal */}
       <AnimatePresence>
         {showSettingsModal && (