From 6512e9da8b73ff152553dbeab3e655b3e4120a23 Mon Sep 17 00:00:00 2001
From: moecinnamo <abcd2890000456@gmail.com>
Date: Tue, 16 Dec 2025 23:11:39 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=AA=97=E5=8F=A3=E6=9C=80?=
 =?UTF-8?q?=E5=A4=A7=E5=8C=96=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/Modal.vue | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/layout/Modal.vue b/src/components/layout/Modal.vue
index 0a0c0f5..82f88f7 100644
--- a/src/components/layout/Modal.vue
+++ b/src/components/layout/Modal.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, nextTick } from 'vue'
 const emit = defineEmits(['close', 'maximize'])
 
 const props = defineProps({
@@ -32,11 +32,22 @@ const props = defineProps({
 })
 
 const isMaximized = ref(false)
+const modalContainer = ref(null)
 
 const closeModal = () => emit('close')
-const toggleMaximize = () => {
+const toggleMaximize = async () => {
+  if (!isMaximized.value && modalContainer.value) {
+    const rect = modalContainer.value.getBoundingClientRect();
+    modalContainer.value.dataset.startX = rect.left;
+    modalContainer.value.dataset.startY = rect.top;
+    modalContainer.value.dataset.startWidth = rect.width;
+    modalContainer.value.dataset.startHeight = rect.height;
+  }
+
   isMaximized.value = !isMaximized.value
   emit('maximize', isMaximized.value)
+
+  await nextTick();
 }
 const getDimensionValue = (value, dimension) => {
   if (isMaximized.value) {
@@ -51,7 +62,7 @@ const getDimensionValue = (value, dimension) => {
 </script>
 <template>
   <div class="modal-mask">
-    <div class="modal-container" :class="[theme, { 'maximized': isMaximized }]" :style="{ width: getDimensionValue(width), height: getDimensionValue(height), maxWidth: isMaximized ? '100vw' : 'none', maxHeight: isMaximized ? '100vh' : 'none'}">
+    <div ref="modalContainer" class="modal-container" :class="[theme, { 'maximized': isMaximized, 'animating': true }]" :style="{ width: getDimensionValue(width), height: getDimensionValue(height), maxWidth: isMaximized ? '100vw' : 'none', maxHeight: isMaximized ? '100vh' : 'none'}">
       <header class="modal-header">
         <div class="modal-header-buttons">
           <button class="modal-close-btn" @click="closeModal"></button>
@@ -86,6 +97,11 @@ const getDimensionValue = (value, dimension) => {
   overflow: hidden;
   position: relative;
   z-index: 99999;
+  transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
+  transform-origin: center center;
+}
+.modal-container.animating {
+  transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
 }
 .modal-container.light {
   background-color: #fff;