chore: 代码合并

package-lock.json

@@ -17663,6 +17663,43 @@
         "@date-io/core": "^2.14.0"
       }
     },
+    "@date-io/core": {
+      "version": "2.14.0",
+      "resolved": "https://registry.npmmirror.com/@date-io/core/-/core-2.14.0.tgz",
+      "integrity": "sha512-qFN64hiFjmlDHJhu+9xMkdfDG2jLsggNxKXglnekUpXSq8faiqZgtHm2lsHCUuaPDTV6wuXHcCl8J1GQ5wLmPw=="
+    },
+    "@date-io/date-fns": {
+      "version": "2.14.0",
+      "resolved": "https://registry.npmmirror.com/@date-io/date-fns/-/date-fns-2.14.0.tgz",
+      "integrity": "sha512-4fJctdVyOd5cKIKGaWUM+s3MUXMuzkZaHuTY15PH70kU1YTMrCoauA7hgQVx9qj0ZEbGrH9VSPYJYnYro7nKiA==",
+      "requires": {
+        "@date-io/core": "^2.14.0"
+      }
+    },
+    "@date-io/dayjs": {
+      "version": "2.14.0",
+      "resolved": "https://registry.npmmirror.com/@date-io/dayjs/-/dayjs-2.14.0.tgz",
+      "integrity": "sha512-4fRvNWaOh7AjvOyJ4h6FYMS7VHLQnIEeAV5ahv6sKYWx+1g1UwYup8h7+gPuoF+sW2hTScxi7PVaba2Jk/U8Og==",
+      "requires": {
+        "@date-io/core": "^2.14.0"
+      }
+    },
+    "@date-io/luxon": {
+      "version": "2.14.0",
+      "resolved": "https://registry.npmmirror.com/@date-io/luxon/-/luxon-2.14.0.tgz",
+      "integrity": "sha512-KmpBKkQFJ/YwZgVd0T3h+br/O0uL9ZdE7mn903VPAG2ZZncEmaUfUdYKFT7v7GyIKJ4KzCp379CRthEbxevEVg==",
+      "requires": {
+        "@date-io/core": "^2.14.0"
+      }
+    },
+    "@date-io/moment": {
+      "version": "2.14.0",
+      "resolved": "https://registry.npmmirror.com/@date-io/moment/-/moment-2.14.0.tgz",
+      "integrity": "sha512-VsoLXs94GsZ49ecWuvFbsa081zEv2xxG7d+izJsqGa2L8RPZLlwk27ANh87+SNnOUpp+qy2AoCAf0mx4XXhioA==",
+      "requires": {
+        "@date-io/core": "^2.14.0"
+      }
+    },
     "@emotion/babel-plugin": {
       "version": "11.9.2",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz",
@@ -18442,6 +18479,58 @@
             "prop-types": "^15.8.1",
             "react-is": "^17.0.2"
           }
+        },
+        "@mui/private-theming": {
+          "version": "5.8.0",
+          "resolved": "https://registry.npmmirror.com/@mui/private-theming/-/private-theming-5.8.0.tgz",
+          "integrity": "sha512-MjRAneTmCKLR9u2S4jtjLUe6gpHxlbb4g2bqpDJ2PdwlvwsWIUzbc/gVB4dvccljXeWxr5G2M/Co2blXisvFIw==",
+          "requires": {
+            "@babel/runtime": "^7.17.2",
+            "@mui/utils": "^5.8.0",
+            "prop-types": "^15.8.1"
+          }
+        },
+        "@mui/styled-engine": {
+          "version": "5.8.0",
+          "resolved": "https://registry.npmmirror.com/@mui/styled-engine/-/styled-engine-5.8.0.tgz",
+          "integrity": "sha512-Q3spibB8/EgeMYHc+/o3RRTnAYkSl7ROCLhXJ830W8HZ2/iDiyYp16UcxKPurkXvLhUaILyofPVrP3Su2uKsAw==",
+          "requires": {
+            "@babel/runtime": "^7.17.2",
+            "@emotion/cache": "^11.7.1",
+            "prop-types": "^15.8.1"
+          }
+        },
+        "@mui/system": {
+          "version": "5.8.2",
+          "resolved": "https://registry.npmmirror.com/@mui/system/-/system-5.8.2.tgz",
+          "integrity": "sha512-N74gDNKM+MnWvKTMmCPvCVLH4f0ZzakP1bcMDaPctrHwcyxNcEmtTGNpIiVk0Iu7vtThZAFL3DjHpINPGF7+cg==",
+          "requires": {
+            "@babel/runtime": "^7.17.2",
+            "@mui/private-theming": "^5.8.0",
+            "@mui/styled-engine": "^5.8.0",
+            "@mui/types": "^7.1.3",
+            "@mui/utils": "^5.8.0",
+            "clsx": "^1.1.1",
+            "csstype": "^3.1.0",
+            "prop-types": "^15.8.1"
+          }
+        },
+        "@mui/utils": {
+          "version": "5.8.0",
+          "resolved": "https://registry.npmmirror.com/@mui/utils/-/utils-5.8.0.tgz",
+          "integrity": "sha512-7LgUtCvz78676iC0wpTH7HizMdCrTphhBmRWimIMFrp5Ph6JbDFVuKS1CwYnWWxRyYKL0QzXrDL0lptAU90EXg==",
+          "requires": {
+            "@babel/runtime": "^7.17.2",
+            "@types/prop-types": "^15.7.5",
+            "@types/react-is": "^16.7.1 || ^17.0.0",
+            "prop-types": "^15.8.1",
+            "react-is": "^17.0.2"
+          }
+        },
+        "csstype": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.0.tgz",
+          "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
         }
       }
     },
@@ -26674,8 +26763,7 @@
     "rifm": {
       "version": "0.12.1",
       "resolved": "https://registry.npmmirror.com/rifm/-/rifm-0.12.1.tgz",
-      "integrity": "sha512-OGA1Bitg/dSJtI/c4dh90svzaUPt228kzFsUkJbtA2c964IqEAwWXeL9ZJi86xWv3j5SMqRvGULl7bA6cK0Bvg==",
-      "requires": {}
+      "integrity": "sha512-OGA1Bitg/dSJtI/c4dh90svzaUPt228kzFsUkJbtA2c964IqEAwWXeL9ZJi86xWv3j5SMqRvGULl7bA6cK0Bvg=="
     },
     "rimraf": {
       "version": "3.0.2",

package.json

@@ -8,7 +8,7 @@
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.6.2",
-    "@mui/lab": "^5.0.0-alpha.83",
+    "@mui/lab": "^5.0.0-alpha.84",
     "@mui/material": "^5.6.4",
     "@mui/styles": "^5.8.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",

src/api/api_manager.ts

@@ -4,7 +4,8 @@ const RESTAPI = {
   API_USER_FETCH: `${BACKEND_API_URI_PREFIX}/accounts/current`, //获取账户信息
   // API_PRIVILEGE_LIST: `${BACKEND_API_URI_PREFIX}/routes/privilege/list`, //
   API_PROJECT_LIST: `${BACKEND_API_URI_PREFIX}/cpp/project/list`, //获取产品下的项目列表
-  // routes/privilege/list
+  API_PROJECT_ADD: `${BACKEND_API_URI_PREFIX}/cpp/project/add`, //新增项目
+  API_CPCE_HPCZONE: `${BACKEND_API_URI_PREFIX}/cpp/cpce/hpczone`, //获取计算区列表
 };
 
 export default RESTAPI;

src/api/project_api.ts

@@ -29,4 +29,28 @@ const product = (params: projectListParams) => {
   });
 };
 
-export { current, menu, product };
+type addProjectParams = {
+  product: string;
+  name: string;
+  zoneId: string;
+  desc?: string;
+};
+// 新增项目
+const addProject = (params: addProjectParams) => {
+  console.log("params", params);
+  return request({
+    url: Api.API_PROJECT_ADD,
+    method: "post",
+    data: params,
+  });
+};
+
+// 获取计算区列表
+const hpczone = () => {
+  return request({
+    url: Api.API_CPCE_HPCZONE,
+    method: "get",
+  });
+};
+
+export { current, menu, product, hpczone, addProject };

src/components/MyDialog/index.ts

-import MyDialog from "./MyDialog";
-
-export default MyDialog;

src/components/NoProject/NoProject.tsx

@@ -2,17 +2,14 @@ import style from "./NoProject.module.css";
 import noData from "@/assets/project/noData.svg";
 import { Button } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
-import MyDialog from "../MyDialog";
+import AddProject from "@/views/Project/components/AddProject";
 import React from "react";
 
 const NoProject = () => {
-  let DialogRef: any = React.createRef();
-  const handleClickOpen = () => {
-    DialogRef.current.handleClickOpen();
-  };
+  let addProjectRef: any = React.createRef();
 
-  const handleSubmit = () => {
-    console.log("handleSubmitfff");
+  const handleClickOpen = () => {
+    addProjectRef.current.handleClickOpen();
   };
 
   return (
@@ -30,9 +27,7 @@ const NoProject = () => {
       >
         创建项目
       </Button>
-      <MyDialog handleSubmit={handleSubmit} onRef={DialogRef} title="新建项目">
-        <div>123</div>
-      </MyDialog>
+      <AddProject onRef={addProjectRef} />
     </div>
   );
 };

src/components/MyDialog/MyDialog.tsx → src/components/mui/MyDialog.tsx

@@ -3,14 +3,18 @@ import {
   Dialog,
   DialogActions,
   DialogContent,
+  IconButton,
   DialogTitle,
 } from "@mui/material";
+import LoadingButton from "@mui/lab/LoadingButton";
+import CloseIcon from "@mui/icons-material/Close";
+
 import { useState } from "react";
 import React, { useImperativeHandle } from "react";
 // import LoadingButton from '@mui/lab/LoadingButton';
 const MyDialog = (props: any) => {
   const [open, setOpen] = useState(false);
-  const { title, handleSubmit } = props;
+  const { title, handleSubmit, submitloading } = props;
 
   const handleClickOpen = () => {
     setOpen(true);
@@ -34,14 +38,34 @@ const MyDialog = (props: any) => {
       aria-labelledby="form-dialog-title"
     >
       {title && <DialogTitle id="form-dialog-title">{title}</DialogTitle>}
-      <DialogContent>{props.children}</DialogContent>
-      <DialogActions>
-        <Button onClick={handleClose} color="primary">
+      <DialogContent>
+        {props.children}
+        <IconButton
+          aria-label="delete"
+          style={{ position: "absolute", top: "10px", right: "12px" }}
+          onClick={handleClose}
+        >
+          <CloseIcon style={{ color: "#C2C6CC" }} />
+        </IconButton>
+      </DialogContent>
+      <DialogActions style={{ padding: "24px" }}>
+        <Button
+          onClick={handleClose}
+          color="inherit"
+          variant="contained"
+          style={{ color: "#1E2633", backgroundColor: "#fff" }}
+        >
           取消
         </Button>
-        <Button onClick={handleSubmit} color="primary">
+        <LoadingButton
+          loading={submitloading}
+          onClick={handleSubmit}
+          color="primary"
+          variant="contained"
+          style={{ backgroundColor: "#1370FF" }}
+        >
           确认
-        </Button>
+        </LoadingButton>
       </DialogActions>
     </Dialog>
   );

src/views/Project/ProjectSetting/index.tsx

@@ -2,19 +2,23 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-02 18:43:59
+ * @LastEditTime: 2022-06-05 18:29:59
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 import { memo, useState, useMemo } from "react";
 
 import { Box } from "@mui/system";
+import { useStores } from "@/store/index";
+import NoProject from "@/components/NoProject";
+import { observer } from "mobx-react-lite";
 import projectImg from "@/assets/project/projectIconSmall.svg";
 import ProjectMembers from "./ProjectMembers";
 import BaseInfo from "./BaseInfo";
 import Tabs from "@/components/mui/Tabs";
 
-const ProjectSetting = () => {
+const ProjectSetting = observer(() => {
+  const { currentProjectStore } = useStores();
   const [value, setValue] = useState("projectMember");
 
   const tabList = useMemo(() => {
@@ -36,18 +40,21 @@ const ProjectSetting = () => {
     setValue(val);
   };
 
-  return (
-    <Box style={{ padding: 24 }}>
-      <div>
-        <img src={projectImg} alt="项目logo" />
-        <span>项目名称A</span>
-      </div>
-
-      <Box sx={{ width: "100%", typography: "body1" }}>
-        <Tabs value={value} onChange={changeTabs} tabList={tabList} />
+  if (currentProjectStore.currentProjectInfo.name) {
+    return (
+      <Box style={{ padding: 24 }}>
+        <div>
+          <img src={projectImg} alt="项目logo" />
+          <span>项目名称A</span>
+        </div>
+        <Box sx={{ width: "100%", typography: "body1" }}>
+          <Tabs value={value} onChange={changeTabs} tabList={tabList} />
+        </Box>
       </Box>
-    </Box>
-  );
-};
+    );
+  } else {
+    return <NoProject />;
+  }
+});
 
 export default memo(ProjectSetting);

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

+.formBox {
+  height: 300px;
+  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 MyDialog from "@/components/mui/MyDialog";
+import React, { useState, useEffect, useImperativeHandle } from "react";
+import useMyRequest from "@/hooks/useMyRequest";
+import { hpczone, addProject } from "@/api/project_api";
+
+const reg = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$");
+
+type zoneIdOption = {
+  id: string;
+  name: string;
+};
+
+const AddProject = (props: any) => {
+  let DialogRef: any = React.createRef();
+  useImperativeHandle(props.onRef, () => {
+    return {
+      handleClickOpen: handleClickOpen,
+    };
+  });
+
+  const [zoneId, setZoneId] = useState("");
+  const [zoneIdOptions, setZoneIdOptions] = useState<Array<zoneIdOption>>([]);
+  const { run } = useMyRequest(hpczone, {
+    onSuccess: (result: any) => {
+      setZoneIdOptions(result);
+      setZoneId(result[0].id || "");
+    },
+  });
+  const [submitloading, setSubmitloading] = useState(false);
+  const { run: addProjectRun } = useMyRequest(addProject, {
+    onBefore: () => {
+      setSubmitloading(true);
+    },
+    onSuccess: (result: any) => {
+      if (result.data) {
+        setSubmitloading(false);
+        DialogRef.current.handleClose();
+      }
+    },
+    onError: () => {
+      setSubmitloading(false);
+    },
+  });
+
+  useEffect(() => {
+    run();
+  }, []);
+
+  const handleClickOpen = () => {
+    DialogRef.current.handleClickOpen();
+  };
+
+  const [name, setName] = useState("");
+  const [nameCheck, setNameCheck] = useState({
+    error: false,
+    help: "",
+  });
+  const [desc, setDesc] = useState("");
+  const [descCheck, setDescCheck] = useState({
+    error: false,
+    help: "",
+  });
+  const checkName = (name: string) => {
+    if (name) {
+      if (name.length > 30) {
+        setNameCheck({
+          error: true,
+          help: "格式不正确，必须在30字符以内，仅限大小写字母、数字、中文",
+        });
+      } else if (reg.test(name)) {
+        setNameCheck({
+          error: false,
+          help: "",
+        });
+      } else {
+        setNameCheck({
+          error: true,
+          help: "格式不正确，必须在30字符以内，仅限大小写字母、数字、中文",
+        });
+      }
+    } else {
+      setNameCheck({
+        error: true,
+        help: "项目名称不能为空",
+      });
+    }
+  };
+  const handleNameChange = (e: any) => {
+    const name = e.target.value;
+    setName(name);
+    checkName(name);
+  };
+
+  const handleZoneIdChange = (e: any) => {
+    setZoneId(e.target.value);
+  };
+  const handleDescChange = (e: any) => {
+    const desc = e.target.value;
+    setDesc(desc);
+    if (desc.length > 100) {
+      setDescCheck({
+        error: true,
+        help: "格式不正确，必须在100字符以内",
+      });
+    } else {
+      setDescCheck({
+        error: false,
+        help: "",
+      });
+    }
+  };
+
+  const handleSubmit = () => {
+    checkName(name);
+    if (!nameCheck.error && !descCheck.error && zoneId) {
+      addProjectRun({
+        name,
+        desc,
+        zoneId,
+        product: "CADD",
+      });
+    } else {
+      return;
+    }
+  };
+
+  return (
+    <MyDialog
+      handleSubmit={handleSubmit}
+      onRef={DialogRef}
+      title="新建项目"
+      submitloading={submitloading}
+    >
+      <div className={style.formBox}>
+        <TextField
+          required
+          error={nameCheck.error}
+          id="name"
+          label="项目名称"
+          variant="outlined"
+          value={name}
+          onChange={handleNameChange}
+          helperText={nameCheck.help}
+        />
+        <TextField
+          id="zoneId"
+          select
+          required
+          label="计算区"
+          value={zoneId}
+          onChange={handleZoneIdChange}
+          variant="outlined"
+        >
+          {zoneIdOptions &&
+            zoneIdOptions.map((option) => (
+              <MenuItem key={option.id} value={option.id}>
+                {option.name}
+              </MenuItem>
+            ))}
+        </TextField>
+        <TextField
+          value={desc}
+          error={descCheck.error}
+          id="desc"
+          label="项目描述"
+          multiline
+          rows={4}
+          placeholder="请输入项目描述"
+          onChange={handleDescChange}
+          helperText={descCheck.help}
+        />
+      </div>
+    </MyDialog>
+  );
+};
+
+export default AddProject;

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

@@ -5,6 +5,7 @@
   flex-direction: row;
   justify-content: space-around;
   align-items: center;
+  cursor: pointer;
 }
 .logo {
   width: 32px;

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

@@ -5,22 +5,28 @@ import { Popper, Fade } from "@mui/material";
 import { useStores } from "@/store/index";
 import ProjectListPopper from "../ProjectListPopper";
 import { useState } from "react";
+import { observer } from "mobx-react-lite";
 
-const CurrentProject = () => {
+const CurrentProject = observer(() => {
   const { currentProjectStore } = useStores();
   const [open, setOpen] = useState(false);
-  const [anchorEl, setAnchorEl] = useState(null);
-  const handleShowProjectList = (e: any) => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const handleShowProjectList = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+    setOpen((previousOpen) => !previousOpen);
+  };
+  const canBeOpen = open && Boolean(anchorEl);
+  const id = canBeOpen ? "spring-popper" : undefined;
+  const handleChangeCurrentProject = (project: any) => {
+    currentProjectStore.changeProject(project);
     setOpen(!open);
-    setAnchorEl(anchorEl ? null : e.currentTarget);
   };
-  const id = open ? "spring-popper" : undefined;
 
   return (
     <div>
       <div
         className={style.currentProject}
-        aria-describedby="projectList"
+        aria-describedby={id}
         onClick={handleShowProjectList}
       >
         <img src={logo} alt="" className={style.logo} />
@@ -47,13 +53,15 @@ const CurrentProject = () => {
         {({ TransitionProps }) => (
           <Fade {...TransitionProps} timeout={350}>
             <div>
-              <ProjectListPopper />
+              <ProjectListPopper
+                handleChangeCurrentProject={handleChangeCurrentProject}
+              />
             </div>
           </Fade>
         )}
       </Popper>
     </div>
   );
-};
+});
 
 export default CurrentProject;

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

@@ -43,14 +43,20 @@
   overflow-y: scroll;
 }
 .projectli {
-  height: 86px;
+  cursor: pointer;
+}
+.projectli:hover {
+  background-color: #f2f7ff;
+}
+.projectliBorderBox {
   box-sizing: border-box;
+  height: 86px;
+  margin: 0 0 0 24px;
+  padding: 20px 24px 20px 0;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: flex-start;
-  margin: 0 0 0 24px;
-  padding: 20px 24px 20px 0;
   border-top: 1px solid #f0f2f5;
 }
 .projectliLogo {

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

-// import { useEffect } from "react";
 import smallLogo from "@/assets/project/projectIconSmall.svg";
 import style from "./index.module.css";
 import { InputBase, IconButton } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
 import AddIcon from "@mui/icons-material/Add";
-import { useState } from "react";
 import { useStores } from "@/store/index";
-// import { product } from "@/api/project_api";
+import AddProject from "@/views/Project/components/AddProject";
 import moment from "moment";
+import React, { useMemo, useState } from "react";
+import { toJS } from "mobx";
+import { observer } from "mobx-react-lite";
 
-const ProjectListPopper = () => {
+const ProjectListPopper = observer((props: any) => {
+  const { handleChangeCurrentProject } = props;
+  let addProjectRef: any = React.createRef();
   const { currentProjectStore } = useStores();
-  console.log("currentProjectStore", currentProjectStore);
-  console.log("currentProjectInfo", currentProjectStore.currentProjectInfo);
-  console.log("projectList", currentProjectStore.projectList);
-  const [projectList, setProjectList] = useState<any>([]);
-
-  // const { data, error, loading, run } = useMyRequest(product, {
-  //   manual: true,
-  //   onSuccess: (result, params) => {
-  //     console.log(result);
-  //     setProjectList(result.data);
-  //   },
-  // });
-  // useEffect(() => {
-  //   run();
-  // }, []);
-  const run = () => {
-    console.log("run");
+  const handleClickOpen = () => {
+    addProjectRef.current.handleClickOpen();
+  };
+  const [name, setName] = useState("");
+  const nameChange = (e: any) => {
+    setName(e.target.value);
   };
 
+  const list = useMemo(() => {
+    return toJS(currentProjectStore.projectList).filter((item: any) => {
+      return item.name?.indexOf(name) !== -1;
+    });
+  }, [currentProjectStore.projectList, name]);
+
+  // const handleChangeCurrentProject = (project: any) => {
+  //   currentProjectStore.changeProject(project);
+  // };
+
   return (
     <div className={style.projectBox}>
-      {/* 123 */}
-      <div className={style.searchBox} onClick={() => run()}>
+      <div className={style.searchBox}>
         <IconButton
           type="submit"
           className={style.searchButton}
@@ -45,23 +46,37 @@ const ProjectListPopper = () => {
           className={style.searchInput}
           placeholder="请输入项目名称"
           inputProps={{ "aria-label": "请输入项目名称" }}
+          value={name}
+          onChange={nameChange}
         />
-        <IconButton type="submit" className={style.add} aria-label="search">
+        <IconButton
+          onClick={handleClickOpen}
+          type="submit"
+          className={style.add}
+          aria-label="search"
+        >
           <AddIcon className={style.addIcon} />
         </IconButton>
+        <AddProject onRef={addProjectRef} />
       </div>
       <div className={style.projectlist}>
-        {projectList.map((item: any) => {
+        {list.map((item: any) => {
           return (
-            <div className={style.projectli}>
-              <img src={smallLogo} alt="" className={style.projectliLogo} />
-              <div className={style.projectliInfo}>
-                <div className={style.projectName}>{item.name}</div>
-                <div className={style.projectOwnerTime}>
-                  <span className={style.projectOwner}>{item.owner}</span>
-                  <span className={style.projectTime}>
-                    {moment(item.createdAt).format("YYYY-MM-DD")}
-                  </span>
+            <div
+              className={style.projectli}
+              key={item.id}
+              onClick={() => handleChangeCurrentProject(item)}
+            >
+              <div className={style.projectliBorderBox}>
+                <img src={smallLogo} alt="" className={style.projectliLogo} />
+                <div className={style.projectliInfo}>
+                  <div className={style.projectName}>{item.name}</div>
+                  <div className={style.projectOwnerTime}>
+                    <span className={style.projectOwner}>{item.owner}</span>
+                    <span className={style.projectTime}>
+                      {moment(item.createdAt).format("YYYY-MM-DD")}
+                    </span>
+                  </div>
                 </div>
               </div>
             </div>
@@ -70,6 +85,6 @@ const ProjectListPopper = () => {
       </div>
     </div>
   );
-};
+});
 
 export default ProjectListPopper;