♻️ 全面整理重构

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

@@ -11,13 +11,11 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { AppCharacterData } from "../../data/index.js";
-import TItemBox, { TItemBoxData } from "../app/t-item-box.vue";
+import TItemBox, { type TItemBoxData } from "@comp/app/t-itemBox.vue";
 
-interface TuaDetailBattleProps {
-  title: string;
-  modelValue: TGApp.Sqlite.Abyss.Battle;
-}
+import { AppCharacterData } from "@/data/index.js";
+
+type TuaDetailBattleProps = { title: string; modelValue: TGApp.Sqlite.Abyss.Battle };
 
 const props = defineProps<TuaDetailBattleProps>();
 

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

@@ -21,9 +21,7 @@
 import TuaDetailBattle from "./tua-detail-battle.vue";
 import TuaDetailTitle from "./tua-detail-title.vue";
 
-interface TuaDetailLevelProps {
-  modelValue: TGApp.Sqlite.Abyss.Level;
-}
+type TuaDetailLevelProps = { modelValue: TGApp.Sqlite.Abyss.Level };
 
 const props = defineProps<TuaDetailLevelProps>();
 </script>

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

@@ -1,39 +1,16 @@
 <template>
-  <div
-    class="tud-t-box"
-    :style="{
-      fontFamily: props.mode === 'level' ? 'var(--font-text)' : 'var(--font-title)',
-    }"
-  >
-    <div
-      class="tud-t-title"
-      :style="{
-        fontSize: props.mode === 'level' ? '18px' : '20px',
-      }"
-    >
-      <slot name="title">
-        <span>{{ props.name }}</span>
-      </slot>
+  <div class="tud-t-box">
+    <div class="tud-t-title">
+      <slot name="title">{{ props.name }}</slot>
     </div>
-    <div
-      class="tud-t-val"
-      :style="{
-        fontSize: props.mode === 'level' ? '18px' : '20px',
-      }"
-    >
+    <div class="tud-t-val">
       <img src="/icon/star/Abyss.webp" alt="Abyss" />
-      <slot name="val">
-        <span>{{ props.val }}</span>
-      </slot>
+      <slot name="val">{{ props.val }}</slot>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-interface TuaDetailTitleProps {
-  name: string;
-  val: number;
-  mode: "floor" | "level";
-}
+type TuaDetailTitleProps = { name: string; val: number; mode: "floor" | "level" };
 
 const props = defineProps<TuaDetailTitleProps>();
 </script>
@@ -44,10 +21,12 @@ const props = defineProps<TuaDetailTitleProps>();
   align-items: center;
   justify-content: space-between;
   border-bottom: 1px solid var(--common-shadow-4);
+  font-family: v-bind("props.mode === 'level' ? 'var(--font-text)' : 'var(--font-title)'");
 }
 
 .tud-t-title {
   color: var(--box-text-4);
+  font-size: v-bind("props.mode === 'level' ? '18px' : '20px'");
 }
 
 .tud-t-val {
@@ -55,6 +34,7 @@ const props = defineProps<TuaDetailTitleProps>();
   align-items: center;
   color: var(--tgc-yellow-1);
   font-family: var(--font-title);
+  font-size: v-bind("props.mode === 'level' ? '18px' : '20px'");
   gap: 5px;
 }
 

src/components/userAbyss/tua-detail.vue

@@ -18,9 +18,7 @@
 import TuaDetailLevel from "./tua-detail-level.vue";
 import TuaDetailTitle from "./tua-detail-title.vue";
 
-interface TuaDetailProps {
-  modelValue: TGApp.Sqlite.Abyss.Floor;
-}
+type TuaDetailProps = { modelValue: TGApp.Sqlite.Abyss.Floor };
 
 const props = defineProps<TuaDetailProps>();
 </script>

src/components/userAbyss/tua-overview.vue

@@ -1,14 +1,10 @@
 <template>
   <div class="tuao-box">
     <div class="tuao-title">
-      <slot name="title">
-        {{ props.title }}
-      </slot>
+      <slot name="title">{{ props.title }}</slot>
     </div>
     <div v-if="props.valText" class="tuao-val-text">
-      <slot name="val-text">
-        {{ props.valText }}
-      </slot>
+      <slot name="val-text">{{ props.valText }}</slot>
     </div>
     <div v-if="props.valIcons" class="tuao-val-icons">
       <slot name="val-icons">
@@ -22,20 +18,18 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed } from "vue";
+import TItemBox, { type TItemBoxData } from "@comp/app/t-itemBox.vue";
 
-import { AppCharacterData } from "../../data/index.js";
-import TItemBox, { TItemBoxData } from "../app/t-item-box.vue";
+import { AppCharacterData } from "@/data/index.js";
 
-interface TAOProps {
+type TAOProps = {
   title: string;
   valText?: string | number;
-  valIcons?: TGApp.Sqlite.Abyss.Character[];
+  valIcons?: Array<TGApp.Sqlite.Abyss.Character>;
   multi4?: boolean;
-}
+};
 
 const props = defineProps<TAOProps>();
-const getIconNum = computed(() => (props.multi4 ? 4 : 1));
 
 function getBoxData(avatar: TGApp.Sqlite.Abyss.Character): TItemBoxData {
   const res = AppCharacterData.find((a) => a.id === avatar.id);
@@ -81,6 +75,6 @@ function getBoxData(avatar: TGApp.Sqlite.Abyss.Character): TItemBoxData {
 .tuao-val-icons {
   display: grid;
   column-gap: 10px;
-  grid-template-columns: repeat(v-bind(getIconNum), 1fr);
+  grid-template-columns: repeat(v-bind("props.multi4 ? 4 : 1"), 1fr);
 }
 </style>