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,10 +86,10 @@
     min-height: calc(100vh - 291px);
 }
 
-.noDataBox{
+.noDataBox {
     position: absolute;
     top: 50%;
-    left:50%;
+    left: 50%;
     transform: translate(-50%, -50%);
     display: flex;
     flex-direction: column;
@@ -103,3 +103,11 @@
     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

src/views/Project/ProjectOverview/index.tsx

@@ -9,16 +9,17 @@ import {
     getTaskOverview,
 } from "@/api/project_api";
 import { useStores } from "@/store/index";
-import OutlinedInput from "@mui/material/OutlinedInput";
-import SearchIcon from "@mui/icons-material/Search";
 import NoProject from "@/components/BusinessComponents/NoProject";
 import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
+import Loading from "@/views/Loading";
+import SearchInput from "@/components/BusinessComponents/SearchInput";
 import TaskCard from './TaskCard'
 
 import projectImg from "@/assets/project/projectIconSmall.svg";
 import noFile from "@/assets/project/noFile.svg";
 import style from "./index.module.css";
 
+
 const ProjectOverview = observer(() => {
     const { currentProjectStore } = useStores();
     // 概览基本信息
@@ -27,11 +28,11 @@ const ProjectOverview = observer(() => {
     const [taskList, setTaskList] = useState([])
     const [jobName, setJobName] = useState('')
     const [page, setPage] = useState(0)
-    const [size, setSize] = useState(10)
+    const [size, setSize] = useState(999)
     // 选择近7天or近15天or近30天
     const [day, setDay] = useState("7");
     // 获取概览基本信息
-    const { run: getOverview } = useMyRequest(getOverviewInfo, {
+    const { run: getOverview, loading } = useMyRequest(getOverviewInfo, {
         onSuccess: (result: any) => {
             setOverviewInfo(result.data);
         },
@@ -58,7 +59,19 @@ const ProjectOverview = observer(() => {
         });
     }, [currentProjectStore.currentProjectInfo.id, getTaskOverviewList, day, jobName]);
 
+    const handleKeyWordChangeKeyUp = (e: any) => {
+        if (e.keyCode === 13) {
+            setJobName(e.target.value);
+        }
+    }
     if (currentProjectStore.currentProjectInfo.name) {
+        if (loading) {
+            return (
+                <div className={style.loadingBox}>
+                    <Loading />
+                </div>
+            );
+        } else {
             return (
                 <>
                     <div className={style.basicInformation}>
@@ -105,16 +118,9 @@ const ProjectOverview = observer(() => {
                                 handleRadio={setDay}
                             ></RadioGroupOfButtonStyle>
                         </div>
-                    <OutlinedInput
-                        onChange={(e: any) => {
-                            _.debounce(() => {
-                                setJobName(e.target.value);
-                            }, 1000)();
-                        }}
-                        placeholder="输入关键词搜索"
-                        size="small"
-                        sx={{ width: 340, height: 32, fontSize: "14px" }}
-                        endAdornment={<SearchIcon style={{ color: "#999" }} />}
+                        <SearchInput
+                            onKeyUp={handleKeyWordChangeKeyUp}
+                            sx={{ width: 340 }}
                         />
                     </div>
                     <div className={style.taskDisplay}>
@@ -142,6 +148,8 @@ const ProjectOverview = observer(() => {
                     </div>
                 </>
             );
+        }
+
     } else {
         return <NoProject />;
     }