From 66006bb0f94d60cc8fadf3d3b108896e9b3599ed Mon Sep 17 00:00:00 2001
From: BTMuli <bt-muli@outlook.com>
Date: Sun, 14 Dec 2025 18:40:36 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20=E4=BF=AE=E5=A4=8D=E9=AB=98?=
 =?UTF-8?q?=E5=BA=A6=E8=AE=A1=E7=AE=97=E5=BC=82=E5=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/userGacha/gbr-data-view.vue | 51 ++++++++++++++--------
 src/components/userGacha/gbr-overview.vue  |  7 ++-
 src/components/userGacha/gro-data-view.vue | 31 +++++++++----
 src/pages/User/GachaB.vue                  |  2 +-
 4 files changed, 61 insertions(+), 30 deletions(-)

diff --git a/src/components/userGacha/gbr-data-view.vue b/src/components/userGacha/gbr-data-view.vue
index 90c4f929..af1f4668 100644
--- a/src/components/userGacha/gbr-data-view.vue
+++ b/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;
 }
diff --git a/src/components/userGacha/gbr-overview.vue b/src/components/userGacha/gbr-overview.vue
index 105622a5..4ab1eabc 100644
--- a/src/components/userGacha/gbr-overview.vue
+++ b/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>
diff --git a/src/components/userGacha/gro-data-view.vue b/src/components/userGacha/gro-data-view.vue
index 713185a6..e79d94cc 100644
--- a/src/components/userGacha/gro-data-view.vue
+++ b/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%;
diff --git a/src/pages/User/GachaB.vue b/src/pages/User/GachaB.vue
index b14623df..c0d74a63 100644
--- a/src/pages/User/GachaB.vue
+++ b/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();
 }
 
 /**