ui: 新建项目ui优化

src/components/mui/MyInput.tsx

@@ -37,27 +37,36 @@ const MyInput = (props: MyInputProps) => {
 						fontSize: "14px",
 						"&.MuiInputBase-sizeSmall": {
 							height: "32px",
-							"& .MuiOutlinedInput-notchedOutline": {
-								height: "34px",
 						},
 					},
+					multiline: {
+						height: "auto",
+						textarea: {
+							padding: 0,
 						},
 					},
+					input: {},
+				},
 			},
-
 			MuiInputLabel: {
 				styleOverrides: {
 					root: {
-						top: label ? "-5px" : "-10px",
+						top: "-9px",
+					},
+					shrink: {
+						top: 0,
+					},
+					sizeSmall: {
+						top: "-5px",
 					},
 				},
 			},
 			MuiOutlinedInput: {
 				styleOverrides: {
 					root: {
-						height: "36px",
-						lineHeight: "36px",
-						paddingRight: "12px",
+						"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+							borderWidth: "1px",
+						},
 						":hover": {
 							"& .MuiOutlinedInput-notchedOutline": error
 								? {}
@@ -70,9 +79,6 @@ const MyInput = (props: MyInputProps) => {
 						padding: "6.5px 12px",
 						verticalAlign: "middle",
 					},
-					notchedOutline: {
-						height: "36px",
-					},
 				},
 			},
 		},

src/components/mui/MyInputCopy.tsx

-/*
- * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
- * @Date: 2022-07-05 14:00:37
- * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-21 17:33:59
- * @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?: string;
-	variant?: "standard" | "filled" | "outlined";
-	size?: "small" | "medium";
-	placeholder?: string;
-	fullWidth?: boolean; // 宽度是否和容器一致
-	error?: boolean;
-}
-
-const MyInput = (props: MyInputProps) => {
-	const {
-		size = "medium",
-		placeholder = "请输入",
-		fullWidth = true,
-		error = false,
-		label,
-		...other
-	} = props;
-
-	const theme = createTheme({
-		components: {
-			MuiInputBase: {
-				styleOverrides: {
-					root: {
-						height: "36px",
-						fontSize: "14px",
-						"&.MuiInputBase-sizeSmall": {
-							height: "32px",
-						},
-					},
-				},
-			},
-			MuiInputLabel: {
-				styleOverrides: {
-					root: {
-						top: "-9px",
-					},
-					shrink: {
-						top: 0,
-					},
-					sizeSmall: {
-						top: "-5px",
-					},
-				},
-			},
-			MuiOutlinedInput: {
-				styleOverrides: {
-					root: {
-						"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-							borderWidth: "1px",
-						},
-						":hover": {
-							"& .MuiOutlinedInput-notchedOutline": error
-								? {}
-								: {
-										borderColor: "#1370ff",
-								  },
-						},
-					},
-					input: {
-						padding: "6.5px 12px",
-						verticalAlign: "middle",
-					},
-				},
-			},
-		},
-	});
-
-	return (
-		<ThemeProvider theme={theme}>
-			<TextField
-				error={error}
-				size={size}
-				placeholder={placeholder}
-				fullWidth={fullWidth}
-				label={label}
-				{...other}
-			/>
-		</ThemeProvider>
-	);
-};
-
-export default MyInput;

src/views/Project/components/AddProject/index.module.css

 .formBox {
-  height: 300px;
+	padding: 8px 0;
 	width: 388px;
-  display: flex;
-  flex-direction: column;
-  padding: 10px 0;
-  justify-content: space-around;
 }

src/views/Project/components/AddProject/index.tsx

 import style from "./index.module.css";
-import { TextField, MenuItem } from "@mui/material";
+import { MenuItem } from "@mui/material";
+import MyInput from "@/components/mui/MyInput";
 import MyDialog from "@/components/mui/MyDialog";
 import React, { useState, useEffect } from "react";
 import useMyRequest from "@/hooks/useMyRequest";
@@ -165,7 +166,7 @@ const AddProject = (props: IAddProjectProps) => {
 			title="新建项目"
 		>
 			<div className={style.formBox} onClick={handleFromBox}>
-				<TextField
+				<MyInput
 					required
 					error={nameCheck.error}
 					id="name"
@@ -174,9 +175,9 @@ const AddProject = (props: IAddProjectProps) => {
 					value={name}
 					onChange={handleNameChange}
 					helperText={nameCheck.help}
-					size="small"
+					sx={{ marginBottom: "20px" }}
 				/>
-				<TextField
+				<MyInput
 					id="zoneId"
 					select
 					required
@@ -185,7 +186,7 @@ const AddProject = (props: IAddProjectProps) => {
 					onChange={handleZoneIdChange}
 					variant="outlined"
 					onClick={handleFromBox}
-					size="small"
+					sx={{ marginBottom: "20px" }}
 				>
 					{zoneIdOptions &&
 						zoneIdOptions.map((option) => (
@@ -193,8 +194,9 @@ const AddProject = (props: IAddProjectProps) => {
 								{option.name}
 							</MenuItem>
 						))}
-				</TextField>
-				<TextField
+				</MyInput>
+				<div style={{ position: "relative" }}>
+					<MyInput
 						value={desc}
 						error={descCheck.error}
 						id="desc"
@@ -204,8 +206,18 @@ const AddProject = (props: IAddProjectProps) => {
 						placeholder="请输入项目描述"
 						onChange={handleDescChange}
 						helperText={descCheck.help}
-					size="small"
 					/>
+					<span
+						style={{
+							position: "absolute",
+							bottom: "7px",
+							right: "12px",
+							color: "rgba(194, 198, 204, 1)",
+						}}
+					>
+						{desc.length}/100
+					</span>
+				</div>
 			</div>
 		</MyDialog>
 	);

src/views/mui_demo/input.tsx

 import { memo } from "react";
 import { InputAdornment } from "@mui/material";
-// import InputComponent from "@/components/mui/MyInput";
-import InputComponent from "@/components/mui/MyInputCopy";
+import InputComponent from "@/components/mui/MyInput";
 
 const ProjectMembers = () => {
 	return (