build(projects): 依赖升级

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn lint:fix
+pnpm lint:fix

package.json

@@ -14,13 +14,12 @@
     "*.{vue,js,jsx,ts,tsx}": "eslint --fix"
   },
   "dependencies": {
-    "@types/chroma-js": "^2.1.3",
     "@vueuse/core": "^6.0.0",
     "axios": "^0.21.1",
     "chroma-js": "^2.1.2",
     "dayjs": "^1.10.6",
     "form-data": "^4.0.0",
-    "naive-ui": "^2.16.5",
+    "naive-ui": "^2.16.6",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.0-rc.4",
     "qs": "^6.10.1",
@@ -31,14 +30,15 @@
   "devDependencies": {
     "@commitlint/cli": "^13.1.0",
     "@commitlint/config-conventional": "^13.1.0",
-    "@iconify/json": "^1.1.392",
+    "@iconify/json": "^1.1.393",
+    "@types/chroma-js": "^2.1.3",
     "@types/nprogress": "^0.2.0",
     "@types/qs": "^6.9.7",
     "@types/smoothscroll-polyfill": "^0.3.1",
-    "@typescript-eslint/eslint-plugin": "^4.29.2",
+    "@typescript-eslint/eslint-plugin": "^4.29.3",
-    "@typescript-eslint/parser": "^4.29.2",
+    "@typescript-eslint/parser": "^4.29.3",
-    "@vitejs/plugin-vue": "^1.4.0",
+    "@vitejs/plugin-vue": "^1.6.0",
-    "@vue/compiler-sfc": "^3.2.4",
+    "@vue/compiler-sfc": "^3.2.6",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
     "commitizen": "^4.2.4",
@@ -48,22 +48,22 @@
     "eslint": "^7.32.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.24.1",
+    "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-prettier": "^3.4.1",
     "eslint-plugin-vue": "^7.16.0",
-    "husky": "^7.0.1",
+    "husky": "^7.0.2",
     "lint-staged": "^11.1.2",
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.3.2",
-    "sass": "^1.38.0",
+    "sass": "^1.38.1",
     "typescript": "^4.3.5",
-    "vite": "^2.5.0",
+    "vite": "^2.5.1",
     "vite-plugin-components": "^0.13.2",
     "vite-plugin-html": "^2.1.0",
     "vite-plugin-icons": "^0.6.5",
-    "vite-plugin-style-import": "^1.1.1",
+    "vite-plugin-style-import": "^1.2.1",
-    "vite-plugin-windicss": "^1.2.7",
+    "vite-plugin-windicss": "^1.3.0",
     "vue-tsc": "^0.3.0",
     "windicss": "^3.1.7"
   },

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: '弹窗示例！' });
   }