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-18 18:50:36 +08:00
parent c18cc21a8c
commit ba054a7448
14 changed files with 228 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/no-data.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

2
src/components/card/CardAgent.tsx
View File

@ -19,7 +19,7 @@ export default function CardAgent(props: IAgent) {
}
return (
<div className="card-agent" onClick={() => {
<div className={props.selected ? 'card-agent selected' : 'card-agent'} onClick={() => {
props.handleSelect();
}}>
<div className="card-agent-head">

55
src/components/card/CardProj.tsx
View File

@ -1,18 +1,6 @@
import './card-proj.css';
import {DownOutlined, EditOutlined, SearchOutlined, EyeOutlined, FolderOutlined} from '@ant-design/icons';
import {MenuProps} from 'antd';
import {Dropdown, Space} from 'antd';
const items: MenuProps['items'] = [
{
key: '1',
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
1st menu item
</a>
),
},
];
import {EditOutlined, SearchOutlined, EyeOutlined, FolderOutlined, SettingOutlined, DownloadOutlined} from '@ant-design/icons';
import {Button, ConfigProvider, Tag} from 'antd';
export default function CardProj() {
return (
@ -49,22 +37,7 @@ export default function CardProj() {
</div>
</div>
<div className="line">
<div className="left">
<span>
<Dropdown menu={{items}}>
<a onClick={(e) => e.preventDefault()}>
<Space> 功能管理 <DownOutlined/></Space>
</a>
</Dropdown>
</span>
<span>
<Dropdown menu={{items}}>
<a onClick={(e) => e.preventDefault()}>
<Space> 资料下载 <DownOutlined/></Space>
</a>
</Dropdown>
</span>
</div>
<div className="left"></div>
<div className="right">
<span>
<FolderOutlined/>
@ -73,6 +46,28 @@ export default function CardProj() {
</div>
</div>
</div>
<hr/>
<div className="foot">
<ConfigProvider theme={{
components: {
Button: {
contentFontSizeSM: 12,
}
}
}}>
<div className="option">
<Button size="small" type="text"><SettingOutlined/> 登录界面设置</Button>
<Button size="small" type="text"><SettingOutlined/> 系统菜单管理(0)</Button>
<Button size="small" type="text"><SettingOutlined/> 菜单排序(0)</Button>
</div>
<div className="option">
<Button size="small" type="text"><DownloadOutlined/> 申请表</Button>
<Button size="small" type="text"><DownloadOutlined/> 操作手册</Button>
<Button size="small" type="text"><DownloadOutlined/> 代码压缩包</Button>
<Button size="small" type="text"><DownloadOutlined /> 代码文档</Button>
</div>
</ConfigProvider>
</div>
</div>
)
}

17
src/components/card/card-agent.css
View File

@ -1,6 +1,23 @@
.card-agent {
}
.selected {
position: relative;
}
.selected:before {
content: '';
position: absolute;
width: 10px;
height: 10px;
border: 5px solid var(--color-red);
z-index: 10;
top: 0;
right: 0;
border-left: transparent;
border-bottom: transparent;
}
.card-agent .card-agent-head {
padding: 10px 10px 5px 10px;
display: flex;

8
src/components/card/card-proj-type.css
View File

@ -83,13 +83,13 @@
}
.proj .proj-body .proj-charge .ant-checkbox-wrapper:hover .ant-checkbox-inner {
border-color: var(--color-orange);
border-color: var(--color-primary);
}
.proj .proj-body .proj-charge .ant-checkbox-wrapper .ant-checkbox-checked .ant-checkbox-inner,
.proj .proj-body .proj-charge .ant-checkbox-wrapper:hover .ant-checkbox-checked .ant-checkbox-inner {
border-color: var(--color-orange);
background-color: var(--color-orange);
border-color: var(--color-primary);
background-color: var(--color-primary);
}
.proj .proj-foot {
@ -103,7 +103,7 @@
text-align: center;
margin: 0 5px;
padding: 10px 0;
background-color: var(--color-orange);
background-color: var(--color-primary);
color: var(--color-light);
flex-basis: 100%;
}

7
src/components/card/card-proj.css
View File

@ -74,3 +74,10 @@
margin-left: 5px;
}
.card-proj .foot {
position: unset;
background-color: transparent;
display: flex;
justify-content: space-between;
align-items: center;
}

4
src/components/list/list-proj-agent.css
View File

@ -41,8 +41,8 @@
}
.list-proj-agent .body .page .ant-pagination-item-active {
border-color: var(--color-orange);
background-color: var(--color-orange);
border-color: var(--color-primary);
background-color: var(--color-primary);
}
.list-proj-agent .body .page .ant-pagination-item-active a {

4
src/components/list/list-proj.css
View File

@ -41,8 +41,8 @@
}
.list-proj .body .page .ant-pagination-item-active {
border-color: var(--color-orange);
background-color: var(--color-orange);
border-color: var(--color-primary);
background-color: var(--color-primary);
}
.list-proj .body .page .ant-pagination-item-active a {

10
src/components/step/step-proj-edit.css
View File

@ -23,13 +23,13 @@
}
.step-proj .step .complete {
border: 1px solid var(--color-blue);
color: var(--color-blue);
border: 1px solid var(--color-primary);
color: var(--color-primary);
}
.step-proj .step .processing {
border: 1px solid var(--color-blue);
background-color: var(--color-blue);
border: 1px solid var(--color-primary);
background-color: var(--color-primary);
color: var(--color-light);
}
@ -77,7 +77,7 @@
}
.step-proj .step-line-complete {
border-color: var(--color-blue);
border-color: var(--color-primary);
}
.step-proj .step-card {

4
src/index.css
View File

@ -2,7 +2,7 @@
--color-border: rgba(206, 206, 206, 0.4);
--color-box-shadow: rgba(206, 206, 206, 0.4);
--color-red: #ff5722;
--color-orange: rgba(252, 189, 0, 1);
--color-primary: rgba(252, 189, 0, 1);
--color-green: rgba(129, 179, 55, 1);
--color-blue: rgba(64, 149, 229, 1);
--color-purple: #a233c6;
@ -55,7 +55,7 @@ ul {
}
.btn-orange {
background-color: var(--color-orange);
background-color: var(--color-primary);
color: var(--color-light);
}

125
src/route/agent/AgentSelect.tsx
View File

@ -5,6 +5,7 @@ import CardAgent from "../../components/card/CardAgent.tsx";
import {errorImage} from "../../util/CommonUtil.ts";
import {useState} from "react";
import {AgentMedalEnum} from "../../interfaces/card/ICardProj.ts";
import NoData from '../../assets/no-data.png';
export default function AgentSelect() {
const [value, setValue] = useState(1);
@ -12,41 +13,59 @@ export default function AgentSelect() {
// const params = useParams();
const height = window.innerHeight - 150;
const [selectedAgentId, setSelectedAgentId] = useState('0');
const [selectedAgent, setSelectedAgent] = useState({});
// 列表
const [agentList, setAgentList] = useState([{
id: '1',
logo: '1',
name: '标题1',
desc: '描述1',
medal: AgentMedalEnum.GOLD,
certificateImg: '1',
selected: false
}, {
id: '2',
logo: '2',
name: '标题2',
desc: '描述2',
medal: AgentMedalEnum.GOLD,
certificateImg: '1',
selected: false
}]);
const renderAgent = () => {
return agentList.map((item, index) => {
return (
<>
<Breadcrumb
items={[
{title: <Link to="/">首页</Link>},
{title: <Link to="/proj-create">创建项目</Link>},
{
title: <a href="/#" onClick={(e) => {
e.preventDefault();
nav(-1)
}}>编辑项目</a>
},
{title: '找代理'},
]}
/>
<div className="agent-select" style={{height: `${height}px`}}>
<div className="agent-select-left">
<div className="list">
<div className="list-item">
<CardAgent logo="1"
name="标题标题"
desc="描述描述试试少时诵诗书"
medal={AgentMedalEnum.NORMAL}
certificateImg="1"
<CardAgent key={`agent${index}`} logo={item.logo}
name={item.name}
desc={item.desc}
medal={item.medal}
certificateImg={item.certificateImg}
selected={selectedAgentId == item.id}
handleSelect={() => {
console.log('1')
setSelectedAgentId(item.id);
setSelectedAgent(item);
}}
/>
)
})
}
const renderSelectedAgent = () => {
if (Object.keys(selectedAgent).length == 0) {
return (
<>
<div className="no-data">
<Image src={NoData}/>
<span>请选择左侧机构</span>
</div>
<div className="load">
<Button type="text">加载更多...</Button>
</div>
</div>
</div>
<div className="agent-select-right">
</>
)
}
return (
<>
<div className="agent-info">
<div className="agent-title">机构信息</div>
<div className="agent-body">
@ -102,7 +121,53 @@ export default function AgentSelect() {
<Radio value={2}>加急件：400</Radio>
</Radio.Group>
</div>
<div style={{marginTop: '15px', textAlign: 'center'}}>
<Button type="primary" style={{backgroundColor: 'var(--color-primary)'}}>选择</Button>
</div>
</>
)
}
return (
<>
<Breadcrumb
items={[
{title: <Link to="/">首页</Link>},
{title: <Link to="/proj-create">创建项目</Link>},
{
title: <a href="/#" onClick={(e) => {
e.preventDefault();
nav(-1)
}}>编辑项目</a>
},
{title: '找代理'},
]}
/>
<div className="agent-select" style={{height: `${height}px`}}>
<div className="agent-select-left">
<div className="list">
<div className="list-item">
{renderAgent()}
</div>
<div className="load">
<Button type="text" onClick={() => {
setAgentList([
...agentList,
{
id: '3',
logo: '3',
name: '标题3',
desc: '描述3',
medal: AgentMedalEnum.SILVER,
certificateImg: '3',
selected: false
}
])
}}>加载更多...</Button>
</div>
</div>
</div>
<div className="agent-select-right">{renderSelectedAgent()}</div>
</div>
</>

26
src/route/agent/agent-select.css
View File

@ -48,13 +48,27 @@
padding: 15px;
height: calc(100% - 30px);
overflow: auto;
width: 840px;
}
.agent-select .agent-select-right .no-data {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.agent-select .agent-select-right .no-data span {
margin-top: 15px;
color: var(--color-dark);
}
.agent-select .agent-select-right .agent-info .agent-title {
border: 1px solid var(--color-border);
background-color: rgba(228,229,238,0.5);
padding: 5px 15px;
font-weight: 600;
font-weight: bold;
}
.agent-select .agent-select-right .agent-info .agent-body {
@ -65,7 +79,7 @@
.agent-select .agent-select-right .agent-info .agent-body .agent-name {
padding: 5px 0;
font-weight: 500;
font-weight: bold;
}
.agent-select .agent-select-right .agent-info .agent-body .agent-desc {
@ -103,6 +117,14 @@
padding: 15px;
}
.agent-select .agent-select-right .agent-price .ant-radio-inner {
border: 1px solid var(--color-primary);
}
.agent-select .agent-select-right .agent-price .ant-radio-checked .ant-radio-inner {
background-color: var(--color-primary);
}
.agent-select .agent-select-right .agent-price .label {
font-weight: bold;
}

2
src/route/proj/ProjEdit.tsx
View File

@ -74,7 +74,7 @@ export default function ProjEdit() {
</StepProjEdit>
</div>
<div className="btn-container">
<Button size="large" style={{width: '200px', fontSize: '14px', backgroundColor: 'var(--color-blue)', color: 'var(--color-light)'}} onClick={() => {
<Button size="large" style={{width: '200px', fontSize: '14px', backgroundColor: 'var(--color-primary)', color: 'var(--color-light)'}} onClick={() => {
nav(-1);
}}>返回</Button>
</div>

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

@ -80,7 +80,7 @@ export default function ProjNew() {
<Form.Item>
<Flex align="center" justify="center" gap="large">
<Button type="primary" htmlType="submit" style={{backgroundColor: 'var(--color-orange)'}}>
<Button type="primary" htmlType="submit" style={{backgroundColor: 'var(--color-primary)'}}>
提交并付款
</Button>
<Button type="default" htmlType="button" onClick={onBack}>