🐛 解决控制台报错

src/components/userAbyss/tua-detail-level.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="tud-dl-divider" />
-  <TuaDetailTitle :val="props.modelValue.winStar" :name="`第${props.modelValue.id}间`" />
+  <TuaDetailTitle
+    :val="props.modelValue.winStar"
+    :name="`第${props.modelValue.id}间`"
+    mode="level"
+  />
   <TuaDetailBattle :model-value="props.modelValue.upBattle" />
   <TuaDetailBattle :model-value="props.modelValue.downBattle" />
 </template>

src/components/userAbyss/tua-detail-title.vue

@@ -23,9 +23,7 @@ interface TuaDetailTitleProps {
   mode: "floor" | "level";
 }
 
-const props = withDefaults(defineProps<TuaDetailTitleProps>(), {
+const props = defineProps<TuaDetailTitleProps>();
-  mode: "level",
-});
 
 const getFont: ComputedRef<string> = computed(() => {
   return props.mode === "level" ? "var(--font-text)" : "var(--font-title)";

src/components/userAbyss/tua-overview.vue

@@ -23,18 +23,18 @@
 </template>
 <script lang="ts" setup>
 // vue
+import { computed } from "vue";
 import TibAbyssOverview from "../itembox/tib-abyss-overview.vue";
 
 interface TAOProps {
   title: string;
   valText?: string | number;
   valIcons?: string;
-  iconNum: number;
+  multi4?: boolean;
 }
 
-const props = withDefaults(defineProps<TAOProps>(), {
+const props = defineProps<TAOProps>();
-  iconNum: 1,
+const getIconNum = computed(() => (props.multi4 ? 4 : 1));
-});
 </script>
 <style lang="css" scoped>
 .tuao-box {
@@ -70,6 +70,6 @@ const props = withDefaults(defineProps<TAOProps>(), {
 .tuao-val-icons {
   display: grid;
   column-gap: 10px;
-  grid-template-columns: repeat(v-bind(iconNum), 1fr);
+  grid-template-columns: repeat(v-bind(getIconNum), 1fr);
 }
 </style>

src/pages/User/Abyss.vue

@@ -41,7 +41,7 @@
             <TuaOverview title="最多承伤" :val-icons="item.takeDamageRank" />
             <TuaOverview title="最强一击" :val-icons="item.damageRank" />
             <TuaOverview title="元素战技" :val-icons="item.normalSkillRank" />
-            <TuaOverview title="出战次数" :val-icons="item.revealRank" :icon-num="4" />
+            <TuaOverview title="出战次数" :val-icons="item.revealRank" :multi4="true" />
             <TuaOverview title="元素爆发" :val-icons="item.energySkillRank" />
           </div>
           <TSubLine>详情</TSubLine>