fix issue

pull/330/head
vapao 2021-03-28 16:25:02 +08:00
parent 709d539382
commit 5e06e74612
5 changed files with 151 additions and 8 deletions

View File

@ -1,13 +1,39 @@
import React from 'react';
/**
* Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
* Copyright (c) <spug.dev@gmail.com>
* Released under the AGPL-3.0 License.
*/
import React, { useState, useEffect } from 'react';
import { Avatar, Button, Card, Col, Row } from 'antd';
import { LeftSquareOutlined, RightSquareOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
import NavForm from './NavForm';
import styles from './index.module.less';
function NavIndex(props) {
const [isEdit, setIsEdit] = useState(true);
const [record, setRecord] = useState();
function handleSubmit() {
}
return (
<Card title="便捷导航" className={styles.nav} extra={<Button type="link">编辑</Button>}>
{isEdit ? (
<Row gutter={24}>
<Col span={6}>
<Card>
<div className={styles.add} onClick={() => setRecord({links: [{}]})}><PlusOutlined/></div>
</Col>
</Row>
) : (
<Row gutter={24}>
<Col span={6}>
<div className={styles.add}><PlusOutlined/></div>
</Col>
<Col span={6}>
<Card actions={[
<span>演示地址</span>
]}>
<Card.Meta
avatar={<Avatar src="https://gitee.com/openspug/index/raw/master/img/gitlab.png"/>}
title="Gitlab"
@ -15,7 +41,11 @@ function NavIndex(props) {
</Card>
</Col>
<Col span={6}>
<Card>
<Card actions={[
<LeftSquareOutlined/>,
<RightSquareOutlined/>,
<EditOutlined/>
]}>
<Card.Meta
avatar={<Avatar src="https://gitee.com/openspug/index/raw/master/img/wiki.png"/>}
title="Wiki系统"
@ -23,7 +53,9 @@ function NavIndex(props) {
</Card>
</Col>
</Row>
</Card>
)}
{record ? <NavForm record={record} onCancel={() => setRecord(null)}/> : null}
</Card>
)
}

View File

@ -0,0 +1,77 @@
/**
* Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
* Copyright (c) <spug.dev@gmail.com>
* Released under the AGPL-3.0 License.
*/
import React, { useState } from 'react';
import { Form, Input, Modal, Button } from 'antd';
import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons';
import styles from './index.module.less';
import lds from 'lodash';
function NavForm(props) {
const [form] = Form.useForm();
const [loading, setLoading] = useState(false);
const [record, setRecord] = useState(props.record);
function handleSubmit() {
const formData = form.getFieldsValue();
console.log(formData)
}
function add() {
record.links.push({});
setRecord(lds.cloneDeep(record))
}
function remove(index) {
record.links.splice(index, 1);
setRecord(lds.cloneDeep(record))
}
function changeLink(e, index, key) {
record.links[index][key] = e.target.value;
setRecord(lds.cloneDeep(record))
}
return (
<Modal
visible
title={`${record.id ? '编辑' : '新建'}导航`}
afterClose={() => console.log('after close')}
onCancel={props.onCancel}
confirmLoading={loading}
onOk={handleSubmit}>
<Form form={form} initialValues={record} labelCol={{span: 5}} wrapperCol={{span: 18}}>
<Form.Item required name="title" label="导航标题">
<Input placeholder="请输入"/>
</Form.Item>
<Form.Item required name="desc" label="导航描述">
<Input placeholder="请输入"/>
</Form.Item>
<Form.Item required label="导航链接" style={{marginBottom: 0}}>
{record.links.map((item, index) => (
<div key={index} style={{display: 'flex', alignItems: 'center', marginBottom: 12}}>
<Form.Item style={{display: 'inline-block', margin: 0, width: 100}}>
<Input value={item.name} onChange={e => changeLink(e, index, 'name')} placeholder="链接名称"/>
</Form.Item>
<Form.Item style={{display: 'inline-block', width: 210, margin: '0 8px'}}>
<Input value={item.url} onChange={e => changeLink(e, index, 'url')} placeholder="请输入链接地址"/>
</Form.Item>
{record.links.length > 1 && (
<MinusCircleOutlined className={styles.minusIcon} onClick={() => remove(index)}/>
)}
</div>
))}
</Form.Item>
<Form.Item wrapperCol={{span: 18, offset: 5}}>
<Button type="dashed" onClick={add} style={{width: 318}} icon={<PlusOutlined/>}>
添加链接推荐最多三个
</Button>
</Form.Item>
</Form>
</Modal>
)
}
export default NavForm

View File

@ -1,3 +1,8 @@
/**
* Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
* Copyright (c) <spug.dev@gmail.com>
* Released under the AGPL-3.0 License.
*/
import React from 'react';
import { Button, Card, List } from 'antd';

View File

@ -1,3 +1,8 @@
/**
* Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
* Copyright (c) <spug.dev@gmail.com>
* Released under the AGPL-3.0 License.
*/
import React from 'react';
import { Row, Col } from 'antd';
import { Breadcrumb } from 'components';

View File

@ -63,10 +63,27 @@
.nav {
margin-top: 12px;
:global(.ant-card) {
height: 120px;
background-color: #fafafa;
.add {
cursor: pointer;
height: 166px;
border: 1px dashed #d9d9d9;
display: flex;
justify-content: center;
align-items: center;
}
.add:hover {
border: 1px dashed #1890ff;
color: #1890ff;
}
:global(.ant-card) {
height: 166px;
background-color: #fafafa;
:global(.ant-card-actions) {
background-color: #f0f0f0;
}
:global(.ant-card-meta-description) {
display: -webkit-box;
@ -76,5 +93,12 @@
-webkit-box-orient: vertical;
}
}
}
}
.minusIcon {
font-size: 26px;
color: #a6a6a6;
}
.minusIcon:hover {
color: #ff4d4f;
}