中期草案commit

Author: cyfung1031

src/pages/install/App.tsx

@@ -29,6 +29,7 @@ import { type FTInfo, startFileTrack, unmountFileTrack } from "@App/pkg/utils/fi
 import { cleanupOldHandles, loadHandle, saveHandle } from "@App/pkg/utils/filehandle-db";
 import { dayFormat } from "@App/pkg/utils/day_format";
 import { intervalExecution, timeoutExecution } from "@App/pkg/utils/timer";
+import { useSearchParams } from "react-router-dom";
 
 type ScriptOrSubscribe = Script | Subscribe;
 
@@ -58,6 +59,8 @@ function App() {
   const [isUpdate, setIsUpdate] = useState<boolean>(false);
   const [localFileHandle, setLocalFileHandle] = useState<FileSystemFileHandle | null>(null);
   const { t } = useTranslation();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [loaded, setLoaded] = useState<boolean>(false);
 
   const installOrUpdateScript = async (newScript: Script, code: string) => {
     if (newScript.ignoreVersion) newScript.ignoreVersion = "";
@@ -84,10 +87,16 @@ function App() {
 
   const initAsync = async () => {
     try {
-      const locationUrl = new URL(window.location.href);
-      const uuid = locationUrl.searchParams.get("uuid");
+      const uuid = searchParams.get("uuid");
+      const fid = searchParams.get("file");
       let info: ScriptInfo | undefined;
       let isKnownUpdate: boolean = false;
+
+      // 如果没有 uuid 和 file，跳过初始化逻辑
+      if (!uuid && !fid) {
+        return;
+      }
+
       if (uuid) {
         const cachedInfo = await scriptClient.getInstallInfo(uuid);
         if (cachedInfo?.[0]) isKnownUpdate = true;
@@ -97,7 +106,6 @@ function App() {
         }
       } else {
         // 检查是不是本地文件安装
-        const fid = locationUrl.searchParams.get("file");
         if (!fid) {
           throw new Error("url param - local file id is not found");
         }
@@ -152,6 +160,7 @@ function App() {
         }
         diffCode = prepare.oldScriptCode;
       }
+      setLoaded(true);
       setScriptCode(code);
       setDiffCode(diffCode);
       setOldScriptVersion(typeof oldVersion === "string" ? oldVersion : null);
@@ -171,8 +180,8 @@ function App() {
   };
 
   useEffect(() => {
-    initAsync();
-  }, []);
+    !loaded && initAsync();
+  }, [searchParams, loaded]);
 
   const [watchFile, setWatchFile] = useState(false);
   const metadataLive = useMemo(() => (scriptInfo?.metadata || {}) as SCMetadata, [scriptInfo]);
@@ -464,6 +473,33 @@ function App() {
     };
   }, [memoWatchFile]);
 
+  // 处理没有 uuid 和 file 的情况
+  // const handleCreateNewScript = () => {
+  //   const newUuid = uuidv4();
+  //   setSearchParams({ uuid: newUuid }, { replace: true });
+  // };
+
+  // 检查是否有 uuid 或 file
+  const hasParams = useMemo(() => {
+    return !!(searchParams.get("uuid") || searchParams.get("file"));
+  }, [searchParams]);
+
+  // 没有 uuid 和 file 时显示的页面
+  if (!hasParams) {
+    return (
+      <div className="flex justify-center items-center h-screen">
+        <Space direction="vertical" align="center">
+          <Typography.Title heading={3}>{t("no_script_selected")}</Typography.Title>
+          {/*
+          <Button type="primary" onClick={handleCreateNewScript}>
+            {t("create_new_script")}
+          </Button>
+          */}
+        </Space>
+      </div>
+    );
+  }
+
   return (
     <div id="install-app-container">
       <Grid.Row className="mb-2" gutter={8}>

src/pages/install/main.tsx

@@ -11,6 +11,7 @@ import "@App/locales/locales";
 import "@App/index.css";
 import "./index.css";
 import registerEditor from "@App/pkg/utils/monaco-editor";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
 
 registerEditor();
 
@@ -22,13 +23,20 @@ const loggerCore = new LoggerCore({
 
 loggerCore.logger().debug("install page start");
 
-const Root = (
+const MyApp = () => (
   <AppProvider>
     <MainLayout className="!flex-col !px-4 box-border install-main-layout">
       <App />
     </MainLayout>
   </AppProvider>
 );
+const Root = (
+  <BrowserRouter>
+    <Routes>
+      <Route path="/*" element={<MyApp />} />
+    </Routes>
+  </BrowserRouter>
+);
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   process.env.NODE_ENV === "development" ? <React.StrictMode>{Root}</React.StrictMode> : Root