优化

frontend/app/web-gold/src/layouts/components/FullWidthLayout.vue

@@ -13,6 +13,14 @@ const props = defineProps({
   showPadding: {
     type: Boolean,
     default: true
+  },
+  headerGhost: {
+    type: Boolean,
+    default: false
+  },
+  headerPadding: {
+    type: String,
+    default: undefined
   }
 })
 
@@ -30,6 +38,8 @@ const handleBack = () => {
     <div v-if="$slots.header || showBack" class="full-width-layout__header-wrapper">
        <LayoutHeader 
         :show-back="showBack" 
+        :ghost="headerGhost"
+        :padding="headerPadding"
         @back="handleBack"
       >
         <template #header v-if="$slots.header">

frontend/app/web-gold/src/layouts/components/LayoutHeader.vue

@@ -11,6 +11,14 @@ const props = defineProps({
   showBack: {
     type: Boolean,
     default: false
+  },
+  ghost: {
+    type: Boolean,
+    default: false
+  },
+  padding: {
+    type: String,
+    default: undefined
   }
 })
 
@@ -22,7 +30,11 @@ const handleBack = () => {
 </script>
 
 <template>
-  <div class="layout-header">
+  <div 
+    class="layout-header" 
+    :class="{ 'layout-header--ghost': ghost }"
+    :style="padding ? { padding } : {}"
+  >
     <div class="header-left">
       <a-button v-if="showBack" type="text" @click="handleBack" class="back-btn">
         <template #icon>
@@ -52,6 +64,12 @@ const handleBack = () => {
   background: var(--bg-primary);
   flex-shrink: 0;
   min-height: 64px;
+  transition: all 0.3s;
+
+  &--ghost {
+    background: transparent;
+    border-bottom: none;
+  }
 }
 
 .header-left {

frontend/app/web-gold/src/views/material/MaterialListNew.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="material-list-container">
+  <FullWidthLayout :show-padding="false" class="material-list-layout">
+    <div class="material-list-container">
     <!-- 左侧边栏 -->
     <div class="material-sidebar">
       <!-- 分类标签 -->
@@ -254,6 +255,7 @@
       </a-form>
     </a-modal>
   </div>
+  </FullWidthLayout>
 </template>
 
 <script setup>
@@ -271,6 +273,7 @@ import { message, Modal } from 'ant-design-vue';
 import MaterialUploadModal from '@/components/material/MaterialUploadModal.vue';
 import MaterialService, { MaterialGroupService } from '@/api/material';
 import { useUpload } from '@/composables/useUpload';
+import FullWidthLayout from '@/layouts/components/FullWidthLayout.vue';
 
 // 状态管理
 const loading = ref(false)

frontend/app/web-gold/src/views/material/Mix.vue

@@ -1,5 +1,5 @@
 <template>
-  <FullWidthLayout :show-back="false" @back="router.push('/material/list')">
+  <FullWidthLayout :show-back="false" class="mix-page-layout">
     <!-- 页面标题 -->
     <template #header>
       <div class="page-header">
@@ -9,6 +9,9 @@
         <div class="page-header__content">
           <h1 class="page-header__title">智能混剪</h1>
         </div>
+        <div class="page-header__actions">
+          <a-button @click="router.push('/material/list')">返回列表</a-button>
+        </div>
       </div>
     </template>
 

frontend/app/web-gold/src/views/material/MixTaskList.vue

@@ -1,5 +1,5 @@
 <template>
-  <FullWidthLayout :show-back="true" @back="router.back()">
+  <FullWidthLayout :show-back="true" @back="router.back()" class="mix-task-list-layout">
     <!-- 页面标题 -->
     <template #header>
       <div class="page-header">

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

@@ -133,15 +133,20 @@ const navigateTo = (type) => {
 
 /* 导航头部 */
 .task-layout__nav-header {
-  padding: var(--space-3) var(--space-2);
+  height: 64px;
+  display: flex;
+  align-items: center;
+  padding: 0 24px;
   border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
 }
 
 .task-layout__nav-title {
   margin: 0;
-  font-size: 16px;
+  font-size: 18px;
   font-weight: 600;
   color: var(--color-text);
+  line-height: 1.4;
 }
 
 /* 导航列表 */