Address code review: use transactions for label updates, fix variable naming

Agent-Logs-Url: https://github.com/whyour/qinglong/sessions/1436272f-a03a-45af-b57d-869a48ab537d

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

back/api/cron.ts

@@ -3,7 +3,6 @@ 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';
 
@@ -142,58 +141,6 @@ 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/env.ts

@@ -44,6 +44,7 @@ export default (app: Router) => {
             .required()
             .pattern(/^[a-zA-Z_][0-9a-zA-Z_]*$/),
           remarks: Joi.string().optional().allow(''),
+          labels: Joi.array().items(Joi.string()).optional(),
         }),
       ),
     }),
@@ -70,6 +71,7 @@ export default (app: Router) => {
         name: Joi.string().required(),
         remarks: Joi.string().optional().allow('').allow(null),
         id: Joi.number().required(),
+        labels: Joi.array().items(Joi.string()).optional(),
       }),
     }),
     async (req: Request, res: Response, next: NextFunction) => {
@@ -230,6 +232,46 @@ export default (app: Router) => {
     },
   );
 
+  route.post(
+    '/labels',
+    celebrate({
+      body: Joi.object({
+        ids: Joi.array().items(Joi.number().required()),
+        labels: Joi.array().items(Joi.string().required()),
+      }),
+    }),
+    async (req: Request, res: Response, next: NextFunction) => {
+      const logger: Logger = Container.get('logger');
+      try {
+        const envService = Container.get(EnvService);
+        const data = await envService.addLabels(req.body.ids, req.body.labels);
+        return res.send({ code: 200, data });
+      } catch (e) {
+        return next(e);
+      }
+    },
+  );
+
+  route.delete(
+    '/labels',
+    celebrate({
+      body: Joi.object({
+        ids: Joi.array().items(Joi.number().required()),
+        labels: Joi.array().items(Joi.string().required()),
+      }),
+    }),
+    async (req: Request, res: Response, next: NextFunction) => {
+      const logger: Logger = Container.get('logger');
+      try {
+        const envService = Container.get(EnvService);
+        const data = await envService.removeLabels(req.body.ids, req.body.labels);
+        return res.send({ code: 200, data });
+      } catch (e) {
+        return next(e);
+      }
+    },
+  );
+
   route.post(
     '/upload',
     upload.single('env'),

back/data/cronLog.ts

@@ -1,31 +0,0 @@
-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/env.ts

@@ -10,6 +10,7 @@ export class Env {
   name?: string;
   remarks?: string;
   isPinned?: 1 | 0;
+  labels?: string[];
 
   constructor(options: Env) {
     this.value = options.value;
@@ -23,6 +24,7 @@ export class Env {
     this.name = options.name;
     this.remarks = options.remarks || '';
     this.isPinned = options.isPinned || 0;
+    this.labels = options.labels || [];
   }
 }
 
@@ -45,4 +47,5 @@ export const EnvModel = sequelize.define<EnvInstance>('Env', {
   name: { type: DataTypes.STRING, unique: 'compositeIndex' },
   remarks: DataTypes.STRING,
   isPinned: DataTypes.NUMBER,
+  labels: DataTypes.JSON,
 });

back/loaders/db.ts

@@ -6,7 +6,6 @@ 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 () => {
@@ -18,7 +17,6 @@ export default async () => {
     await EnvModel.sync();
     await SubscriptionModel.sync();
     await CrontabViewModel.sync();
-    await CronLogModel.sync();
 
     // 初始化新增字段
     const migrations = [

back/services/cron.ts

@@ -2,7 +2,6 @@ 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';
@@ -177,18 +176,6 @@ 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

@@ -1,137 +0,0 @@
-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/env.ts

@@ -199,6 +199,34 @@ export default class EnvService {
     await EnvModel.update({ isPinned: 0 }, { where: { id: ids } });
   }
 
+  public async addLabels(ids: number[], labels: string[]) {
+    const docs = await EnvModel.findAll({ where: { id: ids } });
+    await sequelize.transaction(async (t) => {
+      for (const doc of docs) {
+        const env = doc.get({ plain: true });
+        await EnvModel.update(
+          { labels: Array.from(new Set((env.labels || []).concat(labels))) },
+          { where: { id: env.id }, transaction: t },
+        );
+      }
+    });
+    return await EnvModel.findAll({ where: { id: ids } });
+  }
+
+  public async removeLabels(ids: number[], labels: string[]) {
+    const docs = await EnvModel.findAll({ where: { id: ids } });
+    await sequelize.transaction(async (t) => {
+      for (const doc of docs) {
+        const env = doc.get({ plain: true });
+        await EnvModel.update(
+          { labels: (env.labels || []).filter((label: string) => !labels.includes(label)) },
+          { where: { id: env.id }, transaction: t },
+        );
+      }
+    });
+    return await EnvModel.findAll({ where: { id: ids } });
+  }
+
   public async set_envs() {
     const envs = await this.envs('', {
       name: { [Op.not]: null },

src/layouts/defaultProps.tsx

@@ -1,5 +1,5 @@
 import intl from 'react-intl-universal';
-import { BarChartOutlined, SettingOutlined } from '@ant-design/icons';
+import { SettingOutlined } from '@ant-design/icons';
 import IconFont from '@/components/iconfont';
 import { BasicLayoutProps } from '@ant-design/pro-layout';
 
@@ -30,12 +30,6 @@ 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,25 +18,6 @@
   "青龙": "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,25 +18,6 @@
   "青龙": "青龙",
   "返回首页": "返回首页",
   "保存": "保存",
-  "统计面板": "统计面板",
-  "总体概览": "总体概览",
-  "总任务数量": "总任务数量",
-  "启用任务数": "启用任务数",
-  "禁用任务数": "禁用任务数",
-  "今日总执行次数": "今日总执行次数",
-  "今日平均耗时(秒)": "今日平均耗时(秒)",
-  "近7日执行趋势": "近7日执行趋势",
-  "今日平均耗时 Top 5": "今日平均耗时 Top 5",
-  "今日执行次数 Top 5": "今日执行次数 Top 5",
-  "排名": "排名",
-  "任务名称": "任务名称",
-  "平均耗时(秒)": "平均耗时(秒)",
-  "最长单次(秒)": "最长单次(秒)",
-  "今日执行次数": "今日执行次数",
-  "今日暂无执行记录": "今日暂无执行记录",
-  "暂无数据": "暂无数据",
-  "次": "次",
-  "刷新": "刷新",
   "日志": "日志",
   "脚本": "脚本",
   "确认保存文件": "确认保存文件",

src/pages/env/index.tsx

@@ -36,7 +36,7 @@ import { useVT } from 'virtualizedtableforantd4';
 import Copy from '../../components/copy';
 import EditNameModal from './editNameModal';
 import './index.less';
-import EnvModal from './modal';
+import EnvModal, { EnvLabelModal } from './modal';
 
 const { Paragraph } = Typography;
 const { Search } = Input;
@@ -121,6 +121,22 @@ const Env = () => {
         );
       },
     },
+    {
+      title: intl.get('标签'),
+      dataIndex: 'labels',
+      key: 'labels',
+      render: (labels: string[], record: any) => {
+        return (
+          <Space size={[0, 4]} wrap>
+            {labels?.filter((label) => label).map((label) => (
+              <Tag key={label} color="blue">
+                {label}
+              </Tag>
+            ))}
+          </Space>
+        );
+      },
+    },
     {
       title: intl.get('更新时间'),
       dataIndex: 'timestamp',
@@ -238,6 +254,7 @@ const Env = () => {
   const [loading, setLoading] = useState(true);
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [isEditNameModalVisible, setIsEditNameModalVisible] = useState(false);
+  const [isLabelModalVisible, setIsLabelModalVisible] = useState(false);
   const [editedEnv, setEditedEnv] = useState();
   const [selectedRowIds, setSelectedRowIds] = useState<string[]>([]);
   const [searchText, setSearchText] = useState('');
@@ -622,6 +639,13 @@ const Env = () => {
             >
               {intl.get('批量修改变量名称')}
             </Button>
+            <Button
+              type="primary"
+              style={{ marginBottom: 5, marginLeft: 8 }}
+              onClick={() => setIsLabelModalVisible(true)}
+            >
+              {intl.get('批量修改标签')}
+            </Button>
             <Button
               type="primary"
               style={{ marginBottom: 5, marginLeft: 8 }}
@@ -700,6 +724,15 @@ const Env = () => {
           ids={selectedRowIds}
         />
       )}
+      {isLabelModalVisible && (
+        <EnvLabelModal
+          handleCancel={(needUpdate) => {
+            setIsLabelModalVisible(false);
+            if (needUpdate) getEnvs();
+          }}
+          ids={selectedRowIds}
+        />
+      )}
     </PageContainer>
   );
 };

src/pages/env/modal.tsx

@@ -1,8 +1,9 @@
 import intl from 'react-intl-universal';
 import React, { useEffect, useState } from 'react';
-import { Modal, message, Input, Form, Radio } from 'antd';
+import { Modal, message, Input, Form, Radio, Button } from 'antd';
 import { request } from '@/utils/http';
 import config from '@/utils/config';
+import EditableTagGroup from '@/components/tag';
 
 const EnvModal = ({
   env,
@@ -16,7 +17,7 @@ const EnvModal = ({
 
   const handleOk = async (values: any) => {
     setLoading(true);
-    const { value, split, name, remarks } = values;
+    const { value, split, name, remarks, labels } = values;
     const method = env ? 'put' : 'post';
     let payload;
     if (!env) {
@@ -27,10 +28,11 @@ const EnvModal = ({
             name: name,
             value: x,
             remarks: remarks,
+            labels: labels || [],
           };
         });
       } else {
-        payload = [{ value, name, remarks }];
+        payload = [{ value, name, remarks, labels: labels || [] }];
       }
     } else {
       payload = { ...values, id: env.id };
@@ -123,9 +125,81 @@ const EnvModal = ({
         <Form.Item name="remarks" label={intl.get('备注')}>
           <Input placeholder={intl.get('请输入备注')} />
         </Form.Item>
+        <Form.Item name="labels" label={intl.get('标签')}>
+          <EditableTagGroup />
+        </Form.Item>
       </Form>
     </Modal>
   );
 };
 
-export default EnvModal;
+export { EnvModal as default };
+export const EnvLabelModal = ({
+  ids,
+  handleCancel,
+}: {
+  ids: Array<string>;
+  handleCancel: (needUpdate?: boolean) => void;
+}) => {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+
+  const update = async (action: 'delete' | 'post') => {
+    form
+      .validateFields()
+      .then(async (values) => {
+        setLoading(true);
+        const payload = { ids, labels: values.labels };
+        try {
+          const { code, data } = await request[action](
+            `${config.apiPrefix}envs/labels`,
+            payload,
+          );
+
+          if (code === 200) {
+            message.success(
+              action === 'post'
+                ? intl.get('添加Labels成功')
+                : intl.get('删除Labels成功'),
+            );
+            handleCancel(true);
+          }
+          setLoading(false);
+        } catch (error) {
+          setLoading(false);
+        }
+      })
+      .catch((info) => {
+        console.log('Validate Failed:', info);
+      });
+  };
+
+  const buttons = [
+    <Button key="cancel" onClick={() => handleCancel(false)}>{intl.get('取消')}</Button>,
+    <Button key="delete" type="primary" danger onClick={() => update('delete')}>
+      {intl.get('删除')}
+    </Button>,
+    <Button key="add" type="primary" onClick={() => update('post')}>
+      {intl.get('添加')}
+    </Button>,
+  ];
+
+  return (
+    <Modal
+      title={intl.get('批量修改标签')}
+      open={true}
+      footer={buttons}
+      centered
+      maskClosable={false}
+      forceRender
+      onCancel={() => handleCancel(false)}
+      confirmLoading={loading}
+    >
+      <Form form={form} layout="vertical" name="form_in_env_label_modal">
+        <Form.Item name="labels" label={intl.get('标签')}>
+          <EditableTagGroup />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};

src/pages/statistics/index.less

@@ -1,17 +0,0 @@
-.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

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