🐛 修复特定情况下分享图生成时屏幕异常发白，支持单幕分享，调整怪物样式

src/components/userCombat/tuc-ae-box.vue

@@ -135,7 +135,7 @@ function getAvatarBox(item: TGApp.Game.Combat.Avatar): TItemBoxData {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 4px 8px 4px 4px;
+  padding: 4px 20px 4px 4px;
   border-radius: 40px;
   background: var(--box-bg-3);
   column-gap: 4px;

src/components/userCombat/tuc-round.vue

@@ -1,7 +1,7 @@
 <!-- 剧诗单幕 -->
 <template>
-  <div class="tucr-box">
-    <div class="tucr-title">
+  <div ref="tucrEl" class="tucr-box">
+    <div class="tucr-title" @click="shareRound()">
       <img
         :class="`stat_${props.round.is_get_medal}`"
         :src="`/icon/combat/${getIcon()}.webp`"
@@ -13,6 +13,7 @@
       <span v-else class="main">第{{ props.round.round_id }}幕</span>
       <span class="sub">{{ timestampToDate(Number(props.round.finish_time) * 1000) }}</span>
     </div>
+    <span v-if="showInfo" class="tucr-info">UID {{ props.uid }} | 第{{ props.id }}期</span>
     <TucAeBox :avatars="props.round.avatars" :enemies="props.round.enemies" />
     <div class="tucr-content">
       <TucBuffBox
@@ -24,21 +25,39 @@
   </div>
 </template>
 <script lang="ts" setup>
+import showSnackbar from "@comp/func/snackbar.js";
+import { generateShareImg } from "@utils/TGShare.js";
 import { timestampToDate } from "@utils/toolFunc.js";
+import { nextTick, ref, useTemplateRef } from "vue";
 
 import TucAeBox from "./tuc-ae-box.vue";
 import TucBuffBox from "./tuc-buff-box.vue";
 import TucCardBox from "./tuc-card-box.vue";
 
-type TucRoundProps = { round: TGApp.Game.Combat.RoundData };
+type TucRoundProps = { round: TGApp.Game.Combat.RoundData; uid: string; id: number };
 const props = defineProps<TucRoundProps>();
+const showInfo = ref<boolean>(false);
+const tucrRef = useTemplateRef<HTMLDivElement>("tucrEl");
 
 function getIcon(): string {
   return `${props.round.is_tarot ? "tarot" : "star"}_${props.round.is_get_medal ? "1" : "0"}`;
 }
+
+async function shareRound(): Promise<void> {
+  if (!tucrRef.value) {
+    showSnackbar.warn("未捕获到分享Dom");
+    return;
+  }
+  showInfo.value = true;
+  await nextTick();
+  const fileName = `真境剧诗_第${props.round.round_id}幕`;
+  await generateShareImg(fileName, tucrRef.value);
+  showInfo.value = false;
+}
 </script>
 <style lang="scss" scoped>
 .tucr-box {
+  position: relative;
   display: flex;
   width: 100%;
   height: fit-content;
@@ -51,11 +70,13 @@ function getIcon(): string {
 }
 
 .tucr-title {
+  position: relative;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   margin-right: auto;
   column-gap: 4px;
+  cursor: pointer;
 
   img {
     height: 30px;
@@ -77,6 +98,14 @@ function getIcon(): string {
   }
 }
 
+.tucr-info {
+  position: absolute;
+  z-index: -1;
+  top: 24px;
+  right: 8px;
+  font-size: 12px;
+}
+
 .tucr-content {
   position: relative;
   display: flex;

src/pages/User/Combat.vue

@@ -88,7 +88,7 @@
         :value="item.id"
         class="uc-window-item"
       >
-        <div :id="`user-combat-${item.id}`" class="ucw-i-ref">
+        <div :class="userTab === item.id ? 'ucw-i-ref active' : 'ucw-i-ref'">
           <div class="ucw-top">
             <div class="ucw-title">
               <span>第</span>
@@ -108,7 +108,13 @@
           <TSubLine>使用角色({{ item.detail.backup_avatars.length }}名)</TSubLine>
           <TucAvatars :detail="false" :model-value="item.detail.backup_avatars" />
           <div class="ucw-rounds">
-            <TucRound v-for="(round, idx) in item.detail.rounds_data" :key="idx" :round="round" />
+            <TucRound
+              v-for="(round, idx) in item.detail.rounds_data"
+              :id="item.id"
+              :key="idx"
+              :round="round"
+              :uid="item.uid"
+            />
           </div>
         </div>
       </v-window-item>
@@ -271,7 +277,7 @@ async function refreshCombat(): Promise<void> {
 async function shareCombat(): Promise<void> {
   await TGLogger.Info(`[UserCombat][shareCombat][${userTab.value}] 生成剧诗数据分享图片`);
   const fileName = `【真境剧诗】${userTab.value}-${uidCur.value}.png`;
-  const shareDom = document.querySelector<HTMLElement>(`#user-combat-${userTab.value}`);
+  const shareDom = document.querySelector<HTMLElement>(`.ucw-i-ref.active`);
   if (shareDom === null) {
     showSnackbar.error("未找到分享数据");
     await TGLogger.Warn(`[UserCombat][shareCombat][${userTab.value}] 未找到分享数据`);