Merge pull request #16 from festoney8/dev

merge dev to main, v2.3.1

CHANGELOG.md

@@ -1,5 +1,12 @@
 # CHANGELOG
 
+## 2.3.1
+
+-   新增：热门/排行榜页 456列布局
+-   新增：首页 456列布局
+-   优化：优化热门/排行榜页样式
+-   优化：panel内条目CSS
+
 ## 2.3.0
 
 -   新增：页面适配 热门视频/排行榜页

README.md

@@ -81,6 +81,10 @@
     -   搜索 `layout.css.has-selector.enabled` ，将这一项的开关改为 `true`，并刷新标签页
 -   **Firefox版本 > 121，无需修改设定**
 
+### Safari
+
+-   未测试
+
 ### 脚本管理插件
 
 |         | [Tampermonkey](https://www.tampermonkey.net/) (油猴插件)                                                | [Violentmonkey](https://violentmonkey.github.io/) (暴力猴)                                       |
@@ -90,6 +94,7 @@
 | Firefox | [链接](https://addons.mozilla.org/firefox/addon/tampermonkey/)                                          | [链接](https://addons.mozilla.org/firefox/addon/violentmonkey/)                                  |
 | 测试    | **已测试，推荐**                                                                                        | 支持，部分测试                                                                                   |
 
+-   Safari 浏览器的脚本管理插件未进行测试
 -   [Greasemonkey](https://www.greasespot.net/) 和 [ScriptCat](https://docs.scriptcat.org/) 未进行测试
 
 ## 净化效果对比
@@ -155,6 +160,21 @@
 </details>
 
 <details>
+
+<summary><b>查看 热门视频/排行榜页 对比图</b></summary>
+
+### before
+
+![](images/screenshot-popular-before.png)
+
+### after
+
+![](images/screenshot-popular-after.png)
+
+</details>
+
+<details>
+
 <summary><b>查看 插件混用首页 (cleaner + Evolved + app-recommend)</b></summary>
 
 ![](images/screenshot-homepage-multi-plugins.png)
@@ -182,6 +202,10 @@
 
 -   **兼容**，提供 **隐藏 视频tag / 隐藏 弹幕数 / 隐藏 点赞数** 功能，在首页功能菜单末尾
 
+### 与 [Bilibili 旧播放页](https://github.com/MotooriKashin/Bilibili-Old) 的兼容性
+
+-   **不兼容**，旧播放页脚本完全接管页面，使用该脚本时请在脚本管理器中关闭本净化脚本，以免造成干扰
+
 ## 数据导入与导出
 
 ### 导出数据 (以 Tampermonkey 为例)

src/core/item.ts

@@ -17,7 +17,7 @@ export class NormalItem implements IItem {
 
     /**
      * @param itemID item的唯一ID, 与GM database中的Key对应, 使用相同ID可共享item状态
-     * @param description item的功能介绍, 显示在panel内
+     * @param description item的功能介绍, 显示在panel内, \n可用来换行
      * @param defaultStatus item默认开启状态, 第一次安装时使用, 对于所有用户均开启的项目默认给true
      * @param itemFunc 功能函数
      * @param isItemFuncReload 功能函数是否在URL变动时重新运行
@@ -60,9 +60,9 @@ export class NormalItem implements IItem {
             const e = document.createElement('label')
             e.id = this.itemID
             if (this.isEnable) {
-                e.innerHTML = `${this.checkedHTML}<span>${this.description}</span>`
+                e.innerHTML = `${this.checkedHTML}<span>${this.description.replaceAll('\n', '<br>')}</span>`
             } else {
-                e.innerHTML = `${this.uncheckedHTML}<span>${this.description}</span>`
+                e.innerHTML = `${this.uncheckedHTML}<span>${this.description.replaceAll('\n', '<br>')}</span>`
             }
             const itemGroupList = document.querySelector(`#${groupID} .bili-cleaner-item-list`) as HTMLFormElement
             if (itemGroupList) {

src/core/panel.ts

@@ -99,21 +99,24 @@ export class Panel implements IPanel {
     }
     /* 每行Item选项的样式, 按钮和文字 */
     .bili-cleaner-item-list label {
-        display: block;
-        vertical-align: middle;
+        display: flex;
+        align-items: center;
         margin: 6px 0 6px 10px;
         font-size: 16px;
         color: black;
     }
+    .bili-cleaner-item-list label span {
+        margin-left: 1em;
+    }
     .bili-cleaner-item-list hr {
         border: 1px solid #eee;
         margin: 15px 20px;
     }
     .bili-cleaner-item-switch {
-        vertical-align: middle;
         width: 50px;
+        min-width: 50px;
         height: 27px;
-        margin: 0 1em 0 0;
+        margin: 0;
         position: relative;
         border: 1px solid #dfdfdf;
         background-color: #fdfdfd;

src/pages/homepage.ts

@@ -2,6 +2,7 @@ import { Group } from '../core/group'
 import { NormalItem } from '../core/item'
 
 const basicItems: NormalItem[] = []
+const layoutItems: NormalItem[] = []
 const rcmdListItems: NormalItem[] = []
 const sidebarItems: NormalItem[] = []
 const biliAppRcmdItems: NormalItem[] = []
@@ -243,6 +244,50 @@ if (location.href.startsWith('https://www.bilibili.com/') && ['/index.html', '/'
     }
     homepageGroupList.push(new Group('homepage-basic', '首页 基本功能', basicItems))
 
+    // 页面布局part, layoutItems
+    {
+        // 强制使用 4 列布局
+        layoutItems.push(
+            new NormalItem(
+                'homepage-layout-4-column',
+                '强制使用 4 列布局\n建议开启 增大视频信息字号',
+                false,
+                undefined,
+                false,
+                `#i_cecream .recommended-container_floor-aside .container {
+                    grid-template-columns: repeat(4,1fr) !important;
+                }`,
+            ),
+        )
+        // 强制使用 5 列布局
+        layoutItems.push(
+            new NormalItem(
+                'homepage-layout-5-column',
+                '强制使用 5 列布局\n建议开启 增大视频信息字号',
+                false,
+                undefined,
+                false,
+                `#i_cecream .recommended-container_floor-aside .container {
+                    grid-template-columns: repeat(5,1fr) !important;
+                }`,
+            ),
+        )
+        // 强制使用 6 列布局
+        layoutItems.push(
+            new NormalItem(
+                'homepage-layout-6-column',
+                '强制使用 6 列布局\n建议 隐藏发布时间、隐藏视频tag，开启增大字号',
+                false,
+                undefined,
+                false,
+                `#i_cecream .recommended-container_floor-aside .container {
+                    grid-template-columns: repeat(6,1fr) !important;
+                }`,
+            ),
+        )
+    }
+    homepageGroupList.push(new Group('homepage-layout', '页面强制布局 (三选一, 默认关闭)', layoutItems))
+
     // 视频列表part, rcmdListItems
     {
         // 隐藏 视频tag (已关注/1万点赞)