瀏覽代碼

fix: 导航栏美化

furffico 1 年之前
父節點
當前提交
fe0e140b1b

+ 7 - 0
src/assets/scss/custom.scss

@@ -20,4 +20,11 @@
   height: 1em;
   fill: currentColor;
   overflow: hidden;
+}
+
+.navbar-fold-icon{
+  &.folded{
+    rotate: 180deg;
+  }
+  transition: rotate .3s ease-in-out;
 }

+ 1 - 0
src/icons/svg/icon-anglesleft.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160zm352-160l-160 160c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L301.3 256 438.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0z"/></svg>

+ 1 - 0
src/icons/svg/icon-arrowleft.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg>

+ 10 - 3
src/views/main-navbar.vue

@@ -12,9 +12,16 @@
     </div>
     <div class="site-navbar__body clearfix">
       <el-menu class="site-navbar__menu" mode="horizontal">
-        <el-menu-item class="site-navbar__switch" index="0" @click="sidebarFold = !sidebarFold">
-          <icon-svg name="zhedie"></icon-svg>
-        </el-menu-item>
+        <el-tooltip effect="dark" :content="sidebarFold ? '展开菜单' : '折叠菜单'" placement="bottom" :enterable="false">
+          <el-menu-item class="site-navbar__switch" index="0" @click="sidebarFold = !sidebarFold">
+            <icon-svg :class="'navbar-fold-icon ' + (sidebarFold ? 'folded' : '')" name="anglesleft"></icon-svg>
+          </el-menu-item>
+        </el-tooltip>
+        <el-tooltip effect="dark" content="返回上一页" placement="bottom" :enterable="false">
+          <el-menu-item class="site-navbar__switch" index="1" @click="$router.back()">
+            <icon-svg name="arrowleft"></icon-svg>
+          </el-menu-item>
+        </el-tooltip>
       </el-menu>
       <el-menu class="site-navbar__menu site-navbar__menu--right" mode="horizontal">
         <el-menu-item class="site-navbar__avatar" index="3">

+ 0 - 42
src/views/main-sidebar-sub-menu.vue

@@ -1,42 +0,0 @@
-<template>
-  <!--el-submenu v-if="menu.list && menu.list.length >= 1" :index="menu.menuId + ''"
-    :popper-class="'site-sidebar--' + sidebarLayoutSkin + '-popper'">
-    <template slot="title">
-      <icon-svg :name="menu.icon || ''" class="site-sidebar__menu-icon"></icon-svg>
-      <span>{{ menu.name }}</span>
-    </template>
-    <sub-menu v-for="item in menu.list" :key="item.menuId" :menu="item">
-    </sub-menu>
-  </el-submenu-->
-  <el-menu-item :index="menu.index + ''" @click="gotoRouteHandle()">
-    <icon-svg :name="menu.icon || ''" class="site-sidebar__menu-icon"></icon-svg>
-    <span>{{ menu.name }}</span>
-  </el-menu-item>
-</template>
-
-<script lang="ts">
-import Vue from 'vue'
-// import SubMenu from './main-sidebar-sub-menu'
-export default Vue.extend({
-  name: 'sub-menu',
-  props: {
-    menu: {
-      type: Object,
-      required: true
-    },
-  },
-  // components: {
-  //   SubMenu
-  // },
-  // computed: {
-  //   sidebarLayoutSkin: {
-  //     get() { return this.$store.state.common.sidebarLayoutSkin }
-  //   }
-  // },
-  methods: {
-    gotoRouteHandle() {
-      this.$router.push(this.menu.url)
-    }
-  }
-})
-</script>

+ 4 - 3
src/views/main-sidebar.vue

@@ -7,14 +7,16 @@
           <icon-svg name="index" class="site-sidebar__menu-icon"></icon-svg>
           <span slot="title">首页</span>
         </el-menu-item>
-        <sub-menu v-for="menu in menuList" :key="menu.index" :menu="menu"></sub-menu>
+        <el-menu-item v-for="menu in menuList" :key="menu.index" :index="menu.index + ''" @click="$router.push(menu.url)">
+          <icon-svg :name="menu.icon || ''" class="site-sidebar__menu-icon"></icon-svg>
+          <span slot="title">{{ menu.name }}</span>
+        </el-menu-item>
       </el-menu>
     </div>
   </aside>
 </template>
 
 <script>
-import SubMenu from './main-sidebar-sub-menu'
 import { isURL } from '@/utils/validate'
 import { pages } from "@/router"
 
@@ -33,7 +35,6 @@ export default {
     })
     return { menuList }
   },
-  components: { SubMenu },
   computed: {
     sidebarLayoutSkin() {
       return this.$store.state.common.sidebarLayoutSkin