feat: 更新流程图放大缩小按钮位置以及popover选项样式

src/components/Flow/src/components/Edge/index.tsx

@@ -1,6 +1,6 @@
 import { buildUUID } from '@/utils/uuid'
-import { ApartmentOutlined, ClusterOutlined, PlusOutlined } from '@ant-design/icons'
-import { Button, Menu, Popover } from 'antd'
+import { BranchesOutlined, PlusOutlined, SolutionOutlined } from '@ant-design/icons'
+import { Button, Popover } from 'antd'
 import React, { useMemo, useState, useContext } from 'react'
 import { getBezierPath, getEdgeCenter, getMarkerEnd, useStoreState } from 'react-flow-renderer'
 import { Actions, FlowContext } from '../../context'
@@ -9,7 +9,7 @@ import styles from './index.less'
 import 'antd/lib/button/style/css'
 const foreignObjectSize = 50
 
-const renderMenu = ({ dispatch, elements, togglePopver, id, flowInstance, sort }) => {
+const renderMenu = ({ dispatch, elements, togglePopver, id, flowInstance }) => {
   const setElements = els => {
     dispatch({
       type: Actions.SET_ELEMENTS,
@@ -58,16 +58,38 @@ const renderMenu = ({ dispatch, elements, togglePopver, id, flowInstance, sort }
   }
 
   return (
-    <Menu>
-      <Menu.Item key="1" onClick={addAuditor}>
-        <ClusterOutlined />
-        <span className="ml-1">审批人</span>
-      </Menu.Item>
-      {/* <Menu.Item key="2" onClick={remove}>
-        <ApartmentOutlined />
-        <span className="ml-1">条件分支</span>
-      </Menu.Item> */}
-    </Menu>
+    // <Menu>
+    //   <Menu.Item key="1" onClick={addAuditor}>
+    //     <ClusterOutlined />
+    //     <span className="ml-1">审批人</span>
+    //   </Menu.Item>
+    //   {/* <Menu.Item key="2" onClick={remove}>
+    //     <ApartmentOutlined />
+    //     <span className="ml-1">条件分支</span>
+    //   </Menu.Item> */}
+    // </Menu>
+    <ul className="m-0 p-0 ">
+      <li>
+        <Button type="dashed" onClick={addAuditor} icon={<SolutionOutlined />}>
+          审批人
+        </Button>
+      </li>
+      <li className="mt-2 condition">
+        <Button type="dashed" onClick={addAuditor} icon={<BranchesOutlined />}>
+          条件分支
+        </Button>
+      </li>
+    </ul>
+    //   <ul className="m-0 p-0">
+    //   <li className="rounded-2px border border-hex-d9d9d9 border-dashed text-hex-1890ff px-17px py-9px cursor-pointer">
+    //     <SolutionOutlined />
+    //     <span className="ml-9px">审批人</span>
+    //   </li>
+    //   <li className="mt-2 rounded-2px border border-hex-d9d9d9 border-dashed text-hex-52c41a px-17px py-9px cursor-pointer">
+    //     <BranchesOutlined />
+    //     <span className="ml-9px">条件分支</span>
+    //   </li>
+    // </ul>
   )
 }
 

src/components/Flow/src/components/Graph/index.tsx

@@ -66,9 +66,9 @@ const FlowGroph: React.FC<FlowGrophProps> = ({ id, flowProcess, flowProcessData
         type: Actions.SET_FLOW_INSTANCE,
         payload: reactFlowInstance
       })
-      // setTimeout(() => {
-      //   reactFlowInstance?.fitView()
-      // }, 80)
+      setTimeout(() => {
+        reactFlowInstance?.fitView()
+      }, 0)
     }
   }
 

src/components/Flow/src/components/Node/index.tsx

@@ -5,11 +5,11 @@ import { CloseOutlined, RightOutlined } from '@ant-design/icons'
 export const InputNode = () => {
   return (
     <>
-      <div className="shadow-card cursor-default p-1 bg-hex-bfbfbf rounded-lg">
-        <div className=" text-light-500 leading-7 h-7 text-12px ml-1">发起人</div>
-        <div className="text-14px px-4px py-5px leading-22px text-black text-opacity-85 bg-white rounded-4px h-32px">
+      <div className="shadow-card cursor-default p-1 bg-hex-bfbfbf rounded-lg text-center">
+        <div className=" text-hex-fff leading-7 h-7 text-12px ml-1">流程发起人</div>
+        {/* <div className="text-14px px-4px py-5px leading-22px text-black text-opacity-85 bg-white rounded-4px h-32px">
           具有新建权限的员工
-        </div>
+        </div> */}
       </div>
       <Handle type="source" position="bottom" />
     </>
@@ -20,7 +20,12 @@ export const OutputNode = () => {
   return (
     <>
       <Handle type="target" position="top" />
-      <div className="px-4 pt-2 pb-4 w-52 text-center cursor-default">流程结束</div>
+      <div className="shadow-card cursor-default p-1 bg-hex-bfbfbf rounded-lg text-center">
+        <div className=" text-hex-fff leading-7 h-7 text-12px ml-1">流程结束</div>
+        {/* <div className="text-14px px-4px py-5px leading-22px text-black text-opacity-85 bg-white rounded-4px h-32px">
+          具有新建权限的员工
+        </div> */}
+      </div>
     </>
   )
 }

src/components/Flow/src/index.less

@@ -33,8 +33,8 @@
     }
   }
   & .react-flow__controls {
-    bottom: 94%;
-    left: 95%;
+    bottom: 90%;
+    left: 90%;
     display: flex;
     justify-content: end;
     // margin: 12px;

src/global.less

@@ -86,10 +86,17 @@ ol {
 
 .flow-popover {
   & .ant-popover-inner-content {
-    padding: 0 2px !important;
+    padding: 12px 16px !important;
   }
-  & .ant-menu-vertical > .ant-menu-item {
-    height: 25px;
-    line-height: 25px;
+  & .ant-btn > .anticon + span {
+    min-width: 56px;
+    text-align: left;
+  }
+  .condition {
+    & .ant-btn-dashed:hover,
+    & .ant-btn-dashed:focus {
+      color: #52c41a;
+      border-color: #52c41a;
+    }
   }
 }