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:
WenC 2024-03-14 18:33:58 +08:00
parent 842add4ccc
commit e682b6a382
17 changed files with 495 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.tsx
View File

@ -1,18 +1,14 @@
import React from 'react';
import Head from './layout/head/Head.tsx';
import Nav from "./layout/nav/Nav.tsx";
import Body from './layout/body/Body.tsx';
import Foot from './layout/foot/Foot.tsx';
const App: React.FC = () => {
return (
<div>
<>
<Head/>
<Nav/>
<Body/>
<Foot/>
</div>
</>
);
};

83
src/components/card/CardProjType.tsx Normal file
View File

@ -0,0 +1,83 @@
import './card-proj-type.css';
import {ICardProj, ICardProjChargeLine} from "../../interfaces/proj/ICardProj.ts";
import {Checkbox} from 'antd';
import {useState} from "react";
export default function CardProjType(props: ICardProj) {
const [chargeAmount, setChargeAmount] = useState(0);
const renderContents = (lineIndex: number, contents: string[]) => {
return contents.map((item, index) => <li key={`content_${lineIndex}_${index}`}>{item}</li>);
}
const renderLines = () => {
return props.bodyLineArray.map((line, index) => {
return (
<div className="line" key={`line_${index}`}>
<div className="line-title">{line.title}</div>
<div className="line-content">
<ol>{renderContents(index, line.contents)}</ol>
</div>
</div>
)
})
}
const onChargeChange = (checked: boolean, line: ICardProjChargeLine) => {
if (checked) {
setChargeAmount(chargeAmount + line.price);
} else {
setChargeAmount(chargeAmount - line.price);
}
}
const renderCharge = () => {
if (!props.chargeLineArray || props.chargeLineArray.length == 0) {
return <></>
}
return (
<>
<div className="proj-charge">{
props.chargeLineArray.map((line, index) => (
<div className="line" key={`charge_${index}`}>
<Checkbox onChange={(e) => {
onChargeChange(e.target.checked, line);
}}>{line.title}</Checkbox>
</div>
))
}</div>
</>
)
}
const renderBuyBtn = () => {
return props.buyArray.map((buy, index) => {
return (
<div className="buy-btn" key={`buy_${index}`}>
<div className="price">{buy.label}{buy.price + chargeAmount} 元</div>
<hr/>
<div className="buy">
<button onClick={() => {
buy.handleClick(props.head, buy.price + chargeAmount);
}}>购买
</button>
</div>
</div>
)
})
}
return (
<div className="proj">
<div className="proj-head">
<div>{props.head}</div>
</div>
<div className="proj-body">
<div>{renderLines()}</div>
{renderCharge()}
</div>
<div className="proj-foot">{renderBuyBtn()}</div>
</div>
)
}

61
src/components/card/card-proj-type.css Normal file
View File

@ -0,0 +1,61 @@
.proj {
width: 250px;
}
.proj .proj-head {
margin-bottom: 15px;
padding: 15px;
font-size: 20px;
font-weight: bold;
text-align: center;
border: 1px solid var(--color-border);
}
.proj .proj-body {
min-height: 360px;
margin-bottom: 15px;
padding: 15px;
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid var(--color-border);
}
.proj .proj-body .line .line-title {
font-size: 16px;
font-weight: bold;
}
.proj .proj-body .line .line-content ol {
padding-left: 15px;
}
.proj .proj-body .proj-charge {
}
.proj .proj-foot {
padding: 15px;
border: 1px solid var(--color-border);
display: flex;
justify-content: center;
align-items: center;
}
.proj .proj-foot .buy-btn {
text-align: center;
margin: 0 5px;
flex-basis: 100%;
}
.proj .proj-foot .buy-btn .price {
}
.proj .proj-foot .buy-btn .buy {
}
.proj .proj-foot .buy-btn .buy button {
border: none;
cursor: pointer;
background-color: transparent;
}

11
src/context/Context.tsx
View File

@ -1,15 +1,6 @@
import {createContext} from "react";
import axios from 'axios';
import {ItemType} from "antd/es/breadcrumb/Breadcrumb";
axios.defaults.baseURL = 'https://localhost:8080';
export const Axios = createContext(axios)
const nav: ItemType = {
title: <a href={'/'}>首页</a>
}
export const Navs = createContext([nav, {
title: <a href={'/a'}>首页</a>
}])
export const Axios = createContext(axios);

23
src/interfaces/proj/ICardProj.ts Normal file
View File

@ -0,0 +1,23 @@
export interface ICardProjBodyLine {
title: string;
contents: string[];
}
export interface ICardProjChargeLine {
title: string;
price: number;
}
export interface ICardProjBuy {
label?: string,
price: number;
handleClick(title: string, price: number): void;
}
export interface ICardProj {
head: string;
bodyLineArray: ICardProjBodyLine[];
chargeLineArray?: ICardProjChargeLine[];
buyArray: ICardProjBuy[];
}

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

@ -1,7 +1,8 @@
import './body.css'
import {createBrowserRouter, RouterProvider} from 'react-router-dom';
import Index from '../../route/index';
import ProjType from "../../route/proj/ProjType.tsx";
import ProjCreate from "../../route/proj/ProjCreate.tsx";
import ProjNew from "../../route/proj/ProjNew.tsx";
const router = createBrowserRouter([
{
@ -9,8 +10,12 @@ const router = createBrowserRouter([
element: <Index />
},
{
path: '/proj-type',
element: <ProjType />
path: '/proj-create',
element: <ProjCreate />
},
{
path: '/proj-new/:type/:price',
element: <ProjNew />
}
])

7
src/layout/body/body.css
View File

@ -1,5 +1,8 @@
.body {
margin: 0 auto 10px auto;
margin: 65px auto 10px auto;
width: var(--width-workspace);
background-color: #FFFFFF;
}
.body > .ant-breadcrumb {
padding: 10px 15px;
}

14
src/layout/nav/Nav.tsx
View File

@ -1,14 +0,0 @@
import './nav.css';
import {Breadcrumb } from 'antd';
import {useContext} from "react";
import {Navs} from '../../context/Context.tsx';
export default function Nav() {
const navs = useContext(Navs)
return (
<div className="nav">
<Breadcrumb items={navs}/>
</div>
)
}

22
src/layout/nav/nav.css
View File

@ -1,22 +0,0 @@
.nav {
width: var(--width-workspace);
margin: calc(var(--height-head) + 15px) auto 10px auto;
}
.nav ul {
display: flex;
align-items: center;
}
.nav ul li {
}
.nav li::after {
content: ' > ';
padding: 0 5px;
}
.nav li:last-child::after {
content: ''
}

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

@ -1,6 +1,7 @@
.index {
position: relative;
height: 100%;
background-color: var(--color-light);
}
.index .left {

21
src/route/index/index.tsx
View File

@ -1,23 +1,21 @@
import './index.css';
import {MouseEvent, useState} from "react";
import {useNavigate} from "react-router-dom";
import {Link, useNavigate} from "react-router-dom";
import {IMenuListItem, IMenuWithTopButton} from "../../interfaces/menu/IMenuWithTopButton.ts";
import MenuWithTopButton from "../../components/menu/MenuWithTopButton.tsx";
import MenuTreeWithTopButton from "../../components/menu/MenuTreeWithTopButton.tsx";
import ListProj from "../../components/list/ListProj.tsx";
import ListProjAgent from "../../components/list/ListProjAgent.tsx";
import {Breadcrumb} from 'antd';
export default function Index() {
const navigate = useNavigate();
const [listType, setListType] = useState('proj');
const nav = useNavigate();
const projMenu: IMenuWithTopButton = {
button: {
name: '创建项目',
handle(e: MouseEvent<HTMLButtonElement>) {
console.log(e)
navigate('/proj-type')
handle() {
nav('/proj-create')
}
},
list: [
@ -54,6 +52,12 @@ export default function Index() {
}
return (
<>
<Breadcrumb
items={[
{title: <Link to={'/'}>首页</Link>}
]}
/>
<div className="index">
<div className="left">
<MenuWithTopButton
@ -61,7 +65,7 @@ export default function Index() {
list={projMenu.list}
handleListItem={projMenu.handleListItem}
/>
<MenuTreeWithTopButton />
<MenuTreeWithTopButton/>
<MenuWithTopButton
button={agentMenu.button}
list={agentMenu.list}
@ -70,5 +74,6 @@ export default function Index() {
</div>
<div className="right">{listType === 'proj' ? <ListProj/> : <ListProjAgent/>}</div>
</div>
</>
)
}

170
src/route/proj/ProjCreate.tsx Normal file
View File

@ -0,0 +1,170 @@
import './proj-create.css'
import {Link, useNavigate} from "react-router-dom";
import {Breadcrumb} from "antd";
import CardProjType from "../../components/card/CardProjType.tsx";
export default function ProjCreate() {
const nav = useNavigate();
return (
<>
<Breadcrumb
items={[
{title: <Link to={'/'}>首页</Link>},
{title: <Link to={'/proj-create'}>创建项目</Link>},
]}
/>
<div className="proj-create">
<CardProjType
head={'全托管'}
bodyLineArray={[
{
title: '提供的服务：',
contents: [
'提供系统搭建',
'系统可在线运行三年',
'软著材料编写',
'软著申报',
'包下证',
'提供系统演示视频文件',
'提供系统安装包',
]
},
{
title: '使用流程：',
contents: [
'编写软著名称',
'对搭建系统进行核验',
'接受证书',
]
}
]}
buyArray={[
{
price: 500,
handleClick: (_title, price) => {
nav(`/proj-new/q/${price}`)
}
}
]}
/>
<CardProjType
head={'写材料+代理'}
bodyLineArray={[
{
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: '加急：',
price: 300,
handleClick: (_title, price) => {
nav(`/proj-new/xdj/${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>
</>
)
}

82
src/route/proj/ProjNew.tsx Normal file
View File

@ -0,0 +1,82 @@
import './proj-new.css';
import {Link, useNavigate} from "react-router-dom";
import {Breadcrumb, Button, Flex, Form, type FormProps, Input} from "antd";
const {TextArea} = Input;
type FieldType = {
projTitle: string;
projDesc: string;
};
export default function ProjNew() {
const nav = useNavigate();
const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
console.log('Success:', values);
};
const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (errorInfo) => {
console.log('Failed:', errorInfo);
};
const onBack = () => {
nav(-1);
}
return (
<>
<Breadcrumb
items={[
{title: <Link to={'/'}>首页</Link>},
{title: <Link to={'/proj-create'}>创建项目</Link>},
{title: <Link to={'/proj-new'}>新建项目</Link>},
]}
/>
<div className="proj-new">
<div className="proj-title">请完善项目的基本信息</div>
<div className="proj-form">
<Form
name="basic"
layout={'vertical'}
labelCol={{span: 24}}
wrapperCol={{span: 24}}
style={{width: 500}}
initialValues={{remember: true}}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item<FieldType>
label="系统标题"
name="projTitle"
rules={[{required: true, message: '请输入系统标题'}]}
>
<Input placeholder="请输入系统标题"/>
</Form.Item>
<Form.Item<FieldType>
label="简单描述"
name="projDesc"
rules={[{required: true, message: '请输入简单描述'}]}
>
<TextArea rows={6} placeholder="请用一段话简单描述系统"/>
</Form.Item>
<Form.Item>
<Flex align="center" justify="center" gap="large">
<Button type="primary" htmlType="submit">
提交并付款
</Button>
<Button type="default" htmlType="button" onClick={onBack}>
返回上一级
</Button>
</Flex>
</Form.Item>
</Form>
</div>
</div>
</>
)
}

9
src/route/proj/ProjType.tsx
View File

@ -1,9 +0,0 @@
import './proj-type.css'
export default function ProjType() {
return (
<div className="proj-type">
</div>
)
}

11
src/route/proj/proj-create.css Normal file
View File

@ -0,0 +1,11 @@
.proj-create {
height: 100%;
background-color: var(--color-light);
display: flex;
justify-content: center;
align-items: center;
}
.proj-create .proj {
margin: 15px;
}

21
src/route/proj/proj-new.css Normal file
View File

@ -0,0 +1,21 @@
.proj-new {
height: 100%;
background-color: var(--color-light);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.proj-new .proj-title {
margin-bottom: 25px;
font-size: 30px;
}
.proj-new .proj-form {
}
.proj-new .proj-form .btn-group {
display: flex;
justify-content: center;
}

0
src/route/proj/proj-type.css
View File