8

我明白了，我们需要在模板管理页面添加"设为默认"功能，并在任务管理页面自动加载默认模板。让我们修改相关代码：

1. 首先修改 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 [defaultTemplates, setDefaultTemplates] = useState([]); // 添加默认模板状态

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

  const toggleDefaultTemplate = (templateId) => {
    setTemplates(templates.map(template => ({
      ...template,
      isDefault: template.id === templateId ? !template.isDefault : template.isDefault
    })));
  };

  // 获取默认模板列表
  const getDefaultTemplates = () => {
    return templates.filter(template => template.isDefault);
  };

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

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

export default App;

2. 修改 TemplateManager.js，添加设为默认的功能：

const TemplateManager = ({ templates, onSaveTemplate, onToggleDefault }) => {
  // ... 现有代码 ...

  return (
    <div className="template-manager">
      {/* ... 其他代码 ... */}
      
      <div className="templates-list">
        <h2>现有模板</h2>
        <div className="templates-grid">
          {templates.map(template => (
            <div key={template.id} className="template-card">
              <div className="template-header">
                <h3>{template.name}</h3>
                <label className="default-toggle">
                  <input
                    type="checkbox"
                    checked={template.isDefault}
                    onChange={() => onToggleDefault(template.id)}
                  />
                  设为默认模板
                </label>
              </div>
              <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>
  );
};

3. 修改 TaskManager.js，添加自动创建默认任务的功能：

const TaskManager = ({ templates, defaultTemplates }) => {
  // ... 现有代码 ...

  // 当年份或周数改变时，自动创建默认模板任务
  useEffect(() => {
    // 检查当前年份和周数是否已经有任务
    const hasTasksForPeriod = tasks.some(
      task => task.year === selectedYear && task.week === selectedWeek
    );

    // 如果没有任务，则从默认模板创建
    if (!hasTasksForPeriod && defaultTemplates.length > 0) {
      defaultTemplates.forEach(template => {
        createTaskFromTemplate(template);
      });
    }
  }, [selectedYear, selectedWeek]);

  // ... 其他代码 ...
};

4. 添加相关样式到 TemplateManager.css：

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

.default-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.9em;
  color: #666;
}

.default-toggle input[type="checkbox"] {
  margin: 0;
}

.template-card.is-default {
  border: 2px solid #4CAF50;
}

这些修改实现了：

1. 在模板管理页面可以设置/取消设置默认模板
2. 默认模板会在切换年份或周数时自动创建任务
3. 只有在当前年份和周数没有任务时才会自动创建
4. 可以设置多个默认模板，它们都会被自动创建
5. 默认模板在界面上有特殊标记（绿色边框）

使用方法：

1. 在模板管理页面创建模板
2. 勾选"设为默认模板"复选框将模板设为默认
3. 在任务管理页面切换年份或周数时，系统会自动创建默认模板对应的任务

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