创建重复任务输入cron表达式是展示最近5次计划执行时间

Author: TommyMerlin

README.md

@@ -436,10 +436,10 @@ A: 日志保存在 `logs/` 目录下，或使用 `docker-compose logs -f` 查看
 - [x] 重复任务暂停功能
 - [x] 数据导入/导出（带加密）
 - [x] 任务执行日志查询
+- [x] 密码重置功能
 - [ ] 失败自动重试机制
 - [ ] 任务执行前后脚本钩子
 - [ ] 更多统计图表
-- [ ] 密码重置功能
 - [ ] Webhook 回调
 - [ ] 任务模板功能
 

app.py

@@ -1,6 +1,6 @@
 from flask import Flask, request, jsonify, send_from_directory, Response, make_response
 from flask_cors import CORS
-from datetime import datetime
+from datetime import datetime, timezone
 from models import init_db, get_db, NotifyTask, NotifyChannel, NotifyStatus, User, UserChannel, ExternalCalendar
 from scheduler import scheduler, get_cron_trigger, event_manager
 from auth import login_required, admin_required, user_login, user_register, update_user_profile
@@ -253,6 +253,76 @@ def create_task():
         return jsonify({'error': str(e)}), 500
 
 
+@app.route('/api/cron/preview', methods=['POST'])
+@login_required
+def preview_cron():
+    """
+    预览 Cron 表达式的未来执行时间
+    
+    请求参数:
+    - cron_expression: Cron 表达式字符串
+    
+    返回:
+    - success: 成功标志
+    - times: 未来5次执行时间列表（格式: 2025-12-27 14:30:00）
+    - error: 错误信息（如果有）
+    """
+    try:
+        data = request.get_json()
+        cron_expression = data.get('cron_expression', '').strip()
+        
+        if not cron_expression:
+            return jsonify({
+                'success': False,
+                'error': 'Cron表达式不能为空'
+            }), 400
+        
+        try:
+            # 使用现有的 get_cron_trigger 函数获取触发器
+            trigger = get_cron_trigger(cron_expression)
+            
+            # 计算未来5次执行时间
+            times = []
+            # 使用本地时区的当前时间
+            import pytz
+            local_tz = pytz.timezone('Asia/Shanghai')
+            base_time = datetime.now(local_tz)
+            previous_time = None
+            
+            for _ in range(5):
+                next_time = trigger.get_next_fire_time(previous_time, base_time)
+                if not next_time:
+                    break
+                # 格式化为字符串: 2025-12-27 14:30:00
+                times.append(next_time.strftime('%Y-%m-%d %H:%M:%S'))
+                # 重要：更新previous_time和base_time，确保下次循环计算的是之后的时间
+                previous_time = next_time
+                base_time = next_time
+            
+            if not times:
+                return jsonify({
+                    'success': False,
+                    'error': '无法计算执行时间，请检查Cron表达式'
+                }), 400
+            
+            return jsonify({
+                'success': True,
+                'times': times
+            }), 200
+            
+        except Exception as e:
+            return jsonify({
+                'success': False,
+                'error': f'Cron表达式格式错误: {str(e)}'
+            }), 400
+    
+    except Exception as e:
+        return jsonify({
+            'success': False,
+            'error': str(e)
+        }), 500
+
+
 @app.route('/api/tasks', methods=['GET'])
 @login_required
 def list_tasks():

static/css/styles.css

@@ -4,6 +4,61 @@
     box-sizing: border-box;
 }
 
+/* Cron表达式预览样式 */
+.cron-preview {
+    margin-top: 12px;
+    padding: 0;
+    border-radius: var(--radius-sm);
+    font-size: 0.9rem;
+    line-height: 1.6;
+    transition: all 0.3s ease;
+}
+
+.cron-preview.success {
+    background: linear-gradient(135deg, rgba(93, 242, 200, 0.12), rgba(93, 242, 200, 0.05));
+    border: 1.5px solid rgba(93, 242, 200, 0.3);
+    padding: 14px 16px;
+}
+
+.cron-preview.error {
+    background: linear-gradient(135deg, rgba(255, 107, 107, 0.12), rgba(255, 107, 107, 0.05));
+    border: 1.5px solid rgba(255, 107, 107, 0.3);
+    padding: 12px 16px;
+}
+
+.cron-preview .preview-title {
+    font-weight: 600;
+    color: var(--text-strong);
+    margin-bottom: 8px;
+    font-size: 0.95rem;
+}
+
+.cron-preview .preview-times {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.cron-preview .preview-times li {
+    padding: 6px 0;
+    color: var(--text-strong);
+    border-bottom: 1px solid rgba(93, 242, 200, 0.15);
+    font-family: 'Courier New', monospace;
+    font-size: 0.9rem;
+}
+
+.cron-preview .preview-times li:last-child {
+    border-bottom: none;
+}
+
+.cron-preview .preview-error {
+    color: #dc2626;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
 :root {
     --bg: #030712;
     --bg-accent: #0b1126;

static/index.html

@@ -198,6 +198,7 @@ <h2>创建通知任务</h2>
                             <small style="color: var(--text-muted); display: block; margin-top: 5px;">
                                 示例: 0 9 * * * (每天9点) | 0 */2 * * * (每2小时) | */30 * * * * * (每30秒)
                             </small>
+                            <div id="cronPreview" class="cron-preview"></div>
                         </div>
 
                         <button type="submit" class="btn btn-primary">创建任务</button>

static/js/app.js

@@ -4,6 +4,67 @@ let currentUser = null;
 let userChannels = [];
 let eventSource = null;
 
+// 防抖函数
+function debounce(func, delay) {
+    let timeoutId;
+    return function(...args) {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => func.apply(this, args), delay);
+    };
+}
+
+// 预览Cron表达式的未来执行时间
+async function previewCronExpression(expression) {
+    const previewContainer = document.getElementById('cronPreview');
+    if (!previewContainer) return;
+    
+    // 空值处理：清空预览区域
+    if (!expression) {
+        previewContainer.innerHTML = '';
+        previewContainer.className = 'cron-preview';
+        return;
+    }
+    
+    try {
+        const token = localStorage.getItem('token');
+        // 转换星期位：前端输入5表示星期五，需要转换为后端格式
+        const convertedExpression = convertCronExpressionForBackend(expression);
+        const response = await fetch(`${API_BASE}/cron/preview`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${token}`
+            },
+            body: JSON.stringify({ cron_expression: convertedExpression })
+        });
+        
+        const data = await response.json();
+        
+        if (data.success && data.times && data.times.length > 0) {
+            // 显示成功预览
+            previewContainer.className = 'cron-preview success';
+            previewContainer.innerHTML = `
+                <div class="preview-title">📅 未来5次执行时间：</div>
+                <ul class="preview-times">
+                    ${data.times.map((time, index) => `<li>${index + 1}. ${time}</li>`).join('')}
+                </ul>
+            `;
+        } else {
+            // 显示错误提示
+            previewContainer.className = 'cron-preview error';
+            previewContainer.innerHTML = `
+                <div class="preview-error">❌ ${data.error || '无法计算执行时间'}</div>
+            `;
+        }
+    } catch (error) {
+        // 网络或其他错误
+        previewContainer.className = 'cron-preview error';
+        previewContainer.innerHTML = `
+            <div class="preview-error">❌ 预览失败，请稍后重试</div>
+        `;
+    }
+}
+
 // 初始化
 document.addEventListener('DOMContentLoaded', function() {
     checkAuthStatus();
@@ -401,6 +462,15 @@ function initAppEvents() {
         }
     });
 
+    // Cron表达式输入事件监听（带防抖）
+    const cronInput = document.getElementById('cronExpression');
+    if (cronInput) {
+        cronInput.addEventListener('input', debounce(async function(e) {
+            const expression = e.target.value.trim();
+            await previewCronExpression(expression);
+        }, 300));
+    }
+    
     // 绑定外部日历表单
     const extCalForm = document.getElementById('externalCalendarForm');
     if (extCalForm) {