feat: 布局优化

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

@@ -20,7 +20,10 @@
               class="task-layout__nav-link"
               @click="navigateTo(item.type)"
             >
-              <span class="nav-icon" v-html="icons[item.icon]"></span>
+              <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>
@@ -34,84 +37,22 @@
         <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 { computed, defineAsyncComponent } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { MenuOutlined } from '@ant-design/icons-vue'
+import { VideoCameraOutlined, UserOutlined } 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'
   }
@@ -149,29 +90,12 @@ const currentComponent = computed(() => {
 })
 
 // 导航到指定类型
-const navigateTo = (type, closeMobile = false) => {
+const navigateTo = (type) => {
   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>
+<style scoped lang="less">
 .task-layout {
   display: flex;
   height: 100%;
@@ -187,23 +111,29 @@ onUnmounted(() => {
   border-right: 1px solid var(--color-border);
   flex-shrink: 0;
   overflow-y: auto;
-}
 
-@media (min-width: 768px) and (max-width: 1199px) {
-  .task-layout__sidebar {
+  @media (max-width: 1199px) {
     width: 200px;
   }
-}
 
-@media (max-width: 767px) {
-  .task-layout__sidebar {
-    display: none;
+  @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: 24px 16px;
+  padding: var(--space-3) var(--space-2);
   border-bottom: 1px solid var(--color-border);
 }
 
@@ -217,58 +147,64 @@ onUnmounted(() => {
 /* 导航列表 */
 .task-layout__nav-list {
   list-style: none;
-  padding: 8px 0;
+  padding: var(--space-1) 0;
   margin: 0;
 }
 
 /* 导航项 */
 .task-layout__nav-item {
-  margin: 4px 8px;
-}
+  margin: 4px var(--space-2);
 
-.task-layout__nav-item.is-active .task-layout__nav-link {
-  background: var(--color-primary);
-  color: #fff;
-}
+  &.is-active {
+    .task-layout__nav-link {
+      background: var(--color-primary);
+      color: #fff;
 
-.task-layout__nav-item.is-active .nav-icon {
-  color: #fff;
+      .nav-icon {
+        color: #fff;
+      }
+    }
+  }
 }
 
 /* 导航链接 */
 .task-layout__nav-link {
   display: flex;
   align-items: center;
-  padding: 12px 16px;
+  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;
-}
 
-.task-layout__nav-link:hover {
-  background: var(--color-bg-2);
-  color: var(--color-primary);
-}
+  &: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;
+  .is-active & {
+    &:hover {
+      background: var(--color-primary);
+      color: #fff;
+    }
+  }
 }
 
 /* 导航图标 */
 .nav-icon {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 18px;
   height: 18px;
-  margin-right: 12px;
+  margin-right: var(--space-2);
   color: var(--color-text-3);
   transition: color 0.2s;
-}
 
-.task-layout__nav-item.is-active .nav-icon {
-  color: #fff;
+  .task-layout__nav-item.is-active & {
+    color: #fff;
+  }
 }
 
 /* 导航文本 */
@@ -283,6 +219,10 @@ onUnmounted(() => {
   overflow: auto;
   background: var(--color-bg);
   padding: 0;
+
+  @media (max-width: 767px) {
+    padding: 0;
+  }
 }
 
 /* 过渡动画 */
@@ -295,41 +235,4 @@ onUnmounted(() => {
 .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>