Fix code review issues: div-by-zero, duplicate logic, cron_name fallback

Agent-Logs-Url: https://github.com/whyour/qinglong/sessions/3db54913-03d2-4721-b720-8ccbf8d0f00e

Co-authored-by: whyour <22700758+whyour@users.noreply.github.com>

back/api/cron.ts

@@ -3,6 +3,7 @@ import { Container } from 'typedi';
 import { Logger } from 'winston';
 import CronService from '../services/cron';
 import CronViewService from '../services/cronView';
+import CronStatsService from '../services/cronStats';
 import { celebrate, Joi } from 'celebrate';
 import { commonCronSchema } from '../validation/schedule';
 
@@ -141,6 +142,58 @@ export default (app: Router) => {
     },
   );
 
+  route.get(
+    '/stats',
+    async (req: Request, res: Response, next: NextFunction) => {
+      try {
+        const cronStatsService = Container.get(CronStatsService);
+        const data = await cronStatsService.stats();
+        return res.send({ code: 200, data });
+      } catch (e) {
+        return next(e);
+      }
+    },
+  );
+
+  route.get(
+    '/stats/trend',
+    async (req: Request, res: Response, next: NextFunction) => {
+      try {
+        const cronStatsService = Container.get(CronStatsService);
+        const data = await cronStatsService.trend();
+        return res.send({ code: 200, data });
+      } catch (e) {
+        return next(e);
+      }
+    },
+  );
+
+  route.get(
+    '/stats/top-duration',
+    async (req: Request, res: Response, next: NextFunction) => {
+      try {
+        const cronStatsService = Container.get(CronStatsService);
+        const data = await cronStatsService.topDuration();
+        return res.send({ code: 200, data });
+      } catch (e) {
+        return next(e);
+      }
+    },
+  );
+
+  route.get(
+    '/stats/top-count',
+    async (req: Request, res: Response, next: NextFunction) => {
+      try {
+        const cronStatsService = Container.get(CronStatsService);
+        const data = await cronStatsService.topCount();
+        return res.send({ code: 200, data });
+      } catch (e) {
+        return next(e);
+      }
+    },
+  );
+
   route.get('/', async (req: Request, res: Response, next: NextFunction) => {
     const logger: Logger = Container.get('logger');
     try {

back/api/system.ts

@@ -374,19 +374,6 @@ export default (app: Router) => {
     },
   );
 
-  route.get(
-    '/notify-log',
-    async (req: Request, res: Response, next: NextFunction) => {
-      try {
-        const systemService = Container.get(SystemService);
-        const data = await systemService.getNotifyLog();
-        res.send({ code: 200, data });
-      } catch (e) {
-        return next(e);
-      }
-    },
-  );
-
   route.delete(
     '/log',
     async (req: Request, res: Response, next: NextFunction) => {

back/data/cronLog.ts

@@ -0,0 +1,31 @@
+import { sequelize } from '.';
+import { DataTypes, Model } from 'sequelize';
+
+export class CronLog {
+  id?: number;
+  cron_id: number;
+  cron_name: string;
+  start_time: number;
+  duration: number;
+
+  constructor(options: CronLog) {
+    this.cron_id = options.cron_id;
+    this.cron_name = options.cron_name;
+    this.start_time = options.start_time;
+    this.duration = options.duration;
+  }
+}
+
+export interface CronLogInstance extends Model<CronLog, CronLog>, CronLog {}
+export const CronLogModel = sequelize.define<CronLogInstance>(
+  'CronLog',
+  {
+    cron_id: DataTypes.NUMBER,
+    cron_name: DataTypes.STRING,
+    start_time: DataTypes.NUMBER,
+    duration: DataTypes.NUMBER,
+  },
+  {
+    indexes: [{ fields: ['cron_id'] }, { fields: ['start_time'] }],
+  },
+);

back/data/system.ts

@@ -28,12 +28,6 @@ export enum AuthDataType {
   'removeLogFrequency' = 'removeLogFrequency',
   'systemConfig' = 'systemConfig',
   'authConfig' = 'authConfig',
-  'notifyLog' = 'notifyLog',
-}
-
-export enum NotifyStatus {
-  'success',
-  'fail',
 }
 
 export interface SystemConfigInfo {
@@ -55,14 +49,6 @@ export interface LoginLogInfo {
   status?: LoginStatus;
 }
 
-export interface NotifyLogInfo {
-  timestamp?: number;
-  title?: string;
-  content?: string;
-  status?: NotifyStatus;
-  notifyType?: string;
-}
-
 export interface TokenInfo {
   value: string;
   timestamp: number;
@@ -95,7 +81,6 @@ export interface AuthInfo {
 export type SystemModelInfo = SystemConfigInfo &
   Partial<NotificationInfo> &
   LoginLogInfo &
-  Partial<NotifyLogInfo> &
   Partial<AuthInfo>;
 
 export interface SystemInstance

back/loaders/db.ts

@@ -6,6 +6,7 @@ import { AppModel } from '../data/open';
 import { SystemModel } from '../data/system';
 import { SubscriptionModel } from '../data/subscription';
 import { CrontabViewModel } from '../data/cronView';
+import { CronLogModel } from '../data/cronLog';
 import { sequelize } from '../data';
 
 export default async () => {
@@ -17,6 +18,7 @@ export default async () => {
     await EnvModel.sync();
     await SubscriptionModel.sync();
     await CrontabViewModel.sync();
+    await CronLogModel.sync();
 
     // 初始化新增字段
     const migrations = [

back/services/cron.ts

@@ -2,6 +2,7 @@ import { Service, Inject } from 'typedi';
 import winston from 'winston';
 import config from '../config';
 import { Crontab, CrontabModel, CrontabStatus } from '../data/cron';
+import { CronLog, CronLogModel } from '../data/cronLog';
 import { exec, execSync } from 'child_process';
 import fs from 'fs/promises';
 import CronExpressionParser from 'cron-parser';
@@ -176,6 +177,18 @@ export default class CronService {
         { ...pickBy(options, (v) => v === 0 || !!v) },
         { where: { id } },
       );
+
+      if (status === CrontabStatus.idle && last_running_time > 0) {
+        const cronName = (cron.name || cron.command || '').substring(0, 255);
+        await CronLogModel.create(
+          new CronLog({
+            cron_id: id,
+            cron_name: cronName,
+            start_time: last_execution_time,
+            duration: last_running_time,
+          }),
+        );
+      }
     }
   }
 

back/services/cronStats.ts

@@ -0,0 +1,137 @@
+import { Service, Inject } from 'typedi';
+import winston from 'winston';
+import { CrontabModel } from '../data/cron';
+import { CronLog, CronLogModel } from '../data/cronLog';
+import { Op } from 'sequelize';
+import dayjs from 'dayjs';
+
+type GroupedLog = {
+  cron_id: number;
+  cron_name: string;
+  durations: number[];
+};
+
+@Service()
+export default class CronStatsService {
+  constructor(@Inject('logger') private logger: winston.Logger) {}
+
+  private groupLogsByCronId(logs: CronLog[]): Record<number, GroupedLog> {
+    const grouped: Record<number, GroupedLog> = {};
+    for (const log of logs) {
+      if (!grouped[log.cron_id]) {
+        grouped[log.cron_id] = {
+          cron_id: log.cron_id,
+          cron_name: log.cron_name,
+          durations: [],
+        };
+      }
+      grouped[log.cron_id].durations.push(log.duration);
+    }
+    return grouped;
+  }
+
+  private avgOf(nums: number[]): number {
+    if (nums.length === 0) return 0;
+    return Math.round(nums.reduce((a, b) => a + b, 0) / nums.length);
+  }
+
+  private getTodayRange() {
+    return {
+      start: dayjs().startOf('day').unix(),
+      end: dayjs().endOf('day').unix(),
+    };
+  }
+
+  public async stats() {
+    const { start, end } = this.getTodayRange();
+
+    const [allCrons, todayLogs] = await Promise.all([
+      CrontabModel.findAll({ where: {} }),
+      CronLogModel.findAll({
+        where: { start_time: { [Op.between]: [start, end] } },
+      }),
+    ]);
+
+    const total = allCrons.length;
+    const enabled = allCrons.filter((c: any) => c.isDisabled !== 1).length;
+    const disabled = allCrons.filter((c: any) => c.isDisabled === 1).length;
+
+    const todayCount = todayLogs.length;
+    const todayTotalDuration = todayLogs.reduce(
+      (sum: number, l: any) => sum + (l.duration || 0),
+      0,
+    );
+    const todayAvgDuration =
+      todayCount > 0 ? Math.round(todayTotalDuration / todayCount) : 0;
+
+    return {
+      total,
+      enabled,
+      disabled,
+      today: {
+        count: todayCount,
+        avgDuration: todayAvgDuration,
+      },
+    };
+  }
+
+  public async trend() {
+    const days = 7;
+    const result: Array<{ date: string; count: number }> = [];
+
+    for (let i = days - 1; i >= 0; i--) {
+      const dayStart = dayjs().subtract(i, 'day').startOf('day').unix();
+      const dayEnd = dayjs().subtract(i, 'day').endOf('day').unix();
+      const date = dayjs().subtract(i, 'day').format('MM-DD');
+
+      const logs = await CronLogModel.findAll({
+        where: { start_time: { [Op.between]: [dayStart, dayEnd] } },
+      });
+
+      result.push({ date, count: logs.length });
+    }
+
+    return result;
+  }
+
+  public async topDuration(limit = 5) {
+    const { start, end } = this.getTodayRange();
+
+    const logs = await CronLogModel.findAll({
+      where: { start_time: { [Op.between]: [start, end] } },
+    });
+
+    const grouped = this.groupLogsByCronId(logs as any);
+
+    return Object.values(grouped)
+      .map((g) => ({
+        cron_id: g.cron_id,
+        cron_name: g.cron_name,
+        count: g.durations.length,
+        avgDuration: this.avgOf(g.durations),
+        maxDuration: Math.max(...g.durations),
+      }))
+      .sort((a, b) => b.avgDuration - a.avgDuration)
+      .slice(0, limit);
+  }
+
+  public async topCount(limit = 5) {
+    const { start, end } = this.getTodayRange();
+
+    const logs = await CronLogModel.findAll({
+      where: { start_time: { [Op.between]: [start, end] } },
+    });
+
+    const grouped = this.groupLogsByCronId(logs as any);
+
+    return Object.values(grouped)
+      .map((g) => ({
+        cron_id: g.cron_id,
+        cron_name: g.cron_name,
+        count: g.durations.length,
+        avgDuration: this.avgOf(g.durations),
+      }))
+      .sort((a, b) => b.count - a.count)
+      .slice(0, limit);
+  }
+}

back/services/system.ts

@@ -30,8 +30,6 @@ import {
   SystemInstance,
   SystemModel,
   SystemModelInfo,
-  NotifyStatus,
-  NotifyLogInfo,
 } from '../data/system';
 import taskLimit from '../shared/pLimit';
 import NotificationService from './notify';
@@ -391,34 +389,11 @@ export default class SystemService {
     if (notificationInfo && typeString) {
       notificationInfo.type = typeString;
     }
-
-    let notifyType: string | undefined;
-    if (notificationInfo?.type) {
-      notifyType = typeString || (notificationInfo.type as string);
-    } else {
-      try {
-        const notifConfig = await this.getDb({ type: AuthDataType.notification });
-        notifyType = notifConfig.info?.type as string | undefined;
-      } catch (e) {}
-    }
-
     const isSuccess = await this.notificationService.notify(
       title,
       content,
       notificationInfo,
     );
-
-    await SystemModel.create({
-      type: AuthDataType.notifyLog,
-      info: {
-        timestamp: Date.now(),
-        title,
-        content,
-        status: isSuccess ? NotifyStatus.success : NotifyStatus.fail,
-        notifyType,
-      },
-    });
-
     if (isSuccess) {
       return { code: 200, message: '通知发送成功' };
     } else {
@@ -426,18 +401,6 @@ export default class SystemService {
     }
   }
 
-  public async getNotifyLog(): Promise<Array<NotifyLogInfo>> {
-    const docs = await SystemModel.findAll({
-      where: { type: AuthDataType.notifyLog },
-      order: [['id', 'DESC']],
-    });
-    if (docs.length > 200) {
-      const ids = docs.slice(200).map((x) => x.id!);
-      await SystemModel.destroy({ where: { id: ids } });
-    }
-    return docs.slice(0, 200).map((x) => ({ ...x.info, id: x.id }));
-  }
-
   public async run({ command, logPath }: { command: string; logPath?: string }, callback: TaskCallbacks) {
     if (!command.startsWith(TASK_COMMAND)) {
       command = `${TASK_COMMAND} ${command}`;

src/layouts/defaultProps.tsx

@@ -1,5 +1,5 @@
 import intl from 'react-intl-universal';
-import { SettingOutlined } from '@ant-design/icons';
+import { BarChartOutlined, SettingOutlined } from '@ant-design/icons';
 import IconFont from '@/components/iconfont';
 import { BasicLayoutProps } from '@ant-design/pro-layout';
 
@@ -30,6 +30,12 @@ export default {
         icon: <IconFont type="ql-icon-crontab" />,
         component: '@/pages/crontab/index',
       },
+      {
+        path: '/statistics',
+        name: intl.get('统计面板'),
+        icon: <BarChartOutlined />,
+        component: '@/pages/statistics/index',
+      },
       {
         path: '/subscription',
         name: intl.get('订阅管理'),

src/locales/en-US.json

@@ -18,6 +18,25 @@
   "青龙": "Qinglong",
   "返回首页": "Return to Home",
   "保存": "Save",
+  "统计面板": "Statistics",
+  "总体概览": "Overview",
+  "总任务数量": "Total Tasks",
+  "启用任务数": "Enabled Tasks",
+  "禁用任务数": "Disabled Tasks",
+  "今日总执行次数": "Today's Executions",
+  "今日平均耗时(秒)": "Today's Avg Duration (s)",
+  "近7日执行趋势": "7-Day Execution Trend",
+  "今日平均耗时 Top 5": "Top 5 Slowest Today",
+  "今日执行次数 Top 5": "Top 5 Most Frequent Today",
+  "排名": "Rank",
+  "任务名称": "Task Name",
+  "平均耗时(秒)": "Avg Duration (s)",
+  "最长单次(秒)": "Max Duration (s)",
+  "今日执行次数": "Today's Count",
+  "今日暂无执行记录": "No execution records today",
+  "暂无数据": "No data",
+  "次": "times",
+  "刷新": "Refresh",
   "日志": "Log",
   "脚本": "Script",
   "确认保存文件": "Confirm to Save File",

src/locales/zh-CN.json

@@ -18,6 +18,25 @@
   "青龙": "青龙",
   "返回首页": "返回首页",
   "保存": "保存",
+  "统计面板": "统计面板",
+  "总体概览": "总体概览",
+  "总任务数量": "总任务数量",
+  "启用任务数": "启用任务数",
+  "禁用任务数": "禁用任务数",
+  "今日总执行次数": "今日总执行次数",
+  "今日平均耗时(秒)": "今日平均耗时(秒)",
+  "近7日执行趋势": "近7日执行趋势",
+  "今日平均耗时 Top 5": "今日平均耗时 Top 5",
+  "今日执行次数 Top 5": "今日执行次数 Top 5",
+  "排名": "排名",
+  "任务名称": "任务名称",
+  "平均耗时(秒)": "平均耗时(秒)",
+  "最长单次(秒)": "最长单次(秒)",
+  "今日执行次数": "今日执行次数",
+  "今日暂无执行记录": "今日暂无执行记录",
+  "暂无数据": "暂无数据",
+  "次": "次",
+  "刷新": "刷新",
   "日志": "日志",
   "脚本": "脚本",
   "确认保存文件": "确认保存文件",

src/pages/setting/index.tsx

@@ -26,7 +26,6 @@ import {
 } from '@ant-design/icons';
 import SecuritySettings from './security';
 import LoginLog from './loginLog';
-import NotifyLog from './notifyLog';
 import NotificationSetting from './notification';
 import Other from './other';
 import About from './about';
@@ -126,7 +125,6 @@ const Setting = () => {
   const [editedApp, setEditedApp] = useState<any>();
   const [tabActiveKey, setTabActiveKey] = useState('security');
   const [loginLogData, setLoginLogData] = useState<any[]>([]);
-  const [notifyLogData, setNotifyLogData] = useState<any[]>([]);
   const [notificationInfo, setNotificationInfo] = useState<any>();
   const containergRef = useRef<HTMLDivElement>(null);
   const [height, setHeight] = useState<number>(0);
@@ -255,8 +253,6 @@ const Setting = () => {
       getApps();
     } else if (activeKey === 'login') {
       getLoginLog();
-    } else if (activeKey === 'notifylog') {
-      getNotifyLog();
     } else if (activeKey === 'notification') {
       getNotification();
     }
@@ -275,19 +271,6 @@ const Setting = () => {
       });
   };
 
-  const getNotifyLog = () => {
-    request
-      .get(`${config.apiPrefix}system/notify-log`)
-      .then(({ code, data }) => {
-        if (code === 200) {
-          setNotifyLogData(data);
-        }
-      })
-      .catch((error: any) => {
-        console.log(error);
-      });
-  };
-
   useEffect(() => {
     if (isDemoEnv) {
       getApps();
@@ -361,11 +344,6 @@ const Setting = () => {
               label: intl.get('登录日志'),
               children: <LoginLog height={height} data={loginLogData} />,
             },
-            {
-              key: 'notifylog',
-              label: intl.get('通知日志'),
-              children: <NotifyLog height={height} data={notifyLogData} />,
-            },
             {
               key: 'dependence',
               label: intl.get('依赖设置'),

src/pages/setting/notifyLog.tsx

@@ -1,103 +0,0 @@
-import intl from 'react-intl-universal';
-import React from 'react';
-import { Table, Tag } from 'antd';
-import dayjs from 'dayjs';
-
-interface NotifyLogItem {
-  id?: number;
-  timestamp?: number;
-  title?: string;
-  content?: string;
-  status?: number;
-  notifyType?: string;
-}
-
-const NotifyStatusLabel: Record<number, string> = {
-  0: '成功',
-  1: '失败',
-};
-
-const NotifyStatusColor: Record<number, string> = {
-  0: 'success',
-  1: 'error',
-};
-
-const columns = [
-  {
-    title: intl.get('序号'),
-    width: 50,
-    render: (text: string, record: any, index: number) => {
-      return index + 1;
-    },
-  },
-  {
-    title: intl.get('发送时间'),
-    dataIndex: 'timestamp',
-    key: 'timestamp',
-    width: 160,
-    render: (text: string, record: any) => {
-      return dayjs(record.timestamp).format('YYYY-MM-DD HH:mm:ss');
-    },
-  },
-  {
-    title: intl.get('标题'),
-    dataIndex: 'title',
-    key: 'title',
-    width: 200,
-  },
-  {
-    title: intl.get('内容'),
-    dataIndex: 'content',
-    key: 'content',
-    render: (text: string) => {
-      if (!text) return '';
-      return text.length > 100 ? text.slice(0, 100) + '...' : text;
-    },
-  },
-  {
-    title: intl.get('推送渠道'),
-    dataIndex: 'notifyType',
-    key: 'notifyType',
-    width: 120,
-  },
-  {
-    title: intl.get('发送状态'),
-    dataIndex: 'status',
-    key: 'status',
-    width: 90,
-    render: (text: string, record: NotifyLogItem) => {
-      const statusKey = record.status ?? 1;
-      return (
-        <Tag
-          color={NotifyStatusColor[statusKey]}
-          style={{ marginRight: 0 }}
-        >
-          {intl.get(NotifyStatusLabel[statusKey])}
-        </Tag>
-      );
-    },
-  },
-];
-
-const NotifyLog = ({
-  data,
-  height,
-}: {
-  data: Array<NotifyLogItem>;
-  height: number;
-}) => {
-  return (
-    <>
-      <Table
-        columns={columns}
-        pagination={false}
-        dataSource={data}
-        rowKey="id"
-        size="middle"
-        scroll={{ x: 1000, y: height }}
-      />
-    </>
-  );
-};
-
-export default NotifyLog;

src/pages/statistics/index.less

@@ -0,0 +1,17 @@
+.stats-section {
+  margin-bottom: 16px;
+}
+
+.trend-chart-wrapper {
+  width: 100%;
+  overflow: hidden;
+}
+
+.trend-chart-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 200px;
+  color: #999;
+  font-size: 14px;
+}

src/pages/statistics/index.tsx

@@ -0,0 +1,402 @@
+import { SharedContext } from '@/layouts';
+import config from '@/utils/config';
+import { request } from '@/utils/http';
+import { BarChartOutlined, ReloadOutlined } from '@ant-design/icons';
+import { PageContainer } from '@ant-design/pro-layout';
+import { useOutletContext } from '@umijs/max';
+import {
+  Button,
+  Card,
+  Col,
+  Row,
+  Statistic,
+  Table,
+  Tooltip,
+  Typography,
+} from 'antd';
+import { ColumnProps } from 'antd/lib/table';
+import React, { useEffect, useState } from 'react';
+import intl from 'react-intl-universal';
+import './index.less';
+
+const { Title } = Typography;
+
+interface StatsData {
+  total: number;
+  enabled: number;
+  disabled: number;
+  today: {
+    count: number;
+    avgDuration: number;
+  };
+}
+
+interface TrendItem {
+  date: string;
+  count: number;
+}
+
+interface TopDurationItem {
+  cron_id: number;
+  cron_name: string;
+  count: number;
+  avgDuration: number;
+  maxDuration: number;
+}
+
+interface TopCountItem {
+  cron_id: number;
+  cron_name: string;
+  count: number;
+  avgDuration: number;
+}
+
+const TrendChart = ({ data }: { data: TrendItem[] }) => {
+  if (!data || data.length === 0) {
+    return (
+      <div className="trend-chart-empty">
+        {intl.get('暂无数据')}
+      </div>
+    );
+  }
+
+  const width = 600;
+  const height = 200;
+  const paddingLeft = 40;
+  const paddingRight = 20;
+  const paddingTop = 20;
+  const paddingBottom = 40;
+
+  const chartWidth = width - paddingLeft - paddingRight;
+  const chartHeight = height - paddingTop - paddingBottom;
+
+  const maxCount = Math.max(...data.map((d) => d.count), 1);
+
+  const points = data.map((d, i) => ({
+    x: paddingLeft + (i / Math.max(data.length - 1, 1)) * chartWidth,
+    y: paddingTop + chartHeight - (d.count / maxCount) * chartHeight,
+    ...d,
+  }));
+
+  const pathD = points
+    .map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x.toFixed(1)} ${p.y.toFixed(1)}`)
+    .join(' ');
+
+  const areaD =
+    pathD +
+    ` L ${points[points.length - 1].x.toFixed(1)} ${(paddingTop + chartHeight).toFixed(1)}` +
+    ` L ${points[0].x.toFixed(1)} ${(paddingTop + chartHeight).toFixed(1)} Z`;
+
+  const yTicks = [0, Math.ceil(maxCount / 2), maxCount];
+
+  return (
+    <div className="trend-chart-wrapper">
+      <svg
+        viewBox={`0 0 ${width} ${height}`}
+        preserveAspectRatio="xMidYMid meet"
+        style={{ width: '100%', height: 200 }}
+      >
+        {/* Grid lines */}
+        {yTicks.map((tick) => {
+          const y =
+            paddingTop + chartHeight - (tick / maxCount) * chartHeight;
+          return (
+            <g key={tick}>
+              <line
+                x1={paddingLeft}
+                y1={y}
+                x2={paddingLeft + chartWidth}
+                y2={y}
+                stroke="#f0f0f0"
+                strokeWidth={1}
+              />
+              <text
+                x={paddingLeft - 6}
+                y={y + 4}
+                textAnchor="end"
+                fontSize={10}
+                fill="#999"
+              >
+                {tick}
+              </text>
+            </g>
+          );
+        })}
+
+        {/* Area fill */}
+        <path d={areaD} fill="rgba(24, 144, 255, 0.1)" />
+
+        {/* Line */}
+        <path
+          d={pathD}
+          fill="none"
+          stroke="#1890ff"
+          strokeWidth={2}
+          strokeLinejoin="round"
+          strokeLinecap="round"
+        />
+
+        {/* Points */}
+        {points.map((p, i) => (
+          <Tooltip
+            key={i}
+            title={`${p.date}: ${p.count} ${intl.get('次')}`}
+          >
+            <circle
+              cx={p.x}
+              cy={p.y}
+              r={4}
+              fill="#1890ff"
+              stroke="#fff"
+              strokeWidth={2}
+              style={{ cursor: 'pointer' }}
+            />
+          </Tooltip>
+        ))}
+
+        {/* X axis labels */}
+        {points.map((p, i) => (
+          <text
+            key={i}
+            x={p.x}
+            y={height - 8}
+            textAnchor="middle"
+            fontSize={10}
+            fill="#999"
+          >
+            {p.date}
+          </text>
+        ))}
+
+        {/* Axes */}
+        <line
+          x1={paddingLeft}
+          y1={paddingTop}
+          x2={paddingLeft}
+          y2={paddingTop + chartHeight}
+          stroke="#e8e8e8"
+          strokeWidth={1}
+        />
+        <line
+          x1={paddingLeft}
+          y1={paddingTop + chartHeight}
+          x2={paddingLeft + chartWidth}
+          y2={paddingTop + chartHeight}
+          stroke="#e8e8e8"
+          strokeWidth={1}
+        />
+      </svg>
+    </div>
+  );
+};
+
+const Statistics = () => {
+  const { headerStyle, isPhone } = useOutletContext<SharedContext>();
+  const [stats, setStats] = useState<StatsData | null>(null);
+  const [trend, setTrend] = useState<TrendItem[]>([]);
+  const [topDuration, setTopDuration] = useState<TopDurationItem[]>([]);
+  const [topCount, setTopCount] = useState<TopCountItem[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const loadAll = async () => {
+    setLoading(true);
+    try {
+      const [
+        statsRes,
+        trendRes,
+        topDurationRes,
+        topCountRes,
+      ] = await Promise.all([
+        request.get(`${config.apiPrefix}crons/stats`),
+        request.get(`${config.apiPrefix}crons/stats/trend`),
+        request.get(`${config.apiPrefix}crons/stats/top-duration`),
+        request.get(`${config.apiPrefix}crons/stats/top-count`),
+      ]);
+      if (statsRes.code === 200) setStats(statsRes.data);
+      if (trendRes.code === 200) setTrend(trendRes.data);
+      if (topDurationRes.code === 200) setTopDuration(topDurationRes.data);
+      if (topCountRes.code === 200) setTopCount(topCountRes.data);
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadAll();
+  }, []);
+
+  const topDurationColumns: ColumnProps<TopDurationItem>[] = [
+    {
+      title: intl.get('排名'),
+      key: 'rank',
+      width: 60,
+      render: (_: any, __: any, index: number) => index + 1,
+    },
+    {
+      title: intl.get('任务名称'),
+      dataIndex: 'cron_name',
+      key: 'cron_name',
+      ellipsis: true,
+    },
+    {
+      title: intl.get('平均耗时(秒)'),
+      dataIndex: 'avgDuration',
+      key: 'avgDuration',
+      width: 120,
+      render: (v: number) => `${v}s`,
+    },
+    {
+      title: intl.get('最长单次(秒)'),
+      dataIndex: 'maxDuration',
+      key: 'maxDuration',
+      width: 120,
+      render: (v: number) => `${v}s`,
+    },
+  ];
+
+  const topCountColumns: ColumnProps<TopCountItem>[] = [
+    {
+      title: intl.get('排名'),
+      key: 'rank',
+      width: 60,
+      render: (_: any, __: any, index: number) => index + 1,
+    },
+    {
+      title: intl.get('任务名称'),
+      dataIndex: 'cron_name',
+      key: 'cron_name',
+      ellipsis: true,
+    },
+    {
+      title: intl.get('今日执行次数'),
+      dataIndex: 'count',
+      key: 'count',
+      width: 120,
+    },
+    {
+      title: intl.get('平均耗时(秒)'),
+      dataIndex: 'avgDuration',
+      key: 'avgDuration',
+      width: 120,
+      render: (v: number) => `${v}s`,
+    },
+  ];
+
+  return (
+    <PageContainer
+      header={{
+        style: headerStyle,
+      }}
+      title={
+        <span>
+          <BarChartOutlined style={{ marginRight: 8 }} />
+          {intl.get('统计面板')}
+        </span>
+      }
+      extra={[
+        <Button
+          key="refresh"
+          icon={<ReloadOutlined />}
+          loading={loading}
+          onClick={loadAll}
+        >
+          {intl.get('刷新')}
+        </Button>,
+      ]}
+    >
+      {/* Section 1: Overview Cards */}
+      <Card
+        className="stats-section"
+        title={intl.get('总体概览')}
+        loading={loading}
+      >
+        <Row gutter={[16, 16]}>
+          <Col xs={12} sm={8} md={6} lg={4}>
+            <Statistic
+              title={intl.get('总任务数量')}
+              value={stats?.total ?? '-'}
+            />
+          </Col>
+          <Col xs={12} sm={8} md={6} lg={4}>
+            <Statistic
+              title={intl.get('启用任务数')}
+              value={stats?.enabled ?? '-'}
+              valueStyle={{ color: '#52c41a' }}
+            />
+          </Col>
+          <Col xs={12} sm={8} md={6} lg={4}>
+            <Statistic
+              title={intl.get('禁用任务数')}
+              value={stats?.disabled ?? '-'}
+              valueStyle={{ color: '#d9d9d9' }}
+            />
+          </Col>
+          <Col xs={12} sm={8} md={6} lg={4}>
+            <Statistic
+              title={intl.get('今日总执行次数')}
+              value={stats?.today?.count ?? '-'}
+              valueStyle={{ color: '#1890ff' }}
+            />
+          </Col>
+          <Col xs={12} sm={8} md={6} lg={4}>
+            <Statistic
+              title={intl.get('今日平均耗时(秒)')}
+              value={stats?.today?.avgDuration ?? '-'}
+              suffix="s"
+              valueStyle={{ color: '#faad14' }}
+            />
+          </Col>
+        </Row>
+      </Card>
+
+      {/* Section 2: 7-day Trend */}
+      <Card
+        className="stats-section"
+        title={intl.get('近7日执行趋势')}
+        loading={loading}
+      >
+        <TrendChart data={trend} />
+      </Card>
+
+      {/* Section 3 & 4: Top Tables */}
+      <Row gutter={[16, 16]}>
+        <Col xs={24} lg={12}>
+          <Card
+            className="stats-section"
+            title={intl.get('今日平均耗时 Top 5')}
+            loading={loading}
+          >
+            <Table
+              dataSource={topDuration}
+              columns={topDurationColumns}
+              rowKey="cron_id"
+              pagination={false}
+              size="small"
+              locale={{ emptyText: intl.get('今日暂无执行记录') }}
+            />
+          </Card>
+        </Col>
+        <Col xs={24} lg={12}>
+          <Card
+            className="stats-section"
+            title={intl.get('今日执行次数 Top 5')}
+            loading={loading}
+          >
+            <Table
+              dataSource={topCount}
+              columns={topCountColumns}
+              rowKey="cron_id"
+              pagination={false}
+              size="small"
+              locale={{ emptyText: intl.get('今日暂无执行记录') }}
+            />
+          </Card>
+        </Col>
+      </Row>
+    </PageContainer>
+  );
+};
+
+export default Statistics;

src/utils/config.ts

@@ -504,6 +504,7 @@ export default {
     '/login': intl.get('登录'),
     '/initialization': intl.get('初始化'),
     '/crontab': intl.get('定时任务'),
+    '/statistics': intl.get('统计面板'),
     '/env': intl.get('环境变量'),
     '/subscription': intl.get('订阅管理'),
     '/config': intl.get('配置文件'),