336 lines
7.6 KiB
Vue
336 lines
7.6 KiB
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" v-html="icons[item.icon]"></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>
|
|||
|
|
|
|||
|
|
<!-- 移动端菜单按钮 -->
|
|||
|
|
<a-button
|
|||
|
|
v-if="isMobile"
|
|||
|
|
class="task-layout__mobile-btn"
|
|||
|
|
type="primary"
|
|||
|
|
shape="circle"
|
|||
|
|
size="large"
|
|||
|
|
@click="showMobileNav = !showMobileNav"
|
|||
|
|
>
|
|||
|
|
<template #icon>
|
|||
|
|
<MenuOutlined />
|
|||
|
|
</template>
|
|||
|
|
</a-button>
|
|||
|
|
|
|||
|
|
<!-- 移动端遮罩层 -->
|
|||
|
|
<a-drawer
|
|||
|
|
v-model:open="showMobileNav"
|
|||
|
|
placement="left"
|
|||
|
|
:width="220"
|
|||
|
|
:closable="false"
|
|||
|
|
class="task-layout__mobile-drawer"
|
|||
|
|
>
|
|||
|
|
<div class="task-layout__mobile-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, true)"
|
|||
|
|
>
|
|||
|
|
<span class="nav-icon" v-html="icons[item.icon]"></span>
|
|||
|
|
<span class="nav-text">{{ item.label }}</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</a-drawer>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, computed, onMounted, onUnmounted, defineAsyncComponent } from 'vue'
|
|||
|
|
import { useRoute, useRouter } from 'vue-router'
|
|||
|
|
import { MenuOutlined } from '@ant-design/icons-vue'
|
|||
|
|
|
|||
|
|
// 响应式数据
|
|||
|
|
const route = useRoute()
|
|||
|
|
const router = useRouter()
|
|||
|
|
const showMobileNav = ref(false)
|
|||
|
|
const windowWidth = ref(window.innerWidth)
|
|||
|
|
|
|||
|
|
// 单色 SVG 图标（填充 currentColor，可继承文本色）
|
|||
|
|
const icons = {
|
|||
|
|
video: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><path d="m22 8-6 4 6 4V8Z"/><rect x="2" y="6" width="14" height="12" rx="2" ry="2"/></svg>',
|
|||
|
|
user: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><circle cx="12" cy="7" r="4"/><path d="M5.5 21a8.38 8.38 0 0 1 13 0"/></svg>'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 计算属性
|
|||
|
|
const isMobile = computed(() => windowWidth.value < 768)
|
|||
|
|
const isTablet = computed(() => windowWidth.value >= 768 && windowWidth.value < 1200)
|
|||
|
|
|
|||
|
|
// 当前任务类型 - 使用路由name来激活高亮
|
|||
|
|
const currentType = computed(() => {
|
|||
|
|
// 使用路由的params.type，如果不存在则默认使用mix-task
|
|||
|
|
const type = route.params.type
|
|||
|
|
|
|||
|
|
// 如果类型无效或为空，默认使用 mix-task
|
|||
|
|
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, closeMobile = false) => {
|
|||
|
|
router.push(`/system/task-management/${type}`)
|
|||
|
|
if (closeMobile) {
|
|||
|
|
showMobileNav.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新窗口宽度
|
|||
|
|
const updateWindowWidth = () => {
|
|||
|
|
windowWidth.value = window.innerWidth
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 生命周期钩子
|
|||
|
|
onMounted(() => {
|
|||
|
|
window.addEventListener('resize', updateWindowWidth)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
onUnmounted(() => {
|
|||
|
|
window.removeEventListener('resize', updateWindowWidth)
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.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 (min-width: 768px) and (max-width: 1199px) {
|
|||
|
|
.task-layout__sidebar {
|
|||
|
|
width: 200px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 767px) {
|
|||
|
|
.task-layout__sidebar {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 导航头部 */
|
|||
|
|
.task-layout__nav-header {
|
|||
|
|
padding: 24px 16px;
|
|||
|
|
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: 8px 0;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 导航项 */
|
|||
|
|
.task-layout__nav-item {
|
|||
|
|
margin: 4px 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.task-layout__nav-item.is-active .task-layout__nav-link {
|
|||
|
|
background: var(--color-primary);
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.task-layout__nav-item.is-active .nav-icon {
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 导航链接 */
|
|||
|
|
.task-layout__nav-link {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 12px 16px;
|
|||
|
|
border-radius: var(--radius-card);
|
|||
|
|
color: var(--color-text-secondary);
|
|||
|
|
text-decoration: none;
|
|||
|
|
transition: all 0.2s;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.task-layout__nav-link:hover {
|
|||
|
|
background: var(--color-bg-2);
|
|||
|
|
color: var(--color-primary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.task-layout__nav-item.is-active .task-layout__nav-link:hover {
|
|||
|
|
background: var(--color-primary);
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 导航图标 */
|
|||
|
|
.nav-icon {
|
|||
|
|
display: inline-block;
|
|||
|
|
width: 18px;
|
|||
|
|
height: 18px;
|
|||
|
|
margin-right: 12px;
|
|||
|
|
color: var(--color-text-3);
|
|||
|
|
transition: color 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.task-layout__nav-item.is-active .nav-icon {
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 导航文本 */
|
|||
|
|
.nav-text {
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 右侧内容 */
|
|||
|
|
.task-layout__content {
|
|||
|
|
flex: 1;
|
|||
|
|
overflow: auto;
|
|||
|
|
background: var(--color-bg);
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 过渡动画 */
|
|||
|
|
.fade-enter-active,
|
|||
|
|
.fade-leave-active {
|
|||
|
|
transition: opacity 0.25s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fade-enter-from,
|
|||
|
|
.fade-leave-to {
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 移动端按钮 */
|
|||
|
|
.task-layout__mobile-btn {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 24px;
|
|||
|
|
right: 24px;
|
|||
|
|
z-index: 1000;
|
|||
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (min-width: 768px) {
|
|||
|
|
.task-layout__mobile-btn {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 移动端抽屉 */
|
|||
|
|
.task-layout__mobile-drawer :deep(.ant-drawer-body) {
|
|||
|
|
padding: 0;
|
|||
|
|
background: var(--color-surface);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.task-layout__mobile-nav {
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.task-layout__mobile-nav .task-layout__nav-header {
|
|||
|
|
background: var(--color-surface);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.task-layout__mobile-nav .task-layout__nav-list {
|
|||
|
|
flex: 1;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
background: var(--color-surface);
|
|||
|
|
}
|
|||
|
|
</style>
|