Bilibili-Evolved 通用设置（settingsPanel）组件全解析：加载模式、更新源与文件命名格式配置指南

前端音视频【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved点击查看免费下载导读Bilibili-Evolved 作为一款功能强大的哔哩哔哩增强脚本其绝大多数全局行为都由「通用设置」面板组件名为settingsPanel显示名为「通用设置」统管。本文以该面板的官方说明文档 src/components/settings-panel/index.md 为主体结合其组件入口 index.ts 及底层枚举与工具源码系统讲解每一项设置的取值范围、默认值、底层实现与实战效果并重点剖析文档中「文件命名格式」与「批量命名格式」的完整语法规则。读完本文你将能够精准调校脚本的加载时机、主题配色、更新源与下载文件命名并理解开发者模式在调试与性能分析中的真实作用。一、组件概览设置面板在脚本架构中的位置「通用设置」是 Bilibili-Evolved 的一个不可配置configurable: false的常驻组件其元数据定义见 src/components/settings-panel/index.ts它本身没有开关始终随脚本加载并额外以「设置面板 - 功能扩展」插件plugin.displayName的形式向其他组件提供外部动作能力provideActions()。从入口实现index.ts可以看到它的两个关键行为iframe 环境跳过通过isIframe()判断在嵌入页面中不渲染面板避免重复挂载延迟挂载requestIdleCallback空闲时动态import(./SettingsContainer.vue)并挂载到document.body末尾保证不阻塞页面主流程。面板停靠方向的切换也由入口监听实现dockSide变化时在document.body上切换settings-panel-dock-right类index.ts对应 dock.ts 中的SettingsPanelDockSide枚举左侧/右侧。二、核心选项逐项详解默认值与取值范围面板的全部选项通过defineOptionsMetadata声明index.ts下表汇总了每一项的默认值与可选项选项 key显示名默认值可选项 / 取值themeColor主题颜色#00A0D8任意颜色值color: truescriptLoadingMode功能加载模式延后延后 / 同时styleLoadingMode样式加载模式同时延后 / 同时textColor文本颜色自动自动 / 白色 / 黑色cdnRoot更新源AltCdnjsDelivr / AltCdn / GitHubdockSide设置面板停靠左侧左侧 / 右侧filenameFormat文件命名格式[title][ - ep]多行文本batchFilenameFormat批量命名格式[n - ][ep]多行文本downloadPackageEmitMode文件下载模式打包下载打包下载 / 单独下载devMode开发者模式关闭布尔开关以下对各项的底层语义逐一展开。2.1 主题颜色themeColor默认值#00A0D8即哔哩哔哩品牌蓝。该颜色会同步给全脚本的组件主题与按钮、开关等 UI 元素同时也被textColor文本颜色选项联动使用当文本颜色设为「自动」时背景为主题色的元素会根据背景亮度自动决定使用黑字还是白字。2.2 加载模式功能加载模式 与 样式加载模式两项都基于 src/core/loading-mode.ts 中的LoadingMode枚举延后Delay在load事件后加载避开页面初始化高峰期风险最小同时Race在DOMContentLoadedDCL事件时与 B 站原脚本同时加载更快但可能抢占资源。注意两者的默认值不同功能默认延后样式默认同时。因为样式SCSS/CSS通常希望尽早生效以减少闪烁而脚本逻辑延后执行更稳妥。这是仓库源码中直接可见的默认策略index.ts。2.3 文本颜色textColor对应 src/core/text-color.ts 中的TextColor枚举三个取值自动依据背景亮度自动选黑/白保证对比度白色始终使用白字适合较深主题色黑色始终使用黑字适合较浅主题色。官方说明文档强调「文本颜色设为自动时背景色为主题色的元素会根据背景色的亮度自动决定使用黑色还是白色的文字」见 index.md。若你自定义了很浅的主题色又希望文字保持深色可显式选择黑色。2.4 更新源cdnRoot与热更新机制cdnRoot决定在线仓库功能数据的获取来源对应 src/core/cdn-types.tsjsDelivr源码中已标注deprecated的旧选项AltCdn默认值走编译期写入的meta.compilationInfo.altCdn.root(branch, owner)GitHub直接拼接https://raw.githubusercontent.com/${owner}/${repo}/${branch}/仓库所有者默认取defaultOwner the1812。文档特别提醒两点index.md更换更新源不会影响已安装的组件它只作用于后续从在线仓库拉取的功能数据更新源与脚本本体的更新源无关脚本本体升级走独立的更新链路。这意味着你可以放心切换更新源来提速例如网络环境对某个 CDN 更友好而不必担心已装组件被重置。2.5 文件下载模式downloadPackageEmitMode对应 src/core/download-mode.ts 的DownloadPackageEmitMode枚举打包下载Packed默认多个文件合并为一个 zip 下载单独下载Individual触发多个独立下载请求。该选项决定多个文件下载时浏览器的实际行为打包模式适合批量收藏多集视频/多张图片单独模式则便于逐个保存到不同位置。2.6 设置面板停靠dockSide对应 src/components/settings-panel/dock.ts 的SettingsPanelDockSide枚举左侧/右侧默认停靠左侧。切换后由入口逻辑通过 body 类名settings-panel-dock-right驱动面板布局index.ts。2.7 开发者模式devMode开发者模式是排查问题与性能分析的核心开关默认关闭。官方文档列出了开启后的四项效果index.md仓库源码为每一项提供了精确的实现证据文档描述源码实现控制台统计各功能加载耗时src/core/performance/component-trace.ts 中componentLoadTrace在devMode开启时用performance.now()记录componentLoadTime/componentResolveTime两张 Mapplugin-trace.ts 与 promise-trace.ts 同理本地安装的功能无视更新间隔期src/components/auto-update/checker.ts 中alwaysUpdate devMode判定auto-update/index.ts 也有devMode分支允许输出 debug 级别日志src/core/utils/log.ts 中scopedConsole.debug在!devMode时直接返回不输出报错 Toast 显示完整堆栈src/core/utils/log.ts 的logErrordevMode开启时取error.stack否则仅取error.message此外src/core/settings/helpers.ts 中devMode开启时访问不存在的组件设置会输出console.warn(No settings found for component:, component)方便开发者发现拼写错误。可见devMode本质是一套面向插件/功能开发者的诊断通道。三、文件命名格式filenameFormat完整语法本节是官方文档中篇幅最大、也最实战的部分index.md。自定义命名格式用于各功能下载单个文件时的命名。3.1 可用变量表变量含义说明title视频标题 / 直播间标题优先取页面结构化元素回退到document.title解析ep选集标题番剧/多 P 视频/稍后再看中的当前集标题aidAV 号直接读取页面全局变量bvidBV 号同上cidCID每个视频的唯一编号一个 AV 号可能对应多集故 CID 更精确userID视频 UP 主的 uid支持单人投稿与联合投稿staff-info两种来源lid直播间号从直播页 URL 正则提取y/M/d年 / 月 / 日取当前日期h/m/s/ms时 / 分 / 秒 / 毫秒取当前时间默认格式为[title][ - ep]标题 选集标题无选集标题时仅标题。3.2 方括号条件语法这是命名格式最核心的规则变量必须放在方括号[ ]内方括号内的其他内容会在变量有效时才出现方括号外的内容则无条件出现。举例文档原例index.md格式[title] - [ep]即使没有选集标题-也会出现在文件名里因为它写在方括号外得到类似视频标题 -的残留格式[title][ - ep]默认没有选集标题时-一并消失文件名干净无残留。该规则在源码 src/core/utils/title.ts 的formatTitle中得到了精确实现先用tokenSplit按[/]深度拆分 token支持嵌套方括号再对每个[xxx]token 用正则^\[([^\[\]]*?)name([^\[\]]*?)\]$匹配——name两侧的内容如-只有变量值存在Boolean(value)为真时才拼接title.ts。sortedVariables按变量名长度降序匹配避免s秒误匹配ms毫秒、y误匹配其他含y的变量名等前缀冲突。3.3 完整示例文档给出的实战示例index.md[title][ AVaid] [y]-[M]-[d] [h]-[m]-[s]能够生成类似xxxx AV23333 2019-05-29 19-59-44的文件名其中[ AVaid]有 AV 号时输出AV23333含前置空格无 AV 号如直播场景时整段消失[y]-[M]-[d]三段时间变量分别补零到两位数月、日、时、分、秒均padStart(2, 0)见 title.ts[h]-[m]-[s]时分秒同理。3.4 变量来源的源码佐证title、ep、userID等变量并非凭空猜测而是从页面 DOM 与全局变量中实时采集title.tstitle依次探测视频页.video-info-container .video-title、番剧页mediainfo_mediaTitle、直播页live-title最后回退到旧版标题清洗逻辑getLegacyTitle用一组正则去掉「在线观看-bilibili-哔哩哔哩」等后缀ep探测番剧选集#eplist_module li.cursor .ep-title、多 P 列表与稍后再看页userID优先取单人投稿的a.up-name链接再遍历.staff-info中标记为「UP主」的联合投稿成员。这些实现细节决定了变量在不同页面类型下的可用性例如直播页没有aid/bvid/cid/ep此时应避免在格式中无条件引用它们。四、批量命名格式batchFilenameFormat批量下载场景如一次下载多个视频使用独立的batchFilenameFormat默认值为[n - ][ep]。官方文档说明index.md基本规则与「文件命名格式」完全一致方括号条件语法、变量表通用新增变量n数字表示第 n 个视频从 1 开始。因此默认格式[n - ][ep]的语义是多集下载时输出1 - 选集标题、2 - 选集标题…… 若某集缺少选集标题则-随之省略仅保留序号。若要批量文件也包含标题与时间可参考单文件格式组合例如[n - ][title][ - ep]。五、配置修改与持久化所有设置项的读写统一走 src/core/settings 模块addComponentListener、getGeneralSettings等。以getGeneralSettings()为例title.ts 中getFriendlyTitle即读取filenameFormat生成友好标题任意功能代码都能在运行时读取这些全局设置并即时响应。用户修改设置后脚本会自动持久化到本地存储刷新页面后依然生效面板本身通过 SettingsContainer.vue 渲染支持从侧边栏停靠点开合。若需批量迁移配置可直接编辑脚本存储中的设置对象但更推荐在面板内逐项调整以规避格式错误。六、小结一份可直接落地的推荐配置综合官方文档与源码实现给出一个兼顾日常使用与开发调试的配置参考设置推荐值理由主题颜色#00A0D8或自定义品牌色联动文本颜色自动对比度功能加载模式延后避免抢占 B 站脚本资源样式加载模式同时样式尽早生效减少闪烁文本颜色自动自适应深浅主题色更新源AltCdn或网络更优的GitHub只影响在线仓库拉取不影响已装组件文件命名格式[title][ - ep]或[title][ AVaid] [y]-[M]-[d] [h]-[m]-[s]前者简洁后者信息完整批量命名格式[n - ][ep]默认即最佳实践文件下载模式打包下载批量场景减少下载请求数开发者模式日常关闭排障时开启开启后输出堆栈与加载耗时统计理解「通用设置」面板就等于掌握了 Bilibili-Evolved 的全局行为开关从脚本与样式的加载时序到在线功能的更新来源再到每一个下载文件的命名规范都在这一个面板内集中控制。配合本文给出的源码路径settings-panel/index.ts、core/utils/title.ts、core/utils/log.ts你可以随时深入源码验证每一项设置的真实行为进而为自定义功能开发或问题排查打下基础。赞分享前端音视频【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved点击查看免费下载相关推荐如何通过高阶组件与组合组件模式构建强大的Bilibili-Evolved增强脚本如何通过高阶组件与组合组件模式构建强大的Bilibili Evolved增强脚本 Bilibili Evolved作为一款强大的哔哩哔哩增强脚本其核心设计理念前端音视频Bilibili-Evolved v1 风格设置面板样式组件解析从样式覆盖到实现原理Bilibili Evolved v1 风格设置面板样式组件解析从样式覆盖到实现原理 Bilibili Evolved哔哩哔哩增强脚本在向 v2 架构演进前端音视频终极指南Bilibili-Evolved如何通过组合式设计与插槽实现灵活组件复用终极指南Bilibili Evolved如何通过组合式设计与插槽实现灵活组件复用 Bilibili Evolved作为强大的哔哩哔哩增强脚本采用先进的组合式前端音视频创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考