feat: 任务概览划入显示样式

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

@@ -27,6 +27,7 @@
 
 .cardLeft {
 	flex: 1;
+	cursor: pointer;
 	padding: 16px 24px;
 }
 

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

@@ -3,12 +3,12 @@ import { useNavigate } from "react-router-dom";
 import MyProgress from "@/components/mui/MyProgress";
 import style from "./index.module.css";
 
-import runTime from '../../../../assets/project/runTime.svg'
-import jobCostImg from '../../../../assets/project/jobCost.svg'
-import jobSue from '../../../../assets/project/jobSue.svg'
-import jobFail from '../../../../assets/project/jobFail.svg'
-import jobRun from '../../../../assets/project/jobRun.svg'
-import jobCadence from '../../../../assets/project/jobCadence.svg'
+import runTime from "../../../../assets/project/runTime.svg";
+import jobCostImg from "../../../../assets/project/jobCost.svg";
+import jobSue from "../../../../assets/project/jobSue.svg";
+import jobFail from "../../../../assets/project/jobFail.svg";
+import jobRun from "../../../../assets/project/jobRun.svg";
+import jobCadence from "../../../../assets/project/jobCadence.svg";
 import fileIcon from "@/assets/project/fileIcon.svg";
 import dataSetIcon from "@/assets/project/dataSetIcon.svg";
 
@@ -25,8 +25,20 @@ type TaskCardProps = {
 };
 
 const TaskCard = (props: TaskCardProps) => {
-    const { id, name, creator, state, completeNum, totalNum, costTime, jobCost, outputs } = props;
+	const {
+		id,
+		name,
+		creator,
+		state,
+		completeNum,
+		totalNum,
+		costTime,
+		jobCost,
+		outputs,
+	} = props;
 	const navigate = useNavigate();
+	const [displayTitleBlue, setDisplayTitleBlue] = useState<boolean>(false);
+
 	const randerOutputs = useMemo(() => {
 		if (outputs) {
 			let result = Object.keys(outputs);
@@ -45,10 +57,10 @@ const TaskCard = (props: TaskCardProps) => {
 		} else {
 			return [];
 		}
-    }, [outputs])
+	}, [outputs]);
 	// 结果文件跳转
 	const goToProjectData = (info: any) => {
-        let { path = '', type = '' } = info
+		let { path = "", type = "" } = info;
 		const lastIndex = path.lastIndexOf("/");
 		// /projectData
 		// dataType
@@ -57,49 +69,49 @@ const TaskCard = (props: TaskCardProps) => {
 		}
 		path = path.slice(12);
 		navigate(`/product/cadd/projectData`, {
-            state: { pathName: path || '/', dataType: type },
+			state: { pathName: path || "/", dataType: type },
 		});
-    }
+	};
 	// 跳转详情页
 	const gotoDetail = (id: string) => {
 		navigate(`/product/cadd/projectJobDetail`, {
-            state: { taskId: id, from: 'projectOverview' },
+			state: { taskId: id, from: "projectOverview" },
 		});
-    }
+	};
 	// 渲染状态图标
 	const renderStatusIcon = (data: string) => {
 		switch (data) {
 			case "SUBMITTED":
-                return jobRun
+				return jobRun;
 			case "RUNNING":
-                return jobRun
+				return jobRun;
 			case "ABORTED":
-                return jobCadence
+				return jobCadence;
 			case "FAILED":
-                return jobFail
+				return jobFail;
 			case "SUCCEEDED":
-                return jobSue
+				return jobSue;
 			default:
-                return jobCadence
-        }
+				return jobCadence;
 		}
+	};
 	// 渲染状态
 	const renderStatusText = (data: string) => {
 		switch (data) {
 			case "SUBMITTED":
 				return "正在启动";
 			case "RUNNING":
-                return '正在运行'
+				return "正在运行";
 			case "ABORTED":
-                return '运行终止'
+				return "运行终止";
 			case "FAILED":
-                return '运行失败'
+				return "运行失败";
 			case "SUCCEEDED":
-                return '运行成功'
+				return "运行成功";
 			default:
-                return '未知'
-        }
+				return "未知";
 		}
+	};
 	// 渲染字体颜色
 	const renderTextColor = (data: string) => {
 		switch (data) {
@@ -151,12 +163,33 @@ const TaskCard = (props: TaskCardProps) => {
 				return "disable";
 		}
 	}, []);
-    return <div className={style.cardBox}>
-        <div className={style.cardLeft}>
+	return (
+		<div className={style.cardBox}>
+			<div
+				className={style.cardLeft}
+				onClick={() => gotoDetail(id)}
+				onMouseOver={() => setDisplayTitleBlue(true)}
+				onMouseOut={() => setDisplayTitleBlue(false)}
+			>
 				<div className={style.topLine}>
-                <div className={style.taskName} onClick={() => gotoDetail(id)}>{name}</div>
-                <div className={style.taskStatus} style={{ color: renderTextColor(state), background: renderBackgroundColor(state) }}>
-                    <img src={renderStatusIcon(state)} alt="" className={style.statusImg} />
+					<div
+						className={style.taskName}
+						style={displayTitleBlue ? { color: "#1370ff" } : undefined}
+					>
+						{name}
+					</div>
+					<div
+						className={style.taskStatus}
+						style={{
+							color: renderTextColor(state),
+							background: renderBackgroundColor(state),
+						}}
+					>
+						<img
+							src={renderStatusIcon(state)}
+							alt=""
+							className={style.statusImg}
+						/>
 						<span>{renderStatusText(state)}</span>
 					</div>
 				</div>
@@ -164,9 +197,14 @@ const TaskCard = (props: TaskCardProps) => {
 				<div className={style.taskProgress}>
 					<div className={style.progressInfo}>
 						<div>Progress</div>
-                    <div style={{ color: renderTextColor(state) }}>{completeNum + "/" + totalNum}</div>
+						<div style={{ color: renderTextColor(state) }}>
+							{completeNum + "/" + totalNum}
 						</div>
-                <MyProgress color={renderProgressColor(state)} value={(completeNum / totalNum) * 100} />
+					</div>
+					<MyProgress
+						color={renderProgressColor(state)}
+						value={(completeNum / totalNum) * 100}
+					/>
 				</div>
 				<div className={style.bottomLine}>
 					<img alt="" src={runTime} />
@@ -179,24 +217,31 @@ const TaskCard = (props: TaskCardProps) => {
 				<div className={style.arrow}></div>
 			</div>
 			<div className={style.cardRight}>
-            {randerOutputs.length === 0 ? <div className={style.noResult}>暂无结果文件</div> :
+				{randerOutputs.length === 0 ? (
+					<div className={style.noResult}>暂无结果文件</div>
+				) : (
 					<div className={style.resultBox}>
 						{randerOutputs.map((item, index) => {
-                        return <div key={index} className={style.result} onClick={() => goToProjectData(item)}>
+							return (
+								<div
+									key={index}
+									className={style.result}
+									onClick={() => goToProjectData(item)}
+								>
 									<img
 										className={style.outputLeftImg}
-                                src={
-                                    item?.type === "file" ? fileIcon : dataSetIcon
-                                }
+										src={item?.type === "file" ? fileIcon : dataSetIcon}
 										alt=""
 									/>
 									<span className={style.outputTitle}>{item?.name}</span>
 								</div>
+							);
 						})}
 					</div>
-            }
+				)}
 			</div>
 		</div>
-}
+	);
+};
 
-export default TaskCard
\ No newline at end of file
+export default TaskCard;