From 218f01d6b16c9d0220ec55c9e0cef8f0fd2ea6c9 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sat, 17 Jan 2026 11:33:27 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=AD=9B=E9=80=89=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6UI=EF=BC=9A=E6=B7=B1=E7=81=B0=E8=89=B2=E8=83=8C?=
 =?UTF-8?q?=E6=99=AF=E3=80=81=E7=BB=BF=E8=89=B2=E9=80=89=E4=B8=AD=E6=96=87?=
 =?UTF-8?q?=E5=AD=97=E3=80=81=E6=B7=BB=E5=8A=A0label=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/TaskFilters.vue | 600 +++++++++++++++
 frontend/src/types/components.d.ts      |   1 +
 frontend/src/views/TaskHall.vue         | 955 +++++-------------------
 3 files changed, 808 insertions(+), 748 deletions(-)
 create mode 100644 frontend/src/components/TaskFilters.vue

diff --git a/frontend/src/components/TaskFilters.vue b/frontend/src/components/TaskFilters.vue
new file mode 100644
index 0000000..511f177
--- /dev/null
+++ b/frontend/src/components/TaskFilters.vue
@@ -0,0 +1,600 @@
+<template>
+  <div class="search-filter-bar chart-card">
+    <!-- 第一行：搜索、排序和统计 -->
+    <div class="search-row">
+      <a-input-search
+        v-model:value="localFilters.keyword"
+        :placeholder="searchPlaceholder"
+        class="search-input"
+        @search="handleFilterChange"
+        @pressEnter="handleFilterChange"
+      />
+      <a-select
+        v-model:value="localFilters.sortBy"
+        placeholder="排序方式"
+        class="sort-select"
+        @change="handleFilterChange"
+      >
+        <a-select-option
+          v-for="option in sortOptions"
+          :key="option.value"
+          :value="option.value"
+          :label="option.label"
+        >
+          {{ option.label }}
+        </a-select-option>
+      </a-select>
+      <span class="stats-text">{{ statsText }}</span>
+    </div>
+
+    <!-- 第二行：筛选条件 -->
+    <div class="filter-row">
+      <!-- 状态筛选 -->
+      <a-select
+        v-if="showStatus"
+        v-model:value="localFilters.status"
+        :placeholder="statusPlaceholder"
+        class="filter-select"
+        allowClear
+        @change="handleFilterChange"
+      >
+        <a-select-option
+          v-for="option in statusOptions"
+          :key="option.value"
+          :value="option.value"
+          :label="option.label"
+        >
+          {{ option.label }}
+        </a-select-option>
+      </a-select>
+
+      <!-- 任务类型筛选 -->
+      <a-select
+        v-if="showTaskType"
+        v-model:value="localFilters.taskTypeId"
+        placeholder="任务类型"
+        class="filter-select"
+        allowClear
+        @change="handleFilterChange"
+      >
+        <a-select-option
+          v-for="type in demandTypes"
+          :key="type.id"
+          :value="type.id"
+          :label="type.name"
+        >
+          {{ type.name }}
+        </a-select-option>
+      </a-select>
+
+      <!-- 需求类型筛选（新品/优化/视频/实拍） -->
+      <a-select
+        v-if="showTaskSubType"
+        v-model:value="localFilters.taskSubType"
+        placeholder="需求类型"
+        class="filter-select"
+        allowClear
+        @change="handleFilterChange"
+      >
+        <a-select-option
+          v-for="subType in taskSubTypes"
+          :key="subType.id"
+          :value="subType.name"
+          :label="subType.name"
+        >
+          {{ subType.name }}
+        </a-select-option>
+      </a-select>
+
+      <!-- 品牌筛选 -->
+      <a-select
+        v-if="showBrand"
+        v-model:value="localFilters.brandId"
+        placeholder="品牌"
+        class="filter-select"
+        allowClear
+        @change="handleFilterChange"
+      >
+        <a-select-option
+          v-for="brand in brands"
+          :key="brand.id"
+          :value="brand.id"
+          :label="brand.name"
+        >
+          {{ brand.name }}
+        </a-select-option>
+      </a-select>
+
+      <!-- 类目筛选 -->
+      <a-select
+        v-if="showCategory"
+        v-model:value="localFilters.categoryId"
+        placeholder="类目"
+        class="filter-select"
+        allowClear
+        @change="handleFilterChange"
+      >
+        <a-select-option
+          v-for="category in categories"
+          :key="category.id"
+          :value="category.id"
+          :label="category.name"
+        >
+          {{ category.name }}
+        </a-select-option>
+      </a-select>
+
+      <!-- 平台筛选 -->
+      <a-select
+        v-if="showPlatform"
+        v-model:value="localFilters.platformId"
+        placeholder="平台"
+        class="filter-select"
+        allowClear
+        @change="handleFilterChange"
+      >
+        <a-select-option
+          v-for="platform in platforms"
+          :key="platform.id"
+          :value="platform.id"
+          :label="platform.name"
+        >
+          {{ platform.name }}
+        </a-select-option>
+      </a-select>
+
+      <!-- 接单部门筛选 -->
+      <a-select
+        v-if="showReceivingDept"
+        v-model:value="localFilters.filterDeptId"
+        placeholder="接单部门"
+        class="filter-select"
+        allowClear
+        @change="handleFilterChange"
+      >
+        <a-select-option
+          v-for="dept in receivingDeptList"
+          :key="dept.id"
+          :value="dept.id"
+          :label="dept.deptName"
+        >
+          {{ dept.deptName }}
+        </a-select-option>
+      </a-select>
+
+      <!-- 时间范围筛选 -->
+      <a-select
+        v-if="showTimeRange"
+        v-model:value="localFilters.timeRange"
+        :placeholder="timeRangePlaceholder"
+        class="filter-select"
+        allowClear
+        @change="handleFilterChange"
+      >
+        <a-select-option value="today" label="今天">今天</a-select-option>
+        <a-select-option value="week" label="本周">本周</a-select-option>
+        <a-select-option value="month" label="本月">本月</a-select-option>
+      </a-select>
+
+      <!-- 积分范围筛选 -->
+      <div v-if="showScoreRange" class="score-range">
+        <a-input
+          v-model:value="localFilters.minScore"
+          placeholder="最小积分"
+          class="score-input"
+          @pressEnter="handleFilterChange"
+        />
+        <span class="score-separator">-</span>
+        <a-input
+          v-model:value="localFilters.maxScore"
+          placeholder="最大积分"
+          class="score-input"
+          @pressEnter="handleFilterChange"
+        />
+      </div>
+
+      <!-- 进度范围筛选（用于进行中任务） -->
+      <div v-if="showProgressRange" class="score-range">
+        <a-input-number
+          v-model:value="localFilters.minProgress"
+          placeholder="最小进度%"
+          class="score-input"
+          :min="0"
+          :max="100"
+          @change="handleFilterChange"
+        />
+        <span class="score-separator">-</span>
+        <a-input-number
+          v-model:value="localFilters.maxProgress"
+          placeholder="最大进度%"
+          class="score-input"
+          :min="0"
+          :max="100"
+          @change="handleFilterChange"
+        />
+      </div>
+
+      <a-button @click="handleReset" class="reset-btn">重置</a-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, watch, PropType } from 'vue'
+
+// 筛选项类型定义
+interface FilterOption {
+  value: string
+  label: string
+}
+
+interface DemandType {
+  id: number
+  name: string
+}
+
+interface TaskSubType {
+  id: number
+  name: string
+}
+
+interface Brand {
+  id: number
+  name: string
+}
+
+interface Category {
+  id: number
+  name: string
+}
+
+interface Platform {
+  id: number
+  name: string
+}
+
+interface Department {
+  id: number
+  deptName: string
+}
+
+interface FilterValues {
+  keyword?: string
+  status?: string
+  sortBy?: string
+  taskTypeId?: number
+  taskSubType?: string
+  brandId?: number
+  categoryId?: number
+  platformId?: number
+  filterDeptId?: number
+  timeRange?: string
+  minScore?: number
+  maxScore?: number
+  minProgress?: number
+  maxProgress?: number
+}
+
+// Props 定义
+const props = defineProps({
+  // 筛选条件值（双向绑定）
+  modelValue: {
+    type: Object as PropType<FilterValues>,
+    default: () => ({})
+  },
+  // 搜索框占位符
+  searchPlaceholder: {
+    type: String,
+    default: '搜索任务编号、标题、SPU信息、发布人...'
+  },
+  // 统计文本
+  statsText: {
+    type: String,
+    default: '共 0 个任务'
+  },
+  // 排序选项
+  sortOptions: {
+    type: Array as PropType<FilterOption[]>,
+    default: () => [
+      { value: 'latest', label: '最新发布' },
+      { value: 'score', label: '积分最高' },
+      { value: 'deadline', label: '时效最短' }
+    ]
+  },
+  // 状态筛选配置
+  showStatus: {
+    type: Boolean,
+    default: true
+  },
+  statusPlaceholder: {
+    type: String,
+    default: '任务状态'
+  },
+  statusOptions: {
+    type: Array as PropType<FilterOption[]>,
+    default: () => [
+      { value: '', label: '全部状态' }
+    ]
+  },
+  // 显示控制
+  showTaskType: {
+    type: Boolean,
+    default: true
+  },
+  showTaskSubType: {
+    type: Boolean,
+    default: true
+  },
+  showBrand: {
+    type: Boolean,
+    default: true
+  },
+  showCategory: {
+    type: Boolean,
+    default: true
+  },
+  showPlatform: {
+    type: Boolean,
+    default: true
+  },
+  showReceivingDept: {
+    type: Boolean,
+    default: false
+  },
+  showTimeRange: {
+    type: Boolean,
+    default: true
+  },
+  timeRangePlaceholder: {
+    type: String,
+    default: '发布时间'
+  },
+  showScoreRange: {
+    type: Boolean,
+    default: true
+  },
+  showProgressRange: {
+    type: Boolean,
+    default: false
+  },
+  // 数据源
+  demandTypes: {
+    type: Array as PropType<DemandType[]>,
+    default: () => []
+  },
+  taskSubTypes: {
+    type: Array as PropType<TaskSubType[]>,
+    default: () => []
+  },
+  brands: {
+    type: Array as PropType<Brand[]>,
+    default: () => []
+  },
+  categories: {
+    type: Array as PropType<Category[]>,
+    default: () => []
+  },
+  platforms: {
+    type: Array as PropType<Platform[]>,
+    default: () => []
+  },
+  receivingDeptList: {
+    type: Array as PropType<Department[]>,
+    default: () => []
+  }
+})
+
+// Emits 定义
+const emit = defineEmits(['update:modelValue', 'change', 'reset'])
+
+// 本地筛选状态
+const localFilters = reactive<FilterValues>({
+  keyword: props.modelValue?.keyword,
+  status: props.modelValue?.status || '',
+  sortBy: props.modelValue?.sortBy || 'latest',
+  taskTypeId: props.modelValue?.taskTypeId,
+  taskSubType: props.modelValue?.taskSubType,
+  brandId: props.modelValue?.brandId,
+  categoryId: props.modelValue?.categoryId,
+  platformId: props.modelValue?.platformId,
+  filterDeptId: props.modelValue?.filterDeptId,
+  timeRange: props.modelValue?.timeRange,
+  minScore: props.modelValue?.minScore,
+  maxScore: props.modelValue?.maxScore,
+  minProgress: props.modelValue?.minProgress,
+  maxProgress: props.modelValue?.maxProgress
+})
+
+// 监听 props.modelValue 变化，同步到本地状态
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (newVal) {
+      Object.assign(localFilters, newVal)
+    }
+  },
+  { deep: true }
+)
+
+// 筛选条件变更
+const handleFilterChange = () => {
+  emit('update:modelValue', { ...localFilters })
+  emit('change', { ...localFilters })
+}
+
+// 重置筛选条件
+const handleReset = () => {
+  localFilters.keyword = undefined
+  localFilters.status = ''
+  localFilters.sortBy = props.sortOptions[0]?.value || 'latest'
+  localFilters.taskTypeId = undefined
+  localFilters.taskSubType = undefined
+  localFilters.brandId = undefined
+  localFilters.categoryId = undefined
+  localFilters.platformId = undefined
+  localFilters.filterDeptId = undefined
+  localFilters.timeRange = undefined
+  localFilters.minScore = undefined
+  localFilters.maxScore = undefined
+  localFilters.minProgress = undefined
+  localFilters.maxProgress = undefined
+  
+  emit('update:modelValue', { ...localFilters })
+  emit('reset')
+  emit('change', { ...localFilters })
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/variables.scss';
+
+// 复用图表卡片样式，与任务卡片统一
+.chart-card {
+  background: $bg-card;
+  border: 1px solid $border-primary;
+  border-radius: $radius-lg;
+  padding: $space-md; // 筛选栏稍微紧凑一点，用 md 而不是 xl
+  transition: all $transition-base $ease-out;
+
+  &:hover {
+    border-color: rgba(255, 255, 255, 0.1); // 微调 hover 边框颜色
+    background: $bg-card-hover;
+  }
+}
+
+.search-filter-bar {
+  margin-bottom: 16px;
+}
+
+.search-row {
+  display: flex;
+  align-items: center;
+  gap: $space-md;
+  margin-bottom: $space-md;
+}
+
+.search-input {
+  flex: 1;
+  max-width: 400px;
+}
+
+.sort-select {
+  width: 130px;
+}
+
+.stats-text {
+  color: $text-secondary;
+  font-size: $font-size-base;
+  margin-left: auto;
+}
+
+.filter-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: $space-sm;
+}
+
+.filter-select {
+  min-width: 110px;
+  max-width: 140px;
+}
+
+.score-range {
+  display: flex;
+  align-items: center;
+  gap: $space-xs;
+}
+
+.score-input {
+  width: 90px;
+}
+
+.score-separator {
+  color: $text-secondary;
+}
+
+.reset-btn {
+  margin-left: auto;
+}
+
+// 深色主题适配 - 表单控件统一风格
+:deep(.ant-select-selector) {
+  background-color: #1a1a1a !important; // 深灰色背景
+  border-color: #333333 !important; // 深色边框
+  color: $brand-primary !important; // 选中的文字使用绿色，更醒目
+  border-radius: $radius-base !important; // 统一圆角
+  
+  &:hover {
+    border-color: $brand-primary !important;
+  }
+}
+
+// 选中项文字颜色为绿色
+:deep(.ant-select-selection-item) {
+  color: $brand-primary !important;
+}
+
+:deep(.ant-select-arrow) {
+  color: $brand-primary; // 箭头也用绿色
+}
+
+:deep(.ant-select-selection-placeholder) {
+  color: $text-tertiary !important; // placeholder 保持灰色
+}
+
+:deep(.ant-input) {
+  background-color: #1a1a1a; // 深灰色背景
+  border-color: #333333; // 深色边框
+  color: $text-primary;
+  border-radius: $radius-base;
+  
+  &::placeholder {
+    color: $text-tertiary;
+  }
+  
+  &:hover, &:focus {
+    border-color: $brand-primary;
+  }
+}
+
+:deep(.ant-input-search-button) {
+  border-color: $border-primary;
+  border-radius: 0 $radius-base $radius-base 0 !important; // 修复搜索按钮圆角
+}
+
+:deep(.ant-input-number) {
+  background-color: #1a1a1a; // 深灰色背景
+  border-color: #333333; // 深色边框
+  border-radius: $radius-base;
+  width: 100%;
+  
+  .ant-input-number-input {
+    color: $text-primary;
+    
+    &::placeholder {
+      color: $text-tertiary;
+    }
+  }
+
+  &:hover, &:focus {
+    border-color: $brand-primary;
+  }
+}
+
+:deep(.ant-input-number-focused) {
+  border-color: $brand-primary;
+}
+
+:deep(.ant-btn) {
+  background-color: #1a1a1a; // 深灰色背景
+  border-color: #333333; // 深色边框
+  color: $text-primary;
+  border-radius: $radius-base;
+  
+  &:hover {
+    border-color: $brand-primary;
+    color: $brand-primary;
+  }
+}
+</style>
diff --git a/frontend/src/types/components.d.ts b/frontend/src/types/components.d.ts
index b9f0977..d738a2a 100644
--- a/frontend/src/types/components.d.ts
+++ b/frontend/src/types/components.d.ts
@@ -69,5 +69,6 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     TaskCard: typeof import('./../components/TaskCard.vue')['default']
+    TaskFilters: typeof import('./../components/TaskFilters.vue')['default']
   }
 }
diff --git a/frontend/src/views/TaskHall.vue b/frontend/src/views/TaskHall.vue
index 8f47fd7..e3cc591 100644
--- a/frontend/src/views/TaskHall.vue
+++ b/frontend/src/views/TaskHall.vue
@@ -58,173 +58,23 @@
         <!-- 标签页切换 -->
         <a-tabs v-model:activeKey="activeTab" @change="handleTabChange" class="task-tabs">
           <a-tab-pane key="available" tab="可接任务">
-            <!-- 搜索和筛选栏（合并） -->
-            <div class="search-filter-bar chart-card">
-              <!-- 第一行：搜索、排序和统计 -->
-              <div class="search-row">
-                <a-input-search
-                  v-model:value="filters.keyword"
-                  placeholder="搜索任务编号、标题、SPU信息、发布人..."
-                  class="search-input"
-                  @search="handleFilterChange"
-                  @pressEnter="handleFilterChange"
-                />
-                <a-select
-                  v-model:value="filters.sortBy"
-                  placeholder="排序方式"
-                  class="sort-select"
-                  @change="handleFilterChange"
-                >
-                  <a-select-option value="latest">最新发布</a-select-option>
-                  <a-select-option value="score">积分最高</a-select-option>
-                  <a-select-option value="deadline">时效最短</a-select-option>
-                  <a-select-option value="hot">最热门</a-select-option>
-                </a-select>
-                <span class="stats-text">共 {{ total }} 个任务</span>
-              </div>
-
-          <!-- 第二行：筛选条件 -->
-          <div class="filter-row">
-            <a-select
-              v-model:value="filters.status"
-              placeholder="任务状态"
-              class="filter-select"
-              allowClear
+            <!-- 搜索和筛选栏（使用公共组件） -->
+            <TaskFilters
+              v-model="filters"
+              :stats-text="`共 ${total} 个任务`"
+              :sort-options="availableSortOptions"
+              :status-options="availableStatusOptions"
+              status-placeholder="任务状态"
+              :show-receiving-dept="true"
+              :demand-types="demandTypes"
+              :task-sub-types="taskSubTypes"
+              :brands="brands"
+              :categories="categories"
+              :platforms="platforms"
+              :receiving-dept-list="receivingDeptList"
               @change="handleFilterChange"
-            >
-              <a-select-option value="">全部待接</a-select-option>
-              <a-select-option value="pending">待接单</a-select-option>
-              <a-select-option value="pending_receiving_approval">待部门审核</a-select-option>
-            </a-select>
-
-            <a-select
-              v-model:value="filters.taskTypeId"
-              placeholder="任务类型"
-              class="filter-select"
-              allowClear
-              @change="handleFilterChange"
-            >
-              <a-select-option
-                v-for="type in demandTypes"
-                :key="type.id"
-                :value="type.id"
-              >
-                {{ type.name }}
-              </a-select-option>
-            </a-select>
-
-            <a-select
-              v-model:value="filters.taskSubType"
-              placeholder="需求类型"
-              class="filter-select"
-              allowClear
-              @change="handleFilterChange"
-            >
-              <a-select-option
-                v-for="subType in taskSubTypes"
-                :key="subType.id"
-                :value="subType.name"
-              >
-                {{ subType.name }}
-              </a-select-option>
-            </a-select>
-
-            <a-select
-              v-model:value="filters.brandId"
-              placeholder="品牌"
-              class="filter-select"
-              allowClear
-              @change="handleFilterChange"
-            >
-              <a-select-option
-                v-for="brand in brands"
-                :key="brand.id"
-                :value="brand.id"
-              >
-                {{ brand.name }}
-              </a-select-option>
-            </a-select>
-
-            <a-select
-              v-model:value="filters.categoryId"
-              placeholder="类目"
-              class="filter-select"
-              allowClear
-              @change="handleFilterChange"
-            >
-              <a-select-option
-                v-for="category in categories"
-                :key="category.id"
-                :value="category.id"
-              >
-                {{ category.name }}
-              </a-select-option>
-            </a-select>
-
-            <a-select
-              v-model:value="filters.platformId"
-              placeholder="平台"
-              class="filter-select"
-              allowClear
-              @change="handleFilterChange"
-            >
-              <a-select-option
-                v-for="platform in platforms"
-                :key="platform.id"
-                :value="platform.id"
-              >
-                {{ platform.name }}
-              </a-select-option>
-            </a-select>
-
-            <!-- 🔥 接单部门筛选 -->
-            <a-select
-              v-model:value="filters.filterDeptId"
-              placeholder="接单部门"
-              class="filter-select"
-              allowClear
-              @change="handleFilterChange"
-            >
-              <a-select-option
-                v-for="dept in receivingDeptList"
-                :key="dept.id"
-                :value="dept.id"
-              >
-                {{ dept.deptName }}
-              </a-select-option>
-            </a-select>
-
-            <a-select
-              v-model:value="filters.timeRange"
-              placeholder="发布时间"
-              class="filter-select"
-              allowClear
-              @change="handleFilterChange"
-            >
-              <a-select-option value="today">今天</a-select-option>
-              <a-select-option value="week">本周</a-select-option>
-              <a-select-option value="month">本月</a-select-option>
-            </a-select>
-
-            <div class="score-range">
-              <a-input
-                v-model:value="filters.minScore"
-                placeholder="最小积分"
-                class="score-input"
-                @pressEnter="handleFilterChange"
-              />
-              <span class="score-separator">-</span>
-              <a-input
-                v-model:value="filters.maxScore"
-                placeholder="最大积分"
-                class="score-input"
-                @pressEnter="handleFilterChange"
-              />
-            </div>
-
-            <a-button @click="handleReset" class="reset-btn">重置</a-button>
-          </div>
-        </div>
+              @reset="handleReset"
+            />
 
         <!-- 任务列表 -->
         <div v-if="loading" class="loading-container">
@@ -441,146 +291,28 @@
         </div>
           </a-tab-pane>
 
-          <!-- 进行中任务标签页 -->
+          <!-- 待审核任务标签页 -->
           <a-tab-pane key="review">
             <template #tab>
               <span>待审核任务 <span class="tab-count">({{ reviewTotal }})</span></span>
             </template>
-            <div class="search-filter-bar chart-card">
-              <!-- 第一行：搜索、排序和统计 -->
-              <div class="search-row">
-                <a-input-search
-                  v-model:value="reviewFilters.keyword"
-                  placeholder="搜索任务编号、标题、SPU信息、发布人..."
-                  class="search-input"
-                  @search="loadReviewTasks"
-                  @pressEnter="loadReviewTasks"
-                />
-                <a-select
-                  v-model:value="reviewFilters.sortBy"
-                  placeholder="排序方式"
-                  class="sort-select"
-                  @change="loadReviewTasks"
-                >
-                  <a-select-option value="latest">最新提交</a-select-option>
-                  <a-select-option value="score">积分最高</a-select-option>
-                </a-select>
-                <span class="stats-text">共 {{ reviewTotal }} 个待审核任务</span>
-              </div>
-
-              <!-- 第二行：筛选条件 -->
-              <div class="filter-row">
-                <a-select
-                  v-model:value="reviewFilters.status"
-                  placeholder="审核状态"
-                  class="filter-select"
-                  allowClear
-                  @change="loadReviewTasks"
-                >
-                  <a-select-option value="">全部待审核</a-select-option>
-                  <a-select-option value="pending_demand_approval">待需求审核</a-select-option>
-                  <a-select-option value="pending_receiving_approval">待接单审核</a-select-option>
-                </a-select>
-
-                <a-select
-                  v-model:value="reviewFilters.taskTypeId"
-                  placeholder="任务类型"
-                  class="filter-select"
-                  allowClear
-                  @change="loadReviewTasks"
-                >
-                  <a-select-option
-                    v-for="type in demandTypes"
-                    :key="type.id"
-                    :value="type.id"
-                  >
-                    {{ type.name }}
-                  </a-select-option>
-                </a-select>
-
-                <a-select
-                  v-model:value="reviewFilters.brandId"
-                  placeholder="品牌"
-                  class="filter-select"
-                  allowClear
-                  @change="loadReviewTasks"
-                >
-                  <a-select-option
-                    v-for="brand in brands"
-                    :key="brand.id"
-                    :value="brand.id"
-                  >
-                    {{ brand.name }}
-                  </a-select-option>
-                </a-select>
-
-                <a-select
-                  v-model:value="reviewFilters.categoryId"
-                  placeholder="类目"
-                  class="filter-select"
-                  allowClear
-                  @change="loadReviewTasks"
-                >
-                  <a-select-option
-                    v-for="category in categories"
-                    :key="category.id"
-                    :value="category.id"
-                  >
-                    {{ category.name }}
-                  </a-select-option>
-                </a-select>
-
-                <a-select
-                  v-model:value="reviewFilters.platformId"
-                  placeholder="平台"
-                  class="filter-select"
-                  allowClear
-                  @change="loadReviewTasks"
-                >
-                  <a-select-option
-                    v-for="platform in platforms"
-                    :key="platform.id"
-                    :value="platform.id"
-                  >
-                    {{ platform.name }}
-                  </a-select-option>
-                </a-select>
-
-                <a-select
-                  v-model:value="reviewFilters.timeRange"
-                  placeholder="提交时间"
-                  class="filter-select"
-                  allowClear
-                  @change="loadReviewTasks"
-                >
-                  <a-select-option value="today">今天</a-select-option>
-                  <a-select-option value="week">本周</a-select-option>
-                  <a-select-option value="month">本月</a-select-option>
-                </a-select>
-              </div>
-
-              <!-- 第三行：积分范围和重置 -->
-              <div class="filter-row">
-                <a-input-number
-                  v-model:value="reviewFilters.minScore"
-                  placeholder="最小积分"
-                  class="score-input"
-                  :min="0"
-                  @change="loadReviewTasks"
-                />
-                <span class="score-divider">-</span>
-                <a-input-number
-                  v-model:value="reviewFilters.maxScore"
-                  placeholder="最大积分"
-                  class="score-input"
-                  :min="0"
-                  @change="loadReviewTasks"
-                />
-                <a-button class="reset-btn" @click="handleReviewFiltersReset">
-                  重置
-                </a-button>
-              </div>
-            </div>
+            <!-- 搜索和筛选栏（使用公共组件） -->
+            <TaskFilters
+              v-model="reviewFilters"
+              :stats-text="`共 ${reviewTotal} 个待审核任务`"
+              :sort-options="reviewSortOptions"
+              :status-options="reviewStatusOptions"
+              status-placeholder="审核状态"
+              time-range-placeholder="提交时间"
+              :show-task-sub-type="false"
+              :demand-types="demandTypes"
+              :task-sub-types="taskSubTypes"
+              :brands="brands"
+              :categories="categories"
+              :platforms="platforms"
+              @change="loadReviewTasks"
+              @reset="handleReviewFiltersReset"
+            />
 
             <!-- 待审核任务列表 -->
             <div v-if="reviewLoading" class="loading-container">
@@ -809,150 +541,29 @@
             </div>
           </a-tab-pane>
 
-          <!-- 已完成任务标签页 -->
+          <!-- 进行中任务标签页 -->
           <a-tab-pane key="inProgress">
             <template #tab>
               <span>进行中任务 <span class="tab-count">({{ inProgressTotal }})</span></span>
             </template>
-            <div class="search-filter-bar chart-card">
-              <!-- 第一行：搜索、排序和统计 -->
-              <div class="search-row">
-                <a-input-search
-                  v-model:value="inProgressFilters.keyword"
-                  placeholder="搜索任务编号、标题、SPU信息、发布人..."
-                  class="search-input"
-                  @search="loadInProgressTasks"
-                  @pressEnter="loadInProgressTasks"
-                />
-                <a-select
-                  v-model:value="inProgressFilters.sortBy"
-                  placeholder="排序方式"
-                  class="sort-select"
-                  @change="loadInProgressTasks"
-                >
-                  <a-select-option value="latest">最新发布</a-select-option>
-                  <a-select-option value="deadline">截止最近</a-select-option>
-                  <a-select-option value="progress">进度最低</a-select-option>
-                </a-select>
-                <span class="stats-text">共 {{ inProgressTotal }} 个进行中任务</span>
-              </div>
-
-              <!-- 第二行：筛选条件 -->
-              <div class="filter-row">
-                <a-select
-                  v-model:value="inProgressFilters.status"
-                  placeholder="任务状态"
-                  class="filter-select"
-                  allowClear
-                  @change="loadInProgressTasks"
-                >
-                  <a-select-option value="">全部</a-select-option>
-                  <a-select-option value="in_progress">进行中</a-select-option>
-                  <a-select-option value="pending">待接单</a-select-option>
-                  <a-select-option value="locked">待前置完成</a-select-option>
-                </a-select>
-
-                <a-select
-                  v-model:value="inProgressFilters.taskTypeId"
-                  placeholder="任务类型"
-                  class="filter-select"
-                  allowClear
-                  @change="loadInProgressTasks"
-                >
-                  <a-select-option
-                    v-for="type in demandTypes"
-                    :key="type.id"
-                    :value="type.id"
-                  >
-                    {{ type.name }}
-                  </a-select-option>
-                </a-select>
-
-                <a-select
-                  v-model:value="inProgressFilters.brandId"
-                  placeholder="品牌"
-                  class="filter-select"
-                  allowClear
-                  @change="loadInProgressTasks"
-                >
-                  <a-select-option
-                    v-for="brand in brands"
-                    :key="brand.id"
-                    :value="brand.id"
-                  >
-                    {{ brand.name }}
-                  </a-select-option>
-                </a-select>
-
-                <a-select
-                  v-model:value="inProgressFilters.categoryId"
-                  placeholder="类目"
-                  class="filter-select"
-                  allowClear
-                  @change="loadInProgressTasks"
-                >
-                  <a-select-option
-                    v-for="category in categories"
-                    :key="category.id"
-                    :value="category.id"
-                  >
-                    {{ category.name }}
-                  </a-select-option>
-                </a-select>
-
-                <a-select
-                  v-model:value="inProgressFilters.platformId"
-                  placeholder="平台"
-                  class="filter-select"
-                  allowClear
-                  @change="loadInProgressTasks"
-                >
-                  <a-select-option
-                    v-for="platform in platforms"
-                    :key="platform.id"
-                    :value="platform.id"
-                  >
-                    {{ platform.name }}
-                  </a-select-option>
-                </a-select>
-
-                <a-select
-                  v-model:value="inProgressFilters.timeRange"
-                  placeholder="发布时间"
-                  class="filter-select"
-                  allowClear
-                  @change="loadInProgressTasks"
-                >
-                  <a-select-option value="today">今天</a-select-option>
-                  <a-select-option value="week">本周</a-select-option>
-                  <a-select-option value="month">本月</a-select-option>
-                </a-select>
-              </div>
-
-              <!-- 第三行：进度范围和重置 -->
-              <div class="filter-row">
-                <a-input-number
-                  v-model:value="inProgressFilters.minProgress"
-                  placeholder="最小进度%"
-                  class="score-input"
-                  :min="0"
-                  :max="100"
-                  @change="loadInProgressTasks"
-                />
-                <span class="score-divider">-</span>
-                <a-input-number
-                  v-model:value="inProgressFilters.maxProgress"
-                  placeholder="最大进度%"
-                  class="score-input"
-                  :min="0"
-                  :max="100"
-                  @change="loadInProgressTasks"
-                />
-                <a-button class="reset-btn" @click="handleInProgressFiltersReset">
-                  重置
-                </a-button>
-              </div>
-            </div>
+            <!-- 搜索和筛选栏（使用公共组件） -->
+            <TaskFilters
+              v-model="inProgressFilters"
+              :stats-text="`共 ${inProgressTotal} 个进行中任务`"
+              :sort-options="inProgressSortOptions"
+              :status-options="inProgressStatusOptions"
+              status-placeholder="任务状态"
+              :show-task-sub-type="false"
+              :show-score-range="false"
+              :show-progress-range="true"
+              :demand-types="demandTypes"
+              :task-sub-types="taskSubTypes"
+              :brands="brands"
+              :categories="categories"
+              :platforms="platforms"
+              @change="loadInProgressTasks"
+              @reset="handleInProgressFiltersReset"
+            />
 
             <!-- 进行中任务列表 -->
             <div v-if="inProgressLoading" class="loading-container">
@@ -1233,150 +844,26 @@
             </div>
           </a-tab-pane>
 
-          <!-- 待审核任务标签页 -->
+          <!-- 已完成任务标签页 -->
           <a-tab-pane key="completed">
             <template #tab>
               <span>已完成任务 <span class="tab-count">({{ completedTotal }})</span></span>
             </template>
-            <div class="search-filter-bar chart-card">
-              <!-- 第一行：搜索、排序和统计 -->
-              <div class="search-row">
-                <a-input-search
-                  v-model:value="completedFilters.keyword"
-                  placeholder="搜索任务编号、标题、SPU信息、发布人..."
-                  class="search-input"
-                  @search="loadCompletedTasks"
-                  @pressEnter="loadCompletedTasks"
-                />
-                <a-select
-                  v-model:value="completedFilters.sortBy"
-                  placeholder="排序方式"
-                  class="sort-select"
-                  @change="loadCompletedTasks"
-                >
-                  <a-select-option value="latest">最新完成</a-select-option>
-                  <a-select-option value="score">积分最高</a-select-option>
-                </a-select>
-                <span class="stats-text">共 {{ completedTotal }} 个已完成任务</span>
-              </div>
-
-              <!-- 第二行：筛选条件 -->
-              <div class="filter-row">
-                <a-select
-                  v-model:value="completedFilters.taskTypeId"
-                  placeholder="任务类型"
-                  class="filter-select"
-                  allowClear
-                  @change="loadCompletedTasks"
-                >
-                  <a-select-option
-                    v-for="type in demandTypes"
-                    :key="type.id"
-                    :value="type.id"
-                  >
-                    {{ type.name }}
-                  </a-select-option>
-                </a-select>
-
-                <a-select
-                  v-model:value="completedFilters.taskSubType"
-                  placeholder="需求类型"
-                  class="filter-select"
-                  allowClear
-                  @change="loadCompletedTasks"
-                >
-                  <a-select-option
-                    v-for="subType in taskSubTypes"
-                    :key="subType.id"
-                    :value="subType.name"
-                  >
-                    {{ subType.name }}
-                  </a-select-option>
-                </a-select>
-
-                <a-select
-                  v-model:value="completedFilters.brandId"
-                  placeholder="品牌"
-                  class="filter-select"
-                  allowClear
-                  @change="loadCompletedTasks"
-                >
-                  <a-select-option
-                    v-for="brand in brands"
-                    :key="brand.id"
-                    :value="brand.id"
-                  >
-                    {{ brand.name }}
-                  </a-select-option>
-                </a-select>
-
-                <a-select
-                  v-model:value="completedFilters.categoryId"
-                  placeholder="类目"
-                  class="filter-select"
-                  allowClear
-                  @change="loadCompletedTasks"
-                >
-                  <a-select-option
-                    v-for="category in categories"
-                    :key="category.id"
-                    :value="category.id"
-                  >
-                    {{ category.name }}
-                  </a-select-option>
-                </a-select>
-
-                <a-select
-                  v-model:value="completedFilters.platformId"
-                  placeholder="平台"
-                  class="filter-select"
-                  allowClear
-                  @change="loadCompletedTasks"
-                >
-                  <a-select-option
-                    v-for="platform in platforms"
-                    :key="platform.id"
-                    :value="platform.id"
-                  >
-                    {{ platform.name }}
-                  </a-select-option>
-                </a-select>
-
-                <a-select
-                  v-model:value="completedFilters.timeRange"
-                  placeholder="发布时间"
-                  class="filter-select"
-                  allowClear
-                  @change="loadCompletedTasks"
-                >
-                  <a-select-option value="today">今天</a-select-option>
-                  <a-select-option value="week">本周</a-select-option>
-                  <a-select-option value="month">本月</a-select-option>
-                </a-select>
-              </div>
-
-              <!-- 第三行：积分范围和重置 -->
-              <div class="filter-row">
-                <a-input-number
-                  v-model:value="completedFilters.minScore"
-                  placeholder="最小积分"
-                  class="score-input"
-                  :min="0"
-                  @change="loadCompletedTasks"
-                />
-                <span class="score-divider">-</span>
-                <a-input-number
-                  v-model:value="completedFilters.maxScore"
-                  placeholder="最大积分"
-                  class="score-input"
-                  :min="0"
-                  @change="loadCompletedTasks"
-                />
-                <a-button class="reset-btn" @click="handleCompletedFiltersReset">
-                  重置
-                </a-button>
-              </div>
-            </div>
+            <!-- 搜索和筛选栏（使用公共组件） -->
+            <TaskFilters
+              v-model="completedFilters"
+              :stats-text="`共 ${completedTotal} 个已完成任务`"
+              :sort-options="completedSortOptions"
+              :show-status="false"
+              time-range-placeholder="完成时间"
+              :demand-types="demandTypes"
+              :task-sub-types="taskSubTypes"
+              :brands="brands"
+              :categories="categories"
+              :platforms="platforms"
+              @change="loadCompletedTasks"
+              @reset="handleCompletedFiltersReset"
+            />
 
             <!-- 已完成任务列表 -->
             <div v-if="completedLoading" class="loading-container">
@@ -1665,145 +1152,22 @@
             <template #tab>
               <span>我发起的任务 <span class="tab-count">({{ publishedTotal }})</span></span>
             </template>
-            <div class="search-filter-bar chart-card">
-              <!-- 第一行：搜索、排序和统计 -->
-              <div class="search-row">
-                <a-input-search
-                  v-model:value="publishedFilters.keyword"
-                  placeholder="搜索任务编号、标题、SPU信息、发布人..."
-                  class="search-input"
-                  @search="loadPublishedTasks"
-                  @pressEnter="loadPublishedTasks"
-                />
-                <a-select
-                  v-model:value="publishedFilters.sortBy"
-                  placeholder="排序方式"
-                  class="sort-select"
-                  @change="loadPublishedTasks"
-                >
-                  <a-select-option value="latest">最新发布</a-select-option>
-                  <a-select-option value="score">积分最高</a-select-option>
-                  <a-select-option value="deadline">时效最短</a-select-option>
-                </a-select>
-                <span class="stats-text">共 {{ publishedTotal }} 个任务</span>
-              </div>
-
-              <!-- 第二行：筛选条件 -->
-              <div class="filter-row">
-                <a-select
-                  v-model:value="publishedFilters.status"
-                  placeholder="任务状态"
-                  class="filter-select"
-                  allowClear
-                  @change="loadPublishedTasks"
-                >
-                  <a-select-option value="">全部</a-select-option>
-                  <a-select-option value="pending">待接单</a-select-option>
-                  <a-select-option value="in_progress">进行中</a-select-option>
-                  <a-select-option value="review">待审核</a-select-option>
-                  <a-select-option value="completed">已完成</a-select-option>
-                  <a-select-option value="rejected">已驳回</a-select-option>
-                </a-select>
-
-                <a-select
-                  v-model:value="publishedFilters.taskTypeId"
-                  placeholder="任务类型"
-                  class="filter-select"
-                  allowClear
-                  @change="loadPublishedTasks"
-                >
-                  <a-select-option
-                    v-for="type in demandTypes"
-                    :key="type.id"
-                    :value="type.id"
-                  >
-                    {{ type.name }}
-                  </a-select-option>
-                </a-select>
-
-                <a-select
-                  v-model:value="publishedFilters.brandId"
-                  placeholder="品牌"
-                  class="filter-select"
-                  allowClear
-                  @change="loadPublishedTasks"
-                >
-                  <a-select-option
-                    v-for="brand in brands"
-                    :key="brand.id"
-                    :value="brand.id"
-                  >
-                    {{ brand.name }}
-                  </a-select-option>
-                </a-select>
-
-                <a-select
-                  v-model:value="publishedFilters.categoryId"
-                  placeholder="类目"
-                  class="filter-select"
-                  allowClear
-                  @change="loadPublishedTasks"
-                >
-                  <a-select-option
-                    v-for="category in categories"
-                    :key="category.id"
-                    :value="category.id"
-                  >
-                    {{ category.name }}
-                  </a-select-option>
-                </a-select>
-
-                <a-select
-                  v-model:value="publishedFilters.platformId"
-                  placeholder="平台"
-                  class="filter-select"
-                  allowClear
-                  @change="loadPublishedTasks"
-                >
-                  <a-select-option
-                    v-for="platform in platforms"
-                    :key="platform.id"
-                    :value="platform.id"
-                  >
-                    {{ platform.name }}
-                  </a-select-option>
-                </a-select>
-
-                <a-select
-                  v-model:value="publishedFilters.timeRange"
-                  placeholder="发布时间"
-                  class="filter-select"
-                  allowClear
-                  @change="loadPublishedTasks"
-                >
-                  <a-select-option value="today">今天</a-select-option>
-                  <a-select-option value="week">本周</a-select-option>
-                  <a-select-option value="month">本月</a-select-option>
-                </a-select>
-              </div>
-
-              <!-- 第三行：积分范围和重置 -->
-              <div class="filter-row">
-                <a-input-number
-                  v-model:value="publishedFilters.minScore"
-                  placeholder="最小积分"
-                  class="score-input"
-                  :min="0"
-                  @change="loadPublishedTasks"
-                />
-                <span class="score-divider">-</span>
-                <a-input-number
-                  v-model:value="publishedFilters.maxScore"
-                  placeholder="最大积分"
-                  class="score-input"
-                  :min="0"
-                  @change="loadPublishedTasks"
-                />
-                <a-button class="reset-btn" @click="handlePublishedFiltersReset">
-                  重置
-                </a-button>
-              </div>
-            </div>
+            <!-- 搜索和筛选栏（使用公共组件） -->
+            <TaskFilters
+              v-model="publishedFilters"
+              :stats-text="`共 ${publishedTotal} 个任务`"
+              :sort-options="publishedSortOptions"
+              :status-options="publishedStatusOptions"
+              status-placeholder="任务状态"
+              :show-task-sub-type="false"
+              :demand-types="demandTypes"
+              :task-sub-types="taskSubTypes"
+              :brands="brands"
+              :categories="categories"
+              :platforms="platforms"
+              @change="loadPublishedTasks"
+              @reset="handlePublishedFiltersReset"
+            />
 
             <!-- 我发起的任务列表 -->
             <div v-if="publishedLoading" class="loading-container">
@@ -2120,27 +1484,23 @@
             <template #tab>
               <span>草稿箱 <span class="tab-count">({{ draftsTotal }})</span></span>
             </template>
-            <div class="search-filter-bar chart-card">
-              <div class="search-row">
-                <a-input-search
-                  v-model:value="draftsFilters.keyword"
-                  placeholder="搜索草稿任务..."
-                  style="width: 300px;"
-                  @search="loadDraftTasks"
-                  allow-clear
-                />
-                <div class="filter-group">
-                  <span class="filter-label">排序：</span>
-                  <a-select v-model:value="draftsFilters.sortBy" style="width: 120px;" @change="loadDraftTasks">
-                    <a-select-option value="latest">最新创建</a-select-option>
-                    <a-select-option value="oldest">最早创建</a-select-option>
-                  </a-select>
-                </div>
-                <div class="stats-info">
-                  <span class="stat-item">共 <span class="stat-value">{{ draftsTotal }}</span> 个草稿</span>
-                </div>
-              </div>
-            </div>
+            <!-- 搜索和筛选栏（使用公共组件） -->
+            <TaskFilters
+              v-model="draftsFilters"
+              search-placeholder="搜索草稿任务..."
+              :stats-text="`共 ${draftsTotal} 个草稿`"
+              :sort-options="draftsSortOptions"
+              :show-status="false"
+              :show-task-type="false"
+              :show-task-sub-type="false"
+              :show-brand="false"
+              :show-category="false"
+              :show-platform="false"
+              :show-time-range="false"
+              :show-score-range="false"
+              @change="loadDraftTasks"
+              @reset="loadDraftTasks"
+            />
 
             <!-- 草稿列表 -->
             <div v-if="draftsLoading" class="loading-container">
@@ -2774,6 +2134,7 @@ import { useRouter } from 'vue-router'
 import { message, Modal, InputNumber, Textarea, Radio, RadioGroup, Button, Select, Space, Tag } from 'ant-design-vue'
 import DefaultLayout from '@/layouts/DefaultLayout.vue'
 import Icon from '@/components/Icon.vue'
+import TaskFilters from '@/components/TaskFilters.vue'
 import * as taskApi from '@/api/task'
 import * as userApi from '@/api/user'
 import * as configApi from '@/api/config'
@@ -3198,6 +2559,75 @@ const reviewFilters = reactive({
   maxScore: undefined as number | undefined
 })
 
+// ========== 筛选组件配置选项 ==========
+// 可接任务 - 排序选项
+const availableSortOptions = [
+  { value: 'latest', label: '最新发布' },
+  { value: 'score', label: '积分最高' },
+  { value: 'deadline', label: '时效最短' },
+  { value: 'hot', label: '最热门' }
+]
+// 可接任务 - 状态选项
+const availableStatusOptions = [
+  { value: '', label: '全部待接' },
+  { value: 'pending', label: '待接单' },
+  { value: 'pending_receiving_approval', label: '待部门审核' }
+]
+
+// 待审核任务 - 排序选项
+const reviewSortOptions = [
+  { value: 'latest', label: '最新提交' },
+  { value: 'score', label: '积分最高' }
+]
+// 待审核任务 - 状态选项
+const reviewStatusOptions = [
+  { value: '', label: '全部待审核' },
+  { value: 'pending_demand_approval', label: '待需求审核' },
+  { value: 'pending_receiving_approval', label: '待接单审核' }
+]
+
+// 进行中任务 - 排序选项
+const inProgressSortOptions = [
+  { value: 'latest', label: '最新接单' },
+  { value: 'deadline', label: '截止时间' },
+  { value: 'progress', label: '完成进度' }
+]
+// 进行中任务 - 状态选项
+const inProgressStatusOptions = [
+  { value: '', label: '全部进行中' },
+  { value: 'in_progress', label: '进行中' },
+  { value: 'submitted', label: '已提交待确认' }
+]
+
+// 已完成任务 - 排序选项
+const completedSortOptions = [
+  { value: 'latest', label: '最新完成' },
+  { value: 'score', label: '积分最高' }
+]
+
+// 我发起的任务 - 排序选项
+const publishedSortOptions = [
+  { value: 'latest', label: '最新发布' },
+  { value: 'score', label: '积分最高' },
+  { value: 'deadline', label: '截止时间' }
+]
+// 我发起的任务 - 状态选项
+const publishedStatusOptions = [
+  { value: '', label: '全部状态' },
+  { value: 'pending', label: '待接单' },
+  { value: 'pending_demand_approval', label: '待需求审核' },
+  { value: 'pending_receiving_approval', label: '待接单审核' },
+  { value: 'in_progress', label: '进行中' },
+  { value: 'submitted', label: '已提交' },
+  { value: 'completed', label: '已完成' }
+]
+
+// 草稿箱 - 排序选项
+const draftsSortOptions = [
+  { value: 'latest', label: '最新编辑' },
+  { value: 'oldest', label: '最早编辑' }
+]
+
 // 分页
 const pagination = reactive({
   page: 1,
@@ -3670,7 +3100,11 @@ const loadTasks = async (forceReload = false) => {
 }
 
 // 筛选变更
-const handleFilterChange = () => {
+const handleFilterChange = (newFilters?: any) => {
+  // 如果传入了新的筛选值，合并到 filters 对象
+  if (newFilters) {
+    Object.assign(filters, newFilters)
+  }
   pagination.page = 1
   loadTasks(true)  // 强制重新加载
 }
@@ -3702,7 +3136,12 @@ const handlePageChange = () => {
 // - 需求部门用户：看到自己发起的已完成的母任务
 // - 接单部门用户：看到自己完成的子任务
 // - 管理员：看到所有已完成任务
-const loadCompletedTasks = async () => {
+const loadCompletedTasks = async (newFilters?: any) => {
+  // 如果传入了新的筛选值，合并到 completedFilters 对象
+  if (newFilters && typeof newFilters === 'object') {
+    Object.assign(completedFilters, newFilters)
+    completedPagination.page = 1 // 重置分页
+  }
   completedLoading.value = true
   try {
     const params: any = {
@@ -4551,7 +3990,12 @@ const reviewPagination = reactive({
 })
 
 // 加载我发起的任务
-const loadPublishedTasks = async () => {
+const loadPublishedTasks = async (newFilters?: any) => {
+  // 如果传入了新的筛选值，合并到 publishedFilters 对象
+  if (newFilters && typeof newFilters === 'object') {
+    Object.assign(publishedFilters, newFilters)
+    publishedPagination.page = 1 // 重置分页
+  }
   publishedLoading.value = true
   try {
     const response = await taskApi.getMyTasks({
@@ -4581,7 +4025,12 @@ const handlePublishedPageChange = (page: number) => {
 }
 
 // 加载草稿箱任务
-const loadDraftTasks = async () => {
+const loadDraftTasks = async (newFilters?: any) => {
+  // 如果传入了新的筛选值，合并到 draftsFilters 对象
+  if (newFilters && typeof newFilters === 'object') {
+    Object.assign(draftsFilters, newFilters)
+    draftsPagination.page = 1 // 重置分页
+  }
   draftsLoading.value = true
   try {
     const response = await taskApi.getMyTasks({
@@ -4729,7 +4178,12 @@ const handleCreateTask = () => {
 // - 需求部门用户：只看母任务卡片（自己发起的任务）
 // - 接单部门用户：只看子任务卡片（自己接单的任务）
 // - 管理员：看到所有任务
-const loadInProgressTasks = async () => {
+const loadInProgressTasks = async (newFilters?: any) => {
+  // 如果传入了新的筛选值，合并到 inProgressFilters 对象
+  if (newFilters && typeof newFilters === 'object') {
+    Object.assign(inProgressFilters, newFilters)
+    inProgressPagination.page = 1 // 重置分页
+  }
   inProgressLoading.value = true
   try {
     const params: any = {
@@ -5051,7 +4505,12 @@ const mapTaskItemToTask = (item: any) => {
 }
 
 // 加载待审核任务（所有处于审批流程中的任务 + 部门负责人的子任务组）
-const loadReviewTasks = async () => {
+const loadReviewTasks = async (newFilters?: any) => {
+  // 如果传入了新的筛选值，合并到 reviewFilters 对象
+  if (newFilters && typeof newFilters === 'object') {
+    Object.assign(reviewFilters, newFilters)
+    reviewPagination.page = 1 // 重置分页
+  }
   reviewLoading.value = true
   try {
     const params: any = {