Tool (#225)

* feat: 一键清除历史记录

* feat: search ui

Author: vanoneang

.env.development

@@ -1,3 +1,3 @@
 ENV = 'development'
 
-VUE_APP_BASE_URL = 'http://localhost:5000/'
+VUE_APP_BASE_URL = 'http://koa.lin.colorful3.com/'

.env.production

@@ -1,3 +1,3 @@
 
 
-VUE_APP_BASE_URL = 'http://localhost:5000/'
+VUE_APP_BASE_URL = 'http://dev.lin.colorful3.com'

public/iconfont.css

@@ -1,7 +1,7 @@
 $theme: #3963bc;
 
 /* 布局 */
-$sidebar-width: 175px;
+$sidebar-width: 190px;
 $sidebar-background: #192a5e;
 
 $navbar-height: 30px;

public/iconfont111.css

@@ -0,0 +1,29 @@
+<template>
+  <div title="关闭全部历史记录" class="tab" @click="closeReuseTab">
+    <i class="iconfont icon-moshubang"></i>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CloseTab',
+  inject: ['eventBus'],
+  methods: {
+    closeReuseTab() {
+      this.eventBus.$emit('clearTap')
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.tab {
+  cursor: pointer;
+  margin-right: 10px;
+  i {
+    width: 40px;
+    height: 40px;
+    font-size: 20px;
+  }
+}
+</style>

src/assets/styles/realize/lin-variables.scss

@@ -7,6 +7,7 @@
       <!-- 暂时放这里 -->
       <div class="right-info">
         <notify v-auth="'消息推送'" v-show="false" />
+        <clear-tab></clear-tab>
         <screenfull />
         <user></user>
       </div>
@@ -19,6 +20,7 @@ import Notify from '@/components/notify/notify'
 import Breadcrumb from './Breadcrumb'
 import Screenfull from './Screenfull'
 import User from './User'
+import ClearTab from './ClearTab'
 
 export default {
   name: 'NavBar',
@@ -28,6 +30,7 @@ export default {
     User,
     Notify,
     Screenfull,
+    ClearTab,
   },
 }
 </script>

src/components/layout/ClearTab.vue

@@ -97,6 +97,9 @@ export default {
   },
   mounted() {
     this.init()
+    this.eventBus.$on('clearTap', () => {
+      this.histories = []
+    })
   },
   methods: {
     init() {

src/components/layout/NavBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="container" title="全屏/正常">
     <i class="iconfont" :class="isFullscreen?'icon-quxiaoquanping':'icon-quanping'" @click="handleFullScreen"></i>
   </div>
 </template>

src/components/layout/ReuseTab.vue

@@ -7,6 +7,29 @@
       <img src="../../assets/img/mobile-logo.png" alt="">
     </div>
     <div style="margin-bottom:50px">
+      <div v-if="showSidebarSearch" style="margin-top: 15px">
+        <div class="search-display" v-if="!showSearchList" @click="toSearch">
+          <i class="el-icon-search"></i>
+        </div>
+        <el-select
+          v-if="showSearchList"
+          size="medium"
+          filterable
+          clearable
+          :filter-method="search"
+          v-model="sidebar"
+          @change="handleChange"
+          class="search"
+          placeholder="请输入关键字"
+          ref="searchInput">
+          <el-option
+            v-for="item in groups"
+            :key="item.key"
+            :label="item.title"
+            :value="item.path">
+          </el-option>
+        </el-select>
+      </div>
       <el-menu
         class="el-menu-vertical-demo"
         ref="meun"
@@ -30,7 +53,11 @@
 
             <!-- 二级菜单 -->
             <template v-for="(subItem) in item.children">
-              <el-submenu v-if="subItem.children" :key="idMap[subItem.name]" :index="idMap[subItem.name]" class="subMenuContent">
+              <el-submenu
+                v-if="subItem.children"
+                :key="idMap[subItem.name]"
+                :index="idMap[subItem.name]"
+                class="subMenuContent">
                 <template slot="title">
                   <i class="iconfont icon-erjizhibiao"></i>
                   <span slot="title" class="two-folder">{{subItem.title}}</span>
@@ -82,9 +109,29 @@
 <script>
 import { mapGetters } from 'vuex'
 import Utils from '@/lin/utils/util'
+import Config from '../../config/index'
 
 export default {
   props: ['isCollapse'],
+  data() {
+    return {
+      sidebar: '',
+      groups: [],
+      showSidebarSearch: Config.showSidebarSearch,
+      showSearchList: false,
+    }
+  },
+  inject: ['eventBus'],
+  mounted() {
+    this.eventBus.$on('removeSidebarSearch', () => {
+      this.showSidebarSearch = false
+    })
+    this.eventBus.$on('showSidebarSearch', () => {
+      if (Config.showSidebarSearch) {
+        this.showSidebarSearch = true
+      }
+    })
+  },
   methods: {
     goto(path) {
       this.$router.push({
@@ -94,6 +141,51 @@ export default {
     filterIcon(icon) {
       return icon.indexOf('/') !== -1
     },
+    handleChange(val) {
+      this.groups = []
+      this.sidebar = ''
+      this.showSearchList = false
+      this.$router.push(val)
+    },
+    toSearch() {
+      this.showSearchList = true
+      setTimeout(() => {
+        this.$refs.searchInput.focus()
+      }, 200)
+    },
+    search(val) {
+      if (!val) {
+        this.showSearchList = false
+        return
+      }
+      this.groups = []
+
+      // 深度遍历配置树, 摘取叶子节点作为路由部分
+      function deepTravel(config, fuc) {
+        if (Array.isArray(config)) {
+          config.forEach((subConfig) => {
+            deepTravel(subConfig, fuc)
+          })
+        } else if (config.children) {
+          config.children.forEach((subConfig) => {
+            deepTravel(subConfig, fuc)
+          })
+        } else {
+          fuc(config)
+        }
+      }
+
+      deepTravel(this.sideBarList, (viewConfig) => {
+        // 构造舞台view路由
+        if (viewConfig.title.includes(val)) {
+          const viewRouter = {}
+          viewRouter.path = viewConfig.path
+          viewRouter.title = viewConfig.title
+          viewRouter.key = Math.random()
+          this.groups.push(viewRouter)
+        }
+      })
+    },
   },
   computed: {
     // 根据当前路由设置激活侧边栏
@@ -147,17 +239,21 @@ export default {
   width: 0px;
   height: 0px;
 }
+
 .app-sidebar {
   background: #192a5e;
-   &::-webkit-scrollbar {
+
+  &::-webkit-scrollbar {
     width: 0px;
     height: 0px;
   }
+
   .subMenuContent {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+
   .logo {
     width: $sidebar-width;
     height: $header-height;
@@ -169,9 +265,9 @@ export default {
     transition: all 0.5s ease-in-out;
     background-color: #122150;
     transition: all 0.3s linear;
-    position:sticky;
-    top:0;
-    left:0;
+    position: sticky;
+    top: 0;
+    left: 0;
     z-index: 99;
 
     img {
@@ -211,5 +307,26 @@ export default {
     color: $submenu-title;
     height: $menuItem-height;
   }
+
+  .search-display {
+    position: relative;
+    width: 80%;
+    margin: 0 auto;
+    height: 36px;
+    border-bottom: 1px $theme solid;
+    cursor: pointer;
+
+    .el-icon-search {
+      position: absolute;
+      left: 1px;
+      top: 10px;
+      color: $theme;
+    }
+  }
+
+  .search {
+    // margin-top: 20px;
+    width: 80%;
+  }
 }
 </style>

src/components/layout/Screenfull.vue

@@ -4,6 +4,7 @@ const Config = {
   openAutoJumpOut: true, // 是否开启无操作跳出
   notLoginRoute: ['login'], // 无需登录即可访问的路由 name,
   sideBarLevel: 3, // 侧边栏层级限制, 3表示三级, 可设置 2 和 3
+  showSidebarSearch: true, // 默认打开侧边栏搜索
   defaultRoute: '/about', // 默认打开的路由
 }
 

src/components/layout/SideBar.vue

@@ -43,14 +43,15 @@ import {
 const navBarHeight = 66 // header高度
 const reuseTabHeight = 70 // 历史记录栏高度
 const marginHeight = 20 // 历史记录栏与舞台的间距
+const sideBarWidth = '190px'
 const totalHeight = navBarHeight + reuseTabHeight + marginHeight
 
 export default {
   name: 'layout',
   data() {
     return {
       isCollapse: false, // 左侧菜单栏是否折叠
-      sideBarWidth: '175px', // 左侧菜单栏展开的宽度
+      sideBarWidth, // 左侧菜单栏展开的宽度
       clientWidth: 0, // 页面宽度
       clientHeight: 0, // 页面高度
       foldState: false, // 控制左侧菜单栏按键
@@ -84,6 +85,11 @@ export default {
     // 控制菜单折叠
     changeSlidebarState() {
       this.isCollapse = !this.isCollapse
+      if (this.isCollapse) {
+        this.eventBus.$emit('removeSidebarSearch')
+      } else {
+        this.eventBus.$emit('showSidebarSearch')
+      }
       this.foldState = !this.foldState
     },
     // 响应页面的宽度高度变化
@@ -97,7 +103,7 @@ export default {
   },
   watch: {
     isCollapse() {
-      this.sideBarWidth = this.isCollapse === false ? '175px' : '64px'
+      this.sideBarWidth = this.isCollapse === false ? sideBarWidth : '64px'
     },
     $route() {
       this.showBackTop = false