merchant-web/src/views/main-sidebar.vue

<template>
  <aside class="site-sidebar" :class="'site-sidebar--' + sidebarLayoutSkin">
    <div class="site-sidebar__inner">
      <el-menu
        :default-active="menuActiveName || 'home'"
        :collapse="sidebarFold"
        :collapseTransition="false"
        class="site-sidebar__menu"
      >
        <el-input
          v-show="!sidebarFold"
          class="search-input"
          v-model="keyWord"
          placeholder="快速搜索菜单"
          clearable
          prefix-icon="el-icon-search"
        ></el-input>

        <el-menu-item index="home" @click="$router.push({ name: 'home' })">
          <i class="el-icon-s-home site-sidebar__menu-icon"></i>
          <span slot="title">首页</span>
        </el-menu-item>

        <sub-menu
          v-for="menu in filterMenu"
          :key="menu.menuId"
          :menu="menu"
          :dynamicMenuRoutes="dynamicMenuRoutes"
        >
        </sub-menu>
      </el-menu>
    </div>
  </aside>
</template>

<script>
// ... script部分保持不变 ...
import SubMenu from "./main-sidebar-sub-menu";
import { isURL } from "@/utils/validate";
export default {
  data() {
    return {
      dynamicMenuRoutes: [],
      //菜单搜索关键词
      keyWord: "",
    };
  },
  components: {
    SubMenu,
  },
  computed: {
    sidebarLayoutSkin: {
      get() {
        return this.$store.state.common.sidebarLayoutSkin;
      },
    },
    sidebarFold: {
      get() {
        return this.$store.state.common.sidebarFold;
      },
    },
    menuList: {
      get() {
        return this.$store.state.common.menuList;
      },
      set(val) {
        this.$store.commit("common/updateMenuList", val);
      },
    },
    menuActiveName: {
      get() {
        return this.$store.state.common.menuActiveName;
      },
      set(val) {
        this.$store.commit("common/updateMenuActiveName", val);
      },
    },
    mainTabs: {
      get() {
        return this.$store.state.common.mainTabs;
      },
      set(val) {
        this.$store.commit("common/updateMainTabs", val);
      },
    },
    mainTabsActiveName: {
      get() {
        return this.$store.state.common.mainTabsActiveName;
      },
      set(val) {
        this.$store.commit("common/updateMainTabsActiveName", val);
      },
    },
    //过滤后的菜单
    filterMenu() {
      //过滤的方法
      const filterMethod = (list, keyWord) => {
        return list.filter(function f(item) {
          if (item.name.includes(keyWord)) return true;
          if (item.list && item.list.length > 0) {
            //此处的目的是至展示有的菜单
            return (item.list = item.list.filter(f)).length;
          }
        });
      };
      let filterMenu = filterMethod(
        JSON.parse(JSON.stringify(this.menuList)),
        this.keyWord
      );
      console.log(filterMenu, "filterMenu");
      return filterMenu.filter((item) => {
        item.list = item.list.filter((prop) => prop.hideInMenu != true);
        return item.hideInMenu != true;
      });
    },
    //是否展示菜单搜索界面
    showSearchInput() {
      return this.$store.state.common.sidebarFold == false;
    },
  },
  watch: {
    $route: "routeHandle",
  },
  created() {
    this.menuList = JSON.parse(sessionStorage.getItem("menuList") || "[]");
    this.dynamicMenuRoutes = JSON.parse(
      sessionStorage.getItem("dynamicMenuRoutes") || "[]"
    );
    this.routeHandle(this.$route);
  },
  methods: {
    // 路由操作
    routeHandle(route) {
      if (route.meta.isTab) {
        // tab选中, 不存在先添加
        var tab = this.mainTabs.filter((item) => item.name === route.name)[0];
        if (!tab) {
          if (route.meta.isDynamic) {
            route = this.dynamicMenuRoutes.filter(
              (item) => item.name === route.name
            )[0];
            if (!route) {
              return console.error("未能找到可用标签页!");
            }
          }
          tab = {
            menuId: route.meta.menuId || route.name,
            name: route.name,
            title: route.meta.title,
            type: route.meta.isMicroApp
              ? "microApp"
              : isURL(route.meta.iframeUrl)
              ? "iframe"
              : "module",
            iframeUrl: route.meta.iframeUrl || "",
            params: route.params,
            query: route.query,
          };
          this.mainTabs = this.mainTabs.concat(tab);
        }
        this.menuActiveName = tab.menuId + "";
        this.mainTabsActiveName = tab.name;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/scss/variables";

.site-sidebar {
  transition: width 0.3s;
}

.site-sidebar__inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #ffffff; // 使用白色背景
}

.site-sidebar__menu {
  flex-grow: 1;
  overflow-y: auto;
  border-right: none !important; // 强制去除边框

  // 滚动条美化
  &::-webkit-scrollbar {
    width: 6px;
  }
  &::-webkit-scrollbar-thumb {
    background: #e0e2e5;
    border-radius: 3px;
  }
}

.search-input {
  padding: 8px 12px;
  ::v-deep .el-input__inner {
    height: 32px;
    line-height: 32px;
    border-radius: 16px;
  }
  ::v-deep .el-input__prefix {
    left: 18px;
    top: 2px;
    display: flex;
    align-items: center;
    height: 100%;
  }
}

// 使用 ::v-deep 或 :deep() 来穿透scoped样式
::v-deep .el-menu-item,
::v-deep .el-submenu__title {
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  color: #303133;
  padding: 0 20px !important;

  .site-sidebar__menu-icon {
    margin-right: 10px;
    font-size: 18px;
    width: 24px;
    text-align: center;
    color: #5f6368;
  }

  &:hover {
    background-color: #f5f7fa; // 悬浮背景色
  }
}

::v-deep .el-menu-item.is-active {
  background-color: mix($--color-primary, #ffffff, 10%) !important;
  color: $--color-primary !important;
  position: relative;

  // 激活状态左侧的竖线
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 24px;
    background-color: $--color-primary;
    border-radius: 0 4px 4px 0;
  }
}
</style>