♻️ 全面整理重构

src/components/hutaoAbyss/hta-overlay-overview.vue

@@ -13,56 +13,56 @@
       <div class="hta-oob-title">数据收集统计</div>
       <HtaOverviewLine
         label="当期深渊ID"
-        :cur="dataCur.ScheduleId"
-        :last="dataLast.ScheduleId"
+        :cur="props.data.cur.ScheduleId"
+        :last="props.data.last.ScheduleId"
         :show-diff="false"
       />
       <HtaOverviewLine
         label="上传记录总数"
-        :cur="dataCur.RecordTotal"
-        :last="dataLast.RecordTotal"
+        :cur="props.data.cur.RecordTotal"
+        :last="props.data.last.RecordTotal"
       />
       <div class="hta-oob-title">深渊数据统计</div>
       <HtaOverviewLine
         label="总计深渊记录"
-        :cur="dataCur.SpiralAbyssTotal"
-        :last="dataLast.SpiralAbyssTotal"
+        :cur="props.data.cur.SpiralAbyssTotal"
+        :last="props.data.last.SpiralAbyssTotal"
       />
       <HtaOverviewLine
         label="通关深渊记录"
-        :cur="dataCur.SpiralAbyssPassed"
-        :last="dataLast.SpiralAbyssPassed"
+        :cur="props.data.cur.SpiralAbyssPassed"
+        :last="props.data.last.SpiralAbyssPassed"
       />
       <HtaOverviewLine
         label="满星深渊记录"
-        :cur="dataCur.SpiralAbyssFullStar"
-        :last="dataLast.SpiralAbyssFullStar"
+        :cur="props.data.cur.SpiralAbyssFullStar"
+        :last="props.data.last.SpiralAbyssFullStar"
       />
       <HtaOverviewLine
         label="平均获取渊星"
-        :cur="dataCur.SpiralAbyssStarTotal / dataCur.SpiralAbyssTotal"
-        :last="dataLast.SpiralAbyssStarTotal / dataLast.SpiralAbyssTotal"
+        :cur="props.data.cur.SpiralAbyssStarTotal / props.data.cur.SpiralAbyssTotal"
+        :last="props.data.last.SpiralAbyssStarTotal / props.data.last.SpiralAbyssTotal"
       />
       <HtaOverviewLine
         label="平均战斗次数"
-        :cur="dataCur.SpiralAbyssBattleTotal / dataCur.SpiralAbyssTotal"
-        :last="dataLast.SpiralAbyssBattleTotal / dataLast.SpiralAbyssTotal"
+        :cur="props.data.cur.SpiralAbyssBattleTotal / props.data.cur.SpiralAbyssTotal"
+        :last="props.data.last.SpiralAbyssBattleTotal / props.data.last.SpiralAbyssTotal"
       />
       <div class="hta-oob-extra">更新于 {{ timestampToDate(props.data.cur.Timestamp) }}</div>
     </div>
   </TOverlay>
 </template>
 <script lang="ts" setup>
+import TOverlay from "@comp/app/t-overlay.vue";
+import showSnackbar from "@comp/func/snackbar.js";
 import { computed, ref } from "vue";
 
-import { AbyssDataItem } from "../../pages/WIKI/Abyss.vue";
-import { generateShareImg } from "../../utils/TGShare.js";
-import { timestampToDate } from "../../utils/toolFunc.js";
-import TOverlay from "../app/t-overlay.vue";
-import showSnackbar from "../func/snackbar.js";
-
 import HtaOverviewLine from "./hta-overview-line.vue";
 
+import type { AbyssDataItem } from "@/pages/WIKI/Abyss.vue";
+import { generateShareImg } from "@/utils/TGShare.js";
+import { timestampToDate } from "@/utils/toolFunc.js";
+
 type HtaOverlayOverviewProps = {
   modelValue: boolean;
   data: AbyssDataItem<TGApp.Plugins.Hutao.Abyss.OverviewData>;
@@ -76,8 +76,6 @@ const visible = computed<boolean>({
   get: () => props.modelValue,
   set: (v) => emits("update:modelValue", v),
 });
-const dataCur = computed(() => props.data.cur);
-const dataLast = computed(() => props.data.last);
 
 async function share(): Promise<void> {
   loadShare.value = true;
@@ -87,7 +85,7 @@ async function share(): Promise<void> {
     loadShare.value = false;
     return;
   }
-  const fileName = `深渊数据统计_${timestampToDate(dataCur.value.Timestamp)}.png`;
+  const fileName = `深渊数据统计_${timestampToDate(props.data.cur.Timestamp)}.png`;
   await generateShareImg(fileName, shareEl, 2);
   loadShare.value = false;
 }

src/components/hutaoAbyss/hta-overview-line.vue

@@ -7,7 +7,7 @@
         v-if="props.showDiff"
         class="hta-olv-diff"
         :title="`上期数据：${getNumStr(props.last)}`"
-        :class="{ 'hta-olv-up': isUp, 'hta-olv-down': !isUp }"
+        :class="{ 'hta-olv-up': props.cur > props.last, 'hta-olv-down': props.cur < props.last }"
       >
         {{ getDiff(props.cur, props.last) }}
       </div>
@@ -15,18 +15,8 @@
   </div>
 </template>
 <script lang="ts" setup>
-interface HtaOverviewLineProps {
-  label: string;
-  cur: number;
-  last: number;
-  showDiff?: boolean;
-}
-
-const props = withDefaults(defineProps<HtaOverviewLineProps>(), {
-  showDiff: true,
-});
-
-const isUp = props.cur - props.last > 0;
+type HtaOverviewLineProps = { label: string; cur: number; last: number; showDiff?: boolean };
+const props = withDefaults(defineProps<HtaOverviewLineProps>(), { showDiff: true });
 
 function getNumStr(num: number): string {
   if (Number.isInteger(num)) return num.toString();

src/components/hutaoAbyss/hta-tab-hold.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- todo fix typo err -->
   <v-data-table :headers="headers" fixed-header :items="holdData" height="calc(100vh - 160px)">
     <template v-slot:item="{ item }">
       <tr class="hta-th-tr">
@@ -9,7 +10,10 @@
           <span>{{ (item.HoldingRate.cur * 100).toFixed(3) }}%</span>
           <span
             v-if="item.HoldingRate.cur !== item.HoldingRate.last"
-            :class="getRateClass(item.HoldingRate.cur, item.HoldingRate.last)"
+            :class="{
+              'rate-up': item.HoldingRate.cur > item.HoldingRate.last,
+              'rate-down': item.HoldingRate.cur < item.HoldingRate.last,
+            }"
           >
             {{ getRateStr(item.HoldingRate.cur, item.HoldingRate.last) }}
           </span>
@@ -18,7 +22,10 @@
           <span>{{ (rate.RateCur * 100).toFixed(3) }}%</span>
           <span
             v-if="rate.RateCur !== rate.RateLast"
-            :class="getRateClass(rate.RateCur, rate.RateLast)"
+            :class="{
+              'rate-up': rate.RateCur > rate.RateLast,
+              'rate-down': rate.RateCur < rate.RateLast,
+            }"
             :title="`${(rate.RateLast * 100).toFixed(3)}%`"
           >
             {{ getRateStr(rate.RateCur, rate.RateLast) }}
@@ -29,30 +36,22 @@
   </v-data-table>
 </template>
 <script lang="ts" setup>
-import { onMounted, ref } from "vue";
+import TItemBox, { type TItemBoxData } from "@comp/app/t-itemBox.vue";
+import { onMounted, shallowRef } from "vue";
 
-import { AppCharacterData } from "../../data/index.js";
-import { AbyssDataItem } from "../../pages/WIKI/Abyss.vue";
-import TItemBox, { type TItemBoxData } from "../app/t-item-box.vue";
+import { AppCharacterData } from "@/data/index.js";
+import type { AbyssDataItem } from "@/pages/WIKI/Abyss.vue";
 
-interface HtaTabHoldProps {
-  data: AbyssDataItem<TGApp.Plugins.Hutao.Abyss.AvatarHold[]>;
-}
-
-interface HtaTabHoldConstellation {
-  Item: number;
-  RateCur: number;
-  RateLast: number;
-}
-
-interface HtaTabHoldData {
+type HtaTabHoldProps = { data: AbyssDataItem<Array<TGApp.Plugins.Hutao.Abyss.AvatarHold>> };
+type HtaTabHoldConstellation = { Item: number; RateCur: number; RateLast: number };
+type HtaTabHoldData = {
   AvatarId: number;
   HoldingRate: AbyssDataItem<number>;
   Constellations: Array<HtaTabHoldConstellation>;
-}
+};
 
 const props = defineProps<HtaTabHoldProps>();
-const holdData = ref<HtaTabHoldData[]>([]);
+const holdData = shallowRef<Array<HtaTabHoldData>>([]);
 
 const headers = [
   { title: "角色", align: "center", key: "AvatarId" },
@@ -67,6 +66,7 @@ const headers = [
 ];
 
 onMounted(() => {
+  const tmpData: Array<HtaTabHoldData> = [];
   for (const avatar of props.data.cur) {
     const avatarLast = props.data.last.find((a) => a.AvatarId === avatar.AvatarId);
     if (!avatarLast) continue;
@@ -86,18 +86,11 @@ onMounted(() => {
         RateLast: constellationLast.Rate,
       });
     }
-    holdData.value.push({
-      AvatarId: avatar.AvatarId,
-      HoldingRate: Rate,
-      Constellations: Constellations,
-    });
+    tmpData.push({ AvatarId: avatar.AvatarId, HoldingRate: Rate, Constellations: Constellations });
   }
+  holdData.value = tmpData;
 });
 
-function getRateClass(cur: number, last: number): string {
-  return cur > last ? "rate-up" : "rate-down";
-}
-
 function getRateStr(cur: number, last: number): string {
   const diff = Math.abs(cur - last) * 100;
   return `(${cur > last ? "↑" : "↓"}${diff.toFixed(3)}%)`;

src/components/hutaoAbyss/hta-tab-team.vue

@@ -1,17 +1,13 @@
 <template>
   <div class="hta-tt-box">
     <v-tabs v-model="tab" direction="vertical" class="hta-tt-tab">
-      <v-tab value="10">第10层</v-tab>
-      <v-tab value="11">第11层</v-tab>
-      <v-tab value="12">第12层</v-tab>
+      <v-tab :value="10">第10层</v-tab>
+      <v-tab :value="11">第11层</v-tab>
+      <v-tab :value="12">第12层</v-tab>
     </v-tabs>
     <v-window v-model="tab" class="hta-tt-window">
-      <v-window-item
-        v-for="selectItem in select"
-        :key="selectItem.Floor"
-        :value="selectItem.Floor.toString()"
-      >
-        <div v-if="select" class="hta-tt-flex">
+      <v-window-item v-for="selectItem in select" :key="selectItem.Floor" :value="selectItem.Floor">
+        <div class="hta-tt-flex">
           <div class="hta-tuf-box">
             <div class="hta-tuf-title">上半</div>
             <v-virtual-scroll :items="selectItem.Up" item-height="100" class="hta-tuf-item">
@@ -34,26 +30,24 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, ref } from "vue";
+import { onMounted, ref, shallowRef } from "vue";
 
 import HtaTeamLine from "./hta-team-line.vue";
 
-interface HtaTabTeamProps {
-  modelValue: TGApp.Plugins.Hutao.Abyss.TeamCombination[];
-}
-
+type HtaTabTeamProps = { modelValue: Array<TGApp.Plugins.Hutao.Abyss.TeamCombination> };
 const props = defineProps<HtaTabTeamProps>();
 
-// data
-const tab = ref<string>("9");
-const select = ref<TGApp.Plugins.Hutao.Abyss.TeamCombination[]>([]);
+const tab = ref<number>(10);
+const select = shallowRef<Array<TGApp.Plugins.Hutao.Abyss.TeamCombination>>([]);
 
 onMounted(async () => {
-  props.modelValue.forEach((item) => {
+  const tempData: Array<TGApp.Plugins.Hutao.Abyss.TeamCombination> = [];
+  for (const item of props.modelValue) {
     item.Up.sort((a, b) => b.Rate - a.Rate);
     item.Down.sort((a, b) => b.Rate - a.Rate);
-    select.value.push(item);
-  });
+    tempData.push(item);
+  }
+  select.value = tempData;
 });
 </script>
 <style lang="css" scoped>

src/components/hutaoAbyss/hta-tab-up.vue

@@ -1,16 +1,12 @@
 <template>
   <div class="hta-tu-box">
     <v-tabs v-model="tab" direction="vertical" class="hta-tu-tab">
-      <v-tab value="10">第10层</v-tab>
-      <v-tab value="11">第11层</v-tab>
-      <v-tab value="12">第12层</v-tab>
+      <v-tab :value="10">第10层</v-tab>
+      <v-tab :value="11">第11层</v-tab>
+      <v-tab :value="12">第12层</v-tab>
     </v-tabs>
     <v-window v-model="tab" class="hta-tu-window">
-      <v-window-item
-        v-for="selectItem in select"
-        :key="selectItem.Floor"
-        :value="selectItem.Floor.toString()"
-      >
+      <v-window-item v-for="selectItem in select" :key="selectItem.Floor" :value="selectItem.Floor">
         <div class="hta-tu-grid">
           <TibWikiAbyss
             v-for="(item, index) in selectItem.Ranks"
@@ -23,44 +19,32 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, ref } from "vue";
-
-import { AbyssDataItem } from "../../pages/WIKI/Abyss.vue";
+import { onMounted, ref, shallowRef } from "vue";
 
 import TibWikiAbyss from "./tib-wiki-abyss.vue";
 
-interface HtaTabUpProps {
-  data: AbyssDataItem<TGApp.Plugins.Hutao.Abyss.AvatarUse[]>;
-}
+import type { AbyssDataItem } from "@/pages/WIKI/Abyss.vue";
 
-interface HtaTabUpData {
-  Floor: number;
-  Ranks: Array<AbyssDataItem<TGApp.Plugins.Hutao.Base.Rate>>;
-}
+type HtaTabUpProps = { data: AbyssDataItem<Array<TGApp.Plugins.Hutao.Abyss.AvatarUse>> };
+type HtaTabUpData = { Floor: number; Ranks: Array<AbyssDataItem<TGApp.Plugins.Hutao.Base.Rate>> };
 
 const props = defineProps<HtaTabUpProps>();
-
-// data
-const tab = ref<string>("9");
-const select = ref<Array<HtaTabUpData>>([]);
+const tab = ref<number>(10);
+const select = shallowRef<Array<HtaTabUpData>>([]);
 
 onMounted(async () => {
+  const tmpData: Array<HtaTabUpData> = [];
   for (const floor of props.data.cur) {
     const floorLast = props.data.last.find((f) => f.Floor === floor.Floor);
-    const floorRank = {
-      Floor: floor.Floor,
-      Ranks: <Array<AbyssDataItem<TGApp.Plugins.Hutao.Base.Rate>>>[],
-    };
+    const floorRank: HtaTabUpData = { Floor: floor.Floor, Ranks: [] };
     floor.Ranks.sort((a, b) => b.Rate - a.Rate);
     for (const rank of floor.Ranks) {
       const rankLast = floorLast?.Ranks.find((r) => r.Item === rank.Item);
-      floorRank.Ranks.push({
-        cur: rank,
-        last: rankLast ?? { Item: rank.Item, Rate: 0 },
-      });
+      floorRank.Ranks.push({ cur: rank, last: rankLast ?? { Item: rank.Item, Rate: 0 } });
     }
-    select.value.push(floorRank);
+    tmpData.push(floorRank);
   }
+  select.value = tmpData;
 });
 </script>
 <style lang="css" scoped>

src/components/hutaoAbyss/hta-tab-use.vue

@@ -1,16 +1,12 @@
 <template>
   <div class="hta-tus-box">
     <v-tabs v-model="tab" direction="vertical" class="hta-tus-tab">
-      <v-tab value="10">第10层</v-tab>
-      <v-tab value="11">第11层</v-tab>
-      <v-tab value="12">第12层</v-tab>
+      <v-tab :value="10">第10层</v-tab>
+      <v-tab :value="11">第11层</v-tab>
+      <v-tab :value="12">第12层</v-tab>
     </v-tabs>
     <v-window v-model="tab" class="hta-tus-window">
-      <v-window-item
-        v-for="selectItem in select"
-        :key="selectItem.Floor"
-        :value="selectItem.Floor.toString()"
-      >
+      <v-window-item v-for="selectItem in select" :key="selectItem.Floor" :value="selectItem.Floor">
         <div class="hta-tus-grid">
           <TibWikiAbyss
             v-for="(item, index) in selectItem.Ranks"
@@ -23,44 +19,32 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, ref } from "vue";
-
-import { AbyssDataItem } from "../../pages/WIKI/Abyss.vue";
+import { onMounted, ref, shallowRef } from "vue";
 
 import TibWikiAbyss from "./tib-wiki-abyss.vue";
 
-interface HtaTabUseProps {
-  data: AbyssDataItem<TGApp.Plugins.Hutao.Abyss.AvatarUse[]>;
-}
+import type { AbyssDataItem } from "@/pages/WIKI/Abyss.vue";
 
-interface HtaTabUseData {
-  Floor: number;
-  Ranks: Array<AbyssDataItem<{ Item: number; Rate: number }>>;
-}
+type HtaTabUseProps = { data: AbyssDataItem<Array<TGApp.Plugins.Hutao.Abyss.AvatarUse>> };
+type HtaTabUseData = { Floor: number; Ranks: Array<AbyssDataItem<{ Item: number; Rate: number }>> };
 
 const props = defineProps<HtaTabUseProps>();
-
-// data
-const tab = ref<string>("9");
-const select = ref<Array<HtaTabUseData>>([]);
+const tab = ref<number>(10);
+const select = shallowRef<Array<HtaTabUseData>>([]);
 
 onMounted(async () => {
+  const tempData: Array<HtaTabUseData> = [];
   for (const floor of props.data.cur) {
     const floorLast = props.data.last.find((f) => f.Floor === floor.Floor);
-    const floorRank = {
-      Floor: floor.Floor,
-      Ranks: <Array<AbyssDataItem<{ Item: number; Rate: number }>>>[],
-    };
+    const floorRank: HtaTabUseData = { Floor: floor.Floor, Ranks: [] };
     floor.Ranks.sort((a, b) => b.Rate - a.Rate);
     for (const rank of floor.Ranks) {
       const rankLast = floorLast?.Ranks.find((r) => r.Item === rank.Item);
-      floorRank.Ranks.push({
-        cur: rank,
-        last: rankLast ?? { Item: rank.Item, Rate: 0 },
-      });
+      floorRank.Ranks.push({ cur: rank, last: rankLast ?? { Item: rank.Item, Rate: 0 } });
     }
-    select.value.push(floorRank);
+    tempData.push(floorRank);
   }
+  select.value = tempData;
 });
 </script>
 <style lang="css" scoped>

src/components/hutaoAbyss/hta-team-line.vue

@@ -11,13 +11,11 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { AppCharacterData } from "../../data/index.js";
-import TItemBox, { TItemBoxData } from "../app/t-item-box.vue";
+import TItemBox, { type TItemBoxData } from "@comp/app/t-itemBox.vue";
 
-interface HtaTeamLineProps {
-  modelValue: { Item: string; Rate: number };
-}
+import { AppCharacterData } from "@/data/index.js";
 
+type HtaTeamLineProps = { modelValue: { Item: string; Rate: number } };
 const props = defineProps<HtaTeamLineProps>();
 
 function getBoxData(id: string): TItemBoxData {

src/components/hutaoAbyss/tib-wiki-abyss.vue

@@ -4,51 +4,50 @@
     <div class="twa-diff">
       <span>{{ avatar?.name ?? "旅行者" }}</span>
       <span>{{ `${(props.modelValue.cur.Rate * 100).toFixed(3)}%` }}</span>
-      <span :class="diffUp ? 'up' : 'down'">{{ getDiffStr() }}</span>
+      <span
+        :class="{
+          up: props.modelValue.cur.Rate > props.modelValue.last.Rate,
+          down: props.modelValue.cur.Rate < props.modelValue.last.Rate,
+        }"
+      >
+        {{ getDiffStr() }}
+      </span>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import { computed, onMounted, ref } from "vue";
+import TItemBox, { type TItemBoxData } from "@comp/app/t-itemBox.vue";
+import { computed, onMounted, shallowRef } from "vue";
 
-import { AppCharacterData } from "../../data/index.js";
-import { AbyssDataItem } from "../../pages/WIKI/Abyss.vue";
-import TItemBox, { type TItemBoxData } from "../app/t-item-box.vue";
+import { AppCharacterData } from "@/data/index.js";
+import type { AbyssDataItem } from "@/pages/WIKI/Abyss.vue";
 
-export interface TibWikiAbyssProps {
-  modelValue: AbyssDataItem<TGApp.Plugins.Hutao.Base.Rate>;
-}
+type TibWikiAbyssProps = { modelValue: AbyssDataItem<TGApp.Plugins.Hutao.Base.Rate> };
 
 const props = defineProps<TibWikiAbyssProps>();
+const avatar = shallowRef<TGApp.App.Character.WikiBriefInfo>();
 
-const avatar = ref<TGApp.App.Character.WikiBriefInfo>();
-const diffUp = computed(() => props.modelValue.cur.Rate > props.modelValue.last.Rate);
+const box = computed<TItemBoxData>(() => ({
+  bg: `/icon/bg/${avatar.value?.star}-Star.webp`,
+  clickable: false,
+  display: "inner",
+  icon: `/WIKI/character/${avatar.value?.id}.webp`,
+  innerHeight: 0,
+  innerText: avatar.value?.name ?? "旅行者",
+  lt:
+    avatar.value === undefined
+      ? ""
+      : avatar.value.element !== ""
+        ? `/icon/element/${avatar.value.element}元素.webp`
+        : `/icon/weapon/${avatar.value.weapon}.webp`,
+  ltSize: "15px",
+  size: "60px",
+  height: "60px",
+}));
 
-const box = computed<TItemBoxData>(() => {
-  return {
-    bg: `/icon/bg/${avatar.value?.star}-Star.webp`,
-    clickable: false,
-    display: "inner",
-    icon: `/WIKI/character/${avatar.value?.id}.webp`,
-    innerHeight: 0,
-    innerText: avatar.value?.name ?? "旅行者",
-    lt:
-      avatar.value === undefined
-        ? ""
-        : avatar.value.element !== ""
-          ? `/icon/element/${avatar.value.element}元素.webp`
-          : `/icon/weapon/${avatar.value.weapon}.webp`,
-    ltSize: "15px",
-    size: "60px",
-    height: "60px",
-  };
-});
+onMounted(() => (avatar.value = AppCharacterData.find((a) => a.id === props.modelValue.cur.Item)));
 
-onMounted(async () => {
-  avatar.value = AppCharacterData.find((a) => a.id === props.modelValue.cur.Item);
-});
-
-function getDiffStr() {
+function getDiffStr(): string {
   if (props.modelValue.cur.Rate === props.modelValue.last.Rate) return "";
   if (props.modelValue.last.Rate > props.modelValue.cur.Rate) {
     return `↓${((props.modelValue.last.Rate - props.modelValue.cur.Rate) * 100).toFixed(3)}%`;