修改日期筛选交互

src/components/FilterPopup/index.tsx

@@ -32,36 +32,52 @@ const FilterPopup = (props: FilterPopupProps) => {
   const { timeBubbleData, gamesNum } = store;
 
   /**
-   * @description 处理字典选项
+   * @description 日期排序
-   * @param dictionaryValue 字典选项
+   * @param a 日期字符串
-   * @returns 选项列表
+   * @param b 日期字符串
+   * @returns 日期差值
    */
-  // const [selectedDates, setSelectedDates] = useState<String[]>([])
+  const sortByDate = (a: string, b: string) => {
+    return new Date(a).getTime() - new Date(b).getTime();
+  }
 
   const handleDateChange = (dates: Date[]) => {
-    let times: String[] = [];
+    // ================================ 日期处理 ================================
-    if (dates.length > 1) {
+    // 默认是是当前日期为开始日期，结束日期为当前日期 + 30天
-      times = [dayjs(dates[0]).format('YYYY-MM-DD'), dayjs(dates[dates.length - 1]).format('YYYY-MM-DD')]
+    const defaultDateRange = [dayjs().format('YYYY-MM-DD'), dayjs().add(1, 'M').format('YYYY-MM-DD')];
-      onChange({
+    // 处理空数组的情况
-        'dateRange': times,
+    if (!dates.length) {
-      })
+      onChange({ dateRange: defaultDateRange });
       return;
     }
-    if (Array.isArray(dates)) {
+    // 处理多日期范围选择（超过1个日期）
-      
+    if (dates.length > 1) {
-      const currentDay = dayjs(dates[0]).format('YYYY-MM-DD');
+      const dateRange = [
-      if (filterOptions.dateRange.length === 0 || filterOptions.dateRange.length === 2) {
+        dayjs(dates[0]).format('YYYY-MM-DD'),
-      times.push(currentDay);
+        dayjs(dates[dates.length - 1]).format('YYYY-MM-DD')
-      } else {
+      ];
-        times = [...filterOptions.dateRange, currentDay].sort(
+      onChange({ dateRange });
-          (a, b) => new Date(a).getTime() - new Date(b).getTime()
+      return;
-        )
-      }
     }
-    
+    // 处理单个日期选择
-    onChange({
+    const currentFilterOptionsDateRange = Array.isArray(filterOptions?.dateRange)
-      'dateRange': times,
+      ? filterOptions.dateRange
-    })
+      : defaultDateRange;
+    // 当前选择的日期
+    const currentDay = dayjs(dates?.[0]).format('YYYY-MM-DD');
+    // 当 dates 每次只返回单个日期时，使用已选范围判断是“第一次点”还是“第二次点”
+    let dateRange: string[];
+    if (
+      currentFilterOptionsDateRange.length === 2 &&
+      currentFilterOptionsDateRange?.[0] === currentFilterOptionsDateRange?.[1]
+    ) {
+      // 已是单日，点击当前日期扩展为日期范围
+      dateRange = [currentFilterOptionsDateRange[0], currentDay].sort(sortByDate);
+    } else {
+      // 默认区间/已选区间/异常状态，点击当前日期统一收敛为单日
+      dateRange = [currentDay, currentDay];
+    }
+    onChange({ dateRange });
   }
 
   const handleOptions = (dictionaryValue: []) => {