// ==UserScript==
// @name         New Userscript V2JC-1
// @namespace    https://docs.scriptcat.org/
// @version      0.1.0
// @description  try to take over the world!
// @author       LiuQi
// @match        https://*/*
// @grant        none
// @noframes
// ==/UserScript==

// (function() {
//     'use strict';
//     // 去重存储已加载图片
//     const loadedImgSet = new Set();
//     let phoneGalleryEl = null;

//     // 1. 构建手机外壳DOM
//     const phoneBox = document.createElement('div');
//     phoneBox.className = 'phone-frame';
//     const phoneNotch = document.createElement('div');
//     phoneNotch.className = 'phone-notch';
//     phoneGalleryEl = document.createElement('ul');
//     phoneGalleryEl.className = 'phone-gallery';
//     const phoneHomeBtn = document.createElement('div');
//     phoneHomeBtn.className = 'phone-home';
//     phoneBox.append(phoneNotch, phoneGalleryEl, phoneHomeBtn);
//     document.body.prepend(phoneBox);

//     // 2. 图片渲染函数（修复裁切，等待图片加载完成）
//     function renderAllImages() {
//         const imgList = Array.from(document.querySelectorAll('img'));
//         imgList.forEach(imgDom => {
//             // 兼容src / data-src / data-original 懒加载图
//             let imgSrc = imgDom.src || imgDom.dataset.src || imgDom.dataset.original;
//             if (!imgSrc) return;
//             if (loadedImgSet.has(imgSrc)) return;
//             // 仅过滤1x1空白占位图
//             const blankGif = imgSrc.startsWith('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
//             if (blankGif) return;

//             loadedImgSet.add(imgSrc);
//             const li = document.createElement('li');
//             li.className = 'gallery-item';
//             const thumb = document.createElement('img');
//             thumb.className = 'gallery-thumb';
//             thumb.src = imgSrc;

//             // 图片加载完成后自动适配，避免裁切
//             thumb.onload = function() {
//                 // 加载完成后刷新布局
//                 phoneGalleryEl.style.display = 'none';
//                 phoneGalleryEl.offsetHeight; // 强制重绘
//                 phoneGalleryEl.style.display = 'flex';
//             };
//             thumb.onerror = function () {
//                 this.style.background = '#eee';
//                 this.alt = '图片失效';
//             };
//             // 点击新标签打开原图
//             thumb.addEventListener('click', () => window.open(imgSrc, '_blank'));
//             li.appendChild(thumb);
//             phoneGalleryEl.appendChild(li);
//         });
//     }

//     // 3. 全局DOM实时监听（捕获动态新增/懒加载图片）
//     const observer = new MutationObserver(() => renderAllImages());
//     observer.observe(document.body, {
//         childList: true,
//         subtree: true,
//         attributes: true,
//         attributeFilter: ['src', 'data-src', 'data-original']
//     });

//     // 初始渲染
//     renderAllImages();

//     // 4. 核心样式修复：解决图片裁切不全
//     const style = document.createElement('style');
//     style.textContent = `
//         /* 整机手机加宽加高，屏幕可视区域更大 */
//         .phone-frame {
//             position: fixed;
//             top: 20px;
//             right: 20px;
//             z-index: 99999;
//             width: 280px;
//             height: 520px;
//             background: #1a1a1a;
//             border-radius: 36px;
//             padding: 12px 10px;
//             box-shadow: 0 8px 30px rgba(0,0,0,0.35);
//             box-sizing: border-box;
//             display: flex;
//             flex-direction: column;
//             align-items: center;
//             gap: 8px;
//         }
//         .phone-notch {
//             width: 65px;
//             height: 14px;
//             background: #000;
//             border-radius: 0 0 10px 10px;
//         }
//         /* 手机屏幕容器 */
//         .phone-gallery {
//             flex: 1;
//             width: 100%;
//             margin: 0;
//             padding: 8px;
//             list-style: none;
//             background: #fff;
//             border-radius: 8px;
//             overflow-y: auto;
//             overflow-x: hidden;
//             display: flex;
//             flex-wrap: wrap;
//             gap: 4px;
//             box-sizing: border-box;
//         }
//         /* 美化滚动条 */
//         .phone-gallery::-webkit-scrollbar {
//             width: 4px;
//         }
//         .phone-gallery::-webkit-scrollbar-thumb {
//             background: #bbb;
//             border-radius: 2px;
//         }
//         .phone-home {
//             width: 32px;
//             height: 32px;
//             border: 2px solid #888;
//             border-radius: 50%;
//             margin-top: 4px;
//         }
//         /* 多列基础尺寸 */
//         .gallery-item {
//             flex: 1 0 42px;
//             margin: 0;
//         }
//         /* ========== 修复图片裁切核心改动 ==========
//         object-fit: contain：完整展示整张图，不会裁剪画面
//         原来用cover会直接切掉上下/左右画面，导致只显示局部
//         */
//         .gallery-thumb {
//             width: 100%;
//             height: 42px;
//             object-fit: contain; /* 完整显示图片，不裁切 */
//             background: #f0f0f0;
//             border-radius: 4px;
//             border: 1px solid #e5e5e5;
//             cursor: pointer;
//             transition: all 0.2s ease;
//             display: block;
//         }
//         .gallery-thumb:hover {
//             transform: scale(1.08);
//             box-shadow: 0 2px 8px rgba(0,0,0,0.2);
//         }

//         /* 移动端适配 */
//         @media (max-width: 768px) {
//             .phone-frame {
//                 width: 140px;
//                 height: 280px;
//                 right: 8px;
//                 bottom: 10px;
//                 top: auto;
//             }
//             .gallery-item {
//                 flex: 1 0 30px;
//             }
//             .gallery-thumb {
//                 height: 30px;
//             }
//             .phone-home {
//                 width: 22px;
//                 height: 22px;
//             }
//             .phone-notch {
//                 width: 40px;
//                 height: 8px;
//             }
//         }
//     `;
//     document.head.appendChild(style);
// })();


















(function() {
    'use strict';
    // 去重存储已加载图片
    const loadedImgSet = new Set();
    let phoneGalleryEl = null;
    // 新增：全屏大图容器
    let fullImageWrap = null;

    // 1. 构建手机外壳DOM（改造屏幕分层结构）
    const phoneBox = document.createElement('div');
    phoneBox.className = 'phone-frame';
    const phoneNotch = document.createElement('div');
    phoneNotch.className = 'phone-notch';

    // 屏幕外层定位容器，用来承载图库+全屏遮罩
    const screenContainer = document.createElement('div');
    screenContainer.className = 'phone-screen-container';

    // 原有缩略图库
    phoneGalleryEl = document.createElement('ul');
    phoneGalleryEl.className = 'phone-gallery';

    // 新增全屏预览层（默认隐藏，绝对铺满屏幕）
    fullImageWrap = document.createElement('div');
    fullImageWrap.className = 'full-preview-layer';
    fullImageWrap.style.display = 'none';

    // 底部home按键
    const phoneHomeBtn = document.createElement('div');
    phoneHomeBtn.className = 'phone-home';

    // 组装层级：图库底层，全屏预览上层覆盖
    screenContainer.append(phoneGalleryEl, fullImageWrap);
    phoneBox.append(phoneNotch, screenContainer, phoneHomeBtn);
    document.body.prepend(phoneBox);

    // 2. 图片渲染函数（修改点击事件，切换全屏预览）
    function renderAllImages() {
        const imgList = Array.from(document.querySelectorAll('img'));
        imgList.forEach(imgDom => {
            // 兼容src / data-src / data-original 懒加载图
            let imgSrc = imgDom.src || imgDom.dataset.src || imgDom.dataset.original;
            if (!imgSrc) return;
            if (loadedImgSet.has(imgSrc)) return;
            // 仅过滤1x1空白占位图
            const blankGif = imgSrc.startsWith('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
            if (blankGif) return;

            loadedImgSet.add(imgSrc);
            const li = document.createElement('li');
            li.className = 'gallery-item';
            const thumb = document.createElement('img');
            thumb.className = 'gallery-thumb';
            thumb.src = imgSrc;

            // 图片加载完成后自动适配，避免裁切
            thumb.onload = function() {
                // 加载完成后刷新布局
                phoneGalleryEl.style.display = 'none';
                phoneGalleryEl.offsetHeight; // 强制重绘
                phoneGalleryEl.style.display = 'flex';
            };
            thumb.onerror = function () {
                this.style.background = '#eee';
                this.alt = '图片失效';
            };

            // 【核心修改】点击缩略图 → 手机内全屏预览，不再新开页面
            thumb.addEventListener('click', (e) => {
                e.stopPropagation();
                openFullPreview(imgSrc);
            });
            li.appendChild(thumb);
            phoneGalleryEl.appendChild(li);
        });
    }

    // 新增方法：全屏展示图片，铺满手机屏幕
    function openFullPreview(src) {
        // 清空预览层
        fullImageWrap.innerHTML = '';
        const fullImg = document.createElement('img');
        fullImg.src = src;
        fullImg.className = 'full-preview-img';
        // 点击全屏图片，关闭预览返回图库
        fullImg.addEventListener('click', () => {
            fullImageWrap.style.display = 'none';
        });
        fullImageWrap.appendChild(fullImg);
        // 显示全屏遮罩
        fullImageWrap.style.display = 'flex';
    }

    // 3. 全局DOM实时监听（捕获动态新增/懒加载图片）
    const observer = new MutationObserver(() => renderAllImages());
    observer.observe(document.body, {
        childList: true,
        subtree: true,
        attributes: true,
        attributeFilter: ['src', 'data-src', 'data-original']
    });

    // 初始渲染
    renderAllImages();

    // 4. 样式：新增全屏预览样式，保留原有全部样式
    const style = document.createElement('style');
    style.textContent = `
        /* 整机手机加宽加高，屏幕可视区域更大 */
        .phone-frame {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 99999;
            width: 280px;
            height: 520px;
            background: #1a1a1a;
            border-radius: 36px;
            padding: 12px 10px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.35);
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }
        .phone-notch {
            width: 65px;
            height: 14px;
            background: #000;
            border-radius: 0 0 10px 10px;
        }
        /* 屏幕总容器：相对定位，给全屏遮罩做父级 */
        .phone-screen-container {
            flex: 1;
            width: 100%;
            position: relative;
            border-radius: 8px;
            overflow: hidden;
        }
        /* 手机屏幕缩略图库容器 */
        .phone-gallery {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 8px;
            list-style: none;
            background: #fff;
            overflow-y: auto;
            overflow-x: hidden;
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            box-sizing: border-box;
        }
        /* 美化滚动条 */
        .phone-gallery::-webkit-scrollbar {
            width: 4px;
        }
        .phone-gallery::-webkit-scrollbar-thumb {
            background: #bbb;
            border-radius: 2px;
        }
        .phone-home {
            width: 32px;
            height: 32px;
            border: 2px solid #888;
            border-radius: 50%;
            margin-top: 4px;
        }
        /* 多列基础尺寸 */
        .gallery-item {
            flex: 1 0 42px;
            margin: 0;
        }
        /* 缩略图样式 */
        .gallery-thumb {
            width: 100%;
            height: 42px;
            object-fit: contain; /* 完整显示图片，不裁切 */
            background: #f0f0f0;
            border-radius: 4px;
            border: 1px solid #e5e5e5;
            cursor: pointer;
            transition: all 0.2s ease;
            display: block;
        }
        .gallery-thumb:hover {
            transform: scale(1.08);
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }

        /* ========== 新增：全屏预览层样式 ========== */
        .full-preview-layer {
            position: absolute;
            inset: 0;
            background: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 6px;
            box-sizing: border-box;
        }
        /* 全屏大图核心：自适应铺满手机屏幕，无裁切 */
        .full-preview-img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            cursor: pointer;
            pointer: cursor;
        }

        /* 移动端适配 */
        @media (max-width: 768px) {
            .phone-frame {
                width: 140px;
                height: 280px;
                right: 8px;
                bottom: 10px;
                top: auto;
            }
            .gallery-item {
                flex: 1 0 30px;
            }
            .gallery-thumb {
                height: 30px;
            }
            .phone-home {
                width: 22px;
                height: 22px;
            }
            .phone-notch {
                width: 40px;
                height: 8px;
            }
        }
    `;
    document.head.appendChild(style);
})();