feat: show today's failed tasks from dashboard

Add a failure list with task names, commands, accumulated failure counts and latest log links. Keep recovered and deleted tasks visible in today's statistics.

Fixes #3065

src/locales/en-US.json

@@ -657,5 +657,9 @@
   "已完成": "Completed",
   "已停止": "Stopped",
   "退出码": "Exit Code",
-  "结束": "End"
+  "结束": "End",
+  "失败次数": "Failure count",
+  "最新日志": "Latest log",
+  "加载失败": "Failed to load",
+  "重试": "Retry"
 }

src/locales/zh-CN.json

@@ -657,5 +657,9 @@
   "已完成": "已完成",
   "已停止": "已停止",
   "退出码": "退出码",
-  "结束": "结束"
+  "结束": "结束",
+  "失败次数": "失败次数",
+  "最新日志": "最新日志",
+  "加载失败": "加载失败",
+  "重试": "重试"
 }

src/pages/dashboard/failureModal.tsx

@@ -0,0 +1,117 @@
+import { useEffect, useState } from 'react';
+import { Alert, Button, Modal, Table, Tag } from 'antd';
+import intl from 'react-intl-universal';
+import { request } from '@/utils/http';
+import config from '@/utils/config';
+import CronLogModal from '../crontab/logModal';
+
+interface FailedTask {
+  id: number;
+  name: string;
+  command: string;
+  failCount: number;
+  deleted: boolean;
+}
+
+export default function FailureModal({ onCancel }: { onCancel: () => void }) {
+  const [tasks, setTasks] = useState<FailedTask[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [failed, setFailed] = useState(false);
+  const [reload, setReload] = useState(0);
+  const [logCron, setLogCron] = useState<FailedTask | null>(null);
+
+  useEffect(() => {
+    let active = true;
+    setLoading(true);
+    setFailed(false);
+    request
+      .get(`${config.apiPrefix}dashboard/failures`)
+      .then((response) => {
+        if (!active) return;
+        if (response.code !== 200)
+          throw new Error('Failed to load dashboard failures');
+        setTasks(response.data);
+      })
+      .catch(() => {
+        if (active) setFailed(true);
+      })
+      .finally(() => {
+        if (active) setLoading(false);
+      });
+    return () => {
+      active = false;
+    };
+  }, [reload]);
+
+  return (
+    <>
+      <Modal
+        title={intl.get('今日失败')}
+        open
+        onCancel={onCancel}
+        footer={null}
+        width={900}
+      >
+        {failed ? (
+          <Alert
+            type="error"
+            showIcon
+            message={intl.get('加载失败')}
+            action={
+              <Button onClick={() => setReload((value) => value + 1)}>
+                {intl.get('重试')}
+              </Button>
+            }
+          />
+        ) : (
+          <Table<FailedTask>
+            loading={loading}
+            dataSource={tasks}
+            rowKey="id"
+            size="small"
+            scroll={{ x: 650 }}
+            pagination={{ pageSize: 10, showSizeChanger: false }}
+            columns={[
+              {
+                title: intl.get('定时任务'),
+                dataIndex: 'name',
+                ellipsis: true,
+                render: (name, task) => (
+                  <>
+                    {name} {task.deleted && <Tag>{intl.get('已删除')}</Tag>}
+                  </>
+                ),
+              },
+              { title: intl.get('命令'), dataIndex: 'command', ellipsis: true },
+              {
+                title: intl.get('失败次数'),
+                dataIndex: 'failCount',
+                width: 100,
+              },
+              {
+                title: intl.get('日志'),
+                width: 120,
+                render: (_, task) => (
+                  <Button
+                    type="link"
+                    size="small"
+                    disabled={task.deleted}
+                    onClick={() => {
+                      localStorage.setItem('logCron', String(task.id));
+                      setLogCron(task);
+                    }}
+                  >
+                    {intl.get('最新日志')}
+                  </Button>
+                ),
+              },
+            ]}
+          />
+        )}
+      </Modal>
+      {logCron && (
+        <CronLogModal cron={logCron} handleCancel={() => setLogCron(null)} />
+      )}
+    </>
+  );
+}

src/pages/dashboard/index.tsx

@@ -16,6 +16,7 @@ import { SharedContext } from '@/layouts';
 import { request } from '@/utils/http';
 import config from '@/utils/config';
 import CronLogModal from '../crontab/logModal';
+import FailureModal from './failureModal';
 
 interface Overview {
   total: number;
@@ -93,6 +94,7 @@ const Dashboard = () => {
   const [labels, setLabels] = useState<any[]>([]);
   const [logCron, setLogCron] = useState<any>(null);
   const [loading, setLoading] = useState(true);
+  const [showFailures, setShowFailures] = useState(false);
 
   const fetchData = useCallback(async () => {
     try {
@@ -193,7 +195,16 @@ const Dashboard = () => {
           <Card size="small"><Statistic title={intl.get('今日成功')} value={overview?.todaySuccess || 0} valueStyle={{ color: '#52c41a' }} prefix={<CheckCircleOutlined />} /></Card>
         </Col>
         <Col xs={12} sm={8} md={6} lg={3}>
-          <Card size="small"><Statistic title={intl.get('今日失败')} value={overview?.todayFail || 0} valueStyle={{ color: '#ff4d4f' }} prefix={<CloseCircleOutlined />} /></Card>
+          <Card size="small" hoverable role="button" tabIndex={0}
+            aria-label={intl.get('今日失败')}
+            onClick={() => setShowFailures(true)}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                setShowFailures(true);
+              }
+            }}
+          ><Statistic title={intl.get('今日失败')} value={overview?.todayFail || 0} valueStyle={{ color: '#ff4d4f' }} prefix={<CloseCircleOutlined />} /></Card>
         </Col>
         <Col xs={12} sm={8} md={6} lg={3}>
           <Card size="small"><Statistic title={intl.get('平均耗时')} value={overview?.avgTime ? `${(overview.avgTime / 1000).toFixed(1)}s` : '-'} prefix={<ClockCircleOutlined />} /></Card>
@@ -350,6 +361,7 @@ const Dashboard = () => {
           </Card>
         </Col>
       </Row>
+      {showFailures && <FailureModal onCancel={() => setShowFailures(false)} />}
       {logCron && (
         <CronLogModal
           cron={logCron}