企业网站创建的步骤,宝安中心医院妇科,wordpress表单提交路径,做推广需要网站吗前期工作已搞定#xff0c;现在可以搭建桌面应用了。这个阶段可以结合前面定义好的数据格式构建流程图。
模板
还是使用熟悉的技术栈vite react electron#xff0c;模板
流程图
官方文档
自定义 节点样式
因为配置化的操作类型较多#xff0c;因此可以利用自定义节…前期工作已搞定现在可以搭建桌面应用了。这个阶段可以结合前面定义好的数据格式构建流程图。
模板
还是使用熟悉的技术栈vite react electron模板
流程图
官方文档
自定义 节点样式
因为配置化的操作类型较多因此可以利用自定义节点样式区分(常规的就是一个长方形)
例如开始节点 import React, { memo } from react;
import { Card } from antd
import { Handle } from react-flow-renderer;import StartSvg from ../assets/start.svg
import ./flow.node.cssexport default memo(({ isConnectable, selected, data }) {return (divCardsizesmalltitle{img src{StartSvg} className{card-img ${selected selected}} /}style{{ maxWidth: 300, minWidth: 260 }}p classNamewrap-txt打开页面{data.url}/p{/* span下一步/span */}/Card/divHandletypesourcepositionbottomstyle{{ backgroundColor: #576B95 }}isConnectable{isConnectable}/Handle/);
});
使用 const nodeTypes useMemo(() ({start: StartNode,})实现修改参数
监听流程图节点的点击事件并弹窗。每个节点的参数都不太一样因此需要定义不同类型的组件。流程图点击事件 const onNodeClick useCallback((event, node) {setNodeDrawer({title: 详情,open: true,node,})}, [])元素之外的节点操作
想让软件流程走通出来chrom插件圈选元素的节点之外我们还需要其他节点操作例如刷新页面获取当前页面。这个时候就可以根据之前的定义数据格式预设一些节点例如 {imgSrc: NewSvg,disable: false,txt: 获取最新页面,nodeType: logic_new_page,data: {type: logic_new_page,data: {logicsetting: {logicType: logic_new_page,waitTime: 1,}}}},通过拖拽的方式把节点添加到流程图内 const onDragStart (event, data) {event.dataTransfer.setData(application/reactflow, JSON.stringify(data));event.dataTransfer.effectAllowed move;};限制
限制1: 一个六流程图不能有环如果存在环可能导致死循环
解决 两个节点连接时判断是否有一个节点已经存在连接 const onConnect useCallback((params) {const edges reactFlowInstance.getEdges()const nodes reactFlowInstance.getNodes()console.log(params, params, edges).....const { source, target, sourceHandle, targetHandle } paramsif (edges.find(item item.source source item.sourceHandle sourceHandle)|| edges.find(item item.target target item.targetHandle targetHandle)) {messageApi.open({type: warning,content: 只允许一个流程,});return;}...})限制2部分节点只能连接特定的节点类型例如 循环条件分支只能连接条件判断、自定义类型的节点
const onConnect (
...if (sourceHandle loopcondition) {if (![logic_func, opt_verify, opt_exists].includes(fTarget.type)) {messageApi.open({type: error,content: 不能连接该类型节点,});return}} else if (sourceHandle listbody) {if (![logic_listitem].includes(fTarget.type)) {messageApi.open({type: error,content: 不能连接该类型节点,});return}} else if (fSource fSource.type logic_listitem sourceHandle next fTarget fTarget.type ! logic_listitem) {messageApi.open({type: error,content: 不能连接该类型节点,});return}
...
最后
源码
