💄 角色持有适配差距

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

@@ -1,50 +1,108 @@
 <template>
-  <div class="hta-th-box">
-    <v-data-table :headers="headers" :items="props.modelValue">
+  <v-data-table :headers="headers" fixed-header :items="holdData" height="calc(100vh - 160px)">
     <template v-slot:item="{ item }">
       <tr class="hta-th-tr">
         <td class="hta-th-icon">
           <TibWikiAbyss2 v-model="item.AvatarId" />
         </td>
-          <td>{{ (item.HoldingRate * 100).toFixed(3) }}%</td>
+        <td>
+          <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)"
+          >
+            {{ getRateStr(item.HoldingRate.cur, item.HoldingRate.last) }}
+          </span>
+        </td>
         <td v-for="rate in item.Constellations" :key="rate.Item">
-            {{ (rate.Rate * 100).toFixed(3) }}%
+          <span>{{ (rate.RateCur * 100).toFixed(3) }}%</span>
+          <span
+            v-if="rate.RateCur !== rate.RateLast"
+            :class="getRateClass(rate.RateCur, rate.RateLast)"
+            :title="`${(rate.RateLast * 100).toFixed(3)}%`"
+          >
+            {{ getRateStr(rate.RateCur, rate.RateLast) }}
+          </span>
         </td>
       </tr>
     </template>
   </v-data-table>
-  </div>
 </template>
 <script lang="ts" setup>
+import { onMounted, ref } from "vue";
+
+import { AbyssDataItem } from "../../pages/WIKI/Abyss.vue";
 import TibWikiAbyss2 from "../itembox/tib-wiki-abyss-2.vue";
 
 interface HtaTabHoldProps {
-  modelValue: TGApp.Plugins.Hutao.Abyss.AvatarHold[];
+  data: AbyssDataItem<TGApp.Plugins.Hutao.Abyss.AvatarHold[]>;
+}
+
+interface HtaTabHoldConstellation {
+  Item: number;
+  RateCur: number;
+  RateLast: number;
+}
+
+interface HtaTabHoldData {
+  AvatarId: number;
+  HoldingRate: AbyssDataItem<number>;
+  Constellations: Array<HtaTabHoldConstellation>;
 }
 
 const props = defineProps<HtaTabHoldProps>();
+const holdData = ref<HtaTabHoldData[]>([]);
 
 const headers = [
   { title: "角色", align: "center", key: "AvatarId" },
-  { title: "持有", align: "center", key: "HoldingRate" },
-  { title: "0命", align: "center", key: "Constellations[0].Rate" },
-  { title: "1命", align: "center", key: "Constellations[1].Rate" },
-  { title: "2命", align: "center", key: "Constellations[2].Rate" },
-  { title: "3命", align: "center", key: "Constellations[3].Rate" },
-  { title: "4命", align: "center", key: "Constellations[4].Rate" },
-  { title: "5命", align: "center", key: "Constellations[5].Rate" },
-  { title: "6命", align: "center", key: "Constellations[6].Rate" },
+  { title: "持有", align: "center", key: "HoldingRate.cur" },
+  { title: "0命", align: "center", key: "Constellations[0].RateCur" },
+  { title: "1命", align: "center", key: "Constellations[1].RateCur" },
+  { title: "2命", align: "center", key: "Constellations[2].RateCur" },
+  { title: "3命", align: "center", key: "Constellations[3].RateCur" },
+  { title: "4命", align: "center", key: "Constellations[4].RateCur" },
+  { title: "5命", align: "center", key: "Constellations[5].RateCur" },
+  { title: "6命", align: "center", key: "Constellations[6].RateCur" },
 ];
-</script>
-<style lang="css" scoped>
-.hta-th-box {
-  height: 100%;
-  max-height: calc(100vh - 120px);
-  padding-right: 5px;
-  border-radius: 5px;
-  overflow-y: auto;
+
+onMounted(() => {
+  for (const avatar of props.data.cur) {
+    const avatarLast = props.data.last.find((a) => a.AvatarId === avatar.AvatarId);
+    if (!avatarLast) continue;
+    const Rate: AbyssDataItem<number> = {
+      cur: avatar.HoldingRate,
+      last: avatarLast?.HoldingRate ?? 0,
+    };
+    const Constellations: Array<HtaTabHoldConstellation> = [];
+    for (const constellation of avatar.Constellations) {
+      const constellationLast = avatarLast?.Constellations.find(
+        (c) => c.Item === constellation.Item,
+      );
+      if (!constellationLast) continue;
+      Constellations.push({
+        Item: constellation.Item,
+        RateCur: constellation.Rate,
+        RateLast: constellationLast.Rate,
+      });
+    }
+    holdData.value.push({
+      AvatarId: avatar.AvatarId,
+      HoldingRate: Rate,
+      Constellations: Constellations,
+    });
+  }
+});
+
+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)}%)`;
+}
+</script>
+<style lang="css" scoped>
 .hta-th-tr {
   height: 100px;
   text-align: center;
@@ -53,4 +111,12 @@ const headers = [
 .hta-th-icon {
   width: 100px;
 }
+
+.rate-up {
+  color: var(--tgc-od-red);
+}
+
+.rate-down {
+  color: var(--tgc-od-green);
+}
 </style>

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

@@ -19,7 +19,7 @@ const box = computed<TItemBoxData>(() => {
   return {
     bg: `/icon/bg/${avatar.value?.star ?? 5}-Star.webp`,
     clickable: false,
-    display: "outer",
+    display: "inner",
     height: "80px",
     icon: `/WIKI/character/${props.modelValue}.webp`,
     innerHeight: 20,
@@ -32,6 +32,8 @@ const box = computed<TItemBoxData>(() => {
           : `/icon/weapon/${avatar.value.weapon}.webp`,
     ltSize: "20px",
     size: "80px",
+    innerIcon: `/icon/weapon/${avatar.value?.weapon}.webp`,
+    innerBlur: "5px",
   };
 });