From 48159aa4837a941d7e39c6f9426c4d85653fa755 Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Mon, 18 Dec 2023 22:05:16 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E5=BC=B9=E7=AA=97=E6=94=B9?=
 =?UTF-8?q?=E4=B8=BA=E5=BC=B9=E5=87=BA=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/overlay/to-namecard.vue | 86 ++++++++++++++++++++++++++
 src/pages/common/Achievements.vue      |  6 +-
 2 files changed, 90 insertions(+), 2 deletions(-)
 create mode 100644 src/components/overlay/to-namecard.vue

diff --git a/src/components/overlay/to-namecard.vue b/src/components/overlay/to-namecard.vue
new file mode 100644
index 00000000..a49ba7c0
--- /dev/null
+++ b/src/components/overlay/to-namecard.vue
@@ -0,0 +1,86 @@
+<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>
+      </div>
+    </div>
+  </TOverlay>
+</template>
+<script setup lang="ts">
+import { computed } from "vue";
+
+import TOverlay from "../main/t-overlay.vue";
+
+interface ToNamecardProps {
+  modelValue: boolean;
+  data?: {
+    profile: string;
+    name: string;
+    bg: string;
+    icon: string;
+    desc: string;
+  };
+}
+
+type ToNamecardEmits = (e: "update:modelValue", value: boolean) => void;
+
+const props = defineProps<ToNamecardProps>();
+
+const emits = defineEmits<ToNamecardEmits>();
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emits("update:modelValue", value);
+  },
+});
+
+function onCancel() {
+  visible.value = false;
+}
+</script>
+<style lang="css" scoped>
+.ton-box {
+  position: relative;
+  overflow: hidden;
+  width: 800px;
+  height: 400px;
+  border-radius: 10px;
+}
+
+.ton-bg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.ton-content {
+  position: absolute;
+  right: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-end;
+  padding: 10px;
+  background: rgb(0 0 0 / 20%);
+  box-shadow: 0 0 10px rgb(255 255 255 /20%);
+  color: var(--tgc-white-1);
+  text-shadow: 0 0 5px rgb(0 0 0/80%);
+}
+
+.ton-content :nth-child(1) {
+  font-family: var(--font-title);
+  font-size: 20px;
+}
+
+.ton-content :nth-child(2) {
+  opacity: 0.8;
+}
+</style>
diff --git a/src/pages/common/Achievements.vue b/src/pages/common/Achievements.vue
index f2e55aa4..608c6805 100644
--- a/src/pages/common/Achievements.vue
+++ b/src/pages/common/Achievements.vue
@@ -100,6 +100,7 @@
       </div>
     </div>
   </div>
+  <ToNamecard v-model="showNameCard" :data="curCard" />
 </template>
 
 <script lang="ts" setup>
@@ -110,10 +111,10 @@ import { useRoute, useRouter } from "vue-router";
 import showConfirm from "../../components/func/confirm";
 import showSnackbar from "../../components/func/snackbar";
 import ToLoading from "../../components/overlay/to-loading.vue";
+import ToNamecard from "../../components/overlay/to-namecard.vue";
 import { AppAchievementSeriesData } from "../../data";
 import TGSqlite from "../../plugins/Sqlite";
 import { useAchievementsStore } from "../../store/modules/achievements";
-import { createTGWindow } from "../../utils/TGWindow";
 import { getNowStr } from "../../utils/toolFunc";
 import { getUiafHeader, readUiafData, verifyUiafData } from "../../utils/UIAF";
 
@@ -125,6 +126,7 @@ const loading = ref<boolean>(true);
 const loadingTitle = ref<string>("正在加载数据");
 const search = ref<string>("");
 const hideFin = ref<boolean>(false);
+const showNameCard = ref<boolean>(false);
 // data
 const title = ref(achievementsStore.title);
 let curCard = reactive({ profile: "", bg: "", icon: "", name: "", desc: "" });
@@ -237,7 +239,7 @@ async function selectSeries(index: number): Promise<void> {
 
 // 打开图片
 function openImg(): void {
-  createTGWindow(curCard.profile, "Sub_window", `Namecard_${curCard.name}`, 840, 400, false);
+  showNameCard.value = true;
 }
 
 async function searchCard(): Promise<void> {