Bilibili-Evolved 隐藏视频分享按钮组件源码结构与样式适配原理详解【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved本篇文章围绕 Bilibili-Evolved 组件库中「隐藏视频分享」功能展开结合组件定义源码与样式实现深入讲解一个纯样式型组件entry 为空函数、仅通过 instantStyles 注入 CSS从元数据声明、样式注入到多版本播放器适配的完整实现链路。读完本文你将掌握如何阅读和理解 Bilibili-Evolved 中 hide 系列隐藏类组件的源码结构并能在自己的组件开发中复用这套「样式即功能」的轻量模式。一、功能概述该组件的官方功能描述位于 registry/lib/components/style/hide/video/share/index.md隐藏视频和番剧播放器下方的分享按钮。它归属于「样式style」与「视频video」两个标签分类作用是在哔哩哔哩视频页与番剧PGC播放页中将播放器底部工具栏上的「分享」入口整体隐藏从而精简播放器界面、减少误触与视觉干扰。组件本身不携带任何交互逻辑属于典型的纯样式隐藏类组件——这与同目录下的「隐藏稿件投诉按钮」report/index.md等组件采用了完全一致的设计模式。二、组件源码结构剖析「隐藏视频分享」功能由两个文件组成位于 registry/lib/components/style/hide/video/share/ 目录下文件职责index.ts组件元数据定义声明组件身份、分类标签与样式资源hide-video-share.scss具体的隐藏样式实现针对不同播放器版本编写选择器2.1 组件元数据index.tsindex.ts 的完整代码如下import { defineComponentMetadata } from /components/define export const component defineComponentMetadata({ name: hideVideoShare, displayName: 隐藏视频分享, tags: [componentsTags.style, componentsTags.video], instantStyles: [ { name: hideVideoShare, style: () import(./hide-video-share.scss), }, ], entry: none, })逐字段解读其含义name: hideVideoShare组件在代码层级的唯一标识名用于在用户组件管理、样式注入/卸载等场景中定位该组件。displayName: 隐藏视频分享展示在设置面板中的面向用户的中文名称。tags: [componentsTags.style, componentsTags.video]组件分类标签。style表示这是一个样式增强类组件video表示其作用域与视频播放相关。设置面板的标签筛选与搜索依赖该字段。instantStyles即时样式声明。该数组中的每一项都包含name样式标识与style动态import()懒加载的样式文件。这是该组件唯一的功能载体。entry: none入口函数为空。none定义于 src/core/utils/index.ts#L145-L147是一个什么都不做的空函数/** 空函数 */ export const none () { // Do nothing }这意味着该组件没有运行时 JavaScript 逻辑——不需要监听 DOM、不需要轮询、不需要事件绑定功能完全由 CSS 完成。这正体现了隐藏类组件的极简设计哲学能用样式解决的问题绝不引入脚本开销。defineComponentMetadata是组件元数据的类型安全包装函数定义于 src/components/define.ts#L23-L25其类型约束来自 src/components/types.ts其中instantStyles字段在 types.ts#L187 声明为DomInstantStyleDefinition | ShadowDomInstantStyleDefinition数组。2.2 样式实现hide-video-share.scsshide-video-share.scss 是组件的核心它针对哔哩哔哩三种不同的播放器 DOM 结构分别编写了隐藏规则.video-toolbar-v1 { .share-wrap { display: none !important; } } .video-toolbar-container { .video-share-wrap { display: none !important; } } .player-left-components { [class*toolbar_share_info] { display: none !important; } }三组选择器分别对应三类播放器环境可以从源码结构推断其适配意图.video-toolbar-v1 .share-wrap针对旧版v1 世代播放器工具栏。旧版播放器底栏中的分享入口 DOM 节点使用.share-wrap类名。.video-toolbar-container .video-share-wrap针对新版播放器工具栏。新版播放器底栏容器为.video-toolbar-container其中的分享区域类名演变为.video-share-wrap。.player-left-components [class*toolbar_share_info]针对使用 Wasm 播放器BWP时播放器左下侧组件区域的分享信息块。由于该场景下分享节点的类名是带哈希后缀的动态类名如toolbar_share_info_xxx因此使用属性选择器的子串匹配[class*toolbar_share_info]来兜底命中。所有规则统一使用display: none !important强制隐藏目的是对抗 B 站页面自身样式及播放器框架内联样式的优先级确保隐藏规则在任何加载时序下都稳定生效。三、底层机制instantStyles 的注入与卸载要理解该组件为何定义即生效需要追溯instantStyles字段在核心层是如何被消费的。核心逻辑位于 src/core/style.ts当组件启用时核心框架遍历component.instantStyles见 style.ts#L60 附近的component.instantStyles?.forEach(async it {...})通过动态import()加载对应的 SCSS 编译产物并以name作为标识向页面注入style标签。当组件被禁用或卸载时核心框架依据instantStyles中的name逐一移除已注入的样式见 style.ts#L133-L142 中对removeInstantStyle的调用与遍历逻辑实现样式随组件开关自动加载/清理不会在禁用后残留影响页面。这也是为什么style: () import(./hide-video-share.scss)采用懒加载形式样式资源仅在组件被用户启用时才会请求加载未被启用的组件零网络开销。另外需要注意src/components/user-component.ts 在卸载用户组件时会显式移除其instantStyles见 user-component.ts#L101-L105说明该机制同时服务于内置组件与用户自定义组件是整个样式系统的通用基建。四、同类组件模式hide 系列家族「隐藏视频分享」并不是孤例。在 registry/lib/components/style/hide/video/ 目录下还存在一系列结构完全同构的隐藏类组件share隐藏视频分享本文主题组件report隐藏稿件投诉隐藏视频页面中的稿件投诉按钮其hide-video-report.scss同样通过选择器 display: none实现整个hide目录还覆盖了番剧、横幅、首页轮播、热搜、用户卡片、用户头像挂件等多个页面的隐藏需求。这一系列组件的共同特征是组件元数据中tags均包含style分类功能载体全部是instantStyles中声明的 SCSS 文件entry一律为空函数none不引入运行时脚本样式一律使用display: none !important强制隐藏目标元素。如果你在设置面板的「样式」标签下看到某个开关只有开关、没有选项配置且启用后界面某元素立即消失那么它的实现大概率就是这个模式——这也为阅读和理解其他隐藏类组件提供了可复用的方法论。五、使用与配置方式该组件无需任何配置项元数据中未声明options字段使用方式如下在浏览器中安装并启用 Bilibili-Evolved 脚本开发环境可通过 dev-tools/dev-server 启动开发服务器进行调试与热更新。点击脚本设置面板进入「组件设置」或通过搜索框输入「隐藏视频分享」。打开「隐藏视频分享」开关播放器下方的分享按钮即被即时隐藏关闭开关后样式随removeInstantStyle逻辑被清理分享按钮恢复显示。如需在未启用该组件的情况下自行验证效果也可手动将hide-video-share.scss中的规则注入页面控制台观察三类选择器在当前播放器版本下的命中情况。由于 B 站播放器版本迭代频繁v1 → 新版 → Wasm 播放器该组件的选择器覆盖了历史、现行与动态类名三种情况即使未来播放器结构再次调整[class*toolbar_share_info]这类子串匹配规则也能提供一定的容错能力若需适配新结构只需在instantStyles的样式文件中追加新的选择器规则即可无需改动组件框架代码。六、小结「隐藏视频分享」组件是 Bilibili-Evolved 隐藏类组件的一个典型样本以一行功能描述为需求起点通过defineComponentMetadata声明元数据以instantStyles挂载懒加载 SCSS以entry: none保持零脚本开销最终由核心框架 src/core/style.ts 统一完成样式注入与回收。理解这一链路你就掌握了阅读整个 hide 系列乃至所有纯样式组件的通用钥匙。【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考