From aa81a1aebc044a1d01d9b1ba90bd4dc96ac31aba Mon Sep 17 00:00:00 2001
From: sion123 <450702724@qq.com>
Date: Sun, 18 Jan 2026 01:07:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B8=83=E5=B1=80=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .claude/settings.local.json                   |   6 +-
 .../web-gold/src/layouts/LayoutExamples.vue   | 237 ------------------
 frontend/app/web-gold/src/router/index.js     |   4 +-
 .../src/views/material/MixTaskList.vue        | 235 ++++++++++-------
 .../task-management/components/.gitkeep       |   0
 .../components/TaskActionButtons.vue          |   3 +-
 .../components/TaskStatusTag.vue              |   1 +
 .../task-management/composables/.gitkeep      |   0
 .../composables/useTaskOperations.js          |   4 +-
 .../digital-human-task/.gitkeep               |   0
 .../digital-human-task/index.vue              | 220 ++++++++++------
 .../system/task-management/layout/.gitkeep    |   0
 .../task-management/layout/TaskLayout.vue     | 209 +++++----------
 .../system/task-management/mix-task/.gitkeep  |   0
 .../system/task-management/mix-task/index.vue | 185 +++++++++-----
 15 files changed, 474 insertions(+), 630 deletions(-)
 delete mode 100644 frontend/app/web-gold/src/layouts/LayoutExamples.vue
 delete mode 100644 frontend/app/web-gold/src/views/system/task-management/components/.gitkeep
 delete mode 100644 frontend/app/web-gold/src/views/system/task-management/composables/.gitkeep
 delete mode 100644 frontend/app/web-gold/src/views/system/task-management/digital-human-task/.gitkeep
 delete mode 100644 frontend/app/web-gold/src/views/system/task-management/layout/.gitkeep
 delete mode 100644 frontend/app/web-gold/src/views/system/task-management/mix-task/.gitkeep

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 2f700919ad..1ad83c6ebf 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -62,7 +62,11 @@
       "mcp__server-mysql__describe_table",
       "mcp__server-mysql__execute",
       "mcp__server-mysql__query",
-      "Bash(/d/projects/sionrui/.claude/skills/ui-ux-pro-max/python scripts/search.py:*)"
+      "Bash(/d/projects/sionrui/.claude/skills/ui-ux-pro-max/python scripts/search.py:*)",
+      "Skill(code-simplifier)",
+      "Skill(code-simplifier:*)",
+      "Bash(npm run lint:es -- --no-fix src/views/material/MixTaskList.vue)",
+      "Bash(npm run)"
     ],
     "deny": [],
     "ask": []
diff --git a/frontend/app/web-gold/src/layouts/LayoutExamples.vue b/frontend/app/web-gold/src/layouts/LayoutExamples.vue
deleted file mode 100644
index a68f616981..0000000000
--- a/frontend/app/web-gold/src/layouts/LayoutExamples.vue
+++ /dev/null
@@ -1,237 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-import {
-  BasicLayout,
-  CardLayout,
-  TabLayout,
-  FullWidthLayout,
-  FormLayout
-} from './components'
-
-// Tab Layout 示例数据
-const tabs = ref([
-  {
-    key: 'tab1',
-    tab: '标签页1',
-    forceRender: true
-  },
-  {
-    key: 'tab2',
-    tab: '标签页2',
-    forceRender: true
-  },
-  {
-    key: 'tab3',
-    tab: '标签页3',
-    forceRender: false
-  }
-])
-
-const activeTabKey = ref('tab1')
-
-// Form Layout 示例
-const formData = ref({
-  name: '',
-  email: '',
-  description: ''
-})
-
-const submitLoading = ref(false)
-
-const handleFormSubmit = () => {
-  submitLoading.value = true
-  setTimeout(() => {
-    submitLoading.value = false
-    console.log('表单提交:', formData.value)
-  }, 2000)
-}
-
-const handleFormCancel = () => {
-  console.log('表单取消')
-}
-</script>
-
-<template>
-  <div class="layout-examples">
-    <h2>布局组件使用示例</h2>
-
-    <!-- 1. BasicLayout 示例 -->
-    <h3>1. BasicLayout - 基础布局</h3>
-    <BasicLayout
-      title="基础布局页面"
-      subtitle="这是一个基础布局的示例，适用于大部分页面"
-      :show-back="true"
-      @back="console.log('返回')"
-    >
-      <template #extra>
-        <a-button type="primary">额外操作</a-button>
-      </template>
-
-      <div class="example-content">
-        <p>这里放置页面内容...</p>
-        <a-table :columns="[]" :data-source="[]" />
-      </div>
-    </BasicLayout>
-
-    <!-- 2. CardLayout 示例 -->
-    <h3>2. CardLayout - 卡片布局</h3>
-    <CardLayout
-      title="卡片布局页面"
-      subtitle="这是一个卡片布局的示例"
-      :show-back="true"
-      :show-padding="true"
-    >
-      <template #extra>
-        <a-button type="primary">操作</a-button>
-      </template>
-
-      <div class="example-content">
-        <p>卡片内容...</p>
-        <a-form layout="vertical">
-          <a-form-item label="名称">
-            <a-input v-model:value="formData.name" placeholder="请输入名称" />
-          </a-form-item>
-        </a-form>
-      </div>
-    </CardLayout>
-
-    <!-- 3. TabLayout 示例 -->
-    <h3>3. TabLayout - 标签页布局</h3>
-    <TabLayout
-      :tabs="tabs"
-      v-model:active-key="activeTabKey"
-      :show-back="true"
-    >
-      <template #extra>
-        <a-button type="primary">标签页操作</a-button>
-      </template>
-
-      <template #tab1>
-        <div class="tab-content">
-          <h4>标签页1的内容</h4>
-          <p>这是第一个标签页的内容...</p>
-        </div>
-      </template>
-
-      <template #tab2>
-        <div class="tab-content">
-          <h4>标签页2的内容</h4>
-          <p>这是第二个标签页的内容...</p>
-        </div>
-      </template>
-
-      <template #tab3>
-        <div class="tab-content">
-          <h4>标签页3的内容</h4>
-          <p>这是第三个标签页的内容...</p>
-        </div>
-      </template>
-    </TabLayout>
-
-    <!-- 4. FullWidthLayout 示例 -->
-    <h3>4. FullWidthLayout - 全宽布局</h3>
-    <FullWidthLayout
-      :show-back="true"
-      :show-padding="true"
-    >
-      <template #header>
-        <div class="custom-header">
-          <h2>自定义头部</h2>
-          <p>这是全宽布局的自定义头部</p>
-        </div>
-      </template>
-
-      <template #extra>
-        <a-button type="primary">全宽操作</a-button>
-      </template>
-
-      <div class="example-content">
-        <p>全宽内容...</p>
-        <a-table :columns="[]" :data-source="[]" />
-      </div>
-    </FullWidthLayout>
-
-    <!-- 5. FormLayout 示例 -->
-    <h3>5. FormLayout - 表单布局</h3>
-    <FormLayout
-      title="表单布局页面"
-      subtitle="这是一个表单布局的示例"
-      :show-back="true"
-      :submit-loading="submitLoading"
-      @submit="handleFormSubmit"
-      @cancel="handleFormCancel"
-    >
-      <a-form layout="vertical">
-        <a-form-item label="名称">
-          <a-input v-model:value="formData.name" placeholder="请输入名称" />
-        </a-form-item>
-
-        <a-form-item label="邮箱">
-          <a-input v-model:value="formData.email" placeholder="请输入邮箱" />
-        </a-form-item>
-
-        <a-form-item label="描述">
-          <a-textarea
-            v-model:value="formData.description"
-            placeholder="请输入描述"
-            :rows="4"
-          />
-        </a-form-item>
-      </a-form>
-    </FormLayout>
-  </div>
-</template>
-
-<style scoped lang="less">
-.layout-examples {
-  padding: 24px;
-  background: var(--color-bg);
-  min-height: 100vh;
-
-  h2 {
-    font-size: 28px;
-    font-weight: 600;
-    color: var(--color-text);
-    margin-bottom: 32px;
-  }
-
-  h3 {
-    font-size: 20px;
-    font-weight: 600;
-    color: var(--color-text);
-    margin: 32px 0 16px 0;
-    padding-bottom: 8px;
-    border-bottom: 2px solid var(--color-primary);
-  }
-
-  .example-content {
-    padding: 24px;
-    background: var(--color-surface);
-    border-radius: var(--radius-card);
-    border: 1px solid var(--color-border);
-    margin-top: 16px;
-  }
-
-  .tab-content {
-    padding: 24px;
-    background: var(--color-bg);
-    border-radius: var(--radius-card);
-    min-height: 300px;
-  }
-
-  .custom-header {
-    h2 {
-      font-size: 18px;
-      font-weight: 600;
-      color: var(--color-text);
-      margin: 0 0 8px 0;
-    }
-
-    p {
-      font-size: 14px;
-      color: var(--color-text-secondary);
-      margin: 0;
-    }
-  }
-}
-</style>
diff --git a/frontend/app/web-gold/src/router/index.js b/frontend/app/web-gold/src/router/index.js
index cbf54f1bfb..6598b79dbf 100644
--- a/frontend/app/web-gold/src/router/index.js
+++ b/frontend/app/web-gold/src/router/index.js
@@ -61,8 +61,8 @@ const routes = [
         path: 'system',
         name: '系统',
         children: [
-          { path: '', redirect: '/system/style-settings' },
-          { path: 'style-settings', name: '风格设置', component: () => import('../views/system/StyleSettings.vue') },
+          // { path: '', redirect: '/system/style-settings' },
+          // { path: 'style-settings', name: '风格设置', component: () => import('../views/system/StyleSettings.vue') },
           {
             path: 'task-management/:type',
             name: '任务中心',
diff --git a/frontend/app/web-gold/src/views/material/MixTaskList.vue b/frontend/app/web-gold/src/views/material/MixTaskList.vue
index c796e8f99d..518e3faee7 100644
--- a/frontend/app/web-gold/src/views/material/MixTaskList.vue
+++ b/frontend/app/web-gold/src/views/material/MixTaskList.vue
@@ -1,59 +1,70 @@
 <template>
-  <div class="mix-task-list">
-    <div class="mix-task-list__header">
-      <h1 class="mix-task-list__title">混剪任务</h1>
-      <div class="mix-task-list__actions">
-        <a-button @click="handleRefresh">
-          <template #icon>
-            <ReloadOutlined />
-          </template>
-          刷新
-        </a-button>
+  <FullWidthLayout :show-back="true" @back="router.back()">
+    <!-- 页面标题 -->
+    <template #header>
+      <div class="page-header">
+        <div class="page-header__icon">
+          <VideoCameraOutlined />
+        </div>
+        <div class="page-header__content">
+          <h1 class="page-header__title">混剪任务</h1>
+          <p class="page-header__subtitle">管理和查看混剪任务的进度和结果</p>
+        </div>
+        <div class="page-header__actions">
+          <a-button @click="handleRefresh">
+            <template #icon>
+              <ReloadOutlined />
+            </template>
+            刷新
+          </a-button>
+        </div>
       </div>
-    </div>
+    </template>
 
-    <!-- 筛选条件 -->
-    <div class="mix-task-list__filters">
-      <a-space>
-        <a-select
-          v-model:value="filters.status"
-          style="width: 120px"
-          placeholder="任务状态"
-          @change="handleFilterChange"
-          allow-clear
-        >
-          <a-select-option value="">全部状态</a-select-option>
-          <a-select-option value="pending">待处理</a-select-option>
-          <a-select-option value="running">处理中</a-select-option>
-          <a-select-option value="success">已完成</a-select-option>
-          <a-select-option value="failed">失败</a-select-option>
-        </a-select>
+    <!-- 页面内容 -->
+    <div class="mix-task-list">
+      <!-- 筛选条件 -->
+      <div class="mix-task-list__filters">
+        <a-space>
+          <a-select
+            v-model:value="filters.status"
+            style="width: 120px"
+            placeholder="任务状态"
+            @change="handleFilterChange"
+            allow-clear
+          >
+            <a-select-option value="">全部状态</a-select-option>
+            <a-select-option value="pending">待处理</a-select-option>
+            <a-select-option value="running">处理中</a-select-option>
+            <a-select-option value="success">已完成</a-select-option>
+            <a-select-option value="failed">失败</a-select-option>
+          </a-select>
 
-        <a-input
-          v-model="filters.title"
-          placeholder="搜索标题"
-          style="width: 200px"
-          allow-clear
-          @press-enter="handleFilterChange"
-        >
-          <template #prefix>
-            <SearchOutlined />
-          </template>
-        </a-input>
+          <a-input
+            v-model="filters.title"
+            placeholder="搜索标题"
+            style="width: 200px"
+            allow-clear
+            @press-enter="handleFilterChange"
+          >
+            <template #prefix>
+              <SearchOutlined />
+            </template>
+          </a-input>
 
-        <a-range-picker
-          v-model:value="filters.createTime"
-          style="width: 300px"
-          format="YYYY-MM-DD"
-          value-format="YYYY-MM-DD"
-          :placeholder="['开始日期', '结束日期']"
-          @change="handleFilterChange"
-        />
+          <a-range-picker
+            v-model:value="filters.createTime"
+            style="width: 300px"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+            :placeholder="['开始日期', '结束日期']"
+            @change="handleFilterChange"
+          />
 
-        <a-button type="primary" @click="handleFilterChange">查询</a-button>
-        <a-button @click="handleResetFilters">重置</a-button>
-      </a-space>
-    </div>
+          <a-button type="primary" @click="handleFilterChange">查询</a-button>
+          <a-button @click="handleResetFilters">重置</a-button>
+        </a-space>
+      </div>
 
     <!-- 任务列表 -->
     <div class="mix-task-list__content">
@@ -73,7 +84,7 @@
             <template v-if="column.key === 'title'">
               <div class="title-cell">
                 <strong>{{ record.title }}</strong>
-                <a-tag v-if="record.text" size="small" style="margin-left: 8px">有文案</a-tag>
+                <a-tag v-if="record.text" size="small" style="margin-left: var(--space-2)">有文案</a-tag>
               </div>
             </template>
 
@@ -200,20 +211,26 @@
         </a-table>
       </a-spin>
     </div>
-  </div>
+    </div>
+  </FullWidthLayout>
 </template>
 
 <script setup>
 import { ref, reactive, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
 import { message, Modal } from 'ant-design-vue'
 import {
   ReloadOutlined,
   SearchOutlined,
   PlayCircleOutlined,
-  DownloadOutlined
+  DownloadOutlined,
+  VideoCameraOutlined
 } from '@ant-design/icons-vue'
 import { MixTaskService } from '@/api/mixTask'
 import { formatDate } from '@/utils/file'
+import FullWidthLayout from '@/layouts/components/FullWidthLayout.vue'
+
+const router = useRouter()
 
 // 数据
 const loading = ref(false)
@@ -567,37 +584,62 @@ const stopAutoRefresh = () => {
 }
 </script>
 
-<style scoped>
-.mix-task-list {
-  padding: 24px;
-  height: 100%;
+<style scoped lang="less">
+// 页面头部样式
+.page-header {
   display: flex;
-  flex-direction: column;
-}
-
-.mix-task-list__header {
-  display: flex;
-  justify-content: space-between;
   align-items: center;
-  margin-bottom: 24px;
+  gap: 16px;
+  margin-bottom: var(--space-3);
+
+  &__icon {
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
+    background: var(--color-primary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 24px;
+    box-shadow: var(--shadow-inset-card);
+  }
+
+  &__content {
+    flex: 1;
+  }
+
+  &__title {
+    font-size: 24px;
+    font-weight: 600;
+    color: var(--color-text);
+    margin: 0;
+    line-height: 1.2;
+  }
+
+  &__subtitle {
+    font-size: 14px;
+    color: var(--color-text-secondary);
+    margin: 4px 0 0;
+  }
+
+  &__actions {
+    display: flex;
+    gap: 12px;
+  }
 }
 
-.mix-task-list__title {
-  font-size: 24px;
-  font-weight: 600;
-  margin: 0;
-}
-
-.mix-task-list__actions {
-  display: flex;
-  gap: 12px;
+.mix-task-list {
+  min-height: calc(100vh - 140px);
+  background: var(--color-bg);
+  padding: var(--space-3) 0;
 }
 
 .mix-task-list__filters {
-  margin-bottom: 24px;
-  padding: 16px;
+  margin-bottom: var(--space-3);
+  padding: var(--space-3);
   background: var(--color-surface);
-  border-radius: var(--radius-card);
+  border-radius: 8px;
   border: 1px solid var(--color-border);
 }
 
@@ -605,9 +647,9 @@ const stopAutoRefresh = () => {
   flex: 1;
   overflow: auto;
   background: var(--color-surface);
-  border-radius: var(--radius-card);
+  border-radius: 8px;
   border: 1px solid var(--color-border);
-  padding: 16px;
+  padding: var(--space-3);
 }
 
 .title-cell {
@@ -617,42 +659,42 @@ const stopAutoRefresh = () => {
 }
 
 .expanded-content {
-  padding: 16px;
-  background: var(--color-bg-2);
-  border-radius: var(--radius-card);
-  margin: 8px;
+  padding: var(--space-3);
+  background: var(--color-bg);
+  border-radius: 8px;
+  margin: var(--space-2);
 }
 
 .task-text {
-  margin-bottom: 16px;
-}
+  margin-bottom: var(--space-3);
 
-.task-text p {
-  margin: 8px 0 0 0;
-  padding: 8px;
-  background: var(--color-surface);
-  border-radius: var(--radius-card);
-  line-height: 1.6;
+  p {
+    margin: var(--space-2) 0 0 0;
+    padding: var(--space-2);
+    background: var(--color-surface);
+    border-radius: 8px;
+    line-height: 1.6;
+  }
 }
 
 .task-results {
-  margin-bottom: 16px;
+  margin-bottom: var(--space-3);
 }
 
 .result-list {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 8px;
+  gap: var(--space-2);
+  margin-top: var(--space-2);
 }
 
 .result-item {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--space-2);
   padding: 6px 12px;
   background: var(--color-surface);
-  border-radius: var(--radius-card);
+  border-radius: 8px;
   font-size: 13px;
 }
 
@@ -662,10 +704,9 @@ const stopAutoRefresh = () => {
 }
 
 .task-error {
-  margin-bottom: 8px;
+  margin-bottom: var(--space-2);
 }
 
-/* 确保按钮内的图标和文字对齐 */
 :deep(.ant-btn .anticon) {
   vertical-align: middle;
 }
diff --git a/frontend/app/web-gold/src/views/system/task-management/components/.gitkeep b/frontend/app/web-gold/src/views/system/task-management/components/.gitkeep
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/frontend/app/web-gold/src/views/system/task-management/components/TaskActionButtons.vue b/frontend/app/web-gold/src/views/system/task-management/components/TaskActionButtons.vue
index 5948ba4030..717c0e697b 100644
--- a/frontend/app/web-gold/src/views/system/task-management/components/TaskActionButtons.vue
+++ b/frontend/app/web-gold/src/views/system/task-management/components/TaskActionButtons.vue
@@ -94,7 +94,8 @@ const operations = useTaskOperations(
   {
     deleteApi,
     cancelApi,
-    retryApi
+    retryApi,
+    getSignedUrlsApi
   },
   props.onSuccess
 )
diff --git a/frontend/app/web-gold/src/views/system/task-management/components/TaskStatusTag.vue b/frontend/app/web-gold/src/views/system/task-management/components/TaskStatusTag.vue
index 1499c60c29..15e5d1dc35 100644
--- a/frontend/app/web-gold/src/views/system/task-management/components/TaskStatusTag.vue
+++ b/frontend/app/web-gold/src/views/system/task-management/components/TaskStatusTag.vue
@@ -43,6 +43,7 @@ const text = computed(() => {
     PENDING: '待处理',
     RUNNING: '处理中',
     SUCCESS: '已完成',
+    PROCESSING: '处理中',
     FAILED: '失败',
     CANCELED: '已取消',
     ...props.statusMap
diff --git a/frontend/app/web-gold/src/views/system/task-management/composables/.gitkeep b/frontend/app/web-gold/src/views/system/task-management/composables/.gitkeep
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/frontend/app/web-gold/src/views/system/task-management/composables/useTaskOperations.js b/frontend/app/web-gold/src/views/system/task-management/composables/useTaskOperations.js
index f12cb6a3ca..3898c489e9 100644
--- a/frontend/app/web-gold/src/views/system/task-management/composables/useTaskOperations.js
+++ b/frontend/app/web-gold/src/views/system/task-management/composables/useTaskOperations.js
@@ -2,12 +2,12 @@ import { message, Modal } from 'ant-design-vue'
 
 /**
  * 任务操作通用逻辑 Composable
- * @param {Object} apis - API 对象，包含 deleteApi, cancelApi, retryApi
+ * @param {Object} apis - API 对象，包含 deleteApi, cancelApi, retryApi, getSignedUrlsApi
  * @param {Function} onSuccess - 操作成功后的回调函数
  * @returns {Object} 操作方法
  */
 export function useTaskOperations(apis, onSuccess) {
-  const { deleteApi, cancelApi, retryApi } = apis
+  const { deleteApi, cancelApi, retryApi, getSignedUrlsApi } = apis
 
   // 删除任务
   const handleDelete = (id) => {
diff --git a/frontend/app/web-gold/src/views/system/task-management/digital-human-task/.gitkeep b/frontend/app/web-gold/src/views/system/task-management/digital-human-task/.gitkeep
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/frontend/app/web-gold/src/views/system/task-management/digital-human-task/index.vue b/frontend/app/web-gold/src/views/system/task-management/digital-human-task/index.vue
index cc66c13ab6..59e1efb4aa 100644
--- a/frontend/app/web-gold/src/views/system/task-management/digital-human-task/index.vue
+++ b/frontend/app/web-gold/src/views/system/task-management/digital-human-task/index.vue
@@ -2,10 +2,10 @@
   <div class="digital-human-task-page">
     <!-- 筛选条件 -->
     <div class="digital-human-task-page__filters">
-      <a-space>
+      <a-space :size="16">
         <a-select
           v-model:value="filters.status"
-          style="width: 120px"
+          class="filter-select"
           placeholder="任务状态"
           @change="handleFilterChange"
           allow-clear
@@ -20,8 +20,8 @@
 
         <a-input
           v-model:value="filters.keyword"
+          class="filter-input"
           placeholder="搜索任务名称"
-          style="width: 200px"
           allow-clear
           @press-enter="handleFilterChange"
         >
@@ -32,15 +32,19 @@
 
         <a-range-picker
           v-model:value="filters.dateRange"
-          style="width: 300px"
+          class="filter-date-picker"
           format="YYYY-MM-DD"
           value-format="YYYY-MM-DD"
           :placeholder="['开始日期', '结束日期']"
           @change="handleFilterChange"
         />
 
-        <a-button type="primary" @click="handleFilterChange">查询</a-button>
-        <a-button @click="handleResetFilters">重置</a-button>
+        <a-button type="primary" class="filter-button" @click="handleFilterChange">
+          查询
+        </a-button>
+        <a-button class="filter-button" @click="handleResetFilters">
+          重置
+        </a-button>
       </a-space>
     </div>
 
@@ -437,58 +441,92 @@ onMounted(() => {
 })
 </script>
 
-<style scoped>
+<style scoped lang="less">
 .digital-human-task-page {
-  padding: 16px;
+  padding: var(--space-3);
   height: 100%;
   display: flex;
   flex-direction: column;
-  gap: 16px;
-}
+  gap: var(--space-3);
 
-.digital-human-task-page__filters {
-  padding: 16px;
-  background: var(--color-surface);
-  border-radius: var(--radius-card);
-}
+  &__filters {
+    padding: var(--space-3);
+    background: var(--color-surface);
+    border-radius: var(--radius-card);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
 
-.digital-human-task-page__content {
-  flex: 1;
-  overflow: auto;
-  background: var(--color-surface);
-  border-radius: var(--radius-card);
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
+    .filter-select,
+    .filter-input {
+      width: 200px;
+
+      @media (max-width: 1199px) {
+        width: 160px;
+      }
+
+      @media (max-width: 767px) {
+        width: 100%;
+      }
+    }
+
+    .filter-date-picker {
+      width: 280px;
+
+      @media (max-width: 1199px) {
+        width: 240px;
+      }
+
+      @media (max-width: 767px) {
+        width: 100%;
+      }
+    }
+
+    .filter-button {
+      min-width: 80px;
+
+      @media (max-width: 767px) {
+        min-width: auto;
+      }
+    }
+  }
+
+  &__content {
+    flex: 1;
+    overflow: auto;
+    background: var(--color-surface);
+    border-radius: var(--radius-card);
+    padding: var(--space-3);
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+  }
 }
 
 /* 批量操作栏 */
 .batch-actions {
-  margin-bottom: 16px;
-}
+  margin-bottom: var(--space-3);
 
-/* 表格容器 */
-.batch-actions + .ant-spin {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
+  + .ant-spin {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
 
-.batch-actions + .ant-spin :deep(.ant-spin-container) {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
+    :deep(.ant-spin-container) {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
 
-.batch-actions + .ant-spin :deep(.ant-table) {
-  flex: 1;
+    :deep(.ant-table) {
+      flex: 1;
+    }
+  }
 }
 
 /* 任务名称单元格 */
 .task-name-cell {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--space-1);
 }
 
 /* 文本截断 */
@@ -502,55 +540,60 @@ onMounted(() => {
 
 /* 展开内容 */
 .expanded-content {
-  padding: 16px;
+  padding: var(--space-3);
   background: var(--color-bg-2);
   border-radius: var(--radius-card);
-  margin: 8px;
+  margin: var(--space-2);
 }
 
 .task-text {
-  margin-bottom: 16px;
-}
+  margin-bottom: var(--space-3);
 
-.task-text p {
-  margin: 8px 0 0 0;
-  padding: 8px;
-  background: var(--color-surface);
-  border-radius: var(--radius-card);
-  line-height: 1.6;
+  p {
+    margin: var(--space-2) 0 0 0;
+    padding: var(--space-2);
+    background: var(--color-surface);
+    border-radius: var(--radius-card);
+    line-height: 1.6;
+  }
 }
 
 .task-params {
-  margin-bottom: 16px;
-}
+  margin-bottom: var(--space-3);
 
-.params-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 12px;
-  margin-top: 8px;
-}
+  .params-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: var(--space-2);
+    margin-top: var(--space-2);
 
-.param-item {
-  display: flex;
-  align-items: center;
-  padding: 8px;
-  background: var(--color-surface);
-  border-radius: var(--radius-card);
-}
+    .param-item {
+      display: flex;
+      align-items: center;
+      padding: var(--space-2);
+      background: var(--color-surface);
+      border-radius: var(--radius-card);
+      transition: all 0.2s;
 
-.param-label {
-  font-weight: 600;
-  margin-right: 8px;
-  color: var(--color-text-2);
-}
+      &:hover {
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      }
+    }
 
-.param-value {
-  color: var(--color-text);
+    .param-label {
+      font-weight: 600;
+      margin-right: var(--space-2);
+      color: var(--color-text-2);
+    }
+
+    .param-value {
+      color: var(--color-text);
+    }
+  }
 }
 
 .task-result {
-  margin-bottom: 16px;
+  margin-bottom: var(--space-3);
 }
 
 .processing-tip {
@@ -559,7 +602,7 @@ onMounted(() => {
 }
 
 .task-error {
-  margin-bottom: 8px;
+  margin-bottom: var(--space-2);
 }
 
 /* 确保按钮内的图标和文字对齐 */
@@ -576,4 +619,35 @@ onMounted(() => {
   background: var(--color-bg-2);
   font-weight: 600;
 }
+
+/* 响应式优化 */
+@media (max-width: 767px) {
+  .digital-human-task-page {
+    padding: var(--space-2);
+
+    &__filters {
+      padding: var(--space-2);
+
+      .ant-space {
+        width: 100%;
+        flex-wrap: wrap;
+
+        .ant-select,
+        .ant-input,
+        .ant-picker,
+        .ant-btn {
+          width: calc(50% - var(--space-1)) !important;
+        }
+      }
+    }
+
+    &__content {
+      padding: var(--space-2);
+    }
+  }
+
+  .batch-actions {
+    margin-bottom: var(--space-2);
+  }
+}
 </style>
diff --git a/frontend/app/web-gold/src/views/system/task-management/layout/.gitkeep b/frontend/app/web-gold/src/views/system/task-management/layout/.gitkeep
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/frontend/app/web-gold/src/views/system/task-management/layout/TaskLayout.vue b/frontend/app/web-gold/src/views/system/task-management/layout/TaskLayout.vue
index 4470b79418..e0932da1fe 100644
--- a/frontend/app/web-gold/src/views/system/task-management/layout/TaskLayout.vue
+++ b/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>
diff --git a/frontend/app/web-gold/src/views/system/task-management/mix-task/.gitkeep b/frontend/app/web-gold/src/views/system/task-management/mix-task/.gitkeep
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/frontend/app/web-gold/src/views/system/task-management/mix-task/index.vue b/frontend/app/web-gold/src/views/system/task-management/mix-task/index.vue
index eb1daff898..506f4f7b1e 100644
--- a/frontend/app/web-gold/src/views/system/task-management/mix-task/index.vue
+++ b/frontend/app/web-gold/src/views/system/task-management/mix-task/index.vue
@@ -2,10 +2,10 @@
   <div class="mix-task-page">
     <!-- 筛选条件 -->
     <div class="mix-task-page__filters">
-      <a-space>
+      <a-space :size="16">
         <a-select
           v-model:value="filters.status"
-          style="width: 120px"
+          class="filter-select"
           placeholder="任务状态"
           @change="handleFilterChange"
           allow-clear
@@ -19,8 +19,8 @@
 
         <a-input
           v-model:value="filters.keyword"
+          class="filter-input"
           placeholder="搜索标题"
-          style="width: 200px"
           allow-clear
           @press-enter="handleFilterChange"
         >
@@ -31,15 +31,19 @@
 
         <a-range-picker
           v-model:value="filters.dateRange"
-          style="width: 300px"
+          class="filter-date-picker"
           format="YYYY-MM-DD"
           value-format="YYYY-MM-DD"
           :placeholder="['开始日期', '结束日期']"
           @change="handleFilterChange"
         />
 
-        <a-button type="primary" @click="handleFilterChange">查询</a-button>
-        <a-button @click="handleResetFilters">重置</a-button>
+        <a-button type="primary" class="filter-button" @click="handleFilterChange">
+          查询
+        </a-button>
+        <a-button class="filter-button" @click="handleResetFilters">
+          重置
+        </a-button>
       </a-space>
     </div>
 
@@ -106,17 +110,6 @@
             <!-- 操作列 -->
             <template v-else-if="column.key === 'actions'">
               <a-space>
-                <a-button
-                  v-if="isStatus(record.status, 'success') && record.outputUrls && record.outputUrls.length > 0"
-                  type="primary"
-                  size="small"
-                  @click="handleDownloadAll(record.id)"
-                >
-                  <template #icon>
-                    <DownloadOutlined />
-                  </template>
-                  <span>下载</span>
-                </a-button>
                 <a-button
                   v-if="isStatus(record.status, 'running')"
                   size="small"
@@ -150,19 +143,17 @@
                 <p>{{ record.text }}</p>
               </div>
 
-              <!-- 生成结果 -->
               <div v-if="record.outputUrls && record.outputUrls.length > 0" class="task-results">
-                <strong>生成结果：</strong>
                 <div class="result-list">
                   <div
                     v-for="(url, index) in record.outputUrls"
                     :key="index"
+                    @click="handleDownloadSignedUrl(record.id, index)"
                     class="result-item"
                   >
                     <a-button
                       v-if="isStatus(record.status, 'success')"
                       type="link"
-                      @click="handlePreview(record.id, index)"
                     >
                       <PlayCircleOutlined />
                       视频 {{ index + 1 }}
@@ -171,7 +162,6 @@
                       v-if="isStatus(record.status, 'success')"
                       type="link"
                       size="small"
-                      @click="handleDownloadSignedUrl(record.id, index)"
                     >
                       <DownloadOutlined />
                     </a-button>
@@ -385,75 +375,115 @@ onMounted(() => {
 })
 </script>
 
-<style scoped>
+<style scoped lang="less">
 .mix-task-page {
-  padding: 16px;
+  padding: var(--space-3);
   height: 100%;
   display: flex;
   flex-direction: column;
-  gap: 16px;
-}
+  gap: var(--space-3);
 
-.mix-task-page__filters {
-  padding: 16px;
-  background: var(--color-surface);
-  border-radius: var(--radius-card);
-}
+  &__filters {
+    padding: var(--space-3);
+    background: var(--color-surface);
+    border-radius: var(--radius-card);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
 
-.mix-task-page__content {
-  flex: 1;
-  overflow: auto;
-  background: var(--color-surface);
-  border-radius: var(--radius-card);
-  padding: 16px;
+    .filter-select,
+    .filter-input {
+      width: 200px;
+
+      @media (max-width: 1199px) {
+        width: 160px;
+      }
+
+      @media (max-width: 767px) {
+        width: 100%;
+      }
+    }
+
+    .filter-date-picker {
+      width: 280px;
+
+      @media (max-width: 1199px) {
+        width: 240px;
+      }
+
+      @media (max-width: 767px) {
+        width: 100%;
+      }
+    }
+
+    .filter-button {
+      min-width: 80px;
+
+      @media (max-width: 767px) {
+        min-width: auto;
+      }
+    }
+  }
+
+  &__content {
+    flex: 1;
+    overflow: auto;
+    background: var(--color-surface);
+    border-radius: var(--radius-card);
+    padding: var(--space-3);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+  }
 }
 
 /* 标题单元格 */
 .title-cell {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--space-1);
 }
 
 /* 展开内容 */
 .expanded-content {
-  padding: 16px;
+  padding: var(--space-3);
   background: var(--color-bg-2);
   border-radius: var(--radius-card);
-  margin: 8px;
+  margin: var(--space-2);
 }
 
 .task-text {
-  margin-bottom: 16px;
-}
+  margin-bottom: var(--space-3);
 
-.task-text p {
-  margin: 8px 0 0 0;
-  padding: 8px;
-  background: var(--color-surface);
-  border-radius: var(--radius-card);
-  line-height: 1.6;
+  p {
+    margin: var(--space-2) 0 0 0;
+    padding: var(--space-2);
+    background: var(--color-surface);
+    border-radius: var(--radius-card);
+    line-height: 1.6;
+  }
 }
 
 .task-results {
-  margin-bottom: 16px;
-}
+  margin-bottom: var(--space-3);
 
-.result-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 8px;
-}
+  .result-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    margin-top: var(--space-2);
 
-.result-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 12px;
-  background: var(--color-surface);
-  border-radius: var(--radius-card);
-  font-size: 13px;
+    .result-item {
+      display: flex;
+      align-items: center;
+      gap: var(--space-2);
+      padding: var(--space-1) var(--space-2);
+      background: var(--color-surface);
+      border-radius: var(--radius-card);
+      font-size: 13px;
+      transition: all 0.2s;
+
+      &:hover {
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      }
+    }
+  }
 }
 
 .processing-tip {
@@ -462,7 +492,7 @@ onMounted(() => {
 }
 
 .task-error {
-  margin-bottom: 8px;
+  margin-bottom: var(--space-2);
 }
 
 /* 确保按钮内的图标和文字对齐 */
@@ -479,4 +509,31 @@ onMounted(() => {
   background: var(--color-bg-2);
   font-weight: 600;
 }
+
+/* 响应式优化 */
+@media (max-width: 767px) {
+  .mix-task-page {
+    padding: var(--space-2);
+
+    &__filters {
+      padding: var(--space-2);
+
+      .ant-space {
+        width: 100%;
+        flex-wrap: wrap;
+
+        .ant-select,
+        .ant-input,
+        .ant-picker,
+        .ant-btn {
+          width: calc(50% - var(--space-1)) !important;
+        }
+      }
+    }
+
+    &__content {
+      padding: var(--space-2);
+    }
+  }
+}
 </style>