From d0527da09c33479faac276ce8f98a5fde918938c Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Thu, 5 Mar 2020 14:07:08 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0markdown?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                           |   2 +
 src/api/markdown-api.js                |  12 +
 src/components/popover/MenuPopover.vue |   1 -
 src/layout/index.vue                   |  10 +
 src/main.js                            |   5 +
 src/permission.js                      |   3 +-
 src/router/index.js                    |  27 +-
 src/views/demo/index.vue               | 164 ++----
 src/views/form/index.vue               | 132 ++---
 src/views/home/index.vue               |  20 +-
 src/views/markdown/index.vue           |  41 ++
 src/views/public/p/index.vue           |  44 ++
 src/views/recently/index.vue           | 109 ++--
 src/views/recently/index_m.vue         | 661 +++++++++++++++++++++++++
 src/views/table/index.vue              |  86 +---
 15 files changed, 993 insertions(+), 324 deletions(-)
 create mode 100644 src/api/markdown-api.js
 create mode 100644 src/views/markdown/index.vue
 create mode 100644 src/views/public/p/index.vue
 create mode 100644 src/views/recently/index_m.vue

diff --git a/package.json b/package.json
index 26f5cbe..74a07ef 100644
--- a/package.json
+++ b/package.json
@@ -23,9 +23,11 @@
     "jquery": "^1.12.4",
     "js-cookie": "2.2.0",
     "lib-flexible": "^0.3.2",
+    "mavon-editor": "^2.7.7",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
+    "showdown": "^1.9.1",
     "sortablejs": "^1.10.2",
     "spark-md5": "^3.0.0",
     "vant": "^2.5.0",
diff --git a/src/api/markdown-api.js b/src/api/markdown-api.js
new file mode 100644
index 0000000..58ae579
--- /dev/null
+++ b/src/api/markdown-api.js
@@ -0,0 +1,12 @@
+import request from '@/utils/request'
+// const qs = require('qs')
+
+export default {
+  getMarkdown: function(params) {
+    return request({
+      url: 'public/p',
+      method: 'get',
+      params
+    })
+  },
+}
diff --git a/src/components/popover/MenuPopover.vue b/src/components/popover/MenuPopover.vue
index 986a037..4e2583f 100644
--- a/src/components/popover/MenuPopover.vue
+++ b/src/components/popover/MenuPopover.vue
@@ -76,7 +76,6 @@ export default {
       Bus.$emit('clickMore', selects)
     },
     test() {
-      console.log(8769)
     }
   }
 }
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 3876e65..315f247 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -14,6 +14,7 @@
 <script>
 import { Navbar, Sidebar, AppMain } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
+import { getToken } from '@/utils/auth'
 
 export default {
   name: 'Layout',
@@ -55,6 +56,15 @@ export default {
       this.isShow = true
       window.pc = true
     }
+
+    console.log(getToken())
+    if(getToken()){
+      this.isShow = true
+      window.pc = true
+    }else{
+      this.isShow = false
+      window.pc = false
+    }
   },
   methods: {
     handleClickOutside() {
diff --git a/src/main.js b/src/main.js
index d36dccb..19e4672 100644
--- a/src/main.js
+++ b/src/main.js
@@ -17,6 +17,10 @@ import VueWechatTitle from 'vue-wechat-title'
 // import 'we-vue/lib/style.css'
 import { Button, Cell, CellGroup, Image, List, PullRefresh, SwipeCell, Col, Row, Divider, Sticky, NavBar, Icon, Tabbar, TabbarItem, ActionSheet, Field, Overlay, Checkbox, CheckboxGroup} from 'vant';
 
+// mavonEditor
+import mavonEditor from 'mavon-editor'
+import 'mavon-editor/dist/css/index.css'
+
 import '@/icons' // icon
 import '@/permission' // permission control
 
@@ -67,6 +71,7 @@ Vue.use(Overlay);
 Vue.use(Checkbox);
 Vue.use(CheckboxGroup);
 
+Vue.use(mavonEditor);
 
 Vue.use(uploader)
 Vue.use(EVueContextmenu)
diff --git a/src/permission.js b/src/permission.js
index fa1ea19..1655609 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -8,7 +8,7 @@ import getPageTitle from '@/utils/get-page-title'
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
-const whiteList = ['/login'] // no redirect whitelist
+const whiteList = ['/login','/public/p','/share'] // no redirect whitelist
 
 router.beforeEach(async(to, from, next) => {
   // start progress bar
@@ -46,7 +46,6 @@ router.beforeEach(async(to, from, next) => {
     }
   } else {
     /* has no token*/
-
     if (whiteList.indexOf(to.path) !== -1) {
       // in the free login whitelist, go directly
       next()
diff --git a/src/router/index.js b/src/router/index.js
index 188d733..e0a7031 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -112,6 +112,31 @@ export const constantRoutes = [
     ]
   },
 
+  {
+    path: '/markdown',
+    component: Layout,
+    children: [
+      {
+        path: 'index',
+        name: 'markdown',
+        component: () => import('@/views/markdown/index'),
+        meta: { title: '创建文档', icon: 'folder' }
+      }
+    ]
+  },
+
+  {
+    path: '/public/p',
+    component: Layout,
+    children: [
+      {
+        path: '',
+        name: 'p',
+        component: () => import('@/views/public/p/index'),
+      }
+    ]
+  },
+
   // {
   //   path: '/example',
   //   component: Layout,
@@ -253,7 +278,7 @@ export const dynamicRouters = [
       component: () => import('@/views/upload/mobile/index'),
       meta: { title: '上传文件列表' }
     }]
-  }
+  },
 ]
 
 const createRouter = () => new Router({
diff --git a/src/views/demo/index.vue b/src/views/demo/index.vue
index a41d9c0..d443678 100644
--- a/src/views/demo/index.vue
+++ b/src/views/demo/index.vue
@@ -1,133 +1,47 @@
 <template>
-  <div class="container">
-    <div class="process-area" id="drag-ball">
-      <div class="process-anime">
-        <div class="cube-a" style="top: -115%;"></div>
-        <div class="cube-b" style="top: -115%;"></div>
+  <div>
+    <mavon-editor
+      v-model="content"
+      ref="md"
+      @change="change"
+      style="min-height: 600px"
+    />
 
-        <div class="done">
-          <svg xmlns="http://www.w3.org/2000/svg" class="done-icon checkmark">
-            <!--"M 14.1 27.2 l 7.1 7.2 l 16.7 -16.8"-->
-            <path d="M 13.1 21.2 l 5.1 5.2 l 12.7 -12.8" class="checkmark__check" style="fill: transparent;"></path>
-          </svg>
-        </div>
-      </div>
-    </div>
+    <button @click="submit">提交</button>
   </div>
 </template>
+
+
+
 <script>
+  import { mavonEditor } from 'mavon-editor'
+  import 'mavon-editor/dist/css/index.css'
   export default {
+    // 注册
+    components: {
+      mavonEditor,
+    },
+    data() {
+      return {
+        content:'', // 输入的markdown
+        html:'',    // 及时转的html
+      }
+    },
+    methods: {
+      // 所有操作都会被解析重新渲染
+      change(value, render){
+        console.log(value)
+        // render 为 markdown 解析后的结果[html]
+        this.html = render;
+      },
+      // 提交
+      submit(){
+        console.log(this.content);
+        console.log(this.html);
+      }
+    },
+    mounted() {
+
+    }
   }
 </script>
-<style lang="scss" scoped>
-  .container {
-    width: 100%;
-    height: 100%;
-  }
-  .process-area {
-    right: 2%;
-    bottom: 2%;
-    width: 92px;
-    height: 92px;
-    cursor: pointer;
-    background: #eee;
-    margin: auto;
-    overflow: hidden;
-    background-size: 100% 100%;
-    border-radius: 50%;
-    position: fixed;
-    transition: .5s;
-  }
-  .process-anime {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    border: 4px solid #fff;
-    transform: translate(-50%,-50%);
-    width: 90px;
-    height: 90px;
-    background: linear-gradient(45deg,#fde47c,#fdeca6);
-    border-radius: 50%;
-    overflow: hidden;
-  }
-  .process-anime .cube-a {
-    position: absolute;
-    left: 50%;
-    background: rgba(53,53,53,.3);
-    width: 130px;
-    height: 130px;
-    border-radius: 50px;
-    animation: fx-rotate 15s infinite linear;
-    transform-origin: 50% 50%;
-    transition: .5s;
-  }
-  .process-anime .cube-b {
-    position: absolute;
-    left: 50%;
-    background: #fff;
-    width: 130px;
-    height: 130px;
-    border-radius: 50px;
-    animation: fx-rotate 10s infinite reverse linear;
-    transform-origin: 50% 50%;
-    transition: .5s;
-  }
-
-  /**成功**/
-  .process-anime .done {
-    position: absolute;
-    width: 45px;
-    height: 45px;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%,-50%) scale(2.25);
-  }
-  .process-anime .done .checkmark {
-    width: 45px;
-    height: 45px;
-    border-radius: 50%;
-    display: block;
-    stroke-width: 2;
-    stroke: #fff;
-    stroke-miterlimit: 10;
-    box-shadow: inset 0 0 0 #fdda65;
-    animation: fill-data .4s ease-in-out .4s forwards,scale-data .3s ease-in-out .9s both;
-  }
-  .process-anime .done .checkmark__check {
-    transform: translate(2px,2px);
-    transform-origin: 50% 50%;
-    stroke-dasharray: 48;
-    stroke-dashoffset: 48;
-    animation: stroke-data .3s cubic-bezier(.65,0,.45,1) .8s forwards;
-  }
-
-  @keyframes fx-rotate {
-     0% {
-       transform: translate(-50%) rotate(0);
-     }
-     100% {
-       transform: translate(-50%,2px) rotate(365deg);
-     }
-   }
-
-  @keyframes scale-data {
-    0%, 100% {
-      transform: none;
-    }
-    50% {
-      transform: scale3d(1.1,1.1,1);
-    }
-  }
-  @keyframes fill-data {
-    100% {
-       box-shadow: inset 0 0 0 30px #fdda65;
-    }
-  }
-
-  @keyframes stroke-data {
-    100% {
-      stroke-dashoffset: 0;
-    }
-  }
-
-</style>
diff --git a/src/views/form/index.vue b/src/views/form/index.vue
index f4d66d3..3028867 100644
--- a/src/views/form/index.vue
+++ b/src/views/form/index.vue
@@ -1,85 +1,63 @@
 <template>
-  <div class="app-container">
-    <el-form ref="form" :model="form" label-width="120px">
-      <el-form-item label="Activity name">
-        <el-input v-model="form.name" />
-      </el-form-item>
-      <el-form-item label="Activity zone">
-        <el-select v-model="form.region" placeholder="please select your zone">
-          <el-option label="Zone one" value="shanghai" />
-          <el-option label="Zone two" value="beijing" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="Activity time">
-        <el-col :span="11">
-          <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%;" />
-        </el-col>
-        <el-col :span="2" class="line">-</el-col>
-        <el-col :span="11">
-          <el-time-picker v-model="form.date2" type="fixed-time" placeholder="Pick a time" style="width: 100%;" />
-        </el-col>
-      </el-form-item>
-      <el-form-item label="Instant delivery">
-        <el-switch v-model="form.delivery" />
-      </el-form-item>
-      <el-form-item label="Activity type">
-        <el-checkbox-group v-model="form.type">
-          <el-checkbox label="Online activities" name="type" />
-          <el-checkbox label="Promotion activities" name="type" />
-          <el-checkbox label="Offline activities" name="type" />
-          <el-checkbox label="Simple brand exposure" name="type" />
-        </el-checkbox-group>
-      </el-form-item>
-      <el-form-item label="Resources">
-        <el-radio-group v-model="form.resource">
-          <el-radio label="Sponsor" />
-          <el-radio label="Venue" />
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="Activity form">
-        <el-input v-model="form.desc" type="textarea" />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">Create</el-button>
-        <el-button @click="onCancel">Cancel</el-button>
-      </el-form-item>
-    </el-form>
-  </div>
+  <div v-html="htms"></div>
 </template>
 
 <script>
-export default {
-  data() {
-    return {
-      form: {
-        name: '',
-        region: '',
-        date1: '',
-        date2: '',
-        delivery: false,
-        type: [],
-        resource: '',
-        desc: ''
+  import showdown from "showdown"
+  let converter = new showdown.Converter();
+  export default {
+    data() {
+      return {
+        htms: ""
+      }
+    },
+    created() {
+      this.setMakedown()
+    },
+    methods: {
+      setMakedown() {
+        this.htms = converter.makeHtml('# 标题\n' +
+          '```java\n' +
+          '/***\n' +
+          '     * 重命名\n' +
+          '     * @param username\n' +
+          '     * @param id\n' +
+          '     * @return\n' +
+          '     */\n' +
+          '    @Override\n' +
+          '    public ResponseResult<Object> rename(String newFileName, String username, String id) {\n' +
+          '        FileDocument fileDocument = mongoTemplate.findById(id, FileDocument.class, COLLECTION_NAME);\n' +
+          '        if (fileDocument != null) {\n' +
+          '            String currentDirectory = getUserDirectory(fileDocument.getPath());\n' +
+          '            String filePath = rootPath + File.separator + username + currentDirectory;\n' +
+          '            File file = new File(filePath + fileDocument.getName());\n' +
+          '            if(fileDocument.getIsFolder()){\n' +
+          '                Query query = new Query();\n' +
+          '                String searchPath = currentDirectory + fileDocument.getName();\n' +
+          '                String newPath = currentDirectory + newFileName;\n' +
+          '                query.addCriteria(Criteria.where("path").regex("^"+searchPath));\n' +
+          '                List<FileDocument> documentList = mongoTemplate.find(query, FileDocument.class, COLLECTION_NAME);\n' +
+          '                // 修改该文件夹下的所有文件的path\n' +
+          '                documentList.parallelStream().forEach(rep -> {\n' +
+          '                    String path = rep.getPath();\n' +
+          '                    String newFilePath = replaceStart(path, searchPath, newPath);\n' +
+          '                    Update update = new Update();\n' +
+          '                    update.set("path",newFilePath);\n' +
+          '                    Query query1 = new Query();\n' +
+          '                    query1.addCriteria(Criteria.where("_id").is(rep.getId()));\n' +
+          '                    mongoTemplate.upsert(query1, update, COLLECTION_NAME);\n' +
+          '                });\n' +
+          '            }\n' +
+          '            if (renameFile(newFileName, id, filePath, file)) {\n' +
+          '                return ResultUtil.error("重命名失败");\n' +
+          '            }\n' +
+          '            return ResultUtil.success(true);\n' +
+          '        } else {\n' +
+          '            return ResultUtil.error("数据库查询失败");\n' +
+          '        }\n' +
+          '    }\n' +
+          '```\n')
       }
     }
-  },
-  methods: {
-    onSubmit() {
-      this.$message('submit!')
-    },
-    onCancel() {
-      this.$message({
-        message: 'cancel!',
-        type: 'warning'
-      })
-    }
   }
-}
 </script>
-
-<style scoped>
-.line{
-  text-align: center;
-}
-</style>
-
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 8a08c88..8ef1d70 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -24,6 +24,10 @@
                     <svg-icon icon-class="folder-upload" /><span class="menuitem text">上传文件夹</span>
                   </label>
                 </li>
+                <li @click.prevent="newDocument">
+                  <a href="#" class="menuitem"><svg-icon icon-class="folder" /><span class="menuitem text">新建文档</span>
+                  </a>
+                </li>
                 <li @click.prevent="newFolder">
                   <a href="#" class="menuitem"><svg-icon icon-class="folder-add" /><span class="menuitem text">新建文件夹</span>
                   </a>
@@ -625,6 +629,10 @@ export default {
         this.getFileList()
       }
       console.log("this.pathList:", this.pathList)
+    },
+    // 新建文档
+    newDocument() {
+
     },
     newFolder() {
       this.newFolderName = '新建文件夹'
@@ -1390,10 +1398,14 @@ export default {
           this.getFileList()
         }
       } else {
-        // 打开文件
-        const fileIds = [row.id]
-        const url = process.env.VUE_APP_BASE_FILE_API + 'preview/' + row.name + '?jmal-token=' + this.$store.state.user.token + '&fileIds=' + fileIds
-        window.open(url, '_blank')
+        if(row.contentType === 'text/markdown'){
+          this.$router.push(`/public/p?mark=${row.id}`)
+        }else{
+          // 打开文件
+          const fileIds = [row.id]
+          const url = process.env.VUE_APP_BASE_FILE_API + 'preview/' + row.name + '?jmal-token=' + this.$store.state.user.token + '&fileIds=' + fileIds
+          window.open(url, '_blank')
+        }
       }
     }
   }
diff --git a/src/views/markdown/index.vue b/src/views/markdown/index.vue
new file mode 100644
index 0000000..11a8912
--- /dev/null
+++ b/src/views/markdown/index.vue
@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <mavon-editor
+      v-model="content"
+      ref="md"
+      @change="change"
+      style="min-height: 600px;max-height: 600px"
+    />
+
+    <button @click="submit">提交</button>
+  </div>
+</template>
+
+
+
+<script>
+  export default {
+    data() {
+      return {
+        content:'', // 输入的markdown
+        html:'',    // 及时转的html
+      }
+    },
+    methods: {
+      // 所有操作都会被解析重新渲染
+      change(value, render){
+        console.log(value)
+        // render 为 markdown 解析后的结果[html]
+        this.html = render;
+      },
+      // 提交
+      submit(){
+        console.log(this.content);
+        console.log(this.html);
+      }
+    },
+    mounted() {
+
+    }
+  }
+</script>
diff --git a/src/views/public/p/index.vue b/src/views/public/p/index.vue
new file mode 100644
index 0000000..096976b
--- /dev/null
+++ b/src/views/public/p/index.vue
@@ -0,0 +1,44 @@
+<template>
+    <mavon-editor
+      v-model="content"
+      :subfield="false"
+      :boxShadow="false"
+      defaultOpen="preview"
+      :navigation="true"
+      :toolbarsFlag="toolbarsFlag"
+      :toolbars="toolbars"
+      @navigationToggle="navigationToggle"
+    />
+</template>
+
+<script>
+  import api from '@/api/markdown-api'
+  export default {
+    data() {
+      return {
+        toolbars:{
+          navigation: true,
+        },
+        toolbarsFlag: true,
+        content:'',
+        html:'',
+      }
+    },
+    mounted() {
+      this.getMarkDown()
+    },
+    methods: {
+      getMarkDown() {
+        api.getMarkdown({
+          mark: this.$route.query.mark
+        }).then((res) => {
+          this.content = res.data.contentText
+          console.log(res.data)
+        })
+      },
+      navigationToggle(d){
+        console.log(d)
+      }
+    }
+  }
+</script>
diff --git a/src/views/recently/index.vue b/src/views/recently/index.vue
index 1d19cd7..499d818 100644
--- a/src/views/recently/index.vue
+++ b/src/views/recently/index.vue
@@ -1,58 +1,81 @@
 <template>
-  <uploader :options="options" :file-status-text="statusText" class="uploader-example" ref="uploader" @file-complete="fileComplete" @complete="complete"></uploader>
+    <mavon-editor
+      v-model="content"
+      :subfield="false"
+      :boxShadow="false"
+      defaultOpen="preview"
+      :navigation="true"
+      :toolbarsFlag="toolbarsFlag"
+      :toolbars="toolbars"
+      @navigationToggle="navigationToggle"
+    />
 </template>
 
 <script>
+  import { mavonEditor } from 'mavon-editor'
+  import 'mavon-editor/dist/css/index.css'
   export default {
-    data () {
+    // 注册
+    components: {
+      mavonEditor,
+    },
+    data() {
       return {
-        options: {
-          target: '//localhost:3000/upload', // '//jsonplaceholder.typicode.com/posts/',
-          testChunks: false
+        toolbars:{
+          navigation: true,
         },
-        attrs: {
-          accept: 'image/*'
-        },
-        statusText: {
-          success: '成功了',
-          error: '出错了',
-          uploading: '上传中',
-          paused: '暂停中',
-          waiting: '等待中'
-        }
+        toolbarsFlag: true,
+        content:'# 标题\n' +
+          '```java\n' +
+          '/***\n' +
+          '     * 重命名\n' +
+          '     * @param username\n' +
+          '     * @param id\n' +
+          '     * @return\n' +
+          '     */\n' +
+          '    @Override\n' +
+          '    public ResponseResult<Object> rename(String newFileName, String username, String id) {\n' +
+          '        FileDocument fileDocument = mongoTemplate.findById(id, FileDocument.class, COLLECTION_NAME);\n' +
+          '        if (fileDocument != null) {\n' +
+          '            String currentDirectory = getUserDirectory(fileDocument.getPath());\n' +
+          '            String filePath = rootPath + File.separator + username + currentDirectory;\n' +
+          '            File file = new File(filePath + fileDocument.getName());\n' +
+          '            if(fileDocument.getIsFolder()){\n' +
+          '                Query query = new Query();\n' +
+          '                String searchPath = currentDirectory + fileDocument.getName();\n' +
+          '                String newPath = currentDirectory + newFileName;\n' +
+          '                query.addCriteria(Criteria.where("path").regex("^"+searchPath));\n' +
+          '                List<FileDocument> documentList = mongoTemplate.find(query, FileDocument.class, COLLECTION_NAME);\n' +
+          '                // 修改该文件夹下的所有文件的path\n' +
+          '                documentList.parallelStream().forEach(rep -> {\n' +
+          '                    String path = rep.getPath();\n' +
+          '                    String newFilePath = replaceStart(path, searchPath, newPath);\n' +
+          '                    Update update = new Update();\n' +
+          '                    update.set("path",newFilePath);\n' +
+          '                    Query query1 = new Query();\n' +
+          '                    query1.addCriteria(Criteria.where("_id").is(rep.getId()));\n' +
+          '                    mongoTemplate.upsert(query1, update, COLLECTION_NAME);\n' +
+          '                });\n' +
+          '            }\n' +
+          '            if (renameFile(newFileName, id, filePath, file)) {\n' +
+          '                return ResultUtil.error("重命名失败");\n' +
+          '            }\n' +
+          '            return ResultUtil.success(true);\n' +
+          '        } else {\n' +
+          '            return ResultUtil.error("数据库查询失败");\n' +
+          '        }\n' +
+          '    }\n' +
+          '```\n',
+        html:'',
       }
     },
     methods: {
-      complete () {
-        console.log('complete', arguments)
-      },
-      fileComplete () {
-        console.log('file complete', arguments)
+      navigationToggle(d){
+        console.log(d)
       }
     },
-    mounted () {
-      this.$nextTick(() => {
-        window.uploader = this.$refs.uploader.uploader
-      })
+    mounted() {
+
     }
   }
 </script>
-
-<style>
-  .uploader-example {
-    width: 880px;
-    padding: 15px;
-    margin: 40px auto 0;
-    font-size: 12px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
-  }
-  .uploader-example .uploader-btn {
-    margin-right: 4px;
-  }
-  .uploader-example .uploader-list {
-    max-height: 440px;
-    overflow: auto;
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
-</style>
diff --git a/src/views/recently/index_m.vue b/src/views/recently/index_m.vue
new file mode 100644
index 0000000..8558a62
--- /dev/null
+++ b/src/views/recently/index_m.vue
@@ -0,0 +1,661 @@
+<template>
+    <mavon-editor
+      v-model="content"
+      :subfield="false"
+      :boxShadow="false"
+      defaultOpen="preview"
+      :toolbarsFlag="false"
+    />
+</template>
+
+
+
+<script>
+  import { mavonEditor } from 'mavon-editor'
+  import 'mavon-editor/dist/css/index.css'
+  export default {
+    // 注册
+    components: {
+      mavonEditor,
+    },
+    data() {
+      return {
+        content:'# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd\n' +
+          '# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd# 一级标题\n' +
+          '## 二级标题\n' +
+          '### 三级标题\n' +
+          '#### 四级标题\n' +
+          '##### 五级标题\n' +
+          '###### 六级标题\n' +
+          '==标记==\n' +
+          '|column1|column2|column3|\n' +
+          '|-|-|-|\n' +
+          '|content1|content2|content3|\n' +
+          'dsafsdfsadf sacasdca\n' +
+          '> sdfasdfasd',
+        html:'',
+      }
+    },
+    methods: {
+    },
+    mounted() {
+
+    }
+  }
+</script>
diff --git a/src/views/table/index.vue b/src/views/table/index.vue
index a1ed847..3f00243 100644
--- a/src/views/table/index.vue
+++ b/src/views/table/index.vue
@@ -1,79 +1,23 @@
 <template>
-  <div class="app-container">
-    <el-table
-      v-loading="listLoading"
-      :data="list"
-      element-loading-text="Loading"
-      border
-      fit
-      highlight-current-row
-    >
-      <el-table-column align="center" label="ID" width="95">
-        <template slot-scope="scope">
-          {{ scope.$index }}
-        </template>
-      </el-table-column>
-      <el-table-column label="Title">
-        <template slot-scope="scope">
-          {{ scope.row.title }}
-        </template>
-      </el-table-column>
-      <el-table-column label="Author" width="110" align="center">
-        <template slot-scope="scope">
-          <span>{{ scope.row.author }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="Pageviews" width="110" align="center">
-        <template slot-scope="scope">
-          {{ scope.row.pageviews }}
-        </template>
-      </el-table-column>
-      <el-table-column class-name="status-col" label="Status" width="110" align="center">
-        <template slot-scope="scope">
-          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column align="center" prop="created_at" label="Display_time" width="200">
-        <template slot-scope="scope">
-          <i class="el-icon-time" />
-          <span>{{ scope.row.display_time }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
+  <div v-html="htms"></div>
 </template>
 
 <script>
-import { getList } from '@/api/table'
-
-export default {
-  filters: {
-    statusFilter(status) {
-      const statusMap = {
-        published: 'success',
-        draft: 'gray',
-        deleted: 'danger'
+  import showdown from "showdown"
+  converter.setOption('tables', true);    // 将表格显示出来
+  export default {
+    data() {
+      return {
+        htms: ""
+      }
+    },
+    created() {
+      this.setMakedown()
+    },
+    methods: {
+      setMakedown() {
+        this.htms = converter.makeHtml('# 这是一个标题')
       }
-      return statusMap[status]
-    }
-  },
-  data() {
-    return {
-      list: null,
-      listLoading: true
-    }
-  },
-  created() {
-    this.fetchData()
-  },
-  methods: {
-    fetchData() {
-      this.listLoading = true
-      getList().then(response => {
-        this.list = response.data.items
-        this.listLoading = false
-      })
     }
   }
-}
 </script>