查看“Widget:Check周边”的源代码

<noinclude><div id="data-merchandise" class="data-hide">{
"周边:a1":"中国大陆","周边:a2":"中国大陆,中国大陆,中国大陆,中国大陆,中国大陆,中国大陆","周边:a3":"中国台湾,中国大陆","周边:a5":"中国台湾","周边:c1":"中国香港","周边:axxx":"中国大陆",}</div><div id="data-merchandise-all" class="data-hide">["周边:a1","周边:a2","周边:a3","周边:a5","周边:a6"]</div><div id="data-merchandise-area" class="data-hide">["中国大陆","中国台湾"]</div>{{#widget:check周边}}
</noinclude><includeonly>
<div id="data-process-result">
    <!-- 数据说明 -->
    <div id="data-description" class="check-section">
        <h3>各地区周边数量检查</h3>
        <div id="check-data-num"></div>
        <div id="create-merchandise-btn"></div>
    </div>

    <!-- 数据不一致 -->
    <div id="data-inconsistency" class="check-section error" style="display: none;">
        <h3>周边数据存在出入</h3>
        <div class="check-content">
            <!-- 缺少地区信息的周边 -->
            <div id="missing-area-info" class="check-item" style="display: none;">
                <h4>缺少地区信息的周边</h4>
                <div class="error-block">
                    <div class="error-names" id="missing-area-list"></div>
                    <div class="error-detail">
                        <div class="error-reason">原因：这些周边没有找到主题地区的属性</div>
                        <div class="error-suggestion">建议：建立该周边的主题->刷新主题页面缓存->刷新提及周边的页面缓存->刷新本页缓存重新检查
                        </div>
                    </div>
                </div>
            </div>

            <!-- 多余的周边数据 -->
            <div id="extra-merchandise" class="check-item" style="display: none;">
                <h4>多余的周边数据</h4>
                <div class="error-block">
                    <div class="error-names" id="extra-merchandise-list"></div>
                    <div class="error-detail">
                        <div class="error-reason">原因：这些周边有主题地区参数，但是直接查询周边时没有其数据</div>
                        <div class="error-suggestion">建议：此情况不太可能发生，联系站内管理解决</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 格式问题 -->
    <div id="format-issues" class="check-section error" style="display: none;">
        <h3>周边页面格式问题</h3>
        <div class="check-content">
            <!-- 格式不正确的页面名 -->
            <div id="invalid-format" class="check-item" style="display: none;">
                <h4>格式不正确的页面名</h4>
                <div class="error-block">
                    <div class="error-names" id="invalid-format-list"></div>
                    <div class="error-reason">原因：不符合页面命名规范（周边:英文标识+连续序号）</div>
                </div>
            </div>

            <!-- 未定义的地区 -->
            <div id="invalid-area" class="check-item" style="display: none;">
                <h4>使用了未定义的地区</h4>
                <div class="error-block">
                    <div class="error-names" id="invalid-area-list"></div>
                    <div class="error-reason">原因：本页检查尚未更新该地区及其对应英文标识</div>
                    <div class="error-suggestion">建议：更新相关地区的信息，或修正该主题的地区为本页所记录的地区（此举措需要刷新主题及相关周边的缓存）</div>
                </div>
            </div>

            <!-- 序号不连续 -->
            <div id="discontinuous-seq" class="check-item" style="display: none;">
                <h4>序号不连续</h4>
                <div class="error-block">
                    <div class="error-names" id="discontinuous-seq-content"></div>
                    <div class="error-reason">原因：缺少/多出序号，这个错误往往和数量不匹配错误一起出现</div>
                    <div class="error-suggestion">建议：检查该序号页面</div>
                </div>
            </div>

            <!-- 序号与数量不匹配 -->
            <div id="invalid-max-seq" class="check-item" style="display: none;">
                <h4>序号与数量不匹配</h4>
                <div class="error-block">
                    <div class="error-names" id="invalid-max-seq-content"></div>
                    <div class="error-reason">原因：缺少/多出序号，这个错误往往和序号不连续错误一起出现</div>
                    <div class="error-suggestion">建议：检查序号不连续的页面</div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
// 数据处理函数
function processData(text, type = 'object') {
    try {
        // 移除多余的换行和空格，处理特殊字符
        let processedText = text.replace(/\s+/g, ' ')
            .trim()
            .replace(/,\s*}/g, '}')  // 移除JSON对象末尾的逗号
            .replace(/[\ufeff\u200b]/g, '');  // 移除不可见字符

        const data = JSON.parse(processedText);

        // 根据类型转换数据结构
        if (type === 'arr') {
            if (Array.isArray(data)) {
                return data;
            } else if (typeof data === 'object') {
                return Object.values(data);
            }
        } else if (type === 'object') {
            if (typeof data === 'object' && !Array.isArray(data)) {
                return data;
            } else if (Array.isArray(data)) {
                return data.reduce((obj, val, idx) => {
                    obj[`item${idx}`] = val;
                    return obj;
                }, {});
            }
        }

        return data; // 如果没有指定类型或转换失败，返回原始解析数据
    } catch (error) {
        console.error('数据解析错误:', error);
        console.error('错误文本:', text);
        return null;
    }
}

// jq监听页面元素加载完成
$(function () {
    console.log('jQuery已加载');
    const linkpre = 'https://wiki.biligame.com/lysk/';

    // 页面名转a标签
    function renderPageLink(pageName) {
        return `<a href="${linkpre}${pageName}" target="_blank" class="page-link">${pageName}</a>`;
    }

    // 处理带主题地区参数的周边
    const merchandiseData = processData($('#data-merchandise').text(), 'object');
    console.log('merchandise数据:', merchandiseData);

    // 所有周边
    const merchandiseAllData = processData($('#data-merchandise-all').text(), 'arr');
    console.log('merchandise-all数据:', merchandiseAllData);

    // 地区列表直接用数组
    const merchandiseAreaList = processData($('#data-merchandise-area').text(), 'arr');
    // 统计每个地区的周边页面数量（每个页面val里同一地区只计数+1）
    const areaCount = {};
    for (const area of merchandiseAreaList) {
        areaCount[area] = 0;
    }
    for (const areas of Object.values(merchandiseData)) {
        const areaSet = new Set(areas.split(','));
        areaSet.forEach(area => {
            if (areaCount.hasOwnProperty(area)) {
                areaCount[area]++;
            }
        });
    }
    let areaNumHtml = Object.entries(areaCount).map(([area, count]) =>
        `${area}：${count}`
    ).join('<br>');
    areaNumHtml += `<br>总页面数量：${merchandiseAllData.length}`;
    $('#check-data-num').html(areaNumHtml);

    // 检查带主题地区参数的周边数量和所有周边数量是否一致
    const diffResult = diffMerchandiseCount(merchandiseAllData, merchandiseData);
    if (diffResult) {
        $('#data-inconsistency').show();

        if (diffResult.missing.length > 0) {
            $('#missing-area-info').show();
            $('#missing-area-list').html(
                diffResult.missing.map(item =>
                    `<div class="error-name">${renderPageLink(item)}</div>`
                ).join('')
            );
        }

        if (diffResult.extra.length > 0) {
            $('#extra-merchandise').show();
            $('#extra-merchandise-list').html(
                diffResult.extra.map(item =>
                    `<div class="error-name">${renderPageLink(item)}</div>`
                ).join('')
            );
        }
    }

    // 检查页面名字是否符合规范和序号连续性（所有地区统一周边:a+数字）
    const formatResult = diffMerchandiseData(merchandiseData, merchandiseAllData);
    if (formatResult) {
        $('#format-issues').show();
        if (formatResult.invalidFormat.length > 0) {
            $('#invalid-format').show();
            $('#invalid-format-list').html(
                formatResult.invalidFormat.map(item =>
                    `<div class="error-name">${renderPageLink(item.page)}\n                            <span class="info-icon" title="点击查看详情">?</span>\n                            <div class="info-detail">\n                                <div>${item.info}</div>\n                            </div>\n                        </div>`
                ).join('')
            );
        }
        if (formatResult.discontinuousSeq.length > 0) {
            $('#discontinuous-seq').show();
            $('#discontinuous-seq-content').html(
                formatResult.discontinuousSeq.map(seq =>
                    `<div class="error-name">${renderPageLink('周边:a' + seq)}\n                            <span class="info-icon" title="点击查看详情">?</span>\n                            <div class="info-detail">缺少序号${seq}的页面</div>\n                        </div>`
                ).join('')
            );
        }
        if (formatResult.invalidMaxSeq) {
            $('#invalid-max-seq').show();
            $('#invalid-max-seq-content').html(
                `<div class="error-name">最大序号${formatResult.invalidMaxSeq.maxSeq}，实际页面数量${formatResult.invalidMaxSeq.actualCount}\n                        <span class="info-icon" title="点击查看详情">?</span>\n                        <div class="info-detail">最大序号和页面数量不一致，建议检查是否有遗漏或多余页面</div>\n                    </div>`
            );
        }
    }

    // 创建周边按钮
    const createBtnHtml = `<button id="create-merch-btn" class="create-merch-btn">创建新周边</button>`;
    $('#create-merchandise-btn').html(createBtnHtml);
    $('#create-merch-btn').on('click', function() {
        const newPageNum = merchandiseAllData.length + 1;
        window.open(`${linkpre}index.php?title=周边:a${newPageNum}&action=edit`, '_blank');
    });
});

// 检查带主题地区参数的周边数量和所有周边数量是否一致，不一致则返回具体不一致的内容
function diffMerchandiseCount(merchandise_all, merchandise) {
    const allMerchandiseSet = new Set(merchandise_all);
    const merchandiseSet = new Set(Object.keys(merchandise));

    // 找出在merchandise_all中存在但在merchandise中不存在的项
    const missingInMerchandise = Array.from(allMerchandiseSet).filter(item => !merchandiseSet.has(item));

    // 找出在merchandise中存在但在merchandise_all中不存在的项
    const extraInMerchandise = Array.from(merchandiseSet).filter(item => !allMerchandiseSet.has(item));

    if (missingInMerchandise.length > 0 || extraInMerchandise.length > 0) {
        return {
            missing: missingInMerchandise,  // merchandise中缺少的项
            extra: extraInMerchandise      // merchandise中多出的项
        };
    }
    return false;
}

// 检查页面名字是否符合规范和序号连续性（所有地区统一周边:a+数字）
function diffMerchandiseData(merchandise, merchandiseAllArr) {
    const result = {
        invalidFormat: [],      // 格式不正确的页面名（含详细错误信息）
        discontinuousSeq: [],  // 缺失的序号数组
        invalidMaxSeq: false   // 最大序号与数量不一致
    };
    let seqArr = [];
    Object.keys(merchandise).forEach(page => {
        // 只允许周边:a+数字
        const match = page.match(/^周边:a(\d+)$/);
        if (!match) {
            let info = '';
            if (!page.startsWith('周边:a')) {
                info = '前缀错误，应为：周边:a';
            } else {
                info = '序号错误，应为数字';
            }
            result.invalidFormat.push({ page, info });
        } else {
            const seq = parseInt(match[1]);
            seqArr.push(seq);
        }
    });
    if (seqArr.length > 0) {
        seqArr.sort((a, b) => a - b);
        let maxSeq = seqArr[seqArr.length - 1];
        // 检查序号连续性
        let missing = [];
        for (let i = 1; i <= maxSeq; i++) {
            if (!seqArr.includes(i)) {
                missing.push(i);
            }
        }
        if (missing.length > 0) {
            result.discontinuousSeq = missing;
        }
        // 检查最大序号和页面数量是否一致
        if (maxSeq !== merchandiseAllArr.length) {
            result.invalidMaxSeq = { maxSeq, actualCount: merchandiseAllArr.length };
        }
    }
    return (result.invalidFormat.length > 0 || result.discontinuousSeq.length > 0 || result.invalidMaxSeq) ? result : false;
}

</script>
<style>
.data-hide{
    display: none;
}
.hightlight-red{
    color:red;
}
.check-section {
    margin-bottom: 30px;
    border: 1px solid black;
    border-radius: 8px;
    overflow: hidden;
    padding: 0 10px 10px;
}
.check-section.error {
    border-color: #ff4d4f;
}
.check-item {
    margin-bottom: 20px;
}
.check-item:last-child {
    margin-bottom: 0;
}
.error-block {
    background-color: #fff;
    border: 1px solid #ffccc7;
    border-radius: 4px;
    padding: 16px;
}
.error-names {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px dashed #ffccc7;
}
.error-name {
    position: relative;
    padding: 4px 8px;
    background-color: #fff1f0;
    border: 1px solid #ffccc7;
    border-radius: 4px;
    color: #ff4d4f;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.info-icon {
    cursor: pointer;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #ff4d4f;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    transition: background-color 0.2s;
}
.info-icon:hover {
    background-color: #ff7875;
}
.info-detail {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    padding: 8px;
    background-color: white;
    border: 1px solid #ffccc7;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 1000;
    min-width: 200px;
    font-size: 12px;
    color: #666;
}
.info-detail::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 8px;
    width: 8px;
    height: 8px;
    background-color: white;
    border-left: 1px solid #ffccc7;
    border-top: 1px solid #ffccc7;
    transform: rotate(45deg);
}
.error-name:hover .info-detail {
    display: block;
}
.error-detail {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
}
.error-reason {
    margin-bottom: 12px;
    color: #333;
    font-size: 14px;
}
.error-suggestion {
    color: #666;
    font-size: 14px;
}
.error-suggestion div {
    margin-bottom: 4px;
}
.error-suggestion div:last-child {
    margin-bottom: 0;
}
.page-link {
    color: #ff4d4f;
    text-decoration: underline;
    margin-right: 2px;
}
.page-link:hover {
    color: #d9363e;
    text-decoration: underline;
}
.create-merch-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 20px;
    background: #ff4d4f;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s;
}
.create-merch-btn:hover {
    background: #d9363e;
}
</style>
</includeonly>