基础设置
${!mobile ? `
鼠标划词翻译（独立运行）
` : ''}
界面设置
翻译服务
忽略规则
图片 / iframe / 属性
自定义术语
高级 / 性能
💡 ${mobile ? '长按' : '拖动'}悬浮球或面板标题栏可调整位置，设置会自动保存
🚀 基于 translate.js v4 引擎，支持 100+ 种语言、图片/iframe/划词翻译
🖱️ 划词翻译拥有独立的源/目标语言，与整页翻译互不干扰
⚡ 多层缓存加速，二次访问极速响应
`;
document.body.appendChild(panel);
this.panel = panel;
this.updatePanelSize();
this.panel.style.setProperty('opacity', String(c.panelOpacity));
if (c.panelPosition) {
this.panel.style.setProperty('left', `${c.panelPosition.x}px`);
this.panel.style.setProperty('top', `${c.panelPosition.y}px`);
}
}
updatePanelSize() {
const mobile = isMobile();
const size = this.cm.get('panelSize');
const baseWidth = mobile ? window.innerWidth * 0.9 : 440;
const baseHeight = mobile ? window.innerHeight * 0.8 : 650;
const width = Math.min(baseWidth * size, mobile ? window.innerWidth * 0.95 : 680);
const maxHeight = baseHeight * size;
this.panel.style.setProperty('width', `${width}px`);
this.panel.style.setProperty('max-height', `${maxHeight}px`);
const body = this.panel.querySelector('.translate-panel-body');
if (body) body.style.setProperty('max-height', `${maxHeight - 60}px`);
}
bindEvents() {
if (isMobile()) this.bindMobileBall(); else this.bindDesktopBall();
this.bindPanelDrag();
this.bindControls();
window.addEventListener('resize', () => { this.ensureInViewport(); this.ensurePanelInViewport(); });
window.addEventListener('orientationchange', () => setTimeout(() => {
this.ensureInViewport(); this.ensurePanelInViewport(); this.updatePanelSize();
}, 300));
}
bindPanelDrag() {
const header = this.panel.querySelector('.translate-panel-header');
const mobile = isMobile();
let dragging = false, sx, sy, ix, iy, lpTimer = null;
const start = (cx, cy) => { sx = cx; sy = cy; ix = this.panel.offsetLeft; iy = this.panel.offsetTop; };
const move = (cx, cy) => {
let nx = ix + (cx - sx), ny = iy + (cy - sy);
nx = Math.max(0, Math.min(nx, window.innerWidth - this.panel.offsetWidth));
ny = Math.max(0, Math.min(ny, window.innerHeight - this.panel.offsetHeight));
this.panel.style.setProperty('left', `${nx}px`);
this.panel.style.setProperty('top', `${ny}px`);
};
const end = () => {
if (dragging) {
dragging = false; this.panel.classList.remove('dragging');
this.cm.set('panelPosition', { x: parseInt(this.panel.style.left), y: parseInt(this.panel.style.top) });
}
};
if (mobile) {
header.addEventListener('touchstart', (e) => {
if (e.target.id === 'tp-close') return;
const t = e.touches[0]; start(t.clientX, t.clientY);
lpTimer = setTimeout(() => { dragging = true; this.panel.classList.add('dragging'); navigator.vibrate && navigator.vibrate(50); }, 300);
e.preventDefault();
});
header.addEventListener('touchmove', (e) => {
const t = e.touches[0];
if (!dragging) {
if (lpTimer && Math.hypot(t.clientX - sx, t.clientY - sy) > 10) { clearTimeout(lpTimer); lpTimer = null; }
return;
}
move(t.clientX, t.clientY); e.preventDefault();
});
header.addEventListener('touchend', () => { if (lpTimer) { clearTimeout(lpTimer); lpTimer = null; } end(); });
} else {
header.addEventListener('mousedown', (e) => {
if (e.target.id === 'tp-close') return;
dragging = true; start(e.clientX, e.clientY); this.panel.classList.add('dragging'); e.preventDefault();
});
document.addEventListener('mousemove', (e) => { if (dragging) move(e.clientX, e.clientY); });
document.addEventListener('mouseup', end);
}
}
bindMobileBall() {
let lpTimer = null, dragging = false, moved = false;
this.floatBall.addEventListener('touchstart', (e) => {
e.preventDefault();
const t = e.touches[0];
this.touchStartPos = { x: t.clientX, y: t.clientY };
moved = false;
lpTimer = setTimeout(() => { dragging = true; this.floatBall.classList.add('dragging'); navigator.vibrate && navigator.vibrate(50); }, 300);
this.dragOffset.x = t.clientX - this.floatBall.offsetLeft;
this.dragOffset.y = t.clientY - this.floatBall.offsetTop;
});
this.floatBall.addEventListener('touchmove', (e) => {
e.preventDefault();
const t = e.touches[0];
if (Math.hypot(t.clientX - this.touchStartPos.x, t.clientY - this.touchStartPos.y) > 10) {
moved = true; if (lpTimer) { clearTimeout(lpTimer); lpTimer = null; }
}
if (dragging) this.moveBall(t.clientX - this.dragOffset.x, t.clientY - this.dragOffset.y);
});
this.floatBall.addEventListener('touchend', (e) => {
e.preventDefault();
if (lpTimer) { clearTimeout(lpTimer); lpTimer = null; }
this.floatBall.classList.remove('dragging');
if (dragging) this.cm.set('floatBallPosition', { x: parseInt(this.floatBall.style.left), y: parseInt(this.floatBall.style.top) });
else if (!moved) this.handleBallClick();
dragging = false; moved = false;
});
}
bindDesktopBall() {
this.floatBall.addEventListener('click', () => { if (!this.isDragging) this.handleBallClick(); });
this.floatBall.addEventListener('mousedown', (e) => {
this.isDragging = false;
this.dragOffset.x = e.clientX - this.floatBall.offsetLeft;
this.dragOffset.y = e.clientY - this.floatBall.offsetTop;
this.floatBall.classList.add('dragging');
const mm = (ev) => { this.isDragging = true; this.moveBall(ev.clientX - this.dragOffset.x, ev.clientY - this.dragOffset.y); };
const mu = () => {
document.removeEventListener('mousemove', mm);
document.removeEventListener('mouseup', mu);
this.floatBall.classList.remove('dragging');
if (this.isDragging) this.cm.set('floatBallPosition', { x: parseInt(this.floatBall.style.left), y: parseInt(this.floatBall.style.top) });
setTimeout(() => { this.isDragging = false; }, 100);
};
document.addEventListener('mousemove', mm);
document.addEventListener('mouseup', mu);
});
}
moveBall(x, y) {
if (!this.cm.get('allowHalfBall')) {
x = Math.max(0, Math.min(x, window.innerWidth - this.floatBall.offsetWidth));
y = Math.max(0, Math.min(y, window.innerHeight - this.floatBall.offsetHeight));
} else {
const h = this.floatBall.offsetWidth / 2;
x = Math.max(-h, Math.min(x, window.innerWidth - h));
y = Math.max(-h, Math.min(y, window.innerHeight - h));
}
this.floatBall.style.setProperty('left', `${x}px`);
this.floatBall.style.setProperty('top', `${y}px`);
}
handleBallClick() {
if (this.cm.get('doubleClickToggle')) {
this.clickCount++;
if (this.clickCount === 1) {
this.clickTimer = setTimeout(() => { this.togglePanel(); this.clickCount = 0; }, 300);
} else if (this.clickCount === 2) {
clearTimeout(this.clickTimer); this.clickCount = 0;
const enabled = this.cm.get('enabled');
if (!enabled) {
this.cm.set('enabled', true); this.tm.toggle(true);
this.tm.changeLanguage(this.cm.get('targetLanguage'));
this.updateUI(); this.toast.show('✅ 翻译已开启');
} else {
this.cm.set('enabled', false); this.tm.toggle(false);
this.updateUI(); this.toast.show('❌ 翻译已关闭');
}
}
} else {
this.togglePanel();
}
}
bindControls() {
const $ = (id) => document.getElementById(id);
$('tp-close').addEventListener('click', () => this.togglePanel());
$('tp-now').addEventListener('click', () => {
this.tm.changeLanguage(this.cm.get('targetLanguage'));
this.toast.show('🚀 正在翻译...'); this.togglePanel();
});
$('tp-enable').addEventListener('change', (e) => {
this.cm.set('enabled', e.target.checked);
this.tm.toggle(e.target.checked);
this.toast.show(e.target.checked ? '✅ 翻译已启用' : '❌ 翻译已禁用');
});
$('tp-auto').addEventListener('change', (e) => {
this.cm.set('autoTranslate', e.target.checked);
this.toast.show(e.target.checked ? '✅ 自动翻译已启用' : '❌ 自动翻译已禁用');
});
$('tp-local').addEventListener('change', (e) => {
this.cm.set('localLanguage', e.target.value);
this.toast.show('✅ 整页翻译源语言已更新');
});
$('tp-target').addEventListener('change', (e) => {
this.cm.set('targetLanguage', e.target.value);
this.toast.show('✅ 整页翻译目标语言已更新');
});
// 划词翻译开关 + 独立源/目标语言
const sel = $('tp-selection');
if (sel) {
sel.addEventListener('change', (e) => {
this.cm.set('enableSelectionTranslate', e.target.checked);
if (e.target.checked) {
this.tm.startSelectionTranslate();
this.toast.show('✅ 划词翻译已启用（独立源/目标语言）');
} else {
this.tm.stopSelectionTranslate();
this.toast.show('❌ 划词翻译已禁用，刷新页面完全停止', 'info', 2500);
}
});
}
const selLocal = $('tp-sel-local');
if (selLocal) {
selLocal.addEventListener('change', (e) => {
this.cm.set('selectionLocalLanguage', e.target.value);
this.tm.enforceSelectionLanguage();
this.toast.show('✅ 划词翻译源语言已更新');
});
}
const selTarget = $('tp-sel-target');
if (selTarget) {
selTarget.addEventListener('change', (e) => {
this.cm.set('selectionTargetLanguage', e.target.value);
this.tm.enforceSelectionLanguage();
this.toast.show('✅ 划词翻译目标语言已更新');
});
}
$('tp-showball').addEventListener('change', (e) => {
this.cm.set('showFloatBall', e.target.checked);
this.floatBall.classList.toggle('tt-show', e.target.checked);
this.floatBall.classList.toggle('tt-hide', !e.target.checked);
this.toast.show(e.target.checked ? '✅ 悬浮球已显示' : '❌ 悬浮球已隐藏');
});
$('tp-half').addEventListener('change', (e) => { this.cm.set('allowHalfBall', e.target.checked); this.ensureInViewport(); });
$('tp-dblclick').addEventListener('change', (e) => { this.cm.set('doubleClickToggle', e.target.checked); });
$('tp-ballsize').addEventListener('input', (e) => {
const s = parseInt(e.target.value);
this.cm.set('floatBallSize', s);
this.floatBall.style.setProperty('width', `${s}px`);
this.floatBall.style.setProperty('height', `${s}px`);
e.target.nextElementSibling.textContent = `${s}px`; this.ensureInViewport();
});
$('tp-ballopacity').addEventListener('input', (e) => {
const o = parseInt(e.target.value) / 100;
this.cm.set('floatBallOpacity', o);
this.floatBall.style.setProperty('opacity', String(o));
e.target.nextElementSibling.textContent = `${e.target.value}%`;
});
$('tp-panelsize').addEventListener('input', (e) => {
this.cm.set('panelSize', parseInt(e.target.value) / 100);
this.updatePanelSize(); e.target.nextElementSibling.textContent = `${e.target.value}%`;
this.ensurePanelInViewport();
});
$('tp-panelopacity').addEventListener('input', (e) => {
const o = parseInt(e.target.value) / 100;
this.cm.set('panelOpacity', o);
this.panel.style.setProperty('opacity', String(o));
e.target.nextElementSibling.textContent = `${e.target.value}%`;
});
$('tp-resetball').addEventListener('click', () => {
const p = { x: 20, y: 100 };
this.floatBall.style.setProperty('left', `${p.x}px`);
this.floatBall.style.setProperty('top', `${p.y}px`);
this.cm.set('floatBallPosition', p); this.toast.show('✅ 悬浮球位置已重置');
});
$('tp-resetpanel').addEventListener('click', () => {
this.cm.set('panelPosition', null); this.positionPanel(); this.toast.show('✅ 面板位置已重置');
});
$('tp-service').addEventListener('change', (e) => {
this.cm.set('translateService', e.target.value);
if (typeof translate !== 'undefined') { try { translate.service.use(this.cm.getRealServiceName()); } catch (err) {} }
$('tp-customsvc-group').classList.toggle('tt-hidden', e.target.value !== 'translate.service.private');
this.toast.show('✅ 翻译服务已更新，建议立即翻译以生效');
});
$('tp-save-customsvc').addEventListener('click', () => {
const v = $('tp-customsvc').value.trim();
this.cm.set('customServiceUrls', v);
if (v && typeof translate !== 'undefined' && this.cm.isPrivateService()) {
const urls = v.split(',').map(u => u.trim()).filter(u => u);
try {
if (translate.request.setHost) translate.request.setHost(urls.length === 1 ? urls[0] : urls);
else translate.request.api.host = urls.length === 1 ? urls[0] : urls;
} catch (err) {}
}
this.toast.show('✅ 自定义接口地址已保存');
});
$('tp-sse').addEventListener('change', (e) => {
this.cm.set('enableSSE', e.target.checked);
this.toast.show(e.target.checked ? '✅ SSE 已启用，下次翻译生效' : '❌ SSE 已禁用，刷新后生效', 'info');
});
$('tp-save-ignore').addEventListener('click', () => {
this.cm.set('ignoredClasses', $('tp-igclass').value.trim());
this.cm.set('ignoredIds', $('tp-igid').value.trim());
this.cm.set('ignoredTags', $('tp-igtag').value.trim());
this.cm.set('ignoredTexts', $('tp-igtext').value);
this.tm.applyIgnoreSettings();
this.toast.show('✅ 忽略规则已保存，立即翻译以生效');
});
$('tp-iframe').addEventListener('change', (e) => this.cm.set('enableIframe', e.target.checked));
$('tp-save-media').addEventListener('click', () => {
this.cm.set('imageRules', $('tp-images').value);
this.cm.set('enableIframe', $('tp-iframe').checked);
this.cm.set('iframeTranslateJsUrl', $('tp-iframeurl').value.trim());
this.cm.set('customTagAttributes', $('tp-tagattr').value);
this.tm.applyImageRules();
this.tm.applyAttributeSettings();
this.toast.show('✅ 图片/iframe/属性设置已保存，立即翻译以生效');
});
$('tp-save-terms').addEventListener('click', () => {
this.cm.set('customTerms', $('tp-terms').value.trim());
this.tm.applyCustomTerms();
this.toast.show('✅ 自定义术语已保存');
});
$('tp-listener').addEventListener('change', (e) => {
this.cm.set('enableListener', e.target.checked);
if (e.target.checked && !this.tm.listenerStarted) this.tm.startListener();
this.toast.show(e.target.checked ? '✅ 动态监听已启用' : '❌ 已禁用，刷新生效', 'info');
});
$('tp-ajax').addEventListener('change', (e) => {
this.cm.set('enableAjaxListener', e.target.checked);
if (e.target.checked) this.tm.startListener();
this.toast.show(e.target.checked ? '✅ Ajax 触发翻译已启用' : '❌ 已禁用，刷新生效', 'info');
});
$('tp-cache').addEventListener('change', (e) => {
this.cm.set('enableCache', e.target.checked);
if (typeof translate !== 'undefined' && translate.storage) {
try { e.target.checked ? (translate.storage.enable && translate.storage.enable()) : (translate.storage.disable && translate.storage.disable()); } catch (err) {}
}
});
$('tp-whole').addEventListener('change', (e) => this.cm.set('enableWholeAll', e.target.checked));
$('tp-translocal').addEventListener('change', (e) => this.cm.set('translateLocal', e.target.checked));
$('tp-hidetext').addEventListener('change', (e) => this.cm.set('hideTextBeforeTranslate', e.target.checked));
$('tp-progress').addEventListener('change', (e) => this.cm.set('enableProgressTip', e.target.checked));
$('tp-waiting').addEventListener('change', (e) => this.cm.set('waitingExecute', e.target.checked));
$('tp-save-advanced').addEventListener('click', () => {
this.cm.set('translateLanguagesRange', $('tp-langrange').value.trim());
this.cm.set('appendParams', $('tp-params').value);
this.cm.set('appendHeaders', $('tp-headers').value);
this.tm.applyAdvancedSettings();
this.tm.applyRequestParams();
this.toast.show('✅ 高级设置已保存，部分项需刷新或重新翻译生效', 'info', 2500);
});
$('tp-clearcache').addEventListener('click', () => {
const n = this.cm.clearCache();
this.toast.show(`✅ 已清除 ${n} 个翻译缓存项`);
});
$('tp-resetall').addEventListener('click', () => {
if (confirm('确定要重置所有设置吗？此操作不可撤销。')) {
this.cm.reset();
this.toast.show('✅ 已重置，即将刷新...', 'success', 1500);
setTimeout(() => location.reload(), 1500);
}
});
}
updateUI() {
const cb = document.getElementById('tp-enable');
if (cb) cb.checked = this.cm.get('enabled');
}
togglePanel() {
if (this.panel.classList.contains('show')) {
this.panel.classList.remove('show');
} else {
this.panel.classList.add('show');
if (!this.cm.get('panelPosition')) this.positionPanel();
else this.ensurePanelInViewport();
}
}
positionPanel() {
const mobile = isMobile();
if (mobile) {
this.panel.style.setProperty('left', `${(window.innerWidth - this.panel.offsetWidth) / 2}px`);
this.panel.style.setProperty('top', `${(window.innerHeight - this.panel.offsetHeight) / 2}px`);
} else {
const r = this.floatBall.getBoundingClientRect();
const pw = this.panel.offsetWidth, ph = this.panel.offsetHeight;
let left = r.right + 10, top = r.top;
if (left + pw > window.innerWidth) left = r.left - pw - 10;
if (left < 0) left = (window.innerWidth - pw) / 2;
if (top < 10) top = 10;
if (top + ph > window.innerHeight - 10) top = window.innerHeight - ph - 10;
this.panel.style.setProperty('left', `${left}px`);
this.panel.style.setProperty('top', `${top}px`);
}
}
ensureInViewport() {
const p = this.cm.get('floatBallPosition');
const size = this.cm.get('floatBallSize');
let x = p.x, y = p.y;
if (this.cm.get('allowHalfBall')) {
const h = size / 2;
x = Math.max(-h, Math.min(x, window.innerWidth - h));
y = Math.max(-h, Math.min(y, window.innerHeight - h));
} else {
x = Math.max(0, Math.min(x, window.innerWidth - size));
y = Math.max(0, Math.min(y, window.innerHeight - size));
}
this.floatBall.style.setProperty('left', `${x}px`);
this.floatBall.style.setProperty('top', `${y}px`);
if (x !== p.x || y !== p.y) this.cm.set('floatBallPosition', { x, y });
}
ensurePanelInViewport() {
if (!this.panel.classList.contains('show')) return;
const p = this.cm.get('panelPosition');
if (!p) return;
let x = Math.max(0, Math.min(p.x, window.innerWidth - this.panel.offsetWidth));
let y = Math.max(0, Math.min(p.y, window.innerHeight - this.panel.offsetHeight));
this.panel.style.setProperty('left', `${x}px`);
this.panel.style.setProperty('top', `${y}px`);
if (x !== p.x || y !== p.y) this.cm.set('panelPosition', { x, y });
}
}
(function applyHideTextEarly() {
try {
const cfg = loadCfg();
if (cfg.hideTextBeforeTranslate && typeof translate !== 'undefined') {
translate.language.setLocal(cfg.localLanguage);
const real = (cfg.translateService === 'translate.service.public' || cfg.translateService === 'translate.service.private') ? 'translate.service' : cfg.translateService;
try { translate.service.use(real); } catch (e) {}
if (translate.visual && translate.visual.webPageLoadTranslateBeforeHiddenText) {
translate.visual.webPageLoadTranslateBeforeHiddenText();
}
}
} catch (e) {}
})();
async function init() {
if (document.readyState === 'loading') {
await new Promise(r => document.addEventListener('DOMContentLoaded', r));
}
try {
if (typeof translate === 'undefined') {
console.error('translate.js 未加载，请检查 @require 配置');
return;
}
const cm = new ConfigManager();
const tm = new TranslateManager(cm);
const ui = new UIManager(cm, tm);
GM_registerMenuCommand('打开翻译设置', () => ui.togglePanel());
GM_registerMenuCommand('立即翻译', () => tm.changeLanguage(cm.get('targetLanguage')));
GM_registerMenuCommand('还原为原文', () => { try { translate.reset(); } catch (e) {} });
(typeof unsafeWindow !== 'undefined' ? unsafeWindow : window).translateHelper = { config: cm, translate: tm, ui };
console.log('智能翻译助手 v1.5.0 已加载，translate.js 版本: ' + (translate.version || '未知'));
} catch (e) { console.error('翻译脚本初始化失败:', e); }
}
setTimeout(init, 100);
})();
})();