diff --git a/src/components/TaskForm.tsx b/src/components/TaskForm.tsx index a5f0aa0..2ef3508 100644 --- a/src/components/TaskForm.tsx +++ b/src/components/TaskForm.tsx @@ -32,25 +32,36 @@ const TaskForm: React.FC = ({ task, onTaskChange }) => { const parameter = task.parameters?.[param.name]; const value = parameter?.value || param.defaultValue; + const label = ( + + {param.label} + {param.required && *} + + ); + switch (param.type.toLowerCase()) { case 'string': return ( handleParamChange(param.name, text)} placeholder={param.remark} + helperText={param.remark} + inputContainerStyle={styles.inputContainer} /> ); default: return ( handleParamChange(param.name, text)} placeholder={param.remark} + helperText={param.remark} + inputContainerStyle={styles.inputContainer} /> ); } @@ -62,6 +73,7 @@ const TaskForm: React.FC = ({ task, onTaskChange }) => { label="任务名称" value={task.name} onChangeText={text => onTaskChange({ ...task, name: text })} + inputContainerStyle={styles.inputContainer} /> {task.detail && task.detail.inputParams ? ( @@ -77,7 +89,7 @@ const TaskForm: React.FC = ({ task, onTaskChange }) => { const styles = StyleSheet.create({ container: { - padding: 16, + // padding: 16, // }, loadingContainer: { flex: 1, @@ -85,6 +97,12 @@ const styles = StyleSheet.create({ alignItems: 'center', padding: 20, }, + required: { + color: 'red', + }, + inputContainer: { + marginBottom: 10, + }, }); export default TaskForm; diff --git a/src/screens/TaskEditScreen.tsx b/src/screens/TaskEditScreen.tsx index 0d5f5a4..8938d0a 100644 --- a/src/screens/TaskEditScreen.tsx +++ b/src/screens/TaskEditScreen.tsx @@ -1,12 +1,12 @@ import React, { useState, useEffect } from 'react'; -import { View, StyleSheet, Alert } from 'react-native'; +import { View, StyleSheet, Alert, ScrollView } from 'react-native'; import { useRoute, useNavigation } from '@react-navigation/native'; import { RouteProp } from '@react-navigation/native'; import { useTasks } from '../context/TasksContext'; import TaskForm from '../components/TaskForm'; import BottomActionBar from '../components/BottomActionBar'; import { Task } from '../types/task'; -import { Dialog } from '@rneui/themed'; +import { Dialog, Card } from '@rneui/themed'; type RootStackParamList = { TaskEdit: { taskId: string }; @@ -19,7 +19,7 @@ export default function TaskEditScreen() { const navigation = useNavigation(); const { taskId } = route.params; - const { getTaskById, updateTask, runTask } = useTasks(); + const { getTaskById, updateTask, runTask, tasks } = useTasks(); const [task, setTask] = useState(null); const [originalTask, setOriginalTask] = useState(null); @@ -31,7 +31,7 @@ export default function TaskEditScreen() { setTask(taskData); setOriginalTask(taskData); } - }, [taskId, getTaskById]); + }, [taskId, getTaskById, tasks]); // Add tasks to dependency array const handleTaskChange = (updatedTask: Task) => { setTask(updatedTask); @@ -76,7 +76,11 @@ export default function TaskEditScreen() { return ( - + + + + +