feat(naive-ui): 添加 Modal 命令式 API 支持并完善类型声明

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>

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>