no message

Former-commit-id: 0a96bb54e9270e451e59b72e00e35053a7c0e152
Former-commit-id: c250ba90da6546626b9831847630aae786c88344
Former-commit-id: c1182b1bdc6ea9b3934275286a93e2760a643bfe

src/pages/demo/charts/pie/1.vue

@@ -0,0 +1,14 @@
+<template>
+  <Container type="ghost">
+    <Chart></Chart>
+  </Container>
+</template>
+
+<script>
+import Chart from '@/components/charts/pie/1.vue'
+export default {
+  components: {
+    Chart
+  }
+}
+</script>

src/pages/demo/charts/pie/2.vue

@@ -0,0 +1,5 @@
+<template>
+  <Container type="ghost">
+    pie 2
+  </Container>
+</template>

src/pages/demo/index/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <Container type="ghost">
+    index
+  </Container>
+</template>

src/pages/demo/plugins/clipboard-polyfill/demo.vue

@@ -0,0 +1,71 @@
+<template>
+  <Container>
+    <GithubLink url="https://github.com/lgarron/clipboard-polyfill"></GithubLink>
+    <el-row :gutter="10">
+      <el-col :span="12">
+        <div class="mb">
+          <el-input v-model="text" style="width: 200px;"></el-input>
+          <el-button @click="copyText()">将左侧输入框内的文字复制进剪贴板</el-button>
+        </div>
+        <el-button @click="copyHtml()">将 <span v-html="html"></span> 连带样式一起复制进剪贴板，然后去 Word 文档内粘贴</el-button>
+      </el-col>
+      <el-col :span="12">
+        <el-alert
+          class="mb"
+          title="只有在 IE 浏览器下你才可以通过下面这两个按钮获取剪贴板数据"
+          type="warning"
+          show-icon>
+        </el-alert>
+        <div class="mb">
+          <el-tooltip content="需要 IE 浏览器" placement="top">
+            <el-button @click="readText">readText( )</el-button>
+          </el-tooltip>
+          <el-tooltip content="需要 IE 浏览器" placement="top">
+            <el-button @click="read">read( )</el-button>
+          </el-tooltip>
+        </div>
+        <el-input type="textarea" placeholder="在这里检验你的剪贴板 ( text/plain 数据 )"></el-input>
+      </el-col>
+    </el-row>
+  </Container>
+</template>
+
+<script>
+import clipboard from 'clipboard-polyfill'
+export default {
+  data () {
+    return {
+      text: 'Hello ~',
+      html: '<span style="background-color: #19be6b; color: #f8f8f9;">Hello</span><span style="background-color: #495060; color: #f8f8f9;">World</span>'
+    }
+  },
+  methods: {
+    copyText () {
+      clipboard.writeText(this.text)
+    },
+    copyHtml () {
+      var dt = new clipboard.DT()
+      dt.setData('text/html', this.html)
+      clipboard.write(dt)
+    },
+    readText () {
+      clipboard.readText().then((res) => {
+        console.log(res)
+        this.$Message.success('读取成功 返回结果请查看控制台')
+      }, (err) => {
+        console.log(err)
+        this.$Message.error('错误信息已经打印到控制台')
+      })
+    },
+    read () {
+      clipboard.read().then((res) => {
+        console.log(res)
+        this.$Message.success('读取成功 返回结果请查看控制台')
+      }, (err) => {
+        console.log(err)
+        this.$Message.error('错误信息已经打印到控制台')
+      })
+    }
+  }
+}
+</script>

src/pages/demo/plugins/clipboard-polyfill/readme.vue

@@ -0,0 +1,9 @@
+<template>
+  <Container>
+    <p slot="title">README.md</p>
+    <p slot="more"><GithubLink url="https://github.com/lgarron/clipboard-polyfill"></GithubLink></p>
+    <div>
+      <Markdown url="https://raw.githubusercontent.com/lgarron/clipboard-polyfill/master/README.md"></Markdown>
+    </div>
+  </Container>
+</template>

src/pages/demo/plugins/countup/demo.vue

@@ -0,0 +1,87 @@
+<template>
+  <Container type="ghost" class="demo-plugin-countup-demo">
+    <el-row :gutter="10">
+      <el-col :span="6">
+        <el-card>
+          <p slot="title">只设置目标数字</p>
+          <CountUp :end="100"></CountUp>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card>
+          <p slot="title">设置起止数值</p>
+          <CountUp :start="14" :end="100"></CountUp>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card>
+          <p slot="title">小数位数</p>
+          <CountUp :end="100.00" :decimals="2"></CountUp>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card>
+          <p slot="title">动画时长</p>
+          <CountUp :end="100" :duration="6"></CountUp>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card>
+          <p slot="title">回调函数</p>
+          <CountUp :end="100" :callback="() => {className = 'end'}" :class="className"></CountUp>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card>
+          <p slot="title">结束一秒后更新数值</p>
+          <CountUp :end="end" :callback="update"></CountUp>
+        </el-card>
+      </el-col>
+    </el-row>
+  </Container>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      // 回调函数使用
+      className: '',
+      // 更新数值用
+      end: 50
+    }
+  },
+  methods: {
+    update () {
+      setTimeout(() => {
+        this.end = 100
+      }, 1000)
+    }
+  }
+}
+</script>
+
+
+<style lang="scss">
+@import '~@/assets/style/public.scss';
+.demo-plugin-countup-demo {
+  .el-card {
+    @extend %unable-select;
+    margin-bottom: 10px;
+    .el-card__body {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      span {
+        font-size: 40px;
+        &.end {
+          padding: 0px 20px;
+          border-radius: $border-radius;
+          background-color: $color-success;
+          color: #FFF;
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/demo/plugins/countup/readme.vue

@@ -0,0 +1,9 @@
+<template>
+  <Container>
+    <p slot="title">README.md</p>
+    <p slot="more"><GithubLink url="https://github.com/inorganik/countUp.js"></GithubLink></p>
+    <div>
+      <Markdown url="https://raw.githubusercontent.com/inorganik/countUp.js/master/README.md"></Markdown>
+    </div>
+  </Container>
+</template>

src/pages/demo/plugins/highlight/code/css.js

@@ -0,0 +1,8 @@
+export default `body {
+  background-color: aliceblue;
+  height: 100%;
+}
+.my-card {
+  height: 300px;
+  width: 300px;
+}`

src/pages/demo/plugins/highlight/code/html.js

@@ -0,0 +1,8 @@
+export default `<ul>
+  <li class="li-1"><p>Hello</p></li>
+  <li>
+    <span style="color: red;">
+      Hello
+    </span>
+  </li>
+</ul>`

src/pages/demo/plugins/highlight/code/javascript.js

@@ -0,0 +1,3 @@
+export default `[].forEach.call($$("*"), a => {
+  a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
+})`

src/pages/demo/plugins/highlight/code/scss.js

@@ -0,0 +1,8 @@
+export default `body {
+  background-color: aliceblue;
+  height: 100%;
+  .my-card {
+    height: 300px;
+    width: 300px;
+  }
+}`

src/pages/demo/plugins/highlight/demo.vue

@@ -0,0 +1,45 @@
+<template>
+  <Container type="ghost">
+    <el-card class="mb">
+      <p slot="title">javascript</p>
+      <Highlight :code="codeJavascript"></Highlight>
+    </el-card>
+    <el-row :gutter="10">
+      <el-col :span="8">
+        <el-card class="mb">
+          <p slot="title">css</p>
+          <Highlight :code="codeCSS"></Highlight>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="mb">
+          <p slot="title">scss</p>
+          <Highlight :code="codeSCSS"></Highlight>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="mb">
+          <p slot="title">html</p>
+          <Highlight :code="codeHTML"></Highlight>
+        </el-card>
+      </el-col>
+    </el-row>
+  </Container>
+</template>
+
+<script>
+import codeJavascript from './code/javascript'
+import codeCSS from './code/css'
+import codeSCSS from './code/scss'
+import codeHTML from './code/html'
+export default {
+  data () {
+    return {
+      codeJavascript,
+      codeCSS,
+      codeSCSS,
+      codeHTML
+    }
+  }
+}
+</script>

src/pages/demo/plugins/highlight/readme.vue

@@ -0,0 +1,9 @@
+<template>
+  <Container>
+    <p slot="title">README.md</p>
+    <p slot="more"><GithubLink url="https://github.com/isagalaev/highlight.js"></GithubLink></p>
+    <div>
+      <Markdown url="https://raw.githubusercontent.com/isagalaev/highlight.js/master/README.md"></Markdown>
+    </div>
+  </Container>
+</template>

src/pages/demo/plugins/js-cookie/demo.vue

@@ -0,0 +1,52 @@
+<template>
+  <Container type="ghost">
+    <el-card class="mb">
+      <p slot="title">基本读写删</p>
+      <el-button type="primary" @click="set('test-user-name', 'test-user')">set('test-user-name', 'normalValue')</el-button>
+      <el-button type="info" @click="get('test-user-name')">get('test-user-name')</el-button>
+      <el-button type="error" @click="remove('test-user-name')">remove('test-user-name')</el-button>
+    </el-card>
+    <el-card class="mb">
+      <p slot="title">设置有效期</p>
+      <el-button type="primary" @click="setExpires('test-user-pwd', '123456789', 1)">设置 'test-user-pwd' 有效期为一天</el-button>
+      <el-button type="info" @click="get('test-user-pwd')">get('test-user-pwd')</el-button>
+      <el-button type="error" @click="remove('test-user-pwd')">remove('test-user-pwd')</el-button>
+    </el-card>
+    <el-card class="mb">
+      <p slot="title">获取所有可以获得的数据</p>
+      <el-button type="info" @click="getAll">getAll</el-button>
+    </el-card>
+  </Container>
+</template>
+
+<script>
+import Cookies from 'js-cookie'
+export default {
+  methods: {
+    set (name = 'default-name', value = 'default-value') {
+      Cookies.set(name, value)
+      this.$Message.info(`设置数据 ${name} = ${value}`)
+    },
+    setExpires (name = 'default-name', value = 'default-value', expires = 1) {
+      Cookies.set(name, value, {
+        expires
+      })
+      this.$Message.info(`设置数据 ${name} = ${value} 有效期 ${expires} 天`)
+    },
+    get (name = 'default-name') {
+      const value = Cookies.get(name)
+      this.$Message.info(`获取数据 ${name} = ${value}`)
+    },
+    getAll () {
+      const value = Cookies.get()
+      console.log(value)
+      this.$Message.info('结果已经打印到控制台')
+    },
+    remove (name = 'default-name') {
+      Cookies.remove(name)
+      this.$Message.info(`删除数据 ${name}`)
+    }
+  }
+}
+</script>
+

src/pages/demo/plugins/js-cookie/readme.vue

@@ -0,0 +1,9 @@
+<template>
+  <Container>
+    <p slot="title">README.md</p>
+    <p slot="more"><GithubLink url="https://github.com/js-cookie/js-cookie"></GithubLink></p>
+    <div>
+      <Markdown url="https://raw.githubusercontent.com/js-cookie/js-cookie/master/README.md"></Markdown>
+    </div>
+  </Container>
+</template>

src/pages/demo/plugins/marked/demo.vue

@@ -0,0 +1,40 @@
+<template>
+  <Container type="ghost">
+    <el-row :gutter="10">
+      <el-col :span="12">
+        <el-card>
+          <p slot="title">markdown 源码</p>
+          <pre>{{mdSource}}</pre>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card>
+          <p slot="title">markdown 解析结果</p>
+          <div class="markdown-body" v-html="markedHTML"></div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </Container>
+</template>
+
+<script>
+import marked from 'marked'
+export default {
+  data () {
+    return {
+      mdSource: '',
+      markedHTML: ''
+    }
+  },
+  async mounted () {
+    this.mdSource = await this.getReadme(this.url)
+    this.markedHTML = marked(this.mdSource)
+  },
+  methods: {
+    async getReadme () {
+      const { data } = await this.$axios.get('/static/markdownFiles/demo/baseMarkdowmFile.md')
+      return data
+    }
+  }
+}
+</script>

src/pages/demo/plugins/marked/demoHighlight.vue

@@ -0,0 +1,45 @@
+<template>
+  <Container type="ghost">
+    <el-row :gutter="10">
+      <el-col :span="12">
+        <el-card>
+          <p slot="title">markdown 源码</p>
+          <pre>{{mdSource}}</pre>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card>
+          <p slot="title">markdown 解析结果 代码高亮显示</p>
+          <div class="markdown-body" v-html="markedHTML"></div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </Container>
+</template>
+
+<script>
+import marked from 'marked'
+import highlight from 'highlight.js'
+export default {
+  data () {
+    return {
+      mdSource: '',
+      markedHTML: ''
+    }
+  },
+  async mounted () {
+    this.mdSource = await this.getReadme(this.url)
+    this.markedHTML = marked(this.mdSource, {
+      highlight: (code) => {
+        return highlight.highlightAuto(code).value
+      }
+    })
+  },
+  methods: {
+    async getReadme () {
+      const { data } = await this.$axios.get('/static/markdownFiles/demo/baseMarkdowmFile.md')
+      return data
+    }
+  }
+}
+</script>

src/pages/demo/plugins/marked/readme.vue

@@ -0,0 +1,7 @@
+<template>
+  <Container>
+    <p slot="title">README.md</p>
+    <p slot="more"><GithubLink url="https://github.com/chjj/marked"></GithubLink></p>
+    <Markdown url="https://raw.githubusercontent.com/chjj/marked/master/README.md"></Markdown>
+  </Container>
+</template>

src/pages/demo/plugins/mock/componnets/MockDemoCard.vue

@@ -0,0 +1,64 @@
+<template>
+  <el-card class="mb">
+    <div slot="header" class="clearfix">
+      <el-button type="text" size="mini">{{title}}</el-button>
+      <el-tooltip content="重新 mock 数据" placement="top-end">
+        <el-button type="primary" size="mini" @click="$emit('reload')" style="float: right;">刷新</el-button>
+      </el-tooltip>
+    </div>
+    <el-row :gutter="10">
+      <el-col :span="12">
+        <div class="col col-l">
+          <Highlight :code="code"></Highlight>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="col col-r">
+          <Highlight :code="mock"></Highlight>
+        </div>
+      </el-col>
+    </el-row>
+  </el-card>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: 'Mock Demo'
+    },
+    code: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    mock: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/style/public.scss';
+.col {
+  padding: $margin;
+  border-radius: $border-radius;
+  border-width: 1px;
+  border-style: solid;
+}
+.col-l {
+  background-color: lighten($color-info, 40%);
+  border-color: lighten($color-info, 35%);
+}
+.col-r {
+  background-color: lighten($color-success, 47%);
+  border-color: lighten($color-success, 40%);
+}
+</style>
+
+

src/pages/demo/plugins/mock/data/settingDPD.js

@@ -0,0 +1,15 @@
+/* eslint-disable */
+export default [
+  // 字符串
+  {
+    title: "占位符演示",
+    json: {
+      "name": {
+        first: '@FIRST',
+        middle: '@FIRST',
+        last: '@LAST',
+        full: '@first @middle @last'
+      }
+    }
+  }
+]

src/pages/demo/plugins/mock/data/settingDTD.js

@@ -0,0 +1,111 @@
+/* eslint-disable */
+export default [
+  // 字符串
+  {
+    title: "复制1-10次固定字符串",
+    json: {
+      "string|1-10": "★"
+    }
+  },
+  {
+    title: "复制3次",
+    json: {
+      "string|3": "Ha"
+    }
+  },
+  // 数字
+  {
+    title: "范围随机取值",
+    json: {
+      "number|1-100": 50
+    }
+  },
+  {
+    title: "累加1",
+    json: {
+      "number|+1": 10
+    }
+  },
+  {
+    title: "累加2",
+    json: {
+      "number|+2": 10
+    }
+  },
+  {
+    title: "浮点数",
+    json: {
+      "number1|1-100.1-10": 1,
+      "number2|123.1-10": 1,
+      "number3|123.3": 1,
+      "number4|123.10": 1.123
+    }
+  },
+  // 布尔值
+  {
+    title: "true 的概率是 1/2",
+    json: {
+      "boolean|1": true
+    }
+  },
+  // 对象
+  {
+    title: '随机选择3个属性',
+    json: {
+      "obj|3": {
+        name: 'FairyEver',
+        use: 'vue.js',
+        sex: 1,
+        qq: '1711467488',
+        tel: '123-4567-8910',
+        city: 'beijing',
+        phone: 'Apple',
+        mail: '1711467488liyang@gmail.com',
+        github: 'https://github.com/FairyEver',
+        blog: 'http://www.fairyever.com/'
+      }
+    }
+  },
+  {
+    title: '随机选择3-6个属性',
+    json: {
+      "obj|3-6": {
+        name: 'FairyEver',
+        use: 'vue.js',
+        sex: 1,
+        qq: '1711467488',
+        tel: '123-4567-8910',
+        city: 'beijing',
+        phone: 'Apple',
+        mail: '1711467488liyang@gmail.com',
+        github: 'https://github.com/FairyEver',
+        blog: 'http://www.fairyever.com/'
+      }
+    }
+  },
+  // 数组
+  {
+    title: '随机选1个',
+    json: {
+      "arr|1": ['1-vue', '2-react', '3-angular', '4-node', '5-java']
+    }
+  },
+  {
+    title: '顺序选1个',
+    json: {
+      "arr|+1": ['1-vue', '2-react', '3-angular', '4-node', '5-java']
+    }
+  },
+  {
+    title: '重复3次',
+    json: {
+      "arr|3": ['o', 'o - o', 'o - o - o']
+    }
+  },
+  {
+    title: '重复2-10次',
+    json: {
+      "arr|2-10": ['-', '----']
+    }
+  }
+]

src/pages/demo/plugins/mock/demoDPD.vue

@@ -0,0 +1,45 @@
+<template>
+  <Container type="ghost">
+    <el-card class="mb">
+      <Markdown url="/static/markdownFiles/article/mock演示页面介绍.md"></Markdown>
+    </el-card>
+    <MockDemoCard
+      v-for="(item, index) in settingDPD"
+      :key="index"
+      :title="item.title"
+      :code="JSON.stringify(item.json, null, 2)"
+      :mock="mockResult[index]"
+      @reload="doMock(index)">
+    </MockDemoCard>
+  </Container>
+</template>
+
+<script>
+import Vue from 'vue'
+import * as tool from '@/assets/library/tool/tool.js'
+import Mock from 'mockjs'
+import settingDPD from './data/settingDPD'
+import MockDemoCard from './componnets/MockDemoCard'
+export default {
+  components: {
+    MockDemoCard
+  },
+  data () {
+    return {
+      mockResult: [],
+      settingDPD,
+      settingDPDClone: tool.clone(settingDPD)
+    }
+  },
+  mounted () {
+    this.settingDPD.forEach((e, i) => {
+      this.doMock(i)
+    })
+  },
+  methods: {
+    doMock (n = 0) {
+      Vue.set(this.mockResult, n, JSON.stringify(Mock.mock(this.settingDPDClone[n].json), null, 2))
+    }
+  }
+}
+</script>

src/pages/demo/plugins/mock/demoDTD.vue

@@ -0,0 +1,66 @@
+<template>
+  <Container type="ghost">
+    <el-card class="mb">
+      <Markdown url="/static/markdownFiles/article/mock演示页面介绍.md"></Markdown>
+    </el-card>
+    <MockDemoCard
+      v-for="(item, index) in settingDTD"
+      :key="index"
+      :title="item.title"
+      :code="JSON.stringify(item.json, null, 2)"
+      :mock="mockResult[index]"
+      @reload="doMock(index)">
+    </MockDemoCard>
+    <MockDemoCard
+      :title="fn.title"
+      :code="fn.code"
+      :mock="fn.mocked"
+      @reload="fnMock()">
+    </MockDemoCard>
+    <MockDemoCard
+      :title="regexp.title"
+      :code="regexp.code"
+      :mock="regexp.mocked"
+      @reload="regexpMock()">
+    </MockDemoCard>
+  </Container>
+</template>
+
+<script>
+import Vue from 'vue'
+import * as tool from '@/assets/library/tool/tool.js'
+import Mock from 'mockjs'
+import settingDTD from './data/settingDTD'
+import MockDemoCard from './componnets/MockDemoCard'
+// mixin
+import regexp from './mixins/regexp'
+import fn from './mixins/function'
+export default {
+  mixins: [
+    regexp,
+    fn
+  ],
+  components: {
+    MockDemoCard
+  },
+  data () {
+    return {
+      mockResult: [],
+      settingDTD,
+      settingDTDClone: tool.clone(settingDTD)
+    }
+  },
+  mounted () {
+    this.settingDTD.forEach((e, i) => {
+      this.doMock(i)
+    })
+    this.fnMock()
+    this.regexpMock()
+  },
+  methods: {
+    doMock (n = 0) {
+      Vue.set(this.mockResult, n, JSON.stringify(Mock.mock(this.settingDTDClone[n].json), null, 2))
+    }
+  }
+}
+</script>

src/pages/demo/plugins/mock/grammaticalNorm.vue

@@ -0,0 +1,5 @@
+<template>
+  <Container>
+    <Markdown url="/static/markdownFiles/article/mock语法规范.md"></Markdown>
+  </Container>
+</template>

src/pages/demo/plugins/mock/mixins/function.js

@@ -0,0 +1,30 @@
+/* eslint-disable */
+import Mock from 'mockjs'
+export default {
+  data () {
+    return {
+      // 测试函数
+      fn: {
+        title: '函数',
+        code: `{
+  "name": "FairyEver",
+  "say": function() {
+    return 'I AM ' + this.name
+  }
+}`,
+        json: {
+          "name": "FairyEver",
+          "say": function() {
+            return 'I AM ' + this.name
+          }
+        },
+        mocked: ''
+      }
+    }
+  },
+  methods: {
+    fnMock () {
+      this.fn.mocked = JSON.stringify(Mock.mock(this.fn.json), null, 2)
+    }
+  }
+}

src/pages/demo/plugins/mock/mixins/regexp.js

@@ -0,0 +1,28 @@
+/* eslint-disable */
+import Mock from 'mockjs'
+export default {
+  data () {
+    return {
+      // 测试正则表达式
+      regexp: {
+        title: '正则表达式',
+        code: `{
+  'regexp1': /[a-z][A-Z][0-9]/,
+  'regexp2': /\w\W\s\S\d\D/,
+  'regexp3': /\d{5,10}/
+}`,
+        json: {
+          'regexp1': /[a-z][A-Z][0-9]/,
+          'regexp2': /\w\W\s\S\d\D/,
+          'regexp3': /\d{5,10}/
+        },
+        mocked: ''
+      }
+    }
+  },
+  methods: {
+    regexpMock () {
+      this.regexp.mocked = JSON.stringify(Mock.mock(this.regexp.json), null, 2)
+    }
+  }
+}

src/pages/demo/plugins/mock/readme.vue

@@ -0,0 +1,7 @@
+<template>
+  <Container>
+    <p slot="title">README.md</p>
+    <p slot="more"><GithubLink url="https://github.com/nuysoft/Mock"></GithubLink></p>
+    <Markdown url="https://raw.githubusercontent.com/nuysoft/Mock/refactoring/README.md"></Markdown>
+  </Container>
+</template>

src/pages/demo/plugins/papaParse/demo.vue

@@ -0,0 +1,56 @@
+<template>
+  <Container>
+    <!-- <template slot="title">演示</tempalte> -->
+    <p slot="more"><GithubLink url="https://github.com/mholt/PapaParse"></GithubLink></p>
+    <el-upload
+      :before-upload="handleUpload"
+      action="default">
+      <el-button>选择一个CSV文件</el-button>
+    </el-upload>
+    <br>
+    <el-table
+      v-bind="table"
+      style="width: 100%">
+      <el-table-column
+        v-for="(item, index) in table.columns"
+        :key="index"
+        :prop="item.prop"
+        :label="item.label">
+      </el-table-column>
+    </el-table>
+  </Container>
+</template>
+
+<script>
+import papa from 'papaparse'
+export default {
+  data () {
+    return {
+      table: {
+        columns: [],
+        data: [],
+        size: 'mini',
+        stripe: true,
+        border: true
+      }
+    }
+  },
+  methods: {
+    handleUpload (file) {
+      papa.parse(file, {
+        header: true,
+        skipEmptyLines: true,
+        complete: (results, file) => {
+          this.table.columns = Object.keys(results.data[0]).map(e => ({
+            label: e,
+            prop: e
+          }))
+          this.table.data = results.data
+        }
+      })
+      return false
+    }
+  }
+}
+</script>
+

src/pages/demo/plugins/papaParse/readme.vue

@@ -0,0 +1,7 @@
+<template>
+  <Container>
+    <p slot="title">README.md</p>
+    <p slot="more"><GithubLink url="https://github.com/mholt/PapaParse"></GithubLink></p>
+    <Markdown url="https://raw.githubusercontent.com/mholt/PapaParse/master/README.md"></Markdown>
+  </Container>
+</template>

src/pages/demo/plugins/simpleMDE/demo.vue

@@ -0,0 +1,9 @@
+<template>
+  <Container>
+    <!-- <template slot="title">演示</tempalte> -->
+    <p slot="more"><GithubLink url="https://github.com/sparksuite/simplemde-markdown-editor"></GithubLink></p>
+    <div style="margin-bottom: -16px;">
+      <SimpleMDE></SimpleMDE>
+    </div>
+  </Container>
+</template>

src/pages/demo/plugins/simpleMDE/readme.vue

@@ -0,0 +1,7 @@
+<template>
+  <Container>
+    <p slot="title">README.md</p>
+    <p slot="more"><GithubLink url="https://github.com/sparksuite/simplemde-markdown-editor"></GithubLink></p>
+    <Markdown url="https://raw.githubusercontent.com/sparksuite/simplemde-markdown-editor/master/README.md"></Markdown>
+  </Container>
+</template>

src/pages/demo/plugins/vue-grid-layout/demo.vue

@@ -0,0 +1,102 @@
+<template>
+  <Container type="ghost" class="demo-plugin-vue-grid-layout-demo">
+    <GridLayout
+      v-bind="layout"
+      @layout-updated="layoutUpdatedHandler">
+      <GridItem
+        v-for="(item, index) in layout.layout"
+        :key="index"
+        v-bind="item"
+        @resize="resizeHandler"
+        @move="moveHandler"
+        @resized="resizedHandler"
+        @moved="movedHandler">
+        <el-card>
+          <el-tag size="mini" type="info" slot="header">Card {{item.i}}</el-tag>
+          <template v-if="item.i === '0'">
+            <p>拖拽卡片调整位置</p>
+            <p>拖拽卡片右下角的手柄调整卡片大小</p>
+          </template>
+        </el-card>
+      </GridItem>
+    </GridLayout>
+  </Container>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      layout: {
+        layout: [
+          {'x': 0, 'y': 0, 'w': 4, 'h': 5, 'i': '0'},
+          {'x': 2, 'y': 5, 'w': 2, 'h': 5, 'i': '1'},
+          {'x': 4, 'y': 0, 'w': 2, 'h': 5, 'i': '2'},
+          {'x': 6, 'y': 0, 'w': 4, 'h': 5, 'i': '3'},
+          {'x': 10, 'y': 0, 'w': 2, 'h': 10, 'i': '4'},
+          {'x': 10, 'y': 10, 'w': 2, 'h': 5, 'i': '5'},
+          {'x': 0, 'y': 5, 'w': 2, 'h': 5, 'i': '6'},
+          {'x': 0, 'y': 10, 'w': 8, 'h': 5, 'i': '7'},
+          {'x': 8, 'y': 10, 'w': 2, 'h': 5, 'i': '8'},
+          {'x': 4, 'y': 5, 'w': 6, 'h': 5, 'i': '9'}
+        ],
+        colNum: 12,
+        rowHeight: 30,
+        isDraggable: true,
+        isResizable: true,
+        isMirrored: false,
+        verticalCompact: true,
+        margin: [10, 10],
+        useCssTransforms: true
+      }
+    }
+  },
+  methods: {
+    layoutUpdatedHandler (newLayout) {
+      // console.log('layoutUpdatedHandler')
+      newLayout.forEach(e => {
+        // console.log(`{'x': ${e.x}, 'y': ${e.y}, 'w': ${e.w}, 'h': ${e.h}, 'i': '${e.i}'},`)
+      })
+    },
+    resizeHandler (i, newH, newW) {
+      // console.log('resizeHandler')
+      // console.log(`i: ${i}, newH: ${newH}, newW: ${newW}`)
+    },
+    moveHandler (i, newX, newY) {
+      // console.log('moveHandler')
+      // console.log(`i: ${i}, newX: ${newX}, newY: ${newY}`)
+    },
+    resizedHandler (i, newH, newW, newHPx, newWPx) {
+      // console.log('resizedHandler')
+      // console.log(`i: ${i}, newH: ${newH}, newW: ${newW}, newHPx: ${newHPx}, newWPx: ${newWPx}`)
+    },
+    movedHandler (i, newX, newY) {
+      // console.log('movedHandler')
+      // console.log(`i: ${i}, newX: ${newX}, newY: ${newY}`)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import '~@/assets/style/public.scss';
+.demo-plugin-vue-grid-layout-demo {
+  .vue-grid-layout {
+    margin: -$margin -$margin 0px -$margin;
+    .el-card {
+      height: 100%;
+      @extend %unable-select;
+      .el-card__header {
+        padding: 8px $margin;
+      }
+    }
+    .vue-resizable-handle {
+      opacity: .3;
+      &:hover{
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>
+

src/pages/demo/plugins/vue-grid-layout/readme.vue

@@ -0,0 +1,7 @@
+<template>
+  <Container>
+    <p slot="title">README.md</p>
+    <p slot="more"><GithubLink url="https://github.com/jbaysolutions/vue-grid-layout"></GithubLink></p>
+    <Markdown url="https://raw.githubusercontent.com/jbaysolutions/vue-grid-layout/master/README.md"></Markdown>
+  </Container>
+</template>

src/pages/demo/plugins/vue-splitpane/demo.vue

@@ -0,0 +1,17 @@
+<template>
+  <Container>
+    <!-- <template slot="title">演示</tempalte> -->
+    <p slot="more"><GithubLink url="https://github.com/PanJiaChen/vue-split-pane"></GithubLink></p>
+    <div style="height: 400px; margin: -16px;">
+      <SplitPane :min-percent='20' :default-percent='30' split="vertical">
+        <template slot="paneL"><div style="margin: 10px;">左</div></template>
+        <template slot="paneR">
+          <SplitPane split="horizontal">
+            <template slot="paneL"><div style="margin: 10px;">右上</div></template>
+            <template slot="paneR"><div style="margin: 10px;">右下</div></template>
+          </SplitPane>
+        </template>
+      </SplitPane>
+    </div>
+  </Container>
+</template>

src/pages/demo/plugins/vue-splitpane/readme.vue

@@ -0,0 +1,7 @@
+<template>
+  <Container>
+    <p slot="title">README.md</p>
+    <p slot="more"><GithubLink url="https://github.com/PanJiaChen/vue-split-pane"></GithubLink></p>
+    <Markdown url="https://raw.githubusercontent.com/PanJiaChen/vue-split-pane/master/README.md"></Markdown>
+  </Container>
+</template>