davidl/MoonTVPlus
1
0
Fork 0
Code Issues Pull Requests Actions 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 2b123d29e0
commit a9c5b9408d
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[] = [
...(contentType !== 'anime-tv' && contentType !== 'anime-movie'
? [
{
key: 'type',
label: '类型',
options: getTypeOptions(contentType),
},
]
{
key: 'type',
label: '类型',
options: getTypeOptions(contentType),
},
]
: [
{
key: 'label',
label: '类型',
options: getLabelOptions(contentType),
},
]),
{
key: 'label',
label: '类型',
options: getLabelOptions(contentType),
},
]),
{
key: 'region',
label: '地区',
@@ -305,15 +305,15 @@ const MultiLevelSelector: React.FC<MultiLevelSelectorProps> = ({
},
// 只在电视剧和综艺时显示平台选项
...(contentType === 'tv' ||
contentType === 'show' ||
contentType === 'anime-tv'
contentType === 'show' ||
contentType === 'anime-tv'
? [
{
key: 'platform',
label: '平台',
options: getPlatformOptions(contentType),
},
]
{
key: 'platform',
label: '平台',
options: getPlatformOptions(contentType),
},
]
: []),
{
key: 'sort',
@@ -460,11 +460,12 @@ const MultiLevelSelector: React.FC<MultiLevelSelectorProps> = ({
return value === optionValue;
};
// 监听滚动和窗口大小变化事件，重新计算位置
// 监听滚动和窗口大小变化事件
useEffect(() => {
const handleScroll = () => {
// 滚动时直接关闭面板，而不是重新计算位置
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);
return () => {
window.removeEventListener('scroll', handleScroll);
document.body.removeEventListener('scroll', handleScroll);
window.removeEventListener('resize', handleResize);
};
}, [activeCategory]);
@@ -514,21 +516,19 @@ const MultiLevelSelector: React.FC<MultiLevelSelectorProps> = ({
>
<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
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'
}`}
? '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' : ''
}`}
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'
@@ -571,11 +571,10 @@ const MultiLevelSelector: React.FC<MultiLevelSelectorProps> = ({
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)
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>

10
src/components/SearchResultFilter.tsx
View File

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