☰

172商品列表优化

优化一些让人不适的前端页面设计

// ==UserScript==
// @name         172商品列表优化
// @namespace    http://tampermonkey.net/
// @version      1.0.7
// @description  优化一些让人不适的前端页面设计
// @author       aotmd
// @match        https://haoka.lot-ml.com/view/project/pro_list.html*
// @license MIT
// @run-at document-start
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_deleteValue
// @grant        GM_registerMenuCommand
// ==/UserScript==
// 默认每页数据条数
const defaultPage = 100;

// 获取用户设置的每页数据条数
let Page = GM_getValue('Page', defaultPage);

// 提供设置每页数据条数的选项
GM_registerMenuCommand('设置自动显示的每页数据条数', () => {
    let userInput = prompt('请输入数据条数:', Page);
    if (userInput !== null) {
        Page = parseInt(userInput, 10);
        if (!isNaN(Page) && Page > 0) {
            GM_setValue('Page', Page);
            alert('数据条数已更新为: ' + Page);
        } else {
            alert('无效的输入，请输入一个正整数。');
        }
    }
});

( function() {
    function changeText() {
        // 取得102
        var divs = document.querySelectorAll( 'div.layui-table-cell.laytable-cell-1-0-2' );
        if ( divs == null ) {
            return;
        }
        for ( var i = 0; i < divs.length; i++ ) {
            // 取得年龄
            var age = divs[ i ].querySelector( 'font' );
            if ( age ) {
                var parent = age.parentNode;
                // 判断年龄是否在首节点
                if ( parent.firstChild !== age ) {
                    // 移除多余描述
                    var ageText = age.textContent;
                    var ageRange = ageText.match( /\d+-\d+/ );
                    if ( ageRange ) {
                        age.textContent = '[' + ageRange[ 0 ] + ']';
                    }
                    // 将年龄放到首节点
                    parent.insertBefore( age, parent.firstChild );
                }
            }
        }
        const mySelect = document.querySelector( ".layui-laypage-limits > select" );
        mySelect.options[0].value=Page;
        mySelect.options[0].text=Page +' 条/页';
    }
    var flag1 = window.setInterval( () => {
        // 选择要观察的节点
        var targetNode = document.getElementById( 'layui-content' );
        if ( targetNode ) {
            clearInterval( flag1 );

            // 自动延迟显示1000条记录
            var flag2=window.setInterval( () => {
                const mySelect = document.querySelector( ".layui-laypage-limits > select" );
                if ( mySelect ) {
                    clearInterval( flag2 );
                    mySelect.options[0].value=Page;
                    mySelect.options[0].text=Page +' 条/页';
                    mySelect.value = Page+'';
                    mySelect.dispatchEvent( new Event( "change" ) )
                }
            }, 50 );

            // 创建一个观察器实例并定义回调函数
            var observer = new MutationObserver( function( mutations ) {
                try {
                    // 元素不存在则移除并终止
                    if ( !document.contains( targetNode ) ) {
                        observer.disconnect();
                        return;
                    }
                    // 先关闭再修改
                    observer.disconnect();
                    changeText();
                } catch ( e ) {
                    console.error( e );
                } finally {
                    // 修改后继续监听
                    observer.observe( targetNode, config );
                }
            } );

            // 配置观察器选项
            var config = {
                attributes: true,
                childList: true,
                subtree: true
            };

            // 传入目标节点和观察器的配置选项
            observer.observe( targetNode, config );
        }
    }, 50 );

    addStyle( `
/*全局设置*/
table {
  width: 100%;
  table-layout: auto;
}
.layui-table-view .layui-table td, .layui-table-view .layui-table th {
    padding: 2px;
}
.layui-table-cell {
    line-height: 1.5;
    font-family: Microsoft YaHei UI,微软雅黑,"iconfont","FontAwesome"!important;
}
/*关闭动画*/
.layui-table tr {
    transition: unset!important;
    -webkit-transition: unset!important;
}
/*响应式布局修复*/
@media screen and (min-width: 760px){
    .layui-col-md1, .layui-col-md10, .layui-col-md11, .layui-col-md12, .layui-col-md2, .layui-col-md3, .layui-col-md4, .layui-col-md5, .layui-col-md6, .layui-col-md7, .layui-col-md8, .layui-col-md9 {
        float: left;
    }
}
/*商品页不用点击查看禁发区*/
.layui-table-cell > span {
    display: inline!important;
    font-size: 10px;
}
.layui-table-cell a[style*="color: rgb"] {
    display: none;
    height: 0px;
}

/*宽度定义以及出现滚动条*/
.layui-table-cell.laytable-cell-1-0-0 {
    width: 50px;
}
.layui-table-cell.laytable-cell-1-0-1 {
    width: 108px;
}
.layui-table-cell.laytable-cell-1-0-2 > font {
    vertical-align: text-bottom;
}
.layui-table-cell{
    --102MinWidth:300px;/* 设置最小宽度为300像素 */
    --109MinWidth:260px;
    --RemainingWidth:calc( 100vw - 989px - 50px - 80px - var(--102MinWidth) - var(--109MinWidth) );
}
.layui-table-cell.laytable-cell-1-0-2 {
    max-height: 105px;
    width: max( var(--102MinWidth) , calc( var(--102MinWidth) + var(--RemainingWidth) * 0.8 ) );
    overflow: auto;
}
.layui-table-cell.laytable-cell-1-0-3 {
    width: 50px;
}
.layui-table-cell.laytable-cell-1-0-4 {
    width: 52px;
}
.layui-table-cell.laytable-cell-1-0-7 {
    width: 50px;
}
.layui-table-cell.laytable-cell-1-0-8 {
    width: 50px;
}
font.sm_1_on,.sm_2 {/*按钮置0*/
    padding: 0px;
}
.layui-table-cell.laytable-cell-1-0-9 {
    width: 50px;
}
.layui-table-cell.laytable-cell-1-0-10 {
    max-height: 108px;
    width: max( var(--109MinWidth) , calc( var(--109MinWidth) + var(--RemainingWidth) * 0.2 ) );
    font-size: 10px;
    overflow-y: auto;
    overflow-x: hidden;
}
/*消除br的作用*/
.layui-table-cell.laytable-cell-1-0-10 > br {
    content: "\\0020\\0020";
    padding-left: 2em;
}
.layui-table-cell.laytable-cell-1-0-11 {
    width: 90px;
}
.layui-table-cell.laytable-cell-1-0-13 {
    width: 60px;
}
span.sm_1_on {
    padding: 0px;
}
.layui-table-cell.laytable-cell-1-0-14 {
    width: 465px;
}
.layui-table-cell.laytable-cell-1-0-14 > button {
    margin: 0px;
}
.layui-table-cell.laytable-cell-1-0-14 >div {
    display: inline;
}
/*滚动条变细*/
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 1, 0.2) rgba(0, 0, 1, 0.05);
}
::-webkit-scrollbar{
    width: 8px;
    height: 10px;
    background: rgba(255,255,255, 0.2);
}
::-webkit-scrollbar-thumb:vertical {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-thumb:hover {
    transition: 1s;
    height: 60px;
    width: 60px;
    border:1px solid #ab23fd;
}
::-webkit-scrollbar:hover{
    border:1px solid rgba(255,255,255,0.5);
}
::-webkit-scrollbar-thumb {
    background: rgba(0,0,1, 0.8);
    border-radius: 100px;
}
/*1.0.2 滚动条上移到整个界面,方便PC端*/
.layui-table-box, .layui-table-body.layui-table-main {
    display: inline-block;
}
        ` );

    //添加css样式
    function addStyle( rules ) {
        let styleElement = document.createElement( 'style' );
        styleElement[ "type" ] = 'text/css';
        document.getElementsByTagName( 'head' )[ 0 ].appendChild( styleElement );
        styleElement.appendChild( document.createTextNode( rules ) );
    }
} )();