From f44366a166581974862263c482ed323101b90e36 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Fri, 13 Nov 2020 18:04:37 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=EF=BC=9A=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E7=94=B1mavon-editor=E6=94=B9=E4=B8=BAvditor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 -
 src/components/Icon/Icon.vue                  |   2 +-
 src/components/backtop/AlBackTop.vue          |   2 +-
 src/components/preview/SimTextPreview.vue     |  21 +-
 src/components/preview/VditorPreview.vue      |  66 ++
 src/main.js                                   |   6 -
 src/styles/markdown.scss                      |  25 +-
 src/views/markdown/index.vue                  | 215 ++++--
 src/views/public/article/ArticleTop.vue       |   2 +-
 src/views/public/article/SidebarNav.vue       |   2 +-
 src/views/public/article/index.vue            | 310 ++++----
 src/views/public/articles/index.vue           |  19 +-
 src/views/recently/index_m.vue                | 661 ------------------
 src/views/setting/articles/articleManager.vue |  14 +-
 14 files changed, 389 insertions(+), 957 deletions(-)
 create mode 100644 src/components/preview/VditorPreview.vue
 delete mode 100644 src/views/recently/index_m.vue

diff --git a/package.json b/package.json
index bdb659d..aee68c1 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,6 @@
     "jshint": "^2.11.1",
     "less-loader": "^6.1.0",
     "lib-flexible": "^0.3.2",
-    "mavon-editor": "^2.7.7",
     "monaco-editor-vue": "^1.0.10",
     "monaco-editor-webpack-plugin": "^1.9.0",
     "monaco-languages": "^1.10.0",
diff --git a/src/components/Icon/Icon.vue b/src/components/Icon/Icon.vue
index 86dac45..e088ec1 100644
--- a/src/components/Icon/Icon.vue
+++ b/src/components/Icon/Icon.vue
@@ -5,7 +5,7 @@
 
 import { Icon } from 'ant-design-vue'
 const IconFont = Icon.createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/font_2024484_3royfgdezl.js'
+  scriptUrl: '//at.alicdn.com/t/font_2024484_7y6nutfxwm5.js'
 })
 
 export default {
diff --git a/src/components/backtop/AlBackTop.vue b/src/components/backtop/AlBackTop.vue
index 20c7ee4..4b9da07 100644
--- a/src/components/backtop/AlBackTop.vue
+++ b/src/components/backtop/AlBackTop.vue
@@ -9,7 +9,7 @@
       }"
       class="el-backtop">
       <slot>
-        <el-icon name="caret-top"></el-icon>
+        <svg-icon icon-class="Up"/>
       </slot>
     </div>
   </transition>
diff --git a/src/components/preview/SimTextPreview.vue b/src/components/preview/SimTextPreview.vue
index d7eeb9d..c097993 100644
--- a/src/components/preview/SimTextPreview.vue
+++ b/src/components/preview/SimTextPreview.vue
@@ -95,17 +95,11 @@
             >
               <span slot="label"><svg-icon class="tabs-icon-svg" :icon-class="findSvgClass(item.name)"></svg-icon> {{item.title}}</span>
               <div v-if="textPreviewVisible" class="editor">
-                <mavon-editor
-                  ref="simTextMd"
+                <vditor-preview
+                  class="content-body"
                   v-show="editableTabsValue.endsWith('.md') && previewMode"
-                  v-model="item.content"
+                  :content="item.content"
                   :style="{height: editorHieght+'px'}"
-                  :subfield="false"
-                  :boxShadow="true"
-                  :toolbarsFlag="true"
-                  :toolbars="toolbars"
-                  codeStyle="idea"
-                  defaultOpen="preview"
                 />
                 <MonacoEditor
                   v-show="editableTabsValue.endsWith('.md') ? !previewMode: true"
@@ -148,10 +142,12 @@
   import FilePathNav from '@/components/Breadcrumb/FilePathNav'
   import Icon from '@/components/Icon/Icon.vue'
 
+  import VditorPreview from "@/components/preview/VditorPreview";
+
   export default {
     name: "SimTextPreview",
     components: {
-      Icon,MonacoEditor,FileTree,FancyTree,MessageDialog,FilePathNav
+      Icon,MonacoEditor,FileTree,FancyTree,MessageDialog,FilePathNav,VditorPreview
     },
     props: {
       file: {
@@ -1264,4 +1260,9 @@
   >>> .fancytree-expander {
     margin-top: 5px;
   }
+  .content-body {
+    overflow-y: scroll;
+    padding: 20px 30px;
+    background-color: #ffffff;
+  }
 </style>
diff --git a/src/components/preview/VditorPreview.vue b/src/components/preview/VditorPreview.vue
new file mode 100644
index 0000000..299bf6f
--- /dev/null
+++ b/src/components/preview/VditorPreview.vue
@@ -0,0 +1,66 @@
+<template>
+<div>
+  <div id="vditor" :style="{height: height}"></div>
+</div>
+</template>
+<script>
+import vditor from 'vditor/dist/method.min'
+import "vditor/src/assets/scss/index.scss"
+  export default {
+    name: "VidtorPreview",
+    components: {
+    },
+    props: {
+      height: {
+        type: String,
+        default: null
+      },
+      content: {
+        type: String,
+        default: ''
+      },
+    },
+    computed: {
+
+    },
+    data(){
+      return{
+        vditorPreviewShow: false
+      }
+    },
+    watch: {
+      content(val){
+        if(!this.vditorPreviewShow){
+          this.vditorPreviewInit(val)
+          this.vditorPreviewShow = true
+        }
+      }
+    },
+    mounted() {
+      if(this.content){
+        this.vditorPreviewInit(this.content)
+        this.vditorPreviewShow = true
+      }
+    },
+    methods:{
+      vditorPreviewInit(content){
+        const that = this
+        vditor.preview(document.getElementById('vditor'),
+          content,{
+            speech: {
+              enable: true,
+            },
+            hljs: {
+              lineNumber: true
+            },
+            after() {
+              that.$emit('after')
+            }
+          })
+      },
+    }
+  }
+</script>
+
+<style>
+</style>
diff --git a/src/main.js b/src/main.js
index adc92a1..7e1ba90 100644
--- a/src/main.js
+++ b/src/main.js
@@ -26,10 +26,6 @@ import contentmenu from 'v-contextmenu'
 import 'v-contextmenu/dist/index.css'
 Vue.use(contentmenu)
 
-// mavonEditor
-import mavonEditor from 'mavon-editor'
-import 'mavon-editor/dist/css/index.css'
-
 import '@/icons' // icon
 import '@/permission' // permission control
 
@@ -92,8 +88,6 @@ Vue.use(CheckboxGroup);
 Vue.use(Grid);
 Vue.use(GridItem);
 
-Vue.use(mavonEditor);
-
 Vue.use(uploader)
 Vue.use(EVueContextmenu)
 
diff --git a/src/styles/markdown.scss b/src/styles/markdown.scss
index e4d38e0..5b6cebe 100644
--- a/src/styles/markdown.scss
+++ b/src/styles/markdown.scss
@@ -241,14 +241,7 @@
   align-items: stretch;
 }
 
-/deep/ .v-note-wrapper {
-  position: unset;
-  .show {
-    border-radius: 1rem;
-  }
-  .v-note-panel {
-    border-radius: 1rem;
-  }
+/deep/ .article-body {
   .note-update-date {
     padding: 0.75rem;
     border-left: 0.35rem solid;
@@ -501,12 +494,12 @@
   font-size: 14px;
   color: #333;
 }
-/deep/ .right-menu > div.titleList li.active a {
-  color: #13C2C2;
-}
-/deep/ .right-menu > div.titleList li:hover a {
-  color: #13C2C2;
-}
+///deep/ .right-menu > div.titleList li.active a {
+//  color: #13C2C2;
+//}
+///deep/ .right-menu > div.titleList li:hover a {
+//  color: #13C2C2;
+//}
 /deep/ .right-menu > div.titleList {
   .h-1 {
     padding-left: 10px;
@@ -534,10 +527,6 @@
     color: #6a737d;
   }
 }
-/deep/ .right-menu > div.titleList .pl a {
-  font-size: 13px;
-  color: #777;
-}
 /deep/ .right-menu > div.titleList .j-bj {
   background: linear-gradient(to right, #5d9eea, #afcafd);
   position: absolute;
diff --git a/src/views/markdown/index.vue b/src/views/markdown/index.vue
index c320cf7..3c08b21 100644
--- a/src/views/markdown/index.vue
+++ b/src/views/markdown/index.vue
@@ -1,36 +1,55 @@
 <template>
-  <div v-wechat-title="'编辑'+filename">
+  <div v-wechat-title="'编辑:'+filename">
     <dir-tree ref="dirTree" :append-to-body='true'>
         <el-button slot="footer" size="small" type="primary" @click="confirmSelectDir">确 定</el-button>
     </dir-tree>
-    <el-header>
-      <div class="header-item">
-        文章标题：
-        <el-input class="articles-title" placeholder="文章标题" v-model="filename" size="small"/>
-        <el-input v-if="!editStatus" class="articles-storage" placeholder="存储位置" size="small" v-model="storageLocation" :readonly="true" @focus="selectDir">
-          <el-button slot="prepend" size="small" @click="selectDir">保存位置</el-button>
-        </el-input>
-        <el-button type="primary" @click="moreSetting = true" size="small">更多设置</el-button>
-        <el-button v-if="!editStatus" class="release-button" type="primary" size="small" @click="add" :loading="adding">发布文章</el-button>
-        <el-button v-if="editStatus" class="release-button" type="primary" size="small" @click="update" :loading="updating">更新文章</el-button>
-        <el-button v-if="!editStatus" class="release-button" type="warning" size="small" @click="add" :loading="adding">保存草稿</el-button>
+    <div class="article-editor">
+      <div class="editor-left">
+        <el-header>
+          <div class="header-item">
+            <span class="title-label">标题：</span>
+            <el-input class="articles-title" placeholder="文章标题" v-model="filename" />
+            <!--        <el-input v-if="!editStatus" class="articles-storage" placeholder="存储位置" size="small" v-model="storageLocation" :readonly="true" @focus="selectDir">-->
+            <!--          <el-button slot="prepend" size="small" @click="selectDir">保存位置</el-button>-->
+            <!--        </el-input>-->
+            <!--        <el-button type="primary" @click="moreSetting = true" size="small">更多设置</el-button>-->
+            <!--        <el-button v-if="!editStatus" class="release-button" type="primary" size="small" @click="add" :loading="adding">发布文章</el-button>-->
+            <!--        <el-button v-if="editStatus" class="release-button" type="primary" size="small" @click="update" :loading="updating">更新文章</el-button>-->
+            <!--        <el-button v-if="!editStatus" class="release-button" type="warning" size="small" @click="add" :loading="adding">保存草稿</el-button>-->
+          </div>
+        </el-header>
+        <el-main>
+          <div id="vditor"></div>
+        </el-main>
       </div>
-    </el-header>
-    <el-main>
-      <div id="vditor"></div>
-<!--      <mavon-editor-->
-<!--        v-model="content"-->
-<!--        ref="md"-->
-<!--        @change="change"-->
-<!--        codeStyle="atelier-dune-dark"-->
-<!--        :style="{'height': clientHeight+'px'}"-->
-<!--        :imageFilter="imageFilter"-->
-<!--        @save="save"-->
-<!--        @imgAdd="$imgAdd"-->
-<!--        @imgDel="$imgDel"-->
-<!--        @fullScreen="fullScreen"-->
-<!--      />-->
-    </el-main>
+      <div class="editor-right">
+        <div class="operation">
+          <el-button class="release-button" type="warning" size="small" @click="add" :loading="adding">保存草稿</el-button>
+          <el-button v-if="!editStatus" class="release-button" type="primary" size="small" @click="add" :loading="adding">发布文章</el-button>
+          <el-button v-if="editStatus" class="release-button" type="primary" size="small" @click="update" :loading="updating">更新文章</el-button>
+        </div>
+        <div class="more-setting">
+          <p class="mark-setting-label">文章封面：</p>
+          <el-input
+            class="mark-setting-input"
+            type="textarea"
+            :autosize="{ minRows: 3, maxRows: 8}"
+            placeholder="输入图片URL"
+            v-model="file.cover">
+          </el-input>
+
+          <p class="mark-setting-label">分类：</p>
+          <el-cascader
+            class="mark-setting-input"
+            placeholder="不选择"
+            :options="categories"
+            :show-all-levels="false"
+            :props="{ checkStrictly: true }"
+            clearable></el-cascader>
+
+        </div>
+      </div>
+    </div>
 
     <el-drawer
       :visible.sync="moreSetting"
@@ -43,7 +62,7 @@
           type="textarea"
           :autosize="{ minRows: 3, maxRows: 8}"
           placeholder="输入图片URL"
-          v-model="markdownCover">
+          v-model="file.cover">
         </el-input>
       </div>
     </el-drawer>
@@ -58,6 +77,7 @@
 
   import Vditor from 'vditor'
   import "vditor/src/assets/scss/index.scss"
+  import categoryApi from "@/api/category";
 
   let toolbar = [
     'emoji',
@@ -110,10 +130,10 @@
     },
     data() {
       return {
+        file: {},
         editStatus: false,
-        content:"", // 输入的markdown
         html:'',    // 及时转的html
-        filename: '新建文档',
+        filename: '',
         clientHeight: document.documentElement.clientHeight - 210,
         updating: false,
         adding: false,
@@ -121,48 +141,65 @@
         storageLocation: '/',
         selectLocationVisible: false,
         moreSetting: false,
-        markdownCover: null,
         contentEditor: '',
+        categories: []
       }
     },
     mounted() {
-
-      this.contentEditor = new Vditor('vditor', {
-        height: this.clientHeight,
-        toolbar,
-        toolbarConfig: {
-          pin: true,
-        },
-        preview: {
-          mode: 'both',
-          hljs: {
-            lineNumber: true
-          }
-        },
-        cache: {
-          enable: false,
-        },
-        after: () => {
-          this.contentEditor.setValue(this.content)
-        },
-      })
-      if(this.$route.query.id){
-        this.editStatus = true
-        markdownApi.getMarkdown({
-          mark: this.$route.query.id
-        }).then((res) => {
-          this.content = res.data.contentText
-          this.filename = res.data.name.split('.md')[0]
-          this.markdownCover = res.data.cover
-          this.storageLocation = res.data.path
-        })
-      }
+      this.getMarkdown()
+      this.categoryTree()
       const that = this
       window.onresize = function temp() {
         that.reHeight()
       }
     },
+    destroyed() {
+      this.contentEditor.destroy()
+    },
     methods: {
+      getMarkdown(){
+        if(this.$route.query.id){
+          this.editStatus = true
+          markdownApi.getMarkdown({
+            mark: this.$route.query.id
+          }).then((res) => {
+            this.file = res.data
+            this.content = this.file.contentText
+            this.filename = this.file.name.split('.md')[0]
+            this.storageLocation = res.data.path
+            // 初始化编辑器
+            this.vditorInit(res.data.contentText)
+          })
+        } else {
+          this.vditorInit('')
+        }
+      },
+      categoryTree() {
+        categoryApi.categoryTree({userId: this.$store.state.user.userId}).then(res => {
+          this.categories = res.data
+        })
+      },
+      vditorInit(content){
+        this.contentEditor = new Vditor('vditor', {
+          height: this.clientHeight,
+          toolbar,
+          toolbarConfig: {
+            pin: true,
+          },
+          preview: {
+            mode: 'both',
+            hljs: {
+              lineNumber: true
+            }
+          },
+          cache: {
+            enable: false,
+          },
+          after: () => {
+            this.contentEditor.setValue(content)
+          },
+        })
+      },
       $imgAdd(pos, $file) {
         const maxSize = 1024 * 1024 * 5
         if($file.size > maxSize){
@@ -231,7 +268,7 @@
             filename: filename,
             cover: this.markdownCover,
             currentDirectory: this.storageLocation,
-            contentText: this.content
+            contentText: this.contentEditor.getValue()
           }).then((res) => {
             this.adding = false
             this.$message({
@@ -255,7 +292,7 @@
             filename: filename,
             cover: this.markdownCover,
             currentDirectory: this.storageLocation,
-            contentText: this.content
+            contentText: this.contentEditor.getValue()
           }).then(() => {
             this.updating = false
             this.$message({
@@ -290,27 +327,65 @@
   /deep/ .el-input-group {
     width: unset;
   }
-  .header-item {
-    min-width: 800px;
+  /deep/ .header-item {
+    line-height: 40px;
     padding: 5px 0 5px 0;
     .release-button {
       float: right;
       margin-left: 10px;
     }
     .el-input {
-      width: 300px;
+      width: 90%;
+      input[type='text'] {
+        font-weight: 900;
+        color: #000000!important;
+        font-size: 16px;
+        border: none;
+        border-bottom: #ccc 1px solid;
+        border-radius: 0;
+      }
+    }
+    .title-label {
+      font-size: 16px;
+      font-weight: 500;
     }
   }
 
-  .more-setting {
-    padding: 15px;
+  /deep/ .more-setting {
+    .el-input {
+      width: 100%;
+    }
+    margin-top: 68px;
     .mark-setting-label {
       font-weight: 500;
+      margin-top: 10px!important;
+    }
+    .mark-setting-input {
+      width: 100%;
     }
     .mark-description {
       font-size: 12px;
       font-weight: 100;
     }
   }
+.article-editor {
+  min-width: 1160px;
+  margin: auto;
+  display: flex;
+  .editor-left {
+    width: 75%;
+  }
+  .editor-right {
+    width: 25%;
+    .operation {
+      float: right;
+    }
+  }
+}
 
+  @media (min-width: 1200px) {
+    .article-editor {
+      max-width: 1200px;
+    }
+  }
 </style>
diff --git a/src/views/public/article/ArticleTop.vue b/src/views/public/article/ArticleTop.vue
index fe3b85d..fa530e9 100644
--- a/src/views/public/article/ArticleTop.vue
+++ b/src/views/public/article/ArticleTop.vue
@@ -8,7 +8,7 @@
             <a class="nav-link" href="https://www.jmal.top/archives.html" title="归档"><svg-icon icon-class="guidang"></svg-icon><span class="nav-link-label">归档</span></a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="https://www.jmal.top/archives.html" title="分类"><svg-icon icon-class="leimupinleifenleileibie"></svg-icon><span class="nav-link-label">分类</span></a>
+            <a class="nav-link" href="https://www.jmal.top/archives.html" title="分类"><svg-icon icon-class="fenlei"></svg-icon><span class="nav-link-label">分类</span></a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="https://www.jmal.top/archives.html" title="关于"><svg-icon icon-class="myself"></svg-icon><span class="nav-link-label">关于</span></a>
diff --git a/src/views/public/article/SidebarNav.vue b/src/views/public/article/SidebarNav.vue
index 85967a8..9297f1c 100644
--- a/src/views/public/article/SidebarNav.vue
+++ b/src/views/public/article/SidebarNav.vue
@@ -17,7 +17,7 @@
           <a class="nav-link" href="https://www.jmal.top/archives.html" title="归档"><svg-icon icon-class="guidang"></svg-icon><span class="nav-link-label">归档</span></a>
         </li>
         <li class="menu-item">
-          <a class="nav-link" href="https://www.jmal.top/archives.html" title="分类"><svg-icon icon-class="leimupinleifenleileibie"></svg-icon><span class="nav-link-label">分类</span></a>
+          <a class="nav-link" href="https://www.jmal.top/archives.html" title="分类"><svg-icon icon-class="fenlei"></svg-icon><span class="nav-link-label">分类</span></a>
         </li>
         <li class="menu-item">
           <a class="nav-link" href="https://www.jmal.top/archives.html" title="关于"><svg-icon icon-class="myself"></svg-icon><span class="nav-link-label">关于</span></a>
diff --git a/src/views/public/article/index.vue b/src/views/public/article/index.vue
index b2924ba..0b439f7 100644
--- a/src/views/public/article/index.vue
+++ b/src/views/public/article/index.vue
@@ -5,7 +5,6 @@
     </transition>
     <al-back-top></al-back-top>
 
-    <!--SideBar menu-->
     <SidebarNav  :setting="userSetting"/>
 
     <div id="body">
@@ -21,24 +20,19 @@
             <a itemprop="name" href="https://www.jmal.top/author/1/" rel="author">{{file.username}}</a>
             · {{file.uploadDate}}
             <span v-if="isEditor">
-              · <a :href="'/markdown/editor?id='+file.id" target="_blank">编辑</a>
+              · <a :href="'/setting/website/manager-articles?operation=editor&id='+file.id" target="_blank">编辑</a>
             </span>
           </div>
         </div>
       </div>
       <div class="body-wrapper">
         <el-main id="main_body" :content="titleList.length > 0?'show':'hide'" class="l_main article_l_main">
-          <div id="vditor" class="article-body"></div>
-<!--          <mavon-editor-->
-<!--            ref="md"-->
-<!--            v-if="!showList"-->
-<!--            v-model="content"-->
-<!--            :subfield="false"-->
-<!--            :boxShadow="true"-->
-<!--            :toolbarsFlag="false"-->
-<!--            codeStyle="atom-one-dark"-->
-<!--            defaultOpen="preview"-->
-<!--          />-->
+<!--          <div id="vditor" class="article-body"></div>-->
+          <vditor-preview
+            :content="content"
+            class="article-body"
+            @after="renderContents"
+          />
         </el-main>
         <div v-show="titleList.length > 0" class="right-bj">
           <a-affix>
@@ -71,16 +65,18 @@ import ArticleTop from "@/views/public/article/ArticleTop";
 import {getSetting} from '@/api/user'
 import SidebarNav from "@/views/public/article/SidebarNav";
 
-import VditorPreview from 'vditor/dist/method.min'
-import "vditor/src/assets/scss/index.scss"
+import VditorPreview from "@/components/preview/VditorPreview";
+
+// import VditorPreview from 'vditor/dist/method.min'
+// import "vditor/src/assets/scss/index.scss"
 
 export default {
-    components: {SidebarNav, ArticleTop, AlBackTop, AlLoading },
+    components: {SidebarNav, ArticleTop, AlBackTop, AlLoading, VditorPreview },
     data() {
       return {
         file: {},
         isLoading: true,
-        pageTitle: "文章",
+        pageTitle: "",
         showList: true,
         toolbars: null,
         toolbarsFlag: true,
@@ -94,6 +90,7 @@ export default {
         top: 70,
         isEditor : false,
         contentEditor: '',
+        direction: 'up'
       }
     },
     mounted() {
@@ -107,24 +104,10 @@ export default {
         that.maxMenuHeight= document.documentElement.clientHeight - 155
       }
     },
-    // beforeRouteLeave(to, from, next) {
-    //   to.meta.keepAlive = true;
-    //   next();
-    // },
-    activated() {
-      console.log('activated', 'article')
-    },
-    deactivated() {
-      console.log('deactivated')
-      // this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
-    },
     methods: {
       getSetting() {
         getSetting({userId: this.$store.state.user.userId}).then((res) => {
           this.userSetting = res.data;
-          this.$nextTick(()=>{
-            this.dynamicTyping()
-          })
         })
       },
       onScroll() {
@@ -155,30 +138,9 @@ export default {
           const filename = res.data.name
           this.pageTitle = filename.substring(0,filename.length - res.data.suffix.length-1)
           this.content = res.data.contentText
-
-          const that = this
-          VditorPreview.preview(document.getElementById('vditor'),
-            this.content,{
-              speech: {
-                enable: true,
-              },
-              anchor: 1,
-              after() {
-                that.renderAfter()
-              }
-            })
-
-          this.$nextTick(()=>{  // DOM更新之后获取子元素
-            // // 在文章最前面添加更新时间
-            // let main = document.getElementById('vditor')
-            // let p = document.createElement("p")
-            // p.className = "note-update-date"
-            // p.innerText = `本文最后更新于：${this.file.updateDate}`
-            // main.insertBefore(p , main.childNodes[0])
-
+          this.$nextTick(()=>{
             // 动态打字效果
             this.dynamicTyping()
-
             const hTag = document.querySelector("h1");
             if(hTag){
               this.pageTitle = hTag.innerText
@@ -187,121 +149,135 @@ export default {
           this.isLoading = false
         })
       },
-      renderAfter(){
-        let headers = $('.article-body').find(":header")
-        let a = []
-        if(headers && headers.length >0 ){
-          const that = this
-          headers.each(function () {
-            const tagName = $(this).prop("tagName")
-            if(tagName === 'H3'){
-              let li = '<li class="pl h-3"><a href="#'+$(this).attr('id')+'">'+$(this).text()+'</a></li>'
-              a.push(li)
-              that.titleList.push(li)
-            }
-          })
-
-          // for (let i = 0; i < a.length; i++) {
-          //   // a[i] = a[i].replace(/id="/g, 'href="#')
-          //   if (i ===0 && a[i].indexOf('h1') !== -1) {
-          //     a[i] = '<li first class="h-1">' + a[i].replace(/<h1>|<\/h1>/g, '') + '</li>'
-          //   }else if (a[i].indexOf('h1') !== -1) {
-          //     a[i] = '<li first class="pl h-1">' + a[i].replace(/<h1>|<\/h1>/g, '') + '</li>'
-          //   }else if (a[i].indexOf('h2') !== -1) {
-          //     a[i] = '<li class="pl h-2">' + a[i].replace(/<h2>|<\/h2>/g, '') + '</li>'
-          //   }else if (a[i].indexOf('h3') !== -1) {
-          //     a[i] = '<li class="pl h-3">' + a[i].replace(/<h3>|<\/h3>/g, '') + '</li>'
-          //   }else if (a[i].indexOf('h4') !== -1) {
-          //     a[i] = '<li class="pl h-4">' + a[i].replace(/<h4>|<\/h4>/g, '') + '</li>'
-          //   }else if (a[i].indexOf('h5') !== -1) {
-          //     a[i] = '<li class="pl h-5">' + a[i].replace(/<h5>|<\/h5>/g, '') + '</li>'
-          //   }else if (a[i].indexOf('h6') !== -1) {
-          //     a[i] = '<li class="pl h-6">' + a[i].replace(/<h6>|<\/h6>/g, '') + '</li>'
-          //   } else {
-          //     a[i] = '<li>' + a[i].replace(/<h1>|<\/h1>/g, '') + '</li>'
-          //   }
-          //   this.titleList.push(i)
-          // }
-          $('.j-titleList').prepend(this.titleList)
-
-          // 获取id数组
-          for (let i = 0; i < a.length; i++) {
-            a[i] = a[i].replace(/.*?#(.*)".*/g, '$1')
-          }
-
-          let beforeScrollTop = document.documentElement.scrollTop;
-          let fn = fn || function (direction) {
-            // 判断是上滑显示,下滑隐藏
-            const top = $('#top')
-            const toogleNav = $('#toggle-nav')
-
-            const body = document.getElementById("body")
-
-            if(direction === 'down'){
-              top.removeClass('animateIn')
-              top.addClass('animateOut')
-              toogleNav.removeClass('animateRight')
-              toogleNav.addClass('animateLeft')
-              if(body.style.transform.length > 0) {
-                document.getElementById("sidebar-nav").style.transform = ''
-                body.style.transform = ''
-                document.getElementById("toggle-nav").style.transform = ''
-              }
-            }
-            if(direction === 'up'){
-              top.removeClass('animateOut')
-              top.addClass('animateIn')
-              toogleNav.removeClass('animateLeft')
-              toogleNav.addClass('animateRight')
-            }
-          };
-
-          $(window).on("scroll",function (event) {
-            for (let i = 0; i < a.length; i++) {
-              if ($(window).scrollTop() > $('#' + a[i]).offset().top - 100 || $(this).scrollTop() + $(this).height() == $(document).height()) {
-                $('.j-titleList').find('li').eq(i).addClass('active').siblings('li').removeClass('active');
-                $('.j-bj').css('top', i * 34)
-              }
-            }
-
-            // 判断是上滑还是下滑
-            var afterScrollTop = document.documentElement.scrollTop;
-            let delta = afterScrollTop - beforeScrollTop;
-            beforeScrollTop = afterScrollTop;
-            var scrollTop = $(this).scrollTop();
-            var scrollHeight = $(document).height();
-            var windowHeight = $(this).height();
-            var progress = ((afterScrollTop + document.body.clientHeight)/scrollHeight) * 100
-            // 改变top bar 进度条
-            document.querySelector(".scrollbar").style.width = progress +'%'
-
-            if (scrollTop + windowHeight > scrollHeight - 10) {  //滚动到底部执行事件
-              fn('bottom');
-              return;
-            }
-            if (afterScrollTop < 10 || afterScrollTop > $(document.body).height - 10) {
-              fn('up');
-            } else {
-              if (Math.abs(delta) < 10) {
-                return false;
-              }
-              fn(delta > 0 ? "down" : "up");
-            }
-          })
-
-          let $root = $('html, body');
-          $('.j-titleList li').on("click", function () {
-            let top = 70
-            if (typeof($(this).attr("first"))!=="undefined") {
-              // 点击第一个目录
-              top = 100
-            }
-            $root.animate({
-              scrollTop: $($.attr(this.querySelector("a"), 'href')).offset().top - top
-            }, 400)
-            return false
-          });
+      addUpdateTime(){
+        // DOM更新之后获取子元素
+        // 在文章最前面添加更新时间
+        let main = document.getElementById('vditor')
+        let p = document.createElement("p")
+        p.className = "note-update-date"
+        p.innerText = `本文最后更新于：${this.file.updateDate}`
+        main.insertBefore(p , main.childNodes[0])
+      },
+      titleOneItem(index, jqel, tagName){
+          const h = tagName.substring(1,2)
+        if(index === 0){
+          return '<li first class="pl h-'+h+'"><a href="#'+jqel.attr('id')+'">'+jqel.text()+'</a></li>'
         }
+        return '<li class="pl h-'+h+'"><a href="#'+jqel.attr('id')+'">'+jqel.text()+'</a></li>'
+      },
+      // 渲染目录
+      renderContents(){
+        // 添加更新时间
+        this.addUpdateTime()
+        let contents = []
+        let headers = $('.article-body').find(":header")
+        if(!headers || headers.length < 1){
+          return
+        }
+        const that = this
+        headers.each(function (index) {
+          contents.push(that.titleOneItem(index, $(this), $(this).prop("tagName")))
+          that.titleList.push(index)
+        })
+        $('.j-titleList').prepend(contents)
+        // 获取id数组
+        for (let i = 0; i < contents.length; i++) {
+          contents[i] = contents[i].replace(/.*?#(.*)".*/g, '$1')
+        }
+        this.renderContentsAfter(contents)
+      },
+      // 渲染目录后的操作
+      renderContentsAfter(contents){
+        const that = this
+        let beforeScrollTop = document.documentElement.scrollTop;
+        let fn = fn || function (direction) {
+          that.direction = direction
+          // 判断是上滑显示,下滑隐藏
+          const top = $('#top')
+          const toogleNav = $('#toggle-nav')
+
+          const body = document.getElementById("body")
+
+          if(direction === 'down'){
+            top.removeClass('animateIn')
+            top.addClass('animateOut')
+            toogleNav.removeClass('animateRight')
+            toogleNav.addClass('animateLeft')
+            if(body.style.transform.length > 0) {
+              document.getElementById("sidebar-nav").style.transform = ''
+              body.style.transform = ''
+              document.getElementById("toggle-nav").style.transform = ''
+            }
+          }
+          if(direction === 'up'){
+            top.removeClass('animateOut')
+            top.addClass('animateIn')
+            toogleNav.removeClass('animateLeft')
+            toogleNav.addClass('animateRight')
+          }
+        };
+        console.log(contents[1])
+
+        let scrollAfterTimer = null
+        $(window).on("scroll",function (event) {
+          for (let i = 0; i < contents.length; i++) {
+            if ($(window).scrollTop() > $('#' + contents[i]).offset().top - 100 || $(this).scrollTop() + $(this).height() == $(document).height()) {
+              $('.j-titleList').find('li').eq(i).addClass('active').siblings('li').removeClass('active');
+              $('.j-bj').css('top', i * 34)
+            }
+          }
+          if(scrollAfterTimer != null){
+            clearTimeout(scrollAfterTimer)
+          }
+          scrollAfterTimer = setTimeout(function (){
+            that.$router.replace({path: that.$route.path, query: that.$route.query, hash: $('.j-titleList').find('li.active').find('a').attr('href')})
+          }, 50)
+
+          // 判断是上滑还是下滑
+          var afterScrollTop = document.documentElement.scrollTop
+          let delta = afterScrollTop - beforeScrollTop
+          beforeScrollTop = afterScrollTop
+          var scrollTop = $(this).scrollTop()
+          var scrollHeight = $(document).height()
+          var windowHeight = $(this).height()
+          var progress = ((afterScrollTop + document.body.clientHeight)/scrollHeight) * 100
+          // 改变top bar 进度条
+          document.querySelector(".scrollbar").style.width = progress +'%'
+
+          if (scrollTop + windowHeight > scrollHeight - 10) {  //滚动到底部执行事件
+            fn('bottom')
+            return
+          }
+          if (afterScrollTop < 10 || afterScrollTop > $(document.body).height - 10) {
+            fn('up')
+          } else {
+            if (Math.abs(delta) < 10) {
+              return false
+            }
+            fn(delta > 0 ? "down" : "up")
+          }
+        })
+        let $root = $('html, body')
+        $('.j-titleList li').on("click", function () {
+          let top = 75
+          if (typeof($(this).attr("first"))!=="undefined") {
+            // 点击第一个目录
+            top = 168
+          }
+          let herf = $.attr(this.querySelector("a"), 'href')
+          $root.animate({
+            scrollTop: $(herf).offset().top - top
+          }, 400)
+          return false
+        })
+        // 滚动到响应的锚点
+        setTimeout(function (){
+          if(that.$route.hash){
+            $root.animate({
+              scrollTop: $(decodeURIComponent(that.$route.hash)).offset().top - 75
+            }, 400)
+          }
+        },100)
       },
     },
     destroyed() {
diff --git a/src/views/public/articles/index.vue b/src/views/public/articles/index.vue
index 180eae9..efbe9c7 100644
--- a/src/views/public/articles/index.vue
+++ b/src/views/public/articles/index.vue
@@ -98,7 +98,7 @@ import { getSetting } from '@/api/user'
       return {
         imageUrl: process.env.VUE_APP_BASE_API + '/public/s/view/thumbnail?id=',
         isLoading: true,
-        pageTitle: "文章列表",
+        pageTitle: '',
         articleList: [],
         backImageSrc: "~@/assets/img/widget-img1.jpg",
         userSetting: {},
@@ -113,23 +113,7 @@ import { getSetting } from '@/api/user'
     mounted() {
       this.getSetting()
       this.getMarkDown()
-      console.log('mounted')
     },
-    // beforeRouteEnter (to, from, next) {
-    //   console.log('beforeRouteEnter')
-    //   next(vm => {
-    //     console.log(vm.scrollTop)
-    //     document.body.scrollTop = vm.scrollTop
-    //   })
-    // },
-    // // beforeRouteUpdate (to, from, next) {
-    // //   console.log('beforeRouteUpdate')
-    // //   next()
-    // // },
-    // beforeRouteLeave(to, from, next) {
-    //   to.meta.keepAlive = false;
-    //   next();
-    // },
     activated() {
       console.log('activated',this.scrollTop)
     },
@@ -141,6 +125,7 @@ import { getSetting } from '@/api/user'
       getSetting() {
         getSetting({userId: this.$store.state.user.userId}).then((res) => {
           this.userSetting = res.data;
+          this.pageTitle = this.userSetting.siteName
           this.$nextTick(()=>{
             this.dynamicTyping()
           })
diff --git a/src/views/recently/index_m.vue b/src/views/recently/index_m.vue
deleted file mode 100644
index 8558a62..0000000
--- a/src/views/recently/index_m.vue
+++ /dev/null
@@ -1,661 +0,0 @@
-<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/setting/articles/articleManager.vue b/src/views/setting/articles/articleManager.vue
index 6d50ed3..9f6ad45 100644
--- a/src/views/setting/articles/articleManager.vue
+++ b/src/views/setting/articles/articleManager.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="container" v-wechat-title="title">
-    <el-dialog title="新增文章" :fullscreen="true" :visible.sync="newArticleDialogVisible">
+    <el-dialog
+      title="新增文章"
+      :fullscreen="true"
+      :visible.sync="newArticleDialogVisible"
+      @close="closeDialog"
+    >
       <markdown-editor></markdown-editor>
     </el-dialog>
     <el-card class="box-card">
@@ -31,14 +36,17 @@ export default {
   },
   computed: {},
   mounted() {
-    if(this.$route.query.markdown){
+    if(this.$route.query.operation){
       this.newArticleDialogVisible = true
     }
   },
   methods: {
     newArticle() {
       this.newArticleDialogVisible = true
-      this.$router.push({path:'/setting/website/manager-articles', query: {markdown: 'new'}})
+      this.$router.push({path: this.$route.path, query: {operation: 'new'}})
+    },
+    closeDialog(){
+      this.$router.replace({path: this.$route.path})
     }
   }
 }