From 585020a1c90c9a543a29742fac429c2058637fdb Mon Sep 17 00:00:00 2001 From: wanggeng <450292408@qq.com> Date: Thu, 14 Mar 2024 23:34:40 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/card/CardProjEdit.tsx | 16 ++ src/components/card/card-proj-edit.css | 37 +++ src/components/step/StepProjEdit.tsx | 16 ++ src/components/step/step-proj-edit.css | 44 ++++ src/interfaces/step/IStepProj.ts | 7 + src/layout/body/Body.tsx | 5 + src/route/proj/ProjCreate.tsx | 297 +++++++++++++------------ src/route/proj/ProjEdit.tsx | 32 +++ src/route/proj/ProjNew.tsx | 103 +++++---- src/route/proj/proj-create.css | 1 - src/route/proj/proj-edit.css | 4 + 11 files changed, 372 insertions(+), 190 deletions(-) create mode 100644 src/components/card/CardProjEdit.tsx create mode 100644 src/components/card/card-proj-edit.css create mode 100644 src/components/step/StepProjEdit.tsx create mode 100644 src/components/step/step-proj-edit.css create mode 100644 src/interfaces/step/IStepProj.ts create mode 100644 src/route/proj/ProjEdit.tsx create mode 100644 src/route/proj/proj-edit.css diff --git a/src/components/card/CardProjEdit.tsx b/src/components/card/CardProjEdit.tsx new file mode 100644 index 0000000..48cc5fe --- /dev/null +++ b/src/components/card/CardProjEdit.tsx @@ -0,0 +1,16 @@ +import './card-proj-edit.css'; + +export default function CardProjEdit() { + return ( +
+
软件基本信息
+
请完善软件的介绍，详细介绍等基本信息
+
+ { + e.preventDefault(); + }}>编辑 + +
+
+ ) +} \ No newline at end of file diff --git a/src/components/card/card-proj-edit.css b/src/components/card/card-proj-edit.css new file mode 100644 index 0000000..8536c4c --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/components/step/StepProjEdit.tsx b/src/components/step/StepProjEdit.tsx new file mode 100644 index 0000000..4dc0703 --- /dev/null +++ b/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 ( +
+
+
{props.step}
+
{props.desc}
+
+
+
{props.children}
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/step/step-proj-edit.css b/src/components/step/step-proj-edit.css new file mode 100644 index 0000000..60e4fa4 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/interfaces/step/IStepProj.ts b/src/interfaces/step/IStepProj.ts new file mode 100644 index 0000000..08c5451 --- /dev/null +++ b/src/interfaces/step/IStepProj.ts @@ -0,0 +1,7 @@ +import {ReactNode} from "react"; + +export interface IStepProj { + step: number; + desc: string; + children: ReactNode +} \ No newline at end of file diff --git a/src/layout/body/Body.tsx b/src/layout/body/Body.tsx index 5560419..3cb1a6a 100644 --- a/src/layout/body/Body.tsx +++ b/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: + }, + { + path: '/proj-edit', + element: } ]) diff --git a/src/route/proj/ProjCreate.tsx b/src/route/proj/ProjCreate.tsx index 7185fc0..8255557 100644 --- a/src/route/proj/ProjCreate.tsx +++ b/src/route/proj/ProjCreate.tsx @@ -5,165 +5,168 @@ import CardProjType from "../../components/card/CardProjType.tsx"; export default function ProjCreate() { const nav = useNavigate(); + const height = window.innerHeight - 150; return ( <> 首页}, - {title: 创建项目}, + {title: '创建项目'}, ]} /> -
- { - nav(`/proj-new/q/${price}`) +
+
+ - { - nav(`/proj-new/xdp/${price}`) + ]} + buyArray={[ + { + price: 500, + handleClick: (_title, price) => { + nav(`/proj-new/q/${price}`) + } } - }, - { - label: '加急：', - price: 300, - handleClick: (_title, price) => { - nav(`/proj-new/xdj/${price}`) + ]} + /> + - { - nav(`/proj-new/x/${price}`) + ]} + chargeLineArray={[ + { + price: 100, + title: '安装包100元' + }, + { + price: 50, + title: '系统演示视频文件50元' } - } - ]} - /> - { - nav(`/proj-new/m/${price}`) + ]} + buyArray={[ + { + label: '普件：', + price: 200, + handleClick: (_title, price) => { + nav(`/proj-new/xdp/${price}`) + } + }, + { + label: '加急：', + price: 300, + handleClick: (_title, price) => { + nav(`/proj-new/xdj/${price}`) + } } - } - ]} - /> + ]} + /> + { + nav(`/proj-new/x/${price}`) + } + } + ]} + /> + { + nav(`/proj-new/m/${price}`) + } + } + ]} + /> +
) diff --git a/src/route/proj/ProjEdit.tsx b/src/route/proj/ProjEdit.tsx new file mode 100644 index 0000000..42c27a6 --- /dev/null +++ b/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 ( + <> + 首页}, + {title: 创建项目}, + {title: '编辑项目'}, + ]} + /> +
+
+ + + + + + + +
+
+ + ) +} \ No newline at end of file diff --git a/src/route/proj/ProjNew.tsx b/src/route/proj/ProjNew.tsx index 5e3692b..bd393df 100644 --- a/src/route/proj/ProjNew.tsx +++ b/src/route/proj/ProjNew.tsx @@ -1,6 +1,7 @@ import './proj-new.css'; -import {Link, useNavigate} from "react-router-dom"; -import {Breadcrumb, Button, Flex, Form, type FormProps, Input} from "antd"; +import {Link, useNavigate, useParams} from "react-router-dom"; +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["onFinish"] = (values) => { console.log('Success:', values); - + setIsModalOpen(true); }; const onFinishFailed: FormProps["onFinishFailed"] = (errorInfo) => { console.log('Failed:', errorInfo); }; + const handleConfirmOk = () => { + // 扣款 + nav('/proj-edit'); + } + + const handleConfirmCancel = () => { + setIsModalOpen(false); + } + const onBack = () => { nav(-1); } @@ -31,52 +44,58 @@ export default function ProjNew() { items={[ {title: 首页}, {title: 创建项目}, - {title: 新建项目}, + {title: '新建项目'}, ]} /> -
-
请完善项目的基本信息
-
-
- - label="系统标题" - name="projTitle" - rules={[{required: true, message: '请输入系统标题'}]} +
+
+
请完善项目的基本信息
+
+ - - + + label="系统标题" + name="projTitle" + rules={[{required: true, message: '请输入系统标题'}]} + > + + - - label="简单描述" - name="projDesc" - rules={[{required: true, message: '请输入简单描述'}]} - > -