From a47afbf2e0d6bb145c668285436180ed19260fac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=9B=AE=E6=A3=83?= <BT-Muli@outlook.com>
Date: Thu, 20 Mar 2025 16:52:41 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E8=B0=83=E6=95=B4UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/app/t-subline.vue              | 24 ++++------
 .../userAbyss/tua-detail-battle.vue           |  2 +-
 src/components/userAbyss/tua-detail-level.vue | 10 ++--
 src/components/userAbyss/tua-detail.vue       |  6 +--
 src/components/userAbyss/tua-overview.vue     |  1 +
 src/components/userCombat/tuc-avatars.vue     |  4 +-
 src/components/userCombat/tuc-buffs.vue       | 14 +++---
 src/components/userCombat/tuc-overview.vue    |  2 +-
 src/components/userCombat/tuc-round.vue       | 15 +++---
 src/components/userCombat/tuc-sub.vue         |  8 ++--
 src/components/userCombat/tuc-tile.vue        |  5 +-
 src/pages/User/Abyss.vue                      | 47 +++++++++++--------
 src/pages/User/Combat.vue                     | 39 ++++++++-------
 src/pages/User/Record.vue                     |  4 ++
 src/pages/common/PageAchi.vue                 |  3 +-
 15 files changed, 98 insertions(+), 86 deletions(-)

diff --git a/src/components/app/t-subline.vue b/src/components/app/t-subline.vue
index 198d5ad3..335f04d4 100644
--- a/src/components/app/t-subline.vue
+++ b/src/components/app/t-subline.vue
@@ -8,26 +8,20 @@
 .tsl-box {
   display: flex;
   align-items: center;
-  padding: 5px;
-  border-radius: 5px;
-  margin: 5px 0;
-  background: var(--box-bg-3);
-  color: var(--box-text-4);
+  padding: 4px;
+  border-radius: 4px;
+  background: var(--box-bg-1);
+  color: var(--box-text-1);
   font-family: var(--font-title);
-  gap: 5px;
+  gap: 4px;
 }
 
 .tsl-box :first-child {
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
+  box-sizing: border-box;
   padding: 2px;
-  border-radius: 5px;
-  filter: invert(22%) sepia(7%) saturate(1241%) hue-rotate(182deg) brightness(95%) contrast(99%);
-}
-
-.dark .tsl-box {
-  background: #2c313a;
-  color: #faf7e8;
+  filter: invert(0.75);
 }
 
 .dark .tsl-box :first-child {
diff --git a/src/components/userAbyss/tua-detail-battle.vue b/src/components/userAbyss/tua-detail-battle.vue
index 0dded74c..bde5cd92 100644
--- a/src/components/userAbyss/tua-detail-battle.vue
+++ b/src/components/userAbyss/tua-detail-battle.vue
@@ -54,7 +54,7 @@ function getBoxData(avatar: TGApp.Sqlite.Abyss.CharacterInfo): TItemBoxData {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
-  gap: 10px;
+  gap: 12px;
 }
 
 .tud-db-time {
diff --git a/src/components/userAbyss/tua-detail-level.vue b/src/components/userAbyss/tua-detail-level.vue
index d49278f4..9332a108 100644
--- a/src/components/userAbyss/tua-detail-level.vue
+++ b/src/components/userAbyss/tua-detail-level.vue
@@ -28,11 +28,13 @@ const props = defineProps<TuaDetailLevelProps>();
 <style lang="css" scoped>
 .tua-dl-box {
   display: flex;
+  box-sizing: border-box;
   flex-direction: column;
-  padding: 10px;
-  border-radius: 5px;
-  margin-top: 10px;
+  padding: 8px;
+  border: 1px solid var(--common-shadow-1);
+  border-radius: 4px;
+  margin-top: 8px;
   background: var(--box-bg-2);
-  gap: 10px;
+  gap: 8px;
 }
 </style>
diff --git a/src/components/userAbyss/tua-detail.vue b/src/components/userAbyss/tua-detail.vue
index c349a6a6..d6e1f2f1 100644
--- a/src/components/userAbyss/tua-detail.vue
+++ b/src/components/userAbyss/tua-detail.vue
@@ -24,15 +24,15 @@ const props = defineProps<TuaDetailProps>();
 </script>
 <style lang="css" scoped>
 .tuad-box {
-  padding: 10px;
-  border-radius: 5px;
+  padding: 8px;
+  border-radius: 4px;
   background: var(--box-bg-1);
 }
 
 .tuad-index-box {
   display: grid;
   width: 100%;
-  grid-gap: 10px;
+  grid-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 91fe2c44..8d0def96 100644
--- a/src/components/userAbyss/tua-overview.vue
+++ b/src/components/userAbyss/tua-overview.vue
@@ -70,6 +70,7 @@ function getBoxData(avatar: TGApp.Sqlite.Abyss.Character): TItemBoxData {
   color: var(--tgc-yellow-1);
   font-family: var(--font-text);
   font-size: 20px;
+  font-weight: bold;
 }
 
 .tuao-val-icons {
diff --git a/src/components/userCombat/tuc-avatars.vue b/src/components/userCombat/tuc-avatars.vue
index cba566ce..fe001301 100644
--- a/src/components/userCombat/tuc-avatars.vue
+++ b/src/components/userCombat/tuc-avatars.vue
@@ -48,12 +48,12 @@ function getItemBox(item: TGApp.Game.Combat.Avatar): TItemBoxData {
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-start;
-  gap: 10px;
+  gap: 4px;
 
   &.grid {
     display: grid;
     width: 100%;
-    grid-gap: 10px;
+    grid-gap: 4px;
     grid-template-columns: repeat(2, 1fr);
   }
 }
diff --git a/src/components/userCombat/tuc-buffs.vue b/src/components/userCombat/tuc-buffs.vue
index 830baea9..8a5e3c1e 100644
--- a/src/components/userCombat/tuc-buffs.vue
+++ b/src/components/userCombat/tuc-buffs.vue
@@ -31,7 +31,7 @@ const columnCnt = computed<number>(() => {
 .tuc-buff-box {
   display: grid;
   width: 100%;
-  grid-gap: 5px;
+  grid-gap: 4px;
   grid-template-columns: repeat(v-bind(columnCnt), 1fr);
 }
 
@@ -42,8 +42,8 @@ const columnCnt = computed<number>(() => {
   height: 80px;
   align-items: center;
   justify-content: center;
-  padding: 10px;
-  border-radius: 5px;
+  padding: 8px;
+  border-radius: 4px;
   background-color: var(--box-bg-3);
 
   img {
@@ -56,14 +56,14 @@ const columnCnt = computed<number>(() => {
     position: absolute;
     right: 0;
     bottom: 0;
-    padding: 0 5px;
+    padding: 0 4px;
     background: var(--common-shadow-2);
-    border-bottom-right-radius: 5px;
-    border-top-left-radius: 5px;
+    border-bottom-right-radius: 4px;
+    border-top-left-radius: 4px;
     color: var(--tgc-white-2);
     font-family: var(--font-title);
     font-size: 14px;
-    text-shadow: 0 0 5px rgb(0 0 0 / 20%);
+    text-shadow: 0 0 4px rgb(0 0 0 / 20%);
   }
 }
 </style>
diff --git a/src/components/userCombat/tuc-overview.vue b/src/components/userCombat/tuc-overview.vue
index 4e5d1de8..d3f76f7e 100644
--- a/src/components/userCombat/tuc-overview.vue
+++ b/src/components/userCombat/tuc-overview.vue
@@ -46,7 +46,7 @@ function getTime(): string {
 .tuco-box {
   display: grid;
   width: 100%;
-  grid-gap: 10px;
+  grid-gap: 8px;
   grid-template-columns: repeat(3, 1fr);
 }
 </style>
diff --git a/src/components/userCombat/tuc-round.vue b/src/components/userCombat/tuc-round.vue
index 973a94a0..e67cbfa2 100644
--- a/src/components/userCombat/tuc-round.vue
+++ b/src/components/userCombat/tuc-round.vue
@@ -35,10 +35,10 @@ defineProps<{ modelValue: TGApp.Game.Combat.RoundData }>();
   height: fit-content;
   flex-direction: column;
   align-items: center;
-  padding: 5px;
-  border-radius: 5px;
+  padding: 8px;
+  border-radius: 4px;
   background: var(--box-bg-1);
-  row-gap: 5px;
+  row-gap: 4px;
 }
 
 .tucr-title {
@@ -46,7 +46,7 @@ defineProps<{ modelValue: TGApp.Game.Combat.RoundData }>();
   align-items: flex-end;
   justify-content: center;
   margin-right: auto;
-  column-gap: 5px;
+  column-gap: 4px;
 
   img {
     width: 30px;
@@ -67,13 +67,10 @@ defineProps<{ modelValue: TGApp.Game.Combat.RoundData }>();
 .tucr-content {
   display: flex;
   width: 100%;
+  flex-shrink: 0;
   align-items: flex-start;
   justify-content: flex-start;
-  column-gap: 10px;
-
-  .main {
-    width: 180px;
-  }
+  column-gap: 8px;
 
   .sub {
     width: 100%;
diff --git a/src/components/userCombat/tuc-sub.vue b/src/components/userCombat/tuc-sub.vue
index c185d302..a7864a1a 100644
--- a/src/components/userCombat/tuc-sub.vue
+++ b/src/components/userCombat/tuc-sub.vue
@@ -11,12 +11,14 @@ defineProps<{ title: string }>();
 .tuc-sub-box {
   position: relative;
   display: flex;
-  height: 200px;
+  height: 205px;
+  box-sizing: border-box;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
-  padding: 5px;
-  border-radius: 5px;
+  padding: 8px;
+  border: 1px solid var(--common-shadow-1);
+  border-radius: 4px;
   background: var(--box-bg-2);
 }
 
diff --git a/src/components/userCombat/tuc-tile.vue b/src/components/userCombat/tuc-tile.vue
index f39d14a7..ab090cc9 100644
--- a/src/components/userCombat/tuc-tile.vue
+++ b/src/components/userCombat/tuc-tile.vue
@@ -22,8 +22,8 @@ defineProps<{ title: string; val: string | number | Array<number> }>();
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 10px;
-  border-radius: 5px;
+  padding: 8px;
+  border-radius: 4px;
   background: var(--box-bg-1);
 }
 
@@ -37,6 +37,7 @@ defineProps<{ title: string; val: string | number | Array<number> }>();
   color: var(--tgc-yellow-1);
   font-family: var(--font-text);
   font-size: 20px;
+  font-weight: bold;
 }
 
 .tuct-icons {
diff --git a/src/pages/User/Abyss.vue b/src/pages/User/Abyss.vue
index 7f2ab288..eb5ab2b0 100644
--- a/src/pages/User/Abyss.vue
+++ b/src/pages/User/Abyss.vue
@@ -88,7 +88,6 @@
             <TuaOverview title="出战次数" :val-icons="item.revealRank" :multi4="true" />
             <TuaOverview title="元素爆发" :val-icons="item.energySkillRank" />
           </div>
-          <TSubLine>详情</TSubLine>
           <div class="uaw-d-box">
             <TuaDetail v-for="floor in item.floors" :key="floor.id" :model-value="floor" />
           </div>
@@ -341,11 +340,10 @@ async function deleteAbyss(): Promise<void> {
 <style lang="css" scoped>
 .uat-left {
   display: flex;
-  width: 100%;
   align-items: center;
   justify-content: center;
-  padding: 10px;
-  gap: 10px;
+  margin-left: 8px;
+  gap: 8px;
 
   img {
     width: 32px;
@@ -366,7 +364,7 @@ async function deleteAbyss(): Promise<void> {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 10px;
+  margin-right: 12px;
   font-family: var(--font-text);
   font-size: 16px;
 
@@ -381,8 +379,9 @@ async function deleteAbyss(): Promise<void> {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 10px;
-  gap: 10px;
+  padding: 8px;
+  margin-left: 8px;
+  gap: 8px;
 }
 
 .ua-btn {
@@ -391,13 +390,19 @@ async function deleteAbyss(): Promise<void> {
   font-family: var(--font-text);
 }
 
+.dark .ua-btn {
+  border: 1px solid var(--common-shadow-2);
+}
+
 .ua-box {
   display: flex;
-  height: calc(100vh - 150px);
+  height: calc(100vh - 144px);
   align-items: flex-start;
   justify-content: center;
-  border: 1px solid var(--common-shadow-4);
-  border-radius: 5px;
+  border: 1px solid var(--common-shadow-2);
+  border-radius: 4px;
+  background: var(--box-bg-1);
+  color: var(--box-text-1);
 }
 
 .ua-tabs-box {
@@ -407,22 +412,25 @@ async function deleteAbyss(): Promise<void> {
 
 .ua-window {
   overflow: hidden;
-  width: calc(100% - 100px);
+  width: 100%;
   height: 100%;
-  padding: 10px;
+  padding: 8px;
+  background: var(--app-page-bg);
+  border-bottom-right-radius: 4px;
+  border-top-right-radius: 4px;
 }
 
 .ua-window-item {
   height: 100%;
-  padding: 10px;
-  border-radius: 5px;
+  box-sizing: border-box;
+  padding-right: 8px;
   overflow-y: auto;
 }
 
 .uaw-i-ref {
   display: flex;
   flex-direction: column;
-  gap: 5px;
+  gap: 8px;
 }
 
 .uaw-top {
@@ -436,13 +444,12 @@ async function deleteAbyss(): Promise<void> {
   display: flex;
   align-items: center;
   color: var(--common-text-title);
+  column-gap: 4px;
   font-family: var(--font-title);
   font-size: 20px;
 }
 
 .uaw-title :nth-child(2n) {
-  margin-right: 10px;
-  margin-left: 10px;
   color: var(--tgc-yellow-1);
 }
 
@@ -455,14 +462,14 @@ async function deleteAbyss(): Promise<void> {
 .uaw-o-box {
   display: grid;
   width: 100%;
-  grid-gap: 10px;
+  grid-gap: 8px;
   grid-template-columns: repeat(3, 1fr);
 }
 
 .uaw-d-box {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 8px;
 }
 
 .user-empty {
@@ -474,7 +481,7 @@ async function deleteAbyss(): Promise<void> {
   height: 400px;
   flex-direction: column;
   align-items: center;
-  border-radius: 5px;
+  border-radius: 4px;
   background: var(--common-shadow-t-2);
   box-shadow: 0 0 5px var(--common-shadow-2);
   color: var(--common-text-title);
diff --git a/src/pages/User/Combat.vue b/src/pages/User/Combat.vue
index 3228377c..b00da614 100644
--- a/src/pages/User/Combat.vue
+++ b/src/pages/User/Combat.vue
@@ -77,7 +77,6 @@
           <TucOverview :data="item.stat" :fights="item.detail.fight_statisic" />
           <TSubLine>使用角色({{ item.detail.backup_avatars.length }}名)</TSubLine>
           <TucAvatars :model-value="item.detail.backup_avatars" :detail="false" />
-          <TSubLine>详情</TSubLine>
           <div class="ucw-rounds">
             <TucRound
               v-for="(round, idx) in item.detail.rounds_data"
@@ -300,11 +299,10 @@ async function deleteCombat(): Promise<void> {
 <style lang="css" scoped>
 .uct-left {
   display: flex;
-  width: 100%;
   align-items: center;
   justify-content: center;
-  padding: 10px;
-  gap: 10px;
+  margin-left: 12px;
+  gap: 8px;
 
   img {
     width: 32px;
@@ -323,11 +321,10 @@ async function deleteCombat(): Promise<void> {
 
 .uct-right {
   display: flex;
-  width: 100%;
   align-items: center;
   justify-content: center;
-  padding: 10px;
-  gap: 10px;
+  margin-right: 12px;
+  gap: 8px;
 }
 
 .uc-btn {
@@ -336,13 +333,18 @@ async function deleteCombat(): Promise<void> {
   font-family: var(--font-text);
 }
 
+.dark .uc-btn {
+  border: 1px solid var(--common-shadow-2);
+}
+
 .uc-box {
   display: flex;
-  height: calc(100vh - 100px);
+  height: calc(100vh - 96px);
   align-items: flex-start;
   justify-content: center;
-  border: 1px solid var(--common-shadow-4);
-  border-radius: 5px;
+  border: 1px solid var(--common-shadow-2);
+  border-radius: 4px;
+  background: var(--box-bg-1);
 }
 
 .uc-tabs-box {
@@ -352,22 +354,24 @@ async function deleteCombat(): Promise<void> {
 
 .uc-window {
   overflow: hidden;
-  width: calc(100% - 100px);
+  width: 100%;
   height: 100%;
-  padding: 10px;
+  padding: 8px;
+  background: var(--app-page-bg);
+  border-bottom-right-radius: 4px;
+  border-top-right-radius: 4px;
 }
 
 .uc-window-item {
   height: 100%;
-  padding: 10px;
-  border-radius: 5px;
+  padding-right: 8px;
   overflow-y: auto;
 }
 
 .ucw-i-ref {
   display: flex;
   flex-direction: column;
-  gap: 5px;
+  gap: 8px;
 }
 
 .ucw-top {
@@ -381,13 +385,12 @@ async function deleteCombat(): Promise<void> {
   display: flex;
   align-items: center;
   color: var(--common-text-title);
+  column-gap: 4px;
   font-family: var(--font-title);
   font-size: 20px;
 }
 
 .ucw-title :nth-child(2n) {
-  margin-right: 10px;
-  margin-left: 10px;
   color: var(--tgc-yellow-1);
 }
 
@@ -416,7 +419,7 @@ async function deleteCombat(): Promise<void> {
 
 .ucw-rounds {
   display: grid;
-  gap: 10px;
+  gap: 8px;
   grid-template-columns: repeat(2, 1fr);
 }
 </style>
diff --git a/src/pages/User/Record.vue b/src/pages/User/Record.vue
index fd288844..5130539f 100644
--- a/src/pages/User/Record.vue
+++ b/src/pages/User/Record.vue
@@ -238,6 +238,10 @@ async function deleteRecord(): Promise<void> {
   font-family: var(--font-text);
 }
 
+.dark .ur-top-btn {
+  border: 1px solid var(--common-shadow-2);
+}
+
 .ur-box {
   @include github-styles.github-card-shadow();
 
diff --git a/src/pages/common/PageAchi.vue b/src/pages/common/PageAchi.vue
index e224f041..610760b7 100644
--- a/src/pages/common/PageAchi.vue
+++ b/src/pages/common/PageAchi.vue
@@ -279,7 +279,7 @@ onUnmounted(async () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 8px;
+  margin-left: 8px;
   gap: 8px;
 
   img {
@@ -310,6 +310,7 @@ onUnmounted(async () => {
 .top-extension {
   position: relative;
   padding: 8px;
+  margin-left: 8px;
   display: flex;
   align-items: center;
   justify-content: center;