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 (
-		<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}
-		/>
+		<ThemeProvider theme={theme}>
+			<TextField
+				error={error}
+				size={size}
+				placeholder={placeholder}
+				fullWidth={fullWidth}
+				label={label}
+				{...other}
+			/>
+		</ThemeProvider>
 	);
 };
 

src/components/mui/MySelect.tsx

@@ -2,90 +2,135 @@
  * @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;
-  value: string;
-  disabled?: boolean;
+	label: string;
+	value: string;
+	disabled?: boolean;
 }
 
 export const optionsTransform = (
-  arr: Array<any>,
-  labelKey: string = "label",
-  valueKey: string = "value",
-  disabledKey: string = "disabled"
+	arr: Array<any>,
+	labelKey: string = "label",
+	valueKey: string = "value",
+	disabledKey: string = "disabled"
 ): Array<IOption> => {
-  return arr.map((item: any) => {
-    return {
-      label: item[labelKey],
-      value: item[valueKey],
-      disabled: item[disabledKey],
-    };
-  });
+	return arr.map((item: any) => {
+		return {
+			label: item[labelKey],
+			value: item[valueKey],
+			disabled: item[disabledKey],
+		};
+	});
 };
 
 interface IProps
-  extends Omit<SelectProps, "value" | "options" | "onChange" | "title"> {
-  value?: IOption;
-  options: IOption[];
-  onChange?: (val: IOption) => void;
-  /** 类型变种 */
-  variant?: "standard" | "outlined" | "filled";
-  /** title */
-  title?: string;
-  /** 是否显示title */
-  isTitle?: boolean;
+	extends Omit<SelectProps, "value" | "options" | "onChange" | "title"> {
+	value?: string;
+	options: IOption[];
+	onChange?: (val: string) => void;
+	/** 类型变种 */
+	variant?: "standard" | "outlined" | "filled";
+	/** title */
+	title?: string;
+	/** 是否显示title */
+	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;
-    });
-    if (onChange) {
-      onChange(newValue[0] || { label: "", value: "" });
-    }
-  };
+	const theme = createTheme({
+		components: {
+			MuiInputBase: {
+				styleOverrides: {
+					root: {
+						height: "36px",
+					},
+				},
+			},
 
-  return (
-    <Box sx={{ minWidth: 120 }}>
-      <FormControl fullWidth variant={variant}>
-        {isTitle ? (
-          <InputLabel id="demo-simple-select-label">
-            {title || "请选择"}
-          </InputLabel>
-        ) : null}
-        <Select
-          labelId="demo-simple-select-label"
-          id="demo-simple-select"
-          label={title || "请选择"}
-          size="small"
-          {...props}
-          value={value?.value}
-          onChange={handleChange}
-        >
-          {options.length
-            ? options?.map((item: IOption) => {
-                return (
-                  <MenuItem value={item.value} disabled={item?.disabled}>
-                    {item.label}
-                  </MenuItem>
-                );
-              })
-            : null}
-        </Select>
-      </FormControl>
-    </Box>
-  );
+			MuiOutlinedInput: {
+				styleOverrides: {
+					root: {
+						":hover": {
+							"& .MuiOutlinedInput-notchedOutline": {
+								borderColor: "#1370ff",
+							},
+						},
+					},
+				},
+			},
+
+			MuiInputLabel: {
+				styleOverrides: {
+					root: {
+						top: "-9px",
+					},
+				},
+			},
+
+			MuiSelect: {
+				styleOverrides: {
+					select: {
+						padding: "6.5px 14px",
+						fontSize: "14px",
+					},
+				},
+			},
+		},
+	});
+
+	const handleChange = (e: SelectChangeEvent<unknown>) => {
+		onChange && onChange(e.target.value as string);
+	};
+
+	return (
+		<ThemeProvider theme={theme}>
+			<FormControl fullWidth variant={variant}>
+				{isTitle ? (
+					<InputLabel id="demo-simple-select-label">
+						{title || "请选择"}
+					</InputLabel>
+				) : null}
+				<Select
+					labelId="demo-simple-select-label"
+					id="demo-simple-select"
+					label={title || ""}
+					size="small"
+					multiple={multiple}
+					{...other}
+					value={value || ""}
+					onChange={handleChange}
+				>
+					{options.length
+						? options?.map((item: IOption) => {
+								return (
+									<MenuItem value={item.value} disabled={item?.disabled}>
+										{item.label}
+									</MenuItem>
+								);
+						  })
+						: null}
+				</Select>
+			</FormControl>
+		</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
  */
@@ -17,42 +17,39 @@ import { observer } from "mobx-react-lite";
 import { toJS } from "mobx";
 
 const TranSferList = observer(() => {
-  const uploadInfoStore = toJS(useGlobalStore("fileListStore"));
+	const uploadInfoStore = toJS(useGlobalStore("fileListStore"));
 
-  return (
-    <Box style={{ width: 520, padding: 20 }}>
-      <MyTitle title="传输列表" />
-      <Box
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-        }}
-      >
-        <Box style={{ color: "#8A9099" }}>请勿在上传过程中刷新页面！</Box>
-        <MySelect
-          variant="standard"
-          value={{
-            label: "默认线路",
-            value: "default",
-          }}
-          onChange={() => console.log(11)}
-          options={[
-            {
-              label: "默认线路",
-              value: "default",
-            },
-          ]}
-          size="small"
-        />
-      </Box>
-      <Box style={{ height: 400, overflowY: "auto" }}>
-        {uploadInfoStore?.fileList.map((item) => {
-          return <FileItem fileItemInfo={item} key={item.id} />;
-        })}
-      </Box>
-    </Box>
-  );
+	return (
+		<Box style={{ width: 520, padding: 20 }}>
+			<MyTitle title="传输列表" />
+			<Box
+				style={{
+					display: "flex",
+					justifyContent: "space-between",
+					alignItems: "center",
+				}}
+			>
+				<Box style={{ color: "#8A9099" }}>请勿在上传过程中刷新页面！</Box>
+				<MySelect
+					variant="standard"
+					value={"default"}
+					onChange={() => console.log(11)}
+					options={[
+						{
+							label: "默认线路",
+							value: "default",
+						},
+					]}
+					size="small"
+				/>
+			</Box>
+			<Box style={{ height: 400, overflowY: "auto" }}>
+				{uploadInfoStore?.fileList.map((item) => {
+					return <FileItem fileItemInfo={item} key={item.id} />;
+				})}
+			</Box>
+		</Box>
+	);
 });
 
 export default memo(TranSferList);

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}