feat: 优化

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

@@ -1,47 +1,41 @@
 <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>
+    <!-- 顶部Tab栏 -->
+    <div class="task-layout__header">
+      <div class="task-tabs">
+        <div
+          v-for="item in NAV_ITEMS"
+          :key="item.type"
+          class="task-tab"
+          :class="{ 'is-active': currentType === item.type }"
+          @click="currentType = item.type"
+        >
+          <component :is="item.icon" class="tab-icon" />
+          <span>{{ item.label }}</span>
         </div>
-        <ul class="task-layout__nav-list">
-          <li
-            v-for="item in NAV_ITEMS"
-            :key="item.type"
-            class="task-layout__nav-item"
-            :class="{ 'is-active': currentType === item.type }"
-          >
-            <a class="task-layout__nav-link" @click="navigateTo(item.type)">
-              <component :is="item.icon" class="nav-icon" />
-              <span class="nav-text">{{ item.label }}</span>
-            </a>
-          </li>
-        </ul>
-      </nav>
-    </aside>
+      </div>
+    </div>
 
-    <!-- 右侧内容 -->
-    <main class="task-layout__content">
+    <!-- 内容区 -->
+    <div class="task-layout__content">
       <transition name="fade" mode="out-in">
         <component :is="currentComponent" :key="currentType" />
       </transition>
-    </main>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { computed, defineAsyncComponent, markRaw } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { ref, computed, defineAsyncComponent, markRaw, onMounted, watch } from 'vue'
 import { VideoCameraOutlined, UserOutlined } from '@ant-design/icons-vue'
 
-const route = useRoute()
-const router = useRouter()
+const STORAGE_KEY = 'task-management-active-tab'
 
-const currentType = computed(() => {
-  const { type } = route.params
-  return !type || type === 'task-management' ? 'mix-task' : type
+const currentType = ref(localStorage.getItem(STORAGE_KEY) || 'mix-task')
+
+// 监听变化，同步到localStorage
+watch(currentType, (val) => {
+  localStorage.setItem(STORAGE_KEY, val)
 })
 
 const NAV_ITEMS = [
@@ -62,95 +56,64 @@ const NAV_ITEMS = [
 const currentComponent = computed(() => {
   return NAV_ITEMS.find(item => item.type === currentType.value)?.component ?? NAV_ITEMS[0].component
 })
-
-const navigateTo = (type) => {
-  router.push(`/system/task-management/${type}`)
-}
 </script>
 
 <style scoped lang="less">
 .task-layout {
-  display: flex;
   height: 100%;
-  overflow: hidden;
+  display: flex;
+  flex-direction: column;
   background: var(--color-bg-card);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-sm);
+  overflow: hidden;
 }
 
-.task-layout__sidebar {
-  width: 220px;
-  background: transparent;
-  border-right: 1px solid var(--color-gray-200);
+.task-layout__header {
   flex-shrink: 0;
-  overflow-y: auto;
-}
-
-.task-layout__nav-header {
-  height: 56px;
-  display: flex;
-  align-items: center;
-  padding: 0 var(--space-6);
+  padding: 0 var(--space-4);
   border-bottom: 1px solid var(--color-gray-200);
+  background: var(--color-bg-card);
 }
 
-.task-layout__nav-title {
-  margin: 0;
-  font-size: var(--font-size-lg);
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-gray-800);
+.task-tabs {
+  display: flex;
+  gap: var(--space-1);
+  height: 48px;
 }
 
-.task-layout__nav-list {
-  list-style: none;
-  padding: var(--space-2) 0;
-  margin: 0;
-}
-
-.task-layout__nav-item {
-  margin: var(--space-1) var(--space-3);
-
-  &.is-active .task-layout__nav-link {
-    background: var(--color-primary-500);
-    color: #fff;
-    box-shadow: var(--shadow-sm);
-
-    .nav-icon {
-      color: #fff;
-    }
-  }
-}
-
-.task-layout__nav-link {
+.task-tab {
   display: flex;
   align-items: center;
-  padding: var(--space-3);
-  border-radius: var(--radius-md);
-  color: var(--color-gray-600);
+  gap: var(--space-2);
+  padding: 0 var(--space-4);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-gray-500);
   cursor: pointer;
+  border-bottom: 2px solid transparent;
   transition: all var(--duration-fast) var(--ease-out);
+  user-select: none;
 
   &:hover {
-    background: var(--color-gray-100);
     color: var(--color-primary-500);
   }
 
-  .is-active &:hover {
-    background: var(--color-primary-600);
-    color: #fff;
+  &.is-active {
+    color: var(--color-primary-500);
+    border-bottom-color: var(--color-primary-500);
+
+    .tab-icon {
+      color: var(--color-primary-500);
+    }
   }
-}
 
-.nav-icon {
-  width: 18px;
-  height: 18px;
-  margin-right: var(--space-2);
-  color: var(--color-gray-500);
-}
-
-.nav-text {
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-medium);
+  .tab-icon {
+    width: 16px;
+    height: 16px;
+    color: var(--color-gray-400);
+    transition: color var(--duration-fast) var(--ease-out);
+  }
 }
 
 .task-layout__content {

frontend/app/web-gold/src/views/system/task-management/mix-task/index.vue

@@ -416,4 +416,10 @@ onMounted(fetchList)
 :deep(.ant-btn .anticon) {
   line-height: 0;
 }
+
+/* 修复 popconfirm 按钮对齐 */
+:deep(.ant-popover .ant-popover-buttons) {
+  display: flex;
+  gap: 8px;
+}
 </style>