6

我明白了，您想把模板管理和任务管理分成两个页面。我们需要添加路由功能并重构代码。

首先安装路由依赖：

npm install react-router-dom

然后创建新的模板管理页面组件：

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import './TemplateManager.css';

const TemplateManager = ({ templates, onSaveTemplate }) => {
  const navigate = useNavigate();
  const [showForm, setShowForm] = useState(false);
  const [newTemplate, setNewTemplate] = useState({
    name: '',
    processes: [
      {
        id: Date.now(),
        name: '',
        responsible: '',
        notes: ''
      }
    ]
  });

  const addProcess = () => {
    setNewTemplate({
      ...newTemplate,
      processes: [
        ...newTemplate.processes,
        {
          id: Date.now(),
          name: '',
          responsible: '',
          notes: ''
        }
      ]
    });
  };

  const updateProcess = (index, field, value) => {
    const newProcesses = [...newTemplate.processes];
    newProcesses[index] = {
      ...newProcesses[index],
      [field]: value
    };
    setNewTemplate({
      ...newTemplate,
      processes: newProcesses
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    onSaveTemplate(newTemplate);
    setNewTemplate({
      name: '',
      processes: [
        {
          id: Date.now(),
          name: '',
          responsible: '',
          notes: ''
        }
      ]
    });
    setShowForm(false);
  };

  return (
    <div className="template-manager">
      <div className="template-header">
        <h1>任务模板管理</h1>
        <div className="header-actions">
          <button onClick={() => setShowForm(true)}>创建新模板</button>
          <button onClick={() => navigate('/')}>返回任务管理</button>
        </div>
      </div>

      {showForm && (
        <div className="template-form">
          <h2>创建新模板</h2>
          <form onSubmit={handleSubmit}>
            <div className="form-group">
              <label>模板名称：</label>
              <input
                type="text"
                value={newTemplate.name}
                onChange={(e) => setNewTemplate({...newTemplate, name: e.target.value})}
                required
              />
            </div>

            <h3>执行过程</h3>
            {newTemplate.processes.map((process, index) => (
              <div key={process.id} className="process-form">
                <div className="form-group">
                  <label>过程名称：</label>
                  <input
                    type="text"
                    value={process.name}
                    onChange={(e) => updateProcess(index, 'name', e.target.value)}
                    required
                  />
                </div>
                
                <div className="form-group">
                  <label>负责人：</label>
                  <input
                    type="text"
                    value={process.responsible}
                    onChange={(e) => updateProcess(index, 'responsible', e.target.value)}
                  />
                </div>

                <div className="form-group">
                  <label>备注：</label>
                  <textarea
                    value={process.notes}
                    onChange={(e) => updateProcess(index, 'notes', e.target.value)}
                  />
                </div>
              </div>
            ))}

            <button type="button" onClick={addProcess}>
              添加执行过程
            </button>

            <div className="form-actions">
              <button type="submit">保存模板</button>
              <button type="button" onClick={() => setShowForm(false)}>
                取消
              </button>
            </div>
          </form>
        </div>
      )}

      <div className="templates-list">
        <h2>现有模板</h2>
        <div className="templates-grid">
          {templates.map(template => (
            <div key={template.id} className="template-card">
              <h3>{template.name}</h3>
              <div className="processes-list">
                {template.processes.map((process, index) => (
                  <div key={index} className="process-item">
                    <span className="process-name">{process.name}</span>
                    {process.responsible && (
                      <span className="process-responsible">负责人: {process.responsible}</span>
                    )}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default TemplateManager;

创建模板管理页面的样式：

.template-manager {
  padding: 20px;
}

.template-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.header-actions button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.template-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.template-card h3 {
  margin-top: 0;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.processes-list {
  margin-top: 10px;
}

.process-item {
  padding: 8px;
  border-bottom: 1px solid #eee;
}

.process-item:last-child {
  border-bottom: none;
}

.process-name {
  font-weight: bold;
  display: block;
}

.process-responsible {
  font-size: 0.9em;
  color: #666;
}

.template-form {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: white;
}

修改 App.js 添加路由：

import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import TaskManager from './components/TaskManager';
import TemplateManager from './components/TemplateManager';

function App() {
  const [templates, setTemplates] = useState([]);

  const handleSaveTemplate = (newTemplate) => {
    setTemplates([...templates, { ...newTemplate, id: Date.now() }]);
  };

  return (
    <Router>
      <div className="App">
        <nav className="main-nav">
          <Link to="/">任务管理</Link>
          <Link to="/templates">模板管理</Link>
        </nav>

        <Routes>
          <Route 
            path="/" 
            element={<TaskManager templates={templates} />} 
          />
          <Route 
            path="/templates" 
            element={
              <TemplateManager 
                templates={templates} 
                onSaveTemplate={handleSaveTemplate} 
              />
            } 
          />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

添加导航样式：

.main-nav {
  background-color: #333;
  padding: 15px;
  margin-bottom: 20px;
}

.main-nav a {
  color: white;
  text-decoration: none;
  padding: 10px 20px;
  margin-right: 10px;
  border-radius: 4px;
}

.main-nav a:hover {
  background-color: #555;
}

修改 TaskManager.js 中的模板使用部分：

// 在 TaskManager 组件中添加 templates 属性
const TaskManager = ({ templates }) => {
  // ... 其他代码 ...

  return (
    <div className="task-manager">
      <div className="task-header">
        {/* ... 筛选器代码 ... */}
        <div className="task-actions">
          <button 
            className="add-task-btn"
            onClick={() => document.getElementById('taskForm').style.display = 'block'}
          >
            添加新任务
          </button>
          <select 
            className="template-select"
            onChange={(e) => {
              if (e.target.value) {
                const template = templates.find(t => t.id === parseInt(e.target.value));
                if (template) {
                  createTaskFromTemplate(template);
                }
              }
            }}
          >
            <option value="">从模板创建...</option>
            {templates.map(template => (
              <option key={template.id} value={template.id}>
                {template.name}
              </option>
            ))}
          </select>
        </div>
      </div>
      
      {/* ... 其他代码 ... */}
    </div>
  );
};

这样重构后：

1. 模板管理成为独立页面，可以专注于创建和管理模板
2. 任务管理页面通过下拉框选择模板来创建任务
3. 两个页面之间可以通过导航栏切换
4. 模板数据在 App 组件中统一管理，可以在两个页面之间共享

需要我对某部分做进一步的调整或解释吗？