Bilibili-Evolved 快速收藏组件详解视频页一键收藏与快捷键绑定实现【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved快速收藏Quick Favorite是哔哩哔哩增强脚本 Bilibili-Evolved 中一个高实用度的视频页功能组件它允许用户在视频页面将当前视频一键收藏到预先指定的某个收藏夹省去每次点击系统收藏按钮后二次选择收藏夹的繁琐操作。本文以 registry/lib/components/video/quick-favorite/index.md 为骨架结合其源码实现入口、选项、Vue 组件与快捷键插件完整讲解该功能的配置方式、交互逻辑、底层 API 调用链与使用注意事项帮助读者理解并掌握该组件的原理与配置方法。一、功能概述把选择收藏夹这件事一次性做完B 站原生收藏流程中用户点击收藏后仍需在弹出的面板中选择目标收藏夹若默认收藏夹不是自己想要的每次都要重复选择。快速收藏组件解决的正是这一痛点在视频页面含普通视频、活动视频、合集连播等的操作栏收藏按钮旁注入一个快速收藏入口组件内部记录一个固定的快速收藏夹 ID首次启动时配置用户只需单击该入口即可把当前视频直接加入或移出这个收藏夹全程无需打开收藏面板。官方文档原文对该功能的核心描述是启用快速收藏在视频页面可以一键收藏到设定的某个收藏夹。首次启动时或者右键点击快速收藏图标可以配置快速收藏夹并特别提醒如果在收藏夹播放页面仍然显示是不会实时同步右侧的播放列表的——这两点将在下文逐一展开。二、安装与配置三个可配置项及其默认值该组件以标准组件元数据形式注册入口逻辑位于 registry/lib/components/video/quick-favorite/index.ts配置项定义于同目录下的 registry/lib/components/video/quick-favorite/options.ts。用户可在脚本的设置面板组件详情页中查看和修改以下配置配置键显示名称默认值说明favoriteFolderID快速收藏夹ID0目标收藏夹的 ID。0表示未选择该选项被标记为hidden通常不直接在设置面板展示而是通过首次启动引导或右键交互写入showInFavoritePages在收藏夹播放页面仍然显示false在收藏夹连播页面是否仍然显示快速收藏入口。默认关闭符合官方文档收藏夹播放页面不显示的默认行为displayMode显示方式Auto自动控制入口的展示形态枚举值见下displayMode为下拉枚举类型共三种取值Auto自动默认模式。根据窗口尺寸自适应——当视口宽度 ≤ 1340px 或高度 ≤ 750px 时自动退化为纯图标模式隐藏文字快速收藏大屏下显示图标 文字Icon图标始终只显示图标IconAndText图标 文字始终显示图标 文字。以上显示逻辑由 registry/lib/components/video/quick-favorite/QuickFavorite.vue 中displayModeClass计算属性与 scoped 样式的媒体查询共同实现。配置快速收藏夹的两种方式按官方文档说明配置快速收藏夹有两条路径首次启动引导组件启用后第一次进入视频页时由于favoriteFolderID为0未选择单击快速收藏入口不会直接收藏而是弹出收藏夹选择列表引导用户完成首次配置右键随时重配在任何时候右键点击快速收藏图标或文字都会再次打开收藏夹选择下拉列表VDropdown切换后通过saveFavoriteList立即写入配置并刷新收藏状态。交互细节左键点击触发toggle()收藏/取消右键点击click.right.prevent触发选择列表的显示与隐藏点击组件外部区域会自动收起列表。选择列表中还带有提示文字右键点击快速收藏可再次打开。三、页面匹配与入口注入它出现在哪些页面生效页面范围组件通过元数据的urlInclude: videoUrls声明生效范围videoUrls定义于 src/core/utils/urls.ts由以下几类组成普通视频页//www.bilibili.com/video/活动视频页拜年纪等/\/\/www\.bilibili\.com\/festival\//合集连播类页面mediaListUrls稍后再看页、收藏夹连播页favoriteListUrls、UP 主视频连播页以及所有/list/页面入口函数entry中还包含两道前置检查若当前页面命中收藏夹连播页favoriteListUrls且用户未开启showInFavoritePages则直接返回、不注入若用户未登录getUID()为空同样直接返回——因为收藏操作强依赖用户身份。按钮插入位置组件加载后通过mountVueComponent挂载QuickFavorite.vue并调用addVideoActionButton(() vm.$el)将入口注入视频操作栏。该工具函数位于 src/components/video/video-actions.ts其核心逻辑是等待播放器就绪playerReady()通过选择器.video-toolbar .ops .collect, .video-toolbar-v1 .toolbar-left .collect, .video-toolbar-left-item.video-fav, .toolbar .toolbar-left .favorite定位 B 站原生收藏按钮兼容新旧两套工具栏结构在收藏按钮右侧插入快速收藏入口。同时组件监听videoChange定义于 src/core/observer.ts事件当页面发生视频切换如连播下一个视频时更新组件内部的aid并重新同步收藏状态保证入口图标始终反映当前视频的真实收藏情况。四、核心交互实现收藏/取消、状态同步与提示QuickFavorite.vue是功能的完整实现其数据模型、B 站 API 调用与交互反馈如下。收藏状态的两级来源组件维护isFavorite当前视频是否已在快速收藏夹中、list用户全部收藏夹列表与selectedFavoriteList当前选中的收藏夹三个核心状态loadSavedList()页面初始化时调用https://api.bilibili.com/x/v3/fav/folder/created/list-all?type2rid{aid}up_mid{uid}获取当前视频在各收藏夹中的收藏状态接口返回每项的fav_state据此定位快速收藏夹并设置isFavorite若快速收藏夹 ID 已失效返回列表中找不到则自动把favoriteFolderID重置为0loadFavoriteList()首次打开选择列表时调用https://api.bilibili.com/medialist/gateway/base/created?pn1ps100up_mid{uid}is_space0拉取用户创建的收藏夹列表最多 100 个映射为下拉选项。两个接口均通过getJsonWithCredentials携带 Cookie 凭据请求失败时输出错误日志。单击收藏/取消的完整流程toggle()方法的执行流程若favoriteFolderID 0尚未配置收藏夹不执行收藏而是直接打开选择列表引导配置否则构造表单数据{ rid: aid, type: 2, add_media_ids / del_media_ids, csrf }——type: 2表示视频资源当前isFavorite为真时把收藏夹 ID 写入del_media_ids移出否则写入add_media_ids加入以POST方式请求https://api.bilibili.com/x/v3/fav/resource/dealContent-Type为application/x-www-form-urlencoded携带credentials: include与 CSRF 令牌getCsrf()成功后翻转isFavorite并通过showTip()弹出 2 秒的浮动提示例如已添加至收藏夹: {收藏夹名}或已移出收藏夹: {收藏夹名}失败时通过Toast.error弹出快速收藏失败的错误通知。该请求是标准的 B 站收藏/取消收藏接口与原生收藏按钮共用同一套服务端逻辑因此收藏结果与 B 站账户数据完全一致。五、快捷键支持快速收藏的键盘绑定除了鼠标点击该组件还内置了快捷键插件定义于入口文件的plugin字段在组件启用时自动向全局快捷键系统keymap注册动作动作注册keymap.actions新增quickFavorite动作其执行逻辑为调用clickElement(.be-quick-favorite, context)——即模拟点击组件根元素class 为quick-favorite be-quick-favorite video-toolbar-left-item的 spanclickElement定义于 registry/lib/components/utils/keymap/actions.ts默认按键keymap.presets中预设默认快捷键为shift s。也就是说在视频页同时按下Shift S即可触发与单击快速收藏图标完全相同的收藏/取消行为。用户可在快捷键组件的设置中查看或修改该绑定。六、已知行为与注意事项官方文档在末尾明确指出一个需要注意的行为如果在收藏夹播放页面仍然显示该功能其状态不会实时同步右侧的播放列表。结合源码可进一步解释这一现象的成因组件的entry逻辑中收藏夹连播页//www.bilibili.com/medialist/play/ml、//www.bilibili.com/list/ml见 src/core/utils/urls.ts默认被排除配置showInFavoritePages默认false入口会直接return这是设计上的默认行为。若用户显式开启showInFavoritePages强制在收藏夹连播页显示入口则需要理解收藏夹连播页右侧的播放列表是基于原收藏夹动态加载的而快速收藏操作会改变视频在目标收藏夹中的归属二者之间不存在实时的双向同步机制——右侧播放列表不会因快速收藏/移出操作而即时增删条目。因此建议在收藏夹连播页面保持默认的隐藏行为仅在普通视频页使用快速收藏。此外还需注意该功能强依赖登录状态未登录时入口不会注入快速收藏夹被删除或失效后组件的favoriteFolderID会被自动重置为0此时单击入口会再次弹出配置列表提示用户重新选择快速收藏本质是对type: 2视频资源调用 B 站收藏接口其操作结果与在 B 站网页端手动收藏完全等价可在 B 站收藏夹页面正常查看。七、总结快速收藏组件是 Bilibili-Evolved 中少即是多的典型设计通过一个固定收藏夹 ID 的预配置把收藏从点按钮 → 选夹子 → 确认的三步操作压缩为单击一步同时提供右键重配、显示方式调节、Shift S快捷键等补充能力。理解其入口注入addVideoActionButton、状态同步syncFavoriteState与收藏 API 调用x/v3/fav/resource/deal的实现也能为读者在 Bilibili-Evolved 中开发同类操作栏增强组件提供完整的参考范式。【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Bilibili-Evolved 快速收藏组件详解：视频页一键收藏与快捷键绑定实现
Bilibili-Evolved 快速收藏组件详解视频页一键收藏与快捷键绑定实现【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved快速收藏Quick Favorite是哔哩哔哩增强脚本 Bilibili-Evolved 中一个高实用度的视频页功能组件它允许用户在视频页面将当前视频一键收藏到预先指定的某个收藏夹省去每次点击系统收藏按钮后二次选择收藏夹的繁琐操作。本文以 registry/lib/components/video/quick-favorite/index.md 为骨架结合其源码实现入口、选项、Vue 组件与快捷键插件完整讲解该功能的配置方式、交互逻辑、底层 API 调用链与使用注意事项帮助读者理解并掌握该组件的原理与配置方法。一、功能概述把选择收藏夹这件事一次性做完B 站原生收藏流程中用户点击收藏后仍需在弹出的面板中选择目标收藏夹若默认收藏夹不是自己想要的每次都要重复选择。快速收藏组件解决的正是这一痛点在视频页面含普通视频、活动视频、合集连播等的操作栏收藏按钮旁注入一个快速收藏入口组件内部记录一个固定的快速收藏夹 ID首次启动时配置用户只需单击该入口即可把当前视频直接加入或移出这个收藏夹全程无需打开收藏面板。官方文档原文对该功能的核心描述是启用快速收藏在视频页面可以一键收藏到设定的某个收藏夹。首次启动时或者右键点击快速收藏图标可以配置快速收藏夹并特别提醒如果在收藏夹播放页面仍然显示是不会实时同步右侧的播放列表的——这两点将在下文逐一展开。二、安装与配置三个可配置项及其默认值该组件以标准组件元数据形式注册入口逻辑位于 registry/lib/components/video/quick-favorite/index.ts配置项定义于同目录下的 registry/lib/components/video/quick-favorite/options.ts。用户可在脚本的设置面板组件详情页中查看和修改以下配置配置键显示名称默认值说明favoriteFolderID快速收藏夹ID0目标收藏夹的 ID。0表示未选择该选项被标记为hidden通常不直接在设置面板展示而是通过首次启动引导或右键交互写入showInFavoritePages在收藏夹播放页面仍然显示false在收藏夹连播页面是否仍然显示快速收藏入口。默认关闭符合官方文档收藏夹播放页面不显示的默认行为displayMode显示方式Auto自动控制入口的展示形态枚举值见下displayMode为下拉枚举类型共三种取值Auto自动默认模式。根据窗口尺寸自适应——当视口宽度 ≤ 1340px 或高度 ≤ 750px 时自动退化为纯图标模式隐藏文字快速收藏大屏下显示图标 文字Icon图标始终只显示图标IconAndText图标 文字始终显示图标 文字。以上显示逻辑由 registry/lib/components/video/quick-favorite/QuickFavorite.vue 中displayModeClass计算属性与 scoped 样式的媒体查询共同实现。配置快速收藏夹的两种方式按官方文档说明配置快速收藏夹有两条路径首次启动引导组件启用后第一次进入视频页时由于favoriteFolderID为0未选择单击快速收藏入口不会直接收藏而是弹出收藏夹选择列表引导用户完成首次配置右键随时重配在任何时候右键点击快速收藏图标或文字都会再次打开收藏夹选择下拉列表VDropdown切换后通过saveFavoriteList立即写入配置并刷新收藏状态。交互细节左键点击触发toggle()收藏/取消右键点击click.right.prevent触发选择列表的显示与隐藏点击组件外部区域会自动收起列表。选择列表中还带有提示文字右键点击快速收藏可再次打开。三、页面匹配与入口注入它出现在哪些页面生效页面范围组件通过元数据的urlInclude: videoUrls声明生效范围videoUrls定义于 src/core/utils/urls.ts由以下几类组成普通视频页//www.bilibili.com/video/活动视频页拜年纪等/\/\/www\.bilibili\.com\/festival\//合集连播类页面mediaListUrls稍后再看页、收藏夹连播页favoriteListUrls、UP 主视频连播页以及所有/list/页面入口函数entry中还包含两道前置检查若当前页面命中收藏夹连播页favoriteListUrls且用户未开启showInFavoritePages则直接返回、不注入若用户未登录getUID()为空同样直接返回——因为收藏操作强依赖用户身份。按钮插入位置组件加载后通过mountVueComponent挂载QuickFavorite.vue并调用addVideoActionButton(() vm.$el)将入口注入视频操作栏。该工具函数位于 src/components/video/video-actions.ts其核心逻辑是等待播放器就绪playerReady()通过选择器.video-toolbar .ops .collect, .video-toolbar-v1 .toolbar-left .collect, .video-toolbar-left-item.video-fav, .toolbar .toolbar-left .favorite定位 B 站原生收藏按钮兼容新旧两套工具栏结构在收藏按钮右侧插入快速收藏入口。同时组件监听videoChange定义于 src/core/observer.ts事件当页面发生视频切换如连播下一个视频时更新组件内部的aid并重新同步收藏状态保证入口图标始终反映当前视频的真实收藏情况。四、核心交互实现收藏/取消、状态同步与提示QuickFavorite.vue是功能的完整实现其数据模型、B 站 API 调用与交互反馈如下。收藏状态的两级来源组件维护isFavorite当前视频是否已在快速收藏夹中、list用户全部收藏夹列表与selectedFavoriteList当前选中的收藏夹三个核心状态loadSavedList()页面初始化时调用https://api.bilibili.com/x/v3/fav/folder/created/list-all?type2rid{aid}up_mid{uid}获取当前视频在各收藏夹中的收藏状态接口返回每项的fav_state据此定位快速收藏夹并设置isFavorite若快速收藏夹 ID 已失效返回列表中找不到则自动把favoriteFolderID重置为0loadFavoriteList()首次打开选择列表时调用https://api.bilibili.com/medialist/gateway/base/created?pn1ps100up_mid{uid}is_space0拉取用户创建的收藏夹列表最多 100 个映射为下拉选项。两个接口均通过getJsonWithCredentials携带 Cookie 凭据请求失败时输出错误日志。单击收藏/取消的完整流程toggle()方法的执行流程若favoriteFolderID 0尚未配置收藏夹不执行收藏而是直接打开选择列表引导配置否则构造表单数据{ rid: aid, type: 2, add_media_ids / del_media_ids, csrf }——type: 2表示视频资源当前isFavorite为真时把收藏夹 ID 写入del_media_ids移出否则写入add_media_ids加入以POST方式请求https://api.bilibili.com/x/v3/fav/resource/dealContent-Type为application/x-www-form-urlencoded携带credentials: include与 CSRF 令牌getCsrf()成功后翻转isFavorite并通过showTip()弹出 2 秒的浮动提示例如已添加至收藏夹: {收藏夹名}或已移出收藏夹: {收藏夹名}失败时通过Toast.error弹出快速收藏失败的错误通知。该请求是标准的 B 站收藏/取消收藏接口与原生收藏按钮共用同一套服务端逻辑因此收藏结果与 B 站账户数据完全一致。五、快捷键支持快速收藏的键盘绑定除了鼠标点击该组件还内置了快捷键插件定义于入口文件的plugin字段在组件启用时自动向全局快捷键系统keymap注册动作动作注册keymap.actions新增quickFavorite动作其执行逻辑为调用clickElement(.be-quick-favorite, context)——即模拟点击组件根元素class 为quick-favorite be-quick-favorite video-toolbar-left-item的 spanclickElement定义于 registry/lib/components/utils/keymap/actions.ts默认按键keymap.presets中预设默认快捷键为shift s。也就是说在视频页同时按下Shift S即可触发与单击快速收藏图标完全相同的收藏/取消行为。用户可在快捷键组件的设置中查看或修改该绑定。六、已知行为与注意事项官方文档在末尾明确指出一个需要注意的行为如果在收藏夹播放页面仍然显示该功能其状态不会实时同步右侧的播放列表。结合源码可进一步解释这一现象的成因组件的entry逻辑中收藏夹连播页//www.bilibili.com/medialist/play/ml、//www.bilibili.com/list/ml见 src/core/utils/urls.ts默认被排除配置showInFavoritePages默认false入口会直接return这是设计上的默认行为。若用户显式开启showInFavoritePages强制在收藏夹连播页显示入口则需要理解收藏夹连播页右侧的播放列表是基于原收藏夹动态加载的而快速收藏操作会改变视频在目标收藏夹中的归属二者之间不存在实时的双向同步机制——右侧播放列表不会因快速收藏/移出操作而即时增删条目。因此建议在收藏夹连播页面保持默认的隐藏行为仅在普通视频页使用快速收藏。此外还需注意该功能强依赖登录状态未登录时入口不会注入快速收藏夹被删除或失效后组件的favoriteFolderID会被自动重置为0此时单击入口会再次弹出配置列表提示用户重新选择快速收藏本质是对type: 2视频资源调用 B 站收藏接口其操作结果与在 B 站网页端手动收藏完全等价可在 B 站收藏夹页面正常查看。七、总结快速收藏组件是 Bilibili-Evolved 中少即是多的典型设计通过一个固定收藏夹 ID 的预配置把收藏从点按钮 → 选夹子 → 确认的三步操作压缩为单击一步同时提供右键重配、显示方式调节、Shift S快捷键等补充能力。理解其入口注入addVideoActionButton、状态同步syncFavoriteState与收藏 API 调用x/v3/fav/resource/deal的实现也能为读者在 Bilibili-Evolved 中开发同类操作栏增强组件提供完整的参考范式。【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考