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);
@@ -427,17 +402,17 @@ const ProjectData = observer(() => {
 						selectIds.length > 0 || !isPass("PROJECT_DATA_MOVE", "USER")
 					}
 				/>
-				
+
 				<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,184 +507,181 @@ const ProjectData = observer(() => {
 
 	if (currentProjectStore.currentProjectInfo.name) {
 		return (
-			<ThemeProvider theme={theme}>
-				<div className={style.projectData}>
-					<div className={style.projectDataStickyTop}>
-						<div className={style.projectDataTitle}>项目数据</div>
-						<div className={style.projectDataHeader}>
-							<div className={style.projectDataButtonAndSearch}>
-								<div className={style.projectDataButtonBox}>
-									<MyButton
-										text='上传文件'
-										// color="neutral"
-										variant="contained"
-										size="small"
-										style={{ marginRight: "12px" }}
-										onClick={() => setUploaderDialogOpen(true)}
-										disabled={
-											selectIds.length !== 0 ||
-											!isPass("PROJECT_DATA_UPLOAD", "USER")
-										}
-									/>
-										
-									<AddFolder
-										selectIds={selectIds}
-										list={allList}
-										path={path}
-										refresh={handleRefresh}
-										fileToken={fileToken as string}
-										projectId={projectId as string}
-									></AddFolder>
-								</div>
-								<div className={style.projectDataSearch}>
-									<InputBase
-										className={style.searchInput}
-										placeholder="输入关键词搜索"
-										inputProps={{ "aria-label": "输入关键词搜索" }}
-										value={keyWord}
-										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}
-									>
+			<div className={style.projectData}>
+				<div className={style.projectDataStickyTop}>
+					<div className={style.projectDataTitle}>项目数据</div>
+					<div className={style.projectDataHeader}>
+						<div className={style.projectDataButtonAndSearch}>
+							<div className={style.projectDataButtonBox}>
+								<MyButton
+									text="上传文件"
+									variant="contained"
+									size="small"
+									style={{ marginRight: "12px" }}
+									onClick={() => setUploaderDialogOpen(true)}
+									disabled={
+										selectIds.length !== 0 ||
+										!isPass("PROJECT_DATA_UPLOAD", "USER")
+									}
+								/>
+
+								<AddFolder
+									selectIds={selectIds}
+									list={allList}
+									path={path}
+									refresh={handleRefresh}
+									fileToken={fileToken as string}
+									projectId={projectId as string}
+								></AddFolder>
+							</div>
+							<MyInput
+								sx={{
+									width: "340px",
+								}}
+								value={keyWord}
+								required
+								size="small"
+								placeholder="输入关键词搜索"
+								onChange={handleKeyWordChange}
+								onKeyUp={handleKeyWordChangeKeyUp}
+								InputProps={{
+									endAdornment: (
 										<SearchIcon
 											className={style.searchIcon}
-											style={{ color: "#999" }}
+											style={{
+												color: "#999",
+												cursor: "pointer",
+												fontSize: "22px",
+												position: "relative",
+												left: "4px",
+											}}
+											onClick={handleRefresh}
 										/>
-									</IconButton>
-								</div>
-							</div>
-							<div className={style.projectDataPathAndTabs}>
-								<div className={style.projectDataPath}>{showPath}</div>
-								<div className={style.projectDataTabsAndBtton}>
-									<RadioGroupOfButtonStyle
-										value={activeTab}
-										radioOptions={[
-											{ value: "file", label: "文件" },
-											{ value: "dataset", label: "数据集" },
-										]}
-										handleRadio={setActiveTab}
-									></RadioGroupOfButtonStyle>
-									<IconButton
-										aria-label="refreshIcon"
-										size="small"
-										onClick={handleRefresh}
-										disabled={!isPass("PROJECT_DATA_REFRESH", "USER")}
-										sx={{ marginLeft: "17px" }}
-									>
-										<RefreshIcon />
-									</IconButton>
-								</div>
-							</div>
+									),
+								}}
+							></MyInput>
 						</div>
-						<MyTable
-							footer={false}
-							rowHover={true}
-							onRef={tableRef}
-							stickyHeader={true}
-							initSelected={selectIds}
-							headCells={versionsHeadCells}
-							rowsPerPage={"99"}
-							checkboxData={(e: any) => {
-								hanldeCheckbox(e);
-							}}
-							rows={showList.map((item: any, index: number) => ({
-								...item,
-								id: `name=${item.name}&index=${index}`,
-								name: renderName(item),
-								size: renderSize(item),
-								mtime: renderMtime(item),
-								caozuo: renderButtons(item),
-							}))}
-						/>
-						{showList.length === 0 && (
-							<div className={style.noDataBox}>
-								<img className={style.noDataImg} src={noFile} alt="" />
-								<span className={style.noDataText}>暂无数据</span>
+						<div className={style.projectDataPathAndTabs}>
+							<div className={style.projectDataPath}>{showPath}</div>
+							<div className={style.projectDataTabsAndBtton}>
+								<RadioGroupOfButtonStyle
+									value={activeTab}
+									radioOptions={[
+										{ value: "file", label: "文件" },
+										{ value: "dataset", label: "数据集" },
+									]}
+									handleRadio={setActiveTab}
+								></RadioGroupOfButtonStyle>
+								<IconButton
+									aria-label="refreshIcon"
+									size="small"
+									onClick={handleRefresh}
+									disabled={!isPass("PROJECT_DATA_REFRESH", "USER")}
+									sx={{ marginLeft: "17px" }}
+								>
+									<RefreshIcon sx={{ fontSize: "18px" }} />
+								</IconButton>
 							</div>
-						)}
+						</div>
 					</div>
-					{selectIds.length > 0 && (
-						<div className={style.projectDataStickyBox}>
-							<MyButton
-								text={`批量删除（${selectIds.length}）`}
-								color="error"
-								variant="outlined"
-								size="small"
-								style={{ marginRight: "12px" }}
-								onClick={() => {
-									setCurrentOperateFile(null);
-									setDeleteDialogOpen(true);
-								}}
-								disabled={!isPass("PROJECT_DATA_DELETE", "USER")}
-							/>
-							<MyButton
-								text={`批量移动（${selectIds.length}）`}
-								// color="neutral"
-								variant="contained"
-								size="small"
-								style={{ marginRight: "24px" }}
-								onClick={() => {
-									setCurrentOperateFile(null);
-									setDeleteDialogOpen(true);
-								}}
-								disabled={!isPass("PROJECT_DATA_MOVE", "USER")}
-							/>
-								
-							
+					<MyTable
+						footer={false}
+						rowHover={true}
+						onRef={tableRef}
+						stickyHeader={true}
+						initSelected={selectIds}
+						headCells={versionsHeadCells}
+						rowsPerPage={"99"}
+						checkboxData={(e: any) => {
+							hanldeCheckbox(e);
+						}}
+						rows={showList.map((item: any, index: number) => ({
+							...item,
+							id: `name=${item.name}&index=${index}`,
+							name: renderName(item),
+							size: renderSize(item),
+							mtime: renderMtime(item),
+							caozuo: renderButtons(item),
+						}))}
+					/>
+					{showList.length === 0 && (
+						<div className={style.noDataBox}>
+							<img className={style.noDataImg} src={noFile} alt="" />
+							<span className={style.noDataText}>暂无数据</span>
 						</div>
 					)}
-					{deleteDialogOpen && (
-						<DeleteDialog
-							deleteDialogOpen={deleteDialogOpen}
-							setDeleteDialogOpen={setDeleteDialogOpen}
-							path={path}
-							projectId={projectId as string}
-							currentOperateFile={currentOperateFile}
-							selectIds={selectIds}
-							refresh={handleRefresh}
-							showList={showList}
-						></DeleteDialog>
-					)}
-					{uploaderDialogOpen && (
-						<UpLoaderFile
-							uploaderDialogOpen={uploaderDialogOpen}
-							setUploaderDialogOpen={setUploaderDialogOpen}
-							path={path}
-							list={allList}
-						></UpLoaderFile>
-					)}
-					{moveDialogOpen && (
-						<MoveFile
-							moveDialogOpen={moveDialogOpen}
-							setMoveDialogOpen={setMoveDialogOpen}
-							path={path}
-							fileToken={fileToken as string}
-							projectId={projectId as string}
-							currentOperateFile={currentOperateFile}
-							selectIds={selectIds}
-							refresh={handleRefresh}
-							showList={showList}
-						></MoveFile>
-					)}
-					{showSeeDataset && (
-						<SeeDataset
-							handleClose={() => setShowSeeDataset(false)}
-							name={seeDatasetName}
-							path={path}
-							fileToken={fileToken as string}
-							projectId={projectId as string}
-						></SeeDataset>
-					)}
 				</div>
-			</ThemeProvider>
+				{selectIds.length > 0 && (
+					<div className={style.projectDataStickyBox}>
+						<MyButton
+							text={`批量删除（${selectIds.length}）`}
+							color="error"
+							variant="outlined"
+							size="small"
+							style={{ marginRight: "12px" }}
+							onClick={() => {
+								setCurrentOperateFile(null);
+								setDeleteDialogOpen(true);
+							}}
+							disabled={!isPass("PROJECT_DATA_DELETE", "USER")}
+						/>
+						<MyButton
+							text={`批量移动（${selectIds.length}）`}
+							// color="neutral"
+							variant="contained"
+							size="small"
+							style={{ marginRight: "24px" }}
+							onClick={() => {
+								setCurrentOperateFile(null);
+								setMoveDialogOpen(true);
+							}}
+							disabled={!isPass("PROJECT_DATA_MOVE", "USER")}
+						/>
+					</div>
+				)}
+				{deleteDialogOpen && (
+					<DeleteDialog
+						deleteDialogOpen={deleteDialogOpen}
+						setDeleteDialogOpen={setDeleteDialogOpen}
+						path={path}
+						projectId={projectId as string}
+						currentOperateFile={currentOperateFile}
+						selectIds={selectIds}
+						refresh={handleRefresh}
+						showList={showList}
+					></DeleteDialog>
+				)}
+				{uploaderDialogOpen && (
+					<UpLoaderFile
+						uploaderDialogOpen={uploaderDialogOpen}
+						setUploaderDialogOpen={setUploaderDialogOpen}
+						path={path}
+						list={allList}
+					></UpLoaderFile>
+				)}
+				{moveDialogOpen && (
+					<MoveFile
+						moveDialogOpen={moveDialogOpen}
+						setMoveDialogOpen={setMoveDialogOpen}
+						path={path}
+						fileToken={fileToken as string}
+						projectId={projectId as string}
+						currentOperateFile={currentOperateFile}
+						selectIds={selectIds}
+						refresh={handleRefresh}
+						showList={showList}
+					></MoveFile>
+				)}
+				{showSeeDataset && (
+					<SeeDataset
+						handleClose={() => setShowSeeDataset(false)}
+						name={seeDatasetName}
+						path={path}
+						fileToken={fileToken as string}
+						projectId={projectId as string}
+					></SeeDataset>
+				)}
+			</div>
 		);
 	} else {
 		return <NoProject />;