From b08f444fdc90233a2b7cad102e0be94670699d26 Mon Sep 17 00:00:00 2001 From: wsgh0202 Date: Fri, 25 Jul 2025 23:49:44 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BF=AE=E6=94=B9=E9=80=89?= =?UTF-8?q?=E9=A1=B9=E4=B8=BAswitch=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../utils/remove-promotions/index.md | 5 ++- .../utils/remove-promotions/index.ts | 38 +++++++------------ .../remove-promotions/remove-promotions.scss | 9 +++-- 3 files changed, 23 insertions(+), 29 deletions(-) diff --git a/registry/lib/components/utils/remove-promotions/index.md b/registry/lib/components/utils/remove-promotions/index.md index 3c9aa2bce..836364369 100644 --- a/registry/lib/components/utils/remove-promotions/index.md +++ b/registry/lib/components/utils/remove-promotions/index.md @@ -2,6 +2,7 @@ > 注意: 首页推广模块删除后留下空白区域是正常现象, 如果觉得怪可以开启 `占位文本` 选项. -- `占位文本`: 删除首页推广模块的广告后显示"🚫已屏蔽广告"来替代空白区域. - `保留活动横幅`: 保留视频页面的活动横幅. -- `debug`: 调试模式,用于查看是否正确屏蔽广告 +- `选项` + - `占位文本`: 删除首页推广模块的广告后显示"🚫已屏蔽广告"来替代空白区域. + - `调试模式`: 用于查看是否正确屏蔽广告 diff --git a/registry/lib/components/utils/remove-promotions/index.ts b/registry/lib/components/utils/remove-promotions/index.ts index 06ab03f0d..d191f7587 100644 --- a/registry/lib/components/utils/remove-promotions/index.ts +++ b/registry/lib/components/utils/remove-promotions/index.ts @@ -1,5 +1,5 @@ import { ComponentEntry } from '@/components/types' -import { defineComponentMetadata } from '@/components/define' +import { wrapSwitchOptions } from '@/components/switch-options' // const PromotionMark = 'data-be-promotion-mark' const entry: ComponentEntry = async ({ settings, metadata }) => { @@ -81,22 +81,20 @@ const entry: ComponentEntry = async ({ settings, metadata }) => { }, true, ) - addComponentListener( - `${metadata.name}.showPlaceholder`, - (value: boolean) => { - document.body.classList.toggle('promotion-show-placeholder', value) - }, - true, - ) - addComponentListener( - `${metadata.name}.debug`, - (value: boolean) => { - document.body.classList.toggle('debug', value) - }, - true, - ) } -export const component = defineComponentMetadata({ +export const component = wrapSwitchOptions({ + name: 'removePromotionOptions', + switches: { + showPlaceholder: { + displayName: '占位文本', + defaultValue: true, + }, + debug: { + displayName: '调试模式', + defaultValue: false, + }, + }, +})({ name: 'removePromotions', displayName: '删除广告', entry, @@ -108,10 +106,6 @@ export const component = defineComponentMetadata({ ], tags: [componentsTags.utils], options: { - showPlaceholder: { - displayName: '占位文本', - defaultValue: true, - }, preserveEventBanner: { displayName: '保留活动横幅', defaultValue: false, @@ -120,9 +114,5 @@ export const component = defineComponentMetadata({ displayName: '保留动态商品推荐', defaultValue: false, }, - debug: { - displayName: '调试模式', - defaultValue: false, - }, }, }) diff --git a/registry/lib/components/utils/remove-promotions/remove-promotions.scss b/registry/lib/components/utils/remove-promotions/remove-promotions.scss index 0a2feef3b..960f4e99a 100644 --- a/registry/lib/components/utils/remove-promotions/remove-promotions.scss +++ b/registry/lib/components/utils/remove-promotions/remove-promotions.scss @@ -91,6 +91,9 @@ body:not(.preserve-feed-goods) .bili-dyn-content__orig__additional:has(.dyn-good margin: 0 !important; } +// switch类型选项类名前缀 +$switchPrefix: 'removePromotions-switch'; + // 首页广告、推广 .bili-video-card__wrap:has(.bili-video-card__stats > :is(.bili-video-card__stats--text, svg)), // 视频搜索页广告 @@ -116,16 +119,16 @@ body:not(.preserve-feed-goods) .bili-dyn-content__orig__additional:has(.dyn-good background-color: #333; } - body.promotion-show-placeholder & { + body.#{$switchPrefix}-showPlaceholder & { visibility: visible; } - body.debug & { + body.#{$switchPrefix}-debug & { visibility: hidden !important; } } - body.debug & { + body.#{$switchPrefix}-debug & { visibility: visible; border: red 1px solid; }