From 26215a02ec6ba2f3fe563ae0d52c2d6c182b9c5c Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Wed, 19 Feb 2025 17:14:07 +0800
Subject: [PATCH] refactor(settings): improve window positioning and resize
 handling

---
 src/components/Settings/Settings.vue | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/components/Settings/Settings.vue b/src/components/Settings/Settings.vue
index 61acae49..eb2599f0 100644
--- a/src/components/Settings/Settings.vue
+++ b/src/components/Settings/Settings.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onClickOutside } from '@vueuse/core'
+import { onClickOutside, useEventListener } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 
 import { settings } from '~/logic'
@@ -23,15 +23,18 @@ const settingsMenu = {
 }
 const activatedMenuItem = ref<MenuType>(MenuType.General)
 const title = ref<string>(t('settings.title'))
-const window = ref<HTMLDivElement>()
-createTransformer(window, {
-  x: '50%',
-  y: '50%',
-  notrigger: true,
-  centerTarget: {
-    x: true,
-    y: true,
-  },
+const settingsWindow = ref<HTMLDivElement>()
+
+useEventListener(window, 'resize', () => {
+  createTransformer(settingsWindow, {
+    x: '50%',
+    y: '50%',
+    notrigger: true,
+    centerTarget: {
+      x: true,
+      y: true,
+    },
+  })
 })
 
 const scrollbarRef = ref()
@@ -118,7 +121,7 @@ function setCurrentTitle() {
   })
 }
 
-onClickOutside(window, handleClose)
+onClickOutside(settingsWindow, handleClose)
 </script>
 
 <template>
@@ -129,7 +132,7 @@ onClickOutside(window, handleClose)
     />
     <div
       id="settings-window"
-      ref="window"
+      ref="settingsWindow"
       pos="fixed top-1/2 left-1/2" w="90%" h="90%"
       max-w-1000px max-h-900px transform="~ translate-x--1/2 translate-y--1/2 gpu"
       flex="~ justify-between items-center"