fix issues

spug_web/src/pages/home/Nav.js

@@ -4,8 +4,8 @@
  * Released under the AGPL-3.0 License.
  */
 import React, { useState, useEffect } from 'react';
-import { Avatar, Card, Col, Row } from 'antd';
-import { LeftSquareOutlined, RightSquareOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
+import { Avatar, Card, Col, Row, Modal } from 'antd';
+import { LeftSquareOutlined, RightSquareOutlined, EditOutlined, PlusOutlined, CloseOutlined } from '@ant-design/icons';
 import { AuthButton } from 'components';
 import NavForm from './NavForm';
 import { http } from 'libs';
@@ -36,6 +36,15 @@ function NavIndex(props) {
       .then(() => fetchRecords())
   }
 
+  function handleDelete(item) {
+    Modal.confirm({
+      title: '操作确认',
+      content: `确定要删除【${item.title}】？`,
+      onOk: () => http.delete('/api/home/navigation/', {params: {id: item.id}})
+        .then(fetchRecords)
+    })
+  }
+
   return (
     <Card
       title="便捷导航"
@@ -64,6 +73,7 @@ function NavIndex(props) {
                   avatar={<Avatar src={item.logo}/>}
                   title={item.title}
                   description={item.desc}/>
+                <CloseOutlined className={styles.icon} onClick={() => handleDelete(item)}/>
               </Card>
             </Col>
           ))}

spug_web/src/pages/home/Notice.js

@@ -5,7 +5,7 @@
  */
 import React, { useEffect, useState } from 'react';
 import { Card, List, Modal, Form, Input, Switch, Divider, Typography } from 'antd';
-import { DownSquareOutlined, PlusOutlined, UpSquareOutlined, SoundOutlined } from '@ant-design/icons';
+import { DownSquareOutlined, PlusOutlined, UpSquareOutlined, SoundOutlined, DeleteOutlined } from '@ant-design/icons';
 import { AuthButton } from 'components';
 import { http } from 'libs';
 import styles from './index.module.less';
@@ -71,6 +71,15 @@ function NoticeIndex(props) {
     setNotice(null);
   }
 
+  function handleDelete(item) {
+    Modal.confirm({
+      title: '操作确认',
+      content: `确定要删除系统公告【${item.title}】？`,
+      onOk: () => http.delete('/api/home/notice/', {params: {id: item.id}})
+        .then(fetchRecords)
+    })
+  }
+
   return (
     <Card
       title="系统公告"
@@ -82,12 +91,13 @@ function NoticeIndex(props) {
         <List>
           <div className={styles.add} onClick={() => showForm({})}><PlusOutlined/>新建公告</div>
           {records.map(item => (
-            <List.Item key={item.id} onClick={() => showForm(item)}>
+            <List.Item key={item.id}>
               <div className={styles.item}>
                 <UpSquareOutlined onClick={e => handleSort(e, item, 'up')}/>
                 <Divider type="vertical"/>
                 <DownSquareOutlined onClick={e => handleSort(e, item, 'down')}/>
-                <span className={styles.title} style={{marginLeft: 24}}>{item.title}</span>
+                <div className={styles.title} style={{marginLeft: 24}} onClick={() => showForm(item)}>{item.title}</div>
+                <DeleteOutlined style={{color: 'red', marginLeft: 12}} onClick={() => handleDelete(item)}/>
               </div>
             </List.Item>
           ))}
@@ -109,7 +119,6 @@ function NoticeIndex(props) {
       <Modal
         title="编辑公告"
         visible={record}
-        afterClose={() => console.log('after close')}
         onCancel={() => setRecord(null)}
         confirmLoading={loading}
         onOk={handleSubmit}>

spug_web/src/pages/home/index.module.less

@@ -36,7 +36,7 @@
     justify-content: center;
     align-items: center;
     margin-top: 8px;
-    height: 30px;
+    height: 35px;
     border-radius: 2px;
     border: 1px dashed #d9d9d9;
     font-size: 12px;
@@ -52,6 +52,9 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    display: flex;
+    width: 100%;
+    align-items: center;
 
     :global(.anticon) {
       cursor: pointer;
@@ -63,6 +66,10 @@
 .nav {
   margin-top: 12px;
 
+  button {
+    padding-right: 0;
+  }
+
   .add {
     cursor: pointer;
     height: 166px;
@@ -95,12 +102,29 @@
       -webkit-box-orient: vertical;
     }
   }
+
+  .icon {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    width: 32px;
+    height: 32px;
+    padding: 8px;
+    font-size: 16px;
+    color: rgba(0, 0, 0, .45);
+    cursor: pointer;
+  }
+
+  .icon:hover {
+    color: #ff4d4f;
+  }
 }
 
 .minusIcon {
   font-size: 26px;
   color: #a6a6a6;
-  }
-  .minusIcon:hover {
+}
+
+.minusIcon:hover {
   color: #ff4d4f;
-  }
+}