build(projects): 依赖升级

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-config-provider :locale="zhCN" :date-locale="dateZhCN" :theme-overrides="app.themeOverrids">
+  <n-config-provider :locale="zhCN" :date-locale="dateZhCN" :theme="theme" :theme-overrides="app.themeOverrids">
     <naive-app>
       <router-view />
     </naive-app>
@@ -7,10 +7,12 @@
 </template>
 
 <script lang="ts" setup>
-import { NConfigProvider, zhCN, dateZhCN } from 'naive-ui';
+import { NConfigProvider, darkTheme, zhCN, dateZhCN } from 'naive-ui';
+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/main.ts

@@ -21,7 +21,7 @@ async function setupApp() {
   naiveApp.mount('#naiveApp', true);
 
   // 挂载路由
-  setupRouter(app);
+  await setupRouter(app);
 
   // 路由准备就绪后挂载APP实例
   await router.isReady();

src/router/index.ts

@@ -11,8 +11,7 @@ export const router = createRouter({
   routes
 });
 
-createRouterGuide(router);
-
 export function setupRouter(app: App) {
   app.use(router);
+  createRouterGuide(router);
 }

src/service/request/config.ts

@@ -1,8 +1,2 @@
 /** 请求超时时间 */
 export const REQUEST_TIMEOUT = 15 * 1000;
-
-/** 请求头的content-type类型 */
-export enum ContentType {
-  json = 'application/json',
-  formUrlEncoded = 'application/x-www-form-urlencoded'
-}

src/service/request/errorHandler.ts

@@ -1,5 +1,3 @@
-import { ElMessage } from 'element-plus';
-
 const ERROR_STATUS = {
   400: '400: 请求出现语法错误',
   401: '401: 用户未授权~',
@@ -21,20 +19,21 @@ type ErrorStatus = keyof typeof ERROR_STATUS;
  * @param error - 错误
  */
 export function errorHandler(error: any): void {
+  const { $message: Message } = window;
   if (error.response) {
     const status = error.response.status as ErrorStatus;
-    ElMessage.error(ERROR_STATUS[status]);
+    Message?.error(ERROR_STATUS[status]);
     return;
   }
   if (error.code === 'ECONNABORTED' && error.message.includes('timeout')) {
-    ElMessage.error('网络连接超时~');
+    Message?.error('网络连接超时~');
     return;
   }
   if (!window.navigator.onLine || error.message === 'Network Error') {
-    ElMessage.error('网络不可用~');
+    Message?.error('网络不可用~');
     return;
   }
-  ElMessage.error('请求错误~');
+  Message?.error('请求错误~');
 }
 
 /**

src/service/request/instance.ts

@@ -1,6 +1,5 @@
 import axios from 'axios';
 import qs from 'qs';
-import { ElMessage } from 'element-plus';
 import type { AxiosRequestConfig, AxiosInstance } from 'axios';
 import { ContentType } from '@/enum';
 import { getStorageToken } from '@/utils';
@@ -68,7 +67,7 @@ export default class CustomAxiosInstance {
           if (data[statusKey] === successCode) {
             return Promise.resolve(data.data);
           }
-          ElMessage.error(data[msgKey]);
+          window.$message?.error(data[msgKey]);
           return Promise.reject(data[msgKey]);
         }
         const error = { response };

src/views/home/index.vue

@@ -9,32 +9,24 @@
 </template>
 
 <script lang="ts" setup>
-import { useLoadingBar, useDialog, useNotification, useMessage } from 'naive-ui';
+import { useDialog, useNotification, useMessage } from 'naive-ui';
 
-type ActionType = 'loading-bar' | 'dialog' | 'notification' | 'message';
+type ActionType = 'dialog' | 'notification' | 'message';
 interface Action {
   key: ActionType;
   label: string;
 }
 
-const loadingBar = useLoadingBar();
 const dialog = useDialog();
 const notification = useNotification();
 const message = useMessage();
 
 const actions: Action[] = [
-  { key: 'loading-bar', label: 'loading bar' },
   { key: 'dialog', label: 'dialog' },
   { key: 'notification', label: 'notification' },
   { key: 'message', label: 'message' }
 ];
 function handleClick(type: ActionType) {
-  if (type === 'loading-bar') {
-    loadingBar.start();
-    setTimeout(() => {
-      loadingBar.finish();
-    }, 5000);
-  }
   if (type === 'dialog') {
     dialog.info({ content: '弹窗示例！' });
   }