📋 已记录：${visitedLinksArray.length} / ${MAX_LINKS}
🔗 页面链接：${document.querySelectorAll('a[href]').length}
${underlineLabels[settings.underline]} (${settings.underline})
`;
(document.body || document.documentElement).appendChild(overlay);
const svPanel = overlay.querySelector('#sv-panel');
const svBg = overlay.querySelector('.sv-bg');
const svCursor = overlay.querySelector('.sv-cursor');
const hueSlider = overlay.querySelector('#hue-slider');
const hueThumb = overlay.querySelector('.hue-thumb');
const previewBox = overlay.querySelector('#color-preview-box');
const hexInput = overlay.querySelector('#hex-input');
const applyColor = (hex) => {
settings.color = hex;
GM_setValue('linkColor', hex);
updateStyles();
previewBox.style.backgroundColor = hex;
if (document.activeElement !== hexInput) hexInput.value = hex;
};
const updateFromHsv = () => {
const hex = hsvToHex(currentH, currentS, currentV);
applyColor(hex);
updateCursor();
};
const updateCursor = () => {
if (svCursor && svPanel) {
const rect = svPanel.getBoundingClientRect();
svCursor.style.left = (currentS * rect.width) + 'px';
svCursor.style.top = ((1 - currentV) * rect.height) + 'px';
}
if (hueThumb && hueSlider) {
hueThumb.style.left = (currentH / 360 * 100) + '%';
}
};
const updateSvBackground = () => { svBg.style.backgroundColor = hsvToHex(currentH, 1, 1); };
updateSvBackground();
updateFromHsv();
const setSvFromEvent = (e) => {
const rect = svPanel.getBoundingClientRect();
const clientX = e.touches ? e.touches[0].clientX : e.clientX;
const clientY = e.touches ? e.touches[0].clientY : e.clientY;
currentS = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
currentV = 1 - Math.min(1, Math.max(0, (clientY - rect.top) / rect.height));
updateFromHsv();
};
svPanel.addEventListener('mousedown', (e) => {
e.preventDefault();
setSvFromEvent(e);
const moveH = (e) => { e.preventDefault(); setSvFromEvent(e); };
const upH = () => { document.removeEventListener('mousemove', moveH); document.removeEventListener('mouseup', upH); };
document.addEventListener('mousemove', moveH);
document.addEventListener('mouseup', upH);
});
svPanel.addEventListener('touchstart', (e) => {
e.preventDefault();
setSvFromEvent(e);
const moveH = (e) => { e.preventDefault(); setSvFromEvent(e); };
const endH = () => { document.removeEventListener('touchmove', moveH); document.removeEventListener('touchend', endH); };
document.addEventListener('touchmove', moveH, { passive: false });
document.addEventListener('touchend', endH);
});
const setHueFromEvent = (e) => {
const rect = hueSlider.getBoundingClientRect();
const clientX = e.touches ? e.touches[0].clientX : e.clientX;
let x = clientX - rect.left;
x = Math.min(rect.width, Math.max(0, x));
currentH = Math.round((x / rect.width) * 360);
updateSvBackground();
updateFromHsv();
};
hueSlider.addEventListener('mousedown', (e) => {
e.preventDefault();
setHueFromEvent(e);
const moveH = (e) => { e.preventDefault(); setHueFromEvent(e); };
const upH = () => { document.removeEventListener('mousemove', moveH); document.removeEventListener('mouseup', upH); };
document.addEventListener('mousemove', moveH);
document.addEventListener('mouseup', upH);
});
hueSlider.addEventListener('touchstart', (e) => {
e.preventDefault();
setHueFromEvent(e);
const moveH = (e) => { e.preventDefault(); setHueFromEvent(e); };
const endH = () => { document.removeEventListener('touchmove', moveH); document.removeEventListener('touchend', endH); };
document.addEventListener('touchmove', moveH, { passive: false });
document.addEventListener('touchend', endH);
});
const applyHex = (hex) => {
if (/^#[0-9a-fA-F]{6}$/.test(hex)) {
const newHsv = hexToHsv(hex);
currentH = newHsv.h; currentS = newHsv.s; currentV = newHsv.v;
updateSvBackground();
updateFromHsv();
}
};
hexInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') applyHex(hexInput.value.trim()); });
hexInput.addEventListener('blur', () => applyHex(hexInput.value.trim()));
overlay.querySelector('#underline-preview-btn').addEventListener('click', () => {
showUnderlinePicker(settings.underline, (val) => {
settings.underline = val;
GM_setValue('underlineType', val);
updateStyles();
overlay.querySelector('#underline-label').textContent = `${underlineLabels[val]} (${val})`;
});
});
overlay.querySelector('#weight-slider').addEventListener('input', (e) => {
const val = e.target.value;
overlay.querySelector('#weight-display').textContent = val;
settings.weight = val;
GM_setValue('linkWeight', val);
updateStyles();
});
overlay.querySelector('#alpha-slider').addEventListener('input', (e) => {
const val = parseFloat(e.target.value).toFixed(2);
overlay.querySelector('#alpha-display').textContent = val;
settings.glassAlpha = parseFloat(val);
document.documentElement.style.setProperty('--glass-alpha', val);
GM_setValue('glassAlpha', settings.glassAlpha);
});
document.documentElement.style.setProperty('--glass-alpha', settings.glassAlpha);
const blurCheckbox = overlay.querySelector('#blur-switch');
blurCheckbox.addEventListener('change', () => {
settings.blurEnabled = blurCheckbox.checked;
GM_setValue('blurEnabled', settings.blurEnabled);
document.documentElement.style.setProperty('--blur', settings.blurEnabled ? '12px' : '0px');
});
const autoCleanCheckbox = overlay.querySelector('#auto-clean-switch');
const autoCleanDaysBtn = overlay.querySelector('#auto-clean-days-btn');
autoCleanCheckbox.addEventListener('change', () => {
autoCleanEnabled = autoCleanCheckbox.checked;
GM_setValue('autoCleanEnabled', autoCleanEnabled);
if (autoCleanEnabled) applyAutoClean();
});
autoCleanDaysBtn.addEventListener('click', () => {
showDayPicker(autoCleanDays, (newDays) => {
autoCleanDays = newDays;
GM_setValue('autoCleanDays', autoCleanDays);
autoCleanDaysBtn.textContent = dayLabels[autoCleanDays];
if (autoCleanEnabled) applyAutoClean();
});
});
const closeBtn = overlay.querySelector('.close-btn');
const closePanel = () => overlay.classList.remove('show');
closeBtn.addEventListener('click', closePanel);
overlay.addEventListener('click', (e) => { if (e.target === overlay) closePanel(); });
return overlay;
}
/* -------- 路由监听 -------- */
function patchRouter() {
const origPush = history.pushState;
const origReplace = history.replaceState;
history.pushState = function(...args) { origPush.apply(this, args); onRouteChange(); };
history.replaceState = function(...args) { origReplace.apply(this, args); onRouteChange(); };
window.addEventListener('popstate', onRouteChange);
window.addEventListener('hashchange', onRouteChange);
}
function onRouteChange() {
applyVisitedStylesWithRetry();
}
function applyVisitedStylesWithRetry(maxRetries = 5, delay = 400) {
let retries = 0;
const tryApply = () => {
if (hasValidBody()) {
applyVisitedStyles();
injectAllShadowStyles();
return;
}
if (++retries < maxRetries) setTimeout(tryApply, delay);
};
tryApply();
}
/* -------- 事件监听 -------- */
function setupEventListeners() {
document.addEventListener('click', (e) => {
if (touchHandled) { touchHandled = false; return; }
handleInteraction(e.target);
}, true);
document.addEventListener('auxclick', (e) => {
if (e.button === 1) {
if (touchHandled) { touchHandled = false; return; }
handleInteraction(e.target);
}
}, true);
document.addEventListener('touchstart', (e) => {
if (e.touches.length > 0) {
touchStartX = e.touches[0].clientX;
touchStartY = e.touches[0].clientY;
}
}, { passive: true });
document.addEventListener('touchend', (e) => {
const touch = e.changedTouches[0];
if (!touch) return;
const dx = Math.abs(touch.clientX - touchStartX);
const dy = Math.abs(touch.clientY - touchStartY);
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 10) {
touchHandled = true;
clearTimeout(touchHandledTimer);
touchHandledTimer = setTimeout(() => { touchHandled = false; }, 500);
handleInteraction(e.target);
}
}, { passive: true });
}
function setupMutationObserver() {
observer = new MutationObserver((mutations) => {
let hasNewNodes = false;
for (const m of mutations) {
if (m.type === 'childList' && m.addedNodes.length) {
m.addedNodes.forEach(node => pendingNodes.push(node));
hasNewNodes = true;
}
}
if (hasNewNodes) {
clearTimeout(observerTimer);
observerTimer = setTimeout(flushPendingNodes, 200);
}
});
observer.observe(document.documentElement, { childList: true, subtree: true });
}
/* -------- 初始化 -------- */
function coreInit() {
initVisitedLinks();
applyAutoClean();
updateStyles();
injectGlobalDialogStyles();
document.documentElement.style.setProperty('--glass-alpha', settings.glassAlpha);
document.documentElement.style.setProperty('--blur', settings.blurEnabled ? '12px' : '0px');
panelOverlay = createSettingsPanel();
GM_registerMenuCommand('⚙️ 打开已访问链接样式面板', () => {
if (panelOverlay) {
panelOverlay.classList.add('show');
updateStatsInPanel();
}
});
setupEventListeners();
setupMutationObserver();
applyVisitedStyles();
injectAllShadowStyles();
patchRouter();
}
function attemptInit() {
if (document.body) {
coreInit();
} else {
const initObserver = new MutationObserver(() => {
if (document.body) {
initObserver.disconnect();
coreInit();
}
});
initObserver.observe(document.documentElement, { childList: true, subtree: true });
setTimeout(() => {
initObserver.disconnect();
if (document.body) coreInit();
}, 5000);
}
}
attemptInit();
window.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') forceSave();
});
window.addEventListener('beforeunload', () => {
forceSave();
if (observer) observer.disconnect();
clearTimeout(observerTimer);
});
})();
