✨ 新版角色详情Overlay 3/3

close #121

src/components/userAvatar/tua-dc-prop.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="tua-dcp-box">
+    <div class="tua-prop-left">
+      <img :src="props.prop.icon" alt="icon" v-if="props.prop.icon !== ''" />
+      <span>{{ props.prop.name }}</span>
+    </div>
+    <div class="tua-prop-right" :title="getRightTitle()">
+      {{ props.modelValue.final }}
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from "vue";
+
+interface TuaDcPropProps {
+  modelValue: TGApp.Game.Avatar.Prop;
+  prop: TGApp.Game.Avatar.PropMapItem;
+}
+
+const props = defineProps<TuaDcPropProps>();
+const getWidth = computed<string>(() => {
+  if (props.prop.icon === "") return "110px";
+  if (props.prop.name.length > 5) return "150px";
+  return "130px";
+});
+
+function getRightTitle(): string {
+  if (props.modelValue.add === "") return props.modelValue.final;
+  return `${props.modelValue.base} + ${props.modelValue.add}`;
+}
+</script>
+<style lang="css" scoped>
+.tua-dcp-box {
+  position: relative;
+  display: flex;
+  width: v-bind(getWidth);
+  height: 20px;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--tgc-white-1);
+  font-size: 12px;
+}
+
+.tua-prop-left {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 14px;
+    height: 14px;
+    object-fit: contain;
+  }
+}
+
+.tua-prop-right {
+  padding-right: 16px;
+}
+</style>

src/components/userAvatar/tua-dc-weapon.vue

@@ -33,19 +33,28 @@
         <span>{{ props.modelValue.sub_property.final }}</span>
       </div>
     </div>
+    <div class="tua-dcw-share">
+      <span class="tua-share-title">UID:{{ props.uid }}</span>
+      <span class="tua-share-time">更新于{{ props.updated }}</span>
+      <span class="tua-share-version">TeyvatGuide v{{ version }}</span>
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
+import { app } from "@tauri-apps/api";
 import { computed } from "vue";
 
 import { useUserStore } from "../../store/modules/user.js";
 
 interface TuaDcWeaponProps {
   modelValue: TGApp.Game.Avatar.WeaponDetail;
+  updated: string;
+  uid: number;
 }
 
 const props = defineProps<TuaDcWeaponProps>();
 const userStore = useUserStore();
+const version = await app.getVersion();
 
 const propMain = computed<TGApp.Game.Avatar.PropMapItem | false>(() => {
   return userStore.getProp(props.modelValue.main_property.property_type);
@@ -67,6 +76,7 @@ const propSub = computed<TGApp.Game.Avatar.PropMapItem | false>(() => {
   backdrop-filter: blur(10px);
   background: rgb(0 0 0 / 20%);
   color: var(--tgc-white-1);
+  font-size: 12px;
   text-shadow: 0 0 5px rgb(0 0 0 / 50%);
 }
 
@@ -89,7 +99,6 @@ const propSub = computed<TGApp.Game.Avatar.PropMapItem | false>(() => {
 
 .tua-dcw-title {
   font-family: var(--font-title);
-  font-size: 16px;
 }
 
 .tua-dcw-sub {
@@ -114,9 +123,6 @@ const propSub = computed<TGApp.Game.Avatar.PropMapItem | false>(() => {
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  padding: 5px;
-  border-bottom: 1px solid rgb(255 255 255 / 40%);
-  font-family: var(--font-title);
 }
 
 .tua-prop-sub {
@@ -125,8 +131,6 @@ const propSub = computed<TGApp.Game.Avatar.PropMapItem | false>(() => {
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  padding: 5px;
-  font-size: 14px;
 
   img {
     width: 14px;
@@ -147,8 +151,8 @@ const propSub = computed<TGApp.Game.Avatar.PropMapItem | false>(() => {
   justify-content: center;
 
   img {
-    width: 48px;
-    height: 48px;
+    width: 36px;
+    height: 36px;
     border-radius: 5px;
   }
 
@@ -160,4 +164,29 @@ const propSub = computed<TGApp.Game.Avatar.PropMapItem | false>(() => {
     height: 100%;
   }
 }
+
+.tua-dcw-share {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  border-top: 1px solid rgb(255 255 255 / 20%);
+  margin-top: auto;
+}
+
+.tua-share-title {
+  font-family: var(--font-title);
+  font-size: 14px;
+}
+
+.tua-share-time {
+  font-size: 10px;
+  opacity: 0.8;
+}
+
+.tua-share-version {
+  margin-left: auto;
+  text-shadow: 0 0 5px rgb(0 0 0 / 50%);
+}
 </style>

src/components/userAvatar/tua-detail-card.vue

@@ -3,16 +3,35 @@
     <img :src="props.modelValue.avatar.image" class="tua-dc-avatar" alt="avatar" />
     <v-btn
       class="tua-dc-share"
-      icon="mdi-share-variant"
+      prepend-icon="mdi-share-variant"
       @click="share"
       variant="outlined"
       :loading="loading"
       data-html2canvas-ignore
       size="small"
-    />
+    >
+      分享
+    </v-btn>
+    <!-- 右上整体属性&角色-->
+    <div class="tua-dc-rt">
+      <div class="tua-dcr-avatar">
+        <span>{{ props.modelValue.avatar.name }}</span>
+        <span>Lv.{{ props.modelValue.avatar.level }}</span>
+        <span>好感{{ props.modelValue.avatar.fetter }}</span>
+      </div>
+      <div v-for="(prop, index) in props.modelValue.propSelected" :key="index">
+        <div v-if="propMain[index] !== false" class="tua-dc-prop">
+          <TuaDcProp :model-value="prop" :prop="propMain[index]" />
+        </div>
+      </div>
+    </div>
     <!-- 右侧武器跟圣遗物具体属性 -->
     <div class="tua-dc-detail">
-      <TuaDcWeapon :model-value="props.modelValue.weapon" />
+      <TuaDcWeapon
+        :model-value="props.modelValue.weapon"
+        :uid="props.modelValue.uid"
+        :updated="props.modelValue.updated"
+      />
       <TuaDcRelic :model-value="relicList[0]" pos="1" />
       <TuaDcRelic :model-value="relicList[1]" pos="2" />
       <TuaDcRelic :model-value="relicList[2]" pos="3" />
@@ -30,9 +49,11 @@
 import { computed, onMounted, ref, watch } from "vue";
 
 import TSUserAvatar from "../../plugins/Sqlite/modules/userAvatar.js";
+import { useUserStore } from "../../store/modules/user.js";
 import { generateShareImg } from "../../utils/TGShare.js";
 
 import TuaDcConstellations from "./tua-dc-constellations.vue";
+import TuaDcProp from "./tua-dc-prop.vue";
 import TuaDcRelic from "./tua-dc-relic.vue";
 import TuaDcTalents from "./tua-dc-talents.vue";
 import TuaDcWeapon from "./tua-dc-weapon.vue";
@@ -42,6 +63,7 @@ interface TuaDetailCardProps {
 }
 
 const props = defineProps<TuaDetailCardProps>();
+const userStore = useUserStore();
 
 type fixedLenArr<T, N extends number> = [T, ...T[]] & { length: N };
 type RelicList = fixedLenArr<TGApp.Game.Avatar.Relic | false, 5>;
@@ -55,6 +77,11 @@ const relicList = computed<RelicList>(() => {
     props.modelValue.relics.find((item) => item.pos === 5) || false,
   ];
 });
+const propMain = computed<Array<TGApp.Game.Avatar.PropMapItem | false>>(() => {
+  return props.modelValue.propSelected.map((item) => {
+    return userStore.getProp(item.property_type);
+  });
+});
 
 const bg = ref<string>("/source/nameCard/profile/原神·印象.webp");
 const loading = ref<boolean>(false);
@@ -117,6 +144,39 @@ async function share(): Promise<void> {
   object-fit: contain;
 }
 
+.tua-dc-rt {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  display: flex;
+  width: 520px;
+  height: 80px;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 5px;
+  border: 1px solid rgb(255 255 255 / 20%);
+  border-radius: 5px;
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  background: rgb(0 0 0 / 20%);
+  gap: 0;
+}
+
+.tua-dcr-avatar {
+  position: absolute;
+  bottom: 5px;
+  left: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  color: var(--tgc-white-1);
+  column-gap: 10px;
+  font-family: var(--font-title);
+  font-size: 14px;
+  text-shadow: 0 0 5px rgb(0 0 0 / 50%);
+}
+
 .tua-dc-detail {
   position: absolute;
   right: 0;

src/pages/common/News.vue

@@ -1,3 +1,4 @@
+<!-- todo app-bar -->
 <template>
   <ToLoading v-model="loading" :title="loadingTitle" />
   <v-tabs v-model="tab" align-tabs="start" class="news-tab">