Tenlion/system-copyright-react
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

编辑页面顶部状态管理

Browse Source
This commit is contained in:
xixi 2024-05-09 17:43:12 +08:00
parent 9d608724d2
commit e707975095
22 changed files with 405 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/card/CardProjEdit.tsx
View File

@ -1,11 +1,13 @@
import './card-proj-edit.css';
import { EditStepEnum, IProjEdit } from "../../interfaces/card/ICardProj.ts";
import { useEffect } from 'react';
export default function CardProjEdit(props: IProjEdit) {
useEffect(()=>{
})
const renderBtn = () => {
if (props.canBtnClick == false) {
return <a href="/#" className="edit" style={{color: 'var(--color-border)'}} onClick={(e) => {
return <a href="/#" className="edit noEdit" style={{color: '#c2c2c2',textDecoration:'none'}} onClick={(e) => {
e.preventDefault();
}}>{props.btnName ? props.btnName : '编辑'}</a>
} else {
@ -14,16 +16,33 @@ export default function CardProjEdit(props: IProjEdit) {
props.handleEdit();
}}>{props.btnName ? props.btnName : '编辑'}</a>
}
// if (props.canBtnClick == false) {
// return <a href="/#" className="edit" style={{ color: 'var(--color-border)' }} onClick={(e) => {
// e.preventDefault();
// }}>编辑</a>
// } else {
// return <a href="/#" className="edit" onClick={(e) => {
// e.preventDefault();
// props.handleEdit();
// }}>编辑</a>
// }
}
return (
<div className="card-proj-edit">
// props.step === 1 ? 'complete-one' : props.step === 2 ? 'complete-two' : props.step === 3 ? 'complete-three' : props.step === 4 ? 'complete-four' : ''
<div className="card-proj-edit" style={{background:props.background,boxShadow:props.shadow}}>
{/* <div className={ }> */}
<div className='card-proj-edit-text'>
<div className="title">{props.title}</div>
<div className="desc">{props.desc}</div>
<div className="option">
{renderBtn()}
{props.status == EditStepEnum.EDITED ? <span className="status"></span> : <></>}
</div>
<div className="option">
{props.status == EditStepEnum.EDITED ? <span className="status"></span> : <div></div>}
{renderBtn()}
</div>
<div className='downBoxx'></div>
</div>
)
}

48
src/components/card/card-proj-edit.css
View File

@ -1,27 +1,58 @@
.card-proj-edit {
width: 224px;
padding: 10px 15px;
width: 309px;
padding: 20px 25px;
box-sizing: border-box;
background-color: pink;
margin-bottom: 27px;
display: flex;
justify-content: space-between;
border-radius: 4px;
position: relative;
}
.card-proj-edit-text {
width: 230px;
}
.downBoxx{
width: 25px;
height: 8px;
position: absolute;
background: url(../../static/editPro/bot.png);
background-size: 100% 100%;
left: 140px;
top: -18px;
}
.card-proj-edit .title {
font-size: 18px;
font-size: 16px;
font-weight: bold;
/* font-family: Microsoft YaHei UI; */
/* color: #c2c2c2; */
}
.card-proj-edit .desc {
margin: 5px 0 10px 0;
max-height: 36px;
line-height: 18px;
color: var(--color-note);
/* margin: 5px 0 10px 0; */
margin-top: 18px;
/* max-height: 36px; */
/* line-height: 18px; */
/* color: var(--color-note); */
font-weight: 300;
font-size: 14px;
color: #8B919D;
}
.card-proj-edit .option {
width: 32px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
/* background-color: aqua; */
}
.card-proj-edit .option .edit {
color: var(--color-blue);
text-decoration:underline;
}
.card-proj-edit .option .status {
@ -34,3 +65,6 @@
border-top: transparent;
border-right: transparent;
}
.noEdit:hover{
cursor: not-allowed;
}

118
src/components/step/StepProjEdit.tsx
View File

@ -1,86 +1,110 @@
import './step-proj-edit.css';
import { IStepProj, Process } from "../../interfaces/step/IStepProj.ts";
import {CheckOutlined} from "@ant-design/icons";
// import { CheckOutlined } from "@ant-design/icons";
import { useEffect } from 'react';
export default function StepProjEdit(props: IStepProj) {
useEffect(() => {
console.log(props);
}, [])
const height = window.innerHeight - 390;
// 状态值 已完成:Process.COMPLETE 进行中: Process.PROCESSING 未操作:Process.PENDING
const renderStepNo = () => {
// if (props.process == Process.COMPLETE) {
// return (
// <div className="no complete">
// <CheckOutlined/>
// </div>
// )
// } else if (props.process == Process.PROCESSING) {
// return <div className="no processing">{props.step}</div>
// }
// return (
// <div className="no pending">
// {props.step}
// </div>
// )
if (props.process == Process.COMPLETE) {
return (
<div className="no complete"
// style={{color:
// props.step === 1 ? '#57a2fd' :
// props.step === 2 ? '#1BC8B5' :
// props.step === 3 ? '#60a4f8' :
// props.step === 4 ? '#FF6609' : ''
// }}
>
if (props.process == Process.COMPLETE) {
// 状态:已完成
return (
<div className={
props.step === 1 ? 'complete-one' : props.step === 2 ? 'complete-two' : props.step === 3 ? 'complete-three' : props.step === 4 ? 'complete-four' : ''
}>
<div className="complete-num">
{/* <CheckOutlined/> */}
{props.step}
</div>
<div className='complete-text'>
{props.descTitle}
</div>
</div>
)
} else if (props.process == Process.PROCESSING) {
return <div className="no processing">{props.step}</div>
}
// 状态:进行中
return (
<div className="no notop">
<div className={
props.step === 1 ? 'processing-one' : props.step === 2 ? 'processing-two' : props.step === 3 ? 'processing-three' : props.step === 4 ? 'processing-four' : ''
}>
<div className="processing-num">
{props.step}
</div>
)
}
const renderStepDesc = () => {
if (props.process != Process.PENDING) {
return (
<div className="desc">
<div className="title">{props.descTitle}</div>
{/* <div className="detail">{props.descDetail}</div> */}
<div className='processing-text'>
{props.descTitle}
</div>
</div>
)
}
return (
<div className="desc pending">
<div className="title">{props.descTitle}</div>
{/* <div className="detail">{props.descDetail}</div> */}
// 状态:未操作
<div className='pending'>
<div className="pending-num">
{props.step}
</div>
<div className='pending-text'>
{props.descTitle}
</div>
</div>
)
}
// const renderStepDesc = () => {
// if (props.process != Process.PENDING) {
// return (
// <div className="desc">
// <div className="title">{props.descTitle}</div>
// {/* <div className="detail">{props.descDetail}</div> */}
// </div>
// )
// }
// return (
// <div className="desc pending">
// <div className="title">{props.descTitle}</div>
// {/* <div className="detail">{props.descDetail}</div> */}
// </div>
// )
// }
const renderStepLine = () => {
if (!props.hasNext) {
return <></>
}
if (props.process == Process.COMPLETE) {
return <div className="step-line step-line-complete"></div>
// 已完成
return (
<div className={
props.step === 1 ? 'complete-oneLine setLine' : props.step === 2 ? 'complete-twoLine setLine' : props.step === 3 ? 'complete-threeLine setLine' : props.step === 4 ? 'complete-fourLine setLine' : ''
}></div>
)
}
return <div className="step-line"></div>
// else if (props.process == Process.PROCESSING) {
// // 进行中
// return(
// <div className={
// props.step === 1 ? 'processing-oneLine setLine' : props.step === 2 ? 'processing-twoLine setLine' : props.step === 3 ? 'processing-threeLine setLine' : props.step === 4 ? 'processing-fourLine setLine' : ''
// }></div>
// )
// }
return <div className="no-line setLine"></div>
}
return (
<div className="step-proj">
<div className={props.step == 1?'fiestStep':"step" } >
<div className="step" >
{renderStepNo()}
{renderStepDesc()}
{/* {renderStepLine()} */}
{/* {renderStepDesc()} */}
{renderStepLine()}
<div className='downBox'></div>
</div>
<div className="step-card" style={{ maxHeight: `${height - 20}px` }}>
{/* <div className="step-card" style={{ }}> */}
<div className="step-card-list">{props.children}</div>
</div>
</div>

346
src/components/step/step-proj-edit.css
View File

@ -1,155 +1,293 @@
.step-proj {
width: 300px;
width: 317px;
position: relative;
/* overflow: scroll; */
}
.step-proj .fiestStep {
width: 282px;
height: 56px;
.downBox{
width: 25px;
height: 8px;
background-color: pink;
position: relative;
display: flex;
align-items: center;
}
/* style={{
background:props.process != Process.PENDING?'#3790FF':'#8B919D',
}} */
.step-proj .fiestStep:before {
content: "";
position: absolute;
right: -28px;
top: 0;
width: 0;
height: 0;
border-left: 28px solid ;
border-top: 28px solid transparent;
border-bottom: 28px solid transparent;
}
bottom: -20px;
background: url(../../static/editPro/bot.png);
background-size: 100% 100%;
.step-proj .fiestStep .complete {
margin-left: 10px;
}
.step-proj .step {
/* margin-top: 30px;
width: 309px;
height: 56px;
/* background-color: rgb(248, 213, 219); */
margin-top: 10px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: start;
position: relative; */
width: 282px;
height: 56px;
background-color: pink;
position: relative;
}
/* Top 状态:已完成 开始---------------------------------------------------------------*/
.step-proj .step .complete-one {
width: 309px;
height: 56px;
/* background-color: pink; */
display: flex;
align-items: center;
background: url('../../static/editPro/one.png');
background-size: 100% 100%;
}
.step-proj .step:after {
content: "";
/* 已完成状态序号 */
.step-proj .step .complete-num {
width: 30px;
height: 30px;
background: #FFFFFF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-left: 44px;
}
/* 已完成状态第一个序号 */
.step-proj .step .complete-one .complete-num {
margin-left: 16px;
}
/* 已完成状态标题 */
.step-proj .step .complete-text {
font-family: Microsoft YaHei UI;
font-weight: 700;
font-size: 16px;
color: #FFFFFF;
margin-left: 47px;
}
/* 已完成状态第一个标题 */
.step-proj .step .complete-one .complete-text {
margin-left: 61px;
}
.step-proj .step .complete-two {
width: 309px;
height: 56px;
/* background-color: pink; */
display: flex;
align-items: center;
background: url('../../static/editPro/two.png');
background-size: 100% 100%;
}
.step-proj .step .complete-three {
width: 309px;
height: 56px;
/* background-color: pink; */
display: flex;
align-items: center;
background: url('../../static/editPro/three.png');
background-size: 100% 100%;
}
.step-proj .step .complete-four {
width: 309px;
height: 56px;
/* background-color: pink; */
display: flex;
align-items: center;
background: url('../../static/editPro/four.png');
background-size: 100% 100%;
}
/* 已完成状态连接线 */
.step-proj .step .setLine {
width: 49px;
height: 22px;
background-color: pink;
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 28px solid var(--color-light);
border-top: 28px solid transparent;
border-bottom: 28px solid transparent;
right: -67px;
top: 17px;
}
.step-proj .step .complete-oneLine{
background:url('../../static/editPro/lineone.png');
background-size: 100% 100%;
}
.step-proj .step .complete-twoLine{
background:url('../../static/editPro/linetwo.png');
background-size: 100% 100%;
}
.step-proj .step .complete-threeLine{
background:url('../../static/editPro/linethree.png');
background-size: 100% 100%;
}
.step-proj .step:before {
content: "";
position: absolute;
right: -28px;
top: 0;
width: 0;
height: 0;
border-left: 28px solid red;
border-top: 28px solid transparent;
border-bottom: 28px solid transparent;
/* Top 状态:已完成 结束----------------------------------------------------------- */
/* Top 状态:进行中 开始----------------------------------------------------------- */
.step-proj .step .processing-one {
width: 309px;
height: 56px;
/* background-color: pink; */
display: flex;
align-items: center;
background: url('../../static/editPro/processingOne.png');
background-size: 100% 100%;
}
.step-proj .step .no {
/* width: 38px;
.step-proj .step .processing-two {
width: 309px;
height: 56px;
/* background-color: pink; */
display: flex;
align-items: center;
background: url('../../static/editPro/processingTwo.png');
background-size: 100% 100%;
}
.step-proj .step .processing-three {
width: 309px;
height: 56px;
/* background-color: pink; */
display: flex;
align-items: center;
background: url('../../static/editPro/processingThree.png');
background-size: 100% 100%;
}
.step-proj .step .processing-four {
width: 309px;
height: 56px;
/* background-color: pink; */
display: flex;
align-items: center;
background: url('../../static/editPro/processingFour.png');
background-size: 100% 100%;
}
.step-proj .step .processing-num {
width: 21px;
height: 21px;
background: #FFFFFF;
border-radius: 50%;
margin-left: 46px;
display: flex;
justify-content: center;
align-items: center;
font-family: Microsoft YaHei UI;
font-weight: 500;
font-size: 14px;
color: #B5B5B5;
}
.step-proj .step .processing-text {
font-family: Microsoft YaHei UI;
font-weight: 700;
font-size: 16px;
color: #71757E;
margin-left: 47px;
}
/* Top 状态:进行中 结束----------------------------------------------------------- */
/* Top 状态:未操作 开始 ------------------------------------------------------------ */
.step-proj .step .pending {
width: 309px;
height: 56px;
display: flex;
align-items: center;
background: url('../../static/editPro/no.png');
background-size: 100% 100%;
}
.step-proj .step .pending .pending-num {
width: 21px;
height: 21px;
background: #FFFFFF;
border-radius: 50%;
margin-left: 46px;
display: flex;
justify-content: center;
align-items: center;
font-family: Microsoft YaHei UI;
font-weight: 300;
font-size: 14px;
color: #B5B5B5;
}
.step-proj .step .pending .pending-text {
font-family: Microsoft YaHei UI;
font-weight: 700;
font-size: 16px;
color: #71757E;
margin-left: 47px;
}
.step-proj .step .no-line{
background:url('../../static/editPro/lineno.png');
background-size: 100% 100%;
}
/* Top 状态:未操作 结束 ------------------------------------------------------------ */
/* .step-proj .step:nth-child(1){
background: url(../../static/editPro/one.png);
background-size: 100% 100%;
}
.step-proj .step:nth-child(2){
background: url(../../static/editPro/two.png);
background-size: 100% 100%;
}
.step-proj .step:nth-child(3){
}
.step-proj .step:nth-child(4){
} */
/* .step-proj .step .no {
width: 38px;
height: 38px;
border-radius: 50%;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center; */
justify-content: center;
}
.step-proj .complete {
width: 30px;
height: 30px;
background-color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
.step-proj .step .complete {
border: 1px solid var(--color-primary);
color: var(--color-primary);
color: #3790FF;
}
.step-proj .processing {
/* border: 1px solid var(--color-primary);
.step-proj .step .processing {
border: 1px solid var(--color-primary);
background-color: var(--color-primary);
color: var(--color-light); */
width: 21px;
height: 21px;
border-radius: 50%;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
color: #B5B5B5;
color: var(--color-light);
}
.step-proj .notop {
width: 21px;
height: 21px;
border-radius: 50%;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
color: #B5B5B5;
}
.step-proj .pending {
.step-proj .step .pending {
border: 1px solid var(--color-disabled);
color: var(--color-disabled);
}
} */
.step-proj .desc {
.step-proj .step .desc {
margin-left: 15px;
width: 150px;
border: none;
/* background-color: #3790FF; */
display: flex;
}
.step-proj .desc .title {
.step-proj .step .desc .title {
margin-top: 8px;
font-weight: bold;
/* background-color: #3790FF; */
}
.step-proj .fiestStep .desc .title {
margin-left: 60px;
font-weight: 300;
font-size: 16px;
color: #FFFFFF;
}
.step-proj .pending .title {
.step-proj .step .pending .title {
color: var(--color-text-disabled);
}
.step-proj .desc .detail {
.step-proj .step .desc .detail {
margin-top: 10px;
font-size: 12px;
width: 100%;
@ -179,7 +317,7 @@
.step-proj .step-card {
margin-top: 40px;
padding: 10px 0;
border: 1px solid var(--color-border);
/* border: 1px solid var(--color-border); */
overflow: auto;
}
@ -194,7 +332,7 @@
.step-proj .step-card .step-card-list .card-proj-result,
.step-proj .step-card .step-card-list .card-proj-download,
.step-proj .step-card .step-card-list .card-proj-jump {
border-bottom: 1px solid var(--color-border);
/* border-bottom: 1px solid var(--color-border); */
}
.step-proj .step-card .step-card-list .card-proj-edit:last-child,

3
src/interfaces/card/ICardProj.ts
View File

@ -10,7 +10,8 @@ export interface IProjEdit {
status: EditStepEnum;
btnName?: string;
canBtnClick?: boolean;
background?:string;
shadow?:string;
handleEdit(): void;
}

3
src/route/index/index.css
View File

@ -6,7 +6,7 @@
.index .left {
position: fixed;
width: 268px;
width: 267px;
height: 100%;
/* overflow: auto; */
top: 80px;
@ -20,6 +20,7 @@
height: 100%;
position: fixed;
width:calc(100vw - 330px);
/* width: 1575px; */
}
.index .right .top{
margin-top: 26px;

13
src/route/proj/ProjEdit.tsx
View File

@ -53,7 +53,7 @@ export default function ProjEdit() {
});
const height = window.innerHeight - 240;
// const height = window.innerHeight - 240;
const renderEditStep = (editSteps: any[], isEdited: boolean, isGenerateSuccess: boolean) => {
const editStepArray: IProjEdit[] = [];
@ -244,7 +244,8 @@ export default function ProjEdit() {
{title: '编辑项目'},
]}
/> */}
<div className="proj-edit" style={{height: `${height}px`}}>
{/* <div className="proj-edit" style={{height: `${height}px`}}> */}
<div className="proj-edit" style={{}}>
<StepProjEdit step={1} process={isEditStepEdited ? Process.COMPLETE : Process.PROCESSING}
descTitle="完善信息"
descDetail="完善项目的基本信息"
@ -257,6 +258,8 @@ export default function ProjEdit() {
status={item.status}
btnName={item.btnName}
handleEdit={item.handleEdit}
background = {item.status == EditStepEnum.EDITED?'#F5FAFE':'#f3f3f3'}
shadow = {item.status == EditStepEnum.EDITED?'0px 3px 0px 0px rgba(55,144,215,0.18)':''}
/>
})
}
@ -276,6 +279,9 @@ export default function ProjEdit() {
canBtnClick={item.status == EditStepEnum.EDITED}
status={item.status}
handleEdit={item.handleEdit}
background = {item.status == EditStepEnum.EDITED?'#F5FEFA':'#f3f3f3'}
shadow = {item.status == EditStepEnum.EDITED?' 0px 3px 0px 0px rgba(55,215,138,0.18)':''}
/>
})
}
@ -308,6 +314,9 @@ export default function ProjEdit() {
window.location.reload();
}, 1000)
}}
// background = {status == EditStepEnum.EDITED?'#F5FAFE':'#f3f3f3'}
// shadow = {status == EditStepEnum.EDITED?'0px 3px 0px 0px rgba(55,144,215,0.18)':''}
background = '#f3f3f3'
/>
) : <></>
}

4
src/route/proj/proj-edit.css
View File

@ -1,7 +1,6 @@
.proj-edit-box{
margin-top: 21px;
/* background-color: red; */
overflow: scroll;
overflow: auto;
}
.proj-edit {
@ -9,7 +8,6 @@
padding: 15px;
display: flex;
justify-content: space-around;
}
.btn-container {

BIN
src/static/editPro/bot.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 590 B

BIN
src/static/editPro/four.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.1 KiB

BIN
src/static/editPro/lineno.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
src/static/editPro/lineone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
src/static/editPro/linethree.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
src/static/editPro/linetwo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
src/static/editPro/no.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
src/static/editPro/one.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
src/static/editPro/processingFour.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.9 KiB

BIN
src/static/editPro/processingOne.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
src/static/editPro/processingThree.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.7 KiB

BIN
src/static/editPro/processingTwo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.6 KiB

BIN
src/static/editPro/three.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.1 KiB

BIN
src/static/editPro/two.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB