webapp/src/components/TaskForm.tsx

import React from 'react';
import { View, Text, TextInput, StyleSheet, ScrollView } from 'react-native';
import { Task, RobotAction } from '../types/task';

interface TaskFormProps {
  task: Task;
  onTaskChange: (updatedTask: Task) => void;
}

const TaskForm: React.FC<TaskFormProps> = ({ task, onTaskChange }) => {
  const handleParamChange = (field: string, value: string) => {
    const updatedTask = {
      ...task,
      parameters: {
        ...task.parameters,
        [field]: value,
      },
    };
    onTaskChange(updatedTask);
  };

  return (
    <ScrollView style={styles.container}>
      <View style={styles.fieldContainer}>
        <Text style={styles.label}>任务名称</Text>
        <TextInput
          style={styles.input}
          value={task.name}
          onChangeText={text => onTaskChange({ ...task, name: text })}
        />
      </View>

      <View style={styles.fieldContainer}>
        <Text style={styles.label}>起点</Text>
        <TextInput
          style={styles.input}
          value={task.parameters.startLocation}
          onChangeText={text => handleParamChange('startLocation', text)}
        />
      </View>

      <View style={styles.fieldContainer}>
        <Text style={styles.label}>终点</Text>
        <TextInput
          style={styles.input}
          value={task.parameters.endLocation}
          onChangeText={text => handleParamChange('endLocation', text)}
        />
      </View>
      
      <View style={styles.fieldContainer}>
        <Text style={styles.label}>途经点</Text>
        <TextInput
          style={styles.input}
          value={task.parameters.waypoint || ''}
          onChangeText={text => handleParamChange('waypoint', text)}
          placeholder="可选"
        />
      </View>

      <View style={styles.fieldContainer}>
        <Text style={styles.label}>机器人动作</Text>
        {/* 在实际应用中，这里最好是一个下拉选择器 */}
        <TextInput
          style={styles.input}
          value={task.parameters.robotAction}
          onChangeText={text => handleParamChange('robotAction', text as RobotAction)}
        />
      </View>
      
      <View style={styles.fieldContainer}>
        <Text style={styles.label}>载荷</Text>
        <TextInput
          style={styles.input}
          value={task.parameters.payload}
          onChangeText={text => handleParamChange('payload', text)}
        />
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  fieldContainer: {
    marginBottom: 16,
  },
  label: {
    fontSize: 16,
    marginBottom: 8,
    fontWeight: 'bold',
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 4,
    padding: 12,
    fontSize: 16,
  },
});

export default TaskForm;