From 779bc3a0d3184048ff714e36282f32892abce824 Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Fri, 19 May 2023 18:49:06 +0800
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=E5=8F=A0=E5=B1=82?=
 =?UTF-8?q?=E5=8D=95=E7=8B=AC=E6=8F=90=E5=87=BA=E6=9D=A5=E4=BD=9C=E4=B8=BA?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=BD=BF=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/t-mini-avatar.vue | 150 +++++++++++++++++++++++++++++++
 src/components/t-mini-weapon.vue | 142 +++++++++++++++++++++++++++++
 src/pages/WIKI/Character.vue     | 111 +----------------------
 src/pages/WIKI/Weapon.vue        | 114 +----------------------
 src/types/Calendar.d.ts          |   2 +-
 src/types/Character.d.ts         |   6 +-
 src/types/Weapon.d.ts            |   2 +-
 7 files changed, 303 insertions(+), 224 deletions(-)
 create mode 100644 src/components/t-mini-avatar.vue
 create mode 100644 src/components/t-mini-weapon.vue

diff --git a/src/components/t-mini-avatar.vue b/src/components/t-mini-avatar.vue
new file mode 100644
index 00000000..a9e52497
--- /dev/null
+++ b/src/components/t-mini-avatar.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="card-box">
+    <!-- 底层背景图 -->
+    <div class="card-bg">
+      <img :src="item.bg" alt="bg">
+    </div>
+    <!-- 中层角色图 -->
+    <div class="card-icon">
+      <img :src="item.icon" alt="icon">
+    </div>
+    <!-- 上层图标&内容 -->
+    <div class="card-cover">
+      <div class="card-element">
+        <img :src="item.element" alt="element">
+      </div>
+      <div class="card-name">
+        <img :src="item.weapon_type" alt="weapon">
+        <span>{{ item.name }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from "vue";
+interface TMiniWeaponProps {
+  size: string;
+  modelValue: BTMuli.Genshin.Wiki.Character.BriefInfo | BTMuli.Genshin.Calendar.Data
+}
+
+const props = defineProps<TMiniWeaponProps>();
+
+const getSize = computed(() => {
+  return props.size === "100px" ? "30px" : "40px";
+});
+
+const item = computed(() => {
+  let res;
+  if (props.modelValue.hasOwnProperty("weapon_type")) {
+    res = props.modelValue as BTMuli.Genshin.Wiki.Character.BriefInfo;
+    return {
+      bg: res.bg,
+      icon: res.icon,
+      element: res.element,
+      weapon_type: res.weapon_type,
+      name: res.name,
+    };
+  } else {
+    res = props.modelValue as BTMuli.Genshin.Calendar.Data;
+    return {
+      bg: res.bg,
+      icon: res.icon,
+      element: res.element,
+      weapon_type: res.weapon,
+      name: res.name,
+    };
+  }
+});
+</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/t-mini-weapon.vue b/src/components/t-mini-weapon.vue
new file mode 100644
index 00000000..de9a27fb
--- /dev/null
+++ b/src/components/t-mini-weapon.vue
@@ -0,0 +1,142 @@
+<template>
+  <div class="card-box">
+    <!-- 底层背景图 -->
+    <div class="card-bg">
+      <img :src="item.bg" alt="bg">
+    </div>
+    <!-- 中层武器图 -->
+    <div class="card-icon">
+      <img :src="item.icon" alt="icon">
+    </div>
+    <!-- 上层图标&内容 -->
+    <div class="card-cover">
+      <div class="card-weapon">
+        <img :src="item.weapon_type" alt="type">
+      </div>
+      <div class="card-name">
+        <span>{{ item.name }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from "vue";
+interface TMiniWeaponProps {
+  size: string;
+  modelValue: BTMuli.Genshin.Wiki.Weapon.BriefInfo | BTMuli.Genshin.Calendar.Data
+}
+
+const props = defineProps<TMiniWeaponProps>();
+const getSize = computed(() => {
+  return props.size === "100px" ? "30px" : "40px";
+});
+
+const item = computed(() => {
+  let res;
+  if (!props.modelValue.hasOwnProperty("weapon_type")) {
+    res = props.modelValue as BTMuli.Genshin.Wiki.Weapon.BriefInfo;
+    return {
+      bg: res.bg,
+      icon: res.icon,
+      element: res.element,
+      weapon_type: res.type,
+      name: res.name,
+    };
+  } else {
+    res = props.modelValue as BTMuli.Genshin.Calendar.Data;
+    return {
+      bg: res.bg,
+      icon: res.icon,
+      element: res.element,
+      weapon_type: res.weapon_type,
+      name: res.name,
+    };
+  }
+});
+</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/pages/WIKI/Character.vue b/src/pages/WIKI/Character.vue
index 27218d4b..7167e5c7 100644
--- a/src/pages/WIKI/Character.vue
+++ b/src/pages/WIKI/Character.vue
@@ -1,24 +1,7 @@
 <template>
   <div class="cards-grid">
     <div v-for="item in cardsInfo" :key="item.id" class="card-box" @click="toOuter(item)">
-      <!-- 底层背景图 -->
-      <div class="card-bg">
-        <img :src="item.bg" alt="bg">
-      </div>
-      <!-- 中层角色图 -->
-      <div class="card-icon">
-        <img :src="item.icon" alt="icon">
-      </div>
-      <!-- 上层图标&内容 -->
-      <div class="card-cover">
-        <div class="card-element">
-          <img :src="item.element" alt="element">
-        </div>
-        <div class="card-name">
-          <img :src="item.weapon" alt="weapon">
-          <span>{{ item.name }}</span>
-        </div>
-      </div>
+      <TMiniAvatar size="128px" :model-value="item" />
     </div>
     <v-snackbar v-model="snackbar" timeout="1500" color="error">
       该角色暂无详情
@@ -29,6 +12,7 @@
 <script lang="ts" setup>
 // vue
 import { ref, onMounted } from "vue";
+import TMiniAvatar from "../../components/t-mini-avatar.vue";
 // utils
 import { createTGWindow } from "../../utils/TGWindow";
 import { TGAppData } from "../../data";
@@ -60,95 +44,4 @@ function toOuter (item: BTMuli.Genshin.Wiki.Character.BriefInfo) {
   grid-gap: 20px;
   padding: 20px;
 }
-
-.card-box {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  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: 40px;
-  height: 40px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.card-element img {
-  width: 30px;
-  height: 30px;
-  object-fit: cover;
-}
-
-.card-name img {
-  width: 20px;
-  height: 20px;
-  margin-right: 5px;
-}
-
-.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: 20px;
-  text-shadow: 0 0 5px #000;
-  font-family: Genshin, serif;
-}
 </style>
diff --git a/src/pages/WIKI/Weapon.vue b/src/pages/WIKI/Weapon.vue
index bb497564..fd8f9929 100644
--- a/src/pages/WIKI/Weapon.vue
+++ b/src/pages/WIKI/Weapon.vue
@@ -1,23 +1,7 @@
 <template>
   <div class="cards-grid">
     <div v-for="item in cardsInfo" :key="item.id" class="card-box" @click="toOuter(item)">
-      <!-- 底层背景图 -->
-      <div class="card-bg">
-        <img :src="item.bg" alt="bg">
-      </div>
-      <!-- 中层武器图 -->
-      <div class="card-icon">
-        <img :src="item.icon" alt="icon">
-      </div>
-      <!-- 上层图标&内容 -->
-      <div class="card-cover">
-        <div class="card-type">
-          <img :src="item.type" alt="type">
-        </div>
-        <div class="card-name">
-          <span>{{ item.name }}</span>
-        </div>
-      </div>
+      <TMiniWeapon size="128px" :model-value="item" />
     </div>
     <v-snackbar v-model="snackbar" timeout="1500" color="error">
       该武器暂无详情
@@ -28,6 +12,7 @@
 <script lang="ts" setup>
 // vue
 import { ref, onMounted } from "vue";
+import TMiniWeapon from "../../components/t-mini-weapon.vue";
 // utils
 import { createTGWindow } from "../../utils/TGWindow";
 import { TGAppData } from "../../data";
@@ -56,98 +41,7 @@ function toOuter (item: BTMuli.Genshin.Wiki.Weapon.BriefInfo) {
 .cards-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
-  grid-gap: 20px;
-  padding: 20px;
-}
-
-.card-box {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  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-type {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 40px;
-  height: 40px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.card-type img {
-  width: 30px;
-  height: 30px;
-  object-fit: cover;
-}
-
-.card-name img {
-  width: 20px;
-  height: 20px;
-  margin-right: 5px;
-}
-
-.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: 20px;
-  text-shadow: 0 0 5px #000;
-  font-family: Genshin, serif;
+  grid-gap: 15px;
+  padding: 15px;
 }
 </style>
diff --git a/src/types/Calendar.d.ts b/src/types/Calendar.d.ts
index e1222f38..0416f38b 100644
--- a/src/types/Calendar.d.ts
+++ b/src/types/Calendar.d.ts
@@ -26,7 +26,7 @@ declare namespace BTMuli.Genshin.Calendar {
      */
   export interface Data {
     id: number
-    content_id: number
+    content_id: number | null
     drop_day: number[]
     name: string
     item_type: string
diff --git a/src/types/Character.d.ts b/src/types/Character.d.ts
index f4d97c69..60b91d92 100644
--- a/src/types/Character.d.ts
+++ b/src/types/Character.d.ts
@@ -2,13 +2,13 @@
  * @file types Character.d.ts
  * @author BTMuli<bt-muli@outlook.com>
  * @description 角色相关类型定义
- * @since Alpha v0.1.3
+ * @since Alpha v0.1.5
  */
 
 declare namespace BTMuli.Genshin.Wiki.Character {
   /**
    * @description 简略信息，用于整体展示
-   * @since Alpha v0.1.3
+   * @since Alpha v0.1.5
    * @interface BriefInfo
    * @property {number} id - 角色 ID
    * @property {number} content_id - 观测枢 id
@@ -22,7 +22,7 @@ declare namespace BTMuli.Genshin.Wiki.Character {
    */
   export interface BriefInfo {
     id: number
-    content_id?: number
+    content_id?: number | null
     name: string
     star: number
     bg: string
diff --git a/src/types/Weapon.d.ts b/src/types/Weapon.d.ts
index 9647c17f..0fa7480d 100644
--- a/src/types/Weapon.d.ts
+++ b/src/types/Weapon.d.ts
@@ -22,7 +22,7 @@ declare namespace BTMuli.Genshin.Wiki.Weapon {
    */
   export interface BriefInfo {
     id: number
-    content_id?: number
+    content_id?: number | null
     name: string
     star: number
     bg: string