Ma/LunaTV
1
0
Fork 0
mirror of https://github.com/MoonTechLab/LunaTV.git synced 2026-06-17 09:53:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: close panel when scroll

Browse Source
This commit is contained in:
shinya
2025-08-14 22:52:46 +08:00
parent 50926567b8
commit 2671a92264
2 changed files with 41 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/components/MultiLevelSelector.tsx
View File

@@ -263,19 +263,19 @@ const MultiLevelSelector: React.FC<MultiLevelSelectorProps> = ({
const categories: MultiLevelCategory[] = [ const categories: MultiLevelCategory[] = [
...(contentType !== 'anime-tv' && contentType !== 'anime-movie' ...(contentType !== 'anime-tv' && contentType !== 'anime-movie'
? [ ? [
{ {
key: 'type', key: 'type',
label: '类型', label: '类型',
options: getTypeOptions(contentType), options: getTypeOptions(contentType),
}, },
] ]
: [ : [
{ {
key: 'label', key: 'label',
label: '类型', label: '类型',
options: getLabelOptions(contentType), options: getLabelOptions(contentType),
}, },
]), ]),
{ {
key: 'region', key: 'region',
label: '地区', label: '地区',
@@ -305,15 +305,15 @@ const MultiLevelSelector: React.FC<MultiLevelSelectorProps> = ({
}, },
// 只在电视剧和综艺时显示平台选项 // 只在电视剧和综艺时显示平台选项
...(contentType === 'tv' || ...(contentType === 'tv' ||
contentType === 'show' || contentType === 'show' ||
contentType === 'anime-tv' contentType === 'anime-tv'
? [ ? [
{ {
key: 'platform', key: 'platform',
label: '平台', label: '平台',
options: getPlatformOptions(contentType), options: getPlatformOptions(contentType),
}, },
] ]
: []), : []),
{ {
key: 'sort', key: 'sort',
@@ -460,11 +460,12 @@ const MultiLevelSelector: React.FC<MultiLevelSelectorProps> = ({
return value === optionValue; return value === optionValue;
}; };
// 监听滚动和窗口大小变化事件，重新计算位置 // 监听滚动和窗口大小变化事件
useEffect(() => { useEffect(() => {
const handleScroll = () => { const handleScroll = () => {
// 滚动时直接关闭面板，而不是重新计算位置
if (activeCategory) { if (activeCategory) {
calculateDropdownPosition(activeCategory); setActiveCategory(null);
} }
}; };
@@ -474,10 +475,11 @@ const MultiLevelSelector: React.FC<MultiLevelSelectorProps> = ({
} }
}; };
window.addEventListener('scroll', handleScroll); // 监听 body 滚动事件，因为该项目的滚动容器是 document.body
document.body.addEventListener('scroll', handleScroll, { passive: true });
window.addEventListener('resize', handleResize); window.addEventListener('resize', handleResize);
return () => { return () => {
window.removeEventListener('scroll', handleScroll); document.body.removeEventListener('scroll', handleScroll);
window.removeEventListener('resize', handleResize); window.removeEventListener('resize', handleResize);
}; };
}, [activeCategory]); }, [activeCategory]);
@@ -514,21 +516,19 @@ const MultiLevelSelector: React.FC<MultiLevelSelectorProps> = ({
> >
<button <button
onClick={() => handleCategoryClick(category.key)} 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 ${ 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
activeCategory === category.key
? isDefaultValue(category.key) ? isDefaultValue(category.key)
? 'text-gray-900 dark:text-gray-100 cursor-default' ? 'text-gray-900 dark:text-gray-100 cursor-default'
: 'text-green-600 dark:text-green-400 cursor-default' : 'text-green-600 dark:text-green-400 cursor-default'
: isDefaultValue(category.key) : isDefaultValue(category.key)
? 'text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 cursor-pointer' ? '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' : 'text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300 cursor-pointer'
}`} }`}
> >
<span>{getDisplayText(category.key)}</span> <span>{getDisplayText(category.key)}</span>
<svg <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 ${ 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' : ''
activeCategory === category.key ? 'rotate-180' : '' }`}
}`}
fill='none' fill='none'
stroke='currentColor' stroke='currentColor'
viewBox='0 0 24 24' viewBox='0 0 24 24'
@@ -571,11 +571,10 @@ const MultiLevelSelector: React.FC<MultiLevelSelectorProps> = ({
onClick={() => onClick={() =>
handleOptionSelect(activeCategory, option.value) 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 ${ 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)
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' ? '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' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100/80 dark:hover:bg-gray-700/80'
}`} }`}
> >
{option.label} {option.label}
</button> </button>

10
src/components/SearchResultFilter.tsx
View File

@@ -111,15 +111,19 @@ const SearchResultFilter: React.FC<SearchResultFilterProps> = ({ categories, val
useEffect(() => { useEffect(() => {
const handleScroll = () => { const handleScroll = () => {
if (activeCategory) calculateDropdownPosition(activeCategory); // 滚动时直接关闭面板，而不是重新计算位置
if (activeCategory) {
setActiveCategory(null);
}
}; };
const handleResize = () => { const handleResize = () => {
if (activeCategory) calculateDropdownPosition(activeCategory); if (activeCategory) calculateDropdownPosition(activeCategory);
}; };
window.addEventListener('scroll', handleScroll); // 监听 body 滚动事件，因为该项目的滚动容器是 document.body
document.body.addEventListener('scroll', handleScroll, { passive: true });
window.addEventListener('resize', handleResize); window.addEventListener('resize', handleResize);
return () => { return () => {
window.removeEventListener('scroll', handleScroll); document.body.removeEventListener('scroll', handleScroll);
window.removeEventListener('resize', handleResize); window.removeEventListener('resize', handleResize);
}; };
}, [activeCategory]); }, [activeCategory]);