♻️ 角色使用率&出场率

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

@@ -13,7 +13,11 @@
         :value="selectItem.Floor.toString()"
       >
         <div class="hta-tu-grid">
-          <TibWikiAbyss v-for="item in selectItem.Ranks" :key="item.Item" :model-value="item" />
+          <TibWikiAbyss
+            v-for="(item, index) in selectItem.Ranks"
+            :key="index"
+            :model-value="item"
+          />
         </div>
       </v-window-item>
     </v-window>
@@ -22,30 +26,47 @@
 <script lang="ts" setup>
 import { onMounted, ref } from "vue";
 
+import { AbyssDataItem } from "../../pages/WIKI/Abyss.vue";
 import TibWikiAbyss from "../itembox/tib-wiki-abyss.vue";
 
-interface HtaTabUseProps {
+interface HtaTabUpProps {
-  modelValue: TGApp.Plugins.Hutao.Abyss.AvatarUp[];
+  data: AbyssDataItem<TGApp.Plugins.Hutao.Abyss.AvatarUse[]>;
 }
 
-const props = defineProps<HtaTabUseProps>();
+interface HtaTabUpData {
+  Floor: number;
+  Ranks: Array<AbyssDataItem<{ Item: number; Rate: number }>>;
+}
+
+const props = defineProps<HtaTabUpProps>();
 
 // data
 const tab = ref<string>("9");
-const select = ref<TGApp.Plugins.Hutao.Abyss.AvatarUp[]>([]);
+const select = ref<Array<HtaTabUpData>>([]);
 
 onMounted(async () => {
-  props.modelValue.forEach((item) => {
+  for (const floor of props.data.cur) {
-    item.Ranks.sort((a, b) => b.Rate - a.Rate);
+    const floorLast = props.data.last.find((f) => f.Floor === floor.Floor);
-    select.value.push(item);
+    const floorRank = {
-  });
+      Floor: floor.Floor,
+      Ranks: <Array<AbyssDataItem<{ Item: number; Rate: number }>>>[],
+    };
+    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 },
+      });
+    }
+    select.value.push(floorRank);
+  }
 });
 </script>
 <style lang="css" scoped>
 .hta-tu-box {
   display: flex;
   height: 100%;
-  padding-top: 10px;
   column-gap: 10px;
 }
 
@@ -63,11 +84,11 @@ onMounted(async () => {
   display: grid;
   overflow: auto;
   width: 100%;
-  height: 100%;
+  max-height: calc(100vh - 100px);
   align-items: center;
   justify-content: center;
-  padding: 5px;
+  padding: 10px;
-  grid-gap: 5px;
+  grid-gap: 10px;
-  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(180px, 0.2fr));
 }
 </style>

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

@@ -13,7 +13,11 @@
         :value="selectItem.Floor.toString()"
       >
         <div class="hta-tus-grid">
-          <TibWikiAbyss v-for="item in selectItem.Ranks" :key="item.Item" :model-value="item" />
+          <TibWikiAbyss
+            v-for="(item, index) in selectItem.Ranks"
+            :key="index"
+            :model-value="item"
+          />
         </div>
       </v-window-item>
     </v-window>
@@ -22,35 +26,51 @@
 <script lang="ts" setup>
 import { onMounted, ref } from "vue";
 
+import { AbyssDataItem } from "../../pages/WIKI/Abyss.vue";
 import TibWikiAbyss from "../itembox/tib-wiki-abyss.vue";
 
 interface HtaTabUseProps {
-  modelValue: TGApp.Plugins.Hutao.Abyss.AvatarUse[];
+  data: AbyssDataItem<TGApp.Plugins.Hutao.Abyss.AvatarUse[]>;
+}
+
+interface HtaTabUseData {
+  Floor: number;
+  Ranks: Array<AbyssDataItem<{ Item: number; Rate: number }>>;
 }
 
 const props = defineProps<HtaTabUseProps>();
 
 // data
 const tab = ref<string>("9");
-const select = ref<TGApp.Plugins.Hutao.Abyss.AvatarUse[]>([]);
+const select = ref<Array<HtaTabUseData>>([]);
 
 onMounted(async () => {
-  props.modelValue.forEach((item) => {
+  for (const floor of props.data.cur) {
-    item.Ranks.sort((a, b) => b.Rate - a.Rate);
+    const floorLast = props.data.last.find((f) => f.Floor === floor.Floor);
-    select.value.push(item);
+    const floorRank = {
-  });
+      Floor: floor.Floor,
+      Ranks: <Array<AbyssDataItem<{ Item: number; Rate: number }>>>[],
+    };
+    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 },
+      });
+    }
+    select.value.push(floorRank);
+  }
 });
 </script>
 <style lang="css" scoped>
 .hta-tus-box {
   display: flex;
   height: 100%;
-  padding-top: 10px;
   column-gap: 10px;
 }
 
 .hta-tus-tab {
-  width: 100px;
   height: 100%;
   color: var(--box-text-4);
 }
@@ -64,11 +84,11 @@ onMounted(async () => {
   display: grid;
   overflow: auto;
   width: 100%;
-  height: 100%;
+  max-height: calc(100vh - 100px);
   align-items: center;
   justify-content: center;
-  padding: 5px;
+  padding: 10px;
-  grid-gap: 5px;
+  grid-gap: 10px;
-  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(180px, 0.2fr));
 }
 </style>

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

@@ -1,46 +1,95 @@
 <template>
-  <TItemBox :model-value="box" />
+  <div class="twa-container">
+    <TItemBox :model-value="box" />
+    <div class="twa-diff">
+      <span>{{ avatar?.name ?? "旅行者" }}</span>
+      <span>{{ `${(props.modelValue.cur.Rate * 100).toFixed(3)}%` }}</span>
+      <span :class="diffUp ? 'up' : 'down'">{{ getDiffStr() }}</span>
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, computed } from "vue";
 
 import { AppCharacterData } from "../../data/index.js";
+import { AbyssDataItem } from "../../pages/WIKI/Abyss.vue";
 import TItemBox, { type TItemBoxData } from "../main/t-itembox.vue";
 
 interface TibWikiAbyssProps {
-  modelValue: {
+  modelValue: AbyssDataItem<{ Item: number; Rate: number }>;
-    Item: number;
-    Rate: number;
-  };
 }
 
 const props = defineProps<TibWikiAbyssProps>();
 
 const avatar = ref<TGApp.App.Character.WikiBriefInfo>();
+const diffUp = computed(() => props.modelValue.cur.Rate > props.modelValue.last.Rate);
 
 const box = computed<TItemBoxData>(() => {
   return {
     bg: `/icon/bg/${avatar.value?.star}-Star.webp`,
     clickable: false,
-    display: "outer",
+    display: "inner",
-    height: "100px",
     icon: `/WIKI/character/${avatar.value?.id}.webp`,
-    innerHeight: 20,
+    innerHeight: 0,
-    innerText: (props.modelValue.Rate * 100).toFixed(3) + "%",
+    innerText: avatar.value?.name ?? "旅行者",
     lt:
       avatar.value === undefined
         ? ""
         : avatar.value.element !== ""
           ? `/icon/element/${avatar.value.element}元素.webp`
           : `/icon/weapon/${avatar.value.weapon}.webp`,
-    ltSize: "20px",
+    ltSize: "15px",
-    outerHeight: 20,
+    size: "60px",
-    outerText: avatar.value?.name ?? "旅行者",
+    height: "60px",
-    size: "80px",
   };
 });
 
 onMounted(async () => {
-  avatar.value = AppCharacterData.find((a) => a.id === props.modelValue.Item);
+  avatar.value = AppCharacterData.find((a) => a.id === props.modelValue.cur.Item);
 });
+
+function getDiffStr() {
+  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)}%`;
+  }
+  return `↑${((props.modelValue.cur.Rate - props.modelValue.last.Rate) * 100).toFixed(3)}%`;
+}
 </script>
+<style lang="css" scoped>
+.twa-container {
+  display: flex;
+  height: 60px;
+  align-items: center;
+  justify-content: flex-start;
+  border: 1px solid var(--common-shadow-2);
+  border-radius: 5px;
+  background: var(--box-bg-1);
+  column-gap: 5px;
+}
+
+.twa-diff {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  color: var(--box-text-4);
+  font-size: 12px;
+
+  :first-child {
+    font-family: var(--font-title);
+    font-size: 15px;
+  }
+}
+
+.twa-diff .up {
+  color: var(--tgc-od-red);
+  font-family: var(--font-title);
+}
+
+.twa-diff .down {
+  color: var(--tgc-od-green);
+  font-family: var(--font-title);
+}
+</style>

src/components/main/t-itembox.vue

@@ -1,93 +1,38 @@
 <template>
-  <div
+  <div class="tib-box">
-    class="tib-box"
+    <div class="tib-bg">
-    :style="{
-      width: modelValue.size,
-      height: modelValue.height,
-      cursor: modelValue.clickable ? 'pointer' : 'default',
-    }"
-  >
-    <div
-      class="tib-bg"
-      :style="{
-        width: modelValue.size,
-        height: modelValue.size,
-      }"
-    >
       <slot name="bg">
-        <img :src="modelValue.bg" alt="bg" />
+        <img :src="props.modelValue.bg" alt="bg" />
       </slot>
     </div>
-    <div
+    <div class="tib-icon">
-      class="tib-icon"
-      :style="{
-        width: modelValue.size,
-        height: modelValue.size,
-      }"
-    >
       <slot name="icon">
-        <img :src="modelValue.icon" alt="icon" />
+        <img :src="props.modelValue.icon" alt="icon" />
       </slot>
     </div>
-    <div
+    <div class="tib-cover">
-      class="tib-cover"
+      <div class="tib-lt">
-      :style="{
+        <img :src="props.modelValue.lt" alt="lt" />
-        width: modelValue.size,
-        height: modelValue.size,
-      }"
-    >
-      <div
-        class="tib-lt"
-        :style="{
-          width: modelValue.ltSize,
-          height: modelValue.ltSize,
-        }"
-      >
-        <img :src="modelValue.lt" alt="lt" />
       </div>
-      <div
+      <div v-show="props.modelValue.rt" class="tib-rt">
-        v-show="modelValue.rt"
+        {{ props.modelValue.rt }}
-        class="tib-rt"
-        :style="{
-          width: modelValue.rtSize,
-          height: modelValue.rtSize,
-        }"
-      >
-        {{ modelValue.rt }}
       </div>
-      <div
+      <div class="tib-inner">
-        class="tib-inner"
-        :style="{
-          height: `${props.modelValue.innerHeight ?? 0}px`,
-          fontSize: `${props.modelValue.innerHeight ? props.modelValue.innerHeight / 2 : 0}px`,
-        }"
-      >
         <slot name="inner-icon">
           <img
-            v-show="modelValue.innerIcon"
+            v-show="props.modelValue.innerIcon"
-            :src="modelValue.innerIcon"
+            :src="props.modelValue.innerIcon"
             alt="inner-icon"
-            :style="{
-              width: `${props.modelValue.innerHeight ?? 0}px`,
-              height: `${props.modelValue.innerHeight ?? 0}px`,
-            }"
           />
         </slot>
         <slot name="inner-text">
-          <span :title="modelValue.innerText">{{ modelValue.innerText }}</span>
+          <span :title="props.modelValue.innerText">{{ props.modelValue.innerText }}</span>
         </slot>
       </div>
     </div>
-    <div
+    <div v-if="props.modelValue.display === 'outer'" class="tib-outer">
-      v-if="modelValue.display === 'outer'"
-      class="tib-outer"
-      :style="{
-        height: `${props.modelValue.outerHeight ?? 0}px`,
-        fontSize: `${props.modelValue.outerHeight ? props.modelValue.outerHeight / 2 : 0}px`,
-      }"
-    >
       <slot name="outer-text">
-        <span>{{ modelValue.outerText }}</span>
+        <span>{{ props.modelValue.outerText }}</span>
       </slot>
     </div>
   </div>
@@ -109,6 +54,7 @@ export interface TItemBoxData {
   innerText: string;
   outerHeight?: number;
   outerText?: string;
+  innerBlur?: string;
 }
 
 interface TItemBoxProps {
@@ -116,10 +62,23 @@ interface TItemBoxProps {
 }
 
 const props = defineProps<TItemBoxProps>();
+const size = props.modelValue.size;
+const height = props.modelValue.height;
+const cursor = props.modelValue.clickable ? "pointer" : "default";
+const sizeLt = props.modelValue.ltSize;
+const sizeRt = props.modelValue.rtSize;
+const sizeInner = props.modelValue.innerHeight ?? 0;
+const fontSizeInner = sizeInner ? `${sizeInner / 2}px` : "0";
+const sizeOuter = props.modelValue.outerHeight ?? 0;
+const fontSizeOuter = sizeOuter ? `${sizeOuter / 2}px` : "0";
+const innerBlur = props.modelValue.innerBlur ?? "0";
 </script>
 <style lang="css" scoped>
 .tib-box {
   position: relative;
+  width: v-bind(size);
+  height: v-bind(height);
+  cursor: v-bind(cursor);
 }
 
 .tib-bg {
@@ -127,6 +86,8 @@ const props = defineProps<TItemBoxProps>();
   top: 0;
   left: 0;
   overflow: hidden;
+  width: v-bind(size);
+  height: v-bind(size);
   border-radius: 5px;
 }
 
@@ -139,6 +100,8 @@ const props = defineProps<TItemBoxProps>();
 .tib-icon {
   position: relative;
   overflow: hidden;
+  width: v-bind(size);
+  height: v-bind(size);
   border-radius: 5px;
 }
 
@@ -153,6 +116,8 @@ const props = defineProps<TItemBoxProps>();
   top: 0;
   left: 0;
   display: flex;
+  width: v-bind(size);
+  height: v-bind(size);
   flex-direction: column;
   align-items: center;
   justify-content: center;
@@ -164,6 +129,8 @@ const props = defineProps<TItemBoxProps>();
   top: 3%;
   left: 3%;
   display: flex;
+  width: v-bind(sizeLt);
+  height: v-bind(sizeLt);
   align-items: center;
   justify-content: center;
 }
@@ -179,6 +146,8 @@ const props = defineProps<TItemBoxProps>();
   top: 0;
   right: 0;
   display: flex;
+  width: v-bind(sizeRt);
+  height: v-bind(sizeRt);
   align-items: center;
   justify-content: center;
   background: rgb(0 0 0 / 40%);
@@ -194,16 +163,22 @@ const props = defineProps<TItemBoxProps>();
   left: 0;
   display: flex;
   width: 100%;
+  height: v-bind(sizeInner);
   align-items: center;
   justify-content: center;
+  -webkit-backdrop-filter: blur(v-bind(innerBlur));
+  backdrop-filter: blur(v-bind(innerBlur));
   background: rgb(20 20 20 / 40%);
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
   color: var(--tgc-white-1);
   font-family: var(--font-title);
+  font-size: v-bind(fontSizeInner);
 }
 
 .tib-inner img {
+  width: v-bind(sizeInner);
+  height: v-bind(sizeInner);
   margin-right: 5px;
 }
 
@@ -219,9 +194,11 @@ const props = defineProps<TItemBoxProps>();
   bottom: 0;
   display: flex;
   width: 100%;
+  height: v-bind(sizeOuter);
   align-items: center;
   justify-content: center;
   color: var(--common-text-title);
+  font-size: v-bind(fontSizeOuter);
   text-align: center;
 }
 </style>

src/pages/WIKI/Abyss.vue

@@ -26,20 +26,20 @@
   <div class="hta-box">
     <v-window v-model="tab" class="hta-tab-item">
       <v-window-item value="use">
-        <HtaTabUse v-if="abyssData.use !== null" :data="avatarUse" />
+        <HtaTabUse v-if="abyssData.use !== null" :data="abyssData.use" />
       </v-window-item>
       <v-window-item value="up">
-        <HtaTabUp v-if="abyssData.up !== null" :data="avatarUp" />
+        <HtaTabUp v-if="abyssData.up !== null" :data="abyssData.up" />
       </v-window-item>
       <v-window-item value="team">
-        <HtaTabTeam v-if="abyssData.team !== null" :data="teamCombination" />
+        <HtaTabTeam v-if="abyssData.team !== null" :data="abyssData.team" />
       </v-window-item>
       <v-window-item value="hold">
-        <HtaTabHold v-if="abyssData.hold !== null" :data="avatarHold" />
+        <HtaTabHold v-if="abyssData.hold !== null" :data="abyssData.hold" />
       </v-window-item>
     </v-window>
   </div>
-  <HtaOverlayOverview v-model="showDialog" :data="overview" />
+  <HtaOverlayOverview v-if="overview" v-model="showDialog" :data="overview" />
 </template>
 <script lang="ts" setup>
 import { onMounted, ref, watch } from "vue";
@@ -112,8 +112,7 @@ onMounted(async () => {
 });
 
 function show(): void {
-  if (showDialog.value) showDialog.value = false;
+  showDialog.value = !showDialog.value;
-  showDialog.value = true;
 }
 
 async function refreshData(type: AbyssTab): Promise<void> {
@@ -200,15 +199,13 @@ async function getData(type: AbyssTab): Promise<AbyssDataItemType<AbyssTab>> {
 .hta-box {
   overflow: auto;
   width: 100%;
-  max-height: calc(100vh - 30px);
   box-sizing: border-box;
-  padding: 10px;
   border-radius: 5px;
   box-shadow: 0 0 10px var(--common-shadow-4);
 }
 
 .hta-tab-item {
   width: 100%;
-  height: calc(100% - 60px);
+  height: 100%;
 }
 </style>