更新

README.md

@@ -7,3 +7,8 @@ First, run the development server:
 - pnpm dev
 ```
 
+## use navigation
+国际化之后，使用il8n内到处的路由， 否则跳转失败 
+```bash
+  - /src/il8n.ts
+```

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@nextui-org/react": "^2.4.2",
+    "axios": "^1.7.2",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.11",
     "framer-motion": "^11.3.2",

pnpm-lock.yaml

@@ -8,6 +8,9 @@ dependencies:
   '@nextui-org/react':
     specifier: ^2.4.2
     version: 2.4.2(@types/react@18.3.3)(framer-motion@11.3.4)(react-dom@18.3.1)(react@18.3.1)(tailwindcss@3.4.6)
+  axios:
+    specifier: ^1.7.2
+    version: 1.7.2
   clsx:
     specifier: ^2.1.1
     version: 2.1.1
@@ -3056,6 +3059,10 @@ packages:
     resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==}
     dev: true
 
+  /asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+    dev: false
+
   /available-typed-arrays@1.0.7:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
@@ -3068,6 +3075,16 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
+  /axios@1.7.2:
+    resolution: {integrity: sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==}
+    dependencies:
+      follow-redirects: 1.15.6
+      form-data: 4.0.0
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+    dev: false
+
   /axobject-query@3.1.1:
     resolution: {integrity: sha512-goKlv8DZrK9hUh975fnHzhNIO4jUnFCfv/dszV5VwUGDFjI6vQ2VwoyjYjYNEbBE8AH87TduWP5uyDR1D+Iteg==}
     dependencies:
@@ -3194,6 +3211,13 @@ packages:
       color-string: 1.9.1
     dev: false
 
+  /combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      delayed-stream: 1.0.0
+    dev: false
+
   /commander@4.1.1:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
@@ -3331,6 +3355,11 @@ packages:
       object-keys: 1.1.1
     dev: true
 
+  /delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+    dev: false
+
   /detect-node-es@1.1.0:
     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
     dev: false
@@ -3866,6 +3895,16 @@ packages:
     resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
     dev: true
 
+  /follow-redirects@1.15.6:
+    resolution: {integrity: sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+    dev: false
+
   /for-each@0.3.3:
     resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
     dependencies:
@@ -3879,6 +3918,15 @@ packages:
       cross-spawn: 7.0.3
       signal-exit: 4.1.0
 
+  /form-data@4.0.0:
+    resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
+    engines: {node: '>= 6'}
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      mime-types: 2.1.35
+    dev: false
+
   /framer-motion@11.3.4(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-LC+luwNmz4zEg0AU0rol3yLUFKSJ9GDmIyvigXBAwEbUBG59EWmcRQ2Xh+0py7IkmvWxFUH0TN42v1Dda8xgUg==}
     peerDependencies:
@@ -4488,6 +4536,18 @@ packages:
       braces: 3.0.3
       picomatch: 2.3.1
 
+  /mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+    dev: false
+
+  /mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      mime-db: 1.52.0
+    dev: false
+
   /minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
     dependencies:
@@ -4941,6 +5001,10 @@ packages:
       react-is: 16.13.1
     dev: true
 
+  /proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+    dev: false
+
   /punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}

src/api/home.ts

@@ -0,0 +1,17 @@
+import { server } from "@/utils/server";
+
+type HomeInfo = {
+    type: number;
+    id: number;
+    imagePath: string;
+    linkType: number;
+    linkId: number;
+    linkUrl: string;
+    isVisible: number;
+    titleColor: string;
+};
+export const getHomeMultidata = () => {
+    return server.get<HomeInfo>({
+        url: "/home/multidata",
+    });
+};

src/utils/server/axios.ts

@@ -0,0 +1,101 @@
+import axios, { AxiosInstance, AxiosResponse, InternalAxiosRequestConfig } from "axios";
+import type { AxiosOptions } from "./type";
+
+type Result<T = any> = {
+    code: number;
+    msg: string;
+    data: T;
+};
+
+export default class Request {
+    private axiosInstance: AxiosInstance;
+    private readonly options: AxiosOptions;
+    constructor(options: AxiosOptions) {
+        this.axiosInstance = axios.create(options);
+        this.options = options;
+        this.setupInterceptors();
+    }
+
+    setupInterceptors() {
+        // 定义拦截器
+        const {
+            options: { transform },
+            axiosInstance,
+        } = this;
+        // 如果没有自定义拦截器则返回
+        if (!transform) {
+            return;
+        }
+        // 解包拦截器
+        const {
+            requestInterceptor,
+            requestInterceptorCatch,
+            responseInterceptor,
+            responseInterceptorCatch,
+        } = transform;
+        /**
+         * @description 全局请求拦截
+         */
+        axiosInstance.interceptors.request.use(
+            (config: InternalAxiosRequestConfig) => {
+                if (requestInterceptor) {
+                    config = requestInterceptor(config);
+                }
+                return config;
+            },
+            (error) => {
+                if (requestInterceptorCatch) {
+                    requestInterceptorCatch(error);
+                }
+            }
+        );
+        /**
+         * @description 全局响应拦截
+         */
+        axiosInstance.interceptors.response.use(
+            (res) => {
+                if (responseInterceptor) {
+                    res = responseInterceptor(res);
+                }
+                return res;
+            },
+            (error) => {
+                if (responseInterceptorCatch) {
+                    responseInterceptorCatch(error);
+                }
+            }
+        );
+    }
+
+    /**
+     * @description 单个实列请求
+     */
+    request<T = unknown>(config: AxiosOptions): Promise<Result<T>> {
+        return new Promise((resolve, reject) => {
+            this.axiosInstance
+                .request<any, AxiosResponse<Result>>(config)
+                .then((res) => {
+                    const { transform } = config;
+                    if (transform && transform.responseInterceptor) {
+                        res = transform.responseInterceptor(res);
+                    }
+                    resolve(res.data);
+                })
+                .catch((error) => {
+                    reject(error);
+                });
+        });
+    }
+    get<T>(config: AxiosOptions): Promise<Result<T>> {
+        return this.request({ ...config, method: "get" });
+    }
+    post<T>(config: AxiosOptions): Promise<Result<T>> {
+        return this.request({ ...config, method: "post" });
+    }
+    put<T>(config: AxiosOptions): Promise<Result<T>> {
+        return this.request({ ...config, method: "put" });
+    }
+    delete<T>(config: AxiosOptions): Promise<Result<T>> {
+        return this.request({ ...config, method: "delete" });
+    }
+}

src/utils/server/index.ts

@@ -0,0 +1,21 @@
+import Request from "./axios";
+const server = new Request({
+    timeout: 10 * 1000,
+    transform: {
+        // instance  interceptor
+        requestInterceptor: (config) => {
+            return config;
+        },
+        requestInterceptorCatch: (err) => {
+            return err;
+        },
+        responseInterceptor: (config) => {
+            return config;
+        },
+        responseInterceptorCatch: (err) => {
+            return err;
+        },
+    },
+});
+
+export { server };

src/utils/server/type.ts

@@ -0,0 +1,15 @@
+import { AxiosError, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from "axios";
+
+export interface AxiosTransform {
+    // 请求拦截器
+    requestInterceptor?: (config: InternalAxiosRequestConfig) => InternalAxiosRequestConfig;
+    // 请求失败
+    requestInterceptorCatch?: (error: AxiosError) => void;
+    // 响应拦截器
+    responseInterceptor?: (res: AxiosResponse<any>) => AxiosResponse<any>;
+    // 响应失败
+    responseInterceptorCatch?: (error: AxiosError) => void;
+}
+export interface AxiosOptions extends AxiosRequestConfig {
+    transform?: AxiosTransform;
+}