OpenWebGAL · boomwwww · Aug 11, 2025 · Aug 23, 2025 · Aug 24, 2025 · Oct 2, 2025
diff --git a/packages/origine2/src/App.tsx b/packages/origine2/src/App.tsx
@@ -1,53 +1,22 @@
 import './App.css';
-import DashBoard from './pages/dashboard/DashBoard';
-import Editor from './pages/editor/Editor';
-import { ReactNode, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import '@icon-park/react/styles/index.css';
 import './config/themes/theme.css';
 import './assets/font-family.css';
 import useEditorStore from './store/useEditorStore';
-import useHashRoute, { IPage } from './hooks/useHashRoute';
 import useLanguage from './hooks/useLanguage';
-import TemplateEditor from './pages/templateEditor/TemplateEditor';
-import GameEditorProvider from './components/Provider/GameEditorProvider';
-import TemplateEditorProvider from './components/Provider/TemplateEditorProvider';
-import { eventBus } from '@/utils/eventBus';
-import { initMonaco } from "@/utils/initMonaco";
-
-export const routers: { [key in IPage]: { url: string; element: ReactNode } } = {
-  dashboard: {
-    url: '#/dashboard',
-    element: <DashBoard />,
-  },
-  game: {
-    url: '#/game',
-    element: (
-      <GameEditorProvider>
-        <Editor />
-      </GameEditorProvider>
-    ),
-  },
-  template: {
-    url: '#/template',
-    element: (
-      <TemplateEditorProvider>
-        <TemplateEditor />
-      </TemplateEditorProvider>
-    ),
-  },
-};
+import { initMonaco } from '@/utils/initMonaco';
+import { useHashRouter, RouterPage } from '@/router';
 
 function App() {
   useEffect(() => {
     initMonaco();
   }, []);
 
-  // 建立 WS 连接
-  useEffect(() => {
-
-  }, []);
+  // // 建立 WS 连接
+  // useEffect(() => {}, []);
 
-  useHashRoute();
+  useHashRouter();
   useLanguage();
 
   const page = useEditorStore.use.page();
@@ -62,7 +31,7 @@ function App() {
 
   return (
     <div className="App" key={appKeyLang}>
-      {routers[page].element || routers.dashboard.element}
+      <RouterPage page={page} />
     </div>
   );
 }

diff --git a/packages/origine2/src/hooks/useHashRoute.ts b/packages/origine2/src/hooks/useHashRoute.ts
diff --git a/packages/origine2/src/pages/dashboard/DashBoard.tsx b/packages/origine2/src/pages/dashboard/DashBoard.tsx
@@ -46,7 +46,7 @@ import classNames from "classnames";
 import useEditorStore from "@/store/useEditorStore";
 import {api} from "@/api";
 import useSWR, {useSWRConfig} from "swr";
-import {redirect} from "@/hooks/useHashRoute";
+import { goTo } from '@/router';
 import {t} from "@lingui/macro";
 import { useRelease } from "@/hooks/useRelease";
 import { __INFO } from "@/config/info";
@@ -89,7 +89,7 @@ export default function DashBoard() {
   const selectedValue = subPage;
 
   const onTabSelect = (event: SelectTabEvent, data: SelectTabData) => {
-    redirect('dashboard', data.value as string);
+    goTo('dashboard', data.value as string);
   };
 
   // 当前选中的游戏

diff --git a/packages/origine2/src/pages/dashboard/GameElement.tsx b/packages/origine2/src/pages/dashboard/GameElement.tsx
@@ -5,7 +5,7 @@ import { api } from "@/api";
 import { Button, Checkbox, Dialog, DialogActions, DialogBody, DialogContent, DialogSurface, DialogTitle, Input, Menu, MenuButton, MenuItem, MenuList, MenuPopover, MenuTrigger } from "@fluentui/react-components";
 import { Delete24Filled, Delete24Regular, FolderOpen24Filled, FolderOpen24Regular, MoreVertical24Filled, MoreVertical24Regular, Open24Filled, Open24Regular, Rename24Filled, Rename24Regular, bundleIcon } from "@fluentui/react-icons";
 import { localStorageRename } from "@/utils/localStorageRename";
-import { routers } from "@/App";
+import { routes } from '@/router';
 import { t } from "@lingui/macro";
 import { GameInfoDto } from "@/api/Api";
 
@@ -84,7 +84,7 @@ export default function GameElement(props: IGameElementProps) {
         <div className={styles.gameElement_sub}>
           <span className={styles.gameElement_dir}>{props.gameInfo.dir}</span>
           <div className={styles.gameElement_action} onClick={(event) => event.stopPropagation()}>
-            <Button appearance='primary' as='a' href={`${routers.game.url}/${props.gameInfo.dir}`}>
+            <Button appearance='primary' as='a' href={`${routes.game.url}/${props.gameInfo.dir}`}>
               <span style={{textWrap: 'nowrap'}}>{t`编辑游戏`}</span>
             </Button>
             <Menu>

diff --git a/packages/origine2/src/pages/dashboard/TemplateElement.tsx b/packages/origine2/src/pages/dashboard/TemplateElement.tsx
@@ -4,7 +4,7 @@ import { Delete24Filled, Delete24Regular, FolderOpen24Filled, FolderOpen24Regula
 import { useMemo } from "react";
 import { useValue } from "../../hooks/useValue";
 import { api } from "@/api";
-import { routers } from "@/App";
+import { routes } from '@/router';
 import { t } from "@lingui/macro";
 import { localStorageRename } from "@/utils/localStorageRename";
 import { TemplateInfoDto } from "@/api/Api";
@@ -78,7 +78,7 @@ export default function TemplateElement(props: ITemplateElementProps){
         <div className={styles.templateElement_sub}>
           <span className={styles.templateElement_dir}>{props.templateInfo.dir}</span>
           <div className={styles.templateElement_action} onClick={(event) => event.stopPropagation()}>
-            <Button appearance='primary' as='a' href={`${routers.template.url}/${props.templateInfo.dir}`}>
+            <Button appearance='primary' as='a' href={`${routes.template.url}/${props.templateInfo.dir}`}>
               <span style={{textWrap: 'nowrap'}}>{t`编辑模板`}</span>
             </Button>
             <Menu>

diff --git a/...omponents/Provider/GameEditorProvider.tsx → ...2/src/pages/editor/GameEditorProvider.tsx b/...omponents/Provider/GameEditorProvider.tsx → ...2/src/pages/editor/GameEditorProvider.tsx
@@ -1,4 +1,4 @@
-import { redirect } from "@/hooks/useHashRoute";
+import { goTo } from "@/router";
 import { gameListFetcher } from "@/pages/dashboard/DashBoard";
 import useEditorStore from "@/store/useEditorStore";
 import { GameEditorContext, createGameEditorStore } from "@/store/useGameEditorStore";
@@ -11,15 +11,15 @@ const GameEditorProvider = ({ children }: { children: ReactNode }) => {
   const gameDir = useEditorStore.use.subPage();
 
   if (page !== 'game' || !gameDir) {
-    redirect('dashboard', 'game');
+    goTo('dashboard', 'game');
   };
 
   const { data: gameList, isLoading: gameListLoading } = useSWR("game-list", gameListFetcher);
   const fristLoading = gameListLoading && !gameList;
   const inGameList = gameList && gameList.length > 0 && gameList.some((game) => game.dir === gameDir);
 
   if (!fristLoading && !inGameList) {
-    redirect('dashboard', 'game');
+    goTo('dashboard', 'game');
   }
 
   return (
@@ -45,4 +45,4 @@ const GameEditorContextProvider = ({ children }: { children: ReactNode }) => {
   );
 };
 
-export default GameEditorProvider;
+export default GameEditorProvider;
diff --git a/packages/origine2/src/pages/editor/Topbar/Topbar.tsx b/packages/origine2/src/pages/editor/Topbar/Topbar.tsx
@@ -33,7 +33,7 @@ import {
 import useEditorStore from "@/store/useEditorStore";
 import {useGameEditorContext} from "@/store/useGameEditorStore";
 import {IGameEditorSidebarTabs, IGameEditorTopbarTabs} from "@/types/gameEditor";
-import {redirect} from "@/hooks/useHashRoute";
+import { goTo } from '@/router';
 import {t} from "@lingui/macro";
 import BackDashboardButton from "@/pages/editor/Topbar/components/BackDashboardButton";
 
@@ -90,7 +90,7 @@ export default function TopBar() {
     }
   }, [isShowAddSceneTab]);
 
-  const backToDashboard = () => redirect('dashboard', 'game');
+  const backToDashboard = () => goTo('dashboard', 'game');
 
   return <div className={styles.editor_topbar}>
     <Toolbar>

diff --git a/...nents/Provider/TemplateEditorProvider.tsx → ...templateEditor/TemplateEditorProvider.tsx b/...nents/Provider/TemplateEditorProvider.tsx → ...templateEditor/TemplateEditorProvider.tsx
@@ -1,4 +1,4 @@
-import { redirect } from "@/hooks/useHashRoute";
+import { goTo } from "@/router";
 import { templateListFetcher } from "@/pages/dashboard/DashBoard";
 import useEditorStore from "@/store/useEditorStore";
 import { TemplateEditorContext, createTemplateEditorStore } from "@/store/useTemplateEditorStore";
@@ -11,15 +11,15 @@ const TemplateEditorProvider = ({ children }: { children: ReactNode }) => {
   const templateDir = useEditorStore.use.subPage();
 
   if (page !== 'template' || !templateDir) {
-    redirect('dashboard', 'template');
+    goTo('dashboard', 'template');
   }
 
   const {data: templateList, isLoading: templateListLoading} = useSWR("template-list", templateListFetcher);
   const fristLoading = templateListLoading && !templateList;
   const inTemplateList = templateList && templateList.length > 0 && templateList.some((template) => template.dir === templateDir);
 
   if (!fristLoading && !inTemplateList) {
-    redirect('dashboard', 'template');
+    goTo('dashboard', 'template');
   }
 
   return (
@@ -38,7 +38,7 @@ const TemplateEditorProvider = ({ children }: { children: ReactNode }) => {
 const TemplateEditorContextProvider = ({ children }: { children: ReactNode}) => {
   const page = useEditorStore.use.page();
   const subPage = useEditorStore.use.subPage();
-  if (page !== 'template' || !subPage) redirect('dashboard');
+  if (page !== 'template' || !subPage) goTo('dashboard');
   const templateEditorStore = useRef(createTemplateEditorStore(subPage)).current;
   return(
     <TemplateEditorContext.Provider value={templateEditorStore}>
@@ -47,4 +47,4 @@ const TemplateEditorContextProvider = ({ children }: { children: ReactNode}) =>
   );
 };
 
-export default TemplateEditorProvider;
+export default TemplateEditorProvider;
diff --git a/packages/origine2/src/pages/templateEditor/TemplateEditorSidebar/TemplateEditorSidebar.tsx b/packages/origine2/src/pages/templateEditor/TemplateEditorSidebar/TemplateEditorSidebar.tsx
@@ -9,7 +9,7 @@ import {ArrowLeftFilled, ArrowLeftRegular, bundleIcon, NavigationFilled, Navigat
 import {ITab} from '@/types/templateEditor';
 import {t} from "@lingui/macro";
 import BackDashboardButton from "@/pages/editor/Topbar/components/BackDashboardButton";
-import {redirect} from "@/hooks/useHashRoute";
+import { goTo } from '@/router';
 import CommonTips from "@/pages/editor/GraphicalEditor/components/CommonTips";
 import { api } from '@/api';
 import { GameInfoDto } from '@/api/Api';
@@ -44,7 +44,7 @@ export default function TemplateEditorSidebar() {
     updateCurrentTab(newTab);
   };
 
-  const backToDashboard = () => redirect('dashboard', 'template');
+  const backToDashboard = () => goTo('dashboard', 'template');
 
   // 当前模板没有id时自动添加
   useEffect(() => {

diff --git a/packages/origine2/src/router/index.tsx b/packages/origine2/src/router/index.tsx
@@ -0,0 +1,72 @@
+import { useEffect, type ReactNode } from 'react';
+import useEditorStore from '@/store/useEditorStore';
+import DashBoard from '@/pages/dashboard/DashBoard';
+import GameEditorProvider from '@/pages/editor/GameEditorProvider';
+import Editor from '@/pages/editor/Editor';
+import TemplateEditorProvider from '@/pages/templateEditor/TemplateEditorProvider';
+import TemplateEditor from '@/pages/templateEditor/TemplateEditor';
+
+export type IPage = 'dashboard' | 'game' | 'template';
+
+export const routes: { [key in IPage]: { url: string; element: ReactNode } } = {
+  dashboard: {
+    url: '#/dashboard',
+    element: <DashBoard />,
+  },
+  game: {
+    url: '#/game',
+    element: (
+      <GameEditorProvider>
+        <Editor />
+      </GameEditorProvider>
+    ),
+  },
+  template: {
+    url: '#/template',
+    element: (
+      <TemplateEditorProvider>
+        <TemplateEditor />
+      </TemplateEditorProvider>
+    ),
+  },
+};
+
+export function RouterPage({ page }: { page: IPage }) {
+  return routes[page].element || routes.dashboard.element;
+}
+
+export const goTo = (page: IPage, subPage?: string) => {
+  window.location.hash = `${routes[page].url}${subPage ? `/${subPage}` : ''}`;
+};
+
+export function useHashRouter() {
+  const updatePage = useEditorStore.use.updatePage();
+  const updateSubPage = useEditorStore.use.updateSubPage();
+
+  useEffect(() => {
+    const handleHashChange = () => {
+      const [, _page, _subPage] = window.location.hash.split('/');
+      if (['game', 'template'].includes(_page) && _subPage && _subPage.length > 0) {
+        updatePage(_page as IPage);
+        try {
+          updateSubPage(decodeURIComponent(_subPage));
+        } catch (error) {
+          console.warn('Update sub page error!', error);
+          updateSubPage(_page);
+          goTo('dashboard', _page);
+        }
+      } else if (_page === 'dashboard' && ['game', 'template'].includes(_subPage)) {
+        updatePage('dashboard');
+        updateSubPage(_subPage);
+      } else {
+        updateSubPage('game');
+        goTo('dashboard', 'game');
+      }
+    };
+    handleHashChange();
+    window.addEventListener('hashchange', handleHashChange);
+    return () => {
+      window.removeEventListener('hashchange', handleHashChange);
+    };
+  }, []);
+}
diff --git a/packages/origine2/src/types/editor.ts b/packages/origine2/src/types/editor.ts
@@ -1,5 +1,5 @@
 import { IViewType, ISortBy, ISortOrder } from "@/components/Assets/Assets";
-import { IPage } from "@/hooks/useHashRoute";
+import { type IPage } from '@/router';
 import {IGameEditorState} from "@/types/gameEditor";
 
 export interface IEditorState {