Merge branch 'feat-20220801' into 'release'

Feat 20220801

See merge request !82

src/api/api_manager.ts

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-13 09:56:57
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-08-15 17:10:49
+ * @LastEditTime: 2022-09-01 15:30:28
  * @FilePath: /bkunyun/src/api/api_manager.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -45,6 +45,9 @@ const RESTAPI = {
   API_TASK_OVERVIEW_LIST:`${BACKEND_API_URI_PREFIX}/cpp/workflowJobInformation`,  // 查询任务概览
   API_OPERATOR_LISTSTREAMACTORS:`${BACKEND_API_URI_PREFIX}/cpp/workflow/liststreamactors`,  // 获取流算子列表，可用于模糊查询，返回所有版本流算子
   API_SAVE_BATCHACTOR:`${BACKEND_API_URI_PREFIX}/cpp/workflow/savebatchactor`,  // 保存批算子
+  API_PROJECT_USERS_LIST:`${BACKEND_API_URI_PREFIX}/cpp/project/listusers`,  // 获取项目成员
+  API_ADD_PROJECT_USER:`${BACKEND_API_URI_PREFIX}/cpp/project/updatemember`,  // 添加项目成员
+  API_GET_PROJECT_POWER:`${BACKEND_API_URI_PREFIX}/cpp/project/listroles`,  // 获取项目权限
 };
 
 export default RESTAPI;

src/api/project_api.ts

@@ -318,6 +318,34 @@ const saveBatchActor = (params: saveBatchParams) => {
   });
 };
 
+// 获取项目成员
+const fetchProjectUsersList = (params: {id: string}) => {
+  return request({
+    url: Api.API_PROJECT_USERS_LIST,
+    method: "get",
+    params,
+  });
+};
+
+
+// 修改项目成员信息
+const addProjectUser = (id: string, params: any) => {
+  return request({
+    url: `${Api.API_ADD_PROJECT_USER}?id=${id}`,
+    method: "put",
+    data: params,
+  });
+};
+
+// 获取项目权限
+const fetchProjectPower = (params: {id: string}) => {
+  return request({
+    url: Api.API_GET_PROJECT_POWER,
+    method: "get",
+    params,
+  });
+};
+
 export {
   current,
   menu,
@@ -342,5 +370,8 @@ export {
   getTaskOverview,
   getOperatorList,
   saveBatchActor,
-  fetchFlowOutputNumber
+  fetchFlowOutputNumber,
+  fetchProjectUsersList,
+  addProjectUser,
+  fetchProjectPower
 };

src/assets/project/selectActive.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 4</title>
+    <g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="切换产品" transform="translate(-337.000000, -190.000000)">
+            <g id="编组-37" transform="translate(223.000000, 172.000000)">
+                <g id="编组-34" transform="translate(0.000000, 8.000000)">
+                    <g id="编组-4" transform="translate(114.000000, 10.000000)">
+                        <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
+                        <polyline id="路径-26" stroke="#1370FF" stroke-width="1.5" stroke-linejoin="round" points="4 8.33740166 7.27434245 11 12 5"></polyline>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/project/triangle.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 12备份</title>
+    <g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-12备份">
+            <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
+            <polygon id="路径-53备份-2" fill="#8A9099" points="4.5 6 11.5 6 8 11"></polygon>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/style/public.css

@@ -7,7 +7,7 @@ main::-webkit-scrollbar {
 
 div::-webkit-scrollbar-track,
 main::-webkit-scrollbar-track {
-	background-color: #fff;
+	background-color: transparent;
 	-webkit-border-radius: 3em;
 	-moz-border-radius: 3em;
 	border-radius: 3em;

src/components/mui/MyDialog.tsx

@@ -103,7 +103,7 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
 						disabled={disabledConfirm}
 						isLoadingButton={true}
 						loading={loading}
-						style={{ marginLeft: '12px', ...okSx }}
+						style={{ marginLeft: "12px", ...okSx }}
 					/>
 				) : null}
 			</DialogActions>
@@ -122,16 +122,13 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
 					"& .MuiPaper-root": {
 						// 设置最大宽度， 实际宽度让子元素撑大
 						maxWidth: "1920px",
-						borderRadius: "8px"
+						borderRadius: "8px",
 					},
 				},
 			}}
 		>
 			{isHideHeader ? null : (
-				<DialogTitle
-					id="alert-dialog-title"
-					sx={{ padding: "20px 24px" }}
-				>
+				<DialogTitle id="alert-dialog-title" sx={{ padding: "20px 24px" }}>
 					<div
 						style={{
 							display: "flex",
@@ -140,10 +137,19 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
 							fontWeight: 600,
 						}}
 					>
-						<span style={{ fontSize: 16, lineHeight: '24px', color: '#1E2633' }}>{title}</span>
+						<span
+							style={{ fontSize: 16, lineHeight: "24px", color: "#1E2633" }}
+						>
+							{title}
+						</span>
 						<CloseIcon
 							onClick={onClose}
-							sx={{ color: "#C2C6CC", cursor: "pointer", ":hover": { background: "#f0f2f5", borderRadius: '2px' } }}
+							sx={{
+								fontSize: "18px",
+								color: "#C2C6CC",
+								cursor: "pointer",
+								":hover": { background: "#f0f2f5", borderRadius: "2px" },
+							}}
 						/>
 					</div>
 				</DialogTitle>

src/components/mui/MyInput.tsx

@@ -66,6 +66,7 @@ const MyInput = (props: MyInputProps) => {
 				styleOverrides: {
 					root: {
 						top: "-9px",
+						fontSize: "14px",
 					},
 					shrink: {
 						top: 0,

src/components/mui/MyPopover.tsx

 /*
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-11 09:33:46
- * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-16 14:21:00
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-09-01 19:34:26
  * @FilePath: /bkunyun/src/components/mui/MyPopover.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
-import * as React from "react";
+import { useRef, useEffect, useState } from "react";
 import Popover, { PopoverProps } from "@mui/material/Popover";
 import Typography from "@mui/material/Typography";
 
@@ -17,10 +17,15 @@ interface IProps extends Omit<PopoverProps, "open"> {
 	children: React.ReactNode;
 	/** 显示内容 */
 	content: React.ReactNode;
+	/** 是否打开 */
+	open?: boolean;
+	/** open 修改 */
+	changeOpen: (val: boolean) => void;
 }
 
 const MyPopover = (props: IProps) => {
-	const [anchorEl, setAnchorEl] = React.useState<any | null>(null);
+	const [anchorEl, setAnchorEl] = useState<any | null>(null);
+	const ref = useRef(null);
 
 	const {
 		trigger = "click",
@@ -28,26 +33,37 @@ const MyPopover = (props: IProps) => {
 		content,
 		anchorOrigin,
 		transformOrigin,
+		open = false,
+		changeOpen,
 	} = props;
 
 	const handlePopoverOpen = (event: any) => {
+		changeOpen(true);
 		setAnchorEl(event.currentTarget);
 	};
 
 	const handelClick = (event: any) => {
+		changeOpen(true);
 		setAnchorEl(event?.currentTarget);
 	};
 
 	const handlePopoverClose = () => {
+		changeOpen(false);
 		setAnchorEl(null);
 	};
 
-	const open = Boolean(anchorEl);
+	useEffect(() => {
+		if (open) {
+			setAnchorEl(ref.current);
+		}
+	}, [open]);
+
 	const id = open ? "simple-popover" : undefined;
 
 	return (
 		<div>
 			<Typography
+				ref={ref}
 				aria-owns={id}
 				onClick={trigger === "click" ? handelClick : undefined}
 				onMouseEnter={trigger === "hover" ? handlePopoverOpen : undefined}

src/components/mui/MyTable/index.tsx

-import React, { useCallback, useState} from "react";
+import React, { useCallback, useState } from "react";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
-import { TablePagination } from '@mui/material';
+import { TablePagination } from "@mui/material";
 import TableRow from "@mui/material/TableRow";
 import Paper from "@mui/material/Paper";
 import Checkbox from "@mui/material/Checkbox";
 import { useEffect } from "react";
 import { useImperativeHandle } from "react";
-// import Spin from "./Spin";
+import MyCircularProgress from "@/components/mui/MyCircularProgress";
 
-import EnhancedTableHeadComponent from "./components/EnhancedTableHead"
+import EnhancedTableHeadComponent from "./components/EnhancedTableHead";
 import { getComparator, stableSort, useStyles } from "./utils";
 import ActionsComponent from "./components/ActionsComponent";
-import {ITableProps} from './interface'
+import { ITableProps } from "./interface";
 
 export default function EnhancedTable(props: ITableProps) {
 	const classes: any = useStyles;
 	const [order, setOrder] = useState("asc");
 	const [orderBy, setOrderBy] = useState("");
-  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 = '', tableBodySx, radioClick} = props;
+	const {
+		headCells,
+		rows,
+		footer = true,
+		elevation1,
+		tableStyle,
+		tableCellStyle,
+		tableContainerStyle,
+		stickyHeader,
+		onRowClick,
+		defaultRow,
+		minHeight = "",
+		borderBottom = "",
+		onDoubleClick,
+		loading = false,
+		noDataText = "暂无数据",
+		size,
+		checkboxData,
+		rowsPerPage = 10,
+		initSelected,
+		page = 0,
+		changePage = function () {},
+		toolbar,
+		count,
+		param,
+		disabledParam = "id",
+		headTableCellCheckbox,
+		RowHeight = "",
+		CellWidth = "",
+		rowHover,
+		TableNodataPadding = "",
+		TableNodataLineHeight = "",
+		tableBodySx,
+		radioClick,
+	} = props;
 	const [selected, setSelected] = useState(initSelected || []);
-  const [rowsPerPageOptions] = useState(initSelected || [5, 10, 20, 50, { value: -1, label: 'All' }]);
-  const [onRow, setOnRow] = useState('')
+	const [rowsPerPageOptions] = useState(
+		initSelected || [5, 10, 20, 50, { value: -1, label: "All" }]
+	);
+	const [onRow, setOnRow] = useState("");
 
 	// 重置复选框选中选项
 	const initSelectedFunc = (e: any) => {
-    setSelected(e)
-  }
+		setSelected(e);
+	};
 
 	useImperativeHandle(props.onRef, () => {
 		return {
@@ -38,13 +73,13 @@ export default function EnhancedTable(props: ITableProps) {
 	});
 
 	useEffect(() => {
-    setOnRow(defaultRow)
-  }, [defaultRow])
+		setOnRow(defaultRow);
+	}, [defaultRow]);
 
 	const onRowClickDefault = (value: any) => {
-    setOnRow(value)
-    onRowClick && onRowClick(value)
-  }
+		setOnRow(value);
+		onRowClick && onRowClick(value);
+	};
 
 	const handleRequestSort = (event: any, property: any) => {
 		const isAsc = orderBy === property && order === "asc";
@@ -54,7 +89,7 @@ export default function EnhancedTable(props: ITableProps) {
 
 	const handleSelectAllClick = (event: any) => {
 		if (event.target.checked) {
-      const newSelecteds = rows.map((n: any) => n[param || 'id']);
+			const newSelecteds = rows.map((n: any) => n[param || "id"]);
 			setSelected(newSelecteds);
 			checkboxData(newSelecteds);
 			return;
@@ -78,13 +113,13 @@ export default function EnhancedTable(props: ITableProps) {
 				selected.slice(selectedIndex + 1)
 			);
 		}
-    checkboxData(newSelected)
+		checkboxData(newSelected);
 		setSelected(newSelected);
 	};
 
 	const handleRadioClick = (id: string) => {
-    setSelected(id)
-  }
+		setSelected(id);
+	};
 
 	const handleOnPageChange = (event: any, newPage: number) => {
 		changePage(newPage, Number(rowsPerPage));
@@ -98,27 +133,39 @@ export default function EnhancedTable(props: ITableProps) {
 
 	// const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);
 
-  const renderTableCellValue = useCallback(((item: any, row: any, index: number)=>{
-    if(
-      item.render
-    ) {
-      return <>{item.render(row[item.id], row, index)}</>
-    } else if(row[item.id]) {
-      return row[item.id] || '-'
+	const renderTableCellValue = useCallback(
+		(item: any, row: any, index: number) => {
+			if (item.render) {
+				return <>{item.render(row[item.id], row, index)}</>;
+			} else if (row[item.id]) {
+				return row[item.id] || "-";
 			} else {
-      return '-'
+				return "-";
 			}
-  }),[])
+		},
+		[]
+	);
 
 	return (
 		<div className={classes.root}>
-      <Paper sx={{
-        boxShadow: 'none'
-      }} className={classes.paper} classes={{ elevation1: elevation1 || classes.elevation1 }} >
-        {/* <Spin spin={spin} /> */}
+			<Paper
+				sx={{
+					boxShadow: "none",
+				}}
+				className={classes.paper}
+				classes={{ elevation1: elevation1 || classes.elevation1 }}
+			>
 				{toolbar && toolbar}
 				<TableContainer style={{ ...tableContainerStyle }}>
-          <Table stickyHeader={stickyHeader || false} className={classes.table} style={{ ...tableStyle }} aria-labelledby="tableTitle" size={size || "medium"} aria-label="cloudam table header" >
+					<Table
+						stickyHeader={stickyHeader || false}
+						className={classes.table}
+						style={{ ...tableStyle }}
+						aria-labelledby="tableTitle"
+						size={size || "medium"}
+						aria-label="cloudam table header"
+					>
+						<MyCircularProgress loading={loading}>
 							<EnhancedTableHeadComponent
 								classes={classes()}
 								{...props}
@@ -131,38 +178,81 @@ export default function EnhancedTable(props: ITableProps) {
 								rowCount={rows.length}
 								headCells={headCells || []}
 							/>
-            <TableBody sx={{
-              ...tableBodySx
-            }}>
-              {
-                (rows.length === 0 && !load) && <TableRow>
+							<TableBody
+								sx={{
+									...tableBodySx,
+								}}
+							>
+								{rows.length === 0 && !loading && (
+									<TableRow>
 										<TableCell
 											sx={{
-                      borderBottom: '1px solid #F0F2F5',
-                      textAlign: 'center'
+												borderBottom: "1px solid #F0F2F5",
+												textAlign: "center",
+												color: "#8A9099",
 											}}
-                    colSpan={headCells?.filter((k: any) => k.id === "checkbox")?.length === 0 ? headCells?.length : headCells?.length + 1}
+											colSpan={
+												headCells?.filter((k: any) => k.id === "checkbox")
+													?.length === 0
+													? headCells?.length
+													: headCells?.length + 1
+											}
 											className={classes.TypographyStyle}
-                    style={{ minHeight: minHeight, height: minHeight, borderBottom: borderBottom, padding: TableNodataPadding, lineHeight: TableNodataLineHeight }}
+											style={{
+												minHeight: minHeight,
+												height: minHeight,
+												borderBottom: borderBottom,
+												padding: TableNodataPadding,
+												lineHeight: TableNodataLineHeight,
+											}}
 										>
-                    No Data
+											{noDataText}
 										</TableCell>
 									</TableRow>
-              }
-              {stableSort(rows, getComparator(order, orderBy)).slice(page * Number(rowsPerPage), page * Number(rowsPerPage) + Number(rowsPerPage)).map((row: any, index: number) => {
+								)}
+								{stableSort(rows, getComparator(order, orderBy))
+									.slice(
+										page * Number(rowsPerPage),
+										page * Number(rowsPerPage) + Number(rowsPerPage)
+									)
+									.map((row: any, index: number) => {
 										const isItemSelected = isSelected(row[param || "id"]);
 										const labelId = `enhanced-table-checkbox-${index}`;
 										return (
 											<TableRow
-                    hover={rowHover ? false : (row[disabledParam || "enabled"] ? true : false)}
+												hover={
+													rowHover
+														? false
+														: row[disabledParam || "enabled"]
+														? true
+														: false
+												}
 												onDoubleClick={() => {
-                      onDoubleClick && onDoubleClick(row)
+													onDoubleClick && onDoubleClick(row);
 												}}
 												style={{
 													height: RowHeight,
-                      border: onRow === row[param || "id"] ? !row[disabledParam] ? "" : '1px solid #136EFA' : "",
-                      backgroundColor: onRow === row[param || "id"] ? !row[disabledParam] ? "rgba(255, 255, 255, 0.4)" : "rgba(19, 110, 250, 0.1)" : "",
-                      cursor: props.cursor ? (row[props.cursor] ? "pointer" : "auto") : (onRowClick ? !row[disabledParam] ? "no-drop" : "pointer" : "auto"),
+													border:
+														onRow === row[param || "id"]
+															? !row[disabledParam]
+																? ""
+																: "1px solid #136EFA"
+															: "",
+													backgroundColor:
+														onRow === row[param || "id"]
+															? !row[disabledParam]
+																? "rgba(255, 255, 255, 0.4)"
+																: "rgba(19, 110, 250, 0.1)"
+															: "",
+													cursor: props.cursor
+														? row[props.cursor]
+															? "pointer"
+															: "auto"
+														: onRowClick
+														? !row[disabledParam]
+															? "no-drop"
+															: "pointer"
+														: "auto",
 												}}
 												role="checkbox"
 												aria-checked={isItemSelected}
@@ -170,53 +260,75 @@ export default function EnhancedTable(props: ITableProps) {
 												key={row[param || "id"] || index}
 												selected={isItemSelected}
 												onClick={() => {
-                      radioClick && radioClick(row)
-                      radioClick && handleRadioClick(row[param || "id"])
+													radioClick && radioClick(row);
+													radioClick && handleRadioClick(row[param || "id"]);
 												}}
 											>
-                    {
-                      headCells.filter((k: any) => k.id === "checkbox").length > 0 && <TableCell
+												{headCells.filter((k: any) => k.id === "checkbox")
+													.length > 0 && (
+													<TableCell
 														sx={{
-                          borderBottom: '1px solid #F0F2F5'
+															borderBottom: "1px solid #F0F2F5",
 														}}
 														onClick={(event) => {
 															// if (!row[disabledParam]) return;
-                          onRowClick && onRowClickDefault(row[param || "id"])
-                          headCells.filter((k: any) => k.id === "checkbox").length > 0 && handleClick(event, row[param || "id"])
+															onRowClick &&
+																onRowClickDefault(row[param || "id"]);
+															headCells.filter((k: any) => k.id === "checkbox")
+																.length > 0 &&
+																handleClick(event, row[param || "id"]);
 														}}
-                        padding="checkbox">
-                        <Checkbox sx={{ color: '#D1D6DE' }} color={"primary"} checked={isItemSelected} inputProps={{ "aria-labelledby": labelId }} />
+														padding="checkbox"
+													>
+														<Checkbox
+															sx={{ color: "#D1D6DE" }}
+															color={"primary"}
+															checked={isItemSelected}
+															inputProps={{ "aria-labelledby": labelId }}
+														/>
 													</TableCell>
-                    }
-                    {
-                      headCells.filter((item: any) => item.id !== 'checkbox').map((item: any, k: any) => {
+												)}
+												{headCells
+													.filter((item: any) => item.id !== "checkbox")
+													.map((item: any, k: any) => {
 														return (
-                          <TableCell key={k} component="th" id={labelId + k}
+															<TableCell
+																key={k}
+																component="th"
+																id={labelId + k}
 																sx={{
-                              borderBottom: '1px solid #F0F2F5'
+																	borderBottom: "1px solid #F0F2F5",
 																}}
 																// align={}
-                            style={{ width: CellWidth, textAlign: item.numeric ? "right" : "left", paddingRight: item.sort && item.numeric ? "40px" : "", border: tableCellStyle }}
+																style={{
+																	width: CellWidth,
+																	textAlign: item.numeric ? "right" : "left",
+																	paddingRight:
+																		item.sort && item.numeric ? "40px" : "",
+																	border: tableCellStyle,
+																}}
 																scope="row"
-                            padding={item.disablePadding ? "none" : "normal"}
+																padding={
+																	item.disablePadding ? "none" : "normal"
+																}
 																classes={{
-                              body: classes.bodyTableCell
+																	body: classes.bodyTableCell,
 																}}
-                          > {
-                            renderTableCellValue(item, row, index)
-                            }
+															>
+																{" "}
+																{renderTableCellValue(item, row, index)}
 															</TableCell>
-                        )
-                      })
-                    }
+														);
+													})}
 											</TableRow>
 										);
 									})}
 							</TableBody>
+						</MyCircularProgress>
 					</Table>
 				</TableContainer>
-        {
-          footer ? <TablePagination
+				{footer ? (
+					<TablePagination
 						rowsPerPageOptions={rowsPerPageOptions}
 						component="div"
 						count={count || rows.length}
@@ -225,9 +337,8 @@ export default function EnhancedTable(props: ITableProps) {
 						ActionsComponent={ActionsComponent}
 						onPageChange={handleOnPageChange}
 						onRowsPerPageChange={handleChangeRowsPerPage}
-          /> : null
-        }
-
+					/>
+				) : null}
 			</Paper>
 		</div>
 	);

src/components/mui/MyTable/interface.ts

@@ -2,7 +2,7 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-07-26 10:23:43
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-07-26 11:53:00
+ * @LastEditTime: 2022-09-01 16:00:34
  * @FilePath: /bkunyun/src/components/mui/MyTable/interface.ts
  * @Description: 这是默认设置,请设置`customMade`,打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -32,7 +32,7 @@ export interface ITableProps {
   /** 每行双击事件  */
   onDoubleClick?: any,
   /** 是否loading */
-  load?: boolean,
+  loading?: boolean,
   /** table size */
   size?: any,
   /** 选中的checkbox数据 */
@@ -71,4 +71,6 @@ export interface ITableProps {
   onRef?: any;
   /** 手型 */
   cursor?: string
+  /** 没有数据文案 */
+  noDataText?: string
 }
\ No newline at end of file

src/components/mui/Tabs.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-09-01 11:20:24
+ * @LastEditTime: 2022-09-01 19:34:35
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */

src/hooks/usePass.ts

@@ -9,6 +9,13 @@ const roleList: any[] = [
   { OWNER: 4 }
 ]
 
+export const roleMap = {
+  VIEWER: '查看者',
+  USER: '研究员',
+  MANAGER: '管理员',
+  OWNER: '所有者',
+}
+
 const usePass = () => {
   const { permissionStore } = useStores();
   const { currentProjectStore } = useStores();

src/store/modules/currentProject.ts

@@ -18,6 +18,7 @@ type projectInfo = {
 type productInfo = {
   id?: string;
   name?: string;
+  path?: string;
 };
 
 /** 用户信息 */

src/store/modules/fileList.ts

 /*
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-13 17:00:19
- * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-16 09:43:42
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-09-01 19:34:46
  * @FilePath: /bkunyun/src/store/modules/upload.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -25,6 +25,8 @@ class FileList {
   /** 文件上传列表 */
   fileList: IUploadInfo[] = [];
   
+  /** 是否打开传输列表 */
+  openFileList: boolean = false
 
   // setFileList (val: IUploadInfo[]) {
   //   this.fileList = val
@@ -39,6 +41,10 @@ class FileList {
     this.newFileList = val
   }
 
+  /** 打开关闭文件列表 */
+  setOpenFileList = (val: boolean) => {
+    this.openFileList = val
+  }
 
   /** 设置文件上传信息 */
   setUploadInfo = (id: string, val: IUploadInfo) => {

src/views/ConsoleLayout/components/FileItem/index.tsx

@@ -88,12 +88,12 @@ const FileItem = observer((props: IProps) => {
 
 	const speed = useMemo(() => {
 		let val = 0;
-		const time = Math.floor((itemInfo?.endTime - itemInfo.startTime) / 1000);
+		const time = Math.floor((itemInfo?.endTime - itemInfo?.startTime) / 1000);
 		if (time > 0) {
 			val = Math.floor(itemInfo?.bytesUploaded / time);
 		}
 		return val;
-	}, [itemInfo?.bytesUploaded, itemInfo?.endTime, itemInfo.startTime]);
+	}, [itemInfo?.bytesUploaded, itemInfo?.endTime, itemInfo?.startTime]);
 	return (
 		<div className={styles.itemBox}>
 			<div className={styles.leftBox}>

src/views/ConsoleLayout/components/TransferList/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-10 18:05:21
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-09-01 14:09:28
+ * @LastEditTime: 2022-09-01 15:54:33
  * @FilePath: /bkunyun/src/views/ConsoleLayout/components/TransferList/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */

src/views/ConsoleLayout/index.module.css

@@ -13,10 +13,70 @@
 }
 
 .logo {
-	padding: 0px 16px 0px 20px;
+	padding: 0px 32px 0px 20px;
 	margin-top: -10px;
 }
-
+.menuBox {
+	line-height: 57px;
+	height: 57px;
+	font-size: 14px;
+	color: rgba(86, 92, 102, 1);
+	margin-right: 24px;
+	cursor: pointer;
+	position: relative;
+}
+.menuTitle:hover {
+	color: #1e2633;
+}
+.menuBox:hover .productList {
+	display: block;
+}
+.triangle {
+	width: 16px;
+	height: 16px;
+	position: relative;
+	top: 4px;
+	transition: width 1s;
+	-webkit-transition: width 1s;
+}
+.menuBox:hover .triangle {
+	transform: rotateX(180deg);
+}
+.productList {
+	position: absolute;
+	top: 57px;
+	left: -16px;
+	padding: 8px 0;
+	display: none;
+	background: #ffffff;
+	box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.14);
+	border-radius: 4px;
+	z-index: 1002;
+}
+.productLi {
+	min-width: 142px;
+	height: 36px;
+	padding: 7px 50px 7px 16px;
+	font-size: 14px;
+	color: rgba(30, 38, 51, 1);
+	line-height: 22px;
+	cursor: pointer;
+	position: relative;
+	box-sizing: border-box;
+}
+.productLi:hover {
+	color: rgba(19, 112, 255, 1);
+}
+.productLiActive {
+	color: rgba(19, 112, 255, 1);
+}
+.selectActive {
+	width: 16px;
+	height: 16px;
+	position: absolute;
+	top: 10px;
+	right: 12px;
+}
 .uploadIconBox {
 	width: 32px;
 	height: 32px;
@@ -39,16 +99,14 @@
 }
 
 .topRightItem {
-	margin-right: 20px;
+	margin-right: 24px;
 }
-
-.ArrowDropDownIconRoot {
+.topRightTriangle {
 	color: #8a9099;
 	transition: all 0.2s !important;
 	transform: rotate(0);
 }
-
-.ArrowDropDownIconRootOpen {
+.topRightTriangleOpen {
 	color: #8a9099;
 	transform: rotate(180deg);
 }

src/views/ConsoleLayout/index.tsx

 import React, { useEffect, useState } from "react";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
-import cx from "classnames";
 import { observer } from "mobx-react-lite";
-import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import Avatar from "@mui/material/Avatar";
 import { Box, Menu, MenuItem } from "@mui/material";
 import classNames from "classnames";
 
 import uploadIcon from "@/assets/img/uploadIcon.svg";
+import triangle from "@/assets/project/triangle.svg";
+import selectActive from "@/assets/project/selectActive.svg";
 import globalText from "@/utils/globalText_CN";
 import useIndex from "./useIndex";
 import { useStores } from "@/store/index";
-import MyButton from "@/components/mui/MyButton";
 import logo from "@/assets/img/logo.svg";
 import MyPopover from "@/components/mui/MyPopover";
 import TranSferList from "./components/TransferList";
 import { getProjectList } from "@/api/project_api";
 import useMyRequest from "@/hooks/useMyRequest";
+import { toJS } from "mobx";
 import {
 	setFileServerEndPointLocalStorage,
 	getFiletokenAccordingToId,
@@ -25,29 +25,19 @@ import {
 import style from "./index.module.css";
 
 const ConsoleLayout = observer(() => {
-	const {
-		productAnchorEl,
-		utilityAnchorEl,
-		productOpen,
-		utilityOpen,
-		handleProductClick,
-		handleUtilityClick,
-		handleClose,
-	} = useIndex();
+	const { utilityAnchorEl, utilityOpen, handleUtilityClick, handleClose } =
+		useIndex();
 
-	const [currentProduct, setCurrentProduct] = useState<{
-		path: string;
-		name: string;
-	}>();
-
-	const { currentProjectStore } = useStores();
+	const { currentProjectStore, fileListStore } = useStores();
+	const { openFileList, setOpenFileList } = fileListStore;
+	const productInfo = toJS(currentProjectStore.currentProductInfo);
 	const { run: runGetProjectList } = useMyRequest(getProjectList, {
 		onSuccess: (res) => {
 			let list = res.data;
 			if (list.length === 0) {
 				currentProjectStore.setProjectList([]);
 				currentProjectStore.changeProject({});
-				navigate(currentProduct?.path as string);
+				navigate(productInfo?.path as string);
 			} else {
 				currentProjectStore.setProjectList(list);
 				currentProjectStore.changeProject(list[0]);
@@ -56,15 +46,18 @@ const ConsoleLayout = observer(() => {
 					list[0].filetoken = res;
 					currentProjectStore.changeProject(list[0]);
 				});
-				navigate(currentProduct?.path as string);
+				navigate(productInfo?.path as string);
 			}
 		},
 	});
 
 	// 切换产品
 	const getProduct = (item: any) => {
-		currentProjectStore.changeProductInfo({ id: item.id, name: item.name });
-		setCurrentProduct(item);
+		currentProjectStore.changeProductInfo({
+			id: item.id,
+			name: item.name,
+			path: item.path,
+		});
 		runGetProjectList({
 			product: item.id,
 		});
@@ -83,62 +76,54 @@ const ConsoleLayout = observer(() => {
 			<Box className={style.topApp}>
 				<Box className={style.topLeftBox}>
 					<img src={logo} alt="" className={style.logo} />
-					<MyButton
+					{/* <MyButton
 						text={globalText.console}
 						variant={"text"}
 						style={{ color: "#565C66" }}
 						onClick={() => navigate("/home")}
-					/>
+					/> */}
+					<div className={style.menuBox} onClick={() => navigate("/home")}>
+						<div className={style.menuTitle}>{globalText.console}</div>
+					</div>
 
-					<Box sx={{ display: "flex", alignItems: "center" }}>
-						<MyButton
-							text={globalText.product}
-							variant={"text"}
-							style={{ color: "#565C66", paddingLeft: '8px' }}
-							onClick={handleProductClick}
-							dropValue={productOpen}
-							drop={true}
-						/>
-						{/* <ArrowDropDownIcon classes={{
-              root: cx({
-                [style.ArrowDropDownIconRoot]: true,
-                [style.ArrowDropDownIconRootOpen]: Boolean(productOpen)
-              })
-            }} /> */}
-						<Menu
-							id="product-menu"
-							anchorEl={productAnchorEl}
-							open={productOpen}
-							onClose={handleClose}
-							classes={{
-								paper: style.menuPaper,
-							}}
-							MenuListProps={{
-								"aria-labelledby": "product-button",
-							}}
-						>
+					<div className={style.menuBox}>
+						<div className={style.menuTitle}>
+							<span>{globalText.product}</span>
+							<img className={style.triangle} src={triangle} alt="" />
+						</div>
+						<div className={style.productList}>
 							{menuStore.productList.map((item) => {
 								return (
-									<MenuItem
+									<div
 										key={item.path}
-										classes={{
-											root: style.menuItemRoot,
-										}}
+										className={classNames({
+											[style.productLi]: true,
+											[style.productLiActive]: productInfo.path === item.path,
+										})}
 										onClick={() => {
 											getProduct(item);
 											handleClose();
 										}}
 									>
 										{item.name}
-									</MenuItem>
+										{productInfo.path === item.path && (
+											<img
+												className={style.selectActive}
+												src={selectActive}
+												alt=""
+											/>
+										)}
+									</div>
 								);
 							})}
-						</Menu>
-					</Box>
+						</div>
+					</div>
 				</Box>
 
 				<Box className={style.topRightBox}>
 					<MyPopover
+						open={openFileList}
+						changeOpen={(val) => setOpenFileList(val)}
 						content={<TranSferList />}
 						transformOrigin={{
 							vertical: "top",
@@ -152,7 +137,6 @@ const ConsoleLayout = observer(() => {
 								style={{ verticalAlign: "middle" }}
 							/>
 						</div>
-					
 					</MyPopover>
 					<Box className={style.topRightItem}>
 						<Box
@@ -170,13 +154,13 @@ const ConsoleLayout = observer(() => {
 							>
 								H
 							</Avatar>
-							<ArrowDropDownIcon
-								classes={{
-									root: cx({
-										[style.ArrowDropDownIconRoot]: true,
-										[style.ArrowDropDownIconRootOpen]: Boolean(utilityOpen),
-									}),
-								}}
+							<img
+								className={classNames({
+									[style.topRightTriangle]: true,
+									[style.topRightTriangleOpen]: Boolean(utilityOpen),
+								})}
+								src={triangle}
+								alt=""
 							/>
 						</Box>
 

src/views/Home/index.module.css

+.parentBox {
+    height: calc(100vh - 57px);
+    position: relative;
+}
+
+.centerBox {
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.centerImg{
+    width: 186px;
+    height: 114px;
+}
+
+.centerText {
+    font-size: 14px;
+    color: #565C66;
+    line-height: 22px;
+    margin-top: 20px;
+    text-align: center;
+}
+
+.bottomText {
+    font-size: 14px;
+    color: #8A9099;
+    line-height: 22px;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 20px;
+}
\ No newline at end of file

src/views/Home/index.tsx

 import React from "react";
+import style from "./index.module.css";
+import building from "@/assets/img/building.png";
 
 const Home = () => {
-  return <div>Home</div>;
+  return <div className={style.parentBox}>
+    <div className={style.centerBox}>
+      <img src={building} className={style.centerImg} />
+      <div className={style.centerText}>平台正在努力建设中…</div>
+    </div>
+    <div className={style.bottomText}>平台当前为beta版本，非最终品质</div>
+  </div>
 };
 
 export default Home;

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

@@ -135,6 +135,7 @@ const UpLoaderFile = observer((props: IMoveFileProps) => {
 				};
 			}) || [];
 		toJS(fileListStore?.setNewFileList)(newFileList);
+		fileListStore?.setOpenFileList(true);
 		if (newFileList?.length) {
 			getFileToken(newFileList);
 		}
@@ -173,7 +174,7 @@ const UpLoaderFile = observer((props: IMoveFileProps) => {
 	const renderButtons = (item: any, index: number) => {
 		return (
 			<MyButton
-					text='删除'
+				text="删除"
 				style={{ position: "relative", left: "-18px" }}
 				variant="text"
 				size="small"

src/views/Project/ProjectData/index.tsx

@@ -602,10 +602,9 @@ const ProjectData = observer(() => {
 				{selectIds.length > 0 && (
 					<div className={style.projectDataStickyBox}>
 						<MyButton
-							text={`批量删除（${selectIds.length}）`}
+							text={`批量删除 (${selectIds.length})`}
 							color="error"
 							variant="outlined"
-							size="small"
 							style={{ marginRight: "12px" }}
 							onClick={() => {
 								setCurrentOperateFile(null);
@@ -614,10 +613,9 @@ const ProjectData = observer(() => {
 							disabled={!isPass("PROJECT_DATA_DELETE", "USER")}
 						/>
 						<MyButton
-							text={`批量移动（${selectIds.length}）`}
+							text={`批量移动 (${selectIds.length})`}
 							// color="neutral"
 							variant="contained"
-							size="small"
 							style={{ marginRight: "24px" }}
 							onClick={() => {
 								setCurrentOperateFile(null);

src/views/Project/ProjectOverview/TaskCard/index.module.css

@@ -72,7 +72,7 @@
 
 .taskProgress {
 	height: 32px;
-	margin: 12px 0;
+	margin: 12px 0 16px;
 }
 
 .progressInfo {
@@ -120,6 +120,7 @@
 .result {
 	box-sizing: border-box;
 	font-size: 12px;
+	align-items: center;
 	color: #1e2633;
 	cursor: pointer;
 	height: 30px;
@@ -152,6 +153,12 @@
 }
 
 .outputLeftImg {
-	vertical-align: middle;
+	vertical-align: top;
 	margin-right: 8px;
 }
+
+.outputTitle {
+	display: inline-block;
+	height: 22px;
+	line-height: 22px;
+}

src/views/Project/ProjectOverview/TaskCard/index.tsx

@@ -48,7 +48,7 @@ const TaskCard = (props: TaskCardProps) => {
     }, [outputs])
     // 结果文件跳转
     const goToProjectData = (info: any) => {
-        let { path = '' , type = '' } = info
+        let { path = '', type = '' } = info
         const lastIndex = path.lastIndexOf("/");
         // /projectData
         // dataType
@@ -69,6 +69,8 @@ const TaskCard = (props: TaskCardProps) => {
     // 渲染状态图标
     const renderStatusIcon = (data: string) => {
         switch (data) {
+            case "SUBMITTED":
+                return jobRun
             case "RUNNING":
                 return jobRun
             case "ABORTED":
@@ -101,6 +103,8 @@ const TaskCard = (props: TaskCardProps) => {
     // 渲染字体颜色
     const renderTextColor = (data: string) => {
         switch (data) {
+            case "SUBMITTED":
+                return "#1370FF";
             case "RUNNING":
                 return "#1370FF";
             case "ABORTED":
@@ -116,6 +120,8 @@ const TaskCard = (props: TaskCardProps) => {
     // 渲染状态框背景颜色
     const renderBackgroundColor = (data: string) => {
         switch (data) {
+            case "SUBMITTED":
+                return "#EBF3FF";
             case "RUNNING":
                 return "#EBF3FF";
             case "ABORTED":
@@ -131,6 +137,8 @@ const TaskCard = (props: TaskCardProps) => {
     //渲染进度条颜色
     const renderProgressColor = useCallback((data: any) => {
         switch (data) {
+            case "SUBMITTED":
+                return "info";
             case "RUNNING":
                 return "info";
             case "ABORTED":
@@ -182,7 +190,8 @@ const TaskCard = (props: TaskCardProps) => {
                                 }
                                 alt=""
                             />
-                            {item?.name}</div>
+                            <span className={style.outputTitle}>{item?.name}</span>
+                        </div>
                     })}
                 </div>
             }

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

+.topFixed {
+	position: sticky;
+	top: 0;
+	z-index: 10;
+	background-color: #fff;
+}
+
 .basicInformation {
 	display: flex;
 	justify-content: space-between;
-    margin: 24px 24px 0 24px;
-    padding-bottom: 20px;
-    border-bottom: 1px solid #EDEFF2;
+	margin: 0 24px;
+	padding: 24px 0 20px;
+	border-bottom: 1px solid #edeff2;
 }
 
 .basicInformationRight {
@@ -31,30 +38,30 @@
 }
 
 .informationcolor {
-    color: #8A9099;
+	color: #8a9099;
 }
 
 .otherInformationBox {
 	margin-right: 24px;
-    color: #565C66;
+	color: #565c66;
 }
 
-.otherInformationBoxRight{
+.otherInformationBoxRight {
 	line-height: 22px;
 	margin-bottom: 4px;
-    color: #565C66;
+	color: #565c66;
 }
 
 .numberDisplay {
 	font-size: 20px;
 	font-weight: 600;
-    color: #1E2633;
+	color: #1e2633;
 	margin-right: 8px;
 }
 
 .verticalLine {
 	height: 32px;
-    border-right: 1px solid #EBEDF0;
+	border-right: 1px solid #ebedf0;
 	margin-left: 28px;
 	margin-right: 28px;
 }
@@ -63,6 +70,7 @@
 	display: flex;
 	justify-content: space-between;
 	margin: 24px 24px 0 24px;
+	padding-bottom: 20px;
 }
 
 .searchLineLeft {
@@ -85,10 +93,10 @@
 
 .taskDisplay {
 	position: relative;
-    margin: 20px 24px;
+	margin: 0 24px 20px;
 	padding-bottom: 16px;
 	overflow: hidden;
-    background: #F7F8FA;
+	background: #f7f8fa;
 	border-radius: 8px;
 	min-height: calc(100vh - 291px);
 }

src/views/Project/ProjectOverview/index.tsx

-import React, { useState, useCallback, useEffect, useMemo } from "react";
+import React, { useState, useEffect } from "react";
 import { observer } from "mobx-react-lite";
 import _ from "lodash";
 import moment from "moment";
 
 import useMyRequest from "@/hooks/useMyRequest";
-import {
-    getOverviewInfo,
-    getTaskOverview,
-} from "@/api/project_api";
+import { getOverviewInfo, getTaskOverview } from "@/api/project_api";
 import { useStores } from "@/store/index";
 import NoProject from "@/components/BusinessComponents/NoProject";
 import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
 import Loading from "@/views/Loading";
 import SearchInput from "@/components/BusinessComponents/SearchInput";
-import TaskCard from './TaskCard'
+import TaskCard from "./TaskCard";
 
 import projectImg from "@/assets/project/projectIconSmall.svg";
 import noFile from "@/assets/project/noFile.svg";
 import style from "./index.module.css";
 
-
 const ProjectOverview = observer(() => {
 	const { currentProjectStore } = useStores();
 	// 概览基本信息
 	const [overviewInfo, setOverviewInfo] = useState<any>({});
 	// 任务概览列表
-    const [taskList, setTaskList] = useState([])
-    const [jobName, setJobName] = useState('')
-    const [page, setPage] = useState(0)
-    const [size, setSize] = useState(999)
+	const [taskList, setTaskList] = useState([]);
+	const [jobName, setJobName] = useState("");
+	const [page, setPage] = useState(0);
+	const [size, setSize] = useState(999);
 	// 选择近7天or近15天or近30天
 	const [day, setDay] = useState("7");
 	// 获取概览基本信息
@@ -64,29 +60,34 @@ const ProjectOverview = observer(() => {
 				size: size,
 			});
 		}
-    }, [currentProjectStore.currentProjectInfo.id, getTaskOverviewList, day, jobName]);
+	}, [
+		currentProjectStore.currentProjectInfo.id,
+		getTaskOverviewList,
+		day,
+		jobName,
+	]);
 
 	const handleKeyWordChangeKeyUp = (e: any) => {
 		if (e.keyCode === 13) {
 			setJobName(e.target.value);
 		}
-    }
+	};
 
-    const handleKeyWordChangeBlur=(e:any)=>{
+	const handleKeyWordChangeBlur = (e: any) => {
 		setJobName(e.target.value);
-    }
+	};
 
 	const storageUnitFromB = (b: number) => {
 		if (b <= 0) {
-            return { data: '0.00', unit: 'KB' };
+			return { data: "0.00", unit: "KB" };
 		} else if (b < 1024 * 1024) {
-            return { data: (b / 1024).toFixed(2), unit: 'KB' };
+			return { data: (b / 1024).toFixed(2), unit: "KB" };
 		} else if (b < 1024 * 1024 * 1024) {
-            return { data: (b / (1024 * 1024)).toFixed(2), unit: 'MB' };
+			return { data: (b / (1024 * 1024)).toFixed(2), unit: "MB" };
 		} else if (b < 1024 * 1024 * 1024 * 1024) {
-            return { data: (b / (1024 * 1024 * 1024)).toFixed(2), unit: 'G' };
+			return { data: (b / (1024 * 1024 * 1024)).toFixed(2), unit: "G" };
 		} else {
-            return { data: (b / (1024 * 1024 * 1024 * 1024)).toFixed(2), unit: 'T' };
+			return { data: (b / (1024 * 1024 * 1024 * 1024)).toFixed(2), unit: "T" };
 		}
 	};
 
@@ -100,36 +101,81 @@ const ProjectOverview = observer(() => {
 		} else {
 			return (
 				<>
+					<div className={style.topFixed}>
 						<div className={style.basicInformation}>
 							<div>
 								<div className={style.titleBox}>
-                                <img src={projectImg} alt="项目logo" style={{ width: 30, height: 30 }} />
+									<img
+										src={projectImg}
+										alt="项目logo"
+										style={{ width: 30, height: 30 }}
+									/>
 									<span className={style.projectName}>
 										{currentProjectStore.currentProjectInfo.name}
 									</span>
 								</div>
 								<div className={style.otherInformation}>
-                                <div className={style.otherInformationBox}><span>角色：</span><span className={style.informationcolor}>{overviewInfo.projectRoleExhibit}</span></div>
-                                <div className={style.otherInformationBox}><span>计算区：</span><span className={style.informationcolor}>{overviewInfo.zoneIdExhibit}</span></div>
-                                <div className={style.otherInformationBox}><span>创建日期：</span><span className={style.informationcolor}>{moment(overviewInfo.createdAt).format('yyyy-MM-DD')}</span></div>
+									<div className={style.otherInformationBox}>
+										<span>角色：</span>
+										<span className={style.informationcolor}>
+											{overviewInfo.projectRoleExhibit}
+										</span>
+									</div>
+									<div className={style.otherInformationBox}>
+										<span>计算区：</span>
+										<span className={style.informationcolor}>
+											{overviewInfo.zoneIdExhibit}
+										</span>
+									</div>
+									<div className={style.otherInformationBox}>
+										<span>创建日期：</span>
+										<span className={style.informationcolor}>
+											{moment(overviewInfo.createdAt).format("yyyy-MM-DD")}
+										</span>
+									</div>
 								</div>
 							</div>
 							<div className={style.basicInformationRight}>
 								<div>
-                                <div className={style.otherInformationBoxRight}>项目总消费</div>
-                                <div><span className={style.numberDisplay}>{overviewInfo.projectCost?.toFixed(2)}</span>元</div>
+									<div className={style.otherInformationBoxRight}>
+										项目总消费
+									</div>
+									<div>
+										<span className={style.numberDisplay}>
+											{overviewInfo.projectCost?.toFixed(2)}
+										</span>
+										元
+									</div>
 								</div>
 								<div className={style.verticalLine}></div>
 								<div>
-                                <div className={style.otherInformationBoxRight}>项目剩余预算</div>
-                                <div><span className={style.numberDisplay}>{overviewInfo.projectRemainingBudget?.toFixed(2)}</span>元</div>
+									<div className={style.otherInformationBoxRight}>
+										项目剩余预算
+									</div>
+									<div>
+										<span className={style.numberDisplay}>
+											{overviewInfo.projectRemainingBudget?.toFixed(2)}
+										</span>
+										元
+									</div>
 								</div>
 								<div className={style.verticalLine}></div>
 								<div>
-                                <div className={style.otherInformationBoxRight} style={{ marginRight: '20px' }}>项目存储大小</div>
+									<div
+										className={style.otherInformationBoxRight}
+										style={{ marginRight: "20px" }}
+									>
+										项目存储大小
+									</div>
 									<div>
-                                    <span className={style.numberDisplay}>{overviewInfo.projectStorage !== undefined ? storageUnitFromB(overviewInfo.projectStorage).data : ''}</span>
-                                    {overviewInfo.projectStorage !== undefined ? storageUnitFromB(overviewInfo.projectStorage).unit : ''}
+										<span className={style.numberDisplay}>
+											{overviewInfo.projectStorage !== undefined
+												? storageUnitFromB(overviewInfo.projectStorage).data
+												: ""}
+										</span>
+										{overviewInfo.projectStorage !== undefined
+											? storageUnitFromB(overviewInfo.projectStorage).unit
+											: ""}
 									</div>
 								</div>
 							</div>
@@ -153,6 +199,7 @@ const ProjectOverview = observer(() => {
 								sx={{ width: 340 }}
 							/>
 						</div>
+					</div>
 					<div className={style.taskDisplay}>
 						{/* 任务列表为空展示 */}
 						{taskList.length === 0 && (
@@ -162,8 +209,10 @@ const ProjectOverview = observer(() => {
 							</div>
 						)}
 						{/* 任务列表卡片渲染 */}
-                        {taskList.length > 0 && taskList.map((item: any) => {
-                            return <TaskCard
+						{taskList.length > 0 &&
+							taskList.map((item: any) => {
+								return (
+									<TaskCard
 										id={item.id}
 										name={item.name}
 										creator={item.creator}
@@ -175,14 +224,14 @@ const ProjectOverview = observer(() => {
 										outputs={item.outputs}
 										key={item.id}
 									/>
+								);
 							})}
 					</div>
 				</>
 			);
 		}
-
 	} else {
 		return <NoProject />;
 	}
-})
-export default ProjectOverview
+});
+export default ProjectOverview;
\ No newline at end of file

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

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-09-01 14:09:34
+ * @LastEditTime: 2022-09-01 16:14:10
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -13,12 +13,17 @@ import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import { Box, OutlinedInput } from "@mui/material";
 
 import Dialog from "@/components/mui/MyDialog";
-import { IResponse, useHttp } from "@/api/http";
+import useMyRequest from "@/hooks/useMyRequest";
 import { useStores } from "@/store";
 import { useMessage } from "@/components/MySnackbar";
 import MySelect, { IOption } from "@/components/mui/MySelect";
 import MyTable from "@/components/mui/MyTable";
 import SearchInput from "@/components/BusinessComponents/SearchInput";
+import {
+	addProjectUser,
+	fetchProjectPower,
+	fetchProjectUsersList,
+} from "@/api/project_api";
 
 interface IProps {
 	setAddMemberDialog: (val: boolean) => void;
@@ -29,7 +34,6 @@ interface IProps {
 const AddMember = observer((props: IProps) => {
 	const { addMemberDialog, setAddMemberDialog, getTableList } = props;
 
-	const http = useHttp();
 	const { currentProjectStore } = useStores();
 
 	const [tableData, setTableData] = useState([]);
@@ -76,14 +80,6 @@ const AddMember = observer((props: IProps) => {
 		];
 	}, [changePermission, selectOptions]);
 
-	useEffect(() => {
-		if (addMemberDialog) {
-			http.get<IResponse<any>>("/cpp/project/listroles").then((res) => {
-				setSelectOptions(res.data);
-			});
-		}
-	}, [addMemberDialog, http]);
-
 	/** 过滤表格数据 */
 	useEffect(() => {
 		if (!!projectMember) {
@@ -97,18 +93,48 @@ const AddMember = observer((props: IProps) => {
 		}
 	}, [projectMember, tableData]);
 
+	// 获取表格数据接口
+	const { run: getProjectUsersList } = useMyRequest(fetchProjectUsersList, {
+		onSuccess: (res: any) => {
+			setTableData(res?.data);
+		},
+	});
+
+	// 获取项目权限
+	const { run: getProjectPower } = useMyRequest(fetchProjectPower, {
+		onSuccess: (res: any) => {
+			setSelectOptions(res.data);
+		},
+	});
+
+	// 添加项目成员
+	const { run: saveProjectUser } = useMyRequest(addProjectUser, {
+		onSuccess: (res: any) => {
+			const { errorCode } = res;
+			if (errorCode === 0) {
+				Message.success("新增成功！");
+				getTableList();
+				setAddMemberDialog(false);
+			}
+		},
+	});
+
+	useEffect(() => {
+		if (addMemberDialog) {
+			getProjectPower();
+		}
+	}, [addMemberDialog, getProjectPower]);
+
 	/** 获取表格数据 */
 	useEffect(() => {
 		if (!addMemberDialog) return;
 		const projectInfo = toJS(currentProjectStore?.currentProjectInfo);
-		http
-			.get<IResponse<any>>("/cpp/project/listusers", {
-				params: { id: projectInfo?.id || "" },
-			})
-			.then((res) => {
-				setTableData(res?.data);
-			});
-	}, [currentProjectStore?.currentProjectInfo, http, addMemberDialog]);
+		getProjectUsersList({ id: projectInfo?.id || "" });
+	}, [
+		currentProjectStore?.currentProjectInfo,
+		addMemberDialog,
+		getProjectUsersList,
+	]);
 
 	const onClose = (event: any = {}, reason: any = "other") => {
 		// 点击弹窗外不关闭弹窗
@@ -124,19 +150,7 @@ const AddMember = observer((props: IProps) => {
 			return checkData.includes(item?.username);
 		});
 		if (params.length) {
-			http
-				.put<IResponse<any>>(
-					`/cpp/project/updatemember?id=${projectInfo?.id || ""}`,
-					params
-				)
-				.then((res) => {
-					const { errorCode } = res;
-					if (errorCode === 0) {
-						Message.success("新增成功！");
-						getTableList();
-						setAddMemberDialog(false);
-					}
-				});
+			saveProjectUser(projectInfo?.id || "", params);
 		} else {
 			Message.info("请先选择项目成员！");
 		}
@@ -162,6 +176,9 @@ const AddMember = observer((props: IProps) => {
 					/>
 					<div style={{ overflow: "overlay", maxHeight: 400 }}>
 						<MyTable
+							noDataText={
+								projectMember ? `暂无 "${projectMember}" 搜索结果` : undefined
+							}
 							tableContainerStyle={{ height: 346 }}
 							checkboxData={(val: string[]) => setCheckData(val)}
 							param="username"

src/views/Project/ProjectSubmitWork/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-21 20:03:56
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-08-17 10:58:02
+ * @LastEditTime: 2022-09-01 14:39:36
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -223,6 +223,7 @@ const ProjectSubmitWork = observer(() => {
 				promotedParameters,
 			});
 		} else {
+			handleCancel();
 			Message.error("请完善算子信息后提交任务");
 		}
 	};

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

@@ -108,3 +108,8 @@
 	background: #f0f2f5;
 	border-radius: 4px;
 }
+.pagination {
+	padding: 19px 0;
+	display: flex;
+	justify-content: end;
+}

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

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-08-22 15:33:02
+ * @LastEditTime: 2022-09-01 16:35:02
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -12,6 +12,7 @@ import { useNavigate } from "react-router-dom";
 import { Box, Typography } from "@mui/material";
 import OutlinedInput from "@mui/material/OutlinedInput";
 import { TablePagination } from "@mui/material";
+import MyPagination from "@/components/mui/MyPagination";
 
 import MySelect from "@/components/mui/MySelect";
 import SimpleDialog from "./components/simpleDialog";
@@ -87,13 +88,13 @@ const ProjectMembers = observer(() => {
 	const [jobData, setJobData] = useState("");
 	const [openDialog, setOpenDialog] = useState(false);
 	const [dialogType, setDialogType] = useState("del");
+	const [loading, setLoading] = useState(false);
 	// 获取作业列表
-	const { run: getWorkflowJobInfo, loading } = useMyRequest(
-		getWorkflowJobList,
-		{
+	const { run: getWorkflowJobInfo } = useMyRequest(getWorkflowJobList, {
 		onSuccess: (result: any) => {
+			setLoading(false);
 			setJobList(result.data.content);
-				setCount(result.data.totalElements);
+			setCount(result.data.totalPages - 1);
 			timer && clearTimeout(timer as number);
 			timer = null;
 			timer = setTimeout(() => {
@@ -106,8 +107,7 @@ const ProjectMembers = observer(() => {
 				});
 			}, 60000);
 		},
-		}
-	);
+	});
 
 	useEffect(() => {
 		return () => {
@@ -177,11 +177,11 @@ const ProjectMembers = observer(() => {
 		});
 	}, [projectId, getWorkflowJobInfo]);
 
-	const handleChangePage = (event: any, newPage: any) => {
-		setPage(newPage);
+	const handleChangePage = (newPage: any) => {
+		setPage(newPage - 1);
 		getWorkflowJobInfo({
 			projectId: currentProjectStore.currentProjectInfo.id as string,
-			page: newPage,
+			page: newPage - 1,
 			size: size,
 			name: jobName,
 			state: currency === "ALL" ? "" : currency,
@@ -296,6 +296,7 @@ const ProjectMembers = observer(() => {
 	const handleKeyWordChangeKeyUp = (e: any) => {
 		if (e.keyCode === 13) {
 			setJobName(e.target.value);
+			setLoading(true);
 		}
 	};
 
@@ -364,6 +365,7 @@ const ProjectMembers = observer(() => {
 							name: jobName,
 							state: currency === "ALL" ? "" : currency,
 						});
+						setLoading(true);
 					}}
 				>
 					<img alt="" src={onload} />
@@ -371,7 +373,7 @@ const ProjectMembers = observer(() => {
 			</Box>
 
 			<Box className={styles.body} style={{ position: "relative" }}>
-				<MyCircularProgress loading={loading} />
+				<MyCircularProgress loading={loading}>
 					{jobList.length === 0 && !loading && (
 						<Box
 							sx={{
@@ -393,7 +395,10 @@ const ProjectMembers = observer(() => {
 					{jobList.length > 0 &&
 						jobList.map((item: any, key) => {
 							return (
-							<Box className={styles.tabBox} onClick={() => rowClick(item.id)}>
+								<Box
+									className={styles.tabBox}
+									onClick={() => rowClick(item.id)}
+								>
 									<Box className={styles.tabBoxInfo}>
 										<div className={styles.tabBoxTitle}>{item.name}</div>
 										<Box className={styles.tabBoxDescInfo}>
@@ -415,7 +420,7 @@ const ProjectMembers = observer(() => {
 									<Box className={styles.tabBoxMiddle}>
 										<img alt="" src={jobCost} />
 										<div className={styles.tabBoxTime}>
-										{item.jobCost ? item.jobCost.toFixed(2) : "--"}
+											{item.jobCost?.toFixed(2)}元
 										</div>
 									</Box>
 									<Box className={styles.tabBoxJobStatus}>
@@ -489,9 +494,17 @@ const ProjectMembers = observer(() => {
 								</Box>
 							);
 						})}
+				</MyCircularProgress>
+				<div className={styles.pagination}>
+					<MyPagination
+						page={page}
+						pageChange={handleChangePage}
+						count={count || jobList.length}
+					/>
+				</div>
 			</Box>
 
-			<TablePagination
+			{/* <TablePagination
 				rowsPerPageOptions={[5, 10, 20, 50]}
 				labelRowsPerPage={"每页行数："}
 				ActionsComponent={ActionsComponent}
@@ -501,7 +514,7 @@ const ProjectMembers = observer(() => {
 				page={page}
 				onPageChange={handleChangePage} //
 				onRowsPerPageChange={handleChangeRowsPerPage} //
-			/>
+			/> */}
 
 			<SimpleDialog
 				text={

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

@@ -38,6 +38,7 @@
 	flex: 1;
 	margin-right: 16px;
 	margin-bottom: 16px;
+	transition: box-shadow .2s cubic-bezier(0, 0, 1, 1);
 }
 
 .templateLiCustom {

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

 import { memo } from "react";
 import { Box, Typography } from "@mui/material";
-import Dialog from "@/components/mui/MyDialog";
+import MyDialog from "@/components/mui/MyDialog";
 
 const SimpleDialog = (props: any) => {
 	const { openDialog, closeDialog, onConfirm, text, title } = props;
 
 	return (
 		<>
-			<Dialog
+			<MyDialog
 				open={openDialog}
 				onClose={closeDialog}
 				onConfirm={onConfirm}
 				title={title}
+				okSx={{ background: "#FF4E4E", color: "#fff" }}
 			>
 				<Box>
 					<Typography sx={{ fontSize: "14px", fontWeight: "400" }}>
 						{text}
 					</Typography>
 				</Box>
-			</Dialog>
+			</MyDialog>
 		</>
 	);
 };

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

@@ -32,7 +32,6 @@
 .templateBlock {
 	height: 194px;
 	background: #ffffff;
-	box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.04);
 	border-radius: 4px;
 	border: 1px solid #ebedf0;
 	padding: 16px 20px;
@@ -43,6 +42,9 @@
 	position: relative;
 	box-sizing: border-box;
 }
+.templateBlock:hover {
+	box-shadow: 6px 8px 22px 0px rgba(0, 24, 57, 0.08);
+}
 
 @media screen and (max-width: 1220px) {
 	.template {

src/views/Project/components/ProjectListPopper/index.module.css

@@ -2,14 +2,6 @@
 	width: calc(100vw - 220px);
 	height: calc(100vh - 57px);
 	background-color: rgba(0, 0, 0, 0.5);
-	/* width: 260px;
-	height: calc(100vh - 57px); */
-	/* width: 260px;
-	height: calc(100vh - 57px);
-	background-color: #fff;
-	border-right: 1px solid #ebedf0;
-	display: flex;
-	flex-direction: column; */
 }
 
 .mainBox {
@@ -25,10 +17,11 @@
 .searchBox {
 	box-sizing: border-box;
 	height: 56px;
-	padding: 17px;
+	padding: 12px 8px 12px 24px;
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
+	align-items: center;
 }
 .searchButton {
 	width: 22px;
@@ -48,8 +41,11 @@
 }
 .add {
 	padding: 0 15px;
-	width: 22px;
-	height: 22px;
+	width: 32px;
+	height: 32px;
+}
+.add:hover {
+	border-radius: 4px;
 }
 .addIcon {
 	color: #1e2633;
@@ -59,6 +55,12 @@
 	overflow-y: overlay;
 	border-top: 1px solid #f0f2f5;
 }
+.noProjectBox {
+	color: #edeff2;
+	height: 48px;
+	line-height: 48px;
+	text-align: center;
+}
 .projectli {
 	cursor: pointer;
 }
@@ -96,13 +98,14 @@
 	overflow: hidden;
 }
 .projectOwnerTime {
+	font-size: 12px;
 	display: flex;
 	justify-content: space-between;
 }
 .projectOwner {
+	font-size: 12px;
 	color: #565c66;
 	line-height: 20px;
-	font-size: 14px;
 	margin-right: 32px;
 	max-width: 60px;
 	white-space: nowrap;
@@ -113,5 +116,5 @@
 .projectTime {
 	color: #8a9099;
 	line-height: 20px;
-	font-size: 14px;
+	font-size: 12px;
 }

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

@@ -2,7 +2,7 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-08-02 11:43:28
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-08-30 19:32:05
+ * @LastEditTime: 2022-09-01 19:49:39
  * @FilePath: /bkunyun/src/views/Project/components/ProjectListPopper/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -15,7 +15,7 @@ import classNames from "classnames";
 import { useStores } from "@/store/index";
 import moment from "moment";
 import React, { useMemo, useState } from "react";
-import { useClickAway } from 'ahooks';
+import { useClickAway } from "ahooks";
 import { toJS } from "mobx";
 import { observer } from "mobx-react-lite";
 
@@ -31,11 +31,33 @@ const ProjectListPopper = observer((props: any) => {
 		setName(e.target.value);
 	};
 
+	const getPower = (projectRole: string) => {
+		if (projectRole === "VIEWER") {
+			return "查看者";
+		} else if (projectRole === "USER") {
+			return "研究员";
+		} else if (projectRole === "MANAGER") {
+			return "管理员";
+		} else if (projectRole === "OWNER") {
+			return "所有者";
+		} else {
+			return "";
+		}
+	};
+
 	const list = useMemo(() => {
-		return projectList.filter((item: any) => {
+		return projectList
+			.filter((item: any) => {
 				return item.name?.indexOf(name) !== -1;
+			})
+			.map((item) => {
+				return {
+					...item,
+					power: getPower(item.projectRole || ""),
+				};
 			});
 	}, [projectList, name]);
+	console.log(list);
 
 	const handleProjectBox = (e: React.SyntheticEvent) => {
 		setProjectListOpen(false);
@@ -45,12 +67,16 @@ const ProjectListPopper = observer((props: any) => {
 		() => {
 			setProjectListOpen(false);
 		},
-    () => document.getElementById('use-click-projectList-mainBox'),
+		() => document.getElementById("use-click-projectList-mainBox")
 	);
 
 	return (
 		<div className={style.projectBox} onClick={handleProjectBox}>
-			<div className={style.mainBox} id="use-click-projectList-mainBox" onClick={(e: any)=>e.stopPropagation()}>
+			<div
+				className={style.mainBox}
+				id="use-click-projectList-mainBox"
+				onClick={(e: any) => e.stopPropagation()}
+			>
 				<div className={style.searchBox}>
 					<IconButton
 						type="submit"
@@ -59,7 +85,7 @@ const ProjectListPopper = observer((props: any) => {
 					>
 						<SearchIcon
 							className={style.searchIcon}
-							style={{ color: "rgba(153, 153, 153, 1)" }}
+							style={{ color: "#8A9099", fontSize: "22px" }}
 						/>
 					</IconButton>
 					<InputBase
@@ -68,6 +94,11 @@ const ProjectListPopper = observer((props: any) => {
 						inputProps={{ "aria-label": "请输入项目名称" }}
 						value={name}
 						onChange={nameChange}
+						sx={{
+							fontSize: "14px",
+							// color: "rgba(194, 198, 204, 1)",
+							height: "22px",
+						}}
 					/>
 					<IconButton
 						onClick={handleClickOpen}
@@ -79,7 +110,8 @@ const ProjectListPopper = observer((props: any) => {
 					</IconButton>
 				</div>
 				<div className={style.projectlist}>
-					{list.map((item: any) => {
+					{list.length ? (
+						list.map((item: any) => {
 							return (
 								<div
 									className={classNames({
@@ -90,12 +122,16 @@ const ProjectListPopper = observer((props: any) => {
 									onClick={() => handleChangeCurrentProject(item)}
 								>
 									<div className={style.projectliBorderBox}>
-									<img src={smallLogo} alt="" className={style.projectliLogo} />
+										<img
+											src={smallLogo}
+											alt=""
+											className={style.projectliLogo}
+										/>
 										<div className={style.projectliInfo}>
 											<div className={style.projectName}>{item.name}</div>
 											<div className={style.projectOwnerTime}>
 												<span className={style.projectOwner} title={item.owner}>
-												{item.owner}
+													{item.power}
 												</span>
 												<span className={style.projectTime}>
 													{moment(item.createdAt).format("YYYY-MM-DD")}
@@ -105,7 +141,10 @@ const ProjectListPopper = observer((props: any) => {
 									</div>
 								</div>
 							);
-					})}
+						})
+					) : (
+						<div className={style.noProjectBox}>暂无相关项目</div>
+					)}
 				</div>
 			</div>
 		</div>

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

 import _ from "lodash";
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import classNames from "classnames";
 
 import {
@@ -36,8 +36,9 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 	const [fileSelectType, setFileSelectType] = useState<FileSelectType>("path");
 	const [parameterName, setParameterName] = useState(""); // 当前算子中的parameters中正在编辑饿parameter（参数）
 	const resizeRef = useRef<HTMLDivElement>(null);
+	const [activeParamsTab, setActiveParamsTab] = useState<string>("");
 
-	const size = useSize(resizeRef) ;
+	const size = useSize(resizeRef);
 
 	// 文件夹路线选择器弹窗
 	const handleFileSelectOnClose = () => {
@@ -497,15 +498,13 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 	}, [basisParameters, seniorParameters, hardwareParameters, randerParameters]);
 
 	// 激活的参数组tab
-	const activeParamsTab = useMemo(() => {
+	useEffect(() => {
 		if (basisParameters.length !== 0) {
-			return "basis";
+			setActiveParamsTab("basis");
 		} else if (seniorParameters.length !== 0) {
-			return "senior";
+			setActiveParamsTab("senior");
 		} else if (hardwareParameters.length !== 0) {
-			return "hardware";
-		} else {
-			return "";
+			setActiveParamsTab("hardware");
 		}
 	}, [basisParameters, seniorParameters, hardwareParameters]);
 
@@ -648,11 +647,15 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 					<Tabs
 						tabList={paramsTabList}
 						value={activeParamsTab}
-						// defaultValue={activeParamsTab}
+						onChange={(val) => setActiveParamsTab(val)}
 						allowNullValue={true}
 						tabPanelSx={{ padding: "7px 0" }}
 					/>
-					{basisParameters.length === 0 && seniorParameters.length === 0 && hardwareParameters.length === 0 && (<div className={styles.noParameters}>暂无可设置参数</div>)}
+					{basisParameters.length === 0 &&
+						seniorParameters.length === 0 &&
+						hardwareParameters.length === 0 && (
+							<div className={styles.noParameters}>暂无可设置参数</div>
+						)}
 				</div>
 			)}
 			{!taskInfo && (