Bilibili-Evolved 夜间模式计划时段时间调度机制与源码实现解析【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-EvolvedBilibili-Evolved 是一款开源的哔哩哔哩增强脚本其中的「夜间模式计划时段」组件允许用户设定一个时间范围让夜间模式在该时间段内自动开启、离开该时间段后自动关闭从而避免手动反复切换主题。本文以该组件的说明文档schedule/index.md为主体结合其 TypeScript 实现 与「夜间模式」主组件源码完整讲解配置方法、跨天时间判断逻辑、自动切换调度原理以及与其他夜间模式组件的配合与注意事项。功能概述按时间段自动开关夜间模式「夜间模式计划时段」darkModeSchedule是 Bilibili-Evolved 夜间模式体系下的一个调度型组件。它的核心能力是用户指定一个时间段如18:00至6:00当系统时间进入该时间段时自动开启夜间模式当系统时间离开该时间段时自动关闭夜间模式。从源码中的组件定义可以看出该组件归属于style与general两个标签分类注册名为darkModeSchedule显示名为「夜间模式计划时段」export const component defineComponentMetadata({ name: darkModeSchedule, displayName: 夜间模式计划时段, tags: [componentsTags.style, componentsTags.general], entry: ({ settings }) fullyLoaded(() checkTime(settings)), urlExclude: darkExcludes, options, })见 schedule/index.ts其中entry通过fullyLoaded包装调度函数确保页面核心内容完全加载后才开始首次时间检查urlExclude则复用了夜间模式统一的排除页面列表darkExcludes在这些页面上组件不会生效。配置说明时间段参数的格式与默认值该组件的唯一配置项是range时间段其元数据定义如下const options defineOptionsMetadata({ range: { defaultValue: { start: 18:00, end: 6:00, }, displayName: 时间段, validator: (range: Rangestring) { const { start, end } range const regex /^(\d{1,2}):(\d{1,2})$/ if (!regex.test(start) || !regex.test(end)) { return null } const startTime new ScheduleTime(range.start) const endTime new ScheduleTime(range.end) return { start: startTime.toString(), end: endTime.toString(), } }, }, })见 schedule/index.ts由此可以得到以下配置要点要点说明默认时间段18:00至6:00晚上 18 点到次日早上 6 点时间格式HH:mm或H:mm由正则/^(\d{1,2}):(\d{1,2})$/校验小时允许 1~2 位数字、分钟允许 1~2 位数字格式校验不符合正则的输入会返回null校验失败无法保存输入规范化校验通过后时间会被解析并重新格式化如6:0会规范化为06:00返回保证配置存储格式统一需要注意的是校验正则本身并不严格限制小时在 0~23、分钟在 0~59 的范围内但ScheduleTime的解析逻辑会对越界值进行规范化处理详见下一节因此即使输入了如25:70这样的值也会被折算为合法的时钟时间。时间解析与规范化ScheduleTime 类组件实现的核心是一个轻量的时间工具类ScheduleTime负责完成字符串解析、数值规范化与时间比较。其构造函数支持三种调用方式class ScheduleTime { constructor(...args: [] | [string] | [number, number]) { if (args.length 0) { const now new Date() this.hour now.getHours() this.minute now.getMinutes() } else if (args.length 1) { const [text] args ;[this.hour, this.minute] text .split(:) .slice(0, 2) .map(it ScheduleTime.validatePart(it)) this.normalize() } else if (args.length 2) { ;[this.hour, this.minute] args } } }见 schedule/index.ts无参数取当前系统时间小时 分钟用于现在的判断一个字符串形如18:00先按冒号分割用validatePart逐段解析为数字再调用normalize()规范化两个数字直接以(hour, minute)赋值。validatePart只接受 0~59 之间的数字其余返回null。而normalize()会把越界的分钟折算进位/借位到小时、把越界的小时折算到 0~23 区间normalize() { while (this.minute 0) { this.minute 60; this.hour - 1 } while (this.minute 60) { this.minute - 60; this.hour 1 } while (this.hour 0) { this.hour 24 } while (this.hour 24) { this.hour - 24 } }见 schedule/index.ts此外toString()会将时间统一输出为补零的HH:mm格式这正是配置项校验时用于规范化返回值的依据。跨天时间段判断结束时间小于起始时间视为次日文档中特别强调结束时间小于起始时间时将视为次日。例如18:00至6:00表示晚上 18:00 到次日 6:00。这一语义由isInRange方法实现isInRange(start: ScheduleTime, end: ScheduleTime) { if (start.equals(end)) { return false } let inRange this.greaterThan(start) this.lessThan(end) if (start.greaterThan(end)) { inRange this.greaterThan(start) || this.lessThan(end) } const result inRange || this.equals(start) return result }见 schedule/index.ts其判断逻辑可以拆解为三种情况场景判断方式示例起始时间等于结束时间直接判定为不在范围内false避免全天恒开18:00~18:00起始时间小于结束时间当天内当前时间必须同时大于起始、小于结束6:00~18:00起始时间大于结束时间跨天当前时间大于起始或小于结束二者满足其一即可18:00~6:00另外无论哪种情况只要当前时间恰好等于起始时间this.equals(start)也会被判定为在范围内保证进入时间点能即时生效。这种起始点闭区间、结束点开区间的语义让跨天场景如夜晚睡眠时段无需区分日期即可正确工作。自动切换的调度机制checkTime 与定时器组件的运行核心是checkTime函数它完成三件事判断当前是否处于时段内、同步夜间模式开关状态、安排下一次检查的定时器const checkTime (settings: ComponentSettingsOptions) { const start new ScheduleTime(settings.options.range.start) const end new ScheduleTime(settings.options.range.end) const now new ScheduleTime() const useDarkMode now.isInRange(start, end) const darkModeSettings getComponentSettings(darkMode) if (darkModeSettings.enabled ! useDarkMode) { darkModeSettings.enabled useDarkMode } let timeout 0 if (useDarkMode) { timeout ScheduleTime.millisecondsBefore(end) } else { timeout ScheduleTime.millisecondsBefore(start) } if (timeout ! 0) { setTimeout(() checkTime(settings), timeout) } }见 schedule/index.ts整个调度流程如下构造start、end、now三个时间点调用isInRange判断当前是否应处于夜间模式通过getComponentSettings(darkMode)获取「夜间模式」主组件的设置对象若其enabled状态与判断结果不一致则直接写入新的状态——这一写操作会触发夜间模式主组件的启用/卸载进而完成主题切换依据当前所处状态用millisecondsBefore计算出距离下一个切换点结束时点或开始时点的毫秒数用setTimeout安排下一次checkTime调用形成检查—休眠—再检查的循环timeout 0时不再递归调度例如时间已精确到达切换点且无后续剩余时间避免空转。millisecondsBefore负责精确计算距离目标时间还有多少毫秒并在跨天时自动加上一整天static millisecondsBefore(time: ScheduleTime) { const now new ScheduleTime() const nowSeconds new Date().getSeconds() const currentMilliseconds 1000 * (now.hour * 3600 now.minute * 60 nowSeconds) const targetMilliseconds 1000 * (time.hour * 3600 time.minute * 60) let result targetMilliseconds - currentMilliseconds if (now.greaterThan(time) || (now.equals(time) nowSeconds ! 0)) { result 24 * 3600 * 1000 } return result }见 schedule/index.ts这里将时间统一折算为当天零时起的秒数再求差若目标时间已过或恰好等于但秒数不为零则补上 24 小时从而保证定时器总是指向下一次切换点而非过去的某个时刻。这种基于setTimeout而非轮询的设计使组件在页面运行期间几乎不消耗额外资源。与夜间模式主组件的协作关系「夜间模式计划时段」本身并不直接修改页面样式它只是调度器真正的主题切换由「夜间模式」主组件darkMode完成。主组件的add/remove逻辑会执行以下动作见 dark-mode/index.ts向document.body添加/移除darkclass这是所有暗色样式生效的总开关写入localStorage的pbp_theme_v4键值为b表示暗色保证主题状态可持久化同步维护页面meta nametheme-color与meta namecolor-scheme标签让浏览器地址栏配色与页面渲染模式与夜间模式保持一致。主组件还提供了一项「提前注入」插件能力在页面内容加载阶段就依据设置提前添加darkclass减少首屏短暂白屏的闪烁问题见 dark-mode/index.ts。因此当计划时段组件通过写darkMode.enabled触发切换时整个主题系统会按既有链路平滑生效。使用注意事项文档明确指出请勿和「夜间模式跟随系统」一同使用。其原因是两个组件都以自动决定darkMode.enabled为职责会互相覆盖对方的状态。对比两者实现「夜间模式跟随系统」darkModeFollowSystem通过matchMedia((prefers-color-scheme: dark))监听操作系统的亮/暗主题并在系统主题变化时同步切换见 follow-system/index.ts「夜间模式计划时段」则完全依据用户设定的时钟区间判断。若同时启用系统主题变化与时间区间会争夺开关控制权导致夜间模式状态在两个来源间反复横跳。此外文档还提醒在某些浏览器如 Microsoft Edge中「跟随系统」仅同步浏览器自身的亮/暗主题而非操作系统设置。因此实际使用时应二选一追求跟光线走选跟随系统追求固定作息选计划时段。另一个需要留意的点是排除页面darkExcludes列表见 dark-urls.ts排除了投稿中心、创作平台、直播剪辑、安全中心等页面这些页面要么更新频繁难以及时适配要么使用频率低计划时段组件在这些页面不会执行自动切换。实战配置示例在 Bilibili-Evolved 的设置面板中启用「夜间模式计划时段」组件后只需配置一个「时间段」选项即可夜间作息默认起始18:00结束6:00——适合默认配置覆盖整个夜间白天禁用例如起始22:00结束8:00让深夜到清晨自动保持暗色全天候亮色将起始与结束设为同一时间如0:00~0:00isInRange会判定为恒不在范围内夜间模式始终保持关闭。配置输入会经过正则校验与ScheduleTime规范化即使输入6:0也会被标准化为06:00后保存无需担心格式问题。若想进一步了解夜间模式样式的编写规范、配色建议与排除列表维护方式可阅读夜间模式模块的 README 及其对应的 index.md。【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考