From a1b85b3526223671a70050cfc2bdc03c79643b67 Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Fri, 26 May 2023 13:57:46 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20=E4=BF=AE=E5=A4=8D=E5=8D=A1?=
 =?UTF-8?q?=E7=89=8C=E6=9F=A5=E6=89=BE=E7=BB=93=E6=9E=9C=E6=B8=B2=E6=9F=93?=
 =?UTF-8?q?=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/WIKI/GCG.vue | 220 ++++++++++++++++++++++-------------------
 1 file changed, 121 insertions(+), 99 deletions(-)

diff --git a/src/pages/WIKI/GCG.vue b/src/pages/WIKI/GCG.vue
index 0e6cacac..4da859e7 100644
--- a/src/pages/WIKI/GCG.vue
+++ b/src/pages/WIKI/GCG.vue
@@ -1,104 +1,112 @@
 <template>
-  <div v-if="loading">
-    <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">
-          角色牌
-        </v-tab>
-        <v-tab value="action">
-          行动牌
-        </v-tab>
-        <v-tab value="monster">
-          魔物牌
-        </v-tab>
-      </div>
-      <v-spacer />
-      <v-text-field
-        v-model="search"
-        append-icon="mdi-magnify"
-        label="搜索"
-        single-line
-        hide-details
-        @click:append="searchCard"
-        @keyup.enter="searchCard"
-      />
-    </v-tabs>
-    <div v-if="!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)">
-              <div class="card-border">
-                <img src="/WIKI/GCG/bg/normal.webp" alt="border">
-              </div>
-              <div class="card-cover">
-                <img :src="item.icon" alt="cover">
-              </div>
-              <div class="card-content">
-                <span>{{ item.name }}</span>
-              </div>
-            </v-card>
-          </div>
-        </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)">
-              <div class="card-border">
-                <img src="/WIKI/GCG/bg/normal.webp" alt="border">
-              </div>
-              <div class="card-cover">
-                <img :src="item.icon" alt="cover">
-              </div>
-              <div class="card-content">
-                <span>{{ item.name }}</span>
-              </div>
-            </v-card>
-          </div>
-        </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)">
-              <div class="card-border">
-                <img src="/WIKI/GCG/bg/normal.webp" alt="border">
-              </div>
-              <div class="card-cover">
-                <img :src="item.icon" alt="cover">
-              </div>
-              <div class="card-content">
-                <span>{{ item.name }}</span>
-              </div>
-            </v-card>
-          </div>
-        </v-window-item>
-      </v-window>
+  <TOLoading v-model="loading" title="正在加载卡牌列表" />
+  <v-tabs v-model="tab" align-tabs="start" class="cards-tab">
+    <div v-show="!doSearch">
+      <v-tab value="character">
+        角色牌
+      </v-tab>
+      <v-tab value="action">
+        行动牌
+      </v-tab>
+      <v-tab value="monster">
+        魔物牌
+      </v-tab>
     </div>
-    <div v-else>
-      <div class="cards-grid">
-        <div 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">
-          </div>
-          <div class="card-cover">
-            <img :src="item.icon" alt="cover">
-          </div>
-          <div class="card-content">
-            <span>{{ item.name }}</span>
-          </div>
+    <v-spacer />
+    <v-text-field
+      v-model="search"
+      append-icon="mdi-magnify"
+      label="搜索"
+      single-line
+      hide-details
+      @click:append="searchCard"
+      @keyup.enter="searchCard"
+    />
+  </v-tabs>
+  <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)"
+          >
+            <div class="card-border">
+              <img src="/WIKI/GCG/bg/normal.webp" alt="border">
+            </div>
+            <div class="card-cover">
+              <img :src="item.icon" alt="cover">
+            </div>
+            <div class="card-content">
+              <span>{{ item.name }}</span>
+            </div>
+          </v-card>
         </div>
-      </div>
-    </div>
-    <v-snackbar v-model="snackbar" timeout="1500" color="error">
-      未找到相关卡牌
-    </v-snackbar>
+      </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)"
+          >
+            <div class="card-border">
+              <img src="/WIKI/GCG/bg/normal.webp" alt="border">
+            </div>
+            <div class="card-cover">
+              <img :src="item.icon" alt="cover">
+            </div>
+            <div class="card-content">
+              <span>{{ item.name }}</span>
+            </div>
+          </v-card>
+        </div>
+      </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)"
+          >
+            <div class="card-border">
+              <img src="/WIKI/GCG/bg/normal.webp" alt="border">
+            </div>
+            <div class="card-cover">
+              <img :src="item.icon" alt="cover">
+            </div>
+            <div class="card-content">
+              <span>{{ item.name }}</span>
+            </div>
+          </v-card>
+        </div>
+      </v-window-item>
+    </v-window>
   </div>
+  <div v-show="doSearch">
+    <div class="cards-grid">
+      <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/special.webp" alt="border">
+        </div>
+        <div class="card-cover">
+          <img :src="item.icon" alt="cover">
+        </div>
+        <div class="card-content">
+          <span>{{ item.name }}</span>
+        </div>
+      </v-card>
+    </div>
+  </div>
+  <v-snackbar v-model="snackbar" timeout="1500" color="error">
+    未找到相关卡牌
+  </v-snackbar>
 </template>
 <script lang="ts" setup>
 // vue
-import { ref, onMounted, computed } from "vue";
-import TLoading from "../../components/main/t-loading.vue";
+import { computed, onMounted, ref } from "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 === "角色牌");
-  CardsInfoA.value = allCards.value.filter((item) => item.type === "行动牌");
-  CardsInfoM.value = allCards.value.filter((item) => item.type === "魔物牌");
+  await Promise.allSettled(
+    allCards.value.map(async (item) => {
+      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);
 }