fix: 尝试修复图标仓库

Author: xream

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sub-store-front-end",
-  "version": "2.16.67",
+  "version": "2.16.70",
   "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

@@ -140,6 +140,8 @@
       :title="$t(`iconCollectionPage.collectionPicker.title`)"
       :cancel-text="$t(`iconCollectionPage.collectionPicker.cancel`)"
       :ok-text="$t(`iconCollectionPage.collectionPicker.confirm`)"
+      :z-index="ICON_COLLECTION_PICKER_Z_INDEX"
+      :teleport-disable="true"
       @confirm="handleConfirm"
       @cancel="handleCancel"
     ></DesktopPicker>
@@ -173,6 +175,10 @@ const { customIconCollections, defaultIconCollections, defaultIconCollection } =
   storeToRefs(globalStore);
 const { githubProxy, githubProxyRegex } = storeToRefs(settingsStore);
 
+const ICON_COLLECTION_PICKER_Z_INDEX = 11001;
+const ICON_COLLECTION_FETCH_RETRY_COUNT = 1;
+const ICON_COLLECTION_FETCH_RETRY_DELAY = 600;
+
 const form = reactive({
   iconName: "",
   iconCollectionName: "",
@@ -247,14 +253,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 +324,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 +350,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 +394,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 = () => {
@@ -460,6 +525,7 @@ defineExpose({ show, hide, close });
       padding-left: 60px;
       flex-shrink: 0;
       .action-btn {
+        cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: flex-end;