sionrui/frontend/app/web-gold/src/views/system/task-management/layout/TaskLayout.vue

<template>
  <div class="task-layout">
    <!-- 左侧导航 -->
    <aside class="task-layout__sidebar">
      <nav class="task-layout__nav">
        <div class="task-layout__nav-header">
          <h2 class="task-layout__nav-title">任务管理</h2>
        </div>
        <ul class="task-layout__nav-list">
          <li
            v-for="item in navItems"
            :key="item.type"
            class="task-layout__nav-item"
            :class="{
              'is-active': currentType === item.type
            }"
          >
            <a
              href="javascript:void(0)"
              class="task-layout__nav-link"
              @click="navigateTo(item.type)"
            >
              <span class="nav-icon">
                <VideoCameraOutlined v-if="item.icon === 'video'" />
                <UserOutlined v-else-if="item.icon === 'user'" />
              </span>
              <span class="nav-text">{{ item.label }}</span>
            </a>
          </li>
        </ul>
      </nav>
    </aside>

    <!-- 右侧内容 -->
    <main class="task-layout__content">
      <transition name="fade" mode="out-in">
        <component :is="currentComponent" :key="currentType" />
      </transition>
    </main>
  </div>
</template>

<script setup>
import { computed, defineAsyncComponent } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { VideoCameraOutlined, UserOutlined } from '@ant-design/icons-vue'

// 响应式数据
const route = useRoute()
const router = useRouter()

// 当前任务类型
const currentType = computed(() => {
  const type = route.params.type

  if (!type || type === 'task-management') {
    return 'mix-task'
  }

  return type
})

// 动态导入组件
const MixTaskList = defineAsyncComponent(() => import('../mix-task/index.vue'))
const DigitalHumanTaskList = defineAsyncComponent(() => import('../digital-human-task/index.vue'))

// 导航项配置
const navItems = [
  {
    type: 'mix-task',
    label: '混剪视频任务',
    icon: 'video',
    component: MixTaskList
  },
  {
    type: 'digital-human-task',
    label: '数字人视频任务',
    icon: 'user',
    component: DigitalHumanTaskList
  }
]

// 当前组件
const currentComponent = computed(() => {
  const item = navItems.find(item => item.type === currentType.value)
  if (!item) {
    return navItems[0].component
  }
  return item.component
})

// 导航到指定类型
const navigateTo = (type) => {
  router.push(`/system/task-management/${type}`)
}
</script>

<style scoped lang="less">
.task-layout {
  display: flex;
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* 左侧导航 */
.task-layout__sidebar {
  width: 220px;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  flex-shrink: 0;
  overflow-y: auto;

  @media (max-width: 1199px) {
    width: 200px;
  }

  @media (max-width: 767px) {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    transform: translateX(-100%);
    transition: transform 0.3s ease;

    &.is-mobile-open {
      transform: translateX(0);
    }
  }
}

/* 导航头部 */
.task-layout__nav-header {
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.task-layout__nav-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}

/* 导航列表 */
.task-layout__nav-list {
  list-style: none;
  padding: var(--space-1) 0;
  margin: 0;
}

/* 导航项 */
.task-layout__nav-item {
  margin: 4px var(--space-2);

  &.is-active {
    .task-layout__nav-link {
      background: var(--color-primary);
      color: #fff;

      .nav-icon {
        color: #fff;
      }
    }
  }
}

/* 导航链接 */
.task-layout__nav-link {
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-card);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;

  &:hover {
    background: var(--color-bg-2);
    color: var(--color-primary);
  }

  .is-active & {
    &:hover {
      background: var(--color-primary);
      color: #fff;
    }
  }
}

/* 导航图标 */
.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: var(--space-2);
  color: var(--color-text-3);
  transition: color 0.2s;

  .task-layout__nav-item.is-active & {
    color: #fff;
  }
}

/* 导航文本 */
.nav-text {
  font-size: 14px;
  font-weight: 500;
}

/* 右侧内容 */
.task-layout__content {
  flex: 1;
  overflow: auto;
  background: var(--color-bg);
  padding: 0;

  @media (max-width: 767px) {
    padding: 0;
  }
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.25s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>