refactor: use setup refactor

.eslintrc.js

@@ -24,6 +24,7 @@ module.exports = {
     ElRef: "readonly",
     global: "readonly",
     ForDataType: "readonly",
+    ComponentRoutes: "readonly",
 
     // script setup
     defineProps: "readonly",

package.json

@@ -14,7 +14,7 @@
     "lint:stylelint": "stylelint --cache --fix \"**/*.{vue,css,scss,postcss,less}\" --cache --cache-location node_modules/.cache/stylelint/",
     "lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",
     "lint:pretty": "pretty-quick --staged",
-    "lint:all": "yarn lint:eslint && yarn lint:prettier && yarn lint:stylelint && yarn lint:pretty",
+    "lint": "yarn lint:eslint && yarn lint:prettier && yarn lint:stylelint && yarn lint:pretty",
     "prepare": "husky install"
   },
   "dependencies": {

src/components/ReCropper/src/index.tsx

@@ -1,5 +1,4 @@
 import type { CSSProperties } from "vue";
-
 import {
   defineComponent,
   onBeforeMount,
@@ -40,46 +39,48 @@ const defaultOptions: Cropper.Options = {
   rotatable: true
 };
 
-export default defineComponent({
+const props = {
-  name: "Cropper",
+  src: {
-  props: {
+    type: String,
-    src: {
+    required: true
-      type: String,
+  },
-      required: true
+  alt: {
-    },
+    type: String
-    alt: {
+  },
-      type: String
+  width: {
-    },
+    type: [String, Number],
-    width: {
+    default: ""
-      type: [String, Number],
+  },
-      default: ""
+  height: {
-    },
+    type: [String, Number],
-    height: {
+    default: "360px"
-      type: [String, Number],
+  },
-      default: "360px"
+  crossorigin: {
-    },
+    type: String || Object,
-    crossorigin: {
+    default: undefined
-      type: String || Object,
+  },
-      default: undefined
+  imageStyle: {
-    },
+    type: Object as PropType<CSSProperties>,
-    imageStyle: {
+    default() {
-      type: Object as PropType<CSSProperties>,
+      return {};
-      default() {
-        return {};
-      }
-    },
-    options: {
-      type: Object as PropType<Options>,
-      default() {
-        return {};
-      }
     }
   },
+  options: {
+    type: Object as PropType<Options>,
+    default() {
+      return {};
+    }
+  }
+};
+
+export default defineComponent({
+  name: "Cropper",
+  props,
   setup(props) {
     const cropper: any = ref<Nullable<Cropper>>(null);
     const imgElRef = templateRef<HTMLImageElement | null>("imgElRef", null);
 
-    const isReady = ref(false);
+    const isReady = ref<boolean>(false);
 
     const getImageStyle = computed((): CSSProperties => {
       return {

src/components/ReFlop/src/Filpper.tsx

@@ -2,19 +2,21 @@ import { defineComponent, ref } from "vue";
 import { propTypes } from "/@/utils/propTypes";
 import "./filpper.css";
 
+const props = {
+  // front paper text
+  // 前牌文字
+  frontText: propTypes.number.def(0),
+  // back paper text
+  // 后牌文字
+  backText: propTypes.number.def(1),
+  // flipping duration, please be consistent with the CSS animation-duration value.
+  // 翻牌动画时间，与CSS中设置的animation-duration保持一致
+  duration: propTypes.number.def(600)
+};
+
 export default defineComponent({
   name: "Filpper",
-  props: {
+  props,
-    // front paper text
-    // 前牌文字
-    frontText: propTypes.number.def(0),
-    // back paper text
-    // 后牌文字
-    backText: propTypes.number.def(1),
-    // flipping duration, please be consistent with the CSS animation-duration value.
-    // 翻牌动画时间，与CSS中设置的animation-duration保持一致
-    duration: propTypes.number.def(600)
-  },
   setup(props) {
     // eslint-disable-next-line vue/no-setup-props-destructure
     const { frontText, backText, duration } = props;

src/components/ReInfo/index.vue

@@ -58,6 +58,7 @@ const rules: Object = ref({
 
 // 点击登录或注册
 const onBehavior = (evt: Object): void => {
+  // @ts-expect-error
   instance.refs.ruleForm.validate((valid: boolean) => {
     if (valid) {
       emit("onBehavior", evt);
@@ -74,6 +75,7 @@ const refreshVerify = (): void => {
 
 // 表单重置
 const resetForm = (): void => {
+  // @ts-expect-error
   instance.refs.ruleForm.resetFields();
 };
 

src/components/ReSelector/src/index.tsx

@@ -21,35 +21,37 @@ let overList = [];
 // 存放第一个选中的元素和最后一个选中元素，只能存放这两个元素
 let selectedList = [];
 
-export default defineComponent({
+const props = {
-  name: "Selector",
+  HsKey: {
-  props: {
+    type: Number || String,
-    HsKey: {
+    default: 0
-      type: Number || String,
+  },
-      default: 0
+  disabled: {
-    },
+    type: Boolean,
-    disabled: {
+    default: false
-      type: Boolean,
+  },
-      default: false
+  value: {
-    },
+    type: Number,
-    value: {
+    default: 0
-      type: Number,
+  },
-      default: 0
+  max: {
-    },
+    type: Array,
-    max: {
+    default() {
-      type: Array,
+      return [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-      default() {
-        return [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-      }
-    },
-    // 回显数据的索引，长度必须是2
-    echo: {
-      type: Array,
-      default() {
-        return [];
-      }
     }
   },
+  // 回显数据的索引，长度必须是2
+  echo: {
+    type: Array,
+    default() {
+      return [];
+    }
+  }
+};
+
+export default defineComponent({
+  name: "Selector",
+  props,
   emits: ["selectedVal"],
   setup(props, { emit }) {
     const instance = getCurrentInstance();

src/config/index.ts

@@ -1,6 +1,6 @@
 let config: object = {};
 
-const setConfig = (cfg?: any) => {
+const setConfig = (cfg?: unknown) => {
   config = Object.assign(config, cfg);
 };
 

src/main.ts

@@ -1,19 +1,17 @@
-import { createApp, Directive } from "vue";
 import App from "./App.vue";
 import router from "./router";
 import { setupStore } from "/@/store";
-
+import { createApp, Directive } from "vue";
-import { useElementPlus } from "../src/plugins/element-plus";
-import { useTable } from "../src/plugins/vxe-table";
 import { usI18n } from "../src/plugins/i18n";
+import { useTable } from "../src/plugins/vxe-table";
+import { useElementPlus } from "../src/plugins/element-plus";
 
+import "animate.css";
 // 导入公共样式
 import "./style/index.scss";
 // 导入字体图标
 import "./assets/iconfont/iconfont.js";
 import "./assets/iconfont/iconfont.css";
-import "animate.css";
-
 import "v-contextmenu/dist/themes/default.css";
 
 import { setConfig, getConfig } from "./config";
@@ -25,7 +23,7 @@ app.config.globalProperties.$config = getConfig();
 
 // 响应式storage
 import Storage from "responsive-storage";
-
+// @ts-ignore
 app.use(Storage, {
   // 默认显示首页tag
   routesInStorage: {
@@ -58,7 +56,7 @@ Object.keys(directives).forEach(key => {
 });
 
 // 获取项目动态全局配置
-export const getServerConfig = async (): Promise<any> => {
+export const getServerConfig = async (): Promise<undefined> => {
   return axios({
     baseURL: "",
     method: "get",
@@ -87,10 +85,7 @@ export const getServerConfig = async (): Promise<any> => {
 
 getServerConfig().then(async () => {
   setupStore(app);
-
   app.use(router).use(useElementPlus).use(useTable).use(usI18n);
-
   await router.isReady();
-
   app.mount("#app");
 });

src/plugins/i18n/config.ts

@@ -7,6 +7,7 @@ import enVxeTable from "vxe-table/lib/locale/lang/en-US";
 import enLocale from "element-plus/lib/locale/lang/en";
 import zhLocale from "element-plus/lib/locale/lang/zh-cn";
 
+// 导航菜单配置
 export const menusConfig = {
   zh: {
     message: {

src/plugins/vxe-table/index.ts

@@ -1,7 +1,7 @@
+import "xe-utils";
 import { App } from "vue";
 import { i18n } from "../i18n/index";
 import "font-awesome/css/font-awesome.css";
-import "xe-utils";
 import {
   // 核心
   VXETable,
@@ -62,6 +62,7 @@ VXETable.setup({
     clearable: true
   },
   // 对组件内置的提示语进行国际化翻译
+  // @ts-ignore
   i18n: (key, args) => i18n.global.t(key, args),
   // 可选，对参数中的列头、校验提示..等进行自动翻译（只对支持国际化的有效）
   translate(key, args) {

src/router/index.ts

@@ -1,5 +1,11 @@
-import { createRouter, createWebHashHistory, Router } from "vue-router";
+import {
+  createRouter,
+  createWebHashHistory,
+  Router,
+  RouteComponent
+} from "vue-router";
 
+import Layout from "/@/layout/index.vue";
 import homeRouter from "./modules/home";
 import flowChartRouter from "./modules/flowchart";
 import editorRouter from "./modules/editor";
@@ -9,17 +15,15 @@ import errorRouter from "./modules/error";
 import externalLink from "./modules/externalLink";
 import remainingRouter from "./modules/remaining"; //静态路由
 
-import { storageSession } from "../utils/storage";
 import { i18n } from "/@/plugins/i18n";
+import { getAsyncRoutes } from "/@/api/routes";
+import { storageSession } from "../utils/storage";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 
-import { getAsyncRoutes } from "/@/api/routes";
-
-import Layout from "/@/layout/index.vue";
 // https://cn.vitejs.dev/guide/features.html#glob-import
 const modulesRoutes = import.meta.glob("/src/views/*/*/*.vue");
 
-const constantRoutes: Array<any> = [
+const constantRoutes: Array<RouteComponent> = [
   homeRouter,
   flowChartRouter,
   editorRouter,
@@ -125,8 +129,10 @@ const whiteList = ["/login", "/register"];
 router.beforeEach((to, _from, next) => {
   const name = storageSession.getItem("info");
   NProgress.start();
+  // @ts-ignore
   const { t } = i18n.global;
-  to.meta.title ? (document.title = t(to.meta.title)) : ""; // 动态title
+  // @ts-ignore
+  to.meta.title ? (document.title = t(to.meta.title)) : "";
   if (name) {
     if (_from?.name) {
       next();

src/utils/algorithm/index.ts

@@ -10,7 +10,6 @@ class algorithmProxy implements ProxyAlgorithm {
     return Object.keys(val)
       .map(v => {
         return {
-          // @ts-ignore
           ...val[v],
           key: v
         };

src/utils/http/config.ts

@@ -5,7 +5,8 @@ import { excludeProps } from "./utils";
  */
 export const defaultConfig: AxiosRequestConfig = {
   baseURL: "",
-  timeout: 10000, //10秒超时
+  //10秒超时
+  timeout: 10000,
   headers: {
     Accept: "application/json, text/plain, */*",
     "Content-Type": "application/json",

src/utils/operate/index.ts

@@ -1,8 +1,12 @@
-export const hasClass = (ele: Element, cls: string): any => {
+export const hasClass = (ele: RefType<any>, cls: string): any => {
   return !!ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
 };
 
-export const addClass = (ele: Element, cls: string, extracls?: string): any => {
+export const addClass = (
+  ele: RefType<any>,
+  cls: string,
+  extracls?: string
+): any => {
   if (!hasClass(ele, cls)) ele.className += " " + cls;
   if (extracls) {
     if (!hasClass(ele, extracls)) ele.className += " " + extracls;
@@ -10,7 +14,7 @@ export const addClass = (ele: Element, cls: string, extracls?: string): any => {
 };
 
 export const removeClass = (
-  ele: Element,
+  ele: RefType<any>,
   cls: string,
   extracls?: string
 ): any => {

src/utils/progress/index.ts

@@ -2,11 +2,16 @@ import NProgress from "nprogress";
 import "nprogress/nprogress.css";
 
 NProgress.configure({
-  easing: "ease", // 动画方式
+  // 动画方式
-  speed: 500, // 递增进度条的速度
+  easing: "ease",
-  showSpinner: true, // 是否显示加载ico
+  // 递增进度条的速度
-  trickleSpeed: 200, // 自动递增间隔
+  speed: 500,
-  minimum: 0.3 // 初始化时的最小百分比
+  // 是否显示加载ico
+  showSpinner: true,
+  // 自动递增间隔
+  trickleSpeed: 200,
+  // 初始化时的最小百分比
+  minimum: 0.3
 });
 
 export default NProgress;

src/views/components/cropping/index.vue

@@ -9,11 +9,13 @@ let cropperImg = ref<string>("");
 
 const onCropper = (): void => {
   nextTick(() => {
+    // @ts-expect-error
     instance.refs.refCropper.cropper.getCroppedCanvas().toBlob(blob => {
       let fileReader: FileReader = new FileReader();
       fileReader.onloadend = (e: ProgressEvent) => {
         // @ts-ignore
         cropperImg.value = e.target.result;
+        // @ts-expect-error
         info.value = instance.refs.refCropper.cropper.getData();
       };
       fileReader.readAsDataURL(blob);

tsconfig.json

@@ -24,7 +24,7 @@
       "/#/*": ["types/*"]
     },
     "types": ["node", "vite/client"],
-    "typeRoots": ["./node_modules/@types/", "./types", "./vue-types"]
+    "typeRoots": ["./node_modules/@types/", "./types"]
   },
   "include": [
     "src/**/*.ts",