Merge branch 'main' into pages

src/App.vue

@@ -7,8 +7,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { useGlobal } from "@pureadmin/utils";
 import { checkVersion } from "version-rocket";
+import { defineComponent, computed } from "vue";
 import { ElConfigProvider } from "element-plus";
 import { ReDialog } from "@/components/ReDialog";
 import { ReDrawer } from "@/components/ReDrawer";
@@ -25,12 +26,16 @@ export default defineComponent({
     ReDialog,
     ReDrawer
   },
-  computed: {
-    currentLocale() {
-      return this.$storage.locale?.locale === "zh"
+  setup() {
+    const { $storage } = useGlobal<GlobalPropertiesApi>();
+    const currentLocale = computed(() => {
+      return $storage.locale?.locale === "zh"
         ? { ...zhCn, ...plusZhCn }
         : { ...en, ...plusEn };
-    }
+    });
+    return {
+      currentLocale
+    };
   },
   beforeCreate() {
     const { version, name: title } = __APP_INFO__.pkg;

src/components/ReSeamlessScroll/src/index.vue

@@ -5,14 +5,10 @@ import {
   ref,
   unref,
   nextTick,
-  computed
+  computed,
+  useTemplateRef
 } from "vue";
-import {
-  tryOnMounted,
-  tryOnUnmounted,
-  templateRef,
-  useDebounceFn
-} from "@vueuse/core";
+import { tryOnMounted, tryOnUnmounted, useDebounceFn } from "@vueuse/core";
 import * as utilsMethods from "./utils";
 const { animationFrame, copyObj } = utilsMethods;
 animationFrame();
@@ -62,17 +58,14 @@ if (props.classOption["key"] === undefined) {
   props.classOption["key"] = 0;
 }
 
-const wrap = templateRef<HTMLElement | null>(
-  `wrap${props.classOption["key"]}`,
-  null
+const wrap = useTemplateRef<HTMLElement | null>(
+  `wrap${props.classOption["key"]}`
 );
-const slotList = templateRef<HTMLElement | null>(
-  `slotList${props.classOption["key"]}`,
-  null
+const slotList = useTemplateRef<HTMLElement | null>(
+  `slotList${props.classOption["key"]}`
 );
-const realBox = templateRef<HTMLElement | null>(
-  `realBox${props.classOption["key"]}`,
-  null
+const realBox = useTemplateRef<HTMLElement | null>(
+  `realBox${props.classOption["key"]}`
 );
 
 const leftSwitchState = computed(() => {

src/views/table/high/echarts/columns.tsx

@@ -1,7 +1,6 @@
-import { ref, computed } from "vue";
 import { tableDataDrag } from "../data";
 import { message } from "@/utils/message";
-import { templateRef } from "@vueuse/core";
+import { ref, computed, useTemplateRef } from "vue";
 import { clone, useDark, useECharts } from "@pureadmin/utils";
 
 export function useColumns() {
@@ -31,7 +30,7 @@ export function useColumns() {
   const theme = computed(() => (isDark.value ? "dark" : "light"));
 
   dataList.value.forEach((_, i) => {
-    const { setOptions } = useECharts(templateRef(`PieChartRef${i}`), {
+    const { setOptions } = useECharts(useTemplateRef(`PieChartRef${i}`), {
       theme
     });
 

src/views/vue-flow/layouting/animationEdge.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, nextTick, ref, toRef, watch } from "vue";
-import { TransitionPresets, executeTransition } from "@vueuse/core";
+import { TransitionPresets, transition } from "@vueuse/core";
 import {
   Position,
   BaseEdge,
@@ -153,7 +153,7 @@ async function runAnimation() {
     currentLength.value = totalLength;
   }
 
-  await executeTransition(edgePoint, from, totalLength, {
+  await transition(edgePoint, from, totalLength, {
     transition: TransitionPresets.easeInOutCubic,
     duration: Math.max(1500, totalLength / 2),
     abort: () => !isAnimating.value