From 5e06e746120037bca5f1bc3498a1e25663f65c8a Mon Sep 17 00:00:00 2001
From: vapao <live1989@foxmail.com>
Date: Sun, 28 Mar 2021 16:25:02 +0800
Subject: [PATCH] fix issue

---
 spug_web/src/pages/home/Nav.js            | 40 ++++++++++--
 spug_web/src/pages/home/NavForm.js        | 77 +++++++++++++++++++++++
 spug_web/src/pages/home/Todo.js           |  5 ++
 spug_web/src/pages/home/index.js          |  5 ++
 spug_web/src/pages/home/index.module.less | 32 ++++++++--
 5 files changed, 151 insertions(+), 8 deletions(-)
 create mode 100644 spug_web/src/pages/home/NavForm.js

diff --git a/spug_web/src/pages/home/Nav.js b/spug_web/src/pages/home/Nav.js
index ca0f9e2..4ebe92d 100644
--- a/spug_web/src/pages/home/Nav.js
+++ b/spug_web/src/pages/home/Nav.js
@@ -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>
   )
 }
 
diff --git a/spug_web/src/pages/home/NavForm.js b/spug_web/src/pages/home/NavForm.js
new file mode 100644
index 0000000..c3aed6e
--- /dev/null
+++ b/spug_web/src/pages/home/NavForm.js
@@ -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
diff --git a/spug_web/src/pages/home/Todo.js b/spug_web/src/pages/home/Todo.js
index d8686e2..d718e39 100644
--- a/spug_web/src/pages/home/Todo.js
+++ b/spug_web/src/pages/home/Todo.js
@@ -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';
 
diff --git a/spug_web/src/pages/home/index.js b/spug_web/src/pages/home/index.js
index 3c04e43..7054297 100644
--- a/spug_web/src/pages/home/index.js
+++ b/spug_web/src/pages/home/index.js
@@ -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';
diff --git a/spug_web/src/pages/home/index.module.less b/spug_web/src/pages/home/index.module.less
index 98a7145..c0cfa7c 100644
--- a/spug_web/src/pages/home/index.module.less
+++ b/spug_web/src/pages/home/index.module.less
@@ -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;
     }
   }
+}
 
-}
\ No newline at end of file
+.minusIcon {
+    font-size: 26px;
+    color: #a6a6a6;
+  }
+  .minusIcon:hover {
+    color: #ff4d4f;
+  }
\ No newline at end of file