企业官网建设流程全解析

Bilibili-Evolved「选集区域优化」组件（full-episode-title）完全指南：机制、配置与 Alt 键临时切换

【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved

本文围绕 Bilibili-Evolved 内置的「选集区域优化」组件（注册名fullEpisodeTitle）展开，讲解它在视频选集区域的两个核心能力——展开选集标题与展开选集列表——各自的作用范围、底层实现（样式覆盖与事件绑定）以及"按住 Alt 键点击标题临时切换"的交互机制，并说明为何该组件对番剧页面无效。读完本文，你将掌握该组件的全部配置项、默认值、适用条件，并能从源码层面理解其实现原理。

组件定位：面向视频选集区域的两项优化

fullEpisodeTitle组件位于 registry/lib/components/video/full-episode-title/index.md，其展示名为「选集区域优化」，tags归类为componentsTags.video（视频类组件），注册入口为 registry/lib/components/video/full-episode-title/index.ts。

从组件元数据的urlInclude: videoUrls可知，它只在视频页面生效。videoUrls在 src/core/utils/urls.ts 中定义为：

export const videoUrls = ['//www.bilibili.com/video/', ...festivalUrls, ...mediaListUrls]

即仅匹配//www.bilibili.com/video/开头的视频页、活动页与收藏夹（媒体列表）页；而番剧、影视（bangumi）页面属于bangumiUrls，不在videoUrls之内。这正是文档开头强调"对番剧无效"的原因——组件在番剧页根本不会挂载，其针对选集区域的样式与事件逻辑也就不会注入。

两个配置选项：默认值、含义与开关方式

组件在defineComponentMetadata的options字段中声明了两个布尔开关（见 index.ts）：

两个选项默认均为开启。用户可在脚本的「设置 → 视频 → 选集区域优化」中单独开关任意一项，或通过 Bilibili-Evolved 的toggleComponent等控制台 API 动态控制。组件设置变更会通过addComponentListener实时同步到页面（见下文"实现原理"）。

效果一：展开选集标题的样式覆盖细节

该选项通过向document.body添加full-episode-title类，配合 full-episode-title.scss 中body.full-episode-title:not(.disable-full-episode-list)规则块生效（第 2–76 行），覆盖三类页面结构：

• 新版播放页选集卡片（.base-video-sections-v1）：将.video-episode-card及其.video-episode-card__info、.video-episode-card__info-title的固定高度/最大高度解除（height: auto !important、max-height: unset !important），标题文字允许换行（white-space: normal）、行高设为1.5，使长标题完整可见；同时让.video-section-list在非折叠状态下高度自适应。
• 传统分 P 列表（.multi-page-v1/.multi-page）：解除.cur-list li的高度限制，链接文字overflow: visible且允许换行，.part增加上下内边距、行高1.75，.duration（时长）垂直居中，避免超长分 P 名称被截断。
• 新版播放器选集（.video-pod）：对.video-pod__list.multip使用 CSS 计数器counter-increment: page，并通过.title-txt::before { content: 'P' counter(page) }在每个条目标题前恢复渲染"P + 序号"前缀——这正是文档所述"若为传统分 P 列表，还会恢复显示分 P 数的前缀"的落地实现；同时解除标题文本max-height/height限制并允许换行。

效果二：展开选集列表的样式覆盖细节

该选项对应body.full-episode-list:not(.disable-full-episode-list)规则块（第 77–102 行），解除各选集容器的最大高度限制，让整个列表完全展开：

• .video-sections-content-list的max-height与height强制为自适应；
• .multi-page-v1/.multi-page的.cur-list及其ul的max-height: unset，并给标题.head-left h3设置cursor: pointer（暗示可点击，配合 Alt 键临时切换）；
• .video-pod__body的max-height: unset。

两个选项的 CSS 均以:not(.disable-full-episode-list)为前置条件，为下面的"临时切换"机制预留了禁用通道。

临时切换机制：Alt + 左键点击选集标题

文档特别说明：打开展开选集列表时，在选集区域的标题上按住Alt键点击，可以临时切换此组件的效果。其实现位于 index.ts 的entry中，流程如下：

1. 前置判断：若fullEpisodeList选项为false，entry直接return，不注册任何事件——即该快捷键只在"展开选集列表"开启时才可用。
2. 定位标题元素：通过Promise.race并发等待以下 4 个选择器中的最先出现者，兼容新版/旧版播放器与多 P 页面的不同 DOM 结构：
   • .multi-page-v1 .head-left h3（传统分 P 列表标题）
   • .video-sections-v1 .first-line-title（新版选集标题）
   • .base-video-sections-v1 .first-line-title（新版选集标题的另一结构）
   • .video-pod .video-pod__header .title（新版播放器选集标题）
3. 绑定点击监听：给该标题元素挂载click监听（捕获阶段{ capture: true }），仅当e.altKey === true且e.button === 0（左键）时触发，随后：
   • 在document.body上toggle一个disable-full-episode-list类；
   • 调用e.preventDefault()与e.stopImmediatePropagation()，阻止默认行为并阻断其他监听器。

由于 SCSS 中所有展开规则都带:not(.disable-full-episode-list)限定，body 上出现该类时，两个选项的全部样式覆盖会整体失效，页面恢复 B 站原生折叠状态；再次 Alt+左键点击即可重新开启。这一机制实现了"无需进入设置页即可在当前页面临时对比优化前后效果"的轻量交互。

实现原理：选项监听与类名驱动的样式切换

组件整体是一个典型的"设置项 → body 类名 → SCSS 覆盖"驱动模型，核心逻辑集中在entry（见 index.ts）：

entry: ({ metadata: { options } }) => { Object.keys(options).forEach(key => { addComponentListener( `${name}.${key}`, (value: boolean) => { document.body.classList.toggle(lodash.kebabCase(key), value) }, true, ) }) // ... }

• 对fullEpisodeTitle、fullEpisodeList两个选项各注册一个监听器，路径为fullEpisodeTitle.fullEpisodeTitle与fullEpisodeTitle.fullEpisodeList；
• 回调将选项名经kebabCase转换为full-episode-title/full-episode-list后，直接toggle到document.body上，与 SCSS 选择器一一对应；
• 第三个参数initCall = true表示注册后立即以当前设置值触发一次，保证脚本加载瞬间类名即与用户设置同步。

addComponentListener定义于 src/core/settings/index.ts，其内部通过componentPath把路径映射为components.${name}.options.${optionName}（见同文件第 60–63 行），再转交给底层的设置变更监听系统，最终实现对 Bilibili-Evolved 持久化设置存储的响应式订阅。组件元数据由 src/components/define.ts 的defineComponentMetadata定义，样式则通过instantStyles的() => import('./full-episode-title.scss')按需异步加载。

适用场景与限制小结

• 适用页面：B 站视频播放页（含活动页、媒体列表页），即videoUrls匹配的 URL；对番剧、影视等bangumiUrls页面无效，属设计使然。
• 推荐场景：分 P 较多且标题较长、默认被截断或列表被折叠的视频；需要快速核对各分 P 完整名称时，开启两项即可全部展开。
• 临时对比：在"展开选集列表"开启时，按住Alt键左键点击选集标题，可在"展开"与"原生折叠"间即时往返切换，无需修改设置。
• 可验证依据：完整配置项与默认值见 index.ts；样式覆盖细节见 full-episode-title.scss；URL 适用范围见 src/core/utils/urls.ts。

该组件不依赖任何外部请求，纯本地 DOM 与 CSS 操作，适合作为理解 Bilibili-Evolved"组件选项 + body 类名 + SCSS 覆盖"架构的最小范例。

【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved