From 2f903ff45858a49c732fd09860c12b19e515bc44 Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Sun, 24 Dec 2023 13:57:12 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E6=B7=BB=E5=8A=A0=20switch?=
 =?UTF-8?q?=EF=BC=8C=E8=B0=83=E6=95=B4=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/overlay/to-namecard.vue | 30 ++++++++++----
 src/pages/WIKI/Namecard.vue            | 54 +++++++++++++++++++++++++-
 2 files changed, 76 insertions(+), 8 deletions(-)

diff --git a/src/components/overlay/to-namecard.vue b/src/components/overlay/to-namecard.vue
index a52538e3..727259fb 100644
--- a/src/components/overlay/to-namecard.vue
+++ b/src/components/overlay/to-namecard.vue
@@ -1,13 +1,17 @@
 <template>
   <!-- todo 支持 share -->
   <TOverlay v-model="visible" hide :to-click="onCancel" blur-val="20px">
-    <div class="ton-box" v-if="props.data">
-      <img alt="bg" class="ton-bg" v-if="props.data" :src="props.data.profile" />
-      <div class="ton-content">
-        <span>{{ props.data.name }}</span>
-        <span>{{ props.data.desc }}</span>
-        <span>获取途径：{{ props.data.source }}</span>
+    <div v-if="props.data" class="ton-container">
+      <slot name="left"></slot>
+      <div class="ton-box">
+        <img alt="bg" class="ton-bg" v-if="props.data" :src="props.data.profile" />
+        <div class="ton-content">
+          <span>{{ props.data.name }}</span>
+          <span>{{ props.data.desc }}</span>
+          <span>获取途径：{{ props.data.source }}</span>
+        </div>
       </div>
+      <slot name="right"></slot>
     </div>
   </TOverlay>
 </template>
@@ -39,6 +43,13 @@ function onCancel() {
 }
 </script>
 <style lang="css" scoped>
+.ton-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 10px;
+}
+
 .ton-box {
   position: relative;
   overflow: hidden;
@@ -75,7 +86,12 @@ function onCancel() {
   font-size: 20px;
 }
 
-.ton-content :not(:nth-child(1)) {
+.ton-content :nth-child(2) {
+  opacity: 0.8;
+}
+
+.ton-content :nth-child(3) {
+  border-top: 1px dotted var(--tgc-white-1);
   opacity: 0.8;
 }
 </style>
diff --git a/src/pages/WIKI/Namecard.vue b/src/pages/WIKI/Namecard.vue
index e10f33d9..c81b601f 100644
--- a/src/pages/WIKI/Namecard.vue
+++ b/src/pages/WIKI/Namecard.vue
@@ -15,7 +15,18 @@
         </v-list>
       </template>
     </v-virtual-scroll>
-    <ToNamecard v-model="visible" :data="curNameCard" />
+    <ToNamecard v-model="visible" :data="curNameCard">
+      <template #left>
+        <div class="card-arrow left" @click="switchCard(false)">
+          <img src="../../assets/icons/arrow-right.svg" alt="right" />
+        </div>
+      </template>
+      <template #right>
+        <div class="card-arrow" @click="switchCard(true)">
+          <img src="../../assets/icons/arrow-right.svg" alt="right" />
+        </div>
+      </template>
+    </ToNamecard>
   </div>
 </template>
 <script lang="ts" setup>
@@ -35,6 +46,24 @@ function toNameCard(item: TGApp.App.NameCard.Item) {
   curNameCard.value = item;
   visible.value = true;
 }
+
+function switchCard(isNext: boolean) {
+  const index = AppNameCardsData.findIndex((item) => item.name === curNameCard.value?.name);
+  if (index === -1) return;
+  if (isNext) {
+    if (index === AppNameCardsData.length - 1) {
+      curNameCard.value = AppNameCardsData[0];
+    } else {
+      curNameCard.value = AppNameCardsData[index + 1];
+    }
+  } else {
+    if (index === 0) {
+      curNameCard.value = AppNameCardsData[AppNameCardsData.length - 1];
+    } else {
+      curNameCard.value = AppNameCardsData[index - 1];
+    }
+  }
+}
 </script>
 <style lang="css" scoped>
 .tw-nc-box {
@@ -54,4 +83,27 @@ function toNameCard(item: TGApp.App.NameCard.Item) {
   cursor: pointer;
   font-family: var(--font-title);
 }
+
+.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>