SocialNetworks_duan/src/layout/components/aside/index.vue

<template>
  <div class="aside-component">
    <nav class="menu">
      <!-- 手动生成第一个菜单项 -->
      <div v-for="item in menuItems" :key="item.index" class="el-sub-menu">
        <div class="menu-title" :class="{ 'active-parent': hasActiveChild(item) }">
          <!-- 激活状态的左侧青色图片 -->
          <img
            v-if="hasActiveChild(item)"
            src="@/assets/images/titleActiveLeftRec.png"
            class="title-active-left"
          />
          <div class="tltlemenu-left">
            <img
              src="@/assets/images/titlelogo.png"
              style="width: 20px; height: 20px; margin-right: 12px"
            />
            {{ item.title }}
          </div>
          <img src="@/assets/images/titleright.png" alt="" style="width: 66px; height: 16px" />
        </div>
        <ul class="menu-items">
          <div v-for="child in item.subItems" :key="child.index" style="text-decoration: none">
            <li
              :key="child.index"
              class="el-menu-item"
              @click="jumpPage(child.index)"
              :class="{ active: isActive(child.index) }"
            >
              <div class="el-menu-child-font">
                {{ child.title }}
              </div>
            </li>
          </div>
        </ul>
      </div>
    </nav>
  </div>
</template>

<script setup>
import { onMounted } from "vue"
import { useRoute, useRouter } from "vue-router"
const router = useRouter()
const route = useRoute()
const emit = defineEmits(["update:openDialog"])
const menuItems = [
  {
    index: "1",
    title: "关键节点识别",
    subItems: [
      { index: "/key-node-1", title: "重大舆情事件锚点推荐" },
      { index: "/key-node-2", title: "传播意见领袖识别" },
      { index: "/key-node-3", title: "传播桥梁节点识别" }
    ]
  },
  {
    index: "2",
    title: "链路预测",
    subItems: [
      { index: "/link-prediction-1", title: "人物互动隐关系预测" },
      { index: "/link-prediction-2", title: "社交紧密团体识别" },
      { index: "/link-prediction-3", title: "人物社交隐关系预测" }
    ]
  },
  {
    index: "3",
    title: "群体演化分析",
    subItems: [
      { index: "/group-evolution-1", title: "群体识别发现" },
      { index: "/group-evolution-2", title: "群体结构演化分析" },
      { index: "/group-evolution-3", title: "群体成员演化分析" },
      { index: "/group-evolution-4", title: "异常群体捕捉" }
    ]
  }
]

// 判断当前路由是否激活菜单项
const isActive = (routePath) => {
  return route.path === routePath
}

// 判断父菜单是否有激活的子项
const hasActiveChild = (item) => {
  return item.subItems.some((child) => isActive(child.index))
}

//处理跳转页面逻辑
const jumpPage = (routePath) => {
  const activedPaths = [
    "/key-node-1",
    "/key-node-2",
    "/key-node-3",
    "/link-prediction-1",
    "/link-prediction-2",
    "/link-prediction-3",
    "/group-evolution-1",
    "/group-evolution-2",
    "/group-evolution-3",
    "/group-evolution-4"
  ]
  if (activedPaths.includes(routePath)) {
    router.push({ path: routePath })
    return
  }
  emit("update:openDialog", true)
}

onMounted(() => {
  //判读是否是第一次重定向的页面
  if (route.path == "/home") {
    jumpPage("/key-node-1")
  }
})
</script>

<style lang="less">
.aside-component {
  width: 100%;
  height: 102.1%;
  .menu {
    width: 100%;
    height: 100%;
    border-width: 2px;
    border-style: solid;
    border-image: linear-gradient(to bottom, #3aa1f8, #3aa1f833) 1;
    background-image: linear-gradient(to right, #063d7133, #081e38cc);
    display: flex;
    flex-direction: column;
    padding: 10px 10px;
    .menu-title {
      cursor: pointer;
      padding: 10px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 2px;
      background: linear-gradient(90deg, rgba(24, 57, 92, 0.66) 0%, rgba(51, 120, 194, 0) 100%);
      &:hover {
        border-radius: 2px;
        background: linear-gradient(270deg, rgba(14, 167, 213, 0) 0%, rgba(8, 118, 190, 0.24) 100%);
      }
    }
  }
}

.active-parent {
  /* 设置背景图片 */
  background-image:
    url("@/assets/images/titleActiveMaskGroup.png"), Linear-gradient(to right, #0876be, #0ea7d500);
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  border: none;
  padding-left: 30px;
}

.title-active-left {
  position: absolute;
  left: 0;
  top: 8%;
  width: 3px; /* 根据实际图片大小调整 */
  height: 88%;
  z-index: 1;
}

.el-menu-item {
  width: 100%;
  height: 36px;
  margin: 12px 0;
  cursor: pointer;
  color: #fff;
  border-radius: 2px;
  .el-menu-child-font {
    margin-left: 20px;
  }
}

.el-menu-item.active {
  background-image: linear-gradient(270deg, rgba(14, 167, 213, 0) 0%, rgba(8, 118, 190, 0.24) 100%);
  border-radius: 2px;
}

.tltlemenu-left {
  display: flex;
  align-items: center;
}

.sub-menu-items {
  list-style-type: none;
  padding: 0;
  margin: 0;
  margin-top: 5px;
}

.el-menu-item:hover {
  background-image: linear-gradient(to right, #0876be, #0ea7d500);
}
</style>