♻️ GCG图鉴样式重构

src/components/wiki/twg-card.vue

@@ -0,0 +1,100 @@
+<template>
+  <v-card class="twg-box" @click="toWiki" :title.attr="props.data.name">
+    <img class="twg-border" src="/WIKI/GCG/bg/special.webp" alt="border" />
+    <img class="twg-cover" :src="props.data.icon" alt="cover" />
+    <div class="twg-name">
+      <span>{{ props.data.name }}</span>
+    </div>
+  </v-card>
+</template>
+<script lang="ts" setup>
+import Mys from "../../plugins/Mys";
+import { createTGWindow } from "../../utils/TGWindow";
+import showSnackbar from "../func/snackbar";
+
+interface TwgCardProps {
+  data: TGApp.App.GCG.WikiBriefInfo;
+}
+
+const props = defineProps<TwgCardProps>();
+
+function toWiki(): void {
+  if (!props.data.contentId) return;
+  if (props.data.contentId === 0) {
+    showSnackbar({
+      text: `卡牌 ${props.data.name} 暂无外部链接`,
+      color: "error",
+    });
+    return;
+  }
+  const url = Mys.Api.Obc.replace("{contentId}", props.data.contentId.toString());
+  createTGWindow(
+    url,
+    "Sub_window",
+    `Content_${props.data.contentId} ${props.data.name}`,
+    1200,
+    800,
+    true,
+  );
+}
+</script>
+<style lang="css" scoped>
+.twg-box {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  border-radius: 10px;
+  aspect-ratio: 7 / 12;
+  transition: all 0.3s;
+}
+
+.twg-cover {
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+  object-fit: cover;
+  transition: all 0.3s;
+}
+
+.twg-box:hover .twg-cover {
+  transform: scale(1.2);
+  transition: all 0.5s;
+}
+
+.twg-border {
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+}
+
+.twg-name {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0 0 10px 10px;
+  background: rgb(0 0 0 / 50%);
+  color: white;
+}
+
+.twg-name span {
+  overflow: hidden;
+  margin: 0 10px;
+  font-size: 14px;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+}
+</style>

src/pages/WIKI/GCG.vue

@@ -1,168 +1,96 @@
 <template>
   <ToLoading v-model="loading" title="正在加载卡牌列表" />
   <v-tabs v-model="tab" align-tabs="start" class="cards-tab">
-    <div v-show="!doSearch">
+    <div v-if="!doSearch">
-      <v-tab value="character"> 角色牌 </v-tab>
+      <v-tab value="character">角色牌</v-tab>
-      <v-tab value="action"> 行动牌 </v-tab>
+      <v-tab value="action">行动牌</v-tab>
-      <v-tab value="monster"> 魔物牌 </v-tab>
+      <v-tab value="monster">魔物牌</v-tab>
     </div>
-    <v-spacer />
     <v-text-field
       v-model="search"
-      append-icon="mdi-magnify"
+      class="card-search"
+      prepend-inner-icon="mdi-magnify"
       label="搜索"
       :single-line="true"
       hide-details
       @click:append="searchCard"
       @keyup.enter="searchCard"
     />
+    <v-spacer />
   </v-tabs>
-  <div v-show="!doSearch">
+  <div v-if="!doSearch">
     <v-window v-model="tab">
-      <v-window-item value="character">
+      <v-window-item v-for="(item, index) in tabValues" :key="index" :value="item">
         <div class="cards-grid">
-          <v-card
+          <TwgCard v-for="(card, index) in cardsInfo[item]" :key="index" :data="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>
   </div>
-  <div v-show="doSearch">
+  <div v-else>
     <div class="cards-grid">
-      <v-card
+      <TwgCard v-for="(item, index) in CardsInfoS" :key="index" :data="item" />
-        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>
 </template>
 <script lang="ts" setup>
-import { computed, onMounted, ref } from "vue";
+import { onBeforeMount, onMounted, ref } from "vue";
 
 import showSnackbar from "../../components/func/snackbar";
 import ToLoading from "../../components/overlay/to-loading.vue";
+import TwgCard from "../../components/wiki/twg-card.vue";
 import { AppGCGData } from "../../data";
-import Mys from "../../plugins/Mys";
-import { createTGWindow } from "../../utils/TGWindow";
 
-// loading
 const loading = ref<boolean>(true);
-const allCards = computed(() => AppGCGData);
-// search
 const doSearch = ref<boolean>(false);
 const search = ref<string>("");
-// data
+
 const tab = ref<string>("character");
-const CardsInfoC = ref<TGApp.App.GCG.WikiBriefInfo[]>([]);
+const cardsInfo = ref<{ [key: string]: TGApp.App.GCG.WikiBriefInfo[] }>({
-const CardsInfoA = ref<TGApp.App.GCG.WikiBriefInfo[]>([]);
+  character: [],
-const CardsInfoM = ref<TGApp.App.GCG.WikiBriefInfo[]>([]);
+  action: [],
+  monster: [],
+});
+const tabValues = ref<string[]>(["character", "action", "monster"]);
 const CardsInfoS = ref<TGApp.App.GCG.WikiBriefInfo[]>([]);
 
-onMounted(() => {
+onBeforeMount(() => {
-  for (const item of allCards.value) {
+  for (const item of AppGCGData) {
-    if (item.type === "角色牌") CardsInfoC.value.push(item);
+    if (item.type === "角色牌") cardsInfo.value.character.push(item);
-    if (item.type === "行动牌") CardsInfoA.value.push(item);
+    if (item.type === "行动牌") cardsInfo.value.action.push(item);
-    if (item.type === "魔物牌") CardsInfoM.value.push(item);
+    if (item.type === "魔物牌") cardsInfo.value.monster.push(item);
   }
-  loading.value = false;
 });
 
-function toOuter(cardName: string, cardId: number): void {
+onMounted(() => {
-  console.log(cardName, cardId);
+  loading.value = false;
-  // 若不存在 contentId
+});
-  if (cardId === 0) {
-    showSnackbar({
-      text: "该卡牌暂无外部链接",
-      color: "error",
-    });
-    return;
-  }
-  const url = Mys.Api.Obc.replace("{contentId}", cardId.toString());
-  createTGWindow(url, "Sub_window", `Content_${cardId} ${cardName}`, 1200, 800, true);
-}
 
 async function searchCard(): Promise<void> {
   loading.value = true;
   if (search.value === "") {
-    setTimeout(() => {
+    if (CardsInfoS.value.length === 0) {
-      doSearch.value = false;
+      showSnackbar({
+        text: "未搜索任何卡牌",
+        color: "error",
+      });
       loading.value = false;
-    }, 1000);
+      return;
+    }
+    doSearch.value = false;
+    loading.value = false;
+    CardsInfoS.value = [];
+    showSnackbar({
+      text: "已重置搜索",
+      color: "success",
+    });
     return;
   }
   doSearch.value = true;
   const res: TGApp.App.GCG.WikiBriefInfo[] = [];
   await Promise.allSettled(
-    allCards.value.map((item) => (item.name.includes(search.value) ? res.push(item) : null)),
+    AppGCGData.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) {
     showSnackbar({
@@ -171,89 +99,30 @@ async function searchCard(): Promise<void> {
     });
     doSearch.value = false;
   } else {
-    CardsInfoS.value = res;
+    CardsInfoS.value = res.sort((a, b) => a.name.localeCompare(b.name));
+    showSnackbar({
+      text: `找到 ${res.length} 张相关卡牌`,
+      color: "success",
+    });
   }
 }
 </script>
 <style lang="css" scoped>
 .cards-tab {
   margin-bottom: 20px;
-  color: var(--content-text-3);
+  color: var(--common-text-title);
-  font-family: Genshin, serif;
+  font-family: var(--font-title);
+}
+
+.card-search {
+  margin-left: 10px;
+  color: var(--box-text-1);
 }
 
 .cards-grid {
   display: grid;
   overflow: hidden;
-  padding: 10px;
-  border-radius: 0 0 10px 10px;
   grid-gap: 10px;
   grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
 }
-
-.cards-grid :hover {
-  cursor: pointer;
-}
-
-.card-cls {
-  position: relative;
-  overflow: hidden;
-  width: 140px;
-  height: 240px;
-  border-radius: 10px;
-  transition: all 0.3s;
-}
-
-.card-cover {
-  position: absolute;
-  z-index: -1;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  transition: all 0.3s;
-}
-
-.card-cls:hover .card-cover {
-  transform: scale(1.1);
-  transition: all 0.3s;
-}
-
-.card-border {
-  position: absolute;
-  top: 0;
-  left: 0;
-  overflow: hidden;
-  border-radius: 10px;
-}
-
-.card-border img {
-  width: 100%;
-  height: 100%;
-  border-radius: 10px;
-}
-
-.card-cover img {
-  width: 100%;
-  height: 100%;
-  border-radius: 10px;
-  object-fit: cover;
-}
-
-.card-content {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  overflow: hidden;
-  width: 100%;
-  height: 40px;
-  align-items: center;
-  justify-content: center;
-  border-radius: 0 0 10px 10px;
-  background: rgb(0 0 0 / 50%);
-  color: white;
-  font-family: Genshin, serif;
-  font-size: small;
-}
 </style>