feat: add search result filter

2025-08-14 13:13:22 +08:00
parent 8b2e8368b7
commit 95ae4645fd
4 changed files with 420 additions and 67 deletions
@@ -0,0 +1,224 @@
+'use client';
+
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { ArrowDownWideNarrow, ArrowUpNarrowWide } from 'lucide-react';
+
+export type SearchFilterKey = 'source' | 'title' | 'year' | 'yearOrder';
+
+export interface SearchFilterOption {
+  label: string;
+  value: string;
+}
+
+export interface SearchFilterCategory {
+  key: SearchFilterKey;
+  label: string;
+  options: SearchFilterOption[];
+}
+
+interface SearchResultFilterProps {
+  categories: SearchFilterCategory[];
+  values: Partial<Record<SearchFilterKey, string>>;
+  onChange: (values: Record<SearchFilterKey, string>) => void;
+}
+
+const DEFAULTS: Record<SearchFilterKey, string> = {
+  source: 'all',
+  title: 'all',
+  year: 'all',
+  yearOrder: 'desc',
+};
+
+const SearchResultFilter: React.FC<SearchResultFilterProps> = ({ categories, values, onChange }) => {
+  const [activeCategory, setActiveCategory] = useState<SearchFilterKey | null>(null);
+  const [dropdownPosition, setDropdownPosition] = useState<{ x: number; y: number; width: number }>({ x: 0, y: 0, width: 0 });
+  const categoryRefs = useRef<Record<string, HTMLDivElement | null>>({});
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const mergedValues = useMemo(() => {
+    return {
+      ...DEFAULTS,
+      ...values,
+    } as Record<SearchFilterKey, string>;
+  }, [values]);
+
+  const calculateDropdownPosition = (categoryKey: SearchFilterKey) => {
+    const element = categoryRefs.current[categoryKey];
+    if (element) {
+      const rect = element.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const isMobile = viewportWidth < 768;
+
+      let x = rect.left;
+      let dropdownWidth = Math.max(rect.width, 240);
+      let useFixedWidth = false;
+
+      if (isMobile) {
+        const padding = 16;
+        const maxWidth = viewportWidth - padding * 2;
+        dropdownWidth = Math.min(dropdownWidth, maxWidth);
+        useFixedWidth = true;
+
+        if (x + dropdownWidth > viewportWidth - padding) {
+          x = viewportWidth - dropdownWidth - padding;
+        }
+        if (x < padding) {
+          x = padding;
+        }
+      }
+
+      setDropdownPosition({ x, y: rect.bottom, width: useFixedWidth ? dropdownWidth : rect.width });
+    }
+  };
+
+  const handleCategoryClick = (categoryKey: SearchFilterKey) => {
+    if (activeCategory === categoryKey) {
+      setActiveCategory(null);
+    } else {
+      setActiveCategory(categoryKey);
+      calculateDropdownPosition(categoryKey);
+    }
+  };
+
+  const handleOptionSelect = (categoryKey: SearchFilterKey, optionValue: string) => {
+    const newValues = {
+      ...mergedValues,
+      [categoryKey]: optionValue,
+    } as Record<SearchFilterKey, string>;
+    onChange(newValues);
+    setActiveCategory(null);
+  };
+
+  const getDisplayText = (categoryKey: SearchFilterKey) => {
+    const category = categories.find((cat) => cat.key === categoryKey);
+    if (!category) return '';
+    const value = mergedValues[categoryKey];
+    if (!value || value === DEFAULTS[categoryKey]) return category.label;
+    const option = category.options.find((opt) => opt.value === value);
+    return option?.label || category.label;
+  };
+
+  const isDefaultValue = (categoryKey: SearchFilterKey) => {
+    const value = mergedValues[categoryKey];
+    return !value || value === DEFAULTS[categoryKey];
+  };
+
+  const isOptionSelected = (categoryKey: SearchFilterKey, optionValue: string) => {
+    const value = mergedValues[categoryKey] ?? DEFAULTS[categoryKey];
+    return value === optionValue;
+  };
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (activeCategory) calculateDropdownPosition(activeCategory);
+    };
+    const handleResize = () => {
+      if (activeCategory) calculateDropdownPosition(activeCategory);
+    };
+    window.addEventListener('scroll', handleScroll);
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [activeCategory]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node) &&
+        !Object.values(categoryRefs.current).some((ref) => ref && ref.contains(event.target as Node))
+      ) {
+        setActiveCategory(null);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  return (
+    <>
+      <div className='relative inline-flex rounded-full p-0.5 sm:p-1 bg-transparent gap-1 sm:gap-2'>
+        {categories.map((category) => (
+          <div key={category.key} ref={(el) => { categoryRefs.current[category.key] = el; }} className='relative'>
+            <button
+              onClick={() => handleCategoryClick(category.key)}
+              className={`relative z-10 px-1.5 py-0.5 sm:px-2 sm:py-1 md:px-4 md:py-2 text-xs sm:text-sm font-medium rounded-full transition-all duration-200 whitespace-nowrap ${activeCategory === category.key
+                ? isDefaultValue(category.key)
+                  ? 'text-gray-900 dark:text-gray-100 cursor-default'
+                  : 'text-green-600 dark:text-green-400 cursor-default'
+                : isDefaultValue(category.key)
+                  ? 'text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 cursor-pointer'
+                  : 'text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300 cursor-pointer'
+                }`}
+            >
+              <span>{getDisplayText(category.key)}</span>
+              <svg className={`inline-block w-2.5 h-2.5 sm:w-3 sm:h-3 ml-0.5 sm:ml-1 transition-transform duration-200 ${activeCategory === category.key ? 'rotate-180' : ''}`} fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+                <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M19 9l-7 7-7-7' />
+              </svg>
+            </button>
+          </div>
+        ))}
+        {/* 通用年份排序切换按钮 */}
+        <div className='relative'>
+          <button
+            onClick={() => {
+              const next = mergedValues.yearOrder === 'desc' ? 'asc' : 'desc';
+              onChange({ ...mergedValues, yearOrder: next });
+            }}
+            className={`relative z-10 px-1.5 py-0.5 sm:px-2 sm:py-1 md:px-4 md:py-2 text-xs sm:text-sm font-medium rounded-full transition-all duration-200 whitespace-nowrap ${mergedValues.yearOrder === 'desc'
+              ? 'text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 cursor-pointer'
+              : 'text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300 cursor-pointer'
+              }`}
+            aria-label={`按年份${mergedValues.yearOrder === 'desc' ? '降序' : '升序'}排序`}
+          >
+            <span>年份</span>
+            {mergedValues.yearOrder === 'desc' ? (
+              <ArrowDownWideNarrow className='inline-block ml-1 w-4 h-4 sm:w-4 sm:h-4' />
+            ) : (
+              <ArrowUpNarrowWide className='inline-block ml-1 w-4 h-4 sm:w-4 sm:h-4' />
+            )}
+          </button>
+        </div>
+      </div>
+
+      {activeCategory && createPortal(
+        <div
+          ref={dropdownRef}
+          className='fixed z-[9999] bg-white/95 dark:bg-gray-800/95 rounded-xl border border-gray-200/50 dark:border-gray-700/50 backdrop-blur-sm'
+          style={{
+            left: `${dropdownPosition.x}px`,
+            top: `${dropdownPosition.y}px`,
+            ...(typeof window !== 'undefined' && window.innerWidth < 768 ? { width: `${dropdownPosition.width}px` } : { minWidth: `${Math.max(dropdownPosition.width, 240)}px` }),
+            maxWidth: '600px',
+            position: 'fixed',
+          }}
+        >
+          <div className='p-2 sm:p-4'>
+            <div className='grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-1 sm:gap-2'>
+              {categories.find((cat) => cat.key === activeCategory)?.options.map((option) => (
+                <button
+                  key={option.value}
+                  onClick={() => handleOptionSelect(activeCategory, option.value)}
+                  className={`px-2 py-1.5 sm:px-3 sm:py-2 text-xs sm:text-sm rounded-lg transition-all duration-200 text-left ${isOptionSelected(activeCategory, option.value)
+                    ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 border border-green-200 dark:border-green-700'
+                    : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100/80 dark:hover:bg-gray-700/80'
+                    }`}
+                >
+                  {option.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>,
+        document.body
+      )}
+    </>
+  );
+};
+
+export default SearchResultFilter;
+
+