💄 优化名片UI

src/components/app/to-nameCard.vue

@@ -14,7 +14,8 @@
           <span>{{ parseNameCard(props.data.desc) }}</span>
           <span>获取途径：{{ props.data.source }}</span>
         </div>
-        <div class="ton-type" :title="`ID:${props.data.id}`">{{ props.data.type }}</div>
+        <TwnTypeTag :type="props.data.type" class="ton-type" />
+        <div class="ton-sign">ID:{{ props.data.id }} | TeyvatGuide v{{ version }}</div>
         <v-btn
           class="ton-share"
           @click="shareNameCard"
@@ -32,8 +33,10 @@
 </template>
 <script setup lang="ts">
 import showSnackbar from "@comp/func/snackbar.js";
+import TwnTypeTag from "@comp/pageWiki/twn-type-tag.vue";
+import { getVersion } from "@tauri-apps/api/app";
 import { generateShareImg } from "@utils/TGShare.js";
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 
 import TOverlay from "./t-overlay.vue";
 
@@ -42,6 +45,11 @@ type ToNameCardProps = { data?: TGApp.App.NameCard.Item };
 const props = defineProps<ToNameCardProps>();
 const visible = defineModel<boolean>();
 const loading = ref<boolean>(false);
+const version = ref<string>("");
+
+onMounted(async () => {
+  version.value = await getVersion();
+});
 
 function parseNameCard(desc: string): string {
   let array = [];
@@ -141,16 +149,6 @@ async function shareNameCard(): Promise<void> {
   border-radius: 4px;
 }
 
-.ton-type {
-  position: absolute;
-  top: 10px;
-  left: 10px;
-  padding: 0 4px;
-  border: 1px solid var(--tgc-white-1);
-  border-radius: 4px;
-  color: var(--tgc-white-1);
-}
-
 .ton-content {
   position: absolute;
   right: 0;
@@ -167,27 +165,42 @@ async function shareNameCard(): Promise<void> {
   backdrop-filter: blur(5px);
   background: #00000040;
   color: var(--tgc-white-1);
+
+  :first-child {
+    font-family: var(--font-title);
+    font-size: 20px;
+    text-shadow: 0 0 5px #000000cc;
+  }
+
+  :nth-child(2) {
+    border-bottom: 1px dotted var(--tgc-white-1);
+    text-shadow: 0 0 2px #000000cc;
+    white-space: pre-wrap;
+  }
+
+  :last-child {
+    opacity: 0.8;
+    text-shadow: 0 0 2px black;
+  }
 }
 
 .dark .ton-content {
   background: #00000080;
 }
 
-.ton-content :first-child {
-  font-family: var(--font-title);
-  font-size: 20px;
-  text-shadow: 0 0 5px #000000cc;
+.ton-type {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  font-size: 14px;
 }
 
-.ton-content :nth-child(2) {
-  border-bottom: 1px dotted var(--tgc-white-1);
-  text-shadow: 0 0 2px #000000cc;
-  white-space: pre-wrap;
-}
-
-.ton-content :last-child {
-  opacity: 0.8;
-  text-shadow: 0 0 2px black;
+.ton-sign {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  color: var(--tgc-white-1);
+  font-size: 12px;
 }
 
 .ton-share {

src/components/app/top-nameCard.vue

@@ -2,10 +2,16 @@
   <div
     class="top-nc-box"
     @click="emit('selected', props.data)"
-    :class="{ grey: !props.finish }"
+    :class="props.finish ? '' : 'grey'"
     :title.attr="props.data.name"
   >
-    <v-list-item :title="props.data.name">
+    <v-list-item>
+      <template #title>
+        <div class="title">
+          <TwnTypeTag :type="props.data.type" />
+          <span>{{ props.data.name }}</span>
+        </div>
+      </template>
       <template #subtitle>
         <span class="desc" :title="props.data.desc">{{ props.data.desc }}</span>
       </template>
@@ -16,14 +22,13 @@
   </div>
 </template>
 <script lang="ts" setup>
+import TwnTypeTag from "@comp/pageWiki/twn-type-tag.vue";
 import { computed } from "vue";
 
 type TopNameCardProps = { data: TGApp.App.NameCard.Item; finish?: boolean };
 type TopNameCardEmits = (e: "selected", v: TGApp.App.NameCard.Item) => void;
 
-const props = withDefaults(defineProps<TopNameCardProps>(), {
-  finish: true,
-});
+const props = withDefaults(defineProps<TopNameCardProps>(), { finish: true });
 const emit = defineEmits<TopNameCardEmits>();
 
 const bgImage = computed<string>(() => {
@@ -72,6 +77,12 @@ const bgImage = computed<string>(() => {
   aspect-ratio: 23 / 15;
 }
 
+.title {
+  display: flex;
+  align-items: center;
+  column-gap: 4px;
+}
+
 .desc {
   text-shadow: 0 0 2px var(--common-shadow-t-8);
 }

src/components/pageWiki/twn-type-tag.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="twn-type-tag" :class="typeCls">
+    {{ props.type }}
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from "vue";
+
+type TwnTypeTagProps = { type: string };
+
+const props = defineProps<TwnTypeTagProps>();
+
+const typeCls = computed<string>(() => {
+  switch (props.type) {
+    case "成就":
+      return "achi";
+    case "好感":
+      return "fetter";
+    case "活动":
+      return "act";
+    case "纪行":
+      return "journey";
+    case "声望":
+      return "pop";
+    default:
+      return "default";
+  }
+});
+</script>
+<style lang="scss" scoped>
+@use "@styles/github.styles.scss" as github-styles;
+
+.twn-type-tag {
+  padding: 0 4px;
+  border-radius: 4px;
+  font-size: 12px;
+
+  &.achi {
+    @include github-styles.github-tag-dark-gen(#4db6ac);
+  }
+
+  &.fetter {
+    @include github-styles.github-tag-dark-gen(#ba68c8);
+  }
+
+  &.act {
+    @include github-styles.github-tag-dark-gen(#81c784);
+  }
+
+  &.journey {
+    @include github-styles.github-tag-dark-gen(#64b5f6);
+  }
+
+  &.pop {
+    @include github-styles.github-tag-dark-gen(#e57373);
+  }
+
+  &.default {
+    @include github-styles.github-tag-dark-gen(#ffb74d);
+  }
+}
+</style>