增加用户中心、用户注册登录

src/components/Hooks/useFetchImageUrl.ts

@@ -1,31 +1,54 @@
 import { useRequest } from '@umijs/max';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import {fetchImageLowRes} from "@/services/file/api";
 
+// 简单内存缓存，避免因虚拟滚动重复请求同一张图片
+const imageUrlCache = new Map<string, string>();
+
 const useFetchImageUrl = (imageInstanceId: string) => {
   const [imageUrl, setImageUrl] = useState("error");
+  const retryRef = useRef(0);
   const { data: response, run, loading } = useRequest(
-    () => {
-      return fetchImageLowRes(imageInstanceId);
-    },
+    () => fetchImageLowRes(imageInstanceId),
     {
       manual: true,
       onSuccess: (data) => {
+        if (data) {
+          const objectUrl = URL.createObjectURL(data);
+          imageUrlCache.set(imageInstanceId, objectUrl);
+          setImageUrl(objectUrl);
+        } else {
+          setImageUrl("error");
+        }
+        retryRef.current = 0;
+      },
+      onError: () => {
+        if (retryRef.current < 2) {
+          retryRef.current += 1;
+          run();
+        } else {
+          setImageUrl("error");
+          imageUrlCache.set(imageInstanceId, "error");
+          retryRef.current = 0;
+        }
       },
     },
   );
+
   useEffect(() => {
-    if (response) {
-      setImageUrl(URL.createObjectURL(response));
+    if (imageInstanceId) {
+      retryRef.current = 0;
+      const cached = imageUrlCache.get(imageInstanceId);
+      if (cached) {
+        setImageUrl(cached);
+      } else {
+        run();
+      }
     } else {
       setImageUrl("error");
     }
-  }, [response]);
-  useEffect(() => {
-    if (imageInstanceId) {
-      run();
-    }
-  }, [imageInstanceId]);
+  }, [imageInstanceId, run]);
+
   return {imageUrl, loading};
 };
 export default useFetchImageUrl;