feat: jump function for built-in console

src/App.tsx

@@ -8,6 +8,7 @@ import { useNavigate } from "react-router-dom";
 import { useSnapshot } from "valtio";
 import { app, server } from "./states/app";
 import { Twindow } from "./components/universal/Twindow";
+import { jump } from "@utils/path";
 
 function App() {
   const appSnapshot = useSnapshot(app);
@@ -18,29 +19,29 @@ function App() {
     apiClient("/ping")
       .then(() => {})
       .catch(() => {
-        if (window.location.pathname != "/status") {
+        if (window.location.pathname != jump("/status")) {
           Twindow({
             title: "通信错误 - 跳转服务状态页",
             text: "无法与后端通信，请检查服务状态",
           });
-          navigate("/status");
+          navigate(jump(jump("/status")));
         }
       })
       .then(() => {
         apiClient("/user/check")
           .then(() => {
-            (window.location.pathname == "/" ||
-              window.location.pathname == "/login" ||
-              window.location.pathname == "/register") &&
-              navigate("/dashboard");
+            (window.location.pathname == jump("/") ||
+              window.location.pathname == jump("/login") ||
+              window.location.pathname == jump("/register")) &&
+              navigate(jump("/dashboard"));
             app.authenticated = true;
             app.showSidebar = true;
           })
           .catch(() => {
-            window.location.pathname != "/login" &&
-              window.location.pathname != "/register" &&
-              window.location.pathname != "/status" &&
-              navigate("/login");
+            window.location.pathname != jump("/login") &&
+              window.location.pathname != jump("/register") &&
+              window.location.pathname != jump("/status") &&
+              navigate(jump("/login"));
           });
         apiClient("/category").then((res) => {
           server.categories = res.data;

src/components/widgets/Sidebar/index.tsx

@@ -19,14 +19,15 @@ import { Space } from "@components/universal/Space";
 import styles from "./index.module.css";
 import { SidebarItem } from "./item";
 import { motion } from "framer-motion";
-import { getStorage, removeStorage, setStorage } from "@utils/storage";
+import { getStorage, setStorage } from "@utils/storage";
 import { useWindowSize } from "react-use";
 import itemStyle from "./item/index.module.css";
 import { useSnapshot } from "valtio";
 import { app } from "@states/app";
 import { useNavigate } from "react-router-dom";
 import { apiClient } from "@utils/request";
 import { removeCookie } from "@utils/cookie";
+import { jump } from "@utils/path";
 
 const Links = () => {
   const authenticated = useSnapshot(app).authenticated;
@@ -46,39 +47,39 @@ const Links = () => {
         [styles.disabled]: disabled,
       })}
     >
-      <SidebarItem icon={HomeTwo({})} title="仪表盘" href="/dashboard" />
+      <SidebarItem icon={HomeTwo({})} title="仪表盘" href={jump("/dashboard")} />
       <SidebarItem
         icon={Page({})}
         title="前往站点"
-        href="https://github.com"
+        href={"https://github.com"}
         outside
       />
       <Space height={20} />
-      <SidebarItem icon={Editor({})} title="文章" href="/posts" />
+      <SidebarItem icon={Editor({})} title="文章" href={jump("/posts")} />
       <SidebarItem
         title="写文章"
-        href="/write/post"
+        href={jump("/write/post")}
         sub
       />
-      <SidebarItem title="朋友动态" href="/posts/friends" sub />
+      <SidebarItem title="朋友动态" href={jump("/posts/friends")} sub />
       <Space height={20} />
-      <SidebarItem icon={OpenDoor({})} title="页面" href="/pages" />
+      <SidebarItem icon={OpenDoor({})} title="页面" href={jump("/pages")} />
       <SidebarItem
         title="新增页面"
-        href="/write/page"
+        href={jump("/write/page")}
         sub
       />
       <Space height={20} />
-      <SidebarItem icon={Comment({})} title="评论" href="/comments" />
+      <SidebarItem icon={Comment({})} title="评论" href={jump("/comments")} />
       <SidebarItem
         icon={CategoryManagement({})}
         title="分类标签"
-        href="/categories"
+        href={jump("/categories")}
       />
-      <SidebarItem icon={FriendsCircle({})} title="朋友们" href="/friends" />
+      <SidebarItem icon={FriendsCircle({})} title="朋友们" href={jump("/friends")} />
       <Space height={20} />
-      <SidebarItem icon={Setting({})} title="系统设置" href="/settings" />
-      <SidebarItem icon={Dashboard({})} title="服务状态" href="/status" />
+      <SidebarItem icon={Setting({})} title="系统设置" href={jump("/settings")} />
+      <SidebarItem icon={Dashboard({})} title="服务状态" href={jump("/status")} />
       <Space height={30} />
       <span
         className={clsx(itemStyle.item, styles.item)}
@@ -88,7 +89,7 @@ const Links = () => {
           }).then(() => {
             removeCookie("token")
             app.authenticated = false;
-            navigate("/login")
+            navigate(jump("/login"))
           }).catch((e) => {
             console.log(e)
           })

src/pages/Categories/index.tsx

@@ -135,7 +135,7 @@ export const CategoriesPage: BasicPage = () => {
             });
             console.log(modalCreateData.id);
             handleRemoveSelect();
-            // navigate("/categories")
+            // navigate(jump("/categories"))
             // window.location.reload()
           });
           setLoading(true);

src/pages/Comments/index.tsx

@@ -16,6 +16,7 @@ import { mailAvatar } from "@utils/avatar";
 import { Modal, ModalBody } from "@components/universal/Modal";
 import { Input, Textarea } from "@pages/Write/Input";
 import { Selects } from "@components/universal/Select";
+import { jump } from "@utils/path";
 
 const tabsList = [{
   name: "待审核",
@@ -72,7 +73,7 @@ export const CommentsPage: BasicPage = () => {
   useEffect(() => {
     // setLoading(true)
     setInSideLoading(true);
-    navigate(`/comments?status=${tab}&page=${page}`)
+    navigate(jump(`/comments?status=${tab}&page=${page}`))
     handleRequest(tab, page).then((res) => {
       setComments(res)
       setInSideLoading(false);
@@ -243,7 +244,7 @@ export const CommentsPage: BasicPage = () => {
                   </TableItemValue>
                   <TableItemValue
                     onClick={() => {
-                      navigate(`/write/post?id=${item.post.id}`)
+                      navigate(jump(`/write/post?id=${item.post.id}`))
                     }}
                     style={{ cursor: "pointer" }}
                   >{item.post.title}</TableItemValue>

src/pages/Friends/index.tsx

@@ -31,6 +31,7 @@ import {
 import postStyles from "@pages/Posts/Index/index.module.css";
 import { Input, Textarea } from "@pages/Write/Input";
 import styles from "./index.module.css";
+import { jump } from "@utils/path";
 
 const FriendsStatus = ["Approved", "Pending", "Spam", "Trash"];
 const FriendsFormFront = [
@@ -87,7 +88,7 @@ export const FriendsPage: BasicPage = () => {
   useEffect(() => {
     if (status !== "0" && status !== "1" && status !== "2" && status !== "3") {
       setTab(0);
-      navigate("/friends?status=0");
+      navigate(jump("/friends?status=0"));
     } else {
       setTab(Number(status));
     }
@@ -127,7 +128,7 @@ export const FriendsPage: BasicPage = () => {
           onConfirm={() => {
             const REQUEST = {
               method: select[0] ? "PUT" : "POST",
-              URL: select[0] ? `/friends/${select[0]}` : "/friends",
+              URL: select[0] ? jump(`/friends/${select[0]}`) : jump("/friends"),
               title: select[0] ? "修改成功" : "添加成功",
             };
             apiClient(REQUEST.URL, {
@@ -564,7 +565,7 @@ export const FriendsPage: BasicPage = () => {
           defaultIndex={tab}
           onChange={(index) => {
             setTab(index);
-            navigate(`/friends?status=${index}`);
+            navigate(jump(`/friends?status=${index}`));
           }}
         >
           <Tab.List className={tabs.tabList}>

src/pages/Login/index.tsx

@@ -8,6 +8,7 @@ import { apiClient } from "@utils/request";
 import { Twindow } from "@components/universal/Twindow";
 import { app } from "@states/app";
 import { setCookie } from "@utils/cookie";
+import { jump } from "@utils/path";
 
 export const Login: BasicPage = () => {
   const [loading, setLoading] = useState(false);
@@ -17,7 +18,7 @@ export const Login: BasicPage = () => {
 
   useEffect(() => {
     apiClient("/user/master/info").catch(() => {
-      navigate("/register");
+      navigate(jump("/register"));
     })
   }, []);
 
@@ -46,7 +47,7 @@ export const Login: BasicPage = () => {
             image: res.avatar,
           });
           app.authenticated = true;
-          navigate("/dashboard");
+          navigate(jump("/dashboard"));
           window.location.reload();
         })
         .catch((res) => {

src/pages/Register/index.tsx

@@ -8,6 +8,7 @@ import { apiClient } from "@utils/request";
 import { Twindow } from "@components/universal/Twindow";
 import { app } from "@states/app";
 import { setCookie } from "@utils/cookie";
+import { jump } from "@utils/path";
 
 // nickname, description, email, avatar, password, username
 
@@ -21,7 +22,7 @@ export const RegisterPage: BasicPage = () => {
     apiClient("/user/master/info")
       .then((res) => {
         if (res) {
-          navigate("/dashboard");
+          navigate(jump("/dashboard"));
         }
       }).catch(() => {
         return;
@@ -61,7 +62,7 @@ export const RegisterPage: BasicPage = () => {
             image: res.avatar,
           });
           app.authenticated = true;
-          navigate("/dashboard");
+          navigate(jump("/dashboard"));
           window.location.reload();
         })
         .catch((res) => {

src/pages/Settings/index.tsx

@@ -16,6 +16,7 @@ import { getQueryVariable } from "@utils/url";
 import { useNavigate } from "react-router-dom";
 import { Tags } from "@components/universal/Tags";
 import { Toggle } from "@components/universal/Toggle";
+import { jump } from "@utils/path";
 
 const tabsAPI = ["/user/master/info", "/configs"]
 
@@ -28,7 +29,7 @@ export const SettingsPage: BasicPage = () => {
 
   useEffect(() => {
     // setLoading(true);
-    navigate(`/settings?tab=${_tabs}`)
+    navigate(jump(`/settings?tab=${_tabs}`))
     apiClient(tabsAPI[_tabs]).then((res) => {
       setData(res);
     });

src/router/router.tsx

@@ -9,7 +9,9 @@
 
 import { CommentsPage } from "@pages/Comments";
 import { RegisterPage } from "@pages/Register";
-import { Route, Routes } from "react-router-dom";
+import { jump } from "@utils/path";
+import { useEffect } from "react";
+import { Route, Routes, useNavigate } from "react-router-dom";
 import { CategoriesPage } from "../pages/Categories";
 import { FriendsPage } from "../pages/Friends";
 import { Home } from "../pages/Home";
@@ -24,33 +26,34 @@ import { EditorPage } from "../pages/Write";
 export const AppRouter = () => {
   return (
     <Routes>
-      <Route path="/login" element={<Login />} />
-      <Route path="/register" element={<RegisterPage />} />
+      <Route path={jump("/login")}  element={<Login />} />
+      <Route path={jump("/register")}  element={<RegisterPage />} />
 
-      <Route path="/" element={<Home />} />
-      <Route path="/dashboard" element={<Home />} />
+      <Route path={jump("/")}  element={<Home />} />
+      <Route path={jump("/dashboard")}  element={<Home />} />
 
-      <Route path="/posts" element={<PostsIndex />} />
-      <Route path="/posts/friends" element={<FriendsPosts />} />
-      <Route path="/pages" element={<PagesIndex />} />
+      <Route path={jump("/posts")}  element={<PostsIndex />} />
+      <Route path={jump("/posts/friends")}  element={<FriendsPosts />} />
+      <Route path={jump("/pages")}  element={<PagesIndex />} />
 
-      <Route path="/write" element={<JumpToEditorPage />} />
-      <Route path="/write/:type" element={<EditorPage />} />
+      <Route path={jump("/write")}  element={<JumpToEditorPage />} />
+      <Route path={jump("/write/:type")}  element={<EditorPage />} />
 
-      <Route path="/comments" element={<CommentsPage />} />
-      <Route path="/categories" element={<CategoriesPage />} />
-      <Route path="/friends" element={<FriendsPage />} />
+      <Route path={jump("/comments")}  element={<CommentsPage />} />
+      <Route path={jump("/categories")}  element={<CategoriesPage />} />
+      <Route path={jump("/friends")}  element={<FriendsPage />} />
 
-      <Route path="/settings" element={<SettingsPage />} />
-      <Route path="/status" element={<StatusPage />} />
+      <Route path={jump("/settings")}  element={<SettingsPage />} />
+      <Route path={jump("/status")}  element={<StatusPage />} />
 
-      <Route path="*" element={<NotFoundPage />} />
+      <Route path={jump("/*")}  element={<NotFoundPage />} />
+      <Route path={"*"}  element={<NotFoundPage />} />
     </Routes>
   );
 };
 
 const NotFoundPage = () => {
-  window.location.href = "/dashboard";
+  window.location.href = jump("/dashboard");
   return <></>;
 };
 

src/types.d.ts

@@ -4,6 +4,7 @@ declare global {
   }
   export interface Window {
     MOG_API: string;
+    MOG_BASE: string;
   }
 }
 
@@ -15,4 +16,4 @@ interface HTMLInputElement extends HTMLElement {
   value: string;
 }
 
-export {};
+export {};

src/utils/path.ts

@@ -0,0 +1,4 @@
+export function jump(p: string){
+  const base = window.MOG_BASE || ''
+  return `${base}${p}`
+}