From ab6a41b09b62ce4313c7dc5bec87dc8722c8845b Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Thu, 1 Jun 2023 19:33:04 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=E6=96=B0=E5=BB=BA=20item-box=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../itembox/tib-calendar-avatar.vue           |  13 ++
 .../itembox/tib-calendar-weapon.vue           |  13 ++
 src/components/main/t-calendar.vue            |   8 +-
 src/components/main/t-itembox.vue             | 188 ++++++++++++++++++
 4 files changed, 218 insertions(+), 4 deletions(-)
 create mode 100644 src/components/itembox/tib-calendar-avatar.vue
 create mode 100644 src/components/itembox/tib-calendar-weapon.vue
 create mode 100644 src/components/main/t-itembox.vue

diff --git a/src/components/itembox/tib-calendar-avatar.vue b/src/components/itembox/tib-calendar-avatar.vue
new file mode 100644
index 00000000..f7cc88ec
--- /dev/null
+++ b/src/components/itembox/tib-calendar-avatar.vue
@@ -0,0 +1,13 @@
+<template>
+  <TItemBox :data="props.modelValue as Record<string,string|number>" :size="props.size" model-value="calendar-avatar" display="inner" />
+</template>
+<script lang="ts" setup>
+import TItemBox from "../main/t-itembox.vue";
+
+interface TibCalendarAvatarProps {
+  size: string,
+  modelValue: TGApp.App.Calendar.Item
+}
+
+const props = defineProps<TibCalendarAvatarProps>();
+</script>
diff --git a/src/components/itembox/tib-calendar-weapon.vue b/src/components/itembox/tib-calendar-weapon.vue
new file mode 100644
index 00000000..d4d80f95
--- /dev/null
+++ b/src/components/itembox/tib-calendar-weapon.vue
@@ -0,0 +1,13 @@
+<template>
+  <TItemBox :data="props.modelValue as Record<string,string|number>" :size="props.size" model-value="calendar-weapon" display="inner" />
+</template>
+<script lang="ts" setup>
+import TItemBox from "../main/t-itembox.vue";
+
+interface TibCalendarWeaponProps {
+  size: string,
+  modelValue: TGApp.App.Calendar.Item
+}
+
+const props = defineProps<TibCalendarWeaponProps>();
+</script>
diff --git a/src/components/main/t-calendar.vue b/src/components/main/t-calendar.vue
index efec37b4..beffd6d0 100644
--- a/src/components/main/t-calendar.vue
+++ b/src/components/main/t-calendar.vue
@@ -36,7 +36,7 @@
           class="card-box"
           @click="selectContent(item, 'character')"
         >
-          <TMiniAvatar size="100px" :model-value="item" />
+          <TibCalendarAvatar size="100px" :model-value="item" />
         </div>
       </div>
     </div>
@@ -52,7 +52,7 @@
           class="card-box"
           @click="selectContent(item, 'weapon')"
         >
-          <TMiniWeapon size="100px" :model-value="item" />
+          <TibCalendarWeapon size="100px" :model-value="item" />
         </div>
       </div>
     </div>
@@ -63,8 +63,8 @@
 // vue
 import { computed, onMounted, ref } from "vue";
 import ToCalendar from "../overlay/to-calendar.vue";
-import TMiniAvatar from "../mini/t-mini-avatar.vue";
-import TMiniWeapon from "../mini/t-mini-weapon.vue";
+import TibCalendarAvatar from "../itembox/tib-calendar-avatar.vue";
+import TibCalendarWeapon from "../itembox/tib-calendar-weapon.vue";
 // data
 import { AppCalendarData } from "../../data";
 
diff --git a/src/components/main/t-itembox.vue b/src/components/main/t-itembox.vue
new file mode 100644
index 00000000..28fa4ddd
--- /dev/null
+++ b/src/components/main/t-itembox.vue
@@ -0,0 +1,188 @@
+<template>
+  <div class="tib-box">
+    <div class="tib-bg">
+      <slot name="bg">
+        <img :src="card.bg" alt="bg">
+      </slot>
+    </div>
+    <div class="tib-icon">
+      <slot name="icon">
+        <img :src="card.icon" alt="icon">
+      </slot>
+    </div>
+    <div class="tib-cover">
+      <div class="tib-lt">
+        <img :src="card.lt" alt="lt">
+      </div>
+      <div v-show="card.rt" class="tib-rt">
+        {{ card.rt }}
+      </div>
+      <div v-show="props.display==='inner'" class="tib-inner">
+        <slot name="inner-icon">
+          <img v-show="card.innerIcon" :src="card.innerIcon" alt="inner-icon">
+        </slot>
+        <slot name="inner-text">
+          <span>{{ card.innerText }}</span>
+        </slot>
+      </div>
+      <div v-show="props.display==='outer'" class="tib-outer">
+        <slot name="outer-icon">
+          <img v-show="card.outerIcon" :src="card.outerIcon" alt="outer-icon">
+        </slot>
+        <slot name="outer-text">
+          <span>{{ card.outerText }}</span>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+// vue
+import { computed, ComputedRef } from "vue";
+
+interface TItemBoxProps {
+  modelValue: string
+  data: Record<string, string | number>,
+  display: "inner" | "outer",
+  size: string,
+}
+
+interface TItemBoxCard {
+  bg: string,
+  icon: string,
+  lt: string,
+  rt?: string,
+  innerIcon?: string,
+  innerText?: string,
+  outerIcon?: string,
+  outerText?: string,
+}
+
+const props = defineProps<TItemBoxProps>();
+
+const getSize = computed(() => {
+  return props.size === "100px" ? "30px" : "40px";
+});
+
+const getHeight = computed(() => {
+  return props.display === "inner" ? props.size : `${props.size.slice(0, -2) + 20}px`;
+});
+
+const card: ComputedRef<TItemBoxCard> = computed(() => {
+  let cardData;
+  switch (props.modelValue) {
+    case "calendar-avatar":
+      cardData = props.data as TGApp.App.Calendar.Item;
+      return {
+        bg: cardData.bg,
+        icon: cardData.icon,
+        lt: cardData.elementIcon,
+        innerIcon: cardData.weaponIcon,
+        innerText: cardData.name,
+      } as TItemBoxCard;
+    case "calendar-weapon":
+      cardData = props.data as TGApp.App.Calendar.Item;
+      return {
+        bg: cardData.bg,
+        icon: cardData.icon,
+        lt: cardData.weaponIcon,
+        innerText: cardData.name,
+      } as TItemBoxCard;
+    case "wiki-avatar":
+      cardData = props.data as TGApp.App.Character.WikiBriefInfo;
+  }
+});
+
+</script>
+<style lang="css" scoped>
+.tib-box {
+  position: relative;
+  width: v-bind(size);
+  height: v-bind(getHeight);
+  cursor: pointer;
+}
+
+.tib-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+.tib-bg img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.tib-icon {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: 5px;
+}
+
+.tib-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.tib-cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.tib-lt {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: v-bind(getSize);
+  height: v-bind(getSize);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.tib-lt img {
+  width: calc(v-bind(getSize) - 10px);
+  height: calc(v-bind(getSize) - 10px);
+  object-fit: cover;
+}
+
+.tib-inner {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: v-bind(getSize);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgb(20 20 20 / 50%);
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  color: #fff;
+  font-size: calc(v-bind(getSize) / 3);
+  text-shadow: 0 0 5px #000;
+  font-family: Genshin, serif;
+}
+
+.tib-inner img {
+  width: calc(v-bind(getSize) / 1.5);
+  height: calc(v-bind(getSize) / 1.5);
+  margin-right: 5px;
+}
+</style>