♻️ itemBox 组件重构，更加自由

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

@@ -1,30 +1,32 @@
 <template>
-  <TItemBox :data="character as Record<string,string|number>" size="70px" display="inner" model-value="abyss-detail" />
+  <TItemBox :model-value="box" />
 </template>
 <script lang="ts" setup>
 // vue
 import { onMounted, ref } from "vue";
-import TItemBox from "../main/t-itembox.vue";
+import TItemBox, { TItemBoxData } from "../main/t-itembox.vue";
 // utils
 import TGSqlite from "../../plugins/Sqlite";
 
 interface TibAbyssDetailProps {
-  modelValue: TGApp.Sqlite.Abyss.CharacterInfo
-}
-
-export interface TibAbyssDetailAvatar extends TGApp.Sqlite.Character.AppData {
-  value: number,
+  modelValue: TGApp.Sqlite.Abyss.CharacterInfo;
 }
 
 const props = defineProps<TibAbyssDetailProps>();
-
-const character = ref({} as TibAbyssDetailAvatar);
+const box = ref({} as TItemBoxData);
 
 onMounted(async () => {
   const res = await TGSqlite.getAppCharacter(props.modelValue.id);
-  character.value = {
-    ...res,
-    value: props.modelValue.level,
-  } as TibAbyssDetailAvatar;
+  box.value = {
+    height: "70px",
+    ltSize: "25px",
+    bg: `/icon/bg/${props.modelValue.star}-Star.webp`,
+    icon: `/WIKI/character/icon/${props.modelValue.id}.webp`,
+    lt: `/icon/element/${res.element}元素.webp`,
+    innerText: `Lv.${props.modelValue.level}`,
+    innerHeight: 20,
+    display: "inner",
+    size: "70px",
+  };
 });
 </script>

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

@@ -1,10 +1,10 @@
 <template>
-  <TItemBox :data="character as Record<string,string|number>" size="80px" model-value="abyss-overview" display="inner" />
+  <TItemBox :model-value="box" />
 </template>
 <script lang="ts" setup>
 // vue
 import { onMounted, ref } from "vue";
-import TItemBox from "../main/t-itembox.vue";
+import TItemBox, { TItemBoxData } from "../main/t-itembox.vue";
 // utils
 import TGSqlite from "../../plugins/Sqlite";
 
@@ -12,19 +12,21 @@ interface TibAbyssOverviewProps {
   modelValue: TGApp.Sqlite.Abyss.Character;
 }
 
-export interface TibAbyssOverviewAvatar extends TGApp.Sqlite.Character.AppData {
-  value: number,
-}
-
 const props = defineProps<TibAbyssOverviewProps>();
-
-const character = ref({} as TibAbyssOverviewAvatar);
+const box = ref({} as TItemBoxData);
 
 onMounted(async () => {
   const res = await TGSqlite.getAppCharacter(props.modelValue.id);
-  character.value = {
-    ...res,
-    value: props.modelValue.value,
-  } as TibAbyssOverviewAvatar;
+  box.value = {
+    height: "80px",
+    ltSize: "30px",
+    bg: `/icon/bg/${props.modelValue.star}-Star.webp`,
+    icon: `/WIKI/character/icon/${props.modelValue.id}.webp`,
+    lt: `/icon/element/${res.element}元素.webp`,
+    innerText: props.modelValue.value.toString(),
+    display: "inner",
+    size: "80px",
+    innerHeight: 20,
+  };
 });
 </script>

src/components/itembox/tib-calendar-avatar.vue

@@ -1,13 +1,28 @@
 <template>
-  <TItemBox :data="props.modelValue as Record<string,string|number>" :size="props.size" model-value="calendar-avatar" display="inner" />
+  <TItemBox :model-value="box" />
 </template>
 <script lang="ts" setup>
-import TItemBox from "../main/t-itembox.vue";
+// vue
+import { computed } from "vue";
+import TItemBox, { TItemBoxData } from "../main/t-itembox.vue";
 
 interface TibCalendarAvatarProps {
-  size: string,
   modelValue: TGApp.App.Calendar.Item
 }
 
 const props = defineProps<TibCalendarAvatarProps>();
+const box = computed(() => {
+  return {
+    bg: props.modelValue.bg,
+    icon: props.modelValue.icon,
+    size: "100px",
+    height: "100px",
+    display: "inner",
+    lt: props.modelValue.elementIcon,
+    ltSize: "30px",
+    innerHeight: 25,
+    innerIcon: props.modelValue.weaponIcon,
+    innerText: props.modelValue.name,
+  } as TItemBoxData;
+});
 </script>

src/components/itembox/tib-calendar-weapon.vue

@@ -1,13 +1,27 @@
 <template>
-  <TItemBox :data="props.modelValue as Record<string,string|number>" :size="props.size" model-value="calendar-weapon" display="inner" />
+  <TItemBox :model-value="box" />
 </template>
 <script lang="ts" setup>
-import TItemBox from "../main/t-itembox.vue";
+// vue
+import { computed } from "vue";
+import TItemBox, { TItemBoxData } from "../main/t-itembox.vue";
 
 interface TibCalendarWeaponProps {
-  size: string,
-  modelValue: TGApp.App.Calendar.Item
+  modelValue: TGApp.App.Calendar.Item;
 }
 
 const props = defineProps<TibCalendarWeaponProps>();
+const box = computed(() => {
+  return {
+    bg: props.modelValue.bg,
+    icon: props.modelValue.icon,
+    size: "100px",
+    height: "100px",
+    display: "inner",
+    lt: props.modelValue.weaponIcon,
+    ltSize: "30px",
+    innerHeight: 25,
+    innerText: props.modelValue.name,
+  } as TItemBoxData;
+});
 </script>

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

@@ -1,13 +1,28 @@
 <template>
-  <TItemBox :data="props.modelValue as Record<string,string|number>" :size="props.size" model-value="wiki-avatar" display="inner" />
+  <TItemBox :model-value="box" />
 </template>
 <script lang="ts" setup>
-import TItemBox from "../main/t-itembox.vue";
+// vue
+import { computed } from "vue";
+import TItemBox, { TItemBoxData } from "../main/t-itembox.vue";
 
 interface TibCalendarAvatarProps {
-  size: string,
-  modelValue: TGApp.App.Character.WikiBriefInfo
+  modelValue: TGApp.App.Character.WikiBriefInfo;
 }
 
 const props = defineProps<TibCalendarAvatarProps>();
+const box = computed(() => {
+  return {
+    bg: `/icon/bg/${props.modelValue.star}-Star.webp`,
+    icon: `/WIKI/character/icon/${props.modelValue.id}.webp`,
+    size: "128px",
+    height: "128px",
+    display: "inner",
+    lt: `/icon/element/${props.modelValue.element}元素.webp`,
+    ltSize: "40px",
+    innerHeight: 30,
+    innerIcon: `/icon/weapon/${props.modelValue.weapon}.webp`,
+    innerText: props.modelValue.name,
+  } as TItemBoxData;
+});
 </script>

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

@@ -1,13 +1,27 @@
 <template>
-  <TItemBox :data="props.modelValue as Record<string,string|number>" :size="props.size" model-value="wiki-weapon" display="inner" />
+  <TItemBox :model-value="box" />
 </template>
 <script lang="ts" setup>
-import TItemBox from "../main/t-itembox.vue";
+// vue
+import { computed } from "vue";
+import TItemBox, { TItemBoxData } from "../main/t-itembox.vue";
 
 interface TibCalendarWeaponProps {
-  size: string,
   modelValue: TGApp.App.Weapon.WikiBriefInfo
 }
 
 const props = defineProps<TibCalendarWeaponProps>();
+const box = computed(() => {
+  return {
+    bg: props.modelValue.bg,
+    icon: props.modelValue.icon,
+    size: "128px",
+    height: "128px",
+    display: "inner",
+    lt: props.modelValue.weaponIcon,
+    ltSize: "40px",
+    innerText: props.modelValue.name,
+    innerHeight: 30,
+  } as TItemBoxData;
+});
 </script>