From 7572267b998db673959ab928ac7837c393d962d1 Mon Sep 17 00:00:00 2001
From: master1lan <278457198@qq.com>
Date: Sat, 4 Mar 2023 11:20:29 +0800
Subject: [PATCH] =?UTF-8?q?:building=5Fconstruction:=20refactor(custom):?=
 =?UTF-8?q?=20=E7=94=A8=E6=88=B7=E7=82=B9=E5=87=BB=E5=A4=9A=E6=AC=A1tag?=
 =?UTF-8?q?=E6=A0=8F=E4=B9=8B=E5=90=8E=E5=B0=86=E5=8F=AA=E4=BC=9A=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E6=9C=80=E5=90=8E=E4=B8=80=E6=AC=A1=E7=BB=93=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ISSUES CLOSED: #33
---
 src/components/masonry/index.tsx  |  2 +-
 src/index.less                    |  4 +++
 src/routers/layout/logo/index.tsx | 21 ++++++-------
 src/routers/layout/nav/index.tsx  | 11 +++++--
 src/utils/fetch/fetchtype.ts      |  2 +-
 src/utils/fetch/index.ts          | 51 ++++++++++++++++++++++++++++---
 6 files changed, 70 insertions(+), 21 deletions(-)

diff --git a/src/components/masonry/index.tsx b/src/components/masonry/index.tsx
index 6583a97..5cd4871 100644
--- a/src/components/masonry/index.tsx
+++ b/src/components/masonry/index.tsx
@@ -2,7 +2,7 @@ import { FC, useState, useEffect, useCallback } from "react";
 import { Masonry as Masonic_masonry } from "masonic";
 import Image from "@components/image";
 import { SingleRun, concurrencyRequest } from "@utils/index";
-import { fetchPhotos, fetchVideos } from "@utils/fetch";
+import { fetchPhotos } from "@utils/fetch";
 import { nanoid } from "nanoid";
 import { getImageSize } from "../image/tool";
 export default function Masonry() {
diff --git a/src/index.less b/src/index.less
index 6c1b571..6c8d898 100644
--- a/src/index.less
+++ b/src/index.less
@@ -47,4 +47,8 @@
 body,
 html {
     font-family: 'Proxima Soft', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+body {
+    overflow-y: scroll;
 }
\ No newline at end of file
diff --git a/src/routers/layout/logo/index.tsx b/src/routers/layout/logo/index.tsx
index 70822d0..710cbc7 100644
--- a/src/routers/layout/logo/index.tsx
+++ b/src/routers/layout/logo/index.tsx
@@ -126,18 +126,17 @@ const RouterListAndQA = () => {
   return (
     <div className='pl-2'>
       {RouterList.slice(0, 2).map((item) => (
-        <Button
-          key={item.label}
-          startIcon={item.startICon}
-          title={`前往${item.label}页`}
-          className={` text-gray-800 transition-all duration-300 hover:bg-gray-200 rounded-sm ${
-            isActive(item.label) ? "bg-gray-300" : "bg-white"
-          }`}
-        >
-          <Link to={item.to} className=''>
+        <Link to={item.to} className='' key={item.label}>
+          <Button
+            startIcon={item.startICon}
+            title={`前往${item.label}页`}
+            className={` text-gray-800 transition-all duration-300 hover:bg-gray-200 rounded-sm ${
+              isActive(item.label) ? "bg-gray-300" : "bg-white"
+            }`}
+          >
             {item.label}
-          </Link>
-        </Button>
+          </Button>
+        </Link>
       ))}
     </div>
   );
diff --git a/src/routers/layout/nav/index.tsx b/src/routers/layout/nav/index.tsx
index a4caea0..d9f6f5f 100644
--- a/src/routers/layout/nav/index.tsx
+++ b/src/routers/layout/nav/index.tsx
@@ -230,9 +230,7 @@ const NavTagChipItem: FC<VideoNavQueryItemType | PhotoNavQueryItemType> = memo(
       <Chip
         onClick={handerclick}
         label={props.query}
-        className={`rounded px-3 py-1 border border-solid text-sm font-normal bg-gray-100 duration-300 hover:bg-gray-200 ${
-          loading ? "cursor-wait pointer-events-none" : "cursor-pointer"
-        }`}
+        className={`rounded px-3 py-1 border border-solid text-sm font-normal bg-gray-100 duration-300 hover:bg-gray-200 `}
         style={{
           color: styleColor,
           borderColor: clicked ? "currentcolor" : "transparent",
@@ -242,6 +240,13 @@ const NavTagChipItem: FC<VideoNavQueryItemType | PhotoNavQueryItemType> = memo(
   }
 );
 
+/**
+ * 
+${
+          loading ? "cursor-wait pointer-events-none" : "cursor-pointer"
+        }
+ */
+
 const handleSetSpecialProps = (
   query: string,
   defaultColor: string,
diff --git a/src/utils/fetch/fetchtype.ts b/src/utils/fetch/fetchtype.ts
index d5ab7fe..238986a 100644
--- a/src/utils/fetch/fetchtype.ts
+++ b/src/utils/fetch/fetchtype.ts
@@ -171,7 +171,7 @@ type CustomFetchRes<T> = {
   /**
    * @example 0
    */
-  code: 0 | 400 | 500;
+  code: 0 | 400 | 500 | 403;
   /**
    * @example "ok"
    */
diff --git a/src/utils/fetch/index.ts b/src/utils/fetch/index.ts
index 30b2043..38a872d 100644
--- a/src/utils/fetch/index.ts
+++ b/src/utils/fetch/index.ts
@@ -1,4 +1,4 @@
-import axios from "axios";
+import axios, { AxiosError } from "axios";
 import JSONBigInt from "json-bigint";
 /**
  * 类型文件导入
@@ -37,14 +37,21 @@ BackEndAxios.interceptors.request.use((config) => {
   return config;
 });
 
+let VideoSource: AbortController | null = null;
+
 /**
  * video视频数据获取接口
  */
 export async function fetchVideos(
   params: IFetchVideoParams
 ): Promise<RFetchVideoRes> {
+  if (VideoSource) {
+    VideoSource.abort();
+  }
+  VideoSource = new AbortController();
   try {
     const res = await BackEndAxios.get("/video-interface/advanced-search", {
+      signal: VideoSource.signal,
       params: {
         order: params.order || "score",
         page: params.page,
@@ -53,9 +60,23 @@ export async function fetchVideos(
         tname: params.tname,
       },
     });
+    VideoSource = null;
     return res.data;
-  } catch (e) {
-    // console.log({ e });
+  } catch (err) {
+    if (axios.isAxiosError(err)) {
+      if (err.code === "ERR_CANCELED") {
+        return {
+          code: 403,
+          message: "已取消",
+          ttl: 0,
+          data: {
+            page: 0,
+            numResults: 0,
+            result: [],
+          },
+        };
+      }
+    }
     return {
       code: 500,
       message: "网络请求错误，您似乎处于断网状态",
@@ -68,19 +89,39 @@ export async function fetchVideos(
     };
   }
 }
+let PhotoSource: AbortController | null = null;
 /**
  * photo图片数据获取接口
  */
 export async function fetchPhotos(
   params: IFetchPhotoParams
 ): Promise<RFetchPhotoRes> {
-  // console.log({ params });
+  if (PhotoSource) {
+    PhotoSource.abort();
+  }
+  PhotoSource = new AbortController();
   try {
     const res = await BackEndAxios.get(`/pic/${params.type}`, {
+      signal: PhotoSource.signal,
       params: Omit(params, "type"),
     });
+    PhotoSource.abort();
     return res.data;
-  } catch (e) {
+  } catch (err) {
+    if (axios.isAxiosError(err)) {
+      if (err.code === "ERR_CANCELED") {
+        return {
+          code: 403,
+          message: "已取消",
+          ttl: 0,
+          data: {
+            page: 0,
+            total: 0,
+            result: [],
+          },
+        };
+      }
+    }
     return {
       code: 500,
       message: "网络请求错误，您似乎处于断网状态",