mirror of https://github.com/openspug/spug
fix issue
vapao
parent
709d539382
commit
5e06e74612
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue