refactor: 优化任务表单组件的标签和输入样式，添加输入容器样式，更新任务编辑页面以支持滚动视图和卡片样式

src/components/TaskForm.tsx

@@ -32,25 +32,36 @@ const TaskForm: React.FC<TaskFormProps> = ({ task, onTaskChange }) => {
     const parameter = task.parameters?.[param.name];
     const value = parameter?.value || param.defaultValue;
 
+    const label = (
+      <Text>
+        {param.label}
+        {param.required && <Text style={styles.required}> *</Text>}
+      </Text>
+    );
+
     switch (param.type.toLowerCase()) {
       case 'string':
         return (
           <Input
             key={param.name}
-            label={param.label}
+            label={label}
             value={value as string}
             onChangeText={text => handleParamChange(param.name, text)}
             placeholder={param.remark}
+            helperText={param.remark}
+            inputContainerStyle={styles.inputContainer}
           />
         );
       default:
         return (
           <Input
             key={param.name}
-            label={param.label}
+            label={label}
             value={value as string}
             onChangeText={text => handleParamChange(param.name, text)}
             placeholder={param.remark}
+            helperText={param.remark}
+            inputContainerStyle={styles.inputContainer}
           />
         );
     }
@@ -62,6 +73,7 @@ const TaskForm: React.FC<TaskFormProps> = ({ 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<TaskFormProps> = ({ 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;

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<Task | null>(null);
   const [originalTask, setOriginalTask] = useState<Task | null>(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 (
     <View style={styles.container}>
-      <TaskForm task={task} onTaskChange={handleTaskChange} />
+      <ScrollView>
+        <Card containerStyle={styles.card}>
+          <TaskForm task={task} onTaskChange={handleTaskChange} />
+        </Card>
+      </ScrollView>
       <BottomActionBar
         onRun={handleRun}
         onSave={handleSave}
@@ -92,7 +96,10 @@ export default function TaskEditScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
+    backgroundColor: '#f0f2f5',
-    paddingBottom: 60,
+  },
+  card: {
+    borderRadius: 8,
+    margin: 10,
   },
 });