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:
wanggeng 2024-03-14 23:34:40 +08:00
parent e682b6a382
commit 585020a1c9
11 changed files with 372 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/card/CardProjEdit.tsx Normal file
View File

@ -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>
)
}

37
src/components/card/card-proj-edit.css Normal file
View File

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

16
src/components/step/StepProjEdit.tsx Normal file
View File

@ -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>
)
}

44
src/components/step/step-proj-edit.css Normal file
View File

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

7
src/interfaces/step/IStepProj.ts Normal file
View File

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

5
src/layout/body/Body.tsx
View File

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

297
src/route/proj/ProjCreate.tsx
View File

@ -5,165 +5,168 @@ import CardProjType from "../../components/card/CardProjType.tsx";
export default function ProjCreate() { export default function ProjCreate() {
const nav = useNavigate(); const nav = useNavigate();
const height = window.innerHeight - 150;
return ( return (
<> <>
<Breadcrumb <Breadcrumb
items={[ items={[
{title: <Link to={'/'}>首页</Link>}, {title: <Link to={'/'}>首页</Link>},
{title: <Link to={'/proj-create'}>创建项目</Link>}, {title: '创建项目'},
]} ]}
/> />
<div className="proj-create"> <div style={{height: `${height}px`, overflow: 'auto'}}>
<CardProjType <div className="proj-create" >
head={'全托管'} <CardProjType
bodyLineArray={[ head={'全托管'}
{ bodyLineArray={[
title: '提供的服务：', {
contents: [ title: '提供的服务：',
'提供系统搭建', contents: [
'系统可在线运行三年', '提供系统搭建',
'软著材料编写', '系统可在线运行三年',
'软著申报', '软著材料编写',
'包下证', '软著申报',
'提供系统演示视频文件', '包下证',
'提供系统安装包', '提供系统演示视频文件',
] '提供系统安装包',
}, ]
{ },
title: '使用流程：', {
contents: [ title: '使用流程：',
'编写软著名称', contents: [
'对搭建系统进行核验', '编写软著名称',
'接受证书', '对搭建系统进行核验',
] '接受证书',
} ]
]}
buyArray={[
{
price: 500,
handleClick: (_title, price) => {
nav(`/proj-new/q/${price}`)
} }
} ]}
]} buyArray={[
/> {
<CardProjType price: 500,
head={'写材料+代理'} handleClick: (_title, price) => {
bodyLineArray={[ nav(`/proj-new/q/${price}`)
{ }
title: '提供的服务：',
contents: [
'提供系统搭建平台与客服指导',
'系统可在线运行一年',
'软著材料编写',
'资料补正不限',
'软著申报',
'包下证',
]
},
{
title: '使用流程：',
contents: [
'1、按系统操作手册执行',
]
}
]}
chargeLineArray={[
{
price: 100,
title: '安装包100元'
},
{
price: 50,
title: '系统演示视频文件50元'
}
]}
buyArray={[
{
label: '普件：',
price: 200,
handleClick: (_title, price) => {
nav(`/proj-new/xdp/${price}`)
} }
}, ]}
{ />
label: '加急：', <CardProjType
price: 300, head={'写材料+代理'}
handleClick: (_title, price) => { bodyLineArray={[
nav(`/proj-new/xdj/${price}`) {
title: '提供的服务：',
contents: [
'提供系统搭建平台与客服指导',
'系统可在线运行一年',
'软著材料编写',
'资料补正不限',
'软著申报',
'包下证',
]
},
{
title: '使用流程：',
contents: [
'1、按系统操作手册执行',
]
} }
} ]}
]} chargeLineArray={[
/> {
<CardProjType price: 100,
head={'写材料'} title: '安装包100元'
bodyLineArray={[ },
{ {
title: '提供的服务：', price: 50,
contents: [ title: '系统演示视频文件50元'
'提供系统搭建',
'系统可在线运行三年',
'软著材料编写',
'软著申报',
'包下证',
'提供系统演示视频文件',
'提供系统安装包',
]
},
{
title: '使用流程：',
contents: [
'编写软著名称',
'对搭建系统进行核验',
'接受证书',
]
}
]}
chargeLineArray={[
{
price: 100,
title: '安装包100元'
},
{
price: 50,
title: '系统演示视频文件50元'
}
]}
buyArray={[
{
price: 200,
handleClick: (_title, price) => {
nav(`/proj-new/x/${price}`)
} }
} ]}
]} buyArray={[
/> {
<CardProjType label: '普件：',
head={'免费试用'} price: 200,
bodyLineArray={[ handleClick: (_title, price) => {
{ nav(`/proj-new/xdp/${price}`)
title: '提供的服务：', }
contents: [ },
'提供系统搭建平台与客服指导', {
'系统可在线存储三天', label: '加急：',
] price: 300,
}, handleClick: (_title, price) => {
{ nav(`/proj-new/xdj/${price}`)
title: '使用流程：', }
contents: [
'按系统操作手册执行',
]
}
]}
buyArray={[
{
price: 0,
handleClick: (_title, price) => {
nav(`/proj-new/m/${price}`)
} }
} ]}
]} />
/> <CardProjType
head={'写材料'}
bodyLineArray={[
{
title: '提供的服务：',
contents: [
'提供系统搭建',
'系统可在线运行三年',
'软著材料编写',
'软著申报',
'包下证',
'提供系统演示视频文件',
'提供系统安装包',
]
},
{
title: '使用流程：',
contents: [
'编写软著名称',
'对搭建系统进行核验',
'接受证书',
]
}
]}
chargeLineArray={[
{
price: 100,
title: '安装包100元'
},
{
price: 50,
title: '系统演示视频文件50元'
}
]}
buyArray={[
{
price: 200,
handleClick: (_title, price) => {
nav(`/proj-new/x/${price}`)
}
}
]}
/>
<CardProjType
head={'免费试用'}
bodyLineArray={[
{
title: '提供的服务：',
contents: [
'提供系统搭建平台与客服指导',
'系统可在线存储三天',
]
},
{
title: '使用流程：',
contents: [
'按系统操作手册执行',
]
}
]}
buyArray={[
{
price: 0,
handleClick: (_title, price) => {
nav(`/proj-new/m/${price}`)
}
}
]}
/>
</div>
</div> </div>
</> </>
) )

32
src/route/proj/ProjEdit.tsx Normal file
View File

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

103
src/route/proj/ProjNew.tsx
View File

@ -1,6 +1,7 @@
import './proj-new.css'; 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; const {TextArea} = Input;
@ -10,17 +11,29 @@ type FieldType = {
}; };
export default function ProjNew() { export default function ProjNew() {
const height = window.innerHeight - 150;
const [isModalOpen, setIsModalOpen] = useState(false);
const nav = useNavigate(); const nav = useNavigate();
const params = useParams();
const onFinish: FormProps<FieldType>["onFinish"] = (values) => { const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
console.log('Success:', values); console.log('Success:', values);
setIsModalOpen(true);
}; };
const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (errorInfo) => { const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (errorInfo) => {
console.log('Failed:', errorInfo); console.log('Failed:', errorInfo);
}; };
const handleConfirmOk = () => {
// 扣款
nav('/proj-edit');
}
const handleConfirmCancel = () => {
setIsModalOpen(false);
}
const onBack = () => { const onBack = () => {
nav(-1); nav(-1);
} }
@ -31,52 +44,58 @@ export default function ProjNew() {
items={[ items={[
{title: <Link to={'/'}>首页</Link>}, {title: <Link to={'/'}>首页</Link>},
{title: <Link to={'/proj-create'}>创建项目</Link>}, {title: <Link to={'/proj-create'}>创建项目</Link>},
{title: <Link to={'/proj-new'}>新建项目</Link>}, {title: '新建项目'},
]} ]}
/> />
<div className="proj-new"> <div style={{height: `${height}px`, overflow: 'auto'}}>
<div className="proj-title">请完善项目的基本信息</div> <div className="proj-new">
<div className="proj-form"> <div className="proj-title">请完善项目的基本信息</div>
<Form <div className="proj-form">
name="basic" <Form
layout={'vertical'} name="basic"
labelCol={{span: 24}} layout={'vertical'}
wrapperCol={{span: 24}} labelCol={{span: 24}}
style={{width: 500}} wrapperCol={{span: 24}}
initialValues={{remember: true}} style={{width: 500}}
onFinish={onFinish} initialValues={{remember: true}}
onFinishFailed={onFinishFailed} onFinish={onFinish}
autoComplete="off" onFinishFailed={onFinishFailed}
> autoComplete="off"
<Form.Item<FieldType>
label="系统标题"
name="projTitle"
rules={[{required: true, message: '请输入系统标题'}]}
> >
<Input placeholder="请输入系统标题"/> <Form.Item<FieldType>
</Form.Item> label="系统标题"
name="projTitle"
rules={[{required: true, message: '请输入系统标题'}]}
>
<Input placeholder="请输入系统标题"/>
</Form.Item>
<Form.Item<FieldType> <Form.Item<FieldType>
label="简单描述" label="简单描述"
name="projDesc" name="projDesc"
rules={[{required: true, message: '请输入简单描述'}]} rules={[{required: true, message: '请输入简单描述'}]}
> >
<TextArea rows={6} placeholder="请用一段话简单描述系统"/> <TextArea rows={6} placeholder="请用一段话简单描述系统"/>
</Form.Item> </Form.Item>
<Form.Item> <Form.Item>
<Flex align="center" justify="center" gap="large"> <Flex align="center" justify="center" gap="large">
<Button type="primary" htmlType="submit"> <Button type="primary" htmlType="submit">
提交并付款 提交并付款
</Button> </Button>
<Button type="default" htmlType="button" onClick={onBack}> <Button type="default" htmlType="button" onClick={onBack}>
返回上一级 返回上一级
</Button> </Button>
</Flex> </Flex>
</Form.Item> </Form.Item>
</Form> </Form>
</div>
</div> </div>
</div> </div>
<Modal title="提示" okText="确定" cancelText="取消" open={isModalOpen} onOk={handleConfirmOk}
onCancel={handleConfirmCancel}>
<div>该操作会扣除{params.price}元，确定操作码？</div>
</Modal>
</> </>
) )
} }

1
src/route/proj/proj-create.css
View File

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

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

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