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

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;