perf: update

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 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 flipperHour1 = ref();
+const flipperHour2 = ref();
+const flipperMinute1 = ref();
+const flipperMinute2 = ref();
+const flipperSecond1 = ref();
+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 controlButton4 = templateRef<HTMLElement | any>("controlButton4", null);
+const controlButton3 = ref();
+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 activeName = ref(noticesData[0].name);
+const dropdownDom = ref();
+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 verticalRef = templateRef<HTMLElement | null>("verticalRef", null);
-const horizontalRef = templateRef<HTMLElement | null>("horizontalRef", null);
+const mixRef = ref();
+const verticalRef = ref();
+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([
   {