mirror of
https://github.com/whyour/qinglong.git
synced 2026-07-18 02:14:32 +08:00
增加新建订阅
This commit is contained in:
@@ -9,6 +9,11 @@
|
||||
url('../assets/fonts/SourceCodePro-Regular.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
max-height: calc(85vh - 110px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.log-modal {
|
||||
.ant-modal {
|
||||
padding-bottom: 0 !important;
|
||||
|
||||
@@ -49,6 +49,7 @@ const CronModal = ({
|
||||
title={cron ? '编辑任务' : '新建任务'}
|
||||
visible={visible}
|
||||
forceRender
|
||||
centered
|
||||
onOk={() => {
|
||||
form
|
||||
.validateFields()
|
||||
@@ -166,6 +167,7 @@ const CronLabelModal = ({
|
||||
title="批量修改标签"
|
||||
visible={visible}
|
||||
footer={buttons}
|
||||
centered
|
||||
forceRender
|
||||
onCancel={() => handleCancel(false)}
|
||||
confirmLoading={loading}
|
||||
|
||||
@@ -71,6 +71,7 @@ const DependenceModal = ({
|
||||
title={dependence ? '编辑依赖' : '新建依赖'}
|
||||
visible={visible}
|
||||
forceRender
|
||||
centered
|
||||
onOk={() => {
|
||||
form
|
||||
.validateFields()
|
||||
|
||||
Vendored
+1
@@ -41,6 +41,7 @@ const EditNameModal = ({
|
||||
title="修改环境变量名称"
|
||||
visible={visible}
|
||||
forceRender
|
||||
centered
|
||||
onOk={() => {
|
||||
form
|
||||
.validateFields()
|
||||
|
||||
Vendored
+1
@@ -61,6 +61,7 @@ const EnvModal = ({
|
||||
title={env ? '编辑变量' : '新建变量'}
|
||||
visible={visible}
|
||||
forceRender
|
||||
centered
|
||||
onOk={() => {
|
||||
form
|
||||
.validateFields()
|
||||
|
||||
@@ -56,6 +56,7 @@ const EditScriptNameModal = ({
|
||||
title="新建文件"
|
||||
visible={visible}
|
||||
forceRender
|
||||
centered
|
||||
onOk={() => {
|
||||
form
|
||||
.validateFields()
|
||||
|
||||
@@ -43,6 +43,7 @@ const SaveModal = ({
|
||||
title="保存文件"
|
||||
visible={visible}
|
||||
forceRender
|
||||
centered
|
||||
onOk={() => {
|
||||
form
|
||||
.validateFields()
|
||||
|
||||
@@ -43,6 +43,7 @@ const SettingModal = ({
|
||||
title="运行设置"
|
||||
visible={visible}
|
||||
forceRender
|
||||
centered
|
||||
onCancel={() => handleCancel()}
|
||||
>
|
||||
<Form
|
||||
|
||||
@@ -43,6 +43,7 @@ const AppModal = ({
|
||||
title={app ? '编辑应用' : '新建应用'}
|
||||
visible={visible}
|
||||
forceRender
|
||||
centered
|
||||
onOk={() => {
|
||||
form
|
||||
.validateFields()
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Modal, message, Input, Form, Button } from 'antd';
|
||||
import { Modal, message, InputNumber, Form, Radio, Select, Input } from 'antd';
|
||||
import { request } from '@/utils/http';
|
||||
import config from '@/utils/config';
|
||||
import cron_parser from 'cron-parser';
|
||||
import EditableTagGroup from '@/components/tag';
|
||||
|
||||
const { Option } = Select;
|
||||
const SubscriptionModal = ({
|
||||
subscription,
|
||||
handleCancel,
|
||||
@@ -16,6 +17,9 @@ const SubscriptionModal = ({
|
||||
}) => {
|
||||
const [form] = Form.useForm();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [type, setType] = useState('public-repo');
|
||||
const [scheduleType, setScheduleType] = useState('crontab');
|
||||
const [pullType, setPullType] = useState<'ssh-key' | 'user-pwd'>('ssh-key');
|
||||
|
||||
const handleOk = async (values: any) => {
|
||||
setLoading(true);
|
||||
@@ -45,6 +49,96 @@ const SubscriptionModal = ({
|
||||
}
|
||||
};
|
||||
|
||||
const typeChange = (e) => {
|
||||
setType(e.target.value);
|
||||
};
|
||||
|
||||
const scheduleTypeChange = (e) => {
|
||||
setScheduleType(e.target.value);
|
||||
form.setFieldsValue({ schedule: '' });
|
||||
};
|
||||
|
||||
const pullTypeChange = (e) => {
|
||||
setPullType(e.target.value);
|
||||
};
|
||||
|
||||
const IntervalSelect = ({
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
value?: any;
|
||||
onChange?: (param: any) => void;
|
||||
}) => {
|
||||
const [intervalType, setIntervalType] = useState('days');
|
||||
const [intervalNumber, setIntervalNumber] = useState<number>();
|
||||
const intervalTypeChange = (e) => {
|
||||
setIntervalType(e.target.value);
|
||||
onChange?.({ [e.target.value]: intervalNumber });
|
||||
};
|
||||
|
||||
const numberChange = (value: number) => {
|
||||
setIntervalNumber(value);
|
||||
onChange?.({ [intervalType]: value });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (value) {
|
||||
const key = Object.keys(value)[0];
|
||||
if (key) {
|
||||
setIntervalType(key);
|
||||
setIntervalNumber(value[key]);
|
||||
}
|
||||
}
|
||||
}, [value]);
|
||||
return (
|
||||
<Input.Group compact>
|
||||
<InputNumber
|
||||
addonBefore="每"
|
||||
precision={0}
|
||||
min={1}
|
||||
defaultValue={intervalNumber}
|
||||
style={{ width: 'calc(100% - 58px)' }}
|
||||
onChange={numberChange}
|
||||
/>
|
||||
<Select defaultValue={intervalType} onChange={intervalTypeChange}>
|
||||
<Option value="days">天</Option>
|
||||
<Option value="hours">时</Option>
|
||||
<Option value="minutes">分</Option>
|
||||
<Option value="seconds">秒</Option>
|
||||
</Select>
|
||||
</Input.Group>
|
||||
);
|
||||
};
|
||||
const PullOptions = ({
|
||||
value,
|
||||
onChange,
|
||||
type,
|
||||
}: {
|
||||
value?: any;
|
||||
type: 'ssh-key' | 'user-pwd';
|
||||
onChange?: (param: any) => void;
|
||||
}) => {
|
||||
return type === 'ssh-key' ? (
|
||||
<Form.Item name="private_key" label="私钥" rules={[{ required: true }]}>
|
||||
<Input.TextArea rows={4} autoSize={true} placeholder="请输入私钥" />
|
||||
</Form.Item>
|
||||
) : (
|
||||
<>
|
||||
<Form.Item name="username" label="用户名" rules={[{ required: true }]}>
|
||||
<Input placeholder="请输入认证用户名" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="password"
|
||||
tooltip="Github已不支持密码认证,请使用Token方式"
|
||||
label="密码/Token"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input placeholder="请输入密码或者Token" />
|
||||
</Form.Item>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
form.resetFields();
|
||||
}, [subscription, visible]);
|
||||
@@ -54,6 +148,7 @@ const SubscriptionModal = ({
|
||||
title={subscription ? '编辑订阅' : '新建订阅'}
|
||||
visible={visible}
|
||||
forceRender
|
||||
centered
|
||||
onOk={() => {
|
||||
form
|
||||
.validateFields()
|
||||
@@ -69,23 +164,25 @@ const SubscriptionModal = ({
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
name="form_in_modal"
|
||||
initialValues={subscription}
|
||||
layout="vertical"
|
||||
>
|
||||
<Form.Item name="name" label="名称">
|
||||
<Input placeholder="请输入订阅名称" />
|
||||
<Form.Item name="name" label="别名">
|
||||
<Input placeholder="请输入订阅别名" />
|
||||
</Form.Item>
|
||||
<Form.Item name="url" label="链接" rules={[{ required: true }]}>
|
||||
<Input placeholder="请输入订阅链接" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="command"
|
||||
label="命令"
|
||||
rules={[{ required: true, whitespace: true }]}
|
||||
name="schedule_type"
|
||||
label="定时类型"
|
||||
initialValue={'crontab'}
|
||||
>
|
||||
<Input.TextArea
|
||||
rows={4}
|
||||
autoSize={true}
|
||||
placeholder="请输入要执行的命令"
|
||||
/>
|
||||
<Radio.Group onChange={scheduleTypeChange}>
|
||||
<Radio value="crontab">crontab</Radio>
|
||||
<Radio value="interval">interval</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="schedule"
|
||||
@@ -94,7 +191,11 @@ const SubscriptionModal = ({
|
||||
{ required: true },
|
||||
{
|
||||
validator: (rule, value) => {
|
||||
if (!value || cron_parser.parseExpression(value).hasNext()) {
|
||||
if (
|
||||
scheduleType === 'interval' ||
|
||||
!value ||
|
||||
cron_parser.parseExpression(value).hasNext()
|
||||
) {
|
||||
return Promise.resolve();
|
||||
} else {
|
||||
return Promise.reject('Subscription表达式格式有误');
|
||||
@@ -103,11 +204,82 @@ const SubscriptionModal = ({
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input placeholder="秒(可选) 分 时 天 月 周" />
|
||||
{scheduleType === 'interval' ? (
|
||||
<IntervalSelect />
|
||||
) : (
|
||||
<Input placeholder="秒(可选) 分 时 天 月 周" />
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item name="labels" label="标签">
|
||||
<EditableTagGroup />
|
||||
<Form.Item name="type" label="类型" initialValue={'public-repo'}>
|
||||
<Radio.Group onChange={typeChange}>
|
||||
<Radio value="public-repo">公开仓库</Radio>
|
||||
<Radio value="private-repo">私有仓库</Radio>
|
||||
<Radio value="file">单个文件</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
{type !== 'file' && (
|
||||
<>
|
||||
<Form.Item
|
||||
name="command"
|
||||
label="白名单"
|
||||
rules={[{ whitespace: true }]}
|
||||
tooltip="多个关键词竖线分割,支持正则表达式"
|
||||
>
|
||||
<Input.TextArea
|
||||
rows={4}
|
||||
autoSize={true}
|
||||
placeholder="请输入脚本筛选白名单关键词,多个关键词竖线分割"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="command"
|
||||
label="黑名单"
|
||||
rules={[{ whitespace: true }]}
|
||||
tooltip="多个关键词竖线分割,支持正则表达式"
|
||||
>
|
||||
<Input.TextArea
|
||||
rows={4}
|
||||
autoSize={true}
|
||||
placeholder="请输入脚本筛选黑名单关键词,多个关键词竖线分割"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="command"
|
||||
label="依赖文件"
|
||||
rules={[{ whitespace: true }]}
|
||||
tooltip="多个关键词竖线分割,支持正则表达式"
|
||||
>
|
||||
<Input.TextArea
|
||||
rows={4}
|
||||
autoSize={true}
|
||||
placeholder="请输入脚本依赖文件关键词,多个关键词竖线分割"
|
||||
/>
|
||||
</Form.Item>
|
||||
{type === 'private-repo' && (
|
||||
<>
|
||||
<Form.Item
|
||||
name="pull_type"
|
||||
label="拉取方式"
|
||||
initialValue={'ssh-key'}
|
||||
>
|
||||
<Radio.Group onChange={pullTypeChange}>
|
||||
<Radio value="ssh-key">私钥</Radio>
|
||||
<Radio value="user-pwd">用户名密码/Token</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
<PullOptions type={pullType} />
|
||||
</>
|
||||
)}
|
||||
<Form.Item
|
||||
name="alias"
|
||||
label="唯一值"
|
||||
rules={[{ required: true }]}
|
||||
tooltip="唯一值用于日志目录和私钥别名"
|
||||
>
|
||||
<Input placeholder="自动生成" disabled />
|
||||
</Form.Item>
|
||||
</>
|
||||
)}
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user