From e269719e4f153d6ed5488242b39037bbee4aa4aa Mon Sep 17 00:00:00 2001
From: BTMuli <bt-muli@outlook.com>
Date: Thu, 15 Jan 2026 23:08:35 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20=E4=BF=AE=E5=A4=8D=E7=89=B9?=
 =?UTF-8?q?=E5=AE=9A=E6=83=85=E5=86=B5=E4=B8=8B=E5=88=86=E4=BA=AB=E5=9B=BE?=
 =?UTF-8?q?=E7=94=9F=E6=88=90=E6=97=B6=E5=B1=8F=E5=B9=95=E5=BC=82=E5=B8=B8?=
 =?UTF-8?q?=E5=8F=91=E7=99=BD=EF=BC=8C=E6=94=AF=E6=8C=81=E5=8D=95=E5=B9=95?=
 =?UTF-8?q?=E5=88=86=E4=BA=AB=EF=BC=8C=E8=B0=83=E6=95=B4=E6=80=AA=E7=89=A9?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/userCombat/tuc-ae-box.vue |  2 +-
 src/components/userCombat/tuc-round.vue  | 35 ++++++++++++++++++++++--
 src/pages/User/Combat.vue                | 12 ++++++--
 3 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/src/components/userCombat/tuc-ae-box.vue b/src/components/userCombat/tuc-ae-box.vue
index dff47123..17f950e7 100644
--- a/src/components/userCombat/tuc-ae-box.vue
+++ b/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;
diff --git a/src/components/userCombat/tuc-round.vue b/src/components/userCombat/tuc-round.vue
index e9b36800..6f4f3c98 100644
--- a/src/components/userCombat/tuc-round.vue
+++ b/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;
diff --git a/src/pages/User/Combat.vue b/src/pages/User/Combat.vue
index 5d5f65b1..3d4c998b 100644
--- a/src/pages/User/Combat.vue
+++ b/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}] 未找到分享数据`);