From 5b54fe5182c1e6513e9644f44b9c7a2e3058a367 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= <me@yanhao.ren>
Date: Thu, 30 Oct 2025 14:18:06 +0800
Subject: [PATCH] =?UTF-8?q?feat(naive-ui):=20=E6=B7=BB=E5=8A=A0=20Modal=20?=
 =?UTF-8?q?=E5=91=BD=E4=BB=A4=E5=BC=8F=20API=20=E6=94=AF=E6=8C=81=E5=B9=B6?=
 =?UTF-8?q?=E5=AE=8C=E5=96=84=E7=B1=BB=E5=9E=8B=E5=A3=B0=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/AppNaiveUIProvider.vue             | 24 ++++++++++++++----------
 src/pages/demos/naive-ui-demo.page.vue | 26 +++++++++++++++++++++++++-
 2 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/src/AppNaiveUIProvider.vue b/src/AppNaiveUIProvider.vue
index 7d46348..f234b1d 100644
--- a/src/AppNaiveUIProvider.vue
+++ b/src/AppNaiveUIProvider.vue
@@ -13,6 +13,7 @@ const themeOverrides: GlobalThemeOverrides = {
 
 const ContextHolder: FunctionalComponent = () => {
   window.$nLoadingBar = useLoadingBar();
+  window.$nModal = useModal();
   window.$nDialog = useDialog();
   window.$nMessage = useMessage();
   window.$nNotification = useNotification();
@@ -24,6 +25,7 @@ const ContextHolder: FunctionalComponent = () => {
 declare global {
   export interface Window {
     $nLoadingBar?: import('naive-ui').LoadingBarProviderInst;
+    $nModal?: import('naive-ui').ModalProviderInst;
     $nDialog?: import('naive-ui').DialogProviderInst;
     $nMessage?: import('naive-ui').MessageProviderInst;
     $nNotification?: import('naive-ui').NotificationProviderInst;
@@ -41,15 +43,17 @@ declare global {
     :theme="appStore.isDark ? darkTheme : null"
     abstract
   >
-    <NLoadingBarProvider>
-      <NDialogProvider>
-        <NNotificationProvider>
-          <NMessageProvider>
-            <ContextHolder />
-            <slot></slot>
-          </NMessageProvider>
-        </NNotificationProvider>
-      </NDialogProvider>
-    </NLoadingBarProvider>
+    <n-loading-bar-provider>
+      <n-message-provider>
+        <n-notification-provider>
+          <n-modal-provider>
+            <n-dialog-provider>
+              <slot></slot>
+              <ContextHolder />
+            </n-dialog-provider>
+          </n-modal-provider>
+        </n-notification-provider>
+      </n-message-provider>
+    </n-loading-bar-provider>
   </NConfigProvider>
 </template>
diff --git a/src/pages/demos/naive-ui-demo.page.vue b/src/pages/demos/naive-ui-demo.page.vue
index 18a77c3..33ddbdd 100644
--- a/src/pages/demos/naive-ui-demo.page.vue
+++ b/src/pages/demos/naive-ui-demo.page.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { useDialog, useMessage } from 'naive-ui';
+import { useDialog, useMessage, useModal } from 'naive-ui';
 import type { MessageType } from 'naive-ui';
 
 definePage({ meta: {} });
 
 const message = useMessage();
 const dialog = useDialog();
+const modal = useModal();
 
 const messageTypes = ['info', 'success', 'warning', 'error', 'loading'] satisfies MessageType[];
 const dialogTypes = ['info', 'success', 'warning', 'error'] as const;
@@ -35,6 +36,23 @@ const openDialog = (type: (typeof dialogTypes)[number]) => {
     },
   });
 };
+
+const openModal = () => {
+  modal.create({
+    title: '命令式 Modal 示例',
+    content: '这是一个命令式 API 创建的 Modal 示例，使用 preset="dialog"。',
+    preset: 'dialog',
+    maskClosable: false,
+    onPositiveClick: () => {
+      message.success('点击了确定');
+    },
+    onNegativeClick: () => {
+      message.error('点击了取消');
+    },
+    positiveText: '确定',
+    negativeText: '取消',
+  });
+};
 </script>
 
 <template>
@@ -70,6 +88,12 @@ const openDialog = (type: (typeof dialogTypes)[number]) => {
           </NButton>
         </NSpace>
       </NCard>
+
+      <NCard title="Modal 弹窗 (命令式 API)" class="mt-4">
+        <NSpace>
+          <NButton @click="openModal"> 打开 Modal </NButton>
+        </NSpace>
+      </NCard>
     </NCard>
   </div>
 </template>