feat: 调整项目列表文件位置

README.md

@@ -9,7 +9,7 @@ In the project directory, you can run:
 ### `npm start`
 
 Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+Open [http://localhost:8088](http://localhost:8088) to view it in the browser.
 
 The page will reload if you make edits.\
 You will also see any lint errors in the console.

scripts/start.js

@@ -42,7 +42,7 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 }
 
 // Tools like Cloud9 rely on this.
-const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
+const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 8088;
 const HOST = process.env.HOST || "0.0.0.0";
 
 if (process.env.HOST) {

src/assets/style/public.css

-div::-webkit-scrollbar, main::-webkit-scrollbar {
+/* 修改滚动条样式 */
+div::-webkit-scrollbar,
+main::-webkit-scrollbar {
   width: 8px;
   height: 5px !important;
 }
 
-div::-webkit-scrollbar-track, main::-webkit-scrollbar-track {
+div::-webkit-scrollbar-track,
+main::-webkit-scrollbar-track {
   background-color: #fff;
   -webkit-border-radius: 2em;
   -moz-border-radius: 2em;
   border-radius: 2em;
 }
 
-div::-webkit-scrollbar-thumb, main::-webkit-scrollbar-thumb {
-  background-color: #D8D8D8;
+div::-webkit-scrollbar-thumb,
+main::-webkit-scrollbar-thumb {
+  background-color: #d8d8d8;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;

src/views/MenuLayout/index.tsx

@@ -5,7 +5,8 @@ import {
   ListItemText,
   ListItemButton,
 } from "@mui/material";
-import CurrentProject from "./CurrentProject";
+// import CurrentProject from "./CurrentProject";
+import CurrentProject from "../Project/components/CurrentProject";
 import React from "react";
 import { Outlet, useNavigate } from "react-router-dom";
 import style from "./index.module.css";

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

+.currentProject {
+  background-color: #f7f8fa;
+  padding: 17px 16px 17px 20px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+}
+.logo {
+  width: 32px;
+  border-radius: 4px;
+  background-color: #fff;
+  margin-right: 12px;
+  display: block;
+}
+.info {
+  flex: 1;
+}
+.name {
+  color: #1e2633;
+  line-height: 22px;
+  font-size: 14px;
+  font-weight: 600;
+}
+.desc {
+  color: #8a9099;
+  line-height: 20px;
+  font-size: 14px;
+}
+.showProjectList {
+  color: #c2c6cc;
+  font-size: 12px;
+}

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

+// import { useEffect } from "react";
+import logo from "@/assets/project/projectIcon.svg";
+// import smallLogo from "@/assets/project/projectIconSmall.svg";
+import style from "./index.module.css";
+import ArrowForwardIosIcon from "@material-ui/icons/ArrowForwardIos";
+import Popper from "@material-ui/core/Popper";
+// import Paper from "@material-ui/core/Paper";
+import Fade from "@material-ui/core/Fade";
+// import InputBase from "@material-ui/core/InputBase";
+// import useMyRequest from "@/hooks/useMyRequest";
+// import { product } from "@/api/project_api";
+// import moment from "moment";
+import ProjectListPopper from "../ProjectListPopper";
+import { useState } from "react";
+
+const CurrentProject = () => {
+  const currentProjectInfo = {
+    id: "123",
+    name: "项目名称",
+    desc: "项目描述",
+  };
+  const [open, setOpen] = useState(false);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const handleShowProjectList = (e: any) => {
+    setOpen(!open);
+    setAnchorEl(anchorEl ? null : e.currentTarget);
+  };
+  // const open = Boolean(anchorEl);
+  const id = open ? "spring-popper" : undefined;
+  // 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();
+  // }, []);
+
+  return (
+    <div>
+      <div
+        className={style.currentProject}
+        aria-describedby="projectList"
+        onClick={handleShowProjectList}
+      >
+        <img src={logo} alt="" className={style.logo} />
+        <div className={style.info}>
+          <div className={style.name}>{currentProjectInfo.name}</div>
+          <div className={style.desc}>{currentProjectInfo.desc}</div>
+        </div>
+        <ArrowForwardIosIcon
+          className={style.showProjectList}
+          style={{ fontSize: 12 }}
+        />
+      </div>
+      <Popper
+        id={id}
+        open={open}
+        anchorEl={anchorEl}
+        placement="right-start"
+        transition
+      >
+        {({ TransitionProps }) => (
+          <Fade {...TransitionProps} timeout={350}>
+            {/* <Paper> */}
+            <ProjectListPopper />
+            {/* <div className={style.projectBox}>
+              <div className={style.searchBox} onClick={() => run()}>
+                <InputBase
+                  // className={classes.input}
+                  placeholder="请输入项目名称"
+                  inputProps={{ "aria-label": "search google maps" }}
+                />
+              </div>
+              <div className={style.projectlist}>
+                {projectList.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>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div> */}
+            {/* </Paper> */}
+          </Fade>
+        )}
+      </Popper>
+    </div>
+  );
+};
+
+export default CurrentProject;

src/views/MenuLayout/CurrentProject/index.tsx → src/views/Project/components/ProjectList/index.tsx

@@ -4,14 +4,14 @@ import smallLogo from "@/assets/project/projectIconSmall.svg";
 import style from "./index.module.css";
 import ArrowForwardIosIcon from "@material-ui/icons/ArrowForwardIos";
 import Popper from "@material-ui/core/Popper";
-import Paper from "@material-ui/core/Paper";
 import Fade from "@material-ui/core/Fade";
+import InputBase from "@material-ui/core/InputBase";
 import { useEffect, useState } from "react";
 import useMyRequest from "@/hooks/useMyRequest";
 import { product } from "@/api/project_api";
 import moment from "moment";
 
-const CurrentProject = () => {
+const ProjectList = () => {
   const currentProjectInfo = {
     id: "123",
     name: "项目名称",
@@ -24,6 +24,8 @@ const CurrentProject = () => {
     setOpen(!open);
     setAnchorEl(anchorEl ? null : e.currentTarget);
   };
+  // const open = Boolean(anchorEl);
+  const id = open ? "spring-popper" : undefined;
   const [projectList, setProjectList] = useState<any>([]);
 
   const { data, error, loading, run } = useMyRequest(product, {
@@ -40,6 +42,7 @@ const CurrentProject = () => {
   }, []);
 
   return (
+    <div>
       <div
         className={style.currentProject}
         aria-describedby="projectList"
@@ -54,7 +57,9 @@ const CurrentProject = () => {
           className={style.showProjectList}
           style={{ fontSize: 12 }}
         />
+      </div>
       <Popper
+        id={id}
         open={open}
         anchorEl={anchorEl}
         placement="right-start"
@@ -62,10 +67,14 @@ const CurrentProject = () => {
       >
         {({ TransitionProps }) => (
           <Fade {...TransitionProps} timeout={350}>
-            <Paper>
+            {/* <Paper> */}
             <div className={style.projectBox}>
               <div className={style.searchBox} onClick={() => run()}>
-                  searchBox
+                <InputBase
+                  // className={classes.input}
+                  placeholder="请输入项目名称"
+                  inputProps={{ "aria-label": "search google maps" }}
+                />
               </div>
               <div className={style.projectlist}>
                 {projectList.map((item: any) => {
@@ -92,15 +101,12 @@ const CurrentProject = () => {
                 })}
               </div>
             </div>
-            </Paper>
+            {/* </Paper> */}
           </Fade>
         )}
       </Popper>
-      {/* <Popper id="projectList" open={open} placement="right-start">
-                <div className={style.name}>projectlist</div>
-            </Popper> */}
     </div>
   );
 };
 
-export default CurrentProject;
+export default ProjectList;

src/views/MenuLayout/CurrentProject/index.module.css → src/views/Project/components/ProjectListPopper/index.module.css

-.currentProject {
-  background-color: #f7f8fa;
-  padding: 17px 16px 17px 20px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  align-items: center;
-}
-.logo {
-  width: 32px;
-  border-radius: 4px;
-  background-color: #fff;
-  margin-right: 12px;
-  display: block;
-}
-.info {
-  flex: 1;
-}
-.name {
-  color: #1e2633;
-  line-height: 22px;
-  font-size: 14px;
-  font-weight: 600;
-}
-.desc {
-  color: #8a9099;
-  line-height: 20px;
-  font-size: 14px;
-}
-.showProjectList {
-  color: #c2c6cc;
-  font-size: 12px;
-}
 .projectBox {
   width: 260px;
   height: calc(100vh - 57px);
@@ -55,7 +22,7 @@
   align-items: flex-start;
   margin: 0 0 0 24px;
   padding: 20px 24px 20px 0;
-  border-bottom: 1px solid #f0f2f5;
+  border-top: 1px solid #f0f2f5;
 }
 .projectliLogo {
   width: 24px;
@@ -79,13 +46,3 @@
   line-height: 20px;
   font-size: 14px;
 }
-/* <div className={style.projectli}>
-    <img src={logo} alt="" className={style.logo} />
-    <div className={style.projectliInfo}>
-        <div className={style.projectName}>{item.name}</div>
-        <div className={style.projectOwnerTime}>
-            <div className={style.projectOwner}>{item.owner}</div>
-            <div className={style.projectTime}>{item.createdAt}</div>
-        </div>
-    </div>
-</div> */

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 from "@material-ui/core/InputBase";
+import { useEffect, useState } from "react";
+import useMyRequest from "@/hooks/useMyRequest";
+import { product } from "@/api/project_api";
+import moment from "moment";
+import Loading from "@/views/Loading";
+
+const ProjectListPopper = () => {
+  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();
+  }, []);
+
+  return (
+    <div className={style.projectBox}>
+      <div className={style.searchBox} onClick={() => run()}>
+        <InputBase
+          // className={classes.input}
+          placeholder="请输入项目名称"
+          inputProps={{ "aria-label": "search google maps" }}
+        />
+      </div>
+      <div className={style.projectlist}>
+        {projectList.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>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default ProjectListPopper;