u

code/allapp/allapp-rn/src/app/(tabs)/money/index.tsx

@@ -1,14 +1,16 @@
+import type { DateMorePickerMode } from '@/components/common/ao/DateMorePicker'
 import { useFocusEffect, useRouter } from 'expo-router'
 import React, { useCallback, useState } from 'react'
 import { Image, Text, TouchableOpacity, View } from 'react-native'
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context'
-import { ADatePicker, ADrawer, AListItem, LucideIcon } from '@/components/common/ao'
+import { ADateMorePicker, ADatePicker, ADrawer, AListItem, LucideIcon } from '@/components/common/ao'
+import { resolveDateRange } from '@/components/common/ao/DateMorePicker'
 import { Fab, FabIcon } from '@/components/ui/fab'
 import { AddIcon } from '@/components/ui/icon'
 import { deleteMoneyRecordApi, listMoneyRecordsApi } from '@/request/api/money/record'
 import { useMoneyCategoryStore } from '@/store/moneyCategory'
 import { useMoneyRecordStore } from '@/store/moneyRecord'
-import { getCurrentYearMonth } from '@/utils/time'
+import { getCurrentYearMonth, normalizeDateTime } from '@/utils/time'
 import { toast } from '@/utils/toast'
 import CategorySheet from './components/CategorySheet'
 import TransactionsList from './components/TransactionsList'
@@ -22,23 +24,30 @@ export default function Money() {
 
   // 日期筛选
   const [showDatePicker, setShowDatePicker] = useState(false)
+  const [dateMode, setDateMode] = useState<DateMorePickerMode>('month')
+
   const [searchParams, setSearchParams] = useState({
-    record_time: getCurrentYearMonth(),
+    startTime: getCurrentYearMonth(),
+    endTime: '',
     category: -1,
   })
+
   const [showCategorySheet, setShowCategorySheet] = useState(false)
 
   // 操作菜单
   const [showActionsMenu, setShowActionsMenu] = useState(false)
 
   function fetchMoneyRecords() {
+    console.log(searchParams)
+
+    const resolveDate = resolveDateRange(dateMode, searchParams.startTime)
+
     listMoneyRecordsApi({
-      // record_time: searchParams.record_time,
-      start_time: '',
-      end_time: '',
+      start_time: resolveDate.startTime,
+      end_time: resolveDate.endTime,
     }).then((res) => {
       if (res.isSuccess) {
-        moneyRecordStore.setRecords(res.data.records || [], searchParams.record_time)
+        moneyRecordStore.setRecords(res.data.records || [])
       }
       else {
         toast.show({
@@ -52,7 +61,7 @@ export default function Money() {
   useFocusEffect(
     useCallback(() => {
       fetchMoneyRecords()
-    }, [searchParams.record_time]),
+    }, [searchParams.startTime, searchParams.endTime]),
   )
 
   async function handleDeleteRecord(id: number) {
@@ -63,6 +72,18 @@ export default function Money() {
     fetchMoneyRecords()
   }
 
+  function timeModeTip() {
+    if (dateMode === 'unlimited') {
+      return '全部'
+    }
+    else if (dateMode === 'range') {
+      return `${searchParams.startTime} - ${searchParams.endTime}`
+    }
+    else {
+      return searchParams.startTime
+    }
+  }
+
   return (
     <View
       className="flex-1"
@@ -80,7 +101,13 @@ export default function Money() {
               onPress={() => setShowDatePicker(true)}
               className="flex flex-row items-center gap-1"
             >
-              <Text className="font-semibold text-lg">{searchParams.record_time}</Text>
+              <Text
+                className="font-semibold text-lg"
+                numberOfLines={1}
+                ellipsizeMode="tail"
+              >
+                {timeModeTip()}
+              </Text>
               <LucideIcon icon="ChevronDown" size={16} color="#666" clickable={false} />
             </TouchableOpacity>
 
@@ -182,7 +209,26 @@ export default function Money() {
         <FabIcon as={AddIcon} size="xl" />
       </Fab>
 
-      <ADatePicker
+      <ADateMorePicker
+        visible={showDatePicker}
+        mode={dateMode}
+        onClose={() => {
+          setShowDatePicker(false)
+        }}
+        startDate={searchParams.startTime}
+        endDate={searchParams.endTime}
+        hiddenModes={['datetime', 'time']}
+        onConfirm={(value) => {
+          setDateMode(value.mode)
+
+          setSearchParams(val => ({
+            ...val,
+            startTime: value.startTime,
+            endTime: value.endTime,
+          }))
+        }}
+      />
+      {/* <ADatePicker
         show={showDatePicker}
         mode="month"
         date={searchParams.record_time}
@@ -196,7 +242,7 @@ export default function Money() {
         onClose={() => {
           setShowDatePicker(false)
         }}
-      />
+      /> */}
 
       <CategorySheet
         open={showCategorySheet}