RuoYi
2025-05-07 b80932ceb4dd7e69b8ea18bb0805e0cf23464862
菜单搜索支持键盘选择&悬浮主题背景
1 files added
1 files modified
39 ■■■■■ changed files
ruoyi-ui/src/assets/icons/svg/enter.svg 1 ●●●● patch | view | raw | blame | history
ruoyi-ui/src/components/HeaderSearch/index.vue 38 ●●●●● patch | view | raw | blame | history
ruoyi-ui/src/assets/icons/svg/enter.svg
New file
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1746590936918" class="icon" viewBox="0 0 1194 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5378" xmlns:xlink="http://www.w3.org/1999/xlink" width="233.203125" height="200"><path d="M1151.9144 325.11999969V89.12a57.04000031 57.04000031 0 0 0-28.8-49.44 58.15999969 58.15999969 0 0 0-57.76000031 0 57.04000031 57.04000031 0 0 0-28.8 49.44v235.99999969c0.24 84.31999969-33.6 152.56000031-94.08 212.00000062-60.07999969 59.83999969-141.84 80.64-227.04 80.4H225.91440031L388.07439969 457.11999969a56.80000031 56.80000031 0 0 0 12.40000031-62.16 57.76000031 57.76000031 0 0 0-94.00000031-18.63999938L48.8744 631.20000031a56.88 56.88 0 0 0 0 80.79999938l264.96 262.56a58.08 58.08 0 0 0 96.55999969-25.59999938 56.80000031 56.80000031 0 0 0-14.95999969-55.2L232.07439969 731.67999969h483.44000062c116.56000031 0 226.15999969-32.08000031 308.64-113.76 82.15999969-80.80000031 128.23999969-178.15999969 127.83999938-292.87999969" p-id="5379"></path></svg>
ruoyi-ui/src/components/HeaderSearch/index.vue
@@ -16,11 +16,14 @@
        prefix-icon="el-icon-search"
        placeholder="菜单搜索,支持标题、URL模糊查询"
        clearable
        @keyup.enter.native="selectActiveResult"
        @keydown.up.native="navigateResult('up')"
        @keydown.down.native="navigateResult('down')"
      >
      </el-input>
      <el-scrollbar wrap-class="right-scrollbar-wrapper">
        <div class="result-wrap">
          <div class="search-item" v-for="item in options" :key="item.path">
          <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>
@@ -32,6 +35,7 @@
                {{ item.path }}
              </div>
            </div>
            <svg-icon icon-class="enter" v-show="index === activeIndex"/>
          </div>
       </div>
      </el-scrollbar>
@@ -51,11 +55,15 @@
      search: '',
      options: [],
      searchPool: [],
      activeIndex: -1,
      show: false,
      fuse: undefined
    }
  },
  computed: {
    theme() {
      return this.$store.state.settings.theme
    },
    routes() {
      return this.$store.getters.defaultRoutes
    }
@@ -84,6 +92,7 @@
      this.search = ''
      this.options = []
      this.show = false
      this.activeIndex = -1
    },
    change(val) {
      const path = val.path
@@ -162,10 +171,30 @@
      return res
    },
    querySearch(query) {
      this.activeIndex = -1
      if (query !== '') {
        this.options = this.fuse.search(query).map((item) => item.item) ?? this.searchPool
      } else {
        this.options = this.searchPool
      }
    },
    activeStyle(index) {
      if (index !== this.activeIndex) return {}
      return {
        "background-color": this.theme,
        "color": "#fff"
      }
    },
    navigateResult(direction) {
      if (direction === "up") {
        this.activeIndex = this.activeIndex <= 0 ? this.options.length - 1 : this.activeIndex - 1
      } else if (direction === "down") {
        this.activeIndex = this.activeIndex >= this.options.length - 1 ? 0 : this.activeIndex + 1
      }
    },
    selectActiveResult() {
      if (this.options.length > 0 && this.activeIndex >= 0) {
        this.change(this.options[this.activeIndex])
      }
    }
  }
@@ -189,11 +218,13 @@
.result-wrap {
  height: 280px;
  margin: 12px 0;
  margin: 6px 0;
  .search-item {
    display: flex;
    height: 48px;
    align-items: center;
    padding-right: 10px;
    .left {
      width: 60px;
@@ -202,16 +233,17 @@
      .menu-icon {
        width: 18px;
        height: 18px;
        margin-top: 5px;
      }
    }
    .search-info {
      padding-left: 5px;
      margin-top: 10px;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      flex: 1;
      .menu-title,
      .menu-path {