完成了草稿箱功能，接下来做文章列表

src/API/API.js

@@ -75,4 +75,12 @@ export function apiPostGetTags() {
         url: '/article/post/tags',
         method: 'get',
     })
+}
+
+export function apiSaveArticle(params) {
+    return fetch({
+        url: '/article/post/save',
+        method: 'post',
+        data: Qs.stringify(params),
+    })
 }

src/Components/HeaderMenu/HeaderMenu.js

@@ -42,6 +42,10 @@ class HeaderMenu extends Component {
         });
     };
 
+    handleWriteArticle = () => {
+        window.location.href = '/#/post'
+    }
+
     render() {
         return (
             <div>
@@ -75,7 +79,7 @@ class HeaderMenu extends Component {
                     }
                 </div>
                 <div className={'menu-item-2'}>
-                    <Button type="primary" style={{width: '100%'}}>写文章</Button>
+                    <Button type="primary" style={{width: '100%'}} onClick={this.handleWriteArticle}>写文章</Button>
                 </div>
                 {/*<div className={'menu-item-3'}>*/}
                 {/*    <Avatar icon={<UserOutlined/>}/>*/}

src/Components/PostHeader/PostHeader.js

@@ -30,6 +30,10 @@ class PostHeader extends Component {
         this.props.handleClassChange(aclass)
     }
 
+    handleCoverChange = cover => {
+        this.props.handleCoverChange(cover)
+    }
+
     render() {
         return (
             <div>
@@ -52,10 +56,14 @@ class PostHeader extends Component {
                         tags={this.props.tags}
                         classes={this.props.classes}
                         handlePost={this.props.handlePost}
+                        handleCoverChange={this.handleCoverChange.bind(this)}
                     />
                 </div>
                 <div className={'post-menu-item-3'}>
-                    <Button type="dashed" style={{width: '80%'}} onClick={this.props.handleSave}>保存</Button>
+                    <Button type="dashed" style={{width: '100%'}} onClick={this.props.handleSave}>草稿箱</Button>
+                </div>
+                <div className={'post-menu-item-4'}>
+                    文章将自动保存至草稿箱
                 </div>
             </div>
         )

src/Components/PostHeader/PostHeader.less

@@ -26,4 +26,14 @@
   padding-top: 0.1vh;
   margin-right: 5vh;
   float: right;
+}
+
+.post-menu-item-4 {
+  height: 100%;
+  width: 24vh;
+  //background: rgba(80, 167, 255, 0.76);
+  padding-top: 0.1vh;
+  margin-right: 2vh;
+  float: right;
+  color: rgba(0, 0, 0, .25);
 }

src/Components/PostModal/PostModal.js

@@ -1,5 +1,5 @@
 import React, {Component} from "react";
-import {Button, Select, message} from "antd";
+import {Button, Select, message, Input} from "antd";
 import Modal from "antd/es/modal/Modal";
 
 const {Option} = Select;
@@ -40,15 +40,19 @@ class PostModal extends Component {
             } else {
                 message.error('请至少填写一个标签')
             }
-        } else {
+        } else if (this.state.flag === 'class') {
             if (this.state.aclass !== '') {
-                this.props.handlePost()
                 this.setState({
-                    isVisible: false,
+                    flag: 'cover'
                 })
             } else {
                 message.error('请选择分类')
             }
+        } else {
+            this.props.handlePost()
+            this.setState({
+                isVisible: false,
+            })
         }
     }
 
@@ -70,6 +74,10 @@ class PostModal extends Component {
         })
     }
 
+    handleCoverChange = e => {
+        this.props.handleCoverChange(e.target.value)
+    }
+
     handleClassChange = aclass => {
         this.setState({
             aclass: aclass
@@ -93,15 +101,15 @@ class PostModal extends Component {
     render() {
         return (
             <div>
-                <Button type="primary" onClick={this.showModal}>
+                <Button type="primary" onClick={this.showModal} style={{width: '100%'}}>
                     发布
                 </Button>
-                <Modal title={this.state.flag === 'tag' ? "标签" : "分类"}
+                <Modal title={this.state.flag === 'tag' ? "标签" : this.state.flag === 'class' ? "分类" : "封面(非必须)"}
                        visible={this.state.isVisible}
                        onOk={this.handleOk}
                        onCancel={this.handleCancel}
                        cancelText={this.state.flag === 'tag' ? '关闭' : '上一步'}
-                       okText={this.state.flag === 'tag' ? '下一步' : '发布'}
+                       okText={this.state.flag === 'cover' ? '发布' : '下一步'}
                 >
                     {this.state.flag === 'tag'
                         ? <Select
@@ -113,17 +121,21 @@ class PostModal extends Component {
                                 this.renderOptions(this.props.tags)
                             }
                         </Select>
-                        :
-                        <Select
-                            allowClear={true}
-                            defaultActiveFirstOption={true}
-                            style={{width: '100%'}}
-                            onChange={this.handleClassChange}
-                        >
-                            {
-                                this.renderOptions(this.props.classes)
-                            }
-                        </Select>
+                        : this.state.flag === 'class' ?
+                            <Select
+                                allowClear={true}
+                                defaultActiveFirstOption={true}
+                                style={{width: '100%'}}
+                                onChange={this.handleClassChange}
+                            >
+                                {
+                                    this.renderOptions(this.props.classes)
+                                }
+                            </Select>
+                            : <Input
+                                placeholder="请输入封面图的URL地址"
+                                onChange={this.handleCoverChange}
+                            />
                     }
                 </Modal>
             </div>

src/Layout/PostArticleLayout/PostArticleLayout.js

@@ -3,7 +3,7 @@ import {Layout, message} from 'antd';
 import './PostArticleLayout.less'
 import MarkdownEditor from "../../Components/MarkdownEditor/MarkdownEditor";
 import PostHeader from "../../Components/PostHeader/PostHeader";
-import {apiPostArticle, apiPostGetClasses, apiPostGetTags} from "../../API/API";
+import {apiPostArticle, apiPostGetClasses, apiPostGetTags, apiSaveArticle} from "../../API/API";
 
 const {Header, Content} = Layout;
 
@@ -15,6 +15,8 @@ class PostArticleLayout extends Component {
         stags: [],
         aclass: '',
         classes: null,
+        cover: '',
+        Interval: null
     }
 
     componentDidMount() {
@@ -32,6 +34,9 @@ class PostArticleLayout extends Component {
                 })
             }
         })
+        this.setState({
+            Interval: setInterval(this.handleSave, 60000)
+        })
     }
 
     handleTextChange = text => {
@@ -47,26 +52,56 @@ class PostArticleLayout extends Component {
     }
 
     handlePost = () => {
-        let params = {
-            title: this.state.title,
-            content: this.state.text,
-            tag: this.state.stags,
-        }
-        apiPostArticle(params).then(res => {
-            if (res.data.code === '402') {
-                message.success('发布成功')
-            } else if (res.data.code === '401') {
-                message.error(res.data.message)
-                // window.location.href = ""
-            } else {
-                message.error('错误')
-                // window.location.href = ""
+        if (this.state.title === '') {
+            message.warning('请写标题')
+        } else if (this.state.text === '') {
+            message.warning('请写内容')
+        } else {
+            clearInterval(this.state.Interval)
+            let params = {
+                title: this.state.title,
+                content: this.state.text,
+                tag: this.state.stags,
+                cover: this.state.cover,
+                class: this.state.aclass,
             }
+            apiPostArticle(params).then(res => {
+                if (res.data.code === '402') {
+                    message.success('发布成功')
+                } else if (res.data.code === '401') {
+                    message.error(res.data.message)
+                    // window.location.href = ""
+                } else if (res.data.code === '403') {
+                    message.error(res.data.message)
+                    // window.location.href = ""
+                } else {
+                    message.error('错误')
+                    // window.location.href = ""
+                }
+            })
+        }
+    }
+
+    handleCoverChange = cover => {
+        this.setState({
+            cover: cover
         })
     }
 
     handleSave = () => {
-
+        if (this.state.title !== '' || this.state.text !== '') {
+            let params = {
+                title: this.state.title,
+                content: this.state.text,
+            }
+            apiSaveArticle(params).then(res => {
+                if (res.data.code === '402') {
+                    message.success('已保存')
+                } else {
+                    message.error('保存错误')
+                }
+            })
+        }
     }
 
     handleTagSet = tags => {
@@ -93,6 +128,7 @@ class PostArticleLayout extends Component {
                         tags={this.state.tags}
                         handleClassChange={this.handleClassChange.bind(this)}
                         classes={this.state.classes}
+                        handleCoverChange={this.handleCoverChange.bind(this)}
                     />
                 </Header>
                 <Content>