From d4302627e88a3ceab437fbb0552c27d1ccd9634c Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Thu, 16 Sep 2021 23:16:54 +0800
Subject: [PATCH 1/6] refactor: use setup refactor

---
 src/App.vue                                |  41 ++-
 src/layout/components/screenfull/index.vue |  23 +-
 src/views/editor/index.vue                 |  69 ++--
 src/views/error/401.vue                    |  24 +-
 src/views/error/404.vue                    |  32 +-
 src/views/flow-chart/index.vue             | 133 ++++----
 src/views/login.vue                        | 123 ++++----
 src/views/permission/button/index.vue      |  42 +--
 src/views/permission/page/index.vue        |  55 ++--
 src/views/redirect.vue                     |  40 +--
 src/views/register.vue                     | 102 +++---
 src/views/welcome.vue                      | 346 ++++++++++-----------
 tsconfig.json                              |  32 +-
 13 files changed, 462 insertions(+), 600 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c7cca7c00..da0171ad4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,28 +1,25 @@
-<template>
-  <el-config-provider :locale="currentLocale">
-    <router-view />
-  </el-config-provider>
-</template>
-
-<script>
+<script setup lang="ts">
+import { getCurrentInstance } from "vue";
 import { ElConfigProvider } from "element-plus";
 import zhCn from "element-plus/lib/locale/lang/zh-cn";
 import en from "element-plus/lib/locale/lang/en";
-export default {
-  name: "app",
-  components: {
-    [ElConfigProvider.name]: ElConfigProvider
-  },
-  computed: {
-    // eslint-disable-next-line vue/return-in-computed-property
-    currentLocale() {
-      switch (this.$storage.locale?.locale) {
-        case "zh":
-          return zhCn;
-        case "en":
-          return en;
-      }
-    }
+
+let locale: string =
+  getCurrentInstance().appContext.config.globalProperties.$storage?.locale
+    ?.locale;
+
+let currentLocale = () => {
+  switch (locale) {
+    case "zh":
+      return zhCn;
+    case "en":
+      return en;
   }
 };
 </script>
+
+<template>
+  <el-config-provider :locale="currentLocale()">
+    <router-view />
+  </el-config-provider>
+</template>
diff --git a/src/layout/components/screenfull/index.vue b/src/layout/components/screenfull/index.vue
index d01adfa64..924b966bd 100644
--- a/src/layout/components/screenfull/index.vue
+++ b/src/layout/components/screenfull/index.vue
@@ -1,3 +1,9 @@
+<script setup lang="ts">
+import { useFullscreen } from "@vueuse/core";
+
+const { isFullscreen, toggle } = useFullscreen();
+</script>
+
 <template>
   <div class="screen-full" @click="toggle">
     <i
@@ -15,23 +21,6 @@
   </div>
 </template>
 
-<script>
-import { useFullscreen } from "@vueuse/core";
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  name: "screenfull",
-  setup() {
-    const { isFullscreen, toggle } = useFullscreen();
-
-    return {
-      isFullscreen,
-      toggle
-    };
-  }
-});
-</script>
-
 <style lang="scss" scoped>
 .screen-full {
   width: 40px;
diff --git a/src/views/editor/index.vue b/src/views/editor/index.vue
index 1721c87dc..2c7baddc0 100644
--- a/src/views/editor/index.vue
+++ b/src/views/editor/index.vue
@@ -1,47 +1,40 @@
+<script lang="ts">
+export default {
+  name: "reEditor"
+};
+</script>
+
+<script setup lang="ts">
+import { onMounted, onBeforeUnmount, ref, unref } from "vue";
+import WangEditor from "wangeditor";
+
+// eslint-disable-next-line no-undef
+const editor = ref<ComponentRef>(null);
+const html = ref<HTMLElement>(null);
+let instance: WangEditor;
+
+onMounted(() => {
+  instance = new WangEditor(unref(editor));
+  Object.assign(instance.config, {
+    onchange() {
+      html.value = instance.txt.html();
+    }
+  });
+  instance.create();
+});
+
+onBeforeUnmount(() => {
+  instance.destroy();
+});
+</script>
+
 <template>
   <div>
     <div ref="editor"></div>
-    <div :innerHTML="content.html"></div>
+    <div :innerHTML="html"></div>
   </div>
 </template>
 
-<script>
-import { onMounted, onBeforeUnmount, ref, reactive } from "vue";
-import WangEditor from "wangeditor";
-
-export default {
-  name: "reEditor",
-  setup() {
-    const editor = ref();
-    const content = reactive({
-      html: "",
-      text: ""
-    });
-
-    let instance;
-    onMounted(() => {
-      instance = new WangEditor(editor.value);
-      Object.assign(instance.config, {
-        onchange() {
-          content.html = instance.txt.html();
-        }
-      });
-      instance.create();
-    });
-
-    onBeforeUnmount(() => {
-      instance.destroy();
-      instance = null;
-    });
-
-    return {
-      editor,
-      content
-    };
-  }
-};
-</script>
-
 <style lang="scss" scoped>
 :deep(.w-e-text-container) {
   z-index: 99 !important;
diff --git a/src/views/error/401.vue b/src/views/error/401.vue
index 74bce2fc6..53432f1d9 100644
--- a/src/views/error/401.vue
+++ b/src/views/error/401.vue
@@ -1,10 +1,16 @@
+<script setup lang="ts">
+import imgs from "/@/assets/401.gif";
+import { ref } from "vue";
+
+const img = ref(`${imgs}?${new Date()}`);
+</script>
+
 <template>
   <div class="errPage-container">
     <el-row>
       <el-col :span="12">
-        <h1 class="text-jumbo text-ginormous">CURD Admin</h1>
+        <h1 class="text-jumbo text-ginormous">Pure Admin</h1>
         <h2>你没有权限去该页面</h2>
-        <h6>如有不满请联系你领导</h6>
       </el-col>
       <el-col :span="12">
         <img
@@ -18,20 +24,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import imgs from "/@/assets/401.gif";
-import { ref } from "vue";
-export default {
-  name: "401",
-  setup() {
-    const img = ref(`${imgs}?${new Date()}`);
-    return {
-      img
-    };
-  }
-};
-</script>
-
 <style lang="scss" scoped>
 .errPage-container {
   width: 800px;
diff --git a/src/views/error/404.vue b/src/views/error/404.vue
index 1848cf87c..a93f88a66 100644
--- a/src/views/error/404.vue
+++ b/src/views/error/404.vue
@@ -1,3 +1,13 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import four from "/@/assets/404.png";
+import four_cloud from "/@/assets/404_cloud.png";
+
+const message = computed(() => {
+  return "The webmaster said that you can not enter this page...";
+});
+</script>
+
 <template>
   <div class="wscn-http404-container">
     <div class="wscn-http404">
@@ -8,7 +18,7 @@
         <img class="pic-404__child right" :src="four_cloud" alt="404" />
       </div>
       <div class="bullshit">
-        <div class="bullshit__oops">CURD Admin</div>
+        <div class="bullshit__oops">Pure Admin</div>
         <div class="bullshit__headline">{{ message }}</div>
         <div class="bullshit__info">
           Please check that the URL you entered is correct, or click the button
@@ -20,26 +30,6 @@
   </div>
 </template>
 
-<script>
-import { computed } from "vue";
-import four from "/@/assets/404.png";
-import four_cloud from "/@/assets/404_cloud.png";
-export default {
-  name: "404",
-  setup() {
-    const message = computed(() => {
-      return "The webmaster said that you can not enter this page...";
-    });
-
-    return {
-      message,
-      four,
-      four_cloud
-    };
-  }
-};
-</script>
-
 <style lang="scss" scoped>
 .wscn-http404-container {
   transform: translate(-50%, -50%);
diff --git a/src/views/flow-chart/index.vue b/src/views/flow-chart/index.vue
index 2635cb0b1..15decea79 100644
--- a/src/views/flow-chart/index.vue
+++ b/src/views/flow-chart/index.vue
@@ -1,3 +1,62 @@
+<script setup lang="ts">
+import { ref, unref, onMounted } from "vue";
+import LogicFlow from "@logicflow/core";
+import { Snapshot, BpmnElement, Menu } from "@logicflow/extension";
+import "@logicflow/core/dist/style/index.css";
+import "@logicflow/extension/lib/style/index.css";
+import { Control, NodePanel, DataDialog } from "/@/components/ReFlowChart";
+import { toLogicflowData } from "/@/components/ReFlowChart/src/adpterForTurbo";
+import { BpmnNode } from "/@/components/ReFlowChart/src/config";
+import demoData from "./dataTurbo.json";
+
+// eslint-disable-next-line no-undef
+let lf = ref<ElRef>(null);
+let graphData = ref(null);
+let dataVisible = ref<boolean>(false);
+let config = ref({
+  grid: true,
+  background: {
+    color: "#f7f9ff"
+  },
+  keyboard: {
+    enabled: true
+  }
+});
+let nodeList = BpmnNode;
+
+function initLf() {
+  // 画布配置
+  LogicFlow.use(Snapshot);
+  // 使用bpmn插件，引入bpmn元素，这些元素可以在turbo中转换后使用
+  LogicFlow.use(BpmnElement);
+  // 启动右键菜单
+  LogicFlow.use(Menu);
+  const domLf = new LogicFlow({
+    ...unref(config),
+    container: document.querySelector("#LF-Turbo")
+  });
+  lf.value = domLf;
+  // 设置边类型bpmn:sequenceFlow为默认类型
+  unref(lf).setDefaultEdgeType("bpmn:sequenceFlow");
+  onRender();
+}
+
+function onRender() {
+  // Turbo数据转换为LogicFlow内部识别的数据结构
+  const lFData = toLogicflowData(demoData);
+  lf.value.render(lFData);
+}
+
+function catData() {
+  graphData.value = unref(lf).getGraphData();
+  dataVisible.value = true;
+}
+
+onMounted(() => {
+  initLf();
+});
+</script>
+
 <template>
   <div class="logic-flow-view">
     <!-- 辅助工具栏 -->
@@ -19,80 +78,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { ref, unref, onMounted } from "vue";
-import LogicFlow from "@logicflow/core";
-import { Snapshot, BpmnElement, Menu } from "@logicflow/extension";
-import "@logicflow/core/dist/style/index.css";
-import "@logicflow/extension/lib/style/index.css";
-import { Control, NodePanel, DataDialog } from "/@/components/ReFlowChart";
-
-import { toLogicflowData } from "/@/components/ReFlowChart/src/adpterForTurbo";
-import { BpmnNode } from "/@/components/ReFlowChart/src/config";
-import demoData from "./dataTurbo.json";
-export default {
-  name: "reFlowChart",
-  components: { NodePanel, Control, DataDialog },
-  setup() {
-    // eslint-disable-next-line no-undef
-    let lf = ref<ElRef>(null);
-    let graphData = ref(null);
-    let dataVisible = ref(false);
-    let config = ref({
-      grid: true,
-      background: {
-        color: "#f7f9ff"
-      },
-      keyboard: {
-        enabled: true
-      }
-    });
-    let nodeList = BpmnNode;
-
-    function initLf() {
-      // 画布配置
-      LogicFlow.use(Snapshot);
-      // 使用bpmn插件，引入bpmn元素，这些元素可以在turbo中转换后使用
-      LogicFlow.use(BpmnElement);
-      // 启动右键菜单
-      LogicFlow.use(Menu);
-      const domLf = new LogicFlow({
-        ...unref(config),
-        container: document.querySelector("#LF-Turbo")
-      });
-      lf.value = domLf;
-      // 设置边类型bpmn:sequenceFlow为默认类型
-      unref(lf).setDefaultEdgeType("bpmn:sequenceFlow");
-      onRender();
-    }
-
-    function onRender() {
-      // Turbo数据转换为LogicFlow内部识别的数据结构
-      const lFData = toLogicflowData(demoData);
-      lf.value.render(lFData);
-    }
-
-    function catData() {
-      graphData.value = unref(lf).getGraphData();
-      dataVisible.value = true;
-    }
-
-    onMounted(() => {
-      initLf();
-    });
-
-    return {
-      lf,
-      graphData,
-      dataVisible,
-      config,
-      nodeList,
-      catData
-    };
-  }
-};
-</script>
-
 <style scoped>
 #LF-Turbo {
   width: 100vw;
diff --git a/src/views/login.vue b/src/views/login.vue
index a50558698..0fcd62021 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,3 +1,57 @@
+<script setup lang="ts">
+import { reactive, onBeforeMount } from "vue";
+import info, { ContextProps } from "../components/ReInfo/index.vue";
+import { getVerify, getLogin } from "/@/api/user";
+import { useRouter } from "vue-router";
+import { storageSession } from "/@/utils/storage";
+import { warnMessage, successMessage } from "/@/utils/message";
+
+const router = useRouter();
+
+// 刷新验证码
+const refreshGetVerify = async () => {
+  let { svg } = await getVerify();
+  contextInfo.svg = svg;
+};
+
+const contextInfo: ContextProps = reactive({
+  userName: "",
+  passWord: "",
+  verify: null,
+  svg: null
+});
+
+const toPage = (info: Object): void => {
+  storageSession.setItem("info", info);
+  router.push("/");
+};
+
+// 登录
+const onLogin = async () => {
+  let { userName, passWord, verify } = contextInfo;
+  let { code, info, accessToken } = await getLogin({
+    username: userName,
+    password: passWord,
+    verify: verify
+  });
+  code === 0
+    ? successMessage(info) &&
+      toPage({
+        username: userName,
+        accessToken
+      })
+    : warnMessage(info);
+};
+
+const refreshVerify = (): void => {
+  refreshGetVerify();
+};
+
+onBeforeMount(() => {
+  // refreshGetVerify();
+});
+</script>
+
 <template>
   <div class="login">
     <info
@@ -7,72 +61,3 @@
     />
   </div>
 </template>
-
-<script lang="ts">
-import { reactive, onBeforeMount } from "vue";
-import info, { ContextProps } from "../components/ReInfo/index.vue";
-import { getVerify, getLogin } from "/@/api/user";
-import { useRouter } from "vue-router";
-import { storageSession } from "/@/utils/storage";
-import { warnMessage, successMessage } from "/@/utils/message";
-export default {
-  name: "login",
-  components: {
-    info
-  },
-  setup() {
-    const router = useRouter();
-
-    // 刷新验证码
-    const refreshGetVerify = async () => {
-      let { svg } = await getVerify();
-      contextInfo.svg = svg;
-    };
-
-    const contextInfo: ContextProps = reactive({
-      userName: "",
-      passWord: "",
-      verify: null,
-      svg: null
-    });
-
-    const toPage = (info: Object): void => {
-      storageSession.setItem("info", info);
-      router.push("/");
-    };
-
-    // 登录
-    const onLogin = async () => {
-      let { userName, passWord, verify } = contextInfo;
-      let { code, info, accessToken } = await getLogin({
-        username: userName,
-        password: passWord,
-        verify: verify
-      });
-      code === 0
-        ? successMessage(info) &&
-          toPage({
-            username: userName,
-            accessToken
-          })
-        : warnMessage(info);
-    };
-
-    const refreshVerify = (): void => {
-      refreshGetVerify();
-    };
-
-    onBeforeMount(() => {
-      // refreshGetVerify();
-    });
-
-    return {
-      contextInfo,
-      onLogin,
-      router,
-      toPage,
-      refreshVerify
-    };
-  }
-};
-</script>
diff --git a/src/views/permission/button/index.vue b/src/views/permission/button/index.vue
index 809e7d38e..a7e734108 100644
--- a/src/views/permission/button/index.vue
+++ b/src/views/permission/button/index.vue
@@ -1,3 +1,18 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { storageSession } from "/@/utils/storage";
+
+const auth = ref(storageSession.getItem("info").username || "admin");
+
+function changRole(value) {
+  storageSession.setItem("info", {
+    username: value,
+    accessToken: `eyJhbGciOiJIUzUxMiJ9.${value}`
+  });
+  window.location.reload();
+}
+</script>
+
 <template>
   <div class="app-container">
     <el-radio-group v-model="auth" @change="changRole">
@@ -8,30 +23,3 @@
     <p v-auth="'v-test'">只有test可看</p>
   </div>
 </template>
-
-<script lang="ts">
-import { ref } from "vue";
-import { storageSession } from "/@/utils/storage";
-export default {
-  name: "permissionButton",
-  setup() {
-    const auth = ref(storageSession.getItem("info").username || "admin");
-
-    function changRole(value) {
-      storageSession.setItem("info", {
-        username: value,
-        accessToken: `eyJhbGciOiJIUzUxMiJ9.${value}`
-      });
-
-      window.location.reload();
-    }
-
-    return {
-      auth,
-      changRole
-    };
-  }
-};
-</script>
-
-<style scoped></style>
diff --git a/src/views/permission/page/index.vue b/src/views/permission/page/index.vue
index ab2b2efcd..866fbc229 100644
--- a/src/views/permission/page/index.vue
+++ b/src/views/permission/page/index.vue
@@ -1,3 +1,26 @@
+<script setup lang="ts">
+import { ref, unref } from "vue";
+import { storageSession } from "/@/utils/storage";
+
+let purview: string = ref(storageSession.getItem("info").username);
+
+function changRole() {
+  if (unref(purview) === "admin") {
+    storageSession.setItem("info", {
+      username: "test",
+      accessToken: "eyJhbGciOiJIUzUxMiJ9.test"
+    });
+    window.location.reload();
+  } else {
+    storageSession.setItem("info", {
+      username: "admin",
+      accessToken: "eyJhbGciOiJIUzUxMiJ9.admin"
+    });
+    window.location.reload();
+  }
+}
+</script>
+
 <template>
   <div class="app-container">
     <h4>
@@ -10,35 +33,3 @@
     <el-button type="primary" @click="changRole">切换角色</el-button>
   </div>
 </template>
-
-<script lang="ts">
-import { ref, unref } from "vue";
-import { storageSession } from "/@/utils/storage";
-export default {
-  name: "permissionPage",
-  setup() {
-    let purview: string = ref(storageSession.getItem("info").username);
-
-    function changRole() {
-      if (unref(purview) === "admin") {
-        storageSession.setItem("info", {
-          username: "test",
-          accessToken: "eyJhbGciOiJIUzUxMiJ9.test"
-        });
-        window.location.reload();
-      } else {
-        storageSession.setItem("info", {
-          username: "admin",
-          accessToken: "eyJhbGciOiJIUzUxMiJ9.admin"
-        });
-        window.location.reload();
-      }
-    }
-
-    return {
-      purview,
-      changRole
-    };
-  }
-};
-</script>
diff --git a/src/views/redirect.vue b/src/views/redirect.vue
index ffec73747..57206495b 100644
--- a/src/views/redirect.vue
+++ b/src/views/redirect.vue
@@ -1,26 +1,20 @@
+<script setup lang="ts">
+import { unref } from "vue";
+import { useRouter } from "vue-router";
+
+const { currentRoute, replace } = useRouter();
+
+const { params, query } = unref(currentRoute);
+const { path } = params;
+
+const _path = Array.isArray(path) ? path.join("/") : path;
+
+replace({
+  path: "/" + _path,
+  query
+});
+</script>
+
 <template>
   <div></div>
 </template>
-<script lang="ts">
-import { defineComponent, unref } from "vue";
-import { useRouter } from "vue-router";
-
-export default defineComponent({
-  name: "redirect",
-  setup() {
-    const { currentRoute, replace } = useRouter();
-
-    const { params, query } = unref(currentRoute);
-    const { path } = params;
-
-    const _path = Array.isArray(path) ? path.join("/") : path;
-
-    replace({
-      path: "/" + _path,
-      query
-    });
-
-    return {};
-  }
-});
-</script>
diff --git a/src/views/register.vue b/src/views/register.vue
index 86ee7fdda..5676117e6 100644
--- a/src/views/register.vue
+++ b/src/views/register.vue
@@ -1,3 +1,47 @@
+<script setup lang="ts">
+import { reactive, onBeforeMount } from "vue";
+import info, { ContextProps } from "../components/ReInfo/index.vue";
+import { getRegist, getVerify } from "/@/api/user";
+import { useRouter } from "vue-router";
+import { warnMessage, successMessage } from "/@/utils/message";
+
+const router = useRouter();
+
+// 刷新验证码
+const refreshGetVerify = async () => {
+  let { svg } = await getVerify();
+  contextInfo.svg = svg;
+};
+
+const contextInfo: ContextProps = reactive({
+  userName: "",
+  passWord: "",
+  verify: null,
+  svg: null
+});
+
+// 注册
+const onRegist = async () => {
+  let { userName, passWord, verify } = contextInfo;
+  let { code, info } = await getRegist({
+    username: userName,
+    password: passWord,
+    verify: verify
+  });
+  code === 0
+    ? successMessage(info) && router.push("/login")
+    : warnMessage(info);
+};
+
+const refreshVerify = (): void => {
+  refreshGetVerify();
+};
+
+onBeforeMount(() => {
+  // refreshGetVerify();
+});
+</script>
+
 <template>
   <div class="register">
     <info
@@ -7,61 +51,3 @@
     />
   </div>
 </template>
-
-<script lang="ts">
-import { reactive, onBeforeMount } from "vue";
-import info, { ContextProps } from "../components/ReInfo/index.vue";
-import { getRegist, getVerify } from "/@/api/user";
-import { useRouter } from "vue-router";
-import { warnMessage, successMessage } from "/@/utils/message";
-export default {
-  name: "register",
-  components: {
-    info
-  },
-  setup() {
-    const router = useRouter();
-
-    // 刷新验证码
-    const refreshGetVerify = async () => {
-      let { svg } = await getVerify();
-      contextInfo.svg = svg;
-    };
-
-    const contextInfo: ContextProps = reactive({
-      userName: "",
-      passWord: "",
-      verify: null,
-      svg: null
-    });
-
-    // 注册
-    const onRegist = async () => {
-      let { userName, passWord, verify } = contextInfo;
-      let { code, info } = await getRegist({
-        username: userName,
-        password: passWord,
-        verify: verify
-      });
-      code === 0
-        ? successMessage(info) && router.push("/login")
-        : warnMessage(info);
-    };
-
-    const refreshVerify = (): void => {
-      refreshGetVerify();
-    };
-
-    onBeforeMount(() => {
-      // refreshGetVerify();
-    });
-
-    return {
-      contextInfo,
-      onRegist,
-      router,
-      refreshVerify
-    };
-  }
-};
-</script>
diff --git a/src/views/welcome.vue b/src/views/welcome.vue
index f0f0a2f12..b64e38ed5 100644
--- a/src/views/welcome.vue
+++ b/src/views/welcome.vue
@@ -1,3 +1,170 @@
+<script setup lang="ts">
+import Flop from "/@/components/ReFlop";
+import { ref, computed, onMounted, nextTick } from "vue";
+import { deviceDetection } from "/@/utils/deviceDetection";
+import { useEventListener, tryOnUnmounted, useTimeoutFn } from "@vueuse/core";
+import { echartsJson } from "/@/api/mock";
+import echarts from "/@/plugins/echarts";
+import { ECharts } from "echarts";
+
+//折线图实例
+let brokenLine: ECharts;
+let mobile = ref<boolean>(deviceDetection());
+let date: Date = new Date();
+let loading = ref<boolean>(true);
+
+setTimeout(() => {
+  loading.value = !loading.value;
+  nextTick(() => {
+    initbrokenLine();
+  });
+}, 500);
+
+let greetings = computed(() => {
+  if (date.getHours() >= 0 && date.getHours() < 12) {
+    return "上午阳光明媚，祝你薪水翻倍🌞！";
+  } else if (date.getHours() >= 12 && date.getHours() < 18) {
+    return "下午小风娇好，愿你青春不老😃！";
+  } else {
+    return "折一根天使羽毛，愿拂去您的疲惫烦恼忧伤🌛！";
+  }
+});
+
+function initbrokenLine() {
+  const lineRefDom = document.getElementById("brokenLine");
+  if (!lineRefDom) return;
+  // @ts-ignore
+  brokenLine = echarts.init(lineRefDom);
+  brokenLine.clear(); //清除旧画布 重新渲染
+
+  echartsJson().then(({ info }) => {
+    brokenLine.setOption({
+      title: {
+        text: "上海 空气质量指数",
+        left: "1%"
+      },
+      tooltip: {
+        trigger: "axis"
+      },
+      grid: {
+        left: "5%",
+        right: "15%",
+        bottom: "10%"
+      },
+      xAxis: {
+        data: info.map(function (item) {
+          return item[0];
+        })
+      },
+      yAxis: {},
+      toolbox: {
+        right: 10,
+        feature: {
+          saveAsImage: {}
+        }
+      },
+      dataZoom: [
+        {
+          startValue: "2014-06-01"
+        },
+        {
+          type: "inside"
+        }
+      ],
+      visualMap: {
+        top: 50,
+        right: 10,
+        pieces: [
+          {
+            gt: 0,
+            lte: 50,
+            color: "#93CE07"
+          },
+          {
+            gt: 50,
+            lte: 100,
+            color: "#FBDB0F"
+          },
+          {
+            gt: 100,
+            lte: 150,
+            color: "#FC7D02"
+          },
+          {
+            gt: 150,
+            lte: 200,
+            color: "#FD0100"
+          },
+          {
+            gt: 200,
+            lte: 300,
+            color: "#AA069F"
+          },
+          {
+            gt: 300,
+            color: "#AC3B2A"
+          }
+        ],
+        outOfRange: {
+          color: "#999"
+        }
+      },
+      series: {
+        name: "上海 空气质量指数",
+        type: "line",
+        data: info.map(function (item) {
+          return item[1];
+        }),
+        markLine: {
+          silent: true,
+          lineStyle: {
+            color: "#333"
+          },
+          data: [
+            {
+              yAxis: 50
+            },
+            {
+              yAxis: 100
+            },
+            {
+              yAxis: 150
+            },
+            {
+              yAxis: 200
+            },
+            {
+              yAxis: 300
+            }
+          ]
+        }
+      }
+    });
+  });
+}
+
+const openDepot = (): void => {
+  window.open("https://github.com/xiaoxian521/vue-pure-admin");
+};
+
+onMounted(() => {
+  nextTick(() => {
+    useEventListener("resize", () => {
+      if (!brokenLine) return;
+      useTimeoutFn(() => {
+        brokenLine.resize();
+      }, 180);
+    });
+  });
+});
+
+tryOnUnmounted(() => {
+  if (!brokenLine) return;
+  brokenLine.dispose();
+  brokenLine = null;
+});
+</script>
+
 <template>
   <div class="welcome">
     <el-affix>
@@ -26,185 +193,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import Flop from "/@/components/ReFlop";
-import { ref, computed, onMounted, nextTick } from "vue";
-import { deviceDetection } from "/@/utils/deviceDetection";
-import { useEventListener, tryOnUnmounted, useTimeoutFn } from "@vueuse/core";
-import { echartsJson } from "/@/api/mock";
-import echarts from "/@/plugins/echarts";
-
-let brokenLine: any = null; //折线图实例
-export default {
-  name: "welcome",
-  components: {
-    Flop
-  },
-  setup() {
-    let mobile = ref(deviceDetection());
-    let date: Date = new Date();
-    let loading = ref(true);
-
-    setTimeout(() => {
-      loading.value = !loading.value;
-      nextTick(() => {
-        initbrokenLine();
-      });
-    }, 500);
-
-    let greetings = computed(() => {
-      if (date.getHours() >= 0 && date.getHours() < 12) {
-        return "上午阳光明媚，祝你薪水翻倍🌞！";
-      } else if (date.getHours() >= 12 && date.getHours() < 18) {
-        return "下午小风娇好，愿你青春不老😃！";
-      } else {
-        return "折一根天使羽毛，愿拂去您的疲惫烦恼忧伤🌛！";
-      }
-    });
-
-    function initbrokenLine() {
-      const lineRefDom = document.getElementById("brokenLine");
-      if (!lineRefDom) return;
-      brokenLine = echarts.init(lineRefDom);
-      brokenLine.clear(); //清除旧画布 重新渲染
-
-      echartsJson().then(({ info }) => {
-        brokenLine.setOption({
-          title: {
-            text: "上海 空气质量指数",
-            left: "1%"
-          },
-          tooltip: {
-            trigger: "axis"
-          },
-          grid: {
-            left: "5%",
-            right: "15%",
-            bottom: "10%"
-          },
-          xAxis: {
-            data: info.map(function (item) {
-              return item[0];
-            })
-          },
-          yAxis: {},
-          toolbox: {
-            right: 10,
-            feature: {
-              saveAsImage: {}
-            }
-          },
-          dataZoom: [
-            {
-              startValue: "2014-06-01"
-            },
-            {
-              type: "inside"
-            }
-          ],
-          visualMap: {
-            top: 50,
-            right: 10,
-            pieces: [
-              {
-                gt: 0,
-                lte: 50,
-                color: "#93CE07"
-              },
-              {
-                gt: 50,
-                lte: 100,
-                color: "#FBDB0F"
-              },
-              {
-                gt: 100,
-                lte: 150,
-                color: "#FC7D02"
-              },
-              {
-                gt: 150,
-                lte: 200,
-                color: "#FD0100"
-              },
-              {
-                gt: 200,
-                lte: 300,
-                color: "#AA069F"
-              },
-              {
-                gt: 300,
-                color: "#AC3B2A"
-              }
-            ],
-            outOfRange: {
-              color: "#999"
-            }
-          },
-          series: {
-            name: "上海 空气质量指数",
-            type: "line",
-            data: info.map(function (item) {
-              return item[1];
-            }),
-            markLine: {
-              silent: true,
-              lineStyle: {
-                color: "#333"
-              },
-              data: [
-                {
-                  yAxis: 50
-                },
-                {
-                  yAxis: 100
-                },
-                {
-                  yAxis: 150
-                },
-                {
-                  yAxis: 200
-                },
-                {
-                  yAxis: 300
-                }
-              ]
-            }
-          }
-        });
-      });
-    }
-
-    const openDepot = (): void => {
-      window.open("https://github.com/xiaoxian521/vue-pure-admin");
-    };
-
-    onMounted(() => {
-      nextTick(() => {
-        useEventListener("resize", () => {
-          if (!brokenLine) return;
-          useTimeoutFn(() => {
-            brokenLine.resize();
-          }, 180);
-        });
-      });
-    });
-
-    tryOnUnmounted(() => {
-      if (!brokenLine) return;
-      brokenLine.dispose();
-      brokenLine = null;
-    });
-
-    return {
-      greetings,
-      mobile,
-      loading,
-      openDepot
-    };
-  }
-};
-</script>
-
 <style lang="scss" scoped>
 .welcome {
   width: 100%;
diff --git a/tsconfig.json b/tsconfig.json
index 82d5cc035..335bf5be0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,6 +7,7 @@
     "importHelpers": true,
     "moduleResolution": "node",
     "experimentalDecorators": true,
+    "strictFunctionTypes": false,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "isolatedModules": true,
@@ -16,27 +17,14 @@
     "baseUrl": ".",
     "allowJs": false,
     "resolveJsonModule": true, // 包含导入的模块。json的扩展
-    "lib": [
-      "dom",
-      "esnext"
-    ],
+    "lib": ["dom", "esnext"],
     "incremental": true,
     "paths": {
-      "/@/*": [
-        "src/*"
-      ],
-      "/#/*": [
-        "types/*"
-      ]
+      "/@/*": ["src/*"],
+      "/#/*": ["types/*"]
     },
-    "types": [
-      "node",
-      "vite/client"
-    ],
-    "typeRoots": [
-      "./node_modules/@types/",
-      "./types"
-    ]
+    "types": ["node", "vite/client"],
+    "typeRoots": ["./node_modules/@types/", "./types"]
   },
   "include": [
     "src/**/*.ts",
@@ -46,9 +34,5 @@
     "mock/*.ts",
     "vite.config.ts"
   ],
-  "exclude": [
-    "node_modules",
-    "dist",
-    "**/*.js"
-  ]
-}
\ No newline at end of file
+  "exclude": ["node_modules", "dist", "**/*.js"]
+}

From ff329b1e8e51821aed17f6117cf9a2b1d0b2f356 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Fri, 17 Sep 2021 10:29:59 +0800
Subject: [PATCH 2/6] refactor: use setup refactor

---
 index.html                                    |    2 +-
 package.json                                  |    1 +
 public/sortable.min.js                        | 2607 +++++++++++++++++
 src/views/components/button/index.vue         |   27 +-
 src/views/components/contextmenu/index.vue    |   23 +-
 src/views/components/count-to/index.vue       |   19 +-
 src/views/components/cropping/index.vue       |   62 +-
 src/views/components/draggable/index.vue      |  106 +-
 src/views/components/map/index.vue            |   17 +-
 .../components/seamless-scroll/index.vue      |  110 +-
 src/views/components/selector/index.vue       |   58 +-
 src/views/components/split-pane/index.vue     |   46 +-
 src/views/components/video/index.vue          |   45 +-
 src/views/permission/button/index.vue         |    2 +-
 src/views/permission/page/index.vue           |    2 +-
 types/global.d.ts                             |   48 +-
 yarn.lock                                     |    5 +
 17 files changed, 2844 insertions(+), 336 deletions(-)
 create mode 100644 public/sortable.min.js

diff --git a/index.html b/index.html
index 9a734e243..851ed27ba 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="/iconfont.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>后台管理系统</title>
-    <script src="https://cdn.bootcdn.net/ajax/libs/Sortable/1.13.0/Sortable.js"></script>
+    <script src="/sortable.min.js"></script>
     <script>
       window.process = {};
     </script>
diff --git a/package.json b/package.json
index a8c2d7e10..e3dbeab9b 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "pinia": "^2.0.0-rc.6",
     "resize-observer-polyfill": "^1.5.1",
     "responsive-storage": "^1.0.9",
+    "sortablejs": "1.13.0",
     "v-contextmenu": "^3.0.0",
     "vue": "^3.2.11",
     "vue-i18n": "^9.2.0-beta.3",
diff --git a/public/sortable.min.js b/public/sortable.min.js
new file mode 100644
index 000000000..9129afeaf
--- /dev/null
+++ b/public/sortable.min.js
@@ -0,0 +1,2607 @@
+/*! Sortable 1.13.0 - MIT | git://github.com/SortableJS/Sortable.git */
+!(function (t, e) {
+  "object" == typeof exports && "undefined" != typeof module
+    ? (module.exports = e())
+    : "function" == typeof define && define.amd
+    ? define(e)
+    : ((t = t || self).Sortable = e());
+})(this, function () {
+  "use strict";
+  function o(t) {
+    return (o =
+      "function" == typeof Symbol && "symbol" == typeof Symbol.iterator
+        ? function (t) {
+            return typeof t;
+          }
+        : function (t) {
+            return t &&
+              "function" == typeof Symbol &&
+              t.constructor === Symbol &&
+              t !== Symbol.prototype
+              ? "symbol"
+              : typeof t;
+          })(t);
+  }
+  function a() {
+    return (a =
+      Object.assign ||
+      function (t) {
+        for (var e = 1; e < arguments.length; e++) {
+          var n = arguments[e];
+          for (var o in n)
+            Object.prototype.hasOwnProperty.call(n, o) && (t[o] = n[o]);
+        }
+        return t;
+      }).apply(this, arguments);
+  }
+  function I(i) {
+    for (var t = 1; t < arguments.length; t++) {
+      var r = null != arguments[t] ? arguments[t] : {},
+        e = Object.keys(r);
+      "function" == typeof Object.getOwnPropertySymbols &&
+        (e = e.concat(
+          Object.getOwnPropertySymbols(r).filter(function (t) {
+            return Object.getOwnPropertyDescriptor(r, t).enumerable;
+          })
+        )),
+        e.forEach(function (t) {
+          var e, n, o;
+          (e = i),
+            (o = r[(n = t)]),
+            n in e
+              ? Object.defineProperty(e, n, {
+                  value: o,
+                  enumerable: !0,
+                  configurable: !0,
+                  writable: !0
+                })
+              : (e[n] = o);
+        });
+    }
+    return i;
+  }
+  function l(t, e) {
+    if (null == t) return {};
+    var n,
+      o,
+      i = (function (t, e) {
+        if (null == t) return {};
+        var n,
+          o,
+          i = {},
+          r = Object.keys(t);
+        for (o = 0; o < r.length; o++)
+          (n = r[o]), 0 <= e.indexOf(n) || (i[n] = t[n]);
+        return i;
+      })(t, e);
+    if (Object.getOwnPropertySymbols) {
+      var r = Object.getOwnPropertySymbols(t);
+      for (o = 0; o < r.length; o++)
+        (n = r[o]),
+          0 <= e.indexOf(n) ||
+            (Object.prototype.propertyIsEnumerable.call(t, n) && (i[n] = t[n]));
+    }
+    return i;
+  }
+  function e(t) {
+    return (
+      (function (t) {
+        if (Array.isArray(t)) {
+          for (var e = 0, n = new Array(t.length); e < t.length; e++)
+            n[e] = t[e];
+          return n;
+        }
+      })(t) ||
+      (function (t) {
+        if (
+          Symbol.iterator in Object(t) ||
+          "[object Arguments]" === Object.prototype.toString.call(t)
+        )
+          return Array.from(t);
+      })(t) ||
+      (function () {
+        throw new TypeError("Invalid attempt to spread non-iterable instance");
+      })()
+    );
+  }
+  function t(t) {
+    if ("undefined" != typeof window && window.navigator)
+      return !!navigator.userAgent.match(t);
+  }
+  var w = t(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i),
+    E = t(/Edge/i),
+    c = t(/firefox/i),
+    u = t(/safari/i) && !t(/chrome/i) && !t(/android/i),
+    n = t(/iP(ad|od|hone)/i),
+    i = t(/chrome/i) && t(/android/i),
+    r = { capture: !1, passive: !1 };
+  function d(t, e, n) {
+    t.addEventListener(e, n, !w && r);
+  }
+  function s(t, e, n) {
+    t.removeEventListener(e, n, !w && r);
+  }
+  function h(t, e) {
+    if (e) {
+      if ((">" === e[0] && (e = e.substring(1)), t))
+        try {
+          if (t.matches) return t.matches(e);
+          if (t.msMatchesSelector) return t.msMatchesSelector(e);
+          if (t.webkitMatchesSelector) return t.webkitMatchesSelector(e);
+        } catch (t) {
+          return !1;
+        }
+      return !1;
+    }
+  }
+  function P(t, e, n, o) {
+    if (t) {
+      n = n || document;
+      do {
+        if (
+          (null != e &&
+            (">" === e[0] ? t.parentNode === n && h(t, e) : h(t, e))) ||
+          (o && t === n)
+        )
+          return t;
+        if (t === n) break;
+      } while (
+        (t =
+          (i = t).host && i !== document && i.host.nodeType
+            ? i.host
+            : i.parentNode)
+      );
+    }
+    var i;
+    return null;
+  }
+  var f,
+    p = /\s+/g;
+  function k(t, e, n) {
+    if (t && e)
+      if (t.classList) t.classList[n ? "add" : "remove"](e);
+      else {
+        var o = (" " + t.className + " ")
+          .replace(p, " ")
+          .replace(" " + e + " ", " ");
+        t.className = (o + (n ? " " + e : "")).replace(p, " ");
+      }
+  }
+  function R(t, e, n) {
+    var o = t && t.style;
+    if (o) {
+      if (void 0 === n)
+        return (
+          document.defaultView && document.defaultView.getComputedStyle
+            ? (n = document.defaultView.getComputedStyle(t, ""))
+            : t.currentStyle && (n = t.currentStyle),
+          void 0 === e ? n : n[e]
+        );
+      e in o || -1 !== e.indexOf("webkit") || (e = "-webkit-" + e),
+        (o[e] = n + ("string" == typeof n ? "" : "px"));
+    }
+  }
+  function v(t, e) {
+    var n = "";
+    if ("string" == typeof t) n = t;
+    else
+      do {
+        var o = R(t, "transform");
+        o && "none" !== o && (n = o + " " + n);
+      } while (!e && (t = t.parentNode));
+    var i =
+      window.DOMMatrix ||
+      window.WebKitCSSMatrix ||
+      window.CSSMatrix ||
+      window.MSCSSMatrix;
+    return i && new i(n);
+  }
+  function g(t, e, n) {
+    if (t) {
+      var o = t.getElementsByTagName(e),
+        i = 0,
+        r = o.length;
+      if (n) for (; i < r; i++) n(o[i], i);
+      return o;
+    }
+    return [];
+  }
+  function A() {
+    var t = document.scrollingElement;
+    return t || document.documentElement;
+  }
+  function X(t, e, n, o, i) {
+    if (t.getBoundingClientRect || t === window) {
+      var r, a, l, s, c, u, d;
+      if (
+        ((d =
+          t !== window && t.parentNode && t !== A()
+            ? ((a = (r = t.getBoundingClientRect()).top),
+              (l = r.left),
+              (s = r.bottom),
+              (c = r.right),
+              (u = r.height),
+              r.width)
+            : ((l = a = 0),
+              (s = window.innerHeight),
+              (c = window.innerWidth),
+              (u = window.innerHeight),
+              window.innerWidth)),
+        (e || n) && t !== window && ((i = i || t.parentNode), !w))
+      )
+        do {
+          if (
+            i &&
+            i.getBoundingClientRect &&
+            ("none" !== R(i, "transform") ||
+              (n && "static" !== R(i, "position")))
+          ) {
+            var h = i.getBoundingClientRect();
+            (a -= h.top + parseInt(R(i, "border-top-width"))),
+              (l -= h.left + parseInt(R(i, "border-left-width"))),
+              (s = a + r.height),
+              (c = l + r.width);
+            break;
+          }
+        } while ((i = i.parentNode));
+      if (o && t !== window) {
+        var f = v(i || t),
+          p = f && f.a,
+          g = f && f.d;
+        f && ((s = (a /= g) + (u /= g)), (c = (l /= p) + (d /= p)));
+      }
+      return { top: a, left: l, bottom: s, right: c, width: d, height: u };
+    }
+  }
+  function Y(t, e, n) {
+    for (var o = H(t, !0), i = X(t)[e]; o; ) {
+      var r = X(o)[n];
+      if (!("top" === n || "left" === n ? r <= i : i <= r)) return o;
+      if (o === A()) break;
+      o = H(o, !1);
+    }
+    return !1;
+  }
+  function m(t, e, n) {
+    for (var o = 0, i = 0, r = t.children; i < r.length; ) {
+      if (
+        "none" !== r[i].style.display &&
+        r[i] !== Rt.ghost &&
+        r[i] !== Rt.dragged &&
+        P(r[i], n.draggable, t, !1)
+      ) {
+        if (o === e) return r[i];
+        o++;
+      }
+      i++;
+    }
+    return null;
+  }
+  function B(t, e) {
+    for (
+      var n = t.lastElementChild;
+      n && (n === Rt.ghost || "none" === R(n, "display") || (e && !h(n, e)));
+
+    )
+      n = n.previousElementSibling;
+    return n || null;
+  }
+  function F(t, e) {
+    var n = 0;
+    if (!t || !t.parentNode) return -1;
+    for (; (t = t.previousElementSibling); )
+      "TEMPLATE" === t.nodeName.toUpperCase() ||
+        t === Rt.clone ||
+        (e && !h(t, e)) ||
+        n++;
+    return n;
+  }
+  function b(t) {
+    var e = 0,
+      n = 0,
+      o = A();
+    if (t)
+      do {
+        var i = v(t),
+          r = i.a,
+          a = i.d;
+        (e += t.scrollLeft * r), (n += t.scrollTop * a);
+      } while (t !== o && (t = t.parentNode));
+    return [e, n];
+  }
+  function H(t, e) {
+    if (!t || !t.getBoundingClientRect) return A();
+    var n = t,
+      o = !1;
+    do {
+      if (n.clientWidth < n.scrollWidth || n.clientHeight < n.scrollHeight) {
+        var i = R(n);
+        if (
+          (n.clientWidth < n.scrollWidth &&
+            ("auto" == i.overflowX || "scroll" == i.overflowX)) ||
+          (n.clientHeight < n.scrollHeight &&
+            ("auto" == i.overflowY || "scroll" == i.overflowY))
+        ) {
+          if (!n.getBoundingClientRect || n === document.body) return A();
+          if (o || e) return n;
+          o = !0;
+        }
+      }
+    } while ((n = n.parentNode));
+    return A();
+  }
+  function y(t, e) {
+    return (
+      Math.round(t.top) === Math.round(e.top) &&
+      Math.round(t.left) === Math.round(e.left) &&
+      Math.round(t.height) === Math.round(e.height) &&
+      Math.round(t.width) === Math.round(e.width)
+    );
+  }
+  function D(e, n) {
+    return function () {
+      if (!f) {
+        var t = arguments;
+        1 === t.length ? e.call(this, t[0]) : e.apply(this, t),
+          (f = setTimeout(function () {
+            f = void 0;
+          }, n));
+      }
+    };
+  }
+  function L(t, e, n) {
+    (t.scrollLeft += e), (t.scrollTop += n);
+  }
+  function S(t) {
+    var e = window.Polymer,
+      n = window.jQuery || window.Zepto;
+    return e && e.dom
+      ? e.dom(t).cloneNode(!0)
+      : n
+      ? n(t).clone(!0)[0]
+      : t.cloneNode(!0);
+  }
+  function _(t, e) {
+    R(t, "position", "absolute"),
+      R(t, "top", e.top),
+      R(t, "left", e.left),
+      R(t, "width", e.width),
+      R(t, "height", e.height);
+  }
+  function C(t) {
+    R(t, "position", ""),
+      R(t, "top", ""),
+      R(t, "left", ""),
+      R(t, "width", ""),
+      R(t, "height", "");
+  }
+  var j = "Sortable" + new Date().getTime();
+  function T() {
+    var e,
+      o = [];
+    return {
+      captureAnimationState: function () {
+        (o = []),
+          this.options.animation &&
+            [].slice.call(this.el.children).forEach(function (t) {
+              if ("none" !== R(t, "display") && t !== Rt.ghost) {
+                o.push({ target: t, rect: X(t) });
+                var e = I({}, o[o.length - 1].rect);
+                if (t.thisAnimationDuration) {
+                  var n = v(t, !0);
+                  n && ((e.top -= n.f), (e.left -= n.e));
+                }
+                t.fromRect = e;
+              }
+            });
+      },
+      addAnimationState: function (t) {
+        o.push(t);
+      },
+      removeAnimationState: function (t) {
+        o.splice(
+          (function (t, e) {
+            for (var n in t)
+              if (t.hasOwnProperty(n))
+                for (var o in e)
+                  if (e.hasOwnProperty(o) && e[o] === t[n][o]) return Number(n);
+            return -1;
+          })(o, { target: t }),
+          1
+        );
+      },
+      animateAll: function (t) {
+        var c = this;
+        if (!this.options.animation)
+          return clearTimeout(e), void ("function" == typeof t && t());
+        var u = !1,
+          d = 0;
+        o.forEach(function (t) {
+          var e = 0,
+            n = t.target,
+            o = n.fromRect,
+            i = X(n),
+            r = n.prevFromRect,
+            a = n.prevToRect,
+            l = t.rect,
+            s = v(n, !0);
+          s && ((i.top -= s.f), (i.left -= s.e)),
+            (n.toRect = i),
+            n.thisAnimationDuration &&
+              y(r, i) &&
+              !y(o, i) &&
+              (l.top - i.top) / (l.left - i.left) ==
+                (o.top - i.top) / (o.left - i.left) &&
+              (e = (function (t, e, n, o) {
+                return (
+                  (Math.sqrt(
+                    Math.pow(e.top - t.top, 2) + Math.pow(e.left - t.left, 2)
+                  ) /
+                    Math.sqrt(
+                      Math.pow(e.top - n.top, 2) + Math.pow(e.left - n.left, 2)
+                    )) *
+                  o.animation
+                );
+              })(l, r, a, c.options)),
+            y(i, o) ||
+              ((n.prevFromRect = o),
+              (n.prevToRect = i),
+              e || (e = c.options.animation),
+              c.animate(n, l, i, e)),
+            e &&
+              ((u = !0),
+              (d = Math.max(d, e)),
+              clearTimeout(n.animationResetTimer),
+              (n.animationResetTimer = setTimeout(function () {
+                (n.animationTime = 0),
+                  (n.prevFromRect = null),
+                  (n.fromRect = null),
+                  (n.prevToRect = null),
+                  (n.thisAnimationDuration = null);
+              }, e)),
+              (n.thisAnimationDuration = e));
+        }),
+          clearTimeout(e),
+          u
+            ? (e = setTimeout(function () {
+                "function" == typeof t && t();
+              }, d))
+            : "function" == typeof t && t(),
+          (o = []);
+      },
+      animate: function (t, e, n, o) {
+        if (o) {
+          R(t, "transition", ""), R(t, "transform", "");
+          var i = v(this.el),
+            r = i && i.a,
+            a = i && i.d,
+            l = (e.left - n.left) / (r || 1),
+            s = (e.top - n.top) / (a || 1);
+          (t.animatingX = !!l),
+            (t.animatingY = !!s),
+            R(t, "transform", "translate3d(" + l + "px," + s + "px,0)"),
+            (this.forRepaintDummy = (function (t) {
+              return t.offsetWidth;
+            })(t)),
+            R(
+              t,
+              "transition",
+              "transform " +
+                o +
+                "ms" +
+                (this.options.easing ? " " + this.options.easing : "")
+            ),
+            R(t, "transform", "translate3d(0,0,0)"),
+            "number" == typeof t.animated && clearTimeout(t.animated),
+            (t.animated = setTimeout(function () {
+              R(t, "transition", ""),
+                R(t, "transform", ""),
+                (t.animated = !1),
+                (t.animatingX = !1),
+                (t.animatingY = !1);
+            }, o));
+        }
+      }
+    };
+  }
+  var x = [],
+    M = { initializeByDefault: !0 },
+    O = {
+      mount: function (e) {
+        for (var t in M) !M.hasOwnProperty(t) || t in e || (e[t] = M[t]);
+        x.forEach(function (t) {
+          if (t.pluginName === e.pluginName)
+            throw "Sortable: Cannot mount plugin ".concat(
+              e.pluginName,
+              " more than once"
+            );
+        }),
+          x.push(e);
+      },
+      pluginEvent: function (e, n, o) {
+        var t = this;
+        (this.eventCanceled = !1),
+          (o.cancel = function () {
+            t.eventCanceled = !0;
+          });
+        var i = e + "Global";
+        x.forEach(function (t) {
+          n[t.pluginName] &&
+            (n[t.pluginName][i] && n[t.pluginName][i](I({ sortable: n }, o)),
+            n.options[t.pluginName] &&
+              n[t.pluginName][e] &&
+              n[t.pluginName][e](I({ sortable: n }, o)));
+        });
+      },
+      initializePlugins: function (o, i, r, t) {
+        for (var e in (x.forEach(function (t) {
+          var e = t.pluginName;
+          if (o.options[e] || t.initializeByDefault) {
+            var n = new t(o, i, o.options);
+            (n.sortable = o),
+              (n.options = o.options),
+              (o[e] = n),
+              a(r, n.defaults);
+          }
+        }),
+        o.options))
+          if (o.options.hasOwnProperty(e)) {
+            var n = this.modifyOption(o, e, o.options[e]);
+            void 0 !== n && (o.options[e] = n);
+          }
+      },
+      getEventProperties: function (e, n) {
+        var o = {};
+        return (
+          x.forEach(function (t) {
+            "function" == typeof t.eventProperties &&
+              a(o, t.eventProperties.call(n[t.pluginName], e));
+          }),
+          o
+        );
+      },
+      modifyOption: function (e, n, o) {
+        var i;
+        return (
+          x.forEach(function (t) {
+            e[t.pluginName] &&
+              t.optionListeners &&
+              "function" == typeof t.optionListeners[n] &&
+              (i = t.optionListeners[n].call(e[t.pluginName], o));
+          }),
+          i
+        );
+      }
+    };
+  function N(t) {
+    var e = t.sortable,
+      n = t.rootEl,
+      o = t.name,
+      i = t.targetEl,
+      r = t.cloneEl,
+      a = t.toEl,
+      l = t.fromEl,
+      s = t.oldIndex,
+      c = t.newIndex,
+      u = t.oldDraggableIndex,
+      d = t.newDraggableIndex,
+      h = t.originalEvent,
+      f = t.putSortable,
+      p = t.extraEventProperties;
+    if ((e = e || (n && n[j]))) {
+      var g,
+        v = e.options,
+        m = "on" + o.charAt(0).toUpperCase() + o.substr(1);
+      !window.CustomEvent || w || E
+        ? (g = document.createEvent("Event")).initEvent(o, !0, !0)
+        : (g = new CustomEvent(o, { bubbles: !0, cancelable: !0 })),
+        (g.to = a || n),
+        (g.from = l || n),
+        (g.item = i || n),
+        (g.clone = r),
+        (g.oldIndex = s),
+        (g.newIndex = c),
+        (g.oldDraggableIndex = u),
+        (g.newDraggableIndex = d),
+        (g.originalEvent = h),
+        (g.pullMode = f ? f.lastPutMode : void 0);
+      var b = I({}, p, O.getEventProperties(o, e));
+      for (var y in b) g[y] = b[y];
+      n && n.dispatchEvent(g), v[m] && v[m].call(e, g);
+    }
+  }
+  function K(t, e, n) {
+    var o = 2 < arguments.length && void 0 !== n ? n : {},
+      i = o.evt,
+      r = l(o, ["evt"]);
+    O.pluginEvent.bind(Rt)(
+      t,
+      e,
+      I(
+        {
+          dragEl: z,
+          parentEl: G,
+          ghostEl: U,
+          rootEl: q,
+          nextEl: V,
+          lastDownEl: Z,
+          cloneEl: Q,
+          cloneHidden: $,
+          dragStarted: dt,
+          putSortable: it,
+          activeSortable: Rt.active,
+          originalEvent: i,
+          oldIndex: J,
+          oldDraggableIndex: et,
+          newIndex: tt,
+          newDraggableIndex: nt,
+          hideGhostForTarget: At,
+          unhideGhostForTarget: It,
+          cloneNowHidden: function () {
+            $ = !0;
+          },
+          cloneNowShown: function () {
+            $ = !1;
+          },
+          dispatchSortableEvent: function (t) {
+            W({ sortable: e, name: t, originalEvent: i });
+          }
+        },
+        r
+      )
+    );
+  }
+  function W(t) {
+    N(
+      I(
+        {
+          putSortable: it,
+          cloneEl: Q,
+          targetEl: z,
+          rootEl: q,
+          oldIndex: J,
+          oldDraggableIndex: et,
+          newIndex: tt,
+          newDraggableIndex: nt
+        },
+        t
+      )
+    );
+  }
+  var z,
+    G,
+    U,
+    q,
+    V,
+    Z,
+    Q,
+    $,
+    J,
+    tt,
+    et,
+    nt,
+    ot,
+    it,
+    rt,
+    at,
+    lt,
+    st,
+    ct,
+    ut,
+    dt,
+    ht,
+    ft,
+    pt,
+    gt,
+    vt = !1,
+    mt = !1,
+    bt = [],
+    yt = !1,
+    wt = !1,
+    Et = [],
+    Dt = !1,
+    St = [],
+    _t = "undefined" != typeof document,
+    Ct = n,
+    Tt = E || w ? "cssFloat" : "float",
+    xt = _t && !i && !n && "draggable" in document.createElement("div"),
+    Mt = (function () {
+      if (_t) {
+        if (w) return !1;
+        var t = document.createElement("x");
+        return (
+          (t.style.cssText = "pointer-events:auto"),
+          "auto" === t.style.pointerEvents
+        );
+      }
+    })(),
+    Ot = function (t, e) {
+      var n = R(t),
+        o =
+          parseInt(n.width) -
+          parseInt(n.paddingLeft) -
+          parseInt(n.paddingRight) -
+          parseInt(n.borderLeftWidth) -
+          parseInt(n.borderRightWidth),
+        i = m(t, 0, e),
+        r = m(t, 1, e),
+        a = i && R(i),
+        l = r && R(r),
+        s = a && parseInt(a.marginLeft) + parseInt(a.marginRight) + X(i).width,
+        c = l && parseInt(l.marginLeft) + parseInt(l.marginRight) + X(r).width;
+      if ("flex" === n.display)
+        return "column" === n.flexDirection ||
+          "column-reverse" === n.flexDirection
+          ? "vertical"
+          : "horizontal";
+      if ("grid" === n.display)
+        return n.gridTemplateColumns.split(" ").length <= 1
+          ? "vertical"
+          : "horizontal";
+      if (i && a.float && "none" !== a.float) {
+        var u = "left" === a.float ? "left" : "right";
+        return !r || ("both" !== l.clear && l.clear !== u)
+          ? "horizontal"
+          : "vertical";
+      }
+      return i &&
+        ("block" === a.display ||
+          "flex" === a.display ||
+          "table" === a.display ||
+          "grid" === a.display ||
+          (o <= s && "none" === n[Tt]) ||
+          (r && "none" === n[Tt] && o < s + c))
+        ? "vertical"
+        : "horizontal";
+    },
+    Nt = function (t) {
+      function s(a, l) {
+        return function (t, e, n, o) {
+          var i =
+            t.options.group.name &&
+            e.options.group.name &&
+            t.options.group.name === e.options.group.name;
+          if (null == a && (l || i)) return !0;
+          if (null == a || !1 === a) return !1;
+          if (l && "clone" === a) return a;
+          if ("function" == typeof a) return s(a(t, e, n, o), l)(t, e, n, o);
+          var r = (l ? t : e).options.group.name;
+          return (
+            !0 === a ||
+            ("string" == typeof a && a === r) ||
+            (a.join && -1 < a.indexOf(r))
+          );
+        };
+      }
+      var e = {},
+        n = t.group;
+      (n && "object" == o(n)) || (n = { name: n }),
+        (e.name = n.name),
+        (e.checkPull = s(n.pull, !0)),
+        (e.checkPut = s(n.put)),
+        (e.revertClone = n.revertClone),
+        (t.group = e);
+    },
+    At = function () {
+      !Mt && U && R(U, "display", "none");
+    },
+    It = function () {
+      !Mt && U && R(U, "display", "");
+    };
+  _t &&
+    document.addEventListener(
+      "click",
+      function (t) {
+        if (mt)
+          return (
+            t.preventDefault(),
+            t.stopPropagation && t.stopPropagation(),
+            t.stopImmediatePropagation && t.stopImmediatePropagation(),
+            (mt = !1)
+          );
+      },
+      !0
+    );
+  function Pt(t) {
+    if (z) {
+      var e = (function (r, a) {
+        var l;
+        return (
+          bt.some(function (t) {
+            if (!B(t)) {
+              var e = X(t),
+                n = t[j].options.emptyInsertThreshold,
+                o = r >= e.left - n && r <= e.right + n,
+                i = a >= e.top - n && a <= e.bottom + n;
+              return n && o && i ? (l = t) : void 0;
+            }
+          }),
+          l
+        );
+      })((t = t.touches ? t.touches[0] : t).clientX, t.clientY);
+      if (e) {
+        var n = {};
+        for (var o in t) t.hasOwnProperty(o) && (n[o] = t[o]);
+        (n.target = n.rootEl = e),
+          (n.preventDefault = void 0),
+          (n.stopPropagation = void 0),
+          e[j]._onDragOver(n);
+      }
+    }
+  }
+  function kt(t) {
+    z && z.parentNode[j]._isOutsideThisEl(t.target);
+  }
+  function Rt(t, e) {
+    if (!t || !t.nodeType || 1 !== t.nodeType)
+      throw "Sortable: `el` must be an HTMLElement, not ".concat(
+        {}.toString.call(t)
+      );
+    (this.el = t), (this.options = e = a({}, e)), (t[j] = this);
+    var n = {
+      group: null,
+      sort: !0,
+      disabled: !1,
+      store: null,
+      handle: null,
+      draggable: /^[uo]l$/i.test(t.nodeName) ? ">li" : ">*",
+      swapThreshold: 1,
+      invertSwap: !1,
+      invertedSwapThreshold: null,
+      removeCloneOnHide: !0,
+      direction: function () {
+        return Ot(t, this.options);
+      },
+      ghostClass: "sortable-ghost",
+      chosenClass: "sortable-chosen",
+      dragClass: "sortable-drag",
+      ignore: "a, img",
+      filter: null,
+      preventOnFilter: !0,
+      animation: 0,
+      easing: null,
+      setData: function (t, e) {
+        t.setData("Text", e.textContent);
+      },
+      dropBubble: !1,
+      dragoverBubble: !1,
+      dataIdAttr: "data-id",
+      delay: 0,
+      delayOnTouchOnly: !1,
+      touchStartThreshold:
+        (Number.parseInt ? Number : window).parseInt(
+          window.devicePixelRatio,
+          10
+        ) || 1,
+      forceFallback: !1,
+      fallbackClass: "sortable-fallback",
+      fallbackOnBody: !1,
+      fallbackTolerance: 0,
+      fallbackOffset: { x: 0, y: 0 },
+      supportPointer:
+        !1 !== Rt.supportPointer && "PointerEvent" in window && !u,
+      emptyInsertThreshold: 5
+    };
+    for (var o in (O.initializePlugins(this, t, n), n)) o in e || (e[o] = n[o]);
+    for (var i in (Nt(e), this))
+      "_" === i.charAt(0) &&
+        "function" == typeof this[i] &&
+        (this[i] = this[i].bind(this));
+    (this.nativeDraggable = !e.forceFallback && xt),
+      this.nativeDraggable && (this.options.touchStartThreshold = 1),
+      e.supportPointer
+        ? d(t, "pointerdown", this._onTapStart)
+        : (d(t, "mousedown", this._onTapStart),
+          d(t, "touchstart", this._onTapStart)),
+      this.nativeDraggable && (d(t, "dragover", this), d(t, "dragenter", this)),
+      bt.push(this.el),
+      e.store && e.store.get && this.sort(e.store.get(this) || []),
+      a(this, T());
+  }
+  function Xt(t, e, n, o, i, r, a, l) {
+    var s,
+      c,
+      u = t[j],
+      d = u.options.onMove;
+    return (
+      !window.CustomEvent || w || E
+        ? (s = document.createEvent("Event")).initEvent("move", !0, !0)
+        : (s = new CustomEvent("move", { bubbles: !0, cancelable: !0 })),
+      (s.to = e),
+      (s.from = t),
+      (s.dragged = n),
+      (s.draggedRect = o),
+      (s.related = i || e),
+      (s.relatedRect = r || X(e)),
+      (s.willInsertAfter = l),
+      (s.originalEvent = a),
+      t.dispatchEvent(s),
+      d && (c = d.call(u, s, a)),
+      c
+    );
+  }
+  function Yt(t) {
+    t.draggable = !1;
+  }
+  function Bt() {
+    Dt = !1;
+  }
+  function Ft(t) {
+    for (
+      var e = t.tagName + t.className + t.src + t.href + t.textContent,
+        n = e.length,
+        o = 0;
+      n--;
+
+    )
+      o += e.charCodeAt(n);
+    return o.toString(36);
+  }
+  function Ht(t) {
+    return setTimeout(t, 0);
+  }
+  function Lt(t) {
+    return clearTimeout(t);
+  }
+  (Rt.prototype = {
+    constructor: Rt,
+    _isOutsideThisEl: function (t) {
+      this.el.contains(t) || t === this.el || (ht = null);
+    },
+    _getDirection: function (t, e) {
+      return "function" == typeof this.options.direction
+        ? this.options.direction.call(this, t, e, z)
+        : this.options.direction;
+    },
+    _onTapStart: function (e) {
+      if (e.cancelable) {
+        var n = this,
+          o = this.el,
+          t = this.options,
+          i = t.preventOnFilter,
+          r = e.type,
+          a =
+            (e.touches && e.touches[0]) ||
+            (e.pointerType && "touch" === e.pointerType && e),
+          l = (a || e).target,
+          s =
+            (e.target.shadowRoot &&
+              ((e.path && e.path[0]) ||
+                (e.composedPath && e.composedPath()[0]))) ||
+            l,
+          c = t.filter;
+        if (
+          ((function (t) {
+            St.length = 0;
+            var e = t.getElementsByTagName("input"),
+              n = e.length;
+            for (; n--; ) {
+              var o = e[n];
+              o.checked && St.push(o);
+            }
+          })(o),
+          !z &&
+            !(
+              (/mousedown|pointerdown/.test(r) && 0 !== e.button) ||
+              t.disabled
+            ) &&
+            !s.isContentEditable &&
+            (this.nativeDraggable ||
+              !u ||
+              !l ||
+              "SELECT" !== l.tagName.toUpperCase()) &&
+            !(((l = P(l, t.draggable, o, !1)) && l.animated) || Z === l))
+        ) {
+          if (((J = F(l)), (et = F(l, t.draggable)), "function" == typeof c)) {
+            if (c.call(this, e, l, this))
+              return (
+                W({
+                  sortable: n,
+                  rootEl: s,
+                  name: "filter",
+                  targetEl: l,
+                  toEl: o,
+                  fromEl: o
+                }),
+                K("filter", n, { evt: e }),
+                void (i && e.cancelable && e.preventDefault())
+              );
+          } else if (
+            c &&
+            (c = c.split(",").some(function (t) {
+              if ((t = P(s, t.trim(), o, !1)))
+                return (
+                  W({
+                    sortable: n,
+                    rootEl: t,
+                    name: "filter",
+                    targetEl: l,
+                    fromEl: o,
+                    toEl: o
+                  }),
+                  K("filter", n, { evt: e }),
+                  !0
+                );
+            }))
+          )
+            return void (i && e.cancelable && e.preventDefault());
+          (t.handle && !P(s, t.handle, o, !1)) ||
+            this._prepareDragStart(e, a, l);
+        }
+      }
+    },
+    _prepareDragStart: function (t, e, n) {
+      var o,
+        i = this,
+        r = i.el,
+        a = i.options,
+        l = r.ownerDocument;
+      if (n && !z && n.parentNode === r) {
+        var s = X(n);
+        if (
+          ((q = r),
+          (G = (z = n).parentNode),
+          (V = z.nextSibling),
+          (Z = n),
+          (ot = a.group),
+          (rt = {
+            target: (Rt.dragged = z),
+            clientX: (e || t).clientX,
+            clientY: (e || t).clientY
+          }),
+          (ct = rt.clientX - s.left),
+          (ut = rt.clientY - s.top),
+          (this._lastX = (e || t).clientX),
+          (this._lastY = (e || t).clientY),
+          (z.style["will-change"] = "all"),
+          (o = function () {
+            K("delayEnded", i, { evt: t }),
+              Rt.eventCanceled
+                ? i._onDrop()
+                : (i._disableDelayedDragEvents(),
+                  !c && i.nativeDraggable && (z.draggable = !0),
+                  i._triggerDragStart(t, e),
+                  W({ sortable: i, name: "choose", originalEvent: t }),
+                  k(z, a.chosenClass, !0));
+          }),
+          a.ignore.split(",").forEach(function (t) {
+            g(z, t.trim(), Yt);
+          }),
+          d(l, "dragover", Pt),
+          d(l, "mousemove", Pt),
+          d(l, "touchmove", Pt),
+          d(l, "mouseup", i._onDrop),
+          d(l, "touchend", i._onDrop),
+          d(l, "touchcancel", i._onDrop),
+          c &&
+            this.nativeDraggable &&
+            ((this.options.touchStartThreshold = 4), (z.draggable = !0)),
+          K("delayStart", this, { evt: t }),
+          !a.delay ||
+            (a.delayOnTouchOnly && !e) ||
+            (this.nativeDraggable && (E || w)))
+        )
+          o();
+        else {
+          if (Rt.eventCanceled) return void this._onDrop();
+          d(l, "mouseup", i._disableDelayedDrag),
+            d(l, "touchend", i._disableDelayedDrag),
+            d(l, "touchcancel", i._disableDelayedDrag),
+            d(l, "mousemove", i._delayedDragTouchMoveHandler),
+            d(l, "touchmove", i._delayedDragTouchMoveHandler),
+            a.supportPointer &&
+              d(l, "pointermove", i._delayedDragTouchMoveHandler),
+            (i._dragStartTimer = setTimeout(o, a.delay));
+        }
+      }
+    },
+    _delayedDragTouchMoveHandler: function (t) {
+      var e = t.touches ? t.touches[0] : t;
+      Math.max(
+        Math.abs(e.clientX - this._lastX),
+        Math.abs(e.clientY - this._lastY)
+      ) >=
+        Math.floor(
+          this.options.touchStartThreshold /
+            ((this.nativeDraggable && window.devicePixelRatio) || 1)
+        ) && this._disableDelayedDrag();
+    },
+    _disableDelayedDrag: function () {
+      z && Yt(z),
+        clearTimeout(this._dragStartTimer),
+        this._disableDelayedDragEvents();
+    },
+    _disableDelayedDragEvents: function () {
+      var t = this.el.ownerDocument;
+      s(t, "mouseup", this._disableDelayedDrag),
+        s(t, "touchend", this._disableDelayedDrag),
+        s(t, "touchcancel", this._disableDelayedDrag),
+        s(t, "mousemove", this._delayedDragTouchMoveHandler),
+        s(t, "touchmove", this._delayedDragTouchMoveHandler),
+        s(t, "pointermove", this._delayedDragTouchMoveHandler);
+    },
+    _triggerDragStart: function (t, e) {
+      (e = e || ("touch" == t.pointerType && t)),
+        !this.nativeDraggable || e
+          ? this.options.supportPointer
+            ? d(document, "pointermove", this._onTouchMove)
+            : d(document, e ? "touchmove" : "mousemove", this._onTouchMove)
+          : (d(z, "dragend", this), d(q, "dragstart", this._onDragStart));
+      try {
+        document.selection
+          ? Ht(function () {
+              document.selection.empty();
+            })
+          : window.getSelection().removeAllRanges();
+      } catch (t) {}
+    },
+    _dragStarted: function (t, e) {
+      if (((vt = !1), q && z)) {
+        K("dragStarted", this, { evt: e }),
+          this.nativeDraggable && d(document, "dragover", kt);
+        var n = this.options;
+        t || k(z, n.dragClass, !1),
+          k(z, n.ghostClass, !0),
+          (Rt.active = this),
+          t && this._appendGhost(),
+          W({ sortable: this, name: "start", originalEvent: e });
+      } else this._nulling();
+    },
+    _emulateDragOver: function () {
+      if (at) {
+        (this._lastX = at.clientX), (this._lastY = at.clientY), At();
+        for (
+          var t = document.elementFromPoint(at.clientX, at.clientY), e = t;
+          t &&
+          t.shadowRoot &&
+          (t = t.shadowRoot.elementFromPoint(at.clientX, at.clientY)) !== e;
+
+        )
+          e = t;
+        if ((z.parentNode[j]._isOutsideThisEl(t), e))
+          do {
+            if (e[j]) {
+              if (
+                e[j]._onDragOver({
+                  clientX: at.clientX,
+                  clientY: at.clientY,
+                  target: t,
+                  rootEl: e
+                }) &&
+                !this.options.dragoverBubble
+              )
+                break;
+            }
+            t = e;
+          } while ((e = e.parentNode));
+        It();
+      }
+    },
+    _onTouchMove: function (t) {
+      if (rt) {
+        var e = this.options,
+          n = e.fallbackTolerance,
+          o = e.fallbackOffset,
+          i = t.touches ? t.touches[0] : t,
+          r = U && v(U, !0),
+          a = U && r && r.a,
+          l = U && r && r.d,
+          s = Ct && gt && b(gt),
+          c =
+            (i.clientX - rt.clientX + o.x) / (a || 1) +
+            (s ? s[0] - Et[0] : 0) / (a || 1),
+          u =
+            (i.clientY - rt.clientY + o.y) / (l || 1) +
+            (s ? s[1] - Et[1] : 0) / (l || 1);
+        if (!Rt.active && !vt) {
+          if (
+            n &&
+            Math.max(
+              Math.abs(i.clientX - this._lastX),
+              Math.abs(i.clientY - this._lastY)
+            ) < n
+          )
+            return;
+          this._onDragStart(t, !0);
+        }
+        if (U) {
+          r
+            ? ((r.e += c - (lt || 0)), (r.f += u - (st || 0)))
+            : (r = { a: 1, b: 0, c: 0, d: 1, e: c, f: u });
+          var d = "matrix("
+            .concat(r.a, ",")
+            .concat(r.b, ",")
+            .concat(r.c, ",")
+            .concat(r.d, ",")
+            .concat(r.e, ",")
+            .concat(r.f, ")");
+          R(U, "webkitTransform", d),
+            R(U, "mozTransform", d),
+            R(U, "msTransform", d),
+            R(U, "transform", d),
+            (lt = c),
+            (st = u),
+            (at = i);
+        }
+        t.cancelable && t.preventDefault();
+      }
+    },
+    _appendGhost: function () {
+      if (!U) {
+        var t = this.options.fallbackOnBody ? document.body : q,
+          e = X(z, !0, Ct, !0, t),
+          n = this.options;
+        if (Ct) {
+          for (
+            gt = t;
+            "static" === R(gt, "position") &&
+            "none" === R(gt, "transform") &&
+            gt !== document;
+
+          )
+            gt = gt.parentNode;
+          gt !== document.body && gt !== document.documentElement
+            ? (gt === document && (gt = A()),
+              (e.top += gt.scrollTop),
+              (e.left += gt.scrollLeft))
+            : (gt = A()),
+            (Et = b(gt));
+        }
+        k((U = z.cloneNode(!0)), n.ghostClass, !1),
+          k(U, n.fallbackClass, !0),
+          k(U, n.dragClass, !0),
+          R(U, "transition", ""),
+          R(U, "transform", ""),
+          R(U, "box-sizing", "border-box"),
+          R(U, "margin", 0),
+          R(U, "top", e.top),
+          R(U, "left", e.left),
+          R(U, "width", e.width),
+          R(U, "height", e.height),
+          R(U, "opacity", "0.8"),
+          R(U, "position", Ct ? "absolute" : "fixed"),
+          R(U, "zIndex", "100000"),
+          R(U, "pointerEvents", "none"),
+          (Rt.ghost = U),
+          t.appendChild(U),
+          R(
+            U,
+            "transform-origin",
+            (ct / parseInt(U.style.width)) * 100 +
+              "% " +
+              (ut / parseInt(U.style.height)) * 100 +
+              "%"
+          );
+      }
+    },
+    _onDragStart: function (t, e) {
+      var n = this,
+        o = t.dataTransfer,
+        i = n.options;
+      K("dragStart", this, { evt: t }),
+        Rt.eventCanceled
+          ? this._onDrop()
+          : (K("setupClone", this),
+            Rt.eventCanceled ||
+              (((Q = S(z)).draggable = !1),
+              (Q.style["will-change"] = ""),
+              this._hideClone(),
+              k(Q, this.options.chosenClass, !1),
+              (Rt.clone = Q)),
+            (n.cloneId = Ht(function () {
+              K("clone", n),
+                Rt.eventCanceled ||
+                  (n.options.removeCloneOnHide || q.insertBefore(Q, z),
+                  n._hideClone(),
+                  W({ sortable: n, name: "clone" }));
+            })),
+            e || k(z, i.dragClass, !0),
+            e
+              ? ((mt = !0), (n._loopId = setInterval(n._emulateDragOver, 50)))
+              : (s(document, "mouseup", n._onDrop),
+                s(document, "touchend", n._onDrop),
+                s(document, "touchcancel", n._onDrop),
+                o &&
+                  ((o.effectAllowed = "move"),
+                  i.setData && i.setData.call(n, o, z)),
+                d(document, "drop", n),
+                R(z, "transform", "translateZ(0)")),
+            (vt = !0),
+            (n._dragStartId = Ht(n._dragStarted.bind(n, e, t))),
+            d(document, "selectstart", n),
+            (dt = !0),
+            u && R(document.body, "user-select", "none"));
+    },
+    _onDragOver: function (n) {
+      var o,
+        i,
+        r,
+        a,
+        l = this.el,
+        s = n.target,
+        e = this.options,
+        t = e.group,
+        c = Rt.active,
+        u = ot === t,
+        d = e.sort,
+        h = it || c,
+        f = this,
+        p = !1;
+      if (!Dt) {
+        if (
+          (void 0 !== n.preventDefault && n.cancelable && n.preventDefault(),
+          (s = P(s, e.draggable, l, !0)),
+          M("dragOver"),
+          Rt.eventCanceled)
+        )
+          return p;
+        if (
+          z.contains(n.target) ||
+          (s.animated && s.animatingX && s.animatingY) ||
+          f._ignoreWhileAnimating === s
+        )
+          return N(!1);
+        if (
+          ((mt = !1),
+          c &&
+            !e.disabled &&
+            (u
+              ? d || (r = !q.contains(z))
+              : it === this ||
+                ((this.lastPutMode = ot.checkPull(this, c, z, n)) &&
+                  t.checkPut(this, c, z, n))))
+        ) {
+          if (
+            ((a = "vertical" === this._getDirection(n, s)),
+            (o = X(z)),
+            M("dragOverValid"),
+            Rt.eventCanceled)
+          )
+            return p;
+          if (r)
+            return (
+              (G = q),
+              O(),
+              this._hideClone(),
+              M("revert"),
+              Rt.eventCanceled || (V ? q.insertBefore(z, V) : q.appendChild(z)),
+              N(!0)
+            );
+          var g = B(l, e.draggable);
+          if (
+            !g ||
+            ((function (t, e, n) {
+              var o = X(B(n.el, n.options.draggable));
+              return e
+                ? t.clientX > o.right + 10 ||
+                    (t.clientX <= o.right &&
+                      t.clientY > o.bottom &&
+                      t.clientX >= o.left)
+                : (t.clientX > o.right && t.clientY > o.top) ||
+                    (t.clientX <= o.right && t.clientY > o.bottom + 10);
+            })(n, a, this) &&
+              !g.animated)
+          ) {
+            if (g === z) return N(!1);
+            if (
+              (g && l === n.target && (s = g),
+              s && (i = X(s)),
+              !1 !== Xt(q, l, z, o, s, i, n, !!s))
+            )
+              return O(), l.appendChild(z), (G = l), A(), N(!0);
+          } else if (s.parentNode === l) {
+            i = X(s);
+            var v,
+              m,
+              b,
+              y = z.parentNode !== l,
+              w = !(function (t, e, n) {
+                var o = n ? t.left : t.top,
+                  i = n ? t.right : t.bottom,
+                  r = n ? t.width : t.height,
+                  a = n ? e.left : e.top,
+                  l = n ? e.right : e.bottom,
+                  s = n ? e.width : e.height;
+                return o === a || i === l || o + r / 2 === a + s / 2;
+              })(
+                (z.animated && z.toRect) || o,
+                (s.animated && s.toRect) || i,
+                a
+              ),
+              E = a ? "top" : "left",
+              D = Y(s, "top", "top") || Y(z, "top", "top"),
+              S = D ? D.scrollTop : void 0;
+            if (
+              (ht !== s &&
+                ((m = i[E]), (yt = !1), (wt = (!w && e.invertSwap) || y)),
+              0 !==
+                (v = (function (t, e, n, o, i, r, a, l) {
+                  var s = o ? t.clientY : t.clientX,
+                    c = o ? n.height : n.width,
+                    u = o ? n.top : n.left,
+                    d = o ? n.bottom : n.right,
+                    h = !1;
+                  if (!a)
+                    if (l && pt < c * i) {
+                      if (
+                        (!yt &&
+                          (1 === ft
+                            ? u + (c * r) / 2 < s
+                            : s < d - (c * r) / 2) &&
+                          (yt = !0),
+                        yt)
+                      )
+                        h = !0;
+                      else if (1 === ft ? s < u + pt : d - pt < s) return -ft;
+                    } else if (
+                      u + (c * (1 - i)) / 2 < s &&
+                      s < d - (c * (1 - i)) / 2
+                    )
+                      return (function (t) {
+                        return F(z) < F(t) ? 1 : -1;
+                      })(e);
+                  if (
+                    (h = h || a) &&
+                    (s < u + (c * r) / 2 || d - (c * r) / 2 < s)
+                  )
+                    return u + c / 2 < s ? 1 : -1;
+                  return 0;
+                })(
+                  n,
+                  s,
+                  i,
+                  a,
+                  w ? 1 : e.swapThreshold,
+                  null == e.invertedSwapThreshold
+                    ? e.swapThreshold
+                    : e.invertedSwapThreshold,
+                  wt,
+                  ht === s
+                )))
+            )
+              for (
+                var _ = F(z);
+                (_ -= v),
+                  (b = G.children[_]) &&
+                    ("none" === R(b, "display") || b === U);
+
+              );
+            if (0 === v || b === s) return N(!1);
+            ft = v;
+            var C = (ht = s).nextElementSibling,
+              T = !1,
+              x = Xt(q, l, z, o, s, i, n, (T = 1 === v));
+            if (!1 !== x)
+              return (
+                (1 !== x && -1 !== x) || (T = 1 === x),
+                (Dt = !0),
+                setTimeout(Bt, 30),
+                O(),
+                T && !C
+                  ? l.appendChild(z)
+                  : s.parentNode.insertBefore(z, T ? C : s),
+                D && L(D, 0, S - D.scrollTop),
+                (G = z.parentNode),
+                void 0 === m || wt || (pt = Math.abs(m - X(s)[E])),
+                A(),
+                N(!0)
+              );
+          }
+          if (l.contains(z)) return N(!1);
+        }
+        return !1;
+      }
+      function M(t, e) {
+        K(
+          t,
+          f,
+          I(
+            {
+              evt: n,
+              isOwner: u,
+              axis: a ? "vertical" : "horizontal",
+              revert: r,
+              dragRect: o,
+              targetRect: i,
+              canSort: d,
+              fromSortable: h,
+              target: s,
+              completed: N,
+              onMove: function (t, e) {
+                return Xt(q, l, z, o, t, X(t), n, e);
+              },
+              changed: A
+            },
+            e
+          )
+        );
+      }
+      function O() {
+        M("dragOverAnimationCapture"),
+          f.captureAnimationState(),
+          f !== h && h.captureAnimationState();
+      }
+      function N(t) {
+        return (
+          M("dragOverCompleted", { insertion: t }),
+          t &&
+            (u ? c._hideClone() : c._showClone(f),
+            f !== h &&
+              (k(z, it ? it.options.ghostClass : c.options.ghostClass, !1),
+              k(z, e.ghostClass, !0)),
+            it !== f && f !== Rt.active
+              ? (it = f)
+              : f === Rt.active && it && (it = null),
+            h === f && (f._ignoreWhileAnimating = s),
+            f.animateAll(function () {
+              M("dragOverAnimationComplete"), (f._ignoreWhileAnimating = null);
+            }),
+            f !== h && (h.animateAll(), (h._ignoreWhileAnimating = null))),
+          ((s === z && !z.animated) || (s === l && !s.animated)) && (ht = null),
+          e.dragoverBubble ||
+            n.rootEl ||
+            s === document ||
+            (z.parentNode[j]._isOutsideThisEl(n.target), t || Pt(n)),
+          !e.dragoverBubble && n.stopPropagation && n.stopPropagation(),
+          (p = !0)
+        );
+      }
+      function A() {
+        (tt = F(z)),
+          (nt = F(z, e.draggable)),
+          W({
+            sortable: f,
+            name: "change",
+            toEl: l,
+            newIndex: tt,
+            newDraggableIndex: nt,
+            originalEvent: n
+          });
+      }
+    },
+    _ignoreWhileAnimating: null,
+    _offMoveEvents: function () {
+      s(document, "mousemove", this._onTouchMove),
+        s(document, "touchmove", this._onTouchMove),
+        s(document, "pointermove", this._onTouchMove),
+        s(document, "dragover", Pt),
+        s(document, "mousemove", Pt),
+        s(document, "touchmove", Pt);
+    },
+    _offUpEvents: function () {
+      var t = this.el.ownerDocument;
+      s(t, "mouseup", this._onDrop),
+        s(t, "touchend", this._onDrop),
+        s(t, "pointerup", this._onDrop),
+        s(t, "touchcancel", this._onDrop),
+        s(document, "selectstart", this);
+    },
+    _onDrop: function (t) {
+      var e = this.el,
+        n = this.options;
+      (tt = F(z)),
+        (nt = F(z, n.draggable)),
+        K("drop", this, { evt: t }),
+        (G = z && z.parentNode),
+        (tt = F(z)),
+        (nt = F(z, n.draggable)),
+        Rt.eventCanceled ||
+          ((yt = wt = vt = !1),
+          clearInterval(this._loopId),
+          clearTimeout(this._dragStartTimer),
+          Lt(this.cloneId),
+          Lt(this._dragStartId),
+          this.nativeDraggable &&
+            (s(document, "drop", this), s(e, "dragstart", this._onDragStart)),
+          this._offMoveEvents(),
+          this._offUpEvents(),
+          u && R(document.body, "user-select", ""),
+          R(z, "transform", ""),
+          t &&
+            (dt &&
+              (t.cancelable && t.preventDefault(),
+              n.dropBubble || t.stopPropagation()),
+            U && U.parentNode && U.parentNode.removeChild(U),
+            (q === G || (it && "clone" !== it.lastPutMode)) &&
+              Q &&
+              Q.parentNode &&
+              Q.parentNode.removeChild(Q),
+            z &&
+              (this.nativeDraggable && s(z, "dragend", this),
+              Yt(z),
+              (z.style["will-change"] = ""),
+              dt &&
+                !vt &&
+                k(z, it ? it.options.ghostClass : this.options.ghostClass, !1),
+              k(z, this.options.chosenClass, !1),
+              W({
+                sortable: this,
+                name: "unchoose",
+                toEl: G,
+                newIndex: null,
+                newDraggableIndex: null,
+                originalEvent: t
+              }),
+              q !== G
+                ? (0 <= tt &&
+                    (W({
+                      rootEl: G,
+                      name: "add",
+                      toEl: G,
+                      fromEl: q,
+                      originalEvent: t
+                    }),
+                    W({
+                      sortable: this,
+                      name: "remove",
+                      toEl: G,
+                      originalEvent: t
+                    }),
+                    W({
+                      rootEl: G,
+                      name: "sort",
+                      toEl: G,
+                      fromEl: q,
+                      originalEvent: t
+                    }),
+                    W({
+                      sortable: this,
+                      name: "sort",
+                      toEl: G,
+                      originalEvent: t
+                    })),
+                  it && it.save())
+                : tt !== J &&
+                  0 <= tt &&
+                  (W({
+                    sortable: this,
+                    name: "update",
+                    toEl: G,
+                    originalEvent: t
+                  }),
+                  W({
+                    sortable: this,
+                    name: "sort",
+                    toEl: G,
+                    originalEvent: t
+                  })),
+              Rt.active &&
+                ((null != tt && -1 !== tt) || ((tt = J), (nt = et)),
+                W({ sortable: this, name: "end", toEl: G, originalEvent: t }),
+                this.save())))),
+        this._nulling();
+    },
+    _nulling: function () {
+      K("nulling", this),
+        (q =
+          z =
+          G =
+          U =
+          V =
+          Q =
+          Z =
+          $ =
+          rt =
+          at =
+          dt =
+          tt =
+          nt =
+          J =
+          et =
+          ht =
+          ft =
+          it =
+          ot =
+          Rt.dragged =
+          Rt.ghost =
+          Rt.clone =
+          Rt.active =
+            null),
+        St.forEach(function (t) {
+          t.checked = !0;
+        }),
+        (St.length = lt = st = 0);
+    },
+    handleEvent: function (t) {
+      switch (t.type) {
+        case "drop":
+        case "dragend":
+          this._onDrop(t);
+          break;
+        case "dragenter":
+        case "dragover":
+          z &&
+            (this._onDragOver(t),
+            (function (t) {
+              t.dataTransfer && (t.dataTransfer.dropEffect = "move");
+              t.cancelable && t.preventDefault();
+            })(t));
+          break;
+        case "selectstart":
+          t.preventDefault();
+      }
+    },
+    toArray: function () {
+      for (
+        var t,
+          e = [],
+          n = this.el.children,
+          o = 0,
+          i = n.length,
+          r = this.options;
+        o < i;
+        o++
+      )
+        P((t = n[o]), r.draggable, this.el, !1) &&
+          e.push(t.getAttribute(r.dataIdAttr) || Ft(t));
+      return e;
+    },
+    sort: function (t, e) {
+      var o = {},
+        i = this.el;
+      this.toArray().forEach(function (t, e) {
+        var n = i.children[e];
+        P(n, this.options.draggable, i, !1) && (o[t] = n);
+      }, this),
+        e && this.captureAnimationState(),
+        t.forEach(function (t) {
+          o[t] && (i.removeChild(o[t]), i.appendChild(o[t]));
+        }),
+        e && this.animateAll();
+    },
+    save: function () {
+      var t = this.options.store;
+      t && t.set && t.set(this);
+    },
+    closest: function (t, e) {
+      return P(t, e || this.options.draggable, this.el, !1);
+    },
+    option: function (t, e) {
+      var n = this.options;
+      if (void 0 === e) return n[t];
+      var o = O.modifyOption(this, t, e);
+      (n[t] = void 0 !== o ? o : e), "group" === t && Nt(n);
+    },
+    destroy: function () {
+      K("destroy", this);
+      var t = this.el;
+      (t[j] = null),
+        s(t, "mousedown", this._onTapStart),
+        s(t, "touchstart", this._onTapStart),
+        s(t, "pointerdown", this._onTapStart),
+        this.nativeDraggable &&
+          (s(t, "dragover", this), s(t, "dragenter", this)),
+        Array.prototype.forEach.call(
+          t.querySelectorAll("[draggable]"),
+          function (t) {
+            t.removeAttribute("draggable");
+          }
+        ),
+        this._onDrop(),
+        this._disableDelayedDragEvents(),
+        bt.splice(bt.indexOf(this.el), 1),
+        (this.el = t = null);
+    },
+    _hideClone: function () {
+      if (!$) {
+        if ((K("hideClone", this), Rt.eventCanceled)) return;
+        R(Q, "display", "none"),
+          this.options.removeCloneOnHide &&
+            Q.parentNode &&
+            Q.parentNode.removeChild(Q),
+          ($ = !0);
+      }
+    },
+    _showClone: function (t) {
+      if ("clone" === t.lastPutMode) {
+        if ($) {
+          if ((K("showClone", this), Rt.eventCanceled)) return;
+          z.parentNode != q || this.options.group.revertClone
+            ? V
+              ? q.insertBefore(Q, V)
+              : q.appendChild(Q)
+            : q.insertBefore(Q, z),
+            this.options.group.revertClone && this.animate(z, Q),
+            R(Q, "display", ""),
+            ($ = !1);
+        }
+      } else this._hideClone();
+    }
+  }),
+    _t &&
+      d(document, "touchmove", function (t) {
+        (Rt.active || vt) && t.cancelable && t.preventDefault();
+      }),
+    (Rt.utils = {
+      on: d,
+      off: s,
+      css: R,
+      find: g,
+      is: function (t, e) {
+        return !!P(t, e, t, !1);
+      },
+      extend: function (t, e) {
+        if (t && e) for (var n in e) e.hasOwnProperty(n) && (t[n] = e[n]);
+        return t;
+      },
+      throttle: D,
+      closest: P,
+      toggleClass: k,
+      clone: S,
+      index: F,
+      nextTick: Ht,
+      cancelNextTick: Lt,
+      detectDirection: Ot,
+      getChild: m
+    }),
+    (Rt.get = function (t) {
+      return t[j];
+    }),
+    (Rt.mount = function () {
+      for (var t = arguments.length, e = new Array(t), n = 0; n < t; n++)
+        e[n] = arguments[n];
+      e[0].constructor === Array && (e = e[0]),
+        e.forEach(function (t) {
+          if (!t.prototype || !t.prototype.constructor)
+            throw "Sortable: Mounted plugin must be a constructor function, not ".concat(
+              {}.toString.call(t)
+            );
+          t.utils && (Rt.utils = I({}, Rt.utils, t.utils)), O.mount(t);
+        });
+    }),
+    (Rt.create = function (t, e) {
+      return new Rt(t, e);
+    });
+  var jt,
+    Kt,
+    Wt,
+    zt,
+    Gt,
+    Ut,
+    qt = [],
+    Vt = !(Rt.version = "1.13.0");
+  function Zt() {
+    qt.forEach(function (t) {
+      clearInterval(t.pid);
+    }),
+      (qt = []);
+  }
+  function Qt() {
+    clearInterval(Ut);
+  }
+  function $t(t) {
+    var e = t.originalEvent,
+      n = t.putSortable,
+      o = t.dragEl,
+      i = t.activeSortable,
+      r = t.dispatchSortableEvent,
+      a = t.hideGhostForTarget,
+      l = t.unhideGhostForTarget;
+    if (e) {
+      var s = n || i;
+      a();
+      var c =
+          e.changedTouches && e.changedTouches.length ? e.changedTouches[0] : e,
+        u = document.elementFromPoint(c.clientX, c.clientY);
+      l(),
+        s &&
+          !s.el.contains(u) &&
+          (r("spill"), this.onSpill({ dragEl: o, putSortable: n }));
+    }
+  }
+  var Jt,
+    te = D(function (n, t, e, o) {
+      if (t.scroll) {
+        var i,
+          r = (n.touches ? n.touches[0] : n).clientX,
+          a = (n.touches ? n.touches[0] : n).clientY,
+          l = t.scrollSensitivity,
+          s = t.scrollSpeed,
+          c = A(),
+          u = !1;
+        Kt !== e &&
+          ((Kt = e),
+          Zt(),
+          (jt = t.scroll),
+          (i = t.scrollFn),
+          !0 === jt && (jt = H(e, !0)));
+        var d = 0,
+          h = jt;
+        do {
+          var f = h,
+            p = X(f),
+            g = p.top,
+            v = p.bottom,
+            m = p.left,
+            b = p.right,
+            y = p.width,
+            w = p.height,
+            E = void 0,
+            D = void 0,
+            S = f.scrollWidth,
+            _ = f.scrollHeight,
+            C = R(f),
+            T = f.scrollLeft,
+            x = f.scrollTop;
+          D =
+            f === c
+              ? ((E =
+                  y < S &&
+                  ("auto" === C.overflowX ||
+                    "scroll" === C.overflowX ||
+                    "visible" === C.overflowX)),
+                w < _ &&
+                  ("auto" === C.overflowY ||
+                    "scroll" === C.overflowY ||
+                    "visible" === C.overflowY))
+              : ((E =
+                  y < S &&
+                  ("auto" === C.overflowX || "scroll" === C.overflowX)),
+                w < _ && ("auto" === C.overflowY || "scroll" === C.overflowY));
+          var M =
+              E &&
+              (Math.abs(b - r) <= l && T + y < S) -
+                (Math.abs(m - r) <= l && !!T),
+            O =
+              D &&
+              (Math.abs(v - a) <= l && x + w < _) -
+                (Math.abs(g - a) <= l && !!x);
+          if (!qt[d]) for (var N = 0; N <= d; N++) qt[N] || (qt[N] = {});
+          (qt[d].vx == M && qt[d].vy == O && qt[d].el === f) ||
+            ((qt[d].el = f),
+            (qt[d].vx = M),
+            (qt[d].vy = O),
+            clearInterval(qt[d].pid),
+            (0 == M && 0 == O) ||
+              ((u = !0),
+              (qt[d].pid = setInterval(
+                function () {
+                  o && 0 === this.layer && Rt.active._onTouchMove(Gt);
+                  var t = qt[this.layer].vy ? qt[this.layer].vy * s : 0,
+                    e = qt[this.layer].vx ? qt[this.layer].vx * s : 0;
+                  ("function" == typeof i &&
+                    "continue" !==
+                      i.call(
+                        Rt.dragged.parentNode[j],
+                        e,
+                        t,
+                        n,
+                        Gt,
+                        qt[this.layer].el
+                      )) ||
+                    L(qt[this.layer].el, e, t);
+                }.bind({ layer: d }),
+                24
+              )))),
+            d++;
+        } while (t.bubbleScroll && h !== c && (h = H(h, !1)));
+        Vt = u;
+      }
+    }, 30);
+  function ee() {}
+  function ne() {}
+  (ee.prototype = {
+    startIndex: null,
+    dragStart: function (t) {
+      var e = t.oldDraggableIndex;
+      this.startIndex = e;
+    },
+    onSpill: function (t) {
+      var e = t.dragEl,
+        n = t.putSortable;
+      this.sortable.captureAnimationState(), n && n.captureAnimationState();
+      var o = m(this.sortable.el, this.startIndex, this.options);
+      o ? this.sortable.el.insertBefore(e, o) : this.sortable.el.appendChild(e),
+        this.sortable.animateAll(),
+        n && n.animateAll();
+    },
+    drop: $t
+  }),
+    a(ee, { pluginName: "revertOnSpill" }),
+    (ne.prototype = {
+      onSpill: function (t) {
+        var e = t.dragEl,
+          n = t.putSortable || this.sortable;
+        n.captureAnimationState(),
+          e.parentNode && e.parentNode.removeChild(e),
+          n.animateAll();
+      },
+      drop: $t
+    }),
+    a(ne, { pluginName: "removeOnSpill" });
+  var oe,
+    ie,
+    re,
+    ae,
+    le,
+    se = [],
+    ce = [],
+    ue = !1,
+    de = !1,
+    he = !1;
+  function fe(o, i) {
+    ce.forEach(function (t, e) {
+      var n = i.children[t.sortableIndex + (o ? Number(e) : 0)];
+      n ? i.insertBefore(t, n) : i.appendChild(t);
+    });
+  }
+  function pe() {
+    se.forEach(function (t) {
+      t !== re && t.parentNode && t.parentNode.removeChild(t);
+    });
+  }
+  return (
+    Rt.mount(
+      new (function () {
+        function t() {
+          for (var t in ((this.defaults = {
+            scroll: !0,
+            scrollSensitivity: 30,
+            scrollSpeed: 10,
+            bubbleScroll: !0
+          }),
+          this))
+            "_" === t.charAt(0) &&
+              "function" == typeof this[t] &&
+              (this[t] = this[t].bind(this));
+        }
+        return (
+          (t.prototype = {
+            dragStarted: function (t) {
+              var e = t.originalEvent;
+              this.sortable.nativeDraggable
+                ? d(document, "dragover", this._handleAutoScroll)
+                : this.options.supportPointer
+                ? d(document, "pointermove", this._handleFallbackAutoScroll)
+                : e.touches
+                ? d(document, "touchmove", this._handleFallbackAutoScroll)
+                : d(document, "mousemove", this._handleFallbackAutoScroll);
+            },
+            dragOverCompleted: function (t) {
+              var e = t.originalEvent;
+              this.options.dragOverBubble ||
+                e.rootEl ||
+                this._handleAutoScroll(e);
+            },
+            drop: function () {
+              this.sortable.nativeDraggable
+                ? s(document, "dragover", this._handleAutoScroll)
+                : (s(document, "pointermove", this._handleFallbackAutoScroll),
+                  s(document, "touchmove", this._handleFallbackAutoScroll),
+                  s(document, "mousemove", this._handleFallbackAutoScroll)),
+                Qt(),
+                Zt(),
+                clearTimeout(f),
+                (f = void 0);
+            },
+            nulling: function () {
+              (Gt = Kt = jt = Vt = Ut = Wt = zt = null), (qt.length = 0);
+            },
+            _handleFallbackAutoScroll: function (t) {
+              this._handleAutoScroll(t, !0);
+            },
+            _handleAutoScroll: function (e, n) {
+              var o = this,
+                i = (e.touches ? e.touches[0] : e).clientX,
+                r = (e.touches ? e.touches[0] : e).clientY,
+                t = document.elementFromPoint(i, r);
+              if (((Gt = e), n || E || w || u)) {
+                te(e, this.options, t, n);
+                var a = H(t, !0);
+                !Vt ||
+                  (Ut && i === Wt && r === zt) ||
+                  (Ut && Qt(),
+                  (Ut = setInterval(function () {
+                    var t = H(document.elementFromPoint(i, r), !0);
+                    t !== a && ((a = t), Zt()), te(e, o.options, t, n);
+                  }, 10)),
+                  (Wt = i),
+                  (zt = r));
+              } else {
+                if (!this.options.bubbleScroll || H(t, !0) === A())
+                  return void Zt();
+                te(e, this.options, H(t, !1), !1);
+              }
+            }
+          }),
+          a(t, { pluginName: "scroll", initializeByDefault: !0 })
+        );
+      })()
+    ),
+    Rt.mount(ne, ee),
+    Rt.mount(
+      new (function () {
+        function t() {
+          this.defaults = { swapClass: "sortable-swap-highlight" };
+        }
+        return (
+          (t.prototype = {
+            dragStart: function (t) {
+              var e = t.dragEl;
+              Jt = e;
+            },
+            dragOverValid: function (t) {
+              var e = t.completed,
+                n = t.target,
+                o = t.onMove,
+                i = t.activeSortable,
+                r = t.changed,
+                a = t.cancel;
+              if (i.options.swap) {
+                var l = this.sortable.el,
+                  s = this.options;
+                if (n && n !== l) {
+                  var c = Jt;
+                  (Jt = !1 !== o(n) ? (k(n, s.swapClass, !0), n) : null),
+                    c && c !== Jt && k(c, s.swapClass, !1);
+                }
+                r(), e(!0), a();
+              }
+            },
+            drop: function (t) {
+              var e = t.activeSortable,
+                n = t.putSortable,
+                o = t.dragEl,
+                i = n || this.sortable,
+                r = this.options;
+              Jt && k(Jt, r.swapClass, !1),
+                Jt &&
+                  (r.swap || (n && n.options.swap)) &&
+                  o !== Jt &&
+                  (i.captureAnimationState(),
+                  i !== e && e.captureAnimationState(),
+                  (function (t, e) {
+                    var n,
+                      o,
+                      i = t.parentNode,
+                      r = e.parentNode;
+                    if (!i || !r || i.isEqualNode(e) || r.isEqualNode(t))
+                      return;
+                    (n = F(t)), (o = F(e)), i.isEqualNode(r) && n < o && o++;
+                    i.insertBefore(e, i.children[n]),
+                      r.insertBefore(t, r.children[o]);
+                  })(o, Jt),
+                  i.animateAll(),
+                  i !== e && e.animateAll());
+            },
+            nulling: function () {
+              Jt = null;
+            }
+          }),
+          a(t, {
+            pluginName: "swap",
+            eventProperties: function () {
+              return { swapItem: Jt };
+            }
+          })
+        );
+      })()
+    ),
+    Rt.mount(
+      new (function () {
+        function t(o) {
+          for (var t in this)
+            "_" === t.charAt(0) &&
+              "function" == typeof this[t] &&
+              (this[t] = this[t].bind(this));
+          o.options.supportPointer
+            ? d(document, "pointerup", this._deselectMultiDrag)
+            : (d(document, "mouseup", this._deselectMultiDrag),
+              d(document, "touchend", this._deselectMultiDrag)),
+            d(document, "keydown", this._checkKeyDown),
+            d(document, "keyup", this._checkKeyUp),
+            (this.defaults = {
+              selectedClass: "sortable-selected",
+              multiDragKey: null,
+              setData: function (t, e) {
+                var n = "";
+                se.length && ie === o
+                  ? se.forEach(function (t, e) {
+                      n += (e ? ", " : "") + t.textContent;
+                    })
+                  : (n = e.textContent),
+                  t.setData("Text", n);
+              }
+            });
+        }
+        return (
+          (t.prototype = {
+            multiDragKeyDown: !1,
+            isMultiDrag: !1,
+            delayStartGlobal: function (t) {
+              var e = t.dragEl;
+              re = e;
+            },
+            delayEnded: function () {
+              this.isMultiDrag = ~se.indexOf(re);
+            },
+            setupClone: function (t) {
+              var e = t.sortable,
+                n = t.cancel;
+              if (this.isMultiDrag) {
+                for (var o = 0; o < se.length; o++)
+                  ce.push(S(se[o])),
+                    (ce[o].sortableIndex = se[o].sortableIndex),
+                    (ce[o].draggable = !1),
+                    (ce[o].style["will-change"] = ""),
+                    k(ce[o], this.options.selectedClass, !1),
+                    se[o] === re && k(ce[o], this.options.chosenClass, !1);
+                e._hideClone(), n();
+              }
+            },
+            clone: function (t) {
+              var e = t.sortable,
+                n = t.rootEl,
+                o = t.dispatchSortableEvent,
+                i = t.cancel;
+              this.isMultiDrag &&
+                (this.options.removeCloneOnHide ||
+                  (se.length && ie === e && (fe(!0, n), o("clone"), i())));
+            },
+            showClone: function (t) {
+              var e = t.cloneNowShown,
+                n = t.rootEl,
+                o = t.cancel;
+              this.isMultiDrag &&
+                (fe(!1, n),
+                ce.forEach(function (t) {
+                  R(t, "display", "");
+                }),
+                e(),
+                (le = !1),
+                o());
+            },
+            hideClone: function (t) {
+              var e = this,
+                n = (t.sortable, t.cloneNowHidden),
+                o = t.cancel;
+              this.isMultiDrag &&
+                (ce.forEach(function (t) {
+                  R(t, "display", "none"),
+                    e.options.removeCloneOnHide &&
+                      t.parentNode &&
+                      t.parentNode.removeChild(t);
+                }),
+                n(),
+                (le = !0),
+                o());
+            },
+            dragStartGlobal: function (t) {
+              t.sortable;
+              !this.isMultiDrag && ie && ie.multiDrag._deselectMultiDrag(),
+                se.forEach(function (t) {
+                  t.sortableIndex = F(t);
+                }),
+                (se = se.sort(function (t, e) {
+                  return t.sortableIndex - e.sortableIndex;
+                })),
+                (he = !0);
+            },
+            dragStarted: function (t) {
+              var e = this,
+                n = t.sortable;
+              if (this.isMultiDrag) {
+                if (
+                  this.options.sort &&
+                  (n.captureAnimationState(), this.options.animation)
+                ) {
+                  se.forEach(function (t) {
+                    t !== re && R(t, "position", "absolute");
+                  });
+                  var o = X(re, !1, !0, !0);
+                  se.forEach(function (t) {
+                    t !== re && _(t, o);
+                  }),
+                    (ue = de = !0);
+                }
+                n.animateAll(function () {
+                  (ue = de = !1),
+                    e.options.animation &&
+                      se.forEach(function (t) {
+                        C(t);
+                      }),
+                    e.options.sort && pe();
+                });
+              }
+            },
+            dragOver: function (t) {
+              var e = t.target,
+                n = t.completed,
+                o = t.cancel;
+              de && ~se.indexOf(e) && (n(!1), o());
+            },
+            revert: function (t) {
+              var e = t.fromSortable,
+                n = t.rootEl,
+                o = t.sortable,
+                i = t.dragRect;
+              1 < se.length &&
+                (se.forEach(function (t) {
+                  o.addAnimationState({ target: t, rect: de ? X(t) : i }),
+                    C(t),
+                    (t.fromRect = i),
+                    e.removeAnimationState(t);
+                }),
+                (de = !1),
+                (function (o, i) {
+                  se.forEach(function (t, e) {
+                    var n = i.children[t.sortableIndex + (o ? Number(e) : 0)];
+                    n ? i.insertBefore(t, n) : i.appendChild(t);
+                  });
+                })(!this.options.removeCloneOnHide, n));
+            },
+            dragOverCompleted: function (t) {
+              var e = t.sortable,
+                n = t.isOwner,
+                o = t.insertion,
+                i = t.activeSortable,
+                r = t.parentEl,
+                a = t.putSortable,
+                l = this.options;
+              if (o) {
+                if (
+                  (n && i._hideClone(),
+                  (ue = !1),
+                  l.animation &&
+                    1 < se.length &&
+                    (de || (!n && !i.options.sort && !a)))
+                ) {
+                  var s = X(re, !1, !0, !0);
+                  se.forEach(function (t) {
+                    t !== re && (_(t, s), r.appendChild(t));
+                  }),
+                    (de = !0);
+                }
+                if (!n)
+                  if ((de || pe(), 1 < se.length)) {
+                    var c = le;
+                    i._showClone(e),
+                      i.options.animation &&
+                        !le &&
+                        c &&
+                        ce.forEach(function (t) {
+                          i.addAnimationState({ target: t, rect: ae }),
+                            (t.fromRect = ae),
+                            (t.thisAnimationDuration = null);
+                        });
+                  } else i._showClone(e);
+              }
+            },
+            dragOverAnimationCapture: function (t) {
+              var e = t.dragRect,
+                n = t.isOwner,
+                o = t.activeSortable;
+              if (
+                (se.forEach(function (t) {
+                  t.thisAnimationDuration = null;
+                }),
+                o.options.animation && !n && o.multiDrag.isMultiDrag)
+              ) {
+                ae = a({}, e);
+                var i = v(re, !0);
+                (ae.top -= i.f), (ae.left -= i.e);
+              }
+            },
+            dragOverAnimationComplete: function () {
+              de && ((de = !1), pe());
+            },
+            drop: function (t) {
+              var e = t.originalEvent,
+                n = t.rootEl,
+                o = t.parentEl,
+                i = t.sortable,
+                r = t.dispatchSortableEvent,
+                a = t.oldIndex,
+                l = t.putSortable,
+                s = l || this.sortable;
+              if (e) {
+                var c = this.options,
+                  u = o.children;
+                if (!he)
+                  if (
+                    (c.multiDragKey &&
+                      !this.multiDragKeyDown &&
+                      this._deselectMultiDrag(),
+                    k(re, c.selectedClass, !~se.indexOf(re)),
+                    ~se.indexOf(re))
+                  )
+                    se.splice(se.indexOf(re), 1),
+                      (oe = null),
+                      N({
+                        sortable: i,
+                        rootEl: n,
+                        name: "deselect",
+                        targetEl: re,
+                        originalEvt: e
+                      });
+                  else {
+                    if (
+                      (se.push(re),
+                      N({
+                        sortable: i,
+                        rootEl: n,
+                        name: "select",
+                        targetEl: re,
+                        originalEvt: e
+                      }),
+                      e.shiftKey && oe && i.el.contains(oe))
+                    ) {
+                      var d,
+                        h,
+                        f = F(oe),
+                        p = F(re);
+                      if (~f && ~p && f !== p)
+                        for (
+                          d = f < p ? ((h = f), p) : ((h = p), f + 1);
+                          h < d;
+                          h++
+                        )
+                          ~se.indexOf(u[h]) ||
+                            (k(u[h], c.selectedClass, !0),
+                            se.push(u[h]),
+                            N({
+                              sortable: i,
+                              rootEl: n,
+                              name: "select",
+                              targetEl: u[h],
+                              originalEvt: e
+                            }));
+                    } else oe = re;
+                    ie = s;
+                  }
+                if (he && this.isMultiDrag) {
+                  if ((o[j].options.sort || o !== n) && 1 < se.length) {
+                    var g = X(re),
+                      v = F(re, ":not(." + this.options.selectedClass + ")");
+                    if (
+                      (!ue && c.animation && (re.thisAnimationDuration = null),
+                      s.captureAnimationState(),
+                      !ue &&
+                        (c.animation &&
+                          ((re.fromRect = g),
+                          se.forEach(function (t) {
+                            if (((t.thisAnimationDuration = null), t !== re)) {
+                              var e = de ? X(t) : g;
+                              (t.fromRect = e),
+                                s.addAnimationState({ target: t, rect: e });
+                            }
+                          })),
+                        pe(),
+                        se.forEach(function (t) {
+                          u[v] ? o.insertBefore(t, u[v]) : o.appendChild(t),
+                            v++;
+                        }),
+                        a === F(re)))
+                    ) {
+                      var m = !1;
+                      se.forEach(function (t) {
+                        t.sortableIndex === F(t) || (m = !0);
+                      }),
+                        m && r("update");
+                    }
+                    se.forEach(function (t) {
+                      C(t);
+                    }),
+                      s.animateAll();
+                  }
+                  ie = s;
+                }
+                (n === o || (l && "clone" !== l.lastPutMode)) &&
+                  ce.forEach(function (t) {
+                    t.parentNode && t.parentNode.removeChild(t);
+                  });
+              }
+            },
+            nullingGlobal: function () {
+              (this.isMultiDrag = he = !1), (ce.length = 0);
+            },
+            destroyGlobal: function () {
+              this._deselectMultiDrag(),
+                s(document, "pointerup", this._deselectMultiDrag),
+                s(document, "mouseup", this._deselectMultiDrag),
+                s(document, "touchend", this._deselectMultiDrag),
+                s(document, "keydown", this._checkKeyDown),
+                s(document, "keyup", this._checkKeyUp);
+            },
+            _deselectMultiDrag: function (t) {
+              if (
+                !(
+                  (void 0 !== he && he) ||
+                  ie !== this.sortable ||
+                  (t &&
+                    P(
+                      t.target,
+                      this.options.draggable,
+                      this.sortable.el,
+                      !1
+                    )) ||
+                  (t && 0 !== t.button)
+                )
+              )
+                for (; se.length; ) {
+                  var e = se[0];
+                  k(e, this.options.selectedClass, !1),
+                    se.shift(),
+                    N({
+                      sortable: this.sortable,
+                      rootEl: this.sortable.el,
+                      name: "deselect",
+                      targetEl: e,
+                      originalEvt: t
+                    });
+                }
+            },
+            _checkKeyDown: function (t) {
+              t.key === this.options.multiDragKey &&
+                (this.multiDragKeyDown = !0);
+            },
+            _checkKeyUp: function (t) {
+              t.key === this.options.multiDragKey &&
+                (this.multiDragKeyDown = !1);
+            }
+          }),
+          a(t, {
+            pluginName: "multiDrag",
+            utils: {
+              select: function (t) {
+                var e = t.parentNode[j];
+                e &&
+                  e.options.multiDrag &&
+                  !~se.indexOf(t) &&
+                  (ie &&
+                    ie !== e &&
+                    (ie.multiDrag._deselectMultiDrag(), (ie = e)),
+                  k(t, e.options.selectedClass, !0),
+                  se.push(t));
+              },
+              deselect: function (t) {
+                var e = t.parentNode[j],
+                  n = se.indexOf(t);
+                e &&
+                  e.options.multiDrag &&
+                  ~n &&
+                  (k(t, e.options.selectedClass, !1), se.splice(n, 1));
+              }
+            },
+            eventProperties: function () {
+              var n = this,
+                o = [],
+                i = [];
+              return (
+                se.forEach(function (t) {
+                  var e;
+                  o.push({ multiDragElement: t, index: t.sortableIndex }),
+                    (e =
+                      de && t !== re
+                        ? -1
+                        : de
+                        ? F(t, ":not(." + n.options.selectedClass + ")")
+                        : F(t)),
+                    i.push({ multiDragElement: t, index: e });
+                }),
+                {
+                  items: e(se),
+                  clones: [].concat(ce),
+                  oldIndicies: o,
+                  newIndicies: i
+                }
+              );
+            },
+            optionListeners: {
+              multiDragKey: function (t) {
+                return (
+                  "ctrl" === (t = t.toLowerCase())
+                    ? (t = "Control")
+                    : 1 < t.length &&
+                      (t = t.charAt(0).toUpperCase() + t.substr(1)),
+                  t
+                );
+              }
+            }
+          })
+        );
+      })()
+    ),
+    Rt
+  );
+});
diff --git a/src/views/components/button/index.vue b/src/views/components/button/index.vue
index e887f5d41..d086c4d3e 100644
--- a/src/views/components/button/index.vue
+++ b/src/views/components/button/index.vue
@@ -1,24 +1,17 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const url = ref(
+  process.env.NODE_ENV === "production"
+    ? "/manages/html/button.html"
+    : "/html/button.html"
+);
+</script>
+
 <template>
   <iframe :src="url" frameborder="0" class="iframe"></iframe>
 </template>
 
-<script lang="ts">
-import { ref } from "vue";
-export default {
-  name: "reButton",
-  setup() {
-    const url = ref(
-      process.env.NODE_ENV === "production"
-        ? "/manages/html/button.html"
-        : "/html/button.html"
-    );
-    return {
-      url
-    };
-  }
-};
-</script>
-
 <style scoped>
 .iframe {
   width: 98%;
diff --git a/src/views/components/contextmenu/index.vue b/src/views/components/contextmenu/index.vue
index ce58e43a3..8dbde0f41 100644
--- a/src/views/components/contextmenu/index.vue
+++ b/src/views/components/contextmenu/index.vue
@@ -1,3 +1,9 @@
+<script setup lang="ts">
+import basic from "./basic.vue";
+import menuGroup from "./menuGroup.vue";
+import menuDynamic from "./menuDynamic.vue";
+</script>
+
 <template>
   <div style="margin: 10px">
     <el-row :gutter="24">
@@ -16,20 +22,3 @@
     </el-row>
   </div>
 </template>
-
-<script lang="ts">
-import basic from "./basic.vue";
-import menuGroup from "./menuGroup.vue";
-import menuDynamic from "./menuDynamic.vue";
-export default {
-  name: "reContextmenu",
-  components: {
-    basic,
-    menuGroup,
-    menuDynamic
-  },
-  setup() {
-    return {};
-  }
-};
-</script>
diff --git a/src/views/components/count-to/index.vue b/src/views/components/count-to/index.vue
index 99951b36e..6296cc3c2 100644
--- a/src/views/components/count-to/index.vue
+++ b/src/views/components/count-to/index.vue
@@ -1,3 +1,7 @@
+<script setup lang="ts">
+import { ReNormalCountTo, ReboundCountTo } from "/@/components/ReCountTo";
+</script>
+
 <template>
   <div style="margin: 10px">
     <el-row :gutter="24">
@@ -30,21 +34,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { ReNormalCountTo, ReboundCountTo } from "/@/components/ReCountTo";
-
-export default {
-  name: "reCountTo",
-  components: {
-    ReNormalCountTo,
-    ReboundCountTo
-  },
-  setup() {
-    return {};
-  }
-};
-</script>
-
 <style lang="scss" scoped>
 .flex {
   display: flex;
diff --git a/src/views/components/cropping/index.vue b/src/views/components/cropping/index.vue
index 0dc9e69f2..20279a442 100644
--- a/src/views/components/cropping/index.vue
+++ b/src/views/components/cropping/index.vue
@@ -1,3 +1,27 @@
+<script setup lang="ts">
+import { ref, nextTick, getCurrentInstance } from "vue";
+import Cropper from "/@/components/ReCropper";
+import img from "./picture.jpeg";
+
+const instance = getCurrentInstance();
+let info = ref<object>("");
+let cropperImg = ref<string>("");
+
+const onCropper = (): void => {
+  nextTick(() => {
+    instance.refs.refCropper.cropper.getCroppedCanvas().toBlob(blob => {
+      let fileReader: FileReader = new FileReader();
+      fileReader.onloadend = (e: ProgressEvent) => {
+        // @ts-ignore
+        cropperImg.value = e.target.result;
+        info.value = instance.refs.refCropper.cropper.getData();
+      };
+      fileReader.readAsDataURL(blob);
+    }, "image/jpeg");
+  });
+};
+</script>
+
 <template>
   <div style="margin: 10px">
     <div class="cropper-container">
@@ -9,44 +33,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { ref, nextTick, getCurrentInstance } from "vue";
-import Cropper from "/@/components/ReCropper";
-import img from "./picture.jpeg";
-
-export default {
-  name: "reCropping",
-  components: {
-    Cropper
-  },
-  setup() {
-    const instance = getCurrentInstance();
-    let info = ref("");
-    let cropperImg = ref("");
-
-    const onCropper = (): void => {
-      nextTick(() => {
-        instance.refs.refCropper.cropper.getCroppedCanvas().toBlob(blob => {
-          let fileReader: FileReader = new FileReader();
-          fileReader.onloadend = (e: any) => {
-            cropperImg.value = e.target.result;
-            info.value = instance.refs.refCropper.cropper.getData();
-          };
-          fileReader.readAsDataURL(blob);
-        }, "image/jpeg");
-      });
-    };
-
-    return {
-      img,
-      info,
-      cropperImg,
-      onCropper
-    };
-  }
-};
-</script>
-
 <style scoped>
 .cropper-container {
   display: flex;
diff --git a/src/views/components/draggable/index.vue b/src/views/components/draggable/index.vue
index 96d3a268c..f6bacaa1f 100644
--- a/src/views/components/draggable/index.vue
+++ b/src/views/components/draggable/index.vue
@@ -1,3 +1,51 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import draggable from "vuedraggable/src/vuedraggable";
+
+let gridLists = ref<Array<Object>>([
+  { grid: "cn", num: 1 },
+  { grid: "cn", num: 2 },
+  { grid: "cn", num: 3 },
+  { grid: "cn", num: 4 },
+  { grid: "cn", num: 5 },
+  { grid: "cn", num: 6 },
+  { grid: "cn", num: 7 },
+  { grid: "cn", num: 8 },
+  { grid: "cn", num: 9 }
+]);
+
+let lists = ref<Array<Object>>([
+  { people: "cn", id: 1, name: "www.itxst.com" },
+  { people: "cn", id: 2, name: "www.baidu.com" },
+  { people: "cn", id: 3, name: "www.taobao.com" },
+  { people: "cn", id: 4, name: "www.google.com" }
+]);
+
+let cutLists = ref<Array<Object>>([
+  { people: "cn", id: 1, name: "cut1" },
+  { people: "cn", id: 2, name: "cut2" },
+  { people: "cn", id: 3, name: "cut3" },
+  { people: "cn", id: 4, name: "cut4" }
+]);
+
+const change = (evt): void => {
+  console.log("evt: ", evt);
+};
+
+onMounted(() => {
+  // 使用原生sortable实现元素位置切换
+  // @ts-ignore
+  // eslint-disable-next-line no-undef
+  new Sortable(document.querySelector(".cut-container"), {
+    swap: true,
+    forceFallback: true,
+    chosenClass: "chosen",
+    swapClass: "highlight",
+    animation: 300
+  });
+});
+</script>
+
 <template>
   <div class="drag-container">
     <!-- grid列表拖拽 -->
@@ -72,64 +120,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import draggable from "vuedraggable/src/vuedraggable";
-import { reactive, toRefs, onMounted } from "vue";
-export default {
-  name: "reDraggable",
-  components: { draggable },
-  setup() {
-    const myArray = reactive({
-      gridLists: [
-        { grid: "cn", num: 1 },
-        { grid: "cn", num: 2 },
-        { grid: "cn", num: 3 },
-        { grid: "cn", num: 4 },
-        { grid: "cn", num: 5 },
-        { grid: "cn", num: 6 },
-        { grid: "cn", num: 7 },
-        { grid: "cn", num: 8 },
-        { grid: "cn", num: 9 }
-      ],
-      lists: [
-        { people: "cn", id: 1, name: "www.itxst.com" },
-        { people: "cn", id: 2, name: "www.baidu.com" },
-        { people: "cn", id: 3, name: "www.taobao.com" },
-        { people: "cn", id: 4, name: "www.google.com" }
-      ],
-      cutLists: [
-        { people: "cn", id: 1, name: "cut1" },
-        { people: "cn", id: 2, name: "cut2" },
-        { people: "cn", id: 3, name: "cut3" },
-        { people: "cn", id: 4, name: "cut4" }
-      ]
-    });
-
-    const change = (evt): void => {
-      console.log("evt: ", evt);
-    };
-
-    onMounted(() => {
-      // 使用原生sortable实现元素位置切换
-      // @ts-ignore
-      // eslint-disable-next-line no-undef
-      new Sortable(document.querySelector(".cut-container"), {
-        swap: true,
-        forceFallback: true,
-        chosenClass: "chosen",
-        swapClass: "highlight",
-        animation: 300
-      });
-    });
-
-    return {
-      ...toRefs(myArray),
-      change
-    };
-  }
-};
-</script>
-
 <style lang="scss" scoped>
 /* grid列表拖拽 */
 .grid-container {
diff --git a/src/views/components/map/index.vue b/src/views/components/map/index.vue
index 2cdb03d04..335287127 100644
--- a/src/views/components/map/index.vue
+++ b/src/views/components/map/index.vue
@@ -1,22 +1,13 @@
+<script setup lang="ts">
+import { Amap } from "/@/components/ReMap";
+</script>
+
 <template>
   <div class="map">
     <Amap />
   </div>
 </template>
 
-<script lang="ts">
-import { Amap } from "/@/components/ReMap";
-export default {
-  name: "reMap",
-  components: {
-    Amap
-  },
-  setup() {
-    return {};
-  }
-};
-</script>
-
 <style scoped>
 .map {
   width: 100%;
diff --git a/src/views/components/seamless-scroll/index.vue b/src/views/components/seamless-scroll/index.vue
index c42b48ffc..d5eaa4cdf 100644
--- a/src/views/components/seamless-scroll/index.vue
+++ b/src/views/components/seamless-scroll/index.vue
@@ -1,3 +1,51 @@
+<script setup lang="ts">
+import { ref, unref } from "vue";
+import { templateRef } from "@vueuse/core";
+import SeamlessScroll from "/@/components/ReSeamlessScroll";
+
+// eslint-disable-next-line no-undef
+const scroll = templateRef<ElRef | null>("scroll", null);
+
+let listData = ref<Array<Object>>([
+  {
+    title: "无缝滚动第一行无缝滚动第一行！！！！！！！！！！"
+  },
+  {
+    title: "无缝滚动第二行无缝滚动第二行！！！！！！！！！！"
+  },
+  {
+    title: "无缝滚动第三行无缝滚动第三行！！！！！！！！！！"
+  },
+  {
+    title: "无缝滚动第四行无缝滚动第四行！！！！！！！！！！"
+  },
+  {
+    title: "无缝滚动第五行无缝滚动第五行！！！！！！！！！！"
+  },
+  {
+    title: "无缝滚动第六行无缝滚动第六行！！！！！！！！！！"
+  },
+  {
+    title: "无缝滚动第七行无缝滚动第七行！！！！！！！！！！"
+  },
+  {
+    title: "无缝滚动第八行无缝滚动第八行！！！！！！！！！！"
+  },
+  {
+    title: "无缝滚动第九行无缝滚动第九行！！！！！！！！！！"
+  }
+]);
+
+let classOption = ref<Object>({
+  direction: "top"
+});
+
+function changeDirection(val) {
+  unref(scroll).reset();
+  unref(classOption).direction = val;
+}
+</script>
+
 <template>
   <el-space wrap>
     <el-card class="box-card">
@@ -60,68 +108,6 @@
   </el-space>
 </template>
 
-<script lang="ts">
-import { ref, unref } from "vue";
-import { templateRef } from "@vueuse/core";
-
-import SeamlessScroll from "/@/components/ReSeamlessScroll";
-export default {
-  name: "reSeamlessScroll",
-  components: {
-    SeamlessScroll
-  },
-  setup() {
-    // eslint-disable-next-line no-undef
-    const scroll = templateRef<ElRef | null>("scroll", null);
-
-    let listData = ref([
-      {
-        title: "无缝滚动第一行无缝滚动第一行！！！！！！！！！！"
-      },
-      {
-        title: "无缝滚动第二行无缝滚动第二行！！！！！！！！！！"
-      },
-      {
-        title: "无缝滚动第三行无缝滚动第三行！！！！！！！！！！"
-      },
-      {
-        title: "无缝滚动第四行无缝滚动第四行！！！！！！！！！！"
-      },
-      {
-        title: "无缝滚动第五行无缝滚动第五行！！！！！！！！！！"
-      },
-      {
-        title: "无缝滚动第六行无缝滚动第六行！！！！！！！！！！"
-      },
-      {
-        title: "无缝滚动第七行无缝滚动第七行！！！！！！！！！！"
-      },
-      {
-        title: "无缝滚动第八行无缝滚动第八行！！！！！！！！！！"
-      },
-      {
-        title: "无缝滚动第九行无缝滚动第九行！！！！！！！！！！"
-      }
-    ]);
-
-    let classOption = ref({
-      direction: "top"
-    });
-
-    function changeDirection(val) {
-      unref(scroll).reset();
-      unref(classOption).direction = val;
-    }
-
-    return {
-      listData,
-      classOption,
-      changeDirection
-    };
-  }
-};
-</script>
-
 <style lang="scss" scoped>
 .box-card {
   margin: 10px;
diff --git a/src/views/components/selector/index.vue b/src/views/components/selector/index.vue
index aa4b68780..0259ff6e0 100644
--- a/src/views/components/selector/index.vue
+++ b/src/views/components/selector/index.vue
@@ -1,3 +1,26 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import Selector from "/@/components/ReSelector";
+
+let selectRange = ref<string>("");
+let dataLists = ref<Array<Object>>([
+  {
+    title: "基本使用",
+    echo: [],
+    disabled: false
+  },
+  {
+    title: "回显模式",
+    echo: [2, 7],
+    disabled: true
+  }
+]);
+
+const selectedVal = ({ left, right }): void => {
+  selectRange.value = `${left}-${right}`;
+};
+</script>
+
 <template>
   <div>
     <el-card
@@ -21,38 +44,3 @@
     </el-card>
   </div>
 </template>
-
-<script lang="ts">
-import { ref } from "vue";
-import Selector from "/@/components/ReSelector";
-
-export default {
-  name: "reSelector",
-  components: { Selector },
-  setup() {
-    let selectRange = ref(null);
-    let dataLists = ref([
-      {
-        title: "基本使用",
-        echo: [],
-        disabled: false
-      },
-      {
-        title: "回显模式",
-        echo: [2, 7],
-        disabled: true
-      }
-    ]);
-
-    const selectedVal = ({ left, right }) => {
-      selectRange.value = `${left}-${right}`;
-    };
-
-    return {
-      selectedVal,
-      selectRange,
-      dataLists
-    };
-  }
-};
-</script>
diff --git a/src/views/components/split-pane/index.vue b/src/views/components/split-pane/index.vue
index 80e8756f0..559c29af8 100644
--- a/src/views/components/split-pane/index.vue
+++ b/src/views/components/split-pane/index.vue
@@ -1,3 +1,20 @@
+<script setup lang="ts">
+import splitpane, { ContextProps } from "/@/components/ReSplitPane";
+import { reactive } from "vue";
+
+const settingLR: ContextProps = reactive({
+  minPercent: 20,
+  defaultPercent: 40,
+  split: "vertical"
+});
+
+const settingTB: ContextProps = reactive({
+  minPercent: 20,
+  defaultPercent: 40,
+  split: "horizontal"
+});
+</script>
+
 <template>
   <div class="split-pane">
     <splitpane :splitSet="settingLR">
@@ -22,35 +39,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import splitpane, { ContextProps } from "/@/components/ReSplitPane";
-import { reactive } from "vue";
-export default {
-  name: "reSplitPane",
-  components: {
-    splitpane
-  },
-  setup() {
-    const settingLR: ContextProps = reactive({
-      minPercent: 20,
-      defaultPercent: 40,
-      split: "vertical"
-    });
-
-    const settingTB: ContextProps = reactive({
-      minPercent: 20,
-      defaultPercent: 40,
-      split: "horizontal"
-    });
-
-    return {
-      settingLR,
-      settingTB
-    };
-  }
-};
-</script>
-
 <style lang="scss" scoped>
 $W: 100%;
 $H: 80vh;
diff --git a/src/views/components/video/index.vue b/src/views/components/video/index.vue
index 4ba48ea42..2e52013ca 100644
--- a/src/views/components/video/index.vue
+++ b/src/views/components/video/index.vue
@@ -1,8 +1,4 @@
-<template>
-  <div id="mse"></div>
-</template>
-
-<script lang="ts">
+<script setup lang="ts">
 import { onMounted } from "vue";
 import Player from "xgplayer/dist/simple_player";
 import volume from "xgplayer/dist/controls/volume";
@@ -10,28 +6,27 @@ import playbackRate from "xgplayer/dist/controls/playbackRate";
 import screenShot from "xgplayer/dist/controls/screenShot";
 import { deviceDetection } from "/@/utils/deviceDetection";
 
-export default {
-  name: "reVideo",
-  setup() {
-    onMounted(() => {
-      new Player({
-        id: "mse",
-        autoplay: false,
-        screenShot: true,
-        url: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4",
-        poster:
-          "https://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
-        fluid: deviceDetection(),
-        controlPlugins: [volume, playbackRate, screenShot],
-        playbackRate: [0.5, 0.75, 1, 1.5, 2] //传入倍速可选数组
-      });
-    });
-    return {};
-  }
-};
+onMounted(() => {
+  new Player({
+    id: "mse",
+    autoplay: false,
+    screenShot: true,
+    url: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4",
+    poster:
+      "https://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
+    fluid: deviceDetection(),
+    controlPlugins: [volume, playbackRate, screenShot],
+    //传入倍速可选数组
+    playbackRate: [0.5, 0.75, 1, 1.5, 2]
+  });
+});
 </script>
 
-<style lang="scss" scoped>
+<template>
+  <div id="mse"></div>
+</template>
+
+<style scoped>
 #mse {
   flex: auto;
 }
diff --git a/src/views/permission/button/index.vue b/src/views/permission/button/index.vue
index a7e734108..e3fe42d41 100644
--- a/src/views/permission/button/index.vue
+++ b/src/views/permission/button/index.vue
@@ -2,7 +2,7 @@
 import { ref } from "vue";
 import { storageSession } from "/@/utils/storage";
 
-const auth = ref(storageSession.getItem("info").username || "admin");
+const auth = ref<Boolean>(storageSession.getItem("info").username || "admin");
 
 function changRole(value) {
   storageSession.setItem("info", {
diff --git a/src/views/permission/page/index.vue b/src/views/permission/page/index.vue
index 866fbc229..fbfa3adc6 100644
--- a/src/views/permission/page/index.vue
+++ b/src/views/permission/page/index.vue
@@ -2,7 +2,7 @@
 import { ref, unref } from "vue";
 import { storageSession } from "/@/utils/storage";
 
-let purview: string = ref(storageSession.getItem("info").username);
+let purview = ref<string>(storageSession.getItem("info").username);
 
 function changRole() {
   if (unref(purview) === "admin") {
diff --git a/types/global.d.ts b/types/global.d.ts
index bf7f8d309..815212d5e 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -16,53 +16,53 @@ declare global {
     };
     lastBuildTime: string;
   };
-  declare interface Window {
+  interface Window {
     // Global vue app instance
     __APP__: App<Element>;
-    webkitCancelAnimationFrame: (id?: any) => any;
-    webkitRequestAnimationFrame: (id?: any) => any;
-    mozCancelAnimationFrame: (id?: any) => any;
-    oCancelAnimationFrame: (id?: any) => any;
-    msCancelAnimationFrame: (id?: any) => any;
-    mozRequestAnimationFrame: (id?: any) => any;
-    oRequestAnimationFrame: (id?: any) => any;
-    msRequestAnimationFrame: (id?: any) => any;
+    webkitCancelAnimationFrame: (handle: number) => void;
+    webkitRequestAnimationFrame: (callback: FrameRequestCallback) => number;
+    mozCancelAnimationFrame: (id?: string) => any;
+    oCancelAnimationFrame: (id?: string) => any;
+    msCancelAnimationFrame: (id?: string) => any;
+    mozRequestAnimationFrame: (id?: string) => any;
+    oRequestAnimationFrame: (id?: string) => any;
+    msRequestAnimationFrame: (id?: string) => any;
   }
 
   // vue
-  declare type PropType<T> = VuePropType<T>;
+  type PropType<T> = VuePropType<T>;
 
-  export type Writable<T> = {
+  type Writable<T> = {
     -readonly [P in keyof T]: T[P];
   };
 
-  declare type Nullable<T> = T | null;
-  declare type NonNullable<T> = T extends null | undefined ? never : T;
-  declare type Recordable<T = any> = Record<string, T>;
-  declare type ReadonlyRecordable<T = any> = {
+  type Nullable<T> = T | null;
+  type NonNullable<T> = T extends null | undefined ? never : T;
+  type Recordable<T = any> = Record<string, T>;
+  type ReadonlyRecordable<T = any> = {
     readonly [key: string]: T;
   };
-  declare type Indexable<T = any> = {
+  type Indexable<T = any> = {
     [key: string]: T;
   };
-  declare type DeepPartial<T> = {
+  type DeepPartial<T> = {
     [P in keyof T]?: DeepPartial<T[P]>;
   };
-  declare type TimeoutHandle = ReturnType<typeof setTimeout>;
-  declare type IntervalHandle = ReturnType<typeof setInterval>;
+  type TimeoutHandle = ReturnType<typeof setTimeout>;
+  type IntervalHandle = ReturnType<typeof setInterval>;
 
-  declare interface ChangeEvent extends Event {
+  interface ChangeEvent extends Event {
     target: HTMLInputElement;
   }
 
-  declare interface WheelEvent {
+  interface WheelEvent {
     path?: EventTarget[];
   }
   interface ImportMetaEnv extends ViteEnv {
     __: unknown;
   }
 
-  declare interface ViteEnv {
+  interface ViteEnv {
     VITE_PORT: number;
     VITE_USE_MOCK: boolean;
     VITE_USE_PWA: boolean;
@@ -79,9 +79,9 @@ declare global {
     VITE_GENERATE_UI: string;
   }
 
-  declare function parseInt(s: string | number, radix?: number): number;
+  function parseInt(s: string | number, radix?: number): number;
 
-  declare function parseFloat(string: string | number): number;
+  function parseFloat(string: string | number): number;
 
   namespace JSX {
     // tslint:disable no-empty-interface
diff --git a/yarn.lock b/yarn.lock
index 5432d75c1..3c86bf323 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3865,6 +3865,11 @@ snake-case@^3.0.4:
     dot-case "^3.0.4"
     tslib "^2.0.3"
 
+sortablejs@1.13.0:
+  version "1.13.0"
+  resolved "https://registry.npmjs.org/sortablejs/-/sortablejs-1.13.0.tgz#3ab2473f8c69ca63569e80b1cd1b5669b51269e9"
+  integrity sha512-RBJirPY0spWCrU5yCmWM1eFs/XgX2J5c6b275/YyxFRgnzPhKl/TDeU2hNR8Dt7ITq66NRPM4UlOt+e5O4CFHg==
+
 sortablejs@1.14.0:
   version "1.14.0"
   resolved "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz#6d2e17ccbdb25f464734df621d4f35d4ab35b3d8"

From 67db3cb1c333f9a137e45c7f2dbbc3046c3970cd Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Sat, 18 Sep 2021 12:44:31 +0800
Subject: [PATCH 3/6] refactor: use setup refactor

---
 .eslintrc.js                            |  14 +
 package.json                            |   2 +-
 src/utils/propTypes.ts                  |   1 +
 src/views/components/cropping/index.vue |   2 +-
 src/views/editor/index.vue              |   4 +-
 src/views/flow-chart/index.vue          |   3 +-
 src/views/system/dict/config.vue        | 182 ++++-----
 src/views/system/dict/index.vue         | 434 ++++++++++-----------
 src/views/system/user/index.vue         | 488 ++++++++++++------------
 tsconfig.json                           |   2 +-
 10 files changed, 548 insertions(+), 584 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 44ebde3d5..d3376c526 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -3,6 +3,20 @@ module.exports = {
   env: {
     node: true
   },
+  globals: {
+    // Ref sugar (take 2)
+    $: "readonly",
+    $$: "readonly",
+    $ref: "readonly",
+    $shallowRef: "readonly",
+    $computed: "readonly",
+
+    // script setup
+    defineProps: "readonly",
+    defineEmits: "readonly",
+    defineExpose: "readonly",
+    withDefaults: "readonly"
+  },
   extends: [
     "plugin:vue/vue3-essential",
     "eslint:recommended",
diff --git a/package.json b/package.json
index e3dbeab9b..a442f2012 100644
--- a/package.json
+++ b/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 && yarn cache clean && yarn install",
+    "clean:cache": "rm -rf node_modules && rm -rf .eslintcache && yarn cache clean && yarn install",
     "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/",
diff --git a/src/utils/propTypes.ts b/src/utils/propTypes.ts
index 64d566e9c..403b78bc3 100644
--- a/src/utils/propTypes.ts
+++ b/src/utils/propTypes.ts
@@ -30,4 +30,5 @@ propTypes.extend([
     type: undefined
   }
 ]);
+
 export { propTypes };
diff --git a/src/views/components/cropping/index.vue b/src/views/components/cropping/index.vue
index 20279a442..25cabf53c 100644
--- a/src/views/components/cropping/index.vue
+++ b/src/views/components/cropping/index.vue
@@ -4,7 +4,7 @@ import Cropper from "/@/components/ReCropper";
 import img from "./picture.jpeg";
 
 const instance = getCurrentInstance();
-let info = ref<object>("");
+let info = ref<object>(null);
 let cropperImg = ref<string>("");
 
 const onCropper = (): void => {
diff --git a/src/views/editor/index.vue b/src/views/editor/index.vue
index 2c7baddc0..940d13358 100644
--- a/src/views/editor/index.vue
+++ b/src/views/editor/index.vue
@@ -9,8 +9,8 @@ import { onMounted, onBeforeUnmount, ref, unref } from "vue";
 import WangEditor from "wangeditor";
 
 // eslint-disable-next-line no-undef
-const editor = ref<ComponentRef>(null);
-const html = ref<HTMLElement>(null);
+const editor = ref(null);
+const html = ref(null);
 let instance: WangEditor;
 
 onMounted(() => {
diff --git a/src/views/flow-chart/index.vue b/src/views/flow-chart/index.vue
index 15decea79..5018dc47c 100644
--- a/src/views/flow-chart/index.vue
+++ b/src/views/flow-chart/index.vue
@@ -9,8 +9,7 @@ import { toLogicflowData } from "/@/components/ReFlowChart/src/adpterForTurbo";
 import { BpmnNode } from "/@/components/ReFlowChart/src/config";
 import demoData from "./dataTurbo.json";
 
-// eslint-disable-next-line no-undef
-let lf = ref<ElRef>(null);
+let lf = ref(null);
 let graphData = ref(null);
 let dataVisible = ref<boolean>(false);
 let config = ref({
diff --git a/src/views/system/dict/config.vue b/src/views/system/dict/config.vue
index 7ca14427d..4d988f381 100644
--- a/src/views/system/dict/config.vue
+++ b/src/views/system/dict/config.vue
@@ -1,3 +1,79 @@
+<script setup lang="ts">
+import { reactive } from "vue";
+import { VxeTableEvents } from "vxe-table";
+import { templateRef } from "@vueuse/core";
+
+interface Props {
+  drawer: boolean;
+  drawTitle?: string;
+  direction?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  drawer: false,
+  drawTitle: "",
+  direction: "rtl"
+});
+
+const emit = defineEmits<{
+  (e: "handleClose"): void;
+}>();
+
+const xTable = templateRef<any>("xTable", null);
+
+const configData = reactive({
+  tableData: [
+    {
+      name: "禁用",
+      dataval: "0"
+    },
+    {
+      name: "启用",
+      dataval: "1"
+    }
+  ],
+  isAllChecked: false,
+  isIndeterminate: false,
+  selectRecords: [] as any[],
+  tablePage: {
+    total: 0,
+    currentPage: 1,
+    pageSize: 10
+  }
+});
+
+// 抽屉关闭
+function handleClose() {
+  configData.isAllChecked = false;
+  configData.isIndeterminate = false;
+  emit("handleClose");
+}
+
+function editConfig(row) {
+  console.log("editConfig", row);
+}
+
+function delConfig(row) {
+  console.log("delConfig", row);
+}
+
+const changeAllEvent = () => {
+  setTimeout(() => {
+    console.log(xTable);
+  }, 1000);
+  const $table = xTable.value;
+  $table.setAllCheckboxRow(configData.isAllChecked);
+  configData.selectRecords = $table.getCheckboxRecords();
+};
+
+const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
+  const $table = xTable.value;
+  configData.isAllChecked = $table.isAllCheckboxChecked();
+  configData.isIndeterminate = $table.isCheckboxIndeterminate();
+  configData.selectRecords = records;
+};
+</script>
+
 <template>
   <div class="config">
     <el-drawer
@@ -14,7 +90,7 @@
         <vxe-table
           ref="xTable"
           border
-          :data="tableData"
+          :data="configData.tableData"
           @checkbox-change="checkboxChangeEvent"
           @checkbox-all="checkboxChangeEvent"
         >
@@ -40,9 +116,9 @@
         </vxe-table>
         <vxe-pager
           perfect
-          v-model:current-page="tablePage.currentPage"
-          v-model:page-size="tablePage.pageSize"
-          :total="tablePage.total"
+          v-model:current-page="configData.tablePage.currentPage"
+          v-model:page-size="configData.tablePage.pageSize"
+          :total="configData.tablePage.total"
           :layouts="[
             'PrevJump',
             'PrevPage',
@@ -57,12 +133,12 @@
           <template #left>
             <span class="page-left">
               <vxe-checkbox
-                v-model="isAllChecked"
-                :indeterminate="isIndeterminate"
+                v-model="configData.isAllChecked"
+                :indeterminate="configData.isIndeterminate"
                 @change="changeAllEvent"
               ></vxe-checkbox>
               <span class="select-count"
-                >已选中{{ selectRecords.length }}条</span
+                >已选中{{ configData.selectRecords.length }}条</span
               >
               <vxe-button size="small">{{ $t("message.hsdelete") }}</vxe-button>
             </span>
@@ -73,98 +149,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, reactive, toRefs } from "vue";
-import { propTypes } from "/@/utils/propTypes";
-import { VxeTableEvents } from "vxe-table";
-import { templateRef } from "@vueuse/core";
-
-export default defineComponent({
-  props: {
-    drawer: propTypes.bool.def(false),
-    drawTitle: propTypes.string.def(""),
-    direction: propTypes.string.def("rtl")
-  },
-  emits: ["handleClose"],
-  setup(props, ctx) {
-    const { emit } = ctx;
-
-    const xTable = templateRef<any>("xTable", null);
-
-    const configData = reactive({
-      tableData: [
-        {
-          name: "禁用",
-          dataval: "0"
-        },
-        {
-          name: "启用",
-          dataval: "1"
-        }
-      ],
-      isAllChecked: false,
-      isIndeterminate: false,
-      selectRecords: [] as any[],
-      tablePage: {
-        total: 0,
-        currentPage: 1,
-        pageSize: 10
-      }
-    });
-
-    // 抽屉关闭
-    function handleClose() {
-      configData.isAllChecked = false;
-      configData.isIndeterminate = false;
-      emit("handleClose");
-    }
-
-    function editConfig(row) {
-      console.log(
-        "%crow===>>>: ",
-        "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
-        row
-      );
-    }
-
-    function delConfig(row) {
-      console.log(
-        "%crow===>>>: ",
-        "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
-        row
-      );
-    }
-
-    const changeAllEvent = () => {
-      setTimeout(() => {
-        console.log(xTable);
-      }, 1000);
-      const $table = xTable.value;
-      $table.setAllCheckboxRow(configData.isAllChecked);
-      configData.selectRecords = $table.getCheckboxRecords();
-    };
-
-    const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({
-      records
-    }) => {
-      const $table = xTable.value;
-      configData.isAllChecked = $table.isAllCheckboxChecked();
-      configData.isIndeterminate = $table.isCheckboxIndeterminate();
-      configData.selectRecords = records;
-    };
-
-    return {
-      ...toRefs(configData),
-      handleClose,
-      editConfig,
-      delConfig,
-      changeAllEvent,
-      checkboxChangeEvent
-    };
-  }
-});
-</script>
-
 <style lang="scss" scoped>
 .list {
   padding: 10px;
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
index 17b3a45aa..327344a38 100644
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -1,10 +1,208 @@
+<script setup lang="ts">
+import Config from "./config.vue";
+import { reactive, ref, unref, nextTick } from "vue";
+import XEUtils from "xe-utils";
+import { cloneDeep } from "lodash-es";
+import { templateRef } from "@vueuse/core";
+import { useCopyToClipboard } from "/@/utils/useCopyToClipboard";
+import {
+  VXETable,
+  VxeTableInstance,
+  VxeTableEvents,
+  VxeFormPropTypes
+} from "vxe-table";
+type onEditNRow = {
+  name: string;
+  model: string;
+};
+
+const dictData = reactive({
+  submitLoading: false,
+  showEdit: false,
+  selectRow: null,
+  filterName: "",
+  tableData: [
+    {
+      id: 1,
+      name: "状态",
+      model: "",
+      children: [
+        {
+          id: "1-1",
+          name: "服务状态",
+          model: "serviceStatus"
+        },
+        {
+          id: "1-2",
+          name: "在线状态",
+          model: "onlienStatus"
+        }
+      ]
+    },
+    { id: 2, name: "操作系统", model: "operatingSystem" }
+  ],
+  formData: {
+    name: "",
+    model: ""
+  },
+  formItems: [
+    {
+      field: "name",
+      title: "字典名称",
+      span: 24,
+      itemRender: {
+        name: "$input",
+        props: { placeholder: "请输入字典名称" }
+      }
+    },
+    {
+      field: "model",
+      title: "字典类型",
+      span: 24,
+      itemRender: {
+        name: "$input",
+        props: {
+          placeholder: "请输入字典类型",
+          //这里vxe-table文档并没有提到，可以配置所选组件的所有属性，比如这里可以配置关于vxe-input的所有属性
+          disabled: true
+        }
+      }
+    },
+    {
+      align: "right",
+      span: 24,
+      itemRender: {
+        name: "$buttons",
+        children: [
+          { props: { type: "submit", content: "提交", status: "primary" } },
+          { props: { type: "reset", content: "重置" } }
+        ]
+      }
+    }
+  ] as VxeFormPropTypes.Items
+});
+
+let originData = cloneDeep(dictData.tableData);
+
+const xTree = templateRef<HTMLElement | any>("xTree", null);
+
+const handleSearch = () => {
+  const filterName = XEUtils.toValueString(dictData.filterName).trim();
+
+  if (filterName) {
+    const options = { children: "children" };
+    const searchProps = ["name"];
+
+    dictData.tableData = XEUtils.searchTree(
+      originData,
+      item =>
+        searchProps.some(
+          key => XEUtils.toValueString(item[key]).indexOf(filterName) > -1
+        ),
+      options
+    );
+
+    // 搜索之后默认展开所有子节点
+    nextTick(() => {
+      const $table = xTree.value;
+      $table.setAllTreeExpand(true);
+    });
+  } else {
+    dictData.tableData = originData;
+  }
+};
+
+// 创建一个防防抖函数，调用频率间隔 100 毫秒
+const searchEvent = XEUtils.debounce(
+  function () {
+    handleSearch();
+  },
+  100,
+  { leading: false, trailing: true }
+);
+
+const confirmEvent = async () => {
+  const type = await VXETable.modal.confirm("您确定要删除吗？");
+  (await type) === "confirm" &&
+    VXETable.modal.message({
+      content: "测试数据，不可删除",
+      status: "error"
+    });
+};
+
+function commonFn(value, disabled) {
+  dictData.selectRow = value;
+  dictData.showEdit = true;
+  dictData.formItems[1].itemRender.props.disabled = disabled;
+}
+
+// 新增
+function onAdd() {
+  commonFn(null, false);
+}
+
+// 新增子类型
+function onAddChild(row?: object) {
+  console.log("onAddChild", row);
+  commonFn(null, false);
+}
+
+// 编辑
+function onEdit(row?: onEditNRow) {
+  dictData.formData = {
+    name: row.name,
+    model: row.model ? row.model : "暂无字典类型"
+  };
+  commonFn(row, true);
+  // VXETable.modal.message({
+  //   content: "测试数据，不可编辑",
+  //   status: "error"
+  // });
+}
+
+// 拷贝当前列表项的数据（字典类型）
+const { clipboardRef } = useCopyToClipboard();
+const cellDBLClickEvent: VxeTableEvents.CellDblclick = ({ row }) => {
+  clipboardRef.value = unref(row).model;
+};
+
+const xTable = ref({} as VxeTableInstance);
+
+const submitEvent = () => {
+  dictData.submitLoading = true;
+  setTimeout(() => {
+    const $table = xTable.value;
+    dictData.submitLoading = false;
+    dictData.showEdit = false;
+    if (dictData.selectRow) {
+      VXETable.modal.message({ content: "保存成功", status: "success" });
+      Object.assign(dictData.selectRow, dictData.formData);
+    } else {
+      VXETable.modal.message({ content: "新增成功", status: "success" });
+      $table.insert(dictData.formData);
+    }
+  }, 500);
+};
+
+let drawer = ref(false);
+
+function onDeploy(value?: object) {
+  console.log("onDeploy", value);
+  drawer.value = true;
+}
+
+function handleClose() {
+  drawer.value = false;
+}
+</script>
+
 <template>
   <div class="dict-container">
     <!-- 工具栏 -->
     <vxe-toolbar>
       <template #buttons>
         <vxe-input
-          v-model="filterName"
+          v-model="dictData.filterName"
           :placeholder="$t('message.hssearch')"
           @keyup="searchEvent"
         ></vxe-input>
@@ -41,7 +239,7 @@
         iconOpen: 'fa fa-minus-square-o',
         iconClose: 'fa fa-plus-square-o'
       }"
-      :data="tableData"
+      :data="dictData.tableData"
       @cell-dblclick="cellDBLClickEvent"
     >
       <vxe-table-column
@@ -89,16 +287,16 @@
     <vxe-modal
       resize
       width="450"
-      v-model="showEdit"
-      :title="selectRow ? '编辑' : '新增'"
-      :loading="submitLoading"
+      v-model="dictData.showEdit"
+      :title="dictData.selectRow ? '编辑' : '新增'"
+      :loading="dictData.submitLoading"
       @hide="$refs.xForm.reset()"
     >
       <template #default>
         <vxe-form
           ref="xForm"
-          :data="formData"
-          :items="formItems"
+          :data="dictData.formData"
+          :items="dictData.formItems"
           title-align="right"
           title-width="100"
           @submit="submitEvent"
@@ -109,229 +307,7 @@
     <Config :drawer="drawer" drawTitle="字典列表" @handleClose="handleClose" />
   </div>
 </template>
-<script lang="ts">
-import { reactive, ref, unref, nextTick, toRefs } from "vue";
-import XEUtils from "xe-utils";
-import { cloneDeep } from "lodash-es";
-import { templateRef } from "@vueuse/core";
-import { useCopyToClipboard } from "/@/utils/useCopyToClipboard";
-import {
-  VXETable,
-  VxeTableInstance,
-  VxeTableEvents,
-  VxeFormPropTypes
-} from "vxe-table";
-import Config from "./config.vue";
 
-export default {
-  name: "dict",
-  components: {
-    Config
-  },
-  setup() {
-    const dictData = reactive({
-      submitLoading: false,
-      showEdit: false,
-      selectRow: null,
-      filterName: "",
-      tableData: [
-        {
-          id: 1,
-          name: "状态",
-          model: "",
-          children: [
-            {
-              id: "1-1",
-              name: "服务状态",
-              model: "serviceStatus"
-            },
-            {
-              id: "1-2",
-              name: "在线状态",
-              model: "onlienStatus"
-            }
-          ]
-        },
-        { id: 2, name: "操作系统", model: "operatingSystem" }
-      ],
-      formData: {
-        name: "",
-        model: ""
-      },
-      formItems: [
-        {
-          field: "name",
-          title: "字典名称",
-          span: 24,
-          itemRender: {
-            name: "$input",
-            props: { placeholder: "请输入字典名称" }
-          }
-        },
-        {
-          field: "model",
-          title: "字典类型",
-          span: 24,
-          itemRender: {
-            name: "$input",
-            props: {
-              placeholder: "请输入字典类型",
-              //这里vxe-table文档并没有提到，可以配置所选组件的所有属性，比如这里可以配置关于vxe-input的所有属性
-              disabled: true
-            }
-          }
-        },
-        {
-          align: "right",
-          span: 24,
-          itemRender: {
-            name: "$buttons",
-            children: [
-              { props: { type: "submit", content: "提交", status: "primary" } },
-              { props: { type: "reset", content: "重置" } }
-            ]
-          }
-        }
-      ] as VxeFormPropTypes.Items
-    });
-
-    let originData = cloneDeep(dictData.tableData);
-
-    const xTree = templateRef<HTMLElement | any>("xTree", null);
-
-    const formatDate = (value: any) => {
-      return XEUtils.toDateString(value, "yyyy-MM-dd HH:mm:ss.S");
-    };
-
-    const handleSearch = () => {
-      const filterName = XEUtils.toValueString(dictData.filterName).trim();
-
-      if (filterName) {
-        const options = { children: "children" };
-        const searchProps = ["name"];
-
-        dictData.tableData = XEUtils.searchTree(
-          originData,
-          item =>
-            searchProps.some(
-              key => XEUtils.toValueString(item[key]).indexOf(filterName) > -1
-            ),
-          options
-        );
-
-        // 搜索之后默认展开所有子节点
-        nextTick(() => {
-          const $table = xTree.value;
-          $table.setAllTreeExpand(true);
-        });
-      } else {
-        dictData.tableData = originData;
-      }
-    };
-
-    // 创建一个防防抖函数，调用频率间隔 100 毫秒
-    const searchEvent = XEUtils.debounce(
-      function () {
-        handleSearch();
-      },
-      100,
-      { leading: false, trailing: true }
-    );
-
-    const confirmEvent = async () => {
-      const type = await VXETable.modal.confirm("您确定要删除吗？");
-      (await type) === "confirm" &&
-        VXETable.modal.message({
-          content: "测试数据，不可删除",
-          status: "error"
-        });
-    };
-
-    function commonFn(value, disabled) {
-      dictData.selectRow = value;
-      dictData.showEdit = true;
-      dictData.formItems[1].itemRender.props.disabled = disabled;
-    }
-
-    // 新增
-    function onAdd() {
-      commonFn(null, false);
-    }
-
-    // 新增子类型
-    function onAddChild(row: any) {
-      console.log(
-        "%crow===>>>: ",
-        "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
-        row
-      );
-      commonFn(null, false);
-    }
-
-    // 编辑
-    function onEdit(row: any) {
-      dictData.formData = {
-        name: row.name,
-        model: row.model ? row.model : "暂无字典类型"
-      };
-      commonFn(row, true);
-      // VXETable.modal.message({
-      //   content: "测试数据，不可编辑",
-      //   status: "error"
-      // });
-    }
-
-    // 拷贝当前列表项的数据（字典类型）
-    const { clipboardRef } = useCopyToClipboard();
-    const cellDBLClickEvent: VxeTableEvents.CellDblclick = ({ row }) => {
-      clipboardRef.value = unref(row).model;
-    };
-
-    const xTable = ref({} as VxeTableInstance);
-
-    const submitEvent = () => {
-      dictData.submitLoading = true;
-      setTimeout(() => {
-        const $table = xTable.value;
-        dictData.submitLoading = false;
-        dictData.showEdit = false;
-        if (dictData.selectRow) {
-          VXETable.modal.message({ content: "保存成功", status: "success" });
-          Object.assign(dictData.selectRow, dictData.formData);
-        } else {
-          VXETable.modal.message({ content: "新增成功", status: "success" });
-          $table.insert(dictData.formData);
-        }
-      }, 500);
-    };
-
-    let drawer = ref(false);
-
-    function onDeploy() {
-      drawer.value = true;
-    }
-
-    function handleClose() {
-      drawer.value = false;
-    }
-
-    return {
-      ...toRefs(dictData),
-      formatDate,
-      searchEvent,
-      confirmEvent,
-      cellDBLClickEvent,
-      submitEvent,
-      onEdit,
-      onAddChild,
-      onAdd,
-      onDeploy,
-      drawer,
-      handleClose
-    };
-  }
-};
-</script>
 <style lang="scss" scoped>
 .dict-container {
   margin: 10px;
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 95393d7aa..810a71cc1 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,252 +1,242 @@
+<script setup lang="ts">
+import { reactive } from "vue";
+import { VxeGridProps } from "vxe-table";
+
+const gridOptions = reactive({
+  border: true,
+  resizable: true,
+  keepSource: true,
+  height: 500,
+  printConfig: {},
+  importConfig: {},
+  exportConfig: {},
+  pagerConfig: {
+    perfect: true,
+    pageSize: 15
+  },
+  editConfig: {
+    trigger: "click",
+    mode: "row",
+    showStatus: true
+  },
+  toolbarConfig: {
+    buttons: [
+      {
+        code: "insert_actived",
+        name: "message.hsadd",
+        status: "perfect",
+        icon: "fa fa-plus"
+      },
+      {
+        code: "mark_cancel",
+        name: "message.hsmark",
+        status: "perfect",
+        icon: "fa fa-trash-o"
+      },
+      {
+        code: "save",
+        name: "message.hssave",
+        status: "perfect",
+        icon: "fa fa-save"
+      }
+    ],
+    perfect: true,
+    refresh: {
+      icon: "fa fa-refresh",
+      iconLoading: "fa fa-spinner fa-spin"
+    },
+    import: {
+      icon: "fa fa-upload"
+    },
+    export: {
+      icon: "fa fa-download"
+    },
+    print: {
+      icon: "fa fa-print"
+    },
+    zoom: {
+      iconIn: "fa fa-arrows-alt",
+      iconOut: "fa fa-expand"
+    },
+    custom: {
+      icon: "fa fa-cog"
+    }
+  },
+  proxyConfig: {
+    props: {
+      result: "result",
+      total: "page.total"
+    },
+    ajax: {
+      // 接收 Promise
+      query: ({ page }) => {
+        return new Promise(resolve => {
+          setTimeout(() => {
+            const list = [
+              {
+                id: 10001,
+                name: "Test1",
+                nickname: "T1",
+                role: "Develop",
+                sex: "Man",
+                age: 28,
+                address: "Shenzhen"
+              },
+              {
+                id: 10002,
+                name: "Test2",
+                nickname: "T2",
+                role: "Test",
+                sex: "Women",
+                age: 22,
+                address: "Guangzhou"
+              },
+              {
+                id: 10003,
+                name: "Test3",
+                nickname: "T3",
+                role: "PM",
+                sex: "Man",
+                age: 32,
+                address: "Shanghai"
+              },
+              {
+                id: 10004,
+                name: "Test4",
+                nickname: "T4",
+                role: "Designer",
+                sex: "Women ",
+                age: 23,
+                address: "Shenzhen"
+              },
+              {
+                id: 10005,
+                name: "Test5",
+                nickname: "T5",
+                role: "Develop",
+                sex: "Women ",
+                age: 30,
+                address: "Shanghai"
+              },
+              {
+                id: 10006,
+                name: "Test6",
+                nickname: "T6",
+                role: "Designer",
+                sex: "Women ",
+                age: 21,
+                address: "Shenzhen"
+              },
+              {
+                id: 10007,
+                name: "Test7",
+                nickname: "T7",
+                role: "Test",
+                sex: "Man ",
+                age: 29,
+                address: "vxe-table 从入门到放弃"
+              },
+              {
+                id: 10008,
+                name: "Test8",
+                nickname: "T8",
+                role: "Develop",
+                sex: "Man ",
+                age: 35,
+                address: "Shenzhen"
+              },
+              {
+                id: 10009,
+                name: "Test9",
+                nickname: "T9",
+                role: "Develop",
+                sex: "Man ",
+                age: 35,
+                address: "Shenzhen"
+              },
+              {
+                id: 100010,
+                name: "Test10",
+                nickname: "T10",
+                role: "Develop",
+                sex: "Man ",
+                age: 35,
+                address: "Guangzhou"
+              },
+              {
+                id: 100011,
+                name: "Test11",
+                nickname: "T11",
+                role: "Test",
+                sex: "Women ",
+                age: 26,
+                address: "vxe-table 从入门到放弃"
+              },
+              {
+                id: 100012,
+                name: "Test12",
+                nickname: "T12",
+                role: "Develop",
+                sex: "Man ",
+                age: 34,
+                address: "Guangzhou"
+              },
+              {
+                id: 100013,
+                name: "Test13",
+                nickname: "T13",
+                role: "Test",
+                sex: "Women ",
+                age: 22,
+                address: "Shenzhen"
+              }
+            ];
+            resolve({
+              page: {
+                total: list.length
+              },
+              result: list.slice(
+                (page.currentPage - 1) * page.pageSize,
+                page.currentPage * page.pageSize
+              )
+            });
+          }, 100);
+        });
+      },
+      // body 对象： { removeRecords }
+      delete: () => {
+        return new Promise(resolve => {
+          setTimeout(() => {
+            resolve({});
+          }, 100);
+        });
+      },
+      // body 对象： { insertRecords, updateRecords, removeRecords, pendingRecords }
+      save: () => {
+        return new Promise(resolve => {
+          setTimeout(() => {
+            resolve({});
+          }, 100);
+        });
+      }
+    }
+  },
+  columns: [
+    { type: "checkbox", width: 50 },
+    { type: "seq", width: 60 },
+    { field: "name", title: "Name", editRender: { name: "input" } },
+    { field: "nickname", title: "Nickname", editRender: { name: "input" } },
+    { field: "role", title: "Role", editRender: { name: "input" } },
+    {
+      field: "address",
+      title: "Address",
+      showOverflow: true,
+      editRender: { name: "input" }
+    }
+  ]
+} as VxeGridProps);
+</script>
+
 <template>
   <vxe-grid v-bind="gridOptions" style="width: 98%"></vxe-grid>
 </template>
-
-<script lang="ts">
-import { reactive } from "vue";
-import { VxeGridProps } from "vxe-table";
-export default {
-  name: "user",
-  setup() {
-    const gridOptions = reactive({
-      border: true,
-      resizable: true,
-      keepSource: true,
-      height: 500,
-      printConfig: {},
-      importConfig: {},
-      exportConfig: {},
-      pagerConfig: {
-        perfect: true,
-        pageSize: 15
-      },
-      editConfig: {
-        trigger: "click",
-        mode: "row",
-        showStatus: true
-      },
-      toolbarConfig: {
-        buttons: [
-          {
-            code: "insert_actived",
-            name: "message.hsadd",
-            status: "perfect",
-            icon: "fa fa-plus"
-          },
-          {
-            code: "mark_cancel",
-            name: "message.hsmark",
-            status: "perfect",
-            icon: "fa fa-trash-o"
-          },
-          {
-            code: "save",
-            name: "message.hssave",
-            status: "perfect",
-            icon: "fa fa-save"
-          }
-        ],
-        perfect: true,
-        refresh: {
-          icon: "fa fa-refresh",
-          iconLoading: "fa fa-spinner fa-spin"
-        },
-        import: {
-          icon: "fa fa-upload"
-        },
-        export: {
-          icon: "fa fa-download"
-        },
-        print: {
-          icon: "fa fa-print"
-        },
-        zoom: {
-          iconIn: "fa fa-arrows-alt",
-          iconOut: "fa fa-expand"
-        },
-        custom: {
-          icon: "fa fa-cog"
-        }
-      },
-      proxyConfig: {
-        props: {
-          result: "result",
-          total: "page.total"
-        },
-        ajax: {
-          // 接收 Promise
-          query: ({ page }) => {
-            return new Promise(resolve => {
-              setTimeout(() => {
-                const list = [
-                  {
-                    id: 10001,
-                    name: "Test1",
-                    nickname: "T1",
-                    role: "Develop",
-                    sex: "Man",
-                    age: 28,
-                    address: "Shenzhen"
-                  },
-                  {
-                    id: 10002,
-                    name: "Test2",
-                    nickname: "T2",
-                    role: "Test",
-                    sex: "Women",
-                    age: 22,
-                    address: "Guangzhou"
-                  },
-                  {
-                    id: 10003,
-                    name: "Test3",
-                    nickname: "T3",
-                    role: "PM",
-                    sex: "Man",
-                    age: 32,
-                    address: "Shanghai"
-                  },
-                  {
-                    id: 10004,
-                    name: "Test4",
-                    nickname: "T4",
-                    role: "Designer",
-                    sex: "Women ",
-                    age: 23,
-                    address: "Shenzhen"
-                  },
-                  {
-                    id: 10005,
-                    name: "Test5",
-                    nickname: "T5",
-                    role: "Develop",
-                    sex: "Women ",
-                    age: 30,
-                    address: "Shanghai"
-                  },
-                  {
-                    id: 10006,
-                    name: "Test6",
-                    nickname: "T6",
-                    role: "Designer",
-                    sex: "Women ",
-                    age: 21,
-                    address: "Shenzhen"
-                  },
-                  {
-                    id: 10007,
-                    name: "Test7",
-                    nickname: "T7",
-                    role: "Test",
-                    sex: "Man ",
-                    age: 29,
-                    address: "vxe-table 从入门到放弃"
-                  },
-                  {
-                    id: 10008,
-                    name: "Test8",
-                    nickname: "T8",
-                    role: "Develop",
-                    sex: "Man ",
-                    age: 35,
-                    address: "Shenzhen"
-                  },
-                  {
-                    id: 10009,
-                    name: "Test9",
-                    nickname: "T9",
-                    role: "Develop",
-                    sex: "Man ",
-                    age: 35,
-                    address: "Shenzhen"
-                  },
-                  {
-                    id: 100010,
-                    name: "Test10",
-                    nickname: "T10",
-                    role: "Develop",
-                    sex: "Man ",
-                    age: 35,
-                    address: "Guangzhou"
-                  },
-                  {
-                    id: 100011,
-                    name: "Test11",
-                    nickname: "T11",
-                    role: "Test",
-                    sex: "Women ",
-                    age: 26,
-                    address: "vxe-table 从入门到放弃"
-                  },
-                  {
-                    id: 100012,
-                    name: "Test12",
-                    nickname: "T12",
-                    role: "Develop",
-                    sex: "Man ",
-                    age: 34,
-                    address: "Guangzhou"
-                  },
-                  {
-                    id: 100013,
-                    name: "Test13",
-                    nickname: "T13",
-                    role: "Test",
-                    sex: "Women ",
-                    age: 22,
-                    address: "Shenzhen"
-                  }
-                ];
-                resolve({
-                  page: {
-                    total: list.length
-                  },
-                  result: list.slice(
-                    (page.currentPage - 1) * page.pageSize,
-                    page.currentPage * page.pageSize
-                  )
-                });
-              }, 100);
-            });
-          },
-          // body 对象： { removeRecords }
-          delete: () => {
-            return new Promise(resolve => {
-              setTimeout(() => {
-                resolve({});
-              }, 100);
-            });
-          },
-          // body 对象： { insertRecords, updateRecords, removeRecords, pendingRecords }
-          save: () => {
-            return new Promise(resolve => {
-              setTimeout(() => {
-                resolve({});
-              }, 100);
-            });
-          }
-        }
-      },
-      columns: [
-        { type: "checkbox", width: 50 },
-        { type: "seq", width: 60 },
-        { field: "name", title: "Name", editRender: { name: "input" } },
-        { field: "nickname", title: "Nickname", editRender: { name: "input" } },
-        { field: "role", title: "Role", editRender: { name: "input" } },
-        {
-          field: "address",
-          title: "Address",
-          showOverflow: true,
-          editRender: { name: "input" }
-        }
-      ]
-    } as VxeGridProps);
-
-    return {
-      gridOptions
-    };
-  }
-};
-</script>
-
-<style scoped></style>
diff --git a/tsconfig.json b/tsconfig.json
index 335bf5be0..d1c251b11 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,10 +2,10 @@
   "compilerOptions": {
     "target": "esnext",
     "module": "esnext",
+    "moduleResolution": "node",
     "strict": false,
     "jsx": "preserve",
     "importHelpers": true,
-    "moduleResolution": "node",
     "experimentalDecorators": true,
     "strictFunctionTypes": false,
     "skipLibCheck": true,

From 85f4917f26ba3d538f5cfed13e6dec3da0a4ce9a Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Sat, 18 Sep 2021 22:24:52 +0800
Subject: [PATCH 4/6] refactor: use setup refactor

---
 .eslintrc.js                                  |   14 +
 package.json                                  |   10 +-
 src/components/ReBreadCrumb/src/index.vue     |  105 +-
 src/components/ReFlop/src/index.vue           |  247 ++--
 src/components/ReFlowChart/src/Control.vue    |  189 ++-
 src/components/ReFlowChart/src/DataDialog.vue |   26 +-
 src/components/ReFlowChart/src/NodePanel.vue  |   66 +-
 src/components/ReHamBurger/src/index.vue      |   49 +-
 src/components/ReInfo/index.vue               |  211 ++--
 src/components/ReMap/index.ts                 |   10 +-
 src/components/ReMap/src/Amap.vue             |  225 ++--
 src/components/ReMap/src/BaiduMap.vue         |   14 -
 src/components/ReSeamlessScroll/src/index.vue | 1042 ++++++++---------
 src/components/ReSeamlessScroll/src/utils.ts  |    2 +-
 tsconfig.json                                 |    2 +-
 types/global.d.ts                             |   13 +-
 types/index.d.ts                              |    4 +
 yarn.lock                                     |  124 +-
 18 files changed, 1139 insertions(+), 1214 deletions(-)
 delete mode 100644 src/components/ReMap/src/BaiduMap.vue

diff --git a/.eslintrc.js b/.eslintrc.js
index d3376c526..c098167c3 100644
--- a/.eslintrc.js
+++ b/.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",
diff --git a/package.json b/package.json
index a442f2012..713fe2c8e 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/ReBreadCrumb/src/index.vue b/src/components/ReBreadCrumb/src/index.vue
index 1c570ba36..1679baf05 100644
--- a/src/components/ReBreadCrumb/src/index.vue
+++ b/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;
diff --git a/src/components/ReFlop/src/index.vue b/src/components/ReFlop/src/index.vue
index d5de8919b..e5efa6a87 100644
--- a/src/components/ReFlop/src/index.vue
+++ b/src/components/ReFlop/src/index.vue
@@ -1,3 +1,109 @@
+<script setup lang="ts">
+import { ref, unref, nextTick, onUnmounted } from "vue";
+import { templateRef } from "@vueuse/core";
+import flippers from "./Filpper";
+
+let timer = ref(null);
+let flipObjs = ref([]);
+
+const flipperHour1 = templateRef<HTMLElement | null>("flipperHour1", null);
+const flipperHour2 = templateRef<HTMLElement | null>("flipperHour2", null);
+const flipperMinute1 = templateRef<HTMLElement | null>("flipperMinute1", null);
+const flipperMinute2 = templateRef<HTMLElement | null>("flipperMinute2", null);
+const flipperSecond1 = templateRef<HTMLElement | null>("flipperSecond1", null);
+const flipperSecond2 = templateRef<HTMLElement | null>("flipperSecond2", null);
+
+// 初始化数字
+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 = () => {
+  timer.value = setInterval(() => {
+    // 获取当前时间
+    let now = new Date();
+    let nowTimeStr = formatDate(new Date(now.getTime() - 1000), "hhiiss");
+    let nextTimeStr = formatDate(now, "hhiiss");
+    for (let i = 0; i < flipObjs.value.length; i++) {
+      if (nowTimeStr[i] === nextTimeStr[i]) {
+        continue;
+      }
+      flipObjs?.value[i]?.flipDown(nowTimeStr[i], nextTimeStr[i]);
+    }
+  }, 1000);
+};
+
+// 正则格式化日期
+const formatDate = (date: Date, dateFormat: string) => {
+  /* 单独格式化年份，根据y的字符数量输出年份
+     * 例如：yyyy => 2019
+            yy => 19
+            y => 9
+     */
+  if (/(y+)/.test(dateFormat)) {
+    dateFormat = dateFormat.replace(
+      RegExp.$1,
+      (date.getFullYear() + "").substr(4 - RegExp.$1.length)
+    );
+  }
+  // 格式化月、日、时、分、秒
+  let o = {
+    "m+": date.getMonth() + 1,
+    "d+": date.getDate(),
+    "h+": date.getHours(),
+    "i+": date.getMinutes(),
+    "s+": date.getSeconds()
+  };
+  for (let k in o) {
+    if (new RegExp(`(${k})`).test(dateFormat)) {
+      // 取出对应的值
+      let str = o[k] + "";
+      /* 根据设置的格式，输出对应的字符
+       * 例如: 早上8时，hh => 08，h => 8
+       * 但是，当数字>=10时，无论格式为一位还是多位，不做截取，这是与年份格式化不一致的地方
+       * 例如: 下午15时，hh => 15, h => 15
+       */
+      dateFormat = dateFormat.replace(
+        RegExp.$1,
+        RegExp.$1.length === 1 ? str : padLeftZero(str)
+      );
+    }
+  }
+  return dateFormat;
+};
+
+// 日期时间补零
+const padLeftZero = (str: string | any[]) => {
+  return ("00" + str).substr(str.length);
+};
+
+nextTick(() => {
+  flipObjs.value = [
+    unref(flipperHour1),
+    unref(flipperHour2),
+    unref(flipperMinute1),
+    unref(flipperMinute2),
+    unref(flipperSecond1),
+    unref(flipperSecond2)
+  ];
+
+  init();
+  run();
+});
+
+onUnmounted(() => {
+  if (timer.value) {
+    clearInterval(timer.value);
+    timer.value = null;
+  }
+});
+</script>
+
 <template>
   <div class="flip-clock">
     <flippers ref="flipperHour1" />
@@ -11,147 +117,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { ref, unref, nextTick, onUnmounted } from "vue";
-import flippers from "./Filpper";
-
-import { templateRef } from "@vueuse/core";
-export default {
-  name: "Flop",
-  components: {
-    flippers
-  },
-  setup() {
-    let timer = ref(null);
-    let flipObjs = ref([]);
-
-    const flipperHour1 = templateRef<HTMLElement | null>("flipperHour1", null);
-    const flipperHour2 = templateRef<HTMLElement | null>("flipperHour2", null);
-    const flipperMinute1 = templateRef<HTMLElement | null>(
-      "flipperMinute1",
-      null
-    );
-    const flipperMinute2 = templateRef<HTMLElement | null>(
-      "flipperMinute2",
-      null
-    );
-    const flipperSecond1 = templateRef<HTMLElement | null>(
-      "flipperSecond1",
-      null
-    );
-    const flipperSecond2 = templateRef<HTMLElement | null>(
-      "flipperSecond2",
-      null
-    );
-
-    // 初始化数字
-    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 = () => {
-      timer.value = setInterval(() => {
-        // 获取当前时间
-        let now = new Date();
-        let nowTimeStr = formatDate(new Date(now.getTime() - 1000), "hhiiss");
-        let nextTimeStr = formatDate(now, "hhiiss");
-        for (let i = 0; i < flipObjs.value.length; i++) {
-          if (nowTimeStr[i] === nextTimeStr[i]) {
-            continue;
-          }
-          flipObjs?.value[i]?.flipDown(nowTimeStr[i], nextTimeStr[i]);
-        }
-      }, 1000);
-    };
-
-    // 正则格式化日期
-    const formatDate = (date: Date, dateFormat: string) => {
-      /* 单独格式化年份，根据y的字符数量输出年份
-     * 例如：yyyy => 2019
-            yy => 19
-            y => 9
-     */
-      if (/(y+)/.test(dateFormat)) {
-        dateFormat = dateFormat.replace(
-          RegExp.$1,
-          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
-        );
-      }
-      // 格式化月、日、时、分、秒
-      let o = {
-        "m+": date.getMonth() + 1,
-        "d+": date.getDate(),
-        "h+": date.getHours(),
-        "i+": date.getMinutes(),
-        "s+": date.getSeconds()
-      };
-      for (let k in o) {
-        if (new RegExp(`(${k})`).test(dateFormat)) {
-          // 取出对应的值
-          let str = o[k] + "";
-          /* 根据设置的格式，输出对应的字符
-           * 例如: 早上8时，hh => 08，h => 8
-           * 但是，当数字>=10时，无论格式为一位还是多位，不做截取，这是与年份格式化不一致的地方
-           * 例如: 下午15时，hh => 15, h => 15
-           */
-          dateFormat = dateFormat.replace(
-            RegExp.$1,
-            RegExp.$1.length === 1 ? str : padLeftZero(str)
-          );
-        }
-      }
-      return dateFormat;
-    };
-
-    // 日期时间补零
-    const padLeftZero = (str: string | any[]) => {
-      return ("00" + str).substr(str.length);
-    };
-
-    nextTick(() => {
-      flipObjs.value = [
-        unref(flipperHour1),
-        unref(flipperHour2),
-        unref(flipperMinute1),
-        unref(flipperMinute2),
-        unref(flipperSecond1),
-        unref(flipperSecond2)
-      ];
-
-      init();
-      run();
-    });
-
-    onUnmounted(() => {
-      if (timer.value) {
-        clearInterval(timer.value);
-        timer.value = null;
-      }
-    });
-
-    return {
-      timer,
-      flipObjs,
-      init,
-      run,
-      formatDate,
-      padLeftZero,
-      flipperHour1,
-      flipperHour2,
-      flipperMinute1,
-      flipperMinute2,
-      flipperSecond1,
-      flipperSecond2
-    };
-  }
-};
-</script>
-
 <style>
 .flip-clock .m-flipper {
   margin: 0 3px;
diff --git a/src/components/ReFlowChart/src/Control.vue b/src/components/ReFlowChart/src/Control.vue
index 4a51dda53..75783c698 100644
--- a/src/components/ReFlowChart/src/Control.vue
+++ b/src/components/ReFlowChart/src/Control.vue
@@ -1,3 +1,92 @@
+<script setup lang="ts">
+import { ref, unref, onMounted } from "vue";
+import { templateRef } from "@vueuse/core";
+import { LogicFlow } from "@logicflow/core";
+
+interface Props {
+  lf: LogicFlow;
+  catTurboData?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  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: "缩小",
+    disabled: false
+  },
+  {
+    icon: "icon-enlarge-hs",
+    text: "放大",
+    disabled: false
+  },
+  {
+    icon: "icon-full-screen-hs",
+    text: "适应",
+    disabled: false
+  },
+  {
+    icon: "icon-previous-hs",
+    text: "上一步",
+    disabled: true
+  },
+  {
+    icon: "icon-next-step-hs",
+    text: "下一步",
+    disabled: true
+  },
+  {
+    icon: "icon-download-hs",
+    text: "下载图片",
+    disabled: false
+  },
+  {
+    icon: "icon-watch-hs",
+    text: "查看数据",
+    disabled: false
+  }
+]);
+
+const onControl = (item, key) => {
+  ["zoom", "zoom", "resetZoom", "undo", "redo", "getSnapshot"].forEach(
+    (v, i) => {
+      let domControl = props.lf;
+      if (key === 1) {
+        domControl.zoom(true);
+      }
+      if (key === 6) {
+        emit("catData");
+      }
+      if (key === i) {
+        domControl[v]();
+      }
+    }
+  );
+};
+
+const onEnter = key => {
+  focusIndex.value = key;
+};
+
+onMounted(() => {
+  props.lf.on("history:change", ({ data: { undoAble, redoAble } }) => {
+    unref(titleLists)[3].disabled = unref(controlButton3).disabled = !undoAble;
+    unref(titleLists)[4].disabled = unref(controlButton4).disabled = !redoAble;
+  });
+});
+</script>
+
 <template>
   <div class="control-container">
     <!-- 功能按钮 -->
@@ -26,106 +115,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, unref, onMounted } from "vue";
-import { templateRef } from "@vueuse/core";
-
-export default defineComponent({
-  name: "Control",
-  props: {
-    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);
-    let titleLists = ref([
-      {
-        icon: "icon-zoom-out-hs",
-        text: "缩小",
-        disabled: false
-      },
-      {
-        icon: "icon-enlarge-hs",
-        text: "放大",
-        disabled: false
-      },
-      {
-        icon: "icon-full-screen-hs",
-        text: "适应",
-        disabled: false
-      },
-      {
-        icon: "icon-previous-hs",
-        text: "上一步",
-        disabled: true
-      },
-      {
-        icon: "icon-next-step-hs",
-        text: "下一步",
-        disabled: true
-      },
-      {
-        icon: "icon-download-hs",
-        text: "下载图片",
-        disabled: false
-      },
-      {
-        icon: "icon-watch-hs",
-        text: "查看数据",
-        disabled: false
-      }
-    ]);
-
-    const onControl = (item, key) => {
-      ["zoom", "zoom", "resetZoom", "undo", "redo", "getSnapshot"].forEach(
-        (v, i) => {
-          let domControl = props.lf;
-          if (key === 1) {
-            domControl.zoom(true);
-          }
-          if (key === 6) {
-            emit("catData");
-          }
-          if (key === i) {
-            domControl[v]();
-          }
-        }
-      );
-    };
-
-    const onEnter = key => {
-      focusIndex.value = key;
-    };
-
-    onMounted(() => {
-      props.lf.on("history:change", ({ data: { undoAble, redoAble } }) => {
-        unref(titleLists)[3].disabled = unref(controlButton3).disabled =
-          !undoAble;
-        unref(titleLists)[4].disabled = unref(controlButton4).disabled =
-          !redoAble;
-      });
-    });
-
-    return {
-      focusIndex,
-      titleLists,
-      onControl,
-      onEnter
-    };
-  }
-});
-</script>
-
 <style scoped>
 @import "./assets/iconfont/iconfont.css";
 
diff --git a/src/components/ReFlowChart/src/DataDialog.vue b/src/components/ReFlowChart/src/DataDialog.vue
index 8dad05710..0991f48e4 100644
--- a/src/components/ReFlowChart/src/DataDialog.vue
+++ b/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>
diff --git a/src/components/ReFlowChart/src/NodePanel.vue b/src/components/ReFlowChart/src/NodePanel.vue
index e6fbdb415..3ad7d77fb 100644
--- a/src/components/ReFlowChart/src/NodePanel.vue
+++ b/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;
diff --git a/src/components/ReHamBurger/src/index.vue b/src/components/ReHamBurger/src/index.vue
index 9ab554182..c6d448147 100644
--- a/src/components/ReHamBurger/src/index.vue
+++ b/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>
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "HamBurger",
-  props: {
-    isActive: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ["toggleClick"],
-  setup(props, ctx) {
-    const toggleClick = () => {
-      ctx.emit("toggleClick");
-    };
-
-    return { toggleClick };
-  }
-});
-</script>
+<style module="classes" scoped>
+.container {
+  padding: 0 15px;
+}
+</style>
 
 <style scoped>
 .hamburger {
@@ -44,7 +47,7 @@ export default defineComponent({
   height: 20px;
 }
 
-.hamburger.is-active {
+.is-active {
   transform: rotate(180deg);
 }
 </style>
diff --git a/src/components/ReInfo/index.vue b/src/components/ReInfo/index.vue
index 7161ba111..13d48e86e 100644
--- a/src/components/ReInfo/index.vue
+++ b/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;
diff --git a/src/components/ReMap/index.ts b/src/components/ReMap/index.ts
index fa4df6fb9..8ca00c7ae 100644
--- a/src/components/ReMap/index.ts
+++ b/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,
-  BaiduMap
+  Amap
 };
diff --git a/src/components/ReMap/src/Amap.vue b/src/components/ReMap/src/Amap.vue
index 3fc3a5e63..d720438b3 100644
--- a/src/components/ReMap/src/Amap.vue
+++ b/src/components/ReMap/src/Amap.vue
@@ -1,45 +1,17 @@
-<template>
-  <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">
+<script setup lang="ts">
 import AMapLoader from "@amap/amap-jsapi-loader";
-import {
-  reactive,
-  toRefs,
-  defineComponent,
-  onBeforeMount,
-  getCurrentInstance
-} from "vue";
-
+import { reactive, getCurrentInstance, onBeforeMount, onUnmounted } 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,116 +19,119 @@ export interface mapInter {
   loading: boolean;
 }
 
-export default defineComponent({
-  name: "Amap",
-  setup() {
-    const instance = getCurrentInstance();
-    let map: MapConfigureInter;
+let MarkerCluster;
+let map: MapConfigureInter;
 
-    const mapSet: mapInter = reactive({
-      loading: deviceDetection() ? false : true
+const instance = getCurrentInstance();
+
+const mapSet: mapInter = reactive({
+  loading: deviceDetection() ? false : true
+});
+
+// 地图创建完成(动画关闭)
+const complete = (): void => {
+  if (map) {
+    map.on("complete", () => {
+      mapSet.loading = false;
     });
+  }
+};
 
-    // 地图创建完成(动画关闭)
-    const complete = (): void => {
-      if (map) {
-        map.on("complete", () => {
-          mapSet.loading = false;
-        });
-      }
-    };
+onBeforeMount(() => {
+  if (!instance) return;
+  let { MapConfigure } = instance.appContext.config.globalProperties.$config;
+  let { options } = MapConfigure;
 
-    // 销毁地图实例
-    const destroyMap = (): void => {
-      if (map) {
-        map.destroy() && map.clearEvents("click");
-      }
-    };
+  AMapLoader.load({
+    key: MapConfigure.amapKey,
+    version: "2.0",
+    plugins: ["AMap.MarkerCluster"]
+  })
+    .then(AMap => {
+      // 创建地图实例
+      map = new AMap.Map(instance.refs.mapview, options);
 
-    onBeforeMount(() => {
-      if (!instance) return;
-      let { MapConfigure } =
-        instance.appContext.config.globalProperties.$config;
-      let { options } = MapConfigure;
+      //地图中添加地图操作ToolBar插件
+      map.plugin(["AMap.ToolBar", "AMap.MapType"], () => {
+        map.addControl(new AMap.ToolBar());
+        //地图类型切换
+        map.addControl(
+          new AMap.MapType({
+            defaultType: 0
+          })
+        );
+      });
 
-      AMapLoader.load({
-        key: MapConfigure.amapKey,
-        version: "2.0",
-        plugins: ["AMap.MarkerCluster"]
-      })
-        .then(AMap => {
-          // 创建地图实例
-          map = new AMap.Map(instance.refs.mapview, options);
-
-          //地图中添加地图操作ToolBar插件
-          map.plugin(["AMap.ToolBar", "AMap.MapType"], () => {
-            map.addControl(new AMap.ToolBar());
-            //地图类型切换
-            map.addControl(
-              new AMap.MapType({
-                defaultType: 0
-              })
-            );
-          });
-
-          MarkerCluster = new AMap.MarkerCluster(map, [], {
-            gridSize: 80, // 聚合网格像素大小
-            maxZoom: 14,
-            renderMarker(ctx) {
-              let { marker, data } = ctx;
-              if (Array.isArray(data) && data[0]) {
-                var { driver, plateNumber, orientation } = data[0];
-                var content = `<img style="transform: scale(1) rotate(${
-                  360 - Number(orientation)
-                }deg);" src='${greenCar}' />`;
-                marker.setContent(content);
-                marker.setLabel({
-                  direction: "bottom",
-                  offset: new AMap.Pixel(-4, 0), //设置文本标注偏移量
-                  content: `<div> ${plateNumber}(${driver})</div>` //设置文本标注内容
-                });
-                marker.setOffset(new AMap.Pixel(-18, -10));
-                marker.on("click", ({ lnglat }) => {
-                  map.setZoom(13); //设置地图层级
-                  map.setCenter(lnglat);
-                });
-              }
-            }
-          });
-
-          // 获取模拟车辆信息
-          mapJson()
-            .then(res => {
-              let points: object = res.info.map((v: any) => {
-                return {
-                  lnglat: [v.lng, v.lat],
-                  ...v
-                };
-              });
-              if (MarkerCluster) MarkerCluster.setData(points);
-            })
-            .catch(err => {
-              console.log("err:", err);
+      MarkerCluster = new AMap.MarkerCluster(map, [], {
+        // 聚合网格像素大小
+        gridSize: 80,
+        maxZoom: 14,
+        renderMarker(ctx) {
+          let { marker, data } = ctx;
+          if (Array.isArray(data) && data[0]) {
+            var { driver, plateNumber, orientation } = data[0];
+            var content = `<img style="transform: scale(1) rotate(${
+              360 - Number(orientation)
+            }deg);" src='${greenCar}' />`;
+            marker.setContent(content);
+            marker.setLabel({
+              direction: "bottom",
+              //设置文本标注偏移量
+              offset: new AMap.Pixel(-4, 0),
+              //设置文本标注内容
+              content: `<div> ${plateNumber}(${driver})</div>`
             });
+            marker.setOffset(new AMap.Pixel(-18, -10));
+            marker.on("click", ({ lnglat }) => {
+              map.setZoom(13); //设置地图层级
+              map.setCenter(lnglat);
+            });
+          }
+        }
+      });
 
-          complete();
+      // 获取模拟车辆信息
+      mapJson()
+        .then(res => {
+          let points: object = res.info.map((v: any) => {
+            return {
+              lnglat: [v.lng, v.lat],
+              ...v
+            };
+          });
+          if (MarkerCluster) MarkerCluster.setData(points);
         })
-        .catch(() => {
-          mapSet.loading = false;
-          throw "地图加载失败，请重新加载";
+        .catch(err => {
+          console.log("err:", err);
         });
-    });
 
-    return {
-      ...toRefs(mapSet),
-      complete,
-      destroyMap,
-      greenCar
-    };
+      complete();
+    })
+    .catch(() => {
+      mapSet.loading = false;
+      throw "地图加载失败，请重新加载";
+    });
+});
+
+onUnmounted(() => {
+  if (map) {
+    // 销毁地图实例
+    map.destroy() && map.clearEvents("click");
   }
 });
 </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%;
diff --git a/src/components/ReMap/src/BaiduMap.vue b/src/components/ReMap/src/BaiduMap.vue
deleted file mode 100644
index a68108098..000000000
--- a/src/components/ReMap/src/BaiduMap.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <div></div>
-</template>
-
-<script lang="ts">
-export default {
-  name: "BaiduMap",
-  setup() {
-    return {};
-  }
-};
-</script>
-
-<style scoped></style>
diff --git a/src/components/ReSeamlessScroll/src/index.vue b/src/components/ReSeamlessScroll/src/index.vue
index a8ec26eb6..6d855b8fd 100644
--- a/src/components/ReSeamlessScroll/src/index.vue
+++ b/src/components/ReSeamlessScroll/src/index.vue
@@ -1,3 +1,495 @@
+<script setup lang="ts">
+import { computed, ref, unref, nextTick } from "vue";
+import type { CSSProperties, PropType } from "vue";
+import {
+  tryOnMounted,
+  tryOnUnmounted,
+  templateRef,
+  useDebounceFn
+} from "@vueuse/core";
+import * as utilsMethods from "./utils";
+const { animationFrame, copyObj } = utilsMethods;
+animationFrame();
+
+const props = defineProps({
+  data: {
+    type: Array as PropType<unknown>
+  },
+  classOption: {
+    type: Object as PropType<unknown>
+  }
+});
+
+const emit = defineEmits<{
+  (e: "scrollEnd"): void;
+}>();
+
+let xPos = ref<number>(0);
+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";
+
+// eslint-disable-next-line vue/no-setup-props-destructure
+let { classOption } = props;
+
+if (classOption["key"] === undefined) {
+  classOption["key"] = 0;
+}
+
+const wrap = templateRef<HTMLElement | null>(`wrap${classOption["key"]}`, null);
+const slotList = templateRef<HTMLElement | null>(
+  `slotList${classOption["key"]}`,
+  null
+);
+const realBox = templateRef<HTMLElement | null>(
+  `realBox${classOption["key"]}`,
+  null
+);
+
+let leftSwitchState = computed(() => {
+  return unref(xPos) < 0;
+});
+
+let rightSwitchState = computed(() => {
+  return Math.abs(unref(xPos)) < unref(realBoxWidth) - unref(width);
+});
+
+let defaultOption = computed(() => {
+  return {
+    //步长
+    step: 1,
+    //启动无缝滚动最小数据数
+    limitMoveNum: 5,
+    //是否启用鼠标hover控制
+    hoverStop: true,
+    // bottom 往下 top 往上(默认) left 向左 right 向右
+    direction: "top",
+    //开启移动端touch
+    openTouch: true,
+    //单条数据高度有值hoverStop关闭
+    singleHeight: 0,
+    //单条数据宽度有值hoverStop关闭
+    singleWidth: 0,
+    //单步停止等待时间
+    waitTime: 1000,
+    switchOffset: 30,
+    autoPlay: true,
+    navigation: false,
+    switchSingleStep: 134,
+    switchDelay: 400,
+    switchDisabledClass: "disabled",
+    // singleWidth/singleHeight 是否开启rem度量
+    isSingleRemUnit: false
+  };
+});
+
+let options = computed(() => {
+  // @ts-ignore
+  return copyObj({}, unref(defaultOption), classOption);
+});
+
+const leftSwitchClass = computed(() => {
+  return unref(leftSwitchState) ? "" : unref(options).switchDisabledClass;
+});
+
+let rightSwitchClass = computed(() => {
+  return unref(rightSwitchState) ? "" : unref(options).switchDisabledClass;
+});
+
+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((): CSSProperties => {
+  return {
+    position: "absolute",
+    margin: `${unref(height) / 2}px 0 0 ${
+      unref(width) + unref(options).switchOffset
+    }px`,
+    transform: "translateY(-50%)"
+  };
+});
+
+let isHorizontal = computed(() => {
+  return (
+    unref(options).direction !== "bottom" && unref(options).direction !== "top"
+  );
+});
+
+let float = computed((): CSSProperties => {
+  return unref(isHorizontal)
+    ? { float: "left", overflow: "hidden" }
+    : { overflow: "hidden" };
+});
+
+let pos = computed(() => {
+  return {
+    transform: `translate(${unref(xPos)}px,${unref(yPos)}px)`,
+    transition: `all ${ease} ${unref(delay)}ms`,
+    overflow: "hidden"
+  };
+});
+
+let navigation = computed(() => {
+  return unref(options).navigation;
+});
+
+let autoPlay = computed(() => {
+  if (unref(navigation)) return false;
+  return unref(options).autoPlay;
+});
+
+let scrollSwitch = computed(() => {
+  // 从 props 解构出来的 属性 不再具有相应性.
+  return props.data.length >= unref(options).limitMoveNum;
+});
+
+let hoverStopSwitch = computed(() => {
+  return unref(options).hoverStop && unref(autoPlay) && unref(scrollSwitch);
+});
+
+let canTouchScroll = computed(() => {
+  return unref(options).openTouch;
+});
+
+let baseFontSize = computed(() => {
+  return unref(options).isSingleRemUnit
+    ? parseInt(window.getComputedStyle(document.documentElement, null).fontSize)
+    : 1;
+});
+
+let realSingleStopWidth = computed(() => {
+  return unref(options).singleWidth * unref(baseFontSize);
+});
+
+let realSingleStopHeight = computed(() => {
+  return unref(options).singleHeight * unref(baseFontSize);
+});
+
+let step = computed(() => {
+  let singleStep;
+  let step = unref(options).step;
+  if (unref(isHorizontal)) {
+    singleStep = unref(realSingleStopWidth);
+  } else {
+    singleStep = unref(realSingleStopHeight);
+  }
+  if (singleStep > 0 && singleStep % step > 0) {
+    throw "如果设置了单步滚动，step需是单步大小的约数，否则无法保证单步滚动结束的位置是否准确";
+  }
+  return step;
+});
+
+function reset() {
+  xPos.value = 0;
+  yPos.value = 0;
+  scrollCancle();
+  scrollInitMove();
+}
+
+function leftSwitchClick() {
+  if (!unref(leftSwitchState)) return;
+  // 小于单步距离
+  if (Math.abs(unref(xPos)) < unref(options).switchSingleStep) {
+    xPos.value = 0;
+    return;
+  }
+  xPos.value += unref(options).switchSingleStep;
+}
+
+function rightSwitchClick() {
+  if (!unref(rightSwitchState)) return;
+  // 小于单步距离
+  if (
+    unref(realBoxWidth) - unref(width) + unref(xPos) <
+    unref(options).switchSingleStep
+  ) {
+    xPos.value = unref(width) - unref(realBoxWidth);
+    return;
+  }
+  xPos.value -= unref(options).switchSingleStep;
+}
+
+function scrollCancle() {
+  cancelAnimationFrame(reqFrame || "");
+}
+
+function touchStart(e) {
+  if (!unref(canTouchScroll)) return;
+  let timer;
+  //touches数组对象获得屏幕上所有的touch，取第一个touch
+  const touch = e.targetTouches[0];
+  const { waitTime, singleHeight, singleWidth } = unref(options);
+  //取第一个touch的坐标值
+  startPos = {
+    x: touch.pageX,
+    y: touch.pageY
+  };
+  //记录touchStart时候的posY
+  startPosY = unref(yPos);
+  //记录touchStart时候的posX
+  startPosX = unref(xPos);
+  if (!!singleHeight && !!singleWidth) {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      scrollCancle();
+    }, waitTime + 20);
+  } else {
+    scrollCancle();
+  }
+}
+
+function touchMove(e) {
+  //当屏幕有多个touch或者页面被缩放过，就不执行move操作
+  if (
+    !unref(canTouchScroll) ||
+    e.targetTouches.length > 1 ||
+    (e.scale && e.scale !== 1)
+  )
+    return;
+  const touch = e.targetTouches[0];
+  const { direction } = unref(options);
+  let endPos = {
+    x: touch.pageX - startPos.x,
+    y: touch.pageY - startPos.y
+  };
+  //阻止触摸事件的默认行为，即阻止滚屏
+  e.preventDefault();
+  //dir，1表示纵向滑动，0为横向滑动
+  const dir = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1 : 0;
+  if (
+    (dir === 1 && direction === "bottom") ||
+    (dir === 1 && direction === "top")
+  ) {
+    // 表示纵向滑动 && 运动方向为上下
+    yPos.value = startPosY + endPos.y;
+  } else if (
+    (dir === 0 && direction === "left") ||
+    (dir === 0 && direction === "right")
+  ) {
+    // 为横向滑动 && 运动方向为左右
+    xPos.value = startPosX + endPos.x;
+  }
+}
+
+function touchEnd() {
+  if (!unref(canTouchScroll)) return;
+  let timer;
+  const direction = unref(options).direction;
+  delay.value = 50;
+  if (direction === "top") {
+    if (unref(yPos) > 0) yPos.value = 0;
+  } else if (direction === "bottom") {
+    let h = (unref(realBoxHeight) / 2) * -1;
+    if (unref(yPos) < h) yPos.value = h;
+  } else if (direction === "left") {
+    if (unref(xPos) > 0) xPos.value = 0;
+  } else if (direction === "right") {
+    let w = unref(realBoxWidth) * -1;
+    if (unref(xPos) < w) xPos.value = w;
+  }
+  if (timer) clearTimeout(timer);
+  timer = setTimeout(() => {
+    delay.value = 0;
+    scrollMove();
+  }, unref(delay));
+}
+
+function enter() {
+  if (unref(hoverStopSwitch)) scrollStopMove();
+}
+
+function leave() {
+  if (unref(hoverStopSwitch)) scrollStartMove();
+}
+
+function scrollMove() {
+  // 鼠标移入时拦截scrollMove()
+  if (isHover) return;
+  //进入move立即先清除动画 防止频繁touchMove导致多动画同时进行
+  // scrollCancle();
+  reqFrame = requestAnimationFrame(function () {
+    //实际高度
+    const h = unref(realBoxHeight) / 2;
+    //宽度
+    const w = unref(realBoxWidth) / 2;
+    let { direction, waitTime } = unref(options);
+    if (direction === "top") {
+      // 上
+      if (Math.abs(unref(yPos)) >= h) {
+        emit("scrollEnd");
+        yPos.value = 0;
+      }
+      yPos.value -= step.value;
+    } else if (direction === "bottom") {
+      // 下
+      if (unref(yPos) >= 0) {
+        emit("scrollEnd");
+        yPos.value = h * -1;
+      }
+      yPos.value += step.value;
+    } else if (direction === "left") {
+      // 左
+      if (Math.abs(unref(xPos)) >= w) {
+        emit("scrollEnd");
+        xPos.value = 0;
+      }
+      xPos.value -= step.value;
+    } else if (direction === "right") {
+      // 右
+      if (unref(xPos) >= 0) {
+        emit("scrollEnd");
+        xPos.value = w * -1;
+      }
+      xPos.value += step.value;
+    }
+    if (singleWaitTime) clearTimeout(singleWaitTime);
+    if (unref(realSingleStopHeight)) {
+      //是否启动了单行暂停配置
+      if (Math.abs(unref(yPos)) % unref(realSingleStopHeight) < unref(step)) {
+        // 符合条件暂停waitTime
+        singleWaitTime = setTimeout(() => {
+          scrollMove();
+        }, waitTime);
+      } else {
+        scrollMove();
+      }
+    } else if (unref(realSingleStopWidth)) {
+      if (Math.abs(unref(xPos)) % unref(realSingleStopWidth) < unref(step)) {
+        // 符合条件暂停waitTime
+        singleWaitTime = setTimeout(() => {
+          scrollMove();
+        }, waitTime);
+      } else {
+        scrollMove();
+      }
+    } else {
+      scrollMove();
+    }
+  });
+}
+
+function scrollInitMove() {
+  nextTick(() => {
+    const { switchDelay } = unref(options);
+    //清空copy
+    copyHtml.value = "";
+    if (unref(isHorizontal)) {
+      height.value = unref(wrap).offsetHeight;
+      width.value = unref(wrap).offsetWidth;
+      let slotListWidth = unref(slotList).offsetWidth;
+      // 水平滚动设置warp width
+      if (unref(autoPlay)) {
+        // 修正offsetWidth四舍五入
+        slotListWidth = slotListWidth * 2 + 1;
+      }
+      unref(realBox).style.width = slotListWidth + "px";
+      realBoxWidth.value = slotListWidth;
+    }
+
+    if (unref(autoPlay)) {
+      ease = "ease-in";
+      delay.value = 0;
+    } else {
+      ease = "linear";
+      delay.value = switchDelay;
+      return;
+    }
+
+    // 是否可以滚动判断
+    if (unref(scrollSwitch)) {
+      let timer;
+      if (timer) clearTimeout(timer);
+      copyHtml.value = unref(slotList).innerHTML;
+      setTimeout(() => {
+        realBoxHeight.value = unref(realBox).offsetHeight;
+        scrollMove();
+      }, 0);
+    } else {
+      scrollCancle();
+      yPos.value = xPos.value = 0;
+    }
+  });
+}
+
+function scrollStartMove() {
+  //开启scrollMove
+  isHover = false;
+  scrollMove();
+}
+
+function scrollStopMove() {
+  //关闭scrollMove
+  isHover = true;
+  // 防止频频hover进出单步滚动,导致定时器乱掉
+  if (singleWaitTime) clearTimeout(singleWaitTime);
+  scrollCancle();
+}
+
+// 鼠标滚轮事件
+function wheel(e) {
+  e.preventDefault();
+  if (
+    unref(options).direction === "left" ||
+    unref(options).direction === "right"
+  )
+    return;
+  useDebounceFn(() => {
+    e.deltaY > 0 ? (yPos.value -= step.value) : (yPos.value += step.value);
+  }, 50)();
+}
+
+// watchEffect(() => {
+//   const watchData = data;
+//   if (!watchData) return;
+//   nextTick(() => {
+//     reset();
+//   });
+
+//   const watchAutoPlay = unref(autoPlay);
+//   if (watchAutoPlay) {
+//     reset();
+//   } else {
+//     scrollStopMove();
+//   }
+// });
+
+tryOnMounted(() => {
+  scrollInitMove();
+});
+
+tryOnUnmounted(() => {
+  scrollCancle();
+  clearTimeout(singleWaitTime);
+});
+
+defineExpose({
+  reset
+});
+</script>
+
 <template>
   <div :ref="'wrap' + classOption['key']">
     <div
@@ -33,553 +525,3 @@
     </div>
   </div>
 </template>
-
-<script lang="ts">
-import { defineComponent, computed, ref, unref, nextTick } from "vue";
-import {
-  tryOnMounted,
-  tryOnUnmounted,
-  templateRef,
-  useDebounceFn
-} from "@vueuse/core";
-import * as utilsMethods from "./utils";
-const { animationFrame, copyObj } = utilsMethods;
-animationFrame();
-
-export default defineComponent({
-  name: "SeamlessScroll",
-  props: {
-    data: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    },
-    classOption: {
-      type: Object,
-      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 单步滚动的定时器
-    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";
-
-    // eslint-disable-next-line vue/no-setup-props-destructure
-    let { classOption } = props;
-
-    if (classOption["key"] === undefined) {
-      classOption["key"] = 0;
-    }
-
-    const wrap = templateRef<HTMLElement | null>(
-      `wrap${classOption["key"]}`,
-      null
-    );
-    const slotList = templateRef<HTMLElement | null>(
-      `slotList${classOption["key"]}`,
-      null
-    );
-    const realBox = templateRef<HTMLElement | null>(
-      `realBox${classOption["key"]}`,
-      null
-    );
-
-    let leftSwitchState = computed(() => {
-      return unref(xPos) < 0;
-    });
-
-    let rightSwitchState = computed(() => {
-      return Math.abs(unref(xPos)) < unref(realBoxWidth) - unref(width);
-    });
-
-    let defaultOption = computed(() => {
-      return {
-        //步长
-        step: 1,
-        //启动无缝滚动最小数据数
-        limitMoveNum: 5,
-        //是否启用鼠标hover控制
-        hoverStop: true,
-        // bottom 往下 top 往上(默认) left 向左 right 向右
-        direction: "top",
-        //开启移动端touch
-        openTouch: true,
-        //单条数据高度有值hoverStop关闭
-        singleHeight: 0,
-        //单条数据宽度有值hoverStop关闭
-        singleWidth: 0,
-        //单步停止等待时间
-        waitTime: 1000,
-        switchOffset: 30,
-        autoPlay: true,
-        navigation: false,
-        switchSingleStep: 134,
-        switchDelay: 400,
-        switchDisabledClass: "disabled",
-        // singleWidth/singleHeight 是否开启rem度量
-        isSingleRemUnit: false
-      };
-    });
-
-    let options = computed(() => {
-      // @ts-ignore
-      return copyObj({}, unref(defaultOption), classOption);
-    });
-
-    let leftSwitchClass = computed(() => {
-      return unref(leftSwitchState) ? "" : unref(options).switchDisabledClass;
-    });
-
-    let rightSwitchClass = computed(() => {
-      return unref(rightSwitchState) ? "" : unref(options).switchDisabledClass;
-    });
-
-    let leftSwitch = computed(() => {
-      return {
-        position: "absolute",
-        margin: `${unref(height) / 2}px 0 0 -${unref(options).switchOffset}px`,
-        transform: "translate(-100%,-50%)"
-      };
-    });
-
-    let rightSwitch = computed(() => {
-      return {
-        position: "absolute",
-        margin: `${unref(height) / 2}px 0 0 ${
-          unref(width) + unref(options).switchOffset
-        }px`,
-        transform: "translateY(-50%)"
-      };
-    });
-
-    let isHorizontal = computed(() => {
-      return (
-        unref(options).direction !== "bottom" &&
-        unref(options).direction !== "top"
-      );
-    });
-
-    let float = computed(() => {
-      return unref(isHorizontal)
-        ? { float: "left", overflow: "hidden" }
-        : { overflow: "hidden" };
-    });
-
-    let pos = computed(() => {
-      return {
-        transform: `translate(${unref(xPos)}px,${unref(yPos)}px)`,
-        transition: `all ${ease} ${unref(delay)}ms`,
-        overflow: "hidden"
-      };
-    });
-
-    let navigation = computed(() => {
-      return unref(options).navigation;
-    });
-
-    let autoPlay = computed(() => {
-      if (unref(navigation)) return false;
-      return unref(options).autoPlay;
-    });
-
-    let scrollSwitch = computed(() => {
-      // 从 props 解构出来的 属性 不再具有相应性.
-      return props.data.length >= unref(options).limitMoveNum;
-    });
-
-    let hoverStopSwitch = computed(() => {
-      return unref(options).hoverStop && unref(autoPlay) && unref(scrollSwitch);
-    });
-
-    let canTouchScroll = computed(() => {
-      return unref(options).openTouch;
-    });
-
-    let baseFontSize = computed(() => {
-      return unref(options).isSingleRemUnit
-        ? parseInt(
-            window.getComputedStyle(document.documentElement, null).fontSize
-          )
-        : 1;
-    });
-
-    let realSingleStopWidth = computed(() => {
-      return unref(options).singleWidth * unref(baseFontSize);
-    });
-
-    let realSingleStopHeight = computed(() => {
-      return unref(options).singleHeight * unref(baseFontSize);
-    });
-
-    let step = computed(() => {
-      let singleStep;
-      let step = unref(options).step;
-      if (unref(isHorizontal)) {
-        singleStep = unref(realSingleStopWidth);
-      } else {
-        singleStep = unref(realSingleStopHeight);
-      }
-      if (singleStep > 0 && singleStep % step > 0) {
-        throw "如果设置了单步滚动，step需是单步大小的约数，否则无法保证单步滚动结束的位置是否准确";
-      }
-      return step;
-    });
-
-    function reset() {
-      xPos.value = 0;
-      yPos.value = 0;
-      scrollCancle();
-      scrollInitMove();
-    }
-
-    function leftSwitchClick() {
-      if (!unref(leftSwitchState)) return;
-      // 小于单步距离
-      if (Math.abs(unref(xPos)) < unref(options).switchSingleStep) {
-        xPos.value = 0;
-        return;
-      }
-      xPos.value += unref(options).switchSingleStep;
-    }
-
-    function rightSwitchClick() {
-      if (!unref(rightSwitchState)) return;
-      // 小于单步距离
-      if (
-        unref(realBoxWidth) - unref(width) + unref(xPos) <
-        unref(options).switchSingleStep
-      ) {
-        xPos.value = unref(width) - unref(realBoxWidth);
-        return;
-      }
-      xPos.value -= unref(options).switchSingleStep;
-    }
-
-    function scrollCancle() {
-      cancelAnimationFrame(reqFrame || "");
-    }
-
-    function touchStart(e) {
-      if (!unref(canTouchScroll)) return;
-      let timer;
-      //touches数组对象获得屏幕上所有的touch，取第一个touch
-      const touch = e.targetTouches[0];
-      const { waitTime, singleHeight, singleWidth } = unref(options);
-      //取第一个touch的坐标值
-      startPos = {
-        x: touch.pageX,
-        y: touch.pageY
-      };
-      //记录touchStart时候的posY
-      startPosY = unref(yPos);
-      //记录touchStart时候的posX
-      startPosX = unref(xPos);
-      if (!!singleHeight && !!singleWidth) {
-        if (timer) clearTimeout(timer);
-        timer = setTimeout(() => {
-          scrollCancle();
-        }, waitTime + 20);
-      } else {
-        scrollCancle();
-      }
-    }
-
-    function touchMove(e) {
-      //当屏幕有多个touch或者页面被缩放过，就不执行move操作
-      if (
-        !unref(canTouchScroll) ||
-        e.targetTouches.length > 1 ||
-        (e.scale && e.scale !== 1)
-      )
-        return;
-      const touch = e.targetTouches[0];
-      const { direction } = unref(options);
-      let endPos = {
-        x: touch.pageX - startPos.x,
-        y: touch.pageY - startPos.y
-      };
-      //阻止触摸事件的默认行为，即阻止滚屏
-      e.preventDefault();
-      //dir，1表示纵向滑动，0为横向滑动
-      const dir = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1 : 0;
-      if (
-        (dir === 1 && direction === "bottom") ||
-        (dir === 1 && direction === "top")
-      ) {
-        // 表示纵向滑动 && 运动方向为上下
-        yPos.value = startPosY + endPos.y;
-      } else if (
-        (dir === 0 && direction === "left") ||
-        (dir === 0 && direction === "right")
-      ) {
-        // 为横向滑动 && 运动方向为左右
-        xPos.value = startPosX + endPos.x;
-      }
-    }
-
-    function touchEnd() {
-      if (!unref(canTouchScroll)) return;
-      let timer;
-      const direction = unref(options).direction;
-      delay.value = 50;
-      if (direction === "top") {
-        if (unref(yPos) > 0) yPos.value = 0;
-      } else if (direction === "bottom") {
-        let h = (unref(realBoxHeight) / 2) * -1;
-        if (unref(yPos) < h) yPos.value = h;
-      } else if (direction === "left") {
-        if (unref(xPos) > 0) xPos.value = 0;
-      } else if (direction === "right") {
-        let w = unref(realBoxWidth) * -1;
-        if (unref(xPos) < w) xPos.value = w;
-      }
-      if (timer) clearTimeout(timer);
-      timer = setTimeout(() => {
-        delay.value = 0;
-        scrollMove();
-      }, unref(delay));
-    }
-
-    function enter() {
-      if (unref(hoverStopSwitch)) scrollStopMove();
-    }
-
-    function leave() {
-      if (unref(hoverStopSwitch)) scrollStartMove();
-    }
-
-    function scrollMove() {
-      // 鼠标移入时拦截scrollMove()
-      if (isHover) return;
-      //进入move立即先清除动画 防止频繁touchMove导致多动画同时进行
-      // scrollCancle();
-      reqFrame = requestAnimationFrame(function () {
-        //实际高度
-        const h = unref(realBoxHeight) / 2;
-        //宽度
-        const w = unref(realBoxWidth) / 2;
-        let { direction, waitTime } = unref(options);
-        if (direction === "top") {
-          // 上
-          if (Math.abs(unref(yPos)) >= h) {
-            emit("ScrollEnd");
-            yPos.value = 0;
-          }
-          yPos.value -= step.value;
-        } else if (direction === "bottom") {
-          // 下
-          if (unref(yPos) >= 0) {
-            emit("ScrollEnd");
-            yPos.value = h * -1;
-          }
-          yPos.value += step.value;
-        } else if (direction === "left") {
-          // 左
-          if (Math.abs(unref(xPos)) >= w) {
-            emit("ScrollEnd");
-            xPos.value = 0;
-          }
-          xPos.value -= step.value;
-        } else if (direction === "right") {
-          // 右
-          if (unref(xPos) >= 0) {
-            emit("ScrollEnd");
-            xPos.value = w * -1;
-          }
-          xPos.value += step.value;
-        }
-        if (singleWaitTime) clearTimeout(singleWaitTime);
-        if (unref(realSingleStopHeight)) {
-          //是否启动了单行暂停配置
-          if (
-            Math.abs(unref(yPos)) % unref(realSingleStopHeight) <
-            unref(step)
-          ) {
-            // 符合条件暂停waitTime
-            singleWaitTime = setTimeout(() => {
-              scrollMove();
-            }, waitTime);
-          } else {
-            scrollMove();
-          }
-        } else if (unref(realSingleStopWidth)) {
-          if (
-            Math.abs(unref(xPos)) % unref(realSingleStopWidth) <
-            unref(step)
-          ) {
-            // 符合条件暂停waitTime
-            singleWaitTime = setTimeout(() => {
-              scrollMove();
-            }, waitTime);
-          } else {
-            scrollMove();
-          }
-        } else {
-          scrollMove();
-        }
-      });
-    }
-
-    function scrollInitMove() {
-      nextTick(() => {
-        const { switchDelay } = unref(options);
-        //清空copy
-        copyHtml.value = "";
-        if (unref(isHorizontal)) {
-          height.value = unref(wrap).offsetHeight;
-          width.value = unref(wrap).offsetWidth;
-          let slotListWidth = unref(slotList).offsetWidth;
-          // 水平滚动设置warp width
-          if (unref(autoPlay)) {
-            // 修正offsetWidth四舍五入
-            slotListWidth = slotListWidth * 2 + 1;
-          }
-          unref(realBox).style.width = slotListWidth + "px";
-          realBoxWidth.value = slotListWidth;
-        }
-
-        if (unref(autoPlay)) {
-          ease = "ease-in";
-          delay.value = 0;
-        } else {
-          ease = "linear";
-          delay.value = switchDelay;
-          return;
-        }
-
-        // 是否可以滚动判断
-        if (unref(scrollSwitch)) {
-          let timer;
-          if (timer) clearTimeout(timer);
-          copyHtml.value = unref(slotList).innerHTML;
-          setTimeout(() => {
-            realBoxHeight.value = unref(realBox).offsetHeight;
-            scrollMove();
-          }, 0);
-        } else {
-          scrollCancle();
-          yPos.value = xPos.value = 0;
-        }
-      });
-    }
-
-    function scrollStartMove() {
-      //开启scrollMove
-      isHover = false;
-      scrollMove();
-    }
-
-    function scrollStopMove() {
-      //关闭scrollMove
-      isHover = true;
-      // 防止频频hover进出单步滚动,导致定时器乱掉
-      if (singleWaitTime) clearTimeout(singleWaitTime);
-      scrollCancle();
-    }
-
-    // watchEffect(() => {
-    //   const watchData = data;
-    //   if (!watchData) return;
-    //   nextTick(() => {
-    //     reset();
-    //   });
-
-    //   const watchAutoPlay = unref(autoPlay);
-    //   if (watchAutoPlay) {
-    //     reset();
-    //   } else {
-    //     scrollStopMove();
-    //   }
-    // });
-
-    // 鼠标滚轮事件
-    function wheel(e) {
-      e.preventDefault();
-      if (
-        unref(options).direction === "left" ||
-        unref(options).direction === "right"
-      )
-        return;
-      useDebounceFn(() => {
-        e.deltaY > 0 ? (yPos.value -= step.value) : (yPos.value += step.value);
-      }, 50)();
-    }
-
-    tryOnMounted(() => {
-      scrollInitMove();
-    });
-
-    tryOnUnmounted(() => {
-      scrollCancle();
-      clearTimeout(singleWaitTime);
-    });
-
-    return {
-      xPos,
-      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>
diff --git a/src/components/ReSeamlessScroll/src/utils.ts b/src/components/ReSeamlessScroll/src/utils.ts
index 52178c73c..021a65d18 100644
--- a/src/components/ReSeamlessScroll/src/utils.ts
+++ b/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 ||
diff --git a/tsconfig.json b/tsconfig.json
index d1c251b11..808e2507a 100644
--- a/tsconfig.json
+++ b/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",
diff --git a/types/global.d.ts b/types/global.d.ts
index 815212d5e..aca224dca 100644
--- a/types/global.d.ts
+++ b/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;
-    oCancelAnimationFrame: (id?: string) => any;
-    msCancelAnimationFrame: (id?: string) => any;
-    mozRequestAnimationFrame: (id?: string) => any;
-    oRequestAnimationFrame: (id?: string) => any;
-    msRequestAnimationFrame: (id?: string) => any;
+    mozRequestAnimationFrame: (callback: FrameRequestCallback) => number;
+    oRequestAnimationFrame: (callback: FrameRequestCallback) => number;
+    msRequestAnimationFrame: (callback: FrameRequestCallback) => number;
   }
 
   // vue
diff --git a/types/index.d.ts b/types/index.d.ts
index 314e07fc2..7c8b94ef8 100644
--- a/types/index.d.ts
+++ b/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]>;
+};
diff --git a/yarn.lock b/yarn.lock
index 3c86bf323..b9ed8aff6 100644
--- a/yarn.lock
+++ b/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":
-  version "6.3.3"
-  resolved "https://registry.npmjs.org/@vueuse/core/-/core-6.3.3.tgz#0682c01b50d28e91d3d76f27278600ee1692fa24"
-  integrity sha512-qa/0WYqcvqFKQmlkgsLGlXBrYcQeUi3fzHMIaxsD/lO/zm0IWBSN8CTFu91LwER5qNYs4DGhU5pu7jOdrTzAIQ==
+"@vue/shared@3.2.12":
+  version "3.2.12"
+  resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.2.12.tgz#304064a4b56fc6c7b9169d80e9ee62ecb4bf0a1c"
+  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":
-  version "6.3.3"
-  resolved "https://registry.npmjs.org/@vueuse/shared/-/shared-6.3.3.tgz#4e5c600ad1ed5bf2a8630ad0bd38edb1f4269f37"
-  integrity sha512-2+YPRhFNUXEhhvKNTWBtNU6hGkft9+mfYSVjI4hZu2U8KDbNNKF/215lBPzMYI2twScDtPsAssQ+vu5t9PBy0g==
+"@vueuse/shared@6.4.1":
+  version "6.4.1"
+  resolved "https://registry.npmjs.org/@vueuse/shared/-/shared-6.4.1.tgz#5bc84be107cead84e11c21d2c57b1e9f2c376975"
+  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"

From afff1d677bb5066d65c86e0f3c925ed60666ba7d Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Sun, 19 Sep 2021 01:12:46 +0800
Subject: [PATCH 5/6] refactor: use setup refactor

---
 .eslintignore                           |  2 +-
 .eslintrc.js                            |  1 +
 package.json                            |  2 +-
 src/components/ReCropper/src/index.tsx  | 71 +++++++++++++------------
 src/components/ReFlop/src/Filpper.tsx   | 24 +++++----
 src/components/ReInfo/index.vue         |  2 +
 src/components/ReSelector/src/index.tsx | 56 +++++++++----------
 src/config/index.ts                     |  2 +-
 src/main.ts                             | 17 +++---
 src/plugins/i18n/config.ts              |  1 +
 src/plugins/vxe-table/index.ts          |  3 +-
 src/router/index.ts                     | 20 ++++---
 src/utils/algorithm/index.ts            |  1 -
 src/utils/http/config.ts                |  3 +-
 src/utils/operate/index.ts              | 10 ++--
 src/utils/progress/index.ts             | 15 ++++--
 src/views/components/cropping/index.vue |  2 +
 tsconfig.json                           |  2 +-
 18 files changed, 128 insertions(+), 106 deletions(-)

diff --git a/.eslintignore b/.eslintignore
index da1f2b188..74756295d 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,4 +1,4 @@
 public
 dist
 *.d.ts
-package.json
+package.json
\ No newline at end of file
diff --git a/.eslintrc.js b/.eslintrc.js
index c098167c3..f414aa0bb 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -24,6 +24,7 @@ module.exports = {
     ElRef: "readonly",
     global: "readonly",
     ForDataType: "readonly",
+    ComponentRoutes: "readonly",
 
     // script setup
     defineProps: "readonly",
diff --git a/package.json b/package.json
index 713fe2c8e..42f75e7ba 100644
--- a/package.json
+++ b/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": {
diff --git a/src/components/ReCropper/src/index.tsx b/src/components/ReCropper/src/index.tsx
index d26b4e752..b0d404ac4 100644
--- a/src/components/ReCropper/src/index.tsx
+++ b/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({
-  name: "Cropper",
-  props: {
-    src: {
-      type: String,
-      required: true
-    },
-    alt: {
-      type: String
-    },
-    width: {
-      type: [String, Number],
-      default: ""
-    },
-    height: {
-      type: [String, Number],
-      default: "360px"
-    },
-    crossorigin: {
-      type: String || Object,
-      default: undefined
-    },
-    imageStyle: {
-      type: Object as PropType<CSSProperties>,
-      default() {
-        return {};
-      }
-    },
-    options: {
-      type: Object as PropType<Options>,
-      default() {
-        return {};
-      }
+const props = {
+  src: {
+    type: String,
+    required: true
+  },
+  alt: {
+    type: String
+  },
+  width: {
+    type: [String, Number],
+    default: ""
+  },
+  height: {
+    type: [String, Number],
+    default: "360px"
+  },
+  crossorigin: {
+    type: String || Object,
+    default: undefined
+  },
+  imageStyle: {
+    type: Object as PropType<CSSProperties>,
+    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 {
diff --git a/src/components/ReFlop/src/Filpper.tsx b/src/components/ReFlop/src/Filpper.tsx
index 05904f12f..c62b67041 100644
--- a/src/components/ReFlop/src/Filpper.tsx
+++ b/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: {
-    // 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)
-  },
+  props,
   setup(props) {
     // eslint-disable-next-line vue/no-setup-props-destructure
     const { frontText, backText, duration } = props;
diff --git a/src/components/ReInfo/index.vue b/src/components/ReInfo/index.vue
index 13d48e86e..3ba657d29 100644
--- a/src/components/ReInfo/index.vue
+++ b/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();
 };
 
diff --git a/src/components/ReSelector/src/index.tsx b/src/components/ReSelector/src/index.tsx
index 32f5dd78b..e8d3d7d39 100644
--- a/src/components/ReSelector/src/index.tsx
+++ b/src/components/ReSelector/src/index.tsx
@@ -21,35 +21,37 @@ let overList = [];
 // 存放第一个选中的元素和最后一个选中元素，只能存放这两个元素
 let selectedList = [];
 
-export default defineComponent({
-  name: "Selector",
-  props: {
-    HsKey: {
-      type: Number || String,
-      default: 0
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    value: {
-      type: Number,
-      default: 0
-    },
-    max: {
-      type: Array,
-      default() {
-        return [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-      }
-    },
-    // 回显数据的索引，长度必须是2
-    echo: {
-      type: Array,
-      default() {
-        return [];
-      }
+const props = {
+  HsKey: {
+    type: Number || String,
+    default: 0
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  value: {
+    type: Number,
+    default: 0
+  },
+  max: {
+    type: Array,
+    default() {
+      return [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
     }
   },
+  // 回显数据的索引，长度必须是2
+  echo: {
+    type: Array,
+    default() {
+      return [];
+    }
+  }
+};
+
+export default defineComponent({
+  name: "Selector",
+  props,
   emits: ["selectedVal"],
   setup(props, { emit }) {
     const instance = getCurrentInstance();
diff --git a/src/config/index.ts b/src/config/index.ts
index 6072b5bd0..e51b86a60 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -1,6 +1,6 @@
 let config: object = {};
 
-const setConfig = (cfg?: any) => {
+const setConfig = (cfg?: unknown) => {
   config = Object.assign(config, cfg);
 };
 
diff --git a/src/main.ts b/src/main.ts
index e3cfc1a1b..e2fc3149e 100644
--- a/src/main.ts
+++ b/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 { useElementPlus } from "../src/plugins/element-plus";
-import { useTable } from "../src/plugins/vxe-table";
+import { createApp, Directive } from "vue";
 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");
 });
diff --git a/src/plugins/i18n/config.ts b/src/plugins/i18n/config.ts
index 0f90c934b..02fac41c3 100644
--- a/src/plugins/i18n/config.ts
+++ b/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: {
diff --git a/src/plugins/vxe-table/index.ts b/src/plugins/vxe-table/index.ts
index 572a04513..7c94f0c99 100644
--- a/src/plugins/vxe-table/index.ts
+++ b/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) {
diff --git a/src/router/index.ts b/src/router/index.ts
index e8fce1051..434db5fdb 100644
--- a/src/router/index.ts
+++ b/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();
diff --git a/src/utils/algorithm/index.ts b/src/utils/algorithm/index.ts
index d8ac4dbc2..66db5e98c 100644
--- a/src/utils/algorithm/index.ts
+++ b/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
         };
diff --git a/src/utils/http/config.ts b/src/utils/http/config.ts
index 1eeda688d..a4c3845fb 100644
--- a/src/utils/http/config.ts
+++ b/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",
diff --git a/src/utils/operate/index.ts b/src/utils/operate/index.ts
index f6b9f8ec4..5b12d9645 100644
--- a/src/utils/operate/index.ts
+++ b/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 => {
diff --git a/src/utils/progress/index.ts b/src/utils/progress/index.ts
index 6b29db4ab..5d9fbfca7 100644
--- a/src/utils/progress/index.ts
+++ b/src/utils/progress/index.ts
@@ -2,11 +2,16 @@ import NProgress from "nprogress";
 import "nprogress/nprogress.css";
 
 NProgress.configure({
-  easing: "ease", // 动画方式
-  speed: 500, // 递增进度条的速度
-  showSpinner: true, // 是否显示加载ico
-  trickleSpeed: 200, // 自动递增间隔
-  minimum: 0.3 // 初始化时的最小百分比
+  // 动画方式
+  easing: "ease",
+  // 递增进度条的速度
+  speed: 500,
+  // 是否显示加载ico
+  showSpinner: true,
+  // 自动递增间隔
+  trickleSpeed: 200,
+  // 初始化时的最小百分比
+  minimum: 0.3
 });
 
 export default NProgress;
diff --git a/src/views/components/cropping/index.vue b/src/views/components/cropping/index.vue
index 25cabf53c..5f1b3d948 100644
--- a/src/views/components/cropping/index.vue
+++ b/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);
diff --git a/tsconfig.json b/tsconfig.json
index 808e2507a..d1c251b11 100644
--- a/tsconfig.json
+++ b/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",

From 8bb67d4a5a8b5e93334fd3e95e95351c95ed9aa4 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Sun, 19 Sep 2021 15:39:44 +0800
Subject: [PATCH 6/6] refactor: setup version complete

---
 package.json                             |   4 +-
 src/components/ReHamBurger/src/index.vue |   3 +-
 src/utils/operate/index.ts               |   2 +-
 yarn.lock                                | 104 +----------------------
 4 files changed, 6 insertions(+), 107 deletions(-)

diff --git a/package.json b/package.json
index 42f75e7ba..2e03da190 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "responsive-storage": "^1.0.9",
     "sortablejs": "1.13.0",
     "v-contextmenu": "^3.0.0",
-    "vue": "^3.2.12",
+    "vue": "3.2.11",
     "vue-i18n": "^9.2.0-beta.3",
     "vue-json-pretty": "^2.0.2",
     "vue-router": "^4.0.11",
@@ -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.12",
+    "@vue/compiler-sfc": "3.2.11",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
     "autoprefixer": "^10.2.4",
diff --git a/src/components/ReHamBurger/src/index.vue b/src/components/ReHamBurger/src/index.vue
index c6d448147..8e97718c4 100644
--- a/src/components/ReHamBurger/src/index.vue
+++ b/src/components/ReHamBurger/src/index.vue
@@ -19,8 +19,7 @@ const toggleClick = () => {
 <template>
   <div :class="classes.container" @click="toggleClick">
     <svg
-      class="hamburger"
-      :class="props.isActive ? 'is-active' : ''"
+      :class="['hamburger', props.isActive ? 'is-active' : '']"
       viewBox="0 0 1024 1024"
       xmlns="http://www.w3.org/2000/svg"
       width="64"
diff --git a/src/utils/operate/index.ts b/src/utils/operate/index.ts
index 5b12d9645..13da7cf01 100644
--- a/src/utils/operate/index.ts
+++ b/src/utils/operate/index.ts
@@ -33,7 +33,7 @@ export const removeClass = (
 export const toggleClass = (
   flag: boolean,
   clsName: string,
-  target?: HTMLElement
+  target?: RefType<any>
 ): any => {
   const targetEl = target || document.body;
   let { className } = targetEl;
diff --git a/yarn.lock b/yarn.lock
index b9ed8aff6..37ba41222 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -786,17 +786,6 @@
     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"
@@ -805,15 +794,7 @@
     "@vue/compiler-core" "3.2.11"
     "@vue/shared" "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":
+"@vue/compiler-sfc@3.2.11", "@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==
@@ -837,30 +818,6 @@
     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"
@@ -869,14 +826,6 @@
     "@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"
@@ -903,13 +852,6 @@
   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"
@@ -921,17 +863,6 @@
     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"
@@ -940,14 +871,6 @@
     "@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"
@@ -957,25 +880,11 @@
     "@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==
 
-"@vue/shared@3.2.12":
-  version "3.2.12"
-  resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.2.12.tgz#304064a4b56fc6c7b9169d80e9ee62ecb4bf0a1c"
-  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"
@@ -4596,7 +4505,7 @@ vue-types@^4.1.0:
   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==
@@ -4605,15 +4514,6 @@ vue@^3.1.1:
     "@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"