修改日历组件下滑位置

src/components/Picker/DayDialog/index.tsx

@@ -0,0 +1,132 @@
+import React, { useState, useEffect, useRef } from "react";
+import CommonPopup from "@/components/CommonPopup";
+import { View } from "@tarojs/components";
+import CalendarUI, {
+  CalendarUIRef,
+} from "@/components/Picker/CalendarUI/CalendarUI";
+import dayjs from "dayjs";
+import styles from "../CalendarDialog/index.module.scss";
+export interface DayDialogProps {
+  value?: Date | Date[];
+  searchType?: "single" | "range" | "multiple";
+  onChange?: (date: string | string[]) => void;
+  visible: boolean;
+  onClose: () => void;
+  title?: React.ReactNode;
+}
+
+const DayDialog: React.FC<DayDialogProps> = ({
+  visible,
+  searchType,
+  onClose,
+  title,
+  value,
+  onChange,
+}) => {
+  const [selected, setSelected] = useState<Date | Date[]>(value || new Date());
+  const [selectedBackup, setSelectedBackup] = useState<Date[]>(
+    Array.isArray(value) ? [...(value as Date[])] : [value as Date]
+  );
+  const calendarRef = useRef<CalendarUIRef>(null);
+  const [type, setType] = useState<"year" | "month" | "time">("year");
+  const [pendingJump, setPendingJump] = useState<{
+    year: number;
+    month: number;
+  } | null>(null);
+  const handleConfirm = () => {
+    console.log(selected, 'selectedselected');
+    const finalDate = dayjs(selected as Date).format("YYYY-MM-DD");
+      if (onChange){
+        onChange(finalDate)
+      }
+      onClose();
+  };
+  const dialogClose = () => {
+    setType("year");
+    onClose();
+  }
+
+  const handleChange = (d: Date | Date[]) => {
+    if (searchType === "range") {
+      if (Array.isArray(d)) {
+        if (d.length === 2) {
+          return;
+        } else if (d.length === 1) {
+          if (selectedBackup.length === 0 || selectedBackup.length === 2) {
+            setSelected([...d]);
+            setSelectedBackup([...d]);
+          } else {
+            setSelected(
+              [...selectedBackup, d[0]].sort(
+                (a, b) => a.getTime() - b.getTime()
+              )
+            );
+            setSelectedBackup([]);
+          }
+        }
+        return;
+      }
+    }
+    if (Array.isArray(d)) {
+      setSelected(d[0]);
+    } else {
+      setSelected(d);
+    }
+  };
+  const onHeaderClick = (date: Date) => {
+    console.log("onHeaderClick", date);
+    setSelected(date);
+    setType("month");
+  };
+  const getConfirmText = () => {
+    return "完成"
+  };
+  const onCancel = () => {
+    onClose();
+  };
+
+  useEffect(() => {
+    if (visible && value) {
+      setSelected(value || new Date());
+    }
+  }, [value, visible]);
+
+  useEffect(() => {
+    if (type === "year" && pendingJump && calendarRef.current) {
+      calendarRef.current.jumpTo(pendingJump.year, pendingJump.month);
+      setPendingJump(null);
+    }
+  }, [type, pendingJump]);
+
+
+  return (
+    <CommonPopup
+      visible={visible}
+      onClose={dialogClose}
+      onCancel={onCancel}
+      showHeader={!!title}
+      title={title}
+      hideFooter={false}
+      cancelText="取消"
+      confirmText={getConfirmText()}
+      onConfirm={handleConfirm}
+      className={styles["calendar-popup"]}
+      position="bottom"
+      round
+      zIndex={1000}
+    >
+      <View className={styles["calendar-container"]}>
+        <CalendarUI
+            ref={calendarRef}
+            type={searchType}
+            value={selected}
+            onChange={handleChange}
+            showQuickActions={false}
+            onHeaderClick={onHeaderClick}
+            />
+        </View>
+    </CommonPopup>
+  );
+};
+
+export default DayDialog;

src/components/Picker/HourDialog/index.tsx

@@ -0,0 +1,85 @@
+import React, { useState, useEffect, useRef } from "react";
+import CommonPopup from "@/components/CommonPopup";
+import { View } from "@tarojs/components";
+import {  PickerCommonRef, PickerCommon } from "@/components/Picker";
+import dayjs from "dayjs";
+import styles from "../CalendarDialog/index.module.scss";
+export interface HourDialogProps {
+  value?: Date | Date[];
+  searchType?: "single" | "range" | "multiple";
+  onChange?: (any) => void;
+  visible: boolean;
+  onClose: () => void;
+  title?: React.ReactNode;
+}
+
+const HourDialog: React.FC<HourDialogProps> = ({
+  visible,
+  onClose,
+  title,
+  value,
+  onChange,
+}) => {
+  const [selectedTime, setSelectTime] = useState<(string | number)[]>([8,0]);
+  const hourMinutePickerRef = useRef<PickerCommonRef>(null);
+  const handleConfirm = () => {
+    const value = hourMinutePickerRef.current?.getValue();
+    if (onChange) {
+      onChange(value);
+    }
+    dialogClose();
+  };
+  const dialogClose = () => {
+    onClose();
+  }
+
+  const getConfirmText = () => {
+    return "完成";
+  };
+
+  const onCancel = () => {
+    onClose();
+  };
+  
+
+  useEffect(() => {
+    if (visible && value) {
+      // setSelectedHour(value ? dayjs(value as Date).hour() : 8);
+      // setSelectedMinute(value ? dayjs(value as Date).minute() : 0);
+      const hour = value ? dayjs(value as Date).hour() : 8;
+      const minute = value ? dayjs(value as Date).minute() : 0
+      setSelectTime([hour, minute])
+    }
+  }, [value, visible]);
+
+ 
+
+
+  return (
+    <CommonPopup
+      visible={visible}
+      onClose={dialogClose}
+      onCancel={onCancel}
+      showHeader={!!title}
+      title={title}
+      hideFooter={false}
+      cancelText="取消"
+      confirmText={getConfirmText()}
+      onConfirm={handleConfirm}
+      className={styles["calendar-popup"]}
+      position="bottom"
+      round
+      zIndex={1000}
+    >
+      <View className={styles["calendar-container"]}>
+        <PickerCommon
+          ref={hourMinutePickerRef}
+          type="hour"
+          value={selectedTime}
+        />
+      </View>
+    </CommonPopup>
+  );
+};
+
+export default HourDialog;

src/components/Picker/Picker.tsx

@@ -28,7 +28,7 @@ const CustomPicker = ({
 
   // 当外部 defaultValue 变化时，同步更新内部状态
   useEffect(() => {
-    setCurrentValue(defaultValue)
+    handleValuesChange(defaultValue);
   }, [defaultValue])
 
   const confirmPicker = (
@@ -44,15 +44,29 @@ const CustomPicker = ({
       onConfirm(options, values)
     }
   }
+
+  const handleValuesChange = (valuesList) => {
+    const isSame =
+      Array.isArray(valuesList) &&
+      Array.isArray(currentValue) &&
+      valuesList.length === currentValue.length &&
+      valuesList.every((v: any, idx: number) => v === currentValue[idx])
+
+      console.log(isSame,valuesList, 'isSameisSameisSameisSame');
+    if (!isSame) {
+      setCurrentValue(valuesList)
+    }
+    return isSame;
+  }
   
   const changePicker = useCallback((options: any[], values: any, columnIndex: number) => {
-    // 更新内部状态
-    setCurrentValue(values)
-    
-    if (onChange) {
+    // 值相同则不触发更新，避免受控/非受控同步造成的回流循环
+   
+    const isSame = handleValuesChange(values)
+    if (onChange && !isSame) {
       onChange(options, values, columnIndex)
     }
-  }, [onChange])
+  }, [onChange, currentValue])
 
   return (
     <>

src/components/Picker/index.ts

@@ -4,4 +4,6 @@ export { default as PickerCommon } from './PickerCommon'
 export type { PickerCommonRef } from './PickerCommon'
 export { default as CalendarUI } from './CalendarUI/CalendarUI'
 export { default as DialogCalendarCard } from './CalendarDialog/DialogCalendarCard'
-export { default as CityPicker } from './CityPicker'
+export { default as CityPicker } from './CityPicker'
+export { default as  DayDialog } from './DayDialog';
+export { default as  HourDialog } from './HourDialog';