编辑页面顶部状态管理

src/components/card/CardProjEdit.tsx

@@ -1,11 +1,13 @@
 import './card-proj-edit.css';
-import {EditStepEnum, IProjEdit} from "../../interfaces/card/ICardProj.ts";
-
+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">
-            <div className="title">{props.title}</div>
-            <div className="desc">{props.desc}</div>
-            <div className="option">
-                {renderBtn()}
-                {props.status == EditStepEnum.EDITED ? <span className="status"></span> : <></>}
+        // 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>
+            <div className="option">
+                {props.status == EditStepEnum.EDITED ? <span className="status"></span> : <div></div>}
+                {renderBtn()}
+
+            </div>
+            
+            <div className='downBoxx'></div>
         </div>
     )
 }

src/components/card/card-proj-edit.css

@@ -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 {
@@ -33,4 +64,7 @@
     transform: rotate(-45deg);
     border-top: transparent;
     border-right: transparent;
+}
+.noEdit:hover{
+    cursor: not-allowed;
 }

src/components/step/StepProjEdit.tsx

@@ -1,86 +1,110 @@
 import './step-proj-edit.css';
-import {IStepProj, Process} from "../../interfaces/step/IStepProj.ts";
-import {CheckOutlined} from "@ant-design/icons";
+import { IStepProj, Process } from "../../interfaces/step/IStepProj.ts";
+// 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' : ''
-                
-                // }}
-                >
-                    {props.step}
+                <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">
-                {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={
+                    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>
+                    <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="step-line"></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>
+            )
+        } 
+        // 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={{ maxHeight: `${height - 20}px` }}>
+            {/* <div className="step-card" style={{  }}> */}
                 <div className="step-card-list">{props.children}</div>
             </div>
         </div>

src/components/step/step-proj-edit.css

@@ -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,

src/interfaces/card/ICardProj.ts

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

src/route/index/index.css

@@ -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;

src/route/proj/ProjEdit.tsx

@@ -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'
                             />
                         ) : <></>
                     }

src/route/proj/proj-edit.css

@@ -1,15 +1,13 @@
 .proj-edit-box{
     margin-top: 21px;
-    /* background-color: red; */
-    overflow: scroll;
-
+    overflow: auto;
+    
 }
 .proj-edit {
     background-color: var(--color-light);
     padding: 15px;
     display: flex;
     justify-content: space-around;
-    
 }
 
 .btn-container {