♻️ emits 替代 interval

src/components/home/t-calendar.vue

@@ -83,9 +83,6 @@ import { generateShareImg } from "../../utils/TGShare";
 import TibCalendarItem from "../itembox/tib-calendar-item.vue";
 import ToCalendar from "../overlay/to-calendar.vue";
 
-// loading
-const loading = ref<boolean>(true);
-
 // data
 const calendarData = computed<TGApp.App.Calendar.Item[]>(() => AppCalendarData);
 const weekNow = ref<number>(0);
@@ -141,11 +138,11 @@ const btnText = [
   },
 ];
 
-// expose
-defineExpose({
-  name: "素材日历",
-  loading,
-});
+interface TCalendarEmits {
+  (e: "success"): void;
+}
+
+const emits = defineEmits<TCalendarEmits>();
 
 onMounted(async () => {
   const appStore = useAppStore();
@@ -173,7 +170,7 @@ onMounted(async () => {
   calendarNow.value = getCalendar(dayNow);
   characterCards.value = calendarNow.value.filter((item) => item.itemType === "character");
   weaponCards.value = calendarNow.value.filter((item) => item.itemType === "weapon");
-  loading.value = false;
+  emits("success");
 });
 
 // 获取当前日历

src/components/home/t-pool.vue

@@ -16,7 +16,7 @@
         />
       </div>
     </div>
-    <div v-if="!loading" class="pool-grid">
+    <div class="pool-grid">
       <div v-for="pool in poolSelect" :key="pool.postId" class="pool-card">
         <div class="pool-cover" @click="createPost(pool.postId, pool.title)">
           <img :src="pool.cover" alt="cover" />
@@ -68,9 +68,6 @@ import showSnackbar from "../func/snackbar";
 // store
 const homeStore = useHomeStore();
 
-// loading
-const loading = ref<boolean>(true);
-
 const hasNew = ref<boolean>(false);
 const showNew = ref<boolean>(false);
 
@@ -81,8 +78,11 @@ const poolTimeGet = ref<Record<number, string>>({});
 const poolTimePass = ref<Record<number, number>>({});
 const timer = ref<Record<number, any>>({});
 
-// expose
-defineExpose({ name: "限时祈愿", loading });
+interface TPoolEmits {
+  (e: "success"): void;
+}
+
+const emits = defineEmits<TPoolEmits>();
 
 function poolLastInterval(postId: number): TGApp.Plugins.Mys.Gacha.RenderCard | undefined {
   const pool = poolCards.value.find((pool) => pool.postId === postId);
@@ -152,7 +152,7 @@ onMounted(async () => {
     poolSelect.value = poolCards.value;
     hasNew.value = false;
   }
-  loading.value = false;
+  emits("success");
 });
 
 // 检测新卡池

src/components/home/t-position.vue

@@ -4,7 +4,7 @@
       <img src="../../assets/icons/board.svg" alt="act" />
       <span>近期活动</span>
     </div>
-    <div v-if="!loading" class="position-grid">
+    <div class="position-grid">
       <v-card
         v-for="card in positionCards"
         :key="card.postId"
@@ -50,20 +50,17 @@ import Mys from "../../plugins/Mys";
 import { createPost } from "../../utils/TGWindow";
 import { stamp2LastTime } from "../../utils/toolFunc";
 
-// loading
-const loading = ref<boolean>(true);
-
 // data
 const positionCards = ref<TGApp.Plugins.Mys.Position.RenderCard[]>([]);
 const positionTimeGet = ref<Record<number, string>>({}); // 剩余时间/已结束/未知
 const positionTimeEnd = ref<Record<number, number>>({}); // 结束时间戳
 const positionTimer = ref<Record<number, any>>({}); // 定时器
 
-// expose
-defineExpose({
-  name: "近期活动",
-  loading,
-});
+interface TPositionEmits {
+  (e: "success"): void;
+}
+
+const emits = defineEmits<TPositionEmits>();
 
 function positionLastInterval(postId: number): void {
   const timeGet = positionTimeGet.value[postId];
@@ -98,7 +95,7 @@ onMounted(async () => {
       positionLastInterval(card.postId);
     }, 1000);
   });
-  loading.value = false;
+  emits("success");
 });
 
 onUnmounted(() => {

src/pages/common/Home.vue

@@ -12,12 +12,12 @@
       />
       <v-btn class="select-btn" @click="submitHome">确定</v-btn>
     </div>
-    <component :is="item" v-for="item in components" :key="item" :ref="setItemRef" />
+    <component :is="item" v-for="item in components" :key="item" @success="loadEnd(item)" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { markRaw, onMounted, onUnmounted, onUpdated, ref } from "vue";
+import { onMounted, onUnmounted, ref, shallowRef } from "vue";
 
 import showSnackbar from "../../components/func/snackbar";
 import TCalendar from "../../components/home/t-calendar.vue";
@@ -38,29 +38,10 @@ const loadingTitle = ref<string>("正在加载首页");
 const loadingSubtitle = ref<string>("");
 
 // data
-const components = ref<any[]>([]);
-const itemRefs = ref<any[]>([]);
+const endNum = ref<number>(0);
+const components = shallowRef<any[]>([]);
 const showHome = ref<string[]>(homeStore.getShowValue());
 
-// 定时器
-const timer = ref<any>(null);
-
-function setItemRef(item: any): void {
-  if (itemRefs.value.includes(item)) return;
-  itemRefs.value.push(item);
-}
-
-function readLoading(): void {
-  if (!loading.value) return;
-  let loadingMap = itemRefs.value.map((item) => {
-    return item.loading ? item.name : null;
-  });
-  loadingSubtitle.value = "正在加载 " + loadingMap.filter((item) => item)?.join("、");
-  if (loadingMap.every((item) => !item)) {
-    loading.value = false;
-  }
-}
-
 onMounted(async () => {
   loadingTitle.value = "正在加载首页";
   const isProdEnv = import.meta.env.MODE === "production";
@@ -68,27 +49,29 @@ onMounted(async () => {
   if (isProdEnv && appStore.devMode) {
     appStore.devMode = false;
   }
-  await Promise.allSettled(
-    showHome.value.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:
-          return null;
-      }
-    }),
-  );
-  timer.value = setInterval(readLoading, 100);
+  const temp = [];
+  for (const item of showHome.value) {
+    switch (item) {
+      case "限时祈愿":
+        temp.push(TPool);
+        break;
+      case "近期活动":
+        temp.push(TPosition);
+        break;
+      case "素材日历":
+        temp.push(TCalendar);
+        break;
+      default:
+        break;
+    }
+  }
   const items = showHome.value.join("、");
+  loadingSubtitle.value = `正在加载：${items}`;
+  components.value = temp;
   await TGLogger.Info(`[Home][onMounted] 打开首页，当前显示：${items}`);
 });
 
 async function submitHome(): Promise<void> {
-  // 获取已选
   const show = showHome.value;
   if (show.length < 1) {
     showSnackbar({
@@ -108,19 +91,17 @@ async function submitHome(): Promise<void> {
   }, 1000);
 }
 
-// 监听定时器
-onUpdated(async () => {
-  if (!loading.value && timer.value !== null) {
-    clearInterval(timer.value);
-    timer.value = null;
+// 组件加载完成
+async function loadEnd(item: any): Promise<void> {
+  await TGLogger.Info(`[Home][loadEnd] ${item.__name} 加载完成`);
+  endNum.value++;
+  if (endNum.value === components.value.length) {
+    loading.value = false;
   }
-});
+}
 
 onUnmounted(() => {
-  itemRefs.value = [];
   components.value = [];
-  clearInterval(timer.value);
-  timer.value = null;
 });
 </script>
 <style lang="css" scoped>