Merge branch 'feat-20220801' of http://120.77.149.83/root/bkunyun into feat-20220801

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/MyInput.tsx

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

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/views/ConsoleLayout/index.module.css

@@ -54,6 +54,7 @@
 	z-index: 1002;
 }
 .productLi {
+	min-width: 142px;
 	height: 36px;
 	padding: 7px 50px 7px 16px;
 	font-size: 14px;
@@ -109,16 +110,6 @@
 	color: #8a9099;
 	transform: rotate(180deg);
 }
-/* .ArrowDropDownIconRoot {
-	color: #8a9099;
-	transition: all 0.2s !important;
-	transform: rotate(0);
-}
-
-.ArrowDropDownIconRootOpen {
-	color: #8a9099;
-	transform: rotate(180deg);
-} */
 
 .menuPaper {
 	border: 1px solid #f0f2f5;

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

@@ -72,7 +72,7 @@
 
 .taskProgress {
 	height: 32px;
-	margin: 12px 0;
+	margin: 12px 0 16px;
 }
 
 .progressInfo {
@@ -157,7 +157,7 @@
 	margin-right: 8px;
 }
 
-.outputTitle{
+.outputTitle {
 	display: inline-block;
 	height: 22px;
 	line-height: 22px;

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

@@ -9,8 +9,8 @@
 	display: flex;
 	justify-content: space-between;
 	margin: 0 24px;
-    padding: 20px 0;
-    border-bottom: 1px solid #EDEFF2;
+	padding: 24px 0 20px;
+	border-bottom: 1px solid #edeff2;
 }
 
 .basicInformationRight {
@@ -38,30 +38,30 @@
 }
 
 .informationcolor {
-    color: #8A9099;
+	color: #8a9099;
 }
 
 .otherInformationBox {
 	margin-right: 24px;
-    color: #565C66;
+	color: #565c66;
 }
 
 .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;
 }
@@ -96,7 +96,7 @@
 	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) => {
 		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" };
 		}
 	};
 
@@ -104,33 +105,77 @@ const ProjectOverview = observer(() => {
 						<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>
@@ -164,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}
@@ -177,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/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;
@@ -96,13 +92,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 +110,5 @@
 .projectTime {
 	color: #8a9099;
 	line-height: 20px;
-	font-size: 14px;
+	font-size: 12px;
 }

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

@@ -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}
@@ -95,7 +126,7 @@ const ProjectListPopper = observer((props: any) => {
 										<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")}