1213 lines
37 KiB
TypeScript
1213 lines
37 KiB
TypeScript
import { zodResolver } from '@hookform/resolvers/zod'
|
||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||
import {
|
||
Button,
|
||
Checkbox,
|
||
FormField,
|
||
Icon,
|
||
Input,
|
||
Modal,
|
||
Notice,
|
||
PasswordInput,
|
||
Select,
|
||
Spinner,
|
||
Text,
|
||
Textarea,
|
||
TextButton,
|
||
toast,
|
||
} from '@stash/ui'
|
||
import { useEffect, useRef, useState, type ReactNode } from 'react'
|
||
import {
|
||
Controller,
|
||
type FieldPath,
|
||
type UseFormRegister,
|
||
useFieldArray,
|
||
useForm,
|
||
} from 'react-hook-form'
|
||
import {
|
||
ApiRequestError,
|
||
createPythonVenv,
|
||
previewCron,
|
||
probePythonVenv,
|
||
type Task,
|
||
type VenvProbeResponse,
|
||
} from '../api/client'
|
||
import { DirectoryPickerDialog } from './DirectoryPickerDialog'
|
||
import {
|
||
createEmptyTaskFormValues,
|
||
mapServerFieldToFormField,
|
||
SCRIPT_LANGUAGE_META,
|
||
taskFormSchema,
|
||
taskToFormValues,
|
||
type KeyValueFormValue,
|
||
type ScriptLanguage,
|
||
type TaskFormValues,
|
||
} from '../lib/taskForm'
|
||
import { useDebouncedValue } from '../lib/useDebouncedValue'
|
||
|
||
interface TaskEditorModalProps {
|
||
open: boolean
|
||
task: Task | null
|
||
saving: boolean
|
||
onClose: () => void
|
||
onSubmit: (values: TaskFormValues) => Promise<void>
|
||
}
|
||
|
||
const ACTION_TYPE_OPTIONS = [
|
||
{ value: 'script', label: '执行脚本' },
|
||
{ value: 'http', label: '发起 HTTP 请求' },
|
||
{ value: 'process', label: '运行二进制程序' },
|
||
]
|
||
|
||
const SCRIPT_LANGUAGE_OPTIONS = (
|
||
Object.entries(SCRIPT_LANGUAGE_META) as Array<
|
||
[ScriptLanguage, (typeof SCRIPT_LANGUAGE_META)[ScriptLanguage]]
|
||
>
|
||
).map(([value, meta]) => ({ value, label: meta.label }))
|
||
|
||
const HTTP_METHOD_OPTIONS = [
|
||
{ value: 'GET', label: 'GET' },
|
||
{ value: 'POST', label: 'POST' },
|
||
]
|
||
|
||
const TIMEZONE_OPTIONS = ['Asia/Shanghai']
|
||
|
||
const CRON_PREVIEW_COUNTS = [3, 5, 8, 10]
|
||
|
||
/**
|
||
* 任务编辑器。
|
||
*
|
||
* 外壳是组件库的 `Modal`（原生 dialog：焦点陷阱、Esc、背景 inert），
|
||
* 字段排版用 `FormField`，控件用 `Input` / `Select` / `Textarea` / `Checkbox`，
|
||
* 这里只保留校验（react-hook-form + zod）与业务联动。
|
||
*/
|
||
export function TaskEditorModal({
|
||
open,
|
||
task,
|
||
saving,
|
||
onClose,
|
||
onSubmit,
|
||
}: TaskEditorModalProps) {
|
||
const [submitError, setSubmitError] = useState<string | null>(null)
|
||
const [cronPreviewCount, setCronPreviewCount] = useState(5)
|
||
const [pickerOpen, setPickerOpen] = useState(false)
|
||
const queryClient = useQueryClient()
|
||
// 记录「自动填入」的虚拟环境目录：用户手动改过就不再覆盖；
|
||
// 工作目录变化时只有仍等于该值的字段会被清掉，交给新目录重新探测。
|
||
const autoVenvRef = useRef('')
|
||
const {
|
||
register,
|
||
control,
|
||
getValues,
|
||
handleSubmit,
|
||
reset,
|
||
watch,
|
||
setError,
|
||
setValue,
|
||
formState: { errors },
|
||
} = useForm<TaskFormValues>({
|
||
resolver: zodResolver(taskFormSchema),
|
||
defaultValues: createEmptyTaskFormValues(),
|
||
// 长表单在 blur 时插错误行会让下面所有控件瞬间位移，刚点下去的按钮
|
||
// 可能在 mouseup 前被挪走（下拉框会「点了没反应」）。改为提交时校验，
|
||
// 提交后仍按 onChange 实时修正。
|
||
mode: 'onSubmit',
|
||
})
|
||
const actionType = watch('actionType')
|
||
const cronValue = watch('cron')
|
||
const timezoneValue = watch('timezone')
|
||
const scriptPreview = watch('script')
|
||
const scriptLanguage = scriptPreview.language
|
||
const scriptMeta = SCRIPT_LANGUAGE_META[scriptLanguage]
|
||
const isPythonScript = scriptLanguage === 'python'
|
||
// 当前只开放 Asia/Shanghai；编辑旧任务时把它已有的时区也保留成一个选项，
|
||
// 避免下拉显示成空值。
|
||
const timezoneOptions = Array.from(
|
||
new Set(timezoneValue ? [...TIMEZONE_OPTIONS, timezoneValue] : TIMEZONE_OPTIONS),
|
||
).map((zone) => ({ value: zone, label: zone }))
|
||
const debouncedCron = useDebouncedValue(cronValue, 300)
|
||
const debouncedTimezone = useDebouncedValue(timezoneValue, 300)
|
||
const debouncedWorkingDir = useDebouncedValue(
|
||
scriptPreview.working_dir ?? '',
|
||
350,
|
||
)
|
||
const debouncedInterpreter = useDebouncedValue(
|
||
scriptPreview.interpreter ?? '',
|
||
350,
|
||
)
|
||
const debouncedVenv = useDebouncedValue(scriptPreview.venv ?? '', 350)
|
||
// 切换工作目录时会同步清掉自动填入的 venv；如果实时值已经为空，
|
||
// 探测必须立刻当作没有 venv，不能继续用防抖中的旧值，
|
||
// 否则会先报“缺少 pyvenv.cfg”，再跳到“未检测到虚拟环境”。
|
||
const probeVenv = scriptPreview.venv.trim() ? debouncedVenv : ''
|
||
const cronPreview = useQuery({
|
||
queryKey: [
|
||
'cron-preview',
|
||
debouncedCron,
|
||
debouncedTimezone,
|
||
cronPreviewCount,
|
||
],
|
||
queryFn: ({ signal }) =>
|
||
previewCron(
|
||
{
|
||
expression: debouncedCron,
|
||
timezone: debouncedTimezone,
|
||
count: cronPreviewCount,
|
||
},
|
||
signal,
|
||
),
|
||
enabled:
|
||
open &&
|
||
Boolean(debouncedCron.trim()) &&
|
||
Boolean(debouncedTimezone.trim()),
|
||
retry: false,
|
||
})
|
||
const applyScriptLanguage = (language: ScriptLanguage) => {
|
||
const meta = SCRIPT_LANGUAGE_META[language]
|
||
const currentScript = getValues('script.script').trim()
|
||
const knownDefaults = Object.values(SCRIPT_LANGUAGE_META).map(
|
||
(item) => item.defaultScript,
|
||
)
|
||
setValue('script.language', language, {
|
||
shouldDirty: true,
|
||
shouldValidate: true,
|
||
})
|
||
setValue('script.interpreter', meta.defaultInterpreter, {
|
||
shouldDirty: true,
|
||
shouldValidate: true,
|
||
})
|
||
if (!currentScript || knownDefaults.includes(currentScript)) {
|
||
setValue('script.script', meta.defaultScript, {
|
||
shouldDirty: true,
|
||
shouldValidate: true,
|
||
})
|
||
}
|
||
if (language !== 'python') {
|
||
setValue('script.venv', '', {
|
||
shouldDirty: true,
|
||
shouldValidate: true,
|
||
})
|
||
autoVenvRef.current = ''
|
||
}
|
||
}
|
||
|
||
const clearAutoVenv = () => {
|
||
if (
|
||
autoVenvRef.current &&
|
||
getValues('script.venv').trim() === autoVenvRef.current
|
||
) {
|
||
setValue('script.venv', '', { shouldDirty: false })
|
||
autoVenvRef.current = ''
|
||
}
|
||
}
|
||
|
||
const workingDirField = register('script.working_dir')
|
||
|
||
const venvProbe = useQuery({
|
||
queryKey: [
|
||
'python-venv',
|
||
debouncedWorkingDir,
|
||
debouncedInterpreter,
|
||
probeVenv,
|
||
scriptLanguage,
|
||
],
|
||
queryFn: ({ signal }) =>
|
||
probePythonVenv(
|
||
{
|
||
working_dir: debouncedWorkingDir,
|
||
interpreter: debouncedInterpreter.trim() || 'python.exe',
|
||
venv: probeVenv.trim() || null,
|
||
},
|
||
signal,
|
||
),
|
||
enabled:
|
||
open &&
|
||
actionType === 'script' &&
|
||
isPythonScript &&
|
||
Boolean(debouncedWorkingDir.trim()),
|
||
retry: false,
|
||
staleTime: 15_000,
|
||
})
|
||
const createVenvMutation = useMutation({
|
||
mutationFn: (workingDir: string) =>
|
||
createPythonVenv({ working_dir: workingDir }),
|
||
onSuccess: (probe, workingDir) => {
|
||
toast.success('虚拟环境已创建')
|
||
if (probe.venv_path) {
|
||
const value = venvFieldValue(workingDir, probe.venv_path)
|
||
autoVenvRef.current = value
|
||
setValue('script.venv', value, {
|
||
shouldDirty: true,
|
||
shouldValidate: true,
|
||
})
|
||
}
|
||
void queryClient.invalidateQueries({ queryKey: ['python-venv'] })
|
||
},
|
||
onError: (error) => toast.error(error.message),
|
||
})
|
||
const linkedVenv =
|
||
isPythonScript && venvProbe.data?.status === 'linked'
|
||
? venvProbe.data
|
||
: null
|
||
const previewVirtualEnv = isPythonScript
|
||
? scriptPreview.venv.trim() || linkedVenv?.venv_path || ''
|
||
: ''
|
||
const previewInterpreter = isPythonScript
|
||
? (linkedVenv?.display_path ?? null)
|
||
: null
|
||
|
||
const scriptArgs = useFieldArray({ control, name: 'script.args' })
|
||
const scriptEnv = useFieldArray({ control, name: 'script.env' })
|
||
const httpHeaders = useFieldArray({ control, name: 'http.headers' })
|
||
const processArgs = useFieldArray({ control, name: 'process.args' })
|
||
const processEnv = useFieldArray({ control, name: 'process.env' })
|
||
|
||
useEffect(() => {
|
||
if (!open) {
|
||
return
|
||
}
|
||
reset(task ? taskToFormValues(task) : createEmptyTaskFormValues())
|
||
setCronPreviewCount(5)
|
||
setSubmitError(null)
|
||
setPickerOpen(false)
|
||
autoVenvRef.current = ''
|
||
}, [open, reset, task])
|
||
|
||
// 换工作目录时清掉上一轮自动填入的值（手动填写的值不动）。
|
||
useEffect(() => {
|
||
if (!open) {
|
||
return
|
||
}
|
||
if (
|
||
autoVenvRef.current &&
|
||
getValues('script.venv').trim() === autoVenvRef.current
|
||
) {
|
||
setValue('script.venv', '', { shouldDirty: false })
|
||
autoVenvRef.current = ''
|
||
}
|
||
}, [debouncedWorkingDir, getValues, open, setValue])
|
||
|
||
// 探测到虚拟环境就自动填进「虚拟环境目录」，但用户自己改过就保留用户的值。
|
||
useEffect(() => {
|
||
if (!open || !isPythonScript) {
|
||
return
|
||
}
|
||
const probe = venvProbe.data
|
||
if (!probe || probe.status !== 'linked' || !probe.venv_path) {
|
||
return
|
||
}
|
||
// 工作目录还在防抖中时，旧查询结果不能回填到新目录。
|
||
if (debouncedWorkingDir !== scriptPreview.working_dir.trim()) {
|
||
return
|
||
}
|
||
const current = getValues('script.venv').trim()
|
||
// 防抖中的输入可能还没落到查询键上：只有「当前输入」与「本次探测用的输入」
|
||
// 一致时才回填，否则工作目录刚变化时可能把上一轮探测结果又填回去。
|
||
if (debouncedVenv.trim() !== current) {
|
||
return
|
||
}
|
||
if (current && current !== autoVenvRef.current) {
|
||
return
|
||
}
|
||
if (current !== '' && current === autoVenvRef.current) {
|
||
return
|
||
}
|
||
const next = venvFieldValue(debouncedWorkingDir, probe.venv_path)
|
||
autoVenvRef.current = next
|
||
setValue('script.venv', next, {
|
||
shouldDirty: true,
|
||
shouldValidate: true,
|
||
})
|
||
}, [debouncedVenv, debouncedWorkingDir, getValues, isPythonScript, open, scriptPreview.working_dir, setValue, venvProbe.data])
|
||
|
||
// 打开后把焦点给第一个可编辑字段：新建时是任务标识，编辑时 ID 已锁定，跳名称。
|
||
// 原生 dialog 默认聚焦关闭按钮，不符合编辑表单的节奏。
|
||
useEffect(() => {
|
||
if (!open) {
|
||
return
|
||
}
|
||
document.getElementById(task ? 'task-name' : 'task-id')?.focus()
|
||
}, [open, task])
|
||
|
||
const requestClose = () => {
|
||
if (!saving) {
|
||
onClose()
|
||
}
|
||
}
|
||
|
||
const submit = handleSubmit(async (values) => {
|
||
setSubmitError(null)
|
||
try {
|
||
await onSubmit(values)
|
||
} catch (error) {
|
||
if (error instanceof ApiRequestError && error.field) {
|
||
const formField = mapServerFieldToFormField(error.field, values.actionType)
|
||
if (formField) {
|
||
setError(formField as FieldPath<TaskFormValues>, {
|
||
type: 'server',
|
||
message: error.message,
|
||
})
|
||
return
|
||
}
|
||
}
|
||
setSubmitError(
|
||
error instanceof Error ? error.message : '保存任务时发生未知错误',
|
||
)
|
||
}
|
||
})
|
||
|
||
return (
|
||
<Modal
|
||
open={open}
|
||
onClose={requestClose}
|
||
title={task ? `编辑任务 [${task.id}]` : '新建定时任务'}
|
||
size="lg"
|
||
className="task-editor-modal"
|
||
closeOnOverlay={!saving}
|
||
footer={
|
||
<>
|
||
<Button variant="secondary" onClick={requestClose} disabled={saving}>
|
||
取消
|
||
</Button>
|
||
<Button type="submit" form="task-editor-form" loading={saving}>
|
||
{task ? '保存修改' : '保存并热刷新'}
|
||
</Button>
|
||
</>
|
||
}
|
||
>
|
||
<form
|
||
id="task-editor-form"
|
||
className="task-editor-form"
|
||
onSubmit={submit}
|
||
noValidate
|
||
>
|
||
{submitError ? (
|
||
<Notice tone="error" title="保存失败">
|
||
{submitError}
|
||
</Notice>
|
||
) : null}
|
||
|
||
<div className="form-grid">
|
||
<FormField
|
||
label="任务标识 (Task ID)"
|
||
htmlFor="task-id"
|
||
error={errors.id?.message}
|
||
>
|
||
<Input
|
||
id="task-id"
|
||
{...register('id')}
|
||
className="mono-input"
|
||
placeholder="例如：sync_data"
|
||
disabled={Boolean(task)}
|
||
aria-invalid={Boolean(errors.id)}
|
||
/>
|
||
</FormField>
|
||
<FormField label="名称" htmlFor="task-name" error={errors.name?.message}>
|
||
<Input
|
||
id="task-name"
|
||
{...register('name')}
|
||
placeholder="业务可读名称"
|
||
aria-invalid={Boolean(errors.name)}
|
||
/>
|
||
</FormField>
|
||
</div>
|
||
|
||
<div className="form-grid">
|
||
<FormField
|
||
label="Cron 表达式"
|
||
htmlFor="task-cron"
|
||
error={errors.cron?.message}
|
||
hint={
|
||
errors.cron
|
||
? undefined
|
||
: '支持 5/6 位字段及 @daily、@hourly'
|
||
}
|
||
>
|
||
<Input
|
||
id="task-cron"
|
||
{...register('cron')}
|
||
className="mono-input"
|
||
placeholder="0 0 2 * * *"
|
||
aria-invalid={Boolean(errors.cron) || cronPreview.isError}
|
||
/>
|
||
</FormField>
|
||
|
||
<FormField
|
||
label="超时时间 (秒)"
|
||
htmlFor="task-timeout"
|
||
error={errors.timeout_secs?.message}
|
||
hint={
|
||
errors.timeout_secs
|
||
? undefined
|
||
: '超时后将被 Windows Job Object 强制终止'
|
||
}
|
||
>
|
||
<Input
|
||
id="task-timeout"
|
||
type="number"
|
||
min={1}
|
||
max={86_400}
|
||
{...register('timeout_secs', { valueAsNumber: true })}
|
||
className="mono-input"
|
||
aria-invalid={Boolean(errors.timeout_secs)}
|
||
/>
|
||
</FormField>
|
||
</div>
|
||
|
||
<section
|
||
className="cron-preview-panel"
|
||
aria-label="未来运行时间"
|
||
aria-live="polite"
|
||
>
|
||
<div className="cron-preview-head">
|
||
<div className="cron-preview-title">
|
||
<Text strong size="sm">
|
||
未来运行时间
|
||
</Text>
|
||
<Text size="xs" tone="muted">
|
||
按当前 Cron 与时区实时计算
|
||
</Text>
|
||
</div>
|
||
<div className="cron-preview-actions">
|
||
<Text size="xs" tone="muted">
|
||
预览
|
||
</Text>
|
||
<Select
|
||
className="cron-count-select"
|
||
options={CRON_PREVIEW_COUNTS.map((count) => ({
|
||
value: String(count),
|
||
label: `${count} 次`,
|
||
}))}
|
||
value={String(cronPreviewCount)}
|
||
onChange={(value) => setCronPreviewCount(Number(value))}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{cronPreview.isFetching ? (
|
||
<div className="cron-preview-status">
|
||
<Spinner size="sm" label="正在计算" />
|
||
<Text size="sm" tone="sub">
|
||
正在计算...
|
||
</Text>
|
||
</div>
|
||
) : cronPreview.isError ? (
|
||
<div className="cron-preview-error">
|
||
<Icon name="warning_line" />
|
||
<span>
|
||
{cronPreview.error instanceof ApiRequestError
|
||
? cronPreview.error.message
|
||
: '暂时无法计算运行时间，请稍后重试'}
|
||
</span>
|
||
</div>
|
||
) : cronPreview.data?.runs.length ? (
|
||
<div className="cron-run-grid">
|
||
{cronPreview.data.runs.map((run, index) => (
|
||
<div className="cron-run-item" key={run}>
|
||
<span className="cron-run-index">#{index + 1}</span>
|
||
<span className="cron-run-time">{run}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<Text size="sm" tone="sub">
|
||
等待输入有效 Cron 表达式...
|
||
</Text>
|
||
)}
|
||
</section>
|
||
|
||
<div className="form-grid">
|
||
<FormField label="IANA 时区" error={errors.timezone?.message}>
|
||
<Controller
|
||
control={control}
|
||
name="timezone"
|
||
render={({ field }) => (
|
||
<Select
|
||
className="form-select"
|
||
options={timezoneOptions}
|
||
value={field.value}
|
||
onChange={field.onChange}
|
||
/>
|
||
)}
|
||
/>
|
||
</FormField>
|
||
|
||
<FormField label="任务类型 (Action Type)">
|
||
<Controller
|
||
control={control}
|
||
name="actionType"
|
||
render={({ field }) => (
|
||
<Select
|
||
className="form-select"
|
||
options={ACTION_TYPE_OPTIONS}
|
||
value={field.value}
|
||
onChange={field.onChange}
|
||
/>
|
||
)}
|
||
/>
|
||
</FormField>
|
||
</div>
|
||
|
||
{actionType === 'script' ? (
|
||
<div className="script-language-row">
|
||
<div className="script-language-field">
|
||
<FormField label="脚本语言">
|
||
<Controller
|
||
control={control}
|
||
name="script.language"
|
||
render={({ field }) => (
|
||
<Select
|
||
className="form-select"
|
||
options={SCRIPT_LANGUAGE_OPTIONS}
|
||
value={field.value}
|
||
onChange={(value) =>
|
||
applyScriptLanguage(value as ScriptLanguage)
|
||
}
|
||
/>
|
||
)}
|
||
/>
|
||
</FormField>
|
||
</div>
|
||
<Text className="script-language-hint" size="sm" tone="sub">
|
||
{scriptMeta.hint}
|
||
</Text>
|
||
</div>
|
||
) : null}
|
||
|
||
{actionType === 'script' ? (
|
||
<div className="dynamic-fields">
|
||
<FormField
|
||
label="项目工作目录 (Working Directory)"
|
||
htmlFor="task-working-dir"
|
||
error={errors.script?.working_dir?.message}
|
||
>
|
||
<div className="field-with-action">
|
||
<Input
|
||
id="task-working-dir"
|
||
{...workingDirField}
|
||
onChange={(event) => {
|
||
// 先清掉旧目录自动填入的 venv，再更新工作目录；
|
||
// 这样新目录的第一次探测就不会带着旧 .venv 去报“缺少 pyvenv.cfg”。
|
||
clearAutoVenv()
|
||
void workingDirField.onChange(event)
|
||
}}
|
||
className="mono-input"
|
||
placeholder="D:\Projects\sync"
|
||
aria-invalid={Boolean(errors.script?.working_dir)}
|
||
/>
|
||
<Button
|
||
variant="secondary"
|
||
// 不夺走输入框焦点：否则 blur 校验插入错误行会让表单瞬间下移，
|
||
// 点击可能落到移位后的其它元素上。
|
||
onMouseDown={(event) => event.preventDefault()}
|
||
onClick={() => setPickerOpen(true)}
|
||
>
|
||
选择文件夹…
|
||
</Button>
|
||
</div>
|
||
</FormField>
|
||
|
||
{isPythonScript ? (
|
||
<>
|
||
<FormField
|
||
label="虚拟环境目录"
|
||
htmlFor="task-venv"
|
||
hint="自动探测项目里的 .venv；需要时也可以手动指定。Python 任务始终使用 .venv 里的 Python"
|
||
error={errors.script?.venv?.message}
|
||
>
|
||
<Input
|
||
id="task-venv"
|
||
{...register('script.venv')}
|
||
className="mono-input"
|
||
placeholder="留空自动探测，例如 .venv"
|
||
/>
|
||
</FormField>
|
||
|
||
<VenvDetectorBar
|
||
workingDir={scriptPreview.working_dir}
|
||
probe={venvProbe.data}
|
||
pending={venvProbe.isPending}
|
||
failed={venvProbe.isError}
|
||
creating={createVenvMutation.isPending}
|
||
onCreate={() =>
|
||
createVenvMutation.mutate(scriptPreview.working_dir.trim())
|
||
}
|
||
/>
|
||
</>
|
||
) : null}
|
||
|
||
<FormField
|
||
label={scriptMeta.scriptLabel}
|
||
htmlFor="task-script"
|
||
error={errors.script?.script?.message}
|
||
>
|
||
<Input
|
||
id="task-script"
|
||
{...register('script.script')}
|
||
className="mono-input"
|
||
placeholder={scriptMeta.scriptPlaceholder}
|
||
/>
|
||
</FormField>
|
||
|
||
<div className="collection-header">
|
||
<div>
|
||
<Text strong size="sm">
|
||
运行参数
|
||
</Text>
|
||
<Text size="xs" tone="muted">
|
||
每行一个参数，不经过 Shell 拼接
|
||
</Text>
|
||
</div>
|
||
<Button
|
||
variant="secondary"
|
||
size="sm"
|
||
onClick={() => scriptArgs.append({ key: '', value: '' })}
|
||
>
|
||
+ 添加参数
|
||
</Button>
|
||
</div>
|
||
<div className="collection-list">
|
||
{scriptArgs.fields.map((field, index) => (
|
||
<div className="argument-row" key={field.id}>
|
||
<Input
|
||
{...register(`script.args.${index}.key`)}
|
||
className="mono-input"
|
||
placeholder="参数名 (如 --mode 或 -v)"
|
||
/>
|
||
<Input
|
||
{...register(`script.args.${index}.value`)}
|
||
className="mono-input"
|
||
placeholder="参数值 (可选，无值可留空)"
|
||
/>
|
||
<TextButton
|
||
tone="danger"
|
||
onClick={() => scriptArgs.remove(index)}
|
||
>
|
||
删除
|
||
</TextButton>
|
||
</div>
|
||
))}
|
||
{scriptArgs.fields.length === 0 ? (
|
||
<Text size="sm" tone="muted">
|
||
暂无运行参数
|
||
</Text>
|
||
) : null}
|
||
{errors.script?.args?.message ? (
|
||
<span className="field-error">
|
||
{errors.script.args.message}
|
||
</span>
|
||
) : null}
|
||
</div>
|
||
|
||
<KeyValueEditor
|
||
title="环境变量"
|
||
name="script.env"
|
||
fields={scriptEnv.fields}
|
||
registerField={register}
|
||
error={errors.script?.env?.message}
|
||
onAdd={() => scriptEnv.append({ key: '', value: '' })}
|
||
onRemove={scriptEnv.remove}
|
||
/>
|
||
|
||
<div className="cli-preview">
|
||
<div className="cli-preview-header">
|
||
<span>调用预览 (Runtime Preview)</span>
|
||
<span>Windows 原生环境</span>
|
||
</div>
|
||
<div className="cli-preview-body">
|
||
{previewVirtualEnv ? (
|
||
<div className="cli-line-env">
|
||
set VIRTUAL_ENV={previewVirtualEnv}
|
||
</div>
|
||
) : null}
|
||
{scriptPreview.env
|
||
.filter((item) => item.key.trim())
|
||
.map((item, index) => (
|
||
<div className="cli-line-env" key={`${item.key}-${index}`}>
|
||
set {item.key.trim()}=
|
||
{isSensitiveName(item.key)
|
||
? '[REDACTED]'
|
||
: item.value || '""'}
|
||
</div>
|
||
))}
|
||
<div className="cli-line-cmd">
|
||
{formatScriptCommandPreview(
|
||
scriptPreview,
|
||
previewInterpreter,
|
||
scriptLanguage,
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
|
||
{actionType === 'http' ? (
|
||
<div className="dynamic-fields">
|
||
<div className="form-grid">
|
||
<FormField
|
||
label="请求 URL"
|
||
htmlFor="task-http-url"
|
||
error={errors.http?.url?.message}
|
||
>
|
||
<Input
|
||
id="task-http-url"
|
||
{...register('http.url')}
|
||
className="mono-input"
|
||
placeholder="https://api.example.com/health"
|
||
/>
|
||
</FormField>
|
||
<FormField label="请求方式">
|
||
<Controller
|
||
control={control}
|
||
name="http.method"
|
||
render={({ field }) => (
|
||
<Select
|
||
className="form-select"
|
||
options={HTTP_METHOD_OPTIONS}
|
||
value={field.value}
|
||
onChange={field.onChange}
|
||
/>
|
||
)}
|
||
/>
|
||
</FormField>
|
||
</div>
|
||
<div className="form-grid">
|
||
<FormField
|
||
label="期望状态码"
|
||
htmlFor="task-http-status"
|
||
hint="使用逗号分隔，例如：200, 204"
|
||
error={errors.http?.expected_status?.message}
|
||
>
|
||
<Input
|
||
id="task-http-status"
|
||
{...register('http.expected_status')}
|
||
className="mono-input"
|
||
placeholder="200"
|
||
/>
|
||
</FormField>
|
||
<FormField
|
||
label="JSON Body"
|
||
htmlFor="task-http-body"
|
||
error={errors.http?.body?.message}
|
||
>
|
||
<Textarea
|
||
id="task-http-body"
|
||
{...register('http.body')}
|
||
rows={4}
|
||
className="mono-input"
|
||
placeholder='{"trigger":"manual"}'
|
||
/>
|
||
</FormField>
|
||
</div>
|
||
<KeyValueEditor
|
||
title="请求 Header"
|
||
name="http.headers"
|
||
fields={httpHeaders.fields}
|
||
registerField={register}
|
||
error={errors.http?.headers?.message}
|
||
onAdd={() => httpHeaders.append({ key: '', value: '' })}
|
||
onRemove={httpHeaders.remove}
|
||
/>
|
||
</div>
|
||
) : null}
|
||
|
||
{actionType === 'process' ? (
|
||
<div className="dynamic-fields">
|
||
<div className="form-grid">
|
||
<FormField
|
||
label="可执行程序"
|
||
htmlFor="task-process-exe"
|
||
error={errors.process?.executable?.message}
|
||
>
|
||
<Input
|
||
id="task-process-exe"
|
||
{...register('process.executable')}
|
||
className="mono-input"
|
||
placeholder="C:\Tools\exporter.exe"
|
||
/>
|
||
</FormField>
|
||
<FormField label="工作目录" htmlFor="task-process-dir">
|
||
<Input
|
||
id="task-process-dir"
|
||
{...register('process.working_dir')}
|
||
className="mono-input"
|
||
placeholder="可选"
|
||
/>
|
||
</FormField>
|
||
</div>
|
||
<div className="collection-header">
|
||
<div>
|
||
<Text strong size="sm">
|
||
启动参数
|
||
</Text>
|
||
<Text size="xs" tone="muted">
|
||
每行一个参数
|
||
</Text>
|
||
</div>
|
||
<Button
|
||
variant="secondary"
|
||
size="sm"
|
||
onClick={() => processArgs.append({ key: '', value: '' })}
|
||
>
|
||
+ 添加参数
|
||
</Button>
|
||
</div>
|
||
<div className="collection-list">
|
||
{processArgs.fields.map((field, index) => (
|
||
<div className="argument-row" key={field.id}>
|
||
<Input
|
||
{...register(`process.args.${index}.key`)}
|
||
className="mono-input"
|
||
placeholder="参数名 (如 --port)"
|
||
/>
|
||
<Input
|
||
{...register(`process.args.${index}.value`)}
|
||
className="mono-input"
|
||
placeholder="参数值 (可选)"
|
||
/>
|
||
<TextButton
|
||
tone="danger"
|
||
onClick={() => processArgs.remove(index)}
|
||
>
|
||
删除
|
||
</TextButton>
|
||
</div>
|
||
))}
|
||
{processArgs.fields.length === 0 ? (
|
||
<Text size="sm" tone="muted">
|
||
暂无启动参数
|
||
</Text>
|
||
) : null}
|
||
{errors.process?.args?.message ? (
|
||
<span className="field-error">
|
||
{errors.process.args.message}
|
||
</span>
|
||
) : null}
|
||
</div>
|
||
<KeyValueEditor
|
||
title="环境变量"
|
||
name="process.env"
|
||
fields={processEnv.fields}
|
||
registerField={register}
|
||
error={errors.process?.env?.message}
|
||
onAdd={() => processEnv.append({ key: '', value: '' })}
|
||
onRemove={processEnv.remove}
|
||
/>
|
||
</div>
|
||
) : null}
|
||
|
||
<Controller
|
||
control={control}
|
||
name="enabled"
|
||
render={({ field }) => (
|
||
<Checkbox
|
||
className="form-toggle"
|
||
checked={field.value}
|
||
onChange={field.onChange}
|
||
label={
|
||
<span className="form-toggle-copy">
|
||
<Text strong size="sm">
|
||
立即激活此任务调度
|
||
</Text>
|
||
<Text size="xs" tone="muted">
|
||
保存后立即注册到 Cron 调度器
|
||
</Text>
|
||
</span>
|
||
}
|
||
/>
|
||
)}
|
||
/>
|
||
</form>
|
||
|
||
<DirectoryPickerDialog
|
||
open={pickerOpen}
|
||
initialPath={scriptPreview.working_dir}
|
||
onSelect={(path) => {
|
||
clearAutoVenv()
|
||
setValue('script.working_dir', path, {
|
||
shouldDirty: true,
|
||
shouldValidate: true,
|
||
})
|
||
}}
|
||
onClose={() => setPickerOpen(false)}
|
||
/>
|
||
</Modal>
|
||
)
|
||
}
|
||
|
||
function formatArgumentPreview(argumentsList: KeyValueFormValue[]): string {
|
||
const values = argumentsList.flatMap(({ key, value }) => {
|
||
const argument = key.trim()
|
||
const argumentValue = value.trim()
|
||
return [
|
||
argument,
|
||
argumentValue.includes(' ') ? `"${argumentValue}"` : argumentValue,
|
||
].filter(Boolean)
|
||
})
|
||
return values.length ? ` ${values.join(' ')}` : ''
|
||
}
|
||
|
||
/**
|
||
* 探测结果给的是绝对路径；虚拟环境位于工作目录内时写成相对路径，
|
||
* 任务搬家后仍然可用（与手填 `.venv` 的语义一致）。
|
||
*/
|
||
function venvFieldValue(workingDir: string, venvPath: string): string {
|
||
const base = workingDir.trim().replace(/[\\/]+$/, '')
|
||
const path = venvPath.trim()
|
||
if (!base || !path) {
|
||
return path
|
||
}
|
||
const normalizedBase = base.toLowerCase()
|
||
const normalizedPath = path.toLowerCase()
|
||
if (normalizedPath === normalizedBase) {
|
||
return '.'
|
||
}
|
||
if (
|
||
normalizedPath.startsWith(`${normalizedBase}\\`) ||
|
||
normalizedPath.startsWith(`${normalizedBase}/`)
|
||
) {
|
||
return path.slice(base.length + 1).replace(/\//g, '\\')
|
||
}
|
||
return path
|
||
}
|
||
|
||
function formatInterpreterPreview(
|
||
script: TaskFormValues['script'],
|
||
linkedPythonPath: string | null | undefined,
|
||
language: ScriptLanguage,
|
||
): string {
|
||
if (language === 'python' && script.venv.trim()) {
|
||
return `${script.venv.trim().replace(/[\\/]+$/, '')}\\Scripts\\python.exe`
|
||
}
|
||
if (linkedPythonPath) {
|
||
return linkedPythonPath
|
||
}
|
||
if (script.interpreter.trim()) {
|
||
return script.interpreter.trim()
|
||
}
|
||
return language === 'python'
|
||
? 'python.exe'
|
||
: SCRIPT_LANGUAGE_META[language].defaultInterpreter
|
||
}
|
||
|
||
function isCmdInterpreter(interpreter: string): boolean {
|
||
return (
|
||
interpreter
|
||
.trim()
|
||
.split(/[\\/]/)
|
||
.pop()
|
||
?.toLowerCase()
|
||
.replace(/\.exe$/, '') === 'cmd'
|
||
)
|
||
}
|
||
|
||
function formatScriptCommandPreview(
|
||
script: TaskFormValues['script'],
|
||
linkedPythonPath: string | null | undefined,
|
||
language: ScriptLanguage,
|
||
): string {
|
||
const interpreter = formatInterpreterPreview(
|
||
script,
|
||
linkedPythonPath,
|
||
language,
|
||
)
|
||
const file =
|
||
script.script.trim() || SCRIPT_LANGUAGE_META[language].defaultScript
|
||
const cmdPrefix =
|
||
language === 'shell' &&
|
||
isCmdInterpreter(script.interpreter) &&
|
||
!file.startsWith('/')
|
||
? '/C '
|
||
: ''
|
||
return `${interpreter} ${cmdPrefix}${file}${formatArgumentPreview(script.args)}`
|
||
}
|
||
|
||
interface VenvDetectorBarProps {
|
||
workingDir: string
|
||
probe: VenvProbeResponse | undefined
|
||
pending: boolean
|
||
failed: boolean
|
||
creating: boolean
|
||
onCreate: () => void
|
||
}
|
||
|
||
function VenvDetectorBar({
|
||
workingDir,
|
||
probe,
|
||
pending,
|
||
failed,
|
||
creating,
|
||
onCreate,
|
||
}: VenvDetectorBarProps) {
|
||
if (!workingDir.trim()) {
|
||
return (
|
||
<div className="env-detector-bar" role="status">
|
||
<span className="env-detector-hint">填写工作目录后自动检测环境</span>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
if (pending) {
|
||
return (
|
||
<div className="env-detector-bar" role="status">
|
||
<span className="env-status-badge pending">⏳ 正在探测解释器...</span>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
if (failed || !probe) {
|
||
return (
|
||
<div className="env-detector-bar" role="status">
|
||
<span className="env-status-badge warn">● 环境探测失败，可稍后重试</span>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
if (probe.status === 'linked') {
|
||
return (
|
||
<div className="env-detector-bar" role="status">
|
||
<span className="env-status-badge ok">
|
||
● 已关联虚拟环境: <code>{probe.display_path}</code>
|
||
</span>
|
||
<span className="env-detector-hint">
|
||
Rust 自动前置 PATH 及 VIRTUAL_ENV
|
||
</span>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
if (probe.status === 'not_applicable') {
|
||
const label =
|
||
probe.interpreter_kind === 'node' ? '识别为 Node.js' : '使用指定解释器'
|
||
return (
|
||
<div className="env-detector-bar" role="status">
|
||
<span className="env-status-badge ok">
|
||
● {label}: <code>{probe.display_path}</code>
|
||
</span>
|
||
<span className="env-detector-hint">{probe.message}</span>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
if (probe.status === 'missing') {
|
||
if (probe.can_create) {
|
||
return (
|
||
<div className="env-detector-bar" role="status">
|
||
<div className="env-detector-message">
|
||
<span className="env-status-badge warn">● {probe.message}</span>
|
||
<span className="env-detector-hint">
|
||
{probe.has_pyproject
|
||
? 'pyproject.toml'
|
||
: probe.requirements_files.join(' · ')}
|
||
</span>
|
||
</div>
|
||
<Button
|
||
size="sm"
|
||
variant="secondary"
|
||
loading={creating}
|
||
onClick={onCreate}
|
||
>
|
||
用 uv 创建环境
|
||
</Button>
|
||
</div>
|
||
)
|
||
}
|
||
return (
|
||
<div className="env-detector-bar" role="status">
|
||
<span className="env-status-badge danger">● {probe.message}</span>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="env-detector-bar" role="status">
|
||
<span className="env-status-badge warn">● {probe.message}</span>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function isSensitiveName(name: string): boolean {
|
||
const normalized = name.toUpperCase()
|
||
return [
|
||
'SECRET',
|
||
'TOKEN',
|
||
'PASSWORD',
|
||
'PASS',
|
||
'API_KEY',
|
||
'PRIVATE_KEY',
|
||
'CREDENTIAL',
|
||
'AUTHORIZATION',
|
||
'AUTH',
|
||
].some((marker) => normalized.includes(marker))
|
||
}
|
||
|
||
interface KeyValueEditorProps {
|
||
title: string
|
||
name: 'script.env' | 'http.headers' | 'process.env'
|
||
fields: Array<{ id: string; key: string; value: string }>
|
||
registerField: UseFormRegister<TaskFormValues>
|
||
onAdd: () => void
|
||
onRemove: (index: number) => void
|
||
error?: ReactNode
|
||
}
|
||
|
||
function KeyValueEditor({
|
||
title,
|
||
name,
|
||
fields,
|
||
registerField,
|
||
onAdd,
|
||
onRemove,
|
||
error,
|
||
}: KeyValueEditorProps) {
|
||
return (
|
||
<div className="key-value-editor">
|
||
<div className="collection-header">
|
||
<div>
|
||
<Text strong size="sm">
|
||
{title}
|
||
</Text>
|
||
<Text size="xs" tone="muted">
|
||
名称和值会原样提交给后端
|
||
</Text>
|
||
</div>
|
||
<Button variant="secondary" size="sm" onClick={onAdd}>
|
||
+ 添加
|
||
</Button>
|
||
</div>
|
||
<div className="collection-list">
|
||
{fields.map((field, index) => (
|
||
<div className="key-value-row" key={field.id}>
|
||
<Input
|
||
{...registerField(
|
||
`${name}.${index}.key` as FieldPath<TaskFormValues>,
|
||
)}
|
||
className="mono-input"
|
||
placeholder="名称"
|
||
/>
|
||
<PasswordInput
|
||
{...registerField(
|
||
`${name}.${index}.value` as FieldPath<TaskFormValues>,
|
||
)}
|
||
icon={null}
|
||
className="mono-input"
|
||
placeholder="值"
|
||
autoComplete="off"
|
||
/>
|
||
<TextButton tone="danger" onClick={() => onRemove(index)}>
|
||
删除
|
||
</TextButton>
|
||
</div>
|
||
))}
|
||
{fields.length === 0 ? (
|
||
<Text size="sm" tone="muted">
|
||
暂无配置
|
||
</Text>
|
||
) : null}
|
||
{error ? <span className="field-error">{error}</span> : null}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|