feat(loading): 写了个 loading 组件

src/assets/css/utils.css

@@ -1,10 +1,3 @@
-/* 顶部加载条 */
-.loading-bar {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	height: 100%;
-}
 /* card action 内的按钮 */
 .card-btn {
 	background: #455167 !important;

src/components/t-loading.vue

@@ -0,0 +1,80 @@
+<template>
+	<div class="loading-div">
+		<div class="loading-content">
+			<div class="loading-title">
+				{{ props.title }}
+				<v-progress-circular indeterminate color="#f4d8a8" />
+			</div>
+			<div class="loading-subtitle" v-show="props.subtitle">{{ props.subtitle }}</div>
+			<div class="loading-img">
+				<img src="/source/UI/loading.webp" alt="loading" />
+			</div>
+			<div class="loading-text" v-show="props.content">{{ props.content }}</div>
+		</div>
+	</div>
+</template>
+<script lang="ts" setup>
+const props = defineProps({
+	title: {
+		type: String,
+		default: "加载中",
+	},
+	subtitle: {
+		type: String,
+	},
+	content: {
+		type: String,
+	},
+});
+</script>
+<style lang="css">
+.loading-div {
+	position: fixed;
+	display: flex;
+	top: 25%;
+	left: 25%;
+	width: 50%;
+	height: 50%;
+	background: rgba(57, 59, 64, 0.5);
+	backdrop-filter: blur(10px);
+	border-radius: 20px;
+}
+
+.loading-content {
+	width: 100%;
+	margin: 20px;
+	display: flex;
+	border: #f4d8a8 1px solid;
+	border-radius: 20px;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	font-family: Genshin, serif;
+}
+
+.loading-title {
+	font-size: 2rem;
+	font-weight: 600;
+	color: #f4d8a8;
+}
+
+.loading-subtitle {
+	font-size: 1.5rem;
+	font-weight: 500;
+	color: #38393a;
+}
+
+.loading-img {
+	width: 256px;
+	height: 256px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.loading-text {
+	font-size: 1.5rem;
+	font-weight: 500;
+	color: #38393a;
+}
+</style>

src/pages/Achievements.vue

@@ -21,8 +21,8 @@
 			<v-btn @click="exportJson" prepend-icon="mdi-export" class="ms-2 top-btn"> 导出 </v-btn>
 		</template>
 	</v-app-bar>
-	<div v-if="loading" class="loading-bar">
+	<div v-if="loading">
-		<v-progress-circular indeterminate color="primary" />
+		<t-loading title="正在加载成就" />
 	</div>
 	<div v-else class="wrap">
 		<v-row class="wrap-view">
@@ -137,6 +137,7 @@ import {
 	ReadTGDataByKey,
 	UpdateTGDataByKey,
 } from "../utils/TGIndex";
+import TLoading from "../components/t-loading.vue";
 
 // Store
 const achievementsStore = useAchievementsStore();

src/pages/GCG.vue

@@ -1,6 +1,6 @@
 <template>
-	<div v-if="loading" class="loading-bar">
+	<div v-if="loading">
-		<v-progress-circular indeterminate color="primary" />
+		<t-loading title="正在加载卡牌列表" />
 	</div>
 	<div v-else>
 		<v-app-bar color="white" class="global-font">
@@ -97,6 +97,7 @@ import { ReadAllTGData } from "../utils/TGIndex";
 import { BaseCard, ActionCard, CharacterCard, MonsterCard } from "../interface/GCG";
 import { MysContent } from "../interface/MysPost";
 import { dialog } from "@tauri-apps/api";
+import TLoading from "../components/t-loading.vue";
 
 const loading = ref(true);
 const doSearch = ref(false);

src/pages/Home.vue

@@ -1,6 +1,6 @@
 <template>
-	<div v-if="loading" class="loading-bar">
+	<div v-if="loading">
-		<v-progress-circular indeterminate color="primary" />
+		<t-loading title="正在加载卡池信息" />
 	</div>
 	<div v-else>
 		<div v-if="empty">
@@ -67,6 +67,7 @@ import {
 	MysPostType,
 } from "../interface/MysPost";
 import { parseMys } from "../utils/MysParse";
+import TLoading from "../components/t-loading.vue";
 
 interface GachaPool {
 	title: string;
@@ -88,7 +89,6 @@ interface GachaPool {
 }
 
 const appStore = useAppStore();
-const renderMode = ref(appStore.structureRender);
 const poolInfo = ref([] as GachaPool[]);
 const loading = ref(true);
 const empty = ref(false);

src/pages/News.vue

@@ -1,6 +1,6 @@
 <template>
-	<div v-if="loading" class="loading-bar">
+	<div v-if="loading">
-		<v-progress-circular indeterminate color="primary" />
+		<t-loading title="加载中..." />
 	</div>
 	<div v-else>
 		<v-tabs v-model="tab" align-tabs="start" class="global-font">
@@ -110,6 +110,7 @@ import {
 import { http, fs } from "@tauri-apps/api";
 import { createTGWindow } from "../utils/TGWindow";
 import { parseMys } from "../utils/MysParse";
+import TLoading from "../components/t-loading.vue";
 
 // Store
 const appStore = useAppStore();