Bilibili筛选增强（美化版）

Bilibili搜索页面筛选增强脚本，利用 Copilot 在原有基础上进行了 UI 美化
安裝腳本 ?
Wrap lines
// ==UserScript==
// @name         Bilibili筛选增强（美化版）
// @namespace    https://github.com/sylcool
// @version      0.3.2.1
// @description  Bilibili搜索页面筛选增强脚本，利用 Copilot 在原有基础上进行了 UI 美化
// @author       Super10 & Your Name (优化 & 动画效果)
// @match        https://search.bilibili.com/*
// @icon         https://www.bilibili.com/favicon.ico?v=1
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    const thisMonth = new Date().getMonth() + 1;
    const reg_PreviousYear = new RegExp("[0-9]{4}-[0-9]{1,2}-[0-9]{1,2}");
    const reg_ThisMonth = new RegExp(`[^-]${thisMonth}-[0-9]{1,2}`);
    const videoList = document.getElementsByClassName("col_3 col_xs_1_5 col_md_2 col_xl_1_7 mb_x40");

    let filterYear = false;
    let filterMonth = false;
    let filterDay = false;

    function mFilter(judgeFunc) {
        for (const video of videoList) {
            video.style.display = "block";
            const dates = video.getElementsByClassName("bili-video-card__info--date");
            for (let date of dates) {
                if (judgeFunc(date.innerText)) {
                    video.style.display = "none";
                    break;
                }
            }
        }
    }

    function createButton(text, onclickFunc) {
        const button = document.createElement("button");
        button.style.backgroundColor = "transparent";
        button.style.color = "#61666d";
        button.style.border = "none";
        button.style.outline = "none";
        button.style.cursor = "pointer";
        button.style.borderRadius = "12px";
        button.style.padding = "6px 12px";
        button.style.marginRight = "8px";
        button.style.transition = "background-color 0.3s ease, color 0.3s ease"; // 添加平滑动画效果
        button.textContent = text;
        button.className = "vui-button vui_button--tab";

        button.addEventListener("mouseover", function() {
            this.style.backgroundColor = "#e6e8fe";
            this.style.color = "#818cf8";
        });

        button.addEventListener("mouseout", function() {
            if (!this.classList.contains("selected")) {
                this.style.backgroundColor = "transparent";
                this.style.color = "#61666d";
            }
        });

        button.addEventListener("click", function() {
            const buttons = document.getElementsByClassName("vui-button vui_button--tab");
            for (let btn of buttons) {
                btn.classList.remove("selected");
            }
            this.classList.toggle("selected");
            onclickFunc();
        });

        return button;
    }


    const nav = document.getElementsByClassName("search-condition-row")[0];

    const button4 = createButton("×", () => {
        for (const video of videoList) {
            video.style.display = "block";
        }
        const buttons = document.getElementsByClassName("vui-button vui_button--tab");
        for (let btn of buttons) {
            btn.style.backgroundColor = "transparent";
            btn.style.color = "#61666d";
            btn.classList.remove("selected");
        }
        button4.style.display = "none"; // 隐藏“×”按钮
    });

    // Custom styles for the "×" button
    button4.style.fontSize = "26px";
    button4.style.fontWeight = "bold";
    button4.style.borderRadius = "14px"; // 圆角矩形
    button4.style.width = "34px";
    button4.style.height = "34px";
    button4.style.padding = "0";
    button4.style.display = "flex";
    button4.style.alignItems = "center";
    button4.style.justifyContent = "center";
    button4.style.transition = "background-color 0.3s ease"; // 添加平滑动画效果
    button4.style.marginLeft = "6px"; // 间距

    button4.addEventListener("mouseover", function() {
        this.style.backgroundColor = "#e6e8fe";
    });

    button4.addEventListener("mouseout", function() {
        if (!this.classList.contains("selected")) {
            this.style.backgroundColor = "transparent";
        }
    });


    const button3 = createButton("今日发布", () => {
        mFilter(date => !date.includes("小时前"));
        button4.style.display = "block"; // 显示“×”按钮
    });
    nav.appendChild(button3);


    const button2 = createButton("本月发布", () => {
        mFilter(date => !(reg_ThisMonth.test(date) || date.includes("昨天") || date.includes("小时前")));
        button4.style.display = "block"; // 显示“×”按钮
    });
    nav.appendChild(button2);


    const button1 = createButton("今年发布", () => {
        mFilter(date => reg_PreviousYear.test(date));
        button4.style.display = "block"; // 显示“×”按钮
    });
    nav.appendChild(button1);

    nav.appendChild(button4); // 移动“×”按钮

    button4.style.display = "none"; // 隐藏“×”按钮
})();
欢迎访问Greasy Fork镜像
