You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
593 lines
14 KiB
593 lines
14 KiB
<script setup lang="ts">
|
|
const props = defineProps({
|
|
task: { type: Object as PropType<any>, default: null },
|
|
registeredFunctions: { type: Array as PropType<string[]>, default: () => [] },
|
|
})
|
|
|
|
const emit = defineEmits(["close"])
|
|
|
|
const isEdit = computed(() => !!props.task)
|
|
|
|
const form = reactive({
|
|
name: props.task?.name ?? "",
|
|
cronExpression: props.task?.cronExpression ?? "0 9 * * *",
|
|
type: (props.task?.type ?? "function") as "function" | "http",
|
|
functionName: props.task?.functionName ?? "",
|
|
functionPayload: props.task?.functionPayload ?? "",
|
|
httpMethod: props.task?.httpMethod ?? "GET",
|
|
httpUrl: props.task?.httpUrl ?? "",
|
|
httpHeaders: props.task?.httpHeaders ?? "",
|
|
httpBody: props.task?.httpBody ?? "",
|
|
catchUp: props.task?.catchUp === 1,
|
|
enabled: props.task ? props.task.enabled === 1 : true,
|
|
maxRetries: props.task?.maxRetries ?? 0,
|
|
retryDelaySeconds: props.task?.retryDelaySeconds ?? 60,
|
|
timeoutSeconds: props.task?.timeoutSeconds ?? 300,
|
|
})
|
|
|
|
const saving = ref(false)
|
|
const error = ref("")
|
|
const showAdvanced = ref(false)
|
|
|
|
const typeItems = [
|
|
{ label: "函数", value: "function" },
|
|
{ label: "HTTP 请求", value: "http" },
|
|
]
|
|
|
|
const httpMethodItems = [
|
|
{ label: "GET", value: "GET" },
|
|
{ label: "POST", value: "POST" },
|
|
{ label: "PUT", value: "PUT" },
|
|
{ label: "DELETE", value: "DELETE" },
|
|
]
|
|
|
|
const functionItems = computed(() =>
|
|
props.registeredFunctions.map((f: string) => ({ label: f, value: f }))
|
|
)
|
|
|
|
const cronPresets = [
|
|
{ label: "每分钟", value: "* * * * *" },
|
|
{ label: "每5分钟", value: "*/5 * * * *" },
|
|
{ label: "每小时", value: "0 * * * *" },
|
|
{ label: "每天上午9点", value: "0 9 * * *" },
|
|
{ label: "每天午夜", value: "0 0 * * *" },
|
|
{ label: "每周一上午9点", value: "0 9 * * 1" },
|
|
]
|
|
|
|
async function save() {
|
|
saving.value = true
|
|
error.value = ""
|
|
|
|
const body = {
|
|
...form,
|
|
catchUp: form.catchUp ? 1 : 0,
|
|
enabled: form.enabled ? 1 : 0,
|
|
}
|
|
|
|
try {
|
|
if (isEdit.value) {
|
|
await $fetch(`/api/scheduler/tasks/${props.task.id}`, {
|
|
method: "PUT",
|
|
body,
|
|
})
|
|
} else {
|
|
await $fetch("/api/scheduler/tasks", {
|
|
method: "POST",
|
|
body,
|
|
})
|
|
}
|
|
emit("close")
|
|
} catch (err: any) {
|
|
error.value = err?.data?.message ?? err?.message ?? "保存失败"
|
|
} finally {
|
|
saving.value = false
|
|
}
|
|
}
|
|
|
|
function onOverlayClick(e: MouseEvent) {
|
|
if ((e.target as HTMLElement).dataset.overlay === "true") {
|
|
emit("close")
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
data-overlay="true"
|
|
class="modal-overlay"
|
|
@click="onOverlayClick"
|
|
>
|
|
<div class="modal-container">
|
|
<!-- Header -->
|
|
<div class="modal-header">
|
|
<h2 class="modal-title">{{ isEdit ? '编辑' : '创建' }}任务</h2>
|
|
<button
|
|
class="modal-close-btn"
|
|
@click="emit('close')"
|
|
>
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="modal-body">
|
|
<div v-if="error" class="error-alert">
|
|
{{ error }}
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">名称 *</label>
|
|
<input
|
|
v-model="form.name"
|
|
type="text"
|
|
placeholder="任务名称"
|
|
class="form-input"
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">类型 *</label>
|
|
<select
|
|
v-model="form.type"
|
|
class="form-select"
|
|
>
|
|
<option v-for="item in typeItems" :key="item.value" :value="item.value">
|
|
{{ item.label }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Cron 表达式 *</label>
|
|
<input
|
|
v-model="form.cronExpression"
|
|
type="text"
|
|
placeholder="0 9 * * *"
|
|
class="form-input form-input-mono"
|
|
/>
|
|
<div class="cron-presets">
|
|
<button
|
|
v-for="preset in cronPresets"
|
|
:key="preset.value"
|
|
type="button"
|
|
class="cron-preset-btn"
|
|
@click="form.cronExpression = preset.value"
|
|
>
|
|
{{ preset.label }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Function fields -->
|
|
<template v-if="form.type === 'function'">
|
|
<div class="form-group">
|
|
<label class="form-label">函数 *</label>
|
|
<select
|
|
v-model="form.functionName"
|
|
class="form-select"
|
|
>
|
|
<option value="" disabled>选择函数</option>
|
|
<option v-for="item in functionItems" :key="item.value" :value="item.value">
|
|
{{ item.label }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Payload (JSON)</label>
|
|
<input
|
|
v-model="form.functionPayload"
|
|
type="text"
|
|
placeholder='{"key": "value"}'
|
|
class="form-input form-input-mono"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- HTTP fields -->
|
|
<template v-if="form.type === 'http'">
|
|
<div class="form-row">
|
|
<div class="form-group form-group-sm">
|
|
<label class="form-label">方法</label>
|
|
<select
|
|
v-model="form.httpMethod"
|
|
class="form-select"
|
|
>
|
|
<option v-for="item in httpMethodItems" :key="item.value" :value="item.value">
|
|
{{ item.label }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group form-group-grow">
|
|
<label class="form-label">URL *</label>
|
|
<input
|
|
v-model="form.httpUrl"
|
|
type="text"
|
|
placeholder="https://example.com/api"
|
|
class="form-input"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">请求头 (JSON)</label>
|
|
<input
|
|
v-model="form.httpHeaders"
|
|
type="text"
|
|
placeholder='{"Authorization": "Bearer ..."}'
|
|
class="form-input form-input-mono"
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">请求体</label>
|
|
<textarea
|
|
v-model="form.httpBody"
|
|
rows="3"
|
|
class="form-textarea form-input-mono"
|
|
></textarea>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Advanced settings -->
|
|
<div class="advanced-section">
|
|
<button
|
|
type="button"
|
|
class="advanced-toggle"
|
|
@click="showAdvanced = !showAdvanced"
|
|
>
|
|
<span>高级设置</span>
|
|
<svg
|
|
:class="['w-4 h-4 transition-transform', showAdvanced ? 'rotate-180' : '']"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
<div v-if="showAdvanced" class="advanced-content">
|
|
<div class="checkbox-group">
|
|
<label class="checkbox-label">
|
|
<input
|
|
v-model="form.catchUp"
|
|
type="checkbox"
|
|
class="form-checkbox"
|
|
/>
|
|
<span>服务重启后补录错过的执行</span>
|
|
</label>
|
|
<label class="checkbox-label">
|
|
<input
|
|
v-model="form.enabled"
|
|
type="checkbox"
|
|
class="form-checkbox"
|
|
/>
|
|
<span>启用</span>
|
|
</label>
|
|
</div>
|
|
<div class="form-row form-row-3">
|
|
<div class="form-group form-group-sm">
|
|
<label class="form-label form-label-sm">最大重试次数</label>
|
|
<input
|
|
v-model.number="form.maxRetries"
|
|
type="number"
|
|
min="0"
|
|
class="form-input"
|
|
/>
|
|
</div>
|
|
<div class="form-group form-group-sm">
|
|
<label class="form-label form-label-sm">重试延迟 (秒)</label>
|
|
<input
|
|
v-model.number="form.retryDelaySeconds"
|
|
type="number"
|
|
min="1"
|
|
class="form-input"
|
|
/>
|
|
</div>
|
|
<div class="form-group form-group-sm">
|
|
<label class="form-label form-label-sm">超时时间 (秒)</label>
|
|
<input
|
|
v-model.number="form.timeoutSeconds"
|
|
type="number"
|
|
min="1"
|
|
class="form-input"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="modal-footer">
|
|
<button
|
|
class="btn-secondary"
|
|
@click="emit('close')"
|
|
>
|
|
取消
|
|
</button>
|
|
<button
|
|
:disabled="saving"
|
|
class="btn-primary"
|
|
@click="save"
|
|
>
|
|
{{ saving ? '保存中...' : (isEdit ? '更新' : '创建') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 50;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
padding-top: 10vh;
|
|
background: rgba(20, 20, 19, 0.4);
|
|
}
|
|
|
|
.modal-container {
|
|
background: var(--color-canvas);
|
|
border-radius: 12px;
|
|
box-shadow: 0 20px 40px rgba(20, 20, 19, 0.2);
|
|
width: 100%;
|
|
max-width: 520px;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20px 24px;
|
|
border-bottom: 1px solid var(--color-hairline);
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
color: var(--color-ink);
|
|
margin: 0;
|
|
}
|
|
|
|
.modal-close-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
border: none;
|
|
background: transparent;
|
|
border-radius: 6px;
|
|
color: var(--color-muted);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.modal-close-btn:hover {
|
|
background: var(--color-surface-soft);
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.modal-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
padding: 16px 24px;
|
|
border-top: 1px solid var(--color-hairline);
|
|
background: var(--color-surface-soft);
|
|
border-radius: 0 0 12px 12px;
|
|
}
|
|
|
|
.error-alert {
|
|
padding: 12px 16px;
|
|
background: rgba(198, 69, 69, 0.08);
|
|
color: var(--color-error);
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.form-group-grow {
|
|
flex: 1;
|
|
}
|
|
|
|
.form-group-sm {
|
|
width: 100px;
|
|
}
|
|
|
|
.form-label {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--color-body-strong);
|
|
}
|
|
|
|
.form-label-sm {
|
|
font-size: 12px;
|
|
color: var(--color-muted);
|
|
}
|
|
|
|
.form-input,
|
|
.form-select,
|
|
.form-textarea {
|
|
width: 100%;
|
|
padding: 10px 14px;
|
|
font-size: 14px;
|
|
color: var(--color-ink);
|
|
background: var(--color-canvas);
|
|
border: 1px solid var(--color-hairline);
|
|
border-radius: 8px;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.form-input:focus,
|
|
.form-select:focus,
|
|
.form-textarea:focus {
|
|
outline: none;
|
|
border-color: var(--color-primary);
|
|
box-shadow: 0 0 0 3px rgba(204, 120, 92, 0.15);
|
|
}
|
|
|
|
.form-input-mono {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.form-select {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.form-textarea {
|
|
resize: vertical;
|
|
min-height: 80px;
|
|
}
|
|
|
|
.form-row {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.form-row-3 {
|
|
gap: 12px;
|
|
}
|
|
|
|
.form-row-3 .form-group {
|
|
flex: 1;
|
|
}
|
|
|
|
.cron-presets {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.cron-preset-btn {
|
|
padding: 4px 10px;
|
|
font-size: 12px;
|
|
color: var(--color-muted);
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.cron-preset-btn:hover {
|
|
background: var(--color-surface-soft);
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.advanced-section {
|
|
border: 1px solid var(--color-hairline);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.advanced-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
padding: 12px 16px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--color-body-strong);
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: background 0.15s ease;
|
|
}
|
|
|
|
.advanced-toggle:hover {
|
|
background: var(--color-surface-soft);
|
|
}
|
|
|
|
.advanced-toggle svg {
|
|
color: var(--color-muted);
|
|
}
|
|
|
|
.advanced-content {
|
|
padding: 16px;
|
|
border-top: 1px solid var(--color-hairline);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.checkbox-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.checkbox-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 14px;
|
|
color: var(--color-body);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.form-checkbox {
|
|
width: 16px;
|
|
height: 16px;
|
|
accent-color: var(--color-primary);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-secondary {
|
|
padding: 10px 16px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--color-body-strong);
|
|
background: var(--color-canvas);
|
|
border: 1px solid var(--color-hairline);
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--color-surface-soft);
|
|
border-color: var(--color-hairline-soft);
|
|
}
|
|
|
|
.btn-primary {
|
|
padding: 10px 16px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--color-on-primary);
|
|
background: var(--color-primary);
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: background 0.15s ease;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--color-primary-active);
|
|
}
|
|
|
|
.btn-primary:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
</style>
|