From f7b2a6cbb7b1fc51257f27f072aa33fff8b9f0d6 Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Wed, 22 Mar 2023 15:48:21 +0800
Subject: [PATCH] =?UTF-8?q?fix(GCG):=20=E6=B7=BB=E5=8A=A0=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=EF=BC=8C=E6=A0=B7=E5=BC=8F=E7=BE=8E=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/GCG.vue | 57 +++++++++++++++++++++++++++++++++++------------
 1 file changed, 43 insertions(+), 14 deletions(-)

diff --git a/src/pages/GCG.vue b/src/pages/GCG.vue
index aeddf905..d9a5e909 100644
--- a/src/pages/GCG.vue
+++ b/src/pages/GCG.vue
@@ -3,19 +3,33 @@
 	<div v-if="loading" class="loading-bar">
 		<v-progress-circular indeterminate color="primary" />
 	</div>
-	<div v-else class="cards-grid">
-		<v-card v-for="item in CardsInfo" :key="item.id" width="280" height="480">
-			<!-- 外部卡牌边框 -->
-			<v-img src="/source/GCG/base/bg-special.webp" class="GCG-cover"></v-img>
-			<v-img :src="item.icon" class="GCG-cover" style="z-index: -1"></v-img>
-			<!-- todo 样式优化 -->
-			<v-card-actions class="GCG-content">
-				<v-card-title>{{ item.name }}</v-card-title>
-				<v-btn @click="toOuter(item)" prepend-icon="mdi-arrow-right-circle" class="ms-2 card-btn"
-					>查看</v-btn
-				>
-			</v-card-actions>
-		</v-card>
+	<div v-else>
+		<v-app-bar color="white" class="global-font">
+			<v-toolbar-title>卡牌列表</v-toolbar-title>
+			<v-spacer></v-spacer>
+			<v-text-field
+				v-model="search"
+				append-icon="mdi-magnify"
+				label="搜索"
+				single-line
+				hide-details
+				@click:append="searchCard"
+			></v-text-field>
+		</v-app-bar>
+		<div class="cards-grid">
+			<v-card v-for="item in CardsInfo" :key="item.id" width="280" height="480">
+				<!-- 外部卡牌边框 -->
+				<v-img src="/source/GCG/base/bg-normal.webp" class="GCG-cover"></v-img>
+				<v-img :src="item.icon" class="GCG-cover" style="z-index: -1"></v-img>
+				<!-- todo 样式优化 -->
+				<v-card-actions class="GCG-content">
+					<span>{{ item.name }}</span>
+					<v-btn @click="toOuter(item)" prepend-icon="mdi-arrow-right-circle" class="ms-2 card-btn"
+						>查看</v-btn
+					>
+				</v-card-actions>
+			</v-card>
+		</div>
 	</div>
 </template>
 <script lang="ts" setup>
@@ -24,9 +38,10 @@ import { createTGWindow } from "../utils/TGWindow";
 import { ReadAllTGData } from "../utils/TGIndex";
 import { BaseCard } from "../interface/GCG";
 import { MysContent } from "../interface/MysPost";
+import { dialog } from "@tauri-apps/api";
 
 const loading = ref(true);
-
+const search = ref("");
 const CardsInfo = ref([] as BaseCard[]);
 
 onMounted(async () => {
@@ -41,6 +56,19 @@ function toOuter(card: BaseCard) {
 	const url = MysContent.replace("content_id", card.id.toString());
 	createTGWindow(url, "GCG", card.name, 1600, 900, true);
 }
+async function searchCard() {
+	loading.value = true;
+	const res: BaseCard[] = [];
+	const allCardsInfo = await ReadAllTGData("GCG");
+	allCardsInfo.map(item => (item.name.includes(search.value) ? res.push(item) : null));
+	loading.value = false;
+	if (res.length == 0) {
+		await dialog.message("未找到相关卡牌");
+		CardsInfo.value = allCardsInfo;
+	} else {
+		CardsInfo.value = res;
+	}
+}
 </script>
 <style lang="css">
 .cards-grid {
@@ -61,6 +89,7 @@ function toOuter(card: BaseCard) {
 	bottom: 0;
 	background: rgba(0, 0, 0, 0.5);
 	color: #f4d8a8;
+	font-size: 20px;
 	width: 100%;
 	border-radius: 0 0 10px 10px;
 }