[feat]: add meta editor

src/components/Post/Head.jsx

@@ -14,8 +14,15 @@ class Head extends Component {
     handleRemove();
   }
 
+  handleEditMeta(e) {
+    e.preventDefault();
+    const { handleEditMeta } = this.props;
+    handleEditMeta();
+  }
+
   render() {
-    const { blob, meta, params } = this.props;
+    const { blob, meta } = this.props;
+
     return (
       <div className="leaf-post-head">
         <Row>
@@ -26,9 +33,32 @@ class Head extends Component {
           </Col>
           <Col span="10" className="loading">
             { blob.loaded &&
-              <h1 className="title">
-                {meta && meta.title}
-              </h1>
+              <div className="meta">
+                <div className="meta-title">
+                  {meta && meta.title} <Icon type="caret-down" />
+                </div>
+                <div className="meta-card">
+                  <Row className="meta-card-item">
+                    <Col span="4" className="name">描述:</Col>
+                    <Col span="20" className="cnt">{meta.description}</Col>
+                  </Row>
+                  { meta.categories &&
+                    <Row className="meta-card-item">
+                      <Col span="4" className="name">分类:</Col>
+                      <Col span="20" className="cnt">{meta.categories}</Col>
+                    </Row>
+                  }
+                  { meta.tags &&
+                    <Row className="meta-card-item">
+                      <Col span="4" className="name">标签:</Col>
+                      <Col span="20" className="cnt">{meta.tags}</Col>
+                    </Row>
+                  }
+                  <a onClick={this.handleEditMeta.bind(this)} className="meta-card-edit">
+                    编辑
+                  </a>
+                </div>
+              </div>
             }
             { !blob.loaded &&
               <h1 className="title">

src/components/Post/Meta.jsx

@@ -0,0 +1,64 @@
+import React, { Component, PropTypes } from 'react';
+import { Form, Item as FormItem } from 'antd/lib/form';
+import { Modal, Row, Col, Input, Select, Button, Radio } from 'antd';
+import { createForm } from 'rc-form';
+
+class MetaForm extends Component {
+  render() {
+    const { modalVisible, modalHandleOk, modalHandleCancel, form, metaData } = this.props;
+    const { getFieldProps, getFieldError } = form;
+    return (
+      <Modal ref="modal"
+        visible={modalVisible}
+        title='编辑'
+        onOk={modalHandleOk}
+        onCancel={modalHandleCancel}
+        footer={[
+        <Button key="back" type="ghost" onClick={modalHandleCancel}>取 消</Button>,
+        <Button key="submit" type="primary" onClick={this.modalHandleOk.bind(this)}>
+          提 交
+        </Button>
+      ]}>
+        <Form horizontal>
+          <FormItem
+            wrapperCol={{span: 24}}
+            validateStatus={getFieldError('meta') ? 'error' : 'success'}
+            >
+            <Input type="textarea" name="meta" rows="8" autoComplete="off"
+              {...getFieldProps('meta', {
+                initialValue: metaData,
+                rules: [{
+                  type: "string",
+                  required: true,
+                  message: "请输入文章基本信息"
+                },
+                ]})}
+            />
+            <Col span="24">
+              <p className="ant-form-explain">{getFieldError('meta') ? getFieldError('meta').join('') : ''}</p>
+            </Col>
+          </FormItem>
+        </Form>
+      </Modal>
+    )
+  }
+
+  modalHandleOk(e) {
+    e.preventDefault();
+    const { form, modalHandleOk } = this.props;
+    const { validateFields } = form;
+    validateFields((error, values) => {
+      if (!error) {
+        modalHandleOk(values);
+      } else {
+        console.log('error', error, values)
+      }
+    })
+  }
+}
+
+MetaForm.propTypes = {
+  form: PropTypes.object
+}
+
+export  default createForm()(MetaForm);

src/containers/Post.jsx

@@ -5,8 +5,10 @@ import { connect } from 'react-redux';
 import yaml from 'js-yaml';
 
 import { Icon, message, Modal } from 'antd';
+
 import Head from '../components/Post/Head';
 import Editor from '../components/Post/Editor';
+import MetaForm from '../components/Post/Meta';
 
 const confirm = Modal.confirm;
 
@@ -25,6 +27,7 @@ class Post extends Component {
       meta: {},
       head: '',
       body: '',
+      editMeta: false,
     }
   }
 
@@ -72,39 +75,58 @@ class Post extends Component {
     }
   }
 
-  handleSave(value) {
-    const { blob, dispatch, user, repoInfo, params } = this.props;
-    if (blob.data.content === value) {
-      console.info('[leafeon]: 文档没有修改');
+  handleSaveMeta(data) {
+    if (data === this.state.head) {
+      console.log('leafeon: 没有修改');
       return false;
     }
-    if (blob.updating) {
-      console.log('[leafeon]: 文档正在保存...');
+    this.setState({
+      meta: yaml.safeLoad(data),
+      head: data,
+    });
+    const cnt = data + '\n---\n' + this.state.body;
+    this.handleSave(cnt);
+  }
+
+  handleSaveCnt(data) {
+    if (data === this.state.body) {
+      console.log('leafeon: 没有修改');
       return false;
     }
 
-    // setState
     this.setState({
-      body: value,
+      body: data,
     });
 
+    const cnt = this.state.head + '\n---\n' + data;
+    this.handleSave(cnt);
+  }
+
+  handleSave(cnt) {
+    const { blob, dispatch, user, repoInfo, params } = this.props;
+
+    if (blob.updating) {
+      console.log('[leafeon]: 文档正在保存...');
+      return false;
+    }
+
     const repo = {
       username: user.data.login,
       email: user.data.email,
       reponame: repoInfo.data.name,
       path: '_posts/' + params.name,
-      content: this.state.head + '\n---\n' + value,
+      content: cnt,
     }
 
     const msg = message.loading('正在保存...', 0);
     dispatch(actions.updateRepoBlob(repo))
     .then(() => {
       msg();
-      if (this.props.blob.updated) {
-        message.success('已更新');
-      } else {
-        message.error('未更新');
-      }
+      //if (this.props.blob.updated) {
+      //  message.success('已更新');
+      //} else {
+      //  message.error('未更新');
+      //}
     });
   }
 
@@ -143,6 +165,25 @@ class Post extends Component {
     });
   }
 
+  handleEditMeta() {
+    this.setState({
+      editMeta: true,
+    });
+  }
+
+  handleEditMetaSubmit(data) {
+    this.setState({
+      editMeta: false,
+    });
+    this.handleSaveMeta(data.meta);
+  }
+
+  handleEditMetaCancle() {
+    this.setState({
+      editMeta: false,
+    });
+  }
+
   splitInput(str) {
     if (str.slice(0, 3) !== '---') {
       return;
@@ -188,14 +229,21 @@ class Post extends Component {
             blob={blob}
             meta={this.state.meta}
             handleRemove={this.handleRemove.bind(this)}
+            handleEditMeta={this.handleEditMeta.bind(this)}
           />
           <Editor
             {...this.props}
             blob={blob}
             value={this.state.body}
             onChange={this.handleUpdateCode.bind(this)}
             onFocusChange={this.handleFocusChange.bind(this)}
-            handleSave={this.handleSave.bind(this)}
+            handleSave={this.handleSaveCnt.bind(this)}
+          />
+          <MetaForm
+            metaData={this.state.head}
+            modalVisible={this.state.editMeta}
+            modalHandleOk={this.handleEditMetaSubmit.bind(this)}
+            modalHandleCancel={this.handleEditMetaCancle.bind(this)}
           />
         </div>
       </div>

src/styles/leaf.less

@@ -450,6 +450,94 @@
         font-weight: normal;
       }
 
+      .meta {
+        position: relative;
+        width: 100%;
+
+        &-title {
+          position: relative;
+          margin: 0 auto;
+          line-height: 48px;
+          font-size: 14px;
+          color: #444;
+          text-align: center;
+          font-weight: normal;
+          cursor: pointer;
+
+          .anticon {
+            font-size: 12px;
+            color: #ccc;
+            margin-left: 6px;
+            transform: scale(0.6);
+            transition: all .3s ease-in-out;
+          }
+        }
+
+        &-card {
+          position: absolute;
+          top: 40px;
+          left: 50%;
+          margin-left: -180px;
+          width: 360px;
+          height: auto;
+          padding: 16px 0 0 0;
+          background: #fff;
+          border: 1px solid @border-color;
+          border-radius: 3px 3px;
+          box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
+          opacity: 0;
+          visibility: hidden;
+          transition: all .3s ease-in-out;
+          transform: translateY(-10px);
+
+          &-item {
+            padding: 0 16px;
+            margin-bottom: 8px;
+            .name {
+              color: #999;
+              padding-bottom: 8px;
+            }
+            .cnt {
+              color: #444;
+            }
+          }
+
+          &-edit {
+            display: block;
+            cursor: pointer;
+            padding: 8px 32px;
+            text-align: center;
+            background: lighten(@primary-color, 34%);
+            border-top: 1px solid @border-color;
+            border-radius: 0 0 3px 3px;
+            margin-top: 16px;
+            color: #666;
+
+            .anticon {
+              color: #ccc;
+            }
+
+            &:hover {
+              color: #444;
+            }
+          }
+        }
+
+        &:hover {
+          .meta-title {
+            .anticon {
+              color: #666;
+            }
+          }
+
+          .meta-card {
+            opacity: 1;
+            visibility: visible;
+            transform: translateY(0px);
+          }
+        }
+      }
+
       .action-list {
         position: relative;
         float: right;