feat(loading): 添加加载拦截 #4

src/assets/css/utils.css

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

src/assets/index.css

@@ -0,0 +1,2 @@
+@import "css/utils.css";
+@import "fonts/index.css";

src/main.ts

@@ -8,6 +8,6 @@ import "@mdi/font/css/materialdesignicons.css";
 import "vuetify/styles";
 import { createVuetify } from "vuetify";
 // 全局样式
-import "./assets/fonts/index.css";
+import "./assets/index.css";
 
 createApp(App).use(router).use(store).use(createVuetify()).mount("#app");

src/pages/Achievements.vue

@@ -12,7 +12,10 @@
 			<v-btn @click="exportJson" prepend-icon="mdi-export" class="ms-2 top-btn"> 导出 </v-btn>
 		</template>
 	</v-app-bar>
-	<!-- todo 列表加载速度优化，主要是天地万象的数据量太大了 -->
+	<div v-if="loading" class="loading-bar">
+		<v-progress-circular indeterminate color="primary" />
+	</div>
+	<div v-else class="wrap">
 		<v-row class="wrap-view">
 			<!-- 左侧菜单 -->
 			<v-col class="left-wrap">
@@ -93,6 +96,7 @@
 				</div>
 			</v-col>
 		</v-row>
+	</div>
 </template>
 
 <script lang="ts" setup>
@@ -130,9 +134,11 @@ const selectedSeries = ref(-1);
 const selectedAchievement = ref([] as TGAchievement[]);
 const CardsInfo = ref([] as NameCard[]);
 const getCardInfo = ref({} as NameCard);
+const loading = ref(true);
 
-onMounted(() => {
+onMounted(async () => {
-	loadData();
+	await loadData();
+	loading.value = false;
 });
 
 // 加载数据，数据源：合并后的本地数据

src/pages/Home.vue

@@ -125,13 +125,6 @@ function toOuter(url: string, title: string) {
 </script>
 
 <style lang="css">
-.loading-bar {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	height: 100%;
-}
-
 .pool-cards {
 	font-family: Genshin, serif;
 	display: flex;

src/pages/News.vue

@@ -1,4 +1,8 @@
 <template>
+	<div v-if="loading" class="loading-bar">
+		<v-progress-circular indeterminate color="primary" />
+	</div>
+	<div v-else>
 		<v-tabs v-model="tab" align-tabs="start" class="global-font">
 			<v-tab value="notice" title="公告" />
 			<v-tab value="activity" title="活动" />
@@ -53,7 +57,11 @@
 			</v-window-item>
 			<v-window-item value="news">
 				<div class="cards-grid">
-				<v-card v-for="item in postData.news" class="justify-space-between flex-nowrap" width="320">
+					<v-card
+						v-for="item in postData.news"
+						class="justify-space-between flex-nowrap"
+						width="320"
+					>
 						<v-img :src="item.cover" cover style="height: 150px"></v-img>
 						<v-card-title>{{ item.title }}</v-card-title>
 						<v-card-actions>
@@ -69,6 +77,7 @@
 				</div>
 			</v-window-item>
 		</v-window>
+	</div>
 </template>
 
 <script lang="ts" setup>
@@ -92,6 +101,8 @@ const appStore = useAppStore();
 
 // 渲染模式
 const renderMode = ref(appStore.structureRender);
+// loading
+const loading = ref(true);
 
 // 接口 todo：考虑放到 interface 文件夹下?
 interface CardDataType {
@@ -126,6 +137,7 @@ onMounted(async () => {
 		news: transData(newsRaw, "news"),
 	};
 	tab.value = "notice";
+	loading.value = false;
 });
 
 function transData(rawData: ResponseNewsList, dataType: string): CardDataType[] {
@@ -205,11 +217,6 @@ async function getPost(post_id: string): Promise<ResponsePost> {
 	grid-gap: 20px;
 }
 
-.card-btn {
-	background: #455167 !important;
-	color: #faf7e8 !important;
-}
-
 /* 进行中 */
 .card-btn-0 {
 	background: #3c99aa !important;