SocialNetworks_duan/src/App.vue

<template>
  <div class="app-container">
    <el-container>
      <el-header>
        <div class="header-logo"></div>
      </el-header>
      <el-container>
        <el-aside>
          <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"
                  alt=""
                  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>
                      {{ child.title }}
                    </div>
                  </li>
                </div>
              </ul>
            </div>
          </nav>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
    <el-dialog v-model="openDialog" width="500" align-center class="custom-dialog-prepare">
      <div class="center-tips">
        <img src="./assets/images/icon/pre-icon.png" alt="" class="pre-icon" />
        <div class="tips-font">该案例正在开发中</div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue"
import { useRoute, useRouter } from "vue-router"

const router = useRouter()
const route = useRoute()
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 openDialog = ref(false)
// 判断当前路由是否激活菜单项
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
  }
  openDialog.value = true
}

//禁止用户ctrl+鼠标滚轮 && ctrl + +-缩放页面
const disableZoom = () => {
  const keysToBlock = new Set(["+", "-", "=", "0"])
  const codesToBlock = new Set(["Equal", "Minus", "NumpadAdd", "NumpadSubtract", "Digit0"])
  document.addEventListener("keydown", (e) => {
    if ((e.ctrlKey || e.metaKey) && (keysToBlock.has(e.key) || codesToBlock.has(e.code)))
      e.preventDefault()
  })
  document.addEventListener(
    "wheel",
    (e) => {
      if (e.ctrlKey) e.preventDefault()
    },
    { passive: false }
  )
}

onMounted(() => {
  disableZoom()
})
</script>

<style scoped lang="less">
.app-container {
  width: 100vw;
  height: 111vh;
  background-image: url("./assets/images/bci.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #02131f;
}
:deep(.custom-dialog-prepare) {
  width: 480px;
  height: 250px;
  background: url("./assets/images/preparation.png") no-repeat center;
  display: flex;
  align-items: center;
  justify-content: center;
}
:deep(.custom-dialog-prepare) .pre-icon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
:deep(.custom-dialog-prepare) .center-tips {
  display: flex;
  align-items: center;
}
:deep(.custom-dialog-prepare) .center-tips .tips-font {
  font-size: 24px;
  color: #fff;
  opacity: 0.7;
}
.el-header {
  width: 100%;
  height: 115px;
  padding: 0;
  .header-logo {
    width: 100%;
    height: 100%;
    background-image: url("./assets/images/head.png");
    background-size: cover;
    background-repeat: no-repeat;
  }
}

.menu {
  width: 320px;
  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);
  .menu-title {
    cursor: pointer;
    padding: 10px;
    width: 288px;
    border-radius: 2px;
    margin-top: 16px;
    margin-left: 16px;
    background-image: linear-gradient(270deg, rgba(6, 61, 113, 0.2) 0%, rgba(8, 30, 56, 0.8) 100%);
    /* border-image: linear-gradient(to right, #225f9200, #3aa1f8) 1; */
    border: 2px solid;
    border-image-source: linear-gradient(90deg, #3aa1f8 0%, rgba(58, 161, 248, 0.2) 100%);
    border-image-slice: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &:hover {
      border-radius: 2px;
      background: linear-gradient(270deg, rgba(14, 167, 213, 0) 0%, rgba(8, 118, 190, 0.24) 100%);
    }
  }
  .menu-items {
    padding: 0 15px;
  }
}

.menu-title.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-top: 12px;
  line-height: 36px;
  cursor: pointer;
  color: #fff;
  padding-left: 40px;
  border-radius: 2px;
}

.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);
}

.el-main {
  padding: 0 0;
  margin-left: 30px;
}
.el-aside {
  overflow: visible;
  color: aliceblue;
  font-family: Arial, sans-serif;
  margin-left: 20px;
}
</style>