feat(CronPicker): 增加周类型选择并优化界面布局

- 在日期类型中添加"周"选项,支持指定星期的定时任务
- 调整表单项的布局,移除标签宽度设置,增加右边距
- 优化周类型选择时的星期选择界面
master
钟良源 5 months ago
parent 391db1c78a
commit 6eb76c9f95

@ -15,7 +15,6 @@
}
.formItem label {
width: 70px; // 增加标签宽度
margin-right: 16px; // 增加右边距
font-size: 14px;
color: #333;

@ -52,7 +52,7 @@ const CronPicker: React.FC<CronPickerProps> = ({ value, onChange, style, classNa
const [minutesInterval, setMinutesInterval] = useState<number>(5);
const [hourType, setHourType] = useState<'every' | 'at'>('at');
const [hourlyAt, setHourlyAt] = useState<number>(12);
const [dailyType, setDailyType] = useState<'every' | 'weekday' | 'specific'>('every');
const [dailyType, setDailyType] = useState<'every' | 'weekday' | 'specific' | 'week'>('every');
const [specificDay, setSpecificDay] = useState<number>(1);
const [selectedWeekdays, setSelectedWeekdays] = useState<string[]>(['MON']);
const [selectedMonths, setSelectedMonths] = useState<string[]>(['1']);
@ -103,6 +103,10 @@ const CronPicker: React.FC<CronPickerProps> = ({ value, onChange, style, classNa
dom = specificDay.toString();
dow = '?';
}
else if (dailyType === 'week') {
dom = '?';
dow = selectedWeekdays.length > 0 ? selectedWeekdays.join(',') : '*';
}
const mon = selectedMonths.length < 12 ? selectedMonths.join(',') : '*';
const newCron = `${sec} ${min} ${hour} ${dom} ${mon} ${dow}`;
@ -162,6 +166,16 @@ const CronPicker: React.FC<CronPickerProps> = ({ value, onChange, style, classNa
setSpecificDay(dayNum);
}
}
else if (dayOfMonth === '?' && dayOfWeek !== '?' && dayOfWeek !== 'MON-FRI') {
setDailyType('week');
if (dayOfWeek.includes(',') || dayOfWeek.includes('-')) {
// 简化处理,实际可以更精确解析
setSelectedWeekdays(dayOfWeek.split(/[-,]/));
}
else if (dayOfWeek !== '*') {
setSelectedWeekdays([dayOfWeek]);
}
}
// 解析星期部分
if (dayOfWeek !== '?' && dayOfWeek !== '*') {
@ -272,7 +286,7 @@ const CronPicker: React.FC<CronPickerProps> = ({ value, onChange, style, classNa
};
const handleDailyTypeChange = (value: string) => {
setDailyType(value as 'every' | 'weekday' | 'specific');
setDailyType(value as 'every' | 'weekday' | 'specific' | 'week');
};
return (
@ -341,29 +355,32 @@ const CronPicker: React.FC<CronPickerProps> = ({ value, onChange, style, classNa
/>
<span></span>
</span>
<Radio value="week"></Radio>
</Space>
</Radio.Group>
</Form.Item>
<Form.Item label="星期" className={styles.formItem}>
<div className={styles.inlineGroup}>
{['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'].map(day => (
<Button
key={day}
type={selectedWeekdays.includes(day) ? 'primary' : 'secondary'}
size="small"
className={styles.weekButton}
onClick={() => {
setSelectedWeekdays(prev =>
prev.includes(day) ? prev.filter(d => d !== day) : [...prev, day]
);
}}
>
{dayMap[day]}
</Button>
))}
</div>
</Form.Item>
{dailyType === 'week' && (
<Form.Item label="星期" className={styles.formItem}>
<div className={styles.inlineGroup}>
{['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'].map(day => (
<Button
key={day}
type={selectedWeekdays.includes(day) ? 'primary' : 'secondary'}
size="small"
className={styles.weekButton}
onClick={() => {
setSelectedWeekdays(prev =>
prev.includes(day) ? prev.filter(d => d !== day) : [...prev, day]
);
}}
>
{dayMap[day]}
</Button>
))}
</div>
</Form.Item>
)}
<Space wrap size="small" className={styles.presetsContainer}>
{PRESETS.map(p => (

Loading…
Cancel
Save