🐛 修复卡牌查找结果渲染错误

src/pages/WIKI/GCG.vue

@@ -1,8 +1,5 @@
 <template>
-  <div v-if="loading">
+  <TOLoading v-model="loading" title="正在加载卡牌列表" />
-    <TLoading title="正在加载卡牌列表" />
-  </div>
-  <div v-else>
   <v-tabs v-model="tab" align-tabs="start" class="cards-tab">
     <div v-show="!doSearch">
       <v-tab value="character">
@@ -26,11 +23,14 @@
       @keyup.enter="searchCard"
     />
   </v-tabs>
-    <div v-if="!doSearch">
+  <div v-show="!doSearch">
     <v-window v-model="tab">
       <v-window-item value="character">
         <div class="cards-grid">
-            <v-card v-for="item in CardsInfoC" :key="item.contentId" class="card-cls" @click="toOuter(item.name, item.contentId)">
+          <v-card
+            v-for="item in CardsInfoC" :key="item.contentId" class="card-cls"
+            @click="toOuter(item.name, item.contentId)"
+          >
             <div class="card-border">
               <img src="/WIKI/GCG/bg/normal.webp" alt="border">
             </div>
@@ -45,7 +45,10 @@
       </v-window-item>
       <v-window-item value="action">
         <div class="cards-grid">
-            <v-card v-for="item in CardsInfoA" :key="item.contentId" class="card-cls" @click="toOuter(item.name, item.contentId)">
+          <v-card
+            v-for="item in CardsInfoA" :key="item.contentId" class="card-cls"
+            @click="toOuter(item.name, item.contentId)"
+          >
             <div class="card-border">
               <img src="/WIKI/GCG/bg/normal.webp" alt="border">
             </div>
@@ -60,7 +63,10 @@
       </v-window-item>
       <v-window-item value="monster">
         <div class="cards-grid">
-            <v-card v-for="item in CardsInfoM" :key="item.contentId" class="card-cls" @click="toOuter(item.name, item.contentId)">
+          <v-card
+            v-for="item in CardsInfoM" :key="item.contentId" class="card-cls"
+            @click="toOuter(item.name, item.contentId)"
+          >
             <div class="card-border">
               <img src="/WIKI/GCG/bg/normal.webp" alt="border">
             </div>
@@ -75,11 +81,14 @@
       </v-window-item>
     </v-window>
   </div>
-    <div v-else>
+  <div v-show="doSearch">
     <div class="cards-grid">
-        <div v-for="item in CardsInfoS" :key="item.contentId" class="card-cls" @click="toOuter(item.name, item.contentId)">
+      <v-card
+        v-for="item in CardsInfoS" :key="item.contentId" class="card-cls"
+        @click="toOuter(item.name, item.contentId)"
+      >
         <div class="card-border">
-            <img src="/WIKI/GCG/bg/normal.webp" alt="border">
+          <img src="/WIKI/GCG/bg/special.webp" alt="border">
         </div>
         <div class="card-cover">
           <img :src="item.icon" alt="cover">
@@ -87,18 +96,17 @@
         <div class="card-content">
           <span>{{ item.name }}</span>
         </div>
-        </div>
+      </v-card>
     </div>
   </div>
   <v-snackbar v-model="snackbar" timeout="1500" color="error">
     未找到相关卡牌
   </v-snackbar>
-  </div>
 </template>
 <script lang="ts" setup>
 // vue
-import { ref, onMounted, computed } from "vue";
+import { computed, onMounted, ref } from "vue";
-import TLoading from "../../components/main/t-loading.vue";
+import TOLoading from "../../components/overlay/to-loading.vue";
 // utils
 import { createTGWindow } from "../../utils/TGWindow";
 import { AppGCGData } from "../../data";
@@ -125,21 +133,35 @@ onMounted(async () => {
 });
 
 async function loadData () {
-  CardsInfoC.value = allCards.value.filter((item) => item.type === "角色牌");
+  await Promise.allSettled(
-  CardsInfoA.value = allCards.value.filter((item) => item.type === "行动牌");
+    allCards.value.map(async (item) => {
-  CardsInfoM.value = allCards.value.filter((item) => item.type === "魔物牌");
+      if (item.type === "角色牌") CardsInfoC.value.push(item);
+      if (item.type === "行动牌") CardsInfoA.value.push(item);
+      if (item.type === "魔物牌") CardsInfoM.value.push(item);
+    }),
+  );
   loading.value = false;
 }
+
 function toOuter (cardName: string, cardId: number) {
   const url = OBC_CONTENT_API.replace("{content_id}", cardId.toString());
   createTGWindow(url, "GCG", cardName, 1200, 800, true);
 }
+
 async function searchCard () {
   loading.value = true;
+  if (search.value === "") {
+    setTimeout(() => {
+      doSearch.value = false;
+      loading.value = false;
+    }, 1000);
+    return;
+  }
   doSearch.value = true;
   const res: TGApp.App.GCG.WikiBriefInfo[] = [];
-  allCards.value.map((item) => (item.name.includes(search.value) ? res.push(item) : null));
+  await Promise.allSettled(allCards.value.map((item) => (item.name.includes(search.value) ? res.push(item) : null)));
   res.sort((a, b) => a.name.localeCompare(b.name));
+  console.log(res);
   loading.value = false;
   if (res.length === 0) {
     snackbar.value = true;
@@ -151,7 +173,7 @@ async function searchCard () {
 </script>
 <style lang="css" scoped>
 .cards-tab {
-  font-family: Genshin,serif;
+  font-family: Genshin, serif;
   margin-bottom: 20px;
   color: var(--content-text-3);
 }