☰

Hitomi - 页数过滤器

在右下角添加一个悬浮按钮，点击后弹出设置页数范围的对话框。UI现代简洁，兼容性强，支持桌面和手机。

// ==UserScript==
// @name         Hitomi - 页数过滤器
// @namespace    http://tampermonkey.net/
// @version      4.0
// @description  在右下角添加一个悬浮按钮，点击后弹出设置页数范围的对话框。UI现代简洁，兼容性强，支持桌面和手机。
// @author       You (-Refined by AI)
// @match        https://hitomi.la/*
// @grant        none
// @run-at       document-idle
// ==/UserScript==

(function () {
    'use strict';

    // --- 配置区 ---
    const DEFAULT_MIN_PAGES = 1;
    const DEFAULT_MAX_PAGES = 800;
    // --- 配置区结束 ---

    let currentMinPages = DEFAULT_MIN_PAGES;
    let currentMaxPages = DEFAULT_MAX_PAGES;

    /**
     * 创建并注入全新的UI（一个悬浮按钮和一个<dialog>对话框）
     */
    function createFilterUI() {
        // 1. 创建悬浮触发按钮
        const triggerButton = document.createElement('button');
        triggerButton.id = 'hf-open-dialog-btn';
        triggerButton.innerHTML = `
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
            </svg>
            <span>过滤</span>`;
        document.body.appendChild(triggerButton);

        // 2. 创建 <dialog> 对话框
        const dialog = document.createElement('dialog');
        dialog.id = 'hf-filter-dialog';
        dialog.innerHTML = `
            <div class="hf-dialog-content">
                <h3>页数范围过滤</h3>
                <p>请输入要显示的页数范围，留空表示不限制。</p>
                <div class="hf-input-group">
                    <input type="tel" pattern="[0-9]*" id="hf-min-pages" placeholder="最小页数">
                    <span>-</span>
                    <input type="tel" pattern="[0-9]*" id="hf-max-pages" placeholder="最大页数">
                </div>
                <div class="hf-button-group">
                    <button id="hf-apply-btn" class="hf-btn-primary">应用</button>
                    <button id="hf-close-btn" class="hf-btn-secondary">关闭</button>
                </div>
                <div id="hf-status"></div>
            </div>
        `;
        document.body.appendChild(dialog);

        // 3. 注入 CSS 样式
        const style = document.createElement('style');
        style.innerHTML = `
            /* --- 悬浮按钮样式 --- */
            #hf-open-dialog-btn {
                position: fixed;
                bottom: 20px;
                right: 20px;
                z-index: 99998;
                width: 60px;
                height: 60px;
                border-radius: 50%;
                background-color: #3a87ad;
                color: white;
                border: none;
                box-shadow: 0 4px 12px rgba(0,0,0,0.3);
                cursor: pointer;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 2px;
                transition: transform 0.2s, background-color 0.2s;
            }
            #hf-open-dialog-btn:hover {
                background-color: #2c6a8a;
                transform: scale(1.05);
            }
            #hf-open-dialog-btn span { font-size: 12px; }

            /* --- Dialog 对话框样式 --- */
            #hf-filter-dialog {
                width: 90vw;
                max-width: 320px;
                border: 1px solid #ddd;
                border-radius: 12px;
                box-shadow: 0 10px 30px rgba(0,0,0,0.2);
                padding: 0; /* 我们在内部容器控制padding */
                margin: auto;
            }
            #hf-filter-dialog::backdrop { /* 对话框蒙层样式 */
                background-color: rgba(0, 0, 0, 0.5);
                backdrop-filter: blur(2px);
            }
            #hf-filter-dialog .hf-dialog-content {
                padding: 20px;
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            }
            #hf-filter-dialog h3 { margin: 0 0 8px; font-size: 1.2em; text-align: center; color: #333; }
            #hf-filter-dialog p { margin: 0 0 16px; font-size: 0.9em; color: #666; text-align: center; }

            #hf-filter-dialog .hf-input-group { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
            #hf-filter-dialog .hf-input-group input {
                width: 100%;
                padding: 10px;
                border: 1px solid #ccc;
                border-radius: 8px;
                font-size: 1em;
                text-align: center;
                -moz-appearance: textfield;
            }
            #hf-filter-dialog .hf-input-group input::-webkit-outer-spin-button,
            #hf-filter-dialog .hf-input-group input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

            #hf-filter-dialog .hf-button-group { display: flex; gap: 10px; }
            #hf-filter-dialog button {
                width: 100%;
                padding: 12px;
                border-radius: 8px;
                border: none;
                font-size: 1em;
                font-weight: bold;
                cursor: pointer;
                transition: opacity 0.2s;
            }
            #hf-filter-dialog button:hover { opacity: 0.85; }
            #hf-filter-dialog .hf-btn-primary { background-color: #3a87ad; color: white; }
            #hf-filter-dialog .hf-btn-secondary { background-color: #e0e0e0; color: #333; }

            #hf-status { margin-top: 15px; text-align: center; font-size: 0.8em; color: #777; min-height: 1.2em; }
        `;
        document.head.appendChild(style);

        // 4. 绑定事件
        triggerButton.addEventListener('click', () => dialog.showModal());
        document.getElementById('hf-close-btn').addEventListener('click', () => dialog.close());
        document.getElementById('hf-apply-btn').addEventListener('click', () => {
            const minInput = document.getElementById('hf-min-pages');
            const maxInput = document.getElementById('hf-max-pages');

            minInput.value = minInput.value.replace(/[^0-9]/g, '');
            maxInput.value = maxInput.value.replace(/[^0-9]/g, '');

            let newMin = parseInt(minInput.value, 10) || 1;
            let newMax = parseInt(maxInput.value, 10) || Infinity;

            if (newMin > newMax) {
                [newMin, newMax] = [newMax, newMin];
                minInput.value = newMin;
                maxInput.value = (newMax === Infinity) ? '' : newMax;
            }

            saveSettings(newMin, newMax);
            applyFilterNow();
            dialog.close(); // 应用后自动关闭
        });
    }

    // ... (saveSettings, loadSettings, applyFilterNow, main 函数与之前版本相同) ...
    // ... 将版本 3.5 的 saveSettings, loadSettings, applyFilterNow, main 函数完整复制到这里 ...
    function saveSettings(min, max) {
        currentMinPages = min;
        currentMaxPages = max;
        localStorage.setItem('hf_min_pages', min);
        localStorage.setItem('hf_max_pages', max === Infinity ? '' : max);
    }

    function loadSettings() {
        const savedMin = localStorage.getItem('hf_min_pages');
        const savedMax = localStorage.getItem('hf_max_pages');
        currentMinPages = parseInt(savedMin, 10) || DEFAULT_MIN_PAGES;
        currentMaxPages = parseInt(savedMax, 10) || Infinity;

        const minInput = document.getElementById('hf-min-pages');
        if (minInput) minInput.value = currentMinPages > 1 ? currentMinPages : '';
        const maxInput = document.getElementById('hf-max-pages');
        if (maxInput) maxInput.value = (currentMaxPages === Infinity) ? '' : currentMaxPages;
    }

    function applyFilterNow() {
        const statusElement = document.getElementById('hf-status');
        const galleryItems = document.querySelectorAll('.gallery-content > div[class]');

        if (galleryItems.length === 0) {
            if (statusElement) statusElement.textContent = '未找到作品';
            return;
        }

        let visibleCount = 0;
        let totalCount = 0;
        galleryItems.forEach(item => {
            const h1 = item.querySelector('h1.lillie');
            if (!h1) return;

            totalCount++;
            item.style.display = '';

            let pages = -1;
            const firstNode = h1.childNodes[0];
            if (firstNode && firstNode.nodeType === Node.TEXT_NODE) {
                const match = firstNode.textContent.trim().match(/^\((\d+)\)$/);
                if (match) pages = parseInt(match[1], 10);
            }

            if (pages === -1) {
                const pageInfoTd = Array.from(item.querySelectorAll('td')).find(td => /pages/i.test(td.textContent));
                if(pageInfoTd) {
                    const match = pageInfoTd.textContent.match(/(\d+)\s*pages/i);
                    if (match) pages = parseInt(match[1], 10);
                }
            }

            if (pages !== -1) {
                if (pages < currentMinPages || pages > currentMaxPages) {
                    item.style.display = 'none';
                } else {
                    visibleCount++;
                }
            } else {
                visibleCount++;
            }
        });

        if (statusElement) statusElement.textContent = `显示 ${visibleCount} / ${totalCount} 项`;
    }

    function main() {
        createFilterUI(); // 注意，这里调用的是新函数
        loadSettings();

        let initialFilterDone = false;
        const tryInitialFilter = (retries = 0) => {
            if (document.querySelector('.gallery-content')) {
                applyFilterNow();
                initialFilterDone = true;
            } else if (retries < 20) {
                setTimeout(() => tryInitialFilter(retries + 1), 500);
            }
        };
        tryInitialFilter();

        const observer = new MutationObserver((mutations) => {
            if (!initialFilterDone) return;
            const hasNewNodes = mutations.some(mutation => mutation.addedNodes.length > 0);
            if (hasNewNodes) {
                clearTimeout(observer.timer);
                observer.timer = setTimeout(applyFilterNow, 300);
            }
        });

        const contentParent = document.querySelector('.container') || document.body;
        observer.observe(contentParent, { childList: true, subtree: true });
    }

    if (document.body) {
        main();
    } else {
        window.addEventListener('DOMContentLoaded', main, { once: true });
    }

})();