feat:SearchInput组件封装

src/components/BusinessComponents/SearchInput/index.tsx

+import OutlinedInput, { OutlinedInputProps } from "@mui/material/OutlinedInput";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+import SearchIcon from "@mui/icons-material/Search";
+
+// 使用该搜索框组件时，width、height、font-size等样式属性可以在组件sx属性中覆盖掉当前组件内的样式
+// 该组件默认搜索框高度为32px，宽度和容器一致，字体大小14px
+// 若想自定义修改，写法：<SearchInput sx={{ width: 340 ,height: 36 ,fontSize: 12}} />
+
+interface SearchInputProps extends OutlinedInputProps {
+    value?: any;
+    variant?: "standard" | "filled" | "outlined";
+    size?: "small" | "medium";
+    placeholder?: string;
+    fullWidth?: boolean; // 宽度是否和容器一致
+    error?: boolean;
+};
+const SearchInput = (props: SearchInputProps) => {
+    const {
+        size = "small",
+        placeholder = "输入关键词搜索",
+        fullWidth = true,
+        ...other
+    } = props;
+
+    const theme = createTheme({
+        components: {
+            MuiOutlinedInput: {
+                styleOverrides: {
+                    root: {
+                        height: "32px",
+                        fontSize: "14px",
+                        paddingRight: "8px",
+                        ":hover": {
+                            "& .MuiOutlinedInput-notchedOutline": {
+                                borderColor: "#1370ff",
+                            },
+                        },
+                    },
+                    input: {
+                        padding: "5px 12px",
+                        verticalAlign: "middle",
+                    },
+                },
+            },
+        },
+    });
+
+    return (
+        <ThemeProvider theme={theme}>
+            <OutlinedInput
+                size={size}
+                placeholder={placeholder}
+                fullWidth={fullWidth}
+                endAdornment={<SearchIcon style={{ color: "#999" }} />}
+                {...other}
+            />
+        </ThemeProvider>
+    );
+}
+
+export default SearchInput
\ No newline at end of file

src/views/Project/ProjectOverview/TaskCard/index.tsx

@@ -45,7 +45,7 @@ const TaskCard = (props: TaskCardProps) => {
             return [];
         }
     }, [outputs])
-    // 结果跳转
+    // 结果文件跳转
     const goToProjectData = (path: string) => {
         const lastIndex = path.lastIndexOf("/");
         if (lastIndex !== -1) {
@@ -153,7 +153,6 @@ const TaskCard = (props: TaskCardProps) => {
                     <div style={{ color: renderTextColor(state) }}>{completeNum + "/" + totalNum}</div>
                 </div>
                 <MyProgress color={renderProgressColor(state)} value={(completeNum / totalNum) * 100}/>
-                {/* <MyProgress color="info" value={80}/> */}
             </div>
             <div className={style.bottomLine}>
                 <img alt="" src={runTime} />

src/views/Project/ProjectOverview/index.module.css

@@ -86,20 +86,28 @@
     min-height: calc(100vh - 291px);
 }
 
-.noDataBox{
+.noDataBox {
     position: absolute;
     top: 50%;
-    left:50%;
+    left: 50%;
     transform: translate(-50%, -50%);
     display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 }
 
 .noDataText {
-	margin-top: 8px;
-	font-size: 14px;
-	line-height: 22px;
-	color: #8a9099;
+    margin-top: 8px;
+    font-size: 14px;
+    line-height: 22px;
+    color: #8a9099;
+}
+
+.loadingBox {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: calc(100vh - 100px);
 }
\ No newline at end of file