stmms-web-admin/src/views/mark/MarkManage.vue

<template>
  <div class="mark-manage-container">
    <!-- 顶部标签导航 -->
    <el-tabs v-model="activeMenu" class="mark-tabs" @tab-click="handleTabClick">
      <el-tab-pane label="分组管理" name="GroupManage">
        <template #label>
          <span>分组管理</span>
        </template>
      </el-tab-pane>
      <el-tab-pane label="评卷员管理" name="MarkerManage">
        <template #label>
          <span>评卷员管理</span>
        </template>
      </el-tab-pane>
      <el-tab-pane label="试评管理" name="TrialManage">
        <template #label>
          <span>试评管理</span>
        </template>
      </el-tab-pane>
      <el-tab-pane label="任务管理" name="TaskManage">
        <template #label>
          <span>任务管理</span>
        </template>
      </el-tab-pane>
      <el-tab-pane label="仲裁管理" name="ArbitrationManage">
        <template #label>
          <span>仲裁管理</span>
        </template>
      </el-tab-pane>
      <el-tab-pane label="质量监控" name="QualityMonitor">
        <template #label>
          <span>质量监控</span>
        </template>
      </el-tab-pane>
    </el-tabs>

    <!-- 子页面内容区域 -->
    <div class="content-container">
      <router-view />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, watch, onMounted } from 'vue';
  import { useRoute, useRouter } from 'vue-router';

  defineOptions({
    name: 'MarkManage',
  });

  const route = useRoute();
  const router = useRouter();

  // 当前激活的菜单项
  const activeMenu = ref<string>('');

  // 标签点击处理
  function handleTabClick(tab: any) {
    const tabName = tab.paneName || tab.props.name;
    if (tabName !== route.name) {
      router.push({ name: tabName });
    }
  }

  // 监听路由变化，更新激活菜单
  watch(
    () => route.name,
    (newName) => {
      activeMenu.value = newName as string;
    },
    { immediate: true }
  );

  // 组件挂载时初始化
  onMounted(() => {
    // 如果当前路径是父路由，默认跳转到分组管理
    if (route.name === 'MarkManage') {
      router.replace({ name: 'GroupManage' });
    } else {
      activeMenu.value = route.name as string;
    }
  });
</script>

<style scoped>
  .mark-manage-container {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .mark-tabs {
    border-bottom: 1px solid var(--el-border-color-light);
  }

  .mark-tabs :deep(.el-tabs__item) {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .mark-tabs :deep(.el-tabs__content) {
    display: none;
  }

  .content-container {
    flex: 1;
    overflow: auto;
    padding: 0;
  }

  /* 移除子页面的顶部间距 */
  .content-container :deep(.part-box:first-child) {
    margin-top: 0;
  }
</style>