企业官网建设流程全解析

• 前端
• 音视频

导读

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），下表汇总了每一项的默认值与可选项：

以下对各项的底层语义逐一展开。

2.1 主题颜色（themeColor）

默认值#00A0D8即哔哩哔哩品牌蓝。该颜色会同步给全脚本的组件主题与按钮、开关等 UI 元素，同时也被textColor（文本颜色）选项联动使用：当文本颜色设为「自动」时，背景为主题色的元素会根据背景亮度自动决定使用黑字还是白字。

2.2 加载模式：功能加载模式 与 样式加载模式

两项都基于 src/core/loading-mode.ts 中的LoadingMode枚举：

• 延后（Delay）：在load事件后加载，避开页面初始化高峰期，风险最小；
• 同时（Race）：在DOMContentLoaded（DCL）事件时与 B 站原脚本同时加载，更快但可能抢占资源。

注意两者的默认值不同：功能默认延后，样式默认同时。因为样式（SCSS/CSS）通常希望尽早生效以减少闪烁，而脚本逻辑延后执行更稳妥。这是仓库源码中直接可见的默认策略（index.ts）。

2.3 文本颜色（textColor）

对应 src/core/text-color.ts 中的TextColor枚举，三个取值：

• 自动：依据背景亮度自动选黑/白，保证对比度；
• 白色：始终使用白字（适合较深主题色）；
• 黑色：始终使用黑字（适合较浅主题色）。

官方说明文档强调：「文本颜色设为自动时，背景色为主题色的元素，会根据背景色的亮度自动决定使用黑色还是白色的文字」（见 index.md）。若你自定义了很浅的主题色又希望文字保持深色，可显式选择黑色。

2.4 更新源（cdnRoot）与热更新机制

cdnRoot决定在线仓库（功能数据）的获取来源，对应 src/core/cdn-types.ts：

• jsDelivr：源码中已标注@deprecated的旧选项；
• AltCdn：默认值，走编译期写入的meta.compilationInfo.altCdn.root(branch, owner)；
• GitHub：直接拼接https://raw.githubusercontent.com/${owner}/${repo}/${branch}/，仓库所有者默认取defaultOwner = 'the1812'。

文档特别提醒两点（index.md）：

1. 更换更新源不会影响已安装的组件，它只作用于后续从在线仓库拉取的功能数据；
2. 更新源与脚本本体的更新源无关，脚本本体升级走独立的更新链路。

这意味着你可以放心切换更新源来提速（例如网络环境对某个 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/settings/helpers.ts 中，devMode开启时访问不存在的组件设置会输出console.warn('No settings found for component:', component)，方便开发者发现拼写错误。可见devMode本质是一套面向插件/功能开发者的诊断通道。

三、文件命名格式（filenameFormat）完整语法

本节是官方文档中篇幅最大、也最实战的部分（index.md）。自定义命名格式用于各功能下载单个文件时的命名。

3.1 可用变量表

默认格式为[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.ts）：

• title依次探测视频页.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 渲染，支持从侧边栏停靠点开合。若需批量迁移配置，可直接编辑脚本存储中的设置对象，但更推荐在面板内逐项调整以规避格式错误。

六、小结：一份可直接落地的推荐配置

综合官方文档与源码实现，给出一个兼顾日常使用与开发调试的配置参考：

理解「通用设置」面板，就等于掌握了 Bilibili-Evolved 的全局行为开关：从脚本与样式的加载时序，到在线功能的更新来源，再到每一个下载文件的命名规范，都在这一个面板内集中控制。配合本文给出的源码路径（settings-panel/index.ts、core/utils/title.ts、core/utils/log.ts），你可以随时深入源码验证每一项设置的真实行为，进而为自定义功能开发或问题排查打下基础。

• 前端
• 音视频