From e2c0eb5292e8c52f6c131f84492791d82d92ec95 Mon Sep 17 00:00:00 2001
From: Hooray <304327508@qq.com>
Date: Fri, 13 Jun 2025 16:03:16 +0800
Subject: [PATCH] =?UTF-8?q?`FaDrawer`=20=E5=92=8C=20`FaModal`=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=96=B0=E5=A2=9E=20`destroyOnClose`=20=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/components/AppSetting/index.vue |  2 +-
 src/ui/components/FaDrawer/index.vue        | 22 ++++++++++++++++++++-
 src/ui/components/FaModal/index.ts          |  1 +
 src/ui/components/FaModal/index.vue         | 18 +++++++++++++++++
 4 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/src/layouts/components/AppSetting/index.vue b/src/layouts/components/AppSetting/index.vue
index bd6a35f6..2e1c6a0d 100755
--- a/src/layouts/components/AppSetting/index.vue
+++ b/src/layouts/components/AppSetting/index.vue
@@ -58,7 +58,7 @@ function handleCopy() {
 </script>
 
 <template>
-  <FaDrawer v-model="isShow" title="应用配置" description="在生产环境中应关闭该模块" :footer="isSupported" content-class="sm:min-w-md">
+  <FaDrawer v-model="isShow" title="应用配置" description="在生产环境中应关闭该模块" :footer="isSupported" :destroy-on-close="false" content-class="sm:min-w-md">
     <div class="rounded-2 bg-rose/20 px-4 py-2 text-sm/6 c-rose">
       应用配置可实时预览效果，但只是临时生效，要想真正应用于项目，可以点击下方的「复制配置」按钮，并将配置粘贴到 src/settings.ts 文件中。
     </div>
diff --git a/src/ui/components/FaDrawer/index.vue b/src/ui/components/FaDrawer/index.vue
index e363c628..ad382b64 100644
--- a/src/ui/components/FaDrawer/index.vue
+++ b/src/ui/components/FaDrawer/index.vue
@@ -36,6 +36,7 @@ const props = withDefaults(
     footer?: boolean
     closeOnClickOverlay?: boolean
     closeOnPressEscape?: boolean
+    destroyOnClose?: boolean
     contentClass?: HTMLAttributes['class']
     headerClass?: HTMLAttributes['class']
     footerClass?: HTMLAttributes['class']
@@ -59,6 +60,7 @@ const props = withDefaults(
     footer: true,
     closeOnClickOverlay: true,
     closeOnPressEscape: true,
+    destroyOnClose: true,
   },
 )
 
@@ -81,6 +83,20 @@ watch(() => props.modelValue, (newValue) => {
   isOpen.value = newValue
 })
 
+const hasOpened = ref(false)
+const isClosed = ref(true)
+
+watch(() => isOpen.value, (value) => {
+  isClosed.value = false
+  if (value && !hasOpened.value) {
+    hasOpened.value = true
+  }
+}, {
+  immediate: true,
+})
+
+const forceMount = computed(() => !props.destroyOnClose && hasOpened.value)
+
 function updateOpen(value: boolean) {
   isOpen.value = value
   emits('update:modelValue', value)
@@ -127,6 +143,7 @@ function handleAnimationEnd() {
   }
   else {
     emits('closed')
+    isClosed.value = true
   }
 }
 </script>
@@ -138,8 +155,11 @@ function handleAnimationEnd() {
       :open="isOpen"
       :overlay="props.overlay"
       :overlay-blur="props.overlayBlur"
-      :class="cn('w-full flex flex-col gap-0 p-0', props.contentClass)"
+      :class="cn('w-full flex flex-col gap-0 p-0', props.contentClass, {
+        hidden: isClosed,
+      })"
       :side="props.side"
+      :force-mount="forceMount"
       @open-auto-focus="handleFocusOutside"
       @close-auto-focus="handleFocusOutside"
       @focus-outside="handleFocusOutside"
diff --git a/src/ui/components/FaModal/index.ts b/src/ui/components/FaModal/index.ts
index 697486c2..c8c6c7e0 100644
--- a/src/ui/components/FaModal/index.ts
+++ b/src/ui/components/FaModal/index.ts
@@ -30,6 +30,7 @@ export interface ModalProps {
   footer?: boolean
   closeOnClickOverlay?: boolean
   closeOnPressEscape?: boolean
+  destroyOnClose?: boolean
   class?: HTMLAttributes['class']
   headerClass?: HTMLAttributes['class']
   contentClass?: HTMLAttributes['class']
diff --git a/src/ui/components/FaModal/index.vue b/src/ui/components/FaModal/index.vue
index ed3e0a4a..591b4651 100644
--- a/src/ui/components/FaModal/index.vue
+++ b/src/ui/components/FaModal/index.vue
@@ -40,6 +40,7 @@ const props = withDefaults(
     footer: true,
     closeOnClickOverlay: true,
     closeOnPressEscape: true,
+    destroyOnClose: true,
   },
 )
 
@@ -68,6 +69,20 @@ watch(() => props.modelValue, (newValue) => {
   isOpen.value = newValue
 })
 
+const hasOpened = ref(false)
+const isClosed = ref(true)
+
+watch(() => isOpen.value, (value) => {
+  isClosed.value = false
+  if (value && !hasOpened.value) {
+    hasOpened.value = true
+  }
+}, {
+  immediate: true,
+})
+
+const forceMount = computed(() => !props.destroyOnClose && hasOpened.value)
+
 const { isDragging, transform } = useDraggable(
   dialogRef,
   dialogHeaderRef,
@@ -186,6 +201,7 @@ function handleAnimationEnd() {
   }
   else {
     emits('closed')
+    isClosed.value = true
   }
 }
 </script>
@@ -201,10 +217,12 @@ function handleAnimationEnd() {
       :overlay-blur="props.overlayBlur"
       :maximize="isMaximize"
       :maximizable="props.maximizable"
+      :force-mount="forceMount"
       :class="cn('left-0 right-0 top-0 md:top-[5vh] flex flex-col p-0 gap-0 mx-auto h-[calc-size(auto,size)] min-h-full md:min-h-auto max-h-full md:max-h-[90vh] translate-x-0 translate-y-0', props.class, {
         'md:top-0 size-full max-w-full max-h-full md:max-h-full': isMaximize,
         'md:top-1/2 md:-translate-y-1/2!': props.alignCenter,
         'duration-0': isDragging,
+        'hidden': isClosed,
       })"
       @open-auto-focus="handleFocusOutside"
       @close-auto-focus="handleFocusOutside"