Merge branch 'feat-20220705-customTemplate' into 'release'

cn-Feat 20220705 custom template

See merge request !97

src/api/fileserver/CloudEController.ts

@@ -4,7 +4,7 @@ import axios from "axios";
 // import { Actions, Constants } from '../../../../commons/utils/constants'
 // import MessageUtil from '../../../../commons/utils/MessageUtil'
 // import ApiUtils from '../../../../commons/utils/ApiUtils'
-import { APIOPTION, urlToken, ZONEID } from "./raysyncApi";
+import { APIOPTION, urlToken } from "./raysyncApi";
 // import UserStore from '../../../../console/common/stores/UserStore'
 import { ApiUtils } from "./utils";
 import Base64 from "crypto-js/enc-base64";

src/api/fileserver/raysyncApi.ts

@@ -28,18 +28,18 @@ const APIPORT = function () {
 };
 
 // 当前计算区
-let currentRegion = localStorage.getItem("current-region");
-let currentRegionJson = currentRegion && JSON.parse(currentRegion);
-let user = getLoaclStorageOfKey("userinfo");
+// let currentRegion = localStorage.getItem("current-region");
+// let currentRegionJson = currentRegion && JSON.parse(currentRegion);
+// let user = getLoaclStorageOfKey("userinfo");
 
 // 文件路径
-const FILEPATH =
-  currentRegionJson &&
-  currentRegionJson.location &&
-  currentRegionJson.location === "ON_PREMISE" &&
-  localStorage.getItem("userinfo")
-    ? `/home/${user.name}`
-    : "/home/cloudam";
+// const FILEPATH =
+//   currentRegionJson &&
+//   currentRegionJson.location &&
+//   currentRegionJson.location === "ON_PREMISE" &&
+//   localStorage.getItem("userinfo")
+//     ? `/home/${user.name}`
+//     : "/home/cloudam";
 const FILEPATH_SHARE = "/share";
 
 // 工作日志
@@ -104,7 +104,7 @@ const getType = function () {
 export {
   API,
   APIPORT,
-  FILEPATH,
+  // FILEPATH,
   FILEPATH_SHARE,
   APIOPTION,
   APIJOBLOGPOINT,

src/api/http.ts

@@ -128,7 +128,6 @@ export class Http {
         if (
           newConfig?.headers['Content-Type'] === "application/x-www-form-urlencoded"
         ) {
-          console.log(222)
           newConfig.data = qs.stringify(data);
         }
     return newConfig

src/components/Material.Ui/Table.jsx

@@ -9,7 +9,6 @@ import Paper from "@mui/material/Paper";
 import Checkbox from "@mui/material/Checkbox";
 // import Spin from "./Spin";
 
-import EnhancedTableToolbarComponent from "./Table/EnhancedTableToolbar"
 import EnhancedTableHeadComponent from "./Table/EnhancedTableHead"
 import { getComparator, stableSort, useStyles } from "./Table/function";
 import ActionsComponent from "./Table/ActionsComponent"
@@ -20,11 +19,10 @@ export default function EnhancedTable(props) {
   const classes = useStyles;
   const [order, setOrder] = React.useState("asc");
   const [orderBy, setOrderBy] = React.useState("");
-  const { headCells, rows, footer = true, elevation1, tableStyle, tablecellstyle, tableContainerStyle, stickyheader, TableHeadClasses, onRowClick, defaultRow, minHeight = '', borderBottom = '', onDoubleClick,
+  const { headCells, rows, footer = true, elevation1, tableStyle, tablecellstyle, tableContainerStyle, stickyheader, onRowClick, defaultRow, minHeight = '', borderBottom = '', onDoubleClick,
     load, size, checkboxData, rowsPerPage = 10, initSelected, page = 0, changePage = function () { }, toolbar, count, param, disabledparam = "id", headTableCellCheckbox, RowHeight = '', CellWidth = '', rowHover, TableNodataPadding = '', TableNodataLineHeight = '', tableBoySx } = props;
   const [selected, setSelected] = React.useState(initSelected || []);
-  const [rowsPerPageOptions, setRowsPerPageOptions] = React.useState(initSelected || [5, 10, 20, 50, { value: -1, label: 'All' }]);
-  // const [spin, setSpin] = React.useState(false)
+  const [rowsPerPageOptions] = React.useState(initSelected || [5, 10, 20, 50, { value: -1, label: 'All' }]);
   const [onRow, setOnRow] = React.useState('')
 
   // 重置复选框选中选项
@@ -63,10 +61,6 @@ export default function EnhancedTable(props) {
     setSelected([]);
     checkboxData([]);
   };
-  // React.useEffect(() => {
-
-  //   setSpin(load)
-  // }, [load]);
   const handleClick = (event, name) => {
     const selectedIndex = selected.indexOf(name);
     let newSelected = [];
@@ -97,7 +91,7 @@ export default function EnhancedTable(props) {
 
   const isSelected = (name) => selected.indexOf(name) !== -1;
 
-  const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);
+  // const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);
 
   const renderTableCellValue = useCallback(((item, row, index)=>{
     if(
@@ -209,11 +203,6 @@ export default function EnhancedTable(props) {
                   </TableRow>
                 );
               })}
-              {/* {emptyRows > 0 && (
-                <TableRow style={{ height: (dense ? 33 : 53) * emptyRows }}>
-                  <TableCell colSpan={6} />
-                </TableRow>
-              )} */}
             </TableBody>
           </Table>
         </TableContainer>

src/components/mui/Button.tsx

-import React, { FC } from "react";
+import React from "react";
 
-import { Props } from "ahooks/lib/useControllableValue";
 import { makeStyles } from "tss-react/mui";
-import { Typography, Menu, MenuItem, IconButton, Button } from "@mui/material";
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import { Typography, Menu, MenuItem, Button } from "@mui/material";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 
 type ButtonTagProps = {
-    text: string;//文本内容
-    variant?: "text" | 'contained' | 'outlined';//按钮样式
-    click?: any;//点击事件
-    select?: any[];//选择按钮的下拉列表
-    fontSize?: string;//按钮文字大小
-    dropValue?: boolean;//选择的值
-    drop?: boolean;//是否开启选择
-    color?: "inherit" | "primary" | "secondary" | undefined,//按钮颜色风格
-    btnStyle?: any,//按钮自定义样式类
-    size?: "large" | "medium" | "small",//按钮尺寸
-    disabled?: boolean,//是否禁用
-    style?: any,//按钮自定义样式
-    img?: JSX.Element;//图标按钮中的图标
-    selectCallBack?: (item: any, key: number) => void//选择按钮的回调
-}
+	text: string; //文本内容
+	variant?: "text" | "contained" | "outlined"; //按钮样式
+	click?: any; //点击事件
+	select?: any[]; //选择按钮的下拉列表
+	fontSize?: string; //按钮文字大小
+	dropValue?: boolean; //选择的值
+	drop?: boolean; //是否开启选择
+	color?: "inherit" | "primary" | "secondary" | undefined; //按钮颜色风格
+	btnStyle?: any; //按钮自定义样式类
+	size?: "large" | "medium" | "small"; //按钮尺寸
+	disabled?: boolean; //是否禁用
+	style?: any; //按钮自定义样式
+	img?: JSX.Element; //图标按钮中的图标
+	selectCallBack?: (item: any, key: number) => void; //选择按钮的回调
+};
 
 const ButtonComponent = (props: ButtonTagProps) => {
-    const { size, disabled, variant, color, img, btnStyle = {}, select, selectCallBack } = props;
+	const {
+		size,
+		disabled,
+		variant,
+		color,
+		img,
+		btnStyle = {},
+		select,
+		selectCallBack,
+	} = props;
 	const { classes, cx } = useStyles({});
 	const [anchorEl, setAnchorEl] = React.useState(null);
 
-    const handleClick = (event: { currentTarget: React.SetStateAction<null>; }) => setAnchorEl(event.currentTarget);
-    const defultClick = (event: { stoppropagation: () => any; }) => event && event.stoppropagation && event.stoppropagation()
+	const handleClick = (event: { currentTarget: React.SetStateAction<null> }) =>
+		setAnchorEl(event.currentTarget);
+	const defultClick = (event: { stoppropagation: () => any }) =>
+		event && event.stoppropagation && event.stoppropagation();
 	const handleCloseOption = (item: any, key: number) => {
 		setAnchorEl(null);
-        selectCallBack && selectCallBack(item, key)
-    }
+		selectCallBack && selectCallBack(item, key);
+	};
 	const handleClose = () => setAnchorEl(null);
 
-
 	return (
 		<>
 			<Button
 				size={size || "medium"}
-                variant={variant || 'contained'}
+				variant={variant || "contained"}
 				color={color || "primary"}
 				disableRipple={true}
 				disableFocusRipple={true}
@@ -48,29 +57,36 @@ const ButtonComponent = (props: ButtonTagProps) => {
 				classes={{
 					root: btnStyle.root || classes.root,
 					// disabled: btnStyle.disabled || classes.disabled,
-                    containedSecondary: btnStyle.containedSecondary || classes.containedSecondary,
+					containedSecondary:
+						btnStyle.containedSecondary || classes.containedSecondary,
 					outlined: btnStyle.outlined || classes.outlined,
-                    outlinedSecondary: btnStyle.outlinedSecondary || classes.outlinedSecondary,
+					outlinedSecondary:
+						btnStyle.outlinedSecondary || classes.outlinedSecondary,
 					text: btnStyle.text || classes.text,
 					textPrimary: btnStyle.textPrimary || classes.textPrimary,
 					textSecondary: btnStyle.textSecondary || classes.textSecondary,
 					sizeSmall: btnStyle.sizeSmall || classes.sizeSmall,
 					sizeLarge: btnStyle.sizeLarge || classes.sizeLarge,
-
 				}}
 				style={{ ...props.style }}
-                onClick={props.select ? handleClick : (props.click || defultClick)}
+				onClick={props.select ? handleClick : props.click || defultClick}
 			>
-                {img || ''}
-                <Typography style={{ fontSize: props.fontSize || "14px" }}>{props.text}</Typography>
-                {
-                    (props.select && props.select.length > 0 || props.drop) && <ArrowDropDownIcon classes={{
+				{img || ""}
+				<Typography style={{ fontSize: props.fontSize || "14px" }}>
+					{props.text}
+				</Typography>
+				{((props.select && props.select.length > 0) || props.drop) && (
+					<ArrowDropDownIcon
+						classes={{
 							root: cx({
 								[classes.ArrowDropDownIconRoot]: true,
-                            [classes.ArrowDropDownIconRootOpen]: Boolean(props.dropValue || anchorEl)
-                        })
-                    }} />
-                }
+								[classes.ArrowDropDownIconRootOpen]: Boolean(
+									props.dropValue || anchorEl
+								),
+							}),
+						}}
+					/>
+				)}
 			</Button>
 			<Menu
 				id="simple-menu"
@@ -79,40 +95,67 @@ const ButtonComponent = (props: ButtonTagProps) => {
 				open={Boolean(anchorEl)}
 				onClose={handleClose}
 			>
-                {
-                    select && select.length > 0 && select.map((item, key) => {
+				{select &&
+					select.length > 0 &&
+					select.map((item, key) => {
 						return (
 							<MenuItem
 								key={key}
 								classes={{ root: classes.menuItemRoot }}
-                                onClick={() => handleCloseOption(item, key)}>
+								onClick={() => handleCloseOption(item, key)}
+							>
 								{item.name || ""}
 							</MenuItem>
-                        )
-                    })
-                }
+						);
+					})}
 			</Menu>
 		</>
-    )
-}
+	);
+};
 
-const useStyles = makeStyles<{}>()(
-    (theme, { }) => ({
-        root: { backgroundColor: "#136EFA", boxShadow: "none !important", color: "#ffffff", "&:hover": { backgroundColor: "#0055D9" } },
-        containedSecondary: { backgroundColor: "#D62C1F", boxShadow: "none !important", "&:hover": { backgroundColor: "#D82C1F" } },
-        outlined: { backgroundColor: '#FFFFFF', border: "1px solid #136EFA", boxShadow: "none !important", color: "#136EFA", "&:hover": { backgroundColor: "rgba(19, 110, 250, 0.1)" } },
-        outlinedSecondary: { border: "1px solid #D62C1F", color: "#D62C1F", "&:hover": { border: "1px solid #D62C1F", backgroundColor: "rgba(214, 44, 31, 0.1)" } },
+const useStyles = makeStyles<{}>()((theme) => ({
+	root: {
+		backgroundColor: "#136EFA",
+		boxShadow: "none !important",
+		color: "#ffffff",
+		"&:hover": { backgroundColor: "#0055D9" },
+	},
+	containedSecondary: {
+		backgroundColor: "#D62C1F",
+		boxShadow: "none !important",
+		"&:hover": { backgroundColor: "#D82C1F" },
+	},
+	outlined: {
+		backgroundColor: "#FFFFFF",
+		border: "1px solid #136EFA",
+		boxShadow: "none !important",
+		color: "#136EFA",
+		"&:hover": { backgroundColor: "rgba(19, 110, 250, 0.1)" },
+	},
+	outlinedSecondary: {
+		border: "1px solid #D62C1F",
+		color: "#D62C1F",
+		"&:hover": {
+			border: "1px solid #D62C1F",
+			backgroundColor: "rgba(214, 44, 31, 0.1)",
+		},
+	},
 	label: { "& p": { fontSize: "13px" } },
-        text: { backgroundColor: 'transparent', boxShadow: "none !important" },
+	text: { backgroundColor: "transparent", boxShadow: "none !important" },
 	textPrimary: { color: "#136EFA", "&:hover": { backgroundColor: "#E8F1FF" } },
-        textSecondary: { color: "#F44335", "&:hover": { backgroundColor: "rgba(244, 67, 53, 0.1)" } },
+	textSecondary: {
+		color: "#F44335",
+		"&:hover": { backgroundColor: "rgba(244, 67, 53, 0.1)" },
+	},
 	sizeSmall: { "& p": { fontSize: "12px" } },
 	sizeLarge: { "& p": { fontSize: "14px" } },
 	menuItemRoot: {},
-        ArrowDropDownIconRoot: { color: "#8A9099", transition: "all 0.2s !important", transform: "rotate(0)" },
+	ArrowDropDownIconRoot: {
+		color: "#8A9099",
+		transition: "all 0.2s !important",
+		transform: "rotate(0)",
+	},
 	ArrowDropDownIconRootOpen: { color: "#8A9099", transform: "rotate(180deg)" },
-    })
-);
-
+}));
 
 export default ButtonComponent;

src/components/mui/MyMenu.tsx

@@ -21,7 +21,7 @@ const theme = createTheme({
 		MuiMenu: {
 			styleOverrides: {
 				root: {
-					maxHeight: "260px",
+					// maxHeight: "260px",
 					overflowY: "scroll",
 				},
 			},
@@ -87,7 +87,9 @@ const MyMenu = (props: IMyMenuProps) => {
 								key={index}
 							>
 								<span>{option.label}</span>
-								{value === option.value && <CheckIcon />}
+								{value === option.value && (
+									<CheckIcon sx={{ marginLeft: "12px" }} />
+								)}
 							</MenuItem>
 						);
 					})}

src/components/mui/MyTreeView.tsx

@@ -18,7 +18,6 @@ type MyTreeViewProps = {
 	renderLabel?: (node: any) => React.ReactNode;
 	treeViewSx?: any;
 	defaultExpanded?: Array<string>;
-  idKey?: string;
 	idFunc?: (node: any) => string;
 };
 
@@ -38,7 +37,6 @@ const MyTreeView = (props: MyTreeViewProps) => {
 		onNodeSelect,
 		onNodeToggle,
 		defaultExpanded,
-    idKey,
 		idFunc,
 	} = props;
 

src/hooks/usePass.ts

@@ -75,7 +75,7 @@ const usePass = () => {
       }
       return false;
     },
-    [permissionStore.allRoutes]
+    [permissionStore.allRoutes, currentProjectStore]
   );
 
   return isPass;

src/index.tsx

@@ -7,8 +7,8 @@ import { Provider } from "mobx-react";
 import { stores } from "@/store/index";
 import { MySnackbarProvider } from "@/components/MySnackbar";
 import "@/mocks/index";
-import './assets/style/public.css'
-import { createTheme, ThemeProvider, styled } from '@mui/material/styles';
+import "./assets/style/public.css";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
 
 const root = ReactDOM.createRoot(
 	document.getElementById("root") as HTMLElement
@@ -16,12 +16,25 @@ const root = ReactDOM.createRoot(
 
 const theme = createTheme({
 	typography: {
-    fontFamily: ['Roboto', 'Helvetica', 'Tahoma', 'Arial', '"PingFang SC"', '"Hiragino Sans GB"', '"Heiti SC"', '"WenQuanYi Micro Hei"', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"'].join(','),
+		fontFamily: [
+			"Roboto",
+			"Helvetica",
+			"Tahoma",
+			"Arial",
+			'"PingFang SC"',
+			'"Hiragino Sans GB"',
+			'"Heiti SC"',
+			'"WenQuanYi Micro Hei"',
+			"sans-serif",
+			'"Apple Color Emoji"',
+			'"Segoe UI Emoji"',
+			'"Segoe UI Symbol"',
+		].join(","),
 	},
 	palette: {
-    primary: { main: '#136EFA' },
-    secondary: { main: '#F44335' }
-  }
+		primary: { main: "#136EFA" },
+		secondary: { main: "#F44335" },
+	},
 });
 
 root.render(

src/utils/helper.ts

@@ -36,6 +36,6 @@ export const verifyLettersNumbersCertainChars5 = (str: string) => {
     if (getTrueLength(str) > 127) {
       return false;
     }
-    let validString = /^[\u4e00-\u9fa5_0-9a-zA-Z\/-_.]+$/;
+    let validString = /^[\u4e00-\u9fa5_0-9a-zA-Z/-_.]+$/;
     return validString.test(str);
   };
\ No newline at end of file

src/views/Project/ProjectData/DeleteDialog/index.tsx

-import React, { useState, useImperativeHandle, useMemo } from "react";
+import React, { useImperativeHandle, useMemo } from "react";
 
 import MyDialog from "@/components/mui/MyDialog";
 import { useMessage } from "@/components/MySnackbar";

src/views/Project/ProjectData/MoveFile/index.tsx

@@ -34,9 +34,7 @@ const MoveFile = (props: any) => {
 	const [moveFileSubmitloading, setMoveFileSubmitloading] = useState(false);
 	const [treeData, setTreeData] = useState<any>([]);
 	const [renderTreeData, setRenderTreeData] = useState<any>([]);
-  const [moveFileDialogRef, setMoveFileDialogRef] = useState<any>(
-    React.createRef()
-  );
+	const [moveFileDialogRef] = useState<any>(React.createRef());
 	// 要移动的文件夹  之后用来隐藏文件夹树中同路径的文件夹
 	const [moveFolderPathArr, setMoveFolderPathArr] = useState<Array<string>>([]);
 
@@ -345,7 +343,6 @@ const MoveFile = (props: any) => {
 				ProjectData
 			</div>
 			<MyTreeView
-        // treeData={treeData}
 				treeData={renderTreeData}
 				renderLabel={renderLabel}
 				onNodeSelect={onNodeSelect}

src/views/Project/ProjectData/index.tsx

@@ -453,10 +453,8 @@ const ProjectData = observer(() => {
 
 	// 下载文件
 	const hanleDownloadFile = (item: any) => {
-    console.log(item);
 		const downloadPath =
 			path === "/" ? `/${item.name}` : `${path}/${item.name}`;
-    console.log(downloadPath);
 		CloudEController.JobFileDownload(
 			downloadPath,
 			fileToken as string,

src/views/Project/ProjectJobDetail/index.tsx

@@ -164,7 +164,7 @@ const ProjectSubmitWork = observer(() => {
 	};
 
 	const getDataSetSize = async (item: any, index: number) => {
-		let path = item.path.slice(13);
+		let path = item.path.slice(12);
 		const lastIndex = path.lastIndexOf("/");
 		if (lastIndex === -1) {
 			path = "/";
@@ -184,7 +184,7 @@ const ProjectSubmitWork = observer(() => {
 	};
 
 	const getFileSize = (item: any, index: number) => {
-		let path = item.path.slice(13);
+		let path = item.path.slice(12);
 		const lastIndex = path.lastIndexOf("/");
 		if (lastIndex === -1) {
 			path = "/";

src/views/Project/ProjectSetting/ProjectMembers/components/ChangePermission.tsx

@@ -7,7 +7,7 @@
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 // import Dialog from "@/components/Material.Ui/Dialog";
-import { memo, useEffect, useMemo, useState } from "react";
+import { memo, useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { toJS } from "mobx";
 

src/views/Project/ProjectSetting/ProjectMembers/index.tsx

@@ -24,7 +24,6 @@ import styles from "./index.module.css";
 import { IDialogInfo } from "./interface";
 import { toJS } from "mobx";
 import { useStores } from "@/store";
-import { isProjectOwner } from "@/utils/util";
 import { observer } from "mobx-react";
 
 const ProjectMembers = observer(() => {
@@ -104,7 +103,6 @@ const ProjectMembers = observer(() => {
 			.then((res) => {
 				const { data = {} } = res;
 				setTableData(data?.members || []);
-				console.log(data?.projectRole, data?.projectRole);
 				setProjectRole(data?.projectRole || "");
 			});
 	}, [currentProjectStore?.currentProjectInfo, http]);

src/views/Project/ProjectSetting/index.tsx

@@ -6,7 +6,7 @@
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
-import { memo, useState, useMemo } from "react";
+import { memo, useMemo } from "react";
 
 import { Box } from "@mui/system";
 import { useStores } from "@/store/index";

src/views/Project/ProjectSubmitWork/ConfigForm/index.tsx

-import { ITemplateConfig, IRenderTasks, IRenderTask } from "../interface";
+import { ITemplateConfig, IRenderTasks } from "../interface";
 import styles from "./index.module.css";
 import MyInput from "@/components/mui/MyInput";
 import Tooltip from "@mui/material/Tooltip";
 import classnames from "classnames";
-import { useState, useMemo, useImperativeHandle, useCallback } from "react";
+import { useState, useMemo, useImperativeHandle } from "react";
 import FileSelect from "@/components/FileSelect";
 import moment from "moment";
 import MySelect, { optionsTransform } from "../components/MySelect";
 import MyCheckBox from "@/components/mui/MyCheckBox";
 import MyRadio from "@/components/mui/MyRadio";
-import _ from "lodash";
 import { getCheckResult } from "../util";
 import fileSelectIcon from "@/assets/project/fileSelect.svg";
 import questionMark from "@/assets/project/questionMark.svg";

src/views/Project/ProjectSubmitWork/index.tsx

@@ -26,11 +26,12 @@ import fullScreen from "@/assets/project/fullScreen.svg";
 import partialScreen from "@/assets/project/partialScreen.svg";
 import { useMessage } from "@/components/MySnackbar";
 import { useStores } from "@/store";
+import { observer } from "mobx-react-lite";
 import MyPopconfirm from "@/components/mui/MyPopconfirm";
 
 import styles from "./index.module.css";
 
-const ProjectSubmitWork = () => {
+const ProjectSubmitWork = observer(() => {
 	const Message = useMessage();
 	const { currentProjectStore } = useStores();
 	const projectId = toJS(currentProjectStore.currentProjectInfo.id);
@@ -291,6 +292,6 @@ const ProjectSubmitWork = () => {
 			/>
 		</div>
 	);
-};
+});
 
 export default ProjectSubmitWork;

src/views/Project/ProjectSubmitWork/interface.ts

@@ -70,7 +70,6 @@ export type IDomType =
   | "dataset"
   | "file"
   | "input"
-  | "file"
   | "select"
   | "multipleselect"
   | "radio"

src/views/Project/ProjectWorkbench/workbenchList/components/simpleDialog.tsx

-
-import { memo, useCallback, useEffect, useMemo, useState } from "react";
-import styles from "../index.module.css";
+import { memo } from "react";
 import { Box, Typography } from "@mui/material";
-import Button from "@mui/material/Button";
 import Dialog from "@/components/mui/Dialog";
 
 const SimpleDialog = (props: any) => {
 	const { openDialog, closeDialog, onConfirm, text, title } = props;
 
 	return (
-        < >
+		<>
 			<Dialog
 				open={openDialog}
 				onClose={closeDialog}
@@ -17,7 +14,9 @@ const SimpleDialog = (props: any) => {
 				title={title}
 			>
 				<Box>
-                    <Typography sx={{ fontSize: '14px', fontWeight: '400' }}>{text}</Typography>
+					<Typography sx={{ fontSize: "14px", fontWeight: "400" }}>
+						{text}
+					</Typography>
 				</Box>
 			</Dialog>
 		</>

src/views/Project/ProjectWorkbench/workbenchList/index.tsx

@@ -7,18 +7,20 @@
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 import { memo, useCallback, useEffect, useState } from "react";
-import _ from "lodash";
 import { useNavigate } from "react-router-dom";
 import { Box, Typography } from "@mui/material";
 import OutlinedInput from "@mui/material/OutlinedInput";
 import SearchIcon from "@mui/icons-material/Search";
-import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
-import { TablePagination } from '@mui/material';
-import TextField from '@mui/material/TextField';
-import MenuItem from '@mui/material/MenuItem';
-
-import SimpleDialog from "./components/simpleDialog"
+import LinearProgress, {
+	linearProgressClasses,
+} from "@mui/material/LinearProgress";
+import { TablePagination } from "@mui/material";
+import TextField from "@mui/material/TextField";
+import MenuItem from "@mui/material/MenuItem";
+
+import SimpleDialog from "./components/simpleDialog";
 import { useStores } from "@/store";
+import { observer } from "mobx-react-lite";
 import useMyRequest from "@/hooks/useMyRequest";
 import ActionsComponent from "../../../../components/Material.Ui/Table/ActionsComponent"
 import runTime from '../../../../assets/project/runTime.svg'
@@ -34,35 +36,35 @@ import onload from '../../../../assets/project/onload.svg'
 import {
 	getWorkflowJobList,
 	deleteWorkflowJob,
-    cancelWorkflowJob
+	cancelWorkflowJob,
 } from "@/api/workbench_api";
 import { toJS } from "mobx";
 import { observer } from "mobx-react-lite";
 import usePass from "@/hooks/usePass";
 
 import styles from "./index.module.css";
-
+import { toJS } from "mobx";
 
 const currencies = [
 	{
-        value: 'ALL',
-        label: '全部',
+		value: "ALL",
+		label: "全部",
 	},
 	{
-        value: 'RUNNING',
-        label: '正在运行',
+		value: "RUNNING",
+		label: "正在运行",
 	},
 	{
-        value: 'SUCCEEDED',
-        label: '运行成功',
+		value: "SUCCEEDED",
+		label: "运行成功",
 	},
 	{
-        value: 'FAILED',
-        label: '运行失败',
+		value: "FAILED",
+		label: "运行失败",
 	},
 	{
-        value: 'ABORTED',
-        label: '运行终止',
+		value: "ABORTED",
+		label: "运行终止",
 	},
 ];
 
@@ -134,10 +136,48 @@ const ProjectMembers = observer(() => {
         setJobName(data.length > 30 ? data.slice(0, 30) : data);
     }
 
-    const handleChange = (event: any) => {
-        setCurrency(event.target.value);
+	// 删除作业
+	const { run: delWorkflowJob } = useMyRequest(deleteWorkflowJob, {
+		onSuccess: (result: any) => {
+			setOpenDialog(false);
+			getWorkflowJobInfo({
+				projectId: projectId as string,
+				page: page,
+				size: size,
+				name: jobName,
+				state: currency === "ALL" ? "" : currency,
+			});
+		},
+	});
+
+	// 删除作业
+	const { run: cancelWorkflowJobInfo } = useMyRequest(cancelWorkflowJob, {
+		onSuccess: (result: any) => {
+			setOpenDialog(false);
+			getWorkflowJobInfo({
+				projectId: projectId as string,
+				page: page,
+				size: size,
+				name: jobName,
+				state: currency === "ALL" ? "" : currency,
+			});
+		},
+	});
+
+	const searchChange = (data: any) => {
+		setJobName(data.length > 30 ? data.slice(0, 30) : data);
 	};
 
+    useEffect(() => {
+        getWorkflowJobInfo({
+            projectId: currentProjectStore.currentProjectInfo.id as string,
+            page: page,
+            size: size,
+            name: jobName,
+            state: currency === 'ALL' ? "" : currency
+        });
+    }, [projectId, getWorkflowJobInfo]);
+
 	/** 关闭弹窗 */
 	const closeDialog = () => {
 		setOpenDialog(false);
@@ -147,104 +187,67 @@ const ProjectMembers = observer(() => {
 	const onConfirm = () => {
 		if (dialogType === "del") {
 			delWorkflowJob({
-                id: jobData
-            })
+				id: jobData,
+			});
 		} else {
 			cancelWorkflowJobInfo({
-                jobid: jobData
-            })
+				jobid: jobData,
+			});
 		}
 	};
 
 	useEffect(() => {
 		getWorkflowJobInfo({
-            projectId: currentProjectStore.currentProjectInfo.id as string,
+			projectId: projectId as string,
 			page: page,
 			size: size,
 			name: jobName,
-            state: currency === 'ALL' ? "" : currency
+			state: currency === "ALL" ? "" : currency,
 		});
-    }, [projectId, getWorkflowJobInfo]);
+	}, [
+		currentProjectStore.currentProjectInfo.id,
+		getWorkflowJobInfo,
+		projectId,
+		page,
+		size,
+		jobName,
+		currency,
+	]);
 
 	const handleChangePage = (event: any, newPage: any) => {
-        setPage(newPage)
+		setPage(newPage);
 		getWorkflowJobInfo({
-            projectId: currentProjectStore.currentProjectInfo.id as string,
+			projectId: projectId as string,
 			page: newPage,
 			size: size,
 			name: jobName,
-            state: currency === 'ALL' ? "" : currency
+			state: currency === "ALL" ? "" : currency,
 		});
-    }
+	};
 
 	const handleChangeRowsPerPage = (event: any) => {
-        setRowsPerPage(event.target.value)
-        setSize(event.target.value)
+		setRowsPerPage(event.target.value);
+		setSize(event.target.value);
 		getWorkflowJobInfo({
-            projectId: currentProjectStore.currentProjectInfo.id as string,
+			projectId: projectId as string,
 			page: page,
 			size: event.target.value,
 			name: jobName,
-            state: currency === 'ALL' ? "" : currency
+			state: currency === "ALL" ? "" : currency,
 		});
-    }
+	};
 
 	useEffect(() => {
 		setTimeout(() => {
 			getWorkflowJobInfo({
-                projectId: currentProjectStore.currentProjectInfo.id as string,
+				projectId: projectId as string,
 				page: page,
 				size: size,
 				name: jobName,
-                state: currency === 'ALL' ? "" : currency
+				state: currency === "ALL" ? "" : currency,
 			});
-        }, 300)
-    }, [jobName, currency]);
-
-    const renderStatusIcon = (data: string) => {
-        switch (data) {
-            case "RUNNING":
-                return jobRun
-            case "ABORTED":
-                return jobCadence
-            case "FAILED":
-                return jobFail
-            case "SUCCEEDED":
-                return jobSue
-            default:
-                return jobCadence
-        }
-    }
-
-    const renderStatusText = (data: string) => {
-        switch (data) {
-            case "RUNNING":
-                return '正在运行'
-            case "ABORTED":
-                return '运行终止'
-            case "FAILED":
-                return '运行失败'
-            case "SUCCEEDED":
-                return '运行成功'
-            default:
-                return '未知'
-        }
-    }
-
-    const renderProgress = (data: any) => {
-        switch (data) {
-            case "RUNNING":
-                return '#1370FF'
-            case "ABORTED":
-                return '#C2C6CC'
-            case "FAILED":
-                return '#FF4E4E'
-            case "SUCCEEDED":
-                return '#0DD09B'
-            default:
-                return '#C2C6CC'
-        }
-    }
+		}, 300);
+	}, [jobName, currency, projectId, getWorkflowJobInfo, page, size]);
 
     /** 点击每一行 */
     const rowClick = useCallback(
@@ -256,8 +259,20 @@ const ProjectMembers = observer(() => {
         [navigate],
     );
 
-    return (
-        <Box className={styles.headerBox}>
+	const renderStatusText = (data: string) => {
+		switch (data) {
+			case "RUNNING":
+				return "正在运行";
+			case "ABORTED":
+				return "运行终止";
+			case "FAILED":
+				return "运行失败";
+			case "SUCCEEDED":
+				return "运行成功";
+			default:
+				return "未知";
+		}
+	};
 
             <Box className={styles.tabHeader}>
 
@@ -314,7 +329,19 @@ const ProjectMembers = observer(() => {
                     <img alt="" src={onload} />
                 </Box>
 
-            </Box>
+	return (
+		<Box className={styles.headerBox}>
+			<Box className={styles.tabHeader}>
+				<OutlinedInput
+					onChange={(e: any) => {
+						searchChange(e.target.value);
+					}}
+					value={jobName}
+					placeholder="输入关键词搜索"
+					size="small"
+					sx={{ width: 340, height: 32 }}
+					endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
+				/>
 
             <Box className={styles.body}>
                 {
@@ -403,24 +430,35 @@ const ProjectMembers = observer(() => {
                 }
             </Box>
 
+								<Box className={styles.tabBoxJobOperate}>
+									<img
+										alt=""
+										src={item.state === "RUNNING" ? jobStop : jobDel}
+										style={{ cursor: "pointer" }}
+										onClick={(event) => {
+											event.stopPropagation();
+											event.nativeEvent.stopImmediatePropagation();
+											setJobData(item.id);
+											setOpenDialog(true);
+											setDialogType(item.state === "RUNNING" ? "stop" : "del");
+										}}
+									/>
+								</Box>
+							</Box>
+						);
+					})}
+			</Box>
+
 			<TablePagination
 				rowsPerPageOptions={[5, 10, 20, 50]}
-                labelRowsPerPage={'每页行数：'}
+				labelRowsPerPage={"每页行数："}
 				ActionsComponent={ActionsComponent}
 				component="div"
 				count={count || jobList.length}
 				rowsPerPage={rowsPerPage || 10}
 				page={page}
-                onPageChange={handleChangePage}//
-                onRowsPerPageChange={handleChangeRowsPerPage}//
-            />
-
-            <SimpleDialog
-                text={dialogType === "del" ? '任务被删除后将无法恢复，确认继续吗？' : '正在运行的任务终止后将无法重新运行，确认继续吗？'}
-                title={dialogType === "del" ? '删除任务' : '终止任务'}
-                openDialog={openDialog}
-                closeDialog={closeDialog}
-                onConfirm={onConfirm}
+				onPageChange={handleChangePage} //
+				onRowsPerPageChange={handleChangeRowsPerPage} //
 			/>
 
         </Box >

src/views/Project/ProjectWorkbench/workbenchTemplate/components/AddTemplate/index.tsx

-import { memo, useEffect, useState, useMemo } from "react";
+import { useEffect, useState, useMemo } from "react";
 import style from "./index.module.css";
 import classNames from "classnames";
 import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
@@ -44,9 +44,7 @@ const AddTemplate = observer((props: IAddTemplateProps) => {
 	const productId = toJS(currentProjectStore.currentProductInfo.id);
 	const { setShowAddTemplate, getTemplateInfo } = props;
 
-	const handleSearch = (value: string) => {
-		console.log(value);
-	};
+	const handleSearch = (value: string) => {};
 
 	/** 可增加模板列表 */
 	const [addTemplateList, setAddTemplateList] = useState([]);
@@ -83,7 +81,6 @@ const AddTemplate = observer((props: IAddTemplateProps) => {
 	});
 
 	const handleAddTemplate = () => {
-		console.log("handleAddTemplate");
 		addTemplate({
 			projectId: projectId as string,
 			workflowSpecIds: selectTemplateData,
@@ -93,7 +90,6 @@ const AddTemplate = observer((props: IAddTemplateProps) => {
 	// 添加工作流模板-获取模板列表
 	const { run: getAddTemplateList } = useMyRequest(getAddWorkbenchTemplate, {
 		onSuccess: (result: any) => {
-			console.log(result);
 			setAddTemplateList(result.data);
 			// setOpenAddTemplate(true);
 		},

src/views/Project/ProjectWorkbench/workbenchTemplate/components/simpleDialog.tsx

-
-import { memo, useCallback, useEffect, useMemo, useState } from "react";
-import styles from "../index.module.css";
+import { memo } from "react";
 import { Box, Typography } from "@mui/material";
-import Button from "@mui/material/Button";
 import Dialog from "@/components/mui/Dialog";
 
 const SimpleDialog = (props: any) => {
 	const { openDialog, closeDialog, onConfirm, text, title } = props;
 
 	return (
-        < >
+		<>
 			<Dialog
 				open={openDialog}
 				onClose={closeDialog}
@@ -17,7 +14,9 @@ const SimpleDialog = (props: any) => {
 				title={title}
 			>
 				<Box>
-                    <Typography sx={{ fontSize: '14px', fontWeight: '400' }}>{text}</Typography>
+					<Typography sx={{ fontSize: "14px", fontWeight: "400" }}>
+						{text}
+					</Typography>
 				</Box>
 			</Dialog>
 		</>

src/views/Project/ProjectWorkbench/workbenchTemplate/components/templateBox.tsx

@@ -6,7 +6,7 @@
  * @FilePath: /bkunyun/src/views/Project/ProjectWorkbench/workbenchTemplate/components/templateBox.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
-import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { memo, useCallback } from "react";
 import styles from "../index.module.css";
 import { Box, Typography } from "@mui/material";
 import Button from "@/components/mui/Button";

src/views/Project/ProjectWorkbench/workbenchTemplate/index.module.css

@@ -19,9 +19,9 @@
 .templateBlock {
 	width: 21.4876%;
 	height: 160px;
-  background: #FFFFFF;
+	background: #ffffff;
 	border-radius: 4px;
-  border: 1px solid #EBEDF0;
+	border: 1px solid #ebedf0;
 	padding: 16px 20px;
 	display: flex;
 	flex-direction: column;
@@ -38,12 +38,12 @@
 	width: 100%;
 	height: 100%;
 	display: flex;
-  align-items: end;
+	align-items: flex-end;
 	flex-direction: column;
 }
 
 .addTemplateBlock {
-  background: #FFFFFF;
+	background: #ffffff;
 	z-index: 900;
 	border-radius: 16px 0px 0px 0px;
 	height: 100%;
@@ -53,9 +53,9 @@
 .addTemplateBox {
 	width: 16.8751%;
 	height: 114px;
-  background: #FFFFFF;
+	background: #ffffff;
 	border-radius: 4px;
-  border: 1px solid #F0F2F5;
+	border: 1px solid #f0f2f5;
 	padding: 16px 20px;
 	margin: 8px;
 	cursor: pointer;
@@ -74,15 +74,15 @@
 	height: 54px;
 	font-size: 12px !important;
 	font-weight: 400 !important;
-  color: #8A9099 !important;
+	color: #8a9099 !important;
 }
 
 .addNewTemplate {
 	width: 380px;
 	height: 194px;
-  background: #FFFFFF;
+	background: #ffffff;
 	border-radius: 4px;
-  border: 1px solid #EBEDF0;
+	border: 1px solid #ebedf0;
 	display: flex;
 	justify-content: center;
 	align-items: center;

src/views/Project/ProjectWorkbench/workbenchTemplate/index.tsx

@@ -12,21 +12,17 @@ import OutlinedInput from "@mui/material/OutlinedInput";
 import SearchIcon from "@mui/icons-material/Search";
 import { toJS } from "mobx";
 import { observer } from "mobx-react-lite";
-// import Button from "@mui/material/Button";
 import Add from "@mui/icons-material/Add";
 
 import Button from "@/components/mui/Button";
 import useMyRequest from "@/hooks/useMyRequest";
 import TemplateBox from "./components/templateBox";
 import SimpleDialog from "./components/simpleDialog";
-// import AddTemplate from "./components/addTemplate";
 import AddTemplate from "./components/AddTemplate/index";
 import noData from "../../../../assets/project/noTemplate.svg";
 import {
 	getWorkbenchTemplate,
 	deleteWorkbenchTemplate,
-	getAddWorkbenchTemplate,
-	addWorkbenchTemplate,
 } from "@/api/workbench_api";
 import usePass from "@/hooks/usePass";
 import { useStores } from "@/store";
@@ -47,12 +43,6 @@ const ProjectMembers = observer(() => {
 	const [templateId, setTemplateId] = useState("");
 	/** 简单弹窗（删除模板） */
 	const [openDialog, setOpenDialog] = useState(false);
-	/** 增加模板 */
-	const [openAddTemplate, setOpenAddTemplate] = useState(false);
-	/** 可增加模板列表 */
-	const [addTemplateList, setAddTemplateList] = useState([]);
-	/** 已选择增加的模板列表 */
-	const [selectTemplateData, setSelectTemplateData] = useState<string[]>([]);
 	const [showAddTemplate, setShowAddTemplate] = useState(false);
 
 	// 获取模板列表
@@ -73,35 +63,12 @@ const ProjectMembers = observer(() => {
 		},
 	});
 
-	// 添加工作流模板-获取模板列表
-	const { run: getAddTemplateList } = useMyRequest(getAddWorkbenchTemplate, {
-		onSuccess: (result: any) => {
-			setAddTemplateList(result.data);
-			setOpenAddTemplate(true);
-		},
-	});
-
-	// 项目管理员-添加工作流模板-提交
-	const { run: addTemplate } = useMyRequest(addWorkbenchTemplate, {
-		onSuccess: (result: any) => {
-			setOpenAddTemplate(false);
-			getTemplateInfo({
-				projectId: currentProjectStore.currentProjectInfo.id as string,
-			});
-			setSelectTemplateData([]);
-		},
-	});
-
 	useEffect(() => {
 		getTemplateInfo({
 			projectId: currentProjectStore.currentProjectInfo.id as string,
 		});
 	}, [currentProjectStore.currentProjectInfo.id, getTemplateInfo]);
 
-	useEffect(() => {
-		console.log("projectIdData: ", projectIdData);
-	}, [projectIdData]);
-
 	/** 删除模板 */
 	const deleteTemplate = () => {
 		delTemplate({
@@ -124,44 +91,6 @@ const ProjectMembers = observer(() => {
 	/** 增加模板 */
 	const addTemplateBlock = () => {
 		setShowAddTemplate(true);
-		// getAddTemplateList({
-		// 	projectId: currentProjectStore.currentProjectInfo.id as string,
-		// 	productId: "cadd",
-		// });
-	};
-
-	/** 关闭增加模板 */
-	const closeAddTemplateBlock = () => {
-		setOpenAddTemplate(false);
-		setSelectTemplateData([]);
-	};
-
-	/** 增加模板操作 */
-	const addTemplateCallback = () => {
-		addTemplate({
-			projectId: currentProjectStore.currentProjectInfo.id as string,
-			workflowSpecIds: selectTemplateData,
-		});
-	};
-
-	/** 搜索模板 */
-	const searchTemplateNameCallback = (data: any) => {
-		getAddTemplateList({
-			projectId: currentProjectStore.currentProjectInfo.id as string,
-			productId: "cadd",
-			title: data,
-		});
-	};
-
-	const templateSelectCallback = (data: string) => {
-		let list: string[] = [...selectTemplateData];
-		if (selectTemplateData.filter((e) => e === data).length > 0) {
-			list = list.filter((e) => e !== data);
-			setSelectTemplateData(list);
-		} else {
-			list.push(data);
-			setSelectTemplateData(list);
-		}
 	};
 
 	const searchChange = (data: any) => {
@@ -171,11 +100,11 @@ const ProjectMembers = observer(() => {
 	useEffect(() => {
 		setTimeout(() => {
 			getTemplateInfo({
-				projectId: currentProjectStore.currentProjectInfo.id as string,
+				projectId: projectIdData as string,
 				title: templateName,
 			});
 		}, 300);
-	}, [templateName]);
+	}, [templateName, getTemplateInfo, projectIdData]);
 
 	return (
 		<Box className={styles.headerBox}>
@@ -256,16 +185,6 @@ const ProjectMembers = observer(() => {
 					</Box>
 				)}
 
-			{/* <AddTemplate
-				openAddTemplate={openAddTemplate}
-				closeAddTemplateBlock={closeAddTemplateBlock}
-				addTemplateList={addTemplateList}
-				templateSelectCallback={templateSelectCallback}
-				selectTemplateData={selectTemplateData}
-				addTemplateCallback={addTemplateCallback}
-				searchTemplateNameCallback={searchTemplateNameCallback}
-			/> */}
-
 			{showAddTemplate && (
 				<AddTemplate
 					setShowAddTemplate={setShowAddTemplate}

src/views/Project/components/Flow/index.tsx

@@ -155,7 +155,7 @@ const Flow = (props: IProps) => {
 			const lineArr: IEdge[] = [];
 			tasks?.length &&
 				tasks.forEach((item) => {
-					lineArr.push(...item.edges);
+					item.edges?.length && lineArr.push(...item.edges);
 				});
 			/** 所有的输入节点ID */
 			const isInput = lineArr?.some((item) => item.target === id);
@@ -223,6 +223,7 @@ const Flow = (props: IProps) => {
 		const val: any = [];
 		tasks?.length &&
 			tasks.forEach((item) => {
+				console.log(item, "item");
 				val.push({
 					id: item.id,
 					type: item.type === "BATCH" ? "batchNode" : "flowNode",
@@ -249,7 +250,10 @@ const Flow = (props: IProps) => {
 							padding: isFlowNode(item.id) ? "20px" : "12px 20px",
 						},
 					},
-					position: { x: Number(item.position.x), y: Number(item.position.y) },
+					position: {
+						x: Number(item.position?.x) || 0,
+						y: Number(item.position?.y) || 0,
+					},
 					...(item.type === "BATCH" ? { style: { zIndex: -1 } } : {}),
 					...(item.parentNode ? { parentNode: item.parentNode } : {}),
 					...(item.type === "BATCH" ? { extent: "parent" } : {}),
@@ -270,7 +274,8 @@ const Flow = (props: IProps) => {
 		const val: ILine[] = [];
 		tasks?.length &&
 			tasks.forEach((item) => {
-				item.edges.forEach((every) => {
+				item?.edges?.length &&
+					item?.edges.forEach((every) => {
 						const newLine = {
 							...every,
 							batchId: item.parentNode ? item.parentNode : item.id,
@@ -340,7 +345,7 @@ const Flow = (props: IProps) => {
 		<ReactFlow
 			nodes={nodes}
 			edges={edges}
-			fitView={flowType === "default" ? false : true}
+			fitView={flowType === "default" ? true : false}
 			proOptions={{ hideAttribution: true, account: "" }}
 			nodeTypes={nodeTypes}
 			onPaneClick={handlePaneClick}

src/views/WorkFlowEdit/components/OperatorList/index.tsx

@@ -6,14 +6,12 @@ import { observer } from "mobx-react-lite";
 import { toJS } from "mobx";
 import cloneDeep from "lodash/cloneDeep";
 
-import { mockData } from "./mock";
 import { IOperatorItemProps, IOperatorListProps } from "./interface";
 import { ITask } from "@/views/Project/ProjectSubmitWork/interface";
 import useMyRequest from "@/hooks/useMyRequest";
 import { IResponse } from "@/api/http";
 import { fetchOperatorList } from "@/api/workbench_api";
 import { useStores } from "@/store";
-import { uuid } from "@/utils/util";
 
 import styles from "./index.module.css";
 import MyMenu from "@/components/mui/MyMenu";
@@ -26,19 +24,66 @@ import MyMenu from "@/components/mui/MyMenu";
  * @FilePath: /bkunyun/src/views/WorkFlowEdit/components/OperatorList/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
+
+let count = 1;
+
 const OperatorItem = (props: IOperatorItemProps) => {
 	const {
 		info: { title, description, tags },
 		setTemplateConfigInfo,
 		templateConfigInfo,
+		setOperatorListData,
+		operatorListData,
+		info,
 	} = props;
 	const [isDragStyle, setIsDragStyle] = useState<boolean>(false);
 
 	/** 拖拽开始 */
 	const onDragStart = useCallback(() => {
 		setIsDragStyle(true);
+		count++;
 	}, []);
 
+	/** 通过id查找相对的批流数组 */
+	const getBatchFlowArr = useCallback(
+		(id: string) => {
+			const newVal = operatorListData.filter((item) => {
+				return item.id === id || item.parentNode === id;
+			});
+			return newVal;
+		},
+		[operatorListData]
+	);
+
+	/** 生成批流副本 */
+	const getCopyBatchFlowArr = useCallback(
+		(arr: ITask[], x: number, y: number) => {
+			const newVal = arr.map((item) => {
+				const newEdges =
+					item?.edges &&
+					item?.edges.map((every) => {
+						return {
+							...every,
+							source: `${every.source}_${count}`,
+							target: `${every.target}_${count}`,
+						};
+					});
+				return {
+					...item,
+					id: `${item.id}_${count}`,
+					parentNode: item.parentNode ? `${item.parentNode}_${count}` : "",
+					position: {
+						x: item.type === "BATCH" ? x : item.position?.x,
+						y: item.type === "BATCH" ? y : item.position?.y,
+					},
+					edges: newEdges.length ? newEdges : item?.edges,
+				};
+			});
+			return newVal;
+		},
+		[]
+	);
+
 	/** 拖拽结束 */
 	const onDragEnd = useCallback(
 		(e: React.DragEvent<HTMLDivElement>) => {
@@ -55,27 +100,25 @@ const OperatorItem = (props: IOperatorItemProps) => {
 				clientX < lowerRightX &&
 				clientY < lowerRightY
 			) {
-				console.log(
+				const batchFlowArr = getBatchFlowArr(info.id);
+				const newBatchFlowArr = getCopyBatchFlowArr(
+					batchFlowArr,
 					clientX - upperLeftPointX,
-					clientY - upperLeftPointY,
-					"0000000"
+					clientY - upperLeftPointY
 				);
-				const newVal = [
-					...cloneDeep(templateConfigInfo),
-					{
-						...props.info,
-						uuid: uuid(),
-						position: {
-							x: clientX - upperLeftPointX,
-							y: clientY - upperLeftPointY,
-						},
-					},
-				];
+				const newVal = cloneDeep(templateConfigInfo);
+				newVal.push(...newBatchFlowArr);
 				setTemplateConfigInfo(newVal);
 			}
 			setIsDragStyle(false);
 		},
-		[props.info, setTemplateConfigInfo, templateConfigInfo]
+		[
+			getBatchFlowArr,
+			getCopyBatchFlowArr,
+			info.id,
+			setTemplateConfigInfo,
+			templateConfigInfo,
+		]
 	);
 
 	return (
@@ -105,7 +148,14 @@ const OperatorItem = (props: IOperatorItemProps) => {
 						</span>
 					);
 				})}
-				<MyMenu options={[]} value="dd">
+				<MyMenu
+					options={[
+						{ label: "1.1.0", value: "1.1.0" },
+						{ label: "1.2.0", value: "1.2.0" },
+						{ label: "1.3.0", value: "1.3.0" },
+					]}
+					value="1.1.0"
+				>
 					<div>ddd</div>
 				</MyMenu>
 			</div>
@@ -146,7 +196,6 @@ const OperatorList = observer((props: IOperatorListProps) => {
 			});
 		}
 	};
-
 	return (
 		<div className={styles.operatorListBox}>
 			<div className={styles.searchBox}>
@@ -163,12 +212,14 @@ const OperatorList = observer((props: IOperatorListProps) => {
 			</div>
 			<div className={styles.listBox}>
 				{operatorListData
-					// .filter((item) => item.type === "BATCH")
+					.filter((item) => item.type === "BATCH")
 					.map((item) => {
 						return (
 							<OperatorItem
 								key={item.id}
 								info={item}
+								setOperatorListData={setOperatorListData}
+								operatorListData={operatorListData}
 								templateConfigInfo={templateConfigInfo}
 								setTemplateConfigInfo={setTemplateConfigInfo}
 							/>

src/views/WorkFlowEdit/components/OperatorList/interface.ts

@@ -4,14 +4,16 @@ import { ITask } from "@/views/Project/ProjectSubmitWork/interface"
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-07-06 15:32:11
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-07 16:22:08
+ * @LastEditTime: 2022-07-08 16:05:21
  * @FilePath: /bkunyun/src/views/WorkFlowEdit/components/OperatorList/interface.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 export interface IOperatorItemProps {
     info: ITask
     setTemplateConfigInfo: (val: ITask[]) => void;
-    templateConfigInfo: ITask[]
+    templateConfigInfo: ITask[];
+    setOperatorListData: (val: ITask[]) => void;
+    operatorListData: ITask[]
 }
 
 export interface IOperatorListProps {

src/views/WorkFlowEdit/components/ParameterSetting/index.module.css

@@ -61,6 +61,63 @@
 	);
 	cursor: pointer;
 }
+
+.inOutBox {
+	margin-bottom: 20px;
+}
+
+.paramsTitle {
+	color: rgba(30, 38, 51, 1);
+	font-size: 14px;
+	line-height: 22px;
+	font-weight: 600;
+	margin-bottom: 12px;
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+}
+
+.paramsTitleDesc {
+	margin-left: 8px;
+}
+
+.paramsList {
+	background-color: rgba(247, 248, 250, 1);
+	border-radius: 4px;
+	padding: 16px 20px;
+}
+
+.parameterBox {
+	margin-bottom: 12px;
+}
+.parameterBox:last-child {
+	margin-bottom: 0;
+}
+.parameterTop {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 8px;
+}
+.parameterleft {
+}
+.parameterName {
+	color: rgba(30, 38, 51, 1);
+	font-size: 14px;
+	line-height: 22px;
+	font-weight: 600;
+}
+.required::after {
+	content: "*";
+	color: rgba(255, 78, 78, 1);
+	margin-left: 4px;
+}
+.parameterdataType {
+	color: rgba(138, 144, 153, 1);
+	font-size: 12px;
+	line-height: 20px;
+}
+
 .noData {
 	height: calc(100vh - 140px);
 	display: flex;

src/views/WorkFlowEdit/components/ParameterSetting/index.tsx

@@ -4,7 +4,17 @@ import {
 	IParameter,
 } from "../../../Project/ProjectSubmitWork/interface";
 import noTemplate from "@/assets/project/noTemplate.svg";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
+import MyInput from "@/components/mui/MyInput";
+import Tooltip from "@mui/material/Tooltip";
+import MyCheckBox from "@/components/mui/MyCheckBox";
+// import MySelect, { optionsTransform } from "../components/MySelect";
+import MySelect, {
+	optionsTransform,
+} from "../../../Project/ProjectSubmitWork/components/MySelect";
+import MyRadio from "@/components/mui/MyRadio";
+import questionMark from "@/assets/project/questionMark.svg";
+import fileSelectIcon from "@/assets/project/fileSelect.svg";
 import classNames from "classnames";
 
 type IParameterSettingProps = {
@@ -12,19 +22,99 @@ type IParameterSettingProps = {
 	taskId: string;
 };
 
+const templateConfigInfo = [
+	{
+		id: "id",
+		title: "title",
+		description:
+			"阿斯蒂芬吉林集安拉开圣诞节疯狂拉升阶段阿斯蒂芬吉林集安拉开圣诞节疯狂拉升阶段阿斯蒂芬吉林集安拉开圣诞节疯狂拉升阶段阿斯蒂芬吉林集安拉开圣诞节疯狂拉升阶段阿斯蒂芬吉林集安拉开圣诞节疯狂拉升阶段阿斯蒂芬吉林集安拉开圣诞节疯狂拉升阶段",
+		version: "version",
+		position: {
+			x: 10,
+			y: 100,
+		},
+		tags: ["string[]"],
+		type: "BATCH",
+		parentNode: "string",
+		parameters: [
+			{
+				hidden: true,
+				id: "",
+				name: "smi_in",
+				required: true,
+				defaultValue: null,
+				domType: "select",
+				classType: "STRING",
+				classTypeName: "String",
+				value: "",
+				description: "",
+				language: "",
+				languageVersion: "",
+				tags: [],
+				source: "string",
+				productId: "",
+				tasks: [],
+				validators: [
+					{
+						message: "请选择smi文件作为输入",
+						regex: "^.[s][m][i]$",
+					},
+				],
+				choices: [],
+				parameterGroup: "in",
+			},
+			{
+				hidden: true,
+				id: "",
+				name: "smi_in",
+				required: true,
+				defaultValue: null,
+				domType: "select",
+				classType: "STRING",
+				classTypeName: "String",
+				value: "",
+				description: "",
+				language: "",
+				languageVersion: "",
+				tags: [],
+				source: "string",
+				productId: "",
+				tasks: [],
+				validators: [
+					{
+						message: "请选择smi文件作为输入",
+						regex: "^.[s][m][i]$",
+					},
+				],
+				choices: [],
+				parameterGroup: "out",
+			},
+		],
+		edges: [],
+		isCheck: false,
+		executionStatus: "Pending",
+	},
+];
+const taskId = "id";
 const ParameterSetting = (props: IParameterSettingProps) => {
-	const { templateConfigInfo, taskId } = props;
+	// const { templateConfigInfo, taskId } = props;
 
-	const [descRef, setDescRef] = useState<any>(useRef());
 	const [descHeight, setDescHeight] = useState(0);
 	const [isShowAllDese, setIsShowAllDese] = useState(false);
 
-	useEffect(() => {
+	const [fileSelectOpen, setFileSelectOpen] = useState(false); // 选择输出路径的弹窗显示控制
+
+	const [fileSelectObject, setFileSelectObject] = useState({
+		taskId: "",
+		parameterName: "",
+	});
+
 	const div = document.getElementById("descHeight");
+	useEffect(() => {
 		if (div) {
 			setDescHeight(div.offsetHeight);
 		}
-	}, [descRef]);
+	}, [div]);
 
 	const taskInfo: ITask | null = useMemo(() => {
 		if (!taskId) {
@@ -34,7 +124,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 				(task) => task.id === taskId
 			);
 			if (randerTaskArr.length > 0) {
-				return randerTaskArr[0];
+				return randerTaskArr[0] as ITask;
 			} else {
 				return null;
 			}
@@ -51,6 +141,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 			);
 		}
 	}, [taskInfo]);
+	console.log(inParameters);
 
 	// 输出参数
 	const outParameters: Array<IParameter> = useMemo(() => {
@@ -63,50 +154,199 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 		}
 	}, [taskInfo]);
 
-	// 基础参数
-	const basisParameters: Array<IParameter> = useMemo(() => {
-		if (!taskInfo) {
-			return [];
-		} else {
-			return taskInfo.parameters.filter(
-				(parameter) => parameter.parameterGroup === "basis"
-			);
-		}
-	}, [taskInfo]);
+	// // 基础参数
+	// const basisParameters: Array<IParameter> = useMemo(() => {
+	// 	if (!taskInfo) {
+	// 		return [];
+	// 	} else {
+	// 		return taskInfo.parameters.filter(
+	// 			(parameter) => parameter.parameterGroup === "basis"
+	// 		);
+	// 	}
+	// }, [taskInfo]);
 
-	// 高级选项
-	const seniorParameters: Array<IParameter> = useMemo(() => {
-		if (!taskInfo) {
-			return [];
-		} else {
-			return taskInfo.parameters.filter(
-				(parameter) => parameter.parameterGroup === "senior"
-			);
-		}
-	}, [taskInfo]);
+	// // 高级选项
+	// const seniorParameters: Array<IParameter> = useMemo(() => {
+	// 	if (!taskInfo) {
+	// 		return [];
+	// 	} else {
+	// 		return taskInfo.parameters.filter(
+	// 			(parameter) => parameter.parameterGroup === "senior"
+	// 		);
+	// 	}
+	// }, [taskInfo]);
 
-	// 硬件配置
-	const hardwareParameters: Array<IParameter> = useMemo(() => {
-		if (!taskInfo) {
-			return [];
-		} else {
-			return taskInfo.parameters.filter(
-				(parameter) => parameter.parameterGroup === "hardware"
-			);
+	// // 硬件配置
+	// const hardwareParameters: Array<IParameter> = useMemo(() => {
+	// 	if (!taskInfo) {
+	// 		return [];
+	// 	} else {
+	// 		return taskInfo.parameters.filter(
+	// 			(parameter) => parameter.parameterGroup === "hardware"
+	// 		);
+	// 	}
+	// }, [taskInfo]);
+
+	const handleOpenFileSelect = (
+		taskId: string = "",
+		parameterName: string = ""
+	) => {
+		setFileSelectObject({
+			taskId,
+			parameterName,
+		});
+		setFileSelectOpen(true);
+	};
+
+	const handleParameterChange = (
+		e: any,
+		taskId: string,
+		parameterName: string
+	) => {
+		console.log(e.target.value, taskId, parameterName);
+		// setParameter(e.target.value, taskId, parameterName);
+	};
+
+	const renderInput = (parameter: IParameter) => {
+		return (
+			<div>
+				{parameter.domType.toLowerCase() === "file" && (
+					<MyInput
+						value={parameter.value || ""}
+						InputProps={{
+							endAdornment: (
+								<img
+									onClick={() => handleOpenFileSelect(taskId, parameter.name)}
+									src={fileSelectIcon}
+									alt=""
+									className={styles.fileSelectImg}
+								/>
+							),
+						}}
+						placeholder="请选择"
+						error={parameter.error || false}
+						helperText={parameter.helperText}
+					></MyInput>
+				)}
+				{parameter.domType.toLowerCase() === "path" && (
+					<MyInput
+						value={parameter.value || ""}
+						InputProps={{
+							endAdornment: (
+								<img
+									onClick={() => handleOpenFileSelect(taskId, parameter.name)}
+									src={fileSelectIcon}
+									alt=""
+									className={styles.fileSelectImg}
+								/>
+							),
+						}}
+						placeholder="请选择"
+						error={parameter.error || false}
+						helperText={parameter.helperText}
+					></MyInput>
+				)}
+				{parameter.domType.toLowerCase() === "dataset" && (
+					<MyInput
+						value={parameter.value || ""}
+						InputProps={{
+							endAdornment: (
+								<img
+									onClick={() => handleOpenFileSelect(taskId, parameter.name)}
+									src={fileSelectIcon}
+									alt=""
+									className={styles.fileSelectImg}
+								/>
+							),
+						}}
+						placeholder="请选择"
+						error={parameter.error || false}
+						helperText={parameter.helperText}
+					></MyInput>
+				)}
+				{parameter.domType.toLowerCase() === "input" && (
+					<MyInput
+						value={parameter.value || ""}
+						onChange={(e: any) =>
+							handleParameterChange(e, taskId, parameter.name || "")
 						}
-	}, [taskInfo]);
+						placeholder="请输入"
+						error={parameter.error || false}
+						helperText={parameter.helperText}
+					></MyInput>
+				)}
+				{parameter.domType.toLowerCase() === "select" && (
+					<MySelect
+						value={parameter.value}
+						onChange={(e: any) =>
+							handleParameterChange(e, taskId, parameter.name || "")
+						}
+						error={parameter.error || false}
+						helpertext={parameter.helperText}
+						options={optionsTransform(parameter?.choices || [], "label")}
+					></MySelect>
+				)}
+				{parameter.domType.toLowerCase() === "multipleselect" && (
+					<MySelect
+						value={parameter.value}
+						onChange={(e: any) =>
+							handleParameterChange(e, taskId, parameter.name || "")
+						}
+						multiple={true}
+						error={parameter.error || false}
+						helpertext={parameter.helperText}
+						options={optionsTransform(parameter.choices, "label")}
+					></MySelect>
+				)}
+				{parameter.domType.toLowerCase() === "radio" && (
+					<MyRadio
+						value={parameter.value}
+						onChange={(e: any) =>
+							handleParameterChange(e, taskId, parameter.name || "")
+						}
+						options={optionsTransform(parameter.choices, "label")}
+						error={parameter.error || false}
+						helperText={parameter.helperText}
+					></MyRadio>
+				)}
+				{parameter.domType.toLowerCase() === "checkbox" && (
+					<MyCheckBox
+						value={parameter.value}
+						onChange={(e: any) =>
+							handleParameterChange(
+								{
+									target: {
+										value: e,
+									},
+								},
+								taskId,
+								parameter.name || ""
+							)
+						}
+						options={optionsTransform(parameter.choices, "label")}
+						error={parameter.error || false}
+						helperText={parameter.helperText}
+					></MyCheckBox>
+				)}
+				{parameter.description && (
+					<Tooltip title={parameter.description} placement="top">
+						<img className={styles.parameterDesc} src={questionMark} alt="" />
+					</Tooltip>
+				)}
+			</div>
+		);
+	};
 
 	return (
 		<div className={styles.parameterSetting}>
-			{/* <div className={styles.taskInfo}>
-				<div className={styles.taskTitle}>taskTitle</div>
-				<div className={styles.taskVersion}>version</div>
-				<div
-					className={styles.taskDescriptionHeight}
-					id="descHeight"
-					ref={descRef}
-				>
-					埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国
+			{taskInfo && (
+				<div className={styles.taskInfo}>
+					<div className={styles.taskTitle}>{taskInfo.title || "-"}</div>
+					<div className={styles.taskVersion}>
+						版本：{taskInfo.version || "-"}
+					</div>
+					<div className={styles.taskDescriptionHeight} id="descHeight">
+						{taskInfo.description || "-"}
 					</div>
 					<div
 						className={classNames({
@@ -114,7 +354,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 							[styles.taskDescription]: !isShowAllDese,
 						})}
 					>
-					埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国
+						{taskInfo.description || "-"}
 						{descHeight > 60 && (
 							<span
 								className={styles.descButton}
@@ -124,44 +364,90 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 							</span>
 						)}
 					</div>
-			</div> */}
-			{taskInfo && (
-				<div className={styles.taskInfo}>
-					<div className={styles.taskTitle}>{taskInfo.title || "-"}</div>
-					<div className={styles.taskVersion}>
-						版本：{taskInfo.version || "-"}
 				</div>
-					<div
-						className={styles.taskDescriptionHeight}
-						id="descHeight"
-						ref={descRef}
+			)}
+			{inParameters.length > 0 && (
+				<div className={styles.inOutBox}>
+					<div className={styles.paramsTitle}>
+						输入
+						<Tooltip
+							title="当某个输入项为启用状态时，代表该输入将由模板使用者在使用的时候填写赋值；当为关闭状态时，代表该输入不需要使用者来填写赋值，而是将其它流程的结果传入。"
+							placement="top"
 						>
-						{taskInfo.description || "-"}
+							<img
+								className={styles.paramsTitleDesc}
+								src={questionMark}
+								alt=""
+							/>
+						</Tooltip>
 					</div>
+					<div className={styles.paramsList}>
+						{inParameters.map((parameter, index) => {
+							return (
+								<div className={styles.parameterBox} key={index}>
+									<div className={styles.parameterTop}>
+										<div className={styles.parameterleft}>
 											<div
 												className={classNames({
-							[styles.taskDescriptionAll]: isShowAllDese,
-							[styles.taskDescription]: !isShowAllDese,
+													[styles.parameterName]: true,
+													[styles.required]: parameter.required,
 												})}
 											>
-						{taskInfo.description || "-"}
-						{descHeight > 60 && (
-							<span
-								className={styles.descButton}
-								onClick={() => setIsShowAllDese(!isShowAllDese)}
-							>
-								{isShowAllDese ? "收起" : "展开"}
-							</span>
+												{parameter.name}
+											</div>
+											<div className={styles.parameterdataType}>
+												{parameter.classTypeName}
+											</div>
+										</div>
+										<div className={styles.parameterRight}>
+											{parameter.hidden}
+										</div>
+									</div>
+									{renderInput(parameter)}
+								</div>
+							);
+						})}
+					</div>
+				</div>
 			)}
+			{outParameters.length > 0 && (
+				<div className={styles.inOutBox}>
+					<div className={styles.paramsTitle}>输出</div>
+					<div className={styles.paramsList}>
+						{inParameters.map((parameter, index) => {
+							return (
+								<div className={styles.parameterBox} key={index}>
+									<div className={styles.parameterTop}>
+										<div className={styles.parameterleft}>
+											<div
+												className={classNames({
+													[styles.parameterName]: true,
+													[styles.required]: parameter.required,
+												})}
+											>
+												{parameter.name}
+											</div>
+											<div className={styles.parameterdataType}>
+												{parameter.classTypeName}
+											</div>
+										</div>
+										<div className={styles.parameterRight}>
+											{parameter.hidden}
+										</div>
+									</div>
+									{renderInput(parameter)}
+								</div>
+							);
+						})}
 					</div>
 				</div>
 			)}
-			{/* {!taskInfo && (
+			{!taskInfo && (
 				<div className={styles.noData}>
 					<img src={noTemplate} alt="" className={styles.noDataImg} />
 					<span className={styles.noDataText}>选中任意算子进行参数设置</span>
 				</div>
-			)} */}
+			)}
 		</div>
 	);
 };

src/views/demo/index.tsx

 import { useMessage } from "@/components/MySnackbar";
-import usePass from "@/hooks/usePass";
+// import usePass from "@/hooks/usePass";
 import { operation, route } from "@/router";
 import { Button } from "@mui/material";
 import { Box } from "@mui/system";
@@ -11,12 +11,12 @@ const Demo = ({
 	childrenRoutes?: Array<route | operation>;
 }) => {
 	const message = useMessage();
-  const isPass = usePass();
+	// const isPass = usePass();
 
 	useEffect(() => {
-    console.log(isPass("PROJECT_OVERIVEW_CREATE"), "11111111111");
-    console.log(isPass("PROJECT_SUMMARY_MEMBER"), "2222222");
-    console.log(isPass("test"), "33333");
+		// console.log(isPass("PROJECT_OVERIVEW_CREATE"), "11111111111");
+		// console.log(isPass("PROJECT_SUMMARY_MEMBER"), "2222222");
+		// console.log(isPass("test"), "33333");
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 

src/views/mui_demo/button.tsx

-import { memo, useCallback, useEffect, useMemo, useState } from "react";
-import _ from "lodash";
-import { IResponse, useHttp } from "@/api/http";
-import { useStores } from "@/store";
-import DeleteIcon from '@mui/icons-material/Delete';
-
+import { memo } from "react";
+import DeleteIcon from "@mui/icons-material/Delete";
 
 import Button from "@/components/mui/Button";
 
 const ProjectMembers = () => {
-    const http = useHttp();
-
-    const { currentProjectStore } = useStores();
-
-    useEffect(() => {
-
-    }, []);
-
-
 	return (
 		<>
-            <Button size={"large"} text={'确定'} />
+			<Button size={"large"} text={"确定"} />
 			&nbsp;&nbsp;
-            <Button text={'确定'} />
+			<Button text={"确定"} />
 			&nbsp;&nbsp;
-            <Button size={"small"} text={'确定'} />
-            <br /><br />
-            <Button size={"large"} text={'确定'} disabled />
+			<Button size={"small"} text={"确定"} />
+			<br />
+			<br />
+			<Button size={"large"} text={"确定"} disabled />
 			&nbsp;&nbsp;
-            <Button text={'确定'} disabled />
+			<Button text={"确定"} disabled />
 			&nbsp;&nbsp;
-            <Button size={"small"} text={'确定'} disabled />
-            <br /><br />
-            <Button size={"large"} color={"secondary"} text={'确定'} />
+			<Button size={"small"} text={"确定"} disabled />
+			<br />
+			<br />
+			<Button size={"large"} color={"secondary"} text={"确定"} />
 			&nbsp;&nbsp;
-            <Button color={"secondary"} text={'确定'} />
+			<Button color={"secondary"} text={"确定"} />
 			&nbsp;&nbsp;
-            <Button size={"small"} color={"secondary"} text={'确定'} />
+			<Button size={"small"} color={"secondary"} text={"确定"} />
 			<br /> <br />
-            <Button text={'确定'} size={"large"} style={{ color: "aqua", background: "burlywood" }} />
+			<Button
+				text={"确定"}
+				size={"large"}
+				style={{ color: "aqua", background: "burlywood" }}
+			/>
 			&nbsp;&nbsp;
-            <Button text={'确定'} style={{ color: "aqua", background: "burlywood" }} />
+			<Button
+				text={"确定"}
+				style={{ color: "aqua", background: "burlywood" }}
+			/>
 			&nbsp;&nbsp;
-            <Button text={'确定'} size={"small"} style={{ color: "aqua", background: "burlywood" }} />
+			<Button
+				text={"确定"}
+				size={"small"}
+				style={{ color: "aqua", background: "burlywood" }}
+			/>
 			<br /> <br />
 			outlined
 			<br />
-            <Button size={"large"} variant={"outlined"} text={'确定'} />
+			<Button size={"large"} variant={"outlined"} text={"确定"} />
 			&nbsp;&nbsp;
-            <Button variant={"outlined"} text={'确定'} />
+			<Button variant={"outlined"} text={"确定"} />
 			&nbsp;&nbsp;
-            <Button size={"small"} variant={"outlined"} text={'确定'} />
+			<Button size={"small"} variant={"outlined"} text={"确定"} />
 			<br /> <br />
-            <Button size={"large"} variant={"outlined"} disabled text={'确定'} />
+			<Button size={"large"} variant={"outlined"} disabled text={"确定"} />
 			&nbsp;&nbsp;
-            <Button variant={"outlined"} disabled text={'确定'} />
+			<Button variant={"outlined"} disabled text={"确定"} />
 			&nbsp;&nbsp;
-            <Button size={"small"} variant={"outlined"} disabled text={'确定'} />
+			<Button size={"small"} variant={"outlined"} disabled text={"确定"} />
 			<br /> <br />
-            <Button size={"large"} variant={"outlined"} color={"secondary"} text={'确定'} />
+			<Button
+				size={"large"}
+				variant={"outlined"}
+				color={"secondary"}
+				text={"确定"}
+			/>
 			&nbsp;&nbsp;
-            <Button variant={"outlined"} color={"secondary"} text={'确定'} />
+			<Button variant={"outlined"} color={"secondary"} text={"确定"} />
 			&nbsp;&nbsp;
-            <Button size={"small"} variant={"outlined"} color={"secondary"} text={'确定'} />
+			<Button
+				size={"small"}
+				variant={"outlined"}
+				color={"secondary"}
+				text={"确定"}
+			/>
 			<br /> <br />
-            <Button text={'确定'} size={"large"} variant={"outlined"} style={{ color: "aqua", background: "burlywood" }} />
+			<Button
+				text={"确定"}
+				size={"large"}
+				variant={"outlined"}
+				style={{ color: "aqua", background: "burlywood" }}
+			/>
 			&nbsp;&nbsp;
-            <Button text={'确定'} variant={"outlined"} style={{ color: "aqua", background: "burlywood" }} />
+			<Button
+				text={"确定"}
+				variant={"outlined"}
+				style={{ color: "aqua", background: "burlywood" }}
+			/>
 			&nbsp;&nbsp;
-            <Button text={'确定'} size={"small"} variant={"outlined"} style={{ color: "aqua", background: "burlywood" }} />
+			<Button
+				text={"确定"}
+				size={"small"}
+				variant={"outlined"}
+				style={{ color: "aqua", background: "burlywood" }}
+			/>
 			<br /> <br />
 			text
 			<br />
-            <Button size={"large"} variant={"text"} text={'确定确定确定确定确定确定'} />
+			<Button
+				size={"large"}
+				variant={"text"}
+				text={"确定确定确定确定确定确定"}
+			/>
 			&nbsp;&nbsp;
-            <Button variant={"text"} text={'确定确定确定确定确定确定'} />
+			<Button variant={"text"} text={"确定确定确定确定确定确定"} />
 			&nbsp;&nbsp;
-            <Button size={"small"} variant={"text"} text={'确定确定确定确定确定确定'} />
+			<Button
+				size={"small"}
+				variant={"text"}
+				text={"确定确定确定确定确定确定"}
+			/>
 			<br />
-            <Button size={"large"} disabled variant={"text"} text={'确定确定确定确定确定确定'} />
+			<Button
+				size={"large"}
+				disabled
+				variant={"text"}
+				text={"确定确定确定确定确定确定"}
+			/>
 			&nbsp;&nbsp;
-            <Button variant={"text"} disabled text={'确定确定确定确定确定确定'} />
+			<Button variant={"text"} disabled text={"确定确定确定确定确定确定"} />
 			&nbsp;&nbsp;
-            <Button size={"small"} disabled variant={"text"} text={'确定确定确定确定确定确定'} />
+			<Button
+				size={"small"}
+				disabled
+				variant={"text"}
+				text={"确定确定确定确定确定确定"}
+			/>
 			<br />
-            <Button size={"large"} color={"secondary"} variant={"text"} text={'确定确定确定确定确定确定'} />
+			<Button
+				size={"large"}
+				color={"secondary"}
+				variant={"text"}
+				text={"确定确定确定确定确定确定"}
+			/>
 			&nbsp;&nbsp;
-            <Button variant={"text"} color={"secondary"} text={'确定确定确定确定确定确定'} />
+			<Button
+				variant={"text"}
+				color={"secondary"}
+				text={"确定确定确定确定确定确定"}
+			/>
 			&nbsp;&nbsp;
-            <Button size={"small"} color={"secondary"} variant={"text"} text={'确定确定确定确定确定确定'} />
+			<Button
+				size={"small"}
+				color={"secondary"}
+				variant={"text"}
+				text={"确定确定确定确定确定确定"}
+			/>
 			<br /> <br />
 			img
 			<br />
-            <Button text={'确定确定确定确定确定确定'} img={<DeleteIcon />} />
+			<Button text={"确定确定确定确定确定确定"} img={<DeleteIcon />} />
 			<br /> <br />
 			select
 			<br />
 			<Button
-                text={'更多'}
-                select={
-                    [
+				text={"更多"}
+				select={[
 					{ name: "1111111" },
 					{ name: "1111111" },
 					{ name: "1111111" },
 					{ name: "1111111", color: "red" },
-                    ]
-                } />
+				]}
+			/>
 			<Button
-                text={'更多'}
-                color={"secondary"} variant={"text"}
-                select={
-                    [
+				text={"更多"}
+				color={"secondary"}
+				variant={"text"}
+				select={[
 					{ name: "1111111" },
 					{ name: "1111111" },
 					{ name: "1111111" },
 					{ name: "1111111", color: "red" },
-                    ]
-                } />
-
-
+				]}
+			/>
 		</>
 	);
 };

src/views/mui_demo/input.tsx

-import { memo, useCallback, useEffect, useMemo, useState } from "react";
-import _ from "lodash";
-import { IResponse, useHttp } from "@/api/http";
-import { useStores } from "@/store";
-import DeleteIcon from '@mui/icons-material/Delete';
-import { InputAdornment } from '@mui/material';
+import { memo } from "react";
+import { InputAdornment } from "@mui/material";
 import InputComponent from "@/components/mui/Input";
 
 const ProjectMembers = () => {
-    const http = useHttp();
-
-    const { currentProjectStore } = useStores();
-
-    useEffect(() => {
-
-    }, []);
-
-
 	return (
 		<>
-
 			<InputComponent
 				fullWidth={false}
 				label={"test"}
 				defaultValue={"sssssssss"}
-                size={'large'}
+				size={"large"}
 			/>
 			&nbsp;&nbsp;&nbsp;&nbsp;
 			<InputComponent
@@ -31,34 +17,45 @@ const ProjectMembers = () => {
 				label={"test"}
 				error={true}
 				helperText={"你还急急急靠靠靠靠靠靠靠靠靠靠靠靠靠靠"}
-            />&nbsp;&nbsp;&nbsp;&nbsp;
+			/>
+			&nbsp;&nbsp;&nbsp;&nbsp;
 			<InputComponent
 				fullWidth={false}
 				label={"test"}
-                size={'small'}
+				size={"small"}
 				disabled
-            />&nbsp;&nbsp;&nbsp;&nbsp;
+			/>
+			&nbsp;&nbsp;&nbsp;&nbsp;
+			<InputComponent fullWidth={false} label={"xsmall"} size={"xsmall"} />
+			&nbsp;&nbsp;&nbsp;&nbsp;
 			<InputComponent
 				fullWidth={false}
-                label={"xsmall"}
-                size={'xsmall'}
-            />&nbsp;&nbsp;&nbsp;&nbsp;
+				placeholder={"测试机哦"}
+				endAdornment={
+					<InputAdornment position="end">11&nbsp;&nbsp;</InputAdornment>
+				}
+			/>
+			&nbsp;&nbsp;&nbsp;&nbsp;
 			<InputComponent
 				fullWidth={false}
-                placeholder={"测试机哦"}
-                endAdornment={<InputAdornment position="end">11&nbsp;&nbsp;</InputAdornment>}
-            />&nbsp;&nbsp;&nbsp;&nbsp;
-            <InputComponent fullWidth={false} size={"small"} placeholder={"xxxxxx"} endAdornment={<InputAdornment position="end">11&nbsp;&nbsp;</InputAdornment>} />
+				size={"small"}
+				placeholder={"xxxxxx"}
+				endAdornment={
+					<InputAdornment position="end">11&nbsp;&nbsp;</InputAdornment>
+				}
+			/>
 			<br /> <br />
 			<InputComponent
 				fullWidth={true}
-                select={
-                    {
-                        json: [{value:'1',label:"2"},{value:'3',label:"4"}]
-                    }
-                }
+				select={{
+					json: [
+						{ value: "1", label: "2" },
+						{ value: "3", label: "4" },
+					],
+				}}
 			/>
-            <br /><br />
+			<br />
+			<br />
 			{/* <SelectComponent
                 option={json}
             />
@@ -72,8 +69,8 @@ const ProjectMembers = () => {
                 option={json}
                 size={"small"}
             /> */}
-            <br /><br />
-
+			<br />
+			<br />
 		</>
 	);
 };