refactor: use setup refactor

.eslintrc.js

@@ -11,6 +11,20 @@ module.exports = {
     $shallowRef: "readonly",
     $computed: "readonly",
 
+    // index.d.ts
+    // global.d.ts
+    Fn: "readonly",
+    PromiseFn: "readonly",
+    RefType: "readonly",
+    LabelValueOptions: "readonly",
+    EmitType: "readonly",
+    TargetContext: "readonly",
+    ComponentElRef: "readonly",
+    ComponentRef: "readonly",
+    ElRef: "readonly",
+    global: "readonly",
+    ForDataType: "readonly",
+
     // script setup
     defineProps: "readonly",
     defineEmits: "readonly",

package.json

@@ -8,7 +8,7 @@
     "build": "rimraf dist && cross-env vite build",
     "preview": "vite preview",
     "preview:build": "yarn build && vite preview",
-    "clean:cache": "rm -rf node_modules && rm -rf .eslintcache && yarn cache clean && yarn install",
+    "clean:cache": "rm -rf node_modules && rm -rf .eslintcache && yarn cache clean && yarn",
     "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
     "lint:prettier": "prettier --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
     "lint:stylelint": "stylelint --cache --fix \"**/*.{vue,css,scss,postcss,less}\" --cache --cache-location node_modules/.cache/stylelint/",
@@ -21,7 +21,7 @@
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@logicflow/core": "^0.4.6",
     "@logicflow/extension": "^0.4.6",
-    "@vueuse/core": "^6.0.0",
+    "@vueuse/core": "^6.4.1",
     "animate.css": "^4.1.1",
     "await-to-js": "^3.0.0",
     "axios": "^0.21.1",
@@ -43,11 +43,11 @@
     "responsive-storage": "^1.0.9",
     "sortablejs": "1.13.0",
     "v-contextmenu": "^3.0.0",
-    "vue": "^3.2.11",
+    "vue": "^3.2.12",
     "vue-i18n": "^9.2.0-beta.3",
     "vue-json-pretty": "^2.0.2",
     "vue-router": "^4.0.11",
-    "vue-types": "^4.0.3",
+    "vue-types": "^4.1.0",
     "vuedraggable": "^4.1.0",
     "vxe-table": "^4.0.27",
     "wangeditor": "^4.7.7",
@@ -66,7 +66,7 @@
     "@typescript-eslint/parser": "^4.31.0",
     "@vitejs/plugin-vue": "^1.6.0",
     "@vitejs/plugin-vue-jsx": "^1.1.7",
-    "@vue/compiler-sfc": "^3.2.11",
+    "@vue/compiler-sfc": "^3.2.12",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
     "autoprefixer": "^10.2.4",

src/components/ReBreadCrumb/src/index.vue

@@ -1,3 +1,52 @@
+<script setup lang="ts">
+import { ref, watch, Ref } from "vue";
+import { useRoute, useRouter, RouteLocationMatched } from "vue-router";
+
+const levelList: Ref<RouteLocationMatched[]> = ref([]);
+const route = useRoute();
+const router = useRouter();
+
+const isDashboard = (route: RouteLocationMatched): boolean | string => {
+  const name = route && (route.name as string);
+  if (!name) {
+    return false;
+  }
+  return name.trim().toLocaleLowerCase() === "welcome".toLocaleLowerCase();
+};
+
+const getBreadcrumb = (): void => {
+  let matched = route.matched.filter(item => item.meta && item.meta.title);
+  const first = matched[0];
+  if (!isDashboard(first)) {
+    matched = [
+      {
+        path: "/welcome",
+        meta: { title: "message.hshome" }
+      } as unknown as RouteLocationMatched
+    ].concat(matched);
+  }
+  levelList.value = matched.filter(
+    item => item.meta && item.meta.title && item.meta.breadcrumb !== false
+  );
+};
+
+getBreadcrumb();
+
+watch(
+  () => route.path,
+  () => getBreadcrumb()
+);
+
+const handleLink = (item: RouteLocationMatched): any => {
+  const { redirect, path } = item;
+  if (redirect) {
+    router.push(redirect.toString());
+    return;
+  }
+  router.push(path);
+};
+</script>
+
 <template>
   <el-breadcrumb class="app-breadcrumb" separator="/">
     <transition-group appear name="breadcrumb">
@@ -15,62 +64,6 @@
   </el-breadcrumb>
 </template>
 
-<script lang="ts">
-import { ref, defineComponent, watch, Ref } from "vue";
-import { useRoute, useRouter, RouteLocationMatched } from "vue-router";
-
-export default defineComponent({
-  name: "ReBreadCrumb",
-  setup() {
-    const levelList: Ref<RouteLocationMatched[]> = ref([]);
-    const route = useRoute();
-    const router = useRouter();
-
-    const isDashboard = (route: RouteLocationMatched): boolean | string => {
-      const name = route && (route.name as string);
-      if (!name) {
-        return false;
-      }
-      return name.trim().toLocaleLowerCase() === "welcome".toLocaleLowerCase();
-    };
-
-    const getBreadcrumb = (): void => {
-      let matched = route.matched.filter(item => item.meta && item.meta.title);
-      const first = matched[0];
-      if (!isDashboard(first)) {
-        matched = [
-          {
-            path: "/welcome",
-            meta: { title: "message.hshome" }
-          } as unknown as RouteLocationMatched
-        ].concat(matched);
-      }
-      levelList.value = matched.filter(
-        item => item.meta && item.meta.title && item.meta.breadcrumb !== false
-      );
-    };
-
-    getBreadcrumb();
-
-    watch(
-      () => route.path,
-      () => getBreadcrumb()
-    );
-
-    const handleLink = (item: RouteLocationMatched): any => {
-      const { redirect, path } = item;
-      if (redirect) {
-        router.push(redirect.toString());
-        return;
-      }
-      router.push(path);
-    };
-
-    return { levelList, handleLink };
-  }
-});
-</script>
-
 <style lang="scss" scoped>
 .app-breadcrumb.el-breadcrumb {
   display: inline-block;

src/components/ReFlop/src/index.vue

@@ -1,60 +1,29 @@
-<template>
+<script setup lang="ts">
-  <div class="flip-clock">
-    <flippers ref="flipperHour1" />
-    <flippers ref="flipperHour2" />
-    <em>:</em>
-    <flippers ref="flipperMinute1" />
-    <flippers ref="flipperMinute2" />
-    <em>:</em>
-    <flippers ref="flipperSecond1" />
-    <flippers ref="flipperSecond2" />
-  </div>
-</template>
-
-<script lang="ts">
 import { ref, unref, nextTick, onUnmounted } from "vue";
+import { templateRef } from "@vueuse/core";
 import flippers from "./Filpper";
 
-import { templateRef } from "@vueuse/core";
+let timer = ref(null);
-export default {
+let flipObjs = ref([]);
-  name: "Flop",
-  components: {
-    flippers
-  },
-  setup() {
-    let timer = ref(null);
-    let flipObjs = ref([]);
 
-    const flipperHour1 = templateRef<HTMLElement | null>("flipperHour1", null);
+const flipperHour1 = templateRef<HTMLElement | null>("flipperHour1", null);
-    const flipperHour2 = templateRef<HTMLElement | null>("flipperHour2", null);
+const flipperHour2 = templateRef<HTMLElement | null>("flipperHour2", null);
-    const flipperMinute1 = templateRef<HTMLElement | null>(
+const flipperMinute1 = templateRef<HTMLElement | null>("flipperMinute1", null);
-      "flipperMinute1",
+const flipperMinute2 = templateRef<HTMLElement | null>("flipperMinute2", null);
-      null
+const flipperSecond1 = templateRef<HTMLElement | null>("flipperSecond1", null);
-    );
+const flipperSecond2 = templateRef<HTMLElement | null>("flipperSecond2", null);
-    const flipperMinute2 = templateRef<HTMLElement | null>(
-      "flipperMinute2",
-      null
-    );
-    const flipperSecond1 = templateRef<HTMLElement | null>(
-      "flipperSecond1",
-      null
-    );
-    const flipperSecond2 = templateRef<HTMLElement | null>(
-      "flipperSecond2",
-      null
-    );
 
-    // 初始化数字
+// 初始化数字
-    const init = () => {
+const init = () => {
   let now = new Date();
   let nowTimeStr = formatDate(new Date(now.getTime()), "hhiiss");
   for (let i = 0; i < flipObjs.value.length; i++) {
     flipObjs?.value[i]?.setFront(nowTimeStr[i]);
   }
-    };
+};
 
-    // 开始计时
+// 开始计时
-    const run = () => {
+const run = () => {
   timer.value = setInterval(() => {
     // 获取当前时间
     let now = new Date();
@@ -67,10 +36,10 @@ export default {
       flipObjs?.value[i]?.flipDown(nowTimeStr[i], nextTimeStr[i]);
     }
   }, 1000);
-    };
+};
 
-    // 正则格式化日期
+// 正则格式化日期
-    const formatDate = (date: Date, dateFormat: string) => {
+const formatDate = (date: Date, dateFormat: string) => {
   /* 单独格式化年份，根据y的字符数量输出年份
      * 例如：yyyy => 2019
             yy => 19
@@ -106,14 +75,14 @@ export default {
     }
   }
   return dateFormat;
-    };
+};
 
-    // 日期时间补零
+// 日期时间补零
-    const padLeftZero = (str: string | any[]) => {
+const padLeftZero = (str: string | any[]) => {
   return ("00" + str).substr(str.length);
-    };
+};
 
-    nextTick(() => {
+nextTick(() => {
   flipObjs.value = [
     unref(flipperHour1),
     unref(flipperHour2),
@@ -125,33 +94,29 @@ export default {
 
   init();
   run();
-    });
+});
 
-    onUnmounted(() => {
+onUnmounted(() => {
   if (timer.value) {
     clearInterval(timer.value);
     timer.value = null;
   }
-    });
+});
-
-    return {
-      timer,
-      flipObjs,
-      init,
-      run,
-      formatDate,
-      padLeftZero,
-      flipperHour1,
-      flipperHour2,
-      flipperMinute1,
-      flipperMinute2,
-      flipperSecond1,
-      flipperSecond2
-    };
-  }
-};
 </script>
 
+<template>
+  <div class="flip-clock">
+    <flippers ref="flipperHour1" />
+    <flippers ref="flipperHour2" />
+    <em>:</em>
+    <flippers ref="flipperMinute1" />
+    <flippers ref="flipperMinute2" />
+    <em>:</em>
+    <flippers ref="flipperSecond1" />
+    <flippers ref="flipperSecond2" />
+  </div>
+</template>
+
 <style>
 .flip-clock .m-flipper {
   margin: 0 3px;

src/components/ReFlowChart/src/Control.vue

@@ -1,54 +1,26 @@
-<template>
+<script setup lang="ts">
-  <div class="control-container">
+import { ref, unref, onMounted } from "vue";
-    <!-- 功能按钮 -->
-    <ul>
-      <li
-        v-for="(item, key) in titleLists"
-        :key="key"
-        :title="item.text"
-        :style="{ background: focusIndex === key ? '#ccc' : '' }"
-        @mouseenter.prevent="onEnter(key)"
-        @mouseleave.prevent="focusIndex = -1"
-      >
-        <button
-          :ref="'controlButton' + key"
-          :disabled="item.disabled"
-          :style="{
-            cursor: item.disabled === false ? 'pointer' : 'not-allowed'
-          }"
-          @click="onControl(item, key)"
-        >
-          <span :class="'iconfont ' + item.icon"></span>
-          <p>{{ item.text }}</p>
-        </button>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref, unref, onMounted } from "vue";
 import { templateRef } from "@vueuse/core";
+import { LogicFlow } from "@logicflow/core";
 
-export default defineComponent({
+interface Props {
-  name: "Control",
+  lf: LogicFlow;
-  props: {
+  catTurboData?: boolean;
-    lf: null,
+}
-    catTurboData: Boolean
-  },
-  emits: ["catData"],
-  setup(props, { emit }) {
-    const controlButton3 = templateRef<HTMLElement | any>(
-      "controlButton3",
-      null
-    );
-    const controlButton4 = templateRef<HTMLElement | any>(
-      "controlButton4",
-      null
-    );
 
-    let focusIndex = ref(-1);
+const props = withDefaults(defineProps<Props>(), {
-    let titleLists = ref([
+  lf: null
+});
+
+const emit = defineEmits<{
+  (e: "catData"): void;
+}>();
+
+const controlButton3 = templateRef<HTMLElement | any>("controlButton3", null);
+const controlButton4 = templateRef<HTMLElement | any>("controlButton4", null);
+
+let focusIndex = ref<Number>(-1);
+let titleLists = ref([
   {
     icon: "icon-zoom-out-hs",
     text: "缩小",
@@ -84,9 +56,9 @@ export default defineComponent({
     text: "查看数据",
     disabled: false
   }
-    ]);
+]);
 
-    const onControl = (item, key) => {
+const onControl = (item, key) => {
   ["zoom", "zoom", "resetZoom", "undo", "redo", "getSnapshot"].forEach(
     (v, i) => {
       let domControl = props.lf;
@@ -101,31 +73,48 @@ export default defineComponent({
       }
     }
   );
-    };
+};
 
-    const onEnter = key => {
+const onEnter = key => {
   focusIndex.value = key;
-    };
+};
 
-    onMounted(() => {
+onMounted(() => {
   props.lf.on("history:change", ({ data: { undoAble, redoAble } }) => {
-        unref(titleLists)[3].disabled = unref(controlButton3).disabled =
+    unref(titleLists)[3].disabled = unref(controlButton3).disabled = !undoAble;
-          !undoAble;
+    unref(titleLists)[4].disabled = unref(controlButton4).disabled = !redoAble;
-        unref(titleLists)[4].disabled = unref(controlButton4).disabled =
-          !redoAble;
   });
-    });
-
-    return {
-      focusIndex,
-      titleLists,
-      onControl,
-      onEnter
-    };
-  }
 });
 </script>
 
+<template>
+  <div class="control-container">
+    <!-- 功能按钮 -->
+    <ul>
+      <li
+        v-for="(item, key) in titleLists"
+        :key="key"
+        :title="item.text"
+        :style="{ background: focusIndex === key ? '#ccc' : '' }"
+        @mouseenter.prevent="onEnter(key)"
+        @mouseleave.prevent="focusIndex = -1"
+      >
+        <button
+          :ref="'controlButton' + key"
+          :disabled="item.disabled"
+          :style="{
+            cursor: item.disabled === false ? 'pointer' : 'not-allowed'
+          }"
+          @click="onControl(item, key)"
+        >
+          <span :class="'iconfont ' + item.icon"></span>
+          <p>{{ item.text }}</p>
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
+
 <style scoped>
 @import "./assets/iconfont/iconfont.css";
 

src/components/ReFlowChart/src/DataDialog.vue

@@ -1,23 +1,17 @@
+<script setup lang="ts">
+import VueJsonPretty from "vue-json-pretty";
+import "vue-json-pretty/lib/styles.css";
+
+const props = defineProps({
+  graphData: Object
+});
+</script>
+
 <template>
   <vue-json-pretty
     :path="'res'"
     :deep="3"
     :showLength="true"
-    :data="graphData"
+    :data="props.graphData"
   ></vue-json-pretty>
 </template>
-
-<script lang="ts">
-import VueJsonPretty from "vue-json-pretty";
-import "vue-json-pretty/lib/styles.css";
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "DataDialog",
-  props: {
-    graphData: Object
-  },
-  components: {
-    VueJsonPretty
-  }
-});
-</script>

src/components/ReFlowChart/src/NodePanel.vue

@@ -1,9 +1,36 @@
+<script setup lang="ts">
+import { ref, unref } from "vue";
+import { LogicFlow } from "@logicflow/core";
+
+interface Props {
+  lf: LogicFlow;
+  nodeList: ForDataType<undefined>;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  lf: null,
+  nodeList: null
+});
+
+let properties = ref({
+  a: "efrwe",
+  b: "wewe"
+});
+
+const nodeDragNode = item => {
+  props.lf.dnd.startDrag({
+    type: item.type,
+    properties: unref(properties)
+  });
+};
+</script>
+
 <template>
   <!-- 左侧bpmn元素选择器 -->
   <div class="node-panel">
     <div
       class="node-item"
-      v-for="item in nodeList"
+      v-for="item in props.nodeList"
       :key="item.text"
       @mousedown="nodeDragNode(item)"
     >
@@ -18,43 +45,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, unref } from "vue";
-export default defineComponent({
-  name: "NodePanel",
-  props: {
-    lf: Object,
-    nodeList: Array
-  },
-  setup(props) {
-    let node = ref({
-      type: "rect",
-      property: {
-        a: "efrwe",
-        b: "wewe"
-      }
-    });
-    let properties = ref({
-      a: "efrwe",
-      b: "wewe"
-    });
-
-    const nodeDragNode = item => {
-      props.lf.dnd.startDrag({
-        type: item.type,
-        properties: unref(properties)
-      });
-    };
-
-    return {
-      node,
-      properties,
-      nodeDragNode
-    };
-  }
-});
-</script>
-
 <style scoped>
 .node-panel {
   position: absolute;

src/components/ReHamBurger/src/index.vue

@@ -1,8 +1,26 @@
+<script setup lang="ts">
+export interface Props {
+  isActive: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isActive: false
+});
+
+const emit = defineEmits<{
+  (e: "toggleClick"): void;
+}>();
+
+const toggleClick = () => {
+  emit("toggleClick");
+};
+</script>
+
 <template>
-  <div style="padding: 0 15px" @click="toggleClick">
+  <div :class="classes.container" @click="toggleClick">
     <svg
-      :class="{ 'is-active': isActive }"
       class="hamburger"
+      :class="props.isActive ? 'is-active' : ''"
       viewBox="0 0 1024 1024"
       xmlns="http://www.w3.org/2000/svg"
       width="64"
@@ -15,26 +33,11 @@
   </div>
 </template>
 
-<script>
+<style module="classes" scoped>
-import { defineComponent } from "vue";
+.container {
-export default defineComponent({
+  padding: 0 15px;
-  name: "HamBurger",
+}
-  props: {
+</style>
-    isActive: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ["toggleClick"],
-  setup(props, ctx) {
-    const toggleClick = () => {
-      ctx.emit("toggleClick");
-    };
-
-    return { toggleClick };
-  }
-});
-</script>
 
 <style scoped>
 .hamburger {
@@ -44,7 +47,7 @@ export default defineComponent({
   height: 20px;
 }
 
-.hamburger.is-active {
+.is-active {
   transform: rotate(180deg);
 }
 </style>

src/components/ReInfo/index.vue

@@ -1,3 +1,97 @@
+<script setup lang="ts">
+import { ref, PropType, getCurrentInstance, watch, nextTick, toRef } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { initRouter } from "/@/router";
+import { storageSession } from "/@/utils/storage";
+
+export interface ContextProps {
+  userName: string;
+  passWord: string;
+  verify: number | null;
+  svg: any;
+  telephone?: number;
+  dynamicText?: string;
+}
+
+const props = defineProps({
+  ruleForm: {
+    type: Object as PropType<ContextProps>
+  }
+});
+
+const emit = defineEmits<{
+  (e: "onBehavior", evt: Object): void;
+  (e: "refreshVerify"): void;
+}>();
+
+const instance = getCurrentInstance();
+
+const model = toRef(props, "ruleForm");
+let tips = ref<string>("注册");
+let tipsFalse = ref<string>("登录");
+
+const route = useRoute();
+const router = useRouter();
+
+watch(
+  route,
+  async ({ path }): Promise<void> => {
+    await nextTick();
+    path.includes("register")
+      ? (tips.value = "登录") && (tipsFalse.value = "注册")
+      : (tips.value = "注册") && (tipsFalse.value = "登录");
+  },
+  { immediate: true }
+);
+
+const rules: Object = ref({
+  userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
+  passWord: [
+    { required: true, message: "请输入密码", trigger: "blur" },
+    { min: 6, message: "密码长度必须不小于6位", trigger: "blur" }
+  ],
+  verify: [
+    { required: true, message: "请输入验证码", trigger: "blur" },
+    { type: "number", message: "验证码必须是数字类型", trigger: "blur" }
+  ]
+});
+
+// 点击登录或注册
+const onBehavior = (evt: Object): void => {
+  instance.refs.ruleForm.validate((valid: boolean) => {
+    if (valid) {
+      emit("onBehavior", evt);
+    } else {
+      return false;
+    }
+  });
+};
+
+// 刷新验证码
+const refreshVerify = (): void => {
+  emit("refreshVerify");
+};
+
+// 表单重置
+const resetForm = (): void => {
+  instance.refs.ruleForm.resetFields();
+};
+
+// 登录、注册页面切换
+const changPage = (): void => {
+  tips.value === "注册" ? router.push("/register") : router.push("/login");
+};
+
+const noSecret = (): void => {
+  storageSession.setItem("info", {
+    username: "admin",
+    accessToken: "eyJhbGciOiJIUzUxMiJ9.test"
+  });
+  initRouter("admin").then(() => {});
+  router.push("/");
+};
+</script>
+
 <template>
   <div class="info">
     <el-form :model="model" :rules="rules" ref="ruleForm" class="rule-form">
@@ -47,123 +141,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import {
-  ref,
-  defineComponent,
-  PropType,
-  getCurrentInstance,
-  watch,
-  nextTick,
-  toRef
-} from "vue";
-import { storageSession } from "/@/utils/storage";
-
-export interface ContextProps {
-  userName: string;
-  passWord: string;
-  verify: number | null;
-  svg: any;
-  telephone?: number;
-  dynamicText?: string;
-}
-
-import { useRouter, useRoute } from "vue-router";
-
-import { initRouter } from "/@/router";
-
-export default defineComponent({
-  name: "Info",
-  props: {
-    ruleForm: {
-      type: Object as PropType<ContextProps>,
-      require: true
-    }
-  },
-  emits: ["onBehavior", "refreshVerify"],
-  setup(props, ctx) {
-    const instance = getCurrentInstance();
-
-    const model = toRef(props, "ruleForm");
-    let tips = ref("注册");
-    let tipsFalse = ref("登录");
-
-    const route = useRoute();
-    const router = useRouter();
-
-    watch(
-      route,
-      async ({ path }): Promise<void> => {
-        await nextTick();
-        path.includes("register")
-          ? (tips.value = "登录") && (tipsFalse.value = "注册")
-          : (tips.value = "注册") && (tipsFalse.value = "登录");
-      },
-      { immediate: true }
-    );
-
-    const rules: Object = ref({
-      userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
-      passWord: [
-        { required: true, message: "请输入密码", trigger: "blur" },
-        { min: 6, message: "密码长度必须不小于6位", trigger: "blur" }
-      ],
-      verify: [
-        { required: true, message: "请输入验证码", trigger: "blur" },
-        { type: "number", message: "验证码必须是数字类型", trigger: "blur" }
-      ]
-    });
-
-    // 点击登录或注册
-    const onBehavior = (evt: Object): void => {
-      instance.refs.ruleForm.validate((valid: boolean) => {
-        if (valid) {
-          ctx.emit("onBehavior", evt);
-        } else {
-          return false;
-        }
-      });
-    };
-
-    // 刷新验证码
-    const refreshVerify = (): void => {
-      ctx.emit("refreshVerify");
-    };
-
-    // 表单重置
-    const resetForm = (): void => {
-      instance.refs.ruleForm.resetFields();
-    };
-
-    // 登录、注册页面切换
-    const changPage = (): void => {
-      tips.value === "注册" ? router.push("/register") : router.push("/login");
-    };
-
-    const noSecret = (): void => {
-      storageSession.setItem("info", {
-        username: "admin",
-        accessToken: "eyJhbGciOiJIUzUxMiJ9.test"
-      });
-      initRouter("admin").then(() => {});
-      router.push("/");
-    };
-
-    return {
-      model,
-      rules,
-      tips,
-      tipsFalse,
-      resetForm,
-      onBehavior,
-      refreshVerify,
-      changPage,
-      noSecret
-    };
-  }
-});
-</script>
-
 <style lang="scss" scoped>
 .info {
   width: 30vw;

src/components/ReMap/index.ts

@@ -1,6 +1,5 @@
 import { App } from "vue";
 import amap from "./src/Amap.vue";
-import baiduMap from "./src/BaiduMap.vue";
 
 export const Amap = Object.assign(amap, {
   install(app: App) {
@@ -8,13 +7,6 @@ export const Amap = Object.assign(amap, {
   }
 });
 
-export const BaiduMap = Object.assign(baiduMap, {
-  install(app: App) {
-    app.component(baiduMap.name, baiduMap);
-  }
-});
-
 export default {
-  Amap,
+  Amap
-  BaiduMap
 };

src/components/ReMap/src/Amap.vue

@@ -1,45 +1,17 @@
-<template>
+<script setup lang="ts">
-  <div
-    id="mapview"
-    ref="mapview"
-    v-loading="loading"
-    element-loading-text="地图加载中"
-    element-loading-spinner="el-icon-loading"
-    element-loading-background="rgba(0, 0, 0, 0.8)"
-  ></div>
-</template>
-
-<script lang="ts">
 import AMapLoader from "@amap/amap-jsapi-loader";
-import {
+import { reactive, getCurrentInstance, onBeforeMount, onUnmounted } from "vue";
-  reactive,
-  toRefs,
-  defineComponent,
-  onBeforeMount,
-  getCurrentInstance
-} from "vue";
-
 import { mapJson } from "/@/api/mock";
 import { deviceDetection } from "/@/utils/deviceDetection";
-
 import greenCar from "/@/assets/green.png";
 
-let MarkerCluster;
-
 export interface MapConfigureInter {
-  // eslint-disable-next-line no-undef
   on: Fn;
-  // eslint-disable-next-line no-undef
   destroy?: Fn;
-  // eslint-disable-next-line no-undef
   clearEvents?: Fn;
-  // eslint-disable-next-line no-undef
   addControl?: Fn;
-  // eslint-disable-next-line no-undef
   setCenter?: Fn;
-  // eslint-disable-next-line no-undef
   setZoom?: Fn;
-  // eslint-disable-next-line no-undef
   plugin?: Fn;
 }
 
@@ -47,36 +19,27 @@ export interface mapInter {
   loading: boolean;
 }
 
-export default defineComponent({
+let MarkerCluster;
-  name: "Amap",
+let map: MapConfigureInter;
-  setup() {
-    const instance = getCurrentInstance();
-    let map: MapConfigureInter;
 
-    const mapSet: mapInter = reactive({
+const instance = getCurrentInstance();
+
+const mapSet: mapInter = reactive({
   loading: deviceDetection() ? false : true
-    });
+});
 
-    // 地图创建完成(动画关闭)
+// 地图创建完成(动画关闭)
-    const complete = (): void => {
+const complete = (): void => {
   if (map) {
     map.on("complete", () => {
       mapSet.loading = false;
     });
   }
-    };
+};
 
-    // 销毁地图实例
+onBeforeMount(() => {
-    const destroyMap = (): void => {
-      if (map) {
-        map.destroy() && map.clearEvents("click");
-      }
-    };
-
-    onBeforeMount(() => {
   if (!instance) return;
-      let { MapConfigure } =
+  let { MapConfigure } = instance.appContext.config.globalProperties.$config;
-        instance.appContext.config.globalProperties.$config;
   let { options } = MapConfigure;
 
   AMapLoader.load({
@@ -100,7 +63,8 @@ export default defineComponent({
       });
 
       MarkerCluster = new AMap.MarkerCluster(map, [], {
-            gridSize: 80, // 聚合网格像素大小
+        // 聚合网格像素大小
+        gridSize: 80,
         maxZoom: 14,
         renderMarker(ctx) {
           let { marker, data } = ctx;
@@ -112,8 +76,10 @@ export default defineComponent({
             marker.setContent(content);
             marker.setLabel({
               direction: "bottom",
-                  offset: new AMap.Pixel(-4, 0), //设置文本标注偏移量
+              //设置文本标注偏移量
-                  content: `<div> ${plateNumber}(${driver})</div>` //设置文本标注内容
+              offset: new AMap.Pixel(-4, 0),
+              //设置文本标注内容
+              content: `<div> ${plateNumber}(${driver})</div>`
             });
             marker.setOffset(new AMap.Pixel(-18, -10));
             marker.on("click", ({ lnglat }) => {
@@ -145,18 +111,27 @@ export default defineComponent({
       mapSet.loading = false;
       throw "地图加载失败，请重新加载";
     });
-    });
+});
 
-    return {
+onUnmounted(() => {
-      ...toRefs(mapSet),
+  if (map) {
-      complete,
+    // 销毁地图实例
-      destroyMap,
+    map.destroy() && map.clearEvents("click");
-      greenCar
-    };
   }
 });
 </script>
 
+<template>
+  <div
+    id="mapview"
+    ref="mapview"
+    v-loading="mapSet.loading"
+    element-loading-text="地图加载中"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)"
+  ></div>
+</template>
+
 <style lang="scss" scoped>
 #mapview {
   height: 100%;

src/components/ReMap/src/BaiduMap.vue

@@ -1,14 +0,0 @@
-<template>
-  <div></div>
-</template>
-
-<script lang="ts">
-export default {
-  name: "BaiduMap",
-  setup() {
-    return {};
-  }
-};
-</script>
-
-<style scoped></style>

src/components/ReSeamlessScroll/src/index.vue

@@ -1,41 +1,6 @@
-<template>
+<script setup lang="ts">
-  <div :ref="'wrap' + classOption['key']">
+import { computed, ref, unref, nextTick } from "vue";
-    <div
+import type { CSSProperties, PropType } from "vue";
-      :style="leftSwitch"
-      v-if="navigation"
-      :class="leftSwitchClass"
-      @click="leftSwitchClick"
-    >
-      <slot name="left-switch"></slot>
-    </div>
-    <div
-      :style="rightSwitch"
-      v-if="navigation"
-      :class="rightSwitchClass"
-      @click="rightSwitchClick"
-    >
-      <slot name="right-switch"></slot>
-    </div>
-    <div
-      :ref="'realBox' + classOption['key']"
-      :style="pos"
-      @mouseenter="enter"
-      @mouseleave="leave"
-      @touchstart="touchStart"
-      @touchmove="touchMove"
-      @touchend="touchEnd"
-      @mousewheel="wheel"
-    >
-      <div :ref="'slotList' + classOption['key']" :style="float">
-        <slot></slot>
-      </div>
-      <div v-html="copyHtml" :style="float"></div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, computed, ref, unref, nextTick } from "vue";
 import {
   tryOnMounted,
   tryOnUnmounted,
@@ -46,77 +11,68 @@ import * as utilsMethods from "./utils";
 const { animationFrame, copyObj } = utilsMethods;
 animationFrame();
 
-export default defineComponent({
+const props = defineProps({
-  name: "SeamlessScroll",
-  props: {
   data: {
-      type: Array,
+    type: Array as PropType<unknown>
-      default: () => {
-        return [];
-      }
   },
   classOption: {
-      type: Object,
+    type: Object as PropType<unknown>
-      default: () => {
-        return {};
   }
-    }
+});
-  },
-  emits: ["ScrollEnd"],
-  setup(props, { emit }) {
-    let xPos = ref(0);
-    let yPos = ref(0);
-    let delay = ref(0);
-    let copyHtml = ref("");
-    let height = ref(0);
-    // 外容器宽度
-    let width = ref(0);
-    // 内容实际宽度
-    let realBoxWidth = ref(0);
-    let realBoxHeight = ref(0);
 
-    // single 单步滚动的定时器
+const emit = defineEmits<{
-    let singleWaitTime = null;
+  (e: "scrollEnd"): void;
-    // move动画的animationFrame定时器
+}>();
-    let reqFrame = null;
-    let startPos = null;
-    //记录touchStart时候的posY
-    let startPosY = null;
-    //记录touchStart时候的posX
-    let startPosX = null;
-    // mouseenter mouseleave 控制scrollMove()的开关
-    let isHover = false;
-    let ease = "ease-in";
 
-    // eslint-disable-next-line vue/no-setup-props-destructure
+let xPos = ref<number>(0);
-    let { classOption } = props;
+let yPos = ref<number>(0);
+let delay = ref<number>(0);
+let height = ref<number>(0);
+// 外容器宽度
+let width = ref<number>(0);
+// 内容实际宽度
+let realBoxWidth = ref<number>(0);
+let realBoxHeight = ref<number>(0);
+let copyHtml = ref("");
+// single 单步滚动的定时器
+let singleWaitTime = null;
+// move动画的animationFrame定时器
+let reqFrame = null;
+let startPos = null;
+//记录touchStart时候的posY
+let startPosY = null;
+//记录touchStart时候的posX
+let startPosX = null;
+// mouseenter mouseleave 控制scrollMove()的开关
+let isHover = false;
+let ease = "ease-in";
 
-    if (classOption["key"] === undefined) {
+// eslint-disable-next-line vue/no-setup-props-destructure
+let { classOption } = props;
+
+if (classOption["key"] === undefined) {
   classOption["key"] = 0;
-    }
+}
 
-    const wrap = templateRef<HTMLElement | null>(
+const wrap = templateRef<HTMLElement | null>(`wrap${classOption["key"]}`, null);
-      `wrap${classOption["key"]}`,
+const slotList = templateRef<HTMLElement | null>(
-      null
-    );
-    const slotList = templateRef<HTMLElement | null>(
   `slotList${classOption["key"]}`,
   null
-    );
+);
-    const realBox = templateRef<HTMLElement | null>(
+const realBox = templateRef<HTMLElement | null>(
   `realBox${classOption["key"]}`,
   null
-    );
+);
 
-    let leftSwitchState = computed(() => {
+let leftSwitchState = computed(() => {
   return unref(xPos) < 0;
-    });
+});
 
-    let rightSwitchState = computed(() => {
+let rightSwitchState = computed(() => {
   return Math.abs(unref(xPos)) < unref(realBoxWidth) - unref(width);
-    });
+});
 
-    let defaultOption = computed(() => {
+let defaultOption = computed(() => {
   return {
     //步长
     step: 1,
@@ -143,30 +99,30 @@ export default defineComponent({
     // singleWidth/singleHeight 是否开启rem度量
     isSingleRemUnit: false
   };
-    });
+});
 
-    let options = computed(() => {
+let options = computed(() => {
   // @ts-ignore
   return copyObj({}, unref(defaultOption), classOption);
-    });
+});
 
-    let leftSwitchClass = computed(() => {
+const leftSwitchClass = computed(() => {
   return unref(leftSwitchState) ? "" : unref(options).switchDisabledClass;
-    });
+});
 
-    let rightSwitchClass = computed(() => {
+let rightSwitchClass = computed(() => {
   return unref(rightSwitchState) ? "" : unref(options).switchDisabledClass;
-    });
+});
 
-    let leftSwitch = computed(() => {
+let leftSwitch = computed((): CSSProperties => {
   return {
     position: "absolute",
     margin: `${unref(height) / 2}px 0 0 -${unref(options).switchOffset}px`,
     transform: "translate(-100%,-50%)"
   };
-    });
+});
 
-    let rightSwitch = computed(() => {
+let rightSwitch = computed((): CSSProperties => {
   return {
     position: "absolute",
     margin: `${unref(height) / 2}px 0 0 ${
@@ -174,68 +130,65 @@ export default defineComponent({
     }px`,
     transform: "translateY(-50%)"
   };
-    });
+});
 
-    let isHorizontal = computed(() => {
+let isHorizontal = computed(() => {
   return (
-        unref(options).direction !== "bottom" &&
+    unref(options).direction !== "bottom" && unref(options).direction !== "top"
-        unref(options).direction !== "top"
   );
-    });
+});
 
-    let float = computed(() => {
+let float = computed((): CSSProperties => {
   return unref(isHorizontal)
     ? { float: "left", overflow: "hidden" }
     : { overflow: "hidden" };
-    });
+});
 
-    let pos = computed(() => {
+let pos = computed(() => {
   return {
     transform: `translate(${unref(xPos)}px,${unref(yPos)}px)`,
     transition: `all ${ease} ${unref(delay)}ms`,
     overflow: "hidden"
   };
-    });
+});
 
-    let navigation = computed(() => {
+let navigation = computed(() => {
   return unref(options).navigation;
-    });
+});
 
-    let autoPlay = computed(() => {
+let autoPlay = computed(() => {
   if (unref(navigation)) return false;
   return unref(options).autoPlay;
-    });
+});
 
-    let scrollSwitch = computed(() => {
+let scrollSwitch = computed(() => {
   // 从 props 解构出来的 属性 不再具有相应性.
   return props.data.length >= unref(options).limitMoveNum;
-    });
+});
 
-    let hoverStopSwitch = computed(() => {
+let hoverStopSwitch = computed(() => {
   return unref(options).hoverStop && unref(autoPlay) && unref(scrollSwitch);
-    });
+});
 
-    let canTouchScroll = computed(() => {
+let canTouchScroll = computed(() => {
   return unref(options).openTouch;
-    });
+});
 
-    let baseFontSize = computed(() => {
+let baseFontSize = computed(() => {
   return unref(options).isSingleRemUnit
-        ? parseInt(
+    ? parseInt(window.getComputedStyle(document.documentElement, null).fontSize)
-            window.getComputedStyle(document.documentElement, null).fontSize
-          )
     : 1;
-    });
+});
 
-    let realSingleStopWidth = computed(() => {
+let realSingleStopWidth = computed(() => {
   return unref(options).singleWidth * unref(baseFontSize);
-    });
+});
 
-    let realSingleStopHeight = computed(() => {
+let realSingleStopHeight = computed(() => {
   return unref(options).singleHeight * unref(baseFontSize);
-    });
+});
 
-    let step = computed(() => {
+let step = computed(() => {
   let singleStep;
   let step = unref(options).step;
   if (unref(isHorizontal)) {
@@ -247,16 +200,16 @@ export default defineComponent({
     throw "如果设置了单步滚动，step需是单步大小的约数，否则无法保证单步滚动结束的位置是否准确";
   }
   return step;
-    });
+});
 
-    function reset() {
+function reset() {
   xPos.value = 0;
   yPos.value = 0;
   scrollCancle();
   scrollInitMove();
-    }
+}
 
-    function leftSwitchClick() {
+function leftSwitchClick() {
   if (!unref(leftSwitchState)) return;
   // 小于单步距离
   if (Math.abs(unref(xPos)) < unref(options).switchSingleStep) {
@@ -264,9 +217,9 @@ export default defineComponent({
     return;
   }
   xPos.value += unref(options).switchSingleStep;
-    }
+}
 
-    function rightSwitchClick() {
+function rightSwitchClick() {
   if (!unref(rightSwitchState)) return;
   // 小于单步距离
   if (
@@ -277,13 +230,13 @@ export default defineComponent({
     return;
   }
   xPos.value -= unref(options).switchSingleStep;
-    }
+}
 
-    function scrollCancle() {
+function scrollCancle() {
   cancelAnimationFrame(reqFrame || "");
-    }
+}
 
-    function touchStart(e) {
+function touchStart(e) {
   if (!unref(canTouchScroll)) return;
   let timer;
   //touches数组对象获得屏幕上所有的touch，取第一个touch
@@ -306,9 +259,9 @@ export default defineComponent({
   } else {
     scrollCancle();
   }
-    }
+}
 
-    function touchMove(e) {
+function touchMove(e) {
   //当屏幕有多个touch或者页面被缩放过，就不执行move操作
   if (
     !unref(canTouchScroll) ||
@@ -339,9 +292,9 @@ export default defineComponent({
     // 为横向滑动 && 运动方向为左右
     xPos.value = startPosX + endPos.x;
   }
-    }
+}
 
-    function touchEnd() {
+function touchEnd() {
   if (!unref(canTouchScroll)) return;
   let timer;
   const direction = unref(options).direction;
@@ -362,17 +315,17 @@ export default defineComponent({
     delay.value = 0;
     scrollMove();
   }, unref(delay));
-    }
+}
 
-    function enter() {
+function enter() {
   if (unref(hoverStopSwitch)) scrollStopMove();
-    }
+}
 
-    function leave() {
+function leave() {
   if (unref(hoverStopSwitch)) scrollStartMove();
-    }
+}
 
-    function scrollMove() {
+function scrollMove() {
   // 鼠标移入时拦截scrollMove()
   if (isHover) return;
   //进入move立即先清除动画 防止频繁touchMove导致多动画同时进行
@@ -386,28 +339,28 @@ export default defineComponent({
     if (direction === "top") {
       // 上
       if (Math.abs(unref(yPos)) >= h) {
-            emit("ScrollEnd");
+        emit("scrollEnd");
         yPos.value = 0;
       }
       yPos.value -= step.value;
     } else if (direction === "bottom") {
       // 下
       if (unref(yPos) >= 0) {
-            emit("ScrollEnd");
+        emit("scrollEnd");
         yPos.value = h * -1;
       }
       yPos.value += step.value;
     } else if (direction === "left") {
       // 左
       if (Math.abs(unref(xPos)) >= w) {
-            emit("ScrollEnd");
+        emit("scrollEnd");
         xPos.value = 0;
       }
       xPos.value -= step.value;
     } else if (direction === "right") {
       // 右
       if (unref(xPos) >= 0) {
-            emit("ScrollEnd");
+        emit("scrollEnd");
         xPos.value = w * -1;
       }
       xPos.value += step.value;
@@ -415,10 +368,7 @@ export default defineComponent({
     if (singleWaitTime) clearTimeout(singleWaitTime);
     if (unref(realSingleStopHeight)) {
       //是否启动了单行暂停配置
-          if (
+      if (Math.abs(unref(yPos)) % unref(realSingleStopHeight) < unref(step)) {
-            Math.abs(unref(yPos)) % unref(realSingleStopHeight) <
-            unref(step)
-          ) {
         // 符合条件暂停waitTime
         singleWaitTime = setTimeout(() => {
           scrollMove();
@@ -427,10 +377,7 @@ export default defineComponent({
         scrollMove();
       }
     } else if (unref(realSingleStopWidth)) {
-          if (
+      if (Math.abs(unref(xPos)) % unref(realSingleStopWidth) < unref(step)) {
-            Math.abs(unref(xPos)) % unref(realSingleStopWidth) <
-            unref(step)
-          ) {
         // 符合条件暂停waitTime
         singleWaitTime = setTimeout(() => {
           scrollMove();
@@ -442,9 +389,9 @@ export default defineComponent({
       scrollMove();
     }
   });
-    }
+}
 
-    function scrollInitMove() {
+function scrollInitMove() {
   nextTick(() => {
     const { switchDelay } = unref(options);
     //清空copy
@@ -485,39 +432,24 @@ export default defineComponent({
       yPos.value = xPos.value = 0;
     }
   });
-    }
+}
 
-    function scrollStartMove() {
+function scrollStartMove() {
   //开启scrollMove
   isHover = false;
   scrollMove();
-    }
+}
 
-    function scrollStopMove() {
+function scrollStopMove() {
   //关闭scrollMove
   isHover = true;
   // 防止频频hover进出单步滚动,导致定时器乱掉
   if (singleWaitTime) clearTimeout(singleWaitTime);
   scrollCancle();
-    }
+}
 
-    // watchEffect(() => {
+// 鼠标滚轮事件
-    //   const watchData = data;
+function wheel(e) {
-    //   if (!watchData) return;
-    //   nextTick(() => {
-    //     reset();
-    //   });
-
-    //   const watchAutoPlay = unref(autoPlay);
-    //   if (watchAutoPlay) {
-    //     reset();
-    //   } else {
-    //     scrollStopMove();
-    //   }
-    // });
-
-    // 鼠标滚轮事件
-    function wheel(e) {
   e.preventDefault();
   if (
     unref(options).direction === "left" ||
@@ -527,59 +459,69 @@ export default defineComponent({
   useDebounceFn(() => {
     e.deltaY > 0 ? (yPos.value -= step.value) : (yPos.value += step.value);
   }, 50)();
-    }
+}
 
-    tryOnMounted(() => {
+// watchEffect(() => {
+//   const watchData = data;
+//   if (!watchData) return;
+//   nextTick(() => {
+//     reset();
+//   });
+
+//   const watchAutoPlay = unref(autoPlay);
+//   if (watchAutoPlay) {
+//     reset();
+//   } else {
+//     scrollStopMove();
+//   }
+// });
+
+tryOnMounted(() => {
   scrollInitMove();
-    });
+});
 
-    tryOnUnmounted(() => {
+tryOnUnmounted(() => {
   scrollCancle();
   clearTimeout(singleWaitTime);
-    });
+});
 
-    return {
+defineExpose({
-      xPos,
+  reset
-      yPos,
-      delay,
-      copyHtml,
-      height,
-      width,
-      realBoxWidth,
-      leftSwitchState,
-      rightSwitchState,
-      options,
-      leftSwitchClass,
-      rightSwitchClass,
-      leftSwitch,
-      rightSwitch,
-      isHorizontal,
-      float,
-      pos,
-      navigation,
-      autoPlay,
-      scrollSwitch,
-      hoverStopSwitch,
-      canTouchScroll,
-      baseFontSize,
-      realSingleStopWidth,
-      realSingleStopHeight,
-      step,
-      reset,
-      leftSwitchClick,
-      rightSwitchClick,
-      scrollCancle,
-      touchStart,
-      touchMove,
-      touchEnd,
-      enter,
-      leave,
-      scrollMove,
-      scrollInitMove,
-      scrollStartMove,
-      scrollStopMove,
-      wheel
-    };
-  }
 });
 </script>
+
+<template>
+  <div :ref="'wrap' + classOption['key']">
+    <div
+      :style="leftSwitch"
+      v-if="navigation"
+      :class="leftSwitchClass"
+      @click="leftSwitchClick"
+    >
+      <slot name="left-switch"></slot>
+    </div>
+    <div
+      :style="rightSwitch"
+      v-if="navigation"
+      :class="rightSwitchClass"
+      @click="rightSwitchClick"
+    >
+      <slot name="right-switch"></slot>
+    </div>
+    <div
+      :ref="'realBox' + classOption['key']"
+      :style="pos"
+      @mouseenter="enter"
+      @mouseleave="leave"
+      @touchstart="touchStart"
+      @touchmove="touchMove"
+      @touchend="touchEnd"
+      @mousewheel="wheel"
+    >
+      <div :ref="'slotList' + classOption['key']" :style="float">
+        <slot></slot>
+      </div>
+      <div v-html="copyHtml" :style="float"></div>
+    </div>
+  </div>
+</template>

src/components/ReSeamlessScroll/src/utils.ts

@@ -2,7 +2,7 @@
  * @desc AnimationFrame简单兼容hack
  */
 export const animationFrame = () => {
-  window.cancelAnimationFrame = (function () {
+  window.cancelAnimationFrame = (() => {
     return (
       window.cancelAnimationFrame ||
       window.webkitCancelAnimationFrame ||

tsconfig.json

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

types/global.d.ts

@@ -20,13 +20,14 @@ declare global {
     // Global vue app instance
     __APP__: App<Element>;
     webkitCancelAnimationFrame: (handle: number) => void;
+    mozCancelAnimationFrame: (handle: number) => void;
+    oCancelAnimationFrame: (handle: number) => void;
+    msCancelAnimationFrame: (handle: number) => void;
+
     webkitRequestAnimationFrame: (callback: FrameRequestCallback) => number;
-    mozCancelAnimationFrame: (id?: string) => any;
+    mozRequestAnimationFrame: (callback: FrameRequestCallback) => number;
-    oCancelAnimationFrame: (id?: string) => any;
+    oRequestAnimationFrame: (callback: FrameRequestCallback) => number;
-    msCancelAnimationFrame: (id?: string) => any;
+    msRequestAnimationFrame: (callback: FrameRequestCallback) => number;
-    mozRequestAnimationFrame: (id?: string) => any;
-    oRequestAnimationFrame: (id?: string) => any;
-    msRequestAnimationFrame: (id?: string) => any;
   }
 
   // vue

types/index.d.ts

@@ -25,3 +25,7 @@ declare type ComponentRef<T extends HTMLElement = HTMLDivElement> =
   ComponentElRef<T> | null;
 
 declare type ElRef<T extends HTMLElement = HTMLDivElement> = Nullable<T>;
+
+declare type ForDataType<T> = {
+  [P in T]?: ForDataType<T[P]>;
+};

yarn.lock

@@ -786,6 +786,17 @@
     estree-walker "^2.0.2"
     source-map "^0.6.1"
 
+"@vue/compiler-core@3.2.12":
+  version "3.2.12"
+  resolved "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.12.tgz#23998d6986a45e1ab0424130cc0ad00e33da1101"
+  integrity sha512-IGJ0JmrAaAl5KBBegPAKkoXvsfDFgN/h7K1t/+0MxqpZF1fTDVUOp3tG7q9gWa7fwzGEaIsPhjtT5C3qztdLKg==
+  dependencies:
+    "@babel/parser" "^7.15.0"
+    "@babel/types" "^7.15.0"
+    "@vue/shared" "3.2.12"
+    estree-walker "^2.0.2"
+    source-map "^0.6.1"
+
 "@vue/compiler-dom@3.2.11":
   version "3.2.11"
   resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.11.tgz#d066f8e1f1812b4e881593819ade0fe6d654c776"
@@ -794,7 +805,15 @@
     "@vue/compiler-core" "3.2.11"
     "@vue/shared" "3.2.11"
 
-"@vue/compiler-sfc@^3.0.11", "@vue/compiler-sfc@^3.2.11":
+"@vue/compiler-dom@3.2.12":
+  version "3.2.12"
+  resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.12.tgz#d6ba00114e73adb8b18940c3ff18797cc2b0514f"
+  integrity sha512-MulvKilA2USm8ubPfvXvNY55HVTn+zHERsXeNg437TXrmM4FRCis6zjWW47QZ3ZyxEkCdqOmuiFCtXbpnuthyw==
+  dependencies:
+    "@vue/compiler-core" "3.2.12"
+    "@vue/shared" "3.2.12"
+
+"@vue/compiler-sfc@^3.0.11":
   version "3.2.11"
   resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.11.tgz#628fa12238760d9b9b339ac2e125a759224fadbf"
   integrity sha512-cUIaS8mgJrQ6yucj2AupWAwBRITK3W/a8wCOn9g5fJGtOl8h4APY8vN3lzP8HIJDyEeRF3I8SfRhL+oX97kSnw==
@@ -818,6 +837,30 @@
     postcss-selector-parser "^6.0.4"
     source-map "^0.6.1"
 
+"@vue/compiler-sfc@^3.2.12":
+  version "3.2.12"
+  resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.12.tgz#39555550d96051508753ba934f7260dc5ee5211e"
+  integrity sha512-EjzeMQ7H2ICj+JRw2buSFXTocdCg8e5yWQTlNM/6h/u68sTwMbIfiOJBFEwBhG/wCG7Nb6Nnz888AfHTU3hdrA==
+  dependencies:
+    "@babel/parser" "^7.15.0"
+    "@babel/types" "^7.15.0"
+    "@types/estree" "^0.0.48"
+    "@vue/compiler-core" "3.2.12"
+    "@vue/compiler-dom" "3.2.12"
+    "@vue/compiler-ssr" "3.2.12"
+    "@vue/ref-transform" "3.2.12"
+    "@vue/shared" "3.2.12"
+    consolidate "^0.16.0"
+    estree-walker "^2.0.2"
+    hash-sum "^2.0.0"
+    lru-cache "^5.1.1"
+    magic-string "^0.25.7"
+    merge-source-map "^1.1.0"
+    postcss "^8.1.10"
+    postcss-modules "^4.0.0"
+    postcss-selector-parser "^6.0.4"
+    source-map "^0.6.1"
+
 "@vue/compiler-ssr@3.2.11":
   version "3.2.11"
   resolved "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.11.tgz#702cef3429651645bdbe09fe5962803b5a621abb"
@@ -826,6 +869,14 @@
     "@vue/compiler-dom" "3.2.11"
     "@vue/shared" "3.2.11"
 
+"@vue/compiler-ssr@3.2.12":
+  version "3.2.12"
+  resolved "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.12.tgz#32e5d4bc31c371c125b43e9d07b8a8f70442b080"
+  integrity sha512-sY+VbLQ17FPr1CgirnqEgY+jbC7wI5c2Ma6u8le0+b4UKMYF9urI2pybAZc1nKz6O78FWA3OSnQFxTTLppe+9Q==
+  dependencies:
+    "@vue/compiler-dom" "3.2.12"
+    "@vue/shared" "3.2.12"
+
 "@vue/devtools-api@^6.0.0-beta.13", "@vue/devtools-api@^6.0.0-beta.14", "@vue/devtools-api@^6.0.0-beta.15":
   version "6.0.0-beta.15"
   resolved "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.0.0-beta.15.tgz#ad7cb384e062f165bcf9c83732125bffbc2ad83d"
@@ -852,6 +903,13 @@
   dependencies:
     "@vue/shared" "3.2.11"
 
+"@vue/reactivity@3.2.12":
+  version "3.2.12"
+  resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.12.tgz#b482a737cbdc891f9b1ec3100f3c1804b56d080b"
+  integrity sha512-Lr5CTQjFm5mT/6DGnVNhptmba/Qg1DbD6eNWWmiHLMlpPt4q2ww9A2orEjVw0qNcdTJ04JLPEVAz5jhTZTCfIg==
+  dependencies:
+    "@vue/shared" "3.2.12"
+
 "@vue/ref-transform@3.2.11":
   version "3.2.11"
   resolved "https://registry.npmjs.org/@vue/ref-transform/-/ref-transform-3.2.11.tgz#4d282b9570d1485a73e7bf5d57cce27b4a7aa690"
@@ -863,6 +921,17 @@
     estree-walker "^2.0.2"
     magic-string "^0.25.7"
 
+"@vue/ref-transform@3.2.12":
+  version "3.2.12"
+  resolved "https://registry.npmjs.org/@vue/ref-transform/-/ref-transform-3.2.12.tgz#6f7fa46dd84447ddcf54adfb1b689b1cf4243de0"
+  integrity sha512-lS7TDda61iSf3ljokXVfN0VbOsQdmpST6MZLjxzBydFCECCJaEAr6o+K8VZ7NhUCSrl+gKXHpdXxmcvwdk66aQ==
+  dependencies:
+    "@babel/parser" "^7.15.0"
+    "@vue/compiler-core" "3.2.12"
+    "@vue/shared" "3.2.12"
+    estree-walker "^2.0.2"
+    magic-string "^0.25.7"
+
 "@vue/runtime-core@3.2.11":
   version "3.2.11"
   resolved "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.11.tgz#0dbe801be4bd0bfde253226797e7d304c8fdda30"
@@ -871,6 +940,14 @@
     "@vue/reactivity" "3.2.11"
     "@vue/shared" "3.2.11"
 
+"@vue/runtime-core@3.2.12":
+  version "3.2.12"
+  resolved "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.12.tgz#422662fd5b85f787222d2aea840264ba97e84a13"
+  integrity sha512-LO+ztgcmsomavYUaSq7BTteh8pmnUmvUnXUFVYdlcg3VCdYRS0ImlclpYsNHqjAk2gU+H09dr2PP0kL961xUfQ==
+  dependencies:
+    "@vue/reactivity" "3.2.12"
+    "@vue/shared" "3.2.12"
+
 "@vue/runtime-dom@3.2.11":
   version "3.2.11"
   resolved "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.11.tgz#04f9054a9e64bdf156c2fc22cad67cfaa8b84616"
@@ -880,17 +957,31 @@
     "@vue/shared" "3.2.11"
     csstype "^2.6.8"
 
+"@vue/runtime-dom@3.2.12":
+  version "3.2.12"
+  resolved "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.12.tgz#d9fe865dca36f9ca33ba327afdeb89ae2aa03f4c"
+  integrity sha512-+NSDqivgihvoPYbKFDmzFu1tW7SOzwc7r0b7T8vsJtooVPGxwtfAFZ6wyLtteOXXrCpyTR3kpyTCIp31uY7aJg==
+  dependencies:
+    "@vue/runtime-core" "3.2.12"
+    "@vue/shared" "3.2.12"
+    csstype "^2.6.8"
+
 "@vue/shared@3.2.11":
   version "3.2.11"
   resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.2.11.tgz#01899f54949caf1ac241de397bd17069632574de"
   integrity sha512-ovfXAsSsCvV9JVceWjkqC/7OF5HbgLOtCWjCIosmPGG8lxbPuavhIxRH1dTx4Dg9xLgRTNLvI3pVxG4ItQZekg==
 
-"@vueuse/core@^6.0.0":
+"@vue/shared@3.2.12":
-  version "6.3.3"
+  version "3.2.12"
-  resolved "https://registry.npmjs.org/@vueuse/core/-/core-6.3.3.tgz#0682c01b50d28e91d3d76f27278600ee1692fa24"
+  resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.2.12.tgz#304064a4b56fc6c7b9169d80e9ee62ecb4bf0a1c"
-  integrity sha512-qa/0WYqcvqFKQmlkgsLGlXBrYcQeUi3fzHMIaxsD/lO/zm0IWBSN8CTFu91LwER5qNYs4DGhU5pu7jOdrTzAIQ==
+  integrity sha512-5CkaifUCJwcTuru7FDwKFacPJuEoGUTw0LKSa5bw40B23s0TS+MGlYR1285nbV/ju3QUGlA6d6PD+GJkWy7uFg==
+
+"@vueuse/core@^6.4.1":
+  version "6.4.1"
+  resolved "https://registry.npmjs.org/@vueuse/core/-/core-6.4.1.tgz#21416997a23bfb4924a5082ed6fa959027f80d04"
+  integrity sha512-FRFeEPVq77gcMZP0mCloJY+lyHJaUQmUMaPp5fBds3fs/BbkAt7HTMMizFKHWDVjbmA20vBOjmC9tTnfD+DdEA==
   dependencies:
-    "@vueuse/shared" "6.3.3"
+    "@vueuse/shared" "6.4.1"
     vue-demi "*"
 
 "@vueuse/core@~6.1.0":
@@ -908,10 +999,10 @@
   dependencies:
     vue-demi "*"
 
-"@vueuse/shared@6.3.3":
+"@vueuse/shared@6.4.1":
-  version "6.3.3"
+  version "6.4.1"
-  resolved "https://registry.npmjs.org/@vueuse/shared/-/shared-6.3.3.tgz#4e5c600ad1ed5bf2a8630ad0bd38edb1f4269f37"
+  resolved "https://registry.npmjs.org/@vueuse/shared/-/shared-6.4.1.tgz#5bc84be107cead84e11c21d2c57b1e9f2c376975"
-  integrity sha512-2+YPRhFNUXEhhvKNTWBtNU6hGkft9+mfYSVjI4hZu2U8KDbNNKF/215lBPzMYI2twScDtPsAssQ+vu5t9PBy0g==
+  integrity sha512-zsaYxxZwACQbMmGg+UBjPUVemi325sDdnnB0mn+PNizE0fVC57B+vbLgdj45NBmr6P4nw6a0Y2rMupebwDWsdw==
   dependencies:
     vue-demi "*"
 
@@ -4498,14 +4589,14 @@ vue-router@^4.0.11:
   dependencies:
     "@vue/devtools-api" "^6.0.0-beta.14"
 
-vue-types@^4.0.3:
+vue-types@^4.1.0:
   version "4.1.0"
   resolved "https://registry.npmjs.org/vue-types/-/vue-types-4.1.0.tgz#8dcbbaccf9d5c3815449ac7cb8ae5864454cfff0"
   integrity sha512-oPAeKKx5vY5Q8c7lMQPQyrBIbmWQGael5XEHqO1f+Y3V/RUZNuISz7KxI4woGjh79Vy/gDDaPX9j9zKYpaaA2g==
   dependencies:
     is-plain-object "5.0.0"
 
-vue@^3.1.1, vue@^3.2.11:
+vue@^3.1.1:
   version "3.2.11"
   resolved "https://registry.npmjs.org/vue/-/vue-3.2.11.tgz#6b92295048df705ddac558fd3e3ed553e55e57c8"
   integrity sha512-JkI3/eIgfk4E0f/p319TD3EZgOwBQfftgnkRsXlT7OrRyyiyoyUXn6embPGZXSBxD3LoZ9SWhJoxLhFh5AleeA==
@@ -4514,6 +4605,15 @@ vue@^3.1.1, vue@^3.2.11:
     "@vue/runtime-dom" "3.2.11"
     "@vue/shared" "3.2.11"
 
+vue@^3.2.12:
+  version "3.2.12"
+  resolved "https://registry.npmjs.org/vue/-/vue-3.2.12.tgz#b44f55506fb6a7c4b65635e609deb5f9368aa2ce"
+  integrity sha512-VV14HtubmB56uuQaSvLkJZgoocPiN8CJI3zZA9y8h7q/Z5hcknDIFkbq5d8ku0ukZ6AJPQqMsZWcq0qryF0jgg==
+  dependencies:
+    "@vue/compiler-dom" "3.2.12"
+    "@vue/runtime-dom" "3.2.12"
+    "@vue/shared" "3.2.12"
+
 vuedraggable@^4.1.0:
   version "4.1.0"
   resolved "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz#edece68adb8a4d9e06accff9dfc9040e66852270"