fix: Myselect组件样式修改

src/components/mui/MyButton.tsx

@@ -97,6 +97,14 @@ const theme = createTheme({
 				elevation: {},
 			},
 		},
+
+		MuiMenuItem: {
+			styleOverrides: {
+				root: {
+					"&:hover": { backgroundColor: "#ECF4FF " },
+				},
+			},
+		},
 	},
 });
 

src/components/mui/MyInput.tsx

@@ -2,66 +2,73 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-07-05 14:00:37
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-06 11:45:10
+ * @LastEditTime: 2022-07-20 20:33:09
  * @FilePath: /bkunyun/src/components/mui/MyInput.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 import TextField, { TextFieldProps } from "@mui/material/TextField";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
 
 interface MyInputProps extends Omit<TextFieldProps, "value"> {
-	value?: any;
-	inputSx?: any;
-	onChange?: any;
-	onFocus?: any;
-	label?: string;
+	value?: string;
 	variant?: "standard" | "filled" | "outlined";
-	id?: string;
 	size?: "small" | "medium";
 	placeholder?: string;
 	fullWidth?: boolean; // 宽度是否和容器一致
-	InputProps?: any; // input加前后icon可以用这个
 	error?: boolean;
-	helperText?: string;
 }
 
 const MyInput = (props: MyInputProps) => {
 	const {
-		inputSx = {},
-		value,
-		onChange,
-		onFocus,
-		label,
-		id,
-		variant,
 		size = "small",
 		placeholder = "请输入",
 		fullWidth = true,
-		InputProps,
 		error = false,
-		helperText,
-		disabled,
+		label,
+		...other
 	} = props;
 
+	const theme = createTheme({
+		components: {
+			MuiInputBase: {
+				styleOverrides: {
+					root: {
+						height: "36px",
+						// width: "40px",
+						// boxSizing: "border-box",
+						// padding: "0",
+					},
+				},
+			},
+			MuiOutlinedInput: {
+				styleOverrides: {
+					root: {
+						height: "36px",
+						lineHeight: "36px",
+					},
+					input: {
+						padding: "6.5px 14px",
+						verticalAlign: "middle",
+					},
+					notchedOutline: {
+						height: "36px",
+					},
+				},
+			},
+		},
+	});
+
 	return (
+		<ThemeProvider theme={theme}>
 			<TextField
-			{...props}
 				error={error}
-			helperText={helperText}
-			sx={{ ...inputSx }}
-			id={id}
-			label={label}
-			variant={variant}
-			onChange={onChange}
-			onFocus={onFocus}
 				size={size}
 				placeholder={placeholder}
 				fullWidth={fullWidth}
-			InputProps={{
-				...InputProps,
-			}}
-			disabled={disabled}
-			value={value}
+				label={label}
+				{...other}
 			/>
+		</ThemeProvider>
 	);
 };
 

src/components/mui/MySelect.tsx

@@ -2,16 +2,15 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2021-12-04 15:46:25
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-11 18:22:50
+ * @LastEditTime: 2022-07-21 15:54:59
  * @FilePath: /lionet-slb-pc/src/components/SearchView/components/Collapse.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
-import * as React from "react";
-import Box from "@mui/material/Box";
 import InputLabel from "@mui/material/InputLabel";
 import MenuItem from "@mui/material/MenuItem";
 import FormControl from "@mui/material/FormControl";
-import Select, { SelectProps } from "@mui/material/Select";
+import Select, { SelectChangeEvent, SelectProps } from "@mui/material/Select";
+import { createTheme, ThemeProvider } from "@mui/material";
 
 export interface IOption {
 	label: string;
@@ -36,9 +35,9 @@ export const optionsTransform = (
 
 interface IProps
 	extends Omit<SelectProps, "value" | "options" | "onChange" | "title"> {
-  value?: IOption;
+	value?: string;
 	options: IOption[];
-  onChange?: (val: IOption) => void;
+	onChange?: (val: string) => void;
 	/** 类型变种 */
 	variant?: "standard" | "outlined" | "filled";
 	/** title */
@@ -47,19 +46,64 @@ interface IProps
 	isTitle?: boolean;
 }
 export default function MySelect(props: IProps) {
-  const { value, options, onChange, title, isTitle = false, variant } = props;
+	const {
+		value,
+		options,
+		title,
+		isTitle = false,
+		variant = "outlined",
+		multiple = false,
+		onChange,
+		...other
+	} = props;
 
-  const handleChange = (event: any) => {
-    const newValue = options?.filter((item) => {
-      return item.value === event.target.value;
+	const theme = createTheme({
+		components: {
+			MuiInputBase: {
+				styleOverrides: {
+					root: {
+						height: "36px",
+					},
+				},
+			},
+
+			MuiOutlinedInput: {
+				styleOverrides: {
+					root: {
+						":hover": {
+							"& .MuiOutlinedInput-notchedOutline": {
+								borderColor: "#1370ff",
+							},
+						},
+					},
+				},
+			},
+
+			MuiInputLabel: {
+				styleOverrides: {
+					root: {
+						top: "-9px",
+					},
+				},
+			},
+
+			MuiSelect: {
+				styleOverrides: {
+					select: {
+						padding: "6.5px 14px",
+						fontSize: "14px",
+					},
+				},
+			},
+		},
 	});
-    if (onChange) {
-      onChange(newValue[0] || { label: "", value: "" });
-    }
+
+	const handleChange = (e: SelectChangeEvent<unknown>) => {
+		onChange && onChange(e.target.value as string);
 	};
 
 	return (
-    <Box sx={{ minWidth: 120 }}>
+		<ThemeProvider theme={theme}>
 			<FormControl fullWidth variant={variant}>
 				{isTitle ? (
 					<InputLabel id="demo-simple-select-label">
@@ -69,10 +113,11 @@ export default function MySelect(props: IProps) {
 				<Select
 					labelId="demo-simple-select-label"
 					id="demo-simple-select"
-          label={title || "请选择"}
+					label={title || ""}
 					size="small"
-          {...props}
-          value={value?.value}
+					multiple={multiple}
+					{...other}
+					value={value || ""}
 					onChange={handleChange}
 				>
 					{options.length
@@ -86,6 +131,6 @@ export default function MySelect(props: IProps) {
 						: null}
 				</Select>
 			</FormControl>
-    </Box>
+		</ThemeProvider>
 	);
 }

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: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-16 21:15:59
+ * @LastEditTime: 2022-07-21 11:28:21
  * @FilePath: /bkunyun/src/views/ConsoleLayout/components/TransferList/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -32,10 +32,7 @@ const TranSferList = observer(() => {
 				<Box style={{ color: "#8A9099" }}>请勿在上传过程中刷新页面！</Box>
 				<MySelect
 					variant="standard"
-          value={{
-            label: "默认线路",
-            value: "default",
-          }}
+					value={"default"}
 					onChange={() => console.log(11)}
 					options={[
 						{

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: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-15 19:04:11
+ * @LastEditTime: 2022-07-21 11:25:07
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -39,9 +39,9 @@ const AddMember = observer((props: IProps) => {
 	const Message = useMessage();
 
 	const changePermission = useCallback(
-		(val: IOption, index: number) => {
+		(val: string, index: number) => {
 			const tableDataIndex = tableData[index] as any;
-			const newVal = { ...tableDataIndex, projectRole: val.value };
+			const newVal = { ...tableDataIndex, projectRole: val };
 			const newTableData = _.cloneDeep(tableData);
 			newTableData.splice(index, 1, newVal);
 			setTableData(newTableData);
@@ -64,11 +64,7 @@ const AddMember = observer((props: IProps) => {
 					return (
 						<MySelect
 							input={<OutlinedInput />}
-							value={
-								defaultValue?.length
-									? defaultValue[0]
-									: { value: "VIEWER", label: "查看者" }
-							}
+							value={defaultValue?.length ? defaultValue[0]?.value : "VIEWER"}
 							onChange={(val) => changePermission(val, index)}
 							options={selectOptions}
 							size="small"

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

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-11 15:25:23
+ * @LastEditTime: 2022-07-21 11:34:55
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -32,7 +32,7 @@ const ChangePermission = observer((props: IProps) => {
 	const http = useHttp();
 
 	const [selectOptions, setSelectOptions] = useState<IOption[]>([]);
-	const [selectValue, setSelectValue] = useState<IOption | undefined>();
+	const [selectValue, setSelectValue] = useState<string | undefined>();
 
 	useEffect(() => {
 		if (permissionDialog?.isShow) {
@@ -62,7 +62,7 @@ const ChangePermission = observer((props: IProps) => {
 			.put<IResponse<any>>(
 				`/cpp/project/updateuserrole?id=${projectInfo?.id || ""}&username=${
 					permissionDialog.username
-				}&role=${selectValue?.value}`
+				}&role=${selectValue}`
 			)
 			.then((res) => {
 				const { errorCode } = res;
@@ -79,9 +79,9 @@ const ChangePermission = observer((props: IProps) => {
 			(every) => every.value === permissionDialog?.projectRole
 		);
 		if (defaultValue?.length) {
-			setSelectValue(defaultValue[0]);
+			setSelectValue(defaultValue[0]?.value);
 		} else {
-			setSelectValue({ value: "VIEWER", label: "查看者" });
+			setSelectValue("VIEWER");
 		}
 	}, [permissionDialog, selectOptions]);
 	return (
@@ -95,6 +95,7 @@ const ChangePermission = observer((props: IProps) => {
 				<div style={{ marginTop: 12 }}>
 					<MySelect
 						title="项目权限"
+						isTitle={true}
 						value={selectValue}
 						onChange={changePermission}
 						options={selectOptions}