self-constructing_graph/src/views/Framework.vue

<template>
  <div class="main-container">
    <el-container>
      <el-aside class="main-aside">
        <SideMenu @selectQueue="onSelectQueue" @selectMenu="onSelectMenu"></SideMenu>
      </el-aside>
      <el-main class="content-area">
        <!-- 主要内容区域 -->
        <router-view v-slot="{ Component }">
          <component :is="Component" />
        </router-view>
      </el-main>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, watch, watchEffect } from "vue";
import { useRouter, useRoute } from "vue-router";
import { RouterView } from "vue-router";
import SideMenu from "@/components/SideMenu.vue";
import { useMenuStore } from "@/stores/menu.js";

const router = useRouter();

//校验注册信息
const onSelectQueue = (idData: any) => {
  // console.log(router.getRoutes());
  // 跳转到队列详情页并且传递队列ID作为查询参数
  // 假设队列详情页的路由路径是 '/workspace/queue'
  // 可以使用 router.push 方法来实现路由跳转

  router.push({ name: 'queue', params: { id: idData.id } });
};
const onSelectMenu = (menuData: any) => {
  router.push({ name: menuData.name });
  // if (menuData.name == "graph") {
  //   router.push({ name: 'graph' });
  // }
};

</script>
<style scoped lang="less">
.main-container {
  width: 100%;
  // height: calc(100vh - 150px);

  &>.el-container {
    // width: 100%;
    // height: 100%;
    padding: 0px;
    margin: 0px;
    min-width: 0px;
  }
}




.content-area {
  // height: 100px;
  padding: 20px;
  width: calc(100% - 300px);
  overflow: auto;
}

.main-aside {
  width: 300px;
  border-right: 0px solid #e4e7ed;
  padding: 1px;
}

.site_header {
  width: 100%;
  box-sizing: border-box;
  /* background-color: #c5c5c5; */
  background-color: #eef6ff;
  padding: 0 20px;
  height: 50px;
  /* border-bottom: 1px solid #e4e7ed; */
}

.knowledge-base-icon {
  cursor: pointer;
  vertical-align: middle;
  margin-left: 10px;
}
</style>