Merge pull request #541 from andywang425/dev

7.1.8
close #536

.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+charset = utf-8
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true

.gitattributes

@@ -0,0 +1,7 @@
+*                 text=auto
+
+*.bash            text eol=lf
+*.bat             text eol=crlf
+*.cmd             text eol=crlf
+*.ps1             text eol=crlf
+*.sh              text eol=lf

.prettierrc.json

@@ -4,5 +4,6 @@
   "tabWidth": 2,
   "singleQuote": true,
   "printWidth": 100,
-  "trailingComma": "none"
+  "trailingComma": "none",
+  "endOfLine": "auto"
 }

CHANGELOG.md

@@ -2,6 +2,31 @@
 
 ## [Unreleased]
 
+## [7.1.8] - 2024-8-28
+
+### 新增
+
+- 新页面和菜单项【设置】，可在此页面对控制面板宽度进行调整（日后会加入更多功能）
+- 适配B站实验室中的“屏幕适配”功能，确保开启时控制面板大小、位置依旧正确
+- 💻 支持wbi签名
+
+### 修复
+
+- 修正脚本内置说明中描述不准确的部分
+- 修复发送弹幕点亮勋章时无法正确识别因弹幕包含屏蔽词而失败的情况
+- 尝试修复会员专属等级加速包无法完成领取条件（看一个视频）的bug
+- 控制面板滚动条优化
+- 修复【移除元素】面板中帮助信息按钮点击后无效的问题
+
+### 删除
+
+- 移除【显示高能用户数量】（B站已有该功能）
+
+### 调整
+
+- 更新部分API，尽可能符合官方标准
+- 💻 配置prettier，editorconfig，gitattributes，解决换行符不一致导致的版本管理问题
+
 ## [7.1.7] - 2024-8-7
 
 ### 新增
@@ -58,7 +83,7 @@
 ### 调整
 
 - 移除直播间幻星派对标志模块回归
-- Vue的VSCode官方拓展发生变化，修改相关文档和拓展推荐
+- 💻 Vue的VSCode官方拓展发生变化，修改相关文档和拓展推荐
 - 暂时不领取type=14的大会员权益
 
 ## [7.1.3] - 2024-2-2
@@ -85,7 +110,7 @@
 
 ### 新增
 
-- 模块运行frame新增选项top
+- 💻 模块运行frame新增选项top
 
 ### 修复
 
@@ -104,8 +129,8 @@
 ### 新增
 
 - 屏蔽挂机检测模块
-- 更多模块运行时机
-- 支持指定模块运行的frame，以及是否在默认模块运行完后运行
+- 💻 更多模块运行时机
+- 💻 支持指定模块运行的frame，以及是否在默认模块运行完后运行
 
 ### 调整
 
@@ -122,7 +147,7 @@
 ### 新增
 
 - 移除元素板块，内含多个移除页面元素的功能
-- 模块运行时机概念，解决部分模块运行地太早导致的一些问题
+- 💻 模块运行时机概念，解决部分模块运行地太早导致的一些问题
 
 ### 调整
 
@@ -137,7 +162,7 @@
 
 ### 调整
 
-- 调整了Vue App注入时机和相关逻辑
+- 💻 调整了Vue App注入时机和相关逻辑
 
 ### 修复
 
@@ -168,7 +193,7 @@
 ### 新增
 
 - 禁用P2P。
-- 新的工作流，自动编译master分支的脚本。
+- 💻 新的工作流，自动编译master分支的脚本。
 
 ### 调整
 
@@ -179,7 +204,7 @@
 ### 新增
 
 - 体验优化板块，自动切换画质功能。
-- `Main BLTH`概念和模块`runMultiple`属性
+- 💻 `Main BLTH`概念和模块`runMultiple`属性
 
 ## [7.0.3] - 2023-7-31
 

README.md

@@ -1,8 +1,8 @@
-<div align ="center">
+<div align = "center">
     <img alt="BLTH logo" src="https://raw.githubusercontent.com/andywang425/BLTH/master/images/logo.min.svg" width="150">
 </div>
 
-<h1 align="center">Bilibili Live Tasks Helper</h1>
+<h1 align = "center">Bilibili Live Tasks Helper</h1>
 
 # 环境要求
 
@@ -60,7 +60,6 @@
 # 交流群
 
 - QQ 频道：[点我加入 aw 的频道](https://qun.qq.com/qqweb/qunpro/share?_wv=3&_wwv=128&appChannel=share&inviteCode=1W7eVLs&businessType=9&from=181074&biz=ka&shareSource=5)。
-- 非官方电报群：[LaTiao01](https://t.me/LaTiao01)。
 
 # 参与开发
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "bilibili-live-tasks-helper",
   "private": true,
-  "version": "7.1.7",
+  "version": "7.1.8",
   "type": "module",
   "scripts": {
     "dev": "vite",

scripts/minifyUserscript.js

@@ -1,11 +1,11 @@
 /**
  * @description 压缩编译后的用户脚本
  */
-import { promises as fs } from 'fs'
+import { readFile, writeFile } from 'node:fs/promises'
 import { minify } from 'terser'
 
 async function minifyUserscript(inputPath, outputPath) {
-  const code = await fs.readFile(inputPath, 'utf-8')
+  const code = await readFile(inputPath, 'utf-8')
 
   // 获取 Userscript metadata
   const metadataMatch = code.match(/\/\/ ==UserScript==[\s\S]*?\/\/ ==\/UserScript==/)
@@ -21,7 +21,7 @@ async function minifyUserscript(inputPath, outputPath) {
   // 加上 metadata
   const result = `${metadata}\n${minified.code}`
 
-  await fs.writeFile(outputPath, result, 'utf-8')
+  await writeFile(outputPath, result, 'utf-8')
 
   console.log(`压缩完成: ${inputPath} -> ${outputPath}`)
 }

src/App.vue

@@ -3,10 +3,11 @@ import { useUIStore } from './stores/useUIStore'
 import PanelHeader from './components/PanelHeader.vue'
 import PanelAside from './components/PanelAside.vue'
 import PanelMain from './components/PanelMain.vue'
-import { dce, dq, waitForElement, isSelfTopFrame, topFrameDocuemntElement } from './library/dom'
+import { dce, dq, waitForElement, isSelfTopFrame, topFrameDocumentElement } from './library/dom'
 import hotkeys from 'hotkeys-js'
 import _ from 'lodash'
 import Logger from './library/logger'
+import { unsafeWindow } from '$'
 
 const uiStore = useUIStore()
 
@@ -22,15 +23,18 @@ let livePlayer: Element | null
 // 显示/隐藏控制面板按钮
 let button: HTMLButtonElement
 /**
- * 设置控制面板的大小和位置
+ * 更新播放器的大小、位置和滚动条位置
  */
-function setPanelSize() {
+function updatePosition() {
   const rect: DOMRect = livePlayer!.getBoundingClientRect()
 
-  uiStore.baseStyleValue.top = rect.top + window.scrollY
-  uiStore.baseStyleValue.left = rect.left + window.scrollX
-  uiStore.baseStyleValue.height = rect.height
-  uiStore.baseStyleValue.width = rect.width * 0.4
+  uiStore.livePlayerRect.top = rect.top
+  uiStore.livePlayerRect.left = rect.left
+  uiStore.livePlayerRect.height = rect.height
+  uiStore.livePlayerRect.width = rect.width
+  // 窗口滚动条位置需和播放器的大小、位置同步更新
+  uiStore.windowScrollPosition.x = unsafeWindow.scrollX
+  uiStore.windowScrollPosition.y = unsafeWindow.scrollY
 }
 /**
  * 显示/隐藏控制面板按钮被点击
@@ -40,19 +44,19 @@ function buttonOnClick() {
   button.innerText = uiStore.isShowPanelButtonText
 }
 // 节流，防止点击过快，减小渲染压力
-const throttleButtoOnClick = _.throttle(buttonOnClick, 300)
+const throttleButtonOnClick = _.throttle(buttonOnClick, 300)
 // 播放器节点出现在最初的html中，可以直接获取
 livePlayer = dq('#live-player-ctnr')
 if (livePlayer) {
-  setPanelSize()
+  updatePosition()
   // 查找播放器上面的 header
   // 节点#player-ctnr在初始html中出现
   waitForElement(dq('#player-ctnr')!, '.left-ctnr.left-header-area', 10e3)
     .then((playerHeaderLeft) => {
       // 创建显示/隐藏控制面板按钮
       button = dce('button')
       button.setAttribute('class', 'blth_btn')
-      button.onclick = throttleButtoOnClick
+      button.onclick = throttleButtonOnClick
       button.innerText = uiStore.isShowPanelButtonText
       playerHeaderLeft.append(button)
       if (!isSelfTopFrame()) {
@@ -62,22 +66,22 @@ if (livePlayer) {
         hotkeys(
           'alt+b',
           {
-            element: topFrameDocuemntElement()
+            element: topFrameDocumentElement()
           },
-          throttleButtoOnClick
+          throttleButtonOnClick
         )
       }
-      hotkeys('alt+b', throttleButtoOnClick)
+      hotkeys('alt+b', throttleButtonOnClick)
     })
     .catch((e: Error) => logger.error(e))
   // 监听页面缩放，调整控制面板大小
   // 因为这个操作频率不高就不节流或防抖了
-  window.addEventListener('resize', () => setPanelSize())
+  window.addEventListener('resize', () => updatePosition())
   // 监听 html 根节点和 body 节点
-  // 主要是为了适配滚动条的显示/隐藏和实验室中的功能
-  const observer = new MutationObserver(() => setPanelSize())
-  observer.observe(document.documentElement, { attributes: true })
+  // 适配播放器网页模式
+  const observer = new MutationObserver(() => updatePosition())
   observer.observe(document.body, { attributes: true })
+  observer.observe(document.documentElement, { attributes: true })
 
   // 准备完毕，显示控制面板
   if (isShowPanel) {
@@ -90,24 +94,24 @@ if (livePlayer) {
 
 <template>
   <el-collapse-transition>
-    <el-container :style="uiStore.baseStyle" class="base" v-show="uiStore.uiConfig.isShowPanel">
+    <el-container :style="uiStore.panelStyle" class="base" v-show="uiStore.uiConfig.isShowPanel">
       <el-header class="header">
         <PanelHeader />
       </el-header>
-      <el-scrollbar :height="uiStore.scrollBarHeight">
-        <el-container>
-          <el-aside class="aside">
-            <PanelAside />
-          </el-aside>
-          <el-main class="main">
+      <el-container>
+        <el-aside class="aside">
+          <PanelAside />
+        </el-aside>
+        <el-main class="main">
+          <el-scrollbar :height="uiStore.scrollBarHeight">
             <KeepAlive>
               <Transition name="fade" mode="out-in">
                 <PanelMain />
               </Transition>
             </KeepAlive>
-          </el-main>
-        </el-container>
-      </el-scrollbar>
+          </el-scrollbar>
+        </el-main>
+      </el-container>
     </el-container>
   </el-collapse-transition>
 </template>
@@ -148,13 +152,8 @@ if (livePlayer) {
   padding-bottom: var(--main-top-botton-padding);
 }
 
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.1s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
+/* PanelMain切换时的动画效果 */
+.fade-enter-active {
+  animation: fade-in linear 0.2s;
 }
 </style>

src/assets/css/base.css

@@ -33,3 +33,39 @@
 .el-message-box li {
   list-style: initial;
 }
+
+/**
+  适配实验室的“屏幕适配”功能
+  原理：屏幕适配css中的zoom值为n，此处就设置为1/n
+ */
+html[lab-style*='adaptive'] {
+  @media screen and (min-width: 1930px) {
+    .base {
+      zoom: calc(15 / 16);
+    }
+  }
+
+  @media screen and (min-width: 2058px) {
+    .base {
+      zoom: calc(3 / 4);
+    }
+  }
+
+  @media screen and (min-width: 2570px) {
+    .base {
+      zoom: calc(2 / 3);
+    }
+  }
+
+  @media screen and (min-width: 3210px) {
+    .base {
+      zoom: calc(1 / 2);
+    }
+  }
+
+  @media screen and (min-width: 3850px) {
+    .base {
+      zoom: calc(15 / 32);
+    }
+  }
+}