From f60809d9b0ce4126e62ba58fc152a8b80fbe49f8 Mon Sep 17 00:00:00 2001
From: attacker <attacker@gitee.com>
Date: Tue, 16 Jun 2026 22:08:12 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=8B=86=E5=88=86CronJobManager.ts?=
 =?UTF-8?q?x(652=E2=86=92398=E8=A1=8C)=E6=8F=90=E5=8F=96CronJobFormDialog+?=
 =?UTF-8?q?ExecutionHistoryDialog+cronJobHelpers=E5=AD=90=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../automation/CronJobFormDialog.tsx          | 159 ++++++++++
 .../components/automation/CronJobManager.tsx  | 298 ++----------------
 .../automation/ExecutionHistoryDialog.tsx     | 117 +++++++
 .../components/automation/cronJobHelpers.tsx  |  47 +++
 4 files changed, 345 insertions(+), 276 deletions(-)
 create mode 100644 frontend/src/components/automation/CronJobFormDialog.tsx
 create mode 100644 frontend/src/components/automation/ExecutionHistoryDialog.tsx
 create mode 100644 frontend/src/components/automation/cronJobHelpers.tsx

diff --git a/frontend/src/components/automation/CronJobFormDialog.tsx b/frontend/src/components/automation/CronJobFormDialog.tsx
new file mode 100644
index 0000000..734a01e
--- /dev/null
+++ b/frontend/src/components/automation/CronJobFormDialog.tsx
@@ -0,0 +1,159 @@
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { toast } from 'sonner';
+import { cronJobApi } from '@/services/api';
+
+// 新建/编辑定时任务弹窗（自包含状态，editJob=null 表示新建模式） // Logan.Li
+export function CronJobFormDialog({
+  open,
+  onOpenChange,
+  editJob,
+  onSuccess,
+}: {
+  open: boolean;
+  onOpenChange: (v: boolean) => void;
+  editJob: any | null;
+  onSuccess: () => void;
+}) {
+  const [form, setForm] = useState({
+    name: '',
+    description: '',
+    cron_expr: '',
+    type: 'command',
+    content: '',
+  });
+
+  // 弹窗打开时初始化表单：新建预填空值，编辑回填已有数据 // Logan.Li
+  useEffect(() => {
+    if (!open) return;
+    if (editJob) {
+      setForm({
+        name: editJob.name || '',
+        description: editJob.description || '',
+        cron_expr: editJob.cron_expr || '',
+        type: editJob.type || 'command',
+        content: editJob.content || '',
+      });
+    } else {
+      setForm({ name: '', description: '', cron_expr: '', type: 'command', content: '' });
+    }
+  }, [open, editJob]);
+
+  const handleSave = async () => {
+    if (!form.name || !form.cron_expr) {
+      toast.error('请填写任务名称和 Cron 表达式');
+      return;
+    }
+    try {
+      const payload = {
+        name: form.name,
+        description: form.description,
+        cron_expr: form.cron_expr,
+        type: form.type,
+        content: form.content,
+      };
+      if (editJob) {
+        await cronJobApi.updateJob(editJob.id, payload);
+        toast.success('任务更新成功');
+      } else {
+        await cronJobApi.createJob(payload);
+        toast.success('任务创建成功');
+      }
+      onOpenChange(false);
+      onSuccess();
+    } catch (error) {
+      console.error('Failed to save cron job:', error);
+      toast.error(editJob ? '更新失败' : '创建失败');
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl bg-[var(--dg-bg-primary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]">
+        <DialogHeader>
+          <DialogTitle>{editJob ? '编辑定时任务' : '新建定时任务'}</DialogTitle>
+          <DialogDescription className="text-[var(--dg-text-secondary)]">配置 Cron 定时任务</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 py-4">
+          <div>
+            <Label className="text-[var(--dg-text-primary)]">任务名称</Label>
+            <Input
+              value={form.name}
+              onChange={(e) => setForm({ ...form, name: e.target.value })}
+              placeholder="例如: 数据库备份"
+              className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] mt-1"
+            />
+          </div>
+          <div>
+            <Label className="text-[var(--dg-text-primary)]">描述</Label>
+            <Textarea
+              value={form.description}
+              onChange={(e) => setForm({ ...form, description: e.target.value })}
+              placeholder="任务描述..."
+              className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] mt-1"
+            />
+          </div>
+          <div>
+            <Label className="text-[var(--dg-text-primary)]">Cron 表达式</Label>
+            <div className="flex gap-2">
+              <Input
+                value={form.cron_expr}
+                onChange={(e) => setForm({ ...form, cron_expr: e.target.value })}
+                placeholder="0 2 * * *"
+                className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] mt-1"
+              />
+              <Select onValueChange={(v) => setForm({ ...form, cron_expr: v })}>
+                <SelectTrigger className="w-48 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] mt-1">
+                  <SelectValue placeholder="快速选择" />
+                </SelectTrigger>
+                <SelectContent className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
+                  <SelectItem value="*/5 * * * *" className="text-[var(--dg-text-primary)]">每 5 分钟</SelectItem>
+                  <SelectItem value="0 * * * *" className="text-[var(--dg-text-primary)]">每小时</SelectItem>
+                  <SelectItem value="0 2 * * *" className="text-[var(--dg-text-primary)]">每天 02:00</SelectItem>
+                  <SelectItem value="0 3 * * 0" className="text-[var(--dg-text-primary)]">每周日 03:00</SelectItem>
+                  <SelectItem value="0 9 * * 1" className="text-[var(--dg-text-primary)]">每周一 09:00</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <p className="text-xs text-[var(--dg-text-muted)] mt-1">格式: 分 时 日 月 周</p>
+          </div>
+          <div>
+            <Label className="text-[var(--dg-text-primary)]">执行命令</Label>
+            <Textarea
+              value={form.content}
+              onChange={(e) => setForm({ ...form, content: e.target.value })}
+              placeholder="/scripts/backup.sh"
+              className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] mt-1 font-mono"
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)} className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">
+            取消
+          </Button>
+          <Button className="bg-blue-600 hover:bg-blue-700" onClick={handleSave}>
+            {editJob ? '保存修改' : '创建任务'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/src/components/automation/CronJobManager.tsx b/frontend/src/components/automation/CronJobManager.tsx
index 76c23cb..02d42e3 100644
--- a/frontend/src/components/automation/CronJobManager.tsx
+++ b/frontend/src/components/automation/CronJobManager.tsx
@@ -1,34 +1,9 @@
-import { useState, useEffect, useCallback, Fragment } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
 import { Checkbox } from '@/components/ui/checkbox';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { Textarea } from '@/components/ui/textarea';
-import { Label } from '@/components/ui/label';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
 import {
   Play,
   Plus,
@@ -38,16 +13,17 @@ import {
   Edit,
   Trash2,
   History,
-  CheckCircle,
-  XCircle,
   Loader2,
   Terminal,
   RefreshCw,
   PackageOpen,
 } from 'lucide-react';
 import { toast } from 'sonner';
-import { cronJobApi, taskExecutionApi } from '@/services/api';
+import { cronJobApi } from '@/services/api';
 import { useConfirm } from '@/components/ui/confirm-dialog';
+import { getStatusBadge, parseCron } from './cronJobHelpers';
+import { CronJobFormDialog } from './CronJobFormDialog';
+import { ExecutionHistoryDialog } from './ExecutionHistoryDialog';
 
 export function CronJobManager() {
   const [searchQuery, setSearchQuery] = useState('');
@@ -56,39 +32,21 @@ export function CronJobManager() {
   const [refreshing, setRefreshing] = useState(false);
   const [isFormDialogOpen, setIsFormDialogOpen] = useState(false);
   const [isLogDialogOpen, setIsLogDialogOpen] = useState(false);
-  const [executions, setExecutions] = useState<any[]>([]);
-  const [executionsLoading, setExecutionsLoading] = useState(false);
-  const [expandedExec, setExpandedExec] = useState<number | null>(null);
   const [executingId, setExecutingId] = useState<number | null>(null);
+  // editJob=null 表示新建模式；非 null 表示编辑已有任务 // Logan.Li
+  const [editJob, setEditJob] = useState<any | null>(null);
   // 批量选择（批量删除） // Logan.Li
   const [selectedIds, setSelectedIds] = useState<number[]>([]);
-  // editingId === null 表示新建模式；非 null 表示编辑已有任务 // Logan.Li
-  const [editingId, setEditingId] = useState<number | null>(null);
-  const [formJob, setFormJob] = useState({
-    name: '',
-    description: '',
-    cron_expr: '',
-    type: 'command',
-    content: '',
-  });
 
   const _confirm = useConfirm();
 
   const openCreate = () => {
-    setEditingId(null);
-    setFormJob({ name: '', description: '', cron_expr: '', type: 'command', content: '' });
+    setEditJob(null);
     setIsFormDialogOpen(true);
   };
 
   const openEdit = (job: any) => {
-    setEditingId(job.id);
-    setFormJob({
-      name: job.name || '',
-      description: job.description || '',
-      cron_expr: job.cron_expr || '',
-      type: job.type || 'command',
-      content: job.content || '',
-    });
+    setEditJob(job);
     setIsFormDialogOpen(true);
   };
 
@@ -111,100 +69,12 @@ export function CronJobManager() {
     refreshData();
   }, [refreshData]);
 
-  const loadExecutions = async () => {
-    try {
-      setExecutionsLoading(true);
-      const data = await taskExecutionApi.getExecutions({ task_type: 'cron', page_size: 50 });
-      setExecutions(data.list || []);
-    } catch (error) {
-      console.error('Failed to load executions:', error);
-    } finally {
-      setExecutionsLoading(false);
-    }
-  };
-
-  const openLogDialog = () => {
-    setIsLogDialogOpen(true);
-    loadExecutions();
-  };
-
   const filteredJobs = jobs.filter(
     (job) =>
       (job.name || '').toLowerCase().includes(searchQuery.toLowerCase()) ||
       (job.description || '').toLowerCase().includes(searchQuery.toLowerCase())
   );
 
-  const getStatusBadge = (status: any) => {
-    switch (status) {
-      case 'success':
-        return (
-          <Badge variant="outline" className="border-emerald-500/30 text-emerald-400 bg-emerald-500/10">
-            <CheckCircle className="h-3 w-3 mr-1" />
-            成功
-          </Badge>
-        );
-      case 'failed':
-        return (
-          <Badge variant="outline" className="border-red-500/30 text-red-400 bg-red-500/10">
-            <XCircle className="h-3 w-3 mr-1" />
-            失败
-          </Badge>
-        );
-      case 'running':
-        return (
-          <Badge variant="outline" className="border-blue-500/30 text-blue-400 bg-blue-500/10 animate-pulse">
-            <Loader2 className="h-3 w-3 mr-1 animate-spin" />
-            执行中
-          </Badge>
-        );
-      default:
-        return (
-          <Badge variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-muted)]">
-            从未执行
-          </Badge>
-        );
-    }
-  };
-
-  const parseCron = (schedule: string) => {
-    const patterns: Record<string, string> = {
-      '0 2 * * *': '每天 02:00',
-      '0 3 * * 0': '每周日 03:00',
-      '*/5 * * * *': '每 5 分钟',
-      '0 * * * *': '每小时',
-      '0 9 * * 1': '每周一 09:00',
-    };
-    return patterns[schedule] || schedule;
-  };
-
-  const handleSaveJob = async () => {
-    if (!formJob.name || !formJob.cron_expr) {
-      toast.error('请填写任务名称和 Cron 表达式');
-      return;
-    }
-    try {
-      const payload = {
-        name: formJob.name,
-        description: formJob.description,
-        cron_expr: formJob.cron_expr,
-        type: formJob.type,
-        content: formJob.content,
-      };
-      if (editingId !== null) {
-        await cronJobApi.updateJob(editingId, payload);
-        toast.success('任务更新成功');
-      } else {
-        await cronJobApi.createJob(payload);
-        toast.success('任务创建成功');
-      }
-      setIsFormDialogOpen(false);
-      refreshData();
-    } catch (error) {
-      console.error('Failed to save cron job:', error);
-      toast.error(editingId !== null ? '更新失败' : '创建失败');
-    }
-  };
-
   const handleToggleJob = async (id: any) => {
     try {
       await cronJobApi.toggleJob(id);
@@ -301,7 +171,7 @@ export function CronJobManager() {
           <Button
             variant="outline"
             className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]"
-            onClick={openLogDialog}
+            onClick={() => setIsLogDialogOpen(true)}
           >
             <History className="h-4 w-4 mr-2" />
             执行历史
@@ -510,143 +380,19 @@ export function CronJobManager() {
         ))}
       </div>
 
-      {/* Create / Edit Job Dialog (共用) */}
-      <Dialog open={isFormDialogOpen} onOpenChange={setIsFormDialogOpen}>
-        <DialogContent className="max-w-2xl bg-[var(--dg-bg-primary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]">
-          <DialogHeader>
-            <DialogTitle>{editingId !== null ? '编辑定时任务' : '新建定时任务'}</DialogTitle>
-            <DialogDescription className="text-[var(--dg-text-secondary)]">配置 Cron 定时任务</DialogDescription>
-          </DialogHeader>
-          <div className="space-y-4 py-4">
-            <div>
-              <Label className="text-[var(--dg-text-primary)]">任务名称</Label>
-              <Input
-                value={formJob.name}
-                onChange={(e) => setFormJob({ ...formJob, name: e.target.value })}
-                placeholder="例如: 数据库备份"
-                className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] mt-1"
-              />
-            </div>
-            <div>
-              <Label className="text-[var(--dg-text-primary)]">描述</Label>
-              <Textarea
-                value={formJob.description}
-                onChange={(e) => setFormJob({ ...formJob, description: e.target.value })}
-                placeholder="任务描述..."
-                className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] mt-1"
-              />
-            </div>
-            <div>
-              <Label className="text-[var(--dg-text-primary)]">Cron 表达式</Label>
-              <div className="flex gap-2">
-                <Input
-                  value={formJob.cron_expr}
-                  onChange={(e) => setFormJob({ ...formJob, cron_expr: e.target.value })}
-                  placeholder="0 2 * * *"
-                  className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] mt-1"
-                />
-                <Select onValueChange={(v) => setFormJob({ ...formJob, cron_expr: v })}>
-                  <SelectTrigger className="w-48 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] mt-1">
-                    <SelectValue placeholder="快速选择" />
-                  </SelectTrigger>
-                  <SelectContent className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-                    <SelectItem value="*/5 * * * *" className="text-[var(--dg-text-primary)]">每 5 分钟</SelectItem>
-                    <SelectItem value="0 * * * *" className="text-[var(--dg-text-primary)]">每小时</SelectItem>
-                    <SelectItem value="0 2 * * *" className="text-[var(--dg-text-primary)]">每天 02:00</SelectItem>
-                    <SelectItem value="0 3 * * 0" className="text-[var(--dg-text-primary)]">每周日 03:00</SelectItem>
-                    <SelectItem value="0 9 * * 1" className="text-[var(--dg-text-primary)]">每周一 09:00</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-              <p className="text-xs text-[var(--dg-text-muted)] mt-1">格式: 分 时 日 月 周</p>
-            </div>
-            <div>
-              <Label className="text-[var(--dg-text-primary)]">执行命令</Label>
-              <Textarea
-                value={formJob.content}
-                onChange={(e) => setFormJob({ ...formJob, content: e.target.value })}
-                placeholder="/scripts/backup.sh"
-                className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] mt-1 font-mono"
-              />
-            </div>
-          </div>
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setIsFormDialogOpen(false)} className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">
-              取消
-            </Button>
-            <Button className="bg-blue-600 hover:bg-blue-700" onClick={handleSaveJob}>
-              {editingId !== null ? '保存修改' : '创建任务'}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+      {/* 新建/编辑定时任务弹窗 */}
+      <CronJobFormDialog
+        open={isFormDialogOpen}
+        onOpenChange={setIsFormDialogOpen}
+        editJob={editJob}
+        onSuccess={refreshData}
+      />
 
-      {/* Execution History Dialog */}
-      <Dialog open={isLogDialogOpen} onOpenChange={setIsLogDialogOpen}>
-        <DialogContent className="max-w-4xl bg-[var(--dg-bg-primary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] max-h-[85vh] overflow-y-auto">
-          <DialogHeader>
-            <DialogTitle>执行历史</DialogTitle>
-            <DialogDescription className="text-[var(--dg-text-secondary)]">定时任务执行记录与输出日志</DialogDescription>
-          </DialogHeader>
-          <div className="mt-4">
-            {executionsLoading ? (
-              <div className="flex items-center justify-center py-8">
-                <Loader2 className="h-6 w-6 text-[var(--dg-text-secondary)] animate-spin" />
-              </div>
-            ) : executions.length === 0 ? (
-              <div className="flex flex-col items-center justify-center py-12 text-[var(--dg-text-secondary)]">
-                <History className="h-10 w-10 mb-3 opacity-40" />
-                <p className="text-sm">暂无执行记录</p>
-              </div>
-            ) : (
-              <Table>
-                <TableHeader>
-                  <TableRow className="border-[var(--dg-border)]">
-                    <TableHead className="text-[var(--dg-text-secondary)]">任务</TableHead>
-                    <TableHead className="text-[var(--dg-text-secondary)]">状态</TableHead>
-                    <TableHead className="text-[var(--dg-text-secondary)]">耗时</TableHead>
-                    <TableHead className="text-[var(--dg-text-secondary)]">执行时间</TableHead>
-                    <TableHead className="text-[var(--dg-text-secondary)]">输出</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {executions.map((exec) => (
-                    <Fragment key={exec.id}>
-                      <TableRow className="border-[var(--dg-border)] cursor-pointer hover:bg-[var(--dg-bg-hover)]/50" onClick={() => setExpandedExec(expandedExec === exec.id ? null : exec.id)}>
-                        <TableCell className="text-[var(--dg-text-primary)]">{exec.task_name}</TableCell>
-                        <TableCell>{getStatusBadge(exec.status)}</TableCell>
-                        <TableCell className="text-[var(--dg-text-secondary)]">{exec.duration ? `${exec.duration}ms` : '--'}</TableCell>
-                        <TableCell className="text-[var(--dg-text-secondary)]">
-                          {exec.started_at ? new Date(exec.started_at).toLocaleString() : '--'}
-                        </TableCell>
-                        <TableCell className="text-[var(--dg-text-secondary)]">
-                          {exec.output ? (
-                            <span className="text-blue-400 text-xs flex items-center gap-1">
-                              <Terminal className="h-3 w-3" />
-                              {expandedExec === exec.id ? '收起' : '查看'}
-                            </span>
-                          ) : (
-                            '--'
-                          )}
-                        </TableCell>
-                      </TableRow>
-                      {expandedExec === exec.id && exec.output && (
-                        <TableRow key={`${exec.id}-out`} className="border-[var(--dg-border)]">
-                          <TableCell colSpan={5} className="bg-[var(--dg-bg-tertiary)] p-0">
-                            <pre className="p-4 text-xs text-[var(--dg-text-primary)] font-mono whitespace-pre-wrap max-h-64 overflow-y-auto">
-                              {exec.output}
-                            </pre>
-                          </TableCell>
-                        </TableRow>
-                      )}
-                    </Fragment>
-                  ))}
-                </TableBody>
-              </Table>
-            )}
-          </div>
-        </DialogContent>
-      </Dialog>
+      {/* 执行历史弹窗 */}
+      <ExecutionHistoryDialog
+        open={isLogDialogOpen}
+        onOpenChange={setIsLogDialogOpen}
+      />
     </div>
   );
 }
diff --git a/frontend/src/components/automation/ExecutionHistoryDialog.tsx b/frontend/src/components/automation/ExecutionHistoryDialog.tsx
new file mode 100644
index 0000000..32f6e38
--- /dev/null
+++ b/frontend/src/components/automation/ExecutionHistoryDialog.tsx
@@ -0,0 +1,117 @@
+import { useState, useEffect, Fragment } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { History, Loader2, Terminal } from 'lucide-react';
+import { taskExecutionApi } from '@/services/api';
+import { getStatusBadge } from './cronJobHelpers';
+
+// 定时任务执行历史弹窗（打开时自动加载，点击行展开输出） // Logan.Li
+export function ExecutionHistoryDialog({
+  open,
+  onOpenChange,
+}: {
+  open: boolean;
+  onOpenChange: (v: boolean) => void;
+}) {
+  const [executions, setExecutions] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [expandedExec, setExpandedExec] = useState<number | null>(null);
+
+  // 弹窗打开时加载执行记录 // Logan.Li
+  useEffect(() => {
+    if (!open) return;
+    const load = async () => {
+      try {
+        setLoading(true);
+        const data = await taskExecutionApi.getExecutions({ task_type: 'cron', page_size: 50 });
+        setExecutions(data.list || []);
+      } catch (error) {
+        console.error('Failed to load executions:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    load();
+  }, [open]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-4xl bg-[var(--dg-bg-primary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] max-h-[85vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>执行历史</DialogTitle>
+          <DialogDescription className="text-[var(--dg-text-secondary)]">定时任务执行记录与输出日志</DialogDescription>
+        </DialogHeader>
+        <div className="mt-4">
+          {loading ? (
+            <div className="flex items-center justify-center py-8">
+              <Loader2 className="h-6 w-6 text-[var(--dg-text-secondary)] animate-spin" />
+            </div>
+          ) : executions.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-12 text-[var(--dg-text-secondary)]">
+              <History className="h-10 w-10 mb-3 opacity-40" />
+              <p className="text-sm">暂无执行记录</p>
+            </div>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow className="border-[var(--dg-border)]">
+                  <TableHead className="text-[var(--dg-text-secondary)]">任务</TableHead>
+                  <TableHead className="text-[var(--dg-text-secondary)]">状态</TableHead>
+                  <TableHead className="text-[var(--dg-text-secondary)]">耗时</TableHead>
+                  <TableHead className="text-[var(--dg-text-secondary)]">执行时间</TableHead>
+                  <TableHead className="text-[var(--dg-text-secondary)]">输出</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {executions.map((exec) => (
+                  <Fragment key={exec.id}>
+                    <TableRow className="border-[var(--dg-border)] cursor-pointer hover:bg-[var(--dg-bg-hover)]/50" onClick={() => setExpandedExec(expandedExec === exec.id ? null : exec.id)}>
+                      <TableCell className="text-[var(--dg-text-primary)]">{exec.task_name}</TableCell>
+                      <TableCell>{getStatusBadge(exec.status)}</TableCell>
+                      <TableCell className="text-[var(--dg-text-secondary)]">{exec.duration ? `${exec.duration}ms` : '--'}</TableCell>
+                      <TableCell className="text-[var(--dg-text-secondary)]">
+                        {exec.started_at ? new Date(exec.started_at).toLocaleString() : '--'}
+                      </TableCell>
+                      <TableCell className="text-[var(--dg-text-secondary)]">
+                        {exec.output ? (
+                          <span className="text-blue-400 text-xs flex items-center gap-1">
+                            <Terminal className="h-3 w-3" />
+                            {expandedExec === exec.id ? '收起' : '查看'}
+                          </span>
+                        ) : (
+                          '--'
+                        )}
+                      </TableCell>
+                    </TableRow>
+                    {expandedExec === exec.id && exec.output && (
+                      <TableRow key={`${exec.id}-out`} className="border-[var(--dg-border)]">
+                        <TableCell colSpan={5} className="bg-[var(--dg-bg-tertiary)] p-0">
+                          <pre className="p-4 text-xs text-[var(--dg-text-primary)] font-mono whitespace-pre-wrap max-h-64 overflow-y-auto">
+                            {exec.output}
+                          </pre>
+                        </TableCell>
+                      </TableRow>
+                    )}
+                  </Fragment>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/src/components/automation/cronJobHelpers.tsx b/frontend/src/components/automation/cronJobHelpers.tsx
new file mode 100644
index 0000000..343b91c
--- /dev/null
+++ b/frontend/src/components/automation/cronJobHelpers.tsx
@@ -0,0 +1,47 @@
+import { Badge } from '@/components/ui/badge';
+import { CheckCircle, XCircle, Loader2 } from 'lucide-react';
+
+// 获取执行状态徽章（主列表+执行历史共用） // Logan.Li
+export function getStatusBadge(status: string) {
+  switch (status) {
+    case 'success':
+      return (
+        <Badge variant="outline" className="border-emerald-500/30 text-emerald-400 bg-emerald-500/10">
+          <CheckCircle className="h-3 w-3 mr-1" />
+          成功
+        </Badge>
+      );
+    case 'failed':
+      return (
+        <Badge variant="outline" className="border-red-500/30 text-red-400 bg-red-500/10">
+          <XCircle className="h-3 w-3 mr-1" />
+          失败
+        </Badge>
+      );
+    case 'running':
+      return (
+        <Badge variant="outline" className="border-blue-500/30 text-blue-400 bg-blue-500/10 animate-pulse">
+          <Loader2 className="h-3 w-3 mr-1 animate-spin" />
+          执行中
+        </Badge>
+      );
+    default:
+      return (
+        <Badge variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-muted)]">
+          从未执行
+        </Badge>
+      );
+  }
+}
+
+// Cron 表达式转中文可读描述 // Logan.Li
+export function parseCron(schedule: string) {
+  const patterns: Record<string, string> = {
+    '0 2 * * *': '每天 02:00',
+    '0 3 * * 0': '每周日 03:00',
+    '*/5 * * * *': '每 5 分钟',
+    '0 * * * *': '每小时',
+    '0 9 * * 1': '每周一 09:00',
+  };
+  return patterns[schedule] || schedule;
+}