feat: 前端优化
This commit is contained in:
@@ -0,0 +1,335 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user