add

package.json

@@ -35,6 +35,7 @@
   },
   "devDependencies": {
     "autoprefixer": "6.7.2",
+    "axios-mock-adapter": "^1.8.1",
     "babel-core": "6.22.1",
     "babel-eslint": "7.1.1",
     "babel-loader": "6.2.10",
@@ -47,11 +48,11 @@
     "copy-webpack-plugin": "4.0.1",
     "css-loader": "0.26.1",
     "eslint": "3.14.1",
+    "eslint-config-airbnb-base": "11.0.1",
     "eslint-friendly-formatter": "2.0.7",
+    "eslint-import-resolver-webpack": "0.8.1",
     "eslint-loader": "1.6.1",
     "eslint-plugin-html": "2.0.0",
-    "eslint-config-airbnb-base": "11.0.1",
-    "eslint-import-resolver-webpack": "0.8.1",
     "eslint-plugin-import": "2.2.0",
     "eventsource-polyfill": "0.9.6",
     "express": "4.14.1",
@@ -61,26 +62,26 @@
     "function-bind": "1.1.0",
     "html-webpack-plugin": "2.28.0",
     "http-proxy-middleware": "0.17.3",
-    "webpack-bundle-analyzer": "2.2.1",
+    "node-sass": "3.7.0",
-    "semver": "5.3.0",
     "opn": "4.0.2",
     "optimize-css-assets-webpack-plugin": "1.3.0",
     "ora": "1.1.0",
+    "pushstate-server": "2.1.0",
     "rimraf": "2.6.0",
+    "sass-loader": "4.0.2",
+    "script-loader": "0.7.0",
+    "semver": "5.3.0",
+    "style-loader": "0.13.1",
     "url-loader": "0.5.7",
     "vue-loader": "11.3.4",
     "vue-style-loader": "2.0.0",
     "vue-template-compiler": "2.2.6",
     "webpack": "2.2.1",
+    "webpack-bundle-analyzer": "2.2.1",
+    "webpack-dashboard": "0.2.1",
     "webpack-dev-middleware": "1.10.0",
     "webpack-hot-middleware": "2.16.1",
-    "webpack-merge": "2.6.1",
+    "webpack-merge": "2.6.1"
-    "webpack-dashboard": "0.2.1",
-    "node-sass": "3.7.0",
-    "pushstate-server": "2.1.0",
-    "sass-loader": "4.0.2",
-    "script-loader": "0.7.0",
-    "style-loader": "0.13.1"
   },
   "engines": {
     "node": ">= 4.0.0",

src/components/Dropzone/index.vue

@@ -57,17 +57,20 @@
             }
           },
           accept: (file, done) => {
-            const token = this.$store.getters.token;
+        /* 七牛*/
-            getToken(token).then(response => {
+            // const token = this.$store.getters.token;
-              file.token = response.data.qiniu_token;
+            // getToken(token).then(response => {
-              file.key = response.data.qiniu_key;
+            //   file.token = response.data.qiniu_token;
-              file.url = response.data.qiniu_url;
+            //   file.key = response.data.qiniu_key;
+            //   file.url = response.data.qiniu_url;
+            //   done();
+            // })
             done();
-            })
           },
           sending: (file, xhr, formData) => {
-            formData.append('token', file.token);
+             /* 七牛*/
-            formData.append('key', file.key);
+            // formData.append('token', file.token);
+            // formData.append('key', file.key);
             vm.initOnce = false;
           }
         });

src/components/SplitPane/Pane.vue

@@ -7,32 +7,12 @@
 <script>
     export default {
       name: 'Pane',
-      props: {
-//            split: {
-//                validator: function (value) {
-//                    return ['vertical', 'horizontal'].indexOf(value) >= 0
-//                },
-//                required: true
-//            }
-      },
-//        computed:{
-//            classes () {
-//                return this.$parent.split
-//            },
-//        },
       data() {
         const classes = ['Pane', this.$parent.split, 'className'];
         return {
           classes: classes.join(' '),
           percent: 50
         }
-      },
-      created() {
-//          console.log(this.$parent.split)
-      },
-
-      methods: {
-
       }
     }
 </script>

src/components/SplitPane/Resizer.vue

@@ -1,6 +1,28 @@
 <template>
     <div :class="classes" @mousedown="onMouseDown"></div>
 </template>
+<script>
+    export default {
+      props: {
+        split: {
+          validator(value) {
+            return ['vertical', 'horizontal'].indexOf(value) >= 0
+          },
+          required: true
+        },
+        onMouseDown: {
+          type: Function,
+          required: true
+        }
+      },
+      data() {
+        const classes = ['Resizer', this.split, 'className'];
+        return {
+          classes: classes.join(' ')
+        }
+      }
+    }
+</script>
 <style scoped>
     .Resizer {
         -moz-box-sizing: border-box;
@@ -37,8 +59,6 @@
     .Resizer.vertical {
         width: 11px;
         height: 100%;
-        /*margin: 0 -5px;*/
-
         border-left: 5px solid rgba(255, 255, 255, 0);
         border-right: 5px solid rgba(255, 255, 255, 0);
         cursor: col-resize;
@@ -49,27 +69,3 @@
         border-right: 5px solid rgba(0, 0, 0, 0.5);
     }
 </style>
-<script>
-    export default {
-      props: {
-        split: {
-          validator(value) {
-            return ['vertical', 'horizontal'].indexOf(value) >= 0
-          },
-          required: true
-        },
-        onMouseDown: {
-          type: Function,
-          required: true
-        }
-      },
-      data() {
-        const classes = ['Resizer', this.split, 'className'];
-        return {
-          classes: classes.join(' ')
-        }
-      },
-
-      methods: {}
-    }
-</script>

src/components/SplitPane/SplitPane-backup.vue

@@ -1,175 +0,0 @@
-<!--<template>-->
-<!--<div :style="{ cursor, userSelect }" class="vue-splitter-container clearfix" @mouseup="onMouseUp"-->
-<!--@mousemove="onMouseMove">-->
-
-<!--<Pane split="vertical" :style="{ width: percent+'%' }" class="left-container splitter-pane">-->
-<!--orange-->
-<!--</Pane>-->
-
-<!--<Resizer split="vertical" :onMouseDown="onMouseDown" @click="onClick"></Resizer>-->
-<!--<div class="todel" :style="{ width: 100-percent+'%'}">-->
-<!--<Pane split="horizontal" class="top-container">-->
-<!--<div slot>apple banana</div>-->
-<!--</Pane>-->
-<!--<Resizer split="horizontal" :onMouseDown="onMouseDown" @click="onClick"></Resizer>-->
-<!--<Pane split="horizontal" class="bottom-container">-->
-<!--<div slot>apple banana</div>-->
-<!--</Pane>-->
-<!--</div>-->
-
-<!--</div>-->
-
-<!--</template>-->
-<style scoped>
-    .clearfix:after {
-        visibility: hidden;
-        display: block;
-        font-size: 0;
-        content: " ";
-        clear: both;
-        height: 0;
-    }
-    .vue-splitter-container {
-        height: inherit;
-        display: flex;
-    }
-</style>
-
-<script>
-     /* eslint-disable */
-    import Resizer from './Resizer';
-    import vue from 'vue'
-    export default {
-        name: 'splitPane',
-        components: {Resizer},
-        props: {
-            margin: {
-                type: Number,
-                default: 10
-            }
-        },
-        data () {
-            return {
-                active: false,
-                percent: 50,
-                hasMoved: false,
-                panes: []
-            }
-        },
-        props: {
-            split: {
-                validator: function (value) {
-                    return ['vertical', 'horizontal'].indexOf(value) >= 0
-                },
-                required: true
-            }
-        },
-        computed: {
-            userSelect () {
-                return this.active ? 'none' : ''
-            },
-            cursor () {
-                return this.active ? 'col-resize' : ''
-            },
-//            $paneItems () {
-//                return this.$children.filter(child => {
-//                    console.log(child)
-//                })
-//            }
-        },
-        render(h){
-            const temp = [];
-            this.$slots.default.map((item, i) => {
-                if (item.tag && item.tag.toUpperCase().indexOf('PANE') >= 0) {
-                    temp.push(item)
-                }
-            });
-            const newSlots = [];
-            const length = temp.length;
-            temp.map((item, index)=> {
-                newSlots.push(item)
-                if (index != length - 1) {
-                    newSlots.push(
-                            h('Resizer', {
-                                props: {
-                                    split: this.split,
-                                    onMouseDown: this.onMouseDown
-                                }
-                            })
-                    )
-                }
-            })
-            return h('div', {
-                on: {
-                    mousemove: this.onMouseMove
-                }
-            }, [
-                h('div', {
-                    'class': {
-                        'vue-splitter-container': true
-                    },
-                }, newSlots)
-            ])
-        },
-//        beforeMount(){
-//            this.$slots.default=this.$slots.default.map((item, i) => {
-//                if (item.tag&&item.tag.toUpperCase().indexOf('PANE') >= 0) {
-//                    return item
-//                }else{
-//                    return null
-//                }
-//            })
-//
-//        },
-        created(){
-
-        },
-        mounted(){
-
-        },
-        methods: {
-            onClick () {
-                if (!this.hasMoved) {
-                    this.percent = 50;
-                    this.$emit('resize');
-                }
-            },
-            onMouseDown () {
-                this.active = true;
-                this.hasMoved = false;
-            },
-            onMouseUp () {
-                this.active = false;
-            },
-            onMouseMove (e) {
-                if (e.buttons === 0 || e.which === 0) {
-                    this.active = false;
-                }
-                if (this.active) {
-
-                    let offset = 0;
-                    let target = e.currentTarget;
-                    while (target) {
-                        offset += target.offsetLeft;
-                        target = target.offsetParent;
-                    }
-                    const percent = Math.floor(((e.pageX - offset) / e.currentTarget.offsetWidth) * 10000) / 100;
-                    if (percent > this.margin && percent < 100 - this.margin) {
-                        this.percent = percent;
-                    }
-                    console.log(percent)
-                    this.$children.map((v, i)=> {
-                        if (i == 0) {
-                            v.percent = percent
-                        } else {
-                            v.percent = 100 - percent
-                        }
-
-                    })
-                    this.$emit('resize');
-                    this.hasMoved = true;
-                }
-            }
-        }
-    }
-</script>

src/components/SplitPane/index.js

@@ -1,7 +0,0 @@
-import SplitPane from './a.vue';
-import Pane from './Pane.vue';
-
-export {
-    SplitPane,
-    Pane
-}

src/components/SplitPane/index.vue

@@ -66,7 +66,6 @@
       mounted() {
         const element = this.$el;
         const elementOffset = element.getBoundingClientRect();
-        console.log(elementOffset.height)
 //            this.height = elementOffset.height+'px';
       },
       methods: {

src/components/twoDndList/index.vue

@@ -4,9 +4,8 @@
       <h3>{{list1Title}}</h3>
       <draggable :list="list1" class="dragArea" :options="{group:'article'}">
         <div class="list-complete-item" v-for="element in list1">
-                    <div class="list-complete-item-handle">[{{element.id}}] {{element.title}}</div>
+          <div class="list-complete-item-handle">[{{element.author}}] {{element.title}}</div>
           <div style="position:absolute;right:0px;">
-                       <a style="float: left ;margin-top: -20px;margin-right:5px;" :href="'/article/edit/'+element.id" target="_blank"><i style="color:#20a0ff" class="el-icon-information"></i></a>
             <span style="float: right ;margin-top: -20px;margin-right:5px;" @click="deleteEle(element)">
                         <i style="color:#ff4949" class="el-icon-delete"></i>
                     </span>
@@ -19,8 +18,7 @@
       <h3>{{list2Title}}</h3>
       <draggable :list="filterList2" class="dragArea" :options="{group:'article'}">
         <div class="list-complete-item" v-for="element in filterList2">
-                  <div class='list-complete-item-handle2' @click="pushEle(element)"> [{{element.id}}] {{element.title}}</div>
+          <div class='list-complete-item-handle2' @click="pushEle(element)"> [{{element.author}}] {{element.title}}</div>
-                  <a style="float: right ;margin-top: -20px;" :href="'/article/edit/'+element.id" target="_blank"><i style="color:#20a0ff" class="el-icon-information"></i></a>
         </div>
       </draggable>
     </div>
@@ -124,6 +122,7 @@
     .list-complete-item {
         cursor: pointer;
         position: relative;
+        font-size: 14px;
         padding: 5px 12px;
         margin-top: 4px;
         border: 1px solid #bfcbd9;

src/mock/index.js

@@ -1,5 +1,9 @@
+import axios from 'axios';
 import Mock from 'mockjs';
-Mock.mock(/\/article\/list/, {
+import MockAdapter from 'axios-mock-adapter';
+const mock = new MockAdapter(axios);
+
+const articleList = {
   'data|20': [{
     id: '@id',
     title: '@ctitle(10, 20)',
@@ -7,6 +11,7 @@ Mock.mock(/\/article\/list/, {
     display_time: '@datetime',
     pageviews: '@integer(300, 5000)'
   }]
-})
+}
-
+const data = JSON.stringify(Mock.mock(articleList))
-export default Mock;
+mock.onGet('/article/list').reply(200, data);
+export default mock;

src/router/index.js

@@ -20,7 +20,12 @@ import reset from '../views/login/reset';
 const Tinymce = resolve => require(['../views/components/tinymce'], resolve);
 const Markdown = resolve => require(['../views/components/markdown'], resolve);
 const JsonEditor = resolve => require(['../views/components/jsoneditor'], resolve);
+const DndList = resolve => require(['../views/components/dndlist'], resolve);
 const AvatarUpload = resolve => require(['../views/components/avatarupload'], resolve);
+const Dropzone = resolve => require(['../views/components/dropzone'], resolve);
+const Sticky = resolve => require(['../views/components/sticky'], resolve);
+const SplitPane = resolve => require(['../views/components/splitpane'], resolve);
+
 
 /* charts*/
 const KeyboardChart = resolve => require(['../views/charts/keyboard'], resolve);
@@ -72,9 +77,12 @@ export default new Router({
       children: [
         { path: 'tinymce', component: Tinymce, name: '富文本编辑器' },
         { path: 'markdown', component: Markdown, name: 'Markdown' },
-        { path: 'jsoneditor', component: JsonEditor, name: 'json编辑器' },
+        { path: 'jsoneditor', component: JsonEditor, name: 'JSON编辑器' },
-        { path: 'avatarupload', component: AvatarUpload, name: '头像上传' }
+        { path: 'dndlist', component: DndList, name: '列表拖拽' },
-
+        { path: 'splitpane', component: SplitPane, name: 'SplitPane' },
+        { path: 'avatarupload', component: AvatarUpload, name: '头像上传' },
+        { path: 'dropzone', component: Dropzone, name: 'Dropzone' },
+        { path: 'sticky', component: Sticky, name: 'Sticky' }
       ]
     },
     {

src/styles/index.scss

@@ -84,6 +84,13 @@ code {
   padding: 20px 10px;
   margin-bottom: 20px;
   display: block;
+  a {
+    color: #337ab7;
+    cursor: pointer;
+    &:hover {
+      color: rgb(32, 160, 255);
+    }
+  }
 }
 
 .fade-enter-active,

src/views/components/dndlist.vue

@@ -1,17 +1,14 @@
 <template>
   <div class="components-container">
-    <code>公司做的后台主要是一个cms系统，公司也是已自媒体为核心的，所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路，市面上常见的富文本都基本用过了，最终选择了tinymce</code>
+    <code>拖拽https://github.com/SortableJS/Vue.Draggable 项目：Vue.Draggable</code>
     <div class="editor-container">
-       <TwoDndList :list1="list1" :list2="list2" :list1Title="头条列表" list2Title="文章池"></TwoDndList>
+       <DndList :list1="list1" :list2="list2" list1Title="头条列表" list2Title="文章池" />
     </div>
-    <!--<div class='editor-content'>
-{{content}}
-    </div>-->
   </div>
 </template>
 <script>
     import DndList from 'components/twoDndList'
-
+    import { getList } from 'api/article';
     export default {
       components: { DndList },
       data() {
@@ -20,8 +17,18 @@
           list2: []
         }
       },
+      created() {
+        this.fetchData();
+      },
       methods: {
-
+        fetchData() {
+          this.listLoading = true;
+          getList(this.listQuery).then(response => {
+            this.list1 = response.data.splice(0, 5);
+            this.list2 = response.data;
+            console.log(this.list1, this.list2)
+          })
+        }
       }
     };
 </script>

src/views/components/dropzone.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="components-container">
+    <code>https://github.com/rowanwins/vue-dropzone
+      由于我司业务有特殊需求，而且要传七牛 所以没用第三方 选择了自己封装
+    </code>
+    <div class="editor-container">
+     <Dropzone  v-on:dropzone-removedFile="dropzoneR" v-on:dropzone-success="dropzoneS" id="myVueDropzone"
+            url="https://httpbin.org/post"></Dropzone>
+    </div>
+  </div>
+</template>
+<script>
+    import Dropzone from 'components/Dropzone';
+
+    export default {
+      components: { Dropzone },
+      methods: {
+        dropzoneS(file) {
+          this.$message({ message: '上传成功', type: 'success' });
+        },
+        dropzoneR(file) {
+          this.$message({ message: '删除成功', type: 'success' });
+        }
+      }
+    };
+</script>
+
+

src/views/components/splitpane.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="components-container" >
+      <code>splitPane 如果你用过<a href='http://codepen.io/' target='_blank'>codepen</a>,<a href='https://jsfiddle.net/' target='_blank'>jsfiddle</a>就不会陌生了
+      暂还没有时间开源封装好，日后补上
+      </code>
+        <splitPane v-on:resize="resize" split="vertical">
+            <template slot="paneL">
+                <div class="left-container"></div>
+            </template>
+            <template slot="paneR">
+                <split-pane split="horizontal">
+                    <template slot="paneL">
+                        <div class="top-container"></div>
+                    </template>
+                    <template slot="paneR">
+                        <div class="bottom-container">
+                        </div>
+                    </template>
+                </split-pane>
+            </template>
+        </splitPane>
+    </div>
+</template>
+
+<script>
+    import splitPane from 'components/SplitPane'
+    export default {
+      components: { splitPane },
+      methods: {
+        resize() {
+          console.log('resize')
+        }
+      }
+    };
+</script>
+<style  scoped>
+    .components-container{
+        position: relative;
+        height: 100vh;
+    }
+    .left-container {
+        background-color: #F38181;
+        height:100%;
+    }
+
+    .right-container {
+        background-color: #FCE38A;
+        height: 200px;
+    }
+
+    .top-container {
+        background-color: #FCE38A;
+        width: 100%;
+        height: 100%;
+    }
+
+    .bottom-container {
+        width: 100%;
+        background-color: #95E1D3;
+        height: 100%;
+    }
+</style>

src/views/components/sticky.vue

@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <Sticky className="sub-navbar">
+      <el-dropdown trigger="click">
+        <el-button>
+          平台<i class="el-icon-caret-bottom el-icon--right"></i>
+        </el-button>
+        <el-dropdown-menu class="no-border" slot="dropdown">
+          <el-checkbox-group v-model="platforms" style="padding: 5px 15px;">
+            <el-checkbox v-for="item in platformsOptions" :label="item.key" :key="item.key">
+              {{item.name}}
+            </el-checkbox>
+          </el-checkbox-group>
+        </el-dropdown-menu>
+      </el-dropdown>
+
+      <el-dropdown trigger="click">
+        <el-button>
+          外链<i class="el-icon-caret-bottom el-icon--right"></i>
+        </el-button>
+        <el-dropdown-menu class="no-padding no-border" style="width:300px" slot="dropdown">
+          <el-input placeholder="请输入内容" v-model="url">
+            <template slot="prepend">填写url</template>
+          </el-input>
+        </el-dropdown-menu>
+      </el-dropdown>
+
+      <div class="time-container">
+        <el-date-picker v-model="time" type="datetime" :picker-options="pickerOptions" format="yyyy-MM-dd HH:mm:ss" placeholder="发布时间">
+        </el-date-picker>
+      </div>
+
+      <el-button style="margin-left: 10px;" type="success">发布
+      </el-button>
+    </Sticky>
+
+    <div class="components-container">
+      <code>Sticky header 当页面滚动到预设的位置会吸附在顶部</code>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+      <div>我是占位</div>
+    </div>
+  </div>
+
+</template>
+<script>
+    import Sticky from 'components/Sticky';
+
+    export default {
+      components: { Sticky },
+      data() {
+        return {
+          time: '',
+          url: '',
+          platforms: ['a-platform'],
+          platformsOptions: [
+            { key: 'a-platform', name: '平台A' },
+            { key: 'b-platform', name: '平台B' },
+            { key: 'c-platform', name: '平台C' }
+          ],
+          pickerOptions: {
+            disabledDate(time) {
+              return time.getTime() > Date.now();
+            }
+          }
+        }
+      }
+
+    };
+</script>
+<style scoped>
+  .time-container {
+    display: inline-block;
+  }
+</style>
+

src/views/error/404.vue

@@ -1,61 +1,7 @@
 <template>
-    <div class="errorpage-container"> 404
+    <div>404</div>
-        <splitPane v-on:resize="resize" split="vertical">
-            <template slot="paneL">
-                <div class="left-container"></div>
-            </template>
-            <template slot="paneR">
-                <splitPane split="horizontal">
-                    <template slot="paneL">
-                        <div class="top-container"></div>
-                    </template>
-                    <template slot="paneR">
-                        <div class="bottom-container">
-                        </div>
-                    </template>
-                </splitPane>
-            </template>
-        </splitPane>
-    </div>
 </template>
 
 
-<script>
-    import splitPane from 'components/SplitPane/SplitPane'
-    export default {
-      components: { splitPane },
-      methods: {
-        resize() {
-          console.log('resize')
-        }
-      }
-    };
-</script>
-<style rel="stylesheet/scss" lang="scss" scoped>
-    .errorpage-container{
-        position: relative;
-        height: 100vh;
-    }
-    .left-container {
-        background-color: #F38181;
-        height:100%;
-    }
 
-    .right-container {
-        background-color: #FCE38A;
-        height: 200px;
-    }
 
-    .top-container {
-        background-color: #FCE38A;
-        width: 100%;
-        height: 100%;
-    }
-
-    .bottom-container {
-        width: 100%;
-        background-color: #95E1D3;
-        height: 100%;
-
-    }
-</style>

src/views/excel/index.vue

@@ -33,7 +33,7 @@
   </div>
 </template>
 <script>
-import { getList } from 'api/article'
+import { getList } from 'api/article';
 export default {
   data() {
     return {