fix: MyTooltip组件开发

src/components/mui/MyTooltip.tsx

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-07-11 11:56:58
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-07-22 10:51:10
+ * @FilePath: /bkunyun/src/components/mui/MyTooltip.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { Tooltip, TooltipProps } from "@mui/material";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+
+interface IMyTooltipProps extends TooltipProps {
+	title: string;
+}
+
+const theme = createTheme({
+	components: {
+		MuiTooltip: {
+			styleOverrides: {
+				tooltip: {
+					backgroundColor: "rgba(7, 19, 38, .8)",
+					color: "#fff",
+				},
+				arrow: {
+					"&:before": {
+						backgroundColor: "#071326",
+						opacity: "0.8",
+					},
+				},
+			},
+		},
+	},
+});
+
+const MyTooltip = (props: IMyTooltipProps) => {
+	const { title, children, placement = "top", ...other } = props;
+	return (
+		<ThemeProvider theme={theme}>
+			<Tooltip
+				// interactive={true}
+				arrow
+				title={title}
+				placement={placement}
+				{...other}
+			>
+				{children}
+			</Tooltip>
+		</ThemeProvider>
+	);
+};
+
+export default MyTooltip;

src/views/Project/ProjectSubmitWork/ConfigForm/index.tsx

-import { ITemplateConfig, IRenderTasks } from "../interface";
-import styles from "./index.module.css";
-import MyInput from "@/components/mui/MyInput";
-import Tooltip from "@mui/material/Tooltip";
+import moment from "moment";
 import classnames from "classnames";
 import { useState, useMemo, useImperativeHandle } from "react";
+
+import { ITemplateConfig, IRenderTasks } from "../interface";
+import MyInput from "@/components/mui/MyInput";
 import FileSelect, {
 	FileSelectType,
 } from "@/components/BusinessComponents/FileSelect";
-import moment from "moment";
 import MySelect, { optionsTransform } from "../components/MySelect";
 import MyCheckBox from "@/components/mui/MyCheckBox";
 import MyRadio from "@/components/mui/MyRadio";
@@ -17,6 +16,9 @@ import questionMark from "@/assets/project/questionMark.svg";
 import tipsIcon from "@/assets/project/tipsIcon.svg";
 import jobSueIcon from "@/assets/project/jobSue.svg";
 import { IParameter } from "../interface";
+import MyTooltip from "@/components/mui/MyTooltip";
+
+import styles from "./index.module.css";
 
 type ConfigFormProps = {
 	templateConfigInfo?: ITemplateConfig;
@@ -360,13 +362,13 @@ const ConfigForm = (props: ConfigFormProps) => {
 								></MyCheckBox>
 							)}
 							{parameter.description && (
-								<Tooltip title={parameter.description} placement="top">
+								<MyTooltip title={parameter.description} placement="top">
 									<img
 										className={styles.parameterDesc}
 										src={questionMark}
 										alt=""
 									/>
-								</Tooltip>
+								</MyTooltip>
 							)}
 						</div>
 					</div>
@@ -466,9 +468,9 @@ const ConfigForm = (props: ConfigFormProps) => {
 								{task.title}
 							</span>
 							{task.description && (
-								<Tooltip title={task.description} placement="top">
+								<MyTooltip title={task.description} placement="top">
 									<img className={styles.taskDescIcon} src={tipsIcon} alt="" />
-								</Tooltip>
+								</MyTooltip>
 							)}
 						</div>
 						<div className={styles.taskConfigBox}>
@@ -479,13 +481,13 @@ const ConfigForm = (props: ConfigFormProps) => {
 										<div className={styles.flowTitle}>
 											{flow.title}
 											{flow.description && (
-												<Tooltip title={flow.description} placement="top">
+												<MyTooltip title={flow.description} placement="top">
 													<img
 														className={styles.flowDescIcon}
 														src={tipsIcon}
 														alt=""
 													/>
-												</Tooltip>
+												</MyTooltip>
 											)}
 										</div>
 										{randerParameters(

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

@@ -2,12 +2,11 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-07-12 11:20:29
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-15 10:48:22
+ * @LastEditTime: 2022-07-22 10:43:28
  * @FilePath: /bkunyun/src/views/Project/components/Flow/components/BatchNode.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 
-import { Tooltip } from "@mui/material";
 import classNames from "classnames";
 import { useMemo } from "react";
 import { Handle, Position } from "react-flow-renderer";
@@ -16,6 +15,7 @@ import { uuid } from "@/utils/util";
 import { IBatchNode } from "../../interface";
 
 import styles from "./index.module.css";
+import MyTooltip from "@/components/mui/MyTooltip";
 
 /** 自定义batch节点 */
 const BatchNode = (props: IBatchNode) => {
@@ -63,7 +63,7 @@ const BatchNode = (props: IBatchNode) => {
 			{inParamsArr?.length
 				? inParamsArr.map((item, index) => {
 						return (
-							<Tooltip title={item.name} key={uuid()}>
+							<MyTooltip title={item.name} key={uuid()}>
 								<Handle
 									id={item.name}
 									style={{
@@ -76,7 +76,7 @@ const BatchNode = (props: IBatchNode) => {
 									type="target"
 									position={Position.Top}
 								/>
-							</Tooltip>
+							</MyTooltip>
 						);
 				  })
 				: null}
@@ -93,7 +93,7 @@ const BatchNode = (props: IBatchNode) => {
 			{outParamsArr?.length
 				? outParamsArr.map((item, index) => {
 						return (
-							<Tooltip title={item.name} key={uuid()}>
+							<MyTooltip title={item.name} key={uuid()}>
 								<Handle
 									id={item.name}
 									style={{
@@ -104,7 +104,7 @@ const BatchNode = (props: IBatchNode) => {
 									type="source"
 									position={Position.Bottom}
 								/>
-							</Tooltip>
+							</MyTooltip>
 						);
 				  })
 				: null}

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

-import styles from "./index.module.css";
+import _ from "lodash";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import classNames from "classnames";
+
 import {
 	ITask,
 	IParameter,
 } from "../../../Project/ProjectSubmitWork/interface";
 import noTemplate from "@/assets/project/noTemplate.svg";
-import { useCallback, useEffect, useMemo, useState } from "react";
 import MyInput from "@/components/mui/MyInput";
-import Tooltip from "@mui/material/Tooltip";
 import MyCheckBox from "@/components/mui/MyCheckBox";
 import MySelect, {
 	optionsTransform,
 } from "../../../Project/ProjectSubmitWork/components/MySelect";
-import _ from "lodash";
 import FileSelect, {
 	FileSelectType,
 } from "@/components/BusinessComponents/FileSelect";
@@ -20,8 +20,10 @@ import questionMark from "@/assets/project/questionMark.svg";
 import fileSelectIcon from "@/assets/project/fileSelect.svg";
 import MySwitch from "@/components/mui/MySwitch";
 import Tabs from "@/components/mui/Tabs";
-import classNames from "classnames";
 import { getCustomTemplateParameterCheckResult } from "../../util";
+import MyTooltip from "@/components/mui/MyTooltip";
+
+import styles from "./index.module.css";
 
 type IParameterSettingProps = {
 	templateConfigInfo: ITask[];
@@ -395,7 +397,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 	const renderInput = useCallback(
 		(parameter: IParameter) => {
 			return (
-				<Tooltip title={parameter.description} placement="top">
+				<MyTooltip title={parameter.description} placement="top">
 					<div>
 						{parameter.domType.toLowerCase() === "file" && (
 							<MyInput
@@ -539,7 +541,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 							></MyCheckBox>
 						)}
 					</div>
-				</Tooltip>
+				</MyTooltip>
 			);
 		},
 		[handleParameterChange]
@@ -720,7 +722,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 				<div className={styles.inOutBox}>
 					<div className={styles.paramsTitle}>
 						输入
-						<Tooltip
+						<MyTooltip
 							title="当某个输入项为启用状态时，代表该输入将由模板使用者在使用的时候填写赋值；当为关闭状态时，代表该输入不需要使用者来填写赋值，而是将其它流程的结果传入。"
 							placement="right"
 						>
@@ -729,7 +731,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 								src={questionMark}
 								alt=""
 							/>
-						</Tooltip>
+						</MyTooltip>
 					</div>
 					<div className={styles.paramsList}>
 						{inParameters.map((parameter, index) => {
@@ -810,7 +812,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 				<div className={styles.paramsGroup}>
 					<div className={styles.paramsTitle}>
 						参数组
-						<Tooltip
+						<MyTooltip
 							title="当某个参数项为启用状态时，代表该参数将由模板使用者在使用的时候填写赋值；当为关闭状态时，代表该参数不需要使用者来填写赋值。"
 							placement="right"
 						>
@@ -819,7 +821,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 								src={questionMark}
 								alt=""
 							/>
-						</Tooltip>
+						</MyTooltip>
 					</div>
 					<Tabs
 						tabList={paramsTabList}