feat ： UI provider

.gitignore

@@ -4,6 +4,7 @@
 .nuxt
 .nitro
 .cache
+.vscode
 dist
 
 # Node dependencies
@@ -13,6 +14,8 @@ node_modules
 logs
 *.log
 
+*-lock.*
+
 # Misc
 .DS_Store
 .fleet

components.d.ts

@@ -10,14 +10,17 @@ declare module 'vue' {
     NAvatar: typeof import('naive-ui')['NAvatar']
     NButton: typeof import('naive-ui')['NButton']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDropdown: typeof import('naive-ui')['NDropdown']
     NInput: typeof import('naive-ui')['NInput']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutFooter: typeof import('naive-ui')['NLayoutFooter']
     NLayoutHeader: typeof import('naive-ui')['NLayoutHeader']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
+    NLoadingBarProvider: typeof import('naive-ui')['NLoadingBarProvider']
     NMenu: typeof import('naive-ui')['NMenu']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
+    NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
     NSelect: typeof import('naive-ui')['NSelect']
     NSpace: typeof import('naive-ui')['NSpace']
     NSwitch: typeof import('naive-ui')['NSwitch']

components/NaiveProvider.vue

@@ -0,0 +1,25 @@
+<template>
+  <!-- 独立API的容器 -->
+  <n-loading-bar-provider>
+    <n-dialog-provider>
+      <n-notification-provider>
+        <n-message-provider>
+          <slot />
+          <NaiveProviderContent />
+        </n-message-provider>
+      </n-notification-provider>
+    </n-dialog-provider>
+  </n-loading-bar-provider>
+</template>
+
+<script setup lang="ts">
+const NaiveProviderContent = defineComponent({
+  name: 'NaiveProviderContent',
+  setup() {},
+  render() {
+    return h('div');
+  },
+});
+</script>
+
+<style scoped></style>

layouts/default.vue

@@ -1,14 +1,22 @@
 <template>
-  <n-space vertical>
-    <n-layout class="h-full">
-      <n-layout has-sider>
-        <Sidebar />
-        <div class="min-h-screen flex flex-col flex-1">
-          <div class="flex-1">
-            <slot />
-          </div>
-        </div>
-      </n-layout>
-    </n-layout>
-  </n-space>
+  <!-- 全局化配置设置内部组件的主题、语言。 -->
+  <n-config-provider class="wh-full" inline-theme-disabled>
+    <NaiveProvider>
+      <n-space vertical>
+        <n-layout class="h-full">
+          <n-layout has-sider>
+            <Sidebar />
+            <div class="min-h-screen flex flex-col flex-1">
+              <div class="flex-1">
+                <slot />
+              </div>
+            </div>
+          </n-layout>
+        </n-layout>
+      </n-space>
+    </NaiveProvider>
+  </n-config-provider>
 </template>
+<script lang="ts">
+import NaiveProvider from '../components/NaiveProvider.vue';
+</script>

layouts/plain.vue

@@ -1,5 +1,10 @@
 <template>
   <div class="min-h-screen">
-    <slot />
+    <NaiveProvider>
+      <slot />
+    </NaiveProvider>
   </div>
 </template>
+<script lang="ts">
+import NaiveProvider from '../components/NaiveProvider.vue';
+</script>