From 8a302654128557673ce266e2d2160e49ed15e210 Mon Sep 17 00:00:00 2001
From: BTMuli <bt-muli@outlook.com>
Date: Wed, 1 Apr 2026 23:01:50 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=E6=B7=B1=E8=89=B2=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=E4=B8=8B=E6=9B=B4=E6=8D=A2=E5=9B=BE=E6=A0=87=E8=80=8C?=
 =?UTF-8?q?=E9=9D=9Einvert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/UI/combat/combatCrown2.webp         | Bin 0 -> 1408 bytes
 src/components/userCombat/tuc-buff-box.vue |  58 ++++++++++++---------
 src/components/userCombat/tuc-card-box.vue |  26 +++++----
 src/pages/User/Combat.vue                  |   5 +-
 4 files changed, 52 insertions(+), 37 deletions(-)
 create mode 100644 public/UI/combat/combatCrown2.webp

diff --git a/public/UI/combat/combatCrown2.webp b/public/UI/combat/combatCrown2.webp
new file mode 100644
index 0000000000000000000000000000000000000000..e85ae152f53ce4fcea25086b26f59efa0a9c4fb9
GIT binary patch
literal 1408
zcmV-`1%LWdNk&F^1pok7MM6+kP&il$0000G0000x0027x06|PpNH_!l009PS*#4hy
ztKa`0C$)8LwPxG4%__-k+r@0#wvO%Dw!L;~Pn&!X^8Y7kU+vxJ7ZDSH&x3}bqSSG!
zZ_z1t;mKHaQSo1A&A(K)h<ML>N3fi#RwSb4JSPCzr`xCsop+BPUXxwhgUmRwkoEe@
zVzURl%?c_cL5;hn)%Rft81alGE&D5|m{6u?QoAxPQAMRcCctvm6slr14_j<xwef3{
zyahw!9d8N9-P2U-G)>Jf$o`v+r8F$!pv7jT3q2L0f9f5wYkM+C?<8f7v-$ta`;?RS
z_wE`3i~o-B(#(`$(;nqpKIPg7z>D!(=am1#N<hx}%~^BS|MC8Z);?n0mzMb&B(8k<
zaDP_Dk`uRW1UxYtoZ-FxEdf_&R?;!>O3TlF(M2zg-yNk&n0;kmZ-0Tox69WB1pLrY
za6*GC1iTyU#_Wc*HaFF=fKp5q-KTF^HM3jw3<0k)^^U2hz9(Rfp2-zMB6zrg2_lnj
z_kv*iI?=J9Z3Tpn)tIzGWNwo;@)foH;(TQU9VFmd3&&!Q6L3W<Bdk(f%uj^((^~Z^
zB}lmqA>eT@$Kp>A@H>-Pwr>xdA!IK}Hq};3>3R_Gq_1Of#|bziL#&!+9D0?Iy*$a(
z#z#iV|N1yqY@e0z&`(NTI}Jmw5VDsgnYxEdxn~e?w}WHqIXQ%aBq@CZW9s0`gzTkB
zrj%-WiI__S{8ZL4q5VSwe$q;KHkVkEWJFS34}1Od36^!9j=}SA9szyqsj4KI<e2(*
z2v;z``!)e*S~F+X_=SLTm6QyEwp_B=C<o}DQbx->mJ_T`#%i2`PLBz>Uz8RF4ew<(
zB5m*`!pFt`GnrFLYu$$x5MJ*HV9pgMJtE|OT}n~Bdq0yrlete>jmMym1l#^N=4_u$
zxn#{*S1h1mUlW(tw}M{V^|}pou|9Kt+zE>nFGhHJROpswOqDXF)-?!qe#y7e<vyYd
z5WX*uaITwD72d*>Huy3jdvTJ{+%<|t9LOQuXd^P0mON;s+ygO82<>hhe2MV!f9=C`
zBVO9*Ne6+sR^8wl;eJmg)3q=TxkkudmTc<RI;hl<0-JTdin-do_qNSz+UuE+(6sHs
zo!Ho~X-i(o12Z>mTM^4#E_x@%#|9`F^nQWSC6O5BAHY2oUXk$$Q7YGIyJV*G*|X-P
zXQXGO+s{a!4bC&CmU5X;{HNEPzXG^?fOGz0kn4hHe{o9o=~L1;+{k4R-2I%daveN}
z&6zPBz%)#sHf#3uX#l1JGk8YBLLd~oO48O>k3W&jsfI!jc3#SMziW-%`7$OK0<rcj
zsk~uKh&>}?MYzj^a$n?0<*zL6+xw1;CnH5yxs4#X)_wCIk=$zrSE<{axpVUtzyZ#I
zJHSoY<+u5IjjLd&-LV~S&p8L@Ku4e*z&XItCY*hC2UbuxAQ}Mx0PqI@odGI506YLb
zStyM~uOlIx{f?;c1%$MQ-T)1*Ni<1|4{KUzh`Zux-{e-RRki_5U_icWV`N7|gk4Ng
zGEI|4;#ki60092}^|62d;`>z#@fkn%7BLQ7k#9m=_qzZ8_{I2hBsskmb;<w!eqc>i
z$F(L<i~x$T((88_RARRGc6$hgRziYp46MTEWavzP!TZ3Gr^8`fN3_3v!yT9FGX?#Z
z{;cHQBE@md@84C&YdJY9s-Q-P;#;Br|BIB_wT>@_cg!|dEq|U89tA``wpCYfxo*~S
zaEA}v1kF-Utw8?kc43KC3$*Nt>6*WxWjyaPO%6;ZYd{6!d-g2v#LWB%sn7mA^K8Tk
OnQ#bkx0*U-00029^S0Xn

literal 0
HcmV?d00001

diff --git a/src/components/userCombat/tuc-buff-box.vue b/src/components/userCombat/tuc-buff-box.vue
index 563c0ef1..a2087845 100644
--- a/src/components/userCombat/tuc-buff-box.vue
+++ b/src/components/userCombat/tuc-buff-box.vue
@@ -6,17 +6,15 @@
       <span v-if="props.simpleMode">Lv.{{ props.modelValue.summary.total_level }}</span>
     </div>
     <div :class="{ 'simple-mode': props.simpleMode }" class="tuc-buff-list">
-      <div
-        :data-key="'summary'"
-        class="tuc-buff-item"
-        :class="{ 'is-summary': true }"
-      >
+      <div :class="{ 'is-summary': true }" :data-key="'summary'" class="tuc-buff-item">
         <div class="tuc-buff-summary">
           <div
+            :title="
+              props.simpleMode ? `辉彩祝福 Lv.${props.modelValue.summary.total_level}` : undefined
+            "
             class="tuc-buff-icon"
-            :title="props.simpleMode ? `辉彩祝福 Lv.${props.modelValue.summary.total_level}` : undefined"
           >
-            <img alt="total" class="summary" src="/UI/combat/combatCrown.webp" />
+            <img :src="crownIcon" alt="total" class="summary" />
             <span v-if="props.simpleMode" class="tuc-buff-level-badge">
               {{ props.modelValue.summary.total_level }}
             </span>
@@ -27,7 +25,11 @@
           </div>
           <span v-if="props.simpleMode" class="tuc-buff-name">辉彩祝福</span>
         </div>
-        <div v-show="!props.simpleMode" class="tuc-buff-total" v-html="getBuffDesc(props.modelValue.summary.desc)" />
+        <div
+          v-show="!props.simpleMode"
+          class="tuc-buff-total"
+          v-html="getBuffDesc(props.modelValue.summary.desc)"
+        />
       </div>
       <div
         v-for="buff in props.modelValue.buffs"
@@ -37,8 +39,8 @@
       >
         <div class="tuc-buff-summary">
           <div
-            class="tuc-buff-icon"
             :title="props.simpleMode ? `${buff.name} Lv.${buff.level}` : undefined"
+            class="tuc-buff-icon"
           >
             <img :alt="buff.name" :src="buff.icon" />
             <span v-if="props.simpleMode" class="tuc-buff-level-badge">
@@ -65,7 +67,9 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { nextTick, onUnmounted, ref, watch } from "vue";
+import useAppStore from "@store/app.js";
+import { storeToRefs } from "pinia";
+import { computed, nextTick, onUnmounted, ref, watch } from "vue";
 
 import { parseHtmlText } from "@utils/toolFunc.js";
 
@@ -76,6 +80,13 @@ type TucBuffBoxProps = {
 
 const props = defineProps<TucBuffBoxProps>();
 
+const appStore = useAppStore();
+const { theme } = storeToRefs(appStore);
+const isDark = computed<boolean>(() => theme.value === "dark");
+const crownIcon = computed<string>(() =>
+  isDark.value ? "/UI/combat/combatCrown2.webp" : "/UI/combat/combatCrown.webp",
+);
+
 const containerRef = ref<HTMLDivElement>();
 let animationFrameId: number | null = null;
 
@@ -130,8 +141,6 @@ watch(
     });
 
     if (animations.length > 0) {
-      containerRef.value.offsetHeight;
-
       animationFrameId = requestAnimationFrame(() => {
         animations.forEach(({ el }) => {
           el.style.transition = "transform 0.3s ease";
@@ -153,6 +162,7 @@ onUnmounted(() => {
 .tuc-buff-box {
   position: relative;
   display: flex;
+  overflow: hidden;
   width: 100%;
   box-sizing: border-box;
   flex: 2;
@@ -164,7 +174,6 @@ onUnmounted(() => {
   border-radius: 4px;
   background: var(--box-bg-2);
   row-gap: 8px;
-  overflow: hidden;
 }
 
 .tuc-buff-box.simple-mode {
@@ -172,13 +181,18 @@ onUnmounted(() => {
 }
 
 .tuc-buff-title {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: var(--box-text-2);
+  column-gap: 4px;
   font-family: var(--font-title);
-}
 
-.tuc-buff-title span:last-child {
-  margin-left: 4px;
-  color: var(--tgc-od-orange);
+  span:last-child:not(:first-child) {
+    margin-left: 4px;
+    color: var(--tgc-od-orange);
+  }
 }
 
 .tuc-buff-list {
@@ -191,8 +205,7 @@ onUnmounted(() => {
 }
 
 .tuc-buff-list.simple-mode {
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
   align-items: flex-start;
   justify-content: flex-start;
   gap: 8px;
@@ -245,8 +258,9 @@ onUnmounted(() => {
   right: 0;
   bottom: 0;
   padding: 1px 4px;
-  border-radius: 4px;
   background-color: var(--tgc-od-orange);
+  border-bottom-right-radius: 4px;
+  border-top-left-radius: 4px;
   color: white;
   font-size: 10px;
   font-weight: bold;
@@ -268,10 +282,6 @@ onUnmounted(() => {
   font-size: 10px;
 }
 
-.dark .tuc-buff-summary .tuc-buff-icon img.summary {
-  filter: invert(1);
-}
-
 .tuc-buff-detail {
   position: relative;
   display: flex;
diff --git a/src/components/userCombat/tuc-card-box.vue b/src/components/userCombat/tuc-card-box.vue
index 6977cc57..926869e9 100644
--- a/src/components/userCombat/tuc-card-box.vue
+++ b/src/components/userCombat/tuc-card-box.vue
@@ -5,7 +5,10 @@
     ref="containerRef"
     :class="['tuc-card-box', { 'simple-mode': props.simpleMode }]"
   >
-    <div class="tuc-card-title">神秘收获 {{ props.modelValue.length }}</div>
+    <div class="tuc-card-title">
+      <span>神秘收获</span>
+      <span>{{ props.modelValue.length }}</span>
+    </div>
     <div :class="{ 'simple-mode': props.simpleMode }" class="tuc-card-list">
       <div
         v-for="card in props.modelValue"
@@ -14,10 +17,7 @@
         class="tuc-card-item"
       >
         <div class="tuc-card-summary">
-          <div
-            class="tuc-ci-icon"
-            :title="props.simpleMode ? card.name : undefined"
-          >
+          <div :title="props.simpleMode ? card.name : undefined" class="tuc-ci-icon">
             <img :src="card.icon" alt="icon" />
           </div>
           <span v-if="props.simpleMode" class="tuc-card-name">{{ card.name }}</span>
@@ -88,8 +88,6 @@ watch(
     });
 
     if (animations.length > 0) {
-      containerRef.value.offsetHeight;
-
       animationFrameId = requestAnimationFrame(() => {
         animations.forEach(({ el }) => {
           el.style.transition = "transform 0.3s ease";
@@ -111,6 +109,7 @@ onUnmounted(() => {
 .tuc-card-box {
   position: relative;
   display: flex;
+  overflow: hidden;
   width: 100%;
   box-sizing: border-box;
   flex: 1;
@@ -122,12 +121,20 @@ onUnmounted(() => {
   border-radius: 4px;
   background: var(--box-bg-2);
   row-gap: 8px;
-  overflow: hidden;
 }
 
 .tuc-card-title {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: var(--box-text-2);
+  column-gap: 4px;
   font-family: var(--font-title);
+
+  span:last-child {
+    color: var(--tgc-od-orange);
+  }
 }
 
 .tuc-card-list {
@@ -141,8 +148,7 @@ onUnmounted(() => {
 }
 
 .tuc-card-list.simple-mode {
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
   align-items: flex-start;
   justify-content: flex-start;
   gap: 8px;
diff --git a/src/pages/User/Combat.vue b/src/pages/User/Combat.vue
index a523be95..0e76bb20 100644
--- a/src/pages/User/Combat.vue
+++ b/src/pages/User/Combat.vue
@@ -192,13 +192,13 @@ const uidCur = ref<string>();
 const uidList = shallowRef<Array<string>>();
 const localCombat = shallowRef<Array<TGApp.Sqlite.Combat.TableTrans>>([]);
 
+const simpleMode = ref<boolean>(false);
 const showStat = ref<boolean>(false);
 const cloudCombat = shallowRef<TGApp.Plugins.Hutao.Combat.Data>();
 const showChar = ref<boolean>(false);
 const charMasters = shallowRef<Array<TGApp.Game.Combat.CharMaster>>([]);
 const showTarot = ref<boolean>(false);
 const tarotStat = shallowRef<TGApp.Game.Combat.TarotState>();
-const simpleMode = ref<boolean>(false);
 
 onMounted(async () => {
   await showLoading.start("正在加载剧诗数据");
@@ -630,8 +630,7 @@ function isFinTarot(data: TGApp.Sqlite.Combat.TableTrans): boolean {
 .uc-window-item {
   height: 100%;
   padding-right: 8px;
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: hidden auto;
 }
 
 .ucw-i-ref {