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

cn-Feat 20220705 custom template

See merge request sunyihao/bkunyun!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 { classes, cx } = useStyles({});
-    const [anchorEl, setAnchorEl] = React.useState(null);
+	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 handleCloseOption = (item: any, key: number) => {
-        setAnchorEl(null);
-        selectCallBack && selectCallBack(item, key)
-    }
-    const handleClose = () => setAnchorEl(null);
+	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);
+	};
+	const handleClose = () => setAnchorEl(null);
 
+	return (
+		<>
+			<Button
+				size={size || "medium"}
+				variant={variant || "contained"}
+				color={color || "primary"}
+				disableRipple={true}
+				disableFocusRipple={true}
+				disabled={disabled || false}
+				classes={{
+					root: btnStyle.root || classes.root,
+					// disabled: btnStyle.disabled || classes.disabled,
+					containedSecondary:
+						btnStyle.containedSecondary || classes.containedSecondary,
+					outlined: btnStyle.outlined || classes.outlined,
+					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}
+			>
+				{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
+								),
+							}),
+						}}
+					/>
+				)}
+			</Button>
+			<Menu
+				id="simple-menu"
+				anchorEl={anchorEl}
+				keepMounted
+				open={Boolean(anchorEl)}
+				onClose={handleClose}
+			>
+				{select &&
+					select.length > 0 &&
+					select.map((item, key) => {
+						return (
+							<MenuItem
+								key={key}
+								classes={{ root: classes.menuItemRoot }}
+								onClick={() => handleCloseOption(item, key)}
+							>
+								{item.name || ""}
+							</MenuItem>
+						);
+					})}
+			</Menu>
+		</>
+	);
+};
 
-    return (
-        <>
-            <Button
-                size={size || "medium"}
-                variant={variant || 'contained'}
-                color={color || "primary"}
-                disableRipple={true}
-                disableFocusRipple={true}
-                disabled={disabled || false}
-                classes={{
-                    root: btnStyle.root || classes.root,
-                    // disabled: btnStyle.disabled || classes.disabled,
-                    containedSecondary: btnStyle.containedSecondary || classes.containedSecondary,
-                    outlined: btnStyle.outlined || classes.outlined,
-                    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,
+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" },
+	textPrimary: { color: "#136EFA", "&:hover": { backgroundColor: "#E8F1FF" } },
+	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)",
+	},
+	ArrowDropDownIconRootOpen: { color: "#8A9099", transform: "rotate(180deg)" },
+}));
 
-                }}
-                style={{ ...props.style }}
-                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={{
-                        root: cx({
-                            [classes.ArrowDropDownIconRoot]: true,
-                            [classes.ArrowDropDownIconRootOpen]: Boolean(props.dropValue || anchorEl)
-                        })
-                    }} />
-                }
-            </Button>
-            <Menu
-                id="simple-menu"
-                anchorEl={anchorEl}
-                keepMounted
-                open={Boolean(anchorEl)}
-                onClose={handleClose}
-            >
-                {
-                    select && select.length > 0 && select.map((item, key) => {
-                        return (
-                            <MenuItem
-                                key={key}
-                                classes={{ root: classes.menuItemRoot }}
-                                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)" } },
-        label: { "& p": { fontSize: "13px" } },
-        text: { backgroundColor: 'transparent', boxShadow: "none !important" },
-        textPrimary: { color: "#136EFA", "&:hover": { backgroundColor: "#E8F1FF" } },
-        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)" },
-        ArrowDropDownIconRootOpen: { color: "#8A9099", transform: "rotate(180deg)" },
-    })
-);
-
-
-export default ButtonComponent;
+export default ButtonComponent;
\ No newline at end of file

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

@@ -4,74 +4,72 @@ import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import TreeItem from "@mui/lab/TreeItem";
 
 interface TreeItemType {
-  id: string;
-  name: string;
-  disabled?: boolean;
-  subdirs?: readonly TreeItemType[];
+	id: string;
+	name: string;
+	disabled?: boolean;
+	subdirs?: readonly TreeItemType[];
 }
 
 type MyTreeViewProps = {
-  treeData: Array<TreeItemType>;
-  onNodeFocus?: (event: object, value: string) => void; // 点击某一项的回调
-  onNodeSelect?: (event: object, value: Array<any> | string) => void; // 点击某一项的回调
-  onNodeToggle?: (event: object, nodeIds: Array<any>) => void; // 点击某一项的回调
-  renderLabel?: (node: any) => React.ReactNode;
-  treeViewSx?: any;
-  defaultExpanded?: Array<string>;
-  idKey?: string;
-  idFunc?: (node: any) => string;
+	treeData: Array<TreeItemType>;
+	onNodeFocus?: (event: object, value: string) => void; // 点击某一项的回调
+	onNodeSelect?: (event: object, value: Array<any> | string) => void; // 点击某一项的回调
+	onNodeToggle?: (event: object, nodeIds: Array<any>) => void; // 点击某一项的回调
+	renderLabel?: (node: any) => React.ReactNode;
+	treeViewSx?: any;
+	defaultExpanded?: Array<string>;
+	idFunc?: (node: any) => string;
 };
 
 interface RenderTree {
-  id: string | number;
-  name: string;
-  disabled?: boolean;
-  subdirs?: readonly RenderTree[];
+	id: string | number;
+	name: string;
+	disabled?: boolean;
+	subdirs?: readonly RenderTree[];
 }
 
 const MyTreeView = (props: MyTreeViewProps) => {
-  const {
-    treeData = [],
-    renderLabel,
-    treeViewSx,
-    onNodeFocus,
-    onNodeSelect,
-    onNodeToggle,
-    defaultExpanded,
-    idKey,
-    idFunc,
-  } = props;
+	const {
+		treeData = [],
+		renderLabel,
+		treeViewSx,
+		onNodeFocus,
+		onNodeSelect,
+		onNodeToggle,
+		defaultExpanded,
+		idFunc,
+	} = props;
 
-  const renderTreeObj = (nodes: RenderTree, index: number) => (
-    <TreeItem
-      key={nodes.id || `${nodes.name}${index}`}
-      nodeId={String(
-        idFunc ? idFunc(nodes) : nodes.id || `${nodes.name}${index}`
-      )}
-      label={renderLabel === undefined ? nodes.name : renderLabel(nodes)}
-      disabled={nodes?.disabled ? true : false}
-    >
-      {Array.isArray(nodes.subdirs)
-        ? nodes.subdirs.map((node, i) => renderTreeObj(node, i))
-        : null}
-    </TreeItem>
-  );
+	const renderTreeObj = (nodes: RenderTree, index: number) => (
+		<TreeItem
+			key={nodes.id || `${nodes.name}${index}`}
+			nodeId={String(
+				idFunc ? idFunc(nodes) : nodes.id || `${nodes.name}${index}`
+			)}
+			label={renderLabel === undefined ? nodes.name : renderLabel(nodes)}
+			disabled={nodes?.disabled ? true : false}
+		>
+			{Array.isArray(nodes.subdirs)
+				? nodes.subdirs.map((node, i) => renderTreeObj(node, i))
+				: null}
+		</TreeItem>
+	);
 
-  return (
-    <TreeView
-      defaultCollapseIcon={<ArrowRightIcon />}
-      defaultExpandIcon={<ArrowDropDownIcon />}
-      onNodeFocus={onNodeFocus}
-      onNodeSelect={onNodeSelect}
-      onNodeToggle={onNodeToggle}
-      defaultExpanded={defaultExpanded}
-      sx={{ ...treeViewSx }}
-    >
-      {treeData.map((treeItem, index) => {
-        return renderTreeObj(treeItem, index);
-      })}
-    </TreeView>
-  );
+	return (
+		<TreeView
+			defaultCollapseIcon={<ArrowRightIcon />}
+			defaultExpandIcon={<ArrowDropDownIcon />}
+			onNodeFocus={onNodeFocus}
+			onNodeSelect={onNodeSelect}
+			onNodeToggle={onNodeToggle}
+			defaultExpanded={defaultExpanded}
+			sx={{ ...treeViewSx }}
+		>
+			{treeData.map((treeItem, index) => {
+				return renderTreeObj(treeItem, index);
+			})}
+		</TreeView>
+	);
 };
 
 export default MyTreeView;

src/hooks/usePass.ts

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

src/index.tsx

@@ -7,35 +7,48 @@ 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
+	document.getElementById("root") as HTMLElement
 );
 
 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(','),
-  },
-  palette: {
-    primary: { main: '#136EFA' },
-    secondary: { main: '#F44335' }
-  }
+	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(","),
+	},
+	palette: {
+		primary: { main: "#136EFA" },
+		secondary: { main: "#F44335" },
+	},
 });
 
 root.render(
-  <React.StrictMode>
-    <ThemeProvider theme={theme}>
-      <Provider {...stores}>
-        <MySnackbarProvider
-          alertSx={{ boxShadow: "0px 2px 4px 0px rgb(0 0 0 / 8%)" }}
-        >
-          <MyRouter></MyRouter>
-        </MySnackbarProvider>
-      </Provider>
-    </ThemeProvider>
-  </React.StrictMode>
+	<React.StrictMode>
+		<ThemeProvider theme={theme}>
+			<Provider {...stores}>
+				<MySnackbarProvider
+					alertSx={{ boxShadow: "0px 2px 4px 0px rgb(0 0 0 / 8%)" }}
+				>
+					<MyRouter></MyRouter>
+				</MySnackbarProvider>
+			</Provider>
+		</ThemeProvider>
+	</React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

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";
@@ -7,177 +7,177 @@ import { getDataFileDel, getDataFileDelPackage } from "@/api/project_api";
 import useMyRequest from "@/hooks/useMyRequest";
 
 const DeleteDialog = (props: any) => {
-  const {
-    path,
-    projectId,
-    fileToken,
-    currentOperateFile,
-    selectIds,
-    refresh,
-    showList,
-  } = props;
-  const Message = useMessage();
-  let deleteFileDialogRef: any = React.createRef();
-  const showDialog = () => {
-    deleteFileDialogRef.current.handleClickOpen();
-  };
-
-  useImperativeHandle(props.onRef, () => {
-    return {
-      showDialog: showDialog,
-    };
-  });
-  const { run: getDataFileDelRun } = useMyRequest(getDataFileDel, {
-    onSuccess: (res: any) => {
-      successDelete();
-    },
-  });
-
-  const { run: getDataFileDelPackageRun } = useMyRequest(
-    getDataFileDelPackage,
-    {
-      onSuccess: (res: any) => {
-        successDelete();
-      },
-    }
-  );
-
-  const successDelete = () => {
-    Message.success("删除成功！");
-    deleteFileDialogRef?.current?.handleClose();
-    refresh();
-  };
-
-  const deletePathProvidedToDataSet = useMemo(() => {
-    return path === "/" ? "/" : `${path}/`;
-  }, [path]);
-
-  const deletePathProvidedFileServer = useMemo(() => {
-    return path === "/" ? `${path}` : `${path}/`;
-  }, [path]);
-
-  // 删除
-  const handleSubmit = () => {
-    if (!currentOperateFile) {
-      // 批量删除
-      // 要删除的数据集
-      const datSetDeleteList = showList.filter((item: any) => {
-        return selectIds.indexOf(item.name) !== -1 && item.type === "dataSet";
-      });
-      // 要删除的文件夹
-      const folderDeleteList = showList.filter((item: any) => {
-        return selectIds.indexOf(item.name) !== -1 && item.type === "directory";
-      });
-      // 要删除的文件
-      const fileDeleteList = showList.filter((item: any) => {
-        return (
-          selectIds.indexOf(item.name) !== -1 &&
-          item.type !== "dataSet" &&
-          item.type !== "directory"
-        );
-      });
-      if (datSetDeleteList.length > 0) {
-        dataSetsDelete(datSetDeleteList);
-      }
-      if (folderDeleteList.length > 0) {
-        foldersDelete(folderDeleteList);
-      }
-      if (fileDeleteList.length > 0) {
-        filesDelete(fileDeleteList);
-      }
-    } else {
-      if (currentOperateFile.type === "dataSet") {
-        dataSetDelete();
-      } else if (currentOperateFile.type === "directory") {
-        folerDelete();
-      } else {
-        fileDelete();
-      }
-    }
-  };
-
-  // 删除单个数据集
-  const dataSetDelete = () => {
-    getDataFileDelRun({
-      projectId: projectId as string,
-      names: currentOperateFile.name,
-      path: deletePathProvidedToDataSet,
-    });
-  };
-
-  // 删除单个文件夹
-  const folerDelete = () => {
-    fileDelete();
-    const names = currentOperateFile.name;
-    dataSetInFolerDelete(names);
-  };
-
-  // 删除文件夹中的数据集
-  const dataSetInFolerDelete = (names: string) => {
-    getDataFileDelPackageRun({
-      projectId: projectId as string,
-      names,
-      path: deletePathProvidedToDataSet,
-    });
-  };
-
-  // 删除单个文件
-  const fileDelete = () => {
-    CloudEController.JobOutFileDel(
-      `${deletePathProvidedFileServer}${currentOperateFile.name}`,
-      fileToken as string,
-      projectId as string
-    )?.then((res) => {
-      successDelete();
-    });
-  };
-
-  // 删除多个数据集
-  const dataSetsDelete = (datSetDeleteList: Array<any>) => {
-    getDataFileDelRun({
-      projectId: projectId as string,
-      names: datSetDeleteList.map((item: any) => item.name).join(","),
-      path: deletePathProvidedToDataSet,
-    });
-  };
-
-  // 删除多个文件夹
-  const foldersDelete = (folderDeleteList: Array<any>) => {
-    filesDelete(folderDeleteList);
-    const names = folderDeleteList.map((item: any) => item.name).join(",");
-    dataSetInFolerDelete(names);
-  };
-
-  // 删除多个文件
-  const filesDelete = (fileDeleteList: Array<any>) => {
-    const deletePath = fileDeleteList
-      .map((item: any) => {
-        return `${deletePathProvidedFileServer}${item.name}`;
-      })
-      .join(" ");
-    CloudEController.JobOutFileDel(
-      deletePath,
-      fileToken as string,
-      projectId as string
-    )?.then((res) => {
-      successDelete();
-    });
-  };
-
-  const submitloading = false;
-
-  return (
-    <MyDialog
-      handleSubmit={handleSubmit}
-      onRef={deleteFileDialogRef}
-      title="提示"
-      submitloading={submitloading}
-    >
-      {currentOperateFile
-        ? "确认删除该数据吗？"
-        : `确认删除这${selectIds.length}条数据吗？`}
-    </MyDialog>
-  );
+	const {
+		path,
+		projectId,
+		fileToken,
+		currentOperateFile,
+		selectIds,
+		refresh,
+		showList,
+	} = props;
+	const Message = useMessage();
+	let deleteFileDialogRef: any = React.createRef();
+	const showDialog = () => {
+		deleteFileDialogRef.current.handleClickOpen();
+	};
+
+	useImperativeHandle(props.onRef, () => {
+		return {
+			showDialog: showDialog,
+		};
+	});
+	const { run: getDataFileDelRun } = useMyRequest(getDataFileDel, {
+		onSuccess: (res: any) => {
+			successDelete();
+		},
+	});
+
+	const { run: getDataFileDelPackageRun } = useMyRequest(
+		getDataFileDelPackage,
+		{
+			onSuccess: (res: any) => {
+				successDelete();
+			},
+		}
+	);
+
+	const successDelete = () => {
+		Message.success("删除成功！");
+		deleteFileDialogRef?.current?.handleClose();
+		refresh();
+	};
+
+	const deletePathProvidedToDataSet = useMemo(() => {
+		return path === "/" ? "/" : `${path}/`;
+	}, [path]);
+
+	const deletePathProvidedFileServer = useMemo(() => {
+		return path === "/" ? `${path}` : `${path}/`;
+	}, [path]);
+
+	// 删除
+	const handleSubmit = () => {
+		if (!currentOperateFile) {
+			// 批量删除
+			// 要删除的数据集
+			const datSetDeleteList = showList.filter((item: any) => {
+				return selectIds.indexOf(item.name) !== -1 && item.type === "dataSet";
+			});
+			// 要删除的文件夹
+			const folderDeleteList = showList.filter((item: any) => {
+				return selectIds.indexOf(item.name) !== -1 && item.type === "directory";
+			});
+			// 要删除的文件
+			const fileDeleteList = showList.filter((item: any) => {
+				return (
+					selectIds.indexOf(item.name) !== -1 &&
+					item.type !== "dataSet" &&
+					item.type !== "directory"
+				);
+			});
+			if (datSetDeleteList.length > 0) {
+				dataSetsDelete(datSetDeleteList);
+			}
+			if (folderDeleteList.length > 0) {
+				foldersDelete(folderDeleteList);
+			}
+			if (fileDeleteList.length > 0) {
+				filesDelete(fileDeleteList);
+			}
+		} else {
+			if (currentOperateFile.type === "dataSet") {
+				dataSetDelete();
+			} else if (currentOperateFile.type === "directory") {
+				folerDelete();
+			} else {
+				fileDelete();
+			}
+		}
+	};
+
+	// 删除单个数据集
+	const dataSetDelete = () => {
+		getDataFileDelRun({
+			projectId: projectId as string,
+			names: currentOperateFile.name,
+			path: deletePathProvidedToDataSet,
+		});
+	};
+
+	// 删除单个文件夹
+	const folerDelete = () => {
+		fileDelete();
+		const names = currentOperateFile.name;
+		dataSetInFolerDelete(names);
+	};
+
+	// 删除文件夹中的数据集
+	const dataSetInFolerDelete = (names: string) => {
+		getDataFileDelPackageRun({
+			projectId: projectId as string,
+			names,
+			path: deletePathProvidedToDataSet,
+		});
+	};
+
+	// 删除单个文件
+	const fileDelete = () => {
+		CloudEController.JobOutFileDel(
+			`${deletePathProvidedFileServer}${currentOperateFile.name}`,
+			fileToken as string,
+			projectId as string
+		)?.then((res) => {
+			successDelete();
+		});
+	};
+
+	// 删除多个数据集
+	const dataSetsDelete = (datSetDeleteList: Array<any>) => {
+		getDataFileDelRun({
+			projectId: projectId as string,
+			names: datSetDeleteList.map((item: any) => item.name).join(","),
+			path: deletePathProvidedToDataSet,
+		});
+	};
+
+	// 删除多个文件夹
+	const foldersDelete = (folderDeleteList: Array<any>) => {
+		filesDelete(folderDeleteList);
+		const names = folderDeleteList.map((item: any) => item.name).join(",");
+		dataSetInFolerDelete(names);
+	};
+
+	// 删除多个文件
+	const filesDelete = (fileDeleteList: Array<any>) => {
+		const deletePath = fileDeleteList
+			.map((item: any) => {
+				return `${deletePathProvidedFileServer}${item.name}`;
+			})
+			.join(" ");
+		CloudEController.JobOutFileDel(
+			deletePath,
+			fileToken as string,
+			projectId as string
+		)?.then((res) => {
+			successDelete();
+		});
+	};
+
+	const submitloading = false;
+
+	return (
+		<MyDialog
+			handleSubmit={handleSubmit}
+			onRef={deleteFileDialogRef}
+			title="提示"
+			submitloading={submitloading}
+		>
+			{currentOperateFile
+				? "确认删除该数据吗？"
+				: `确认删除这${selectIds.length}条数据吗？`}
+		</MyDialog>
+	);
 };
 
 export default DeleteDialog;

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

 import React, {
-  useState,
-  useImperativeHandle,
-  useCallback,
-  useMemo,
-  useEffect,
+	useState,
+	useImperativeHandle,
+	useCallback,
+	useMemo,
+	useEffect,
 } from "react";
 
 import style from "./index.module.css";
@@ -19,344 +19,341 @@ import classNames from "classnames";
 import _ from "lodash";
 
 const MoveFile = (props: any) => {
-  const {
-    path,
-    projectId,
-    fileToken,
-    currentOperateFile,
-    selectIds,
-    refresh,
-    showList,
-  } = props;
-  const Message = useMessage();
-  const [newPath, setNewPath] = useState("/");
-  const [rootActive, setRootActive] = useState(true);
-  const [moveFileSubmitloading, setMoveFileSubmitloading] = useState(false);
-  const [treeData, setTreeData] = useState<any>([]);
-  const [renderTreeData, setRenderTreeData] = useState<any>([]);
-  const [moveFileDialogRef, setMoveFileDialogRef] = useState<any>(
-    React.createRef()
-  );
-  // 要移动的文件夹  之后用来隐藏文件夹树中同路径的文件夹
-  const [moveFolderPathArr, setMoveFolderPathArr] = useState<Array<string>>([]);
+	const {
+		path,
+		projectId,
+		fileToken,
+		currentOperateFile,
+		selectIds,
+		refresh,
+		showList,
+	} = props;
+	const Message = useMessage();
+	const [newPath, setNewPath] = useState("/");
+	const [rootActive, setRootActive] = useState(true);
+	const [moveFileSubmitloading, setMoveFileSubmitloading] = useState(false);
+	const [treeData, setTreeData] = useState<any>([]);
+	const [renderTreeData, setRenderTreeData] = useState<any>([]);
+	const [moveFileDialogRef] = useState<any>(React.createRef());
+	// 要移动的文件夹  之后用来隐藏文件夹树中同路径的文件夹
+	const [moveFolderPathArr, setMoveFolderPathArr] = useState<Array<string>>([]);
 
-  const getTree = useCallback(() => {
-    if (fileToken && projectId) {
-      return CloudEController.JobOutFileDirtree(
-        "/",
-        fileToken,
-        projectId,
-        false
-      )?.then((res) => {
-        if (Array.isArray(res.data)) {
-          let arr = res.data;
-          setTreeData(arr);
-        } else {
-          setTreeData([]);
-        }
-      });
-    }
-  }, [fileToken, projectId]);
+	const getTree = useCallback(() => {
+		if (fileToken && projectId) {
+			return CloudEController.JobOutFileDirtree(
+				"/",
+				fileToken,
+				projectId,
+				false
+			)?.then((res) => {
+				if (Array.isArray(res.data)) {
+					let arr = res.data;
+					setTreeData(arr);
+				} else {
+					setTreeData([]);
+				}
+			});
+		}
+	}, [fileToken, projectId]);
 
-  const getDisabledRepeatFolder = useCallback(
-    (folderTree: any, samePathFolederArr: Array<string>) => {
-      const arr = _.cloneDeep(folderTree);
-      const disabledRepeatFolder = (tree: any, repeatPath: Array<string>) => {
-        tree.forEach((item: any, index: number) => {
-          if (repeatPath.indexOf(`${item.dir.substr(1)}${item.name}`) !== -1) {
-            item.disabled = true;
-          } else {
-            item.disabled = false;
-            if (item.subdirs.length > 0) {
-              disabledRepeatFolder(item.subdirs, repeatPath);
-            }
-          }
-        });
-      };
-      disabledRepeatFolder(arr, samePathFolederArr);
-      return arr;
-    },
-    []
-  );
+	const getDisabledRepeatFolder = useCallback(
+		(folderTree: any, samePathFolederArr: Array<string>) => {
+			const arr = _.cloneDeep(folderTree);
+			const disabledRepeatFolder = (tree: any, repeatPath: Array<string>) => {
+				tree.forEach((item: any, index: number) => {
+					if (repeatPath.indexOf(`${item.dir.substr(1)}${item.name}`) !== -1) {
+						item.disabled = true;
+					} else {
+						item.disabled = false;
+						if (item.subdirs.length > 0) {
+							disabledRepeatFolder(item.subdirs, repeatPath);
+						}
+					}
+				});
+			};
+			disabledRepeatFolder(arr, samePathFolederArr);
+			return arr;
+		},
+		[]
+	);
 
-  useEffect(() => {
-    const tree = getDisabledRepeatFolder(treeData, moveFolderPathArr);
-    setRenderTreeData(tree);
-  }, [moveFolderPathArr, getDisabledRepeatFolder, treeData]);
+	useEffect(() => {
+		const tree = getDisabledRepeatFolder(treeData, moveFolderPathArr);
+		setRenderTreeData(tree);
+	}, [moveFolderPathArr, getDisabledRepeatFolder, treeData]);
 
-  useEffect(() => {
-    let moveFolderArr: any = [];
-    let pathArr = [];
-    if (currentOperateFile) {
-      if (currentOperateFile.type === "directory") {
-        moveFolderArr = [currentOperateFile];
-      } else {
-        moveFolderArr = [];
-      }
-    } else {
-      moveFolderArr = showList.filter((item: any) => {
-        return selectIds.indexOf(item.name) !== -1 && item.type === "directory";
-      });
-    }
-    pathArr = moveFolderArr.map((item: any) => {
-      return path === "/" ? `/${item.name}` : `${path}/${item.name}`;
-    });
-    setMoveFolderPathArr(pathArr);
-  }, [selectIds, showList, currentOperateFile, path]);
+	useEffect(() => {
+		let moveFolderArr: any = [];
+		let pathArr = [];
+		if (currentOperateFile) {
+			if (currentOperateFile.type === "directory") {
+				moveFolderArr = [currentOperateFile];
+			} else {
+				moveFolderArr = [];
+			}
+		} else {
+			moveFolderArr = showList.filter((item: any) => {
+				return selectIds.indexOf(item.name) !== -1 && item.type === "directory";
+			});
+		}
+		pathArr = moveFolderArr.map((item: any) => {
+			return path === "/" ? `/${item.name}` : `${path}/${item.name}`;
+		});
+		setMoveFolderPathArr(pathArr);
+	}, [selectIds, showList, currentOperateFile, path]);
 
-  const showDialog = () => {
-    moveFileDialogRef.current.handleClickOpen();
-    getTree();
-  };
+	const showDialog = () => {
+		moveFileDialogRef.current.handleClickOpen();
+		getTree();
+	};
 
-  useImperativeHandle(props.onRef, () => {
-    return {
-      showDialog: showDialog,
-    };
-  });
+	useImperativeHandle(props.onRef, () => {
+		return {
+			showDialog: showDialog,
+		};
+	});
 
-  const { run: getDataFileMoveRun } = useMyRequest(getDataFileMove, {
-    onSuccess: (res: any) => {
-      successMove();
-    },
-  });
+	const { run: getDataFileMoveRun } = useMyRequest(getDataFileMove, {
+		onSuccess: (res: any) => {
+			successMove();
+		},
+	});
 
-  const { run: getDataFileMovePackageRun } = useMyRequest(
-    getDataFileMovePackage,
-    {
-      onSuccess: (res: any) => {
-        successMove();
-      },
-    }
-  );
+	const { run: getDataFileMovePackageRun } = useMyRequest(
+		getDataFileMovePackage,
+		{
+			onSuccess: (res: any) => {
+				successMove();
+			},
+		}
+	);
 
-  // 提供给fileserver相关接口的newpath 直接用newPath就可以了
-  // const newPathProvidedToFileServer = useMemo(() => {
-  //   return newPath
-  // }, [newPath])
+	// 提供给fileserver相关接口的newpath 直接用newPath就可以了
+	// const newPathProvidedToFileServer = useMemo(() => {
+	//   return newPath
+	// }, [newPath])
 
-  // 提供给数据集相关接口的newpath
-  const newPathProvidedToDataSet = useMemo(() => {
-    return newPath === "/" ? "/" : `${newPath}/`;
-  }, [newPath]);
+	// 提供给数据集相关接口的newpath
+	const newPathProvidedToDataSet = useMemo(() => {
+		return newPath === "/" ? "/" : `${newPath}/`;
+	}, [newPath]);
 
-  // 提供给fileserver相关接口的oldpath
-  const oldPathProvidedToFileServer = useMemo(() => {
-    return `${path}${path === "/" ? "" : "/"}`;
-  }, [path]);
+	// 提供给fileserver相关接口的oldpath
+	const oldPathProvidedToFileServer = useMemo(() => {
+		return `${path}${path === "/" ? "" : "/"}`;
+	}, [path]);
 
-  // 提供给数据集相关接口的oldpath
-  const oldPathProvidedToDataSet = useMemo(() => {
-    return path === "/" ? "/" : `${path}/`;
-  }, [path]);
+	// 提供给数据集相关接口的oldpath
+	const oldPathProvidedToDataSet = useMemo(() => {
+		return path === "/" ? "/" : `${path}/`;
+	}, [path]);
 
-  // 移动成功后的操作
-  const successMove = () => {
-    Message.success("移动成功！");
-    setMoveFileSubmitloading(false);
-    moveFileDialogRef?.current?.handleClose();
-    refresh();
-  };
+	// 移动成功后的操作
+	const successMove = () => {
+		Message.success("移动成功！");
+		setMoveFileSubmitloading(false);
+		moveFileDialogRef?.current?.handleClose();
+		refresh();
+	};
 
-  // 移动失败后的操作
-  const erroeMove = (error: any) => {
-    if (error?.response?.status === 405) {
-      Message.error("因目标路径存在同名文件，数据移动失败。");
-    } else {
-      Message.error("文件服务发生错误，数据移动失败。");
-    }
-    setMoveFileSubmitloading(false);
-  };
+	// 移动失败后的操作
+	const erroeMove = (error: any) => {
+		if (error?.response?.status === 405) {
+			Message.error("因目标路径存在同名文件，数据移动失败。");
+		} else {
+			Message.error("文件服务发生错误，数据移动失败。");
+		}
+		setMoveFileSubmitloading(false);
+	};
 
-  // 移动
-  const handleMoveFileSubmit = () => {
-    if (!newPath) {
-      Message.error("请选择移动到哪个目录");
-    } else if (newPath === path) {
-      Message.error("指定的目标路径为数据原路径，无需移动。");
-    } else {
-      setMoveFileSubmitloading(true);
-      if (!currentOperateFile) {
-        // 批量移动
-        // 要移动的数据集
-        const datSetMoveList = showList.filter((item: any) => {
-          return selectIds.indexOf(item.name) !== -1 && item.type === "dataSet";
-        });
-        // 要移动的文件夹
-        const folderMoveList = showList.filter((item: any) => {
-          return (
-            selectIds.indexOf(item.name) !== -1 && item.type === "directory"
-          );
-        });
-        // 要移动的文件
-        const fileMoveList = showList.filter((item: any) => {
-          return (
-            selectIds.indexOf(item.name) !== -1 &&
-            item.type !== "dataSet" &&
-            item.type !== "directory"
-          );
-        });
-        if (datSetMoveList.length > 0) {
-          dataSetsMove(datSetMoveList);
-        }
-        if (folderMoveList.length > 0) {
-          foldersMove(folderMoveList);
-        }
-        if (fileMoveList.length > 0) {
-          filesMove(fileMoveList)?.then((res) => {
-            successMove();
-          });
-        }
-      } else {
-        if (currentOperateFile.type === "dataSet") {
-          dataSetMove();
-        } else if (currentOperateFile.type === "directory") {
-          folerMove();
-        } else {
-          fileMove()?.then((res) => {
-            successMove();
-          });
-        }
-      }
-    }
-  };
+	// 移动
+	const handleMoveFileSubmit = () => {
+		if (!newPath) {
+			Message.error("请选择移动到哪个目录");
+		} else if (newPath === path) {
+			Message.error("指定的目标路径为数据原路径，无需移动。");
+		} else {
+			setMoveFileSubmitloading(true);
+			if (!currentOperateFile) {
+				// 批量移动
+				// 要移动的数据集
+				const datSetMoveList = showList.filter((item: any) => {
+					return selectIds.indexOf(item.name) !== -1 && item.type === "dataSet";
+				});
+				// 要移动的文件夹
+				const folderMoveList = showList.filter((item: any) => {
+					return (
+						selectIds.indexOf(item.name) !== -1 && item.type === "directory"
+					);
+				});
+				// 要移动的文件
+				const fileMoveList = showList.filter((item: any) => {
+					return (
+						selectIds.indexOf(item.name) !== -1 &&
+						item.type !== "dataSet" &&
+						item.type !== "directory"
+					);
+				});
+				if (datSetMoveList.length > 0) {
+					dataSetsMove(datSetMoveList);
+				}
+				if (folderMoveList.length > 0) {
+					foldersMove(folderMoveList);
+				}
+				if (fileMoveList.length > 0) {
+					filesMove(fileMoveList)?.then((res) => {
+						successMove();
+					});
+				}
+			} else {
+				if (currentOperateFile.type === "dataSet") {
+					dataSetMove();
+				} else if (currentOperateFile.type === "directory") {
+					folerMove();
+				} else {
+					fileMove()?.then((res) => {
+						successMove();
+					});
+				}
+			}
+		}
+	};
 
-  // 单文件移动
-  const fileMove = () => {
-    const oldPathToFileServer = `${oldPathProvidedToFileServer}${currentOperateFile.name}`;
-    return CloudEController.JobFileMove(
-      newPath,
-      oldPathToFileServer,
-      "",
-      fileToken,
-      projectId
-    );
-  };
+	// 单文件移动
+	const fileMove = () => {
+		const oldPathToFileServer = `${oldPathProvidedToFileServer}${currentOperateFile.name}`;
+		return CloudEController.JobFileMove(
+			newPath,
+			oldPathToFileServer,
+			"",
+			fileToken,
+			projectId
+		);
+	};
 
-  // 多文件移动
-  const filesMove = (fileMoveList: Array<any>) => {
-    const oldPaths = fileMoveList.map((item: any) => {
-      return `${oldPathProvidedToFileServer}${item.name}`;
-    });
-    return CloudEController.JobFileBatchMove(
-      newPath,
-      oldPaths,
-      "",
-      fileToken,
-      projectId
-    );
-  };
+	// 多文件移动
+	const filesMove = (fileMoveList: Array<any>) => {
+		const oldPaths = fileMoveList.map((item: any) => {
+			return `${oldPathProvidedToFileServer}${item.name}`;
+		});
+		return CloudEController.JobFileBatchMove(
+			newPath,
+			oldPaths,
+			"",
+			fileToken,
+			projectId
+		);
+	};
 
-  // 单文件夹移动
-  const folerMove = () => {
-    fileMove()
-      ?.then((res) => {
-        const names = currentOperateFile.name;
-        dataSetInFolerMove(names);
-      })
-      .catch((error) => {
-        console.log(error);
-        erroeMove(error);
-      });
-  };
+	// 单文件夹移动
+	const folerMove = () => {
+		fileMove()
+			?.then((res) => {
+				const names = currentOperateFile.name;
+				dataSetInFolerMove(names);
+			})
+			.catch((error) => {
+				console.log(error);
+				erroeMove(error);
+			});
+	};
 
-  // 移动文件夹中的数据集
-  const dataSetInFolerMove = (names: string) => {
-    getDataFileMovePackageRun({
-      projectId: projectId as string,
-      names,
-      spath: oldPathProvidedToDataSet,
-      dpath: newPathProvidedToDataSet,
-    });
-  };
+	// 移动文件夹中的数据集
+	const dataSetInFolerMove = (names: string) => {
+		getDataFileMovePackageRun({
+			projectId: projectId as string,
+			names,
+			spath: oldPathProvidedToDataSet,
+			dpath: newPathProvidedToDataSet,
+		});
+	};
 
-  // 多文件夹移动
-  const foldersMove = (folderMoveList: Array<any>) => {
-    filesMove(folderMoveList)
-      ?.then((res) => {
-        const names = folderMoveList.map((item: any) => item.name).join(",");
-        dataSetInFolerMove(names);
-      })
-      .catch((error) => {
-        console.log(error);
-        erroeMove(error);
-      });
-  };
+	// 多文件夹移动
+	const foldersMove = (folderMoveList: Array<any>) => {
+		filesMove(folderMoveList)
+			?.then((res) => {
+				const names = folderMoveList.map((item: any) => item.name).join(",");
+				dataSetInFolerMove(names);
+			})
+			.catch((error) => {
+				console.log(error);
+				erroeMove(error);
+			});
+	};
 
-  // 单数据集移动
-  const dataSetMove = () => {
-    getDataFileMoveRun({
-      projectId: projectId as string,
-      names: currentOperateFile.name,
-      spath: oldPathProvidedToDataSet,
-      dpath: newPathProvidedToDataSet,
-    });
-  };
+	// 单数据集移动
+	const dataSetMove = () => {
+		getDataFileMoveRun({
+			projectId: projectId as string,
+			names: currentOperateFile.name,
+			spath: oldPathProvidedToDataSet,
+			dpath: newPathProvidedToDataSet,
+		});
+	};
 
-  // 多数据集移动
-  const dataSetsMove = (datSetMoveList: Array<any>) => {
-    getDataFileMoveRun({
-      projectId: projectId as string,
-      names: datSetMoveList.map((item: any) => item.name).join(","),
-      spath: oldPathProvidedToFileServer,
-      dpath: newPath === "/" ? "/" : `${newPath}/`,
-    });
-  };
+	// 多数据集移动
+	const dataSetsMove = (datSetMoveList: Array<any>) => {
+		getDataFileMoveRun({
+			projectId: projectId as string,
+			names: datSetMoveList.map((item: any) => item.name).join(","),
+			spath: oldPathProvidedToFileServer,
+			dpath: newPath === "/" ? "/" : `${newPath}/`,
+		});
+	};
 
-  const renderLabel = (node: any) => {
-    return (
-      <span className={style.treeLabel}>
-        <img className={style.labelFolderIcon} src={folderIcon} alt="" />
-        <span className={style.treeLabelText}>{node.name}</span>
-      </span>
-    );
-  };
+	const renderLabel = (node: any) => {
+		return (
+			<span className={style.treeLabel}>
+				<img className={style.labelFolderIcon} src={folderIcon} alt="" />
+				<span className={style.treeLabelText}>{node.name}</span>
+			</span>
+		);
+	};
 
-  const onNodeSelect = (a: any, b: any) => {
-    setNewPath(b);
-    setRootActive(false);
-  };
+	const onNodeSelect = (a: any, b: any) => {
+		setNewPath(b);
+		setRootActive(false);
+	};
 
-  // 给路径去掉第一个'/'然后结尾加上文件名 方便后面直接使用
-  const idFunc = (item: any) => {
-    return `${item.dir.substr(1)}${item.name}`;
-  };
+	// 给路径去掉第一个'/'然后结尾加上文件名 方便后面直接使用
+	const idFunc = (item: any) => {
+		return `${item.dir.substr(1)}${item.name}`;
+	};
 
-  const handleRoot = () => {
-    setNewPath("/");
-    setRootActive(true);
-  };
+	const handleRoot = () => {
+		setNewPath("/");
+		setRootActive(true);
+	};
 
-  return (
-    <MyDialog
-      handleSubmit={handleMoveFileSubmit}
-      onRef={moveFileDialogRef}
-      title="移动至"
-      submitloading={moveFileSubmitloading}
-    >
-      <div
-        className={classNames({
-          [style.rootTitle]: true,
-          [style.rootTitleActive]: rootActive,
-        })}
-        onClick={handleRoot}
-      >
-        <img className={style.bigFolderIcon} src={bigFolderIcon} alt="" />
-        ProjectData
-      </div>
-      <MyTreeView
-        // treeData={treeData}
-        treeData={renderTreeData}
-        renderLabel={renderLabel}
-        onNodeSelect={onNodeSelect}
-        idFunc={idFunc}
-        treeViewSx={{
-          width: 400,
-          overflow: "hidden",
-        }}
-      ></MyTreeView>
-    </MyDialog>
-  );
+	return (
+		<MyDialog
+			handleSubmit={handleMoveFileSubmit}
+			onRef={moveFileDialogRef}
+			title="移动至"
+			submitloading={moveFileSubmitloading}
+		>
+			<div
+				className={classNames({
+					[style.rootTitle]: true,
+					[style.rootTitleActive]: rootActive,
+				})}
+				onClick={handleRoot}
+			>
+				<img className={style.bigFolderIcon} src={bigFolderIcon} alt="" />
+				ProjectData
+			</div>
+			<MyTreeView
+				treeData={renderTreeData}
+				renderLabel={renderLabel}
+				onNodeSelect={onNodeSelect}
+				idFunc={idFunc}
+				treeViewSx={{
+					width: 400,
+					overflow: "hidden",
+				}}
+			></MyTreeView>
+		</MyDialog>
+	);
 };
 
 export default MoveFile;

src/views/Project/ProjectData/index.tsx

@@ -28,726 +28,724 @@ import { useLocation } from "react-router-dom";
 import { getDataFind, getDataFileSearch } from "@/api/project_api";
 
 const theme = createTheme({
-  palette: {
-    neutral: {
-      main: "#1370FF",
-      contrastText: "#fff",
-    },
-  },
+	palette: {
+		neutral: {
+			main: "#1370FF",
+			contrastText: "#fff",
+		},
+	},
 });
 declare module "@mui/material/styles" {
-  interface Palette {
-    neutral: Palette["primary"];
-  }
+	interface Palette {
+		neutral: Palette["primary"];
+	}
 
-  interface PaletteOptions {
-    neutral?: PaletteOptions["primary"];
-  }
+	interface PaletteOptions {
+		neutral?: PaletteOptions["primary"];
+	}
 }
 
 declare module "@mui/material/Button" {
-  interface ButtonPropsColorOverrides {
-    neutral: true;
-  }
+	interface ButtonPropsColorOverrides {
+		neutral: true;
+	}
 }
 
 const ProjectData = observer(() => {
-  const isPass = usePass();
-  const { currentProjectStore } = useStores();
-  const fileToken = toJS(currentProjectStore.currentProjectInfo.filetoken);
-  const projectId = toJS(currentProjectStore.currentProjectInfo.id);
-  /** 路由信息 */
-  const location = useLocation();
-  // 当前文件路径
-  const [path, setPath] = useState<String>("/");
-  const [tableLoadding, setTableLoadding] = useState(false);
-  // 防止用户连续点击文件夹造成路径显示错误
-  const [debounce, setDebounce] = useState(false);
-  // 点击操作列中的按钮 会设置当前点击的文件
-  const [currentOperateFile, setCurrentOperateFile] = useState<any>(null);
-  // 1文件   2数据集
-  const [activeTab, setActiveTab] = useState(1);
-  // 复选框选中的文件名称数组
-  const [selectIds, setSelectIds] = useState<Array<string>>([]);
-  const [keyWord, setKeyWord] = useState("");
-  // 文件夹、文件列表
-  const [list, setList] = useState<any>([]);
-  // 数据集列表  不带文件
-  const [dataSetList, setDataSetList] = useState<any>([]);
-  let tableRef: any = React.createRef();
-  // 是否显示复选框     用户搜索文件后不显示  其他情况显示
-  const [showCheckBox, setShowCheckBox] = useState<boolean>(true);
-
-  // 切换文件、数据集
-  const handleChangeListType = (e: number) => {
-    if (isPass("PROJECT_DATA_TYPECHANAGE")) {
-      setActiveTab(e);
-      setSelectIds([]);
-      tableRef?.current?.initSelectedFunc([]);
-    }
-  };
-
-  useEffect(() => {
-    const locationInfo: any = location?.state;
-    setPath(locationInfo?.pathName || "/");
-  }, [location]);
-
-  // 列表展示的数据
-  const showList = useMemo(() => {
-    if (activeTab === 1) {
-      // 做排序  文件夹在前
-      let folderList: any = [];
-      let fileList: any = [];
-      list.forEach((item: any) => {
-        if (item.type === "directory") {
-          folderList.push(item);
-        } else {
-          fileList.push(item);
-        }
-      });
-      return [...folderList, ...fileList];
-    } else {
-      const folderList = list.filter((item: any) => {
-        return item.type === "directory";
-      });
-      return [...folderList, ...dataSetList];
-    }
-  }, [list, dataSetList, activeTab]);
-
-  // 是否全是文件夹
-  const isAllDirectory = useMemo(() => {
-    return showList.every((li: any) => {
-      return li.type === "directory";
-    });
-  }, [showList]);
-
-  // 全（文件、文件夹、数据集）列表
-  const allList = useMemo(() => {
-    return [...list, ...dataSetList];
-  }, [list, dataSetList]);
-
-  // 全局搜索数据集
-  const { run: getDataFileSearchRun } = useMyRequest(getDataFileSearch, {
-    onSuccess: (res: any) => {
-      const dataSetList = res.data.map((item: any) => {
-        return {
-          ...item,
-          type: "dataSet",
-        };
-      });
-      setDataSetList(dataSetList);
-      setSelectIds([]);
-      setDebounce(false);
-      tableRef?.current?.initSelectedFunc([]);
-      setShowCheckBox(false);
-    },
-  });
-
-  // 获取某路径下的数据集
-  const { run: getDataFindRun } = useMyRequest(getDataFind, {
-    onSuccess: (res: any) => {
-      const dataSetList = res.data.map((item: any) => {
-        return {
-          ...item,
-          type: "dataSet",
-        };
-      });
-      setDataSetList(dataSetList);
-      setSelectIds([]);
-      setDebounce(false);
-      tableRef?.current?.initSelectedFunc([]);
-      setShowCheckBox(true);
-    },
-  });
-
-  // 获取某路径下的数据集
-  const getDataSetList = useCallback(() => {
-    if (keyWord) {
-      return;
-    } else if (projectId) {
-      return getDataFindRun({
-        projectId: projectId as string,
-        path: path === "/" ? "/" : `${path}/`,
-      });
-    }
-  }, [keyWord, path, projectId, getDataFindRun]);
-
-  //  全局搜索数据集
-  const getDataSetListSearch = useCallback(() => {
-    if (keyWord && projectId) {
-      return getDataFileSearchRun({
-        projectId: projectId as string,
-        name: keyWord,
-      });
-    } else {
-      return getDataSetList();
-    }
-  }, [keyWord, projectId, getDataFileSearchRun, getDataSetList]);
-
-  useEffect(() => {
-    getDataSetList();
-  }, [getDataSetList]);
-
-  const getList = useCallback(() => {
-    if (keyWord) {
-      return;
-    } else if (fileToken && projectId) {
-      setTableLoadding(true);
-      return CloudEController.JobOutFileList(
-        path,
-        fileToken,
-        projectId,
-        false
-      )?.then((res) => {
-        setTableLoadding(false);
-        if (Array.isArray(res.data)) {
-          setList(res.data);
-        } else {
-          setList([]);
-        }
-        setSelectIds([]);
-        setDebounce(false);
-        setShowCheckBox(true);
-      });
-    }
-  }, [fileToken, path, projectId, keyWord]);
-
-  useEffect(() => {
-    getList();
-  }, [getList]);
-
-  // 全局搜索文件列表
-  const searchFileList = useCallback(() => {
-    if (!keyWord) {
-      getList();
-    } else {
-      if (fileToken && projectId) {
-        setTableLoadding(true);
-        setPath("/");
-        return CloudEController.JobSearchFileList(
-          keyWord,
-          "/",
-          fileToken,
-          projectId,
-          false
-        )?.then((res) => {
-          setTableLoadding(false);
-          if (Array.isArray(res.data)) {
-            setList(res.data);
-          } else {
-            setList([]);
-          }
-          setSelectIds([]);
-          setDebounce(false);
-          setShowCheckBox(false);
-        });
-      }
-    }
-  }, [fileToken, projectId, keyWord, getList]);
-
-  // 刷新
-  const handleRefresh = () => {
-    if (isPass("PROJECT_DATA_REFRESH", "USER")) {
-      tableRef?.current?.initSelectedFunc([]);
-      setSelectIds([]);
-      if (keyWord) {
-        searchFileList();
-        getDataSetListSearch();
-      } else {
-        getList();
-        getDataSetList();
-      }
-    }
-  };
-
-  // 搜索值改变
-  const handleKeyWordChange = (e: any) => {
-    if (e.target.value.length > 30) {
-      return;
-    }
-    setKeyWord(e.target.value);
-  };
-
-  // 按回车搜索
-  const handleKeyWordChangeKeyUp = (e: any) => {
-    if (e.keyCode === 13) {
-      searchFileList();
-      getDataSetListSearch();
-    }
-  };
-
-  // todo name sort
-  // table配置
-  const versionsHeadCells = useMemo(() => {
-    if (showCheckBox) {
-      return [
-        { id: "checkbox" },
-        { id: "name", numeric: false, label: "名称", width: "25%" },
-        { id: "size", numeric: false, label: "大小", width: "25%", sort: true },
-        {
-          id: "mtime",
-          numeric: false,
-          label: "创建时间",
-          width: "25%",
-          sort: true,
-        },
-        { id: "caozuo", numeric: false, label: "操作", width: "25%" },
-      ];
-    } else {
-      return [
-        { id: "name", numeric: false, label: "名称", width: "25%" },
-        { id: "size", numeric: false, label: "大小", width: "25%", sort: true },
-        {
-          id: "mtime",
-          numeric: false,
-          label: "创建时间",
-          width: "25%",
-          sort: true,
-        },
-        { id: "caozuo", numeric: false, label: "操作", width: "25%" },
-      ];
-    }
-  }, [showCheckBox]);
-
-  // 点击复选框
-  const hanldeCheckbox = (e: any) => {
-    const selectarr = e.map((item: any) => {
-      let andIndex = item.indexOf("&index=");
-      return item.slice(5, andIndex);
-    });
-    setSelectIds(selectarr);
-  };
-
-  // 文件夹下钻
-  const handleViewFolders = (item: any) => {
-    if (debounce) {
-      return;
-    } else {
-      setDebounce(true);
-      if (path === "/") {
-        setPath(`/${item.name}`);
-      } else {
-        setPath(`${path}/${item.name}`);
-      }
-    }
-  };
-
-  // table配置
-  const renderName = (item: any) => {
-    if (item.type === "directory") {
-      return (
-        <span
-          className={classnames({
-            [style.folderIconBox]: true,
-            [style.folderPointer]: true,
-          })}
-          onClick={() => handleViewFolders(item)}
-        >
-          <img className={style.folderIcon} src={folderIcon} alt="" />
-          {item.name}
-        </span>
-      );
-    } else if (item.type === "dataSet") {
-      return (
-        <span className={style.folderIconBox}>
-          <img className={style.folderIcon} src={dataSetIcon} alt="" />
-          {item.name}
-        </span>
-      );
-    } else {
-      return (
-        <span className={style.folderIconBox}>
-          <img className={style.folderIcon} src={fileIcon} alt="" />
-          {item.name}
-        </span>
-      );
-    }
-  };
-
-  // table配置
-  const renderSize = (item: any) => {
-    if (item.type === "dataSet") {
-      return `${item.size}条`;
-    }
-    return `${item.size ? storageUnitFromB(Number(item.size)) : "-"}`;
-  };
-
-  // table配置
-  const renderMtime = (item: any) => {
-    return String(moment(item.mtime).format("YYYY-MM-DD HH:mm:ss"));
-  };
-
-  // table配置
-  const renderButtons = (item: any) => {
-    return (
-      <span style={{ whiteSpace: "nowrap" }}>
-        {!isAllDirectory && (
-          <Button
-            sx={{
-              position: "relative",
-              left: "-4px",
-              minWidth: "10px",
-              marginRight: "10px",
-              visibility:
-                item.type !== "dataSet" && item.type !== "directory"
-                  ? "visible"
-                  : "hidden",
-            }}
-            variant="text"
-            size="small"
-            disabled={selectIds.length > 0 || !isPass("PROJECT_DATA_DOWNLOAD")}
-            onClick={() => hanleDownloadFile(item)}
-          >
-            下载
-          </Button>
-        )}
-        <Button
-          sx={{
-            position: "relative",
-            left: "-4px",
-            minWidth: "10px",
-            marginRight: "10px",
-          }}
-          variant="text"
-          size="small"
-          onClick={() => hanleShowMoveFileDialog(item)}
-          disabled={
-            selectIds.length > 0 || !isPass("PROJECT_DATA_MOVE", "USER")
-          }
-        >
-          移动至
-        </Button>
-        <Button
-          sx={{
-            position: "relative",
-            left: "-4px",
-            minWidth: "10px",
-            marginRight: "10px",
-          }}
-          variant="text"
-          size="small"
-          color="error"
-          onClick={() => hanleShowDeleteDialogRef(item)}
-          disabled={
-            selectIds.length > 0 || !isPass("PROJECT_DATA_DELETE", "USER")
-          }
-        >
-          删除
-        </Button>
-      </span>
-    );
-  };
-
-  // 文件上传
-  let UpLoaderFileRef: any = React.createRef();
-  const hanleShowUpLoaderFileDialog = () => {
-    UpLoaderFileRef.current.showDialog();
-  };
-
-  // 新增文件
-  let addFolderRef: any = React.createRef();
-
-  const hanleShowAddFolderDialog = () => {
-    addFolderRef.current.showDialog();
-  };
-
-  // 下载文件
-  const hanleDownloadFile = (item: any) => {
-    console.log(item);
-    const downloadPath =
-      path === "/" ? `/${item.name}` : `${path}/${item.name}`;
-    console.log(downloadPath);
-    CloudEController.JobFileDownload(
-      downloadPath,
-      fileToken as string,
-      projectId as string
-    );
-  };
-
-  // 文件移动
-  let moveFileRef: any = React.createRef();
-
-  const hanleShowMoveFileDialog = (item: any) => {
-    setCurrentOperateFile(item);
-    moveFileRef.current.showDialog();
-  };
-
-  // 删除弹窗
-  let deleteDialogRef: any = React.createRef();
-  const hanleShowDeleteDialogRef = (item: any) => {
-    setCurrentOperateFile(item);
-    deleteDialogRef.current.showDialog();
-  };
-
-  // 批量移动
-  const handleBatchMove = () => {
-    setCurrentOperateFile(null);
-    moveFileRef.current.showDialog();
-  };
-
-  // 批量删除
-  const handleBatchDelete = () => {
-    setCurrentOperateFile(null);
-    deleteDialogRef.current.showDialog();
-  };
-
-  // 前端展示的文件路径
-  const showPath = useMemo(() => {
-    if (path === "/") {
-      return <span className={style.showPathSpan}>ProjectData</span>;
-    } else {
-      const pathArr = path.split("/");
-      if (pathArr.length <= 4) {
-        return pathArr.map((item, index) => {
-          return (
-            <span
-              key={index}
-              onClick={() =>
-                setPath(
-                  pathArr.slice(0, index + 1).join("/") === ""
-                    ? "/"
-                    : pathArr.slice(0, index + 1).join("/")
-                )
-              }
-              className={classnames({
-                [style.showPathSpan]: true,
-                [style.showPathSpanActive]: index === pathArr.length - 1,
-              })}
-            >
-              {index === 0 ? "ProjectData" : item}{" "}
-              {index === pathArr.length - 1 ? null : (
-                <i className={style.showPathI}>{">"}</i>
-              )}
-            </span>
-          );
-        });
-      } else {
-        return pathArr.map((item, index) => {
-          return (
-            <span
-              key={index}
-              onClick={() => {
-                if (index === 1) {
-                  return;
-                }
-                setPath(
-                  pathArr.slice(0, index + 1).join("/") === ""
-                    ? "/"
-                    : pathArr.slice(0, index + 1).join("/")
-                );
-              }}
-              className={classnames({
-                [style.showPathSpan]: true,
-                [style.showPathSpanActive]: index === pathArr.length - 1,
-              })}
-            >
-              {index === 0
-                ? "ProjectData"
-                : index > pathArr.length - 4
-                ? item
-                : ""}
-              {/* && index > pathArr.length - 4 */}
-              {index === pathArr.length - 1 ||
-              (index <= pathArr.length - 4 && index > 0) ? null : (
-                <i className={style.showPathI}>{">"}</i>
-              )}
-              {index === 1 && "..."}
-              {index === 1 && <i className={style.showPathI}>{">"}</i>}
-            </span>
-          );
-        });
-      }
-    }
-  }, [path]);
-
-  if (currentProjectStore.currentProjectInfo.name) {
-    return (
-      <ThemeProvider theme={theme}>
-        <div className={style.projectData}>
-          <div className={style.projectDataStickyTop}>
-            <div className={style.projectDataTitle}>项目数据</div>
-            <div className={style.projectDataHeader}>
-              <div className={style.projectDataButtonAndSearch}>
-                <div className={style.projectDataButtonBox}>
-                  <Button
-                    color="neutral"
-                    variant="contained"
-                    size="small"
-                    style={{ marginRight: "12px" }}
-                    onClick={hanleShowUpLoaderFileDialog}
-                    disabled={
-                      selectIds.length !== 0 ||
-                      !isPass("PROJECT_DATA_UPLOAD", "USER")
-                    }
-                  >
-                    上传文件
-                  </Button>
-                  <Button
-                    color="neutral"
-                    variant="outlined"
-                    size="small"
-                    onClick={hanleShowAddFolderDialog}
-                    disabled={
-                      selectIds.length !== 0 ||
-                      !isPass("PROJECT_DATA_ADDDIR", "USER")
-                    }
-                  >
-                    新建文件夹
-                  </Button>
-                </div>
-                <div className={style.projectDataSearch}>
-                  <InputBase
-                    className={style.searchInput}
-                    placeholder="输入关键词搜索"
-                    inputProps={{ "aria-label": "输入关键词搜索" }}
-                    value={keyWord}
-                    onChange={handleKeyWordChange}
-                    style={{ width: "280px", fontSize: "14px" }}
-                    onKeyUp={handleKeyWordChangeKeyUp}
-                  />
-                  <IconButton
-                    type="submit"
-                    className={style.searchButton}
-                    aria-label="search"
-                    size="small"
-                    style={{ padding: "4px" }}
-                    onClick={handleRefresh}
-                  >
-                    <SearchIcon
-                      className={style.searchIcon}
-                      style={{ color: "#999" }}
-                    />
-                  </IconButton>
-                </div>
-              </div>
-              <div className={style.projectDataPathAndTabs}>
-                <div className={style.projectDataPath}>{showPath}</div>
-                <div className={style.projectDataTabsAndBtton}>
-                  <div className={style.projectDataTabs}>
-                    <div
-                      className={classnames({
-                        [style.projectDataTab]: true,
-                        [style.projectDataTabActive]: activeTab === 1,
-                      })}
-                      // onClick={() => setActiveTab(1)}
-                      onClick={() => handleChangeListType(1)}
-                    >
-                      文件
-                    </div>
-                    <div
-                      className={classnames({
-                        [style.projectDataTab]: true,
-                        [style.projectDataTabActive]: activeTab !== 1,
-                      })}
-                      // onClick={() => setActiveTab(2)}
-                      onClick={() => handleChangeListType(2)}
-                    >
-                      数据集
-                    </div>
-                  </div>
-                  <IconButton
-                    aria-label="refreshIcon"
-                    size="small"
-                    onClick={handleRefresh}
-                    disabled={!isPass("PROJECT_DATA_REFRESH", "USER")}
-                  >
-                    <RefreshIcon />
-                  </IconButton>
-                </div>
-              </div>
-            </div>
-            <Table
-              footer={false}
-              rowHover={true}
-              onRef={tableRef}
-              nopadding={true}
-              stickyheader={true}
-              load={tableLoadding}
-              initSelected={selectIds}
-              headCells={versionsHeadCells}
-              rowsPerPage={"99"}
-              checkboxData={(e: any) => {
-                hanldeCheckbox(e);
-              }}
-              rows={showList.map((item: any, index: number) => ({
-                ...item,
-                id: `name=${item.name}&index=${index}`,
-                name: renderName(item),
-                size: renderSize(item),
-                mtime: renderMtime(item),
-                caozuo: renderButtons(item),
-              }))}
-            ></Table>
-            {showList.length === 0 && (
-              <div className={style.noDataBox}>
-                <img className={style.noDataImg} src={noFile} alt="" />
-                <span className={style.noDataText}>暂未开启模板</span>
-              </div>
-            )}
-          </div>
-          {selectIds.length > 0 && (
-            <div className={style.projectDataStickyBox}>
-              <Button
-                color="error"
-                variant="outlined"
-                size="small"
-                style={{ marginRight: "12px" }}
-                onClick={handleBatchDelete}
-                disabled={!isPass("PROJECT_DATA_DELETE", "USER")}
-              >
-                批量删除（{selectIds.length}）
-              </Button>
-              <Button
-                color="neutral"
-                variant="contained"
-                size="small"
-                style={{ marginRight: "24px" }}
-                onClick={handleBatchMove}
-                disabled={!isPass("PROJECT_DATA_MOVE", "USER")}
-              >
-                批量移动（{selectIds.length}）
-              </Button>
-            </div>
-          )}
-          <DeleteDialog
-            onRef={deleteDialogRef}
-            path={path}
-            fileToken={fileToken}
-            projectId={projectId}
-            currentOperateFile={currentOperateFile}
-            selectIds={selectIds}
-            refresh={handleRefresh}
-            showList={showList}
-          ></DeleteDialog>
-          <UpLoaderFile
-            onRef={UpLoaderFileRef}
-            path={path}
-            list={allList}
-          ></UpLoaderFile>
-          <AddFolder
-            onRef={addFolderRef}
-            list={allList}
-            path={path}
-            refresh={handleRefresh}
-            fileToken={fileToken}
-            projectId={projectId}
-          ></AddFolder>
-          <MoveFile
-            onRef={moveFileRef}
-            path={path}
-            fileToken={fileToken}
-            projectId={projectId}
-            currentOperateFile={currentOperateFile}
-            selectIds={selectIds}
-            refresh={handleRefresh}
-            showList={showList}
-          ></MoveFile>
-        </div>
-      </ThemeProvider>
-    );
-  } else {
-    return <NoProject />;
-  }
+	const isPass = usePass();
+	const { currentProjectStore } = useStores();
+	const fileToken = toJS(currentProjectStore.currentProjectInfo.filetoken);
+	const projectId = toJS(currentProjectStore.currentProjectInfo.id);
+	/** 路由信息 */
+	const location = useLocation();
+	// 当前文件路径
+	const [path, setPath] = useState<String>("/");
+	const [tableLoadding, setTableLoadding] = useState(false);
+	// 防止用户连续点击文件夹造成路径显示错误
+	const [debounce, setDebounce] = useState(false);
+	// 点击操作列中的按钮 会设置当前点击的文件
+	const [currentOperateFile, setCurrentOperateFile] = useState<any>(null);
+	// 1文件   2数据集
+	const [activeTab, setActiveTab] = useState(1);
+	// 复选框选中的文件名称数组
+	const [selectIds, setSelectIds] = useState<Array<string>>([]);
+	const [keyWord, setKeyWord] = useState("");
+	// 文件夹、文件列表
+	const [list, setList] = useState<any>([]);
+	// 数据集列表  不带文件
+	const [dataSetList, setDataSetList] = useState<any>([]);
+	let tableRef: any = React.createRef();
+	// 是否显示复选框     用户搜索文件后不显示  其他情况显示
+	const [showCheckBox, setShowCheckBox] = useState<boolean>(true);
+
+	// 切换文件、数据集
+	const handleChangeListType = (e: number) => {
+		if (isPass("PROJECT_DATA_TYPECHANAGE")) {
+			setActiveTab(e);
+			setSelectIds([]);
+			tableRef?.current?.initSelectedFunc([]);
+		}
+	};
+
+	useEffect(() => {
+		const locationInfo: any = location?.state;
+		setPath(locationInfo?.pathName || "/");
+	}, [location]);
+
+	// 列表展示的数据
+	const showList = useMemo(() => {
+		if (activeTab === 1) {
+			// 做排序  文件夹在前
+			let folderList: any = [];
+			let fileList: any = [];
+			list.forEach((item: any) => {
+				if (item.type === "directory") {
+					folderList.push(item);
+				} else {
+					fileList.push(item);
+				}
+			});
+			return [...folderList, ...fileList];
+		} else {
+			const folderList = list.filter((item: any) => {
+				return item.type === "directory";
+			});
+			return [...folderList, ...dataSetList];
+		}
+	}, [list, dataSetList, activeTab]);
+
+	// 是否全是文件夹
+	const isAllDirectory = useMemo(() => {
+		return showList.every((li: any) => {
+			return li.type === "directory";
+		});
+	}, [showList]);
+
+	// 全（文件、文件夹、数据集）列表
+	const allList = useMemo(() => {
+		return [...list, ...dataSetList];
+	}, [list, dataSetList]);
+
+	// 全局搜索数据集
+	const { run: getDataFileSearchRun } = useMyRequest(getDataFileSearch, {
+		onSuccess: (res: any) => {
+			const dataSetList = res.data.map((item: any) => {
+				return {
+					...item,
+					type: "dataSet",
+				};
+			});
+			setDataSetList(dataSetList);
+			setSelectIds([]);
+			setDebounce(false);
+			tableRef?.current?.initSelectedFunc([]);
+			setShowCheckBox(false);
+		},
+	});
+
+	// 获取某路径下的数据集
+	const { run: getDataFindRun } = useMyRequest(getDataFind, {
+		onSuccess: (res: any) => {
+			const dataSetList = res.data.map((item: any) => {
+				return {
+					...item,
+					type: "dataSet",
+				};
+			});
+			setDataSetList(dataSetList);
+			setSelectIds([]);
+			setDebounce(false);
+			tableRef?.current?.initSelectedFunc([]);
+			setShowCheckBox(true);
+		},
+	});
+
+	// 获取某路径下的数据集
+	const getDataSetList = useCallback(() => {
+		if (keyWord) {
+			return;
+		} else if (projectId) {
+			return getDataFindRun({
+				projectId: projectId as string,
+				path: path === "/" ? "/" : `${path}/`,
+			});
+		}
+	}, [keyWord, path, projectId, getDataFindRun]);
+
+	//  全局搜索数据集
+	const getDataSetListSearch = useCallback(() => {
+		if (keyWord && projectId) {
+			return getDataFileSearchRun({
+				projectId: projectId as string,
+				name: keyWord,
+			});
+		} else {
+			return getDataSetList();
+		}
+	}, [keyWord, projectId, getDataFileSearchRun, getDataSetList]);
+
+	useEffect(() => {
+		getDataSetList();
+	}, [getDataSetList]);
+
+	const getList = useCallback(() => {
+		if (keyWord) {
+			return;
+		} else if (fileToken && projectId) {
+			setTableLoadding(true);
+			return CloudEController.JobOutFileList(
+				path,
+				fileToken,
+				projectId,
+				false
+			)?.then((res) => {
+				setTableLoadding(false);
+				if (Array.isArray(res.data)) {
+					setList(res.data);
+				} else {
+					setList([]);
+				}
+				setSelectIds([]);
+				setDebounce(false);
+				setShowCheckBox(true);
+			});
+		}
+	}, [fileToken, path, projectId, keyWord]);
+
+	useEffect(() => {
+		getList();
+	}, [getList]);
+
+	// 全局搜索文件列表
+	const searchFileList = useCallback(() => {
+		if (!keyWord) {
+			getList();
+		} else {
+			if (fileToken && projectId) {
+				setTableLoadding(true);
+				setPath("/");
+				return CloudEController.JobSearchFileList(
+					keyWord,
+					"/",
+					fileToken,
+					projectId,
+					false
+				)?.then((res) => {
+					setTableLoadding(false);
+					if (Array.isArray(res.data)) {
+						setList(res.data);
+					} else {
+						setList([]);
+					}
+					setSelectIds([]);
+					setDebounce(false);
+					setShowCheckBox(false);
+				});
+			}
+		}
+	}, [fileToken, projectId, keyWord, getList]);
+
+	// 刷新
+	const handleRefresh = () => {
+		if (isPass("PROJECT_DATA_REFRESH", "USER")) {
+			tableRef?.current?.initSelectedFunc([]);
+			setSelectIds([]);
+			if (keyWord) {
+				searchFileList();
+				getDataSetListSearch();
+			} else {
+				getList();
+				getDataSetList();
+			}
+		}
+	};
+
+	// 搜索值改变
+	const handleKeyWordChange = (e: any) => {
+		if (e.target.value.length > 30) {
+			return;
+		}
+		setKeyWord(e.target.value);
+	};
+
+	// 按回车搜索
+	const handleKeyWordChangeKeyUp = (e: any) => {
+		if (e.keyCode === 13) {
+			searchFileList();
+			getDataSetListSearch();
+		}
+	};
+
+	// todo name sort
+	// table配置
+	const versionsHeadCells = useMemo(() => {
+		if (showCheckBox) {
+			return [
+				{ id: "checkbox" },
+				{ id: "name", numeric: false, label: "名称", width: "25%" },
+				{ id: "size", numeric: false, label: "大小", width: "25%", sort: true },
+				{
+					id: "mtime",
+					numeric: false,
+					label: "创建时间",
+					width: "25%",
+					sort: true,
+				},
+				{ id: "caozuo", numeric: false, label: "操作", width: "25%" },
+			];
+		} else {
+			return [
+				{ id: "name", numeric: false, label: "名称", width: "25%" },
+				{ id: "size", numeric: false, label: "大小", width: "25%", sort: true },
+				{
+					id: "mtime",
+					numeric: false,
+					label: "创建时间",
+					width: "25%",
+					sort: true,
+				},
+				{ id: "caozuo", numeric: false, label: "操作", width: "25%" },
+			];
+		}
+	}, [showCheckBox]);
+
+	// 点击复选框
+	const hanldeCheckbox = (e: any) => {
+		const selectarr = e.map((item: any) => {
+			let andIndex = item.indexOf("&index=");
+			return item.slice(5, andIndex);
+		});
+		setSelectIds(selectarr);
+	};
+
+	// 文件夹下钻
+	const handleViewFolders = (item: any) => {
+		if (debounce) {
+			return;
+		} else {
+			setDebounce(true);
+			if (path === "/") {
+				setPath(`/${item.name}`);
+			} else {
+				setPath(`${path}/${item.name}`);
+			}
+		}
+	};
+
+	// table配置
+	const renderName = (item: any) => {
+		if (item.type === "directory") {
+			return (
+				<span
+					className={classnames({
+						[style.folderIconBox]: true,
+						[style.folderPointer]: true,
+					})}
+					onClick={() => handleViewFolders(item)}
+				>
+					<img className={style.folderIcon} src={folderIcon} alt="" />
+					{item.name}
+				</span>
+			);
+		} else if (item.type === "dataSet") {
+			return (
+				<span className={style.folderIconBox}>
+					<img className={style.folderIcon} src={dataSetIcon} alt="" />
+					{item.name}
+				</span>
+			);
+		} else {
+			return (
+				<span className={style.folderIconBox}>
+					<img className={style.folderIcon} src={fileIcon} alt="" />
+					{item.name}
+				</span>
+			);
+		}
+	};
+
+	// table配置
+	const renderSize = (item: any) => {
+		if (item.type === "dataSet") {
+			return `${item.size}条`;
+		}
+		return `${item.size ? storageUnitFromB(Number(item.size)) : "-"}`;
+	};
+
+	// table配置
+	const renderMtime = (item: any) => {
+		return String(moment(item.mtime).format("YYYY-MM-DD HH:mm:ss"));
+	};
+
+	// table配置
+	const renderButtons = (item: any) => {
+		return (
+			<span style={{ whiteSpace: "nowrap" }}>
+				{!isAllDirectory && (
+					<Button
+						sx={{
+							position: "relative",
+							left: "-4px",
+							minWidth: "10px",
+							marginRight: "10px",
+							visibility:
+								item.type !== "dataSet" && item.type !== "directory"
+									? "visible"
+									: "hidden",
+						}}
+						variant="text"
+						size="small"
+						disabled={selectIds.length > 0 || !isPass("PROJECT_DATA_DOWNLOAD")}
+						onClick={() => hanleDownloadFile(item)}
+					>
+						下载
+					</Button>
+				)}
+				<Button
+					sx={{
+						position: "relative",
+						left: "-4px",
+						minWidth: "10px",
+						marginRight: "10px",
+					}}
+					variant="text"
+					size="small"
+					onClick={() => hanleShowMoveFileDialog(item)}
+					disabled={
+						selectIds.length > 0 || !isPass("PROJECT_DATA_MOVE", "USER")
+					}
+				>
+					移动至
+				</Button>
+				<Button
+					sx={{
+						position: "relative",
+						left: "-4px",
+						minWidth: "10px",
+						marginRight: "10px",
+					}}
+					variant="text"
+					size="small"
+					color="error"
+					onClick={() => hanleShowDeleteDialogRef(item)}
+					disabled={
+						selectIds.length > 0 || !isPass("PROJECT_DATA_DELETE", "USER")
+					}
+				>
+					删除
+				</Button>
+			</span>
+		);
+	};
+
+	// 文件上传
+	let UpLoaderFileRef: any = React.createRef();
+	const hanleShowUpLoaderFileDialog = () => {
+		UpLoaderFileRef.current.showDialog();
+	};
+
+	// 新增文件
+	let addFolderRef: any = React.createRef();
+
+	const hanleShowAddFolderDialog = () => {
+		addFolderRef.current.showDialog();
+	};
+
+	// 下载文件
+	const hanleDownloadFile = (item: any) => {
+		const downloadPath =
+			path === "/" ? `/${item.name}` : `${path}/${item.name}`;
+		CloudEController.JobFileDownload(
+			downloadPath,
+			fileToken as string,
+			projectId as string
+		);
+	};
+
+	// 文件移动
+	let moveFileRef: any = React.createRef();
+
+	const hanleShowMoveFileDialog = (item: any) => {
+		setCurrentOperateFile(item);
+		moveFileRef.current.showDialog();
+	};
+
+	// 删除弹窗
+	let deleteDialogRef: any = React.createRef();
+	const hanleShowDeleteDialogRef = (item: any) => {
+		setCurrentOperateFile(item);
+		deleteDialogRef.current.showDialog();
+	};
+
+	// 批量移动
+	const handleBatchMove = () => {
+		setCurrentOperateFile(null);
+		moveFileRef.current.showDialog();
+	};
+
+	// 批量删除
+	const handleBatchDelete = () => {
+		setCurrentOperateFile(null);
+		deleteDialogRef.current.showDialog();
+	};
+
+	// 前端展示的文件路径
+	const showPath = useMemo(() => {
+		if (path === "/") {
+			return <span className={style.showPathSpan}>ProjectData</span>;
+		} else {
+			const pathArr = path.split("/");
+			if (pathArr.length <= 4) {
+				return pathArr.map((item, index) => {
+					return (
+						<span
+							key={index}
+							onClick={() =>
+								setPath(
+									pathArr.slice(0, index + 1).join("/") === ""
+										? "/"
+										: pathArr.slice(0, index + 1).join("/")
+								)
+							}
+							className={classnames({
+								[style.showPathSpan]: true,
+								[style.showPathSpanActive]: index === pathArr.length - 1,
+							})}
+						>
+							{index === 0 ? "ProjectData" : item}{" "}
+							{index === pathArr.length - 1 ? null : (
+								<i className={style.showPathI}>{">"}</i>
+							)}
+						</span>
+					);
+				});
+			} else {
+				return pathArr.map((item, index) => {
+					return (
+						<span
+							key={index}
+							onClick={() => {
+								if (index === 1) {
+									return;
+								}
+								setPath(
+									pathArr.slice(0, index + 1).join("/") === ""
+										? "/"
+										: pathArr.slice(0, index + 1).join("/")
+								);
+							}}
+							className={classnames({
+								[style.showPathSpan]: true,
+								[style.showPathSpanActive]: index === pathArr.length - 1,
+							})}
+						>
+							{index === 0
+								? "ProjectData"
+								: index > pathArr.length - 4
+								? item
+								: ""}
+							{/* && index > pathArr.length - 4 */}
+							{index === pathArr.length - 1 ||
+							(index <= pathArr.length - 4 && index > 0) ? null : (
+								<i className={style.showPathI}>{">"}</i>
+							)}
+							{index === 1 && "..."}
+							{index === 1 && <i className={style.showPathI}>{">"}</i>}
+						</span>
+					);
+				});
+			}
+		}
+	}, [path]);
+
+	if (currentProjectStore.currentProjectInfo.name) {
+		return (
+			<ThemeProvider theme={theme}>
+				<div className={style.projectData}>
+					<div className={style.projectDataStickyTop}>
+						<div className={style.projectDataTitle}>项目数据</div>
+						<div className={style.projectDataHeader}>
+							<div className={style.projectDataButtonAndSearch}>
+								<div className={style.projectDataButtonBox}>
+									<Button
+										color="neutral"
+										variant="contained"
+										size="small"
+										style={{ marginRight: "12px" }}
+										onClick={hanleShowUpLoaderFileDialog}
+										disabled={
+											selectIds.length !== 0 ||
+											!isPass("PROJECT_DATA_UPLOAD", "USER")
+										}
+									>
+										上传文件
+									</Button>
+									<Button
+										color="neutral"
+										variant="outlined"
+										size="small"
+										onClick={hanleShowAddFolderDialog}
+										disabled={
+											selectIds.length !== 0 ||
+											!isPass("PROJECT_DATA_ADDDIR", "USER")
+										}
+									>
+										新建文件夹
+									</Button>
+								</div>
+								<div className={style.projectDataSearch}>
+									<InputBase
+										className={style.searchInput}
+										placeholder="输入关键词搜索"
+										inputProps={{ "aria-label": "输入关键词搜索" }}
+										value={keyWord}
+										onChange={handleKeyWordChange}
+										style={{ width: "280px", fontSize: "14px" }}
+										onKeyUp={handleKeyWordChangeKeyUp}
+									/>
+									<IconButton
+										type="submit"
+										className={style.searchButton}
+										aria-label="search"
+										size="small"
+										style={{ padding: "4px" }}
+										onClick={handleRefresh}
+									>
+										<SearchIcon
+											className={style.searchIcon}
+											style={{ color: "#999" }}
+										/>
+									</IconButton>
+								</div>
+							</div>
+							<div className={style.projectDataPathAndTabs}>
+								<div className={style.projectDataPath}>{showPath}</div>
+								<div className={style.projectDataTabsAndBtton}>
+									<div className={style.projectDataTabs}>
+										<div
+											className={classnames({
+												[style.projectDataTab]: true,
+												[style.projectDataTabActive]: activeTab === 1,
+											})}
+											// onClick={() => setActiveTab(1)}
+											onClick={() => handleChangeListType(1)}
+										>
+											文件
+										</div>
+										<div
+											className={classnames({
+												[style.projectDataTab]: true,
+												[style.projectDataTabActive]: activeTab !== 1,
+											})}
+											// onClick={() => setActiveTab(2)}
+											onClick={() => handleChangeListType(2)}
+										>
+											数据集
+										</div>
+									</div>
+									<IconButton
+										aria-label="refreshIcon"
+										size="small"
+										onClick={handleRefresh}
+										disabled={!isPass("PROJECT_DATA_REFRESH", "USER")}
+									>
+										<RefreshIcon />
+									</IconButton>
+								</div>
+							</div>
+						</div>
+						<Table
+							footer={false}
+							rowHover={true}
+							onRef={tableRef}
+							nopadding={true}
+							stickyheader={true}
+							load={tableLoadding}
+							initSelected={selectIds}
+							headCells={versionsHeadCells}
+							rowsPerPage={"99"}
+							checkboxData={(e: any) => {
+								hanldeCheckbox(e);
+							}}
+							rows={showList.map((item: any, index: number) => ({
+								...item,
+								id: `name=${item.name}&index=${index}`,
+								name: renderName(item),
+								size: renderSize(item),
+								mtime: renderMtime(item),
+								caozuo: renderButtons(item),
+							}))}
+						></Table>
+						{showList.length === 0 && (
+							<div className={style.noDataBox}>
+								<img className={style.noDataImg} src={noFile} alt="" />
+								<span className={style.noDataText}>暂未开启模板</span>
+							</div>
+						)}
+					</div>
+					{selectIds.length > 0 && (
+						<div className={style.projectDataStickyBox}>
+							<Button
+								color="error"
+								variant="outlined"
+								size="small"
+								style={{ marginRight: "12px" }}
+								onClick={handleBatchDelete}
+								disabled={!isPass("PROJECT_DATA_DELETE", "USER")}
+							>
+								批量删除（{selectIds.length}）
+							</Button>
+							<Button
+								color="neutral"
+								variant="contained"
+								size="small"
+								style={{ marginRight: "24px" }}
+								onClick={handleBatchMove}
+								disabled={!isPass("PROJECT_DATA_MOVE", "USER")}
+							>
+								批量移动（{selectIds.length}）
+							</Button>
+						</div>
+					)}
+					<DeleteDialog
+						onRef={deleteDialogRef}
+						path={path}
+						fileToken={fileToken}
+						projectId={projectId}
+						currentOperateFile={currentOperateFile}
+						selectIds={selectIds}
+						refresh={handleRefresh}
+						showList={showList}
+					></DeleteDialog>
+					<UpLoaderFile
+						onRef={UpLoaderFileRef}
+						path={path}
+						list={allList}
+					></UpLoaderFile>
+					<AddFolder
+						onRef={addFolderRef}
+						list={allList}
+						path={path}
+						refresh={handleRefresh}
+						fileToken={fileToken}
+						projectId={projectId}
+					></AddFolder>
+					<MoveFile
+						onRef={moveFileRef}
+						path={path}
+						fileToken={fileToken}
+						projectId={projectId}
+						currentOperateFile={currentOperateFile}
+						selectIds={selectIds}
+						refresh={handleRefresh}
+						showList={showList}
+					></MoveFile>
+				</div>
+			</ThemeProvider>
+		);
+	} else {
+		return <NoProject />;
+	}
 });
 
 export default ProjectData;

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";
 
@@ -19,91 +19,91 @@ import { IDialogInfo } from "../interface";
 import { useMessage } from "@/components/MySnackbar";
 
 interface IProps {
-  setPermissionDialog: (val: IDialogInfo) => void;
-  permissionDialog: IDialogInfo;
-  getTableList: () => void;
+	setPermissionDialog: (val: IDialogInfo) => void;
+	permissionDialog: IDialogInfo;
+	getTableList: () => void;
 }
 
 const ChangePermission = observer((props: IProps) => {
-  const { permissionDialog, setPermissionDialog, getTableList } = props;
+	const { permissionDialog, setPermissionDialog, getTableList } = props;
 
-  const { currentProjectStore } = useStores();
-  const Message = useMessage();
-  const http = useHttp();
+	const { currentProjectStore } = useStores();
+	const Message = useMessage();
+	const http = useHttp();
 
-  const [selectOptions, setSelectOptions] = useState<IOption[]>([]);
-  const [selectValue, setSelectValue] = useState<IOption | undefined>();
+	const [selectOptions, setSelectOptions] = useState<IOption[]>([]);
+	const [selectValue, setSelectValue] = useState<IOption | undefined>();
 
-  useEffect(() => {
-    if (permissionDialog?.isShow) {
-      http.get<IResponse<any>>("/cpp/project/listroles").then((res) => {
-        const arr = [];
-        const { data } = res;
-        for (const key in data) {
-          arr.push({
-            label: String(data[key]),
-            value: key,
-          });
-        }
-        setSelectOptions(arr);
-      });
-    }
-  }, [http, permissionDialog]);
+	useEffect(() => {
+		if (permissionDialog?.isShow) {
+			http.get<IResponse<any>>("/cpp/project/listroles").then((res) => {
+				const arr = [];
+				const { data } = res;
+				for (const key in data) {
+					arr.push({
+						label: String(data[key]),
+						value: key,
+					});
+				}
+				setSelectOptions(arr);
+			});
+		}
+	}, [http, permissionDialog]);
 
-  const changePermission = (val: any) => {
-    setSelectValue(val);
-  };
-  const onClose = () => {
-    setPermissionDialog({ isShow: false, username: "" });
-  };
-  const onConfirm = () => {
-    const projectInfo = toJS(currentProjectStore?.currentProjectInfo);
-    http
-      .put<IResponse<any>>(
-        `/cpp/project/updateuserrole?id=${projectInfo?.id || ""}&username=${
-          permissionDialog.username
-        }&role=${selectValue?.value}`
-      )
-      .then((res) => {
-        const { errorCode } = res;
-        if (errorCode === 0) {
-          Message.success("更改成功！");
-          getTableList();
-          setPermissionDialog({ isShow: false, username: "" });
-        }
-      });
-  };
+	const changePermission = (val: any) => {
+		setSelectValue(val);
+	};
+	const onClose = () => {
+		setPermissionDialog({ isShow: false, username: "" });
+	};
+	const onConfirm = () => {
+		const projectInfo = toJS(currentProjectStore?.currentProjectInfo);
+		http
+			.put<IResponse<any>>(
+				`/cpp/project/updateuserrole?id=${projectInfo?.id || ""}&username=${
+					permissionDialog.username
+				}&role=${selectValue?.value}`
+			)
+			.then((res) => {
+				const { errorCode } = res;
+				if (errorCode === 0) {
+					Message.success("更改成功！");
+					getTableList();
+					setPermissionDialog({ isShow: false, username: "" });
+				}
+			});
+	};
 
-  useEffect(() => {
-    const defaultValue = selectOptions.filter(
-      (every) => every.value === permissionDialog?.projectRole
-    );
-    if (defaultValue?.length) {
-      setSelectValue(defaultValue[0]);
-    } else {
-      setSelectValue({ value: "VIEWER", label: "查看者" });
-    }
-  }, [permissionDialog, selectOptions]);
-  return (
-    <>
-      <Dialog
-        open={permissionDialog?.isShow}
-        onClose={onClose}
-        onConfirm={onConfirm}
-        title="更改权限"
-      >
-        <div style={{ marginTop: 12 }}>
-          <MySelect
-            title="项目权限"
-            value={selectValue}
-            onChange={changePermission}
-            options={selectOptions}
-            size="small"
-          />
-        </div>
-      </Dialog>
-    </>
-  );
+	useEffect(() => {
+		const defaultValue = selectOptions.filter(
+			(every) => every.value === permissionDialog?.projectRole
+		);
+		if (defaultValue?.length) {
+			setSelectValue(defaultValue[0]);
+		} else {
+			setSelectValue({ value: "VIEWER", label: "查看者" });
+		}
+	}, [permissionDialog, selectOptions]);
+	return (
+		<>
+			<Dialog
+				open={permissionDialog?.isShow}
+				onClose={onClose}
+				onConfirm={onConfirm}
+				title="更改权限"
+			>
+				<div style={{ marginTop: 12 }}>
+					<MySelect
+						title="项目权限"
+						value={selectValue}
+						onChange={changePermission}
+						options={selectOptions}
+						size="small"
+					/>
+				</div>
+			</Dialog>
+		</>
+	);
 });
 
 export default memo(ChangePermission);

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";
@@ -18,39 +18,39 @@ import BaseInfo from "./BaseInfo";
 import Tabs from "@/components/mui/Tabs";
 
 const ProjectSetting = observer(() => {
-  const { currentProjectStore } = useStores();
-  const tabList = useMemo(() => {
-    return [
-      {
-        label: "项目成员",
-        value: "projectMember",
-        component: <ProjectMembers />,
-      },
-      {
-        label: "基础信息",
-        value: "baseInfo",
-        component: <BaseInfo />,
-      },
-    ];
-  }, []);
+	const { currentProjectStore } = useStores();
+	const tabList = useMemo(() => {
+		return [
+			{
+				label: "项目成员",
+				value: "projectMember",
+				component: <ProjectMembers />,
+			},
+			{
+				label: "基础信息",
+				value: "baseInfo",
+				component: <BaseInfo />,
+			},
+		];
+	}, []);
 
-  if (currentProjectStore.currentProjectInfo.name) {
-    return (
-      <div style={{ padding: 24 }}>
-        <div style={{ display: "flex", alignItems: "center" }}>
-          <img src={projectImg} alt="项目logo" />
-          <span style={{ marginLeft: 12 }}>
-            {currentProjectStore.currentProjectInfo.name}
-          </span>
-        </div>
-        <Box sx={{ width: "100%", typography: "body1" }}>
-          <Tabs  tabList={tabList} />
-        </Box>
-      </div>
-    );
-  } else {
-    return <NoProject />;
-  }
+	if (currentProjectStore.currentProjectInfo.name) {
+		return (
+			<div style={{ padding: 24 }}>
+				<div style={{ display: "flex", alignItems: "center" }}>
+					<img src={projectImg} alt="项目logo" />
+					<span style={{ marginLeft: 12 }}>
+						{currentProjectStore.currentProjectInfo.name}
+					</span>
+				</div>
+				<Box sx={{ width: "100%", typography: "body1" }}>
+					<Tabs tabList={tabList} />
+				</Box>
+			</div>
+		);
+	} else {
+		return <NoProject />;
+	}
 });
 
 export default memo(ProjectSetting);

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;
+	const { openDialog, closeDialog, onConfirm, text, title } = props;
 
-    return (
-        < >
-            <Dialog
-                open={openDialog}
-                onClose={closeDialog}
-                onConfirm={onConfirm}
-                title={title}
-            >
-                <Box>
-                    <Typography sx={{ fontSize: '14px', fontWeight: '400' }}>{text}</Typography>
-                </Box>
-            </Dialog>
-        </>
-    );
+	return (
+		<>
+			<Dialog
+				open={openDialog}
+				onClose={closeDialog}
+				onConfirm={onConfirm}
+				title={title}
+			>
+				<Box>
+					<Typography sx={{ fontSize: "14px", fontWeight: "400" }}>
+						{text}
+					</Typography>
+				</Box>
+			</Dialog>
+		</>
+	);
 };
 
 export default memo(SimpleDialog);

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'
@@ -32,38 +34,38 @@ import jobDel from '../../../../assets/project/jobDel.svg'
 import noData from '../../../../assets/project/noTemplate.svg'
 import onload from '../../../../assets/project/onload.svg'
 import {
-    getWorkflowJobList,
-    deleteWorkflowJob,
-    cancelWorkflowJob
+	getWorkflowJobList,
+	deleteWorkflowJob,
+	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: 'RUNNING',
-        label: '正在运行',
-    },
-    {
-        value: 'SUCCEEDED',
-        label: '运行成功',
-    },
-    {
-        value: 'FAILED',
-        label: '运行失败',
-    },
-    {
-        value: 'ABORTED',
-        label: '运行终止',
-    },
+	{
+		value: "ALL",
+		label: "全部",
+	},
+	{
+		value: "RUNNING",
+		label: "正在运行",
+	},
+	{
+		value: "SUCCEEDED",
+		label: "运行成功",
+	},
+	{
+		value: "FAILED",
+		label: "运行失败",
+	},
+	{
+		value: "ABORTED",
+		label: "运行终止",
+	},
 ];
 
 let timer: string | number | NodeJS.Timeout | null | undefined = null
@@ -134,27 +136,37 @@ const ProjectMembers = observer(() => {
         setJobName(data.length > 30 ? data.slice(0, 30) : data);
     }
 
-    const handleChange = (event: any) => {
-        setCurrency(event.target.value);
-    };
-
-    /** 关闭弹窗 */
-    const closeDialog = () => {
-        setOpenDialog(false);
-    };
-
-    /** 弹窗确认 */
-    const onConfirm = () => {
-        if (dialogType === "del") {
-            delWorkflowJob({
-                id: jobData
-            })
-        } else {
-            cancelWorkflowJobInfo({
-                jobid: jobData
-            })
-        }
-    };
+	// 删除作业
+	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({
@@ -166,85 +178,76 @@ const ProjectMembers = observer(() => {
         });
     }, [projectId, getWorkflowJobInfo]);
 
-    const handleChangePage = (event: any, newPage: any) => {
-        setPage(newPage)
-        getWorkflowJobInfo({
-            projectId: currentProjectStore.currentProjectInfo.id as string,
-            page: newPage,
-            size: size,
-            name: jobName,
-            state: currency === 'ALL' ? "" : currency
-        });
-    }
-
-    const handleChangeRowsPerPage = (event: any) => {
-        setRowsPerPage(event.target.value)
-        setSize(event.target.value)
-        getWorkflowJobInfo({
-            projectId: currentProjectStore.currentProjectInfo.id as string,
-            page: page,
-            size: event.target.value,
-            name: jobName,
-            state: currency === 'ALL' ? "" : currency
-        });
-    }
-
-    useEffect(() => {
-        setTimeout(() => {
-            getWorkflowJobInfo({
-                projectId: currentProjectStore.currentProjectInfo.id as string,
-                page: page,
-                size: size,
-                name: jobName,
-                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'
-        }
-    }
+	/** 关闭弹窗 */
+	const closeDialog = () => {
+		setOpenDialog(false);
+	};
+
+	/** 弹窗确认 */
+	const onConfirm = () => {
+		if (dialogType === "del") {
+			delWorkflowJob({
+				id: jobData,
+			});
+		} else {
+			cancelWorkflowJobInfo({
+				jobid: jobData,
+			});
+		}
+	};
+
+	useEffect(() => {
+		getWorkflowJobInfo({
+			projectId: projectId as string,
+			page: page,
+			size: size,
+			name: jobName,
+			state: currency === "ALL" ? "" : currency,
+		});
+	}, [
+		currentProjectStore.currentProjectInfo.id,
+		getWorkflowJobInfo,
+		projectId,
+		page,
+		size,
+		jobName,
+		currency,
+	]);
+
+	const handleChangePage = (event: any, newPage: any) => {
+		setPage(newPage);
+		getWorkflowJobInfo({
+			projectId: projectId as string,
+			page: newPage,
+			size: size,
+			name: jobName,
+			state: currency === "ALL" ? "" : currency,
+		});
+	};
+
+	const handleChangeRowsPerPage = (event: any) => {
+		setRowsPerPage(event.target.value);
+		setSize(event.target.value);
+		getWorkflowJobInfo({
+			projectId: projectId as string,
+			page: page,
+			size: event.target.value,
+			name: jobName,
+			state: currency === "ALL" ? "" : currency,
+		});
+	};
+
+	useEffect(() => {
+		setTimeout(() => {
+			getWorkflowJobInfo({
+				projectId: projectId as string,
+				page: page,
+				size: size,
+				name: jobName,
+				state: currency === "ALL" ? "" : currency,
+			});
+		}, 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,25 +430,36 @@ const ProjectMembers = observer(() => {
                 }
             </Box>
 
-            <TablePagination
-                rowsPerPageOptions={[5, 10, 20, 50]}
-                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}
-            />
+								<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={"每页行数："}
+				ActionsComponent={ActionsComponent}
+				component="div"
+				count={count || jobList.length}
+				rowsPerPage={rowsPerPage || 10}
+				page={page}
+				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;
+	const { openDialog, closeDialog, onConfirm, text, title } = props;
 
-    return (
-        < >
-            <Dialog
-                open={openDialog}
-                onClose={closeDialog}
-                onConfirm={onConfirm}
-                title={title}
-            >
-                <Box>
-                    <Typography sx={{ fontSize: '14px', fontWeight: '400' }}>{text}</Typography>
-                </Box>
-            </Dialog>
-        </>
-    );
+	return (
+		<>
+			<Dialog
+				open={openDialog}
+				onClose={closeDialog}
+				onConfirm={onConfirm}
+				title={title}
+			>
+				<Box>
+					<Typography sx={{ fontSize: "14px", fontWeight: "400" }}>
+						{text}
+					</Typography>
+				</Box>
+			</Dialog>
+		</>
+	);
 };
 
 export default memo(SimpleDialog);

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";
@@ -14,82 +14,82 @@ import usePass from "@/hooks/usePass";
 import { useNavigate } from "react-router-dom";
 
 const TemplateBox = (props: any) => {
-  const info = props.data;
-  const isPass = usePass();
-  const navigate = useNavigate();
+	const info = props.data;
+	const isPass = usePass();
+	const navigate = useNavigate();
 
-  const addTemplateBlock = useCallback(
-    (id: string) => {
-      navigate(`/product/cadd/projectSubmitWork`, {
-        state: { id },
-      });
-    },
-    [navigate]
-  );
+	const addTemplateBlock = useCallback(
+		(id: string) => {
+			navigate(`/product/cadd/projectSubmitWork`, {
+				state: { id },
+			});
+		},
+		[navigate]
+	);
 
-  return (
-    <Box className={styles.templateBlock}>
-      <Box>
-        <Typography
-          sx={{
-            fontSize: "14px",
-            fontWeight: "600",
-            color: "#1E2633",
-            marginBottom: "4px",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-          }}
-        >
-          {info.title}
-        </Typography>
-        <Box sx={{ display: "flex", marginBottom: "8px" }}>
-          <Typography
-            sx={{
-              fontSize: "12px",
-              fontWeight: "400",
-              color: "#1370FF",
-              marginRight: "24px",
-            }}
-          >
-            版本：{info.version}
-          </Typography>
-          <Typography
-            sx={{ fontSize: "12px", fontWeight: "400", color: "#1370FF" }}
-          >
-            更新时间：{info.updateTime}
-          </Typography>
-        </Box>
-        <Typography className={styles.templateDescText}>
-          {info.description}
-        </Typography>
-      </Box>
-      <Box
-        sx={{
-          display: "flex",
-          justifyContent: "end",
-        }}
-      >
-        {isPass("PROJECT_WORKBENCH_FLOES_USE", "MANAGER") && (
-          <Button
-            size={"small"}
-            text={"删除模版"}
-            click={() => {
-              props.startDialog(info.id);
-            }}
-            style={{ backgroundColor: "#F0F2F5", color: "#565C66" }}
-          />
-        )}
-        {isPass("PROJECT_WORKBENCH_FLOES_USE", "USER") && (
-          <Button
-            size={"small"}
-            text={"使用模版"}
-            click={() => addTemplateBlock(info.id)}
-            style={{ marginLeft: "12px" }}
-          />
-        )}
-      </Box>
-    </Box>
-  );
+	return (
+		<Box className={styles.templateBlock}>
+			<Box>
+				<Typography
+					sx={{
+						fontSize: "14px",
+						fontWeight: "600",
+						color: "#1E2633",
+						marginBottom: "4px",
+						overflow: "hidden",
+						textOverflow: "ellipsis",
+					}}
+				>
+					{info.title}
+				</Typography>
+				<Box sx={{ display: "flex", marginBottom: "8px" }}>
+					<Typography
+						sx={{
+							fontSize: "12px",
+							fontWeight: "400",
+							color: "#1370FF",
+							marginRight: "24px",
+						}}
+					>
+						版本：{info.version}
+					</Typography>
+					<Typography
+						sx={{ fontSize: "12px", fontWeight: "400", color: "#1370FF" }}
+					>
+						更新时间：{info.updateTime}
+					</Typography>
+				</Box>
+				<Typography className={styles.templateDescText}>
+					{info.description}
+				</Typography>
+			</Box>
+			<Box
+				sx={{
+					display: "flex",
+					justifyContent: "end",
+				}}
+			>
+				{isPass("PROJECT_WORKBENCH_FLOES_USE", "MANAGER") && (
+					<Button
+						size={"small"}
+						text={"删除模版"}
+						click={() => {
+							props.startDialog(info.id);
+						}}
+						style={{ backgroundColor: "#F0F2F5", color: "#565C66" }}
+					/>
+				)}
+				{isPass("PROJECT_WORKBENCH_FLOES_USE", "USER") && (
+					<Button
+						size={"small"}
+						text={"使用模版"}
+						click={() => addTemplateBlock(info.id)}
+						style={{ marginLeft: "12px" }}
+					/>
+				)}
+			</Box>
+		</Box>
+	);
 };
 
 export default memo(TemplateBox);

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

 .headerBox {
-  margin-bottom: 20px;
+	margin-bottom: 20px;
 }
 
 .removeItemBox {
-  color: #ff4e4e;
-  margin-left: 32px;
-  cursor: pointer;
+	color: #ff4e4e;
+	margin-left: 32px;
+	cursor: pointer;
 }
 
 .tabBox {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 24px;
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 24px;
 }
 
 .templateBlock {
-  width: 21.4876%;
-  height: 160px;
-  background: #FFFFFF;
-  border-radius: 4px;
-  border: 1px solid #EBEDF0;
-  padding: 16px 20px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  margin: 8px;
+	width: 21.4876%;
+	height: 160px;
+	background: #ffffff;
+	border-radius: 4px;
+	border: 1px solid #ebedf0;
+	padding: 16px 20px;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	margin: 8px;
 }
 
 .addTemplateMask {
-  background: rgb(56, 56, 56, 0.7);
-  position: absolute;
-  z-index: 800;
-  top: 0%;
-  left: 0%;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: end;
-  flex-direction: column;
+	background: rgb(56, 56, 56, 0.7);
+	position: absolute;
+	z-index: 800;
+	top: 0%;
+	left: 0%;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: flex-end;
+	flex-direction: column;
 }
 
 .addTemplateBlock {
-  background: #FFFFFF;
-  z-index: 900;
-  border-radius: 16px 0px 0px 0px;
-  height: 100%;
-  width: 100%;
+	background: #ffffff;
+	z-index: 900;
+	border-radius: 16px 0px 0px 0px;
+	height: 100%;
+	width: 100%;
 }
 
 .addTemplateBox {
-  width: 16.8751%;
-  height: 114px;
-  background: #FFFFFF;
-  border-radius: 4px;
-  border: 1px solid #F0F2F5;
-  padding: 16px 20px;
-  margin: 8px;
-  cursor: pointer;
+	width: 16.8751%;
+	height: 114px;
+	background: #ffffff;
+	border-radius: 4px;
+	border: 1px solid #f0f2f5;
+	padding: 16px 20px;
+	margin: 8px;
+	cursor: pointer;
 }
 
 .addTemplateBox:hover {
-  box-shadow: 6px 8px 22px 0px rgba(0, 24, 57, 0.08);
+	box-shadow: 6px 8px 22px 0px rgba(0, 24, 57, 0.08);
 }
 
 .templateDescText {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-  display: -webkit-box;
-  height: 54px;
-  font-size: 12px !important;
-  font-weight: 400 !important;
-  color: #8A9099 !important;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 3;
+	display: -webkit-box;
+	height: 54px;
+	font-size: 12px !important;
+	font-weight: 400 !important;
+	color: #8a9099 !important;
 }
 
 .addNewTemplate {
-  width: 380px;
-  height: 194px;
-  background: #FFFFFF;
-  border-radius: 4px;
-  border: 1px solid #EBEDF0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  cursor: pointer;
-}
+	width: 380px;
+	height: 194px;
+	background: #ffffff;
+	border-radius: 4px;
+	border: 1px solid #ebedf0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+	cursor: pointer;
+}
\ No newline at end of file

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,13 +274,14 @@ const Flow = (props: IProps) => {
 		const val: ILine[] = [];
 		tasks?.length &&
 			tasks.forEach((item) => {
-				item.edges.forEach((every) => {
-					const newLine = {
-						...every,
-						batchId: item.parentNode ? item.parentNode : item.id,
-					};
-					val.push(newLine);
-				}, []);
+				item?.edges?.length &&
+					item?.edges.forEach((every) => {
+						const newLine = {
+							...every,
+							batchId: item.parentNode ? item.parentNode : item.id,
+						};
+						val.push(newLine);
+					}, []);
 			});
 		return val.map((item: ILine) => {
 			const newSelectId = selectedNodeId ? selectedNodeId : inSideNodeId;
@@ -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);
 
+	const [fileSelectOpen, setFileSelectOpen] = useState(false); // 选择输出路径的弹窗显示控制
+
+	const [fileSelectObject, setFileSelectObject] = useState({
+		taskId: "",
+		parameterName: "",
+	});
+
+	const div = document.getElementById("descHeight");
 	useEffect(() => {
-		const div = document.getElementById("descHeight");
 		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,79 +154,198 @@ 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"
-			);
-		}
-	}, [taskInfo]);
+	// // 硬件配置
+	// 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 || "")
+						}
+						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}
-				>
-					埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国
-				</div>
-				<div
-					className={classNames({
-						[styles.taskDescriptionAll]: isShowAllDese,
-						[styles.taskDescription]: !isShowAllDese,
-					})}
-				>
-					埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国
-					{descHeight > 60 && (
-						<span
-							className={styles.descButton}
-							onClick={() => setIsShowAllDese(!isShowAllDese)}
-						>
-							{isShowAllDese ? "收起" : "展开"}
-						</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}
-					>
+					<div className={styles.taskDescriptionHeight} id="descHeight">
 						{taskInfo.description || "-"}
 					</div>
 					<div
@@ -156,12 +366,88 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 					</div>
 				</div>
 			)}
-			{/* {!taskInfo && (
+			{inParameters.length > 0 && (
+				<div className={styles.inOutBox}>
+					<div className={styles.paramsTitle}>
+						输入
+						<Tooltip
+							title="当某个输入项为启用状态时，代表该输入将由模板使用者在使用的时候填写赋值；当为关闭状态时，代表该输入不需要使用者来填写赋值，而是将其它流程的结果传入。"
+							placement="top"
+						>
+							<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.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>
+			)}
+			{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 && (
 				<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";
 import { useEffect } from "react";
 
 const Demo = ({
-  childrenRoutes,
+	childrenRoutes,
 }: {
-  childrenRoutes?: Array<route | operation>;
+	childrenRoutes?: Array<route | operation>;
 }) => {
-  const message = useMessage();
-  const isPass = usePass();
+	const message = useMessage();
+	// const isPass = usePass();
 
-  useEffect(() => {
-    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
-  }, []);
+	useEffect(() => {
+		// 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
+	}, []);
 
-  return (
-    <Box>
-      <Box>{JSON.stringify(childrenRoutes)}</Box>
-      <Box>{JSON.stringify(process.env.NODE_ENV)}</Box>
-      <Button onClick={() => message.success("测试测试")}>message测试</Button>
-    </Box>
-  );
+	return (
+		<Box>
+			<Box>{JSON.stringify(childrenRoutes)}</Box>
+			<Box>{JSON.stringify(process.env.NODE_ENV)}</Box>
+			<Button onClick={() => message.success("测试测试")}>message测试</Button>
+		</Box>
+	);
 };
 
 export default Demo;

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={'确定'} />
-            &nbsp;&nbsp;
-            <Button text={'确定'} />
-            &nbsp;&nbsp;
-            <Button size={"small"} text={'确定'} />
-            <br /><br />
-            <Button size={"large"} text={'确定'} disabled />
-            &nbsp;&nbsp;
-            <Button text={'确定'} disabled />
-            &nbsp;&nbsp;
-            <Button size={"small"} text={'确定'} disabled />
-            <br /><br />
-            <Button size={"large"} color={"secondary"} text={'确定'} />
-            &nbsp;&nbsp;
-            <Button color={"secondary"} text={'确定'} />
-            &nbsp;&nbsp;
-            <Button size={"small"} color={"secondary"} text={'确定'} />
-            <br /> <br />
-            <Button text={'确定'} size={"large"} style={{ color: "aqua", background: "burlywood" }} />
-            &nbsp;&nbsp;
-            <Button text={'确定'} style={{ color: "aqua", background: "burlywood" }} />
-            &nbsp;&nbsp;
-            <Button text={'确定'} size={"small"} style={{ color: "aqua", background: "burlywood" }} />
-            <br /> <br />
-            outlined
-            <br />
-            <Button size={"large"} variant={"outlined"} text={'确定'} />
-            &nbsp;&nbsp;
-            <Button variant={"outlined"} text={'确定'} />
-            &nbsp;&nbsp;
-            <Button size={"small"} variant={"outlined"} text={'确定'} />
-            <br /> <br />
-            <Button size={"large"} variant={"outlined"} disabled text={'确定'} />
-            &nbsp;&nbsp;
-            <Button variant={"outlined"} disabled text={'确定'} />
-            &nbsp;&nbsp;
-            <Button size={"small"} variant={"outlined"} disabled text={'确定'} />
-            <br /> <br />
-            <Button size={"large"} variant={"outlined"} color={"secondary"} text={'确定'} />
-            &nbsp;&nbsp;
-            <Button variant={"outlined"} color={"secondary"} text={'确定'} />
-            &nbsp;&nbsp;
-            <Button size={"small"} variant={"outlined"} color={"secondary"} text={'确定'} />
-            <br /> <br />
-            <Button text={'确定'} size={"large"} variant={"outlined"} style={{ color: "aqua", background: "burlywood" }} />
-            &nbsp;&nbsp;
-            <Button text={'确定'} variant={"outlined"} style={{ color: "aqua", background: "burlywood" }} />
-            &nbsp;&nbsp;
-            <Button text={'确定'} size={"small"} variant={"outlined"} style={{ color: "aqua", background: "burlywood" }} />
-            <br /> <br />
-            text
-            <br />
-            <Button size={"large"} variant={"text"} text={'确定确定确定确定确定确定'} />
-            &nbsp;&nbsp;
-            <Button variant={"text"} text={'确定确定确定确定确定确定'} />
-            &nbsp;&nbsp;
-            <Button size={"small"} variant={"text"} text={'确定确定确定确定确定确定'} />
-            <br />
-            <Button size={"large"} disabled variant={"text"} text={'确定确定确定确定确定确定'} />
-            &nbsp;&nbsp;
-            <Button variant={"text"} disabled text={'确定确定确定确定确定确定'} />
-            &nbsp;&nbsp;
-            <Button size={"small"} disabled variant={"text"} text={'确定确定确定确定确定确定'} />
-            <br />
-            <Button size={"large"} color={"secondary"} variant={"text"} text={'确定确定确定确定确定确定'} />
-            &nbsp;&nbsp;
-            <Button variant={"text"} color={"secondary"} text={'确定确定确定确定确定确定'} />
-            &nbsp;&nbsp;
-            <Button size={"small"} color={"secondary"} variant={"text"} text={'确定确定确定确定确定确定'} />
-            <br /> <br />
-            img
-            <br />
-            <Button text={'确定确定确定确定确定确定'} img={<DeleteIcon />} />
-            <br /> <br />
-            select
-            <br />
-            <Button
-                text={'更多'}
-                select={
-                    [
-                        { name: "1111111" },
-                        { name: "1111111" },
-                        { name: "1111111" },
-                        { name: "1111111", color: "red" },
-                    ]
-                } />
-            <Button
-                text={'更多'}
-                color={"secondary"} variant={"text"}
-                select={
-                    [
-                        { name: "1111111" },
-                        { name: "1111111" },
-                        { name: "1111111" },
-                        { name: "1111111", color: "red" },
-                    ]
-                } />
-
-
-        </>
-    );
+	return (
+		<>
+			<Button size={"large"} text={"确定"} />
+			&nbsp;&nbsp;
+			<Button text={"确定"} />
+			&nbsp;&nbsp;
+			<Button size={"small"} text={"确定"} />
+			<br />
+			<br />
+			<Button size={"large"} text={"确定"} disabled />
+			&nbsp;&nbsp;
+			<Button text={"确定"} disabled />
+			&nbsp;&nbsp;
+			<Button size={"small"} text={"确定"} disabled />
+			<br />
+			<br />
+			<Button size={"large"} color={"secondary"} text={"确定"} />
+			&nbsp;&nbsp;
+			<Button color={"secondary"} text={"确定"} />
+			&nbsp;&nbsp;
+			<Button size={"small"} color={"secondary"} text={"确定"} />
+			<br /> <br />
+			<Button
+				text={"确定"}
+				size={"large"}
+				style={{ color: "aqua", background: "burlywood" }}
+			/>
+			&nbsp;&nbsp;
+			<Button
+				text={"确定"}
+				style={{ color: "aqua", background: "burlywood" }}
+			/>
+			&nbsp;&nbsp;
+			<Button
+				text={"确定"}
+				size={"small"}
+				style={{ color: "aqua", background: "burlywood" }}
+			/>
+			<br /> <br />
+			outlined
+			<br />
+			<Button size={"large"} variant={"outlined"} text={"确定"} />
+			&nbsp;&nbsp;
+			<Button variant={"outlined"} text={"确定"} />
+			&nbsp;&nbsp;
+			<Button size={"small"} variant={"outlined"} text={"确定"} />
+			<br /> <br />
+			<Button size={"large"} variant={"outlined"} disabled text={"确定"} />
+			&nbsp;&nbsp;
+			<Button variant={"outlined"} disabled text={"确定"} />
+			&nbsp;&nbsp;
+			<Button size={"small"} variant={"outlined"} disabled text={"确定"} />
+			<br /> <br />
+			<Button
+				size={"large"}
+				variant={"outlined"}
+				color={"secondary"}
+				text={"确定"}
+			/>
+			&nbsp;&nbsp;
+			<Button variant={"outlined"} color={"secondary"} text={"确定"} />
+			&nbsp;&nbsp;
+			<Button
+				size={"small"}
+				variant={"outlined"}
+				color={"secondary"}
+				text={"确定"}
+			/>
+			<br /> <br />
+			<Button
+				text={"确定"}
+				size={"large"}
+				variant={"outlined"}
+				style={{ color: "aqua", background: "burlywood" }}
+			/>
+			&nbsp;&nbsp;
+			<Button
+				text={"确定"}
+				variant={"outlined"}
+				style={{ color: "aqua", background: "burlywood" }}
+			/>
+			&nbsp;&nbsp;
+			<Button
+				text={"确定"}
+				size={"small"}
+				variant={"outlined"}
+				style={{ color: "aqua", background: "burlywood" }}
+			/>
+			<br /> <br />
+			text
+			<br />
+			<Button
+				size={"large"}
+				variant={"text"}
+				text={"确定确定确定确定确定确定"}
+			/>
+			&nbsp;&nbsp;
+			<Button variant={"text"} text={"确定确定确定确定确定确定"} />
+			&nbsp;&nbsp;
+			<Button
+				size={"small"}
+				variant={"text"}
+				text={"确定确定确定确定确定确定"}
+			/>
+			<br />
+			<Button
+				size={"large"}
+				disabled
+				variant={"text"}
+				text={"确定确定确定确定确定确定"}
+			/>
+			&nbsp;&nbsp;
+			<Button variant={"text"} disabled text={"确定确定确定确定确定确定"} />
+			&nbsp;&nbsp;
+			<Button
+				size={"small"}
+				disabled
+				variant={"text"}
+				text={"确定确定确定确定确定确定"}
+			/>
+			<br />
+			<Button
+				size={"large"}
+				color={"secondary"}
+				variant={"text"}
+				text={"确定确定确定确定确定确定"}
+			/>
+			&nbsp;&nbsp;
+			<Button
+				variant={"text"}
+				color={"secondary"}
+				text={"确定确定确定确定确定确定"}
+			/>
+			&nbsp;&nbsp;
+			<Button
+				size={"small"}
+				color={"secondary"}
+				variant={"text"}
+				text={"确定确定确定确定确定确定"}
+			/>
+			<br /> <br />
+			img
+			<br />
+			<Button text={"确定确定确定确定确定确定"} img={<DeleteIcon />} />
+			<br /> <br />
+			select
+			<br />
+			<Button
+				text={"更多"}
+				select={[
+					{ name: "1111111" },
+					{ name: "1111111" },
+					{ name: "1111111" },
+					{ name: "1111111", color: "red" },
+				]}
+			/>
+			<Button
+				text={"更多"}
+				color={"secondary"}
+				variant={"text"}
+				select={[
+					{ name: "1111111" },
+					{ name: "1111111" },
+					{ name: "1111111" },
+					{ name: "1111111", color: "red" },
+				]}
+			/>
+		</>
+	);
 };
 
 export default memo(ProjectMembers);

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'}
-            />
-            &nbsp;&nbsp;&nbsp;&nbsp;
-            <InputComponent
-                fullWidth={false}
-                label={"test"}
-                error={true}
-                helperText={"你还急急急靠靠靠靠靠靠靠靠靠靠靠靠靠靠"}
-            />&nbsp;&nbsp;&nbsp;&nbsp;
-            <InputComponent
-                fullWidth={false}
-                label={"test"}
-                size={'small'}
-                disabled
-            />&nbsp;&nbsp;&nbsp;&nbsp;
-            <InputComponent
-                fullWidth={false}
-                label={"xsmall"}
-                size={'xsmall'}
-            />&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>} />
-            <br /> <br />
-            <InputComponent
-                fullWidth={true}
-                select={
-                    {
-                        json: [{value:'1',label:"2"},{value:'3',label:"4"}]
-                    }
-                }
-            />
-            <br /><br />
-            {/* <SelectComponent
+	return (
+		<>
+			<InputComponent
+				fullWidth={false}
+				label={"test"}
+				defaultValue={"sssssssss"}
+				size={"large"}
+			/>
+			&nbsp;&nbsp;&nbsp;&nbsp;
+			<InputComponent
+				fullWidth={false}
+				label={"test"}
+				error={true}
+				helperText={"你还急急急靠靠靠靠靠靠靠靠靠靠靠靠靠靠"}
+			/>
+			&nbsp;&nbsp;&nbsp;&nbsp;
+			<InputComponent
+				fullWidth={false}
+				label={"test"}
+				size={"small"}
+				disabled
+			/>
+			&nbsp;&nbsp;&nbsp;&nbsp;
+			<InputComponent fullWidth={false} label={"xsmall"} size={"xsmall"} />
+			&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>
+				}
+			/>
+			<br /> <br />
+			<InputComponent
+				fullWidth={true}
+				select={{
+					json: [
+						{ value: "1", label: "2" },
+						{ value: "3", label: "4" },
+					],
+				}}
+			/>
+			<br />
+			<br />
+			{/* <SelectComponent
                 option={json}
             />
             <br /><br />
@@ -72,10 +69,10 @@ const ProjectMembers = () => {
                 option={json}
                 size={"small"}
             /> */}
-            <br /><br />
-
-        </>
-    );
+			<br />
+			<br />
+		</>
+	);
 };
 
 export default memo(ProjectMembers);