refactor: use setup refactor

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";
 

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>

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;