refactor(TaskStatusTag): replace a-tag with span element and improve status configuration

- Replace a-tag component with semantic span element for better accessibility
- Introduce centralized STATUS_CONFIG object for consistent status mapping
- Add isRunning computed property for cleaner conditional logic
- Remove redundant statusMap handling and normalize status values
- Add proper CSS class bindings for styling consistency
- Update component structure to use

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

@@ -8,22 +8,13 @@
         </div>
         <ul class="task-layout__nav-list">
           <li
-            v-for="item in navItems"
+            v-for="item in NAV_ITEMS"
             :key="item.type"
             class="task-layout__nav-item"
-            :class="{
-              'is-active': currentType === item.type
-            }"
+            :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>
+            <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>
@@ -41,55 +32,37 @@
 </template>
 
 <script setup>
-import { computed, defineAsyncComponent } from 'vue'
+import { computed, defineAsyncComponent, markRaw } 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 { type } = route.params
+  return !type || type === 'task-management' ? 'mix-task' : type
 })
 
-// 动态导入组件
-const MixTaskList = defineAsyncComponent(() => import('../mix-task/index.vue'))
-const DigitalHumanTaskList = defineAsyncComponent(() => import('../digital-human-task/index.vue'))
-
-// 导航项配置
-const navItems = [
+const NAV_ITEMS = [
   {
     type: 'mix-task',
     label: '混剪视频任务',
-    icon: 'video',
-    component: MixTaskList
+    icon: VideoCameraOutlined,
+    component: markRaw(defineAsyncComponent(() => import('../mix-task/index.vue')))
   },
   {
     type: 'digital-human-task',
     label: '数字人视频任务',
-    icon: 'user',
-    component: DigitalHumanTaskList
+    icon: UserOutlined,
+    component: markRaw(defineAsyncComponent(() => import('../digital-human-task/index.vue')))
   }
 ]
 
-// 当前组件
 const currentComponent = computed(() => {
-  const item = navItems.find(item => item.type === currentType.value)
-  if (!item) {
-    return navItems[0].component
-  }
-  return item.component
+  return NAV_ITEMS.find(item => item.type === currentType.value)?.component ?? NAV_ITEMS[0].component
 })
 
-// 导航到指定类型
 const navigateTo = (type) => {
   router.push(`/system/task-management/${type}`)
 }
@@ -99,141 +72,96 @@ const navigateTo = (type) => {
 .task-layout {
   display: flex;
   height: 100%;
-  width: 100%;
-  position: relative;
   overflow: hidden;
+  background: var(--color-bg-card);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
 }
 
-/* 左侧导航 */
 .task-layout__sidebar {
   width: 220px;
-  background: var(--color-surface);
-  border-right: 1px solid var(--color-border);
+  background: transparent;
+  border-right: 1px solid var(--color-gray-200);
   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 {
-  height: 64px;
+  height: 56px;
   display: flex;
   align-items: center;
-  padding: 0 24px;
-  border-bottom: 1px solid var(--color-border);
-  flex-shrink: 0;
+  padding: 0 var(--space-6);
+  border-bottom: 1px solid var(--color-gray-200);
 }
 
 .task-layout__nav-title {
   margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--color-text);
-  line-height: 1.4;
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-gray-800);
 }
 
-/* 导航列表 */
 .task-layout__nav-list {
   list-style: none;
-  padding: var(--space-1) 0;
+  padding: var(--space-2) 0;
   margin: 0;
 }
 
-/* 导航项 */
 .task-layout__nav-item {
-  margin: 4px var(--space-2);
+  margin: var(--space-1) var(--space-3);
 
-  &.is-active {
-    .task-layout__nav-link {
-      background: var(--color-primary);
+  &.is-active .task-layout__nav-link {
+    background: var(--color-primary-500);
+    color: #fff;
+    box-shadow: var(--shadow-sm);
+
+    .nav-icon {
       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;
+  padding: var(--space-3);
+  border-radius: var(--radius-md);
+  color: var(--color-gray-600);
   cursor: pointer;
+  transition: all var(--duration-fast) var(--ease-out);
 
   &:hover {
-    background: var(--color-bg-2);
-    color: var(--color-primary);
+    background: var(--color-gray-100);
+    color: var(--color-primary-500);
   }
 
-  .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 & {
+  .is-active &:hover {
+    background: var(--color-primary-600);
     color: #fff;
   }
 }
 
-/* 导航文本 */
-.nav-text {
-  font-size: 14px;
-  font-weight: 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);
 }
 
-/* 右侧内容 */
 .task-layout__content {
   flex: 1;
   overflow: auto;
-  background: var(--color-bg);
-  padding: 0;
-
-  @media (max-width: 767px) {
-    padding: 0;
-  }
+  background: var(--color-bg-page);
 }
 
-/* 过渡动画 */
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.25s ease;
+  transition: opacity var(--duration-base) var(--ease-out);
 }
 
 .fade-enter-from,