💄深渊分享显示应用信息，圣遗物详情推荐属性高亮

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

@@ -35,14 +35,18 @@
             :src="propMain.icon"
             alt="propMain"
           />
-          <span>{{ propMain !== false ? propMain.name : "未知属性" }}</span>
+          <span :style="getPropMainStyle()">
+            {{ propMain !== false ? propMain.name : "未知属性" }}
+          </span>
         </span>
         <span>{{ props.modelValue.main_property.value }}</span>
       </div>
       <div v-for="(prop, index) in propSubs" :key="index" class="tua-dcr-prop">
         <span class="tua-prop-sub">
           <img v-if="prop !== false && prop.icon !== ''" :src="prop.icon" alt="propSub" />
-          <span>{{ prop !== false ? prop.name : "未知属性" }}</span>
+          <span :style="getPropSubStyle(prop, props.recommend.sub_property_list)">
+            {{ prop !== false ? prop.name : "未知属性" }}
+          </span>
           <span class="tua-prop-time" v-if="props.modelValue.sub_property_list[index].times !== 0">
             {{ props.modelValue.sub_property_list[index].times }}
           </span>
@@ -60,6 +64,7 @@ import { useUserStore } from "../../store/modules/user.js";
 interface TuaDcRelicProps {
   modelValue: TGApp.Game.Avatar.Relic | false;
   pos: "1" | "2" | "3" | "4" | "5";
+  recommend: TGApp.Game.Avatar.PropRecommend;
 }
 
 const props = defineProps<TuaDcRelicProps>();
@@ -85,6 +90,45 @@ function getRelicTitle(): string {
   if (props.modelValue === false) return getRelicPos();
   return props.modelValue.name;
 }
+
+function getPropMainStyle(): string {
+  if (props.modelValue === false) return "";
+  if (props.pos === "3") {
+    if (
+      props.recommend.sand_main_property_list.includes(props.modelValue.main_property.property_type)
+    ) {
+      return "color: var(--tgc-yellow-1);";
+    }
+  }
+  if (props.pos === "4") {
+    if (
+      props.recommend.goblet_main_property_list.includes(
+        props.modelValue.main_property.property_type,
+      )
+    ) {
+      return "color: var(--tgc-yellow-1);";
+    }
+  }
+  if (props.pos === "5") {
+    if (
+      props.recommend.circlet_main_property_list.includes(
+        props.modelValue.main_property.property_type,
+      )
+    ) {
+      return "color: var(--tgc-yellow-1);";
+    }
+  }
+  return "";
+}
+
+function getPropSubStyle(
+  propItem: TGApp.Game.Avatar.PropMapItem | false,
+  propsR: number[],
+): string {
+  if (propItem === false) return "";
+  if (propsR.includes(propItem.property_type)) return "color: var(--tgc-yellow-1);";
+  return "";
+}
 </script>
 <style lang="css" scoped>
 .tua-dcr-box {
@@ -232,7 +276,6 @@ function getRelicTitle(): string {
 .tua-prop-time {
   width: 14px;
   height: 14px;
-  padding-bottom: 1px;
   border: 1px solid rgb(255 255 255 / 20%);
   border-radius: 4px;
   background: rgb(0 0 0 / 20%);

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

@@ -32,11 +32,31 @@
         :uid="props.modelValue.uid"
         :updated="props.modelValue.updated"
       />
-      <TuaDcRelic :model-value="relicList[0]" pos="1" />
+      <TuaDcRelic
-      <TuaDcRelic :model-value="relicList[1]" pos="2" />
+        :model-value="relicList[0]"
-      <TuaDcRelic :model-value="relicList[2]" pos="3" />
+        pos="1"
-      <TuaDcRelic :model-value="relicList[3]" pos="4" />
+        :recommend="props.modelValue.propRecommend.recommend_properties"
-      <TuaDcRelic :model-value="relicList[4]" pos="5" />
+      />
+      <TuaDcRelic
+        :model-value="relicList[1]"
+        pos="2"
+        :recommend="props.modelValue.propRecommend.recommend_properties"
+      />
+      <TuaDcRelic
+        :model-value="relicList[2]"
+        pos="3"
+        :recommend="props.modelValue.propRecommend.recommend_properties"
+      />
+      <TuaDcRelic
+        :model-value="relicList[3]"
+        pos="4"
+        :recommend="props.modelValue.propRecommend.recommend_properties"
+      />
+      <TuaDcRelic
+        :model-value="relicList[4]"
+        pos="5"
+        :recommend="props.modelValue.propRecommend.recommend_properties"
+      />
     </div>
     <!-- 左下命座跟天赋 -->
     <div class="tua-dc-lb">

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

@@ -1,5 +1,5 @@
 <template>
-  <TOverlay v-model="visible" hide blur-val="5px" :to-click="onCancel">
+  <TOverlay v-model="visible" :hide="true" blur-val="5px" :to-click="onCancel">
     <div class="tdo-box">
       <div class="tdo-avatars-container">
         <v-tabs
@@ -15,15 +15,7 @@
             @click="onAvatarClick(avatar)"
             :title="avatar.avatar.name"
           >
-            <div
+            <div class="tdo-avatar" :style="getAvatarBg(avatar)">
-              class="tdo-avatar"
-              :style="{
-                backgroundColor:
-                  props.avatar.avatar.id === avatar.avatar.id
-                    ? 'var(--tgc-od-white)'
-                    : 'transparent',
-              }"
-            >
               <img :src="avatar.avatar.side_icon" :alt="avatar.avatar.name" />
             </div>
           </v-tab>
@@ -89,6 +81,7 @@ const modeTab = computed<"classic" | "card" | "dev">({
   get: () => props.mode,
   set: (val) => emits("update:mode", val),
 });
+
 const avatarsWidth = computed<string>(() => {
   switch (props.mode) {
     case "classic":
@@ -121,6 +114,13 @@ function handleClick(pos: "left" | "right"): void {
 function onAvatarClick(avatar: TGApp.Sqlite.Character.UserRole): void {
   emits("toAvatar", avatar);
 }
+
+function getAvatarBg(avatar: TGApp.Sqlite.Character.UserRole): string {
+  if (props.avatar.avatar.id === avatar.avatar.id) {
+    return "background-color:var(--tgc-od-white);";
+  }
+  return "background-color:transparent;";
+}
 </script>
 <style lang="css" scoped>
 .tdo-box {

src/pages/User/Abyss.vue

@@ -52,13 +52,16 @@
         class="ua-window-item"
       >
         <div :id="`user-abyss-${item.id}`" class="uaw-i-ref">
-          <div class="uaw-title">
+          <div class="uaw-top">
-            <span>第</span>
+            <div class="uaw-title">
-            <span>{{ item.id }}</span>
+              <span>第</span>
-            <span>期 UID</span>
+              <span>{{ item.id }}</span>
-            <span>{{ uidCur }}</span>
+              <span>期 UID</span>
-            <span>更新于</span>
+              <span>{{ uidCur }}</span>
-            <span>{{ item.updated }}</span>
+              <span>更新于</span>
+              <span>{{ item.updated }}</span>
+            </div>
+            <div class="uaw-share">Render by TeyvatGuide v{{ version }}</div>
           </div>
           <TSubLine>统计周期 {{ item.startTime }} ~ {{ item.endTime }}</TSubLine>
           <div class="uaw-o-box">
@@ -95,6 +98,7 @@
   </div>
 </template>
 <script lang="ts" setup>
+import { getVersion } from "@tauri-apps/api/app";
 import { storeToRefs } from "pinia";
 import { onMounted, ref, watch, computed } from "vue";
 
@@ -125,6 +129,7 @@ const user = computed<TGApp.Sqlite.Account.Game>(() => userStore.account.value);
 
 const localAbyss = ref<TGApp.Sqlite.Abyss.SingleTable[]>([]);
 const abyssRef = ref<HTMLElement>(<HTMLElement>{});
+const version = ref<string>();
 
 const uidList = ref<string[]>();
 const uidCur = ref<string>();
@@ -133,6 +138,7 @@ const abyssIdList = computed<number[]>(() => {
 });
 
 onMounted(async () => {
+  version.value = await getVersion();
   await TGLogger.Info("[UserAbyss][onMounted] 打开角色深渊页面");
   loadingTitle.value = "正在加载深渊数据";
   uidList.value = await TSUserAbyss.getAllUid();
@@ -379,6 +385,13 @@ async function deleteAbyss(): Promise<void> {
   gap: 5px;
 }
 
+.uaw-top {
+  display: flex;
+  width: 100%;
+  align-items: flex-end;
+  justify-content: space-between;
+}
+
 .uaw-title {
   display: flex;
   align-items: center;
@@ -393,6 +406,12 @@ async function deleteAbyss(): Promise<void> {
   color: var(--tgc-yellow-1);
 }
 
+.uaw-share {
+  z-index: -1;
+  font-size: 12px;
+  opacity: 0.8;
+}
+
 .uaw-o-box {
   display: grid;
   width: 100%;