From abe34b8ee5ccf35a2eaab036429a604af469ba45 Mon Sep 17 00:00:00 2001
From: BTMuli <bt-muli@outlook.com>
Date: Thu, 11 Dec 2025 16:13:14 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E6=B7=B1=E5=A2=83=E8=9E=BA?=
 =?UTF-8?q?=E6=97=8BUI=E8=BF=AD=E4=BB=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/icon/star/abyss0.webp                  | Bin 0 -> 1094 bytes
 public/icon/star/abyss1.webp                  | Bin 0 -> 1428 bytes
 .../userAbyss/tua-detail-battle.vue           | 103 ++++++-
 src/components/userAbyss/tua-detail-level.vue |  76 +++--
 src/components/userAbyss/tua-detail-title.vue |  52 ----
 src/components/userAbyss/tua-detail.vue       |  77 ++++-
 src/components/userAbyss/tua-overview.vue     |  10 +-
 src/components/userCombat/tuc-ae-box.vue      |   3 +-
 src/pages/User/Abyss.vue                      |   4 +-
 src/plugins/Sqlite/utils/transAbyssData.ts    |  53 ++--
 src/request/recordReq.ts                      |   5 +-
 src/types/Game/Abyss.d.ts                     |   2 +-
 src/types/Sqlite/Abyss.d.ts                   | 273 ++++++++++--------
 13 files changed, 410 insertions(+), 248 deletions(-)
 create mode 100644 public/icon/star/abyss0.webp
 create mode 100644 public/icon/star/abyss1.webp
 delete mode 100644 src/components/userAbyss/tua-detail-title.vue

diff --git a/public/icon/star/abyss0.webp b/public/icon/star/abyss0.webp
new file mode 100644
index 0000000000000000000000000000000000000000..62673b7ff2a6c8d490d52c557a6255c82c38e499
GIT binary patch
literal 1094
zcmV-M1iAZCNk&FK1ONb6MM6+kP&il$0000G0000d001Wd06|PpNHYTf01cpQTif!s
zInVp+mzmiiW4Rr5M3>LZV8%9%*%nLx_Y4Hfy@QCD00xx^LIUh$WAoHPh)EtW*gUZ;
zIiUPO>E{+C01u!6EC@%eN7BA+Y%~A@)CI`lg~c7eb#-Yly$x6vvQQUtdGpPs7Z#42
zm~LYk3n64#2usuBM<!m@ZVg}yjIj_x$TD*F&OZ%c^w~)QgKRKe1VRoAvk+%kXzl(H
z1WCpukjmvOkz6EWy*ljhP#PuQ+>_+UB6Flx12Ml{wo^)}RjpLc>(k}^*gz}wp^1^<
zEQnCCcVTq@Y$1p&%OWqwKYt$;3&o3^v5!0LPEi!8AU*7jf@*(!Fbtrql$XmBW0#HA
zbxusU)hP_n{$X+y;Pu6aL0?5_c00bUF=*Nun-ExOZ)&OElU`rWX2wAE@YUo%m&Nix
zmE+}Ufw6pE+sFs-LHlhDP#nfWSQt!kP+E_EcMbBnem=Wj&Lo7vwDxCLdin0+MZUK*
z6TL3~eO?yb2ARsv#!T0n!^Vr3+38VfeFgB{(b|+i7BYbHXmk}V<r%4+N;&xUdaZ20
zVGzhmn?KgOR^Be{ou=nov3r6qYoBlLo*TddnVIJY71H%wpt;54_V(3fBK?;>Y2Uwn
zc4Lu5V2!<cb7}8gE^Pv{nYjWVU4HcZnyFVu6<Zc4TPu!>bW&Zb%>~4IzLTJHKXy}J
zk9an|-@ynmzxa2DMtnH=b7crv$<Bc6?b(}O+M|@Vs^<oo{QaF8jJ(Jz7gyu-kI~u5
z;-m`0Tf0p_-fW%$!lly1)BxSWz{=zfz}VVO8^DR7hdl3-8WC9tAp79p5z_qGP1r@J
z-K>pI&5rl--52HY(cw~-OKEKT67zbu9kQH_PRvD`QxA?7>$msSLYA$$VI>-M7m-D|
zgy3i`?@_&Yk$_I8U050}3)_}0Bg1uLt;_q%Lq-k@kc6$IM7M?g*XB5IbG?)a%d!ZE
zWsGGR%i!weMn>y&Zk%o*%OY$UgF%*Y=V)q~*AKHfLKp-BFvtMLK)SowjGdV&K$hq$
z1EyP+jeV4eaTG|2C$$VoZvWmH%|QI0Ha7P$gg_b$09H^qAmji50FVd(odGH+04M-H
zZ7h>Vq#_}qCpZj{fDMUd0JLY+hAe~I*nl>G8%zO^PTT~iS>~WTw4c;`0Y1NZ0oeTj
z(q+yE`>nGPJxV|n-2edo{w~DS?w3Hv9d{6ZVmENzyQVKqhmwN$7LqWtL+!19ZNqWk
zJmNQHL3IkP)Sxy`v&T)#75bIn8%FFd7OANCUa%cz{yS~CB>zf;+`oJ^a=wR-Q~0-2
zKY%bkZjewg_W$9{@NA3Olo>~vnv{Cl?^Q9ON@KC1YQGlTpV+;0zT`30sY_?_>Fa9I
MA;Of$3A_LR0Nni%8vp<R

literal 0
HcmV?d00001

diff --git a/public/icon/star/abyss1.webp b/public/icon/star/abyss1.webp
new file mode 100644
index 0000000000000000000000000000000000000000..3829605821b55dadd2d153f50ac2421e6be75d1f
GIT binary patch
literal 1428
zcmV;F1#9|JNk&GD1pok7MM6+kP&il$0000G0000l001ul06|PpNPPqV01cpIZQC(P
zx}Pujry?WOl{VV8ZDS`r?xpmoN49O-UA7&G!1oOPKedC1m;lx(NkKsYh>p=|HdB_6
zWMSFZW>e*W2#~vAd20)z!Fc0jAqj>4NBsOr8{3$TRE7hBAeA0pE_J=qz$u*N45dV-
zEF{q7y$<*6_&Z{Q<qU9!5EckPK<K@>3FFtivlN95V6Y4ZAt3}HBcwYI1Nlp;pW9#=
zz!)0~K@i9S0UDi-fCjJn>NFNMmcdar0VE`W1cq?aS<?COv2SCDARBCBgM=g`A<Hsj
ziNS*IxotHo7>sQkWus6iNH(EGRD?^8flnr7a#NK*6r!YDM6w%oJHX`S-OW~OWw~Cf
zFE5>K)DO1W{A%w_fx#_1OPxuQFPGa&xm^C_k2^r9<JOs+R45ipjngNN?|bgAu8w49
z>y{#=*|~CGrBWobwe^!ThTuQ8Up_=S*VembXjog{`}NpuM~i)8=33Ue|L2h&MNsRr
z;$`Jjb~3!seXzTJ$gFeur{%%Cv8BV`Trv{Y03<UPvF^C{mx%#eVC&BVS5()wp(lPA
z9JfS7xc=_I<;Atd|23<%)qgxVS474JIP%rigIe3Wx-+*X@B8k;UIBt=;J<I4>{yGB
zZ1sGv)^hg6D;JCi*n&v&mp%8jt>)$zm-?rh@>*^2t>H^@3I;{l$X<G14-_(DJo<UK
zh1cSZeIaBt-te^via{7G1FpR_c69*!@B9B<aZ8mGul+E8*Q|j0XGd>t3m_~&CLJmj
zv$4&eSMEO(EkH(qEHv>{B(3>7=YDwY1l5PGXhvZ9oAR^$&+Wp<fRF%2A83M?>Rlm(
zz8jlw@K7)ikNz_8bS&TZ#x7*+6oTsAO<?Jl6ITp?@;Cjc%MAF?rxVYZFn`HAr;ITY
zLZw@4K<&qW+a|9SsDDOHfcmE^3vr~4{Pmq5)-B^e`m%mQ^Y8r+w(l+%fN-~+YV@A7
z^Npc%^R(T1^ale7#Ndr9fJ@iU?SJ!lcWRc*<f`*p|NhVr8oloG0~jPzxb8SW;rua{
zemQUsYt2;#dwZgR()7Sr4P=ln7>X$Z^dH$byr#@Ry8EgFzsrEzuRX)+opFCLS%VR)
zhxwteYXWmghqIa|4<7C>bq=oPpFXTkY#FQ+QgmE=_7`M)^pkx_i<QON*`%lU!lY|F
zta57SvD%?y#}|toU1f4h!#7ohqyPVYaiy3qCGC}Rl5{us4Gm;@_mK-~r<RviYPB=V
z&3d7uzf&PXv(dy>P!559>YE7}%Ui>A1ml*Y6jUgHjibRvmJvsHFH}=Ly!}$LWeI|i
zqN0VPWn;<si_z%<u=r0rAITO11%YIu9BpA4MX*kNapj1JTYtGA2aq!$ECo3jV~l06
z4CbrkvLdx_2WBLM1+oxA7+aPxX&bxo`c+f@WBXJPvIHPxSt&5tmcfy@^OuKLUYqPi
z0m+E<I|GAl(|otEQr(i1kPw?`Y#cfDVy-_y1SB@o7-Q_eIw}$(u<23JU;s&SSQh|R
zP&gpy000262mqY{Dlh;r06uLhkwv5;p_u8O{6Gf8vVdD7$pEQ8;0<sCie(%1h(=U~
zt7KG2#vx^{@Z+;a6yy2v7#Lb)w516lIsiO!RJdKB0092}F07&29S&`=>K(VR&CZy+
z@;f<<Q5(C)pv3wg<JS<_Hjo3B$ltC5g&hj*p&&bO9fcX-=;2@D+R`D-F`u~HuGt=A
zVb0+_>#&dnw0{#iP*0)F3~|h;fClMF<ryqWHEx`s?SGMhg|2Y=8Hda}HO~=l7{Zp}
i^*8Q<wd1x6V$r>UzzT97ciaX3CBO^@dJMa20000l<+4`*

literal 0
HcmV?d00001

diff --git a/src/components/userAbyss/tua-detail-battle.vue b/src/components/userAbyss/tua-detail-battle.vue
index bde5cd92..e51e8a2c 100644
--- a/src/components/userAbyss/tua-detail-battle.vue
+++ b/src/components/userAbyss/tua-detail-battle.vue
@@ -1,25 +1,38 @@
+<!-- 战斗组件 -->
 <template>
-  <div class="tud-db-box">
-    <div class="tud-db-time">{{ props.title }} {{ props.modelValue.time }}</div>
-    <div class="tud-db-icons-grid">
+  <div class="tua-db-box">
+    <div class="tua-db-time">{{ props.title }} {{ props.battle.time }}</div>
+    <div v-if="props.battle.monsters && props.battle.monsters.length > 0" class="tua-db-monsters">
+      <div v-for="(monster, idx) in props.battle.monsters" :key="idx" class="tua-db-monster">
+        <div class="icon">
+          <TMiImg :ori="true" :src="monster.icon" alt="icon" />
+        </div>
+        <div class="info">
+          <span>{{ monster.name }}</span>
+          <span>Lv.{{ monster.level }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="tua-db-grid">
       <TItemBox
-        v-for="avatar in props.modelValue.characters"
+        v-for="avatar in props.battle.characters"
         :key="avatar.id"
-        :model-value="getBoxData(avatar)"
+        :model-value="getAvatarBox(avatar)"
       />
     </div>
   </div>
 </template>
 <script lang="ts" setup>
 import TItemBox, { type TItemBoxData } from "@comp/app/t-itemBox.vue";
+import TMiImg from "@comp/app/t-mi-img.vue";
 
 import { AppCharacterData } from "@/data/index.js";
 
-type TuaDetailBattleProps = { title: string; modelValue: TGApp.Sqlite.Abyss.Battle };
+type TuaDetailBattleProps = { title: string; battle: TGApp.Sqlite.Abyss.Battle };
 
 const props = defineProps<TuaDetailBattleProps>();
 
-function getBoxData(avatar: TGApp.Sqlite.Abyss.CharacterInfo): TItemBoxData {
+function getAvatarBox(avatar: TGApp.Sqlite.Abyss.CharacterInfo): TItemBoxData {
   const res = AppCharacterData.find((i) => i.id === avatar.id);
   if (avatar.id === 10000005 || avatar.id === 10000007) {
     return {
@@ -49,18 +62,80 @@ function getBoxData(avatar: TGApp.Sqlite.Abyss.CharacterInfo): TItemBoxData {
   };
 }
 </script>
-<style lang="css" scoped>
-.tud-db-icons-grid {
+<style lang="scss" scoped>
+.tua-db-box {
+  position: relative;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  row-gap: 4px;
+}
+
+.tua-db-time {
+  color: var(--box-text-2);
+  font-size: 12px;
+  text-align: left;
+}
+
+.tua-db-grid {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   gap: 12px;
 }
 
-.tud-db-time {
-  color: var(--box-text-1);
-  font-size: 12px;
-  opacity: 0.6;
-  text-align: left;
+.tua-db-monsters {
+  position: relative;
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap-reverse;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+
+.tua-db-monster {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 12px 4px 4px;
+  border-radius: 40px;
+  background: var(--box-bg-3);
+  color: var(--box-text-4);
+  column-gap: 4px;
+
+  .icon {
+    position: relative;
+    overflow: hidden;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    background: var(--box-bg-4);
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .info {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    font-size: 12px;
+
+    span {
+      line-height: 14px;
+
+      &:first-child {
+        font-family: var(--font-title);
+      }
+    }
+  }
 }
 </style>
diff --git a/src/components/userAbyss/tua-detail-level.vue b/src/components/userAbyss/tua-detail-level.vue
index 9332a108..5a8a3a8b 100644
--- a/src/components/userAbyss/tua-detail-level.vue
+++ b/src/components/userAbyss/tua-detail-level.vue
@@ -1,40 +1,78 @@
+<!-- 关卡组件 -->
 <template>
   <div class="tua-dl-box">
-    <TuaDetailTitle
-      :val="props.modelValue.winStar"
-      :name="`第${props.modelValue.id}间`"
-      mode="level"
-    />
-    <TuaDetailBattle
-      v-if="props.modelValue.upBattle"
-      title="上半"
-      :model-value="props.modelValue.upBattle"
-    />
-    <TuaDetailBattle
-      v-if="props.modelValue.downBattle"
-      title="下半"
-      :model-value="props.modelValue.downBattle"
-    />
+    <div class="tua-dl-title">
+      <div class="title">第{{ props.level.id }}间</div>
+      <div class="star">
+        <img
+          v-for="(i, idx) in genStarList()"
+          :key="idx"
+          :src="`/icon/star/abyss${i}.webp`"
+          alt="icon"
+        />
+      </div>
+    </div>
+    <TuaDetailBattle v-if="props.level.upBattle" :battle="props.level.upBattle" title="上半" />
+    <TuaDetailBattle v-if="props.level.downBattle" :battle="props.level.downBattle" title="下半" />
   </div>
 </template>
 <script lang="ts" setup>
 import TuaDetailBattle from "./tua-detail-battle.vue";
-import TuaDetailTitle from "./tua-detail-title.vue";
 
-type TuaDetailLevelProps = { modelValue: TGApp.Sqlite.Abyss.Level };
+type TuaDetailLevelProps = { level: TGApp.Sqlite.Abyss.Level };
 
 const props = defineProps<TuaDetailLevelProps>();
+
+function genStarList(): Array<number> {
+  const arr: Array<number> = [];
+  for (let i = 0; i < props.level.maxStar; i++) {
+    if (i < props.level.winStar) arr.push(1);
+    else arr.push(0);
+  }
+  return arr.reverse();
+}
 </script>
 <style lang="css" scoped>
 .tua-dl-box {
+  position: relative;
   display: flex;
   box-sizing: border-box;
   flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
   padding: 8px;
   border: 1px solid var(--common-shadow-1);
   border-radius: 4px;
-  margin-top: 8px;
   background: var(--box-bg-2);
-  gap: 8px;
+  row-gap: 8px;
+}
+
+.tua-dl-title {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 12px;
+
+  .title {
+    color: var(--box-text-4);
+    font-size: 18px;
+  }
+
+  .star {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    column-gap: 4px;
+
+    img {
+      width: 24px;
+      height: 24px;
+      padding: 2px;
+      border-radius: 50%;
+      background: #2c313c;
+    }
+  }
 }
 </style>
diff --git a/src/components/userAbyss/tua-detail-title.vue b/src/components/userAbyss/tua-detail-title.vue
deleted file mode 100644
index 4b990af8..00000000
--- a/src/components/userAbyss/tua-detail-title.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-  <div class="tud-t-box">
-    <div class="tud-t-title">
-      <slot name="title">{{ props.name }}</slot>
-    </div>
-    <div class="tud-t-val">
-      <img src="/icon/star/Abyss.webp" alt="Abyss" />
-      <slot name="val">{{ props.val }}</slot>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-type TuaDetailTitleProps = { name: string; val: number; mode: "floor" | "level" };
-
-const props = defineProps<TuaDetailTitleProps>();
-</script>
-<style lang="css" scoped>
-.tud-t-box {
-  display: flex;
-  height: 30px;
-  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 {
-  display: flex;
-  align-items: center;
-  color: var(--tgc-yellow-1);
-  font-family: var(--font-title);
-  font-size: v-bind("props.mode === 'level' ? '18px' : '20px'");
-  gap: 5px;
-}
-
-.tud-t-val img {
-  width: 20px;
-  height: 20px;
-  padding: 1px;
-  filter: invert(22%) sepia(7%) saturate(1241%) hue-rotate(182deg) brightness(95%) contrast(99%);
-  object-fit: cover;
-}
-
-.dark .tud-t-val img {
-  filter: none;
-}
-</style>
diff --git a/src/components/userAbyss/tua-detail.vue b/src/components/userAbyss/tua-detail.vue
index d6e1f2f1..6216c6b3 100644
--- a/src/components/userAbyss/tua-detail.vue
+++ b/src/components/userAbyss/tua-detail.vue
@@ -1,38 +1,89 @@
+<!-- 楼层组件 -->
 <template>
   <div class="tuad-box">
-    <TuaDetailTitle
-      :val="props.modelValue.winStar"
-      :name="`第${props.modelValue.id}层`"
-      mode="floor"
-    />
+    <div class="tuad-title">
+      <div class="title">第{{ props.floor.id }}层</div>
+      <div class="append">
+        <span>{{ props.floor.winStar }}</span>
+        <span>/{{ props.floor.maxStar }}</span>
+        <img alt="Abyss" src="/icon/star/Abyss.webp" />
+      </div>
+    </div>
+    <div v-if="props.floor.buff && props.floor.buff.length > 0" class="tuad-buff">
+      <span>地脉异常:</span>
+      <span v-for="(b, i) in props.floor.buff" :key="i">{{ b }}</span>
+    </div>
     <div class="tuad-index-box">
-      <TuaDetailLevel
-        v-for="level in props.modelValue.levels"
-        :key="level.id"
-        :model-value="level"
-      />
+      <TuaDetailLevel v-for="level in props.floor.levels" :key="level.id" :level />
     </div>
   </div>
 </template>
 <script lang="ts" setup>
 import TuaDetailLevel from "./tua-detail-level.vue";
-import TuaDetailTitle from "./tua-detail-title.vue";
 
-type TuaDetailProps = { modelValue: TGApp.Sqlite.Abyss.Floor };
+type TuaDetailProps = { floor: TGApp.Sqlite.Abyss.Floor };
 
 const props = defineProps<TuaDetailProps>();
 </script>
 <style lang="css" scoped>
 .tuad-box {
+  position: relative;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
   padding: 8px;
   border-radius: 4px;
   background: var(--box-bg-1);
+  row-gap: 4px;
+}
+
+.tuad-title {
+  position: relative;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px;
+  border-bottom: 1px solid var(--common-shadow-4);
+  font-size: 20px;
+  line-height: 24px;
+
+  .append {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    column-gap: 4px;
+
+    span:first-child {
+      color: var(--tgc-od-orange);
+      font-family: var(--font-title);
+    }
+
+    img {
+      width: 28px;
+      height: 28px;
+      padding: 2px;
+      border-radius: 50%;
+      background: #2c313c;
+    }
+  }
+}
+
+.tuad-buff {
+  position: relative;
+  margin-left: auto;
+  color: var(--box-text-1);
+  font-size: 14px;
+  font-style: italic;
 }
 
 .tuad-index-box {
   display: grid;
   width: 100%;
-  grid-gap: 8px;
+  gap: 8px;
   grid-template-columns: repeat(3, 1fr);
 }
 </style>
diff --git a/src/components/userAbyss/tua-overview.vue b/src/components/userAbyss/tua-overview.vue
index 8d0def96..d87f1ecd 100644
--- a/src/components/userAbyss/tua-overview.vue
+++ b/src/components/userAbyss/tua-overview.vue
@@ -1,3 +1,4 @@
+<!-- 概览 -->
 <template>
   <div class="tuao-box">
     <div class="tuao-title">
@@ -23,15 +24,19 @@ import TItemBox, { type TItemBoxData } from "@comp/app/t-itemBox.vue";
 import { AppCharacterData } from "@/data/index.js";
 
 type TAOProps = {
+  /** 标题 */
   title: string;
+  /**值文本 */
   valText?: string | number;
-  valIcons?: Array<TGApp.Sqlite.Abyss.Character>;
+  /** 值图标 */
+  valIcons?: Array<TGApp.Sqlite.Abyss.CharacterData>;
+  /* 是否多个 */
   multi4?: boolean;
 };
 
 const props = defineProps<TAOProps>();
 
-function getBoxData(avatar: TGApp.Sqlite.Abyss.Character): TItemBoxData {
+function getBoxData(avatar: TGApp.Sqlite.Abyss.CharacterData): TItemBoxData {
   const res = AppCharacterData.find((a) => a.id === avatar.id);
   return {
     height: "80px",
@@ -42,6 +47,7 @@ function getBoxData(avatar: TGApp.Sqlite.Abyss.Character): TItemBoxData {
     lt: `/icon/element/${res?.element ?? "风"}元素.webp`,
     innerText: avatar.value.toString(),
     display: "inner",
+    innerBlur: "5px",
     size: "80px",
     innerHeight: 20,
   };
diff --git a/src/components/userCombat/tuc-ae-box.vue b/src/components/userCombat/tuc-ae-box.vue
index c2fd1131..725b05b4 100644
--- a/src/components/userCombat/tuc-ae-box.vue
+++ b/src/components/userCombat/tuc-ae-box.vue
@@ -16,7 +16,7 @@
       <div class="tuc-ae-flex">
         <div v-for="(enemy, idx) in props.enemies" :key="idx" class="tuc-enemy">
           <div class="tuc-enemy-icon">
-            <img :src="enemy.icon" alt="icon" />
+            <TMiImg :ori="true" :src="enemy.icon" alt="icon" />
           </div>
           <div class="tuc-enemy-info">
             <span>{{ enemy.name }}</span>
@@ -29,6 +29,7 @@
 </template>
 <script lang="ts" setup>
 import TItembox, { type TItemBoxData } from "@comp/app/t-itemBox.vue";
+import TMiImg from "@comp/app/t-mi-img.vue";
 import { getWikiBrief, getZhElement } from "@utils/toolFunc.js";
 
 type TucAeBoxProps = {
diff --git a/src/pages/User/Abyss.vue b/src/pages/User/Abyss.vue
index 8a24349f..bb092fe0 100644
--- a/src/pages/User/Abyss.vue
+++ b/src/pages/User/Abyss.vue
@@ -80,7 +80,7 @@
             <TuaOverview title="元素爆发" :val-icons="item.energySkillRank" />
           </div>
           <div class="uaw-d-box">
-            <TuaDetail v-for="floor in item.floors" :key="floor.id" :model-value="floor" />
+            <TuaDetail v-for="floor in item.floors" :key="floor.id" :floor />
           </div>
         </div>
       </v-window-item>
@@ -178,6 +178,7 @@ async function refreshAbyss(): Promise<void> {
   await TGLogger.Info("[UserAbyss][getAbyssData] 更新深渊数据");
   await showLoading.start(`正在获取${account.value.gameUid}的深渊数据`, "正在获取上期数据");
   const resP = await recordReq.spiralAbyss(cookie.value, account.value, "2");
+  console.log(resP);
   if ("retcode" in resP) {
     await showLoading.end();
     showSnackbar.error(`[${resP.retcode}]${resP.message}`);
@@ -192,6 +193,7 @@ async function refreshAbyss(): Promise<void> {
   await TSUserAbyss.saveAbyss(account.value.gameUid, resP);
   await showLoading.update("正在获取本期深渊数据");
   const res = await recordReq.spiralAbyss(cookie.value, account.value, "1");
+  console.log(res);
   if ("retcode" in res) {
     await showLoading.end();
     showSnackbar.error(`[${res.retcode}]${res.message}`);
diff --git a/src/plugins/Sqlite/utils/transAbyssData.ts b/src/plugins/Sqlite/utils/transAbyssData.ts
index a651db08..fdbfd88f 100644
--- a/src/plugins/Sqlite/utils/transAbyssData.ts
+++ b/src/plugins/Sqlite/utils/transAbyssData.ts
@@ -1,19 +1,18 @@
 /**
- * @file plugins/Sqlite/utils/transCharacter.ts
- * @description Sqlite 数据转换
- * @since Beta v0.6.0
+ * 深境螺旋数据转换
+ * @since Beta v0.9.0
  */
 
 import { timestampToDate } from "@utils/toolFunc.js";
 
 /**
- * @description 将通过 api 获取到的深渊数据转换为数据库中的数据
+ * 转换角色数据
  * @since Alpha v0.2.0
- * @param {TGApp.Game.Abyss.CharacterData[]} data 深渊数据
- * @returns {string} 转换后的深渊数据
+ * @param {Array<TGApp.Game.Abyss.CharacterData>} data 接口获取角色数据
+ * @returns {string} 转换后的角色数据
  */
-export function transCharacterData(data: TGApp.Game.Abyss.CharacterData[]): string {
-  const res: TGApp.Sqlite.Abyss.Character[] = data.map((item) => ({
+export function transCharacterData(data: Array<TGApp.Game.Abyss.CharacterData>): string {
+  const res: Array<TGApp.Sqlite.Abyss.CharacterData> = data.map((item) => ({
     id: item.avatar_id,
     value: item.value,
     star: item.rarity,
@@ -22,27 +21,28 @@ export function transCharacterData(data: TGApp.Game.Abyss.CharacterData[]): stri
 }
 
 /**
- * @description 将通过 api 获取到的深渊数据转换为数据库中的数据
- * @since Beta v0.3.9
- * @param {TGApp.Game.Abyss.Floor} data 深渊数据
- * @returns {string} 转换后的深渊数据
+ * 转换楼层数据
+ * @since Beta v0.9.0
+ * @param {Array<TGApp.Game.Abyss.Floor>} data 接口获取楼层数据
+ * @returns {string} 转换后的楼层数据
  */
-export function transFloorData(data: TGApp.Game.Abyss.Floor[]): string {
+export function transFloorData(data: Array<TGApp.Game.Abyss.Floor>): string {
   const floor: TGApp.Sqlite.Abyss.Floor[] = data.map((item) => ({
     id: item.index,
     winStar: item.star,
     maxStar: item.max_star,
     isUnlock: item.is_unlock ? 1 : 0,
-    levels: item.levels.map((level) => transLevelData(level)),
+    levels: item.levels.map(transLevelData),
+    buff: item.ley_line_disorder,
   }));
   return JSON.stringify(floor);
 }
 
 /**
- * @description 将通过 api 获取到的深渊数据转换为数据库中的数据
- * @since Beta v0.3.9
- * @param {TGApp.Game.Abyss.Level} data 深渊数据
- * @returns {TGApp.Sqlite.Abyss.Level} 转换后的深渊数据
+ * 转换关卡数据
+ * @since Beta v0.9.0
+ * @param {TGApp.Game.Abyss.Level} data 接口获取关卡数据
+ * @returns {TGApp.Sqlite.Abyss.Level} 转换后的关卡数据
  */
 function transLevelData(data: TGApp.Game.Abyss.Level): TGApp.Sqlite.Abyss.Level {
   const res: TGApp.Sqlite.Abyss.Level = {
@@ -51,19 +51,23 @@ function transLevelData(data: TGApp.Game.Abyss.Level): TGApp.Sqlite.Abyss.Level
     maxStar: data.max_star,
   };
   for (const battle of data.battles) {
-    if (battle.index === 1) res.upBattle = transBattleData(battle);
-    else res.downBattle = transBattleData(battle);
+    if (battle.index === 1) res.upBattle = transBattleData(battle, data.top_half_floor_monster);
+    else res.downBattle = transBattleData(battle, data.bottom_half_floor_monster);
   }
   return res;
 }
 
 /**
- * @description 将通过 api 获取到的深渊数据转换为数据库中的数据
- * @since Beta v0.6.0
- * @param {TGApp.Game.Abyss.Battle} data 深渊数据
+ * 转换战斗数据
+ * @since Beta v0.9.0
+ * @param {TGApp.Game.Abyss.Battle} data 接口获取战斗数据
+ * @param {Array<TGApp.Game.Abyss.MonsterInfo>} monsters 对应战斗怪物数据
  * @returns {TGApp.Sqlite.Abyss.Battle} 转换后的深渊数据
  */
-function transBattleData(data: TGApp.Game.Abyss.Battle): TGApp.Sqlite.Abyss.Battle {
+function transBattleData(
+  data: TGApp.Game.Abyss.Battle,
+  monsters: Array<TGApp.Sqlite.Abyss.MonsterInfo>,
+): TGApp.Sqlite.Abyss.Battle {
   return {
     time: timestampToDate(Number(data.timestamp) * 1000),
     characters: data.avatars.map((item) => ({
@@ -71,5 +75,6 @@ function transBattleData(data: TGApp.Game.Abyss.Battle): TGApp.Sqlite.Abyss.Batt
       level: item.level,
       star: item.rarity,
     })),
+    monsters: monsters,
   };
 }
diff --git a/src/request/recordReq.ts b/src/request/recordReq.ts
index 47884666..5f11b244 100644
--- a/src/request/recordReq.ts
+++ b/src/request/recordReq.ts
@@ -1,6 +1,5 @@
 /**
- * @file request/recordReq.ts
- * @description TakumiRecordGenshinApi 相关请求
+ * TakumiRecordGenshinApi 相关请求
  * @since Beta v0.8.0
  */
 
@@ -107,7 +106,7 @@ async function roleCombat(
 }
 
 /**
- * @description 获取深渊螺旋记录
+ * 获取深渊螺旋记录
  * @since Beta v0.6.3
  * @param {TGApp.App.Account.Cookie} cookie Cookie
  * @param {TGApp.Sqlite.Account.Game} user 用户
diff --git a/src/types/Game/Abyss.d.ts b/src/types/Game/Abyss.d.ts
index 5a679857..7e55896c 100644
--- a/src/types/Game/Abyss.d.ts
+++ b/src/types/Game/Abyss.d.ts
@@ -94,7 +94,7 @@ declare namespace TGApp.Game.Abyss {
      * @remarks 一般为 null
      */
     settle_date_time: TGApp.Game.Base.DateTime | null;
-    /** 关卡Buff */
+    /** 地脉异常 */
     ley_line_disorder: Array<string>;
   };
 
diff --git a/src/types/Sqlite/Abyss.d.ts b/src/types/Sqlite/Abyss.d.ts
index 0457ae74..8699859d 100644
--- a/src/types/Sqlite/Abyss.d.ts
+++ b/src/types/Sqlite/Abyss.d.ts
@@ -1,180 +1,217 @@
 /**
- * @file types/Sqlite/Abyss.d.ts
- * @description 数据库深境螺旋相关类型定义文件
- * @since Beta v0.6.3
+ * 深境螺旋数据库
+ * @since Beta v0.9.0
  */
 
 declare namespace TGApp.Sqlite.Abyss {
   /**
-   * @description 数据库-深境螺旋表
+   * 深境螺旋表
    * @since Beta v0.6.1
-   * @interface TableRaw
-   * @property {string} uid - 用户 UID
-   * @property {number} id - 深境螺旋 ID
-   * @property {string} startTime - 开始时间
-   * @property {string} endTime - 结束时间
-   * @property {number} totalBattleTimes - 总战斗次数
-   * @property {number} totalWinTimes - 总胜利次数
-   * @property {string} maxFloor - 最深抵达
-   * @property {number} totalStar - 总星数
-   * @property {boolean} isUnlock - 是否解锁
-   * @description 后面的几个数据在数据库中是存储的 JSON 字符串，需要在使用时进行 JSON.parse
-   * @property {Character[]} revealRank - 出战次数
-   * @property {Character[]} defeatRank - 最多击破数
-   * @property {Character[]} damageRank - 最强一击
-   * @property {Character[]} takeDamageRank - 承受最多伤害
-   * @property {Character[]} normalSkillRank - 元素战技释放数
-   * @property {Character[]} energySkillRank - 元素爆发次数
-   * @property {Floor[]} floors - 深境螺旋各层数据
-   * @property {string} skippedFloor - 跳过楼层
-   * @property {string} updated - 更新时间
-   * @return TableRaw
    */
-  interface TableRaw {
+  type TableRaw = {
+    /** 用户UID */
     uid: string;
+    /** 深渊ID */
     id: number;
+    /** 开始时间 */
     startTime: string;
+    /** 结束时间 */
     endTime: string;
+    /** 总战斗次数 */
     totalBattleTimes: number;
+    /** 总胜利次数 */
     totalWinTimes: number;
+    /** 最深抵达 */
     maxFloor: string;
+    /** 总星数 */
     totalStar: number;
+    /** 是否解锁
+     * @remarks 0-未解锁，1-已解锁
+     */
     isUnlock: 0 | 1;
-    revealRank: string; // Character[]
-    defeatRank: string; // Character[]
-    damageRank: string; // Character[]
-    takeDamageRank: string; // Character[]
-    normalSkillRank: string; // Character[]
-    energySkillRank: string; // Character[]
-    floors: string; // Floor[]
-    skippedFloor: string;
+    /**
+     * 出战次数
+     * @remarks 序列化，反序列化后是 Array<Character>
+     */
+    revealRank: string;
+    /**
+     * 最多击败数
+     * @remarks 序列化，反序列化后是 Array<Character>
+     */
+    defeatRank: string;
+    /**
+     * 最强一击
+     * @remarks 序列化，反序列化后是 Array<Character>
+     */
+    damageRank: string;
+    /**
+     * 最多承伤
+     * @remarks 序列化，反序列化后是 Array<Character>
+     */
+    takeDamageRank: string;
+    /**
+     * 元素战技
+     * @remarks 序列化，反序列化后是 Array<Character>
+     */
+    normalSkillRank: string;
+    /**
+     * 元素爆发
+     * @remarks 序列化，反序列化后是 Array<Character>
+     */
+    energySkillRank: string;
+    /**
+     * 楼层数据
+     * @remarks 序列化，反序列化后是 Array<Floor>
+     */
+    floors: string;
+    /** 跳过楼层 */
+    skippedFloor: string | null;
+    /** 更新时间 */
     updated: string;
-  }
+  };
 
   /**
-   * @description 数据库-深境螺旋表
+   * 深境螺旋表-解析
    * @since Beta v0.6.1
-   * @interface TableData
-   * @property {string} uid - 用户 UID
-   * @property {number} id - 深境螺旋 ID
-   * @property {string} startTime - 开始时间
-   * @property {string} endTime - 结束时间
-   * @property {number} totalBattleTimes - 总战斗次数
-   * @property {number} totalWinTimes - 总胜利次数
-   * @property {string} maxFloor - 最深抵达
-   * @property {number} totalStar - 总星数
-   * @property {boolean} isUnlock - 是否解锁
-   * @description 后面的几个数据在数据库中是存储的 JSON 字符串，需要在使用时进行 JSON.parse
-   * @property {Character[]} revealRank - 出战次数
-   * @property {Character[]} defeatRank - 最多击破数
-   * @property {Character[]} damageRank - 最强一击
-   * @property {Character[]} takeDamageRank - 承受最多伤害
-   * @property {Character[]} normalSkillRank - 元素战技释放数
-   * @property {Character[]} energySkillRank - 元素爆发次数
-   * @property {Floor[]} floors - 深境螺旋各层数据
-   * @property {string} skippedFloor - 跳过楼层
-   * @property {string} updated - 更新时间
-   * @return TableData
    */
-  interface TableData {
+  type TableData = {
+    /** 用户UID */
     uid: string;
+    /** 深渊ID */
     id: number;
+    /** 开始时间 */
     startTime: string;
+    /** 结束时间 */
     endTime: string;
+    /** 总战斗次数 */
     totalBattleTimes: number;
+    /** 总胜利次数 */
     totalWinTimes: number;
+    /** 最深抵达 */
     maxFloor: string;
+    /** 总星数 */
     totalStar: number;
+    /** 是否解锁
+     * @remarks 0-未解锁，1-已解锁
+     */
     isUnlock: 0 | 1;
-    revealRank: Character[];
-    defeatRank: Character[];
-    damageRank: Character[];
-    takeDamageRank: Character[];
-    normalSkillRank: Character[];
-    energySkillRank: Character[];
-    floors: Floor[];
-    skippedFloor: string;
+    /** 出战次数 */
+    revealRank: Array<CharacterData>;
+    /** 最多击败数 */
+    defeatRank: Array<CharacterData>;
+    /** 最强一击 */
+    damageRank: Array<CharacterData>;
+    /** 最多承伤 */
+    takeDamageRank: Array<CharacterData>;
+    /** 元素战技 */
+    normalSkillRank: Array<CharacterData>;
+    /** 元素爆发 */
+    energySkillRank: Array<CharacterData>;
+    /** 楼层数据 */
+    floors: Array<Floor>;
+    /** 跳过楼层 */
+    skippedFloor: string | null;
+    /** 更新时间 */
     updated: string;
-  }
+  };
 
   /**
-   * @description 数据库-深境螺旋表-角色数据
+   * 角色数据
    * @since Alpha v0.2.0
-   * @interface Character
-   * @property {number} id - 角色 ID
-   * @property {number} value - 值
-   * @property {number} star - 星级
-   * @return Character
    */
-  interface Character {
+  type CharacterData = {
+    /** 角色ID */
     id: number;
+    /** 值 */
     value: number;
+    /** 星级 */
     star: number;
-  }
+  };
 
   /**
-   * @description 数据库-深境螺旋表-层数据
-   * @since Alpha v0.2.0
-   * @interface Floor
-   * @property {number} id - 层 ID
-   * @property {number} winStar - 获得星数
-   * @property {number} maxStar - 最大星级
-   * @property {boolean} isUnlock - 是否解锁
-   * @property {Level[]} levels - 关卡数据
-   * @return Floor
+   * 楼层数据
+   * @since Beta v0.9.0
    */
-  interface Floor {
+  type Floor = {
+    /** 楼层 */
     id: number;
-    winStar: number;
-    maxStar: number;
+    /**
+     * 是否解锁
+     * @remarks 0-未解锁，1-已解锁
+     */
     isUnlock: 0 | 1;
-    levels: Level[];
-  }
-
-  /**
-   * @description 数据库-深境螺旋表-关卡数据
-   * @since Beta v0.3.9
-   * @interface Level
-   * @property {number} id - 关卡 ID
-   * @property {number} winStar - 获得星数
-   * @property {number} maxStar - 最大星级
-   * @property {Battle} upBattle - 上半场数据
-   * @property {Battle} downBattle - 下半场数据
-   * @return Level
-   */
-  interface Level {
-    id: number;
+    /** 获得星数 */
     winStar: number;
+    /** 最大星数 */
     maxStar: number;
-    upBattle?: Battle;
-    downBattle?: Battle;
-  }
+    /** 关卡数据 */
+    levels: Array<Level>;
+    /**
+     * 地脉异常
+     * @remarks v0.9.0新增，之前数据缺失
+     */
+    buff?: Array<string>;
+  };
 
   /**
-   * @description 数据库-深境螺旋表-战斗数据
-   * @since Alpha v0.2.0
-   * @interface Battle
+   * 关卡数据
+   * @since Beta v0.3.9
+   */
+  type Level = {
+    /** 关卡ID */
+    id: number;
+    /** 获得星数 */
+    winStar: number;
+    /** 最大星数 */
+    maxStar: number;
+    /** 上半场数据 */
+    upBattle?: Battle;
+    /** 下半场数据 */
+    downBattle?: Battle;
+  };
+
+  /**
+   * 战斗数据
+   * @since Beta v0.9.0
    * @property {string} time - 时间
    * @property {CharacterInfo[]} characters - 角色数据
    * @return Battle
    */
   interface Battle {
+    /** 结束时间 */
     time: string;
-    characters: CharacterInfo[];
+    /** 上场角色 */
+    characters: Array<CharacterInfo>;
+    /**
+     * 怪物数据
+     * @remarks v0.9.0 版本新增，之前数据缺失
+     */
+    monsters?: Array<MonsterInfo>;
   }
 
   /**
-   * @description 数据库-深境螺旋表-角色数据
+   * 角色信息
    * @since Alpha v0.2.0
-   * @interface CharacterInfo
-   * @property {number} id - 角色 ID
-   * @property {number} star - 星级
-   * @property {number} level - 等级
-   * @return CharacterInfo
    */
-  interface CharacterInfo {
+  type CharacterInfo = {
+    /** 角色ID */
     id: number;
+    /** 角色等级 */
     level: number;
+    /** 角色星级 */
     star: number;
-  }
+  };
+
+  /**
+   * 怪物信息
+   * @since Beta v0.9.0
+   */
+  type MonsterInfo = {
+    /** 名称 */
+    name: string;
+    /** 图标 */
+    icon: string;
+    /** 等级 */
+    level: number;
+  };
 }