ui: 数据管理中的项目数据表格页样式优化

src/components/mui/MyButton.tsx

@@ -12,9 +12,10 @@ import {
 } from "@mui/material";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 
-interface ButtonTagProps extends  Omit<ExtendButtonBase<ButtonTypeMap<{}, "button">>, 'text'>{
-	startIcon?: React.ReactNode; /** 开始Icon */
-	endIcon?: React.ReactNode; /** 结束Icon */
+interface ButtonTagProps
+	extends Omit<ExtendButtonBase<ButtonTypeMap<{}, "button">>, "text"> {
+	startIcon?: React.ReactNode /** 开始Icon */;
+	endIcon?: React.ReactNode /** 结束Icon */;
 	text: string; //文本内容
 	variant?: "text" | "contained" | "outlined"; //按钮样式
 	onClick?: any; //点击事件
@@ -22,13 +23,20 @@ interface ButtonTagProps extends  Omit<ExtendButtonBase<ButtonTypeMap<{}, "butto
 	fontSize?: string; //按钮文字大小
 	dropValue?: boolean; //选择的值
 	drop?: boolean; //是否开启选择
-	color?: "inherit" | "primary" | "secondary" | 'success' | 'error' | 'info' | 'warning'; //按钮颜色风格
+	color?:
+		| "inherit"
+		| "primary"
+		| "secondary"
+		| "success"
+		| "error"
+		| "info"
+		| "warning"; //按钮颜色风格
 	size?: "large" | "medium" | "small"; //按钮尺寸
 	disabled?: boolean; //是否禁用
 	style?: any; //按钮自定义样式
 	img?: JSX.Element; //图标按钮中的图标
 	selectCallBack?: (item: any, key: number) => void; //选择按钮的回调
-};
+}
 
 const theme = createTheme({
 	components: {
@@ -36,6 +44,9 @@ const theme = createTheme({
 			styleOverrides: {
 				root: {
 					minWidth: "48px",
+					"&.MuiButton-textError": {
+						color: "rgba(255, 78, 78, 1)",
+					},
 				},
 				contained: {
 					backgroundColor: "#1370FF",
@@ -78,7 +89,6 @@ const theme = createTheme({
 					color: "#FF4E4E",
 					"&:hover": { backgroundColor: "#FFEDED " },
 				},
-
 				sizeSmall: {
 					"& p": { fontSize: "12px" },
 					height: "28px",
@@ -113,7 +123,16 @@ const theme = createTheme({
 });
 
 const ButtonComponent = (props: ButtonTagProps) => {
-	const { size, disabled, variant, color, img, select, selectCallBack, ...other } = props;
+	const {
+		size,
+		disabled,
+		variant,
+		color,
+		img,
+		select,
+		selectCallBack,
+		...other
+	} = props;
 	const { classes, cx } = useStyles({});
 	const [anchorEl, setAnchorEl] = React.useState(null);
 

src/components/mui/MyInput.tsx

@@ -34,9 +34,13 @@ const MyInput = (props: MyInputProps) => {
 				styleOverrides: {
 					root: {
 						height: "36px",
-						// width: "40px",
-						// boxSizing: "border-box",
-						// padding: "0",
+						fontSize: "14px",
+						"&.MuiInputBase-sizeSmall": {
+							height: "32px",
+							"& .MuiOutlinedInput-notchedOutline": {
+								height: "34px",
+							},
+						},
 					},
 				},
 			},
@@ -53,6 +57,7 @@ const MyInput = (props: MyInputProps) => {
 					root: {
 						height: "36px",
 						lineHeight: "36px",
+						paddingRight: "12px",
 						":hover": {
 							"& .MuiOutlinedInput-notchedOutline": error
 								? {}
@@ -62,7 +67,7 @@ const MyInput = (props: MyInputProps) => {
 						},
 					},
 					input: {
-						padding: "6.5px 14px",
+						padding: "6.5px 12px",
 						verticalAlign: "middle",
 					},
 					notchedOutline: {

src/views/Project/ProjectData/index.tsx

 import React, { useState, useCallback, useEffect, useMemo } from "react";
 import style from "./index.module.css";
 import classnames from "classnames";
-import {  InputBase, IconButton } from "@mui/material";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { IconButton } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import MyTable from "@/components/mui/MyTable";
@@ -27,32 +26,9 @@ import { useLocation } from "react-router-dom";
 import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
 import SeeDataset from "./SeeDataset";
 import { getDataFind, getDataFileSearch } from "@/api/project_api";
+import MyInput from "@/components/mui/MyInput";
 import MyButton from "@/components/mui/MyButton";
 
-const theme = createTheme({
-	palette: {
-		neutral: {
-			main: "#1370FF",
-			contrastText: "#fff",
-		},
-	},
-});
-declare module "@mui/material/styles" {
-	interface Palette {
-		neutral: Palette["primary"];
-	}
-
-	interface PaletteOptions {
-		neutral?: PaletteOptions["primary"];
-	}
-}
-
-declare module "@mui/material/Button" {
-	interface ButtonPropsColorOverrides {
-		neutral: true;
-	}
-}
-
 const ProjectData = observer(() => {
 	const isPass = usePass();
 	const { currentProjectStore } = useStores();
@@ -391,10 +367,10 @@ const ProjectData = observer(() => {
 			<span style={{ whiteSpace: "nowrap" }}>
 				{!isAllDirectory && (
 					<MyButton
-						text='下载'
+						text="下载"
 						style={{
 							position: "relative",
-							left: "-4px",
+							left: "-16px",
 							minWidth: "10px",
 							marginRight: "10px",
 							visibility:
@@ -403,22 +379,21 @@ const ProjectData = observer(() => {
 									: "hidden",
 						}}
 						variant="text"
-						size="small"
+						size="medium"
 						disabled={selectIds.length > 0 || !isPass("PROJECT_DATA_DOWNLOAD")}
 						onClick={() => hanleDownloadFile(item)}
 					/>
-					
 				)}
 				<MyButton
-					text='移动至'
+					text="移动至"
 					style={{
 						position: "relative",
-						left: "-4px",
+						left: "-16px",
 						minWidth: "10px",
 						marginRight: "10px",
 					}}
 					variant="text"
-					size="small"
+					size="medium"
 					onClick={() => {
 						setCurrentOperateFile(item);
 						setMoveDialogOpen(true);
@@ -429,15 +404,15 @@ const ProjectData = observer(() => {
 				/>
 
 				<MyButton
-					text='删除'
+					text="删除"
 					style={{
 						position: "relative",
-						left: "-4px",
+						left: "-16px",
 						minWidth: "10px",
 						marginRight: "10px",
 					}}
 					variant="text"
-					size="small"
+					size="medium"
 					color="error"
 					onClick={() => {
 						setCurrentOperateFile(item);
@@ -532,7 +507,6 @@ const ProjectData = observer(() => {
 
 	if (currentProjectStore.currentProjectInfo.name) {
 		return (
-			<ThemeProvider theme={theme}>
 			<div className={style.projectData}>
 				<div className={style.projectDataStickyTop}>
 					<div className={style.projectDataTitle}>项目数据</div>
@@ -540,8 +514,7 @@ const ProjectData = observer(() => {
 						<div className={style.projectDataButtonAndSearch}>
 							<div className={style.projectDataButtonBox}>
 								<MyButton
-										text='上传文件'
-										// color="neutral"
+									text="上传文件"
 									variant="contained"
 									size="small"
 									style={{ marginRight: "12px" }}
@@ -561,30 +534,32 @@ const ProjectData = observer(() => {
 									projectId={projectId as string}
 								></AddFolder>
 							</div>
-								<div className={style.projectDataSearch}>
-									<InputBase
-										className={style.searchInput}
-										placeholder="输入关键词搜索"
-										inputProps={{ "aria-label": "输入关键词搜索" }}
+							<MyInput
+								sx={{
+									width: "340px",
+								}}
 								value={keyWord}
+								required
+								size="small"
+								placeholder="输入关键词搜索"
 								onChange={handleKeyWordChange}
-										style={{ width: "280px", fontSize: "14px" }}
 								onKeyUp={handleKeyWordChangeKeyUp}
-									/>
-									<IconButton
-										type="submit"
-										className={style.searchButton}
-										aria-label="search"
-										size="small"
-										style={{ padding: "4px" }}
-										onClick={handleRefresh}
-									>
+								InputProps={{
+									endAdornment: (
 										<SearchIcon
 											className={style.searchIcon}
-											style={{ color: "#999" }}
+											style={{
+												color: "#999",
+												cursor: "pointer",
+												fontSize: "22px",
+												position: "relative",
+												left: "4px",
+											}}
+											onClick={handleRefresh}
 										/>
-									</IconButton>
-								</div>
+									),
+								}}
+							></MyInput>
 						</div>
 						<div className={style.projectDataPathAndTabs}>
 							<div className={style.projectDataPath}>{showPath}</div>
@@ -604,7 +579,7 @@ const ProjectData = observer(() => {
 									disabled={!isPass("PROJECT_DATA_REFRESH", "USER")}
 									sx={{ marginLeft: "17px" }}
 								>
-										<RefreshIcon />
+									<RefreshIcon sx={{ fontSize: "18px" }} />
 								</IconButton>
 							</div>
 						</div>
@@ -658,12 +633,10 @@ const ProjectData = observer(() => {
 							style={{ marginRight: "24px" }}
 							onClick={() => {
 								setCurrentOperateFile(null);
-									setDeleteDialogOpen(true);
+								setMoveDialogOpen(true);
 							}}
 							disabled={!isPass("PROJECT_DATA_MOVE", "USER")}
 						/>
-								
-							
 					</div>
 				)}
 				{deleteDialogOpen && (
@@ -709,7 +682,6 @@ const ProjectData = observer(() => {
 					></SeeDataset>
 				)}
 			</div>
-			</ThemeProvider>
 		);
 	} else {
 		return <NoProject />;