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-13 19:01:21 +08:00
parent 82acef1ffa
commit b790d30da3
12 changed files with 304 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/card/CardProjAgent.tsx Normal file
View File

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

79
src/components/card/card-proj-agent.css Normal file
View File

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

5
src/components/list/ListProj.tsx
View File

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

40
src/components/list/ListProjAgent.tsx Normal file
View File

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

35
src/components/list/list-proj-agent.css Normal file
View File

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

6
src/context/Context.ts
View File

@ -1,6 +0,0 @@
import {createContext} from "react";
import axios from 'axios';
axios.defaults.baseURL = 'https://localhost:8080';
export const Axios = createContext(axios)

11
src/context/Context.tsx Normal file
View File

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

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

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

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

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

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

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

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

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

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