修改左侧菜单栏的收缩动画

admin/package.json

@@ -10,9 +10,11 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.10",
+    "@kangc/v-md-editor": "^2.3.15",
     "axios": "^1.1.3",
     "element-plus": "^2.2.19",
     "pinia": "^2.0.23",
+    "prismjs": "^1.29.0",
     "screenfull": "^6.0.2",
     "vue": "^3.2.41",
     "vue-router": "^4.1.6"

admin/src/assets/scss/element.scss

@@ -1,9 +1,13 @@
 .el-input__wrapper {
-  background-color: #34495e !important;
+  // background-color: #34495e !important;
   padding: 5px 16px;
-  box-shadow: none;
+  box-shadow: 1 0 1px #c0c4cc;
   .el-input__inner {
-    color: #eee;
+    color: #000;
     padding-left: 5px;
   }
 }
+
+.el-header {
+  --el-header-padding: none;
+}

admin/src/assets/scss/index.scss

@@ -8,5 +8,5 @@
 
 #app {
   height: 100vh;
-  font-family: 'Times New Roman', '黑体';
+  // font-family: 'Times New Roman', '仿宋';
 }

admin/src/layout/header/index.vue

@@ -2,7 +2,7 @@
   <div class="header-container">
     <div class="navbar">
       <Hamburger />
-      <div class="navbar-right">
+      <div class="right-navbar">
         <Screenfull />
         <Avatar class="right-item" />
       </div>
@@ -20,34 +20,21 @@ import Screenfull from './components/Screenfull.vue'
 <style lang="scss" scoped>
 .header-container {
   padding: 0 10px;
-  width: 100%;
   height: 100%;
   box-shadow: 0 2px 3px #888888;
+  height: 60px;
   .navbar {
-    height: 50px;
     display: flex;
     align-items: center;
-    box-sizing: border-box;
+    justify-content: space-between;
-    position: relative;
+    .right-navbar {
-    .navbar-right {
-      flex: 1;
       display: flex;
+      justify-content: center;
       align-items: center;
-      justify-content: flex-end;
+      .right-item {
-      overflow: hidden;
+        margin-left: 10px;
-      margin-right: 15px;
-      :deep(.right-item) {
-        display: inline-block;
-        margin-left: 18px;
-        font-size: 22px;
-        color: #5a5e66;
-        box-sizing: border-box;
-        cursor: pointer;
       }
     }
   }
-  .tabs-view-container {
-    height: 35px;
-  }
 }
 </style>

admin/src/layout/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <el-container class="app-wrapper">
+  <el-container>
-    <el-aside width="210px">
+    <el-aside width="auto">
       <Menu />
     </el-aside>
-    <el-container class="main-container" :class="{ hidderContainer: store.collapse }">
+    <el-container :class="'main-container ' + isHide">
       <el-header><Header /></el-header>
       <el-main>
         <transition name="fade" mode="out-in">
@@ -18,8 +18,13 @@
 import Menu from './menu/Menu.vue'
 import Header from './header/index.vue'
 import { useStore } from '../store'
+import { computed } from 'vue'
 
 const store = useStore()
+
+const isHide = computed(() => {
+  return store.collapse ? 'hide-sideBar' : ''
+})
 </script>
 
 <style lang="scss" scoped>
@@ -27,24 +32,13 @@ const store = useStore()
   height: 100%;
 }
 .main-container {
-  width: calc(100% - 210px);
+  transition: margin-left 0.45s;
-  position: fixed;
+  margin-left: 210px;
-  top: 0;
+  min-height: 100vh;
-  right: 0;
-  z-index: 9;
-  transition: all 0.43s;
-  &.hidderContainer {
-    // 当store中的collapse为true时，重新计算main-container的宽度
-    width: calc(100% - 65px);
-  }
-}
-// 页面展示时对element-ui的样式做一点修改
-.el-menu {
-  height: 100%;
 }
-.el-header {
+
-  height: 85px;
+.hide-sideBar {
-  padding: 0;
+  margin-left: 64px;
 }
 
 // 路由切换时的动画

admin/src/layout/menu/Menu.vue

@@ -7,6 +7,7 @@
     unique-opened="true"
     :collapse="store.collapse"
     router="true"
+    class="side-nav-bar"
   >
     <!-- 首页栏 -->
     <el-menu-item index="/">
@@ -51,4 +52,16 @@ import { useStore } from '../../store'
 const store = useStore()
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.side-nav-bar:not(.el-menu--collapse) {
+  width: 210px;
+}
+.side-nav-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+</style>

admin/src/main.js

@@ -8,11 +8,23 @@ import router from './router'
 import { createPinia } from 'pinia'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
+// 引入md编辑器
+import VueMarkdownEditor from '@kangc/v-md-editor'
+import '@kangc/v-md-editor/lib/style/base-editor.css'
+import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js'
+import '@kangc/v-md-editor/lib/theme/style/vuepress.css'
+import Prism from 'prismjs'
+
 const app = createApp(App)
+
 const pinia = createPinia()
 
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }
 
-app.use(pinia).use(router).use(ElementPlus).mount('#app')
+VueMarkdownEditor.use(vuepressTheme, {
+  Prism
+})
+
+app.use(pinia).use(router).use(ElementPlus).use(VueMarkdownEditor).mount('#app')

admin/src/views/article/Article.vue

@@ -1,7 +0,0 @@
-<template>
-  <div></div>
-</template>
-
-<script setup></script>
-
-<style lang="scss" scoped></style>

admin/src/views/article/ArticleList.vue

@@ -1,7 +0,0 @@
-<template>
-  <div></div>
-</template>
-
-<script setup></script>
-
-<style lang="scss" scoped></style>