♻️ 首页组件加载逻辑重构

src/pages/common/PageHome.vue

@@ -17,8 +17,8 @@
       <div class="home-select">
         <v-select
           variant="outlined"
-          v-model="showHome"
-          :items="homeStore.getShowItems()"
+          v-model="showItems"
+          :items="showItemsAll"
           :hide-details="true"
           :multiple="true"
           :chips="true"
@@ -32,7 +32,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, shallowRef, toRaw } from "vue";
+import { type Component, computed, onMounted, ref, shallowRef, watch } from "vue";
 
 import TGameNav from "../../components/app/t-gamenav.vue";
 import showLoading from "../../components/func/loading.js";
@@ -41,33 +41,55 @@ import PhCompCalendar from "../../components/pageHome/ph-comp-calendar.vue";
 import PhCompPool from "../../components/pageHome/ph-comp-pool.vue";
 import PhCompPosition from "../../components/pageHome/ph-comp-position.vue";
 import { useAppStore } from "../../store/modules/app.js";
-import { useHomeStore } from "../../store/modules/home.js";
+import { ShowItemEnum, useHomeStore } from "../../store/modules/home.js";
 import TGLogger from "../../utils/TGLogger.js";
 import TGConstant from "../../web/constant/TGConstant.js";
 
-// store
+type SFComp = Component & {
+  __file?: string;
+  __hmrId?: string;
+  __name?: string;
+  __scopeId?: string;
+};
+
 const appStore = useAppStore();
 const homeStore = useHomeStore();
 
-// data
-const endNum = ref<number>(0);
-const components = shallowRef<any[]>([]);
-const showHome = ref<string[]>(homeStore.getShowValue());
-const loadComp = ref<string[]>(toRaw(showHome.value));
+const showItemsAll: Array<ShowItemEnum> = [
+  ShowItemEnum.calendar,
+  ShowItemEnum.pool,
+  ShowItemEnum.position,
+];
+const showItems = computed<ShowItemEnum[]>({
+  get: () => homeStore.getShowItems(),
+  set: (v: ShowItemEnum[]) => homeStore.setShowItems(v),
+});
+const loadItems = shallowRef<ShowItemEnum[]>([]);
+const components = shallowRef<SFComp[]>([]);
 
 const gameSelectList = TGConstant.BBS.CHANNELS;
 const curGid = ref<string>(gameSelectList[0].gid);
 
 onMounted(async () => {
   showLoading.start("正在加载首页...");
-  // @ts-expect-error-next-line
+  // @ts-expect-error-next-line The import.meta meta-property is not allowed in files which will build into CommonJS output.
   const isProdEnv = import.meta.env.MODE === "production";
-  // 获取当前环境
-  if (isProdEnv && appStore.devMode) {
-    appStore.devMode = false;
-  }
-  const temp = [];
-  for (const item of showHome.value) {
+  if (isProdEnv && appStore.devMode) appStore.devMode = false;
+  await loadComp();
+});
+
+watch(
+  () => components.value,
+  (cur, old) => {
+    const newComp = cur.filter((i) => !old.includes(i));
+    if (newComp.length === 0) showLoading.end();
+  },
+);
+
+async function loadComp(): Promise<void> {
+  showLoading.start("正在加载首页...");
+  const temp: SFComp[] = [];
+  for (const item of showItems.value) {
     switch (item) {
       case "限时祈愿":
         temp.push(PhCompPool);
@@ -78,54 +100,46 @@ onMounted(async () => {
       case "素材日历":
         temp.push(PhCompCalendar);
         break;
-      default:
-        break;
     }
   }
-  const items = showHome.value.join("、");
-  showLoading.update("正在加载首页...", `正在加载：${items}`);
+  showLoading.update("正在加载首页...", `正在加载：${showItems.value.join("、")}`);
   components.value = temp;
-  await TGLogger.Info(`[Home][onMounted] 打开首页，当前显示：${items}`);
-});
+  await TGLogger.Info(`[Home][loadComp] 打开首页，当前显示：${showItems.value.join("、")}`);
+}
 
 async function submitHome(): Promise<void> {
-  const show = showHome.value;
-  if (show.length < 1) {
+  if (showItems.value.length === 0) {
     showSnackbar.warn("请至少选择一个!");
     return;
   }
-  homeStore.setShowValue(show);
   showSnackbar.success("设置成功!");
-  await TGLogger.Info("[Home][submitHome] 首页设置成功，当前显示：" + show.join("、"));
-  setTimeout(() => window.location.reload(), 1000);
+  await TGLogger.Info("[Home][submitHome] 首页设置成功，当前显示：" + showItems.value.join("、"));
+  loadItems.value = showItems.value.filter((i) => loadItems.value.includes(i));
+  await loadComp();
 }
 
-function getName(name: string): string {
+function getName(name: string): ShowItemEnum | undefined {
   switch (name) {
     case "ph-comp-pool":
-      return "限时祈愿";
+      return ShowItemEnum.pool;
     case "ph-comp-position":
-      return "近期活动";
+      return ShowItemEnum.position;
     case "ph-comp-calendar":
-      return "素材日历";
+      return ShowItemEnum.calendar;
     default:
-      return "";
+      return undefined;
   }
 }
 
-// 组件加载完成
-async function loadEnd(item: any): Promise<void> {
-  await TGLogger.Info(`[Home][loadEnd] ${item.__name} 加载完成`);
-  loadComp.value = loadComp.value.filter((v) => v !== getName(item.__name));
-  endNum.value++;
-  if (endNum.value === components.value.length) {
-    showLoading.end();
-    return;
-  }
-  showLoading.update("正在加载首页...", `正在加载：${loadComp.value.join("、")}`);
+async function loadEnd(item: SFComp): Promise<void> {
+  const compName = getName(item.__name ?? "");
+  if (!compName) return;
+  await TGLogger.Info(`[Home][loadEnd] ${compName} 加载完成`);
+  showLoading.update("正在加载首页...", `${compName} 加载完成`);
+  if (!loadItems.value.includes(compName)) loadItems.value.push(compName);
+  else showSnackbar.warn(`${compName} 已加载`);
+  if (loadItems.value.length === components.value.length) showLoading.end();
 }
-
-onUnmounted(() => (components.value = []));
 </script>
 <style lang="css" scoped>
 .home-container {

src/store/modules/home.ts

@@ -7,119 +7,45 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
 
-export const useHomeStore = defineStore(
-  "home",
-  () => {
-    const calendarShow = ref({
-      show: true,
-      order: 3,
-    });
-    const poolShow = ref({
-      show: true,
-      order: 1,
-    });
-    const positionShow = ref({
-      show: true,
-      order: 2,
-    });
-    const homeShow = ref({
-      calendarShow,
-      poolShow,
-      positionShow,
-    });
-    const poolCover = ref({} satisfies Record<number, string>);
+export const enum ShowItemEnum {
+  calendar = "素材日历",
+  pool = "限时祈愿",
+  position = "近期活动",
+}
 
-    function init(): void {
-      calendarShow.value = {
-        show: true,
-        order: 3,
-      };
-      poolShow.value = {
-        show: true,
-        order: 1,
-      };
-      positionShow.value = {
-        show: true,
-        order: 2,
-      };
-      poolCover.value = {};
+export type ShowItem = { show: boolean; order: number; label: ShowItemEnum };
+
+export const useHomeStore = defineStore("home", () => {
+  const homeShow = ref<Array<ShowItem>>([
+    { show: true, order: 1, label: ShowItemEnum.pool },
+    { show: true, order: 2, label: ShowItemEnum.position },
+    { show: true, order: 3, label: ShowItemEnum.calendar },
+  ]);
+  const poolCover = ref<Record<number, string>>();
+
+  function getShowItems(): Array<ShowItemEnum> {
+    const homeShowLocal = localStorage.getItem("homeShow");
+    if (homeShowLocal === null || !Array.isArray(JSON.parse(homeShowLocal))) {
+      localStorage.setItem("homeShow", JSON.stringify(homeShow.value));
     }
+    homeShow.value = JSON.parse(localStorage.getItem("homeShow")!);
+    return homeShow.value
+      .filter((item) => item.show)
+      .sort((a, b) => a.order - b.order)
+      .map((item) => item.label);
+  }
 
-    function getShowItems(): string[] {
-      const defaultList = ["素材日历", "限时祈愿", "近期活动"];
-      defaultList.sort((a, b) => {
-        return getItemOrder(a) - getItemOrder(b);
-      });
-      return defaultList;
+  function setShowItems(items: Array<ShowItemEnum>): void {
+    let order = 1;
+    for (const item of items) {
+      const findIdx = homeShow.value.findIndex((i) => i.label === item);
+      if (findIdx === -1) continue;
+      homeShow.value[findIdx].show = true;
+      homeShow.value[findIdx].order = order++;
     }
+    for (const item of homeShow.value) if (!items.includes(item.label)) item.show = false;
+    localStorage.setItem("homeShow", JSON.stringify(homeShow.value));
+  }
 
-    function getShowValue(): string[] {
-      const showValue = [];
-      if (calendarShow.value.show) showValue.push("素材日历");
-      if (poolShow.value.show) showValue.push("限时祈愿");
-      if (positionShow.value.show) showValue.push("近期活动");
-      showValue.sort((a, b) => {
-        return getItemOrder(a) - getItemOrder(b);
-      });
-      return showValue;
-    }
-
-    function getItemOrder(item: string): number {
-      if (item === "素材日历") return calendarShow.value.order;
-      if (item === "限时祈愿") return poolShow.value.order;
-      if (item === "近期活动") return positionShow.value.order;
-      return 4;
-    }
-
-    function setShowValue(value: string[]): void {
-      let order = 1;
-      // 遍历 value
-      value.forEach((item) => {
-        if (!getShowItems().includes(item)) {
-          throw new Error("传入的值不在可选范围内");
-        }
-        if (item === "素材日历") {
-          calendarShow.value.order = order;
-          calendarShow.value.show = true;
-          order++;
-        }
-        if (item === "限时祈愿") {
-          poolShow.value.order = order;
-          poolShow.value.show = true;
-          order++;
-        }
-        if (item === "近期活动") {
-          positionShow.value.order = order;
-          positionShow.value.show = true;
-          order++;
-        }
-      });
-      // 遍历 getShowItems()
-      getShowItems().forEach((item) => {
-        if (!value.includes(item)) {
-          if (item === "素材日历") {
-            calendarShow.value.show = false;
-          }
-          if (item === "限时祈愿") {
-            poolShow.value.show = false;
-          }
-          if (item === "近期活动") {
-            positionShow.value.show = false;
-          }
-        }
-      });
-    }
-
-    return {
-      homeShow,
-      poolCover,
-      init,
-      getShowItems,
-      getShowValue,
-      setShowValue,
-    };
-  },
-  {
-    persist: true,
-  },
-);
+  return { poolCover, getShowItems, setShowItems };
+});