Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-14 09:38:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(GCG): 添加搜索，样式美化

Browse Source
This commit is contained in:
BTMuli
2023-03-22 15:48:21 +08:00
parent 8c0f555674
commit f7b2a6cbb7
1 changed files with 43 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/pages/GCG.vue
View File

@@ -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;
}