`;
document.body.appendChild(panel);
this.panel = panel;
// 设置面板初始大小和透明度
this.updatePanelSize();
this.panel.style.opacity = config.panelOpacity;
// 恢复面板位置
if (config.panelPosition) {
this.panel.style.left = `${config.panelPosition.x}px`;
this.panel.style.top = `${config.panelPosition.y}px`;
}
}
updatePanelSize() {
const mobile = isMobile();
const size = this.configManager.get('panelSize');
const baseWidth = mobile ? window.innerWidth * 0.9 : 400;
const baseHeight = mobile ? window.innerHeight * 0.8 : 600;
const width = Math.min(baseWidth * size, mobile ? window.innerWidth * 0.95 : 600);
const maxHeight = baseHeight * size;
this.panel.style.width = `${width}px`;
this.panel.style.maxHeight = `${maxHeight}px`;
// 更新body的最大高度
const body = this.panel.querySelector('.translate-panel-body');
if (body) {
body.style.maxHeight = `${maxHeight - 60}px`;
}
}
bindEvents() {
const mobile = isMobile();
if (mobile) {
this.bindMobileEvents();
} else {
this.bindDesktopEvents();
}
this.bindCommonEvents();
this.bindPanelDragEvents();
}
bindPanelDragEvents() {
const header = this.panel.querySelector('.translate-panel-header');
const mobile = isMobile();
if (mobile) {
// 移动端面板拖动
let isDragging = false;
let startX, startY, initialX, initialY;
let longPressTimer = null;
header.addEventListener('touchstart', (e) => {
// 如果点击的是关闭按钮，不触发拖动
if (e.target.id === 'translate-panel-close') return;
const touch = e.touches[0];
startX = touch.clientX;
startY = touch.clientY;
initialX = this.panel.offsetLeft;
initialY = this.panel.offsetTop;
// 长按300ms后开始拖动
longPressTimer = setTimeout(() => {
isDragging = true;
this.panel.classList.add('dragging');
if (navigator.vibrate) {
navigator.vibrate(50);
}
}, 300);
e.preventDefault();
});
header.addEventListener('touchmove', (e) => {
if (!isDragging) {
// 如果移动了就取消长按
if (longPressTimer) {
const touch = e.touches[0];
const moveDistance = Math.sqrt(
Math.pow(touch.clientX - startX, 2) +
Math.pow(touch.clientY - startY, 2)
);
if (moveDistance > 10) {
clearTimeout(longPressTimer);
longPressTimer = null;
}
}
return;
}
const touch = e.touches[0];
const dx = touch.clientX - startX;
const dy = touch.clientY - startY;
let newX = initialX + dx;
let newY = initialY + dy;
// 限制在可视区域内
const maxX = window.innerWidth - this.panel.offsetWidth;
const maxY = window.innerHeight - this.panel.offsetHeight;
newX = Math.max(0, Math.min(newX, maxX));
newY = Math.max(0, Math.min(newY, maxY));
this.panel.style.left = `${newX}px`;
this.panel.style.top = `${newY}px`;
e.preventDefault();
});
header.addEventListener('touchend', () => {
if (longPressTimer) {
clearTimeout(longPressTimer);
longPressTimer = null;
}
if (isDragging) {
isDragging = false;
this.panel.classList.remove('dragging');
// 保存面板位置
this.configManager.set('panelPosition', {
x: parseInt(this.panel.style.left),
y: parseInt(this.panel.style.top)
});
}
});
} else {
// PC端面板拖动
let isDragging = false;
let startX, startY, initialX, initialY;
header.addEventListener('mousedown', (e) => {
// 如果点击的是关闭按钮，不触发拖动
if (e.target.id === 'translate-panel-close') return;
isDragging = true;
startX = e.clientX;
startY = e.clientY;
initialX = this.panel.offsetLeft;
initialY = this.panel.offsetTop;
this.panel.classList.add('dragging');
e.preventDefault();
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
const dx = e.clientX - startX;
const dy = e.clientY - startY;
let newX = initialX + dx;
let newY = initialY + dy;
// 限制在可视区域内
const maxX = window.innerWidth - this.panel.offsetWidth;
const maxY = window.innerHeight - this.panel.offsetHeight;
newX = Math.max(0, Math.min(newX, maxX));
newY = Math.max(0, Math.min(newY, maxY));
this.panel.style.left = `${newX}px`;
this.panel.style.top = `${newY}px`;
});
document.addEventListener('mouseup', () => {
if (isDragging) {
isDragging = false;
this.panel.classList.remove('dragging');
// 保存面板位置
this.configManager.set('panelPosition', {
x: parseInt(this.panel.style.left),
y: parseInt(this.panel.style.top)
});
}
});
}
}
bindMobileEvents() {
let longPressTimer = null;
let isDragging = false;
let hasMoved = false;
this.floatBall.addEventListener('touchstart', (e) => {
e.preventDefault();
const touch = e.touches[0];
this.touchStartPos = { x: touch.clientX, y: touch.clientY };
this.touchStartTime = Date.now();
hasMoved = false;
longPressTimer = setTimeout(() => {
isDragging = true;
this.floatBall.classList.add('dragging');
if (navigator.vibrate) {
navigator.vibrate(50);
}
}, 300);
this.dragOffset.x = touch.clientX - this.floatBall.offsetLeft;
this.dragOffset.y = touch.clientY - this.floatBall.offsetTop;
});
this.floatBall.addEventListener('touchmove', (e) => {
e.preventDefault();
const touch = e.touches[0];
const moveDistance = Math.sqrt(
Math.pow(touch.clientX - this.touchStartPos.x, 2) +
Math.pow(touch.clientY - this.touchStartPos.y, 2)
);
if (moveDistance > 10) {
hasMoved = true;
if (longPressTimer) {
clearTimeout(longPressTimer);
longPressTimer = null;
}
}
if (isDragging) {
let newX = touch.clientX - this.dragOffset.x;
let newY = touch.clientY - this.dragOffset.y;
// 根据设置决定是否允许超出边缘
if (!this.configManager.get('allowHalfBall')) {
const maxX = window.innerWidth - this.floatBall.offsetWidth;
const maxY = window.innerHeight - this.floatBall.offsetHeight;
newX = Math.max(0, Math.min(newX, maxX));
newY = Math.max(0, Math.min(newY, maxY));
} else {
const halfSize = this.floatBall.offsetWidth / 2;
const maxX = window.innerWidth - halfSize;
const maxY = window.innerHeight - halfSize;
newX = Math.max(-halfSize, Math.min(newX, maxX));
newY = Math.max(-halfSize, Math.min(newY, maxY));
}
this.floatBall.style.left = `${newX}px`;
this.floatBall.style.top = `${newY}px`;
}
});
this.floatBall.addEventListener('touchend', (e) => {
e.preventDefault();
if (longPressTimer) {
clearTimeout(longPressTimer);
}
this.floatBall.classList.remove('dragging');
if (isDragging) {
this.configManager.set('floatBallPosition', {
x: parseInt(this.floatBall.style.left),
y: parseInt(this.floatBall.style.top)
});
} else if (!hasMoved) {
const touchDuration = Date.now() - this.touchStartTime;
if (touchDuration < 300) {
this.togglePanel();
}
}
isDragging = false;
hasMoved = false;
});
}
bindDesktopEvents() {
this.floatBall.addEventListener('click', (e) => {
if (!this.isDragging) {
this.togglePanel();
}
});
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 mouseMoveHandler = (e) => {
this.isDragging = true;
let newX = e.clientX - this.dragOffset.x;
let newY = e.clientY - this.dragOffset.y;
// 根据设置决定是否允许超出边缘
if (!this.configManager.get('allowHalfBall')) {
const maxX = window.innerWidth - this.floatBall.offsetWidth;
const maxY = window.innerHeight - this.floatBall.offsetHeight;
newX = Math.max(0, Math.min(newX, maxX));
newY = Math.max(0, Math.min(newY, maxY));
} else {
const halfSize = this.floatBall.offsetWidth / 2;
const maxX = window.innerWidth - halfSize;
const maxY = window.innerHeight - halfSize;
newX = Math.max(-halfSize, Math.min(newX, maxX));
newY = Math.max(-halfSize, Math.min(newY, maxY));
}
this.floatBall.style.left = `${newX}px`;
this.floatBall.style.top = `${newY}px`;
};
const mouseUpHandler = () => {
document.removeEventListener('mousemove', mouseMoveHandler);
document.removeEventListener('mouseup', mouseUpHandler);
this.floatBall.classList.remove('dragging');
if (this.isDragging) {
this.configManager.set('floatBallPosition', {
x: parseInt(this.floatBall.style.left),
y: parseInt(this.floatBall.style.top)
});
}
setTimeout(() => {
this.isDragging = false;
}, 100);
};
document.addEventListener('mousemove', mouseMoveHandler);
document.addEventListener('mouseup', mouseUpHandler);
});
}
bindCommonEvents() {
// 面板关闭按钮
document.getElementById('translate-panel-close').addEventListener('click', () => {
this.togglePanel();
});
// 启用翻译开关
document.getElementById('translate-enable').addEventListener('change', (e) => {
this.configManager.set('enabled', e.target.checked);
this.translateManager.toggle(e.target.checked);
});
// 自动翻译开关
document.getElementById('translate-auto').addEventListener('change', (e) => {
this.configManager.set('autoTranslate', e.target.checked);
});
// 本地语言选择
document.getElementById('translate-local-lang').addEventListener('change', (e) => {
this.configManager.set('localLanguage', e.target.value);
if (typeof translate !== 'undefined') {
translate.language.setLocal(e.target.value);
}
});
// 目标语言选择
document.getElementById('translate-target-lang').addEventListener('change', (e) => {
this.configManager.set('targetLanguage', e.target.value);
});
// 显示悬浮球开关
document.getElementById('translate-show-ball').addEventListener('change', (e) => {
this.configManager.set('showFloatBall', e.target.checked);
this.floatBall.style.display = e.target.checked ? 'flex' : 'none';
});
// 允许悬浮球超出边缘
document.getElementById('translate-allow-half').addEventListener('change', (e) => {
this.configManager.set('allowHalfBall', e.target.checked);
this.ensureInViewport();
});
// 悬浮球大小滑块
const sizeSlider = document.getElementById('translate-ball-size');
if (sizeSlider) {
sizeSlider.addEventListener('input', (e) => {
const size = parseInt(e.target.value);
this.configManager.set('floatBallSize', size);
this.floatBall.style.width = `${size}px`;
this.floatBall.style.height = `${size}px`;
e.target.nextElementSibling.textContent = `${size}px`;
this.ensureInViewport();
});
}
// 悬浮球透明度滑块
const opacitySlider = document.getElementById('translate-ball-opacity');
if (opacitySlider) {
opacitySlider.addEventListener('input', (e) => {
const opacity = parseInt(e.target.value) / 100;
this.configManager.set('floatBallOpacity', opacity);
this.floatBall.style.opacity = opacity;
e.target.nextElementSibling.textContent = `${e.target.value}%`;
});
}
// 控制面板大小滑块
const panelSizeSlider = document.getElementById('translate-panel-size');
if (panelSizeSlider) {
panelSizeSlider.addEventListener('input', (e) => {
const size = parseInt(e.target.value) / 100;
this.configManager.set('panelSize', size);
this.updatePanelSize();
e.target.nextElementSibling.textContent = `${e.target.value}%`;
// 确保面板在可视区域内
this.ensurePanelInViewport();
});
}
// 控制面板透明度滑块
const panelOpacitySlider = document.getElementById('translate-panel-opacity');
if (panelOpacitySlider) {
panelOpacitySlider.addEventListener('input', (e) => {
const opacity = parseInt(e.target.value) / 100;
this.configManager.set('panelOpacity', opacity);
this.panel.style.opacity = opacity;
e.target.nextElementSibling.textContent = `${e.target.value}%`;
});
}
// 立即翻译按钮
document.getElementById('translate-now-btn').addEventListener('click', () => {
const targetLang = this.configManager.get('targetLanguage');
this.translateManager.changeLanguage(targetLang);
this.togglePanel();
});
// 重置悬浮球位置按钮
document.getElementById('translate-reset-ball-btn').addEventListener('click', () => {
const defaultPosition = { x: 20, y: 100 };
this.floatBall.style.left = `${defaultPosition.x}px`;
this.floatBall.style.top = `${defaultPosition.y}px`;
this.configManager.set('floatBallPosition', defaultPosition);
});
// 重置面板位置按钮
document.getElementById('translate-reset-panel-btn').addEventListener('click', () => {
this.configManager.set('panelPosition', null);
this.positionPanel();
});
// 监听窗口大小变化
window.addEventListener('resize', () => {
this.ensureInViewport();
this.ensurePanelInViewport();
});
// 监听方向变化
window.addEventListener('orientationchange', () => {
setTimeout(() => {
this.ensureInViewport();
this.ensurePanelInViewport();
this.updatePanelSize();
}, 300);
});
}
togglePanel() {
if (this.panel.classList.contains('show')) {
this.panel.classList.remove('show');
} else {
this.panel.classList.add('show');
const savedPosition = this.configManager.get('panelPosition');
if (!savedPosition) {
this.positionPanel();
} else {
this.ensurePanelInViewport();
}
}
}
positionPanel() {
const mobile = isMobile();
if (mobile) {
// 移动端居中显示
const panelWidth = this.panel.offsetWidth;
const panelHeight = this.panel.offsetHeight;
const left = (window.innerWidth - panelWidth) / 2;
const top = (window.innerHeight - panelHeight) / 2;
this.panel.style.left = `${left}px`;
this.panel.style.top = `${top}px`;
} else {
// PC端根据悬浮球位置定位
const ballRect = this.floatBall.getBoundingClientRect();
const panelWidth = this.panel.offsetWidth;
const panelHeight = this.panel.offsetHeight;
let left = ballRect.right + 10;
let top = ballRect.top;
if (left + panelWidth > window.innerWidth) {
left = ballRect.left - panelWidth - 10;
}
if (left < 0) {
left = (window.innerWidth - panelWidth) / 2;
}
if (top < 10) {
top = 10;
}
if (top + panelHeight > window.innerHeight - 10) {
top = window.innerHeight - panelHeight - 10;
}
this.panel.style.left = `${left}px`;
this.panel.style.top = `${top}px`;
}
}
ensureInViewport() {
const position = this.configManager.get('floatBallPosition');
const size = this.configManager.get('floatBallSize');
const allowHalf = this.configManager.get('allowHalfBall');
let x = position.x;
let y = position.y;
if (allowHalf) {
const halfSize = size / 2;
const maxX = window.innerWidth - halfSize;
const maxY = window.innerHeight - halfSize;
x = Math.max(-halfSize, Math.min(x, maxX));
y = Math.max(-halfSize, Math.min(y, maxY));
} else {
const maxX = window.innerWidth - size;
const maxY = window.innerHeight - size;
x = Math.max(0, Math.min(x, maxX));
y = Math.max(0, Math.min(y, maxY));
}
this.floatBall.style.left = `${x}px`;
this.floatBall.style.top = `${y}px`;
if (x !== position.x || y !== position.y) {
this.configManager.set('floatBallPosition', { x, y });
}
}
ensurePanelInViewport() {
if (!this.panel.classList.contains('show')) return;
const position = this.configManager.get('panelPosition');
if (!position) return;
const panelWidth = this.panel.offsetWidth;
const panelHeight = this.panel.offsetHeight;
let x = position.x;
let y = position.y;
const maxX = window.innerWidth - panelWidth;
const maxY = window.innerHeight - panelHeight;
x = Math.max(0, Math.min(x, maxX));
y = Math.max(0, Math.min(y, maxY));
this.panel.style.left = `${x}px`;
this.panel.style.top = `${y}px`;
if (x !== position.x || y !== position.y) {
this.configManager.set('panelPosition', { x, y });
}
}
}
// 初始化
async function init() {
// 等待DOM加载
if (document.readyState === 'loading') {
await new Promise(resolve => {
document.addEventListener('DOMContentLoaded', resolve);
});
}
try {
// 动态加载 translate.js
await loadScript('https://cdnjs.webstatic.cn/ajax/libs/translate.js/3.18.0/translate.js');
// 初始化组件
const configManager = new ConfigManager();
const translateManager = new TranslateManager(configManager);
const uiManager = new UIManager(configManager, translateManager);
// 注册菜单命令
GM_registerMenuCommand('打开翻译设置', () => {
uiManager.togglePanel();
});
// 全局对象
window.translateHelper = {
config: configManager,
translate: translateManager,
ui: uiManager
};
console.log('智能翻译助手已加载');
} catch (error) {
console.error('翻译脚本加载失败:', error);
}
}
// 延迟初始化主功能，确保悬浮球已显示
setTimeout(init, 100);
})();
})();