fix(web): map selected files to file-type params and hide auto-injected params

File/directory type app parameters now show the associated file name instead of
a disabled input. WORK_DIR is hidden from the form as it is auto-injected by the
backend. Selected files are mapped to file params via fileParamMapping on submit.

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
dailz
2026-04-20 13:41:37 +08:00
parent 08ca4da691
commit 22963d0e6f

View File

@@ -34,7 +34,7 @@
<template v-if="selectedApp">
<el-form-item
v-for="param in (selectedApp.parameters || [])"
v-for="param in visibleParams"
:key="param.name"
:label="param.label || param.name"
>
@@ -57,7 +57,13 @@
@update:model-value="(val: string | number | boolean) => { values[param.name] = String(val) }"
/>
<el-input v-else-if="param.type === 'file' || param.type === 'directory'" disabled placeholder="文件选择功能开发中" />
<template v-else-if="param.type === 'file' || param.type === 'directory'">
<div v-if="getFileForParam(param)" style="display: flex; align-items: center; gap: 8px">
<el-tag>{{ getFileForParam(param).name }}</el-tag>
<span style="color: #909399; font-size: 12px">ID: {{ getFileForParam(param).id }}</span>
</div>
<span v-else style="color: #909399; font-size: 13px">请通过上方"关联文件"选择</span>
</template>
</el-form-item>
</template>
@@ -115,6 +121,33 @@ const showFilePicker = ref(false)
const selectedApp = computed(() => appList.value.find(a => a.id === selectedAppId.value))
const autoParams = new Set(['WORK_DIR'])
const visibleParams = computed(() =>
(selectedApp.value?.parameters || []).filter((p: any) => !autoParams.has(p.name))
)
const fileParams = computed(() =>
(selectedApp.value?.parameters || []).filter(
(p: any) => p.type === 'file' || p.type === 'directory'
)
)
const fileParamMapping = computed(() => {
const mapping: Record<string, string> = {}
fileParams.value.forEach((p: any, i: number) => {
if (selectedFiles.value[i]) {
mapping[p.name] = String(selectedFiles.value[i].id)
}
})
return mapping
})
const getFileForParam = (param: any) => {
const index = fileParams.value.findIndex((p: any) => p.name === param.name)
return selectedFiles.value[index]
}
watch(selectedAppId, () => { values.value = {} })
onMounted(async () => {
@@ -131,7 +164,8 @@ const handleSubmit = async () => {
submitting.value = true
try {
const taskName = form.task_name.trim() || `task_${selectedAppId.value}_${Date.now()}`
const resp = await createTask({ ...form, task_name: taskName, job_name: taskName, app_id: selectedAppId.value, values: values.value, file_ids: selectedFiles.value.map(f => f.id) })
const mergedValues = { ...values.value, ...fileParamMapping.value }
const resp = await createTask({ ...form, task_name: taskName, job_name: taskName, app_id: selectedAppId.value, values: mergedValues, file_ids: selectedFiles.value.map(f => f.id) })
if (resp.success) {
ElMessage.success('任务提交成功')
router.push('/tasks')