基础设置
界面设置
高级设置
${!mobile ? `
` : ''}
性能优化
💡 提示:${mobile ? '长按' : '拖动'}悬浮球或面板标题栏可调整位置,设置会自动保存
🚀 支持100+种语言互译,采用AI翻译引擎,翻译质量更优
⚡ 内置多层缓存机制,二次访问毫秒级响应
🔒 完全本地运行,保护您的隐私安全
`;
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`;
}
}
getSupportedLanguages() {
return [
{ value: 'chinese_simplified', name: '简体中文' },
{ value: 'chinese_traditional', name: '繁體中文' },
{ value: 'english', name: 'English' },
{ value: 'spanish', name: 'Español' },
{ value: 'hindi', name: 'हिन्दी' },
{ value: 'arabic', name: 'العربية' },
{ value: 'french', name: 'Français' },
{ value: 'russian', name: 'Русский' },
{ value: 'portuguese', name: 'Português' },
{ value: 'bengali', name: 'বাংলা' },
{ value: 'german', name: 'Deutsch' },
{ value: 'japanese', name: '日本語' },
{ value: 'vietnamese', name: 'Tiếng Việt' },
{ value: 'korean', name: '한국어' },
{ value: 'turkish', name: 'Türkçe' },
{ value: 'italian', name: 'Italiano' },
{ value: 'persian', name: 'فارسی' },
{ value: 'urdu', name: 'اردو' },
{ value: 'polish', name: 'Polski' },
{ value: 'dutch', name: 'Nederlands' },
{ value: 'thai', name: 'ไทย' },
{ value: 'indonesian', name: 'Bahasa Indonesia' },
{ value: 'hebrew', name: 'עברית' },
{ value: 'ukrainian', name: 'Українська' },
{ value: 'malay', name: 'Bahasa Melayu' },
{ value: 'romanian', name: 'Română' },
{ value: 'swahili', name: 'Kiswahili' },
{ value: 'filipino', name: 'Filipino' },
{ value: 'czech', name: 'Český' },
{ value: 'greek', name: 'Ελληνικά' },
{ value: 'swedish', name: 'Svenska' },
{ value: 'hungarian', name: 'Magyar' },
{ value: 'bulgarian', name: 'Български' },
{ value: 'danish', name: 'Dansk' },
{ value: 'finnish', name: 'Suomi' },
{ value: 'slovak', name: 'Slovenčina' },
{ value: 'norwegian', name: 'Norsk' },
{ value: 'tamil', name: 'தமிழ்' },
{ value: 'telugu', name: 'తెలుగు' },
{ value: 'marathi', name: 'मराठी' },
{ value: 'gujarati', name: 'ગુજરાતી' },
{ value: 'punjabi', name: 'ਪੰਜਾਬੀ' },
{ value: 'kannada', name: 'ಕನ್ನಡ' },
{ value: 'malayalam', name: 'മലയാളം' },
{ value: 'croatian', name: 'Hrvatski' },
{ value: 'catalan', name: 'Català' },
{ value: 'lithuanian', name: 'Lietuvių' },
{ value: 'slovene', name: 'Slovenščina' },
{ value: 'latvian', name: 'Latviešu' },
{ value: 'estonian', name: 'Eesti' },
{ value: 'afrikaans', name: 'Afrikaans' },
{ value: 'albanian', name: 'Shqip' },
{ value: 'armenian', name: 'Հայերեն' },
{ value: 'azerbaijani', name: 'Azərbaycanca' },
{ value: 'bosnian', name: 'Bosanski' },
{ value: 'haitian_creole', name: 'Kreyòl Ayisyen' },
{ value: 'icelandic', name: 'Íslenska' },
{ value: 'irish', name: 'Gaeilge' },
{ value: 'kurdish', name: 'Kurdî' },
{ value: 'lao', name: 'ພາສາລາວ' },
{ value: 'maltese', name: 'Malti' },
{ value: 'maori', name: 'Māori' },
{ value: 'nepali', name: 'नेपाली' },
{ value: 'pashto', name: 'پښتو' },
{ value: 'welsh', name: 'Cymraeg' },
{ value: 'amharic', name: 'አማርኛ' },
{ value: 'burmese', name: 'မြန်မာစာ' },
{ value: 'khmer', name: 'ភាសាខ្មែរ' },
{ value: 'malagasy', name: 'Malagasy' },
{ value: 'oriya', name: 'ଓଡ଼ିଆ' },
{ value: 'samoan', name: 'Gagana Samoa' },
{ value: 'tongan', name: 'Lea faka-Tonga' },
{ value: 'inuktitut', name: 'ᐃᓄᒃᑎᑐᑦ' }
];
}
updatePanelSize() {
const mobile = isMobile();
const size = this.configManager.get('panelSize');
const baseWidth = mobile ? window.innerWidth * 0.9 : 420;
const baseHeight = mobile ? window.innerHeight * 0.8 : 650;
const width = Math.min(baseWidth * size, mobile ? window.innerWidth * 0.95 : 650);
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;
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);
longPressTimer = null;
}
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) {
this.handleBallClick();
}
isDragging = false;
hasMoved = false;
});
}
bindDesktopEvents() {
this.floatBall.addEventListener('click', (e) => {
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 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);
});
}
handleBallClick() {
const doubleClickEnabled = this.configManager.get('doubleClickToggle');
const currentTime = Date.now();
if (doubleClickEnabled) {
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.configManager.get('enabled');
if (!enabled) {
// 当前未启用,开启翻译(执行立即翻译)
this.configManager.set('enabled', true);
this.translateManager.toggle(true);
const targetLang = this.configManager.get('targetLanguage');
this.translateManager.changeLanguage(targetLang);
this.updateUI();
this.toast.show('✅ 翻译已开启');
} else {
// 当前已启用,关闭翻译
this.configManager.set('enabled', false);
this.translateManager.toggle(false);
this.updateUI();
this.toast.show('❌ 翻译已关闭');
}
}
} else {
// 未启用双击功能,直接打开设置面板
this.togglePanel();
}
}
bindCommonEvents() {
// 面板关闭按钮
document.getElementById('translate-panel-close').addEventListener('click', () => {
this.togglePanel();
});
// 立即翻译按钮
document.getElementById('translate-now-btn').addEventListener('click', () => {
const targetLang = this.configManager.get('targetLanguage');
this.translateManager.changeLanguage(targetLang);
this.toast.show('🚀 正在翻译...');
this.togglePanel();
});
// 启用翻译开关
document.getElementById('translate-enable').addEventListener('change', (e) => {
this.configManager.set('enabled', e.target.checked);
this.translateManager.toggle(e.target.checked);
this.updateUI();
this.toast.show(e.target.checked ? '✅ 翻译已启用' : '❌ 翻译已禁用');
});
// 自动翻译开关
document.getElementById('translate-auto').addEventListener('change', (e) => {
this.configManager.set('autoTranslate', e.target.checked);
this.toast.show(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);
}
this.toast.show('✅ 源语言已更新');
});
// 目标语言选择
document.getElementById('translate-target-lang').addEventListener('change', (e) => {
this.configManager.set('targetLanguage', e.target.value);
this.toast.show('✅ 目标语言已更新');
});
// 显示悬浮球开关
document.getElementById('translate-show-ball').addEventListener('change', (e) => {
this.configManager.set('showFloatBall', e.target.checked);
this.floatBall.style.display = e.target.checked ? 'flex' : 'none';
this.toast.show(e.target.checked ? '✅ 悬浮球已显示' : '❌ 悬浮球已隐藏');
});
// 允许悬浮球超出边缘
document.getElementById('translate-allow-half').addEventListener('change', (e) => {
this.configManager.set('allowHalfBall', e.target.checked);
this.ensureInViewport();
this.toast.show(e.target.checked ? '✅ 允许超出边缘' : '❌ 禁止超出边缘');
});
// 双击开关翻译
document.getElementById('translate-double-click').addEventListener('change', (e) => {
this.configManager.set('doubleClickToggle', e.target.checked);
this.toast.show(e.target.checked ? '✅ 双击开关翻译已启用' : '❌ 双击开关翻译已禁用');
});
// 悬浮球大小滑块
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-service').addEventListener('change', (e) => {
this.configManager.set('translateService', e.target.value);
if (typeof translate !== 'undefined') {
translate.service.use(e.target.value);
}
// 显示/隐藏自定义服务地址输入框
const customServiceGroup = document.getElementById('custom-service-group');
if (customServiceGroup) {
customServiceGroup.style.display = e.target.value === 'translate.service' ? 'block' : 'none';
}
this.toast.show('✅ 翻译服务已更新');
});
// 保存自定义服务地址
document.getElementById('save-custom-service').addEventListener('click', () => {
const input = document.getElementById('custom-service-urls');
const value = input.value.trim();
this.configManager.set('customServiceUrls', value);
// 立即应用设置
if (value && typeof translate !== 'undefined') {
const urls = value.split(',').map(url => url.trim()).filter(url => url);
if (urls.length > 0) {
translate.request.api.host = urls.length === 1 ? urls[0] : urls;
}
}
this.toast.show('✅ 自定义服务地址已保存');
});
// 保存忽略的Class
document.getElementById('save-ignore-class').addEventListener('click', () => {
const input = document.getElementById('ignore-class-input');
const value = input.value.trim();
this.configManager.set('ignoredClasses', value);
this.translateManager.applyIgnoreSettings();
this.toast.show('✅ 忽略Class设置已保存');
});
// 保存忽略的ID
document.getElementById('save-ignore-id').addEventListener('click', () => {
const input = document.getElementById('ignore-id-input');
const value = input.value.trim();
this.configManager.set('ignoredIds', value);
this.translateManager.applyIgnoreSettings();
this.toast.show('✅ 忽略ID设置已保存');
});
// 保存自定义术语
document.getElementById('save-custom-terms').addEventListener('click', () => {
const input = document.getElementById('custom-terms-input');
const value = input.value.trim();
this.configManager.set('customTerms', value);
this.translateManager.applyCustomTerms();
this.toast.show('✅ 自定义术语已保存');
});
// 鼠标划词翻译(仅PC端)
const selectionToggle = document.getElementById('translate-selection');
if (selectionToggle) {
selectionToggle.addEventListener('change', (e) => {
this.configManager.set('enableSelectionTranslate', e.target.checked);
if (e.target.checked) {
this.translateManager.startSelectionTranslate();
this.toast.show('✅ 鼠标划词翻译已启用');
} else {
this.translateManager.stopSelectionTranslate();
this.toast.show('❌ 鼠标划词翻译已禁用');
}
});
}
// 动态内容监听
document.getElementById('translate-listener').addEventListener('change', (e) => {
this.configManager.set('enableListener', e.target.checked);
if (e.target.checked && !this.translateManager.listenerStarted) {
this.translateManager.startListener();
}
this.toast.show(e.target.checked ? '✅ 动态内容监听已启用' : '❌ 动态内容监听已禁用');
});
// 缓存优化
document.getElementById('translate-cache').addEventListener('change', (e) => {
this.configManager.set('enableCache', e.target.checked);
if (typeof translate !== 'undefined' && translate.storage) {
if (e.target.checked) {
translate.storage.enable();
} else {
translate.storage.disable();
}
}
this.toast.show(e.target.checked ? '✅ 缓存优化已启用' : '❌ 缓存优化已禁用');
});
// 重置悬浮球位置按钮
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);
this.toast.show('✅ 悬浮球位置已重置');
});
// 重置面板位置按钮
document.getElementById('translate-reset-panel-btn').addEventListener('click', () => {
this.configManager.set('panelPosition', null);
this.positionPanel();
this.toast.show('✅ 面板位置已重置');
});
// 清除缓存按钮
document.getElementById('translate-clear-cache').addEventListener('click', () => {
const cleared = this.configManager.clearCache();
this.toast.show(`✅ 已清除 ${cleared} 个翻译缓存项`);
});
// 重置所有设置按钮
document.getElementById('translate-reset-all').addEventListener('click', () => {
if (confirm('确定要重置所有设置吗?此操作不可撤销。')) {
this.configManager.reset();
this.toast.show('✅ 所有设置已重置,即将刷新页面...', 'success', 1500);
setTimeout(() => {
location.reload();
}, 1500);
}
});
// 监听窗口大小变化
window.addEventListener('resize', () => {
this.ensureInViewport();
this.ensurePanelInViewport();
});
// 监听方向变化
window.addEventListener('orientationchange', () => {
setTimeout(() => {
this.ensureInViewport();
this.ensurePanelInViewport();
this.updatePanelSize();
}, 300);
});
}
updateUI() {
const enabled = this.configManager.get('enabled');
const enableCheckbox = document.getElementById('translate-enable');
if (enableCheckbox) {
enableCheckbox.checked = enabled;
}
}
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 });
}
}
}
// 工具函数
function isMobile() {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
|| window.innerWidth <= 768;
}
function isDarkMode() {
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
}
// 初始化
async function init() {
// 等待DOM加载
if (document.readyState === 'loading') {
await new Promise(resolve => {
document.addEventListener('DOMContentLoaded', resolve);
});
}
try {
// 检查是否已加载translate.js
if (typeof translate === 'undefined') {
console.error('translate.js未加载,请检查@require配置');
return;
}
// 初始化组件
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('智能翻译助手已加载完成');
console.log('使用说明:');
console.log('- 单击悬浮球打开设置面板');
console.log('- 拖拽悬浮球调整位置');
console.log('- 支持100+种语言互译');
console.log('- 可通过window.translateHelper访问API');
} catch (error) {
console.error('翻译脚本初始化失败:', error);
}
}
// 延迟初始化主功能,确保悬浮球已显示
setTimeout(init, 100);
})();
})();