refactor: 修改为setup形式

apps/web-antd/src/views/monitor/cache/components/command-chart.vue

@@ -1,46 +1,41 @@
-<script lang="ts">
+<script setup lang="ts">
-import type { PropType } from 'vue';
-
 import type { EchartsUIType } from '@vben/plugins/echarts';
 
-import { defineComponent, onActivated, onMounted, ref, watch } from 'vue';
+import { onActivated, onMounted, ref, watch } from 'vue';
 
 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
-export default defineComponent({
+interface Props {
-  components: { EchartsUI },
+  data?: { name: string; value: string }[];
-  props: {
+}
-    data: {
-      default: () => [],
-      type: Array as PropType<{ name: string; value: string }[]>,
-    },
-  },
-  setup(props, { expose }) {
-    expose({});
 
-    const chartRef = ref<EchartsUIType>();
+const props = withDefaults(defineProps<Props>(), {
-    const { renderEcharts, resize } = useEcharts(chartRef);
+  data: () => [],
+});
 
-    watch(
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts, resize } = useEcharts(chartRef);
+
+watch(
   () => props.data,
   () => {
     if (!chartRef.value) return;
     setEchartsOption(props.data);
   },
   { immediate: true },
-    );
+);
 
-    onMounted(() => {
+onMounted(() => {
   setEchartsOption(props.data);
-    });
+});
-    /**
+/**
  * 从其他页面切换回来会有一个奇怪的动画效果 需要调用resize
  * 该饼图组件需要关闭animation
  */
-    onActivated(() => resize(false));
+onActivated(() => resize(false));
 
-    type EChartsOption = Parameters<typeof renderEcharts>['0'];
+type EChartsOption = Parameters<typeof renderEcharts>['0'];
-    function setEchartsOption(data: any[]) {
+function setEchartsOption(data: any[]) {
   const option: EChartsOption = {
     series: [
       {
@@ -60,13 +55,7 @@ export default defineComponent({
     },
   };
   renderEcharts(option);
-    }
+}
-
-    return {
-      chartRef,
-    };
-  },
-});
 </script>
 
 <template>

apps/web-antd/src/views/monitor/cache/components/memory-chart.vue

@@ -1,56 +1,53 @@
-<script lang="ts">
+<script setup lang="ts">
 import type { EchartsUIType } from '@vben/plugins/echarts';
 
-import { defineComponent, onActivated, onMounted, ref, watch } from 'vue';
+import { onActivated, onMounted, ref, watch } from 'vue';
 
 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
-export default defineComponent({
+interface Props {
-  components: { EchartsUI },
+  data?: string;
-  props: {
+}
-    data: {
-      default: '0',
-      type: String,
-    },
-  },
-  setup(props, { expose }) {
-    expose({});
 
-    const memoryHtmlRef = ref<EchartsUIType>();
+const props = withDefaults(defineProps<Props>(), {
-    const { renderEcharts, resize } = useEcharts(memoryHtmlRef);
+  data: '0',
+});
 
-    watch(
+const memoryHtmlRef = ref<EchartsUIType>();
+const { renderEcharts, resize } = useEcharts(memoryHtmlRef);
+
+watch(
   () => props.data,
   () => {
     if (!memoryHtmlRef.value) return;
     setEchartsOption(props.data);
   },
   { immediate: true },
-    );
+);
 
-    onMounted(() => {
+onMounted(() => {
   setEchartsOption(props.data);
-    });
+});
-    // 从其他页面切换回来会有一个奇怪的动画效果 需要调用resize
+// 从其他页面切换回来会有一个奇怪的动画效果 需要调用resize
-    onActivated(resize);
+onActivated(resize);
 
-    /**
+/**
  * 获取最近的十的幂次
  * 该函数用于寻找大于给定数字num的最近的10的幂次
  * 主要解决的问题是确定一个数附近较大的十的幂次，这在某些算法中很有用
  *
  * @param num {number} 输入的数字，用于寻找最近的十的幂次
  */
-    function getNearestPowerOfTen(num: number) {
+function getNearestPowerOfTen(num: number) {
   let power = 10;
   while (power <= num) {
     power *= 10;
   }
   return power;
-    }
+}
 
-    type EChartsOption = Parameters<typeof renderEcharts>['0'];
+type EChartsOption = Parameters<typeof renderEcharts>['0'];
-    function setEchartsOption(value: string) {
+function setEchartsOption(value: string) {
   // x10
   const formattedValue = Math.floor(Number.parseFloat(value));
   // 最大值 10以内取10  100以内取100 以此类推
@@ -84,13 +81,7 @@ export default defineComponent({
     },
   };
   renderEcharts(options);
-    }
+}
-
-    return {
-      memoryHtmlRef,
-    };
-  },
-});
 </script>
 
 <template>