system/frontend/admin/views/JobLog.vue

<template>
  <div class="job-log-container">
    <el-tabs v-model="activeTab" @tab-change="handleTabChange">
      <el-tab-pane label="定时任务日志" name="cron">
        <template #label>
          <el-icon><Timer /></el-icon>
          <span style="margin-left: 4px">定时任务日志</span>
        </template>
        <CronJobLog v-if="activeTab === 'cron'" />
      </el-tab-pane>
      <el-tab-pane label="队列任务日志" name="queue">
        <template #label>
          <el-icon><List /></el-icon>
          <span style="margin-left: 4px">队列任务日志</span>
        </template>
        <QueueJobLog v-if="activeTab === 'queue'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Timer, List } from '@element-plus/icons-vue'
import CronJobLog from './CronJobLog.vue'
import QueueJobLog from './QueueJobLog.vue'

const activeTab = ref('cron')

const handleTabChange = (tab) => {
  // Tab changed - components will mount/unmount due to v-if
}
</script>

<style scoped lang="scss">
.job-log-container {
  padding: 0;

  :deep(.el-tabs__header) {
    margin-bottom: 16px;
  }

  :deep(.el-tabs__item) {
    font-size: 14px;
  }
}
</style>