修改发布日历

src/components/HourMinutePicker/HourMinutePicker.tsx

@@ -0,0 +1,97 @@
+import React, { useState, useEffect } from 'react'
+import { View, Text, PickerView, PickerViewColumn } from '@tarojs/components'
+import styles from './index.module.scss'
+
+export interface HourMinutePickerProps {
+  onChange: (hour: number, minute: number) => void
+  defaultHour?: number
+  defaultMinute?: number
+  minHour?: number
+  maxHour?: number
+}
+
+const HourMinutePicker: React.FC<HourMinutePickerProps> = ({
+  onChange,
+  defaultHour = new Date().getHours(),
+  defaultMinute = new Date().getMinutes(),
+  minHour = 0,
+  maxHour = 23
+}) => {
+  console.log('defaultHour', defaultHour)
+  console.log('defaultMinute', defaultMinute)
+  const [selectedHour, setSelectedHour] = useState(defaultHour)
+  const [selectedMinute, setSelectedMinute] = useState(defaultMinute)
+  
+  // 计算当前选项在数组中的索引
+  const getHourIndex = (hour: number) => hour - minHour
+  const getMinuteIndex = (minute: number) => Math.floor(minute / 5)
+
+  // 生成小时和分钟的选项数据
+  const pickerOptions = [
+    // 小时列
+    Array.from({ length: maxHour - minHour + 1 }, (_, index) => ({
+      text: `${minHour + index}时`,
+      value: minHour + index
+    })),
+    // 分钟列 (5分钟间隔)
+    Array.from({ length: 12 }, (_, index) => ({
+      text: `${index * 5 < 10 ? '0' + index * 5 : index * 5}分`,
+      value: index * 5
+    }))
+  ]
+
+  useEffect(() => {
+    setSelectedHour(defaultHour)
+    setSelectedMinute(defaultMinute)
+  }, [defaultHour, defaultMinute])
+
+  const handlePickerChange = (event: any) => {
+    const values = event.detail.value
+    if (values && values.length >= 2) {
+      // 根据索引获取实际值
+      const hourIndex = values[0]
+      const minuteIndex = values[1]
+      const hour = minHour + hourIndex
+      const minute = minuteIndex * 5
+      setSelectedHour(hour)
+      setSelectedMinute(minute)
+      onChange(hour, minute)
+    }
+  }
+
+  return (
+    <View className={styles['hour-minute-picker-popup']}>
+      {/* 拖拽手柄 */}
+      <View className={styles['drag-handle']} />
+      
+      {/* 时间选择器 */}
+      <View className={styles['picker-container']}>
+        {/* 多列选择器 */}
+        <View className={styles['picker-wrapper']}>
+          <PickerView
+            value={[getHourIndex(selectedHour), getMinuteIndex(selectedMinute)]}
+            onChange={handlePickerChange}
+            className={styles['multi-column-picker']}
+          >
+            <PickerViewColumn className={styles['picker-column']}>
+              {pickerOptions[0].map((option, index) => (
+                <View key={option.value} className={styles['picker-item']}>
+                  <Text className={styles['picker-item-text']}>{option.text}</Text>
+                </View>
+              ))}
+            </PickerViewColumn>
+            <PickerViewColumn className={styles['picker-column']}>
+              {pickerOptions[1].map((option, index) => (
+                <View key={option.value} className={styles['picker-item']}>
+                  <Text className={styles['picker-item-text']}>{option.text}</Text>
+                </View>
+              ))}
+            </PickerViewColumn>
+          </PickerView>
+        </View>
+      </View>
+    </View>
+  )
+}
+
+export default HourMinutePicker

src/components/HourMinutePicker/index.module.scss

@@ -0,0 +1,52 @@
+.hour-minute-picker-popup {
+  background-color: #fff;
+  border-radius: 16px;
+  width: 100%;
+  position: relative;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  padding: 26px 16px 0 16px;
+  box-sizing: border-box;
+}
+
+.drag-handle {
+  width: 40px;
+  height: 4px;
+  background-color: #e0e0e0;
+  border-radius: 2px;
+  margin: 0 auto 20px;
+}
+
+.picker-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.picker-wrapper {
+  width: 100%;
+  max-width: 400px;
+}
+
+.multi-column-picker {
+  height: 216px;
+  width: 100%;
+}
+
+.picker-column {
+  flex: 1;
+  text-align: center;
+}
+
+.picker-item {
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 16px;
+}
+
+.picker-item-text {
+  font-size: 16px;
+  color: #333;
+  font-weight: 400;
+}

src/components/HourMinutePicker/index.ts

@@ -0,0 +1,2 @@
+export { default } from './HourMinutePicker'
+export type { HourMinutePickerProps } from './HourMinutePicker'