可交互标签组件

<!-- HTML结构 -->
<div class="tag-management-system">
  <div class="tag-input-group">
    <input type="text" id="user-tags-input" placeholder="添加标签...">
    <button id="add-user-tag-btn">添加</button>
  </div>
  <div id="user-tags-container" class="tags-container"></div>
  <div class="tag-actions">
    <button id="save-tags-btn">保存标签</button>
    <button id="clear-tags-btn">清空标签</button>
  </div>
  <div id="tags-status" class="status-message"></div>
</div>

<!-- JavaScript逻辑 -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const tagInput = document.getElementById('user-tags-input');
    const addBtn = document.getElementById('add-user-tag-btn');
    const tagsContainer = document.getElementById('user-tags-container');
    const saveBtn = document.getElementById('save-tags-btn');
    const clearBtn = document.getElementById('clear-tags-btn');
    const statusDiv = document.getElementById('tags-status');

    // 添加新标签的函数
    function addUserTag(tagText) {
      // 验证输入
      if (!tagText || !tagText.trim()) {
        showStatus('请输入标签内容', 'warning');
        return;
      }

      // 检查标签是否已存在
      const existingTags = Array.from(tagsContainer.querySelectorAll('.tag')).map(tag =>
        tag.textContent.replace('×', '').trim()
      );

      if (existingTags.includes(tagText.trim())) {
        showStatus('标签已存在', 'warning');
        return;
      }

      // 创建标签元素
      const tagElement = document.createElement('span');
      tagElement.className = 'tag tag-removable';
      tagElement.innerHTML = `
        ${tagText.trim()}
        ×
      `;

      // 添加移除功能
      const removeBtn = tagElement.querySelector('.tag-remove-btn');
      removeBtn.addEventListener('click', function() {
        tagElement.classList.add('tag-remove-animation');
        setTimeout(() => {
          tagElement.remove();
          showStatus('标签已移除', 'success');
        }, 300);
      });

      // 添加动画效果
      tagElement.style.opacity = '0';
      tagElement.style.transform = 'translateY(10px)';
      tagsContainer.appendChild(tagElement);
      
      // 触发重排，然后应用动画
      void tagElement.offsetWidth;
      tagElement.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
      tagElement.style.opacity = '1';
      tagElement.style.transform = 'translateY(0)';

      // 清空输入框
      tagInput.value = '';
      tagInput.focus();
      showStatus('标签已添加', 'success');
    }

    // 显示状态消息
    function showStatus(message, type = 'info') {
      statusDiv.textContent = message;
      statusDiv.className = `status-message status-${type}`;
      
      // 3秒后自动清除消息
      setTimeout(() => {
        statusDiv.textContent = '';
        statusDiv.className = 'status-message';
      }, 3000);
    }

    // 保存标签到本地存储
    function saveTags() {
      const tags = Array.from(tagsContainer.querySelectorAll('.tag')).map(tag =>
        tag.textContent.replace('×', '').trim()
      );
      
      if (tags.length === 0) {
        showStatus('没有可保存的标签', 'warning');
        return;
      }
      
      localStorage.setItem('userTags', JSON.stringify(tags));
      showStatus('标签已保存', 'success');
    }

    // 清空所有标签
    function clearAllTags() {
      if (tagsContainer.querySelectorAll('.tag').length === 0) {
        showStatus('标签容器已为空', 'info');
        return;
      }
      
      const tags = tagsContainer.querySelectorAll('.tag');
      tags.forEach(tag => {
        tag.classList.add('tag-remove-animation');
        setTimeout(() => tag.remove(), 300);
      });
      
      showStatus('所有标签已清空', 'success');
    }

    // 从本地存储加载标签
    function loadTags() {
      const savedTags = localStorage.getItem('userTags');
      if (savedTags) {
        try {
          const tags = JSON.parse(savedTags);
          tags.forEach(tag => addUserTag(tag));
          showStatus('已加载保存的标签', 'success');
        } catch (e) {
          showStatus('加载标签失败', 'danger');
        }
      }
    }

    // 事件监听
    addBtn.addEventListener('click', () => addUserTag(tagInput.value));
    
    tagInput.addEventListener('keydown', function(e) {
      if (e.key === 'Enter') {
        e.preventDefault();
        addUserTag(this.value);
      }
    });
    
    saveBtn.addEventListener('click', saveTags);
    clearBtn.addEventListener('click', clearAllTags);

    // 加载保存的标签
    loadTags();

    // 键盘快捷键
    document.addEventListener('keydown', function(e) {
      if ((e.ctrlKey || e.metaKey) && e.key === 's') {
        e.preventDefault();
        saveTags();
      } else if ((e.ctrlKey || e.metaKey) && e.key === 'd') {
        e.preventDefault();
        clearAllTags();
      }
    });
  });
</script>

<!-- CSS样式 -->
<style>
  .tag-management-system {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
  }
  
  .tag-input-group {
    display: flex;
    margin-bottom: 15px;
  }
  
  .tag-input-group input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px 0 0 4px;
    font-size: 14px;
  }
  
  .tag-input-group button {
    padding: 10px 15px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
  }
  
  .tag-input-group button:hover {
    background-color: #45a049;
  }
  
  .tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    min-height: 50px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 15px;
  }
  
  .tag-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
  }
  
  .tag-actions button {
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
  }
  
  #save-tags-btn {
    background-color: #2196F3;
    color: white;
  }
  
  #save-tags-btn:hover {
    background-color: #0b7dda;
  }
  
  #clear-tags-btn {
    background-color: #f44336;
    color: white;
  }
  
  #clear-tags-btn:hover {
    background-color: #da190b;
  }
  
  .status-message {
    padding: 10px;
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
  }
  
  .status-success {
    background-color: #d4edda;
    color: #155724;
  }
  
  .status-warning {
    background-color: #fff3cd;
    color: #856404;
  }
  
  .status-danger {
    background-color: #f8d7da;
    color: #721c24;
  }
  
  .status-info {
    background-color: #d1ecf1;
    color: #0c5460;
  }
</style>

import React, { useState, useRef, useEffect } from 'react';
import './TagComponent.css';

interface Tag {
  id: string;
  text: string;
  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
}

interface TagInputProps {
  initialTags?: Tag[];
  onTagsChange?: (tags: Tag[]) => void;
  placeholder?: string;
  maxTags?: number;
  allowedTypes?: ('primary' | 'success' | 'warning' | 'danger' | 'info')[];
}

const TagInput: React.FC = ({
  initialTags = [],
  onTagsChange,
  placeholder = '添加标签...',
  maxTags = 10,
  allowedTypes = ['primary', 'success', 'warning', 'danger', 'info']
}) => {
  const [tags, setTags] = useState(initialTags);
  const [inputValue, setInputValue] = useState('');
  const [selectedType, setSelectedType] = useState<'primary' | 'success' | 'warning' | 'danger' | 'info'>('primary');
  const inputRef = useRef(null);

  // 通知父组件标签变化
  useEffect(() => {
    if (onTagsChange) {
      onTagsChange(tags);
    }
  }, [tags, onTagsChange]);

  // 生成唯一ID
  const generateId = (): string => {
    return `tag-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
  };

  // 检查标签是否已存在
  const isTagExists = (text: string): boolean => {
    return tags.some(tag => tag.text.toLowerCase() === text.toLowerCase().trim());
  };

  // 添加标签
  const addTag = (text: string): void => {
    const trimmedText = text.trim();
    
    if (!trimmedText || isTagExists(trimmedText) || tags.length >= maxTags) {
      return;
    }

    const newTag: Tag = {
      id: generateId(),
      text: trimmedText,
      type: selectedType
    };

    setTags([...tags, newTag]);
    setInputValue('');
    
    // 保持输入框聚焦
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  // 移除标签
  const removeTag = (id: string): void => {
    setTags(tags.filter(tag => tag.id !== id));
  };

  // 处理输入按键事件
  const handleKeyDown = (e: React.KeyboardEvent): void => {
    if (e.key === 'Enter') {
      e.preventDefault();
      addTag(inputValue);
    } else if (e.key === 'Backspace' && !inputValue && tags.length > 0) {
      // 支持按退格键删除最后一个标签
      setTags(tags.slice(0, -1));
    }
  };

  // 处理输入变化
  const handleInputChange = (e: React.ChangeEvent): void => {
    setInputValue(e.target.value);
  };

  // 键盘快捷键支持
  useEffect(() => {
    const handleGlobalKeyDown = (e: KeyboardEvent): void => {
      if ((e.ctrlKey || e.metaKey) && e.key === 't' && !e.shiftKey) {
        e.preventDefault();
        if (inputRef.current) {
          inputRef.current.focus();
        }
      }
    };

    window.addEventListener('keydown', handleGlobalKeyDown);
    return () => window.removeEventListener('keydown', handleGlobalKeyDown);
  }, []);

  return (
    

      

        {tags.map(tag => (
          
            {tag.text}
             removeTag(tag.id)}
            >
              ×
            
          
        ))}
        = maxTags}
          className="tag-input-field"
          role="combobox"
          aria-autocomplete="list"
          aria-expanded="false"
          aria-controls="dynamic-tags"
        />
      
      

         setSelectedType(e.target.value as any)}
          className="tag-type-selector"
        >
          {allowedTypes.map(type => (
            
              {type.charAt(0).toUpperCase() + type.slice(1)}
            
          ))}
        
         addTag(inputValue)}
          disabled={!inputValue.trim() || isTagExists(inputValue) || tags.length >= maxTags}
          className="add-tag-button"
        >
          添加标签
        
      
      {tags.length >= maxTags && (
        
已达到最大标签数量 ({maxTags})
      )}
    
  );
};

export default TagInput;