feat: common

package.json

@@ -37,10 +37,12 @@
     }
   },
   "dependencies": {
+    "axios": "^1.7.2",
     "i18next": "^23.11.5",
     "pretty-bytes": "^6.1.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^18.4.4",

src/layout/ContentLayout/index.tsx

@@ -0,0 +1,7 @@
+import { Outlet } from "react-router-dom";
+
+const ContentLayout = () => {
+  return <Outlet />;
+};
+
+export default ContentLayout;

src/layout/MainLayout.tsx/index.tsx

@@ -0,0 +1,7 @@
+import { Outlet } from "react-router-dom";
+
+const MainLayout = () => {
+  return <Outlet />;
+};
+
+export default MainLayout;

src/main.tsx

@@ -1,4 +1,4 @@
-import "./main.css";
+import "./styles/main.css";
 
 import React from "react";
 import ReactDOM from "react-dom/client";

src/pages/login/index.tsx

@@ -0,0 +1,7 @@
+export const Login = () => {
+  return <LoginContent />;
+};
+
+export const LoginContent = () => {
+  return <div>LoginContent</div>;
+};

src/pages/third/login/index.tsx

@@ -0,0 +1,5 @@
+import { LoginContent } from "@/pages/login";
+
+export const Login = () => {
+  return <LoginContent />;
+};

src/routes/index.tsx

@@ -0,0 +1,32 @@
+import { createHashRouter } from "react-router-dom";
+
+import ContentLayout from "../layout/ContentLayout/index.tsx";
+import MainLayout from "../layout/MainLayout.tsx";
+import thirdRoutes from "./thirdRoutes.ts";
+
+const router = createHashRouter([
+  {
+    path: "/",
+    element: <MainLayout />,
+    children: [
+      {
+        path: "/",
+        element: <ContentLayout />,
+        children: [],
+      },
+      {
+        path: "login",
+        async lazy() {
+          const { Login } = await import("@/pages/login");
+          return { Component: Login };
+        },
+      },
+    ],
+  },
+  {
+    path: "third",
+    children: thirdRoutes,
+  },
+]);
+
+export default router;

src/routes/thirdRoutes.ts

@@ -0,0 +1,11 @@
+const thirdRoutes = [
+  {
+    path: "login",
+    async lazy() {
+      const { Login } = await import("@/pages/third/login");
+      return { Component: Login };
+    },
+  },
+];
+
+export default thirdRoutes;

src/utils/request.ts

@@ -0,0 +1,37 @@
+import axios from "axios";
+
+const createAxiosInstance = (baseURL: string) => {
+  const serves = axios.create({
+    baseURL,
+    timeout: 3000,
+  });
+
+  serves.interceptors.request.use(
+    (config) => {
+      return config;
+    },
+    (err) => Promise.reject(err),
+  );
+
+  serves.interceptors.response.use(
+    (res) => {
+      if (res.data.errCode !== 0) {
+        return Promise.reject(res.data);
+      }
+      return res.data;
+    },
+    (err) => {
+      if (err.message.includes("timeout")) {
+        console.error("error", err);
+      }
+      if (err.message.includes("Network Error")) {
+        console.error("error", err);
+      }
+      return Promise.reject(err);
+    },
+  );
+
+  return serves;
+};
+
+export default createAxiosInstance;

src/utils/storage.ts

@@ -0,0 +1,13 @@
+const TOKEN = "USER_TOKEN";
+const LOCALE = "USER_LOCALE";
+
+export type LocaleString = "zh-CN" | "en-US";
+
+export const getIMToken = () => localStorage.getItem(TOKEN);
+export const getLocale = (): LocaleString =>
+  (localStorage.getItem(LOCALE) as LocaleString) ||
+  window.navigator.language ||
+  "en-US";
+
+export const setTMToken = (token: string) => localStorage.setItem(TOKEN, token);
+export const setLocale = (locale: string) => localStorage.setItem(LOCALE, locale);

tsconfig.json

@@ -2,24 +2,36 @@
   "compilerOptions": {
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
     "module": "ESNext",
     "skipLibCheck": true,
-
-    /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-
-    /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": "./",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
   },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}
+  "include": [
+    "src"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

tsconfig.node.json

@@ -6,5 +6,7 @@
     "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.ts"]
-}
+  "include": [
+    "vite.config.ts"
+  ]
+}

vite.config.ts

@@ -1,13 +1,19 @@
 import { rmSync } from "node:fs";
 import path from "node:path";
-import { defineConfig } from "vite";
+
 import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
 import electron from "vite-electron-plugin";
 import { loadViteEnv } from "vite-electron-plugin/plugin";
 
 rmSync(path.join(__dirname, "dist-electron"), { recursive: true, force: true });
 
 export default defineConfig({
+  resolve: {
+    alias: {
+      "@": path.join(__dirname, "src"),
+    },
+  },
   plugins: [
     react(),
     electron({