perf: update

package.json

@@ -36,9 +36,8 @@
     "@pureadmin/descriptions": "^1.1.0",
     "@pureadmin/table": "^1.2.0",
     "@pureadmin/utils": "^1.1.5",
-    "@vueuse/core": "^9.4.0",
+    "@vueuse/core": "^9.5.0",
-    "@vueuse/motion": "^2.0.0-beta.12",
+    "@vueuse/motion": "2.0.0-beta.12",
-    "@vueuse/shared": "^9.4.0",
     "@wangeditor/editor": "^5.1.21",
     "@wangeditor/editor-for-vue": "^5.1.12",
     "animate.css": "^4.1.1",
@@ -49,7 +48,7 @@
     "driver.js": "^0.9.8",
     "echarts": "^5.4.0",
     "el-table-infinite-scroll": "^3.0.1",
-    "element-plus": "^2.2.20",
+    "element-plus": "^2.2.21",
     "element-resize-detector": "^1.2.4",
     "js-cookie": "^3.0.1",
     "jsbarcode": "^3.11.5",
@@ -150,7 +149,7 @@
     "vite-plugin-cdn-import": "^0.3.5",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-mock": "^2.9.6",
-    "vite-plugin-remove-console": "^1.2.0",
+    "vite-plugin-remove-console": "^1.3.0",
     "vite-svg-loader": "^3.6.0",
     "vue-eslint-parser": "^9.1.0",
     "vue-tsc": "^1.0.9"

src/components/ReCropper/src/index.tsx

@@ -8,7 +8,6 @@ import {
   computed,
   PropType
 } from "vue";
-import { templateRef } from "@vueuse/core";
 import { useAttrs } from "@pureadmin/utils";
 
 import Cropper from "cropperjs";
@@ -78,7 +77,7 @@ export default defineComponent({
   props,
   setup(props) {
     const cropper: any = ref<Nullable<Cropper>>(null);
-    const imgElRef = templateRef<HTMLImageElement | null>("imgElRef", null);
+    const imgElRef = ref();
 
     const isReady = ref<boolean>(false);
 

src/components/ReFlop/src/index.vue

@@ -1,17 +1,16 @@
 <script setup lang="ts">
 import { ref, unref, nextTick, onUnmounted } from "vue";
-import { templateRef } from "@vueuse/core";
 import flippers from "./filpper";
 
 const timer = ref(null);
 const flipObjs = ref([]);
 
-const flipperHour1 = templateRef<HTMLElement | null>("flipperHour1", null);
+const flipperHour1 = ref();
-const flipperHour2 = templateRef<HTMLElement | null>("flipperHour2", null);
+const flipperHour2 = ref();
-const flipperMinute1 = templateRef<HTMLElement | null>("flipperMinute1", null);
+const flipperMinute1 = ref();
-const flipperMinute2 = templateRef<HTMLElement | null>("flipperMinute2", null);
+const flipperMinute2 = ref();
-const flipperSecond1 = templateRef<HTMLElement | null>("flipperSecond1", null);
+const flipperSecond1 = ref();
-const flipperSecond2 = templateRef<HTMLElement | null>("flipperSecond2", null);
+const flipperSecond2 = ref();
 
 // 初始化数字
 const init = () => {

src/components/ReFlowChart/src/Control.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, unref, onMounted } from "vue";
-import { templateRef } from "@vueuse/core";
 import { LogicFlow } from "@logicflow/core";
 
 interface Props {
@@ -16,8 +15,8 @@ const emit = defineEmits<{
   (e: "catData"): void;
 }>();
 
-const controlButton3 = templateRef<HTMLElement | any>("controlButton3", null);
+const controlButton3 = ref();
-const controlButton4 = templateRef<HTMLElement | any>("controlButton4", null);
+const controlButton4 = ref();
 
 const focusIndex = ref<Number>(-1);
 const titleLists = ref([

src/layout/components/notice/index.vue

@@ -2,11 +2,10 @@
 import { ref } from "vue";
 import { noticesData } from "./data";
 import NoticeList from "./noticeList.vue";
-import { templateRef } from "@vueuse/core";
 import { Tabs, TabPane } from "@pureadmin/components";
 
-const dropdownDom = templateRef<ElRef | null>("dropdownDom", null);
+const dropdownDom = ref();
-const activeName = ref(noticesData[0].name);
+const activeKey = ref(noticesData[2].key);
 const notices = ref(noticesData);
 
 const noticesNum = ref(0);
@@ -33,7 +32,8 @@ function tabClick() {
         <Tabs
           centered
           class="dropdown-tabs"
-          v-model:activeName="activeName"
+          :tabBarStyle="{ marginLeft: notices?.length > 4 ? '8px' : '0' }"
+          v-model="activeKey"
           @tabClick="tabClick"
         >
           <template v-for="item in notices" :key="item.key">

src/layout/components/setting/index.vue

@@ -13,7 +13,6 @@ import { useRouter } from "vue-router";
 import panel from "../panel/index.vue";
 import { emitter } from "@/utils/mitt";
 import { resetRouter } from "@/router";
-import { templateRef } from "@vueuse/core";
 import { removeToken } from "@/utils/auth";
 import { routerArrays } from "@/layout/types";
 import { useNav } from "@/layout/hooks/useNav";
@@ -38,9 +37,9 @@ const { isDark } = useDark();
 const { isSelect } = useCssModule();
 const { $storage } = useGlobal<GlobalPropertiesApi>();
 
-const mixRef = templateRef<HTMLElement | null>("mixRef", null);
+const mixRef = ref();
-const verticalRef = templateRef<HTMLElement | null>("verticalRef", null);
+const verticalRef = ref();
-const horizontalRef = templateRef<HTMLElement | null>("horizontalRef", null);
+const horizontalRef = ref();
 
 const {
   body,

src/layout/components/sidebar/breadCrumb.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { isEqual } from "lodash-unified";
+import { isEqual } from "@pureadmin/utils";
 import { transformI18n } from "@/plugins/i18n";
 import { ref, watch, onMounted, toRaw } from "vue";
 import { getParentPaths, findRouteByPath } from "@/router/utils";

src/layout/hooks/useTag.ts

@@ -9,7 +9,7 @@ import {
   getCurrentInstance
 } from "vue";
 import { tagsViewsType } from "../types";
-import { isEqual } from "lodash-unified";
+import { isEqual } from "@pureadmin/utils";
 import type { StorageConfigs } from "/#/index";
 import { useEventListener } from "@vueuse/core";
 import { useRoute, useRouter } from "vue-router";

src/store/modules/multiTags.ts

@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 import { store } from "@/store";
-import { isEqual } from "lodash-unified";
+import { isEqual } from "@pureadmin/utils";
 import type { StorageConfigs } from "/#/index";
 import { routerArrays } from "@/layout/types";
 import { multiType, positionType } from "./types";

src/views/able/line-tree.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import { cloneDeep } from "lodash-unified";
+import { clone } from "@pureadmin/utils";
 import { transformI18n } from "@/plugins/i18n";
 import ElTreeLine from "@/components/ReTreeLine";
 import { extractPathList, deleteChildren } from "@pureadmin/utils";
@@ -10,7 +10,7 @@ defineOptions({
   name: "LineTree"
 });
 
-const menusTree = cloneDeep(usePermissionStoreHook().wholeMenus);
+const menusTree = clone(usePermissionStoreHook().wholeMenus, true);
 const menusData = computed(() => {
   return deleteChildren(menusTree);
 });

src/views/able/menu-tree.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
-import { cloneDeep } from "lodash-unified";
+import { clone } from "@pureadmin/utils";
 import type { ElTreeV2 } from "element-plus";
 import { transformI18n } from "@/plugins/i18n";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
@@ -24,7 +24,7 @@ const dataProps = ref({
   children: "children"
 });
 const treeRef = ref<InstanceType<typeof ElTreeV2>>();
-const menusTree = cloneDeep(usePermissionStoreHook().wholeMenus);
+const menusTree = clone(usePermissionStoreHook().wholeMenus, true);
 
 const menusData = computed(() => {
   return deleteChildren(menusTree);

src/views/components/seamless-scroll/index.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import { ref, reactive, unref } from "vue";
-import { templateRef } from "@vueuse/core";
 import SeamlessScroll from "@/components/ReSeamlessScroll";
 
 defineOptions({
   name: "SeamlessScroll"
 });
 
-const scroll = templateRef<ElRef | null>("scroll", null);
+const scroll = ref();
 
 const listData = ref([
   {

src/views/login/utils/verifyCode.ts

@@ -1,5 +1,5 @@
 import type { FormInstance, FormItemProp } from "element-plus";
-import { cloneDeep } from "lodash-unified";
+import { clone } from "@pureadmin/utils";
 import { ref } from "vue";
 
 const isDisabled = ref(false);
@@ -13,7 +13,7 @@ export const useVerifyCode = () => {
     time = 60
   ) => {
     if (!formEl) return;
-    const initTime = cloneDeep(time);
+    const initTime = clone(time, true);
     await formEl.validateField(props, isValid => {
       if (isValid) {
         clearInterval(timer.value);

src/views/system/dict/index.vue

@@ -2,7 +2,7 @@
 import XEUtils from "xe-utils";
 import Config from "./config.vue";
 import { useI18n } from "vue-i18n";
-import { cloneDeep } from "lodash-unified";
+import { clone } from "@pureadmin/utils";
 import { reactive, ref, unref, nextTick } from "vue";
 import { useCopyToClipboard } from "@pureadmin/utils";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
@@ -92,7 +92,7 @@ const dictData = reactive({
   ] as VxeFormPropTypes.Items
 });
 
-const originData = cloneDeep(dictData.tableData);
+const originData = clone(dictData.tableData, true);
 
 const xTree = ref<TablePublicMethods>();
 const xForm = ref<FormMethods>();

src/views/tabs/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
-import { cloneDeep } from "lodash-unified";
+import { clone } from "@pureadmin/utils";
 import { transformI18n } from "@/plugins/i18n";
 import { TreeSelect } from "@pureadmin/components";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
@@ -17,7 +17,7 @@ defineOptions({
 });
 
 const { toDetail, router } = useDetail();
-const menusTree = cloneDeep(usePermissionStoreHook().wholeMenus);
+const menusTree = clone(usePermissionStoreHook().wholeMenus, true);
 
 const treeData = computed(() => {
   return appendFieldByUniqueId(deleteChildren(menusTree), 0, {

src/views/welcome/components/Infinite.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { ref, reactive } from "vue";
-import { templateRef } from "@vueuse/core";
 import SeamlessScroll from "@/components/ReSeamlessScroll";
 
-const scroll = templateRef<ElRef | null>("scroll", null);
+const scroll = ref();
 
 const listData = ref([
   {