Merge branch 'master' into 'pre'

Master

See merge request !190

src/components/BusinessComponents/ProductSelect/index.tsx

@@ -11,6 +11,7 @@ interface IProductSelectProps {
 	setProductId: any;
 	okText?: string;
 	onConfirm?: any;
+	title?: any;
 }
 
 const ProductSelect = (props: IProductSelectProps) => {
@@ -21,6 +22,7 @@ const ProductSelect = (props: IProductSelectProps) => {
 		okText = "下一步",
 		setOpen,
 		onConfirm,
+		title,
 	} = props;
 	const { productListStore } = useStores();
 
@@ -43,7 +45,7 @@ const ProductSelect = (props: IProductSelectProps) => {
 	return (
 		<MyDialog
 			open={open}
-			title="选择产品"
+			title={title || "选择产品"}
 			okText={okText}
 			onClose={() => setOpen(false)}
 			onConfirm={() => handleConfirm()}

src/components/CommonComponents/VirtuallyTable/index.module.scss

+.VTHeader {
+	font-size: 12px;
+	color: rgba(138, 144, 153, 1);
+	padding: 12px 16px;
+	white-space: nowrap;
+	font-weight: 400;
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+}
+.VTHeaderRow {
+	background-color: rgba(247, 248, 250, 1);
+	box-sizing: border-box;
+	border-radius: 4px 4px 0 0;
+	border-bottom: 1px solid rgba(240, 242, 245, 1);
+}
+.VTRow {
+	background-color: #fff;
+	box-sizing: border-box;
+	border-bottom: 1px solid rgba(240, 242, 245, 1);
+	&:hover {
+		background-color: rgba(245, 246, 247, 1);
+	}
+}
+.VTActiveRow {
+	@extend .VTRow;
+	background-color: rgba(237, 244, 255, 1);
+}
+.VTRowColumn {
+	text-align: left;
+	box-sizing: border-box;
+	font-size: 14px;
+	line-height: 22px;
+	color: rgba(30, 38, 51, 1);
+	padding: 16px;
+}

src/components/CommonComponents/VirtuallyTable/index.tsx

+import React from "react";
+import { useCallback, useEffect, useState, useRef } from "react";
+import { Column, Table } from "react-virtualized";
+import style from "./index.module.scss";
+import "react-virtualized/styles.css"; // only needs to be imported once
+import Checkbox from "@mui/material/Checkbox";
+import MyCircularProgress from "@/components/mui/MyCircularProgress";
+import { createTheme, ThemeProvider } from "@mui/material";
+import NoData from "@/components/BusinessComponents/NoData";
+import ascIcon from "@/assets/project/ascIcon.svg";
+import descIcon from "@/assets/project/descIcon.svg";
+import sortIcon from "@/assets/project/sort.svg";
+
+type Order = "ASC" | "DESC"; // 升序为asc，降序为desc。
+
+export type sortState = {
+	field: string | null | undefined | ""; // 根据哪个属性来排序
+	order: Order | null | undefined | "";
+};
+
+interface IVirtuallyTableProps {
+	rows: Array<any>; // 表格数据
+	headCells: Array<any>; // 表头配置
+	tableKey?: string; // 表格数据的key
+	loading?: boolean; // 是否正在加载数据
+	hasCheckbox?: boolean; // 是否有复选框
+	selectItems?: Array<any>; // 选中的项
+	setSelectItems?: any; // 设置选中的项
+	noDataText?: string; // 无数据提示文案
+	sortState?: sortState; // 排序状态
+	setSortState?: any; // 设置排序状态
+	nodataText?: any; // 无数据文案
+	handleRow?: any; // 点击一行
+	activeId?: string; // 选中的一行的id
+	disableFn?: any; // 禁用时根据disableFn来判断是否禁用
+	headerHeight?: number; // 表头高度
+}
+
+const theme = createTheme({
+	components: {
+		// 复选框样式
+		MuiSvgIcon: {
+			styleOverrides: {
+				root: {
+					color: "rgba(209, 214, 222, 1)",
+					fontSize: "18px",
+				},
+			},
+		},
+		MuiCheckbox: {
+			styleOverrides: {
+				root: {
+					color: "rgba(209, 214, 222, 1)",
+					"&.MuiCheckbox-indeterminate .MuiSvgIcon-root": {
+						color: "rgba(19, 112, 255, 1)",
+					},
+					"&.Mui-checked .MuiSvgIcon-root": {
+						color: "rgba(19, 112, 255, 1)",
+					},
+				},
+			},
+		},
+		MuiButtonBase: {
+			styleOverrides: {
+				root: {
+					"&.MuiCheckbox-root": {
+						padding: 0,
+					},
+				},
+			},
+		},
+	},
+});
+
+const VirtuallyTable = (props: IVirtuallyTableProps) => {
+	const {
+		rows,
+		headCells,
+		tableKey = "id",
+		loading = false,
+		hasCheckbox = false,
+		selectItems = [],
+		setSelectItems,
+		sortState,
+		setSortState,
+		nodataText,
+		handleRow,
+		activeId,
+		disableFn,
+		headerHeight = 59,
+	} = props;
+
+	const virtuallyTableBoxRef: any = useRef(null);
+	const virtuallyTableRef: any = useRef(null);
+
+	const [width, setWidth] = useState(0);
+	const [height, setHeight] = useState(0);
+
+	const getTableWidthHeight = () => {
+		setWidth(virtuallyTableBoxRef?.current?.offsetWidth || 1000);
+		setHeight(virtuallyTableBoxRef?.current?.offsetHeight || 300);
+	};
+
+	useEffect(() => {
+		getTableWidthHeight();
+	}, []);
+
+	window.onresize = () => {
+		getTableWidthHeight();
+	};
+
+	const onSelectAllClick = useCallback(
+		(e: any) => {
+			if (e.target.checked) {
+				setSelectItems && setSelectItems(rows.map((row) => row[tableKey]));
+			} else {
+				setSelectItems && setSelectItems([]);
+			}
+		},
+		[setSelectItems, tableKey, rows]
+	);
+
+	const onSelectRowClick = useCallback(
+		(e: any, itemValue: string) => {
+			if (e.target.checked) {
+				setSelectItems && setSelectItems([...selectItems, itemValue]);
+			} else {
+				const selectItemIndex = selectItems.indexOf(itemValue);
+				const newSelectItems = [
+					...selectItems.slice(0, selectItemIndex),
+					...selectItems.slice(selectItemIndex + 1, selectItems.length),
+				];
+				setSelectItems && setSelectItems(newSelectItems);
+			}
+		},
+		[selectItems, setSelectItems]
+	);
+
+	const handleSort = useCallback(
+		(field: string) => {
+			if (sortState?.field === field) {
+				if (sortState?.order === "ASC") {
+					setSortState({
+						field,
+						order: "DESC",
+					});
+				} else if (sortState?.order === "DESC") {
+					setSortState({
+						field,
+						order: "ASC",
+					});
+				} else {
+					setSortState({
+						field,
+						order: "DESC",
+					});
+				}
+			} else {
+				setSortState({
+					field,
+					order: "DESC",
+				});
+			}
+		},
+		[sortState, setSortState]
+	);
+
+	const handleRowFn = useCallback(
+		(row: any) => {
+			if (!disableFn) {
+				handleRow && handleRow(row);
+			} else {
+				!disableFn(row) && handleRow && handleRow(row);
+			}
+		},
+		[disableFn, handleRow]
+	);
+
+	return (
+		<ThemeProvider theme={theme}>
+			<div
+				ref={virtuallyTableBoxRef}
+				style={{ width: "100%", height: "100%", position: "relative" }}
+			>
+				<MyCircularProgress loading={loading} />
+				{width && height && (
+					<Table
+						ref={virtuallyTableRef}
+						width={width}
+						height={height}
+						headerHeight={headerHeight}
+						rowHeight={54}
+						rowCount={rows.length}
+						rowGetter={({ index }: any) => rows[index]}
+						headerClassName={style.VTHeader}
+						onRowClick={(data: any) => {
+							handleRowFn(data.rowData);
+						}}
+						rowClassName={({ index }: any) => {
+							if (index < 0) {
+								return style.VTHeaderRow;
+							} else {
+								if (rows[index][tableKey] === activeId) {
+									return style.VTActiveRow;
+								} else {
+									return style.VTRow;
+								}
+							}
+						}}
+						rowStyle={({ index }: any) => {
+							if (index !== -1) {
+								return {
+									background:
+										activeId === rows[index][tableKey]
+											? "rgba(237, 244, 255, 1)"
+											: "",
+									cursor: disableFn && disableFn(rows[index]) ? "no-drop" : "",
+									opacity: disableFn && disableFn(rows[index]) ? "0.3" : "",
+								};
+							}
+						}}
+					>
+						{hasCheckbox && (
+							<Column
+								dataKey="checkbox"
+								headerRenderer={() => {
+									return (
+										<Checkbox
+											indeterminate={
+												selectItems.length > 0 &&
+												selectItems.length < rows.length
+											}
+											checked={
+												rows.length > 0 && selectItems.length === rows.length
+											}
+											onChange={(e) => onSelectAllClick(e)}
+										/>
+									);
+								}}
+								headerStyle={{ margin: 0 }}
+								style={{ margin: 0 }}
+								width={50}
+								cellRenderer={(data: any) => {
+									return (
+										<Checkbox
+											checked={
+												selectItems.filter(
+													(selectItem) => selectItem === data.rowData[tableKey]
+												).length > 0
+											}
+											onChange={(e) =>
+												onSelectRowClick(e, data.rowData[tableKey])
+											}
+										/>
+									);
+								}}
+								className={style.VTRowColumn}
+							/>
+						)}
+						{headCells.map((headCell) => {
+							return (
+								<Column
+									key={headCell.id}
+									// label={headCell.label}
+									headerRenderer={(data: any) => {
+										if (headCell.sort) {
+											return (
+												<div>
+													<span>{headCell.label}</span>
+													<img
+														src={
+															sortState?.field === headCell.id
+																? sortState?.order === "ASC"
+																	? ascIcon
+																	: sortState?.order === "DESC"
+																	? descIcon
+																	: sortIcon
+																: sortIcon
+														}
+														alt=""
+														onClick={() => handleSort(headCell.id)}
+														style={{
+															marginLeft: "8px",
+															cursor: "pointer",
+															position: "relative",
+															top: "3px",
+														}}
+													/>
+												</div>
+											);
+										} else {
+											return headCell.label;
+										}
+									}}
+									dataKey={headCell.id}
+									width={headCell.width}
+									flexGrow={headCell.flexGrow || 0}
+									cellRenderer={
+										headCell.cellRenderer
+											? headCell.cellRenderer
+											: (data: any) => {
+													return data.cellData;
+											  }
+									}
+									className={style.VTRowColumn}
+								/>
+							);
+						})}
+					</Table>
+				)}
+				{rows.length === 0 && (
+					<NoData
+						text={nodataText}
+						noDataBoxStyle={{
+							position: "absolute",
+							bottom: 0,
+							width: `${width}px`,
+							height: `${height - headerHeight}px`,
+						}}
+					/>
+				)}
+			</div>
+		</ThemeProvider>
+	);
+};
+
+export default VirtuallyTable;

src/components/mui/MyDialog.tsx

@@ -133,7 +133,7 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
 					) : null}
 					{showConfirm ? (
 						<MyButton
-							text={okText || "确定"}
+							text={okText || "确认"}
 							onClick={onConfirm}
 							variant="contained"
 							color={okColor}

src/components/mui/MySelect.tsx

@@ -182,10 +182,14 @@ export default function MySelect(props: IProps) {
 				styleOverrides: {
 					root: {
 						boxShadow: "0px 3px 10px 0px rgba(0,24,57,0.14)",
+						"&.MuiPopover-paper": {
+							maxHeight: "300px",
+						},
 					},
 				},
 			},
 
+			// .css-kdgfg8-MuiPaper-root-MuiMenu-paper-MuiPaper-root-MuiPopover-paper
 			// MuiFormControl: {
 			// 	styleOverrides: {
 			// 		root: {

src/components/mui/MyTabs/index.module.css

@@ -6,8 +6,9 @@
 	color: #1e2633;
 	line-height: 48px;
 }
-.titleBox::after {
-	content: "|";
-	padding: 0 24px;
-	color: #dde1e6;
+.titleBoxLine {
+	width: 1px;
+	height: 20px;
+	background-color: rgba(221, 225, 230, 1);
+	margin: 0 24px;
 }

src/components/mui/MyTabs/index.tsx

@@ -80,6 +80,9 @@ const theme = createTheme({
 				indicator: {
 					backgroundColor: "#1370FF",
 				},
+				flexContainer: {
+					alignItems: "center",
+				},
 			},
 		},
 		MuiButtonBase: {
@@ -191,6 +194,7 @@ const Tabs = (props: IProps) => {
 								{title}
 							</span>
 						) : null}
+						{title ? <div className={styles.titleBoxLine}></div> : null}
 						{tabList
 							?.filter((item) => !item.hide)
 							.map((item, key) => {

src/views/CustomOperator/components/SaveOperator/index.tsx

@@ -15,6 +15,7 @@ interface IProps {
 	setSaveFormDialog: (val: boolean) => void;
 	operatorList: ITask[];
 	setShowCustomOperator: any;
+	productId?: string;
 }
 const SaveOperator = (props: IProps) => {
 	const {
@@ -22,10 +23,11 @@ const SaveOperator = (props: IProps) => {
 		setSaveFormDialog,
 		operatorList,
 		setShowCustomOperator,
+		productId: propsProductId
 	} = props;
 	const { currentProjectStore } = useStores();
 	const Message = useMessage();
-	const productId = toJS(currentProjectStore.currentProductInfo.id);
+	const productId = propsProductId || toJS(currentProjectStore.currentProductInfo.id);
 	const [title, setTitle] = useState("");
 	const [version, setVersion] = useState("1.0.0");
 	const [description, setDescription] = useState("");
@@ -165,7 +167,7 @@ const SaveOperator = (props: IProps) => {
 					helperText={versionHelper.helperText}
 					style={{ marginBottom: "20px" }}
 				></MyInput>
-				<div style={{ position: "relative" }}>
+				<div style={{ position: "relative", paddingBottom: "20px" }}>
 					<MyInput
 						value={description}
 						id="desc"

src/views/CustomOperator/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-10-24 17:32:00
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-24 19:42:23
+ * @LastEditTime: 2022-11-03 11:54:52
  * @FilePath: /bkunyun/src/views/CustomOperator/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -61,6 +61,7 @@ const CustomOperator = observer((props: IProps) => {
 						setSaveFormDialog={setSaveFormDialog}
 						operatorList={operatorList}
 						setShowCustomOperator={setShowCustomOperator}
+						productId={productId}
 					></SaveOperator>
 				</div>
 				<div className={styles.coContent} id="customOperatorFlow">

src/views/Project/ProjectData/index.module.css

@@ -11,7 +11,7 @@
 	box-sizing: border-box;
 }
 .projectDataStickyTopPadding {
-	padding: 22px 24px 24px;
+	padding: 22px 24px 64px;
 }
 .projectDataTitle {
 	font-size: 18px;
@@ -26,7 +26,7 @@
 
 .tableBox {
 	/* flex: 1; */
-	height: calc(100% - 146px);
+	height: calc(100% - 140px);
 }
 .projectDataButtonAndSearch {
 	display: flex;

src/views/Project/ProjectData/index.tsx

@@ -271,18 +271,6 @@ const ProjectData = observer(() => {
 		}
 	};
 
-	// table配置
-	const versionsHeadCells = [
-		{ id: "name", label: "名称" },
-		{ id: "size", label: "大小", width: 200 },
-		{
-			id: "mtime",
-			label: "创建时间",
-			width: 200,
-		},
-		{ id: "caozuo", label: "操作", width: 200 },
-	];
-
 	// 文件夹下钻
 	const handleViewFolders = (item: any) => {
 		if (debounce) {
@@ -304,52 +292,54 @@ const ProjectData = observer(() => {
 	};
 
 	// table配置
-	const renderName = (item: any) => {
-		if (item.type === "directory") {
+	const renderName = (data: any) => {
+		if (data.rowData.type === "directory") {
 			return (
 				<span
 					className={classnames({
 						[style.folderIconBox]: true,
 						[style.pointer]: true,
 					})}
-					onClick={() => handleViewFolders(item)}
+					onClick={() => handleViewFolders(data.rowData)}
 				>
 					<img className={style.folderIcon} src={folderIcon} alt="" />
-					{item.name}
+					{data.rowData.name}
 				</span>
 			);
-		} else if (item.type === "dataSet") {
+		} else if (data.rowData.type === "dataSet") {
 			return (
 				<span
 					className={classnames({
 						[style.folderIconBox]: true,
 						[style.pointer]: true,
 					})}
-					onClick={() => handleSeeDataset(item)}
+					onClick={() => handleSeeDataset(data.rowData)}
 				>
 					<img className={style.folderIcon} src={dataSetIcon} alt="" />
-					{item.name}
+					{data.rowData.name}
 				</span>
 			);
 		} else {
 			return (
 				<span className={style.folderIconBox}>
 					<img className={style.folderIcon} src={fileIcon} alt="" />
-					{item.name}
+					{data.rowData.name}
 				</span>
 			);
 		}
 	};
-	const renderSize = (item: any) => {
-		if (item.type === "dataSet") {
-			return `${item.size}条`;
+	const renderSize = (data: any) => {
+		if (data.rowData.type === "dataSet") {
+			return `${data.rowData.size}条`;
 		}
-		return `${item.size ? storageUnitFromB(Number(item.size)) : "-"}`;
+		return `${
+			data.rowData.size ? storageUnitFromB(Number(data.rowData.size)) : "-"
+		}`;
 	};
-	const renderMtime = (item: any) => {
-		return String(moment(item.mtime).format("YYYY-MM-DD HH:mm:ss"));
+	const renderMtime = (data: any) => {
+		return String(moment(data.rowData.mtime).format("YYYY-MM-DD HH:mm:ss"));
 	};
-	const renderButtons = (item: any) => {
+	const renderButtons = (data: any) => {
 		return (
 			<span style={{ whiteSpace: "nowrap" }}>
 				{!isAllDirectory && (
@@ -362,14 +352,15 @@ const ProjectData = observer(() => {
 							height: "22px",
 							padding: "0 10px",
 							visibility:
-								item.type !== "dataSet" && item.type !== "directory"
+								data.rowData.type !== "dataSet" &&
+								data.rowData.type !== "directory"
 									? "visible"
 									: "hidden",
 						}}
 						variant="text"
 						size="medium"
 						disabled={selectIds.length > 0 || !isPass("PROJECT_DATA_DOWNLOAD")}
-						onClick={() => hanleDownloadFile(item)}
+						onClick={() => hanleDownloadFile(data.rowData)}
 					/>
 				)}
 				<MyButton
@@ -384,7 +375,7 @@ const ProjectData = observer(() => {
 					variant="text"
 					size="medium"
 					onClick={() => {
-						setCurrentOperateFile(item);
+						setCurrentOperateFile(data.rowData);
 						setMoveDialogOpen(true);
 					}}
 					disabled={
@@ -405,7 +396,7 @@ const ProjectData = observer(() => {
 					size="medium"
 					color="error"
 					onClick={() => {
-						setCurrentOperateFile(item);
+						setCurrentOperateFile(data.rowData);
 						setDeleteDialogOpen(true);
 					}}
 					disabled={
@@ -416,6 +407,25 @@ const ProjectData = observer(() => {
 		);
 	};
 
+	// table配置
+	const versionsHeadCells = [
+		{
+			id: "name",
+			label: "名称",
+			width: 200,
+			flexGrow: 2,
+			cellRenderer: renderName,
+		},
+		{ id: "size", label: "大小", width: 200, cellRenderer: renderSize },
+		{
+			id: "mtime",
+			label: "创建时间",
+			width: 200,
+			cellRenderer: renderMtime,
+		},
+		{ id: "caozuo", label: "操作", width: 200, cellRenderer: renderButtons },
+	];
+
 	// 下载文件
 	const hanleDownloadFile = (item: any) => {
 		const downloadPath =
@@ -590,18 +600,13 @@ const ProjectData = observer(() => {
 					</div>
 					<div className={style.tableBox}>
 						<MyTable
+							isVirtuallyTable={true}
 							fixedHead={true}
 							hasCheckbox={showCheckBox}
 							headCells={versionsHeadCells}
 							selectItems={selectIds}
 							setSelectItems={setSelectIds}
-							rows={showList.map((item: any, index: number) => ({
-								...item,
-								name: renderName(item),
-								size: renderSize(item),
-								mtime: renderMtime(item),
-								caozuo: renderButtons(item),
-							}))}
+							rows={showList}
 						/>
 					</div>
 				</div>

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

@@ -174,7 +174,7 @@ const AddMember = observer((props: IProps) => {
 								setProjectMember(e.target.value);
 							}
 						}}
-						placeholder="搜索项目成员"
+						placeholder="按回车搜索项目成员"
 						sx={{ mb: 2 }}
 					/>
 					<div style={{ height: "320px" }}>

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

@@ -234,7 +234,7 @@ const AddTemplate = (props: IAddTemplateProps) => {
 								setTitle(e.target.value);
 							}}
 							onKeyUp={handleKeyWordChangeKeyUp}
-							placeholder="输入关键词搜索"
+							placeholder="输入关键词按回车搜索"
 							size="small"
 							sx={{ width: 340, height: 32 }}
 							endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}

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

@@ -208,7 +208,7 @@ const AddProject = observer((props: IAddProjectProps) => {
 							</MenuItem>
 						))}
 				</MyInput>
-				<div style={{ position: "relative" }}>
+				<div style={{ position: "relative", paddingBottom: "20px" }}>
 					<MyInput
 						value={desc}
 						error={descCheck.error}

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

@@ -270,14 +270,14 @@ const Flow = (props: IProps) => {
 				return a - b;
 			});
 			let width = 176,
-				height = 66;
+				height = 12;
 			if (positionXArr?.length) {
 				const val = positionXArr[positionXArr.length - 1] + 144;
 				width = val > 176 ? val : width;
 			}
 			if (positionYArr?.length) {
 				const val = positionYArr[positionYArr.length - 1] + 74;
-				height = val > 66 ? val : height;
+				height = val > 12 ? val : height;
 			}
 			return {
 				width,

src/views/ResourceCenter/UserResources/UserResourcesEnvironment/AddEnvironment/index.tsx

@@ -545,6 +545,7 @@ const AddEnvironment = (props: IAddEnvironmentProps) => {
 					<MyButton
 						text="开始构建"
 						onClick={() => handleSubmit()}
+						isLoadingButton={true}
 						loading={loading}
 					></MyButton>
 				</div>

src/views/ResourceCenter/UserResources/UserResourcesEnvironment/index.tsx

@@ -128,7 +128,7 @@ const UserResourcesEnvironment = () => {
 	};
 
 	const renderCreatedTime = (item: any) => {
-		return moment(new Date(item.createdTime)).format("yyyy-MM-DD hh:mm:ss");
+		return moment(new Date(item.createdTime)).format("yyyy-MM-DD HH:mm:ss");
 	};
 
 	const handleDelete = (item: any) => {

src/views/ResourceCenter/UserResources/UserResourcesTemplate/TemplateItem/index.module.scss

@@ -39,6 +39,10 @@
 			color: rgba(30, 38, 51, 1);
 			margin-left: 8px;
 			font-weight: 550;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			display: inline-block;
 		}
 	}
 	.templateDesc {

src/views/ResourceCenter/UserResources/UserResourcesTemplate/TemplateItem/index.tsx

@@ -34,13 +34,15 @@ const TemplateItem = (props: ITemplateItemPorps) => {
 					</>
 				)}
 				<div className={style.templateTopLine}></div>
-				<div className={style.templateTopItem}>{templateInfo.version}</div>
+				<div className={style.templateTopItem}>v{templateInfo.version}</div>
 				<div className={style.templateTopLine}></div>
 				<div className={style.templateTopItem}>{templateInfo.updatedTime}</div>
 			</div>
 			<div className={style.templateTitleBox}>
 				<img src={templateIcon} alt="" />
-				<div className={style.templateTitle}>{templateInfo.title}</div>
+				<div className={style.templateTitle} title={templateInfo.title}>
+					{templateInfo.title}
+				</div>
 			</div>
 			<div className={style.templateDesc}>{templateInfo.description}</div>
 			{footer && footer()}

src/views/ResourceCenter/UserResources/UserResourcesTemplate/index.tsx

@@ -108,7 +108,6 @@ const UserResourcesTemplate = observer(() => {
 	const deleteConfirm = () => {
 		deleteWorkflowspecFn({ id: templateId });
 	};
-
 	return (
 		<div className={style.template}>
 			<div className={style.top}>
@@ -164,6 +163,8 @@ const UserResourcesTemplate = observer(() => {
 					setOpen={setShowProductSelect}
 					productId={productId}
 					setProductId={setProductId}
+					title="新建自定义模板"
+					okText="确定"
 					onConfirm={() => {
 						setTemplateId("");
 						setShowAddTemplate(true);
@@ -178,7 +179,10 @@ const UserResourcesTemplate = observer(() => {
 					isText={true}
 					title="提示"
 				>
-					确定要删除这个模板吗？
+					<div style={{ width: "388px" }}>
+						确认删除该模板吗？删除后，使用该模板创建的工作流任务将无法查看详情，
+						项目中已添加的该模板也将一并删除！
+					</div>
 				</MyDialog>
 			)}
 			{showDetail && (

src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/index.module.css

@@ -36,7 +36,6 @@
 	display: flex;
 	position: relative;
 	width: 100%;
-	/* overflow: hidden; */
 	border-radius: 4px;
 	margin-bottom: 20px;
 	height: 562px;
@@ -66,6 +65,7 @@
 	flex-direction: column;
 	border-top-right-radius: 4px;
 	border-bottom-right-radius: 4px;
+	width: calc(100% - 368px);
 }
 .codeTitle {
 	background-color: #353942;

src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-10-18 16:12:55
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-11-02 13:51:50
+ * @LastEditTime: 2022-11-04 15:07:53
  * @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -548,7 +548,6 @@ const AddOperator = observer((props: IAddOperator) => {
 									}}
 									onBlur={paramsConfigBlur}
 									height={parametersError ? "486px" : "518px"}
-									width="600"
 									style={{ flex: 1 }}
 								/>
 								{parametersError ? (
@@ -672,6 +671,7 @@ const AddOperator = observer((props: IAddOperator) => {
 									tasks={operatorList}
 									setTasks={setOperatorList}
 									type="edit"
+									defaultPosition={[300, 100]}
 									// onFlowNodeClick={handleNodeClick}
 									flowNodeDraggable={true}
 									ListenState={!inputActive}

src/views/ResourceCenter/UserResources/WorkflowOperator/components/OperatorDetails/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-10-17 14:35:11
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-11-01 10:59:40
+ * @LastEditTime: 2022-11-04 15:09:09
  * @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -106,14 +106,7 @@ const OperatorDetails = observer(() => {
 		onSuccess: (res: any) => {
 			if (res.message === "success") {
 				/** 设置详情数据 */
-				const newData = res.data.map((item: any) => {
-					/** 初始化批算子偏移量 */
-					if (item.type === "BATCH") {
-						item.position = { x: 100, y: 100 };
-					}
-					return item;
-				});
-				setDetailData(newData);
+				setDetailData(res.data);
 				const filterData = res?.data?.filter((item: any) => {
 					return item.type === "BATCH";
 				});
@@ -226,7 +219,7 @@ const OperatorDetails = observer(() => {
 			) : null}
 			{contentType === "flowChart" && !envId ? (
 				<div className={styles.contentBox}>
-					<Flow tasks={detailData} showControls={false} />
+					<Flow tasks={detailData} showControls={false} defaultPosition={[100, 100]}/>
 				</div>
 			) : null}
 			{contentType === "parameterList" || type === "FLOW" ? (

src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx

@@ -76,7 +76,7 @@ const WorkflowOperator = observer(() => {
 	}, [searchParams.productId, searchParams.type]);
 
 	return (
-		<>
+		<div>
 			<div className={styles.indexBox}>
 				<div className={styles.headerBox}>
 					<div>
@@ -163,7 +163,7 @@ const WorkflowOperator = observer(() => {
 					pageType={pageType}
 				/>
 			)}
-		</>
+		</div>
 	);
 });
 

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

@@ -203,7 +203,7 @@ const OperatorList = observer((props: IOperatorListProps) => {
 						setKeyword(e.target.value);
 					}}
 					value={keyword}
-					placeholder="输入关键词搜索"
+					placeholder="输入关键词按回车搜索"
 					onKeyUp={handleEnterCode}
 					size="medium"
 					sx={{ height: 32, width: "100%" }}

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

@@ -105,7 +105,7 @@ const SaveCustomTemplate = (props: IProps) => {
 				helperText: "必须输入模板名称",
 			});
 			return false;
-		} else if (title.length > 50) {
+		} else if (title.length > 15) {
 			setTitleHelper({
 				error: true,
 				helperText: "格式不正确，必须在15字符以内，仅限大小写字母、数字、中文",
@@ -239,7 +239,7 @@ const SaveCustomTemplate = (props: IProps) => {
 					helperText={versionHelper.helperText}
 					style={{ marginBottom: "20px" }}
 				></MyInput>
-				<div style={{ position: "relative" }}>
+				<div style={{ position: "relative", paddingBottom: "20px" }}>
 					<MyInput
 						value={description}
 						id="desc"

src/views/WorkFlowEdit/index.tsx

@@ -61,7 +61,8 @@ const WorkFlowEdit = observer((props: IProps) => {
 	const [saveFormDialog, setSaveFormDialog] = useState(false); // 保存弹窗显示与否控制
 	const [title, setTitle] = useState(""); // 自定义模板名称
 	const [version, setVersion] = useState("1.0.0"); // 自定义模板版本
-	const [oldversion, setOldersion] = useState(""); // 编辑是自定义模板的老版本
+	const [oldversion, setOldersion] = useState(""); // 编辑时自定义模板的老版本
+	const [selfAddingEewVersion, setSelfAddingEewVersion] = useState("1.0.0"); // 编辑时自增新版本
 	const [description, setDescription] = useState(""); // 自定义模板描述
 	const [creator, setCreator] = useState(""); // 自定义模板创建人
 	const [operatingArea, setOperatingArea] = useState<"form" | "flow">("form"); // 当前操作区域
@@ -138,6 +139,7 @@ const WorkFlowEdit = observer((props: IProps) => {
 						}
 					}
 					setVersion(arr.join("."));
+					setSelfAddingEewVersion(arr.join("."));
 					setCreator(res.data.creator);
 					setDescription(res.data.description);
 				}
@@ -215,6 +217,7 @@ const WorkFlowEdit = observer((props: IProps) => {
 		if (!tasksIsCheck) {
 			Message.error("工作流校验未通过，请检查！");
 		} else {
+			setVersion(selfAddingEewVersion);
 			setSaveFormDialog(true);
 		}
 	};

src/views/demo/VirtuallyListDemo/index.tsx

+import { useCallback, useEffect, useState, useRef, useMemo } from "react";
 import VirtuallyList from "@/components/CommonComponents/VirtuallyList";
+import VirtuallyTable from "@/components/CommonComponents/VirtuallyTable";
+import MyButton from "@/components/mui/MyButton";
 
 const VirtuallyListDemo = () => {
 	let listData: Array<any> = [];
@@ -16,10 +19,6 @@ const VirtuallyListDemo = () => {
 		parent,
 		style,
 	}: any) => {
-		// const name = listData[index].name;
-
-		// // const content = isScrolling ? "..." : <div>{name}</div>;
-		// const content = <div>{name}</div>;
 		return (
 			<div key={key} style={style}>
 				<div
@@ -40,32 +39,83 @@ const VirtuallyListDemo = () => {
 			</div>
 		);
 	};
+
+	const rows = [
+		{
+			a: "啊手动阀建行卡实际付款啦即使对方卢卡库上的飞机啊离开解放了；拉萨的飞机拉萨酱豆腐啊肌肤抵抗力就",
+			b: "werewrw",
+			c: "asdfasf",
+			d: "asdfasdf",
+			e: "asd4534",
+			id: "a1",
+		},
+	];
+	for (let i = 0; i < 10000; i++) {
+		rows.push({
+			a: "xcgh",
+			b: "sdf",
+			c: "sdfg",
+			d: "sdfg",
+			e: "wertwe",
+			id: String(i),
+		});
+	}
+	const buttonHeadCells = [
+		{
+			id: "a",
+			label: "属性a",
+			width: 150,
+		},
+		{
+			id: "b",
+			label: "属性b",
+			width: 150,
+		},
+		{
+			id: "c",
+			label: "属性c",
+			width: 150,
+			// flexGrow: 2,
+		},
+		{
+			id: "d",
+			label: "属性d",
+			width: 200,
+			flexGrow: 2,
+		},
+		{
+			id: "caozuo",
+			label: "操作",
+			width: 150,
+			cellRenderer: (data: any) => {
+				return (
+					<MyButton
+						text="删除"
+						onClick={() => {
+							// handleDelete(row.id);
+						}}
+					></MyButton>
+				);
+			},
+		},
+	];
+
+	const [selectItems, setSelectItems] = useState([]);
+
 	return (
 		<div>
 			<div>
-				<VirtuallyList list={listData} renderRow={renderRow}></VirtuallyList>;
+				{/* <VirtuallyList list={listData} renderRow={renderRow}></VirtuallyList>; */}
 			</div>
-			<div style={{ width: "300px", height: "300px", overflow: "auto" }}>
-				{listData.map((item, index) => {
-					return (
-						<div
-							key={index}
-							style={{
-								display: "flex",
-								justifyContent: "space-between",
-								alignItems: "center",
-							}}
-						>
-							<div>{listData[index].name}</div>
-							<div>{listData[index].name}</div>
-							<div>{listData[index].name}</div>
-							<div>{listData[index].name}</div>
-							<div>{listData[index].name}</div>
-							<div>{listData[index].name}</div>
-							<div>{listData[index].name}</div>
-						</div>
-					);
-				})}
+			<div style={{ height: "600px" }}>
+				<VirtuallyTable
+					selectItems={selectItems}
+					setSelectItems={setSelectItems}
+					rows={rows}
+					// rows={[]}
+					headCells={buttonHeadCells}
+					activeId="8"
+				/>
 			</div>
 		</div>
 	);