9

已经实现了可以同时设定多个默认模板的功能。在当前的代码中：

1. 在模板管理页面，每个模板卡片都有一个"设为默认模板"的复选框
2. 可以勾选多个模板作为默认模板
3. 当切换到新的年份/周数时，所有被设为默认的模板都会自动创建任务

不过我们可以优化一下模板卡片的样式，让默认模板更加醒目：

.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);
  position: relative;
  transition: all 0.3s ease;
}

/* 修改默认模板的样式 */
.template-card[data-default="true"] {
  border: 2px solid #4CAF50;
  background-color: #f8fff8;
}

.default-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.9em;
  color: #666;
  padding: 5px 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

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

.default-toggle input[type="checkbox"]:checked + span {
  color: #4CAF50;
  font-weight: bold;
}

然后修改 TemplateManager.js 中的模板卡片部分：

{templates.map(template => (
  <div 
    key={template.id} 
    className="template-card"
    data-default={template.isDefault}
  >
    <div className="template-header">
      <h3>{template.name}</h3>
      <label className="default-toggle">
        <input
          type="checkbox"
          checked={template.isDefault}
          onChange={() => onToggleDefault(template.id)}
        />
        <span>设为默认模板</span>
      </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>
))}

这样的修改会让默认模板在视觉上更加突出：

1. 默认模板有绿色边框和浅绿色背景
2. 复选框更大更清晰
3. 选中状态的文字变为绿色和加粗
4. 添加了平滑的过渡动画

所有这些视觉提示都有助于用户识别哪些模板被设置为默认模板。当切换到新的年份或周数时，所有被标记为默认的模板都会自动创建对应的任务。

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