Update src/components/Category/CategorySelector.tsx

src/components/Category/CategorySelector.tsx

@@ -17,111 +17,150 @@ const CategorySelector: React.FC<CategorySelectorProps> = ({
 }) => {
   const { categories } = useApp();
   const [showDropdown, setShowDropdown] = useState(false);
-  const selectorRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLDivElement>(null);
   
+  // 查找选中的分类对象
   const selectedCategoryObj = categories.find(c => 
     typeof selectedCategory === 'string' 
       ? c._id === selectedCategory 
       : c._id === selectedCategory._id
   );
 
+  // 切换下拉菜单显示状态
+  const toggleDropdown = () => {
+    setShowDropdown(!showDropdown);
+  };
+
+  // 这是关键函数 - 处理分类选择
+  const handleCategorySelect = (categoryId: string) => {
+    console.log('选择分类:', categoryId);
+    // 直接调用传入的onChange函数
+    onChange(categoryId);
+    // 关闭下拉菜单
+    setShowDropdown(false);
+  };
+
   // 点击外部关闭下拉菜单
   useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (selectorRef.current && !selectorRef.current.contains(event.target as Node)) {
+    const handleClickOutside = (e: MouseEvent) => {
+      // 只在下拉菜单打开时处理点击外部事件
+      if (!showDropdown) return;
+      
+      // 获取下拉菜单元素
+      const menuElement = document.getElementById('category-dropdown-menu');
+      
+      // 检查点击是否在触发器或下拉菜单内
+      const isClickInsideTrigger = triggerRef.current && triggerRef.current.contains(e.target as Node);
+      const isClickInsideMenu = menuElement && menuElement.contains(e.target as Node);
+      
+      // 如果点击在两者之外，关闭菜单
+      if (!isClickInsideTrigger && !isClickInsideMenu) {
         setShowDropdown(false);
       }
     };
     
-    if (showDropdown) {
-      document.addEventListener('mousedown', handleClickOutside);
-    }
+    // 添加全局点击事件监听
+    document.addEventListener('mousedown', handleClickOutside);
     
+    // 组件卸载时移除监听
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, [showDropdown]);
 
-  // 切换下拉菜单显示状态
-  const toggleDropdown = () => {
-    setShowDropdown(!showDropdown);
-  };
-
-  const handleCategorySelect = (categoryId: string) => {
-    // 重要：确保这个函数被正确调用
-    onChange(categoryId);
-    setShowDropdown(false);
-  };
-
-  // 使用Portal将下拉菜单渲染到body
-  const renderDropdown = () => {
-    if (!showDropdown || !selectorRef.current) return null;
+  // 创建下拉菜单Portal
+  const createMenu = () => {
+    if (!showDropdown || !triggerRef.current) return null;
     
-    const rect = selectorRef.current.getBoundingClientRect();
+    // 获取触发元素位置
+    const rect = triggerRef.current.getBoundingClientRect();
     
+    // 使用Portal将菜单附加到body
     return ReactDOM.createPortal(
-      <div 
+      <div
+        id="category-dropdown-menu"
         style={{
           position: 'absolute',
-          zIndex: 9999,
+          zIndex: 10000,
           width: '200px',
           maxHeight: '300px',
           overflowY: 'auto',
-          top: `${rect.bottom + window.scrollY}px`,
-          left: `${rect.left + window.scrollX}px`,
           backgroundColor: 'white',
-          borderRadius: '0.375rem',
-          boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-          border: '1px solid rgba(0, 0, 0, 0.05)'
+          borderRadius: '8px',
+          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+          border: '1px solid #e2e8f0',
+          top: rect.bottom + window.scrollY + 5,
+          left: rect.left + window.scrollX
         }}
       >
-        <div className="py-1" role="menu" aria-orientation="vertical">
-          {categories.map((category) => (
-            <div
+        {categories.map((category) => {
+          const isSelected = typeof selectedCategory === 'string' 
+            ? selectedCategory === category._id 
+            : selectedCategory._id === category._id;
+          
+          // 为每个选项创建一个按钮
+          return (
+            <button
               key={category._id}
-              className="px-4 py-2 text-sm hover:bg-gray-100 cursor-pointer flex items-center"
-              // 重要: 使用独立的事件处理函数，不依赖冒泡
-              onClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
+              type="button"
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                width: '100%',
+                textAlign: 'left',
+                padding: '8px 12px',
+                backgroundColor: isSelected ? '#ebf5ff' : 'transparent',
+                border: 'none',
+                cursor: 'pointer'
+              }}
+              // 重要！使用单独的内联函数
+              onClick={() => {
+                console.log(`点击了分类: ${category._id}`);
                 handleCategorySelect(category._id);
               }}
             >
               <div 
-                className="w-3 h-3 rounded-full mr-2" 
-                style={{ backgroundColor: category.color }}
-              ></div>
-              {category.name}
-              {(typeof selectedCategory === 'string' ? 
-                selectedCategory === category._id : 
-                selectedCategory._id === category._id) && (
+                style={{
+                  width: '12px',
+                  height: '12px',
+                  borderRadius: '50%',
+                  backgroundColor: category.color,
+                  marginRight: '8px'
+                }}
+              />
+              <span style={{ flex: 1 }}>{category.name}</span>
+              {isSelected && (
                 <svg 
                   xmlns="http://www.w3.org/2000/svg" 
                   width="16" 
                   height="16" 
                   viewBox="0 0 24 24" 
                   fill="none" 
-                  stroke="currentColor" 
+                  stroke="#007AFF" 
                   strokeWidth="2" 
                   strokeLinecap="round" 
                   strokeLinejoin="round"
-                  className="ml-auto"
                 >
                   <polyline points="20 6 9 17 4 12"></polyline>
                 </svg>
               )}
-            </div>
-          ))}
-        </div>
+            </button>
+          );
+        })}
       </div>,
       document.body
     );
   };
 
   return (
-    <div ref={selectorRef} className={`relative ${className}`}>
+    <div className={className}>
       <div 
-        className="flex items-center cursor-pointer"
+        ref={triggerRef}
+        style={{ 
+          display: 'flex',
+          alignItems: 'center',
+          cursor: 'pointer',
+        }}
         onClick={toggleDropdown}
       >
         {selectedCategoryObj ? (
@@ -141,13 +180,13 @@ const CategorySelector: React.FC<CategorySelectorProps> = ({
           strokeWidth="2" 
           strokeLinecap="round" 
           strokeLinejoin="round"
-          className="ml-1"
+          style={{ marginLeft: '4px' }}
         >
           <polyline points="6 9 12 15 18 9"></polyline>
         </svg>
       </div>
       
-      {renderDropdown()}
+      {createMenu()}
     </div>
   );
 };