fix(projects): 修复顶部加载条主题

src/App.vue

@@ -1,18 +1,10 @@
 <template>
-  <n-config-provider :locale="zhCN" :date-locale="dateZhCN" :theme="theme" :theme-overrides="app.themeOverrids">
+  <app-provider>
-    <naive-app>
     <router-view />
-    </naive-app>
+  </app-provider>
-  </n-config-provider>
 </template>
 
 <script lang="ts" setup>
-import { NConfigProvider, darkTheme, zhCN, dateZhCN } from 'naive-ui';
+import AppProvider from './AppProvider.vue';
-import { computed } from 'vue';
-import { NaiveApp } from '@/components';
-import { useAppStore } from '@/store';
-
-const app = useAppStore();
-const theme = computed(() => (app.themeSettings.darkMode ? darkTheme : undefined));
 </script>
 <style></style>

src/AppProvider.vue

@@ -0,0 +1,34 @@
+<template>
+  <n-config-provider :locale="zhCN" :date-locale="dateZhCN" :theme="theme" :theme-overrides="app.themeOverrids">
+    <n-loading-bar-provider>
+      <n-dialog-provider>
+        <n-notification-provider>
+          <n-message-provider>
+            <slot></slot>
+            <app-provider-content />
+          </n-message-provider>
+        </n-notification-provider>
+      </n-dialog-provider>
+    </n-loading-bar-provider>
+  </n-config-provider>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import {
+  NConfigProvider,
+  darkTheme,
+  zhCN,
+  dateZhCN,
+  NLoadingBarProvider,
+  NDialogProvider,
+  NNotificationProvider,
+  NMessageProvider
+} from 'naive-ui';
+import { AppProviderContent } from '@/components';
+import { useAppStore } from '@/store';
+
+const app = useAppStore();
+const theme = computed(() => (app.themeSettings.darkMode ? darkTheme : undefined));
+</script>
+<style scoped></style>

src/components/common/NaiveApp/index.vue

@@ -1,18 +0,0 @@
-<template>
-  <n-loading-bar-provider>
-    <n-dialog-provider>
-      <n-notification-provider>
-        <n-message-provider>
-          <slot></slot>
-          <naive-content />
-        </n-message-provider>
-      </n-notification-provider>
-    </n-dialog-provider>
-  </n-loading-bar-provider>
-</template>
-
-<script lang="ts" setup>
-import { NLoadingBarProvider, NDialogProvider, NNotificationProvider, NMessageProvider } from 'naive-ui';
-import NaiveContent from './NaiveContent.vue';
-</script>
-<style scoped></style>

src/components/common/index.ts

@@ -1,3 +1,3 @@
-import NaiveApp from './NaiveApp/index.vue';
+import AppProviderContent from './AppProviderContent/index.vue';
 
-export { NaiveApp };
+export { AppProviderContent };

src/components/index.ts

@@ -1 +1 @@
-export { NaiveApp } from './common';
+export { AppProviderContent } from './common';

src/layouts/BasicContent.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <router-view />
+  </div>
+</template>
+
+<script lang="ts" setup></script>
+<style scoped></style>

src/main.ts

@@ -1,14 +1,14 @@
 import { createApp } from 'vue';
 import App from './App.vue';
+import AppProvider from './AppProvider.vue';
 import { setupStore } from './store';
 import { router, setupRouter } from './router';
 import { setupSmoothScroll, setupNaive } from './plugins';
-import { NaiveApp } from './components';
 import 'virtual:windi.css';
 import './styles/css/global.css';
 
 async function setupApp() {
-  const naiveApp = createApp(NaiveApp);
+  const naiveApp = createApp(AppProvider);
   const app = createApp(App);
 
   /** 注册naive UI组件 */

src/views/home/index.vue

@@ -5,6 +5,7 @@
         {{ item.label }}
       </n-button>
     </n-space>
+    <router-link to="/system">system</router-link>
   </div>
 </template>
 

src/views/system/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <div>System</div>
+  <div>
+    <h3>System</h3>
+    <n-button>
+      <router-link to="/home">home</router-link>
+    </n-button>
+  </div>
 </template>
 
 <script lang="ts" setup></script>