✨ 深色模式下更换图标而非invert

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;

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;

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 {