From e97542bda46ae78153e1bb0353ef21b03792b912 Mon Sep 17 00:00:00 2001
From: hwj <huangweijie@gdngsk.com>
Date: Fri, 26 Jun 2026 16:48:02 +0800
Subject: [PATCH] =?UTF-8?q?style=EF=BC=9A=E5=85=A5=E5=BA=93=E5=AE=A1?=
 =?UTF-8?q?=E6=A0=B8/=E5=87=BA=E5=BA=93=E5=AE=A1=E6=A0=B8-=E5=B1=8F?=
 =?UTF-8?q?=E8=94=BD=E6=B7=BB=E5=8A=A0=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/materialInbound/index.vue           |   4 +-
 .../pages/materialOutbound/index.vue          |   2 +-
 .../pages/productInbound/index.vue            |   4 +-
 .../pages/productOutbound/index.vue           |   4 +-
 .../pages/sparepartInbound/index.vue          |   4 +-
 .../pages/sparepartOutbound/index.vue         | 890 +++++++++++++++---
 6 files changed, 766 insertions(+), 142 deletions(-)

diff --git a/src/pages_function/pages/materialInbound/index.vue b/src/pages_function/pages/materialInbound/index.vue
index 9b3426c..7dfbee1 100644
--- a/src/pages_function/pages/materialInbound/index.vue
+++ b/src/pages_function/pages/materialInbound/index.vue
@@ -157,9 +157,9 @@
     </view>
 
     <!-- 新增按钮 -->
-    <view class="add-btn" @click="goAdd">
+    <!-- <view class="add-btn" @click="goAdd">
       <text class="add-icon">+</text>
-    </view>
+    </view> -->
 
     <!-- 提交审核弹框 -->
     <view v-if="showAuditModal" class="modal-overlay" @click="closeAuditModal">
diff --git a/src/pages_function/pages/materialOutbound/index.vue b/src/pages_function/pages/materialOutbound/index.vue
index e31710e..1b10e34 100644
--- a/src/pages_function/pages/materialOutbound/index.vue
+++ b/src/pages_function/pages/materialOutbound/index.vue
@@ -87,7 +87,7 @@
 
     <view v-if="showGoTop" class="go-top-btn" @click="goTop"><uni-icons type="arrow-up" size="20" color="#1f4b79"></uni-icons></view>
 
-    <view class="add-btn" @click="goAdd"><text class="add-icon">+</text></view>
+    <!-- <view class="add-btn" @click="goAdd"><text class="add-icon">+</text></view> -->
 
     <!-- 提交审核弹框 -->
     <view v-if="showAuditModal" class="modal-overlay" @click="closeAuditModal">
diff --git a/src/pages_function/pages/productInbound/index.vue b/src/pages_function/pages/productInbound/index.vue
index 5b0935f..6e05507 100644
--- a/src/pages_function/pages/productInbound/index.vue
+++ b/src/pages_function/pages/productInbound/index.vue
@@ -82,9 +82,9 @@
       <uni-icons type="arrow-up" size="20" color="#1f4b79" />
     </view>
 
-    <view class="add-btn" @click="goAdd">
+    <!-- <view class="add-btn" @click="goAdd">
       <text class="add-icon">+</text>
-    </view>
+    </view> -->
 
     <view v-if="showAuditModal" class="modal-overlay" @click="closeAuditModal">
       <view class="modal-card" @click.stop>
diff --git a/src/pages_function/pages/productOutbound/index.vue b/src/pages_function/pages/productOutbound/index.vue
index 8d5ba57..7afe907 100644
--- a/src/pages_function/pages/productOutbound/index.vue
+++ b/src/pages_function/pages/productOutbound/index.vue
@@ -81,10 +81,10 @@
     <view v-if="showGoTop" class="go-top-btn" @click="goTop">
       <uni-icons type="arrow-up" size="20" color="#1f4b79" />
     </view>
-
+<!-- 
     <view class="add-btn" @click="goAdd">
       <text class="add-icon">+</text>
-    </view>
+    </view> -->
 
     <view v-if="showAuditModal" class="modal-overlay" @click="closeAuditModal">
       <view class="modal-card" @click.stop>
diff --git a/src/pages_function/pages/sparepartInbound/index.vue b/src/pages_function/pages/sparepartInbound/index.vue
index 50c9778..c2e17f4 100644
--- a/src/pages_function/pages/sparepartInbound/index.vue
+++ b/src/pages_function/pages/sparepartInbound/index.vue
@@ -157,9 +157,9 @@
     </view>
 
     <!-- 新增按钮 -->
-    <view class="add-btn" @click="goAdd">
+    <!-- <view class="add-btn" @click="goAdd">
       <text class="add-icon">+</text>
-    </view>
+    </view> -->
 
     <!-- 提交审核弹框 -->
     <view v-if="showAuditModal" class="modal-overlay" @click="closeAuditModal">
diff --git a/src/pages_function/pages/sparepartOutbound/index.vue b/src/pages_function/pages/sparepartOutbound/index.vue
index 83ae1d4..4921023 100644
--- a/src/pages_function/pages/sparepartOutbound/index.vue
+++ b/src/pages_function/pages/sparepartOutbound/index.vue
@@ -6,34 +6,45 @@
       <view class="filter-row quick-row">
         <picker :range="statusPickerLabels" :value="statusPickerIndex" @change="onStatusFilterChange">
           <view class="status-filter">
-            <text :class="['status-filter-text', selectedStatus === '' ? 'placeholder' : '']">{{ currentStatusLabel }}</text>
+            <text :class="['status-filter-text', selectedStatus === '' ? 'placeholder' : '']">{{ currentStatusLabel
+              }}</text>
             <uni-icons type="bottom" size="14" color="#a8adb7"></uni-icons>
           </view>
         </picker>
       </view>
       <view class="filter-row search-row">
         <view class="keyword-wrap">
-          <input v-model="searchKeyword" class="keyword-input" type="text" :placeholder="t('sparepartOutbound.searchPlaceholder')" confirm-type="search" @input="handleKeywordInput" @confirm="handleSearch" />
+          <input v-model="searchKeyword" class="keyword-input" type="text"
+            :placeholder="t('sparepartOutbound.searchPlaceholder')" confirm-type="search" @input="handleKeywordInput"
+            @confirm="handleSearch" />
         </view>
-        <view class="icon-filter-btn" @click="resetFilters"><uni-icons type="refresh" size="24" color="#7b8491"></uni-icons></view>
-        <view class="icon-filter-btn" @click="openFilterDrawer"><uni-icons type="settings" size="24" color="#7b8491"></uni-icons></view>
+        <view class="icon-filter-btn" @click="resetFilters"><uni-icons type="refresh" size="24"
+            color="#7b8491"></uni-icons></view>
+        <view class="icon-filter-btn" @click="openFilterDrawer"><uni-icons type="settings" size="24"
+            color="#7b8491"></uni-icons></view>
       </view>
     </view>
 
-    <uni-popup ref="filterPopupRef" class="outbound-filter-popup" type="right" background-color="transparent" :animation="false">
+    <uni-popup ref="filterPopupRef" class="outbound-filter-popup" type="right" background-color="transparent"
+      :animation="false">
       <view class="filter-drawer">
         <view class="drawer-header"><text class="drawer-title">{{ t('functionCommon.moreFilter') }}</text></view>
         <scroll-view scroll-y class="drawer-body">
           <view class="drawer-section">
-            <view class="drawer-section-head"><text class="drawer-section-title">{{ t('sparepartOutbound.sparepartInfo') }}</text></view>
+            <view class="drawer-section-head"><text class="drawer-section-title">{{ t('sparepartOutbound.sparepartInfo')
+                }}</text></view>
             <view class="drawer-grid">
-              <view class="drawer-field drawer-field-wide"><text class="drawer-label">{{ t('sparepartOutbound.creator') }}</text>
+              <view class="drawer-field drawer-field-wide"><text class="drawer-label">{{ t('sparepartOutbound.creator')
+                  }}</text>
                 <view class="drawer-picker" @click="toggleCreatorPanel">
-                  <text :class="['drawer-picker-text', !selectedCreator ? 'placeholder' : '']">{{ selectedCreatorLabel }}</text>
+                  <text :class="['drawer-picker-text', !selectedCreator ? 'placeholder' : '']">{{ selectedCreatorLabel
+                    }}</text>
                   <uni-icons type="bottom" size="14" color="#9ca3af"></uni-icons>
                 </view>
                 <scroll-view v-if="creatorPanelOpen" scroll-y class="drawer-option-panel">
-                  <view v-for="item in creatorOptions" :key="item.value" :class="['drawer-option-item', selectedCreator === item.value ? 'active' : '']" @click="selectCreator(item)">
+                  <view v-for="item in creatorOptions" :key="item.value"
+                    :class="['drawer-option-item', selectedCreator === item.value ? 'active' : '']"
+                    @click="selectCreator(item)">
                     <text class="drawer-option-text">{{ item.label }}</text>
                     <text v-if="selectedCreator === item.value" class="drawer-option-check">✓</text>
                   </view>
@@ -41,7 +52,9 @@
               </view>
               <view class="drawer-field drawer-field-wide">
                 <text class="drawer-label">{{ t('sparepartOutbound.outboundTime') }}</text>
-                <view class="drawer-date"><uni-datetime-picker v-model="inTimeFilter" type="daterange" :clear-icon="true" :start-placeholder="t('sparepartOutbound.startTime')" :end-placeholder="t('sparepartOutbound.endTime')" /></view>
+                <view class="drawer-date"><uni-datetime-picker v-model="inTimeFilter" type="daterange"
+                    :clear-icon="true" :start-placeholder="t('sparepartOutbound.startTime')"
+                    :end-placeholder="t('sparepartOutbound.endTime')" /></view>
               </view>
             </view>
           </view>
@@ -53,22 +66,30 @@
       </view>
     </uni-popup>
 
-    <scroll-view scroll-y class="list-scroll" :scroll-top="scrollTop" @scroll="onScroll" @scrolltolower="loadMore" :lower-threshold="80">
+    <scroll-view scroll-y class="list-scroll" :scroll-top="scrollTop" @scroll="onScroll" @scrolltolower="loadMore"
+      :lower-threshold="80">
       <view class="list-wrap">
         <view v-for="item in list" :key="item.id" class="task-card" @click="openDetail(item)">
           <view class="card-header">
             <view class="header-main">
               <view class="header-left"><text class="task-no">{{ textValue(item.no) }}</text></view>
-              <view class="header-tags"><text :class="['record-tag', statusClass(item.status)]">{{ statusText(item.status) }}</text></view>
+              <view class="header-tags"><text :class="['record-tag', statusClass(item.status)]">{{
+                statusText(item.status) }}</text></view>
             </view>
           </view>
           <view class="card-body">
-            <view class="row"><text class="label">{{ t('sparepartOutbound.sparepartInfo') }}</text><text class="value">{{ textValue(item.productNames) }}</text></view>
-            <view class="row"><text class="label">{{ t('sparepartOutbound.outboundTime') }}</text><text class="value">{{ formatDateTime(item.outTime || item.createTime) }}</text></view>
-            <view class="row"><text class="label">{{ t('sparepartOutbound.creator') }}</text><text class="value">{{ textValue(item.creatorName || item.creator) }}</text></view>
-            <view class="row"><text class="label">经办人</text><text class="value">{{ textValue(item.stockUserName) }}</text></view>
-            <view class="row"><text class="label">{{ t('sparepartOutbound.quantity') }}</text><text class="value highlight">{{ textValue(item.totalCount) }}</text></view>
-            <view class="row"><text class="label">{{ t('sparepartOutbound.reviewer') }}</text><text class="value">{{ textValue(item.auditUserName) }}</text></view>
+            <view class="row"><text class="label">{{ t('sparepartOutbound.sparepartInfo') }}</text><text
+                class="value">{{ textValue(item.productNames) }}</text></view>
+            <view class="row"><text class="label">{{ t('sparepartOutbound.outboundTime') }}</text><text class="value">{{
+              formatDateTime(item.outTime || item.createTime) }}</text></view>
+            <view class="row"><text class="label">{{ t('sparepartOutbound.creator') }}</text><text class="value">{{
+              textValue(item.creatorName || item.creator) }}</text></view>
+            <view class="row"><text class="label">经办人</text><text class="value">{{ textValue(item.stockUserName)
+                }}</text></view>
+            <view class="row"><text class="label">{{ t('sparepartOutbound.quantity') }}</text><text
+                class="value highlight">{{ textValue(item.totalCount) }}</text></view>
+            <view class="row"><text class="label">{{ t('sparepartOutbound.reviewer') }}</text><text class="value">{{
+              textValue(item.auditUserName) }}</text></view>
           </view>
           <view v-if="Number(item.status) === 0" class="card-actions">
             <view class="action-btn submit-btn" @click.stop="openSubmitAudit(item)">提交审核</view>
@@ -85,23 +106,27 @@
       </view>
     </scroll-view>
 
-    <view v-if="showGoTop" class="go-top-btn" @click="goTop"><uni-icons type="arrow-up" size="20" color="#1f4b79"></uni-icons></view>
+    <view v-if="showGoTop" class="go-top-btn" @click="goTop"><uni-icons type="arrow-up" size="20"
+        color="#1f4b79"></uni-icons></view>
 
-    <view class="add-btn" @click="goAdd"><text class="add-icon">+</text></view>
+    <!-- <view class="add-btn" @click="goAdd"><text class="add-icon">+</text></view> -->
 
     <!-- 提交审核弹框 -->
     <view v-if="showAuditModal" class="modal-overlay" @click="closeAuditModal">
       <view class="modal-card" @click.stop>
-        <view class="modal-header"><text class="modal-title">提交审核</text><text class="modal-close" @click="closeAuditModal">✕</text></view>
+        <view class="modal-header"><text class="modal-title">提交审核</text><text class="modal-close"
+            @click="closeAuditModal">✕</text></view>
         <view class="modal-body">
           <view class="modal-field">
             <text class="modal-label"><text class="required">*</text>审核人</text>
             <view class="modal-dropdown" @click="toggleAuditorDropdown">
-              <text :class="{ placeholder: !selectedAuditor }">{{ selectedAuditor ? selectedAuditor.label : '请选择' }}</text>
+              <text :class="{ placeholder: !selectedAuditor }">{{ selectedAuditor ? selectedAuditor.label : '请选择'
+                }}</text>
               <text class="dropdown-arrow">▼</text>
               <view v-if="showAuditorDropdown" class="dropdown-panel">
                 <scroll-view scroll-y class="dropdown-scroll">
-                  <view v-for="u in auditorOptions" :key="u.value" class="dropdown-item" :class="{ active: selectedAuditor?.value === u.value }" @click.stop="selectAuditor(u)">
+                  <view v-for="u in auditorOptions" :key="u.value" class="dropdown-item"
+                    :class="{ active: selectedAuditor?.value === u.value }" @click.stop="selectAuditor(u)">
                     <text class="dropdown-item-text">{{ u.label }}</text>
                     <text v-if="selectedAuditor?.value === u.value" class="dropdown-check">✓</text>
                   </view>
@@ -111,7 +136,8 @@
           </view>
           <view class="modal-field">
             <text class="modal-label">备注</text>
-            <textarea v-model="auditRemark" class="modal-textarea" placeholder="请输入备注" placeholder-class="textarea-placeholder" :maxlength="200" />
+            <textarea v-model="auditRemark" class="modal-textarea" placeholder="请输入备注"
+              placeholder-class="textarea-placeholder" :maxlength="200" />
           </view>
         </view>
         <view class="modal-footer">
@@ -164,9 +190,9 @@ let searchTimer = null
 function textValue(v) { if (v === 0) return '0'; if (v == null) return '-'; const s = String(v).trim(); return s || '-' }
 function formatDateTime(value) {
   if (!value) return '-'
-  if (Array.isArray(value) && value.length >= 3) { const [y,m,d]=value; const p=n=>String(n).padStart(2,'0'); return `${y}-${p(m)}-${p(d)}` }
+  if (Array.isArray(value) && value.length >= 3) { const [y, m, d] = value; const p = n => String(n).padStart(2, '0'); return `${y}-${p(m)}-${p(d)}` }
   const date = new Date(Number(value)); if (Number.isNaN(date.getTime())) return String(value)
-  const p=n=>String(n).padStart(2,'0'); return `${date.getFullYear()}-${p(date.getMonth()+1)}-${p(date.getDate())}`
+  const p = n => String(n).padStart(2, '0'); return `${date.getFullYear()}-${p(date.getMonth() + 1)}-${p(date.getDate())}`
 }
 
 const STATUS_MAP = { 0: '待出库', 10: '待审核', 20: '已出库', 1: '已驳回' }
@@ -209,19 +235,21 @@ function openFilterDrawer() { loadCreatorOptions(); filterPopupRef.value?.open()
 function confirmFilterDrawer() { filterPopupRef.value?.close(); fetchList(true) }
 function toggleCreatorPanel() { creatorPanelOpen.value = !creatorPanelOpen.value }
 function selectCreator(item) { selectedCreator.value = selectedCreator.value === item.value ? null : item.value; creatorPanelOpen.value = false }
-async function loadCreatorOptions() { if (creatorOptions.value.length) return; try { const res = await getSimpleUserList(); const data = Array.isArray(res) ? res : (Array.isArray(res?.data) ? res.data : []); creatorOptions.value = data.map(u => ({ value: u.id || u.userId, label: u.nickname || u.userName || u.name || String(u.id || '') })) } catch (e) {} }
+async function loadCreatorOptions() { if (creatorOptions.value.length) return; try { const res = await getSimpleUserList(); const data = Array.isArray(res) ? res : (Array.isArray(res?.data) ? res.data : []); creatorOptions.value = data.map(u => ({ value: u.id || u.userId, label: u.nickname || u.userName || u.name || String(u.id || '') })) } catch (e) { } }
 async function loadMore() { if (loading.value || loadingMore.value || finished.value) return; pageNo.value += 1; await fetchList(false) }
 function openDetail(item) { if (!item?.id) { uni.showToast({ title: t('functionCommon.noIdView'), icon: 'none' }); return }; uni.navigateTo({ url: `/pages_function/pages/sparepartOutbound/detail?id=${encodeURIComponent(String(item.id))}` }) }
 
 async function handleApprove(item) {
   if (!item?.id) return
-  uni.showModal({ title: t('functionCommon.confirmTitle'), content: t('sparepartOutbound.confirmApprove'), confirmColor: '#16a34a',
+  uni.showModal({
+    title: t('functionCommon.confirmTitle'), content: t('sparepartOutbound.confirmApprove'), confirmColor: '#16a34a',
     success: async (res) => { if (res.confirm) { try { await auditSparepartOutbound({ id: item.id, status: 20 }); uni.showToast({ title: t('sparepartOutbound.approveSuccess'), icon: 'success' }); fetchList(true) } catch (e) { uni.showToast({ title: t('functionCommon.saveFailed'), icon: 'none' }) } } }
   })
 }
 async function handleReject(item) {
   if (!item?.id) return
-  uni.showModal({ title: t('functionCommon.confirmTitle'), content: t('sparepartOutbound.confirmReject'), confirmColor: '#dc2626',
+  uni.showModal({
+    title: t('functionCommon.confirmTitle'), content: t('sparepartOutbound.confirmReject'), confirmColor: '#dc2626',
     success: async (res) => { if (res.confirm) { try { await auditSparepartOutbound({ id: item.id, status: 1 }); uni.showToast({ title: t('sparepartOutbound.rejectSuccess'), icon: 'success' }); fetchList(true) } catch (e) { uni.showToast({ title: t('functionCommon.saveFailed'), icon: 'none' }) } } }
   })
 }
@@ -238,7 +266,7 @@ function openSubmitAudit(item) { currentAuditItem.value = item; selectedAuditor.
 function closeAuditModal() { showAuditModal.value = false; currentAuditItem.value = null; showAuditorDropdown.value = false }
 function toggleAuditorDropdown() { showAuditorDropdown.value = !showAuditorDropdown.value }
 function selectAuditor(u) { selectedAuditor.value = u; showAuditorDropdown.value = false }
-async function loadAuditorOptions() { if (auditorOptions.value.length) return; try { const res = await getSimpleUserList(); const data = Array.isArray(res) ? res : (Array.isArray(res?.data) ? res.data : []); auditorOptions.value = data.map(u => ({ value: u.id || u.userId, label: u.nickname || u.userName || u.name || String(u.id || '') })) } catch (e) {} }
+async function loadAuditorOptions() { if (auditorOptions.value.length) return; try { const res = await getSimpleUserList(); const data = Array.isArray(res) ? res : (Array.isArray(res?.data) ? res.data : []); auditorOptions.value = data.map(u => ({ value: u.id || u.userId, label: u.nickname || u.userName || u.name || String(u.id || '') })) } catch (e) { } }
 async function confirmSubmitAudit() {
   if (!selectedAuditor.value) { uni.showToast({ title: '请选择审核人', icon: 'none' }); return }
   if (!currentAuditItem.value?.id) return
@@ -253,113 +281,709 @@ function clearSearchTimer() { if (searchTimer) { clearTimeout(searchTimer); sear
 
 onShow(() => { fetchList(true) })
 onUnload(() => { clearSearchTimer() })
-onHide(() => {})
+onHide(() => { })
 </script>
 
 <style lang="scss" scoped>
-.page-container { min-height: 100vh; background: #f4f5f7; }
-.filter-bar { padding: 18rpx 14rpx 20rpx; background: #f3f4f6; }
-.filter-row { display: flex; align-items: center; gap: 18rpx; }
-.search-row { margin-top: 18rpx; }
-.quick-row > picker { min-width: 0; flex: 1; }
-.keyword-wrap, .status-filter, .icon-filter-btn { height: 66rpx; border: 1rpx solid #d9dde5; background: #ffffff; box-sizing: border-box; }
-.keyword-wrap { min-width: 0; flex: 1; display: flex; align-items: center; }
-.keyword-input { width: 100%; height: 64rpx; padding: 0 20rpx; font-size: 26rpx; color: #374151; }
-.status-filter { min-width: 0; flex: 1; display: flex; align-items: center; justify-content: space-between; padding: 0 18rpx 0 26rpx; }
-.status-filter-text { min-width: 0rpx; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 26rpx; color: #374151; }
-.status-filter-text.placeholder { color: #a8adb7; }
-.icon-filter-btn { width: 66rpx; flex: 0 0 66rpx; display: flex; align-items: center; justify-content: center; border-color: transparent; background: transparent; }
-
-::deep(.outbound-filter-popup.right .uni-popup__content-transition) { transform: none !important; }
-.filter-drawer { width: 630rpx; height: calc(100vh - var(--status-bar-height)); margin-top: var(--status-bar-height); background: #f5f5f7; display: flex; flex-direction: column; overflow: hidden; border-radius: 28rpx 0 0 28rpx; }
-.drawer-header { height: 104rpx; padding: 18rpx 34rpx 0; background: #ffffff; display: flex; align-items: center; justify-content: flex-start; box-sizing: border-box; }
-.drawer-title { color: #1f2937; font-size: 34rpx; line-height: 1.3; font-weight: 700; }
-.drawer-body { flex: 1; min-height: 0; padding-bottom: 40rpx; box-sizing: border-box; }
-.drawer-actions { height: 126rpx; padding: 18rpx 28rpx 24rpx; box-sizing: border-box; display: flex; align-items: center; gap: 0; background: #ffffff; box-shadow: 0 -8rpx 24rpx rgba(17, 24, 39, 0.06); }
-.drawer-action { flex: 1; height: 72rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx; font-weight: 600; border: 2rpx solid #174b78; box-sizing: border-box; }
-.drawer-action.reset { border-radius: 12rpx 0 0 12rpx; background: #ffffff; color: #174b78; }
-.drawer-action.confirm { border-radius: 0 12rpx 12rpx 0; background: #174b78; color: #ffffff; }
-
-.drawer-section { margin-bottom: 18rpx; padding: 28rpx 28rpx 30rpx; border-radius: 24rpx; background: #ffffff; box-sizing: border-box; }
-.drawer-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24rpx; }
-.drawer-section-title { font-size: 32rpx; line-height: 1.3; color: #1f2937; font-weight: 700; }
-.drawer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22rpx 20rpx; }
-.drawer-field { min-width: 0; }
-.drawer-field-wide { grid-column: 1 / -1; }
-.drawer-label { display: block; margin-bottom: 12rpx; font-size: 24rpx; line-height: 1.3; color: #4b5563; font-weight: 500; }
-.drawer-picker { width: 100%; min-height: 74rpx; border: 0; border-radius: 8rpx; background: #f7f8fb; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 0 18rpx; gap: 8rpx; }
-.drawer-picker-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 26rpx; color: #111827; text-align: center; }
-.drawer-picker-text.placeholder { color: #9ca3af; }
-.drawer-option-panel { max-height: 360rpx; margin-top: 12rpx; border-radius: 12rpx; background: #f7f8fb; overflow: hidden; }
-.drawer-option-item { min-height: 72rpx; padding: 0 24rpx; display: flex; align-items: center; justify-content: space-between; border-bottom: 1rpx solid #eceff3; box-sizing: border-box; }
-.drawer-option-item:last-child { border-bottom: 0; }
-.drawer-option-item.active { background: rgba(23, 75, 120, 0.1); }
-.drawer-option-item.active .drawer-option-text { color: #174b78; font-weight: 600; }
-.drawer-option-text { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 26rpx; color: #1f2937; }
-.drawer-option-check { flex-shrink: 0; font-size: 28rpx; color: #174b78; margin-left: 16rpx; }
-.drawer-date { width: 100%; min-height: 74rpx; border: 0; border-radius: 8rpx; background: #f7f8fb; box-sizing: border-box; display: flex; align-items: center; padding: 0 12rpx; }
-.drawer-date :deep(.uni-date), .drawer-date :deep(.uni-date-editor), .drawer-date :deep(.uni-date-editor--x), .drawer-date :deep(.uni-date-x) { width: 100%; }
-.drawer-date :deep(.uni-date-editor), .drawer-date :deep(.uni-date-editor--x), .drawer-date :deep(.uni-date-x) { min-height: 74rpx; }
-.drawer-date :deep(.uni-date-editor--x), .drawer-date :deep(.uni-date-x) { border: 0; padding: 0; background: transparent; }
-.drawer-date :deep(.uni-date-range) { display: flex; align-items: center; }
-.drawer-date :deep(.uni-date__x-input) { text-align: center; font-size: 26rpx; color: #111827; }
-
-.list-scroll { height: calc(100vh - 194rpx); }
-.list-wrap { padding: 0 24rpx 60rpx; }
-.task-card { position: relative; margin-top: 20rpx; padding: 28rpx; background: #fff; border-radius: 22rpx; box-shadow: 0 8rpx 28rpx rgba(15,23,42,0.06); }
-.card-header { margin-bottom: 18rpx; }
-.header-main { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; }
-.header-left { min-width: 0; flex: 1; }
-.task-no { font-size: 32rpx; font-weight: 700; color: #0f172a; }
-.header-tags { display: flex; align-items: center; gap: 12rpx; flex-shrink: 0; }
-.record-tag { padding: 8rpx 18rpx; border-radius: 999rpx; font-size: 22rpx; line-height: 1; background: #e2e8f0; color: #64748b; }
-.card-body .row { display: flex; justify-content: space-between; align-items: flex-start; gap: 20rpx; margin-top: 12rpx; &:first-child { margin-top: 0; } }
-.label { width: 140rpx; font-size: 25rpx; color: #94a3b8; flex-shrink: 0; }
-.value { flex: 1; text-align: right; font-size: 27rpx; color: #334155; line-height: 1.5; &.highlight { color: #1f4b79; font-weight: 600; } }
-
-.card-actions { display: flex; gap: 16rpx; margin-top: 20rpx; padding-top: 20rpx; border-top: 1rpx solid #f0f0f0; }
-.action-btn { flex: 1; height: 64rpx; line-height: 64rpx; text-align: center; border-radius: 10rpx; font-size: 26rpx; font-weight: 500;
-  &.approve-btn { background: #dcfce7; color: #16a34a; }
-  &.reject-btn { background: #fee2e2; color: #dc2626; }
-  &.submit-btn { background: #dbeafe; color: #1d4ed8; }
-  &:active { opacity: 0.8; }
-}
-
-.text-success { color: #16a34a; } .text-danger { color: #dc2626; } .text-warning { color: #d97706; } .text-primary { color: #2563eb; }
-.record-tag.text-success { color: #15803d; background: #dcfce7; }
-.record-tag.text-danger { color: #dc2626; background: #fee2e2; }
-.record-tag.text-warning { color: #d97706; background: #fef3c7; }
-.record-tag.text-primary { color: #1d4ed8; background: #dbeafe; }
-
-.hint { padding: 36rpx 0; text-align: center; color: #94a3b8; font-size: 26rpx; }
-.go-top-btn { position: fixed; right: 28rpx; bottom: calc(140rpx + env(safe-area-inset-bottom)); width: 92rpx; height: 92rpx; border-radius: 46rpx; background: rgba(255,255,255,0.96); box-shadow: 0 8rpx 24rpx rgba(15,23,42,0.12); display: flex; align-items: center; justify-content: center; }
-.add-btn { position: fixed; right: 28rpx; bottom: calc(56rpx + env(safe-area-inset-bottom)); width: 92rpx; height: 92rpx; border-radius: 46rpx; background: #1f4b79; box-shadow: 0 14rpx 30rpx rgba(24,63,108,0.24); display: flex; align-items: center; justify-content: center; }
-.add-icon { color: #fff; font-size: 64rpx; line-height: 1; margin-top: -4rpx; }
+.page-container {
+  min-height: 100vh;
+  background: #f4f5f7;
+}
+
+.filter-bar {
+  padding: 18rpx 14rpx 20rpx;
+  background: #f3f4f6;
+}
+
+.filter-row {
+  display: flex;
+  align-items: center;
+  gap: 18rpx;
+}
+
+.search-row {
+  margin-top: 18rpx;
+}
+
+.quick-row>picker {
+  min-width: 0;
+  flex: 1;
+}
+
+.keyword-wrap,
+.status-filter,
+.icon-filter-btn {
+  height: 66rpx;
+  border: 1rpx solid #d9dde5;
+  background: #ffffff;
+  box-sizing: border-box;
+}
+
+.keyword-wrap {
+  min-width: 0;
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.keyword-input {
+  width: 100%;
+  height: 64rpx;
+  padding: 0 20rpx;
+  font-size: 26rpx;
+  color: #374151;
+}
+
+.status-filter {
+  min-width: 0;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 18rpx 0 26rpx;
+}
+
+.status-filter-text {
+  min-width: 0rpx;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 26rpx;
+  color: #374151;
+}
+
+.status-filter-text.placeholder {
+  color: #a8adb7;
+}
+
+.icon-filter-btn {
+  width: 66rpx;
+  flex: 0 0 66rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-color: transparent;
+  background: transparent;
+}
+
+::deep(.outbound-filter-popup.right .uni-popup__content-transition) {
+  transform: none !important;
+}
+
+.filter-drawer {
+  width: 630rpx;
+  height: calc(100vh - var(--status-bar-height));
+  margin-top: var(--status-bar-height);
+  background: #f5f5f7;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 28rpx 0 0 28rpx;
+}
+
+.drawer-header {
+  height: 104rpx;
+  padding: 18rpx 34rpx 0;
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  box-sizing: border-box;
+}
+
+.drawer-title {
+  color: #1f2937;
+  font-size: 34rpx;
+  line-height: 1.3;
+  font-weight: 700;
+}
+
+.drawer-body {
+  flex: 1;
+  min-height: 0;
+  padding-bottom: 40rpx;
+  box-sizing: border-box;
+}
+
+.drawer-actions {
+  height: 126rpx;
+  padding: 18rpx 28rpx 24rpx;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 0;
+  background: #ffffff;
+  box-shadow: 0 -8rpx 24rpx rgba(17, 24, 39, 0.06);
+}
+
+.drawer-action {
+  flex: 1;
+  height: 72rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28rpx;
+  font-weight: 600;
+  border: 2rpx solid #174b78;
+  box-sizing: border-box;
+}
+
+.drawer-action.reset {
+  border-radius: 12rpx 0 0 12rpx;
+  background: #ffffff;
+  color: #174b78;
+}
+
+.drawer-action.confirm {
+  border-radius: 0 12rpx 12rpx 0;
+  background: #174b78;
+  color: #ffffff;
+}
+
+.drawer-section {
+  margin-bottom: 18rpx;
+  padding: 28rpx 28rpx 30rpx;
+  border-radius: 24rpx;
+  background: #ffffff;
+  box-sizing: border-box;
+}
+
+.drawer-section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24rpx;
+}
+
+.drawer-section-title {
+  font-size: 32rpx;
+  line-height: 1.3;
+  color: #1f2937;
+  font-weight: 700;
+}
+
+.drawer-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 22rpx 20rpx;
+}
+
+.drawer-field {
+  min-width: 0;
+}
+
+.drawer-field-wide {
+  grid-column: 1 / -1;
+}
+
+.drawer-label {
+  display: block;
+  margin-bottom: 12rpx;
+  font-size: 24rpx;
+  line-height: 1.3;
+  color: #4b5563;
+  font-weight: 500;
+}
+
+.drawer-picker {
+  width: 100%;
+  min-height: 74rpx;
+  border: 0;
+  border-radius: 8rpx;
+  background: #f7f8fb;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 18rpx;
+  gap: 8rpx;
+}
+
+.drawer-picker-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 26rpx;
+  color: #111827;
+  text-align: center;
+}
+
+.drawer-picker-text.placeholder {
+  color: #9ca3af;
+}
+
+.drawer-option-panel {
+  max-height: 360rpx;
+  margin-top: 12rpx;
+  border-radius: 12rpx;
+  background: #f7f8fb;
+  overflow: hidden;
+}
+
+.drawer-option-item {
+  min-height: 72rpx;
+  padding: 0 24rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1rpx solid #eceff3;
+  box-sizing: border-box;
+}
+
+.drawer-option-item:last-child {
+  border-bottom: 0;
+}
+
+.drawer-option-item.active {
+  background: rgba(23, 75, 120, 0.1);
+}
+
+.drawer-option-item.active .drawer-option-text {
+  color: #174b78;
+  font-weight: 600;
+}
+
+.drawer-option-text {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 26rpx;
+  color: #1f2937;
+}
+
+.drawer-option-check {
+  flex-shrink: 0;
+  font-size: 28rpx;
+  color: #174b78;
+  margin-left: 16rpx;
+}
+
+.drawer-date {
+  width: 100%;
+  min-height: 74rpx;
+  border: 0;
+  border-radius: 8rpx;
+  background: #f7f8fb;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  padding: 0 12rpx;
+}
+
+.drawer-date :deep(.uni-date),
+.drawer-date :deep(.uni-date-editor),
+.drawer-date :deep(.uni-date-editor--x),
+.drawer-date :deep(.uni-date-x) {
+  width: 100%;
+}
+
+.drawer-date :deep(.uni-date-editor),
+.drawer-date :deep(.uni-date-editor--x),
+.drawer-date :deep(.uni-date-x) {
+  min-height: 74rpx;
+}
+
+.drawer-date :deep(.uni-date-editor--x),
+.drawer-date :deep(.uni-date-x) {
+  border: 0;
+  padding: 0;
+  background: transparent;
+}
+
+.drawer-date :deep(.uni-date-range) {
+  display: flex;
+  align-items: center;
+}
+
+.drawer-date :deep(.uni-date__x-input) {
+  text-align: center;
+  font-size: 26rpx;
+  color: #111827;
+}
+
+.list-scroll {
+  height: calc(100vh - 194rpx);
+}
+
+.list-wrap {
+  padding: 0 24rpx 60rpx;
+}
+
+.task-card {
+  position: relative;
+  margin-top: 20rpx;
+  padding: 28rpx;
+  background: #fff;
+  border-radius: 22rpx;
+  box-shadow: 0 8rpx 28rpx rgba(15, 23, 42, 0.06);
+}
+
+.card-header {
+  margin-bottom: 18rpx;
+}
+
+.header-main {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16rpx;
+}
+
+.header-left {
+  min-width: 0;
+  flex: 1;
+}
+
+.task-no {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.header-tags {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  flex-shrink: 0;
+}
+
+.record-tag {
+  padding: 8rpx 18rpx;
+  border-radius: 999rpx;
+  font-size: 22rpx;
+  line-height: 1;
+  background: #e2e8f0;
+  color: #64748b;
+}
+
+.card-body .row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 20rpx;
+  margin-top: 12rpx;
+
+  &:first-child {
+    margin-top: 0;
+  }
+}
+
+.label {
+  width: 140rpx;
+  font-size: 25rpx;
+  color: #94a3b8;
+  flex-shrink: 0;
+}
+
+.value {
+  flex: 1;
+  text-align: right;
+  font-size: 27rpx;
+  color: #334155;
+  line-height: 1.5;
+
+  &.highlight {
+    color: #1f4b79;
+    font-weight: 600;
+  }
+}
+
+.card-actions {
+  display: flex;
+  gap: 16rpx;
+  margin-top: 20rpx;
+  padding-top: 20rpx;
+  border-top: 1rpx solid #f0f0f0;
+}
+
+.action-btn {
+  flex: 1;
+  height: 64rpx;
+  line-height: 64rpx;
+  text-align: center;
+  border-radius: 10rpx;
+  font-size: 26rpx;
+  font-weight: 500;
+
+  &.approve-btn {
+    background: #dcfce7;
+    color: #16a34a;
+  }
+
+  &.reject-btn {
+    background: #fee2e2;
+    color: #dc2626;
+  }
+
+  &.submit-btn {
+    background: #dbeafe;
+    color: #1d4ed8;
+  }
+
+  &:active {
+    opacity: 0.8;
+  }
+}
+
+.text-success {
+  color: #16a34a;
+}
+
+.text-danger {
+  color: #dc2626;
+}
+
+.text-warning {
+  color: #d97706;
+}
+
+.text-primary {
+  color: #2563eb;
+}
+
+.record-tag.text-success {
+  color: #15803d;
+  background: #dcfce7;
+}
+
+.record-tag.text-danger {
+  color: #dc2626;
+  background: #fee2e2;
+}
+
+.record-tag.text-warning {
+  color: #d97706;
+  background: #fef3c7;
+}
+
+.record-tag.text-primary {
+  color: #1d4ed8;
+  background: #dbeafe;
+}
+
+.hint {
+  padding: 36rpx 0;
+  text-align: center;
+  color: #94a3b8;
+  font-size: 26rpx;
+}
+
+.go-top-btn {
+  position: fixed;
+  right: 28rpx;
+  bottom: calc(140rpx + env(safe-area-inset-bottom));
+  width: 92rpx;
+  height: 92rpx;
+  border-radius: 46rpx;
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow: 0 8rpx 24rpx rgba(15, 23, 42, 0.12);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.add-btn {
+  position: fixed;
+  right: 28rpx;
+  bottom: calc(56rpx + env(safe-area-inset-bottom));
+  width: 92rpx;
+  height: 92rpx;
+  border-radius: 46rpx;
+  background: #1f4b79;
+  box-shadow: 0 14rpx 30rpx rgba(24, 63, 108, 0.24);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.add-icon {
+  color: #fff;
+  font-size: 64rpx;
+  line-height: 1;
+  margin-top: -4rpx;
+}
 
 /* 提交审核弹框 */
-.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.45); z-index: 999; display: flex; align-items: center; justify-content: center; }
-.modal-card { width: 640rpx; background: #fff; border-radius: 20rpx; box-shadow: 0 16rpx 48rpx rgba(0,0,0,0.15); }
-.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 32rpx 32rpx 20rpx; border-bottom: 1rpx solid #f0f0f0; }
-.modal-title { font-size: 32rpx; font-weight: 700; color: #1a1a1a; }
-.modal-close { font-size: 32rpx; color: #999; padding: 8rpx; }
-.modal-body { padding: 28rpx 32rpx; }
-.modal-field { margin-bottom: 28rpx; &:last-child { margin-bottom: 0; } }
-.modal-label { font-size: 28rpx; color: #374151; font-weight: 500; margin-bottom: 14rpx; display: block; }
-.modal-label .required { color: #ef4444; }
-.modal-dropdown { position: relative; display: flex; align-items: center; justify-content: space-between; height: 80rpx; padding: 0 24rpx; background: #f8fafc; border: 1rpx solid #e0e0e0; border-radius: 12rpx; font-size: 28rpx; color: #374151;
-  .placeholder { color: #bbb; }
-  .dropdown-arrow { font-size: 20rpx; color: #999; }
-}
-.modal-textarea { width: 100%; min-height: 140rpx; padding: 20rpx; background: #f8fafc; border: 1rpx solid #e0e0e0; border-radius: 12rpx; font-size: 27rpx; color: #374151; box-sizing: border-box; }
-.textarea-placeholder { color: #bbb; }
-.dropdown-panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 200; margin-top: 4rpx; background: #fff; border: 1rpx solid #e0e0e0; border-radius: 12rpx; box-shadow: 0 8rpx 30rpx rgba(0,0,0,0.1); overflow: hidden; }
-.dropdown-scroll { height: 300rpx; }
-.dropdown-item { display: flex; align-items: center; justify-content: space-between; padding: 20rpx 24rpx; border-bottom: 1rpx solid #f0f0f0; &:last-child { border-bottom: 0; } &.active { background: #f0f5ff; } }
-.dropdown-item-text { font-size: 27rpx; color: #333; }
-.dropdown-check { font-size: 28rpx; color: #2563eb; font-weight: 700; }
-.modal-footer { display: flex; gap: 18rpx; padding: 24rpx 32rpx; border-top: 1rpx solid #f0f0f0; }
-.modal-btn { flex: 1; height: 80rpx; line-height: 80rpx; text-align: center; border-radius: 14rpx; font-size: 30rpx; font-weight: 600; &:active { opacity: 0.85; }
-  &.cancel-btn { background: #f0f0f0; color: #6b7280; }
-  &.confirm-btn { background: #1f4b79; color: #fff; }
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.45);
+  z-index: 999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal-card {
+  width: 640rpx;
+  background: #fff;
+  border-radius: 20rpx;
+  box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.15);
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32rpx 32rpx 20rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.modal-title {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: #1a1a1a;
+}
+
+.modal-close {
+  font-size: 32rpx;
+  color: #999;
+  padding: 8rpx;
+}
+
+.modal-body {
+  padding: 28rpx 32rpx;
+}
+
+.modal-field {
+  margin-bottom: 28rpx;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.modal-label {
+  font-size: 28rpx;
+  color: #374151;
+  font-weight: 500;
+  margin-bottom: 14rpx;
+  display: block;
+}
+
+.modal-label .required {
+  color: #ef4444;
+}
+
+.modal-dropdown {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 80rpx;
+  padding: 0 24rpx;
+  background: #f8fafc;
+  border: 1rpx solid #e0e0e0;
+  border-radius: 12rpx;
+  font-size: 28rpx;
+  color: #374151;
+
+  .placeholder {
+    color: #bbb;
+  }
+
+  .dropdown-arrow {
+    font-size: 20rpx;
+    color: #999;
+  }
+}
+
+.modal-textarea {
+  width: 100%;
+  min-height: 140rpx;
+  padding: 20rpx;
+  background: #f8fafc;
+  border: 1rpx solid #e0e0e0;
+  border-radius: 12rpx;
+  font-size: 27rpx;
+  color: #374151;
+  box-sizing: border-box;
+}
+
+.textarea-placeholder {
+  color: #bbb;
+}
+
+.dropdown-panel {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 200;
+  margin-top: 4rpx;
+  background: #fff;
+  border: 1rpx solid #e0e0e0;
+  border-radius: 12rpx;
+  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.dropdown-scroll {
+  height: 300rpx;
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20rpx 24rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+
+  &:last-child {
+    border-bottom: 0;
+  }
+
+  &.active {
+    background: #f0f5ff;
+  }
+}
+
+.dropdown-item-text {
+  font-size: 27rpx;
+  color: #333;
+}
+
+.dropdown-check {
+  font-size: 28rpx;
+  color: #2563eb;
+  font-weight: 700;
+}
+
+.modal-footer {
+  display: flex;
+  gap: 18rpx;
+  padding: 24rpx 32rpx;
+  border-top: 1rpx solid #f0f0f0;
+}
+
+.modal-btn {
+  flex: 1;
+  height: 80rpx;
+  line-height: 80rpx;
+  text-align: center;
+  border-radius: 14rpx;
+  font-size: 30rpx;
+  font-weight: 600;
+
+  &:active {
+    opacity: 0.85;
+  }
+
+  &.cancel-btn {
+    background: #f0f0f0;
+    color: #6b7280;
+  }
+
+  &.confirm-btn {
+    background: #1f4b79;
+    color: #fff;
+  }
 }
 </style>