完善页面

src/App.tsx

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

src/components/card/CardProjType.tsx

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

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

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

src/context/Context.tsx

@@ -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)
+export const Axios = createContext(axios);
-
-const nav: ItemType = {
-    title: <a href={'/'}>首页</a>
-}
-
-export const Navs = createContext([nav, {
-    title: <a href={'/a'}>首页</a>
-}])

src/interfaces/proj/ICardProj.ts

@@ -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[];
+}

src/layout/body/Body.tsx

@@ -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',
+        path: '/proj-create',
-        element: <ProjType />
+        element: <ProjCreate />
+    },
+    {
+        path: '/proj-new/:type/:price',
+        element: <ProjNew />
     }
 ])
 

src/layout/body/body.css

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

src/layout/nav/Nav.tsx

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

src/layout/nav/nav.css

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

src/route/index/index.css

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

src/route/index/index.tsx

@@ -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>) {
+            handle() {
-                console.log(e)
+                nav('/proj-create')
-                navigate('/proj-type')
             }
         },
         list: [
@@ -54,21 +52,28 @@ export default function Index() {
     }
 
     return (
-        <div className="index">
+        <>
-            <div className="left">
+            <Breadcrumb
-                <MenuWithTopButton
+                items={[
-                    button={projMenu.button}
+                    {title: <Link to={'/'}>首页</Link>}
-                    list={projMenu.list}
+                ]}
-                    handleListItem={projMenu.handleListItem}
+            />
-                />
+            <div className="index">
-                <MenuTreeWithTopButton />
+                <div className="left">
-                <MenuWithTopButton
+                    <MenuWithTopButton
-                    button={agentMenu.button}
+                        button={projMenu.button}
-                    list={agentMenu.list}
+                        list={projMenu.list}
-                    handleListItem={agentMenu.handleListItem}
+                        handleListItem={projMenu.handleListItem}
-                />
+                    />
+                    <MenuTreeWithTopButton/>
+                    <MenuWithTopButton
+                        button={agentMenu.button}
+                        list={agentMenu.list}
+                        handleListItem={agentMenu.handleListItem}
+                    />
+                </div>
+                <div className="right">{listType === 'proj' ? <ListProj/> : <ListProjAgent/>}</div>
             </div>
-            <div className="right">{listType === 'proj' ? <ListProj/> : <ListProjAgent/>}</div>
+        </>
-        </div>
     )
 }

src/route/proj/ProjCreate.tsx

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

src/route/proj/ProjNew.tsx

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

src/route/proj/ProjType.tsx

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

src/route/proj/proj-create.css

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

src/route/proj/proj-new.css

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