tba-hzz-xc/gw-ui/src/layout/components/Sidebar/index.vue

<!-- layout/components/Sidebar/index.vue -->
<template>
  <div class="sidebar-container" :class="{ collapsed: isCollapse }">
    <el-menu
      :default-active="activeMenu"
      :collapse="isCollapse"
      background-color="#ffffff"
      text-color="#606266"
      active-text-color="#409eff"
      :collapse-transition="false"
      unique-opened
      class="sidebar-menu"
    >
      <template v-for="item in menuList" :key="item.path">
        <!-- 有子菜单的项 -->
        <el-sub-menu
          v-if="item.children && item.children.length > 0"
          :index="getFullPath(item.path)"
        >
          <template #title>
            <svg-icon v-if="item.meta?.icon" :icon-class="item.meta.icon" />
            <span>{{ item.meta?.title }}</span>
          </template>
          <!-- 二级菜单 -->
          <template v-for="child in item.children" :key="child.path">
            <el-sub-menu
              v-if="child.children && child.children.length > 0"
              :index="getFullPath(child.path, item.path)"
            >
              <template #title>
                <svg-icon
                  v-if="child.meta?.icon"
                  :icon-class="child.meta.icon"
                />
                <span>{{ child.meta?.title }}</span>
              </template>
              <!-- 三级菜单 -->
              <el-menu-item
                v-for="subChild in child.children"
                :key="subChild.path"
                :index="getFullPath(subChild.path, child.path, item.path)"
                @click="handleMenuClick(subChild, child, item)"
              >
                <svg-icon
                  v-if="subChild.meta?.icon"
                  :icon-class="subChild.meta.icon"
                />
                <span>{{ subChild.meta?.title }}</span>
              </el-menu-item>
            </el-sub-menu>
            <!-- 二级菜单（无子菜单） -->
            <el-menu-item
              v-else
              :index="getFullPath(child.path, item.path)"
              @click="handleMenuClick(child, item)"
            >
              <svg-icon v-if="child.meta?.icon" :icon-class="child.meta.icon" />
              <span>{{ child.meta?.title }}</span>
            </el-menu-item>
          </template>
        </el-sub-menu>

        <!-- 没有子菜单的一级菜单项 -->
        <el-menu-item
          v-else
          :index="getFullPath(item.path)"
          @click="handleMenuClick(item)"
        >
          <svg-icon v-if="item.meta?.icon" :icon-class="item.meta.icon" />
          <span>{{ item.meta?.title }}</span>
        </el-menu-item>
      </template>
    </el-menu>

    <div class="collapse-btn" @click="toggleCollapse">
      <span class="btn-text">{{ isCollapse ? "▶" : "◀" }}</span>
    </div>
  </div>
</template>

<script>
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import useAppStore from "@/store/modules/app";
import usePermissionStore from "@/store/modules/permission";

export default {
  name: "Sidebar",
  props: {
    topMenuKey: {
      type: String,
      default: "",
    },
  },
  setup(props) {
    const route = useRoute();
    const router = useRouter();
    const appStore = useAppStore();
    const permissionStore = usePermissionStore();

    const isCollapse = computed(() => appStore.sidebar.isCollapse);

    // 当前激活的菜单
    const activeMenu = computed(() => {
      return route.path;
    });

    // 获取菜单列表
    const menuList = computed(() => {
      const routes = permissionStore.sidebarRouters || [];
      console.log("sidebarRouters:", routes);
      console.log("topMenuKey:", props.topMenuKey);

      if (!routes.length) return [];

      if (props.topMenuKey) {
        const current = routes.find((item) => item.path === props.topMenuKey);
        if (current && current.children) {
          return current.children.filter((child) => !child.hidden);
        }
      }

      const firstMenu = routes[0];
      if (firstMenu && firstMenu.children) {
        return firstMenu.children.filter((child) => !child.hidden);
      }

      return [];
    });

    // 获取完整路径
    const getFullPath = (path, parentPath = "", grandParentPath = "") => {
      if (path.startsWith("/")) {
        return path;
      }

      // 三级菜单：topMenuKey + 一级/二级/三级
      if (grandParentPath && parentPath) {
        return (
          props.topMenuKey +
          "/" +
          grandParentPath +
          "/" +
          parentPath +
          "/" +
          path
        );
      }

      // 二级菜单：topMenuKey + 一级/二级
      if (parentPath) {
        return props.topMenuKey + "/" + parentPath + "/" + path;
      }

      // 一级菜单：topMenuKey + 一级
      return props.topMenuKey + "/" + path;
    };

    // 点击菜单
    const handleMenuClick = (
      item,
      parentItem = null,
      grandParentItem = null,
    ) => {
      let fullPath = "";

      if (grandParentItem && parentItem) {
        // 三级菜单：topMenuKey/一级/二级/三级
        fullPath =
          props.topMenuKey +
          "/" +
          grandParentItem.path +
          "/" +
          parentItem.path +
          "/" +
          item.path;
      } else if (parentItem) {
        // 二级菜单：topMenuKey/一级/二级
        fullPath = props.topMenuKey + "/" + parentItem.path + "/" + item.path;
      } else {
        // 一级菜单：topMenuKey/一级
        fullPath = props.topMenuKey + "/" + item.path;
      }

      console.log("跳转路径:", fullPath);
      router.push(fullPath);
    };

    // 收起/展开
    const toggleCollapse = () => {
      appStore.sidebar.isCollapse = !appStore.sidebar.isCollapse;
    };

    return {
      menuList,
      isCollapse,
      activeMenu,
      getFullPath,
      handleMenuClick,
      toggleCollapse,
    };
  },
};
</script>

<style scoped>
.sidebar-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-right: 1px solid #e4e7ed;
}

.sidebar-menu {
  flex: 1;
  border: none;
  overflow-y: auto;
  overflow-x: hidden;
}

:deep(.el-menu) {
  border-right: none;
  background-color: #ffffff;
}

:deep(.el-sub-menu__title) {
  color: #606266;
  background-color: #ffffff;
}

:deep(.el-sub-menu__title:hover) {
  background-color: #f5f7fa !important;
  color: #303133 !important;
}

:deep(.el-menu-item) {
  color: #606266;
  background-color: #ffffff;
}

:deep(.el-menu-item:hover) {
  background-color: #f5f7fa !important;
  color: #303133 !important;
}

:deep(.el-menu-item.is-active) {
  background-color: #ecf5ff !important;
  color: #409eff !important;
}

.sidebar-container.collapsed :deep(.el-sub-menu__title span) {
  display: none;
}

.sidebar-container.collapsed :deep(.el-menu-item span) {
  display: none;
}

.collapse-btn {
  height: 44px;
  line-height: 44px;
  text-align: center;
  color: #606266;
  cursor: pointer;
  border-top: 1px solid #e4e7ed;
  background-color: #ffffff;
}

.collapse-btn:hover {
  background-color: #f5f7fa;
  color: #303133;
}

.btn-text {
  font-size: 16px;
}
</style>