chore: use local built-in component to show text

Author: xiaoxustudio

packages/webgal/src/Core/gameScripts/getUserInput/index.tsx

@@ -15,6 +15,7 @@ import { setStageVar } from '@/store/stageReducer';
 import { getCurrentFontFamily } from '@/hooks/useFontFamily';
 import { logger } from '@/Core/util/logger';
 import { tryToRegex } from '@/Core/util/global';
+import { showGlogalDialog } from '@/UI/GlobalDialog/GlobalDialog';
 
 /**
  * 显示选择枝
@@ -47,7 +48,11 @@ export const getUserInput = (sentence: ISentence): IPerform => {
             if (rule) {
               const reg = tryToRegex(rule, ruleFlag);
               if (reg && !reg.test(userInput.value)) {
-                if (ruleText) alert(ruleText.replaceAll(/\$0/g, userInput.value));
+                if (ruleText)
+                  showGlogalDialog({
+                    title: ruleText.replaceAll(/\$0/g, userInput.value),
+                    leftText: 'OK',
+                  });
                 return;
               }
               if (!reg) {

packages/webgal/src/UI/GlobalDialog/GlobalDialog.tsx

@@ -12,23 +12,23 @@ export default function GlobalDialog() {
 
 interface IShowGlobalDialogProps {
   title: string;
-  leftText: string;
-  rightText: string;
-  leftFunc: Function;
-  rightFunc: Function;
+  leftText?: string;
+  rightText?: string;
+  leftFunc?: Function;
+  rightFunc?: Function;
 }
 
 export function showGlogalDialog(props: IShowGlobalDialogProps) {
   const { playSeClick, playSeEnter } = useSEByWebgalStore();
   webgalStore.dispatch(setVisibility({ component: 'showGlobalDialog', visibility: true }));
   const handleLeft = () => {
     playSeClick();
-    props.leftFunc();
+    props.leftFunc?.();
     hideGlobalDialog();
   };
   const handleRight = () => {
     playSeClick();
-    props.rightFunc();
+    props.rightFunc?.();
     hideGlobalDialog();
   };
   const renderElement = (
@@ -37,12 +37,16 @@ export function showGlogalDialog(props: IShowGlobalDialogProps) {
         <div className={styles.glabalDialog_container_inner}>
           <div className={styles.title}>{props.title}</div>
           <div className={styles.button_list}>
-            <div className={styles.button} onClick={handleLeft} onMouseEnter={playSeEnter}>
-              {props.leftText}
-            </div>
-            <div className={styles.button} onClick={handleRight} onMouseEnter={playSeEnter}>
-              {props.rightText}
-            </div>
+            {props.leftText && (
+              <div className={styles.button} onClick={handleLeft} onMouseEnter={playSeEnter}>
+                {props.leftText}
+              </div>
+            )}
+            {props.rightText && (
+              <div className={styles.button} onClick={handleRight} onMouseEnter={playSeEnter}>
+                {props.rightText}
+              </div>
+            )}
           </div>
         </div>
       </div>