✨ 材料overlay完工

src/components/wiki/twc-materials.vue

@@ -37,6 +37,7 @@ const showOverlay = ref(false);
 const curData = ref<TGApp.App.Material.WikiItem>();
 
 function checkData(item: TGApp.App.Calendar.Material) {
+  if (showOverlay.value) showOverlay.value = false;
   const material = WikiMaterialData.find((m) => m.id === item.id);
   if (material) {
     curData.value = material;

src/components/wiki/two-convert.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="twoc-container">
+    <v-icon>mdi-all-inclusive</v-icon>
+    <div class="twoc-box" v-for="(item, index) in props.data.source" :key="index">
+      <img
+        class="twoc-left"
+        :src="`/icon/material/${item.id}.webp`"
+        alt="icon"
+        :style="{
+          'background-image': `url('/icon/bg/${item.star}-BGC.webp')`,
+        }"
+      />
+      <div class="twoc-right">
+        <span>{{ item.name }}</span>
+        <span>{{ item.count }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+interface TwoConvertProps {
+  data: TGApp.App.Material.Convert;
+}
+
+const props = defineProps<TwoConvertProps>();
+</script>
+<style lang="css" scoped>
+.twoc-container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: flex-start;
+  border-radius: 5px;
+  column-gap: 10px;
+}
+
+.twoc-box {
+  display: flex;
+  border-radius: 5px;
+  background: var(--box-bg-3);
+  color: var(--box-text-4);
+  column-gap: 5px;
+}
+
+.twoc-left {
+  display: flex;
+  width: 45px;
+  height: 45px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.twoc-right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding-right: 10px;
+  column-gap: 15px;
+}
+</style>

src/components/wiki/two-material.vue

@@ -2,21 +2,18 @@
   <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>
+          <img :src="`/icon/material/${props.data.id}.webp`" alt="icon" class="twom-left" />
+          <div class="twom-name">{{ props.data.name }}</div>
+          <div class="twom-type">{{ props.data.type }}</div>
         </div>
         <div class="twom-bottom">
-          <div class="twom-desc">{{ props.data.description }}</div>
+          <div class="twom-desc">{{ parseDesc() }}</div>
           <div class="twom-source" v-if="props.data.source.length > 1">
-            {{ props.data.source }}
+            <TwoSource :data="item" v-for="(item, index) in props.data.source" :key="index" />
           </div>
           <div class="twom-convert" v-if="props.data.convert.length > 1">
-            {{ props.data.convert }}
+            <TwoConvert :data="item" v-for="(item, index) in props.data.convert" :key="index" />
           </div>
         </div>
       </div>
@@ -26,6 +23,8 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
+import TwoConvert from "./two-convert.vue";
+import TwoSource from "./two-source.vue";
 import TOverlay from "../main/t-overlay.vue";
 
 interface TwoMaterialProps {
@@ -46,8 +45,18 @@ const visible = computed({
     emits("update:modelValue", value);
   },
 });
+const iconBg = computed(() => {
+  if (!props.data) return "url('/icon/bg/0-BGC.webp')";
+  return `url('/icon/bg/${props.data.star}-BGC.webp')`;
+});
+
+function parseDesc() {
+  if (!props.data) return "";
+  return props.data.description.replace(/\\n/g, "\n");
+}
 
 function onCancel() {
+  console.log(props.data);
   visible.value = false;
 }
 </script>
@@ -58,27 +67,91 @@ function onCancel() {
   justify-content: center;
   padding: 10px;
   border-radius: 10px;
-  background: var(--app-side-bg);
-  column-gap: 10px;
+  background: var(--box-bg-1);
 }
 
 .twom-box {
   position: relative;
-  overflow: hidden;
-  width: 800px;
-  height: 400px;
+  display: flex;
+  max-width: 800px;
+  flex-direction: column;
   border-radius: 10px;
+  row-gap: 10px;
 }
 
 .twom-top {
   position: relative;
   display: flex;
-  height: 200px;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
   padding: 10px;
   border-bottom: 1px solid var(--common-shadow-1);
   background-position: center;
   background-size: cover;
+  column-gap: 10px;
+}
+
+.twom-left {
+  overflow: hidden;
+  width: 60px;
+  border-radius: 50%;
+  aspect-ratio: 1;
+  background-image: v-bind(iconBg);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.twom-name {
+  color: var(--common-text-title);
+  font-family: var(--font-title);
+  font-size: 30px;
+}
+
+.twom-type {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  opacity: 0.8;
+}
+
+.twom-bottom {
+  display: flex;
+  max-height: 400px;
+  flex-direction: column;
+  padding-right: 10px;
+  overflow-y: auto;
+  row-gap: 10px;
+}
+
+.twom-desc,
+.twom-source,
+.twom-convert {
+  padding: 10px;
+  border-radius: 10px;
+  background: var(--box-bg-2);
+  color: var(--box-text-2);
+}
+
+.twom-desc {
+  font-size: 16px;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.twom-source {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  font-size: 16px;
+  row-gap: 5px;
+  white-space: pre-wrap;
+}
+
+.twom-convert {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  row-gap: 5px;
 }
 </style>

src/components/wiki/two-source.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="twos-box">
+    <v-icon>mdi-map-marker</v-icon>
+    <span>{{ props.data.name }}</span>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from "vue";
+
+interface TwoConvertProps {
+  data: TGApp.App.Material.Source;
+}
+
+const props = defineProps<TwoConvertProps>();
+
+const textColor = computed(() => {
+  if (!props.data || !props.data.days) return "var(--tgc-blue-2)";
+  const day = new Date().getDay();
+  if (props.data.days.includes(day)) return "var(--tgc-pink-1)";
+  return "var(--tgc-blue-2)";
+});
+</script>
+<style lang="css" scoped>
+.twos-box {
+  display: flex;
+  width: fit-content;
+  align-items: center;
+  color: v-bind(textColor);
+  column-gap: 5px;
+}
+</style>