Function TemplateManager

components/TemplateManager.tsx:11–317

({ isOpen, onClose, onTemplateCreate })

}

const TemplateManager: React.FC<TemplateManagerProps> = ({ isOpen, onClose, onTemplateCreate }) => {
  const [templates, setTemplates] = useState<Template[]>([]);
  const [showCreateForm, setShowCreateForm] = useState(false);
  const [editingTemplate, setEditingTemplate] = useState<Template | null>(null);
  
  // 表单状态
  const [formData, setFormData] = useState({
    name: '',
    description: '',
    content: '',
    tags: ''
  });

  useEffect(() => {
    if (isOpen) {
      loadTemplates();
    }
  }, [isOpen]);

  const loadTemplates = () => {
    const allTemplates = TemplateStorage.getAllTemplates();
    setTemplates(allTemplates);
  };

  const resetForm = () => {
    setFormData({
      name: '',
      description: '',
      content: '',
      tags: ''
    });
    setEditingTemplate(null);
    setShowCreateForm(false);
  };

  const handleCreateTemplate = () => {
    if (!formData.name || !formData.content) {
      alert('请填写模板名称和内容');
      return;
    }

    const tags = formData.tags.split(',').map(tag => tag.trim()).filter(tag => tag);
    
    TemplateStorage.saveCustomTemplate({
      name: formData.name,
      description: formData.description,
      content: formData.content,
      tags
    });

    resetForm();
    loadTemplates();
    onTemplateCreate?.();
  };

  const handleDeleteTemplate = (templateId: string) => {
    if (window.confirm('确定要删除这个模板吗？')) {
      TemplateStorage.deleteCustomTemplate(templateId);