feat：设备台账-筛选框优化

src/pages_function/pages/equipmentLedger/index.vue

@@ -3,76 +3,48 @@
     <NavBar :title="t('equipmentLedger.moduleName')" />
 
     <view class="filter-bar">
-      <view class="line-filter" @click="openLineCascader">
-        <text
-          :class="[
+      <view class="filter-row quick-row">
+        <view class="line-filter" @click="openLineCascader">
+          <text :class="[
             'line-filter-text',
             selectedLineId === '' ? 'placeholder' : '',
-          ]"
-          >{{ selectedLineLabel }}</text
-        >
-        <uni-icons type="bottom" size="14" color="#a8adb7"></uni-icons>
-      </view>
-      <view class="keyword-wrap">
-        <input
-          id="equipment-ledger-keyword-input"
-          v-model="searchKeyword"
-          class="keyword-input"
-          type="text"
-          :placeholder="t('equipmentLedger.searchPlaceholder')"
-          confirm-type="search"
-          @confirm="handleSearch"
-        />
-      </view>
-      <picker
-        :range="statusPickerLabels"
-        :value="statusPickerIndex"
-        @change="onStatusFilterChange"
-      >
-        <view class="status-filter">
-          <text
-            :class="[
+          ]">{{ selectedLineLabel }}</text>
+          <uni-icons type="bottom" size="14" color="#a8adb7"></uni-icons>
+        </view>
+        <picker :range="statusPickerLabels" :value="statusPickerIndex" @change="onStatusFilterChange">
+          <view class="status-filter">
+            <text :class="[
               'status-filter-text',
               selectedStatus === '' ? 'placeholder' : '',
-            ]"
-            >{{ selectedStatusLabel }}</text
-          >
-          <uni-icons type="bottom" size="14" color="#a8adb7"></uni-icons>
+            ]">{{ selectedStatusLabel }}</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 id="equipment-ledger-keyword-input" v-model="searchKeyword" class="keyword-input" type="text"
+            :placeholder="t('equipmentLedger.searchPlaceholder')" confirm-type="search" @confirm="handleSearch" />
+        </view>
+        <view class="icon-filter-btn" @click="refreshList">
+          <uni-icons type="refresh" size="24" color="#7b8491"></uni-icons>
         </view>
-      </picker>
-      <view class="reset-filter-btn" @click="resetFilters">{{
-        resetFilterText
-      }}</view>
-      <!--  <view class="scan-btn" @click="handleScan">
-        <uni-icons type="scan" size="24" color="#1f2937"></uni-icons>
-      </view> -->
+        <view class="icon-filter-btn" @click="openFilterDrawer">
+          <uni-icons type="settings" size="24" color="#7b8491"></uni-icons>
+        </view>
+      </view>
     </view>
-
     <view class="list-scroll">
       <view class="list-wrap">
-        <view
-          v-for="item in list"
-          :key="item.id"
-          class="ledger-card"
-          @click="openDetail(item)"
-        >
+        <view v-for="item in list" :key="item.id" class="ledger-card" @click="openDetail(item)">
           <view class="card-top">
             <text class="device-code">{{ textValue(item.deviceCode) }}</text>
-            <picker
-              :range="statusChangeLabels"
-              :value="getStatusChangeIndex(item.deviceStatus)"
-              :disabled="Boolean(statusUpdatingMap[item.id])"
-              @click.stop
-              @change="(e) => onItemStatusChange(item, e)"
-            >
+            <picker :range="statusChangeLabels" :value="getStatusChangeIndex(item.deviceStatus)"
+              :disabled="Boolean(statusUpdatingMap[item.id])" @click.stop @change="(e) => onItemStatusChange(item, e)">
               <view class="status-chip">
-                <view
-                  :class="['status-dot', getStatusClass(item.deviceStatus)]"
-                ></view>
-                <text
-                  :class="['status-text', getStatusClass(item.deviceStatus)]"
-                  >{{ getStatusText(item.deviceStatus) }}</text
-                >
+                <view :class="['status-dot', getStatusClass(item.deviceStatus)]"></view>
+                <text :class="['status-text', getStatusClass(item.deviceStatus)]">{{ getStatusText(item.deviceStatus)
+                  }}</text>
               </view>
             </picker>
           </view>
@@ -103,19 +75,127 @@
       <uni-icons type="top" size="22" color="#ffffff"></uni-icons>
     </view>
 
-    <up-cascader
-      :key="lineCascaderKey"
-      v-model:show="lineCascaderShow"
-      v-model="lineCascaderValue"
-      :data="lineCascaderOptions"
-      value-key="value"
-      label-key="label"
-      children-key="children"
-      header-direction="row"
-      :options-cols="2"
-      :auto-close="false"
-      @confirm="onLineCascaderConfirm"
-    />
+    <uni-popup ref="filterPopupRef" type="right" background-color="#ffffff">
+      <view class="filter-drawer">
+        <view class="drawer-header">
+          <text class="drawer-title">{{ t('equipmentLedger.allFilter') }}</text>
+        </view>
+        <scroll-view scroll-y class="drawer-body">
+          <view class="drawer-section">
+            <view class="drawer-section-head">
+              <text class="drawer-section-title">{{ t('equipmentLedger.basicInfo') }}</text>
+            </view>
+            <view class="drawer-grid">
+              <view class="drawer-field">
+                <text class="drawer-label">{{ t('equipmentLedger.deviceCode') }}</text>
+                <input v-model="deviceCodeFilter" class="drawer-input" type="text"
+                  :placeholder="t('equipmentLedger.placeholderDeviceCode')" />
+              </view>
+              <view class="drawer-field">
+                <text class="drawer-label">{{ t('equipmentLedger.deviceName') }}</text>
+                <input v-model="deviceNameFilter" class="drawer-input" type="text"
+                  :placeholder="t('equipmentLedger.placeholderDeviceName')" />
+              </view>
+              <view class="drawer-field">
+                <text class="drawer-label">{{ t('equipmentLedger.deviceBrand') }}</text>
+                <input v-model="deviceBrandFilter" class="drawer-input" type="text"
+                  :placeholder="t('equipmentLedger.placeholderDeviceBrand')" />
+              </view>
+              <view class="drawer-field">
+                <text class="drawer-label">{{ t('equipmentLedger.sn') }}</text>
+                <input v-model="snFilter" class="drawer-input" type="text"
+                  :placeholder="t('equipmentLedger.placeholderSn')" />
+              </view>
+            </view>
+          </view>
+
+          <view class="drawer-section">
+            <view class="drawer-section-head">
+              <text class="drawer-section-title">{{ t('equipmentLedger.categoryStatus') }}</text>
+            </view>
+            <view class="drawer-grid">
+              <view class="drawer-field">
+                <text class="drawer-label">{{ t('equipmentLedger.deviceStatus') }}</text>
+                <picker :range="statusPickerLabels" :value="statusPickerIndex" @change="onDrawerStatusFilterChange">
+                  <view class="drawer-picker">
+                    <text :class="[
+                      'drawer-picker-text',
+                      selectedStatus === '' ? 'placeholder' : '',
+                    ]">{{ selectedStatusLabel }}</text>
+                    <uni-icons type="bottom" size="14" color="#9ca3af"></uni-icons>
+                  </view>
+                </picker>
+              </view>
+              <view class="drawer-field drawer-field-wide">
+                <text class="drawer-label">{{ t('equipmentLedger.deviceType') }}</text>
+                <view class="drawer-picker" @click="toggleDrawerDeviceTypePanel">
+                  <text :class="[
+                    'drawer-picker-text',
+                    selectedDeviceTypeId === '' ? 'placeholder' : '',
+                  ]">{{ selectedDeviceTypeLabel }}</text>
+                  <uni-icons type="bottom" size="14" color="#9ca3af"></uni-icons>
+                </view>
+                <scroll-view v-if="drawerDeviceTypePanelOpen" scroll-y class="drawer-option-panel">
+                  <view v-for="option in drawerDeviceTypeOptions" :key="`device-type-${option.id}`" :class="[
+                    'drawer-option-item',
+                    String(selectedDeviceTypeId) === String(option.id) ? 'active' : '',
+                  ]" :style="{ paddingLeft: `${24 + option.level * 24}rpx` }"
+                    @click="selectDrawerDeviceType(option)">
+                    <text class="drawer-option-text">{{ option.name }}</text>
+                  </view>
+                </scroll-view>
+              </view>
+              <view class="drawer-field drawer-field-wide">
+                <text class="drawer-label">{{ t('equipmentLedger.lineFilter') }}</text>
+                <view class="drawer-picker" @click="toggleDrawerLinePanel">
+                  <text :class="[
+                    'drawer-picker-text',
+                    selectedLineId === '' ? 'placeholder' : '',
+                  ]">{{ selectedLineLabel }}</text>
+                  <uni-icons type="bottom" size="14" color="#9ca3af"></uni-icons>
+                </view>
+                <scroll-view v-if="drawerLinePanelOpen" scroll-y class="drawer-option-panel">
+                  <view v-for="option in drawerLineOptions" :key="`line-${option.id}`" :class="[
+                    'drawer-option-item',
+                    String(selectedLineId) === String(option.id) ? 'active' : '',
+                  ]" :style="{ paddingLeft: `${24 + option.level * 24}rpx` }" @click="selectDrawerLine(option)">
+                    <text class="drawer-option-text">{{ option.name }}</text>
+                  </view>
+                </scroll-view>
+              </view>
+            </view>
+          </view>
+
+          <view class="drawer-section">
+            <view class="drawer-section-head">
+              <text class="drawer-section-title">{{ t('equipmentLedger.dateFilter') }}</text>
+            </view>
+            <view class="drawer-field drawer-field-wide">
+              <text class="drawer-label">{{ t('equipmentLedger.outgoingTime') }}</text>
+              <view class="drawer-date">
+                <uni-datetime-picker v-model="outgoingTimeFilter" type="date" :clear-icon="true"
+                  :placeholder="t('equipmentLedger.placeholderOutgoingTime')" />
+              </view>
+            </view>
+          </view>
+        </scroll-view>
+        <view class="drawer-actions">
+          <view class="drawer-action reset" @click="resetFilters">{{
+            resetFilterText
+          }}</view>
+          <view class="drawer-action confirm" @click="confirmFilterDrawer">{{
+            t('functionCommon.confirm')
+          }}</view>
+        </view>
+      </view>
+    </uni-popup>
+    <up-cascader :key="lineCascaderKey" v-model:show="lineCascaderShow" v-model="lineCascaderValue"
+      :data="lineCascaderOptions" value-key="value" label-key="label" children-key="children" header-direction="row"
+      :options-cols="2" :auto-close="false" @confirm="onLineCascaderConfirm" />
+
+    <up-cascader :key="deviceTypeCascaderKey" v-model:show="deviceTypeCascaderShow" v-model="deviceTypeCascaderValue"
+      :data="deviceTypeCascaderOptions" value-key="value" label-key="label" children-key="children"
+      header-direction="row" :options-cols="2" :auto-close="false" @confirm="onDeviceTypeCascaderConfirm" />
 
     <sv-focus-no-keyboard ref="focusNoKeyboardRef"></sv-focus-no-keyboard>
   </view>
@@ -131,6 +211,7 @@ import {
   updateDeviceLedger,
 } from '@/api/mes/deviceLedger';
 import { getDeviceLineTree } from '@/api/mes/deviceLine';
+import { getDeviceTypeTree } from '@/api/mes/deviceType';
 import { DICT_TYPE, getDictLabel, initAllDict } from '@/utils/dict';
 import useDictStore from '@/store/modules/dict';
 
@@ -140,10 +221,24 @@ const resetFilterText = computed(() => t('functionCommon.reset'));
 const searchKeyword = ref('');
 const selectedStatus = ref('');
 const selectedLineId = ref('');
+const selectedDeviceTypeId = ref('');
+const deviceCodeFilter = ref('');
+const deviceNameFilter = ref('');
+const deviceBrandFilter = ref('');
+const snFilter = ref('');
+const outgoingTimeFilter = ref('');
+const drawerDeviceTypePanelOpen = ref(false);
+const drawerLinePanelOpen = ref(false);
+const filterPopupRef = ref(null);
 const lineTree = ref([]);
+const deviceTypeTree = ref([]);
 const lineCascaderShow = ref(false);
+const lineCascaderOpenedFromDrawer = ref(false);
 const lineCascaderValue = ref([]);
 const lineCascaderKey = ref(0);
+const deviceTypeCascaderShow = ref(false);
+const deviceTypeCascaderValue = ref([]);
+const deviceTypeCascaderKey = ref(0);
 const list = ref([]);
 const loading = ref(false);
 const loadingMore = ref(false);
@@ -199,11 +294,31 @@ const selectedLineLabel = computed(() => {
   );
   return found?.name || t('equipmentLedger.lineFilter');
 });
-
+const drawerLineOptions = computed(() => [
+  { id: '', name: t('functionCommon.all'), level: 0 },
+  ...lineOptions.value,
+]);
+const deviceTypeOptions = computed(() => flattenLineTree(deviceTypeTree.value));
+const deviceTypeCascaderOptions = computed(() => [
+  { label: t('functionCommon.all'), value: '' },
+  ...normalizeLineTreeForCascader(deviceTypeTree.value),
+]);
+const selectedDeviceTypeLabel = computed(() => {
+  if (selectedDeviceTypeId.value === '') return t('equipmentLedger.deviceType');
+  const found = deviceTypeOptions.value.find(
+    (item) => String(item.id) === String(selectedDeviceTypeId.value),
+  );
+  return found?.name || t('equipmentLedger.deviceType');
+});
+const drawerDeviceTypeOptions = computed(() => [
+  { id: '', name: t('functionCommon.all'), level: 0 },
+  ...deviceTypeOptions.value,
+]);
 onLoad(async () => {
   activateKeywordFocus();
   await initAllDict();
   await fetchLineTree();
+  await fetchDeviceTypeTree();
   await fetchList(true);
 });
 
@@ -240,6 +355,21 @@ async function fetchLineTree() {
   }
 }
 
+async function fetchDeviceTypeTree() {
+  try {
+    const res = await getDeviceTypeTree({});
+    const root = res && res.data !== undefined ? res.data : res;
+    const treeData = Array.isArray(root)
+      ? root
+      : Array.isArray(root?.data)
+        ? root.data
+        : [];
+    deviceTypeTree.value = normalizeLineTree(treeData);
+  } catch (e) {
+    deviceTypeTree.value = [];
+  }
+}
+
 function normalizeLineTree(nodes) {
   return (Array.isArray(nodes) ? nodes : []).map((node) => {
     const children = normalizeLineTree(node.children);
@@ -319,15 +449,24 @@ async function fetchList(reset) {
   }
   try {
     const keyword = searchKeyword.value.trim();
+    const deviceCode = deviceCodeFilter.value.trim();
+    const deviceName = deviceNameFilter.value.trim();
+    const deviceBrand = deviceBrandFilter.value.trim();
+    const sn = snFilter.value.trim();
     const params = {
       pageNo: pageNo.value,
       pageSize: pageSize.value,
-      deviceCode: keyword || undefined,
-      deviceName: keyword || undefined,
+      deviceCode: deviceCode || keyword || undefined,
+      deviceName: deviceName || keyword || undefined,
       deviceStatus:
         selectedStatus.value === '' ? undefined : selectedStatus.value,
       deviceLine:
         selectedLineId.value === '' ? undefined : selectedLineId.value,
+      deviceType:
+        selectedDeviceTypeId.value === '' ? undefined : selectedDeviceTypeId.value,
+      deviceBrand: deviceBrand || undefined,
+      sn: sn || undefined,
+      outgoingTime: outgoingTimeFilter.value || undefined,
     };
     const res = await getDeviceLedgerPage(params);
     const page = normalizePageData(res);
@@ -370,7 +509,68 @@ function onStatusFilterChange(e) {
   fetchList(true);
 }
 
-function openLineCascader() {
+function onDrawerStatusFilterChange(e) {
+  const idx = Number(e?.detail?.value || 0);
+  selectedStatus.value = statusOptions.value[idx]?.value ?? '';
+}
+function openFilterDrawer() {
+  filterPopupRef.value?.open();
+}
+
+function closeFilterDrawer() {
+  filterPopupRef.value?.close();
+}
+
+async function confirmFilterDrawer() {
+  drawerDeviceTypePanelOpen.value = false;
+  drawerLinePanelOpen.value = false;
+  closeFilterDrawer();
+  await fetchList(true);
+}
+
+async function refreshList() {
+  await fetchList(true);
+}
+
+function toggleDrawerDeviceTypePanel() {
+  drawerDeviceTypePanelOpen.value = !drawerDeviceTypePanelOpen.value;
+  if (drawerDeviceTypePanelOpen.value) drawerLinePanelOpen.value = false;
+}
+
+function toggleDrawerLinePanel() {
+  drawerLinePanelOpen.value = !drawerLinePanelOpen.value;
+  if (drawerLinePanelOpen.value) drawerDeviceTypePanelOpen.value = false;
+}
+
+function selectDrawerDeviceType(option) {
+  selectedDeviceTypeId.value = option?.id === '' ? '' : String(option?.id ?? '');
+  deviceTypeCascaderValue.value = selectedDeviceTypeId.value
+    ? findLinePath(deviceTypeTree.value, selectedDeviceTypeId.value)
+    : [];
+  drawerDeviceTypePanelOpen.value = false;
+}
+
+function selectDrawerLine(option) {
+  selectedLineId.value = option?.id === '' ? '' : String(option?.id ?? '');
+  lineCascaderValue.value = selectedLineId.value
+    ? findLinePath(lineTree.value, selectedLineId.value)
+    : [];
+  drawerLinePanelOpen.value = false;
+}
+function openDeviceTypeCascader() {
+  deviceTypeCascaderShow.value = true;
+}
+
+function onDeviceTypeCascaderConfirm(values) {
+  const selectedValues = Array.isArray(values) ? values : [];
+  const nextValue = selectedValues[selectedValues.length - 1] ?? '';
+  selectedDeviceTypeId.value = nextValue === '' ? '' : String(nextValue);
+  deviceTypeCascaderValue.value =
+    nextValue === '' ? [] : selectedValues.map((item) => String(item));
+}
+
+function openLineCascader(fromDrawer = false) {
+  lineCascaderOpenedFromDrawer.value = Boolean(fromDrawer);
   lineCascaderShow.value = true;
 }
 
@@ -380,16 +580,29 @@ function onLineCascaderConfirm(values) {
   selectedLineId.value = nextValue === '' ? '' : String(nextValue);
   lineCascaderValue.value =
     nextValue === '' ? [] : selectedValues.map((item) => String(item));
-  fetchList(true);
+  if (!lineCascaderOpenedFromDrawer.value) fetchList(true);
+  lineCascaderOpenedFromDrawer.value = false;
 }
-
 async function resetFilters() {
   searchKeyword.value = '';
+  deviceCodeFilter.value = '';
+  deviceNameFilter.value = '';
+  deviceBrandFilter.value = '';
+  snFilter.value = '';
+  outgoingTimeFilter.value = '';
   selectedStatus.value = '';
   selectedLineId.value = '';
+  selectedDeviceTypeId.value = '';
+  drawerDeviceTypePanelOpen.value = false;
+  drawerLinePanelOpen.value = false;
   lineCascaderValue.value = [];
+  deviceTypeCascaderValue.value = [];
   lineCascaderShow.value = false;
+  lineCascaderOpenedFromDrawer.value = false;
+  deviceTypeCascaderShow.value = false;
   lineCascaderKey.value += 1;
+  deviceTypeCascaderKey.value += 1;
+  closeFilterDrawer();
   activateKeywordFocus();
   await fetchList(true);
 }
@@ -549,16 +762,29 @@ function formatDateValue(value) {
 }
 
 .filter-bar {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 160rpx 70rpx 0rpx;
-  gap: 14rpx;
+  padding: 18rpx 14rpx 20rpx;
+  background: #f3f4f6;
+}
+
+.filter-row {
+  display: flex;
   align-items: center;
-  padding: 18rpx 3rpx 20rpx;
+  gap: 18rpx;
+}
+
+.search-row {
+  margin-top: 18rpx;
+}
+
+.quick-row>picker {
+  min-width: 0;
+  flex: 1;
 }
 
 .keyword-wrap,
 .status-filter,
-.line-filter {
+.line-filter,
+.icon-filter-btn {
   height: 66rpx;
   border: 1rpx solid #d9dde5;
   background: #ffffff;
@@ -566,6 +792,8 @@ function formatDateValue(value) {
 }
 
 .keyword-wrap {
+  min-width: 0;
+  flex: 1;
   display: flex;
   align-items: center;
 }
@@ -578,35 +806,30 @@ function formatDateValue(value) {
   color: #374151;
 }
 
-.status-filter {
-  min-width: 140rpx;
+.status-filter,
+.line-filter {
+  min-width: 0;
   flex: 1;
-  max-width: 300rpx;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 18rpx;
+  padding: 0 18rpx 0 26rpx;
 }
 
-.line-filter {
+.icon-filter-btn {
+  width: 66rpx;
+  flex: 0 0 66rpx;
   display: flex;
   align-items: center;
   justify-content: center;
-  position: relative;
-  padding: 0 56rpx;
-  grid-column: 1 / -1;
-}
-
-.line-filter :deep(.uni-icons) {
-  position: absolute;
-  right: 18rpx;
+  border-color: transparent;
+  background: transparent;
 }
 
 .status-filter-text,
 .line-filter-text {
   min-width: 0rpx;
   flex: 1;
-  width: 120rpx;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -614,16 +837,238 @@ function formatDateValue(value) {
   color: #374151;
 }
 
-.line-filter .line-filter-text {
-  max-width: none;
-  text-align: center;
-}
-
 .status-filter-text.placeholder,
 .line-filter-text.placeholder {
   color: #a8adb7;
 }
 
+.filter-drawer {
+  width: 630rpx;
+  height: 100vh;
+  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-back {
+  width: 58rpx;
+  height: 88rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.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-section {
+  // margin-top: 20rpx;
+  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-input,
+.drawer-picker,
+.drawer-date {
+  width: 100%;
+  min-height: 74rpx;
+  border: 0;
+  border-radius: 8rpx;
+  background: #f7f8fb;
+  box-sizing: border-box;
+}
+
+.drawer-input {
+  height: 74rpx;
+  padding: 0 18rpx;
+  font-size: 26rpx;
+  color: #111827;
+  text-align: center;
+}
+
+.drawer-picker {
+  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-date {
+  display: flex;
+  align-items: center;
+  padding: 0 12rpx;
+}
+
+.drawer-option-panel {
+  max-height: 360rpx;
+  margin-top: 12rpx;
+  border-radius: 12rpx;
+  background: #f7f8fb;
+  overflow: hidden;
+}
+
+.drawer-option-item {
+  min-height: 72rpx;
+  padding-right: 24rpx;
+  display: flex;
+  align-items: center;
+  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-date :deep(.uni-date) {
+  width: 100%;
+}
+
+.drawer-date :deep(.uni-date-x) {
+  min-height: 74rpx;
+  border: 0;
+  padding: 0;
+  background: transparent;
+}
+
+.drawer-date :deep(.uni-date__x-input) {
+  text-align: center;
+  font-size: 26rpx;
+  color: #111827;
+}
+
+.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;
+}
+
 .scan-btn {
   width: 64rpx;
   height: 64rpx;