build(projects): 依赖升级，规范目录

.eslintrc.js

@@ -18,13 +18,12 @@ module.exports = {
     '@vue/prettier/@typescript-eslint'
   ],
   rules: {
-    'no-unused-vars': 1,
+    'no-unused-vars': 'off',
     'import/extensions': ['error', 'never'],
     'import/no-extraneous-dependencies': [2, { devDependencies: true }],
     'import/no-unresolved': 0,
     'no-shadow': 0,
     'import/prefer-default-export': 0,
-    'vue/no-deprecated-slot-attribute': 1,
     '@typescript-eslint/no-explicit-any': 0,
     '@typescript-eslint/no-inferrable-types': 0,
     '@typescript-eslint/ban-ts-ignore': 'off',

build/plugins/style-import.ts

@@ -8,8 +8,8 @@ export default [
         esModule: true,
         ensureStyleFile: true,
         resolveStyle: name => {
-          name = name.slice(3);
-          return `element-plus/packages/theme-chalk/src/${name}.scss`;
+          const formatName = name.slice(3);
+          return `element-plus/packages/theme-chalk/src/${formatName}.scss`;
         },
         resolveComponent: name => {
           return `element-plus/lib/${name}`;

package.json

@@ -7,56 +7,63 @@
     "serve": "vite preview",
     "lint": "eslint ./src --ext .vue,.js,jsx,.ts,tsx",
     "lint:fix": "eslint --fix ./src --ext .vue,.js,jsx,.ts,tsx",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "postinstall": "patch-package"
   },
   "lint-staged": {
     "*.{vue,js,jsx,ts,tsx}": "eslint --fix"
   },
   "dependencies": {
+    "@vueuse/core": "^5.3.0",
     "axios": "^0.21.1",
     "dayjs": "^1.10.6",
-    "element-plus": "^1.0.2-beta.55",
+    "element-plus": "^1.0.2-beta.70",
+    "form-data": "^4.0.0",
     "nprogress": "^0.2.0",
+    "pinia": "^2.0.0-rc.4",
     "qs": "^6.10.1",
     "smoothscroll-polyfill": "^0.4.4",
-    "vue": "^3.0.5"
+    "vue": "^3.2.2",
+    "vue-router": "^4.0.11"
   },
   "devDependencies": {
-    "@commitlint/cli": "^12.1.4",
-    "@commitlint/config-conventional": "^12.1.4",
-    "@iconify/json": "^1.1.378",
+    "@commitlint/cli": "^13.1.0",
+    "@commitlint/config-conventional": "^13.1.0",
+    "@iconify/json": "^1.1.386",
     "@types/nprogress": "^0.2.0",
     "@types/qs": "^6.9.7",
     "@types/smoothscroll-polyfill": "^0.3.1",
-    "@typescript-eslint/eslint-plugin": "^4.28.4",
-    "@typescript-eslint/parser": "^4.28.4",
-    "@vitejs/plugin-vue": "^1.2.5",
-    "@vue/compiler-sfc": "^3.1.5",
+    "@typescript-eslint/eslint-plugin": "^4.29.1",
+    "@typescript-eslint/parser": "^4.29.1",
+    "@vitejs/plugin-vue": "^1.4.0",
+    "@vue/compiler-sfc": "^3.2.2",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
     "commitizen": "^4.2.4",
     "cz-conventional-changelog": "^3.3.0",
     "cz-customizable": "^6.3.0",
     "dotenv": "^10.0.0",
-    "eslint": "^7.31.0",
+    "eslint": "^7.32.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-import": "^2.24.0",
     "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-vue": "^7.14.0",
+    "eslint-plugin-vue": "^7.16.0",
     "husky": "^7.0.1",
-    "lint-staged": "^11.0.1",
+    "lint-staged": "^11.1.2",
+    "patch-package": "^6.4.7",
+    "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.3.2",
-    "sass": "^1.35.2",
+    "sass": "^1.37.5",
     "typescript": "^4.3.5",
-    "vite": "^2.4.2",
-    "vite-plugin-components": "^0.13.0",
+    "vite": "^2.4.4",
+    "vite-plugin-components": "^0.13.2",
     "vite-plugin-html": "^2.0.7",
     "vite-plugin-icons": "^0.6.5",
-    "vite-plugin-style-import": "^1.0.1",
-    "vite-plugin-windicss": "^1.2.4",
-    "vue-tsc": "^0.2.1",
-    "windicss": "^3.1.5"
+    "vite-plugin-style-import": "^1.1.1",
+    "vite-plugin-windicss": "^1.2.7",
+    "vue-tsc": "^0.2.2",
+    "windicss": "^3.1.7"
   },
   "config": {
     "commitizen": {

src/enum/common.ts

@@ -0,0 +1,6 @@
+/** 请求头的content-type类型 */
+export enum ContentType {
+  json = 'application/json',
+  formUrlencoded = 'application/x-www-form-urlencoded',
+  formData = 'multipart/form-data'
+}

src/enum/index.ts

@@ -0,0 +1 @@
+export { ContentType } from './common';

src/interface/business.ts

@@ -0,0 +1,9 @@
+/** 用户信息 */
+export interface UserInfo {
+  /** 用户id */
+  userId: string;
+  /** 用户名 */
+  userName: string;
+  /** 用户手机号 */
+  userPhone: string;
+}

src/interface/index.ts

@@ -0,0 +1 @@
+export { UserInfo } from './business';

src/main.ts

@@ -4,8 +4,8 @@ import { setupSmoothScroll, setupElementPlus } from './plugins';
 import 'virtual:windi.css';
 import './styles/css/global.css';
 
-setupSmoothScroll();
-
 const app = createApp(App);
+setupSmoothScroll();
 setupElementPlus(app);
+
 app.mount('#app');

src/service/request/errorHandler.ts

@@ -14,10 +14,7 @@ const ERROR_STATUS = {
   504: '504: 网关超时~',
   505: '505: http版本不支持该请求~'
 };
-type ErrorStatus = 400 | 401 | 403 | 404 | 405 | 408 | 500 | 501 | 502 | 503 | 504 | 505;
-
-/** 错误信息显示时间 */
-export const errorDuration = 3000 / 1000;
+type ErrorStatus = keyof typeof ERROR_STATUS;
 
 /**
  * 网络请求错误状态处理
@@ -37,7 +34,7 @@ export function errorHandler(error: any): void {
     ElMessage.error('网络不可用~');
     return;
   }
-  ElMessage.error('未知错误~');
+  ElMessage.error('请求错误~');
 }
 
 /**

src/service/request/index.ts

@@ -1,10 +1,6 @@
 import { createRequest } from './request';
-import { REQUEST_TIMEOUT, ContentType } from './config';
+import { REQUEST_TIMEOUT } from './config';
 
-export { handleResponse } from './request';
-export { ContentType };
-
-// emoss-admin
 export const adminRequest = createRequest({
   baseURL: import.meta.env.VITE_HTTP_URL_EMOSS_ADMIN as string,
   timeout: REQUEST_TIMEOUT

src/service/request/instance.ts

@@ -1,9 +1,11 @@
 import axios from 'axios';
 import qs from 'qs';
-import { getStorageToken } from '@/utils';
 import { ElMessage } from 'element-plus';
 import type { AxiosRequestConfig, AxiosInstance } from 'axios';
+import { ContentType } from '@/enum';
+import { getStorageToken } from '@/utils';
 import { errorHandler } from './errorHandler';
+import { transformFile } from '../utils';
 
 export interface StatusConfig {
   /** 表明请求状态的属性key */
@@ -37,15 +39,20 @@ export default class CustomAxiosInstance {
   /** 设置请求拦截器 */
   setInterceptor(statusConfig: StatusConfig): void {
     this.instance.interceptors.request.use(
-      config => {
+      async config => {
         const handleConfig = { ...config };
-        // content-type为application/x-www-form-urlencoded类型的data参数需要序列化
-        if (handleConfig.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
+        // form类型转换
+        if (handleConfig.headers['Content-Type'] === ContentType.formUrlencoded) {
           handleConfig.data = qs.stringify(handleConfig.data);
         }
+        // 文件类型转换
+        if (handleConfig.headers['Content-Type'] === ContentType.formData) {
+          const key = Object.keys(handleConfig.data)[0];
+          const file = handleConfig.data[key];
+          handleConfig.data = await transformFile(file, key);
+        }
         // 设置token
         handleConfig.headers.Authorization = getStorageToken();
-
         return handleConfig;
       },
       error => {

src/service/request/request.ts

@@ -49,18 +49,3 @@ export function createRequest(axiosConfig: AxiosRequestConfig, statusConfig?: St
   const request = new Request(customInstance.instance);
   return request;
 }
-
-/**
- * 对请求的结果数据进行格式化的处理
- * @param handleFunc - 处理函数
- * @param errors - 接收多个请求的错误
- * @param datas - 接收多个请求的数据
- */
-export function handleResponse<T>(handleFunc: Function, errors: any[], datas: any[]) {
-  let handleData = null;
-  if (errors.every(error => !error)) {
-    handleData = handleFunc(...datas);
-  }
-  const resError = errors.find(error => Boolean(error));
-  return [resError, handleData] as [any, T];
-}

src/service/utils/index.ts

@@ -0,0 +1,45 @@
+import FormData from 'form-data';
+import { isArray } from '@/utils';
+
+type HandleFunc<T> = (...arg: any) => T;
+type RequestError = any;
+type RequestData = any;
+type RequestResult = [RequestError, RequestData];
+/**
+ * 对请求的结果数据进行格式化的处理
+ * @param handleFunc - 处理函数
+ * @param requests - 请求结果
+ */
+export function handleResponse<T>(handleFunc: HandleFunc<T>, ...requests: RequestResult[]) {
+  let handleData: any = null;
+  let error: any = null;
+  const hasError = requests.some(item => {
+    const isError = Boolean(item[0]);
+    if (isError) {
+      [error] = item;
+    }
+    return isError;
+  });
+  if (!hasError) {
+    handleData = handleFunc(...requests.map(item => item[1]));
+  }
+  return [error, handleData] as [any, T];
+}
+
+/**
+ * 接口为上传文件的类型时数据转换
+ */
+export async function transformFile(file: File[] | File, key: string) {
+  const formData = new FormData();
+  if (isArray(file)) {
+    await Promise.all(
+      (file as File[]).map(item => {
+        formData.append(key, item);
+        return true;
+      })
+    );
+  } else {
+    await formData.append(key, file);
+  }
+  return formData;
+}

src/store/index.ts

@@ -1,10 +1,10 @@
 import type { App } from 'vue';
-import { createAuthStore, useAuthStore } from './modules/auth';
-import { createAsideStore, useAsideStore } from './modules/aside';
+import { createPinia } from 'pinia';
 
-export function createStore(app: App) {
-  createAuthStore(app);
-  createAsideStore(app);
+export const store = createPinia();
+
+export function setupStore(app: App) {
+  app.use(store);
 }
 
-export { useAuthStore, useAsideStore };
+export { useAppStore, useAuthStore } from './modules';

src/store/modules/app/index.ts

@@ -0,0 +1,26 @@
+import { defineStore } from 'pinia';
+import { store } from '../../index';
+
+interface AppState {
+  /** 侧边栏折叠 */
+  asideCollapse: boolean;
+}
+
+const appStore = defineStore({
+  id: 'app-store',
+  state: (): AppState => ({
+    asideCollapse: false
+  }),
+  actions: {
+    handleAsideCollapse(collapse: boolean) {
+      this.asideCollapse = collapse;
+    },
+    toggleAside() {
+      this.asideCollapse = !this.asideCollapse;
+    }
+  }
+});
+
+export default function useAppStore() {
+  return appStore(store);
+}

src/store/modules/aside/index.ts

@@ -1,33 +0,0 @@
-import { inject, reactive } from 'vue';
-import type { App, InjectionKey } from 'vue';
-
-interface AsideState {
-  collapse: boolean;
-}
-
-interface AsideStore {
-  /** aside状态 */
-  asideState: AsideState;
-  /** 切换collapse */
-  toggle: () => void;
-}
-
-const injectKey: InjectionKey<AsideStore> = Symbol('aside-store');
-
-export function createAsideStore(app: App) {
-  const state = reactive<AsideState>({
-    collapse: false
-  });
-  function toggle() {
-    state.collapse = !state.collapse;
-  }
-  const provideData: AsideStore = {
-    asideState: state,
-    toggle
-  };
-  app.provide(injectKey, provideData);
-}
-
-export function useAsideStore() {
-  return inject(injectKey)!;
-}

src/store/modules/auth/index.ts

@@ -1,44 +1,40 @@
-import { computed, inject, reactive } from 'vue';
-import type { ComputedRef, App, InjectionKey } from 'vue';
-
-interface UserInfo {
-  userId: string;
-  userName: string;
-  userPhone: string;
-}
+import { defineStore } from 'pinia';
+import type { UserInfo } from '@/interface';
+import { store } from '../../index';
 
 interface AuthState {
+  /** 用户token */
   token: string;
+  /** 用户信息 */
   userInfo: UserInfo;
 }
 
-interface AuthStore {
-  /** auth状态 */
-  authState: AuthState;
-  /** 是否登录 */
-  isLogin: ComputedRef<boolean>;
-}
-
-const injectKey: InjectionKey<AuthStore> = Symbol('auth-store');
-
-export function createAuthStore(app: App) {
-  const state = reactive<AuthState>({
-    token: '',
-    userInfo: {
-      userId: '',
-      userName: '',
-      userPhone: ''
+const authStore = defineStore({
+  /** 区分不通状态的唯一标识 */
+  id: 'auth-store',
+  /** 状态 */
+  state: (): AuthState => {
+    return {
+      token: '',
+      userInfo: {
+        userId: '',
+        userName: '',
+        userPhone: ''
+      }
+    };
+  },
+  getters: {
+    /** 是否登录 */
+    isLogin: state => Boolean(state.token)
+  },
+  actions: {
+    /** 重置auth状态 */
+    resetAuthState() {
+      this.$reset();
     }
-  });
-  const isLogin = computed(() => Boolean(state.token));
+  }
+});
 
-  const provideData: AuthStore = {
-    authState: state,
-    isLogin
-  };
-  app.provide(injectKey, provideData);
-}
-
-export function useAuthStore() {
-  return inject(injectKey)!;
+export default function useAuthStore() {
+  return authStore(store);
 }

src/store/modules/index.ts

@@ -0,0 +1,4 @@
+import useAppStore from './app';
+import useAuthStore from './auth';
+
+export { useAppStore, useAuthStore };

src/utils/common/index.ts

@@ -0,0 +1,13 @@
+export {
+  isNumber,
+  isString,
+  isBoolean,
+  isNull,
+  isUndefined,
+  isObject,
+  isArray,
+  isDate,
+  isRegExp,
+  isSet,
+  isMap
+} from './typeof';

src/utils/common/typeof.ts

@@ -0,0 +1,47 @@
+enum DataType {
+  number = '[object Number]',
+  string = '[object String]',
+  boolean = '[object Object]',
+  null = '[object Null]',
+  undefined = '[object Undefined]',
+  object = '[object Object]',
+  array = '[object Array]',
+  date = '[object Date]',
+  regexp = '[object RegExp]',
+  set = '[object Set]',
+  map = '[object Map]'
+}
+
+export function isNumber(data: any) {
+  return Object.prototype.toString.call(data) === DataType.number;
+}
+export function isString(data: any) {
+  return Object.prototype.toString.call(data) === DataType.string;
+}
+export function isBoolean(data: any) {
+  return Object.prototype.toString.call(data) === DataType.boolean;
+}
+export function isNull(data: any) {
+  return Object.prototype.toString.call(data) === DataType.null;
+}
+export function isUndefined(data: any) {
+  return Object.prototype.toString.call(data) === DataType.undefined;
+}
+export function isObject(data: any) {
+  return Object.prototype.toString.call(data) === DataType.object;
+}
+export function isArray(data: any) {
+  return Object.prototype.toString.call(data) === DataType.array;
+}
+export function isDate(data: any) {
+  return Object.prototype.toString.call(data) === DataType.date;
+}
+export function isRegExp(data: any) {
+  return Object.prototype.toString.call(data) === DataType.regexp;
+}
+export function isSet(data: any) {
+  return Object.prototype.toString.call(data) === DataType.set;
+}
+export function isMap(data: any) {
+  return Object.prototype.toString.call(data) === DataType.map;
+}

src/utils/index.ts

@@ -1 +1,14 @@
 export { getStorageToken, getStorageUserInfo } from './auth';
+export {
+  isNumber,
+  isString,
+  isBoolean,
+  isNull,
+  isUndefined,
+  isObject,
+  isArray,
+  isDate,
+  isRegExp,
+  isSet,
+  isMap
+} from './common';