From 440f8d3f07ec79ff67b5f2149cf33d226fd674c5 Mon Sep 17 00:00:00 2001
From: Hooray <304327508@qq.com>
Date: Mon, 9 Jun 2025 11:43:09 +0800
Subject: [PATCH] =?UTF-8?q?`FaModal`=20=E7=BB=84=E4=BB=B6=20provide/inject?=
 =?UTF-8?q?=20=E6=94=B9=E4=B8=BA=E7=BB=84=E4=BB=B6=E4=BC=A0=E5=8F=82?=
 =?UTF-8?q?=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/ui/components/FaModal/dialog/DialogContent.vue | 5 ++---
 src/ui/components/FaModal/index.ts                 | 6 ++++++
 src/ui/components/FaModal/index.vue                | 7 +++----
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/ui/components/FaModal/dialog/DialogContent.vue b/src/ui/components/FaModal/dialog/DialogContent.vue
index 342aa9cf..c6d30a4b 100644
--- a/src/ui/components/FaModal/dialog/DialogContent.vue
+++ b/src/ui/components/FaModal/dialog/DialogContent.vue
@@ -13,6 +13,7 @@ import { computed } from 'vue'
 import { cn } from '@/utils'
 
 const props = defineProps<DialogContentProps & {
+  modalId: string
   class?: HTMLAttributes['class']
   open?: boolean
   maximize?: boolean
@@ -54,8 +55,6 @@ watch(showOverlay, (val) => {
     isLocked.value = false
   }
 })
-
-const id = inject('ModalId')
 </script>
 
 <template>
@@ -73,7 +72,7 @@ const id = inject('ModalId')
     >
       <div
         v-if="showOverlay"
-        :data-modal-id="id"
+        :data-modal-id="props.modalId"
         :class="cn('fixed inset-0 z-2000 data-[state=closed]:animate-out data-[state=open]:animate-in bg-black/50 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0', {
           'backdrop-blur-sm': props.overlayBlur,
         })"
diff --git a/src/ui/components/FaModal/index.ts b/src/ui/components/FaModal/index.ts
index 5cb0c390..85be4d32 100644
--- a/src/ui/components/FaModal/index.ts
+++ b/src/ui/components/FaModal/index.ts
@@ -30,6 +30,7 @@ export interface ModalProps {
   headerClass?: HTMLAttributes['class']
   contentClass?: HTMLAttributes['class']
   footerClass?: HTMLAttributes['class']
+  modalId?: string
 }
 export interface ModalEmits {
   'update:modelValue': [value: boolean]
@@ -66,6 +67,7 @@ export function useFaModal() {
           closeOnClickOverlay: false,
           contentClass: 'py-0 min-h-auto',
           footerClass: 'p-4',
+          modalId: useId(),
           onClosed: () => {
             app.unmount()
           },
@@ -87,6 +89,7 @@ export function useFaModal() {
           closeOnClickOverlay: false,
           contentClass: 'py-0 min-h-auto',
           footerClass: 'p-4',
+          modalId: useId(),
           onClosed: () => {
             app.unmount()
           },
@@ -108,6 +111,7 @@ export function useFaModal() {
           closeOnClickOverlay: false,
           contentClass: 'py-0 min-h-auto',
           footerClass: 'p-4',
+          modalId: useId(),
           onClosed: () => {
             app.unmount()
           },
@@ -129,6 +133,7 @@ export function useFaModal() {
           closeOnClickOverlay: false,
           contentClass: 'py-0 min-h-auto',
           footerClass: 'p-4',
+          modalId: useId(),
           onClosed: () => {
             app.unmount()
           },
@@ -150,6 +155,7 @@ export function useFaModal() {
           contentClass: 'py-0 min-h-auto',
           footerClass: 'p-4',
           showCancelButton: true,
+          modalId: useId(),
           onClosed: () => {
             app.unmount()
           },
diff --git a/src/ui/components/FaModal/index.vue b/src/ui/components/FaModal/index.vue
index c242dae4..3cb8da7e 100644
--- a/src/ui/components/FaModal/index.vue
+++ b/src/ui/components/FaModal/index.vue
@@ -60,9 +60,7 @@ defineExpose({
   areaRef: dialogAreaRef,
 })
 
-const id = useId()
-provide('ModalId', id)
-
+const modalId = useId()
 const isOpen = ref(props.modelValue)
 const isMaximize = ref(props.maximize)
 
@@ -122,7 +120,7 @@ function handleFocusOutside(e: Event) {
 }
 
 function handleClickOutside(e: Event) {
-  if (!props.closeOnClickOverlay || (e.target as HTMLElement).dataset.modalId !== id) {
+  if (!props.closeOnClickOverlay || (e.target as HTMLElement).dataset.modalId !== modalId) {
     e.preventDefault()
     e.stopPropagation()
   }
@@ -154,6 +152,7 @@ function handleAnimationEnd() {
   <Dialog :modal="false" :open="isOpen" @update:open="updateOpen">
     <DialogContent
       ref="dialogContentRef"
+      :modal-id="modalId"
       :open="isOpen"
       :closable="props.closable"
       :overlay="props.overlay"