完善页面

src/components/card/CardProjEdit.tsx

@@ -0,0 +1,16 @@
+import './card-proj-edit.css';
+
+export default function CardProjEdit() {
+    return (
+        <div className="card-proj-edit">
+            <div className="title">软件基本信息</div>
+            <div className="desc">请完善软件的介绍，详细介绍等基本信息</div>
+            <div className="option">
+                <a href="/#" className="edit" onClick={(e) => {
+                    e.preventDefault();
+                }}>编辑</a>
+                <span className="status"></span>
+            </div>
+        </div>
+    )
+}

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

@@ -0,0 +1,37 @@
+.card-proj-edit {
+    width: 224px;
+    padding: 10px;
+    border-radius: 6px;
+    border: 1px solid var(--color-border);
+}
+
+.card-proj-edit .title {
+    font-size: 18px;
+    font-weight: bold;
+}
+
+.card-proj-edit .desc {
+    margin: 5px 0 10px 0;
+    height: 36px;
+    line-height: 18px;
+}
+
+.card-proj-edit .option {
+    display: flex;
+    justify-content: space-between;
+}
+
+.card-proj-edit .option .edit {
+    color: var(--color-blue);
+}
+
+.card-proj-edit .option .status {
+    width: 13px;
+    height: 6px;
+    border-style: solid;
+    border-color: var(--color-green);
+    border-width: 4px;
+    transform: rotate(-45deg);
+    border-top: transparent;
+    border-right: transparent;
+}

src/components/step/StepProjEdit.tsx

@@ -0,0 +1,16 @@
+import './step-proj-edit.css';
+import {IStepProj} from "../../interfaces/step/IStepProj.ts";
+
+export default function StepProjEdit(props: IStepProj) {
+    return (
+        <div className="step-proj">
+            <div className="step">
+                <div className="no">{props.step}</div>
+                <div className="desc">{props.desc}</div>
+            </div>
+            <div className="step-card">
+                <div className="step-card-list">{props.children}</div>
+            </div>
+        </div>
+    )
+}

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

@@ -0,0 +1,44 @@
+.step-proj {
+    width: 300px;
+}
+
+.step-proj .step {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.step-proj .step .no {
+    background-color: var(--color-blue);
+    color: var(--color-light);
+    width: 66px;
+    height: 66px;
+    border-radius: 50%;
+    font-size: 33px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.step-proj .step .desc {
+    margin-top: 5px;
+}
+
+.step-proj .step-card {
+    margin-top: 15px;
+}
+
+.step-proj .step-card .step-card-list {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.step-proj .step-card .step-card-list .card-proj-edit {
+    margin-bottom: 15px;
+}
+
+.step-proj .step-card .step-card-list .card-proj-edit:last-child {
+    margin-bottom: 0;
+}

src/interfaces/step/IStepProj.ts

@@ -0,0 +1,7 @@
+import {ReactNode} from "react";
+
+export interface IStepProj {
+    step: number;
+    desc: string;
+    children: ReactNode
+}

src/layout/body/Body.tsx

@@ -3,6 +3,7 @@ import {createBrowserRouter, RouterProvider} from 'react-router-dom';
 import Index from '../../route/index';
 import ProjCreate from "../../route/proj/ProjCreate.tsx";
 import ProjNew from "../../route/proj/ProjNew.tsx";
+import ProjEdit from "../../route/proj/ProjEdit.tsx";
 
 const router = createBrowserRouter([
     {
@@ -16,6 +17,10 @@ const router = createBrowserRouter([
     {
         path: '/proj-new/:type/:price',
         element: <ProjNew />
+    },
+    {
+        path: '/proj-edit',
+        element: <ProjEdit />
     }
 ])
 

src/route/proj/ProjCreate.tsx

@@ -5,14 +5,16 @@ import CardProjType from "../../components/card/CardProjType.tsx";
 
 export default function ProjCreate() {
     const nav = useNavigate();
+    const height = window.innerHeight - 150;
     return (
         <>
             <Breadcrumb
                 items={[
                     {title: <Link to={'/'}>首页</Link>},
-                    {title: <Link to={'/proj-create'}>创建项目</Link>},
+                    {title: '创建项目'},
                 ]}
             />
+            <div style={{height: `${height}px`, overflow: 'auto'}}>
                 <div className="proj-create" >
                     <CardProjType
                         head={'全托管'}
@@ -165,6 +167,7 @@ export default function ProjCreate() {
                         ]}
                     />
                 </div>
+            </div>
         </>
     )
 }

src/route/proj/ProjEdit.tsx

@@ -0,0 +1,32 @@
+import './proj-edit.css';
+import {Link} from "react-router-dom";
+import {Breadcrumb} from "antd";
+import StepProjEdit from "../../components/step/StepProjEdit.tsx";
+import CardProjEdit from "../../components/card/CardProjEdit.tsx";
+
+
+export default function ProjEdit() {
+    const height = window.innerHeight - 150;
+    return (
+        <>
+            <Breadcrumb
+                items={[
+                    {title: <Link to={'/'}>首页</Link>},
+                    {title: <Link to={'/proj-create'}>创建项目</Link>},
+                    {title: '编辑项目'},
+                ]}
+            />
+            <div style={{height: `${height}px`, overflow: 'auto'}}>
+                <div className="proj-edit">
+                    <StepProjEdit step={1} desc="完善信息">
+                        <CardProjEdit/>
+                        <CardProjEdit/>
+                        <CardProjEdit/>
+                        <CardProjEdit/>
+                        <CardProjEdit/>
+                    </StepProjEdit>
+                </div>
+            </div>
+        </>
+    )
+}

src/route/proj/ProjNew.tsx

@@ -1,6 +1,7 @@
 import './proj-new.css';
-import {Link, useNavigate} from "react-router-dom";
+import {Link, useNavigate, useParams} from "react-router-dom";
-import {Breadcrumb, Button, Flex, Form, type FormProps, Input} from "antd";
+import {Breadcrumb, Button, Flex, Form, type FormProps, Input, Modal} from "antd";
+import {useState} from "react";
 
 const {TextArea} = Input;
 
@@ -10,17 +11,29 @@ type FieldType = {
 };
 
 export default function ProjNew() {
+    const height = window.innerHeight - 150;
+    const [isModalOpen, setIsModalOpen] = useState(false);
     const nav = useNavigate();
+    const params = useParams();
 
     const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
         console.log('Success:', values);
-
+        setIsModalOpen(true);
     };
 
     const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (errorInfo) => {
         console.log('Failed:', errorInfo);
     };
 
+    const handleConfirmOk = () => {
+        // 扣款
+        nav('/proj-edit');
+    }
+
+    const handleConfirmCancel = () => {
+        setIsModalOpen(false);
+    }
+
     const onBack = () => {
         nav(-1);
     }
@@ -31,9 +44,10 @@ export default function ProjNew() {
                 items={[
                     {title: <Link to={'/'}>首页</Link>},
                     {title: <Link to={'/proj-create'}>创建项目</Link>},
-                    {title: <Link to={'/proj-new'}>新建项目</Link>},
+                    {title: '新建项目'},
                 ]}
             />
+            <div style={{height: `${height}px`, overflow: 'auto'}}>
                 <div className="proj-new">
                     <div className="proj-title">请完善项目的基本信息</div>
                     <div className="proj-form">
@@ -77,6 +91,11 @@ export default function ProjNew() {
                         </Form>
                     </div>
                 </div>
+            </div>
+            <Modal title="提示" okText="确定" cancelText="取消" open={isModalOpen} onOk={handleConfirmOk}
+                   onCancel={handleConfirmCancel}>
+                <div>该操作会扣除{params.price}元，确定操作码？</div>
+            </Modal>
         </>
     )
 }

src/route/proj/proj-create.css

@@ -1,5 +1,4 @@
 .proj-create {
-    height: 100%;
     background-color: var(--color-light);
     display: flex;
     justify-content: center;

src/route/proj/proj-edit.css

@@ -0,0 +1,4 @@
+.proj-edit {
+    background-color: var(--color-light);
+    padding: 15px;
+}