fix: 尝试修复图标仓库

Author: xream

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sub-store-front-end",
-  "version": "2.16.67",
+  "version": "2.16.71",
   "private": true,
   "scripts": {
     "dev": "vite --host",

src/components/DesktopPicker.vue

@@ -1,15 +1,16 @@
 <template>
-  <nut-picker ref="pickerRef">
+  <nut-picker ref="pickerRef" v-bind="attrs">
     <template v-for="(_, name) in slots" #[name]="slotProps">
       <slot :name="name" v-bind="slotProps || {}" />
     </template>
   </nut-picker>
 </template>
 
 <script setup lang="ts">
-  import { ref, useSlots } from 'vue';
+  import { ref, useAttrs, useSlots } from 'vue';
   import { useDesktopPickerWheel } from '@/hooks/useDesktopPickerWheel';
 
+  const attrs = useAttrs();
   const slots = useSlots();
   const pickerRef = ref();
 

src/views/icon/IconPopup.vue

@@ -152,7 +152,7 @@ import { Toast } from "@nutui/nutui";
 import { useDebounceFn } from "@vueuse/core";
 import axios from "axios";
 import { storeToRefs } from "pinia";
-import { computed, reactive, ref, watch } from "vue";
+import { computed, onBeforeUnmount, reactive, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 
 import { useGlobalStore } from "@/store/global";
@@ -173,6 +173,10 @@ const { customIconCollections, defaultIconCollections, defaultIconCollection } =
   storeToRefs(globalStore);
 const { githubProxy, githubProxyRegex } = storeToRefs(settingsStore);
 
+const ICON_COLLECTION_FETCH_RETRY_COUNT = 1;
+const ICON_COLLECTION_FETCH_RETRY_DELAY = 600;
+const ICON_COLLECTION_INITIAL_FETCH_DELAY = 350;
+
 const form = reactive({
   iconName: "",
   iconCollectionName: "",
@@ -238,6 +242,28 @@ const defaultIconCollectionValue = ref([""]);
 const showIconCollectionPicker = ref(false);
 
 const showCustomIconCollection = ref(false);
+let initialFetchTimer: ReturnType<typeof setTimeout> | null = null;
+
+const clearInitialFetchTimer = () => {
+  if (initialFetchTimer) {
+    clearTimeout(initialFetchTimer);
+    initialFetchTimer = null;
+  }
+};
+
+const scheduleInitialFetch = () => {
+  clearInitialFetchTimer();
+  initialFetchTimer = setTimeout(() => {
+    initialFetchTimer = null;
+    if (!isVisible.value) {
+      return;
+    }
+
+    refreshIcons();
+  }, ICON_COLLECTION_INITIAL_FETCH_DELAY);
+};
+
+onBeforeUnmount(clearInitialFetchTimer);
 
 const setDefaultIconCollection = (url: string) => {
   globalStore.setDefaultIconCollection(url);
@@ -247,14 +273,61 @@ const setCustomIconCollections = (collection: any[]) => {
   globalStore.setCustomIconCollections(collection);
 };
 
+const getFallbackIconCollectionUrl = () => {
+  return defaultIconCollections.value[0]?.value || "";
+};
+
+const isKnownIconCollectionUrl = (url: string) => {
+  return iconCollectionColumns.value.some((item) => item.value === url);
+};
+
+const setCurrentIconCollectionUrl = (url: string) => {
+  form.iconCollectionUrl = url;
+  defaultIconCollectionValue.value[0] = url;
+};
+
+let iconFetchRequestId = 0;
+
+const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+const fetchIconCollection = async (url: string) => {
+  let lastError;
+
+  for (let attempt = 0; attempt <= ICON_COLLECTION_FETCH_RETRY_COUNT; attempt++) {
+    try {
+      const { data } = await axios.get(url);
+      return data;
+    } catch (error) {
+      lastError = error;
+
+      if (attempt < ICON_COLLECTION_FETCH_RETRY_COUNT) {
+        await wait(ICON_COLLECTION_FETCH_RETRY_DELAY);
+      }
+    }
+  }
+
+  throw lastError;
+};
+
 const fetchIcons = async () => {
+  const requestId = iconFetchRequestId + 1;
+  iconFetchRequestId = requestId;
+  const iconCollectionUrl = form.iconCollectionUrl;
+
   try {
     Toast.loading(t(`globalNotify.refresh.loading`), {
       cover: true,
       id: "icon-collection",
     });
     fetchStatus.value = "loading";
-    const { data } = await axios.get(rewriteGithubUrl(form.iconCollectionUrl));
+    const rewrittenIconCollectionUrl = rewriteGithubUrl(iconCollectionUrl);
+    if (!rewrittenIconCollectionUrl) {
+      throw new Error("Missing icon collection URL");
+    }
+    const data = await fetchIconCollection(rewrittenIconCollectionUrl);
+    if (requestId !== iconFetchRequestId) {
+      return;
+    }
     const collectionKey = form.iconListKey || "icons";
     const iconUrlKey = form.iconItemUrlKey || "url";
     iconList.value = data[collectionKey];
@@ -271,23 +344,23 @@ const fetchIcons = async () => {
       });
       // 添加自定义图标仓库，
       const hasCollection = iconCollectionColumns.value.some(
-        (item) => item.value === form.iconCollectionUrl,
+        (item) => item.value === iconCollectionUrl,
       );
       console.log("hasCollection", hasCollection);
       if (!hasCollection) {
         const list = [
           {
             text: name,
-            value: form.iconCollectionUrl,
+            value: iconCollectionUrl,
           },
           ...customIconCollections.value,
         ];
         setCustomIconCollections(list);
-        setDefaultIconCollection(form.iconCollectionUrl);
-        defaultIconCollectionValue.value[0] = form.iconCollectionUrl;
+        setDefaultIconCollection(iconCollectionUrl);
+        defaultIconCollectionValue.value[0] = iconCollectionUrl;
       } else {
-        setDefaultIconCollection(form.iconCollectionUrl);
-        defaultIconCollectionValue.value[0] = form.iconCollectionUrl;
+        setDefaultIconCollection(iconCollectionUrl);
+        defaultIconCollectionValue.value[0] = iconCollectionUrl;
       }
     } else {
       iconList.value = [];
@@ -297,6 +370,9 @@ const fetchIcons = async () => {
     fetchStatus.value = "success";
     Toast.hide("icon-collection");
   } catch (error) {
+    if (requestId !== iconFetchRequestId) {
+      return;
+    }
     Toast.hide("icon-collection");
     iconList.value = [];
     searchResult.value = [];
@@ -338,13 +414,22 @@ const handleCancel = () => {
 };
 
 const syncIconCollectionState = () => {
-  if (defaultIconCollection.value) {
-    form.iconCollectionUrl = defaultIconCollection.value;
-    defaultIconCollectionValue.value[0] = defaultIconCollection.value;
-  } else {
-    form.iconCollectionUrl = defaultIconCollections.value[0].value;
-    defaultIconCollectionValue.value[0] = defaultIconCollections.value[0].value;
+  const savedIconCollectionUrl = defaultIconCollection.value;
+  const fallbackIconCollectionUrl = getFallbackIconCollectionUrl();
+  const iconCollectionUrl =
+    savedIconCollectionUrl && isKnownIconCollectionUrl(savedIconCollectionUrl)
+      ? savedIconCollectionUrl
+      : fallbackIconCollectionUrl;
+
+  if (!iconCollectionUrl) {
+    return;
+  }
+
+  if (savedIconCollectionUrl && savedIconCollectionUrl !== iconCollectionUrl) {
+    setDefaultIconCollection(iconCollectionUrl);
   }
+
+  setCurrentIconCollectionUrl(iconCollectionUrl);
 };
 
 const clearIconName = () => {
@@ -384,7 +469,10 @@ watch(
     isVisible.value = newValue;
     if (newValue) {
       syncIconCollectionState();
-      refreshIcons();
+      fetchStatus.value = form.iconCollectionUrl ? "loading" : "idle";
+      scheduleInitialFetch();
+    } else {
+      clearInitialFetchTimer();
     }
   },
   { immediate: true },
@@ -399,6 +487,7 @@ const close = () => {
   hide();
 };
 const hide = () => {
+  clearInitialFetchTimer();
   isVisible.value = false;
   emit("update:visible", false);
 };
@@ -460,6 +549,7 @@ defineExpose({ show, hide, close });
       padding-left: 60px;
       flex-shrink: 0;
       .action-btn {
+        cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: flex-end;