feat: task scheduler; feat: ffmpeg compress webp to avif

app/tasks/page.tsx

@@ -0,0 +1,160 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+interface TaskStatus {
+  name: string;
+  running: boolean;
+}
+
+export default function TasksPage() {
+  const [tasks, setTasks] = useState<TaskStatus[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [message, setMessage] = useState('');
+
+  useEffect(() => {
+    fetchTasks();
+  }, []);
+
+  const fetchTasks = async () => {
+    try {
+      const response = await fetch('/api/tasks?action=status');
+      const data = await response.json();
+      setTasks(data.tasks || []);
+    } catch (error) {
+      console.error('Failed to fetch tasks:', error);
+      setMessage('获取任务状态失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleAction = async (action: string, taskName?: string) => {
+    try {
+      const response = await fetch('/api/tasks', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ action, taskName }),
+      });
+
+      const data = await response.json();
+      setMessage(data.message || '操作完成');
+      
+      // 刷新任务状态
+      await fetchTasks();
+    } catch (error) {
+      console.error('Failed to perform action:', error);
+      setMessage('操作失败');
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="text-center">加载中...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <h1 className="text-2xl font-bold mb-6">定时任务管理</h1>
+      
+      {message && (
+        <div className="mb-4 p-4 bg-blue-100 border border-blue-300 rounded">
+          {message}
+        </div>
+      )}
+
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-lg font-semibold">任务列表</h2>
+          <div className="space-x-2">
+            <button
+              onClick={() => handleAction('start')}
+              className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
+            >
+              启动所有任务
+            </button>
+            <button
+              onClick={() => handleAction('stop')}
+              className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+            >
+              停止所有任务
+            </button>
+            <button
+              onClick={fetchTasks}
+              className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+            >
+              刷新状态
+            </button>
+          </div>
+        </div>
+
+        {tasks.length === 0 ? (
+          <div className="text-center py-8 text-gray-500">
+            没有找到定时任务
+          </div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full border-collapse border border-gray-300">
+              <thead>
+                <tr className="bg-gray-50 dark:bg-gray-700">
+                  <th className="border border-gray-300 px-4 py-2 text-left">任务名称</th>
+                  <th className="border border-gray-300 px-4 py-2 text-left">状态</th>
+                  <th className="border border-gray-300 px-4 py-2 text-left">描述</th>
+                  <th className="border border-gray-300 px-4 py-2 text-left">操作</th>
+                </tr>
+              </thead>
+              <tbody>
+                {tasks.map((task) => (
+                  <tr key={task.name} className="hover:bg-gray-50 dark:hover:bg-gray-700">
+                    <td className="border border-gray-300 px-4 py-2 font-medium">
+                      {task.name}
+                    </td>
+                    <td className="border border-gray-300 px-4 py-2">
+                      <span className={`px-2 py-1 rounded text-sm ${
+                        task.running 
+                          ? 'bg-green-100 text-green-800' 
+                          : 'bg-red-100 text-red-800'
+                      }`}>
+                        {task.running ? '运行中' : '已停止'}
+                      </span>
+                    </td>
+                    <td className="border border-gray-300 px-4 py-2">
+                      {task.name === 'hourlyTask' && '每小时第30分钟执行'}
+                      {task.name === 'dailyCleanup' && '每日凌晨2点清理任务'}
+                    </td>
+                    <td className="border border-gray-300 px-4 py-2">
+                      <button
+                        onClick={() => handleAction('stop', task.name)}
+                        className="px-3 py-1 bg-red-500 text-white rounded text-sm hover:bg-red-600"
+                        disabled={!task.running}
+                      >
+                        停止
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+
+      <div className="mt-8 bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+        <h2 className="text-lg font-semibold mb-4">Cron 表达式说明</h2>
+        <div className="space-y-2 text-sm text-gray-600 dark:text-gray-400">
+          <div><code>30 * * * *</code> - 每小时的第30分钟执行</div>
+          <div><code>0 2 * * *</code> - 每天凌晨2点执行</div>
+          <div><code>0 */2 * * *</code> - 每2小时执行一次</div>
+          <div><code>0 9 * * 1-5</code> - 周一到周五上午9点执行</div>
+          <div><code>0 0 1 * *</code> - 每月1号凌晨执行</div>
+          <div><code>*/15 * * * *</code> - 每15分钟执行一次</div>
+        </div>
+      </div>
+    </div>
+  );
+}