feat: 添加算子入口增加动画过渡效果

src/views/WorkFlowEdit/index.module.css

@@ -45,14 +45,28 @@
 	bottom: 20px;
 	width: 36px;
 	height: 36px;
-	border-radius: 50%;
+	border-radius: 18px;
 	box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.14);
 	font-size: 30px;
 	line-height: 36px;
-	text-align: center;
+	text-align: start;
 	color: RGBA(66, 141, 255, 1);
 	cursor: pointer;
 	background-color: #fff;
+	transition: width 1s;
+	-webkit-transition: width 1s;
+	overflow: hidden;
+	display: flex;
+	justify-content: start;
+	align-items: center;
+}
+.addOperator:hover {
+	width: 105px;
+}
+.addText {
+	font-size: 14px;
+	line-height: 36px;
+	white-space: nowrap;
 }
 .swFlowBox {
 	flex: 1;

src/views/WorkFlowEdit/index.tsx

@@ -25,6 +25,7 @@ import { getCustomTemplateParameterCheckResult } from "./util";
 import useMyRequest from "@/hooks/useMyRequest";
 import CustomOperator from "../CustomOperator";
 import SaveCustomTemplate from "./components/SaveCustomTemplate";
+import AddIcon from "@mui/icons-material/Add";
 
 import styles from "./index.module.css";
 
@@ -55,7 +56,7 @@ const WorkFlowEdit = observer((props: IProps) => {
 	const [oldversion, setOldersion] = useState(""); // 编辑是自定义模板的老版本
 	const [description, setDescription] = useState(""); // 自定义模板描述
 	const [creator, setCreator] = useState(""); // 自定义模板创建人
-	const [operatingArea, setOperatingArea] = useState<'form'|'flow'>('form') // 当前操作区域
+	const [operatingArea, setOperatingArea] = useState<"form" | "flow">("form"); // 当前操作区域
 
 	const [leftContentType, setLeftContentType] = useState("list"); // 页面左侧展示的是算子列表还是参数设置
 	const [popperTitle, setPopperTitle] = useState(
@@ -64,12 +65,12 @@ const WorkFlowEdit = observer((props: IProps) => {
 	);
 
 	// 是否要监听删除时间
-	const listenState = useMemo(()=>{
-		if(operatingArea === 'form') {
-			return false
+	const listenState = useMemo(() => {
+		if (operatingArea === "form") {
+			return false;
 		}
-		return !saveFormDialog && !showCustomOperator
-	}, [operatingArea, saveFormDialog, showCustomOperator])
+		return !saveFormDialog && !showCustomOperator;
+	}, [operatingArea, saveFormDialog, showCustomOperator]);
 
 	// 编辑时获取模板详情的方法
 	const { run: fetchTemplateConfigInfoRun } = useMyRequest(
@@ -218,7 +219,7 @@ const WorkFlowEdit = observer((props: IProps) => {
 				<div
 					className={styles.swFormBox}
 					onClick={() => {
-						setOperatingArea('form');
+						setOperatingArea("form");
 					}}
 				>
 					<div className={styles.radiosBox}>
@@ -254,14 +255,15 @@ const WorkFlowEdit = observer((props: IProps) => {
 						className={styles.addOperator}
 						onClick={() => setShowCustomOperator(true)}
 					>
-						+
+						<AddIcon sx={{ padding: "6px" }} />
+						<span className={styles.addText}>添加算子</span>
 					</div>
 				</div>
 				<div
 					className={styles.swFlowBox}
 					id="workFlowEditRight"
 					onClick={() => {
-						setOperatingArea('flow');
+						setOperatingArea("flow");
 					}}
 				>
 					<Flow