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

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

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

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

Loading…
Cancel
Save