backend

package.json

@@ -9,6 +9,9 @@
   },
   "dependencies": {
     "element-ui": "^2.4.6",
+    "highlight.js": "^9.12.0",
+    "marked": "^0.5.0",
+    "simplemde": "^1.11.2",
     "vue": "^2.5.17",
     "vue-router": "^3.0.1"
   },

src/assets/css/atom-one-dark.css

@@ -0,0 +1,92 @@
+/*
+Atom One Dark by Daniel Gamage
+Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
+base:    #282c34
+mono-1:  #abb2bf
+mono-2:  #818896
+mono-3:  #5c6370
+hue-1:   #56b6c2
+hue-2:   #61aeee
+hue-3:   #c678dd
+hue-4:   #98c379
+hue-5:   #e06c75
+hue-5-2: #be5046
+hue-6:   #d19a66
+hue-6-2: #e6c07b
+*/
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  color: #abb2bf;
+  background: #282c34;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #5c6370;
+  font-style: italic;
+}
+
+.hljs-doctag,
+.hljs-keyword,
+.hljs-formula {
+  color: #c678dd;
+}
+
+.hljs-section,
+.hljs-name,
+.hljs-selector-tag,
+.hljs-deletion,
+.hljs-subst {
+  color: #e06c75;
+}
+
+.hljs-literal {
+  color: #56b6c2;
+}
+
+.hljs-string,
+.hljs-regexp,
+.hljs-addition,
+.hljs-attribute,
+.hljs-meta-string {
+  color: #98c379;
+}
+
+.hljs-built_in,
+.hljs-class .hljs-title {
+  color: #e6c07b;
+}
+
+.hljs-attr,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-type,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-number {
+  color: #d19a66;
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-link,
+.hljs-meta,
+.hljs-selector-id,
+.hljs-title {
+  color: #61aeee;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}

src/components/Slider/Menu.vue

@@ -1,47 +1,77 @@
 <template>
-  <li>
-    <span >
-      <i v-if="!isFolder" class="icon file-text">●</i>
-      {{ model.menuName }}
-      <i v-if="isFolder" class="icon" :class="[open ? 'folder-open': 'folder']"></i>
-    </span>
-    <ul v-show="open" v-if="isFolder">
-      <Menu v-for="item in model.childMenus" :model="item" :key="item.menuId"></Menu>
-    </ul>
-  </li>
+  <div>
+    <li class="menu">
+      <router-link tag='div' :to="model.link" exact-active-class='menu-active' exact>
+        <span @click="toggle(model.menuName)" :class="{'menu-son': model.parent === 1}"> 
+          <img class="menu-icon" :src="model.icon" alt="">
+          {{ model.menuName }}
+        </span>
+      </router-link>
+    </li>
+      <transition name='slide-fade' >
+        <ul v-show="open" v-if="isFolder">
+          <Menu v-for="item in model.childMenus" :model="item" :key="item.menuName" :icon="item.icon"></Menu>
+        </ul>
+      </transition>
+  </div>
 </template>
 
 <script>
 export default {
   name: "Menu",
   data() {
     return {
-      open: false,
-    }
+      open: false
+    };
   },
-  props: ['model'],
+  props: ["model", "icon"],
   computed: {
     isFolder() {
-      return this.model.childMenus && this.model.childMenus.length
+      return this.model.childMenus && this.model.childMenus.length;
     }
   },
   methods: {
-    toggle(msg,menuUrl,menuPath) {
-      if(this.isFolder) {
-        this.open = !this.open
+    toggle() {
+      if (this.isFolder) {
+        this.open = !this.open;
       }
     }
   }
-}
+};
 </script>
 
 <style lang='scss' scoped>
 .menu {
   width: 100%;
   height: 46px;
   line-height: 46px;
-  background-color: rgb(67, 74, 80);
-  padding-left: 20px;
+  background-color: rgb(84, 92, 100);
   color: #fff;
+  list-style: none;
+  cursor: pointer;
+  &:hover {
+    background-color: rgb(67, 74, 80);
+  }
+  .menu-active {
+    background-color: rgb(67, 74, 80);
+  }
+  .menu-son {
+    margin-left: 20px;
+  }
+  .menu-icon {
+    width: 16px;
+    height: 16px;
+    margin-left: 10px;
+  }
+}
+.slide-fade-enter-active {
+  transition: all .3s ease;
+}
+.slide-fade-leave-active {
+  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+}
+.slide-fade-enter, .slide-fade-leave-to {
+  opacity: 0;
+  transform: translateX(-10px);
 }
 </style>

src/components/Slider/Slider.vue

@@ -2,55 +2,21 @@
   <div class="slider">
     <div class="silder-header"></div>
     <div class="slider-list">
-      <ul v-for="menuItem in theModel">
-        <Menu :model="menuItem"></Menu>
+      <ul class="slider-item" v-for="(menuItem, index) in theModel" :key="index">
+        <Menu :model="menuItem" :icon="menuItem.icon" :key="menuItem.id"></Menu>
       </ul>
     </div>
   </div>
 </template>
 
 <script>
 import Menu from "./Menu.vue";
+import menulist from './menulist.js'
 export default {
   name: "Slider",
   data() {
     return {
-      theModel: [
-        {
-          id: "1",
-          menuName: "导航1",
-          menuCode: "10",
-          childMenus: [
-            {
-              menuName: "用户管理",
-              menuCode: "11",
-              childMenus: [
-                {
-                  menuName: "11111",
-                  menuCode: "12",
-                  childMenus: []
-                }
-              ]
-            },
-            {
-              menuName: "角色管理",
-              menuCode: "12",
-              childMenus: []
-            },
-            {
-              menuName: "菜单管理",
-              menuCode: "13",
-              childMenus: []
-            }
-          ]
-        },
-        {
-          id: "1",
-          menuName: "导航2",
-          menuCode: "10",
-          childMenus: []
-        }
-      ]
+      theModel: menulist
     };
   },
   components: {
@@ -61,20 +27,19 @@ export default {
 
 <style scoped lang='scss'>
 .slider {
-  width: 256px;
+  width: 100%;
   height: 100%;
-  background-color: rgb(84, 92, 100); //67,74,80
-  position: fixed;
-  left: 0;
-  top: 0;
-  bottom: 0;
   .silder-header {
     width: 100%;
     height: 64px;
     background-color: #002140;
   }
   .slider-list {
     padding: 10px 0;
+    height: 100%;
+    .slider-item {
+      display: block;
+    }
   }
 }
 </style>

src/components/Slider/menulist.js

@@ -0,0 +1,35 @@
+export default [
+  {
+    id: "1",
+    menuName: "写一篇文章",
+    parent: -1,
+    icon: require('./../../assets/icon1.png'),
+    link: "/home/markdown",
+  },
+  {
+    id: "2",
+    menuName: "我的文章库",
+    parent: -1,
+    icon: require('./../../assets/icon2.png'),
+    link: "/home/article",
+    // childMenus: [{
+    //   id: '2-1',
+    //   menuName: '前端小栈',
+    //   parent: 1,
+    //   icon: require('./../../assets/icon2-1.png'),
+    //   link: "/home/article",
+    // }, {
+    //   id: '2-2',
+    //   menuName: '其他东东',
+    //   parent: 1,
+    //   icon: require('./../../assets/icon2-2.png'),
+    //   link: "/home/article",
+    // }]
+  },{
+    id: '3',
+    menuName: '我的草稿箱',
+    parent: -1,
+    icon: require('./../../assets/icon2-2.png'),
+    link: "/home/trash"
+  }
+]

src/page/Article/Article.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="article"></div>
+</template>
+
+<script>
+export default {
+  name: 'Article'
+}
+</script>
+
+<style>
+
+</style>

src/page/Home/Home.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="home">
-    <Slider></Slider>
+    <div class="home-slider">
+      <Slider></Slider>
+    </div>
+    <div class="home-main">
+      <router-view></router-view>
+    </div>
   </div>
 </template>
 
@@ -14,9 +19,24 @@
   }
 </script>
 
-<style scoped>
+<style scoped lang='scss'>
   .home {
     width: 100%;
     height: 100%;
+    .home-slider {
+      width: 256px;
+      height: 100%;
+      background-color: rgb(84, 92, 100); //67,74,80
+      position: fixed;
+      left: 0;
+      top: 0;
+      bottom: 0;
+    }
+    .home-main {
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      padding-left: 256px;
+    }
   }
 </style>