From 05b4e5a497924716f85a08f93685284e0e890d89 Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Thu, 1 Jun 2023 20:40:37 +0800
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=E6=9B=BF=E6=8D=A2=20t-min?=
 =?UTF-8?q?i-avatar=20=E4=B8=8E=20t-mini-weapon=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/itembox/tib-wiki-avatar.vue |  13 +++
 src/components/itembox/tib-wiki-weapon.vue |  13 +++
 src/components/main/t-itembox.vue          |  15 +++
 src/components/mini/t-mini-avatar.vue      | 127 ---------------------
 src/components/mini/t-mini-weapon.vue      | 119 -------------------
 src/components/overlay/to-calendar.vue     |   8 +-
 src/pages/WIKI/Character.vue               |   4 +-
 src/pages/WIKI/Weapon.vue                  |   4 +-
 8 files changed, 49 insertions(+), 254 deletions(-)
 create mode 100644 src/components/itembox/tib-wiki-avatar.vue
 create mode 100644 src/components/itembox/tib-wiki-weapon.vue
 delete mode 100644 src/components/mini/t-mini-avatar.vue
 delete mode 100644 src/components/mini/t-mini-weapon.vue

diff --git a/src/components/itembox/tib-wiki-avatar.vue b/src/components/itembox/tib-wiki-avatar.vue
new file mode 100644
index 00000000..c813571e
--- /dev/null
+++ b/src/components/itembox/tib-wiki-avatar.vue
@@ -0,0 +1,13 @@
+<template>
+  <TItemBox :data="props.modelValue as Record<string,string|number>" :size="props.size" model-value="wiki-avatar" display="inner" />
+</template>
+<script lang="ts" setup>
+import TItemBox from "../main/t-itembox.vue";
+
+interface TibCalendarAvatarProps {
+  size: string,
+  modelValue: TGApp.App.Character.WikiBriefInfo
+}
+
+const props = defineProps<TibCalendarAvatarProps>();
+</script>
diff --git a/src/components/itembox/tib-wiki-weapon.vue b/src/components/itembox/tib-wiki-weapon.vue
new file mode 100644
index 00000000..48c37348
--- /dev/null
+++ b/src/components/itembox/tib-wiki-weapon.vue
@@ -0,0 +1,13 @@
+<template>
+  <TItemBox :data="props.modelValue as Record<string,string|number>" :size="props.size" model-value="wiki-weapon" display="inner" />
+</template>
+<script lang="ts" setup>
+import TItemBox from "../main/t-itembox.vue";
+
+interface TibCalendarWeaponProps {
+  size: string,
+  modelValue: TGApp.App.Weapon.WikiBriefInfo
+}
+
+const props = defineProps<TibCalendarWeaponProps>();
+</script>
diff --git a/src/components/main/t-itembox.vue b/src/components/main/t-itembox.vue
index 28fa4ddd..8571de26 100644
--- a/src/components/main/t-itembox.vue
+++ b/src/components/main/t-itembox.vue
@@ -90,6 +90,21 @@ const card: ComputedRef<TItemBoxCard> = computed(() => {
       } as TItemBoxCard;
     case "wiki-avatar":
       cardData = props.data as TGApp.App.Character.WikiBriefInfo;
+      return {
+        bg: `/icon/bg/${cardData.star}-Star.webp`,
+        icon: `/WIKI/character/icon/${cardData.id}.webp`,
+        lt: `/icon/element/${cardData.element}元素.webp`,
+        innerIcon: `/icon/weapon/${cardData.weapon}.webp`,
+        innerText: cardData.name,
+      } as TItemBoxCard;
+    case "wiki-weapon":
+      cardData = props.data as TGApp.App.Weapon.WikiBriefInfo;
+      return {
+        bg: cardData.bg,
+        icon: cardData.icon,
+        lt: cardData.weaponIcon,
+        innerText: cardData.name,
+      } as TItemBoxCard;
   }
 });
 
diff --git a/src/components/mini/t-mini-avatar.vue b/src/components/mini/t-mini-avatar.vue
deleted file mode 100644
index 4e8dbc98..00000000
--- a/src/components/mini/t-mini-avatar.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<template>
-  <div class="card-box">
-    <!-- 底层背景图 -->
-    <div class="card-bg">
-      <img :src="props.modelValue.bg" alt="bg">
-    </div>
-    <!-- 中层角色图 -->
-    <div class="card-icon">
-      <img :src="props.modelValue.icon" alt="icon">
-    </div>
-    <!-- 上层图标&内容 -->
-    <div class="card-cover">
-      <div class="card-element">
-        <img :src="props.modelValue.elementIcon" alt="element">
-      </div>
-      <div class="card-name">
-        <img :src="props.modelValue.weaponIcon" alt="weapon">
-        <span>{{ props.modelValue.name }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { computed } from "vue";
-interface TMiniWeaponProps {
-  size: string;
-  modelValue: TGApp.App.Character.WikiBriefInfo | TGApp.App.Calendar.Item;
-}
-
-const props = defineProps<TMiniWeaponProps>();
-
-const getSize = computed(() => {
-  return props.size === "100px" ? "30px" : "40px";
-});
-</script>
-<style lang="css" scoped>
-.card-box {
-    position: relative;
-    width: v-bind(size);
-    height: v-bind(size);
-    cursor: pointer;
-}
-
-.card-bg {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: 5px;
-    overflow: hidden;
-}
-
-.card-bg img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.card-icon {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    border-radius: 5px;
-}
-
-.card-icon img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.card-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;
-}
-
-.card-element {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: v-bind(getSize);
-    height: v-bind(getSize);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.card-element img {
-    width: calc(v-bind(getSize) - 10px);
-    height: calc(v-bind(getSize) - 10px);
-    object-fit: cover;
-}
-
-.card-name img {
-    width: calc(v-bind(getSize) / 1.5);
-    height: calc(v-bind(getSize) / 1.5);
-    margin-right: 5px;
-}
-
-.card-name {
-    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;
-}
-</style>
diff --git a/src/components/mini/t-mini-weapon.vue b/src/components/mini/t-mini-weapon.vue
deleted file mode 100644
index a6a40cb7..00000000
--- a/src/components/mini/t-mini-weapon.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<template>
-  <div class="card-box">
-    <!-- 底层背景图 -->
-    <div class="card-bg">
-      <img :src="props.modelValue.bg" alt="bg">
-    </div>
-    <!-- 中层武器图 -->
-    <div class="card-icon">
-      <img :src="props.modelValue.icon" alt="icon">
-    </div>
-    <!-- 上层图标&内容 -->
-    <div class="card-cover">
-      <div class="card-weapon">
-        <img :src="props.modelValue.weaponIcon" alt="type">
-      </div>
-      <div class="card-name">
-        <span>{{ props.modelValue.name }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { computed } from "vue";
-interface TMiniWeaponProps {
-  size: string;
-  modelValue: TGApp.App.Weapon.WikiBriefInfo | TGApp.App.Calendar.Item
-}
-
-const props = defineProps<TMiniWeaponProps>();
-const getSize = computed(() => {
-  return props.size === "100px" ? "30px" : "40px";
-});
-</script>
-<style lang="css" scoped>
-.card-box {
-    position: relative;
-    width: v-bind(size);
-    height: v-bind(size);
-    cursor: pointer;
-}
-
-.card-bg {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: 5px;
-    overflow: hidden;
-}
-
-.card-bg img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.card-icon {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    border-radius: 5px;
-}
-
-.card-icon img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.card-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;
-}
-
-.card-weapon {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: v-bind(getSize);
-    height: v-bind(getSize);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.card-weapon img {
-    width: calc(v-bind(getSize) - 10px);
-    height: calc(v-bind(getSize) - 10px);
-    object-fit: cover;
-}
-
-.card-name {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 30px;
-    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;
-}
-</style>
diff --git a/src/components/overlay/to-calendar.vue b/src/components/overlay/to-calendar.vue
index e6fac82e..481d7d6d 100644
--- a/src/components/overlay/to-calendar.vue
+++ b/src/components/overlay/to-calendar.vue
@@ -4,8 +4,8 @@
       <div class="box-div">
         <div class="toc-top">
           <div class="toc-icon">
-            <TMiniAvatar v-if="itemType=== 'character'" v-model="itemVal" size="100px" />
-            <TMiniWeapon v-if="itemType=== 'weapon'" v-model="itemVal" size="100px" />
+            <TibCalendarAvatar v-if="itemType=== 'character'" v-model="itemVal" size="100px" />
+            <TibCalendarWeapon v-if="itemType=== 'weapon'" v-model="itemVal" size="100px" />
           </div>
           <div class="toc-material-grid">
             <TCalendarMaterial v-for="item in itemVal.materials" :item="item" />
@@ -46,8 +46,8 @@
 import { computed, ref } from "vue";
 import TOverlay from "../main/t-overlay.vue";
 import TCalendarMaterial from "../mini/t-calendar-material.vue";
-import TMiniAvatar from "../mini/t-mini-avatar.vue";
-import TMiniWeapon from "../mini/t-mini-weapon.vue";
+import TibCalendarWeapon from "../itembox/tib-calendar-weapon.vue";
+import TibCalendarAvatar from "../itembox/tib-calendar-avatar.vue";
 // utils
 import { OBC_CONTENT_API } from "../../plugins/Mys/interface/utils";
 import { createTGWindow } from "../../utils/TGWindow";
diff --git a/src/pages/WIKI/Character.vue b/src/pages/WIKI/Character.vue
index ebf55aab..9cebaa0f 100644
--- a/src/pages/WIKI/Character.vue
+++ b/src/pages/WIKI/Character.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="cards-grid">
     <div v-for="item in cardsInfo" :key="item.id" class="card-box" @click="toOuter(item)">
-      <TMiniAvatar size="128px" :model-value="item" />
+      <TibWikiAvatar size="128px" :model-value="item" />
     </div>
     <v-snackbar v-model="snackbar" timeout="1500" color="error">
       该角色暂无详情
@@ -12,7 +12,7 @@
 <script lang="ts" setup>
 // vue
 import { ref, computed } from "vue";
-import TMiniAvatar from "../../components/mini/t-mini-avatar.vue";
+import TibWikiAvatar from "../../components/itembox/tib-wiki-avatar.vue";
 // utils
 import { createTGWindow } from "../../utils/TGWindow";
 import { AppCharacterData } from "../../data";
diff --git a/src/pages/WIKI/Weapon.vue b/src/pages/WIKI/Weapon.vue
index 372f3e5c..7493dd4b 100644
--- a/src/pages/WIKI/Weapon.vue
+++ b/src/pages/WIKI/Weapon.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="cards-grid">
     <div v-for="item in cardsInfo" :key="item.id" class="card-box" @click="toOuter(item)">
-      <TMiniWeapon size="128px" :model-value="item" />
+      <TibWikiWeapon size="128px" :model-value="item" />
     </div>
     <v-snackbar v-model="snackbar" timeout="1500" color="error">
       该武器暂无详情
@@ -12,7 +12,7 @@
 <script lang="ts" setup>
 // vue
 import { ref, computed } from "vue";
-import TMiniWeapon from "../../components/mini/t-mini-weapon.vue";
+import TibWikiWeapon from "../../components/itembox/tib-wiki-weapon.vue";
 // utils
 import { createTGWindow } from "../../utils/TGWindow";
 import { AppWeaponData } from "../../data";