♻️ 深渊数据库重构，概览显示差距

src/pages/WIKI/Abyss.vue

@@ -1,38 +1,48 @@
 <template>
-  <ToLoading v-model="loading" :title="loadingTitle" :subtitle="loadingSub" />
-  <div class="hta-box">
-    <div class="hta-top">
-      <v-tabs v-model="tab" align-tabs="start" class="hta-tab">
-        <v-tab value="use">角色使用</v-tab>
-        <v-tab value="up">角色出场</v-tab>
-        <v-tab value="team">队伍出场</v-tab>
-        <v-tab value="hold">角色持有</v-tab>
-      </v-tabs>
-      <div class="hta-title">
-        <span>胡桃数据库</span>
-        <span @click="showDialog = true">更新于 {{ getUpdated() }}</span>
+  <ToLoading v-model="loading" :title="loadT" />
+  <v-app-bar>
+    <template #prepend>
+      <div class="hta-top-prepend">
+        <img src="/source/UI/wikiAbyss.webp" alt="icon" />
+        <span>深渊统计</span>
+        <v-select
+          v-model="tab"
+          :items="abyssList"
+          item-title="label"
+          item-value="value"
+          density="compact"
+          variant="outlined"
+        />
       </div>
-    </div>
+    </template>
+    <template #append>
+      <div class="hta-top-append">
+        <span @click="show()" v-if="overview">
+          更新于 {{ timestampToDate(overview.cur.Timestamp) }}
+        </span>
+      </div>
+    </template>
+  </v-app-bar>
+  <div class="hta-box">
     <v-window v-model="tab" class="hta-tab-item">
       <v-window-item value="use">
-        <HtaTabUse v-if="avatarUse.length > 0" v-model="avatarUse" />
+        <HtaTabUse v-if="abyssData.use !== null" :data="avatarUse" />
       </v-window-item>
       <v-window-item value="up">
-        <HtaTabUp v-if="avatarUp.length > 0" v-model="avatarUp" />
+        <HtaTabUp v-if="abyssData.up !== null" :data="avatarUp" />
       </v-window-item>
       <v-window-item value="team">
-        <HtaTabTeam v-model="teamCombination" />
+        <HtaTabTeam v-if="abyssData.team !== null" :data="teamCombination" />
       </v-window-item>
       <v-window-item value="hold">
-        <HtaTabHold v-model="avatarHold" />
+        <HtaTabHold v-if="abyssData.hold !== null" :data="avatarHold" />
       </v-window-item>
     </v-window>
   </div>
   <HtaOverlayOverview v-model="showDialog" :data="overview" />
 </template>
 <script lang="ts" setup>
-// vue
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch } from "vue";
 
 import HtaOverlayOverview from "../../components/hutaoAbyss/hta-overlay-overview.vue";
 import HtaTabHold from "../../components/hutaoAbyss/hta-tab-hold.vue";
@@ -41,48 +51,152 @@ import HtaTabUp from "../../components/hutaoAbyss/hta-tab-up.vue";
 import HtaTabUse from "../../components/hutaoAbyss/hta-tab-use.vue";
 import ToLoading from "../../components/overlay/to-loading.vue";
 import Hutao from "../../plugins/Hutao/index.js";
+import { timestampToDate } from "../../utils/toolFunc.js";
+
+enum AbyssTabEnum {
+  use = "角色使用",
+  up = "角色出场",
+  team = "队伍出场",
+  hold = "角色持有",
+}
+
+type AbyssTab = keyof typeof AbyssTabEnum;
+type AbyssList = Array<{ label: AbyssTabEnum; value: AbyssTab }>;
+export type AbyssDataItem<T> = { cur: T; last: T };
+export type AbyssDataItemType<T extends AbyssTab> = AbyssDataItem<
+  T extends "use"
+    ? TGApp.Plugins.Hutao.Abyss.AvatarUse[]
+    : T extends "up"
+      ? TGApp.Plugins.Hutao.Abyss.AvatarUp[]
+      : T extends "team"
+        ? TGApp.Plugins.Hutao.Abyss.TeamCombination[]
+        : TGApp.Plugins.Hutao.Abyss.AvatarHold[]
+>;
+type AbyssData = {
+  [key in AbyssTab]: AbyssDataItemType<key> | null;
+};
+
+const abyssList: AbyssList = [
+  { label: AbyssTabEnum.use, value: "use" },
+  { label: AbyssTabEnum.up, value: "up" },
+  { label: AbyssTabEnum.team, value: "team" },
+  { label: AbyssTabEnum.hold, value: "hold" },
+];
 
-// loading
 const loading = ref<boolean>(false);
-const loadingTitle = ref<string>("");
-const loadingSub = ref<string>();
-
-// overview overlay
+const loadT = ref<string>("");
 const showDialog = ref<boolean>(false);
 
 // data
-const overview = ref<TGApp.Plugins.Hutao.Abyss.OverviewData>(
-  <TGApp.Plugins.Hutao.Abyss.OverviewData>{},
+const overview = ref<AbyssDataItem<TGApp.Plugins.Hutao.Abyss.OverviewData>>();
+const tab = ref<AbyssTab>("use");
+const abyssData = ref<AbyssData>({ use: null, up: null, team: null, hold: null });
+
+watch(
+  () => tab.value,
+  async () => await refreshData(tab.value),
 );
-const tab = ref<string>("use");
-const avatarUse = ref<TGApp.Plugins.Hutao.Abyss.AvatarUse[]>([]);
-const avatarUp = ref<TGApp.Plugins.Hutao.Abyss.AvatarUp[]>([]);
-const teamCombination = ref<TGApp.Plugins.Hutao.Abyss.TeamCombination[]>([]);
-const avatarHold = ref<TGApp.Plugins.Hutao.Abyss.AvatarHold[]>([]);
 
 onMounted(async () => {
-  loadingTitle.value = "正在获取深渊数据";
+  loadT.value = "正在获取深渊数据";
   loading.value = true;
-  loadingTitle.value = "正在获取深渊概览";
-  overview.value = await Hutao.Abyss.getOverview();
-  loadingTitle.value = "正在获取深渊角色使用";
-  avatarUse.value = await Hutao.Abyss.avatar.getUseRate();
-  loadingTitle.value = "正在获取深渊角色出场";
-  avatarUp.value = await Hutao.Abyss.avatar.getUpRate();
-  loadingTitle.value = "正在获取深渊队伍出场";
-  teamCombination.value = await Hutao.Abyss.getTeamCollect();
-  loadingTitle.value = "正在获取深渊角色持有";
-  avatarHold.value = await Hutao.Abyss.avatar.getHoldRate();
+  loadT.value = "正在获取深渊概览";
+  overview.value = {
+    cur: await Hutao.Abyss.getOverview(),
+    last: await Hutao.Abyss.getOverview(true),
+  };
+  loadT.value = "正在获取深渊数据";
+  const useData = await getData("use");
+  abyssData.value = { use: useData, up: null, team: null, hold: null };
   loading.value = false;
 });
 
-function getUpdated(): string {
-  return new Date(overview.value.Timestamp)
-    .toLocaleString("zh-CN", { hour12: false })
-    .replace(/\//g, "-");
+function show(): void {
+  if (showDialog.value) showDialog.value = false;
+  showDialog.value = true;
+}
+
+async function refreshData(type: AbyssTab): Promise<void> {
+  if (abyssData.value && abyssData.value[type] !== null) return;
+  if (loading.value) return;
+  loading.value = true;
+  loadT.value = `正在获取 ${AbyssTabEnum[type]} 数据`;
+  const data = await getData(type);
+  switch (type) {
+    case "use":
+      abyssData.value.use = <AbyssDataItemType<"use">>data;
+      break;
+    case "up":
+      abyssData.value.up = <AbyssDataItemType<"up">>data;
+      break;
+    case "team":
+      abyssData.value.team = <AbyssDataItemType<"team">>data;
+      break;
+    case "hold":
+      abyssData.value.hold = <AbyssDataItemType<"hold">>data;
+      break;
+  }
+  loading.value = false;
+}
+
+async function getData(type: AbyssTab): Promise<AbyssDataItemType<AbyssTab>> {
+  switch (type) {
+    case "use":
+      return {
+        cur: await Hutao.Abyss.avatar.getUseRate(),
+        last: await Hutao.Abyss.avatar.getUseRate(true),
+      };
+    case "up":
+      return {
+        cur: await Hutao.Abyss.avatar.getUpRate(),
+        last: await Hutao.Abyss.avatar.getUpRate(true),
+      };
+    case "team":
+      return {
+        cur: await Hutao.Abyss.getTeamCollect(),
+        last: await Hutao.Abyss.getTeamCollect(true),
+      };
+    case "hold":
+      return {
+        cur: await Hutao.Abyss.avatar.getHoldRate(),
+        last: await Hutao.Abyss.avatar.getHoldRate(true),
+      };
+  }
 }
 </script>
 <style lang="css" scoped>
+.hta-top-prepend {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+
+  img {
+    width: 32px;
+    height: 32px;
+  }
+
+  span {
+    color: var(--common-text-title);
+    font-family: var(--font-title);
+    font-size: 20px;
+  }
+
+  :last-child {
+    height: 50px;
+    margin-top: 20px;
+  }
+}
+
+.hta-top-append {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  cursor: pointer;
+  font-family: var(--font-title);
+}
+
 .hta-box {
   overflow: auto;
   width: 100%;
@@ -93,39 +207,6 @@ function getUpdated(): string {
   box-shadow: 0 0 10px var(--common-shadow-4);
 }
 
-.hta-top {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: flex-start;
-  color: var(--common-text-title);
-  column-gap: 10px;
-  font-family: var(--font-title);
-}
-
-.hta-tab {
-  height: 50px;
-  margin-bottom: 10px;
-}
-
-.hta-title {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-left: auto;
-  column-gap: 10px;
-  font-size: 20px;
-}
-
-.hta-title :last-child {
-  font-family: var(--font-text);
-}
-
-.hta-title :last-child:hover {
-  cursor: pointer;
-  text-decoration: underline;
-}
-
 .hta-tab-item {
   width: 100%;
   height: calc(100% - 60px);