From b790d30da3d09261faf1baaff2fbb6c3dade512c Mon Sep 17 00:00:00 2001
From: WenC <450292408@qq.com>
Date: Wed, 13 Mar 2024 19:01:21 +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/CardProjAgent.tsx   | 65 ++++++++++++++++++
 src/components/card/card-proj-agent.css | 79 +++++++++++++++++++++
 src/components/list/ListProj.tsx        |  5 +-
 src/components/list/ListProjAgent.tsx   | 40 +++++++++++
 src/components/list/list-proj-agent.css | 35 ++++++++++
 src/context/Context.ts                  |  6 --
 src/context/Context.tsx                 | 11 +++
 src/layout/body/Body.tsx                |  5 ++
 src/layout/nav/Nav.tsx                  | 19 +++---
 src/route/index/index.tsx               | 91 +++++++++++++------------
 src/route/proj/ProjType.tsx             |  9 +++
 src/route/proj/proj-type.css            |  0
 12 files changed, 304 insertions(+), 61 deletions(-)
 create mode 100644 src/components/card/CardProjAgent.tsx
 create mode 100644 src/components/card/card-proj-agent.css
 create mode 100644 src/components/list/ListProjAgent.tsx
 create mode 100644 src/components/list/list-proj-agent.css
 delete mode 100644 src/context/Context.ts
 create mode 100644 src/context/Context.tsx
 create mode 100644 src/route/proj/ProjType.tsx
 create mode 100644 src/route/proj/proj-type.css

diff --git a/src/components/card/CardProjAgent.tsx b/src/components/card/CardProjAgent.tsx
new file mode 100644
index 0000000..4b6828d
--- /dev/null
+++ b/src/components/card/CardProjAgent.tsx
@@ -0,0 +1,65 @@
+import './card-proj-agent.css'
+import {OrderedListOutlined, NumberOutlined, SearchOutlined} from "@ant-design/icons";
+import { Tag } from 'antd';
+
+export default function CardProjAgent() {
+    return (
+        <div className="card-proj-agent">
+            <div className="title">
+                <div className="left">
+                    <a href="/#">项目名称</a>
+                </div>
+                <div className="right">
+                    <span className="agent">代理商：SDFSDF</span>
+                    <span className="orderNo">订单号：XXXXXXXXXXXXX</span>
+                </div>
+            </div>
+            <hr/>
+            <div className="body">
+                <div className="line">
+                    <div className="left">
+                        <span>金额￥：500</span>
+                    </div>
+                    <div className="right">
+                        <span>2024-03-05 17:22:02</span>
+                    </div>
+                </div>
+                <div className="line">
+                    <div className="left">
+                        <span>
+                            <OrderedListOutlined/>
+                            <a href="/#">协议清单</a>
+                        </span>
+                        <span>
+                            <NumberOutlined />
+                            <a href="/#">补正数量</a>
+                        </span>
+                    </div>
+                    <div className="right">
+                        <span>
+                            <SearchOutlined/>
+                            <a href="/#">查看结果</a>
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <hr/>
+            <div className="tail">
+                <span className="status order-status">
+                    <Tag color="default">待结单</Tag>
+                    <Tag color="success">已接单</Tag>
+                    <Tag color="error">未接单</Tag>
+                </span>
+                <span className="status agreement-status">
+                    <Tag color="success">已签署协议</Tag>
+                    <Tag color="error">未签署协议</Tag>
+                </span>
+                <span className="status process-status">
+                    <Tag color="default">进行中</Tag>
+                    <Tag color="success">完成</Tag>
+                    <Tag color="error">终止</Tag>
+                </span>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/card/card-proj-agent.css b/src/components/card/card-proj-agent.css
new file mode 100644
index 0000000..865df57
--- /dev/null
+++ b/src/components/card/card-proj-agent.css
@@ -0,0 +1,79 @@
+.card-proj-agent {
+    border-radius: 6px;
+    border: 1px solid var(--color-border);
+    padding: 15px;
+}
+
+.card-proj-agent .left {
+    position: unset;
+}
+
+.card-proj-agent .right {
+    margin: 0;
+}
+
+.card-proj-agent .title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.card-proj-agent hr {
+    border-color: var(--color-border);
+    border-style: dashed;
+    border-left: 0;
+    border-bottom: 0;
+    border-right: 0;
+    margin-block-start: 10px;
+    margin-block-end: 10px;
+}
+
+.card-proj-agent .title .left {
+    padding: 5px;
+    font-weight: bold;
+}
+
+.card-proj-agent .title .right {
+    padding: 5px;
+}
+
+.card-proj-agent .title .right span {
+    margin-left: 10px;
+}
+
+.card-proj-agent .title .right span:first-child {
+    margin-left: 0;
+}
+
+.card-proj-agent .body {
+    width: unset;
+    border: unset !important;
+    padding: 0 !important;
+}
+
+.card-proj-agent .body .line {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px 0;
+}
+
+.card-proj-agent .body .line .left {
+    display: flex;
+}
+
+.card-proj-agent .body .line .left > span {
+    margin-right: 10px;
+}
+
+.card-proj-agent .body .line .anticon {
+    margin-right: 5px;
+}
+
+.card-proj-agent .body .line .right > span {
+    margin-left: 5px;
+}
+
+.card-proj-agent .tail {
+}
+
diff --git a/src/components/list/ListProj.tsx b/src/components/list/ListProj.tsx
index 5646d9c..ea26cc1 100644
--- a/src/components/list/ListProj.tsx
+++ b/src/components/list/ListProj.tsx
@@ -6,7 +6,9 @@ import type {SearchProps} from 'antd/es/input/Search';
 
 const {Search} = Input;
 
-const onSearch: SearchProps['onSearch'] = (value, _e, info) => console.log(info?.source, value);
+const onSearch: SearchProps['onSearch'] = (value, _e, info) => {
+    console.log(info?.source, value)
+};
 
 export default function ListProj() {
 
@@ -14,7 +16,6 @@ export default function ListProj() {
     const listRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
 
     const domHeight = window.innerHeight - 301;
-    console.log(domHeight)
 
     return (
         <div className="list-proj" ref={listProjRef}>
diff --git a/src/components/list/ListProjAgent.tsx b/src/components/list/ListProjAgent.tsx
new file mode 100644
index 0000000..a602fa1
--- /dev/null
+++ b/src/components/list/ListProjAgent.tsx
@@ -0,0 +1,40 @@
+import './list-proj-agent.css';
+import CardProjAgent from "../card/CardProjAgent.tsx";
+import {useRef, MutableRefObject} from "react";
+import {Input, Pagination} from 'antd';
+import type {SearchProps} from 'antd/es/input/Search';
+
+const {Search} = Input;
+
+const onSearch: SearchProps['onSearch'] = (value, _e, info) => {
+    console.log(info?.source, value)
+};
+
+export default function ListProjAgent() {
+
+    const listProjRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
+    const listRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
+
+    const domHeight = window.innerHeight - 301;
+
+    return (
+        <div className="list-proj-agent" ref={listProjRef}>
+            <div className="top">
+                <Search placeholder="按项目名搜索" onSearch={onSearch} style={{width: 200}}/>
+            </div>
+            <div className="body">
+                <div className="list" ref={listRef} style={{height: `${domHeight}px`}}>
+                    <CardProjAgent />
+                    <CardProjAgent />
+                    <CardProjAgent />
+                    <CardProjAgent />
+                    <CardProjAgent />
+                    <CardProjAgent />
+                </div>
+                <div className="page">
+                    <Pagination defaultCurrent={1} total={50}/>
+                </div>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/list/list-proj-agent.css b/src/components/list/list-proj-agent.css
new file mode 100644
index 0000000..981abfc
--- /dev/null
+++ b/src/components/list/list-proj-agent.css
@@ -0,0 +1,35 @@
+.list-proj-agent {
+    width: 100%;
+    padding: 15px 0;
+}
+
+.list-proj-agent .top {
+    padding: 0 15px 15px 15px;
+    display: flex;
+    justify-content: right;
+    border-bottom: 1px solid var(--color-border);
+}
+
+.list-proj-agent .body {
+    width: unset;
+    margin: 0;
+}
+
+.list-proj-agent .list {
+    padding: 15px;
+    overflow: auto;
+}
+
+.list-proj-agent .body .card-proj-agent {
+    margin-bottom: 10px;
+}
+.list-proj-agent .body .card-proj-agent:last-child {
+    margin-bottom: 0;
+}
+
+.list-proj-agent .body .page {
+    border-top: 1px solid var(--color-border);
+    padding-top: 15px;
+    display: flex;
+    justify-content: right;
+}
\ No newline at end of file
diff --git a/src/context/Context.ts b/src/context/Context.ts
deleted file mode 100644
index 20f4168..0000000
--- a/src/context/Context.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import {createContext} from "react";
-import axios from 'axios';
-
-axios.defaults.baseURL = 'https://localhost:8080';
-
-export const Axios = createContext(axios)
\ No newline at end of file
diff --git a/src/context/Context.tsx b/src/context/Context.tsx
new file mode 100644
index 0000000..af3703e
--- /dev/null
+++ b/src/context/Context.tsx
@@ -0,0 +1,11 @@
+import {Context, createContext} from "react";
+import axios from 'axios';
+import {BreadcrumbItemType, BreadcrumbSeparatorType} from "antd/es/breadcrumb/Breadcrumb";
+
+axios.defaults.baseURL = 'https://localhost:8080';
+
+export const Axios = createContext(axios)
+
+export const Navs:Context<BreadcrumbItemType[]> = createContext([{
+    title: <a href={'/'}>首页</a>
+}])
\ No newline at end of file
diff --git a/src/layout/body/Body.tsx b/src/layout/body/Body.tsx
index 16b15e5..4c20161 100644
--- a/src/layout/body/Body.tsx
+++ b/src/layout/body/Body.tsx
@@ -1,11 +1,16 @@
 import './body.css'
 import {createBrowserRouter, RouterProvider} from 'react-router-dom';
 import Index from '../../route/index';
+import ProjType from "../../route/proj/ProjType.tsx";
 
 const router = createBrowserRouter([
     {
         path: '/',
         element: <Index />
+    },
+    {
+        path: '/proj-type',
+        element: <ProjType />
     }
 ])
 
diff --git a/src/layout/nav/Nav.tsx b/src/layout/nav/Nav.tsx
index 8907d6d..f77dd06 100644
--- a/src/layout/nav/Nav.tsx
+++ b/src/layout/nav/Nav.tsx
@@ -1,19 +1,16 @@
 import './nav.css';
+import {Breadcrumb } from 'antd';
+import {useContext} from "react";
+import {Navs} from '../../context/Context.tsx';
 
 export default function Nav() {
+
+    const [navs, _setNavs] = useContext(Navs)
+    console.log(navs)
+
     return (
         <div className="nav">
-            <ul>
-                <li>
-                    <span>首页</span>
-                </li>
-                <li>
-                    <span>首页</span>
-                </li>
-                <li>
-                    <span>首页</span>
-                </li>
-            </ul>
+            <Breadcrumb items={navs}/>
         </div>
     )
 }
\ No newline at end of file
diff --git a/src/route/index/index.tsx b/src/route/index/index.tsx
index 67c1fb2..f7115ea 100644
--- a/src/route/index/index.tsx
+++ b/src/route/index/index.tsx
@@ -1,49 +1,58 @@
 import './index.css';
-import {MouseEvent} from "react";
+import {MouseEvent, useState} from "react";
+import {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";
-
-const projMenu: IMenuWithTopButton = {
-    button: {
-        name: '创建项目',
-        handle(e: MouseEvent<HTMLButtonElement>) {
-            console.log(e)
-        }
-    },
-    list: [
-        {id: 'proj1', icon: './vite.svg', name: '全部项目'},
-        {id: 'proj2', icon: './vite.svg', name: '进行中的'},
-        {id: 'proj3', icon: './vite.svg', name: '已完成的'}
-    ],
-    handleListItem(e: MouseEvent<HTMLLIElement>, index: number, item: IMenuListItem) {
-        console.log(e);
-        console.log(index);
-        console.log(item)
-    }
-}
-
-const agentMenu: IMenuWithTopButton = {
-    button: {
-        name: '代理服务',
-        handle(e: MouseEvent<HTMLButtonElement>) {
-            console.log(e)
-        }
-    },
-    list: [
-        {id: 'agent1', icon: './vite.svg', name: '全部项目'},
-        {id: 'agent2', icon: './vite.svg', name: '进行中的'},
-        {id: 'agent3', icon: './vite.svg', name: '已完成的'},
-    ],
-    handleListItem(e: MouseEvent<HTMLLIElement>, index: number, item: IMenuListItem) {
-        console.log(e);
-        console.log(index);
-        console.log(item)
-    }
-}
+import ListProjAgent from "../../components/list/ListProjAgent.tsx";
 
 export default function Index() {
+
+    const navigate = useNavigate();
+    const [listType, setListType] = useState('proj');
+
+    const projMenu: IMenuWithTopButton = {
+        button: {
+            name: '创建项目',
+            handle(e: MouseEvent<HTMLButtonElement>) {
+                console.log(e)
+                navigate('/proj-type')
+            }
+        },
+        list: [
+            {id: 'proj1', icon: './vite.svg', name: '全部项目'},
+            {id: 'proj2', icon: './vite.svg', name: '进行中的'},
+            {id: 'proj3', icon: './vite.svg', name: '已完成的'}
+        ],
+        handleListItem(e: MouseEvent<HTMLLIElement>, index: number, item: IMenuListItem) {
+            console.log(e);
+            console.log(index);
+            console.log(item)
+            setListType('proj');
+        }
+    }
+
+    const agentMenu: IMenuWithTopButton = {
+        button: {
+            name: '代理服务',
+            handle(e: MouseEvent<HTMLButtonElement>) {
+                console.log(e)
+            }
+        },
+        list: [
+            {id: 'agent1', icon: './vite.svg', name: '全部项目'},
+            {id: 'agent2', icon: './vite.svg', name: '进行中的'},
+            {id: 'agent3', icon: './vite.svg', name: '已完成的'},
+        ],
+        handleListItem(e: MouseEvent<HTMLLIElement>, index: number, item: IMenuListItem) {
+            console.log(e);
+            console.log(index);
+            console.log(item)
+            setListType('projAgent');
+        }
+    }
+
     return (
         <div className="index">
             <div className="left">
@@ -59,9 +68,7 @@ export default function Index() {
                     handleListItem={agentMenu.handleListItem}
                 />
             </div>
-            <div className="right">
-                <ListProj/>
-            </div>
+            <div className="right">{listType === 'proj' ? <ListProj/> : <ListProjAgent/>}</div>
         </div>
     )
 }
\ No newline at end of file
diff --git a/src/route/proj/ProjType.tsx b/src/route/proj/ProjType.tsx
new file mode 100644
index 0000000..bf5d9da
--- /dev/null
+++ b/src/route/proj/ProjType.tsx
@@ -0,0 +1,9 @@
+import './proj-type.css'
+
+export default function ProjType() {
+    return (
+        <div className="proj-type">
+
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/route/proj/proj-type.css b/src/route/proj/proj-type.css
new file mode 100644
index 0000000..e69de29