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

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 :model-value="relicList[1]" pos="2" />
-      <TuaDcRelic :model-value="relicList[2]" pos="3" />
-      <TuaDcRelic :model-value="relicList[3]" pos="4" />
-      <TuaDcRelic :model-value="relicList[4]" pos="5" />
+      <TuaDcRelic
+        :model-value="relicList[0]"
+        pos="1"
+        :recommend="props.modelValue.propRecommend.recommend_properties"
+      />
+      <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
-              class="tdo-avatar"
-              :style="{
-                backgroundColor:
-                  props.avatar.avatar.id === avatar.avatar.id
-                    ? 'var(--tgc-od-white)'
-                    : 'transparent',
-              }"
-            >
+            <div class="tdo-avatar" :style="getAvatarBg(avatar)">
               <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 {