feat: MyTable组件修改

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

+.titleBox {
+	font-size: 18px;
+	padding-left: 24px;
+	line-height: 26px;
+	font-weight: 600;
+	color: #1e2633;
+	line-height: 48px;
+}
+.titleBox::after {
+	content: "|";
+	padding: 0 24px;
+	color: #dde1e6;
+}

src/components/mui/MyTabs/index.tsx

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-05-31 10:18:13
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-10-17 16:01:41
+ * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { memo, useCallback } from "react";
+import { isEqual } from "lodash";
+import { useState } from "react";
+import { Box } from "@mui/system";
+import Tab from "@mui/material/Tab";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+import { TabContext, TabList, TabPanel } from "@mui/lab";
+import { Typography } from "@mui/material";
+import classnames from "classnames";
+
+import styles from "./index.module.css";
+
+interface ITabList {
+	label: string;
+	value: string;
+	component: JSX.Element | React.ReactNode;
+	icon?: string;
+	iconed?: string;
+	iconHover?: string;
+	hide?: boolean;
+	disabled?: boolean;
+}
+
+interface IProps {
+	/** 标题 */
+	title?: string;
+	/** title样式class */
+	titleClass?: any;
+	/** 选中值 */
+	value?: string;
+	/** 值 */
+	onChange?: (val: string) => void;
+	/** tab页面数组 */
+	tabList: ITabList[];
+	/**  默认选中tab */
+	defaultValue?: string;
+	/**  面板样式 */
+	tabPanelSx?: any;
+	/**   是否允许空值 */
+	allowNullValue?: boolean;
+}
+
+const theme = createTheme({
+	components: {
+		MuiTab: {
+			styleOverrides: {
+				root: {
+					paddingLeft: 0,
+					paddingRight: 0,
+					paddingTop: "8px",
+					paddingBottom: "8px",
+					minWidth: "20px",
+					marginRight: "32px",
+					color: "#8A9099",
+					":hover": {
+						color: "#1E2633",
+					},
+					selected: {
+						color: "#1976d2",
+					},
+					"&.Mui-disabled": {
+						color: "#C2C6CC",
+					},
+				},
+			},
+		},
+		// #C2C6CC
+		MuiTabs: {
+			styleOverrides: {
+				indicator: {
+					backgroundColor: "#1370FF",
+				},
+			},
+		},
+	},
+});
+
+const Tabs = (props: IProps) => {
+	const {
+		tabList,
+		value,
+		defaultValue,
+		onChange,
+		allowNullValue = false,
+		tabPanelSx = { padding: "24px 0 0 0" },
+		title,
+		titleClass,
+	} = props;
+
+	const [tabValue, setTabValue] = useState(
+		defaultValue
+			? defaultValue
+			: allowNullValue
+			? ""
+			: tabList.filter((e) => !e.hide)[0].value
+	);
+
+	const [hoverValue, setHoverValue] = useState("");
+
+	const onTabChange = (val: string) => {
+		setTabValue(val);
+		onChange && onChange(val);
+	};
+
+	const getImgSrc = useCallback(
+		(item: ITabList) => {
+			let result = item.icon;
+			if (value === item.value || tabValue === item.value) {
+				result = item.iconed;
+			}
+			if (hoverValue === item.value) {
+				result = item.iconHover;
+			}
+			return result;
+		},
+		[hoverValue, value, tabValue]
+	);
+
+	const labelRender = (item: ITabList, key: number) => {
+		return (
+			<div
+				style={{ display: "flex", alignItems: "center" }}
+				onMouseOver={() => setHoverValue(item.value)}
+				onMouseOut={() => setHoverValue("")}
+			>
+				{item.icon ? (
+					<img
+						style={{ width: "16px", marginRight: "8px" }}
+						src={getImgSrc(item)}
+						alt=""
+					/>
+				) : (
+					""
+				)}
+				<Typography
+					sx={{
+						fontSize: "14px",
+						lineHeight: "22px",
+						height: "22px",
+						fontWeight: "400",
+					}}
+				>
+					{item.label}
+				</Typography>
+			</div>
+		);
+	};
+
+	return (
+		<ThemeProvider theme={theme}>
+			<TabContext value={value || tabValue}>
+				<Box sx={{ borderBottom: 1, borderColor: "#EDEFF2" }}>
+					<TabList
+						onChange={(e: any, val: string) => {
+							onTabChange(val);
+						}}
+					>
+						{title ? (
+							<span
+								className={classnames({
+									[styles.titleBox]: true,
+									[titleClass]: titleClass,
+								})}
+							>
+								{title}
+							</span>
+						) : null}
+						{tabList
+							?.filter((item) => !item.hide)
+							.map((item, key) => {
+								return (
+									<Tab
+										key={key}
+										label={labelRender(item, key)}
+										value={item.value || ""}
+										id={item.value}
+										disabled={item.disabled}
+									/>
+								);
+							})}
+					</TabList>
+				</Box>
+				{tabList
+					?.filter((item) => !item.hide)
+					.map((item) => {
+						return (
+							<TabPanel
+								sx={tabPanelSx}
+								value={item.value || ""}
+								key={item.value}
+							>
+								{item.component}
+							</TabPanel>
+						);
+					})}
+			</TabContext>
+		</ThemeProvider>
+	);
+};
+const handleEqual = (prvProps: IProps, nextProps: IProps) => {
+	if (isEqual(prvProps, nextProps)) {
+		return true;
+	}
+	return false;
+};
+
+export default memo(Tabs, handleEqual);

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

+/*
+ * @Author: 吴永生 15770852798@163.com
+ * @Date: 2022-10-17 14:35:11
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-10-17 14:45:31
+ * @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+// 应用环境
+import { useState } from "react";
+import style from "./index.module.css";
+import SearchInput from "@/components/BusinessComponents/SearchInput";
+import MySelect from "@/components/mui/MySelect";
+import MyButton from "@/components/mui/MyButton";
+
+const UserResourcesEnvironment = () => {
+	const [addOpen, setAddopen] = useState(false);
+	return (
+		<div className={style.environment}>
+			<div className={style.top}>
+				<div className={style.topLeft}>
+					<SearchInput sx={{ width: 340, marginRight: "16px" }}></SearchInput>
+					<MySelect
+						options={[
+							{
+								label: "环境类型",
+								value: "a",
+							},
+						]}
+						sx={{ width: "150px", height: "32px" }}
+					></MySelect>
+				</div>
+				<div className={style.topRight}>
+					<MyButton
+						text="构建应用环境"
+						img={
+							<span
+								style={{ fontSize: "14px", marginRight: "8px" }}
+								className="iconfont icon-dianzan"
+							></span>
+						}
+					></MyButton>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default UserResourcesEnvironment;