在游戏中添加自定义信息页签
目前为
// ==UserScript==
// @name [银河奶牛]常见问题答疑
// @namespace http://tampermonkey.net/
// @version 0.1
// @description 在游戏中添加自定义信息页签
// @license sangshiCHI
// @author sangshiCHI
// @match https://www.milkywayidle.com/*
// @match https://test.milkywayidle.com/*
// @match https://luyh7.github.io/milkonomy/*
// @match https://amvoidguy.github.io/MWICombatSimulatorTest/*
// @match https://shykai.github.io/mwisim.github.io/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=milkywayidle.com
// @grant GM.xmlHttpRequest
// @grant GM_registerMenuCommand
// ==/UserScript==
(function() {
'use strict';
// 配置项
const config = {
searchPlaceholder: '输入关键词搜索...',
noResultsText: '没有找到相关内容',
contentData: [
{title: "战斗技巧", content: "钝击对抗岩石系敌人有加成效果"},
{title: "资源收集", content: "每日3次免费加速建议用于星尘采集"},
{title: "设施升级", content: "优先升级奶牛的挤奶速度属性"},
{title: "PVP策略", content: "合理搭配钝击和魔法抗性装备"}
],
animationDuration: 300// 动画时长（毫秒）
};
// 创建符合游戏样式的模态框
function createStyledModal() {
const modal = document.createElement('div');
modal.className = 'Modal_modal__1Jiep custom-modal';
modal.style.cssText = `
display: none;
position: absolute;
top: calc(100% + 10px);
right: 0;
width: 100%;
max-width: 600px;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
z-index: 1000;
max-height: 70vh;
overflow-y: auto;
opacity: 0;
transform: translateY(-10px);
transition: all ${config.animationDuration}ms ease;
`;
// 移动端适配样式
modal.innerHTML += `
<style>
@media (max-width: 768px) {
.custom-modal {
position: fixed !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -40%) !important;
width: 90% !important;
max-height: 80vh !important;
}
.custom-modal.active {
transform: translate(-50%, -50%) !important;
}
}
</style>
`;
// 弹窗内容
modal.innerHTML += `
<div style="position:relative;padding:20px;">
<div class="Modal_closeButton__3eTF7"
style="position:absolute;top:10px;right:10px;cursor:pointer;font-size:24px;">×</div>
<div class="search-container" style="margin-bottom:20px;">
<input type="text" id="customSearchInput"
placeholder="${config.searchPlaceholder}"
style="width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:4px;">
</div>
<div id="searchResults">
${config.contentData.map(item => `
<div class="search-item" style="margin-bottom:15px;padding:10px;border-bottom:1px solid #eee;">
<h3 style="color:#4CAF50;margin:0 0 5px 0;">${item.title}</h3>
<p style="color:#666;margin:0;">${item.content}</p>
</div>
`).join('')}
</div>
<div id="noResults" style="display:none;color:#999;text-align:center;padding:20px;">
${config.noResultsText}
</div>
</div>
`;
return modal;
}
// 创建集成按钮
function createHeaderButton() {
const btn = document.createElement('button');
btn.className = 'Button_button__1Fe9z header-custom-btn';
btn.textContent = '小登常见问题答疑';
btn.style.cssText = `
margin-left: auto;
padding: 8px 16px;
background: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: opacity 0.2s;
position: relative;
z-index: 1001;
`;
return btn;
}
// 搜索功能实现
function setupSearch(modal) {
const searchInput = modal.querySelector('#customSearchInput');
const items = modal.querySelectorAll('.search-item');
const noResults = modal.querySelector('#noResults');
searchInput.addEventListener('input', function(e) {
const searchTerm = e.target.value.toLowerCase();
let visibleCount = 0;
items.forEach(item => {
const text = item.textContent.toLowerCase();
const isVisible = text.includes(searchTerm);
item.style.display = isVisible ? 'block' : 'none';
if(isVisible) visibleCount++;
});
noResults.style.display = visibleCount > 0 ? 'none' : 'block';
});
}
// 初始化
function init() {
const header = document.querySelector('.Header_info__26fkk');
if (!header) return;
// 设置header定位上下文
header.style.position = 'relative';
const modal = createStyledModal();
const btn = createHeaderButton();
// 添加元素到header
header.appendChild(btn);
header.appendChild(modal);
// 弹窗控制逻辑
let isVisible = false;
const toggleModal = () => {
isVisible = !isVisible;
if (isVisible) {
modal.style.display = 'block';
setTimeout(() => {
modal.style.opacity = '1';
modal.style.transform = window.innerWidth <= 768
? 'translate(-50%, -50%)'
: 'translateY(0)';
modal.classList.add('active');
}, 10);
} else {
modal.style.opacity = '0';
modal.style.transform = window.innerWidth <= 768
? 'translate(-50%, -40%)'
: 'translateY(-10px)';
setTimeout(() => {
modal.style.display = 'none';
modal.classList.remove('active');
}, config.animationDuration);
}
};
// 事件绑定
btn.addEventListener('click', (e) => {
e.stopPropagation();
toggleModal();
});
modal.querySelector('.Modal_closeButton__3eTF7').addEventListener('click', toggleModal);
document.addEventListener('click', (e) => {
if (!modal.contains(e.target) && e.target !== btn) {
if (isVisible) toggleModal();
}
});
// 移动端触摸处理
let touchStartY = 0;
modal.addEventListener('touchstart', (e) => {
touchStartY = e.touches[0].clientY;
}, { passive: true });
modal.addEventListener('touchmove', (e) => {
if (!isVisible) return;
const deltaY = e.touches[0].clientY - touchStartY;
if (deltaY > 50) toggleModal();
}, { passive: true });
// 初始化搜索
setupSearch(modal);
}
// 等待header加载
const observer = new MutationObserver(() => {
if (document.querySelector('.Header_info__26fkk')) {
observer.disconnect();
init();
}
});
if (document.querySelector('.Header_info__26fkk')) {
init();
} else {
observer.observe(document.body, {
childList: true,
subtree: true
});
}
// 窗口大小变化处理
window.addEventListener('resize', () => {
const modal = document.querySelector('.custom-modal');
if (modal && modal.classList.contains('active')) {
modal.style.transform = window.innerWidth <= 768
? 'translate(-50%, -50%)'
: 'translateY(0)';
}
});
})();