From db3cb2fa29c45146cb77be4becd7263803f27674 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=9B=AE=E6=A3=83?= <BT-Muli@outlook.com>
Date: Thu, 25 Jul 2024 14:18:38 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E8=A7=92=E8=89=B2/=E6=AD=A6?=
 =?UTF-8?q?=E5=99=A8=E5=9B=BE=E9=89=B4=E6=9D=90=E6=96=99=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=B7=A6=E5=8F=B3=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/wiki/twc-materials.vue | 75 +++++++++++++++++++++++++--
 1 file changed, 72 insertions(+), 3 deletions(-)

diff --git a/src/components/wiki/twc-materials.vue b/src/components/wiki/twc-materials.vue
index fdfb740d..8f353589 100644
--- a/src/components/wiki/twc-materials.vue
+++ b/src/components/wiki/twc-materials.vue
@@ -4,7 +4,7 @@
       class="twc-material-box"
       v-for="(item, index) in props.data"
       :key="index"
-      @click="checkData(item)"
+      @click="checkData(item, index)"
     >
       <div class="twc-material-left">
         <div class="twc-material-bg">
@@ -19,7 +19,18 @@
       </div>
     </div>
   </div>
-  <TwoMaterial :data="curData" v-model="showOverlay" />
+  <TwoMaterial :data="curData" v-model="showOverlay">
+    <template #left>
+      <div class="card-arrow left" @click="switchMaterial(false)">
+        <img src="../../assets/icons/arrow-right.svg" alt="right" />
+      </div>
+    </template>
+    <template #right>
+      <div class="card-arrow" @click="switchMaterial(true)">
+        <img src="../../assets/icons/arrow-right.svg" alt="right" />
+      </div>
+    </template>
+  </TwoMaterial>
 </template>
 <script lang="ts" setup>
 import { ref } from "vue";
@@ -35,6 +46,7 @@ interface TwcMaterialsProp {
 
 const props = defineProps<TwcMaterialsProp>();
 const showOverlay = ref(false);
+const curIndex = ref(0);
 const curData = ref<TGApp.App.Material.WikiItem>({
   id: 0,
   name: "",
@@ -45,11 +57,12 @@ const curData = ref<TGApp.App.Material.WikiItem>({
   convert: [],
 });
 
-function checkData(item: TGApp.App.Calendar.Material) {
+function checkData(item: TGApp.App.Calendar.Material, index: number) {
   if (showOverlay.value) showOverlay.value = false;
   const material = WikiMaterialData.find((m) => m.id === item.id);
   if (material) {
     curData.value = material;
+    curIndex.value = index;
     showOverlay.value = true;
   } else {
     showSnackbar({
@@ -58,6 +71,39 @@ function checkData(item: TGApp.App.Calendar.Material) {
     });
   }
 }
+
+function switchMaterial(isNext: boolean) {
+  if (isNext) {
+    if (curIndex.value === props.data.length - 1) {
+      showSnackbar({
+        text: "已经是最后一个材料了",
+        color: "warn",
+      });
+      return;
+    }
+    curIndex.value++;
+  } else {
+    if (curIndex.value === 0) {
+      showSnackbar({
+        text: "已经是第一个材料了",
+        color: "warn",
+      });
+      return;
+    }
+    curIndex.value--;
+  }
+  const curItem = props.data[curIndex.value];
+  const material = WikiMaterialData.find((m) => m.id === curItem.id);
+  if (material) {
+    curData.value = material;
+    return;
+  }
+  showSnackbar({
+    text: `材料 ${curItem.name} 暂无详细信息`,
+    color: "warn",
+  });
+  isNext ? curIndex.value-- : curIndex.value++;
+}
 </script>
 <style lang="css" scoped>
 .twc-materials-grid {
@@ -111,4 +157,27 @@ function checkData(item: TGApp.App.Calendar.Material) {
   color: var(--box-text-2);
   font-size: 14px;
 }
+
+.card-arrow {
+  position: relative;
+  display: flex;
+  width: 30px;
+  height: 30px;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.dark .card-arrow {
+  filter: invert(11%) sepia(73%) saturate(11%) hue-rotate(139deg) brightness(97%) contrast(81%);
+}
+
+.card-arrow img {
+  width: 100%;
+  height: 100%;
+}
+
+.card-arrow.left img {
+  transform: rotate(180deg);
+}
 </style>