self-constructing_graph/src/components/SideMenu.vue

<template>
  <div class="left-nav">
    <el-menu default-active="1-1" class="el-menu-vertical-demo">
      <el-sub-menu index="1">
        <template #title>
          <i class="el-icon-location"></i>
          <span>工作台</span>
        </template>
        <el-menu-item-group>
          <el-menu-item @click="router.push({ name: 'home' })" index="1-1">工作台概览</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
      <el-sub-menu index="2">
        <template #title>
          <i class="el-icon-location"></i>
          <span>工作队列（{{ queues.length }}）</span>
        </template>
        <el-menu-item-group>
          <template v-for="(queue, index) in queues" :key="queue.id">
            <el-menu-item :index="'2' + '-' + index" @click="queueClicked(queue)">
              <!-- <template #title> -->
              <span>{{ queue.name }}</span>
              <el-tag v-if="queue.type == 'input'" effect="light" round>START</el-tag>
              <!-- </template> -->
            </el-menu-item>
          </template>
        </el-menu-item-group>
      </el-sub-menu>
      <el-sub-menu index="3">
        <template #title>
          <i class="el-icon-location"></i>
          <span>知识图谱</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="3-1" @click="handleMenuClick('graph')">全部图谱</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
      <el-sub-menu index="4">
        <template #title>
          <i class="el-icon-location"></i>
          <span>工作人员（{{ workers.length }}）</span>
        </template>
        <el-menu-item-group>
          <el-menu-item v-for="worker in workers" :key="worker.id" @click="selectWorker(worker)"
            :index="'4-' + worker.id">
            <el-icon>
              <User />
            </el-icon>
            <span>{{ worker.name }}</span>
            <el-tag :type="worker.status === '空闲' ? 'success' : 'warning'" size="small">
              {{ worker.status }}
            </el-tag>
          </el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
    </el-menu>
    <!-- <div class="nav-section">
      <h3>工作台</h3>
      <el-menu :default-active="$route.path" router>
        <el-menu-item index="/home" :route="{ path: '/home' }">
          <template #title>
            <el-icon></el-icon>
            <span>工作台概览</span>
          </template>
        </el-menu-item>
      </el-menu>
    </div>

    <div class="nav-section">
      <h3>工作队列（{{ queues.length }}）</h3>
      <el-menu>
        <template v-for="queue in queues" :key="queue.id">
          <el-menu-item :index="'queue' + '_' + queue.id" @click="queueClicked(queue)">
            <template #title>
              <span>{{ queue.name }}</span>
              <el-tag v-if="queue.type == 'input'" effect="light" round>START</el-tag>
            </template>
          </el-menu-item>
        </template>
      </el-menu>
    </div>
    <div class="nav-section">
      <h3>知识图谱</h3>
      <el-menu>
        <el-menu-item @click="handleMenuClick('graph')">
          <span>全部图谱</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="nav-section">
      <h3>工作人员（{{ workers.length }}）</h3>
      <el-menu>
        <el-menu-item v-for="worker in workers" :key="worker.id" @click="selectWorker(worker)">
          <el-icon>
            <User />
          </el-icon>
          <span>{{ worker.name }}</span>
          <el-tag :type="worker.status === '空闲' ? 'success' : 'warning'" size="small">
            {{ worker.status }}
          </el-tag>
        </el-menu-item>
      </el-menu>
    </div> -->
    <!-- <div class="nav-section">
      <h3>知识库管理平台</h3>
      <el-menu>
        <el-menu-item @click="router.push({ name: 'kmplatform' })">
          <span>知识库管理</span>
        </el-menu-item>
      </el-menu>
    </div> -->
  </div>
</template>

<script setup lang="ts">

import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { User } from '@element-plus/icons-vue'
import type { WorkQueue, Worker } from '../libs/dataset.ts'

const router = useRouter();

const emit = defineEmits(['selectQueue', 'selectWorker', 'selectMenu']);
// 模拟数据
const queues = [
  {
    id: 0,
    name: "全部工作",
    taskCount: 1,
    tasks: []
  },
  {
    id: 6,
    name: "WORD文档抽取",
    taskCount: 1,
    tasks: [],
    type: "input"
  },
  {
    id: 1,
    name: "PDF文档抽取",
    taskCount: 1,
    tasks: [],
    type: "input"
  },
  // {
  //   id: 2,
  //   name: "文本校对",
  //   taskCount: 1,
  //   tasks: []
  // },
  {
    id: 3,
    name: "文本切片队列",
    taskCount: 1,
    tasks: []
  },
  {
    id: 4,
    name: "知识抽取",
    taskCount: 1,
    tasks: []
  },
  {
    id: 5,
    name: "知识图谱构建",
    taskCount: 1,
    tasks: []
  },
]



const workers = ref<Worker[]>(Array.from({ length: 2 }, (_, i) => ({
  id: i + 1,
  name: `后台服务 ${i + 1}`,
  status: Math.random() > 0.5 ? '忙碌' : '空闲'
})))

const selectedQueue = ref(null)
const selectedWorker = ref<Worker | null>(null)

const queueClicked = (queue: any) => {
  selectedQueue.value = queue;
  selectedWorker.value = null;
  emit('selectQueue', { id: queue.id });
}

const handleMenuClick = (menu: string) => {
  console.log("handleMenuClick called with menu:", menu); // 调试输出
  emit('selectMenu', { name: menu });
}
const selectWorker = (worker: Worker) => {
  selectedWorker.value = worker
  selectedQueue.value = null
}

</script>

<style scoped lang="less">
.left-nav {
  // width: 280px;
  height: 100vh;

  // border-right: 0px solid #e4e7ed;
  // padding: 20px;
  // overflow: auto;
  // overflow-y: auto;
  // background-color: #e4e7ed;
  // background-color: #d5e9fe;
  .nav-section {
    margin-bottom: 30px;

    h3 {
      margin-bottom: 15px;
      color: #666;
    }
  }
}

.el-menu-vertical-demo {
  height: 100%;
}
</style>