♻️ 优化素材日历组件

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

@@ -1,28 +0,0 @@
-<template>
-  <TItemBox :model-value="box" style="cursor: pointer" />
-</template>
-<script lang="ts" setup>
-// vue
-import { computed } from "vue";
-import TItemBox, { TItemBoxData } from "../main/t-itembox.vue";
-
-interface TibCalendarAvatarProps {
-  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-item.vue

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

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

@@ -1,27 +0,0 @@
-<template>
-  <TItemBox :model-value="box" style="cursor: pointer" />
-</template>
-<script lang="ts" setup>
-// vue
-import { computed } from "vue";
-import TItemBox, { TItemBoxData } from "../main/t-itembox.vue";
-
-interface TibCalendarWeaponProps {
-  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>