♻️ 名片组件抽离，wiki添加名片信息

src/components/overlay/top-namecard.vue

@@ -0,0 +1,45 @@
+<template>
+  <v-list
+    :style="{ backgroundImage: props.data.name === '原神·印象' ? 'none' : `url(${props.data.bg})` }"
+    class="top-nc-box"
+    @click="toNameCard(props.data)"
+  >
+    <v-list-item :title="props.data.name">
+      <template #subtitle>
+        <span :title="props.data.desc">{{ props.data.desc }}</span>
+      </template>
+      <template #prepend>
+        <v-img width="80px" style="margin-right: 10px" :src="props.data.icon" />
+      </template>
+    </v-list-item>
+  </v-list>
+</template>
+<script lang="ts" setup>
+interface TopNamecardProps {
+  data: TGApp.App.NameCard.Item;
+}
+
+interface TopNamecardEmits {
+  (e: "selected", data: TGApp.App.NameCard.Item): void;
+}
+
+const props = defineProps<TopNamecardProps>();
+const emit = defineEmits<TopNamecardEmits>();
+
+function toNameCard(item: TGApp.App.NameCard.Item) {
+  emit("selected", item);
+}
+</script>
+<style lang="css" scoped>
+.top-nc-box {
+  width: 100%;
+  height: 80px;
+  border: 1px solid var(--common-shadow-2);
+  border-radius: 10px 50px 50px 10px;
+  background-color: var(--box-bg-1);
+  background-position: right;
+  background-repeat: no-repeat;
+  cursor: pointer;
+  font-family: var(--font-title);
+}
+</style>

src/components/wiki/twc-character.vue

@@ -1,4 +1,3 @@
-<!-- todo 角色名片 -->
 <template>
   <div class="twc-box" v-if="data !== undefined">
     <div class="twc-brief">
@@ -50,6 +49,7 @@
         </div>
       </div>
     </div>
+    <TopNamecard :data="nameCard" @selected="toNameCard" />
     <TwcMaterials :data="data.materials" />
     <TwcSkills :data="data.skills" />
     <TwcConstellations :data="data.constellation" />
@@ -94,17 +94,20 @@
       </v-expansion-panel>
     </v-expansion-panels>
   </div>
+  <ToNamecard v-if="hasNc" v-model="showNc" :data="nameCard" />
 </template>
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 
-import { WikiCharacterData } from "../../data";
+import { WikiCharacterData, AppNameCardsData, AppCharacterData } from "../../data";
 import Mys from "../../plugins/Mys";
 import { createTGWindow } from "../../utils/TGWindow";
 import { parseHtmlText } from "../../utils/toolFunc";
 import showSnackbar from "../func/snackbar";
 import TItembox, { TItemBoxData } from "../main/t-itembox.vue";
+import ToNamecard from "../overlay/to-namecard.vue";
+import TopNamecard from "../overlay/top-namecard.vue";
 
 import TwcConstellations from "./twc-constellations.vue";
 import TwcMaterials from "./twc-materials.vue";
@@ -115,6 +118,7 @@ interface TwcCharacterProps {
 }
 
 const props = defineProps<TwcCharacterProps>();
+const router = useRouter();
 
 const data = ref<TGApp.App.Character.WikiItem>();
 const box = computed(() => {
@@ -132,7 +136,9 @@ const box = computed(() => {
     clickable: false,
   };
 });
-const router = useRouter();
+const hasNc = ref(false);
+const showNc = ref(false);
+const nameCard = ref<TGApp.App.NameCard.Item>();
 
 async function loadData(): Promise<void> {
   const res = WikiCharacterData.find((item) => item.id === props.item.id);
@@ -144,6 +150,13 @@ async function loadData(): Promise<void> {
     return;
   }
   data.value = res;
+  const appC = AppCharacterData.find((i) => i.name === data.value?.name);
+  if (appC !== undefined) {
+    hasNc.value = true;
+    nameCard.value = AppNameCardsData.find((i) => i.name === appC.nameCard);
+  } else {
+    hasNc.value = false;
+  }
   showSnackbar({
     text: `成功获取角色 ${props.item.name} 的 Wiki 数据`,
     color: "success",
@@ -182,6 +195,11 @@ async function toBirth(date: string): Promise<void> {
   const birth = date.replace("月", "/").replace("日", "");
   await router.push({ name: "留影叙佳期", params: { date: birth } });
 }
+
+function toNameCard(): void {
+  if (showNc.value === true) showNc.value = false;
+  showNc.value = true;
+}
 </script>
 <style lang="css" scoped>
 .twc-box {