feat(demos): 添加 Naive UI 组件演示页面

src/App.vue

@@ -1,26 +1,14 @@
 <script setup lang="ts">
-import type { GlobalThemeOverrides } from 'naive-ui';
-import { darkTheme } from 'naive-ui';
 import { RouterView } from 'vue-router';
-
-const appStore = useAppStore();
-
-// https://www.naiveui.com/zh-CN/light/docs/customize-theme
-const themeOverrides: GlobalThemeOverrides = {
-  common: {},
-};
+import AppNaiveUIProvider from './AppNaiveUIProvider.vue';
 </script>
 
 <template>
   <DynamicDialog />
   <ConfirmDialog />
   <Toast />
-  <n-config-provider
-    :theme-overrides
-    preflight-style-disabled
-    :theme="appStore.isDark ? darkTheme : null"
-    abstract
-  >
+
+  <AppNaiveUIProvider>
     <RouterView />
-  </n-config-provider>
+  </AppNaiveUIProvider>
 </template>

src/AppNaiveUIProvider.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { GlobalThemeOverrides } from 'naive-ui';
+import { darkTheme } from 'naive-ui';
+import type { FunctionalComponent } from 'vue';
+import { createTextVNode } from 'vue';
+
+const appStore = useAppStore();
+
+// https://www.naiveui.com/zh-CN/light/docs/customize-theme
+const themeOverrides: GlobalThemeOverrides = {
+  common: {},
+};
+
+const ContextHolder: FunctionalComponent = () => {
+  window.$nLoadingBar = useLoadingBar();
+  window.$nDialog = useDialog();
+  window.$nMessage = useMessage();
+  window.$nNotification = useNotification();
+  return createTextVNode();
+};
+</script>
+
+<script lang="ts">
+declare global {
+  export interface Window {
+    $nLoadingBar?: import('naive-ui').LoadingBarProviderInst;
+    $nDialog?: import('naive-ui').DialogProviderInst;
+    $nMessage?: import('naive-ui').MessageProviderInst;
+    $nNotification?: import('naive-ui').NotificationProviderInst;
+  }
+
+  /** Build time of the project */
+  export const BUILD_TIME: string;
+}
+</script>
+
+<template>
+  <NConfigProvider
+    :theme-overrides
+    preflight-style-disabled
+    :theme="appStore.isDark ? darkTheme : null"
+    abstract
+  >
+    <NLoadingBarProvider>
+      <NDialogProvider>
+        <NNotificationProvider>
+          <NMessageProvider>
+            <ContextHolder />
+            <slot></slot>
+          </NMessageProvider>
+        </NNotificationProvider>
+      </NDialogProvider>
+    </NLoadingBarProvider>
+  </NConfigProvider>
+</template>

src/locales-utils/route-messages/en-US.ts

@@ -5,6 +5,7 @@ export default {
   DemosApiDemo: 'API Demo',
   DemosCounterDemo: 'Counter Demo',
   DemosI18nDemo: 'i18n Demo',
+  DemosNaiveUiDemo: 'Naive UI Demo',
   DemosPrimevueDemo: 'PrimeVue Demo',
   DemosWebsocketDemo: 'WebSocket Demo',
   Home: 'Home',

src/locales-utils/route-messages/zh-CN.ts

@@ -5,6 +5,7 @@ export default {
   DemosApiDemo: 'API 调用示例',
   DemosCounterDemo: '点击计数器',
   DemosI18nDemo: '国际化示例',
+  DemosNaiveUiDemo: 'Naive UI 组件示例',
   DemosPrimevueDemo: 'PrimeVue 组件示例',
   DemosWebsocketDemo: 'WebSocket 示例',
   Home: '首页',

src/pages/demos/naive-ui-demo.page.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { useDialog, useMessage } from 'naive-ui';
+import type { MessageType } from 'naive-ui';
+
+definePage({ meta: {} });
+
+const message = useMessage();
+const dialog = useDialog();
+
+const messageTypes = ['info', 'success', 'warning', 'error', 'loading'] satisfies MessageType[];
+const dialogTypes = ['info', 'success', 'warning', 'error'] as const;
+
+const openAllMessages = () => {
+  messageTypes.forEach((type, index) => {
+    setTimeout(() => {
+      message[type](`${index + 1}. 消息内容`, {
+        duration: 3000,
+        closable: true,
+      });
+    }, index * 500);
+  });
+};
+
+const openDialog = (type: (typeof dialogTypes)[number]) => {
+  dialog[type]({
+    title: `${type.charAt(0).toUpperCase() + type.slice(1)} 弹窗`,
+    content: '这是一个命令式 API 创建的弹窗示例。',
+    positiveText: '确定',
+    negativeText: '取消',
+    onPositiveClick: () => {
+      message.success('点击了确定');
+    },
+    onNegativeClick: () => {
+      message.error('点击了取消');
+    },
+  });
+};
+</script>
+
+<template>
+  <div class="naive-ui-demo-page">
+    <NCard>
+      <template #header>Naive UI 组件演示</template>
+      <NAlert title="信息" type="info" :bordered="false">
+        演示 Naive UI 各种组件的使用方法和功能特性
+      </NAlert>
+
+      <NCard title="Message 消息" class="mt-4">
+        <NSpace>
+          <NButton
+            v-for="(type, index) in messageTypes"
+            :key="type"
+            @click="
+              message[type](`${index + 1}. 消息内容`, {
+                duration: 3000,
+                closable: true,
+              })
+            "
+          >
+            {{ `${index + 1}. ${type}` }}
+          </NButton>
+          <NButton @click="openAllMessages"> 一键打开所有 </NButton>
+        </NSpace>
+      </NCard>
+
+      <NCard title="Dialog 弹窗 (命令式 API)" class="mt-4">
+        <NSpace>
+          <NButton v-for="type in dialogTypes" :key="type" @click="openDialog(type)">
+            {{ type }}
+          </NButton>
+        </NSpace>
+      </NCard>
+    </NCard>
+  </div>
+</template>

typed-router.d.ts

@@ -65,6 +65,13 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
+    'DemosNaiveUiDemo': RouteRecordInfo<
+      'DemosNaiveUiDemo',
+      '/demos/naive-ui-demo',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
     'DemosPrimevueDemo': RouteRecordInfo<
       'DemosPrimevueDemo',
       '/demos/primevue-demo',
@@ -142,6 +149,12 @@ declare module 'vue-router/auto-routes' {
       views:
         | never
     }
+    'src/pages/demos/naive-ui-demo.page.vue': {
+      routes:
+        | 'DemosNaiveUiDemo'
+      views:
+        | never
+    }
     'src/pages/demos/primevue-demo.page.vue': {
       routes:
         | 'DemosPrimevueDemo'