添加持久化标签页开关功能

ruoyi-ui/src/components/HeaderSearch/index.vue

@@ -5,6 +5,7 @@
       :visible.sync="show"
       width="600px"
       @close="close"
+      @opened="onDialogOpened"
       :show-close="false"
       append-to-body
     >
@@ -21,24 +22,54 @@
         @keydown.down.native="navigateResult('down')"
       >
       </el-input>
+
+      <div class="result-count" v-if="search && options.length > 0">
+        找到 <strong>{{ options.length }}</strong> 个结果
+      </div>
+
       <el-scrollbar wrap-class="right-scrollbar-wrapper">
         <div class="result-wrap">
-          <div class="search-item" v-for="(item, index) in options" :key="item.path" :style="activeStyle(index)" @mouseenter="activeIndex = index" @mouseleave="activeIndex = -1">
-            <div class="left">
-              <svg-icon class="menu-icon" :icon-class="item.icon" />
-            </div>
-            <div class="search-info" @click="change(item)">
-              <div class="menu-title">
-                {{ item.title.join(" / ") }}
+          <template v-if="options.length > 0">
+            <div
+              class="search-item"
+              v-for="(item, index) in options"
+              :key="item.path"
+              :class="{ 'is-active': index === activeIndex }"
+              :style="activeStyle(index)"
+              @mouseenter="activeIndex = index"
+              @mouseleave="activeIndex = -1"
+            >
+              <div class="left">
+                <svg-icon class="menu-icon" :icon-class="item.icon" />
               </div>
-              <div class="menu-path">
-                {{ item.path }}
+              <div class="search-info" @click="change(item)">
+                <div class="menu-title" v-html="highlightText(item.title.join(' / '))"></div>
+                <div class="menu-path" v-html="highlightText(item.path)"></div>
               </div>
+              <svg-icon icon-class="enter" v-show="index === activeIndex" />
             </div>
-            <svg-icon icon-class="enter" v-show="index === activeIndex"/>
+          </template>
+
+          <div class="empty-state" v-else-if="search && options.length === 0">
+            <i class="el-icon-search empty-icon"></i>
+            <p class="empty-text">未找到 "<strong>{{ search }}</strong>" 相关菜单</p>
+            <p class="empty-tip">试试其他关键词或路径</p>
           </div>
-       </div>
+
+        </div>
       </el-scrollbar>
+
+      <div class="search-footer">
+        <span class="shortcut-item">
+          <kbd>↑</kbd><kbd>↓</kbd> 切换
+        </span>
+        <span class="shortcut-item">
+          <kbd>↵</kbd> 选择
+        </span>
+        <span class="shortcut-item">
+          <kbd>Esc</kbd> 关闭
+        </span>
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -83,33 +114,37 @@ export default {
     click() {
       this.show = !this.show
       if (this.show) {
-        this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus()
         this.options = this.searchPool
       }
     },
+    onDialogOpened() {
+      this.$nextTick(() => {
+        this.$refs.headerSearchSelectRef && this.$refs.headerSearchSelectRef.focus()
+      })
+    },
     close() {
-      this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur()
+      this.$refs.headerSearchSelectRef && this.$refs.headerSearchSelectRef.blur()
       this.search = ''
-      this.options = []
+      this.options = this.searchPool
       this.show = false
       this.activeIndex = -1
     },
     change(val) {
-      const path = val.path
+      const p = val.path
       const query = val.query
-      if(isHttp(val.path)) {
+      if (isHttp(val.path)) {
         // http(s):// 路径新窗口打开
-        const pindex = path.indexOf("http")
-        window.open(path.substr(pindex, path.length), "_blank")
+        const pindex = p.indexOf('http')
+        window.open(p.substr(pindex, p.length), '_blank')
       } else {
         if (query) {
-          this.$router.push({ path: path, query: JSON.parse(query) })
+          this.$router.push({ path: p, query: JSON.parse(query) })
         } else {
-          this.$router.push(path)
+          this.$router.push(p)
         }
       }
       this.search = ''
-      this.options = []
+      this.options = this.searchPool
       this.$nextTick(() => {
         this.show = false
       })
@@ -117,7 +152,7 @@ export default {
     initFuse(list) {
       this.fuse = new Fuse(list, {
         shouldSort: true,
-        threshold: 0.4,
+        threshold: 0.2,
         minMatchCharLength: 1,
         keys: [{
           name: 'title',
@@ -128,37 +163,25 @@ export default {
         }]
       })
     },
-    // Filter out the routes that can be displayed in the sidebar
-    // And generate the internationalized title
     generateRoutes(routes, basePath = '/', prefixTitle = []) {
       let res = []
-
       for (const router of routes) {
-        // skip hidden router
         if (router.hidden) { continue }
-
         const data = {
           path: !isHttp(router.path) ? path.resolve(basePath, router.path) : router.path,
           title: [...prefixTitle],
           icon: ''
         }
-
         if (router.meta && router.meta.title) {
           data.title = [...data.title, router.meta.title]
           data.icon = router.meta.icon
-
           if (router.redirect !== 'noRedirect') {
-            // only push the routes with title
-            // special case: need to exclude parent router without redirect
             res.push(data)
           }
         }
-
         if (router.query) {
           data.query = router.query
         }
-
-        // recursive child routes
         if (router.children) {
           const tempRoutes = this.generateRoutes(router.children, data.path, data.title)
           if (tempRoutes.length >= 1) {
@@ -171,7 +194,18 @@ export default {
     querySearch(query) {
       this.activeIndex = -1
       if (query !== '') {
-        this.options = this.fuse.search(query).map((item) => item.item) ?? this.searchPool
+        const q = query.toLowerCase()
+        const pathMatches = this.searchPool.filter(item =>
+          item.path.toLowerCase().includes(q)
+        )
+        const fuseMatches = this.fuse.search(query).map(item => item.item)
+        const merged = [...pathMatches]
+        fuseMatches.forEach(item => {
+          if (!merged.find(m => m.path === item.path)) {
+            merged.push(item)
+          }
+        })
+        this.options = merged
       } else {
         this.options = this.searchPool
       }
@@ -179,14 +213,14 @@ export default {
     activeStyle(index) {
       if (index !== this.activeIndex) return {}
       return {
-        "background-color": this.theme,
-        "color": "#fff"
+        'background-color': this.theme,
+        'color': '#fff'
       }
     },
     navigateResult(direction) {
-      if (direction === "up") {
+      if (direction === 'up') {
         this.activeIndex = this.activeIndex <= 0 ? this.options.length - 1 : this.activeIndex - 1
-      } else if (direction === "down") {
+      } else if (direction === 'down') {
         this.activeIndex = this.activeIndex >= this.options.length - 1 ? 0 : this.activeIndex + 1
       }
     },
@@ -194,6 +228,16 @@ export default {
       if (this.options.length > 0 && this.activeIndex >= 0) {
         this.change(this.options[this.activeIndex])
       }
+    },
+    highlightText(text) {
+      if (!text) return ''
+      if (!this.search) return text
+      const keyword = this.escapeRegExp(this.search)
+      const reg = new RegExp(`(${keyword})`, 'gi')
+      return text.replace(reg, '<span class="highlight">$1</span>')
+    },
+    escapeRegExp(str) {
+      return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
     }
   }
 }
@@ -202,7 +246,17 @@ export default {
 <style lang='scss' scoped>
 ::v-deep {
   .el-dialog__header {
-    padding: 0 !important;
+    padding: 6px !important;
+  }
+
+  .highlight {
+    color: red;
+    font-weight: 600;
+  }
+
+  .is-active .highlight {
+    color: rgba(255, 255, 255, 0.9);
+    font-weight: 600;
   }
 }
 
@@ -214,19 +268,33 @@ export default {
   }
 }
 
+.result-count {
+  padding: 6px 16px 0;
+  font-size: 12px;
+  color: #aaa;
+
+  strong {
+    color: red;
+    font-weight: 600;
+  }
+}
+
 .result-wrap {
   height: 280px;
-  margin: 6px 0;
+  margin: 4px 0;
 
   .search-item {
     display: flex;
     height: 48px;
     align-items: center;
     padding-right: 10px;
+    border-radius: 4px;
+    transition: background 0.15s;
 
     .left {
       width: 60px;
       text-align: center;
+      flex-shrink: 0;
 
       .menu-icon {
         width: 18px;
@@ -242,11 +310,16 @@ export default {
       flex-direction: column;
       justify-content: flex-start;
       flex: 1;
+      overflow: hidden;
 
       .menu-title,
       .menu-path {
         height: 20px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
+
       .menu-path {
         color: #ccc;
         font-size: 10px;
@@ -257,6 +330,68 @@ export default {
   .search-item:hover {
     cursor: pointer;
   }
-}
-</style>
 
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+
+    .empty-icon {
+      font-size: 42px;
+      color: #e0e0e0;
+      margin-bottom: 14px;
+    }
+
+    .empty-text {
+      font-size: 14px;
+      color: #999;
+      margin: 0 0 6px;
+
+      strong {
+        color: #666;
+      }
+    }
+
+    .empty-tip {
+      font-size: 12px;
+      color: #bbb;
+      margin: 0;
+    }
+  }
+}
+
+.search-footer {
+  display: flex;
+  align-items: center;
+  gap: 28px;
+  padding: 10px 20px;
+  border-top: 1px solid #f0f0f0;
+  color: #999;
+  font-size: 12px;
+
+  .shortcut-item {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+
+  kbd {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 20px;
+    height: 20px;
+    padding: 0 5px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    background: #f7f7f7;
+    color: #555;
+    font-size: 11px;
+    font-family: inherit;
+    line-height: 1;
+    box-shadow: 0 1px 0 #ccc;
+  }
+}
+</style>

ruoyi-ui/src/layout/components/Settings/index.vue

@@ -65,6 +65,11 @@
           <el-switch v-model="tagsView" class="drawer-switch" />
         </div>
 
+        <div class="drawer-item">
+          <span>持久化标签页</span>
+          <el-switch v-model="tagsViewPersist" :disabled="!tagsView" class="drawer-switch" />
+        </div>
+
         <div class="drawer-item">
           <span>显示页签图标</span>
           <el-switch v-model="tagsIcon" :disabled="!tagsView" class="drawer-switch" />
@@ -125,6 +130,17 @@ export default {
         })
       }
     },
+    tagsViewPersist: {
+      get() {
+        return this.$store.state.settings.tagsViewPersist
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsViewPersist',
+          value: val
+        })
+      }
+    },
     tagsView: {
       get() {
         return this.$store.state.settings.tagsView
@@ -231,12 +247,16 @@ export default {
     },
     saveSetting() {
       this.$modal.loading("正在保存到本地，请稍候...")
+      if (!this.tagsViewPersist) {
+        this.$cache.local.remove('tags-view-visited')
+      }
       this.$cache.local.set(
         "layout-setting",
         `{
             "navType":${this.navType},
             "tagsView":${this.tagsView},
             "tagsIcon":${this.tagsIcon},
+            "tagsViewPersist":${this.tagsViewPersist},
             "fixedHeader":${this.fixedHeader},
             "sidebarLogo":${this.sidebarLogo},
             "dynamicTitle":${this.dynamicTitle},
@@ -249,6 +269,7 @@ export default {
     },
     resetSetting() {
       this.$modal.loading("正在清除设置缓存并刷新，请稍候...")
+      this.$cache.local.remove('tags-view-visited')
       this.$cache.local.remove("layout-setting")
       setTimeout("window.location.reload()", 1000)
     }

ruoyi-ui/src/layout/components/TagsView/index.vue

@@ -177,10 +177,13 @@ export default {
       return tags
     },
     initTags() {
+      if (this.$store.state.settings.tagsViewPersist) {
+        this.$store.dispatch('tagsView/loadPersistedViews')
+      }
       const affixTags = this.affixTags = this.filterAffixTags(this.routes)
       for (const tag of affixTags) {
         if (tag.name) {
-          this.$store.dispatch('tagsView/addVisitedView', tag)
+          this.$store.dispatch('tagsView/addAffixView', tag)
         }
       }
     },

ruoyi-ui/src/settings.js

@@ -23,7 +23,12 @@ module.exports = {
    * 是否显示 tagsView
    */
   tagsView: true,
-  
+
+  /**
+   * 持久化标签页
+   */
+  tagsViewPersist: false,
+
   /**
    * 显示页签图标
    */

ruoyi-ui/src/store/modules/settings.js

@@ -1,7 +1,7 @@
 import defaultSettings from '@/settings'
 import { useDynamicTitle } from '@/utils/dynamicTitle'
 
-const { sideTheme, showSettings, navType, tagsView, tagsIcon, fixedHeader, sidebarLogo, dynamicTitle, footerVisible, footerContent } = defaultSettings
+const { sideTheme, showSettings, navType, tagsView, tagsViewPersist, tagsIcon, fixedHeader, sidebarLogo, dynamicTitle, footerVisible, footerContent } = defaultSettings
 
 const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || ''
 const state = {
@@ -11,6 +11,7 @@ const state = {
   showSettings: showSettings,
   navType: storageSetting.navType === undefined ? navType : storageSetting.navType,
   tagsView: storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView,
+  tagsViewPersist: storageSetting.tagsViewPersist === undefined ? tagsViewPersist : storageSetting.tagsViewPersist,
   tagsIcon: storageSetting.tagsIcon === undefined ? tagsIcon : storageSetting.tagsIcon,
   fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader,
   sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo,

ruoyi-ui/src/store/modules/tagsView.js

@@ -1,3 +1,26 @@
+import store from '@/store'
+import cache from '@/plugins/cache'
+
+const PERSIST_KEY = 'tags-view-visited'
+
+function isPersistEnabled() {
+  return store.state.settings.tagsViewPersist
+}
+
+function saveVisitedViews(views) {
+  if (!isPersistEnabled()) return
+  const toSave = views.filter(v => !(v.meta && v.meta.affix)).map(v => ({ path: v.path, fullPath: v.fullPath, name: v.name, title: v.title, query: v.query, meta: v.meta }))
+  cache.local.setJSON(PERSIST_KEY, toSave)
+}
+
+function loadVisitedViews() {
+  return cache.local.getJSON(PERSIST_KEY) || []
+}
+
+function clearVisitedViews() {
+  cache.local.remove(PERSIST_KEY)
+}
+
 const state = {
   visitedViews: [],
   cachedViews: [],
@@ -20,6 +43,15 @@ const mutations = {
         title: view.meta.title || 'no-name'
       })
     )
+    saveVisitedViews(state.visitedViews)
+  },
+  ADD_VISITED_VIEW_FIRST: (state, view) => {
+    if (state.visitedViews.some(v => v.path === view.path)) return
+    state.visitedViews.unshift(
+      Object.assign({}, view, {
+        title: view.meta.title || 'no-name'
+      })
+    )
   },
   ADD_CACHED_VIEW: (state, view) => {
     if (state.cachedViews.includes(view.name)) return
@@ -35,6 +67,7 @@ const mutations = {
       }
     }
     state.iframeViews = state.iframeViews.filter(item => item.path !== view.path)
+    saveVisitedViews(state.visitedViews)
   },
   DEL_IFRAME_VIEW: (state, view) => {
     state.iframeViews = state.iframeViews.filter(item => item.path !== view.path)
@@ -49,6 +82,7 @@ const mutations = {
       return v.meta.affix || v.path === view.path
     })
     state.iframeViews = state.iframeViews.filter(item => item.path === view.path)
+    saveVisitedViews(state.visitedViews)
   },
   DEL_OTHERS_CACHED_VIEWS: (state, view) => {
     const index = state.cachedViews.indexOf(view.name)
@@ -63,6 +97,7 @@ const mutations = {
     const affixTags = state.visitedViews.filter(tag => tag.meta.affix)
     state.visitedViews = affixTags
     state.iframeViews = []
+    clearVisitedViews()
   },
   DEL_ALL_CACHED_VIEWS: state => {
     state.cachedViews = []
@@ -94,6 +129,7 @@ const mutations = {
       }
       return false
     })
+    saveVisitedViews(state.visitedViews)
   },
   DEL_LEFT_VIEWS: (state, view) => {
     const index = state.visitedViews.findIndex(v => v.path === view.path)
@@ -114,6 +150,7 @@ const mutations = {
       }
       return false
     })
+    saveVisitedViews(state.visitedViews)
   }
 }
 
@@ -128,6 +165,9 @@ const actions = {
   addVisitedView({ commit }, view) {
     commit('ADD_VISITED_VIEW', view)
   },
+  addAffixView({ commit }, view) {
+    commit('ADD_VISITED_VIEW_FIRST', view)
+  },
   addCachedView({ commit }, view) {
     commit('ADD_CACHED_VIEW', view)
   },
@@ -218,6 +258,13 @@ const actions = {
       resolve([...state.visitedViews])
     })
   },
+  // 恢复持久化的 tags
+  loadPersistedViews({ commit }) {
+    const views = loadVisitedViews()
+    views.forEach(view => {
+      commit('ADD_VISITED_VIEW', view)
+    })
+  },
 }
 
 export default {