fix(home): 加载合到首页了，如果显示派蒙吃惊说明 ip 被封了（

src/components/t-calendar.vue

@@ -18,10 +18,7 @@
 					{{ text.text }}
 				</v-btn>
 			</v-list-item-title>
-			<div v-if="loading">
-				<t-loading :title="loadingTitle" :empty="loadingEmpty" position="relative" />
-			</div>
-			<div v-else class="calendar-grid">
+			<div v-if="!loading" class="calendar-grid">
 				<v-card title="天赋培养" class="calendar-single">
 					<v-card-text class="calendar-icons">
 						<v-img
@@ -50,7 +47,6 @@
 // vue
 import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
-import TLoading from "./t-loading.vue";
 // plugins
 import MysOper from "../plugins/Mys";
 // interface
@@ -59,8 +55,6 @@ import { OBC_CONTENT_API } from "../plugins/Mys/interface/utils";
 
 // loading
 const loading = ref(true as boolean);
-const loadingTitle = ref("正在加载材料日历");
-const loadingEmpty = ref(false as boolean);
 
 // data
 const characterCards = ref([] as CalendarCard[]);
@@ -104,16 +98,18 @@ const showCharacters = ref([] as CalendarCard[]);
 const showWeapons = ref([] as CalendarCard[]);
 const router = useRouter();
 
+// expose
+defineExpose({
+	name: "素材日历",
+	loading,
+});
+
 onMounted(async () => {
-	loadingTitle.value = "正在获取材料日历数据";
 	const calendarData = await MysOper.Calendar.get();
 	if (!calendarData) {
-		loadingEmpty.value = true;
-		loadingTitle.value = "暂无材料日历";
+		await console.error("获取材料日历失败");
 		return;
 	}
-	loadingEmpty.value = false;
-	loadingTitle.value = "正在渲染材料日历";
 	const calendarCards = MysOper.Calendar.card(calendarData);
 	const week = new Date().getDay();
 	btnNow.value = week;

src/components/t-pool.vue

@@ -5,10 +5,7 @@
 				<img src="../assets/icons/icon-wish.svg" alt="wish" class="pool-wish-icon" />
 				限时祈愿</v-list-item-title
 			>
-			<div v-if="loading">
-				<t-loading :title="loadingTitle" :empty="loadingEmpty" position="relative" />
-			</div>
-			<div v-else class="pool-grid">
+			<div v-if="!loading" class="pool-grid">
 				<v-card
 					v-for="pool in poolCards"
 					style="background: #faf7e8; color: #546d8b; border-radius: 10px"
@@ -66,50 +63,43 @@ import MysOper from "../plugins/Mys";
 // interface
 import { GachaCard } from "../plugins/Mys/interface/gacha";
 import { Map } from "../interface/Base";
-import TLoading from "./t-loading.vue";
 
 // vue
 const router = useRouter();
 
 // loading
 const loading = ref(true as boolean);
-const loadingTitle = ref("正在加载祈愿数据");
-const loadingEmpty = ref(false as boolean);
 
 // data
 const poolCards = ref([] as GachaCard[]);
 const poolTimeGet = ref({} as Map<string>);
 const poolTimePass = ref({} as Map<number>);
 
+// expose
+defineExpose({
+	name: "限时祈愿",
+	loading,
+});
+
 onMounted(async () => {
-	try {
-		loadingTitle.value = "正在获取限时祈愿数据";
-		const gachaData = await MysOper.Gacha.get();
-		if (!gachaData) {
-			loadingEmpty.value = true;
-			return;
-		}
-		loadingEmpty.value = false;
-		loadingTitle.value = "正在渲染限时祈愿";
-		poolCards.value = await MysOper.Gacha.card(gachaData);
+	const gachaData = await MysOper.Gacha.get();
+	if (!gachaData) {
+		await console.error("获取限时祈愿数据失败");
+		return;
+	}
+	poolCards.value = await MysOper.Gacha.card(gachaData);
+	poolCards.value.map(pool => {
+		poolTimeGet.value[pool.post_id] = getLastPoolTime(pool.time.end_stamp - Date.now());
+		poolTimePass.value[pool.post_id] = pool.time.end_stamp - Date.now();
+	});
+	await setInterval(() => {
 		poolCards.value.map(pool => {
 			poolTimeGet.value[pool.post_id] = getLastPoolTime(pool.time.end_stamp - Date.now());
-			poolTimePass.value[pool.post_id] = pool.time.end_stamp - Date.now();
+			poolTimePass.value[pool.post_id] =
+				((pool.time.end_stamp - Date.now()) / (pool.time.end_stamp - pool.time.start_stamp)) * 100;
 		});
-		await setInterval(() => {
-			poolCards.value.map(pool => {
-				poolTimeGet.value[pool.post_id] = getLastPoolTime(pool.time.end_stamp - Date.now());
-				poolTimePass.value[pool.post_id] =
-					((pool.time.end_stamp - Date.now()) / (pool.time.end_stamp - pool.time.start_stamp)) *
-					100;
-			});
-		}, 1000);
-	} catch (error) {
-		console.error(error);
-		return;
-	} finally {
-		loading.value = false;
-	}
+	}, 1000);
+	loading.value = false;
 });
 
 function toOuter(url: string, title: string) {

src/components/t-position.vue

@@ -5,10 +5,7 @@
 				<img src="../assets/icons/board.svg" alt="act" class="position-act-icon" />
 				近期活动
 			</v-list-item-title>
-			<div v-if="loading">
-				<t-loading :title="loadingTitle" :empty="loadingEmpty" position="relative" />
-			</div>
-			<div v-else class="position-grid">
+			<div v-if="!loading" class="position-grid">
 				<v-card
 					v-for="card in positionCards"
 					style="background: #faf7e8; color: #546d8b; border-radius: 10px"
@@ -55,7 +52,6 @@
 // vue
 import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
-import TLoading from "./t-loading.vue";
 // utils
 import { createTGWindow } from "../utils/TGWindow";
 // plugins
@@ -66,8 +62,6 @@ import { Map } from "../interface/Base";
 
 // loading
 const loading = ref(true as boolean);
-const loadingTitle = ref("正在加载近期活动");
-const loadingEmpty = ref(false as boolean);
 
 // 数据
 const positionCards = ref([] as PositionCard[]);
@@ -75,38 +69,34 @@ const positionTimeGet = ref({} as Map<string>);
 const positionTimeEnd = ref({} as Map<number>);
 const router = useRouter();
 
+// expose
+defineExpose({
+	name: "近期活动",
+	loading,
+});
+
 onMounted(async () => {
-	try {
-		loadingTitle.value = "正在获取近期活动数据";
-		const positionData = await MysOper.Position.get();
-		if (!positionData) {
-			loadingEmpty.value = true;
-			loadingTitle.value = "暂无近期活动";
-			return;
-		}
-		loadingEmpty.value = false;
-		loadingTitle.value = "正在渲染近期活动";
-		positionCards.value = MysOper.Position.card(positionData);
-		positionCards.value.forEach(card => {
-			positionTimeGet.value[card.post_id] = getLastPositionTime(card.time.end_stamp - Date.now());
-			positionTimeEnd.value[card.post_id] = card.time.end_stamp;
-		});
-		await setInterval(() => {
-			positionCards.value.forEach(card => {
-				const time = card.time.end_stamp - Date.now();
-				if (time <= 0) {
-					positionTimeGet.value[card.post_id] = "已结束";
-					return;
-				}
-				positionTimeGet.value[card.post_id] = getLastPositionTime(time);
-			});
-		}, 1000);
-	} catch (error) {
-		console.error(error);
+	const positionData = await MysOper.Position.get();
+	if (!positionData) {
+		console.error("获取近期活动失败");
 		return;
-	} finally {
-		loading.value = false;
 	}
+	positionCards.value = MysOper.Position.card(positionData);
+	positionCards.value.forEach(card => {
+		positionTimeGet.value[card.post_id] = getLastPositionTime(card.time.end_stamp - Date.now());
+		positionTimeEnd.value[card.post_id] = card.time.end_stamp;
+	});
+	await setInterval(() => {
+		positionCards.value.forEach(card => {
+			const time = card.time.end_stamp - Date.now();
+			if (time <= 0) {
+				positionTimeGet.value[card.post_id] = "已结束";
+				return;
+			}
+			positionTimeGet.value[card.post_id] = getLastPositionTime(time);
+		});
+	}, 1000);
+	loading.value = false;
 });
 
 function getLastPositionTime(time: number) {

src/pages/Home.vue

@@ -1,35 +1,72 @@
 <template>
-	<component v-for="item in components" :is="item" :key="item" />
+	<t-loading v-if="loading" :title="loadingTitle" :subtitle="loadingSubtitle" />
+	<component
+		v-show="!loading"
+		v-for="item in components"
+		:is="item"
+		:key="item"
+		:ref="setItemRef"
+	/>
 </template>
 
 <script lang="ts" setup>
 // vue
-import { shallowRef, onMounted } from "vue";
+import { ref, markRaw, onMounted, onUnmounted } from "vue";
+import TLoading from "../components/t-loading.vue";
 import TPool from "../components/t-pool.vue";
 import TPosition from "../components/t-position.vue";
 import TCalendar from "../components/t-calendar.vue";
 // store
 import useHomeStore from "../store/modules/home";
 
+// store
 const homeStore = useHomeStore();
-const showItems = homeStore.getShowValue();
-const components = shallowRef([] as any[]);
 
-onMounted(() => {
-	showItems.map(item => {
-		switch (item) {
-			case "限时祈愿":
-				components.value.push(TPool);
-				break;
-			case "近期活动":
-				components.value.push(TPosition);
-				break;
-			case "素材日历":
-				components.value.push(TCalendar);
-				break;
-			default:
-				break;
+// loading
+const loading = ref(true as boolean);
+const loadingTitle = ref("正在加载首页");
+const loadingSubtitle = ref("");
+
+// data
+const components = ref([] as any[]);
+let itemRefs = ref([] as any[]);
+
+!onMounted(() => {
+	loadingTitle.value = "正在加载首页";
+	const showItems = homeStore.getShowValue();
+	Promise.allSettled(
+		showItems.map(item => {
+			switch (item) {
+				case "限时祈愿":
+					return components.value.push(markRaw(TPool));
+				case "近期活动":
+					return components.value.push(markRaw(TPosition));
+				case "素材日历":
+					return components.value.push(markRaw(TCalendar));
+				default:
+					break;
+			}
+		})
+	);
+	setInterval(() => {
+		if (!loading.value) clearInterval(this);
+		const loadingMap = itemRefs.value.map(item => {
+			if (item.loading) {
+				return item.name;
+			}
+		});
+		loadingSubtitle.value = "正在加载 " + loadingMap.filter(item => item)?.join("、");
+		if (loadingMap.every(item => !item)) {
+			loading.value = false;
 		}
-	});
+	}, 100);
+});
+function setItemRef(item: any) {
+	if (itemRefs.value.includes(item)) return;
+	itemRefs.value.push(item);
+}
+
+onUnmounted(() => {
+	itemRefs.value = [];
 });
 </script>

src/plugins/Mys/utils/gacha.ts

@@ -2,16 +2,15 @@
  * @file plugins Mys utils gacha.ts
  * @description Mys 插件抽卡工具
  * @author BTMuli<bt-muli@outlook.com>
- * @since Alpha v0.1.1
+ * @since Alpha v0.1.2
  */
 
 import { getPostData } from "../request/post";
 import { GachaCard, GachaData } from "../interface/gacha";
-import { PostData } from "../interface/post";
 
 /**
  * @description 根据卡池信息转为渲染用的卡池信息
- * @since Alpha v0.1.1
+ * @since Alpha v0.1.2
  * @param {GachaData[]} gachaData 卡池信息
  * @return {Promise<GachaCard[]>}
  */
@@ -23,11 +22,17 @@ export async function getGachaCard(gachaData: GachaData[]): Promise<GachaCard[]>
 			if (post_id === undefined) {
 				throw new Error("无法获取帖子 ID");
 			}
-			const post: PostData = await getPostData(post_id);
+			let cover = "/source/UI/empty.webp";
+			try {
+				const post = await getPostData(post_id);
+				cover = post.cover?.url || post.post.images[0];
+			} catch (error) {
+				await console.error(error);
+			}
 			return gachaCard.push({
 				title: data.title,
 				subtitle: data.content_before_act,
-				cover: post.cover?.url || post.post.images[0],
+				cover: cover,
 				post_id: post_id,
 				characters: data.pool.map(character => ({
 					icon: character.icon,

src/store/modules/home.ts

@@ -2,7 +2,7 @@
  * @file store modules home.ts
  * @description Home store module
  * @author BTMuli<bt-muli@outlook.com>
- * @since Alpha v0.1.1
+ * @since Alpha v0.1.2
  */
 
 import { defineStore } from "pinia";
@@ -43,7 +43,12 @@ const useHomeStore = defineStore({
 			};
 		},
 		getShowItem() {
-			return ["素材日历", "限时祈愿", "近期活动"];
+			const defaultList = ["素材日历", "限时祈愿", "近期活动"];
+			defaultList.sort((a, b) => {
+				return this.getItemOrder(a) - this.getItemOrder(b);
+			});
+			console.info("getShowItem", defaultList);
+			return defaultList;
 		},
 		getShowValue() {
 			let showValue = [];
@@ -68,29 +73,47 @@ const useHomeStore = defineStore({
 			}
 		},
 		setShowValue(value: string[]) {
+			let order = 1;
 			// 遍历 value
 			value.forEach(item => {
 				if (!this.getShowItem().includes(item)) {
 					throw new Error("传入的值不在可选范围内");
 				}
-				// 获取 item 在 value 中的索引
-				const index = value.indexOf(item);
 				switch (item) {
 					case "素材日历":
-						this.calendar.order = index;
+						this.calendar.order = order;
 						this.calendar.show = true;
+						order++;
 						break;
 					case "限时祈愿":
-						this.pool.order = index;
+						this.pool.order = order;
 						this.pool.show = true;
+						order++;
 						break;
 					case "近期活动":
-						this.position.order = index;
+						this.position.order = order;
 						this.position.show = true;
+						order++;
 						break;
 					default:
 						break;
 				}
+				// 没有显示的 item
+				if (!value.includes("素材日历")) {
+					this.calendar.show = false;
+					this.calendar.order = order;
+					order++;
+				}
+				if (!value.includes("限时祈愿")) {
+					this.pool.show = false;
+					this.pool.order = order;
+					order++;
+				}
+				if (!value.includes("近期活动")) {
+					this.position.show = false;
+					this.position.order = order;
+					order++;
+				}
 			});
 		},
 	},