🐛 修复高度计算异常

src/components/userGacha/gbr-data-view.vue

@@ -1,6 +1,6 @@
 <!-- 颂愿数据概览 -->
 <template>
-  <div ref="gbrDvBoxRef" class="gbr-dv-container">
+  <div class="gbr-dv-container">
     <div ref="headerRef" class="gbr-dv-header">
       <div class="gbr-dvt-title">
         <span>{{ title }}</span>
@@ -100,8 +100,18 @@
   </div>
 </template>
 <script lang="ts" setup>
+import { UnlistenFn } from "@tauri-apps/api/event";
 import { getCurrentWindow } from "@tauri-apps/api/window";
-import { computed, nextTick, onMounted, ref, shallowRef, useTemplateRef, watch } from "vue";
+import {
+  computed,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  ref,
+  shallowRef,
+  useTemplateRef,
+  watch,
+} from "vue";
 
 import GbrDataLine, { type GbrDataLineProps } from "./gbr-data-line.vue";
 
@@ -111,11 +121,11 @@ type GachaDataViewProps = {
 };
 
 const props = defineProps<GachaDataViewProps>();
-const curWin = getCurrentWindow();
+
 const isNormalPool = computed<boolean>(() => props.dataType === "normal");
 
-// Template refs for dynamic height calculation
-const gbrDvBoxEl = useTemplateRef<HTMLElement>("gbrDvBoxRef");
+// 尺寸变化监听
+let resizeListener: UnlistenFn | null = null;
 const headerEl = useTemplateRef<HTMLElement>("headerRef");
 
 // Dynamic heights
@@ -145,13 +155,14 @@ const pg5 = computed<string>(() => getPg("5"));
 
 // Calculate dynamic heights
 function calculateHeights(): void {
-  if (!gbrDvBoxEl.value || !headerEl.value) return;
-  const containerHeight = gbrDvBoxEl.value.clientHeight;
+  const gbrDvBoxEl = document.querySelector(".gbr-o-container");
+  if (!gbrDvBoxEl || !headerEl.value) return;
+  const containerHeight = gbrDvBoxEl.clientHeight;
   const headerHeight = headerEl.value.clientHeight;
   const padding = 20; // 8px padding top + 8px padding bottom + 4px magic
   const tabsHeight = 36; // v-tabs compact height
   const gap = 8; // gap between tabs and window
-  const bottomHeightPx = containerHeight - headerHeight - padding - 8;
+  const bottomHeightPx = containerHeight - headerHeight - padding;
   const windowHeightPx = bottomHeightPx - tabsHeight - gap;
   bottomHeight.value = `${bottomHeightPx}px`;
   windowHeight.value = `${windowHeightPx}px`;
@@ -162,6 +173,16 @@ onMounted(async () => {
   loading.value = false;
   await nextTick();
   calculateHeights();
+  resizeListener = await getCurrentWindow().onResized(async () => {
+    await nextTick();
+    calculateHeights();
+  });
+});
+onUnmounted(() => {
+  if (resizeListener) {
+    resizeListener();
+    resizeListener = null;
+  }
 });
 
 watch(
@@ -172,11 +193,6 @@ watch(
   },
 );
 
-curWin.onResized(async () => {
-  await nextTick();
-  calculateHeights();
-});
-
 function loadData(): void {
   title.value = getTitle();
   const tempData = props.dataVal;
@@ -342,7 +358,7 @@ watch(
   },
 );
 </script>
-<style lang="css" scoped>
+<style lang="scss" scoped>
 .gbr-dv-container {
   position: relative;
   height: 100%;
@@ -375,10 +391,10 @@ watch(
 
 .gbr-mid-list {
   display: grid;
-  margin-top: 8px;
-  margin-bottom: 8px;
+  margin-top: 4px;
+  margin-bottom: 4px;
   color: var(--box-text-7);
-  column-gap: 12px;
+  column-gap: 4px;
   font-size: 14px;
   grid-template-columns: 1fr 1fr 1fr 1fr;
 }
@@ -467,6 +483,7 @@ watch(
 .gbr-b-window-item {
   position: relative;
   width: 100%;
+  height: 100%;
   box-sizing: border-box;
   padding-right: 4px;
 }

src/components/userGacha/gbr-overview.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="gro-o-container">
+  <div class="gbr-o-container">
     <GbrDataView :data-val="normalData" data-type="normal" />
     <GbrDataView :data-val="eventData" data-type="boy" />
     <GbrDataView :data-val="eventData" data-type="girl" />
@@ -21,12 +21,11 @@ const eventData = computed<Array<TGApp.Sqlite.GachaRecords.TableGachaB>>(() =>
 );
 </script>
 <style lang="css" scoped>
-.gro-o-container {
+.gbr-o-container {
   position: relative;
   display: grid;
-  overflow: hidden;
   height: 100%;
   column-gap: 8px;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(3, 0.33fr);
 }
 </style>

src/components/userGacha/gro-data-view.vue

@@ -93,8 +93,18 @@
   </div>
 </template>
 <script lang="ts" setup>
+import { UnlistenFn } from "@tauri-apps/api/event";
 import { getCurrentWindow } from "@tauri-apps/api/window";
-import { computed, nextTick, onMounted, ref, shallowRef, useTemplateRef, watch } from "vue";
+import {
+  computed,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  ref,
+  shallowRef,
+  useTemplateRef,
+  watch,
+} from "vue";
 
 import GroDataLine, { type GroDataLineProps } from "./gro-data-line.vue";
 
@@ -106,7 +116,7 @@ type GachaDataViewProps = {
 };
 
 const props = defineProps<GachaDataViewProps>();
-const curWin = getCurrentWindow();
+let resizeListener: UnlistenFn | null = null;
 
 // Template refs for dynamic height calculation
 const groDvBoxEl = useTemplateRef<HTMLElement>("groDvBoxRef");
@@ -155,6 +165,16 @@ onMounted(async () => {
   loading.value = false;
   await nextTick();
   calculateHeights();
+  resizeListener = await getCurrentWindow().onResized(async () => {
+    await nextTick();
+    calculateHeights();
+  });
+});
+onUnmounted(() => {
+  if (resizeListener) {
+    resizeListener();
+    resizeListener = null;
+  }
 });
 
 watch(
@@ -165,11 +185,6 @@ watch(
   },
 );
 
-curWin.onResized(async () => {
-  await nextTick();
-  calculateHeights();
-});
-
 function loadData(): void {
   title.value = getTitle();
   const tempData = props.dataVal;
@@ -319,7 +334,7 @@ watch(
   },
 );
 </script>
-<style lang="css" scoped>
+<style lang="scss" scoped>
 .gro-dv-container {
   position: relative;
   height: 100%;

src/pages/User/GachaB.vue

@@ -167,7 +167,7 @@ async function confirmRefresh(force: boolean): Promise<void> {
   await TGLogger.Info(`[UserGacha][${account.value.gameUid}] 刷新祈愿数据完成`);
   showSnackbar.success("祈愿数据刷新完成，即将刷新页面");
   await new Promise<void>((resolve) => setTimeout(resolve, 1500));
-  // window.location.reload();
+  window.location.reload();
 }
 
 /**