创建菜单页面与表单处理

import React, { useState, useEffect } from 'react';
import './App.css';
import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom';
import { open } from 'sqlite';
import sqlite3 from 'sqlite3';

const App = () => {
  const [formData, setFormData] = useState({
    checkbox: false,
    input: '',
    select: '',
    textarea: ''
  });

  const [submittedForms, setSubmittedForms] = useState([]);

  useEffect(() => {
    loadFormsFromDb();
  }, []);

  const loadFormsFromDb = async () => {
    const db = await open({
      filename: 'sqlite.db',
      driver: sqlite3.Database
    });
    const forms = await db.all('SELECT * FROM my_form');
    setSubmittedForms(forms);
  };

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const db = await open({
      filename: 'sqlite.db',
      driver: sqlite3.Database
    });
    await db.run(
      'INSERT INTO my_form (checkbox, input, select, textarea) VALUES (?, ?, ?, ?)',
      [formData.checkbox, formData.input, formData.select, formData.textarea]
    );
    loadFormsFromDb();
  };

  const IndexPage = () => (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4">
      <form onSubmit={handleSubmit} className="bg-white shadow-lg rounded px-8 pt-6 pb-8 mb-4">
        <div className="mb-4">
          <label className="block text-gray-700 text-sm font-bold mb-2">Checkbox</label>
          <input type="checkbox" name="checkbox" checked={formData.checkbox} onChange={handleChange} className="mr-2 leading-tight" />
        </div>
        <div className="mb-4">
          <label className="block text-gray-700 text-sm font-bold mb-2">Input</label>
          <input type="text" name="input" value={formData.input} onChange={handleChange} className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" />
        </div>
        <div className="mb-4">
          <label className="block text-gray-700 text-sm font-bold mb-2">Select</label>
          <select name="select" value={formData.select} onChange={handleChange} className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
            <option value="">Select an option</option>
            <option value="option1">Option 1</option>
            <option value="option2">Option 2</option>
          </select>
        </div>
        <div className="mb-6">
          <label className="block text-gray-700 text-sm font-bold mb-2">Textarea</label>
          <textarea name="textarea" value={formData.textarea} onChange={handleChange} className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" />
        </div>
        <div className="flex items-center justify-between">
          <button type="submit" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Submit</button>
        </div>
      </form>
    </div>
  );

  const WorkPage = () => (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4">
      <div className="bg-white shadow-lg rounded px-8 pt-6 pb-8 mb-4">
        {submittedForms.map((form, index) => (
          <div key={index} className="mb-4">
            <p>Checkbox: {form.checkbox ? 'Yes' : 'No'}</p>
            <p>Input: {form.input}</p>
            <p>Select: {form.select}</p>
            <p>Textarea: {form.textarea}</p>
          </div>
        ))}
      </div>
    </div>
  );

  const HistoryPage = () => (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4">
      <div className="bg-white shadow-lg rounded px-8 pt-6 pb-8 mb-4">
        {submittedForms.map((form, index) => (
          <div key={index} className="mb-4">
            <p>Checkbox: {form.checkbox ? 'Yes' : 'No'}</p>
            <p>Input: {form.input}</p>
            <p>Select: {form.select}</p>
            <p>Textarea: {form.textarea}</p>
          </div>
        ))}
      </div>
    </div>
  );

  return (
    <Router>
      <nav className="bg-gray-800 p-4">
        <ul className="flex space-x-4">
          <li><Link to="/" className="text-white">Index</Link></li>
          <li><Link to="/work" className="text-white">Work</Link></li>
          <li><Link to="/history" className="text-white">History</Link></li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<IndexPage />} />
        <Route path="/work" element={<WorkPage />} />
        <Route path="/history" element={<HistoryPage />} />
      </Routes>
    </Router>
  );
};

export default App;