♻️ 调整目录结构

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

@@ -58,7 +58,7 @@ 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 "../main/t-overlay.vue";
+import TOverlay from "../app/t-overlay.vue";
 
 import HtaOverviewLine from "./hta-overview-line.vue";
 

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

@@ -3,7 +3,7 @@
     <template v-slot:item="{ item }">
       <tr class="hta-th-tr">
         <td class="hta-th-icon">
-          <TibWikiAbyss2 v-model="item.AvatarId" />
+          <TItemBox :model-value="getBoxData(item.AvatarId)" />
         </td>
         <td>
           <span>{{ (item.HoldingRate.cur * 100).toFixed(3) }}%</span>
@@ -31,8 +31,9 @@
 <script lang="ts" setup>
 import { onMounted, ref } from "vue";
 
+import { AppCharacterData } from "../../data/index.js";
 import { AbyssDataItem } from "../../pages/WIKI/Abyss.vue";
-import TibWikiAbyss2 from "../itembox/tib-wiki-abyss-2.vue";
+import TItemBox, { TItemBoxData } from "../app/t-item-box.vue";
 
 interface HtaTabHoldProps {
   data: AbyssDataItem<TGApp.Plugins.Hutao.Abyss.AvatarHold[]>;
@@ -101,6 +102,29 @@ function getRateStr(cur: number, last: number): string {
   const diff = Math.abs(cur - last) * 100;
   return `(${cur > last ? "↑" : "↓"}${diff.toFixed(3)}%)`;
 }
+
+function getBoxData(id: number): TItemBoxData {
+  const avatar = AppCharacterData.find((a) => a.id === id);
+  return {
+    bg: `/icon/bg/${avatar?.star ?? 5}-Star.webp`,
+    clickable: false,
+    display: "inner",
+    height: "80px",
+    icon: `/WIKI/character/${id}.webp`,
+    innerHeight: 20,
+    innerText: avatar?.name ?? "旅行者",
+    lt:
+      avatar === undefined
+        ? ""
+        : avatar.element !== ""
+          ? `/icon/element/${avatar.element}元素.webp`
+          : `/icon/weapon/${avatar.weapon}.webp`,
+    ltSize: "20px",
+    size: "80px",
+    innerIcon: `/icon/weapon/${avatar?.weapon ?? "单手剑"}.webp`,
+    innerBlur: "5px",
+  };
+}
 </script>
 <style lang="css" scoped>
 .hta-th-tr {

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

@@ -26,7 +26,8 @@
 import { onMounted, ref } from "vue";
 
 import { AbyssDataItem } from "../../pages/WIKI/Abyss.vue";
-import TibWikiAbyss from "../itembox/tib-wiki-abyss.vue";
+
+import TibWikiAbyss from "./tib-wiki-abyss.vue";
 
 interface HtaTabUpProps {
   data: AbyssDataItem<TGApp.Plugins.Hutao.Abyss.AvatarUse[]>;

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

@@ -26,7 +26,8 @@
 import { onMounted, ref } from "vue";
 
 import { AbyssDataItem } from "../../pages/WIKI/Abyss.vue";
-import TibWikiAbyss from "../itembox/tib-wiki-abyss.vue";
+
+import TibWikiAbyss from "./tib-wiki-abyss.vue";
 
 interface HtaTabUseProps {
   data: AbyssDataItem<TGApp.Plugins.Hutao.Abyss.AvatarUse[]>;

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

@@ -1,23 +1,47 @@
 <template>
   <div class="hta-tl-box">
     <div class="hta-tl-item">
-      <TibWikiAbyss2
+      <TItemBox
         v-for="item in props.modelValue.Item.split(',')"
         :key="item"
-        :model-value="item"
+        :model-value="getBoxData(item)"
       />
     </div>
     <div class="hta-tl-rate">上场{{ props.modelValue.Rate }}次</div>
   </div>
 </template>
 <script lang="ts" setup>
-import TibWikiAbyss2 from "../itembox/tib-wiki-abyss-2.vue";
+import { AppCharacterData } from "../../data/index.js";
+import TItemBox, { TItemBoxData } from "../app/t-item-box.vue";
 
 interface HtaTeamLineProps {
   modelValue: { Item: string; Rate: number };
 }
 
 const props = defineProps<HtaTeamLineProps>();
+
+function getBoxData(id: string): TItemBoxData {
+  const avatar = AppCharacterData.find((i) => i.id.toString() === id);
+  return {
+    bg: `/icon/bg/${avatar?.star ?? 5}-Star.webp`,
+    clickable: false,
+    display: "inner",
+    height: "80px",
+    icon: `/WIKI/character/${id}.webp`,
+    innerHeight: 20,
+    innerText: avatar?.name ?? "旅行者",
+    lt:
+      avatar === undefined
+        ? ""
+        : avatar.element !== ""
+          ? `/icon/element/${avatar.element}元素.webp`
+          : `/icon/weapon/${avatar.weapon}.webp`,
+    ltSize: "20px",
+    size: "80px",
+    innerIcon: `/icon/weapon/${avatar?.weapon ?? "单手剑"}.webp`,
+    innerBlur: "5px",
+  };
+}
 </script>
 <style lang="css" scoped>
 .hta-tl-box {

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

@@ -0,0 +1,95 @@
+<template>
+  <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 "../app/t-item-box.vue";
+
+interface TibWikiAbyssProps {
+  modelValue: AbyssDataItem<{ 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: "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(async () => {
+  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>