Skip to content

B
bkunyun
Commit 73623a77 authored by chenshouchao's avatar chenshouchao
Browse files
Options

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

parent 4af9e88c
Hide whitespace changes
Inline Side-by-side
Showing with 268 additions and 100 deletions
README.md
View file @ 73623a77
...@@ -9,7 +9,7 @@ In the project directory, you can run: ...@@ -9,7 +9,7 @@ In the project directory, you can run:
### `npm start` ### `npm start`
Runs the app in the development mode.\ 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.\ The page will reload if you make edits.\
You will also see any lint errors in the console. You will also see any lint errors in the console.
......
scripts/start.js
View file @ 73623a77
...@@ -42,7 +42,7 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { ...@@ -42,7 +42,7 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
} }
// Tools like Cloud9 rely on this. // 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"; const HOST = process.env.HOST || "0.0.0.0";
if (process.env.HOST) { if (process.env.HOST) {
......
src/assets/style/public.css
View file @ 73623a77
div::-webkit-scrollbar, main::-webkit-scrollbar { /* 修改滚动条样式 */
div::-webkit-scrollbar,
main::-webkit-scrollbar {
width: 8px; width: 8px;
height: 5px !important; height: 5px !important;
} }
div::-webkit-scrollbar-track, main::-webkit-scrollbar-track { div::-webkit-scrollbar-track,
main::-webkit-scrollbar-track {
background-color: #fff; background-color: #fff;
-webkit-border-radius: 2em; -webkit-border-radius: 2em;
-moz-border-radius: 2em; -moz-border-radius: 2em;
border-radius: 2em; border-radius: 2em;
} }
div::-webkit-scrollbar-thumb, main::-webkit-scrollbar-thumb { div::-webkit-scrollbar-thumb,
background-color: #D8D8D8; main::-webkit-scrollbar-thumb {
background-color: #d8d8d8;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
height: 5px !important; height: 5px !important;
} }
\ No newline at end of file
src/views/MenuLayout/index.tsx
View file @ 73623a77
...@@ -5,7 +5,8 @@ import { ...@@ -5,7 +5,8 @@ import {
ListItemText, ListItemText,
ListItemButton, ListItemButton,
} from "@mui/material"; } from "@mui/material";
import CurrentProject from "./CurrentProject"; // import CurrentProject from "./CurrentProject";
import CurrentProject from "../Project/components/CurrentProject";
import React from "react"; import React from "react";
import { Outlet, useNavigate } from "react-router-dom"; import { Outlet, useNavigate } from "react-router-dom";
import style from "./index.module.css"; import style from "./index.module.css";
......
src/views/Project/components/CurrentProject/index.module.css 0 → 100644
View file @ 73623a77
.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 0 → 100644
View file @ 73623a77
// 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
View file @ 73623a77
...@@ -4,14 +4,14 @@ import smallLogo from "@/assets/project/projectIconSmall.svg"; ...@@ -4,14 +4,14 @@ import smallLogo from "@/assets/project/projectIconSmall.svg";
import style from "./index.module.css"; import style from "./index.module.css";
import ArrowForwardIosIcon from "@material-ui/icons/ArrowForwardIos"; import ArrowForwardIosIcon from "@material-ui/icons/ArrowForwardIos";
import Popper from "@material-ui/core/Popper"; import Popper from "@material-ui/core/Popper";
import Paper from "@material-ui/core/Paper";
import Fade from "@material-ui/core/Fade"; import Fade from "@material-ui/core/Fade";
import InputBase from "@material-ui/core/InputBase";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import useMyRequest from "@/hooks/useMyRequest"; import useMyRequest from "@/hooks/useMyRequest";
import { product } from "@/api/project_api"; import { product } from "@/api/project_api";
import moment from "moment"; import moment from "moment";
const CurrentProject = () => { const ProjectList = () => {
const currentProjectInfo = { const currentProjectInfo = {
id: "123", id: "123",
name: "项目名称", name: "项目名称",
...@@ -24,6 +24,8 @@ const CurrentProject = () => { ...@@ -24,6 +24,8 @@ const CurrentProject = () => {
setOpen(!open); setOpen(!open);
setAnchorEl(anchorEl ? null : e.currentTarget); setAnchorEl(anchorEl ? null : e.currentTarget);
}; };
// const open = Boolean(anchorEl);
const id = open ? "spring-popper" : undefined;
const [projectList, setProjectList] = useState<any>([]); const [projectList, setProjectList] = useState<any>([]);
const { data, error, loading, run } = useMyRequest(product, { const { data, error, loading, run } = useMyRequest(product, {
...@@ -40,21 +42,24 @@ const CurrentProject = () => { ...@@ -40,21 +42,24 @@ const CurrentProject = () => {
}, []); }, []);
return ( return (
<div <div>
className={style.currentProject} <div
aria-describedby="projectList" className={style.currentProject}
onClick={handleShowProjectList} aria-describedby="projectList"
> onClick={handleShowProjectList}
<img src={logo} alt="" className={style.logo} /> >
<div className={style.info}> <img src={logo} alt="" className={style.logo} />
<div className={style.name}>{currentProjectInfo.name}</div> <div className={style.info}>
<div className={style.desc}>{currentProjectInfo.desc}</div> <div className={style.name}>{currentProjectInfo.name}</div>
<div className={style.desc}>{currentProjectInfo.desc}</div>
</div>
<ArrowForwardIosIcon
className={style.showProjectList}
style={{ fontSize: 12 }}
/>
</div> </div>
<ArrowForwardIosIcon
className={style.showProjectList}
style={{ fontSize: 12 }}
/>
<Popper <Popper
id={id}
open={open} open={open}
anchorEl={anchorEl} anchorEl={anchorEl}
placement="right-start" placement="right-start"
...@@ -62,45 +67,46 @@ const CurrentProject = () => { ...@@ -62,45 +67,46 @@ const CurrentProject = () => {
> >
{({ TransitionProps }) => ( {({ TransitionProps }) => (
<Fade {...TransitionProps} timeout={350}> <Fade {...TransitionProps} timeout={350}>
<Paper> {/* <Paper> */}
<div className={style.projectBox}> <div className={style.projectBox}>
<div className={style.searchBox} onClick={() => run()}> <div className={style.searchBox} onClick={() => run()}>
searchBox <InputBase
</div> // className={classes.input}
<div className={style.projectlist}> placeholder="请输入项目名称"
{projectList.map((item: any) => { inputProps={{ "aria-label": "search google maps" }}
return ( />
<div className={style.projectli}> </div>
<img <div className={style.projectlist}>
src={smallLogo} {projectList.map((item: any) => {
alt="" return (
className={style.projectliLogo} <div className={style.projectli}>
/> <img
<div className={style.projectliInfo}> src={smallLogo}
<div className={style.projectName}>{item.name}</div> alt=""
<div className={style.projectOwnerTime}> className={style.projectliLogo}
<span className={style.projectOwner}> />
{item.owner} <div className={style.projectliInfo}>
</span> <div className={style.projectName}>{item.name}</div>
<span className={style.projectTime}> <div className={style.projectOwnerTime}>
{moment(item.createdAt).format("YYYY-MM-DD")} <span className={style.projectOwner}>
</span> {item.owner}
</div> </span>
<span className={style.projectTime}>
{moment(item.createdAt).format("YYYY-MM-DD")}
</span>
</div> </div>
</div> </div>
); </div>
})} );
</div> })}
</div> </div>
</Paper> </div>
{/* </Paper> */}
</Fade> </Fade>
)} )}
</Popper> </Popper>
{/* <Popper id="projectList" open={open} placement="right-start">
<div className={style.name}>projectlist</div>
</Popper> */}
</div> </div>
); );
}; };
export default CurrentProject; export default ProjectList;
src/views/MenuLayout/CurrentProject/index.module.css → src/views/Project/components/ProjectListPopper/index.module.css
View file @ 73623a77
.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 { .projectBox {
width: 260px; width: 260px;
height: calc(100vh - 57px); height: calc(100vh - 57px);
...@@ -55,7 +22,7 @@ ...@@ -55,7 +22,7 @@
align-items: flex-start; align-items: flex-start;
margin: 0 0 0 24px; margin: 0 0 0 24px;
padding: 20px 24px 20px 0; padding: 20px 24px 20px 0;
border-bottom: 1px solid #f0f2f5; border-top: 1px solid #f0f2f5;
} }
.projectliLogo { .projectliLogo {
width: 24px; width: 24px;
...@@ -79,13 +46,3 @@ ...@@ -79,13 +46,3 @@
line-height: 20px; line-height: 20px;
font-size: 14px; 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 0 → 100644
View file @ 73623a77
// 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;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment