perf: improve flowChart logic

build/generate/generateModifyVars.ts

@@ -32,5 +32,6 @@ export function generateModifyVars(dark = false) {
     'font-size-base': '14px', //  Main font size
     'border-radius-base': '2px', //  Component/float fillet
     'link-color': primary, //   Link color
+    'content-background': '#fafafa', //   Link color
   };
 }

build/vite/plugin/theme.ts

@@ -53,6 +53,7 @@ export function configThemePlugin(isBuild: boolean): Plugin[] {
         'border-color-base': '#303030',
         // 'border-color-split': '#30363d',
         'item-active-bg': '#111b26',
+        'content-background': '#ffffff0a', //   Link color
       },
     }),
   ];

package.json

@@ -101,7 +101,7 @@
     "prettier": "^2.2.1",
     "pretty-quick": "^3.1.0",
     "rimraf": "^3.0.2",
-    "rollup-plugin-visualizer": "5.3.6",
+    "rollup-plugin-visualizer": "5.3.4",
     "stylelint": "^13.12.0",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^21.0.0",

src/components/FlowChart/index.ts

 import { App } from 'vue';
-import control from './src/Control.vue';
-import nodePanel from './src/NodePanel.vue';
 import dataDialog from './src/DataDialog.vue';
+import flowChart from './src/index.vue';
 
-export const Control = Object.assign(control, {
+export const FlowChart = Object.assign(flowChart, {
   install(app: App) {
-    app.component(control.name, control);
-  },
-});
-
-export const NodePanel = Object.assign(nodePanel, {
-  install(app: App) {
-    app.component(nodePanel.name, nodePanel);
+    app.component(flowChart.name, flowChart);
   },
 });
 

src/components/FlowChart/src/Control.vue

-<template>
-  <div class="control-container">
-    <!-- 功能按钮 -->
-    <ul>
-      <li
-        v-for="(item, key) in titleLists"
-        :key="key"
-        :title="item.text"
-        @mouseenter.prevent="onEnter(key)"
-        @mouseleave.prevent="focusIndex = -1"
-      >
-        <a-button
-          :disabled="item.disabled"
-          :style="{ cursor: item.disabled === false ? 'pointer' : 'not-allowed' }"
-          @click="onControl(item, key)"
-        >
-          <span :class="'iconfont ' + item.icon"></span>
-          <p>{{ item.text }}</p>
-        </a-button>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-  import { defineComponent, ref, unref, onMounted } from 'vue';
-
-  export default defineComponent({
-    name: 'Control',
-    props: {
-      lf: Object || String,
-      catTurboData: Boolean,
-    },
-    emits: ['catData'],
-    setup(props, { emit }) {
-      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 = !undoAble;
-          unref(titleLists)[4].disabled = !redoAble;
-        });
-      });
-
-      return {
-        focusIndex,
-        titleLists,
-        onControl,
-        onEnter,
-      };
-    },
-  });
-</script>
-
-<style scoped>
-  @import './assets/iconfont/iconfont.css';
-
-  .control-container {
-    position: absolute;
-    right: 20px;
-    background: hsla(0, 0%, 100%, 0.8);
-    box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
-  }
-
-  .iconfont {
-    font-size: 25px;
-  }
-
-  .control-container p {
-    margin: 0;
-    font-size: 12px;
-  }
-
-  .control-container ul {
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    margin: 2px;
-  }
-
-  .control-container ul li {
-    width: 60px;
-    text-align: center;
-  }
-
-  .control-container ul li button {
-    width: 100%;
-    height: 60px;
-    padding: 0;
-    background-color: transparent;
-    border: none;
-    outline: none;
-  }
-</style>

src/components/FlowChart/src/DataDialog.vue

 <template>
-  <vue-json-pretty :path="'res'" :deep="3" :showLength="true" :data="graphData" />
+  <vue-json-pretty :path="'res'" :deep="3" :showLength="true" :data="data" />
 </template>
 
 <script lang="ts">
@@ -12,7 +12,7 @@
       VueJsonPretty,
     },
     props: {
-      graphData: Object,
+      data: Object,
     },
   });
 </script>

src/components/FlowChart/src/FlowChartToolbar.vue

+<template>
+  <div :class="`${prefixCls}-toolbar`" class="flex items-center px-2 py-1">
+    <template v-for="(item, index) in toolbarItemList" :key="item.type || index">
+      <Tooltip placement="bottom" v-bind="item.disabled ? { visible: false } : {}">
+        <template #title>{{ item.tooltip }}</template>
+        <span :class="`${prefixCls}-toolbar__icon`" v-if="item.icon" @click="onControl(item)">
+          <Icon
+            :icon="item.icon"
+            :class="item.disabled ? 'cursor-not-allowed disabeld' : 'cursor-pointer'"
+          />
+        </span>
+      </Tooltip>
+      <Divider v-if="item.separate" type="vertical" />
+    </template>
+  </div>
+</template>
+<script lang="ts">
+  import type { ToolbarConfig } from './types';
+
+  import { defineComponent, ref, onUnmounted, unref, nextTick, watchEffect } from 'vue';
+  import { Divider, Tooltip } from 'ant-design-vue';
+  import { Icon } from '/@/components/Icon';
+
+  import { useFlowChartContext } from './useFlowContext';
+  import { ToolbarTypeEnum } from './enum';
+
+  export default defineComponent({
+    name: 'FlowChartToolbar',
+    components: { Icon, Divider, Tooltip },
+    props: {
+      prefixCls: String,
+    },
+    setup(_, { emit }) {
+      const toolbarItemList = ref<ToolbarConfig[]>([
+        {
+          type: ToolbarTypeEnum.ZOOM_IN,
+          icon: 'codicon:zoom-out',
+          tooltip: '缩小',
+        },
+        {
+          type: ToolbarTypeEnum.ZOOM_OUT,
+          icon: 'codicon:zoom-in',
+          tooltip: '放大',
+        },
+        {
+          type: ToolbarTypeEnum.RESET_ZOOM,
+          icon: 'codicon:screen-normal',
+          tooltip: '重置比例',
+        },
+        { separate: true },
+        {
+          type: ToolbarTypeEnum.UNDO,
+          icon: 'ion:arrow-undo-outline',
+          tooltip: '后退',
+          disabled: true,
+        },
+        {
+          type: ToolbarTypeEnum.REDO,
+          icon: 'ion:arrow-redo-outline',
+          tooltip: '前进',
+          disabled: true,
+        },
+        { separate: true },
+        {
+          type: ToolbarTypeEnum.SNAPSHOT,
+          icon: 'ion:download-outline',
+          tooltip: '下载',
+        },
+        {
+          type: ToolbarTypeEnum.VIEW_DATA,
+          icon: 'carbon:document-view',
+          tooltip: '查看数据',
+        },
+      ]);
+
+      const { logicFlow } = useFlowChartContext();
+
+      function onHistoryChange({ data: { undoAble, redoAble } }) {
+        const itemsList = unref(toolbarItemList);
+        const undoIndex = itemsList.findIndex((item) => item.type === ToolbarTypeEnum.UNDO);
+        const redoIndex = itemsList.findIndex((item) => item.type === ToolbarTypeEnum.REDO);
+        if (undoIndex !== -1) {
+          unref(toolbarItemList)[undoIndex].disabled = !undoAble;
+        }
+        if (redoIndex !== -1) {
+          unref(toolbarItemList)[redoIndex].disabled = !redoAble;
+        }
+      }
+
+      const onControl = (item) => {
+        const lf = unref(logicFlow);
+        if (!lf) {
+          return;
+        }
+        switch (item.type) {
+          case ToolbarTypeEnum.ZOOM_IN:
+            lf.zoom();
+            break;
+          case ToolbarTypeEnum.ZOOM_OUT:
+            lf.zoom(true);
+            break;
+          case ToolbarTypeEnum.RESET_ZOOM:
+            lf.resetZoom();
+            break;
+          case ToolbarTypeEnum.UNDO:
+            lf.undo();
+            break;
+          case ToolbarTypeEnum.REDO:
+            lf.redo();
+            break;
+          case ToolbarTypeEnum.SNAPSHOT:
+            lf.getSnapshot();
+            break;
+          case ToolbarTypeEnum.VIEW_DATA:
+            emit('catData');
+            break;
+        }
+      };
+
+      watchEffect(async () => {
+        if (unref(logicFlow)) {
+          await nextTick();
+          unref(logicFlow)?.on('history:change', onHistoryChange);
+        }
+      });
+
+      onUnmounted(() => {
+        unref(logicFlow)?.off('history:change', onHistoryChange);
+      });
+      return { toolbarItemList, onControl };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-flow-chart-toolbar';
+
+  .@{prefix-cls} {
+    height: 36px;
+    background: @content-background;
+    border-bottom: 1px solid @border-color-base;
+
+    .disabeld {
+      color: @disabled-color;
+    }
+
+    &__icon {
+      display: inline-block;
+      padding: 2px 4px;
+      margin-right: 10px;
+
+      &:hover {
+        color: @primary-color;
+      }
+    }
+  }
+</style>

src/components/FlowChart/src/NodePanel.vue

-<template>
-  <!-- 左侧bpmn元素选择器 -->
-  <div class="node-panel">
-    <div
-      class="node-item"
-      v-for="item in nodeList"
-      :key="item.text"
-      @mousedown="nodeDragNode(item)"
-    >
-      <div class="node-item-icon" :class="item.class">
-        <div v-if="item.type === 'user' || item.type === 'time'" class="shape"></div>
-      </div>
-      <span class="node-label">{{ item.text }}</span>
-    </div>
-  </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;
-    top: 100px;
-    left: 50px;
-    z-index: 101;
-    width: 70px;
-    padding: 20px 10px;
-    text-align: center;
-    background-color: white;
-    border-radius: 6px;
-    box-shadow: 0 0 10px 1px rgb(228, 224, 219);
-  }
-
-  .node-item {
-    margin-bottom: 20px;
-  }
-
-  .node-item-icon {
-    display: flex;
-    height: 30px;
-    background-size: cover;
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-
-  .node-label {
-    margin-top: 5px;
-    font-size: 12px;
-    user-select: none;
-  }
-
-  .node-start {
-    background: url('./background/start.png') no-repeat;
-    background-size: cover;
-  }
-
-  .node-rect {
-    border: 1px solid black;
-  }
-
-  .node-user {
-    background: url('./background/user.png') no-repeat;
-    background-size: cover;
-  }
-
-  .node-time {
-    background: url('./background/time.png') no-repeat;
-    background-size: cover;
-  }
-
-  .node-push {
-    background: url('./background/push.png') no-repeat;
-    background-size: cover;
-  }
-
-  .node-download {
-    background: url('./background/download.png') no-repeat;
-    background-size: cover;
-  }
-
-  .node-click {
-    background: url('./background/click.png') no-repeat;
-    background-size: cover;
-  }
-
-  .node-end {
-    background: url('./background/end.png') no-repeat;
-    background-size: cover;
-  }
-
-  .bpmn-start {
-    cursor: grab;
-    background: url('./assets/background/bpmn-start.png') center center no-repeat;
-  }
-
-  .bpmn-end {
-    cursor: grab;
-    background: url('./assets/background/bpmn-end.png') center center no-repeat;
-  }
-
-  .bpmn-user {
-    cursor: grab;
-    background: url('./assets/background/bpmn-user.png') center center no-repeat;
-  }
-
-  .bpmn-exclusiveGateway {
-    cursor: grab;
-    background: url('./assets/background/bpmn-exclusiveGateway.png') center center no-repeat;
-  }
-</style>

src/components/FlowChart/src/adpterForTurbo.ts

@@ -7,95 +7,6 @@ const TurboType = {
   EXCLUSIVE_GATEWAY: 6,
 };
 
-function getTurboType(type) {
-  switch (type) {
-    case 'bpmn:sequenceFlow':
-      return TurboType.SEQUENCE_FLOW;
-    case 'bpmn:startEvent':
-      return TurboType.START_EVENT;
-    case 'bpmn:endEvent':
-      return TurboType.END_EVENT;
-    case 'bpmn:userTask':
-      return TurboType.USER_TASK;
-    case 'bpmn:serviceTask':
-      return TurboType.SERVICE_TASK;
-    case 'bpmn:exclusiveGateway':
-      return TurboType.EXCLUSIVE_GATEWAY;
-    default:
-      return type;
-  }
-}
-
-function convertNodeToTurboElement(node) {
-  const { id, type, x, y, text = '', properties } = node;
-  return {
-    incoming: [],
-    outgoing: [],
-    dockers: [],
-    type: getTurboType(node.type),
-    properties: {
-      ...properties,
-      name: (text && text.value) || '',
-      x: x,
-      y: y,
-      text,
-      logicFlowType: type,
-    },
-    key: id,
-  };
-}
-
-function convertEdgeToTurboElement(edge) {
-  const {
-    id,
-    type,
-    sourceNodeId,
-    targetNodeId,
-    startPoint,
-    endPoint,
-    pointsList,
-    text = '',
-    properties,
-  } = edge;
-  return {
-    incoming: [sourceNodeId],
-    outgoing: [targetNodeId],
-    type: getTurboType(type),
-    dockers: [],
-    properties: {
-      ...properties,
-      name: (text && text.value) || '',
-      text,
-      startPoint,
-      endPoint,
-      pointsList,
-      logicFlowType: type,
-    },
-    key: id,
-  };
-}
-
-export function toTurboData(data) {
-  const nodeMap = new Map();
-  const turboData = {
-    flowElementList: [],
-  };
-  data.nodes.forEach((node) => {
-    const flowElement = convertNodeToTurboElement(node);
-    turboData.flowElementList.push(flowElement);
-    nodeMap.set(node.id, flowElement);
-  });
-  data.edges.forEach((edge) => {
-    const flowElement = convertEdgeToTurboElement(edge);
-    const sourceElement = nodeMap.get(edge.sourceNodeId);
-    sourceElement.outgoing.push(flowElement.key);
-    const targetElement = nodeMap.get(edge.targetNodeId);
-    targetElement.incoming.push(flowElement.key);
-    turboData.flowElementList.push(flowElement);
-  });
-  return turboData;
-}
-
 function convertFlowElementToEdge(element) {
   const { incoming, outgoing, properties, key } = element;
   const { text, startPoint, endPoint, pointsList, logicFlowType } = properties;
@@ -139,8 +50,12 @@ function convertFlowElementToNode(element) {
   return node;
 }
 
-export function toLogicflowData(data) {
-  const lfData = {
+export function toLogicFlowData(data) {
+  const lfData: {
+    // TODO type
+    nodes: any[];
+    edges: any[];
+  } = {
     nodes: [],
     edges: [],
   };

src/components/FlowChart/src/assets/iconfont/iconfont.css

-@font-face {
-  font-family: 'iconfont';
-  src: url('iconfont.eot?t=1618544337340'); /* IE9 */
-  src: url('iconfont.eot?t=1618544337340#iefix') format('embedded-opentype'),
-    /* IE6-IE8 */
-      url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAZ0AAsAAAAADKgAAAYmAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDZAqLQIldATYCJAMgCxIABCAFhG0HgQkb6ApRlA9Sk+xngd1wXQyjTXRCW7pkEvLB0N9/pZhyo7nvIIK1Nisnipg3omjUREiURDXNNEL/jDRCI5H/riTu/9q0D5OakT05VaM3E4kMJI2QhanZillesmYnVT0pD5+399suTrCEkjDhqLtAxyURhIU6Ser/1tp8aDPgI2g7ex2ah+Q7i0rI+Gy9rSNYOtEEdPFQVkrlj/1c3oZFk6Sv/bYQqWUunsgkk8QRkrgkCJEKpUcO8zx0cFLQr+x6CEiNi0BN2YWV4MwJhmDEqhdU4BwR8oIOEXPCjGMzcoKDuLmnLwLw6vy9vMCFM6ggIW50umRpIbVW14U29L/QmIZgqDs5cD0JDKwCHFIylReQ51yFpO+XKBwDcjHltbq9801mxdeFzX8inbguoAq1yCWzpH95JuRUJIC0EDPH5nNGtIkkA4GgvROBocpEEKLCCBwVj0BRF/CJHFYhEo9WCbF1TCdgEEgF0A0Ee8NxioIeN97QzQqFMd2tdfIJC3KeK0T3eJYu0J07g6BVbCB0IiDVDNsQ1mFcbNxDCTk6IWEb2ShHfHxUlvAjkfj0mHDhC56GAL4CWMUgQXgEywDxuH0TBAD7gDZuRqtx7KWpnyTbushlJUpytdfnUvoS/pXG880npIYe3wueUdIJoa9HlRgdsYiF5QJv8C2zjIbzXERGQmwH0QylmjJfC4evBB8UUKQZMsAMG2aWMU6nc6s9m7X4Thn0gTfomgnm5d0qwX4v0rQH3GZn4Ajp8F2VeUcTTARpA+FfyLcpc+T05bOemT2fny8EH8Vn4LPFh3htyOtB3jDSJj34IpEQ3HNboUdasWNDQifcA8BfPPkTe6YaWp0nF/IrhQHGW2D5HTO7O2zfTH3+gxip/NioTs9VwUXL7T3AbzTxHa3qSu1e4EZTfZl/QiC2c7UI5jZ/ET938pSH8Z8IPBwU0NopeLgB7h6Kvp0GVCOw72KAjKFA71sPKX7/9g+Js/AmNfj8/o28sqNVdSTVI93p08F3v/75zqw8W79vb0RVaCTrw6aNntrQwCtbzzDKosTRFMjp/WFqtpZUEGxsi6P8L09byvlyrrvUJ6/ZFJR/X32mbUmndlduWjbdnwnY2ZBHo8OIKIVDUJah62hi4aKdSoqZsWypN7d0w6nsAzb12tWrqZOl12+W/W7YyLFxDy/7U369cgFF85PUVevYahz8y/HS9ZGrbv7saR0sn5MfEzhinC2Dizcv5xHycyChG33pcskigbRkvXnDaurRjRuIeDdu4rnSgPQ/L196FHQg6FGs7266c82aTtDT1jU0CqzWoG2Ndf91wRo1g/0wo9b4VPtV+2iwl/fjvxq4f83CBZeYgx6njp8mb7jzou9FfPdwBBpffvyUx6XARoc/1umGwtrl034lryLH/YCEwly/XrrckYHsd+/YWY/u3EGI085rV6RD5+Bw7dqnoAvBjzifw3S3zdaNZL/dRnfz7XZup232DX4VtD6Cn+AzkqFgBq6unr/gwtCDuydN51fk76ocHS/nN25Y/WqMe1fzBRgEQHPEjqE0gIbkR1CKM/zYUukn9ItRVMHwLfuO1kaP2mlUivpAUpbb8f5wZS1eib+cs3/qlD9r8DU2NEccqhPVFos3SRGSKtb4hyJEcX6VZhArj8Y+edgVpHICKD9tt8ddsvuYpNLZfQGoyBiY2CzKm1chkFmHUGwbUityTs70kCCSE2DZZADRaSeo0heYTpdQ3vwIAv0+QagzEKTOQnnOzHzoXTMkrCJYy6q7Wb1GNPO6hLi6keVYaDeqpDDFGarGkqy3sLFRMXFPDjZjqYsD5A6BI4RneUk0sdlwM2w0iqxFEtuwhkTpCLHER0fzWQ+I0ogmcLVPgqkQmBZLrdvC1tMQmfGTE66J3y+HCdoZqUgFBd/Y1TCJTL92VqwoMRVQOUxzpYJTiZd1EHAIyXmskS4RmbCySY4ZpVPEsmRv1QbTIKLoGtgt4kVTI74qM2p4tulMzwFS4qPiUDFxCSSUSGJJKJd2ozFS1kgYmyN1snOnimh0brybVuw0G0WV9iF3xeYjFAg4LcEi4Q692C7TUI8omiJRZAN3M+4ikTLBlosAAAA=')
-      format('woff2'),
-    url('iconfont.woff?t=1618544337340') format('woff'),
-    url('iconfont.ttf?t=1618544337340') format('truetype'),
-    /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
-      url('iconfont.svg?t=1618544337340#iconfont') format('svg'); /* iOS 4.1- */
-}
-
-.iconfont {
-  font-family: 'iconfont' !important;
-  font-size: 16px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.icon-full-screen-hs:before {
-  content: '\e656';
-}
-
-.icon-watch-hs:before {
-  content: '\e766';
-}
-
-.icon-download-hs:before {
-  content: '\e6af';
-}
-
-.icon-enlarge-hs:before {
-  content: '\e765';
-}
-
-.icon-previous-hs:before {
-  content: '\e84c';
-}
-
-.icon-zoom-out-hs:before {
-  content: '\e744';
-}
-
-.icon-next-step-hs:before {
-  content: '\e84b';
-}

src/components/FlowChart/src/assets/iconfont/iconfont.js

-!(function (c) {
-  var t,
-    e,
-    o,
-    a,
-    n,
-    l,
-    i =
-      '<svg><symbol id="icon-full-screen-hs" viewBox="0 0 1024 1024"><path d="M960.605 932.345v-240.231c0.045-7.2-2.723-14.445-8.213-19.98-11.115-11.047-29.002-11.047-40.071 0-5.535 5.535-8.303 12.757-8.303 19.98v171.923l-351.99-352.035 351.99-352.013v171.855c0 7.245 2.767 14.49 8.303 20.002 11.070 11.070 28.957 11.070 40.071 0 5.49-5.511 8.257-12.78 8.213-20.002v-240.187c0.045-7.223-2.723-14.468-8.213-20.003-5.58-5.511-12.803-8.279-20.025-8.302h-240.233c-7.222 0-14.467 2.79-19.98 8.302-11.115 11.049-11.115 28.957 0 40.050 5.511 5.535 12.735 8.302 19.98 8.279h171.9l-352.013 352.013-352.012-352.035h171.855c7.268 0.022 14.49-2.745 20.025-8.279 11.070-11.047 11.070-29.002 0-40.050-5.49-5.511-12.758-8.279-20.025-8.303h-240.187c-7.268 0-14.513 2.79-20.025 8.303-5.513 5.558-8.279 12.803-8.279 20.048v240.165c0 7.245 2.79 14.512 8.279 20.002 11.070 11.070 28.98 11.070 40.028 0 5.513-5.511 8.279-12.713 8.279-20.002v-171.855l352.058 352.012-352.035 352.035v-171.922c0-7.2-2.745-14.445-8.279-19.98-11.070-11.047-29.002-11.047-40.028 0-5.558 5.535-8.279 12.757-8.279 19.98v240.231c0 7.223 2.79 14.468 8.279 20.048 5.535 5.468 12.757 8.279 20.025 8.279h240.188c7.268 0 14.49-2.745 20.025-8.279 11.070-11.047 11.070-29.002 0-40.050-5.535-5.535-12.78-8.257-20.025-8.257h-171.877l352.012-352.035 352.013 352.035h-171.9c-7.222 0-14.467 2.768-19.98 8.257-11.115 11.049-11.115 29.002 0 40.050 5.511 5.468 12.735 8.279 19.98 8.279h240.255c7.2 0 14.445-2.813 20.025-8.279 5.467-5.602 8.19-12.825 8.19-20.048z"  ></path></symbol><symbol id="icon-watch-hs" viewBox="0 0 1024 1024"><path d="M511.08 630.42c0.39-0.09 0.8-0.14 1.2-0.2h-0.52zM651 490.5c0 0.2-0.09 0.4-0.13 0.59s0 0.14 0 0.2c0.03-0.29 0.07-0.53 0.13-0.79zM471.17 630.42l-0.84-0.18h-0.31c0.38 0.03 0.77 0.1 1.15 0.18zM331.49 449v0.36c0.08-0.51 0.16-1 0.23-1.52-0.12 0.37-0.19 0.78-0.23 1.16zM468.88 630.1l1.14 0.11c-0.83-0.13-1.67-0.23-2.5-0.36a10 10 0 0 0 1.36 0.25zM331.57 492.78a11.92 11.92 0 0 0 0.24 1.36c-0.13-0.87-0.24-1.76-0.38-2.64 0.05 0.43 0.09 0.86 0.14 1.28zM331.25 490.5c0.07 0.33 0.13 0.66 0.18 1v-0.23zM331.25 450.58c0.05-0.26 0.1-0.5 0.15-0.73s0-0.34 0.05-0.51c-0.06 0.42-0.12 0.84-0.2 1.24zM650.84 491.41v-0.12c-0.07 0.41-0.13 0.83-0.19 1.24 0.09-0.4 0.15-0.8 0.19-1.12z"  ></path><path d="M512 65C264.66 65 65 264.66 65 512s199.66 447 447 447 447-199.66 447-447S759.34 65 512 65z m213.38 684.87c-8.76 9.55-25 8.88-33.91 0l-12.3-12.3q-42.64-42.63-85.28-85.28a200 200 0 0 1-59.3 22.52 214 214 0 0 1-131.48-14.95c-37.52-16.92-69.56-46.36-90.86-81.46-22-36.33-32.73-80.15-29.4-122.54a213.12 213.12 0 0 1 48.3-119.42c54.37-66.3 150.16-92.22 230.58-62.43a214.42 214.42 0 0 1 100.68 77.16c24.62 34.5 37.4 77.11 37.56 119.37a235.67 235.67 0 0 1-2.92 34.06c-6.88 45.84-30.52 87.73-64.1 118.92l5.81 5.81L725.38 716c9.48 9.43 8.79 24.3 0 33.87z"  ></path><path d="M635.31 542.1c1.2-2.36 2.34-4.74 3.44-7.15 0.28-0.61 0.54-1.22 0.81-1.83 1.5-3.86 3-7.72 4.25-11.67a183.83 183.83 0 0 0 6.56-26.9c0.11-0.66 0.2-1.34 0.29-2-0.35 1.85-0.91 3.8 0.21-1.44 0.24-2.18 0.45-4.37 0.61-6.56 0.35-4.66 0.51-9.32 0.52-14s-0.17-9.33-0.52-14q-0.26-3.45-0.64-6.88v-0.08c-1-6-0.2-1.67 0 0 0 0.31 0.11 0.63 0.17 1-0.16-0.89-0.27-1.8-0.41-2.7a182.65 182.65 0 0 0-6.6-27.62c-1.38-4.27-3-8.41-4.59-12.61-0.32-0.71-0.63-1.42-1-2.13-0.92-2-1.87-4-2.87-6a184.55 184.55 0 0 0-13.85-23.12c-1.11-1.58-7-8.66-1.71-2.52-1.42-1.65-2.72-3.42-4.12-5.09q-4.2-5-8.75-9.73c-6.1-6.32-12.78-11.79-19.44-17.49 6.14 5.26-0.94-0.6-2.52-1.71-1.79-1.26-3.6-2.48-5.43-3.68q-5.52-3.59-11.27-6.78-6.07-3.36-12.38-6.26c-0.75-0.35-1.51-0.68-2.26-1-1.64-0.62-3.25-1.3-4.9-1.9a181.3 181.3 0 0 0-27.13-7.74c-2.67-0.55-5.36-1-8.05-1.46-0.9-0.14-1.81-0.25-2.71-0.41l1 0.17c1.67 0.2 6 1 0 0H512q-6.56-0.75-13.15-1a188.34 188.34 0 0 0-28.4 1c-1.1 0.2-2.25 0.31-3.34 0.49-2.24 0.37-4.48 0.78-6.7 1.24q-6.63 1.35-13.14 3.18c-4.29 1.21-8.55 2.58-12.75 4.1-2 0.72-4 1.51-6 2.28l-1.84 0.82a185.92 185.92 0 0 0-24.25 13.32q-3.3 2.16-6.51 4.44c-0.74 0.53-3.82 2.89-3.93 2.93-0.71 0.57-1.41 1.14-2.1 1.72q-2.52 2.1-5 4.27a186.27 186.27 0 0 0-18.65 19.25c-1.32 1.58-6.2 9-2 2.31-1.16 1.83-2.62 3.53-3.86 5.3q-3.78 5.37-7.17 11T346.94 399q-1.5 3-2.89 5.95c-0.86 1.86-3.23 8.91-0.78 1.56-3 8.94-6.46 17.52-8.69 26.72q-1.68 6.94-2.82 14c0 0.21-0.05 0.42-0.08 0.62 0.29-1.51 0.67-2.55-0.28 2-0.2 1.77-0.38 3.54-0.53 5.32a188.09 188.09 0 0 0-0.11 29.36c0.17 2.25 0.41 4.49 0.65 6.74 0.8 3.86 0.63 3.81 0.4 2.87l0.06 0.41q1.06 6.38 2.56 12.66a200.32 200.32 0 0 0 8.27 26c0.46 1 0.89 2 1.35 3q1.4 3 2.89 6 3 5.86 6.39 11.53 3.56 5.89 7.54 11.54c1.13 1.59 2.44 3.11 3.49 4.76-4.09-6.45-0.21-0.31 1.12 1.3a185.34 185.34 0 0 0 19 19.82q2.92 2.63 5.95 5.13c1.62 1.33 7.76 5.22 1.31 1.12 3.49 2.22 6.72 4.91 10.18 7.19a184.79 184.79 0 0 0 23.59 13.12c1 0.48 2.06 0.93 3.09 1.4 2 0.76 3.94 1.54 5.92 2.26 4.2 1.52 8.46 2.89 12.75 4.1s8.72 2.29 13.14 3.18c2.22 0.46 4.46 0.87 6.7 1.24l0.41 0.06c-0.93-0.22-1-0.39 2.81 0.39a200.31 200.31 0 0 0 27.82 1q6.83-0.25 13.61-1c4.64-1 3.6-0.58 2.08-0.28l0.62-0.09c2-0.33 4-0.69 6-1.08a183.29 183.29 0 0 0 27.22-7.55c2.26-0.81 4.49-1.87 6.76-2.64 0.75-0.34 1.51-0.67 2.25-1q5.7-2.64 11.2-5.66c7.94-4.37 15-9.82 22.58-14.65-6.69 4.25 0.74-0.64 2.31-2s3.32-2.83 4.95-4.29q4.86-4.38 9.4-9.08 4.79-5 9.17-10.23c1.26-1.51 2.43-3.1 3.7-4.59-5.06 5.91-0.2 0.17 1-1.45a185.86 185.86 0 0 0 14.31-23.66z"  ></path><path d="M512.68 630.18l1.16-0.19-1.56 0.23z"  ></path></symbol><symbol id="icon-download-hs" viewBox="0 0 1024 1024"><path d="M200 834h632v88a8 8 0 0 1-8 8H192v-88a8 8 0 0 1 8-8z m239-262.037V185c0-13.255 10.745-24 24-24h104v401.473l141.997-137.148c9.534-9.209 24.728-8.945 33.936 0.59l0.004 0.003 72.205 74.799-304.959 294.546c-9.534 9.208-24.728 8.944-33.936-0.59l-0.003-0.004-71.859-74.44-0.063 0.062-205.587-212.927c-9.206-9.534-8.941-24.724 0.59-33.932l74.782-72.246L439 571.963z"  ></path></symbol><symbol id="icon-enlarge-hs" viewBox="0 0 1024 1024"><path d="M945.159 867.61l-206.543-206.538c49.578-63.772 79.108-143.903 79.108-230.953 0-207.97-168.58-376.547-376.639-376.547-207.97 0-376.547 168.577-376.547 376.547 0 208.038 168.577 376.614 376.547 376.614 87.059 0 167.197-29.532 230.973-79.108l206.543 206.544c9.171 9.17 21.227 13.802 33.278 13.802s24.106-4.629 33.28-13.802c18.431-18.43 18.431-48.215 0-66.559v0zM158.701 430.119c0-155.737 126.65-282.39 282.39-282.39 155.826 0 282.477 126.65 282.477 282.39 0 155.805-126.65 282.458-282.477 282.458-155.739 0-282.39-126.65-282.39-282.458v0z"  ></path><path d="M579.708 389.853h-98.352v-98.352c0-22.272-17.991-40.268-40.268-40.352-22.185 0.086-40.267 18.078-40.267 40.352v98.352h-98.352c-22.272 0-40.268 17.991-40.268 40.179 0 22.272 17.991 40.352 40.268 40.352h98.352v98.352c0 22.252 18.080 40.246 40.267 40.333 22.274-0.086 40.268-18.080 40.268-40.333v-98.352h98.352c22.272 0 40.355-18.079 40.267-40.352 0-22.187-17.991-40.179-40.267-40.179v0z"  ></path></symbol><symbol id="icon-previous-hs" viewBox="0 0 1024 1024"><path d="M814.933333 482.133333C716.8 384 597.333333 328.533333 460.8 315.733333V128c0-17.066667-8.533333-34.133333-25.6-38.4-17.066667-8.533333-34.133333-4.266667-46.933333 8.533333L29.866667 473.6c-17.066667 17.066667-17.066667 42.666667 0 59.733333l358.4 392.533334c8.533333 8.533333 21.333333 12.8 34.133333 12.8 4.266667 0 8.533333 0 17.066667-4.266667 17.066667-4.266667 25.6-21.333333 25.6-38.4v-204.8c68.266667-8.533333 128-4.266667 192 12.8 76.8 21.333333 170.666667 93.866667 273.066666 213.333333 12.8 12.8 29.866667 21.333333 51.2 12.8 17.066667-8.533333 29.866667-25.6 25.6-42.666666-21.333333-162.133333-85.333333-298.666667-192-405.333334z"  ></path></symbol><symbol id="icon-zoom-out-hs" viewBox="0 0 1024 1024"><path d="M951.643 877.547l-210.337-210.335c50.487-64.946 80.56-146.547 80.56-235.199 0-211.793-171.681-383.472-383.563-383.472-211.792 0-383.471 171.679-383.471 383.472 0 211.862 171.679 383.538 383.471 383.538 88.661 0 170.271-30.075 235.218-80.56l210.337 210.339c9.34 9.339 21.614 14.055 33.89 14.055s24.551-4.716 33.892-14.055c18.77-18.77 18.77-49.101 0-67.781v0zM150.725 432.011c0-158.601 128.978-287.58 287.58-287.58 158.691 0 287.671 128.978 287.671 287.58 0 158.668-128.978 287.651-287.671 287.651-158.601 0-287.58-128.978-287.58-287.651v0z"  ></path><path d="M397.297 391.004h-100.16c-22.683 0-41.008 18.324-41.008 40.919 0 22.683 18.324 41.094 41.008 41.094h282.333c22.683 0 41.095-18.412 41.007-41.094 0-22.595-18.324-40.919-41.007-40.919v0h-182.173z"  ></path></symbol><symbol id="icon-next-step-hs" viewBox="0 0 1024 1024"><path d="M209.066667 482.133333c98.133333-98.133333 213.333333-153.6 349.866666-166.4V128c0-17.066667 8.533333-34.133333 25.6-38.4 17.066667-8.533333 34.133333-4.266667 46.933334 8.533333l358.4 375.466667c17.066667 17.066667 17.066667 42.666667 0 59.733333l-358.4 392.533334c-8.533333 8.533333-21.333333 12.8-29.866667 12.8-4.266667 0-8.533333 0-17.066667-4.266667-17.066667-4.266667-25.6-21.333333-25.6-38.4v-204.8c-68.266667-8.533333-128-4.266667-192 12.8-76.8 21.333333-170.666667 93.866667-273.066666 213.333333-8.533333 17.066667-29.866667 21.333333-46.933334 12.8-17.066667-8.533333-29.866667-25.6-25.6-42.666666 17.066667-162.133333 81.066667-298.666667 187.733334-405.333334z"  ></path></symbol></svg>',
-    s = (s = document.getElementsByTagName('script'))[s.length - 1].getAttribute('data-injectcss');
-  if (s && !c.__iconfont__svg__cssinject__) {
-    c.__iconfont__svg__cssinject__ = !0;
-    try {
-      document.write(
-        '<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>'
-      );
-    } catch (c) {
-      console && console.log(c);
-    }
-  }
-  function h() {
-    n || ((n = !0), o());
-  }
-  (t = function () {
-    var c, t, e, o;
-    ((o = document.createElement('div')).innerHTML = i),
-      (i = null),
-      (e = o.getElementsByTagName('svg')[0]) &&
-        (e.setAttribute('aria-hidden', 'true'),
-        (e.style.position = 'absolute'),
-        (e.style.width = 0),
-        (e.style.height = 0),
-        (e.style.overflow = 'hidden'),
-        (c = e),
-        (t = document.body).firstChild
-          ? ((o = c), (e = t.firstChild).parentNode.insertBefore(o, e))
-          : t.appendChild(c));
-  }),
-    document.addEventListener
-      ? ~['complete', 'loaded', 'interactive'].indexOf(document.readyState)
-        ? setTimeout(t, 0)
-        : ((e = function () {
-            document.removeEventListener('DOMContentLoaded', e, !1), t();
-          }),
-          document.addEventListener('DOMContentLoaded', e, !1))
-      : document.attachEvent &&
-        ((o = t),
-        (a = c.document),
-        (n = !1),
-        (l = function () {
-          try {
-            a.documentElement.doScroll('left');
-          } catch (c) {
-            return void setTimeout(l, 50);
-          }
-          h();
-        })(),
-        (a.onreadystatechange = function () {
-          'complete' == a.readyState && ((a.onreadystatechange = null), h());
-        }));
-})(window);

src/components/FlowChart/src/assets/iconfont/iconfont.json

-{
-  "id": "2491438",
-  "name": "liu'c'tu",
-  "font_family": "iconfont",
-  "css_prefix_text": "icon-",
-  "description": "",
-  "glyphs": [
-    {
-      "icon_id": "755619",
-      "name": "自适应图标",
-      "font_class": "full-screen-hs",
-      "unicode": "e656",
-      "unicode_decimal": 58966
-    },
-    {
-      "icon_id": "14445801",
-      "name": "查看",
-      "font_class": "watch-hs",
-      "unicode": "e766",
-      "unicode_decimal": 59238
-    },
-    {
-      "icon_id": "9712640",
-      "name": "下载",
-      "font_class": "download-hs",
-      "unicode": "e6af",
-      "unicode_decimal": 59055
-    },
-    {
-      "icon_id": "1029099",
-      "name": "放大",
-      "font_class": "enlarge-hs",
-      "unicode": "e765",
-      "unicode_decimal": 59237
-    },
-    {
-      "icon_id": "20017362",
-      "name": "上一步",
-      "font_class": "previous-hs",
-      "unicode": "e84c",
-      "unicode_decimal": 59468
-    },
-    {
-      "icon_id": "1010015",
-      "name": "缩小",
-      "font_class": "zoom-out-hs",
-      "unicode": "e744",
-      "unicode_decimal": 59204
-    },
-    {
-      "icon_id": "20017363",
-      "name": "下一步",
-      "font_class": "next-step-hs",
-      "unicode": "e84b",
-      "unicode_decimal": 59467
-    }
-  ]
-}

src/components/FlowChart/src/assets/iconfont/iconfont.svg

-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
-<!--
-2013-9-30: Created.
--->
-<svg>
-<metadata>
-Created by iconfont
-</metadata>
-<defs>
-
-<font id="iconfont" horiz-adv-x="1024" >
-  <font-face
-    font-family="iconfont"
-    font-weight="500"
-    font-stretch="normal"
-    units-per-em="1024"
-    ascent="896"
-    descent="-128"
-  />
-    <missing-glyph />
-    
-    <glyph glyph-name="full-screen-hs" unicode="&#58966;" d="M960.605-36.34500000000003v240.231c0.045 7.2-2.723 14.445-8.213 19.98-11.115 11.047-29.002 11.047-40.071 0-5.535-5.535-8.303-12.757-8.303-19.98v-171.923l-351.99 352.035 351.99 352.013v-171.855c0-7.245 2.767-14.49 8.303-20.002 11.07-11.07 28.957-11.07 40.071 0 5.49 5.511 8.257 12.78 8.213 20.002v240.187c0.045 7.223-2.723 14.468-8.213 20.003-5.58 5.511-12.803 8.279-20.025 8.302h-240.233c-7.222 0-14.467-2.79-19.98-8.302-11.115-11.049-11.115-28.957 0-40.05 5.511-5.535 12.735-8.302 19.98-8.279h171.9l-352.013-352.013-352.012 352.035h171.855c7.268-0.022 14.49 2.745 20.025 8.279 11.07 11.047 11.07 29.002 0 40.05-5.49 5.511-12.758 8.279-20.025 8.303h-240.187c-7.268 0-14.513-2.79-20.025-8.303-5.513-5.558-8.279-12.803-8.279-20.048v-240.165c0-7.245 2.79-14.512 8.279-20.002 11.07-11.07 28.98-11.07 40.028 0 5.513 5.511 8.279 12.713 8.279 20.002v171.855l352.058-352.012-352.035-352.035v171.922c0 7.2-2.745 14.445-8.279 19.98-11.07 11.047-29.002 11.047-40.028 0-5.558-5.535-8.279-12.757-8.279-19.98v-240.231c0-7.223 2.79-14.468 8.279-20.048 5.535-5.468 12.757-8.279 20.025-8.279h240.188c7.268 0 14.49 2.745 20.025 8.279 11.07 11.047 11.07 29.002 0 40.05-5.535 5.535-12.78 8.257-20.025 8.257h-171.877l352.012 352.035 352.013-352.035h-171.9c-7.222 0-14.467-2.768-19.98-8.257-11.115-11.049-11.115-29.002 0-40.05 5.511-5.468 12.735-8.279 19.98-8.279h240.255c7.2 0 14.445 2.813 20.025 8.279 5.467 5.602 8.19 12.825 8.19 20.048z"  horiz-adv-x="1024" />
-
-    
-    <glyph glyph-name="watch-hs" unicode="&#59238;" d="M511.08 265.58000000000004c0.39 0.09 0.8 0.14 1.2 0.2h-0.52zM651 405.5c0-0.2-0.09-0.4-0.13-0.59s0-0.14 0-0.2c0.03 0.29 0.07 0.53 0.13 0.79zM471.17 265.58000000000004l-0.84 0.18h-0.31c0.38-0.03 0.77-0.1 1.15-0.18zM331.49 447v-0.36c0.08 0.51 0.16 1 0.23 1.52-0.12-0.37-0.19-0.78-0.23-1.16zM468.88 265.9l1.14-0.11c-0.83 0.13-1.67 0.23-2.5 0.36a10 10 0 0 1 1.36-0.25zM331.57 403.22a11.92 11.92 0 0 1 0.24-1.36c-0.13 0.87-0.24 1.76-0.38 2.64 0.05-0.43 0.09-0.86 0.14-1.28zM331.25 405.5c0.07-0.33 0.13-0.66 0.18-1v0.23zM331.25 445.42c0.05 0.26 0.1 0.5 0.15 0.73s0 0.34 0.05 0.51c-0.06-0.42-0.12-0.84-0.2-1.24zM650.84 404.59v0.12c-0.07-0.41-0.13-0.83-0.19-1.24 0.09 0.4 0.15 0.8 0.19 1.12zM512 831C264.66 831 65 631.3399999999999 65 384s199.66-447 447-447 447 199.66 447 447S759.34 831 512 831z m213.38-684.87c-8.76-9.55-25-8.88-33.91 0l-12.3 12.3q-42.64 42.63-85.28 85.28a200 200 0 0 0-59.3-22.52 214 214 0 0 0-131.48 14.95c-37.52 16.92-69.56 46.36-90.86 81.46-22 36.33-32.73 80.15-29.4 122.54a213.12 213.12 0 0 0 48.3 119.42c54.37 66.3 150.16 92.22 230.58 62.43a214.42 214.42 0 0 0 100.68-77.16c24.62-34.5 37.4-77.11 37.56-119.37a235.67 235.67 0 0 0-2.92-34.06c-6.88-45.84-30.52-87.73-64.1-118.92l5.81-5.81L725.38 180c9.48-9.43 8.79-24.3 0-33.87zM635.31 353.9c1.2 2.36 2.34 4.74 3.44 7.15 0.28 0.61 0.54 1.22 0.81 1.83 1.5 3.86 3 7.72 4.25 11.67a183.83 183.83 0 0 1 6.56 26.9c0.11 0.66 0.2 1.34 0.29 2-0.35-1.85-0.91-3.8 0.21 1.44 0.24 2.18 0.45 4.37 0.61 6.56 0.35 4.66 0.51 9.32 0.52 14s-0.17 9.33-0.52 14q-0.26 3.45-0.64 6.88v0.08c-1 6-0.2 1.67 0 0 0-0.31 0.11-0.63 0.17-1-0.16 0.89-0.27 1.8-0.41 2.7a182.65 182.65 0 0 1-6.6 27.62c-1.38 4.27-3 8.41-4.59 12.61-0.32 0.71-0.63 1.42-1 2.13-0.92 2-1.87 4-2.87 6a184.55 184.55 0 0 1-13.85 23.12c-1.11 1.58-7 8.66-1.71 2.52-1.42 1.65-2.72 3.42-4.12 5.09q-4.2 5-8.75 9.73c-6.1 6.32-12.78 11.79-19.44 17.49 6.14-5.26-0.94 0.6-2.52 1.71-1.79 1.26-3.6 2.48-5.43 3.68q-5.52 3.59-11.27 6.78-6.07 3.36-12.38 6.26c-0.75 0.35-1.51 0.68-2.26 1-1.64 0.62-3.25 1.3-4.9 1.9a181.3 181.3 0 0 1-27.13 7.74c-2.67 0.55-5.36 1-8.05 1.46-0.9 0.14-1.81 0.25-2.71 0.41l1-0.17c1.67-0.2 6-1 0 0H512q-6.56 0.75-13.15 1a188.34 188.34 0 0 1-28.4-1c-1.1-0.2-2.25-0.31-3.34-0.49-2.24-0.37-4.48-0.78-6.7-1.24q-6.63-1.35-13.14-3.18c-4.29-1.21-8.55-2.58-12.75-4.1-2-0.72-4-1.51-6-2.28l-1.84-0.82a185.92 185.92 0 0 1-24.25-13.32q-3.3-2.16-6.51-4.44c-0.74-0.53-3.82-2.89-3.93-2.93-0.71-0.57-1.41-1.14-2.1-1.72q-2.52-2.1-5-4.27a186.27 186.27 0 0 1-18.65-19.25c-1.32-1.58-6.2-9-2-2.31-1.16-1.83-2.62-3.53-3.86-5.3q-3.78-5.37-7.17-11T346.94 497q-1.5-3-2.89-5.95c-0.86-1.86-3.23-8.91-0.78-1.56-3-8.94-6.46-17.52-8.69-26.72q-1.68-6.94-2.82-14c0-0.21-0.05-0.42-0.08-0.62 0.29 1.51 0.67 2.55-0.28-2-0.2-1.77-0.38-3.54-0.53-5.32a188.09 188.09 0 0 1-0.11-29.36c0.17-2.25 0.41-4.49 0.65-6.74 0.8-3.86 0.63-3.81 0.4-2.87l0.06-0.41q1.06-6.38 2.56-12.66a200.32 200.32 0 0 1 8.27-26c0.46-1 0.89-2 1.35-3q1.4-3 2.89-6 3-5.86 6.39-11.53 3.56-5.89 7.54-11.54c1.13-1.59 2.44-3.11 3.49-4.76-4.09 6.45-0.21 0.31 1.12-1.3a185.34 185.34 0 0 1 19-19.82q2.92-2.63 5.95-5.13c1.62-1.33 7.76-5.22 1.31-1.12 3.49-2.22 6.72-4.91 10.18-7.19a184.79 184.79 0 0 1 23.59-13.12c1-0.48 2.06-0.93 3.09-1.4 2-0.76 3.94-1.54 5.92-2.26 4.2-1.52 8.46-2.89 12.75-4.1s8.72-2.29 13.14-3.18c2.22-0.46 4.46-0.87 6.7-1.24l0.41-0.06c-0.93 0.22-1 0.39 2.81-0.39a200.31 200.31 0 0 1 27.82-1q6.83 0.25 13.61 1c4.64 1 3.6 0.58 2.08 0.28l0.62 0.09c2 0.33 4 0.69 6 1.08a183.29 183.29 0 0 1 27.22 7.55c2.26 0.81 4.49 1.87 6.76 2.64 0.75 0.34 1.51 0.67 2.25 1q5.7 2.64 11.2 5.66c7.94 4.37 15 9.82 22.58 14.65-6.69-4.25 0.74 0.64 2.31 2s3.32 2.83 4.95 4.29q4.86 4.38 9.4 9.08 4.79 5 9.17 10.23c1.26 1.51 2.43 3.1 3.7 4.59-5.06-5.91-0.2-0.17 1 1.45a185.86 185.86 0 0 1 14.31 23.66zM512.68 265.82000000000005l1.16 0.19-1.56-0.23z"  horiz-adv-x="1024" />
-
-    
-    <glyph glyph-name="download-hs" unicode="&#59055;" d="M200 62h632v-88a8 8 0 0 0-8-8H192v88a8 8 0 0 0 8 8z m239 262.037V711c0 13.255 10.745 24 24 24h104v-401.473l141.997 137.148c9.534 9.209 24.728 8.945 33.936-0.59l0.004-0.003 72.205-74.799-304.959-294.546c-9.534-9.208-24.728-8.944-33.936 0.59l-0.003 0.004-71.859 74.44-0.063-0.062-205.587 212.927c-9.206 9.534-8.941 24.724 0.59 33.932l74.782 72.246L439 324.03700000000003z"  horiz-adv-x="1024" />
-
-    
-    <glyph glyph-name="enlarge-hs" unicode="&#59237;" d="M945.159 28.389999999999986l-206.543 206.538c49.578 63.772 79.108 143.903 79.108 230.953 0 207.97-168.58 376.547-376.639 376.547-207.97 0-376.547-168.577-376.547-376.547 0-208.038 168.577-376.614 376.547-376.614 87.059 0 167.197 29.532 230.973 79.108l206.543-206.544c9.171-9.17 21.227-13.802 33.278-13.802s24.106 4.629 33.28 13.802c18.431 18.43 18.431 48.215 0 66.559v0zM158.701 465.881c0 155.737 126.65 282.39 282.39 282.39 155.826 0 282.477-126.65 282.477-282.39 0-155.805-126.65-282.458-282.477-282.458-155.739 0-282.39 126.65-282.39 282.458v0zM579.708 506.147h-98.352v98.352c0 22.272-17.991 40.268-40.268 40.352-22.185-0.086-40.267-18.078-40.267-40.352v-98.352h-98.352c-22.272 0-40.268-17.991-40.268-40.179 0-22.272 17.991-40.352 40.268-40.352h98.352v-98.352c0-22.252 18.08-40.246 40.267-40.333 22.274 0.086 40.268 18.08 40.268 40.333v98.352h98.352c22.272 0 40.355 18.079 40.267 40.352 0 22.187-17.991 40.179-40.267 40.179v0z"  horiz-adv-x="1024" />
-
-    
-    <glyph glyph-name="previous-hs" unicode="&#59468;" d="M814.933333 413.866667C716.8 512 597.333333 567.4666669999999 460.8 580.266667V768c0 17.066667-8.533333 34.133333-25.6 38.4-17.066667 8.533333-34.133333 4.266667-46.933333-8.533333L29.866667 422.4c-17.066667-17.066667-17.066667-42.666667 0-59.733333l358.4-392.533334c8.533333-8.533333 21.333333-12.8 34.133333-12.8 4.266667 0 8.533333 0 17.066667 4.266667 17.066667 4.266667 25.6 21.333333 25.6 38.4v204.8c68.266667 8.533333 128 4.266667 192-12.8 76.8-21.333333 170.666667-93.866667 273.066666-213.333333 12.8-12.8 29.866667-21.333333 51.2-12.8 17.066667 8.533333 29.866667 25.6 25.6 42.666666-21.333333 162.133333-85.333333 298.666667-192 405.333334z"  horiz-adv-x="1024" />
-
-    
-    <glyph glyph-name="zoom-out-hs" unicode="&#59204;" d="M951.643 18.452999999999975l-210.337 210.335c50.487 64.946 80.56 146.547 80.56 235.199 0 211.793-171.681 383.472-383.563 383.472-211.792 0-383.471-171.679-383.471-383.472 0-211.862 171.679-383.538 383.471-383.538 88.661 0 170.271 30.075 235.218 80.56l210.337-210.339c9.34-9.339 21.614-14.055 33.89-14.055s24.551 4.716 33.892 14.055c18.77 18.77 18.77 49.101 0 67.781v0zM150.725 463.989c0 158.601 128.978 287.58 287.58 287.58 158.691 0 287.671-128.978 287.671-287.58 0-158.668-128.978-287.651-287.671-287.651-158.601 0-287.58 128.978-287.58 287.651v0zM397.297 504.996h-100.16c-22.683 0-41.008-18.324-41.008-40.919 0-22.683 18.324-41.094 41.008-41.094h282.333c22.683 0 41.095 18.412 41.007 41.094 0 22.595-18.324 40.919-41.007 40.919v0h-182.173z"  horiz-adv-x="1024" />
-
-    
-    <glyph glyph-name="next-step-hs" unicode="&#59467;" d="M209.066667 413.866667c98.133333 98.133333 213.333333 153.6 349.866666 166.4V768c0 17.066667 8.533333 34.133333 25.6 38.4 17.066667 8.533333 34.133333 4.266667 46.933334-8.533333l358.4-375.466667c17.066667-17.066667 17.066667-42.666667 0-59.733333l-358.4-392.533334c-8.533333-8.533333-21.333333-12.8-29.866667-12.8-4.266667 0-8.533333 0-17.066667 4.266667-17.066667 4.266667-25.6 21.333333-25.6 38.4v204.8c-68.266667 8.533333-128 4.266667-192-12.8-76.8-21.333333-170.666667-93.866667-273.066666-213.333333-8.533333-17.066667-29.866667-21.333333-46.933334-12.8-17.066667 8.533333-29.866667 25.6-25.6 42.666666 17.066667 162.133333 81.066667 298.666667 187.733334 405.333334z"  horiz-adv-x="1024" />
-
-    
-
-
-  </font>
-</defs></svg>

src/components/FlowChart/src/enum.ts

+export enum ToolbarTypeEnum {
+  ZOOM_IN = 'zoomIn',
+  ZOOM_OUT = 'zoomOut',
+  RESET_ZOOM = 'resetZoom',
+
+  UNDO = 'undo',
+  REDO = 'redo',
+
+  SNAPSHOT = 'snapshot',
+  VIEW_DATA = 'viewData',
+}

src/components/FlowChart/src/index.vue

+<template>
+  <div class="h-full" :class="prefixCls">
+    <FlowChartToolbar :prefixCls="prefixCls" v-if="toolbar" />
+    <div ref="lfElRef" class="h-full"></div>
+  </div>
+</template>
+<script lang="ts">
+  import type { Definition } from '@logicflow/core';
+
+  import { defineComponent, ref, onMounted, unref, nextTick, computed, watch } from 'vue';
+
+  import FlowChartToolbar from './FlowChartToolbar.vue';
+  import LogicFlow from '@logicflow/core';
+  import { Snapshot, BpmnElement, Menu, DndPanel } from '@logicflow/extension';
+
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { createFlowChartContext } from './useFlowContext';
+
+  import { toLogicFlowData } from './adpterForTurbo';
+
+  import '@logicflow/core/dist/style/index.css';
+  import '@logicflow/extension/lib/style/index.css';
+  export default defineComponent({
+    name: 'FlowChart',
+    components: { FlowChartToolbar },
+    props: {
+      flowOptions: {
+        type: Object as PropType<Definition>,
+        default: () => {},
+      },
+
+      data: {
+        type: Object as PropType<any>,
+        default: () => {},
+      },
+
+      toolbar: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    setup(props) {
+      const lfElRef = ref<ElRef>(null);
+
+      const lfInstance = ref<Nullable<LogicFlow>>(null);
+
+      const { prefixCls } = useDesign('flow-chart');
+      createFlowChartContext({
+        logicFlow: (lfInstance as unknown) as LogicFlow,
+      });
+
+      const getFlowOptions = computed(() => {
+        const { flowOptions } = props;
+
+        const defaultOptions: Partial<Definition> = {
+          grid: true,
+          background: {
+            color: '#f7f9ff',
+          },
+          keyboard: {
+            enabled: true,
+          },
+          ...flowOptions,
+        };
+        return defaultOptions as Definition;
+      });
+
+      watch(
+        () => props.data,
+        () => {
+          onRender();
+        }
+      );
+
+      watch(
+        () => props.flowOptions,
+        (options) => {
+          unref(lfInstance)?.updateEditConfig(options);
+        }
+      );
+
+      // init logicFlow
+      async function init() {
+        await nextTick();
+
+        const lfEl = unref(lfElRef);
+        if (!lfEl) {
+          return;
+        }
+
+        // Canvas configuration
+        LogicFlow.use(Snapshot);
+        // Use the bpmn plug-in to introduce bpmn elements, which can be used after conversion in turbo
+        LogicFlow.use(BpmnElement);
+        // Start the right-click menu
+        LogicFlow.use(Menu);
+        LogicFlow.use(DndPanel);
+        lfInstance.value = new LogicFlow({
+          ...unref(getFlowOptions),
+          container: lfEl,
+        });
+        unref(lfInstance)?.setDefaultEdgeType('line');
+        onRender();
+      }
+
+      async function onRender() {
+        await nextTick();
+        const lf = unref(lfInstance);
+        if (!lf) {
+          return;
+        }
+        const lFData = toLogicFlowData(props.data);
+        lf.render(lFData);
+      }
+
+      onMounted(init);
+
+      return {
+        prefixCls,
+        lfElRef,
+      };
+    },
+  });
+</script>

src/components/FlowChart/src/types.ts

+import { NodeConfig } from '@logicflow/core';
+import { ToolbarTypeEnum } from './enum';
+
+export interface NodeItem extends NodeConfig {
+  icon: string;
+}
+
+export interface ToolbarConfig {
+  type?: string | ToolbarTypeEnum;
+  tooltip?: string | boolean;
+  icon?: string;
+  disabled?: boolean;
+  separate?: boolean;
+}

src/components/FlowChart/src/useFlowContext.ts

+import type LogicFlow from '@logicflow/core';
+
+import { provide, inject } from 'vue';
+
+const key = Symbol('flow-chart');
+
+type Instance = {
+  logicFlow: LogicFlow;
+};
+
+export function createFlowChartContext(instance: Instance) {
+  provide(key, instance);
+}
+
+export function useFlowChartContext(): Instance {
+  return inject(key) as Instance;
+}

src/components/Table/src/BasicTable.vue

@@ -298,27 +298,13 @@
 
   @prefix-cls: ~'@{namespace}-basic-table';
 
-  html[data-theme='light'] {
-    .@{prefix-cls} {
-      &-row__striped {
-        td {
-          background-color: #fafafa;
-        }
-      }
-    }
-  }
-
-  html[data-theme='dark'] {
-    .@{prefix-cls} {
-      &-row__striped {
-        td {
-          background-color: rgb(255 255 255 / 4%);
-        }
+  .@{prefix-cls} {
+    &-row__striped {
+      td {
+        background-color: content-background;
       }
     }
-  }
 
-  .@{prefix-cls} {
     &-form-container {
       padding: 16px;
 

src/components/Tinymce/src/tinymce.ts

@@ -25,7 +25,7 @@ import 'tinymce/plugins/save';
 import 'tinymce/plugins/searchreplace';
 import 'tinymce/plugins/spellchecker';
 import 'tinymce/plugins/tabfocus';
-import 'tinymce/plugins/table';
+// import 'tinymce/plugins/table';
 import 'tinymce/plugins/template';
 import 'tinymce/plugins/textpattern';
 import 'tinymce/plugins/visualblocks';
@@ -38,12 +38,12 @@ import 'tinymce/plugins/wordcount';
 // colorpicker/contextmenu/textcolor plugin is now built in to the core editor, please remove it from your editor configuration
 
 export const plugins = [
-  'advlist anchor autolink autosave code codesample  directionality  fullscreen hr insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template  textpattern visualblocks visualchars wordcount',
+  'advlist anchor autolink autosave code codesample  directionality  fullscreen hr insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus  template  textpattern visualblocks visualchars wordcount',
 ];
 
 export const toolbar = [
   'fontsizeselect lineheight searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample',
-  'hr bullist numlist link  preview anchor pagebreak insertdatetime media table  forecolor backcolor fullscreen',
+  'hr bullist numlist link  preview anchor pagebreak insertdatetime media  forecolor backcolor fullscreen',
 ];
 
 export { tinymce };

src/locales/lang/en/routes/demo/comp.ts

@@ -35,5 +35,4 @@ export default {
 
   time: 'Relative Time',
   cropperImage: 'Cropper Image',
-  flowChart: 'Flow Chart',
 };

src/locales/lang/en/routes/demo/flow.ts

+export default {
+  name: 'Graphics editor',
+  flowChart: 'FlowChart',
+};

src/locales/lang/zh_CN/routes/demo/comp.ts

@@ -34,5 +34,4 @@ export default {
 
   time: '相对时间',
   cropperImage: '图片裁剪',
-  flowChart: '流程图',
 };

src/locales/lang/zh_CN/routes/demo/flow.ts

+export default {
+  name: '图形编辑器',
+  flowChart: '流程图',
+};

src/router/menus/modules/demo/comp.ts

@@ -123,13 +123,6 @@ const menu: MenuModule = {
           content: 'new',
         },
       },
-      {
-        path: 'flowChart',
-        name: t('routes.demo.comp.flowChart'),
-        tag: {
-          content: 'new',
-        },
-      },
       {
         path: 'countTo',
         name: t('routes.demo.comp.countTo'),

src/router/menus/modules/demo/flow.ts

+import type { MenuModule } from '/@/router/types';
+import { t } from '/@/hooks/web/useI18n';
+
+const menu: MenuModule = {
+  orderNo: 5000,
+  menu: {
+    name: t('routes.demo.flow.name'),
+    path: '/flow',
+
+    children: [
+      {
+        path: 'flowChart',
+        name: t('routes.demo.flow.flowChart'),
+      },
+    ],
+  },
+};
+export default menu;

src/router/routes/modules/demo/comp.ts

@@ -240,14 +240,7 @@ const comp: AppRouteModule = {
         title: t('routes.demo.comp.cropperImage'),
       },
     },
-    {
-      path: 'flowChart',
-      name: 'flowChartDemo',
-      component: () => import('/@/views/demo/comp/flow-chart/index.vue'),
-      meta: {
-        title: t('routes.demo.comp.flowChart'),
-      },
-    },
+
     {
       path: 'timestamp',
       name: 'TimeDemo',

src/router/routes/modules/demo/flow.ts

+import type { AppRouteModule } from '/@/router/types';
+
+import { LAYOUT } from '/@/router/constant';
+import { t } from '/@/hooks/web/useI18n';
+
+const charts: AppRouteModule = {
+  path: '/flow',
+  name: 'FlowDemo',
+  component: LAYOUT,
+  redirect: '/flow/flowChart',
+  meta: {
+    icon: 'tabler:chart-dots',
+    title: t('routes.demo.flow.name'),
+  },
+  children: [
+    {
+      path: 'flowChart',
+      name: 'flowChartDemo',
+      component: () => import('/@/views/demo/comp/flow-chart/index.vue'),
+      meta: {
+        title: t('routes.demo.flow.flowChart'),
+      },
+    },
+  ],
+};
+
+export default charts;

src/views/demo/comp/flow-chart/index.vue

 <template>
-  <div class="logic-flow-view">
-    <!-- 辅助工具栏 -->
-    <Control class="demo-control" v-if="lf" :lf="lf" :catTurboData="false" @catData="catData" />
-    <!-- 节点面板 -->
-    <NodePanel :lf="lf" :nodeList="nodeList" />
-    <!-- 画布 -->
-    <div id="LF-Turbo"></div>
-    <!-- 数据查看面板 -->
-    <BasicModal @register="register" title="数据">
-      <DataDialog :graphData="graphData" />
-    </BasicModal>
-  </div>
+  <PageWrapper
+    title="流程图"
+    content="简单流程图示例,具体功能需要自己完善"
+    contentFullHeight
+    fixedHeight
+  >
+    <FlowChart :data="demoData" />
+  </PageWrapper>
 </template>
 
 <script lang="ts">
-  import { ref, unref, onMounted } from 'vue';
-  import LogicFlow from '@logicflow/core';
-  import { Snapshot, BpmnElement, Menu } from '@logicflow/extension';
-  import '@logicflow/core/dist/style/index.css';
-  import '@logicflow/extension/lib/style/index.css';
-  import { Control, NodePanel, DataDialog } from '/@/components/FlowChart';
+  import { FlowChart } from '/@/components/FlowChart';
+  import { PageWrapper } from '/@/components/Page';
 
-  import { toLogicflowData } from '/@/components/FlowChart/src/adpterForTurbo';
-  import { BpmnNode } from '/@/components/FlowChart/src/config';
   import demoData from './dataTurbo.json';
-
-  import { BasicModal, useModal } from '/@/components/Modal';
   export default {
-    components: { NodePanel, Control, DataDialog, BasicModal },
+    components: { FlowChart, PageWrapper },
     setup() {
-      let lf = ref(null);
-      let graphData = ref(null);
-      let config = ref({
-        grid: true,
-        background: {
-          color: '#f7f9ff',
-        },
-        keyboard: {
-          enabled: true,
-        },
-      });
-      let nodeList = BpmnNode;
-
-      const [register, { openModal }] = useModal();
-
-      function initLf() {
-        // 画布配置
-        LogicFlow.use(Snapshot);
-        // 使用bpmn插件，引入bpmn元素，这些元素可以在turbo中转换后使用
-        LogicFlow.use(BpmnElement);
-        // 启动右键菜单
-        LogicFlow.use(Menu);
-        const domLf = new LogicFlow({
-          ...unref(config),
-          container: document.querySelector('#LF-Turbo'),
-        });
-        lf.value = domLf;
-        // 设置边类型bpmn:sequenceFlow为默认类型
-        unref(lf).setDefaultEdgeType('bpmn:sequenceFlow');
-        onRender();
-      }
-
-      function onRender() {
-        // Turbo数据转换为LogicFlow内部识别的数据结构
-        const lFData = toLogicflowData(demoData);
-        lf.value.render(lFData);
-      }
-
-      function catData() {
-        graphData.value = unref(lf).getGraphData();
-        openModal();
-      }
-
-      onMounted(() => {
-        initLf();
-      });
-
-      return {
-        lf,
-        graphData,
-        config,
-        nodeList,
-        catData,
-        register,
-        openModal,
-      };
+      return { demoData };
     },
   };
 </script>
-
-<style scoped>
-  #LF-Turbo {
-    width: 100vw;
-    height: 85%;
-    outline: none;
-  }
-
-  .logic-flow-view {
-    position: relative;
-    height: 100%;
-  }
-
-  .demo-title {
-    margin: 20px;
-    text-align: center;
-  }
-
-  .demo-control {
-    position: absolute;
-    top: 10px;
-    right: 20px;
-    z-index: 2;
-  }
-
-  .time-plus {
-    cursor: pointer;
-  }
-
-  .add-panel {
-    position: absolute;
-    z-index: 11;
-    padding: 10px 5px;
-    background-color: white;
-  }
-
-  .el-drawer__body {
-    z-index: 3;
-    height: 80%;
-    margin-top: -30px;
-    overflow: auto;
-  }
-</style>

yarn.lock

@@ -7719,17 +7719,17 @@ rollup-plugin-terser@^7.0.0:
     serialize-javascript "^4.0.0"
     terser "^5.0.0"
 
-rollup-plugin-visualizer@5.3.6:
-  version "5.3.6"
-  resolved "https://registry.npmjs.org/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.3.6.tgz#df6317b242f4aa58b6a03261335dbc64ea6fe0df"
-  integrity sha512-USIyYkzRuvIJZyUoFWSvejy/c8F9jm9mHbyB+01oE7m0Vc0Ll67HlZgRsY59IqU/j/qF1adPsXKSDkEXS6tzfg==
+rollup-plugin-visualizer@5.3.4:
+  version "5.3.4"
+  resolved "https://registry.npmjs.org/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.3.4.tgz#216300acca6e31b139be92eed98280c5662a5818"
+  integrity sha512-n3wYwKrZ3nhYJj8apzFuxmiu4y+ygDNJYLqQCOxludg3Pnhkql9WYc8iupgsMI+jGREA0dFsfDlzDAKcmXZIMQ==
   dependencies:
     nanoid "^3.1.22"
     open "^7.4.2"
     source-map "^0.7.3"
     yargs "^16.2.0"
 
-rollup@^2.25.0, rollup@^2.38.5, rollup@^2.44.0, rollup@^2.45.2:
+rollup@^2.25.0, rollup@^2.38.5, rollup@^2.44.0:
   version "2.45.2"
   resolved "https://registry.npmjs.org/rollup/-/rollup-2.45.2.tgz#8fb85917c9f35605720e92328f3ccbfba6f78b48"
   integrity sha512-kRRU7wXzFHUzBIv0GfoFFIN3m9oteY4uAsKllIpQDId5cfnkWF2J130l+27dzDju0E6MScKiV0ZM5Bw8m4blYQ==