💄 调整容器高度，支持单楼层分享

src/components/userAbyss/tua-detail.vue

@@ -1,17 +1,20 @@
 <!-- 楼层组件 -->
 <template>
-  <div class="tuad-box">
+  <div ref="floorEl" class="tuad-box">
     <div class="tuad-title">
-      <div class="title">第{{ props.floor.id }}层</div>
+      <div class="title" @click="shareFloor()">第{{ props.floor.id }}层</div>
       <div class="append">
         <span>{{ props.floor.winStar }}</span>
         <span>/{{ props.floor.maxStar }}</span>
         <img alt="Abyss" src="/icon/star/Abyss.webp" />
       </div>
     </div>
-    <div v-if="props.floor.buff && props.floor.buff.length > 0" class="tuad-buff">
-      <span>地脉异常:</span>
-      <span v-for="(b, i) in props.floor.buff" :key="i">{{ b }}</span>
+    <div class="tuad-mid">
+      <div v-if="show" class="tuad-share">UID {{ props.uid }} | 第{{ props.id }}期</div>
+      <div v-if="props.floor.buff && props.floor.buff.length > 0" class="tuad-buff">
+        <span>地脉异常:</span>
+        <span v-for="(b, i) in props.floor.buff" :key="i">{{ b }}</span>
+      </div>
     </div>
     <div class="tuad-index-box">
       <TuaDetailLevel v-for="level in props.floor.levels" :key="level.id" :level />
@@ -19,11 +22,29 @@
   </div>
 </template>
 <script lang="ts" setup>
+import showSnackbar from "@comp/func/snackbar.js";
+import { generateShareImg } from "@utils/TGShare.js";
+import { nextTick, ref, useTemplateRef } from "vue";
+
 import TuaDetailLevel from "./tua-detail-level.vue";
 
-type TuaDetailProps = { floor: TGApp.Sqlite.Abyss.Floor };
+type TuaDetailProps = { floor: TGApp.Sqlite.Abyss.Floor; uid: number; id: number };
 
 const props = defineProps<TuaDetailProps>();
+const show = ref<boolean>(false);
+const floorRef = useTemplateRef<HTMLDivElement>("floorEl");
+
+async function shareFloor(): Promise<void> {
+  if (!floorRef.value) {
+    showSnackbar.warn("未捕获到Floor Dom");
+    return;
+  }
+  show.value = true;
+  await nextTick();
+  const fileName = `深境螺旋_第${props.id}期_${props.uid}_${props.floor.id}`;
+  await generateShareImg(fileName, floorRef.value);
+  show.value = false;
+}
 </script>
 <style lang="css" scoped>
 .tuad-box {
@@ -50,6 +71,10 @@ const props = defineProps<TuaDetailProps>();
   font-size: 20px;
   line-height: 24px;
 
+  .title {
+    cursor: pointer;
+  }
+
   .append {
     position: relative;
     display: flex;
@@ -72,6 +97,22 @@ const props = defineProps<TuaDetailProps>();
   }
 }
 
+.tuad-mid {
+  position: relative;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.tuad-share {
+  position: relative;
+  z-index: -1;
+  color: var(--box-text-1);
+  font-size: 14px;
+  opacity: 0.8;
+}
+
 .tuad-buff {
   position: relative;
   margin-left: auto;

src/pages/User/Abyss.vue

@@ -108,7 +108,13 @@
             <TuaOverview :val-icons="item.energySkillRank" title="元素爆发" />
           </div>
           <div class="uaw-d-box">
-            <TuaDetail v-for="floor in item.floors" :key="floor.id" :floor />
+            <TuaDetail
+              :uid="uidCur"
+              :id="item.id"
+              v-for="floor in item.floors"
+              :key="floor.id"
+              :floor
+            />
           </div>
         </div>
       </v-window-item>
@@ -520,7 +526,7 @@ async function refreshAvatars(
 
 .ua-box {
   display: flex;
-  height: calc(100vh - 96px);
+  height: calc(100vh - 144px);
   align-items: flex-start;
   justify-content: center;
   border: 1px solid var(--common-shadow-2);