diff --git a/package.json b/package.json
index 07ec196..bdb659d 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
     "v-contextmenu": "^2.9.0",
     "v-viewer": "^1.5.1",
     "vant": "2.5.0",
+    "vditor": "^3.6.1",
     "viewerjs": "^1.5.0",
     "vonic": "^1.1.3",
     "vue": "2.6.10",
diff --git a/src/components/FileTree/DirTree.vue b/src/components/FileTree/DirTree.vue
index d84e92e..8a3dea6 100644
--- a/src/components/FileTree/DirTree.vue
+++ b/src/components/FileTree/DirTree.vue
@@ -4,6 +4,7 @@
     <el-dialog
       :title="selectTreeNode.showName"
       :visible.sync="visible"
+      :append-to-body="appendToBody"
       @close="clearTreeNode"
     >
       <el-tree
@@ -38,6 +39,10 @@ import api from "@/api/file-api";
 export default {
   name: "DirTree",
   props: {
+    appendToBody: {
+      type: Boolean,
+      default: false
+    },
     currentDir: {
       type: String,
       default: '/'
diff --git a/src/components/Icon/Icon.vue b/src/components/Icon/Icon.vue
index a0e2747..86dac45 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_acokdskxqbj.js'
+  scriptUrl: '//at.alicdn.com/t/font_2024484_3royfgdezl.js'
 })
 
 export default {
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index dee7162..8a5c6b4 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -5,47 +5,22 @@
 
     <div class="right-content">
 
-<!--      <div>-->
-<!--        <el-menu class="el-menu-demo" mode="horizontal">-->
-<!--          <el-menu-item index="1" href="/setting/manager-categories">-->
-<!--            <router-link to="/setting/manager-cloud">-->
-<!--              网盘管理-->
-<!--            </router-link>-->
-<!--          </el-menu-item>-->
-<!--          <el-submenu index="2">-->
-<!--            <template slot="title">管理</template>-->
-<!--            <el-menu-item index="2-0">-->
-<!--              <router-link to="/setting/manager-blog">-->
-<!--                <svg-icon icon-class="blogger"></svg-icon>-->
-<!--                博客管理-->
-<!--              </router-link>-->
-<!--            </el-menu-item>-->
-<!--            <el-menu-item index="2-1">-->
-<!--              <router-link to="/setting/manager-categories">-->
-<!--                <svg-icon icon-class="leimupinleifenleileibie"></svg-icon>-->
-<!--                分类管理-->
-<!--              </router-link>-->
-<!--            </el-menu-item>-->
-<!--            <el-menu-item index="2-2">-->
-<!--              <svg-icon icon-class="biaoqian"></svg-icon>-->
-<!--              标签管理-->
-<!--            </el-menu-item>-->
-<!--          </el-submenu>-->
-<!--        </el-menu>-->
-<!--      </div>-->
-
       <div class="right-username">{{username}}</div>
       <div class="right-menu">
         <el-dropdown class="avatar-container" trigger="click">
           <div class="avatar-wrapper">
-            <!--<img :src="avatar" class="user-avatar">-->
             <el-avatar :src="imageUrl+avatar" icon="el-icon-user-solid"></el-avatar>
             <i class="el-icon-caret-bottom" />
           </div>
           <el-dropdown-menu slot="dropdown" class="user-dropdown">
             <router-link to="/setting/user">
               <el-dropdown-item>
-                <i class="el-icon-setting" />设置
+                <svg-icon icon-class="shezhi"></svg-icon>基本设置
+              </el-dropdown-item>
+            </router-link>
+            <router-link to="/setting/website/manager-blog">
+              <el-dropdown-item>
+                <svg-icon icon-class="wangzhan"></svg-icon>网站管理
               </el-dropdown-item>
             </router-link>
             <!--<router-link to="/">-->
@@ -57,7 +32,7 @@
             <!--<el-dropdown-item>Github</el-dropdown-item>-->
             <!--</a>-->
             <el-dropdown-item divided @click.native="logout">
-              <span style="display:block;">退出登录</span>
+              <svg-icon icon-class="tuichudenglu"></svg-icon>退出登录
             </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
@@ -151,7 +126,6 @@ export default {
   .right-menu {
     float: right;
     height: 100%;
-    line-height: 50px;
 
     &:focus {
       outline: none;
@@ -177,7 +151,7 @@ export default {
 
     .avatar-container {
       margin-right: 30px;
-
+      cursor: pointer;
       .avatar-wrapper {
         margin-top: 5px;
         position: relative;
@@ -190,7 +164,6 @@ export default {
         }
 
         .el-icon-caret-bottom {
-          cursor: pointer;
           position: absolute;
           right: -20px;
           top: 25px;
@@ -198,8 +171,14 @@ export default {
         }
       }
     }
+    .avatar-container:hover {
+      background-color: #00000006;
+    }
   }
 }
+/deep/ .user-dropdown {
+  top: 50px;
+}
 /deep/ .el-menu--horizontal {
   padding: 0 15px;
   .el-menu-item {
@@ -211,4 +190,7 @@ export default {
     line-height: 50px;
   }
 }
+.el-dropdown-menu__item svg {
+  margin-right: 5px;
+}
 </style>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
index a418c3d..810857a 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -6,6 +6,9 @@
           <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
         </el-menu-item>
       </app-link>
+      <el-menu-item v-if="onlyOneChild.path === '/setting/manager-users'">
+        <item title="sdf"/>
+      </el-menu-item>
     </template>
 
     <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
diff --git a/src/router/index.js b/src/router/index.js
index b0ae82a..0bc67ef 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -151,21 +151,6 @@ export const constantRoutes = [
       }
     ]
   },
-
-  // {
-  //   path: '/setting/user',
-  //   component: Layout,
-  //   children: [
-  //     {
-  //       path: '',
-  //       name: 'setting-user',
-  //       component: () => import('@/views/setting/user/index'),
-  //       meta: { title: '设置' },
-  //       hidden: true
-  //     }
-  //   ]
-  // },
-
   // {
   //   path: '/demo',
   //   component: Layout,
@@ -182,6 +167,7 @@ export const constantRoutes = [
   {
     path: '/markdown',
     component: Layout,
+    hidden: true,
     children: [
       {
         path: 'editor',
@@ -201,7 +187,7 @@ export const constantRoutes = [
         name: 'article',
         component: () => import('@/views/public/article/index'),
         hidden: true,
-        meta: { keepAlive: true }
+        meta: { keepAlive: false }
       }
     ]
   },
@@ -211,7 +197,7 @@ export const constantRoutes = [
     children: [
       {
         path: `${document.location.protocol}//${window.location.host}/articles`,
-        meta: { title: '关联博客', icon: 'link', keepAlive: true }
+        meta: { title: '关联博客', icon: 'link', keepAlive: false }
       }
     ]
   },
@@ -222,35 +208,61 @@ export const constantRoutes = [
       {
         path: '',
         name: 'setting-user',
-        component: () => import('@/views/setting/user/index'),
+        component: () => import('@/views/setting/user/tabs/cusomerInfo'),
         meta: { title: '个人信息' , icon: 'UserSettings'}
       }
     ]
   },
   {
-    path: '/setting/manager-categories',
+    path: '/setting/manager-users',
     component: Layout,
     children: [
       {
         path: '',
-        name: 'manager-categories',
-        component: () => import('@/views/setting/articles/categoryManager'),
-        meta: { title: '分类管理', icon: 'leimupinleifenleileibie' }
+        name: 'manager-users',
+        component: () => import('@/views/setting/user/tabs/cusomerManager'),
+        meta: { title: '用户管理' , icon: 'huaban'}
       }
     ]
   },
   {
-    path: '/setting/manager-blog',
+    path: '/setting/website',
     component: Layout,
+    name: 'website',
+    meta: { title: '网站管理', icon: 'wangzhan'},
     children: [
       {
-        path: '',
+        path: 'manager-articles',
+        name: 'manager-articles',
+        component: () => import('@/views/setting/articles/articleManager'),
+        meta: { title: '文章管理' , icon: 'guanlizhuanjiawenzhang'}
+      },
+      {
+        path: 'manager-blog',
         name: 'manager-blog',
         component: () => import('@/views/setting/articles/blogManager'),
-        meta: { title: '博客管理' , icon: 'blogger'}
+        meta: { title: '外观设置' , icon: 'pifu'}
+      },
+      {
+        path: 'manager-categories',
+        name: 'manager-categories',
+        component: () => import('@/views/setting/articles/categoryManager'),
+        meta: { title: '分类管理', icon: 'fenlei' }
       }
     ]
   },
+  // {
+  //   path: '/setting/manager-categories',
+  //   component: Layout,
+  //   children: [
+  //     {
+  //       path: '',
+  //       name: 'manager-categories',
+  //       component: () => import('@/views/setting/articles/categoryManager'),
+  //       meta: { title: '分类管理', icon: 'leimupinleifenleileibie' }
+  //     }
+  //   ]
+  // },
   {
     path: '/setting/manager-cloud',
     component: Layout,
@@ -266,12 +278,13 @@ export const constantRoutes = [
   {
     path: '/articles',
     component: Layout,
+    hidden: true,
     children: [
       {
         path: '',
         name: 'articles',
         component: () => import('@/views/public/articles/index'),
-        meta: { title: '文档列表', icon: 'md-list', keepAlive: true }
+        meta: { title: '文档列表', icon: 'md-list', keepAlive: false }
       }
     ]
   },
diff --git a/src/styles/markdown.scss b/src/styles/markdown.scss
index 369b88e..e4d38e0 100644
--- a/src/styles/markdown.scss
+++ b/src/styles/markdown.scss
@@ -212,16 +212,20 @@
   }
 }
 .animateIn {
-  transform: translateY(0px);
+  //-webkit-transform: translateY(0px);
+  //transform: translateY(0px);
 }
 .animateOut {
+  -webkit-transform: translateY(-100%);
   transform: translateY(-100%);
 }
 
 .animateLeft {
+  -webkit-transform: translateX(-10rem);
   transform: translateX(-10rem);
 }
 .animateRight {
+  -webkit-transform: translateX(0rem);
   transform: translateX(0rem);
 }
 
@@ -567,6 +571,13 @@
   border-radius: 8px;
 }
 
+.article-body {
+  padding: 20px 35px;
+  border-radius: 0.5rem;
+  background-color: #ffffff;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
+}
+
 /deep/ .markdown-body {
   border-radius: 0.5rem;
   blockquote {
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index d411af9..780064d 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -75,25 +75,24 @@
         margin: 2px 5px 2px 5px;
       }
     }
-
     .el-menu-item.is-active {
       color: #409EFF;
-      background-color: #d9d9d9 !important;
+      background-color: $menuHover !important;
       border-radius: 4px;
-      margin: 2px 5px 2px 5px;
   }
 
     .is-active>.el-submenu__title {
-      color: $subMenuActiveText !important;
+      //color: $subMenuActiveText !important;
     }
 
     & .nest-menu .el-submenu>.el-submenu__title,
     & .el-submenu .el-menu-item {
-      min-width: $sideBarWidth !important;
-      background-color: $subMenuBg !important;
-
+      margin: 2px 5px;
+      height: 42px;
+      line-height: 42px;
       &:hover {
         background-color: $subMenuHover !important;
+        border-radius: 4px;
       }
     }
   }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 7f7c3e6..71603b7 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -6,8 +6,8 @@ $subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
 $menuBg:#f5f5f5;
 $menuHover:#d9d9d9;
 
-$subMenuBg:#1f2d3d;
-$subMenuHover:#001528;
+$subMenuBg:#f5f5f5;
+$subMenuHover:#d9d9d9;
 
 $sideBarWidth: 210px;
 
diff --git a/src/views/markdown/index.vue b/src/views/markdown/index.vue
index f30dde3..c320cf7 100644
--- a/src/views/markdown/index.vue
+++ b/src/views/markdown/index.vue
@@ -1,37 +1,40 @@
 <template>
   <div v-wechat-title="'编辑'+filename">
-    <dir-tree ref="dirTree">
+    <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"/>
-        <el-input v-if="!editStatus" class="articles-storage" placeholder="存储位置" v-model="storageLocation" :readonly="true" @click="selectDir">
-          <el-button slot="prepend" @click="selectDir">选择位置</el-button>
+        <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">更多设置</el-button>
-        <el-button v-if="!editStatus" class="release-button" type="primary" @click="add" :loading="adding">发布文章</el-button>
-        <el-button v-if="editStatus" class="release-button" type="primary" @click="update" :loading="updating">更新文章</el-button>
+        <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>
-      <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"
-      />
+      <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>
 
     <el-drawer
       :visible.sync="moreSetting"
+      :append-to-body='true'
       :with-header="false">
       <div class="more-setting">
         <h2>更多设置</h2>
@@ -52,9 +55,58 @@
   import uploadApi from '@/api/file-api'
   import DirTree from"@/components/FileTree/DirTree"
   import fileConfig from '@/utils/file-config'
+
+  import Vditor from 'vditor'
+  import "vditor/src/assets/scss/index.scss"
+
+  let toolbar = [
+    'emoji',
+    'headings',
+    'bold',
+    'italic',
+    'strike',
+    'link',
+    '|',
+    'list',
+    'ordered-list',
+    'check',
+    'outdent',
+    'indent',
+    '|',
+    'quote',
+    'line',
+    'code',
+    'inline-code',
+    'insert-before',
+    'insert-after',
+    '|',
+    'upload',
+    'record',
+    'table',
+    '|',
+    'undo',
+    'redo',
+    '|',
+    'edit-mode',
+    'content-theme',
+    'code-theme',
+    'outline',
+    'preview',
+    {
+      name: 'more',
+      toolbar: [
+        'fullscreen',
+        'export',
+        'both',
+        'info',
+        'help',
+      ],
+    }]
+
   export default {
+    name: 'MarkdownEditor',
     components: {
-      DirTree
+      DirTree, Vditor
     },
     data() {
       return {
@@ -62,7 +114,7 @@
         content:"", // 输入的markdown
         html:'',    // 及时转的html
         filename: '新建文档',
-        clientHeight: document.documentElement.clientHeight - 135,
+        clientHeight: document.documentElement.clientHeight - 210,
         updating: false,
         adding: false,
         isFullScreen: false,
@@ -70,9 +122,30 @@
         selectLocationVisible: false,
         moreSetting: false,
         markdownCover: null,
+        contentEditor: '',
       }
     },
     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({
@@ -134,7 +207,7 @@
         if(this.isFullScreen){
           this.clientHeight = document.documentElement.clientHeight
         }else{
-          this.clientHeight = document.documentElement.clientHeight - 135
+          this.clientHeight = document.documentElement.clientHeight - 210
         }
       },
       save(){
@@ -206,13 +279,13 @@
 </script>
 <style lang="scss" scoped>
   /deep/ .el-main {
-    padding: 5px 20px 20px 20px;
+    padding: 30px 20px 20px 20px;
     .v-note-wrapper {
       z-index: 200;
     }
   }
   /deep/ .el-header {
-    padding: 7.5px 20px 10px 20px;
+    height: 43px!important;
   }
   /deep/ .el-input-group {
     width: unset;
diff --git a/src/views/public/article/index.vue b/src/views/public/article/index.vue
index 55f7515..b2924ba 100644
--- a/src/views/public/article/index.vue
+++ b/src/views/public/article/index.vue
@@ -28,16 +28,17 @@
       </div>
       <div class="body-wrapper">
         <el-main id="main_body" :content="titleList.length > 0?'show':'hide'" class="l_main article_l_main">
-          <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>
+<!--          <mavon-editor-->
+<!--            ref="md"-->
+<!--            v-if="!showList"-->
+<!--            v-model="content"-->
+<!--            :subfield="false"-->
+<!--            :boxShadow="true"-->
+<!--            :toolbarsFlag="false"-->
+<!--            codeStyle="atom-one-dark"-->
+<!--            defaultOpen="preview"-->
+<!--          />-->
         </el-main>
         <div v-show="titleList.length > 0" class="right-bj">
           <a-affix>
@@ -65,12 +66,14 @@
 import AlLoading from "@/components/loading/AlLoading";
 import AlBackTop from "@/components/backtop/AlBackTop";
 import markdownApi from '@/api/markdown-api'
-import {addCodeBtn} from '@/assets/js/mavon-line'
 import $ from 'jquery'
 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"
+
 export default {
     components: {SidebarNav, ArticleTop, AlBackTop, AlLoading },
     data() {
@@ -90,6 +93,7 @@ export default {
         maxMenuHeight: document.documentElement.clientHeight - 155,
         top: 70,
         isEditor : false,
+        contentEditor: '',
       }
     },
     mounted() {
@@ -151,13 +155,26 @@ 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.querySelector('.v-show-content.scroll-style.scroll-style-border-radius')
-            let p = document.createElement("p")
-            p.className = "note-update-date"
-            p.innerText = `本文最后更新于：${this.file.updateDate}`
-            main.insertBefore(p , main.childNodes[0])
+            // // 在文章最前面添加更新时间
+            // 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.dynamicTyping()
@@ -166,124 +183,126 @@ export default {
             if(hTag){
               this.pageTitle = hTag.innerText
             }
+          })
+          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)
+            }
+          })
 
-            let a = $('.el-main').html().match(/<h1.*?<\/h1>|<h2.*?<\/h2>|<h3.*?<\/h3>|<h4.*?<\/h4>|<h5.*?<\/h5>|<h6.*?<\/h6>/g);
-            if(a && a.length >0 ){
-              a = a.splice(a.length/2,a.length)
-              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)
+          // 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 = ''
               }
-              $('.j-titleList').prepend(a)
+            }
+            if(direction === 'up'){
+              top.removeClass('animateOut')
+              top.addClass('animateIn')
+              toogleNav.removeClass('animateLeft')
+              toogleNav.addClass('animateRight')
+            }
+          };
 
-              //获取id数组
-              for (let i = 0; i < a.length; i++) {
-                a[i] = a[i].replace(/.*?#(.*)".*/g, '$1')
+          $(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)
               }
-
-              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
-              });
             }
 
-            const _this = this
-            setTimeout(function () {
-              // 添加行数
-              const clientWidth = document.documentElement.clientWidth;
-              if(clientWidth > 425){
-                addCodeBtn();
+            // 判断是上滑还是下滑
+            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;
               }
-              _this.isLoading = false
-            },150)
+              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
+          });
+        }
+      },
     },
     destroyed() {
       $(window).unbind("scroll")
diff --git a/src/views/setting/articles/articleManager.vue b/src/views/setting/articles/articleManager.vue
new file mode 100644
index 0000000..6d50ed3
--- /dev/null
+++ b/src/views/setting/articles/articleManager.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="container" v-wechat-title="title">
+    <el-dialog title="新增文章" :fullscreen="true" :visible.sync="newArticleDialogVisible">
+      <markdown-editor></markdown-editor>
+    </el-dialog>
+    <el-card class="box-card">
+      <div class="box-card-header">
+        <div class="clearfix card-header-back">
+          <span>文章管理</span>
+          <el-button class="card-button" size="mini" type="primary" @click="newArticle">新建文章</el-button>
+        </div>
+      </div>
+    </el-card>
+
+  </div>
+</template>
+
+<script>
+
+import MarkdownEditor from '@/views/markdown/index'
+export default {
+  name: 'articleManager',
+  components: {
+    MarkdownEditor
+  },
+  data() {
+    return {
+      title: "文章管理",
+      newArticleDialogVisible: false,
+    }
+  },
+  computed: {},
+  mounted() {
+    if(this.$route.query.markdown){
+      this.newArticleDialogVisible = true
+    }
+  },
+  methods: {
+    newArticle() {
+      this.newArticleDialogVisible = true
+      this.$router.push({path:'/setting/website/manager-articles', query: {markdown: 'new'}})
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import "src/styles/setting";
+</style>
diff --git a/src/views/setting/articles/categoryManager.vue b/src/views/setting/articles/categoryManager.vue
index 952d766..d31e489 100644
--- a/src/views/setting/articles/categoryManager.vue
+++ b/src/views/setting/articles/categoryManager.vue
@@ -93,13 +93,9 @@
 
 <script>
 import categoryApi from "@/api/category";
-import CropperDialog from '@/components/Cropper/dialog'
 
 export default {
   name: 'categoryManager',
-  components: {
-    CropperDialog
-  },
   data() {
     return {
       title: "分类管理",
diff --git a/src/views/setting/cloudManager.vue b/src/views/setting/cloudManager.vue
index 7cf1841..3d38a05 100644
--- a/src/views/setting/cloudManager.vue
+++ b/src/views/setting/cloudManager.vue
@@ -1,8 +1,12 @@
 <template>
   <div class="app-container" v-wechat-title="title">
     <el-card class="box-card">
-      同步网盘
-      <el-button type="primary" :loading="syncLoading" @click="sync"><i class="el-icon-upload el-icon--right"></i></el-button>
+      <div class="box-card-header">
+        <div class="clearfix card-header-back">
+          <span>同步网盘</span>
+          <el-button class="card-button" size="mini" :loading="syncLoading" type="primary" @click="sync()"><i class="el-icon-upload el-icon--right"></i></el-button>
+        </div>
+      </div>
     </el-card>
   </div>
 </template>
@@ -32,6 +36,6 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+@import "src/styles/setting";
 </style>
diff --git a/src/views/setting/user/tabs/cusomerManager.vue b/src/views/setting/user/tabs/cusomerManager.vue
index 34f4b42..2667a13 100644
--- a/src/views/setting/user/tabs/cusomerManager.vue
+++ b/src/views/setting/user/tabs/cusomerManager.vue
@@ -24,9 +24,13 @@
       </el-form>
     </el-dialog>
     <el-card class="box-card">
-      <div slot="header" class="clearfix">
-        <span>用户列表</span>
-        <el-button class="card-button" type="text" @click="add">添加用户</el-button>
+      <div slot="header">
+        <div class="box-card-header">
+          <div class="clearfix card-header-back">
+            <span>用户列表</span>
+            <el-button class="card-button" size="mini" type="primary" @click="add()">添加用户</el-button>
+          </div>
+        </div>
       </div>
       <el-table
         :data="userList"
@@ -254,14 +258,6 @@
   }
 </script>
 
-<!--<style src="@styles/cropper.css"></style>-->
 <style lang="scss" scoped>
-  @import "src/styles/setting";
-  .card-button {
-    float: right;
-    padding: 3px 0;
-  }
-  .box-card {
-    max-width: 800px;
-  }
+@import "src/styles/setting";
 </style>