🌱 材料详情

src/components/wiki/twc-materials.vue

@@ -1,7 +1,11 @@
 <template>
-  <!-- todo 点击展开 overlay -->
   <div class="twc-materials-grid">
-    <div class="twc-material-box" v-for="(item, index) in props.data" :key="index">
+    <div
+      class="twc-material-box"
+      v-for="(item, index) in props.data"
+      :key="index"
+      @click="checkData(item)"
+    >
       <div class="twc-material-left">
         <div class="twc-material-bg">
           <img :src="item.bg" alt="bg" />
@@ -15,13 +19,35 @@
       </div>
     </div>
   </div>
+  <TwoMaterial :data="curData" v-model="showOverlay" />
 </template>
 <script lang="ts" setup>
+import { ref } from "vue";
+
+import TwoMaterial from "./two-material.vue";
+import { WikiMaterialData } from "../../data";
+import showSnackbar from "../func/snackbar";
+
 interface TwcMaterialsProp {
   data: TGApp.App.Calendar.Material[];
 }
 
 const props = defineProps<TwcMaterialsProp>();
+const showOverlay = ref(false);
+const curData = ref<TGApp.App.Material.WikiItem>();
+
+function checkData(item: TGApp.App.Calendar.Material) {
+  const material = WikiMaterialData.find((m) => m.id === item.id);
+  if (material) {
+    curData.value = material;
+    showOverlay.value = true;
+  } else {
+    showSnackbar({
+      text: `材料 ${item.name} 暂无详细信息`,
+      color: "warn",
+    });
+  }
+}
 </script>
 <style lang="css" scoped>
 .twc-materials-grid {
@@ -38,6 +64,7 @@ const props = defineProps<TwcMaterialsProp>();
   border: 1px solid var(--common-shadow-1);
   border-radius: 5px;
   background: var(--box-bg-1);
+  cursor: pointer;
   gap: 10px;
 }
 

src/components/wiki/two-material.vue

@@ -0,0 +1,84 @@
+<template>
+  <TOverlay v-model="visible" hide :to-click="onCancel" blur-val="20px">
+    <div v-if="props.data" class="twom-container">
+      <div class="twom-box">
+        <!-- todo 根据类型显示不同的背景 -->
+        <div class="twom-top">
+          <div class="twom-ttl">{{ props.data.name }}</div>
+          <div class="twom-right">
+            <img :src="`/icon/material/${props.data.id}.webp`" alt="icon" />
+          </div>
+          <div class="twom-tbl">{{ props.data.type }}</div>
+        </div>
+        <div class="twom-bottom">
+          <div class="twom-desc">{{ props.data.description }}</div>
+          <div class="twom-source" v-if="props.data.source.length > 1">
+            {{ props.data.source }}
+          </div>
+          <div class="twom-convert" v-if="props.data.convert.length > 1">
+            {{ props.data.convert }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </TOverlay>
+</template>
+<script setup lang="ts">
+import { computed } from "vue";
+
+import TOverlay from "../main/t-overlay.vue";
+
+interface TwoMaterialProps {
+  modelValue: boolean;
+  data: TGApp.App.Material.WikiItem;
+}
+
+type TwoMaterialEmits = (e: "update:modelValue", value: boolean) => void;
+
+const props = defineProps<TwoMaterialProps>();
+const emits = defineEmits<TwoMaterialEmits>();
+
+const visible = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emits("update:modelValue", value);
+  },
+});
+
+function onCancel() {
+  visible.value = false;
+}
+</script>
+<style lang="css" scoped>
+.twom-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  border-radius: 10px;
+  background: var(--app-side-bg);
+  column-gap: 10px;
+}
+
+.twom-box {
+  position: relative;
+  overflow: hidden;
+  width: 800px;
+  height: 400px;
+  border-radius: 10px;
+}
+
+.twom-top {
+  position: relative;
+  display: flex;
+  height: 200px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+  border-bottom: 1px solid var(--common-shadow-1);
+  background-position: center;
+  background-size: cover;
+}
+</style>

src/data/index.ts

@@ -12,6 +12,7 @@ import GCG from "./app/GCG.json";
 import nameCards from "./app/namecard.json";
 import weapon from "./app/weapon.json";
 import wikiCharacter from "./WIKI/character.json";
+import wikiMaterial from "./WIKI/material.json";
 import wikiWeapon from "./WIKI/weapon.json";
 
 export const AppAchievementsData: TGApp.App.Achievement.Item[] = achievements;
@@ -23,3 +24,4 @@ export const AppNameCardsData: TGApp.App.NameCard.Item[] = nameCards;
 export const AppWeaponData: TGApp.App.Weapon.WikiBriefInfo[] = weapon;
 export const WikiCharacterData: TGApp.App.Character.WikiItem[] = wikiCharacter;
 export const WikiWeaponData: TGApp.App.Weapon.WikiItem[] = wikiWeapon;
+export const WikiMaterialData: TGApp.App.Material.WikiItem[] = wikiMaterial;

src/types/App/Material.d.ts

@@ -0,0 +1,68 @@
+/**
+ * @file types/App/Material.d.ts
+ * @description 应用素材日历相关类型定义文件
+ * @since Beta v0.4.2
+ */
+
+declare namespace TGApp.App.Material {
+  /**
+   * @description wiki 页的信息
+   * @since Beta v0.4.2
+   * @interface WikiItem
+   * @property {number} id - 材料id
+   * @property {string} name - 材料名称
+   * @property {string} description - 材料简介
+   * @property {string} type - 材料类型
+   * @property {number} star - 材料星级
+   * @property {Source[]} source - 材料来源
+   * @property {Convert[]} convert - 材料转换
+   * @return WikiItem
+   */
+  interface WikiItem {
+    id: number;
+    name: string;
+    description: string;
+    type: string;
+    star: number;
+    source: Source[];
+    convert: Convert[];
+  }
+
+  /**
+   * @description 材料来源
+   * @since Beta v0.4.2
+   * @interface Source
+   * @property {string} name - 来源名称
+   * @property {string} type - 来源类型
+   * @property {string[]} days - 来源日
+   * @return Source
+   */
+  interface Source {
+    name: string;
+    type: string;
+    days?: string[];
+  }
+
+  /**
+   * @description 材料转换
+   * @since Beta v0.4.2
+   * @interface Convert
+   * @property {string} id 转换ID
+   * @property {string} souce[].id 转换前材料ID
+   * @property {string} souce[].name 转换前材料名称
+   * @property {string} source[].type 转换前材料类型
+   * @property {number} source[].star 转换前材料星级
+   * @property {number} souce[].count 转换前材料数量
+   * @return Convert
+   */
+  interface Convert {
+    id: string;
+    source: Array<{
+      id: string;
+      name: string;
+      type: string;
+      star: number;
+      count: number;
+    }>;
+  }
+}