更新版本 v2.14.1

* 修复非JS任务不能随机延迟的问题

.umirc.ts

@@ -14,7 +14,7 @@ export default defineConfig({
   dynamicImport: {
     loading: '@/components/pageLoading',
   },
-  favicon: '/images/g5.ico',
+  favicon: '/images/favicon.svg',
   proxy: {
     '/api/public': {
       target: 'http://127.0.0.1:5400/',

README-en.md

@@ -57,7 +57,7 @@ https://podman.io/getting-started/installation
 ```bash
 podman run -dit \
   --network bridge \
-  -v $PWD/ql:/ql/data \
+  -v $PWD/ql/data:/ql/data \
   -p 5700:5700 \
   --name qinglong \
   --hostname qinglong \
@@ -96,7 +96,7 @@ systemctl restart docker
 
 ```bash
 docker run -dit \
-  -v $PWD/ql:/ql/data \
+  -v $PWD/ql/data:/ql/data \
   -p 5700:5700 \
   --name qinglong \
   --hostname qinglong \
@@ -124,6 +124,10 @@ docker-compose up -d
 docker-compose down
 ```
 
+3. access
+
+Open your browser and visit http://{ip}:5700
+
 ## Use
 
 1. built-in commands

README.md

@@ -57,7 +57,7 @@ https://podman.io/getting-started/installation
 ```bash
 podman run -dit \
   --network bridge \
-  -v $PWD/ql:/ql/data \
+  -v $PWD/ql/data:/ql/data \
   -p 5700:5700 \
   --name qinglong \
   --hostname qinglong \
@@ -97,7 +97,7 @@ systemctl restart docker
 
 ```bash
 docker run -dit \
-  -v $PWD/ql:/ql/data \
+  -v $PWD/ql/data:/ql/data \
   -p 5700:5700 \
   --name qinglong \
   --hostname qinglong \
@@ -125,6 +125,10 @@ docker-compose up -d
 docker-compose down
 ```
 
+3. 访问
+
+打开你的浏览器，访问 http://{ip}:5700
+
 ## 使用
 
 1. 内置命令

back/api/cron.ts

@@ -2,6 +2,7 @@ import { Router, Request, Response, NextFunction } from 'express';
 import { Container } from 'typedi';
 import { Logger } from 'winston';
 import CronService from '../services/cron';
+import CronViewService from '../services/cronView';
 import { celebrate, Joi } from 'celebrate';
 import cron_parser from 'cron-parser';
 const route = Router();
@@ -9,11 +10,135 @@ const route = Router();
 export default (app: Router) => {
   app.use('/crons', route);
 
+  route.get(
+    '/views',
+    async (req: Request, res: Response, next: NextFunction) => {
+      try {
+        const cronViewService = Container.get(CronViewService);
+        const data = await cronViewService.list();
+        return res.send({ code: 200, data });
+      } catch (e) {
+        return next(e);
+      }
+    },
+  );
+
+  route.post(
+    '/views',
+    celebrate({
+      body: Joi.object({
+        name: Joi.string().required(),
+        sorts: Joi.array().optional(),
+        filters: Joi.array().optional(),
+      }),
+    }),
+    async (req: Request, res: Response, next: NextFunction) => {
+      try {
+        const cronViewService = Container.get(CronViewService);
+        const data = await cronViewService.create(req.body);
+        return res.send({ code: 200, data });
+      } catch (e) {
+        return next(e);
+      }
+    },
+  );
+
+  route.put(
+    '/views',
+    celebrate({
+      body: Joi.object({
+        name: Joi.string().required(),
+        id: Joi.number().required(),
+        sorts: Joi.array().optional(),
+        filters: Joi.array().optional(),
+      }),
+    }),
+    async (req: Request, res: Response, next: NextFunction) => {
+      try {
+        const cronViewService = Container.get(CronViewService);
+        const data = await cronViewService.update(req.body);
+        return res.send({ code: 200, data });
+      } catch (e) {
+        return next(e);
+      }
+    },
+  );
+
+  route.delete(
+    '/views',
+    celebrate({
+      body: Joi.array().items(Joi.number().required()),
+    }),
+    async (req: Request, res: Response, next: NextFunction) => {
+      try {
+        const cronViewService = Container.get(CronViewService);
+        const data = await cronViewService.remove(req.body);
+        return res.send({ code: 200, data });
+      } catch (e) {
+        return next(e);
+      }
+    },
+  );
+
+  route.put(
+    '/views/move',
+    celebrate({
+      body: Joi.object({
+        fromIndex: Joi.number().required(),
+        toIndex: Joi.number().required(),
+        id: Joi.number().required(),
+      }),
+    }),
+    async (req: Request<{ id: number }>, res: Response, next: NextFunction) => {
+      try {
+        const cronViewService = Container.get(CronViewService);
+        const data = await cronViewService.move(req.body);
+        return res.send({ code: 200, data });
+      } catch (e) {
+        return next(e);
+      }
+    },
+  );
+
+  route.put(
+    '/views/disable',
+    celebrate({
+      body: Joi.array().items(Joi.number().required()),
+    }),
+    async (req: Request, res: Response, next: NextFunction) => {
+      const logger: Logger = Container.get('logger');
+      try {
+        const cronViewService = Container.get(CronViewService);
+        const data = await cronViewService.disabled(req.body);
+        return res.send({ code: 200, data });
+      } catch (e) {
+        return next(e);
+      }
+    },
+  );
+
+  route.put(
+    '/views/enable',
+    celebrate({
+      body: Joi.array().items(Joi.number().required()),
+    }),
+    async (req: Request, res: Response, next: NextFunction) => {
+      const logger: Logger = Container.get('logger');
+      try {
+        const cronViewService = Container.get(CronViewService);
+        const data = await cronViewService.enabled(req.body);
+        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 {
       const cronService = Container.get(CronService);
-      const data = await cronService.crontabs(req.query.searchValue as string);
+      const data = await cronService.crontabs(req.query as any);
       return res.send({ code: 200, data });
     } catch (e) {
       logger.error('🔥 error: %o', e);

back/data/cronView.ts

@@ -0,0 +1,47 @@
+import { sequelize } from '.';
+import { DataTypes, Model } from 'sequelize';
+
+interface SortType {
+  type: 'ASC' | 'DESC';
+  value: string;
+}
+
+interface FilterType {
+  type: 'or' | 'and';
+  value: string;
+}
+
+export class CrontabView {
+  name?: string;
+  id?: number;
+  position?: number;
+  isDisabled?: 1 | 0;
+  filters?: FilterType[];
+  sorts?: SortType[];
+
+  constructor(options: CrontabView) {
+    this.name = options.name;
+    this.id = options.id;
+    this.position = options.position;
+    this.isDisabled = options.isDisabled || 0;
+    this.filters = options.filters;
+    this.sorts = options.sorts;
+  }
+}
+
+interface CronViewInstance
+  extends Model<CrontabView, CrontabView>,
+    CrontabView {}
+export const CrontabViewModel = sequelize.define<CronViewInstance>(
+  'CrontabView',
+  {
+    name: {
+      unique: 'name',
+      type: DataTypes.STRING,
+    },
+    position: DataTypes.NUMBER,
+    isDisabled: DataTypes.NUMBER,
+    filters: DataTypes.JSON,
+    sorts: DataTypes.JSON,
+  },
+);

back/data/notify.ts

@@ -4,6 +4,7 @@ export enum NotificationMode {
   'serverChan' = 'serverChan',
   'pushDeer' = 'pushDeer',
   'bark' = 'bark',
+  'chat' = 'chat',
   'telegramBot' = 'telegramBot',
   'dingtalkBot' = 'dingtalkBot',
   'weWorkBot' = 'weWorkBot',
@@ -37,6 +38,11 @@ export class PushDeerNotification extends NotificationBaseInfo {
   public pushDeerKey = '';
 }
 
+export class ChatNotification extends NotificationBaseInfo {
+  public chatUrl = '';
+  public chatToken = '';
+}
+
 export class BarkNotification extends NotificationBaseInfo {
   public barkPush = '';
   public barkIcon = 'http://qn.whyour.cn/logo.png';
@@ -86,6 +92,7 @@ export interface NotificationInfo
     GotifyNotification,
     ServerChanNotification,
     PushDeerNotification,
+    ChatNotification,
     BarkNotification,
     TelegramBotNotification,
     DingtalkBotNotification,

back/loaders/db.ts

@@ -6,9 +6,9 @@ import { CrontabModel } from '../data/cron';
 import { DependenceModel } from '../data/dependence';
 import { AppModel } from '../data/open';
 import { AuthModel } from '../data/auth';
-import { sequelize } from '../data';
 import { fileExist } from '../config/util';
 import { SubscriptionModel } from '../data/subscription';
+import { CrontabViewModel } from '../data/cronView';
 import config from '../config';
 
 export default async () => {
@@ -19,6 +19,7 @@ export default async () => {
     await AuthModel.sync();
     await EnvModel.sync();
     await SubscriptionModel.sync();
+    await CrontabViewModel.sync();
 
     // try {
     //   const queryInterface = sequelize.getQueryInterface();

back/services/cron.ts

@@ -113,8 +113,56 @@ export default class CronService {
     }
   }
 
-  public async crontabs(searchText?: string): Promise<Crontab[]> {
-    let query = {};
+  private formatViewQuery(query: any, viewQuery: any) {
+    if (viewQuery.filters && viewQuery.filters.length > 0) {
+      for (const col of viewQuery.filters) {
+        const { property, value, operation } = col;
+        let operate = null;
+        switch (operation) {
+          case 'Reg':
+            operate = Op.like;
+            break;
+          case 'NotReg':
+            operate = Op.notLike;
+            break;
+          case 'In':
+            query[Op.or] = [
+              {
+                [property]: value,
+              },
+              property === 'status' && value.includes(2)
+                ? { isDisabled: 1 }
+                : {},
+            ];
+            break;
+          case 'Nin':
+            query[Op.and] = [
+              {
+                [property]: {
+                  [Op.notIn]: value,
+                },
+              },
+              property === 'status' && value.includes(2)
+                ? { isDisabled: { [Op.ne]: 1 } }
+                : {},
+            ];
+            break;
+          default:
+            break;
+        }
+        if (operate) {
+          query[property] = {
+            [Op.or]: [
+              { [operate]: `%${value}%` },
+              { [operate]: `%${encodeURIComponent(value)}%` },
+            ],
+          };
+        }
+      }
+    }
+  }
+
+  private formatSearchText(query: any, searchText: string | undefined) {
     if (searchText) {
       const textArray = searchText.split(':');
       switch (textArray[0]) {
@@ -123,13 +171,11 @@ export default class CronService {
         case 'schedule':
         case 'label':
           const column = textArray[0] === 'label' ? 'labels' : textArray[0];
-          query = {
-            [column]: {
-              [Op.or]: [
-                { [Op.like]: `%${textArray[1]}%` },
-                { [Op.like]: `%${encodeURIComponent(textArray[1])}%` },
-              ],
-            },
+          query[column] = {
+            [Op.or]: [
+              { [Op.like]: `%${textArray[1]}%` },
+              { [Op.like]: `%${encodeURIComponent(textArray[1])}%` },
+            ],
           };
           break;
         default:
@@ -139,31 +185,75 @@ export default class CronService {
               { [Op.like]: `%${encodeURIComponent(searchText)}%` },
             ],
           };
-          query = {
-            [Op.or]: [
-              {
-                name: reg,
-              },
-              {
-                command: reg,
-              },
-              {
-                schedule: reg,
-              },
-              {
-                labels: reg,
-              },
-            ],
-          };
+          query[Op.or] = [
+            {
+              name: reg,
+            },
+            {
+              command: reg,
+            },
+            {
+              schedule: reg,
+            },
+            {
+              labels: reg,
+            },
+          ];
           break;
       }
     }
+  }
+
+  private formatViewSort(order: string[][], viewQuery: any) {
+    if (viewQuery.sorts && viewQuery.sorts.length > 0) {
+      for (const { property, type } of viewQuery.sorts) {
+        order.unshift([property, type]);
+      }
+    }
+  }
+
+  public async crontabs(params?: {
+    searchValue: string;
+    page: string;
+    size: string;
+    sortField: string;
+    sortType: string;
+    queryString: string;
+  }): Promise<{ data: Crontab[]; total: number }> {
+    const searchText = params?.searchValue;
+    const page = Number(params?.page || '0');
+    const size = Number(params?.size || '0');
+    const sortField = params?.sortField || '';
+    const sortType = params?.sortType || '';
+    const viewQuery = JSON.parse(params?.queryString || '{}');
+
+    let query: any = {};
+    let order = [
+      ['isPinned', 'DESC'],
+      ['isDisabled', 'ASC'],
+      ['status', 'ASC'],
+      ['createdAt', 'DESC'],
+    ];
+
+    this.formatViewQuery(query, viewQuery);
+    this.formatSearchText(query, searchText);
+    this.formatViewSort(order, viewQuery);
+
+    if (sortType && sortField) {
+      order.unshift([sortField, sortType]);
+    }
+    let condition: any = {
+      where: query,
+      order: order,
+    };
+    if (page && size) {
+      condition.offset = (page - 1) * size;
+      condition.limit = size;
+    }
     try {
-      const result = await CrontabModel.findAll({
-        where: query,
-        order: [['createdAt', 'DESC']],
-      });
-      return result as any;
+      const result = await CrontabModel.findAll(condition);
+      const count = await CrontabModel.count({ where: query });
+      return { data: result, total: count };
     } catch (error) {
       throw error;
     }
@@ -279,7 +369,13 @@ export default class CronService {
       if (!cmdStr.includes('task ') && !cmdStr.includes('ql ')) {
         cmdStr = `task ${cmdStr}`;
       }
-      if (cmdStr.endsWith('.js')) {
+      if (
+        cmdStr.endsWith('.js') ||
+        cmdStr.endsWith('.py') ||
+        cmdStr.endsWith('.pyc') ||
+        cmdStr.endsWith('.sh') ||
+        cmdStr.endsWith('.ts')
+      ) {
         cmdStr = `${cmdStr} now`;
       }
 
@@ -302,16 +398,10 @@ export default class CronService {
 
       cp.on('exit', async (code, signal) => {
         this.logger.info(
-          `${command} pid: ${cp.pid} exit ${code} signal ${signal}`,
+          `任务 ${command} 进程id: ${cp.pid} 退出，退出码 ${code}`,
         );
-        await CrontabModel.update(
-          { status: CrontabStatus.idle, pid: undefined },
-          { where: { id } },
-        );
-        resolve();
       });
       cp.on('close', async (code) => {
-        this.logger.info(`${command} pid: ${cp.pid} closed ${code}`);
         await CrontabModel.update(
           { status: CrontabStatus.idle, pid: undefined },
           { where: { id } },
@@ -441,7 +531,7 @@ export default class CronService {
   private async set_crontab(needReloadSchedule: boolean = false) {
     const tabs = await this.crontabs();
     var crontab_string = '';
-    tabs.forEach((tab) => {
+    tabs.data.forEach((tab) => {
       const _schedule = tab.schedule && tab.schedule.split(/ +/);
       if (tab.isDisabled === 1 || _schedule!.length !== 5) {
         crontab_string += '# ';

back/services/cronView.ts

@@ -0,0 +1,92 @@
+import { Service, Inject } from 'typedi';
+import winston from 'winston';
+import { CrontabView, CrontabViewModel } from '../data/cronView';
+import { initEnvPosition } from '../data/env';
+
+@Service()
+export default class CronViewService {
+  constructor(@Inject('logger') private logger: winston.Logger) {}
+
+  public async create(payload: CrontabView): Promise<CrontabView> {
+    let position = initEnvPosition;
+    const views = await this.list();
+    if (views && views.length > 0 && views[views.length - 1].position) {
+      position = views[views.length - 1].position as number;
+    }
+    position = position / 2;
+    const tab = new CrontabView({ ...payload, position });
+    const doc = await this.insert(tab);
+    return doc;
+  }
+
+  public async insert(payload: CrontabView): Promise<CrontabView> {
+    return await CrontabViewModel.create(payload, { returning: true });
+  }
+
+  public async update(payload: CrontabView): Promise<CrontabView> {
+    const newDoc = await this.updateDb(payload);
+    return newDoc;
+  }
+
+  public async updateDb(payload: CrontabView): Promise<CrontabView> {
+    await CrontabViewModel.update(payload, { where: { id: payload.id } });
+    return await this.getDb({ id: payload.id });
+  }
+
+  public async remove(ids: number[]) {
+    await CrontabViewModel.destroy({ where: { id: ids } });
+  }
+
+  public async list(): Promise<CrontabView[]> {
+    try {
+      const result = await CrontabViewModel.findAll({
+        where: {},
+        order: [['position', 'DESC']],
+      });
+      return result;
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  public async getDb(query: any): Promise<CrontabView> {
+    const doc: any = await CrontabViewModel.findOne({ where: { ...query } });
+    return doc && (doc.get({ plain: true }) as CrontabView);
+  }
+
+  public async disabled(ids: number[]) {
+    await CrontabViewModel.update({ isDisabled: 1 }, { where: { id: ids } });
+  }
+
+  public async enabled(ids: number[]) {
+    await CrontabViewModel.update({ isDisabled: 0 }, { where: { id: ids } });
+  }
+
+  public async move({
+    id,
+    fromIndex,
+    toIndex,
+  }: {
+    fromIndex: number;
+    toIndex: number;
+    id: number;
+  }): Promise<CrontabView> {
+    let targetPosition: number;
+    const isUpward = fromIndex > toIndex;
+    const views = await this.list();
+    if (toIndex === 0 || toIndex === views.length - 1) {
+      targetPosition = isUpward
+        ? views[0].position * 2
+        : views[toIndex].position / 2;
+    } else {
+      targetPosition = isUpward
+        ? (views[toIndex].position + views[toIndex - 1].position) / 2
+        : (views[toIndex].position + views[toIndex + 1].position) / 2;
+    }
+    const newDoc = await this.update({
+      id,
+      position: targetPosition,
+    });
+    return newDoc;
+  }
+}

back/services/notify.ts

@@ -17,6 +17,7 @@ export default class NotificationService {
     ['goCqHttpBot', this.goCqHttpBot],
     ['serverChan', this.serverChan],
     ['pushDeer', this.pushDeer],
+    ['chat', this.chat],
     ['bark', this.bark],
     ['telegramBot', this.telegramBot],
     ['dingtalkBot', this.dingtalkBot],
@@ -135,6 +136,20 @@ export default class NotificationService {
     );
   }
 
+  private async chat() {
+    const { chatUrl, chatToken } = this.params;
+    const url = `${chatUrl}${chatToken}`;
+    const res: any = await got
+      .post(url, {
+        timeout: this.timeout,
+        retry: 0,
+        body: `payload={"text":"${this.title}\n${this.content}"}`,
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      })
+      .json();
+    return res.success;
+  }
+
   private async bark() {
     let { barkPush, barkIcon, barkSound, barkGroup } = this.params;
     if (!barkPush.startsWith('http') && !barkPush.startsWith('https')) {
@@ -245,7 +260,7 @@ export default class NotificationService {
     const [corpid, corpsecret, touser, agentid, thumb_media_id = '1'] =
       weWorkAppKey.split(',');
     const url = `https://qyapi.weixin.qq.com/cgi-bin/gettoken`;
-    const { access_token } = await got
+    const tokenRes: any = await got
       .post(url, {
         timeout: this.timeout,
         retry: 0,
@@ -296,7 +311,7 @@ export default class NotificationService {
 
     const res: any = await got
       .post(
-        `https://qyapi.weixin.qq.com/cgi-bin/message/send?access_token=${access_token}`,
+        `https://qyapi.weixin.qq.com/cgi-bin/message/send?access_token=${tokenRes.access_token}`,
         {
           timeout: this.timeout,
           retry: 0,

back/services/schedule.ts

@@ -79,13 +79,12 @@ export default class ScheduleService {
 
         cp.on('exit', async (code, signal) => {
           this.logger.info(
-            `${command} pid: ${cp.pid} exit ${code} signal ${signal}`,
+            `任务 ${command} 进程id: ${cp.pid} 退出，退出码 ${code}`,
           );
         });
 
         cp.on('close', async (code) => {
           const endTime = dayjs();
-          this.logger.info(`${command} pid: ${cp.pid} closed ${code}`);
           await callbacks.onEnd?.(
             cp,
             endTime,

docker/Dockerfile

@@ -1,9 +1,9 @@
-FROM node:alpine
+FROM python:alpine
 
 ARG QL_MAINTAINER="whyour"
 LABEL maintainer="${QL_MAINTAINER}"
 ARG QL_URL=https://github.com/${QL_MAINTAINER}/qinglong.git
-ARG QL_BRANCH=master
+ARG QL_BRANCH=develop
 
 ENV PNPM_HOME=/root/.local/share/pnpm \
     PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/root/.local/share/pnpm:/root/.local/share/pnpm/global/5/node_modules:$PNPM_HOME \
@@ -29,10 +29,10 @@ RUN set -x \
                              perl \
                              openssl \
                              nginx \
-                             python3 \
+                             nodejs \
                              jq \
                              openssh \
-                             py3-pip \
+                             npm \
     && rm -rf /var/cache/apk/* \
     && apk update \
     && ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime \

docker/docker-entrypoint.sh

@@ -9,6 +9,7 @@ make_dir /etc/nginx/conf.d
 make_dir /run/nginx
 cp -fv $nginx_conf /etc/nginx/nginx.conf
 cp -fv $nginx_app_conf /etc/nginx/conf.d/front.conf
+sed -i "s,QL_BASE_URL,${qlBaseUrl},g" /etc/nginx/conf.d/front.conf
 pm2 l &>/dev/null
 echo
 

docker/front.conf

@@ -1,12 +1,12 @@
-upstream api {
+upstream baseApi {
   server 0.0.0.0:5600;
 }
 
-upstream public {
+upstream publicApi {
   server 0.0.0.0:5400;
 }
 
-map $http_upgrade $connection_upgrade { 
+map $http_upgrade $connection_upgrade {
   default keep-alive;
   'websocket' upgrade;
 }
@@ -16,42 +16,42 @@ server {
   root /ql/static/dist;
   ssl_session_timeout 5m;
 
-  location /api/public {
+  location QL_BASE_URL/api/public/ {
     proxy_set_header Host $http_host;
     proxy_set_header X-Real-IP $remote_addr;
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-    proxy_pass http://public;
+    proxy_pass http://publicApi/api/public/;
   }
 
-  location /api {
+  location QL_BASE_URL/api/ {
     proxy_set_header Host $http_host;
     proxy_set_header X-Real-IP $remote_addr;
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-    proxy_pass http://api;
+    proxy_pass http://baseApi/api/;
 
     proxy_set_header Upgrade $http_upgrade;
     proxy_set_header Connection $connection_upgrade;
   }
 
-  location /open {
+  location QL_BASE_URL/open/ {
     proxy_set_header Host $http_host;
     proxy_set_header X-Real-IP $remote_addr;
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-    proxy_pass http://api;
+    proxy_pass http://baseApi/open/;
   }
 
   gzip on;
-  gzip_static on;    
+  gzip_static on;
   gzip_types text/plain application/json application/javascript application/x-javascript text/css application/xml text/javascript;
-  gzip_proxied  any;
+  gzip_proxied any;
   gzip_vary on;
   gzip_comp_level 6;
   gzip_buffers 16 8k;
-  gzip_http_version 1.0;  
+  gzip_http_version 1.0;
 
-  location / {
-    index  index.html index.htm;
-    try_files $uri $uri/ /index.html;
+  location QL_BASE_URL/ {
+    index index.html index.htm;
+    try_files $uri $uri/ QL_BASE_URL/index.html;
   }
 
   location ~ .*\.(html)$ {

docker/nginx.conf

@@ -5,41 +5,41 @@ error_log /var/log/nginx/error.log warn;
 include /etc/nginx/modules/*.conf;
 
 events {
-	worker_connections 1024;
+  worker_connections 1024;
 }
 
 http {
-	include /etc/nginx/mime.types;
-	default_type application/octet-stream;
+  include /etc/nginx/mime.types;
+  default_type application/octet-stream;
 
-	server_tokens off;
+  server_tokens off;
 
-	client_max_body_size 20m;
-	client_body_buffer_size 20m;
+  client_max_body_size 20m;
+  client_body_buffer_size 20m;
 
-	keepalive_timeout 65;
+  keepalive_timeout 65;
 
-	sendfile on;
+  sendfile on;
 
-	tcp_nodelay on;
+  tcp_nodelay on;
 
-	ssl_prefer_server_ciphers on;
+  ssl_prefer_server_ciphers on;
 
-	ssl_session_cache shared:SSL:2m;
+  ssl_session_cache shared:SSL:2m;
 
-	gzip on;
-  gzip_static on;    
+  gzip on;
+  gzip_static on;
   gzip_types text/plain application/json application/javascript application/x-javascript text/css application/xml text/javascript;
-  gzip_proxied  any;
+  gzip_proxied any;
   gzip_vary on;
   gzip_comp_level 6;
   gzip_buffers 16 8k;
   gzip_http_version 1.0;
 
-	log_format main '$remote_addr - $remote_user [$time_local] "$request" '
-			'$status $body_bytes_sent "$http_referer" '
-			'"$http_user_agent" "$http_x_forwarded_for"';
+  log_format main '$remote_addr - $remote_user [$time_local] "$request" '
+  '$status $body_bytes_sent "$http_referer" '
+  '"$http_user_agent" "$http_x_forwarded_for"';
 
-	access_log /var/log/nginx/access.log main;
-	include /etc/nginx/conf.d/*.conf;
+  access_log /var/log/nginx/access.log main;
+  include /etc/nginx/conf.d/*.conf;
 }

package.json

@@ -117,6 +117,7 @@
     "react-split-pane": "^0.1.92",
     "sockjs-client": "^1.6.0",
     "ts-node": "^10.6.0",
+    "tslib": "^2.4.0",
     "typescript": "^4.6.2",
     "umi": "^3.5.21",
     "umi-request": "^1.4.0",

sample/config.sample.sh

@@ -29,6 +29,14 @@ MaxConcurrentNum="5"
 ## 默认给javascript任务加随机延迟，如 RandomDelay="300" ，表示任务将在 1-300 秒内随机延迟一个秒数，然后再运行，取消延迟赋值为空
 RandomDelay="300"
 
+## 需要随机延迟运行任务的文件后缀，直接写后缀名即可，多个后缀用空格分开，例如: js py ts
+## 默认仅给javascript任务加随机延迟，其它任务按定时规则准点运行。全部任务随机延迟赋值为空
+RandomDelayFileExtensions="js"
+
+## 每小时的第几分钟准点运行任务，当在这些时间运行任务时将忽略 RandomDelay 配置，不会被随机延迟
+## 默认是第0分钟和第30分钟，例如21:00或21:30分的任务将会准点运行。不需要准点运行赋值为空
+RandomDelayIgnoredMinutes="0 30"
+
 ## 如果你自己会写shell脚本，并且希望在每次运行 ql update 命令时，额外运行你的 shell 脚本，请赋值为 "true"，默认为true
 EnableExtraShell="true"
 
@@ -129,4 +137,10 @@ export GOTIFY_PRIORITY=0
 ## deer_key 填写PushDeer的key
 export DEER_KEY=""
 
+## 12. Chat
+## chat_url 填写synology chat地址，http://IP:PORT/webapi/***token=
+## chat_token 填写后面的token
+export CHAT_URL=""
+export CHAT_TOKEN=""
+
 ## 其他需要的变量，脚本中需要的变量使用 export 变量名= 声明即可

sample/notify.js

@@ -39,6 +39,12 @@ let SCKEY = '';
 //(环境变量名 DEER_KEY)
 let PUSHDEER_KEY = '';
 
+// =======================================Synology Chat通知设置区域===========================================
+//此处填你申请的CHAT_URL与CHAT_TOKEN
+//(环境变量名 CHAT_URL CHAT_TOKEN)
+let CHAT_URL = '';
+let CHAT_TOKEN = '';
+
 // =======================================Bark App通知设置区域===========================================
 //此处填你BarkAPP的信息(IP/设备码，例如：https://api.day.app/XXXXXXXX)
 let BARK_PUSH = '';
@@ -133,6 +139,14 @@ if (process.env.DEER_KEY) {
   PUSHDEER_KEY = process.env.DEER_KEY;
 }
 
+if (process.env.CHAT_URL) {
+  CHAT_URL = process.env.CHAT_URL;
+}
+
+if (process.env.CHAT_TOKEN) {
+  CHAT_TOKEN = process.env.CHAT_TOKEN;
+}
+
 if (process.env.QQ_SKEY) {
   QQ_SKEY = process.env.QQ_SKEY;
 }
@@ -239,6 +253,8 @@ async function sendNotify(
     iGotNotify(text, desp, params), //iGot
     gobotNotify(text, desp), //go-cqhttp
     gotifyNotify(text, desp), //gotify
+    ChatNotify(text, desp), //synolog chat
+    PushDeerNotify(text, desp), //PushDeer
   ]);
 }
 
@@ -369,7 +385,7 @@ function serverNotify(text, desp, time = 2100) {
   });
 }
 
-function PushDeerNotify(text, desp, time = 2100) {
+function PushDeerNotify(text, desp) {
   return new Promise((resolve) => {
     if (PUSHDEER_KEY) {
       // PushDeer 建议对消息内容进行 urlencode
@@ -382,8 +398,9 @@ function PushDeerNotify(text, desp, time = 2100) {
         },
         timeout,
       };
-      setTimeout(() => {
-        $.post(options, (err, resp, data) => {
+      $.post(
+        options,
+        (err, resp, data) => {
           try {
             if (err) {
               console.log('发送通知调用API失败！！\n');
@@ -407,8 +424,46 @@ function PushDeerNotify(text, desp, time = 2100) {
           } finally {
             resolve(data);
           }
-        });
-      }, time);
+        },
+        time,
+      );
+    } else {
+      resolve();
+    }
+  });
+}
+
+function ChatNotify(text, desp) {
+  return new Promise((resolve) => {
+    if (CHAT_URL && CHAT_TOKEN) {
+      // 对消息内容进行 urlencode
+      desp = encodeURI(desp);
+      const options = {
+        url: `${CHAT_URL}${CHAT_TOKEN}`,
+        body: `payload={"text":"${text}\n${desp}"}`,
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+        },
+      };
+      $.post(options, (err, resp, data) => {
+        try {
+          if (err) {
+            console.log('发送通知调用API失败！！\n');
+            console.log(err);
+          } else {
+            data = JSON.parse(data);
+            if (data.success) {
+              console.log('Chat发送通知消息成功🎉\n');
+            } else {
+              console.log(`Chat发送通知消息异常\n${JSON.stringify(data)}`);
+            }
+          }
+        } catch (e) {
+          $.logErr(e);
+        } finally {
+          resolve(data);
+        }
+      });
     } else {
       resolve();
     }

sample/notify.py

@@ -61,7 +61,10 @@ push_config = {
     'PUSH_KEY': '',                     # server 酱的 PUSH_KEY，兼容旧版与 Turbo 版
 
     'DEER_KEY': '',                     # PushDeer 的 PUSHDEER_KEY
-    
+  
+    'CHAT_URL': '',                     # synology chat url
+    'CHAT_TOKEN': '',                   # synology chat token
+  
     'PUSH_PLUS_TOKEN': '',              # push+ 微信推送的用户令牌
     'PUSH_PLUS_USER': '',               # push+ 微信推送的群组编码
 
@@ -279,8 +282,27 @@ def pushdeer(title: str, content: str) -> None:
         print("PushDeer 推送成功！")
     else:
         print("PushDeer 推送失败！错误信息：", response)
-    
 
+        
+def chat(title: str, content: str) -> None:
+    """
+    通过Chat 推送消息
+    """
+    if not push_config.get("CHAT_URL") or not push_config.get("CHAT_TOKEN"):
+        print("chat 服务的 CHAT_URL或CHAT_TOKEN 未设置!!\n取消推送")
+        return
+    print("chat 服务启动")
+    data = 'payload=' + json.dumps({'text': title + '\n' + content})
+    url = push_config.get("CHAT_URL") + push_config.get("CHAT_TOKEN")
+    response = requests.post(url, data=data)
+    
+    if response.status_code == 200:
+        print("Chat 推送成功！")
+    else:
+        print("Chat 推送失败！错误信息：", response)    
+
+        
+        
 def pushplus_bot(title: str, content: str) -> None:
     """
     通过 push+ 推送消息。
@@ -527,6 +549,8 @@ if push_config.get("PUSH_KEY"):
     notify_function.append(serverJ)
 if push_config.get("DEER_KEY"):
     notify_function.append(pushdeer)
+if push_config.get("CHAT_URL") and push_config.get("CHAT_TOKEN"):
+    notify_function.append(chat)
 if push_config.get("PUSH_PLUS_TOKEN"):
     notify_function.append(pushplus_bot)
 if push_config.get("QMSG_KEY") and push_config.get("QMSG_TYPE"):

shell/check.sh

@@ -31,6 +31,7 @@ copy_dep() {
   echo -e "---> 2. 复制nginx配置文件\n"
   cp -fv $nginx_conf /etc/nginx/nginx.conf
   cp -fv $nginx_app_conf /etc/nginx/conf.d/front.conf
+  sed -i "s,QL_BASE_URL,${qlBaseUrl},g" /etc/nginx/conf.d/front.conf
   echo -e "---> 配置文件复制完成\n"
 }
 

shell/share.sh

@@ -67,6 +67,7 @@ import_config() {
     [[ -f $file_config_user ]] && . $file_config_user
     [[ -f $file_env ]] && . $file_env
 
+    ql_base_url=${QlBaseUrl:-""}
     command_timeout_time=${CommandTimeoutTime:-"1h"}
     proxy_url=${ProxyUrl:-""}
     file_extensions=${RepoFileExtensions:-"js py"}

shell/task.sh

@@ -24,12 +24,29 @@ define_program() {
 random_delay() {
     local random_delay_max=$RandomDelay
     if [[ $random_delay_max ]] && [[ $random_delay_max -gt 0 ]]; then
-        local current_min=$(date "+%-M")
-        if [[ $current_min -ne 0 ]] && [[ $current_min -ne 30 ]]; then
-            delay_second=$(($(gen_random_num $random_delay_max) + 1))
-            echo -e "\n命令未添加 \"now\"，随机延迟 $delay_second 秒后再执行任务，如需立即终止，请按 CTRL+C...\n"
-            sleep $delay_second
+        local file_param=$1
+        local file_extensions=${RandomDelayFileExtensions-"js"}
+        local ignored_minutes=${RandomDelayIgnoredMinutes-"0 30"}
+
+        if [[ -n $file_extensions ]]; then
+            if ! echo "$file_param" | grep -qE "\.${file_extensions// /$|\\.}$"; then
+                # echo -e "\n当前文件需要准点运行, 放弃随机延迟\n"
+                return
+            fi
         fi
+
+        local current_min
+        current_min=$(date "+%-M")
+        for minute in $ignored_minutes; do
+            if [[ $current_min -eq $minute ]]; then
+                # echo -e "\n当前时间需要准点运行, 放弃随机延迟\n"
+                return
+            fi
+        done
+
+        local delay_second=$(($(gen_random_num "$random_delay_max") + 1))
+        echo -e "\n命令未添加 \"now\"，随机延迟 $delay_second 秒后再执行任务，如需立即终止，请按 CTRL+C...\n"
+        sleep $delay_second
     fi
 }
 
@@ -78,10 +95,8 @@ run_nohup() {
 run_normal() {
     local file_param=$1
     define_program "$file_param"
-    if [[ $file_param == *.js ]]; then
-        if [[ $# -eq 1 ]]; then
-            random_delay
-        fi
+    if [[ $# -eq 1 ]]; then
+        random_delay "$file_param"
     fi
 
     local time=$(date "+$time_format")
@@ -356,7 +371,7 @@ main() {
     fi
 
     time_format="%Y-%m-%d %H:%M:%S"
-    if [[ $1 == *.js ]] || [[ $1 == *.py ]] || [[ $1 == *.sh ]] || [[ $1 == *.ts ]]; then
+    if [[ $1 == *.js ]] || [[ $1 == *.py ]] || [[ $1 == *.pyc ]] || [[ $1 == *.sh ]] || [[ $1 == *.ts ]]; then
         case $# in
         1)
             run_normal "$1"

src/layouts/index.less

@@ -56,7 +56,13 @@
     overflow: auto;
     height: 100%;
     background-color: @component-background;
-    padding: 16px;
+    padding: 12px;
+  }
+}
+
+.ql-container-wrapper-has-tab {
+  .ant-pro-grid-content.wide .ant-pro-page-container-children-content {
+    padding-top: 0;
   }
 }
 
@@ -136,7 +142,7 @@
     flex: 1;
 
     .ant-pro-grid-content-children {
-      height: calc(100% - 36px);
+      height: 100%;
 
       > div,
       .log-container,
@@ -264,16 +270,24 @@
   }
 }
 
-.ant-pro-page-container-children-content {
-  margin: 18px 18px 18px;
-}
-
 .ant-pro-basicLayout-content {
-  margin: 18px;
+  margin: 12px;
 
   .ant-pro-page-container {
-    margin: -18px -18px -18px;
+    margin: -12px;
   }
+
+  .ant-pro-page-container-warp .ant-page-header {
+    border-bottom: 1px solid #eee;
+  }
+
+  .ant-pro-page-container-children-content {
+    margin: 0;
+  }
+}
+
+.ant-pro-global-header {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03);
 }
 
 .ant-menu-item.ant-pro-sider-collapsed-button {
@@ -312,6 +326,10 @@
   background-color: #373739;
 }
 
+.ant-layout-sider {
+  border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
+}
+
 .ant-pro-sider-logo {
   padding: 16px 8px !important;
 

src/layouts/index.tsx

@@ -186,9 +186,8 @@ export default function (props: any) {
   if (
     ['/login', '/initialization', '/error'].includes(props.location.pathname)
   ) {
-    document.title = `${
-      (config.documentTitleMap as any)[props.location.pathname]
-    } - 控制面板`;
+    document.title = `${(config.documentTitleMap as any)[props.location.pathname]
+      } - 控制面板`;
     if (
       systemInfo?.isInitialized &&
       props.location.pathname === '/initialization'
@@ -282,7 +281,7 @@ export default function (props: any) {
                 shape="square"
                 size="small"
                 icon={<UserOutlined />}
-                src={`/api/static/${user.avatar}`}
+                src={user.avatar ? `/api/static/${user.avatar}` : ''}
               />
               <span style={{ marginLeft: 5 }}>{user.username}</span>
             </span>
@@ -304,7 +303,7 @@ export default function (props: any) {
                   shape="square"
                   size="small"
                   icon={<UserOutlined />}
-                  src={`/api/static/${user.avatar}`}
+                  src={user.avatar ? `/api/static/${user.avatar}` : ''}
                 />
                 <span style={{ marginLeft: 5 }}>{user.username}</span>
               </span>

src/pages/crontab/detail.tsx

@@ -108,7 +108,6 @@ const CronDetailModal = ({
           wordWrap: 'on',
         }}
         onMount={(editor, monaco) => {
-          console.log(monaco);
           editorRef.current = editor;
         }}
       />

src/pages/crontab/index.less

@@ -101,3 +101,76 @@
     background: #fafafa;
   }
 }
+
+.crontab-view {
+  .ant-tabs-nav-wrap {
+    flex: unset !important;
+  }
+
+  .ant-tabs-nav-operations {
+    position: absolute;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .view-more {
+    margin-left: 32px;
+    padding: 8px 0;
+    cursor: pointer;
+
+    .ant-tabs-ink-bar {
+      width: 0;
+    }
+
+    &:hover,
+    &:focus-visible {
+      color: #1890ff;
+
+      .ant-tabs-ink-bar {
+        width: 50px;
+      }
+    }
+
+    &.active {
+      color: #1890ff;
+
+      .ant-tabs-ink-bar {
+        width: 50px;
+      }
+    }
+  }
+
+  &.more-active {
+    .ant-tabs-nav-list {
+      .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+        color: unset;
+      }
+
+      .ant-tabs-ink-bar {
+        width: 0 !important;
+      }
+    }
+  }
+}
+
+.view-create-modal-filters {
+  display: flex;
+
+  .ant-space-item:nth-child(3) {
+    flex: 1;
+  }
+}
+
+tr.drop-over-downward td {
+  border-bottom: 2px dashed #1890ff;
+}
+
+tr.drop-over-upward td {
+  border-top: 2px dashed #1890ff;
+}
+
+.view-manage-modal {
+  .ant-modal-body {
+    padding-top: 10px;
+  }
+}

src/pages/crontab/index.tsx

@@ -12,6 +12,8 @@ import {
   Typography,
   Input,
   Popover,
+  Tabs,
+  TablePaginationConfig,
 } from 'antd';
 import {
   ClockCircleOutlined,
@@ -27,6 +29,11 @@ import {
   PauseCircleOutlined,
   FieldTimeOutlined,
   PushpinOutlined,
+  DownOutlined,
+  SettingOutlined,
+  PlusOutlined,
+  UnorderedListOutlined,
+  CheckOutlined,
 } from '@ant-design/icons';
 import config from '@/utils/config';
 import { PageContainer } from '@ant-design/pro-layout';
@@ -39,6 +46,10 @@ import { diffTime } from '@/utils/date';
 import { getTableScroll } from '@/utils/index';
 import { history } from 'umi';
 import './index.less';
+import ViewCreateModal from './viewCreateModal';
+import ViewManageModal from './viewManageModal';
+import pagination from 'antd/lib/pagination';
+import { FilterValue, SorterResult } from 'antd/lib/table/interface';
 
 const { Text, Paragraph } = Typography;
 const { Search } = Input;
@@ -122,8 +133,7 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
         </>
       ),
       sorter: {
-        compare: (a: any, b: any) => a.name.localeCompare(b.name),
-        multiple: 2,
+        compare: (a: any, b: any) => a?.name?.localeCompare(b?.name),
       },
     },
     {
@@ -148,7 +158,6 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
       },
       sorter: {
         compare: (a: any, b: any) => a.command.localeCompare(b.command),
-        multiple: 3,
       },
     },
     {
@@ -159,7 +168,6 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
       align: 'center' as const,
       sorter: {
         compare: (a: any, b: any) => a.schedule.localeCompare(b.schedule),
-        multiple: 1,
       },
     },
     {
@@ -346,12 +354,24 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
   const [isLogModalVisible, setIsLogModalVisible] = useState(false);
   const [logCron, setLogCron] = useState<any>();
   const [selectedRowIds, setSelectedRowIds] = useState<string[]>([]);
-  const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(20);
+  const [pageConf, setPageConf] = useState<{
+    page: number;
+    size: number;
+    sorter: any;
+  }>({} as any);
+  const [viewConf, setViewConf] = useState<any>();
   const [tableScrollHeight, setTableScrollHeight] = useState<number>();
   const [isDetailModalVisible, setIsDetailModalVisible] = useState(false);
   const [detailCron, setDetailCron] = useState<any>();
   const [searchValue, setSearchValue] = useState('');
+  const [total, setTotal] = useState<number>();
+  const [isCreateViewModalVisible, setIsCreateViewModalVisible] =
+    useState(false);
+  const [isViewManageModalVisible, setIsViewManageModalVisible] =
+    useState(false);
+  const [cronViews, setCronViews] = useState<any[]>([]);
+  const [enabledCronViews, setEnabledCronViews] = useState<any[]>([]);
+  const [moreMenuActive, setMoreMenuActive] = useState(false);
 
   const goToScriptManager = (record: any) => {
     const cmd = record.command.split(' ') as string[];
@@ -373,37 +393,35 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
 
   const getCrons = () => {
     setLoading(true);
+    const { page, size, sorter } = pageConf;
+    let url = `${config.apiPrefix}crons?searchValue=${searchText}&page=${page}&size=${size}`;
+    if (sorter && sorter.field) {
+      url += `&sortField=${sorter.field}&sortType=${
+        sorter.order === 'ascend' ? 'ASC' : 'DESC'
+      }`;
+    }
+    if (viewConf) {
+      url += `&queryString=${JSON.stringify({
+        filters: viewConf.filters,
+        sorts: viewConf.sorts,
+      })}`;
+    }
     request
-      .get(`${config.apiPrefix}crons?searchValue=${searchText}`)
-      .then((data: any) => {
+      .get(url)
+      .then((_data: any) => {
+        const { data, total } = _data.data;
         setValue(
-          data.data
-            .sort((a: any, b: any) => {
-              const sortA =
-                a.isPinned && a.status !== 0
-                  ? 5
-                  : a.isDisabled && a.status !== 0
-                  ? 4
-                  : a.status;
-              const sortB =
-                b.isPinned && b.status !== 0
-                  ? 5
-                  : b.isDisabled && b.status !== 0
-                  ? 4
-                  : b.status;
-              return CrontabSort[sortA] - CrontabSort[sortB];
-            })
-            .map((x) => {
-              return {
-                ...x,
-                nextRunTime: cron_parser
-                  .parseExpression(x.schedule)
-                  .next()
-                  .toDate(),
-              };
-            }),
+          data.map((x) => {
+            return {
+              ...x,
+              nextRunTime: cron_parser
+                .parseExpression(x.schedule)
+                .next()
+                .toDate(),
+            };
+          }),
         );
-        setCurrentPage(1);
+        setTotal(total);
       })
       .finally(() => setLoading(false));
   };
@@ -743,11 +761,6 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
   const rowSelection = {
     selectedRowIds,
     onChange: onSelectChange,
-    selections: [
-      Table.SELECTION_ALL,
-      Table.SELECTION_INVERT,
-      Table.SELECTION_NONE,
-    ],
   };
 
   const delCrons = () => {
@@ -796,10 +809,14 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
     });
   };
 
-  const onPageChange = (page: number, pageSize: number | undefined) => {
-    setCurrentPage(page);
-    setPageSize(pageSize as number);
-    localStorage.setItem('pageSize', pageSize + '');
+  const onPageChange = (
+    pagination: TablePaginationConfig,
+    filters: Record<string, FilterValue | null>,
+    sorter: SorterResult<any> | SorterResult<any>[],
+  ) => {
+    const { current, pageSize } = pagination;
+    setPageConf({ page: current as number, size: pageSize as number, sorter });
+    localStorage.setItem('pageSize', String(pageSize));
   };
 
   const getRowClassName = (record: any, index: number) => {
@@ -814,39 +831,36 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
   }, [logCron]);
 
   useEffect(() => {
-    getCrons();
+    setPageConf({ ...pageConf, page: 1 });
   }, [searchText]);
 
   useEffect(() => {
-    setPageSize(parseInt(localStorage.getItem('pageSize') || '20'));
+    if (pageConf.page && pageConf.size) {
+      getCrons();
+    }
+  }, [pageConf, viewConf]);
+
+  useEffect(() => {
+    if (viewConf && enabledCronViews && enabledCronViews.length > 0) {
+      const view = enabledCronViews.slice(2).find((x) => x.id === viewConf.id);
+      setMoreMenuActive(!!view);
+    }
+  }, [viewConf, enabledCronViews]);
+
+  useEffect(() => {
+    setPageConf({
+      page: 1,
+      size: parseInt(localStorage.getItem('pageSize') || '20'),
+      sorter: {},
+    });
     setTimeout(() => {
       setTableScrollHeight(getTableScroll());
     });
+    getCronViews();
   }, []);
 
-  return (
-    <PageContainer
-      className="ql-container-wrapper crontab-wrapper"
-      title="定时任务"
-      extra={[
-        <Search
-          placeholder="请输入名称或者关键词"
-          style={{ width: 'auto' }}
-          enterButton
-          allowClear
-          loading={loading}
-          value={searchValue}
-          onChange={(e) => setSearchValue(e.target.value)}
-          onSearch={onSearch}
-        />,
-        <Button key="2" type="primary" onClick={() => addCron()}>
-          新建任务
-        </Button>,
-      ]}
-      header={{
-        style: headerStyle,
-      }}
-    >
+  const panelContent = (
+    <>
       {selectedRowIds.length > 0 && (
         <div style={{ marginBottom: 16 }}>
           <Button type="primary" style={{ marginBottom: 5 }} onClick={delCrons}>
@@ -906,15 +920,16 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
       <Table
         columns={columns}
         pagination={{
-          current: currentPage,
-          onChange: onPageChange,
-          pageSize: pageSize,
+          current: pageConf.page,
+          pageSize: pageConf.size,
           showSizeChanger: true,
           simple: isPhone,
-          defaultPageSize: 20,
+          total,
           showTotal: (total: number, range: number[]) =>
             `第 ${range[0]}-${range[1]} 条/总共 ${total} 条`,
-          pageSizeOptions: [20, 100, 500, 1000] as any,
+          pageSizeOptions: [10, 20, 50, 100, 200, 500, total || 10000].sort(
+            (a, b) => a - b,
+          ),
         }}
         onRow={(record) => {
           return {
@@ -931,7 +946,135 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
         loading={loading}
         rowSelection={rowSelection}
         rowClassName={getRowClassName}
+        onChange={onPageChange}
       />
+    </>
+  );
+
+  const viewAction = (key: string) => {
+    switch (key) {
+      case 'new':
+        setIsCreateViewModalVisible(true);
+        break;
+      case 'manage':
+        setIsViewManageModalVisible(true);
+        break;
+
+      default:
+        tabClick(key);
+        break;
+    }
+  };
+
+  const menu = (
+    <Menu
+      onClick={({ key, domEvent }) => {
+        domEvent.stopPropagation();
+        viewAction(key);
+      }}
+      items={[
+        ...[...enabledCronViews].slice(2).map((x) => ({
+          label: (
+            <Space style={{ display: 'flex', justifyContent: 'space-between' }}>
+              <span>{x.name}</span>
+              {viewConf?.id === x.id && (
+                <CheckOutlined style={{ color: '#1890ff' }} />
+              )}
+            </Space>
+          ),
+          key: x.id,
+          icon: <UnorderedListOutlined />,
+        })),
+        {
+          type: 'divider',
+        },
+        {
+          label: '新建视图',
+          key: 'new',
+          icon: <PlusOutlined />,
+        },
+        {
+          label: '视图管理',
+          key: 'manage',
+          icon: <SettingOutlined />,
+        },
+      ]}
+    />
+  );
+
+  const getCronViews = () => {
+    setLoading(true);
+    request
+      .get(`${config.apiPrefix}crons/views`)
+      .then((data: any) => {
+        setCronViews(data.data);
+        setEnabledCronViews(data.data.filter((x) => !x.isDisabled));
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
+  const tabClick = (key: string) => {
+    const view = enabledCronViews.find((x) => x.id == key);
+    setPageConf({ ...pageConf, page: 1 });
+    setViewConf(view ? view : null);
+  };
+
+  return (
+    <PageContainer
+      className="ql-container-wrapper crontab-wrapper ql-container-wrapper-has-tab"
+      title="定时任务"
+      extra={[
+        <Search
+          placeholder="请输入名称或者关键词"
+          style={{ width: 'auto' }}
+          enterButton
+          allowClear
+          loading={loading}
+          value={searchValue}
+          onChange={(e) => setSearchValue(e.target.value)}
+          onSearch={onSearch}
+        />,
+        <Button key="2" type="primary" onClick={() => addCron()}>
+          新建任务
+        </Button>,
+      ]}
+      header={{
+        style: headerStyle,
+      }}
+    >
+      <Tabs
+        defaultActiveKey="all"
+        size="small"
+        tabPosition="top"
+        className={`crontab-view ${moreMenuActive ? 'more-active' : ''}`}
+        tabBarExtraContent={
+          <Dropdown
+            overlay={menu}
+            trigger={['click']}
+            overlayStyle={{ minWidth: 200 }}
+          >
+            <div className={`view-more ${moreMenuActive ? 'active' : ''}`}>
+              <Space>
+                更多
+                <DownOutlined />
+              </Space>
+              <div className="ant-tabs-ink-bar ant-tabs-ink-bar-animated"></div>
+            </div>
+          </Dropdown>
+        }
+        onTabClick={tabClick}
+      >
+        <Tabs.TabPane tab="全部任务" key="all">
+          {panelContent}
+        </Tabs.TabPane>
+        {[...enabledCronViews].slice(0, 2).map((x) => (
+          <Tabs.TabPane tab={x.name} key={x.id}>
+            {panelContent}
+          </Tabs.TabPane>
+        ))}
+      </Tabs>
       <CronLogModal
         visible={isLogModalVisible}
         handleCancel={() => {
@@ -964,6 +1107,29 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
         theme={theme}
         isPhone={isPhone}
       />
+      <ViewCreateModal
+        visible={isCreateViewModalVisible}
+        handleCancel={(data) => {
+          setIsCreateViewModalVisible(false);
+          getCronViews();
+          if (data && data.id === viewConf.id) {
+            setViewConf({ ...viewConf, ...data });
+          }
+        }}
+      />
+      <ViewManageModal
+        cronViews={cronViews}
+        visible={isViewManageModalVisible}
+        handleCancel={() => {
+          setIsViewManageModalVisible(false);
+        }}
+        cronViewChange={(data) => {
+          getCronViews();
+          if (data && data.id === viewConf.id) {
+            setViewConf({ ...viewConf, ...data });
+          }
+        }}
+      />
     </PageContainer>
   );
 };

src/pages/crontab/viewCreateModal.tsx

@@ -0,0 +1,263 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Modal,
+  message,
+  Input,
+  Form,
+  Statistic,
+  Button,
+  Space,
+  Select,
+} from 'antd';
+import { request } from '@/utils/http';
+import config from '@/utils/config';
+import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
+
+const PROPERTIES = [
+  { name: '命令', value: 'command' },
+  { name: '名称', value: 'name' },
+  { name: '定时规则', value: 'schedule' },
+  { name: '状态', value: 'status' },
+];
+
+const OPERATIONS = [
+  { name: '包含', value: 'Reg' },
+  { name: '不包含', value: 'NotReg' },
+  { name: '属于', value: 'In' },
+  { name: '不属于', value: 'Nin' },
+  // { name: '等于', value: 'Eq' },
+  // { name: '不等于', value: 'Ne' },
+  // { name: '为空', value: 'IsNull' },
+  // { name: '不为空', value: 'NotNull' },
+];
+
+const SORTTYPES = [
+  { name: '顺序', value: 'ASC' },
+  { name: '倒序', value: 'DESC' },
+];
+
+const STATUS = [
+  { name: '运行中', value: 0 },
+  { name: '空闲中', value: 1 },
+  { name: '已禁用', value: 2 },
+];
+
+const ViewCreateModal = ({
+  view,
+  handleCancel,
+  visible,
+}: {
+  view?: any;
+  visible: boolean;
+  handleCancel: (param?: any) => void;
+}) => {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+  const [operationMap, setOperationMap] = useState<any>();
+
+  const handleOk = async (values: any) => {
+    setLoading(true);
+    const method = view ? 'put' : 'post';
+    try {
+      const { code, data } = await request[method](
+        `${config.apiPrefix}crons/views`,
+        {
+          data: view ? { ...values, id: view.id } : values,
+        },
+      );
+      if (code !== 200) {
+        message.error(data);
+      }
+      setLoading(false);
+      handleCancel(data);
+    } catch (error: any) {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!view) {
+      form.resetFields();
+    }
+    form.setFieldsValue(
+      view || {
+        filters: [{ property: 'command', operation: 'Reg' }],
+      },
+    );
+  }, [view, visible]);
+
+  const operationElement = (
+    <Select
+      style={{ width: 100 }}
+      onChange={() => {
+        setOperationMap({});
+      }}
+    >
+      {OPERATIONS.map((x) => (
+        <Select.Option key={x.name} value={x.value}>
+          {x.name}
+        </Select.Option>
+      ))}
+    </Select>
+  );
+
+  const propertyElement = (props: any) => {
+    return (
+      <Select style={{ width: 120 }}>
+        {props.map((x) => (
+          <Select.Option key={x.name} value={x.value}>
+            {x.name}
+          </Select.Option>
+        ))}
+      </Select>
+    );
+  };
+
+  const typeElement = (
+    <Select style={{ width: 120 }}>
+      {SORTTYPES.map((x) => (
+        <Select.Option key={x.name} value={x.value}>
+          {x.name}
+        </Select.Option>
+      ))}
+    </Select>
+  );
+
+  const statusElement = (
+    <Select mode="multiple" allowClear placeholder="请选择状态">
+      {STATUS.map((x) => (
+        <Select.Option key={x.name} value={x.value}>
+          {x.name}
+        </Select.Option>
+      ))}
+    </Select>
+  );
+
+  return (
+    <Modal
+      title={view ? '编辑视图' : '新建视图'}
+      visible={visible}
+      forceRender
+      width={580}
+      centered
+      maskClosable={false}
+      onOk={() => {
+        form
+          .validateFields()
+          .then((values) => {
+            handleOk(values);
+          })
+          .catch((info) => {
+            console.log('Validate Failed:', info);
+          });
+      }}
+      onCancel={() => handleCancel()}
+      confirmLoading={loading}
+    >
+      <Form form={form} layout="vertical" name="env_modal">
+        <Form.Item
+          name="name"
+          label="视图名称"
+          rules={[{ required: true, message: '请输入视图名称' }]}
+        >
+          <Input placeholder="请输入视图名称" />
+        </Form.Item>
+        <Form.List name="filters">
+          {(fields, { add, remove }) => (
+            <>
+              {fields.map(({ key, name, ...restField }, index) => (
+                <Form.Item
+                  label={index === 0 ? '筛选条件' : ''}
+                  key={key}
+                  style={{ marginBottom: 0 }}
+                >
+                  <Space className="view-create-modal-filters" align="baseline">
+                    <Form.Item
+                      {...restField}
+                      name={[name, 'property']}
+                      rules={[{ required: true }]}
+                    >
+                      {propertyElement(PROPERTIES)}
+                    </Form.Item>
+                    <Form.Item
+                      {...restField}
+                      name={[name, 'operation']}
+                      rules={[{ required: true }]}
+                    >
+                      {operationElement}
+                    </Form.Item>
+                    <Form.Item
+                      {...restField}
+                      name={[name, 'value']}
+                      rules={[{ required: true, message: '请输入内容' }]}
+                    >
+                      {['In', 'Nin'].includes(
+                        form.getFieldValue(['filters', index, 'operation']),
+                      ) ? (
+                        statusElement
+                      ) : (
+                        <Input placeholder="请输入内容" />
+                      )}
+                    </Form.Item>
+                    {index !== 0 && (
+                      <MinusCircleOutlined onClick={() => remove(name)} />
+                    )}
+                  </Space>
+                </Form.Item>
+              ))}
+              <Form.Item>
+                <a
+                  onClick={() => add({ property: 'command', operation: 'Reg' })}
+                >
+                  <PlusOutlined />
+                  新增筛选条件
+                </a>
+              </Form.Item>
+            </>
+          )}
+        </Form.List>
+        <Form.List name="sorts">
+          {(fields, { add, remove }) => (
+            <>
+              {fields.map(({ key, name, ...restField }, index) => (
+                <Form.Item
+                  label={index === 0 ? '排序方式' : ''}
+                  key={key}
+                  style={{ marginBottom: 0 }}
+                >
+                  <Space className="view-create-modal-filters" align="baseline">
+                    <Form.Item
+                      {...restField}
+                      name={[name, 'property']}
+                      rules={[{ required: true }]}
+                    >
+                      {propertyElement(PROPERTIES)}
+                    </Form.Item>
+                    <Form.Item
+                      {...restField}
+                      name={[name, 'type']}
+                      rules={[{ required: true }]}
+                    >
+                      {typeElement}
+                    </Form.Item>
+                    {index !== 0 && (
+                      <MinusCircleOutlined onClick={() => remove(name)} />
+                    )}
+                  </Space>
+                </Form.Item>
+              ))}
+              <Form.Item>
+                <a onClick={() => add({ property: 'command', type: 'ASC' })}>
+                  <PlusOutlined />
+                  新增排序方式
+                </a>
+              </Form.Item>
+            </>
+          )}
+        </Form.List>
+      </Form>
+    </Modal>
+  );
+};
+
+export default ViewCreateModal;

src/pages/crontab/viewManageModal.tsx

@@ -0,0 +1,269 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  Modal,
+  message,
+  Space,
+  Table,
+  Tag,
+  Typography,
+  Button,
+  Switch,
+} from 'antd';
+import { request } from '@/utils/http';
+import config from '@/utils/config';
+import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
+import { DndProvider, useDrag, useDrop } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import ViewCreateModal from './viewCreateModal';
+
+const { Text } = Typography;
+
+const type = 'DragableBodyRow';
+
+const DragableBodyRow = ({
+  index,
+  moveRow,
+  className,
+  style,
+  ...restProps
+}: any) => {
+  const ref = useRef();
+  const [{ isOver, dropClassName }, drop] = useDrop({
+    accept: type,
+    collect: (monitor) => {
+      const { index: dragIndex } = (monitor.getItem() as any) || {};
+      if (dragIndex === index) {
+        return {};
+      }
+      return {
+        isOver: monitor.isOver(),
+        dropClassName:
+          dragIndex < index ? ' drop-over-downward' : ' drop-over-upward',
+      };
+    },
+    drop: (item: any) => {
+      moveRow(item.index, index);
+    },
+  });
+  const [, drag] = useDrag({
+    type,
+    item: { index },
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+  drop(drag(ref));
+
+  return (
+    <tr
+      ref={ref}
+      className={`${className}${isOver ? dropClassName : ''}`}
+      style={{ cursor: 'move', ...style }}
+      {...restProps}
+    />
+  );
+};
+
+const ViewManageModal = ({
+  cronViews,
+  handleCancel,
+  visible,
+  cronViewChange,
+}: {
+  cronViews: any[];
+  visible: boolean;
+  handleCancel: () => void;
+  cronViewChange: (data?: any) => void;
+}) => {
+  const columns: any = [
+    {
+      title: '名称',
+      dataIndex: 'name',
+      key: 'name',
+      align: 'center' as const,
+    },
+    {
+      title: '显示',
+      key: 'isDisabled',
+      dataIndex: 'isDisabled',
+      align: 'center' as const,
+      width: 100,
+      render: (text: string, record: any, index: number) => {
+        return (
+          <Switch
+            checked={!record.isDisabled}
+            onChange={(checked) => onShowChange(checked, record, index)}
+          />
+        );
+      },
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 140,
+      align: 'center' as const,
+      render: (text: string, record: any, index: number) => {
+        return (
+          <Space size="middle">
+            <a onClick={() => editView(record, index)}>
+              <EditOutlined />
+            </a>
+            <a onClick={() => deleteView(record, index)}>
+              <DeleteOutlined />
+            </a>
+          </Space>
+        );
+      },
+    },
+  ];
+  const [list, setList] = useState<any[]>([]);
+  const [isCreateViewModalVisible, setIsCreateViewModalVisible] =
+    useState<boolean>(false);
+  const [editedView, setEditedView] = useState<any>(null);
+
+  const editView = (record: any, index: number) => {
+    setEditedView(record);
+    setIsCreateViewModalVisible(true);
+  };
+
+  const deleteView = (record: any, index: number) => {
+    Modal.confirm({
+      title: '确认删除',
+      content: (
+        <>
+          确认删除视图{' '}
+          <Text style={{ wordBreak: 'break-all' }} type="warning">
+            {record.name}
+          </Text>{' '}
+          吗
+        </>
+      ),
+      onOk() {
+        request
+          .delete(`${config.apiPrefix}crons/views`, { data: [record.id] })
+          .then((data: any) => {
+            if (data.code === 200) {
+              message.success('删除成功');
+              cronViewChange();
+            } else {
+              message.error(data);
+            }
+          });
+      },
+      onCancel() {
+        console.log('Cancel');
+      },
+    });
+  };
+
+  const onShowChange = (checked: boolean, record: any, index: number) => {
+    console.log(checked);
+    request
+      .put(`${config.apiPrefix}crons/views/${checked ? 'enable' : 'disable'}`, {
+        data: [record.id],
+      })
+      .then((data: any) => {
+        if (data.code === 200) {
+          const _list = [...list];
+          _list.splice(index, 1, { ...list[index], isDisabled: !checked });
+          setList(_list);
+          cronViewChange();
+        } else {
+          message.error(data);
+        }
+      });
+  };
+
+  const components = {
+    body: {
+      row: DragableBodyRow,
+    },
+  };
+
+  const moveRow = useCallback(
+    (dragIndex, hoverIndex) => {
+      if (dragIndex === hoverIndex) {
+        return;
+      }
+      const dragRow = list[dragIndex];
+      request
+        .put(`${config.apiPrefix}crons/views/move`, {
+          data: { fromIndex: dragIndex, toIndex: hoverIndex, id: dragRow.id },
+        })
+        .then((data: any) => {
+          if (data.code === 200) {
+            const newData = [...list];
+            newData.splice(dragIndex, 1);
+            newData.splice(hoverIndex, 0, { ...dragRow, ...data.data });
+            setList(newData);
+            cronViewChange();
+          } else {
+            message.error(data);
+          }
+        });
+    },
+    [list],
+  );
+
+  useEffect(() => {
+    setList(cronViews);
+  }, [cronViews]);
+
+  return (
+    <Modal
+      title="视图管理"
+      visible={visible}
+      centered
+      width={620}
+      onCancel={() => handleCancel()}
+      className="view-manage-modal"
+      forceRender
+      footer={false}
+      maskClosable={false}
+    >
+      <Space
+        style={{
+          display: 'flex',
+          justifyContent: 'flex-end',
+          marginBottom: 10,
+        }}
+      >
+        <Button
+          key="2"
+          type="primary"
+          onClick={() => setIsCreateViewModalVisible(true)}
+        >
+          新建视图
+        </Button>
+      </Space>
+      <DndProvider backend={HTML5Backend}>
+        <Table
+          bordered
+          columns={columns}
+          pagination={false}
+          dataSource={list}
+          rowKey="id"
+          size="middle"
+          style={{ marginBottom: 20 }}
+          components={components}
+          onRow={(record: any, index: number) => {
+            return {
+              index,
+              moveRow,
+            } as any;
+          }}
+        />
+      </DndProvider>
+      <ViewCreateModal
+        view={editedView}
+        visible={isCreateViewModalVisible}
+        handleCancel={(data) => {
+          cronViewChange(data);
+          setIsCreateViewModalVisible(false);
+        }}
+      />
+    </Modal>
+  );
+};
+
+export default ViewManageModal;

src/pages/dependence/index.tsx

@@ -444,7 +444,7 @@ const Dependence = ({ headerStyle, isPhone, socketMessage }: any) => {
 
   return (
     <PageContainer
-      className="ql-container-wrapper dependence-wrapper"
+      className="ql-container-wrapper dependence-wrapper ql-container-wrapper-has-tab"
       title="依赖管理"
       extra={[
         <Search

src/pages/login/index.tsx

@@ -154,6 +154,7 @@ const Login = ({ reloadUser }: any) => {
                   message: '验证码为6位数字',
                 },
               ]}
+              validateTrigger="onBlur"
             >
               <Input
                 placeholder="6位数字"

src/pages/setting/index.tsx

@@ -313,7 +313,7 @@ const Setting = ({
 
   return (
     <PageContainer
-      className="ql-container-wrapper"
+      className="ql-container-wrapper ql-container-wrapper-has-tab"
       title="系统设置"
       header={{
         style: headerStyle,

src/utils/config.ts

@@ -90,6 +90,7 @@ export default {
     { value: 'weWorkApp', label: '企业微信应用' },
     { value: 'iGot', label: 'IGot' },
     { value: 'pushPlus', label: 'PushPlus' },
+    { value: 'chat', label: '群辉chat' },
     { value: 'email', label: '邮箱' },
     { value: 'closed', label: '已关闭' },
   ],
@@ -103,6 +104,14 @@ export default {
       { label: 'gotifyToken', tip: 'gotify的消息应用token码', required: true },
       { label: 'gotifyPriority', tip: '推送消息的优先级' },
     ],
+    chat: [
+      {
+        label: 'chatUrl',
+        tip: 'chat的url地址',
+        required: true,
+      },
+      { label: 'chatToken', tip: 'chat的token码', required: true },
+    ],
     goCqHttpBot: [
       {
         label: 'goCqHttpBotUrl',

src/utils/index.ts

@@ -181,8 +181,8 @@ export function getTableScroll({
   id,
 }: { extraHeight?: number; id?: string } = {}) {
   if (typeof extraHeight == 'undefined') {
-    //  47 + 40 + 10 + 24
-    extraHeight = 121;
+    //  47 + 40 + 12
+    extraHeight = 99;
   }
   let tHeader = null;
   if (id) {

src/version.ts

@@ -1,5 +1,7 @@
-export const version = '2.13.8';
-export const changeLogLink = 'https://t.me/jiao_long/323';
-export const changeLog = `2.13.8 版本说明
-1. 修改系统token访问逻辑，加快任务启动速度
+export const version = '2.14.1';
+export const changeLogLink = 'https://t.me/jiao_long/326';
+export const changeLog = `2.14.1 版本说明
+1. 修复定时任务搜索
+2. 修复视图切换默认页码
+3. 增加群辉chat通知方式，感谢 https://github.com/Appoip
 `;