Merge pull request #5287 from wsgh0202/fix-hide-home-carousel

fix: 隐藏首页轮播图失效
This commit is contained in:
Grant Howard 2025-07-18 08:57:02 +08:00 committed by the1812
parent f136369e4f
commit ebf87b7ed5
3 changed files with 130 additions and 6 deletions

View File

@ -1,3 +1,24 @@
.recommended-swipe.grid-anchor {
display: none !important;
$prefix: 'hideHomeCarousel-switch';
.#{$prefix} {
&-full .recommended-swipe {
display: none !important;
}
&-transparent .recommended-swipe {
opacity: 0;
pointer-events: none;
}
&-picture .vui_carousel__slide {
display: none !important;
}
&-footerText .carousel-footer-text {
display: none !important;
}
}
.vui_carousel__slide {
filter: blur(var(--blur-amount, 0px));
}

View File

@ -1 +1,14 @@
隐藏首页的轮播图区域.
隐藏首页的轮播图区域
选项说明:
- `禁用轮播`:禁用图片轮播,可以手动切换
- `图片模糊`模糊轮播图片为0时不模糊
- `样式开关`
- `隐藏轮播区域占位`:完全隐藏整个轮播区域
- `透明化轮播区域`:完全透明化整个轮播区域,同时禁止点击打开链接
- `隐藏轮播图片`:隐藏轮播图片,同时禁止点击图片打开链接
- `隐藏图片标题`:隐藏图片标题,同时禁止点击标题打开链接
> 注:样式开关可以同时启用,但是最终显示效果以作用范围大的为准
> 例如启用 `隐藏轮播区域占位`,由于整个区域都被隐藏,不管 `隐藏轮播图片`、`隐藏图片标题` 等选项是否启用都已经看不见了

View File

@ -1,9 +1,84 @@
import { defineComponentMetadata } from '@/components/define'
import { wrapSwitchOptions } from '@/components/switch-options'
import { ComponentEntry } from '@/components/types'
import { addComponentListener } from '@/core/settings'
import { select, selectAll } from '@/core/spin-query'
import { useScopedConsole } from '@/core/utils/log'
export const component = defineComponentMetadata({
const logger = useScopedConsole('hideHomeCarousel')
// 轮播容器 mouseleave 事件拦截
const onCarouselMouseLeaveHandler = (event: MouseEvent) => {
event.stopPropagation()
}
const entry: ComponentEntry = async ({ metadata }) => {
// 监听【禁用轮播】选项
addComponentListener(
`${metadata.name}.disableCarousel`,
async (value: boolean) => {
const node = (await select('.vui_carousel')) as HTMLElement
if (!node) {
logger.error('找不到轮播容器节点')
return
}
if (value) {
node.addEventListener('mouseleave', onCarouselMouseLeaveHandler, true)
// 触发事件停止轮播
const event = new MouseEvent('mouseenter')
node.dispatchEvent(event)
} else {
node.removeEventListener('mouseleave', onCarouselMouseLeaveHandler, true)
// 触发事件恢复轮播
const event = new MouseEvent('mouseleave')
node.dispatchEvent(event)
}
},
true,
)
// 监听【图片模糊】选项
addComponentListener(
`${metadata.name}.blur`,
async (value: number) => {
const nodes = (await selectAll('.vui_carousel__slide')) as HTMLElement[]
if (!nodes || nodes.length === 0) {
logger.error('找不到轮播图片节点')
return
}
nodes.forEach(node => {
node.style.setProperty('--blur-amount', `${value}px`)
})
},
true,
)
}
export const component = wrapSwitchOptions({
name: 'hideHomeCarouselOptions',
switches: {
full: {
displayName: '隐藏轮播区域占位',
defaultValue: true,
},
transparent: {
displayName: '透明化轮播区域',
defaultValue: false,
},
picture: {
displayName: '隐藏轮播图片',
defaultValue: false,
},
footerText: {
displayName: '隐藏图片标题',
defaultValue: false,
},
},
})({
name: 'hideHomeCarousel',
displayName: '隐藏首页轮播图',
entry: none,
entry,
tags: [componentsTags.style],
urlInclude: [/^https:\/\/www\.bilibili\.com\/$/, /^https:\/\/www\.bilibili\.com\/index\.html$/],
instantStyles: [
@ -12,4 +87,19 @@ export const component = defineComponentMetadata({
style: () => import('./hide-home-carousel.scss'),
},
],
options: {
disableCarousel: {
displayName: '禁用轮播',
defaultValue: false,
},
blur: {
displayName: '图片模糊',
defaultValue: 0,
slider: {
min: 0,
max: 100,
step: 1,
},
},
},
})