专业应用设计指南

import React, { useState, useEffect } from 'react';

const App = () => {
  const [customers, setCustomers] = useState([]);
  const [newPhone, setNewPhone] = useState('');
  const [newTask, setNewTask] = useState('');
  const [selectedDate, setSelectedDate] = useState('');

  useEffect(() => {
    const savedCustomers = JSON.parse(localStorage.getItem('customers')) || [];
    setCustomers(savedCustomers);
  }, []);

  const addCustomer = () => {
    if (newPhone && newTask && selectedDate) {
      const newCustomer = {
        phone: newPhone,
        tasks: [{ description: newTask, date: selectedDate, completed: false }],
      };
      const updatedCustomers = [...customers, newCustomer];
      setCustomers(updatedCustomers);
      localStorage.setItem('customers', JSON.stringify(updatedCustomers));
      setNewPhone('');
      setNewTask('');
      setSelectedDate('');
    }
  };

  const addTask = (index) => {
    if (newTask && selectedDate) {
      const updatedCustomers = [...customers];
      updatedCustomers[index].tasks.push({ description: newTask, date: selectedDate, completed: false });
      setCustomers(updatedCustomers);
      localStorage.setItem('customers', JSON.stringify(updatedCustomers));
      setNewTask('');
      setSelectedDate('');
    }
  };

  const markTaskCompleted = (customerIndex, taskIndex) => {
    const updatedCustomers = [...customers];
    updatedCustomers[customerIndex].tasks[taskIndex].completed = true;
    setCustomers(updatedCustomers);
    localStorage.setItem('customers', JSON.stringify(updatedCustomers));
  };

  const deleteCustomer = (index) => {
    const updatedCustomers = customers.filter((_, i) => i !== index);
    setCustomers(updatedCustomers);
    localStorage.setItem('customers', JSON.stringify(updatedCustomers));
  };

  return (
    <div className='min-h-screen bg-gray-100 p-6'>
      <h1 className='text-3xl font-bold text-center mb-8'>Customer Task Manager</h1>
      <div className='bg-white p-6 rounded-lg shadow-md mb-8'>
        <h2 className='text-2xl font-semibold mb-4'>Add New Customer</h2>
        <div className='flex flex-col space-y-4'>
          <input
            type='text'
            placeholder='Phone Number'
            value={newPhone}
            onChange={(e) => setNewPhone(e.target.value)}
            className='p-2 border border-gray-300 rounded-lg'
          />
          <input
            type='text'
            placeholder='Task Description'
            value={newTask}
            onChange={(e) => setNewTask(e.target.value)}
            className='p-2 border border-gray-300 rounded-lg'
          />
          <input
            type='date'
            value={selectedDate}
            onChange={(e) => setSelectedDate(e.target.value)}
            className='p-2 border border-gray-300 rounded-lg'
          />
          <button
            onClick={addCustomer}
            className='bg-blue-500 text-white p-2 rounded-lg hover:bg-blue-600'
          >
            Add Customer
          </button>
        </div>
      </div>
      <div className='space-y-6'>
        {customers.map((customer, customerIndex) => (
          <div key={customerIndex} className='bg-white p-6 rounded-lg shadow-md'>
            <div className='flex justify-between items-center mb-4'>
              <h2 className='text-xl font-semibold'>Phone: {customer.phone}</h2>
              <button
                onClick={() => deleteCustomer(customerIndex)}
                className='bg-red-500 text-white p-2 rounded-lg hover:bg-red-600'
              >
                Delete Customer
              </button>
            </div>
            <div className='flex flex-col space-y-4'>
              <input
                type='text'
                placeholder='Task Description'
                value={newTask}
                onChange={(e) => setNewTask(e.target.value)}
                className='p-2 border border-gray-300 rounded-lg'
              />
              <input
                type='date'
                value={selectedDate}
                onChange={(e) => setSelectedDate(e.target.value)}
                className='p-2 border border-gray-300 rounded-lg'
              />
              <button
                onClick={() => addTask(customerIndex)}
                className='bg-green-500 text-white p-2 rounded-lg hover:bg-green-600'
              >
                Add Task
              </button>
            </div>
            <div className='mt-6'>
              <h3 className='text-lg font-medium mb-4'>Tasks:</h3>
              {customer.tasks.map((task, taskIndex) => (
                <div key={taskIndex} className='flex justify-between items-center p-4 bg-gray-50 rounded-lg mb-2'>
                  <div>
                    <p className='text-gray-700'>{task.description}</p>
                    <p className='text-sm text-gray-500'>Date: {task.date}</p>
                    <p className='text-sm text-gray-500'>Status: {task.completed ? 'Completed' : 'Pending'}</p>
                  </div>
                  {!task.completed && (
                    <button
                      onClick={() => markTaskCompleted(customerIndex, taskIndex)}
                      className='bg-yellow-500 text-white p-2 rounded-lg hover:bg-yellow-600'
                    >
                      Mark Completed
                    </button>
                  )}
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
      <footer className='text-center text-gray-600 mt-8'>
        © 2025 Task Manager. All rights reserved.
      </footer>
    </div>
  );
};

export default App;