状态:
未启动
视频检测:
未检测
当前课程:
${this.currentCourseTitle || '未知'}
`;
document.body.appendChild(this.controlPanel);
this._bindControlPanelEvents();
this._updateControlPanelState();
}
// 绑定控制面板事件
_bindControlPanelEvents() {
if (!this.controlPanel) return;
// 启动按钮
document.getElementById('huayi-btn-start')?.addEventListener('click', () => {
this.start();
this._updateControlPanelState();
});
// 停止按钮
document.getElementById('huayi-btn-stop')?.addEventListener('click', () => {
this.stop();
this._updateControlPanelState();
});
// 静音按钮
const muteBtn = document.getElementById('huayi-btn-mute');
muteBtn?.addEventListener('click', () => {
this.options.autoMute = !this.options.autoMute;
muteBtn.textContent = this.options.autoMute ? '静音: 开' : '静音: 关';
this.updateOptions({ autoMute: this.options.autoMute });
this.log(`${this.options.autoMute ? '开启' : '关闭'}自动静音`, 'info');
});
// 调试按钮
const debugBtn = document.getElementById('huayi-btn-debug');
debugBtn?.addEventListener('click', () => {
this.options.debugMode = !this.options.debugMode;
debugBtn.textContent = this.options.debugMode ? '调试: 开' : '调试: 关';
this.updateOptions({ debugMode: this.options.debugMode });
this.log(`${this.options.debugMode ? '开启' : '关闭'}调试模式`, 'info');
});
// 切换延迟输入
document.getElementById('huayi-switch-delay')?.addEventListener('change', (e) => {
const value = parseFloat(e.target.value);
if (!isNaN(value) && value >= 0) {
this.updateOptions({ switchDelay: value });
this.log(`切换延迟已设置为 ${value} 秒`, 'info');
}
});
// 进度阈值输入
document.getElementById('huayi-progress-threshold')?.addEventListener('change', (e) => {
const value = parseFloat(e.target.value) / 100;
if (!isNaN(value) && value >= 0.8 && value <= 1) {
this.updateOptions({ progressThreshold: value });
this.log(`进度阈值已设置为 ${value * 100}%`, 'info');
}
});
// 检查间隔输入
document.getElementById('huayi-check-interval')?.addEventListener('change', (e) => {
const value = parseFloat(e.target.value);
if (!isNaN(value) && value > 0) {
this.updateOptions({ checkInterval: value });
this.log(`检查间隔已设置为 ${value} 秒`, 'info');
}
});
// 清空日志按钮
document.getElementById('huayi-btn-clear-logs')?.addEventListener('click', () => {
this._clearLogs();
});
// 最小化按钮
const minimizeBtn = document.getElementById('huayi-btn-minimize');
minimizeBtn?.addEventListener('click', () => {
this._togglePanelMinimize();
});
// 优化面板拖动功能
this._makePanelDraggable();
}
// 优化面板拖动功能
_makePanelDraggable() {
if (!this.controlPanel) return;
const header = this.controlPanel.querySelector('.panel-header');
if (!header) return;
// 拖动开始
header.addEventListener('mousedown', (e) => {
if (e.target.tagName === 'BUTTON' || e.target.closest('button')) {
return; // 避免点击按钮时触发拖动
}
this.dragState.isDragging = true;
const rect = this.controlPanel.getBoundingClientRect();
this.dragState.offsetX = e.clientX - rect.left;
this.dragState.offsetY = e.clientY - rect.top;
this.controlPanel.style.cursor = 'grabbing';
header.style.userSelect = 'none';
// 添加视觉反馈
this.controlPanel.style.boxShadow = '0 6px 16px rgba(0, 0, 0, 0.2)';
this.controlPanel.style.transform = 'scale(1.02)';
});
// 拖动过程 - 使用requestAnimationFrame优化性能
const handleMouseMove = (e) => {
if (!this.dragState.isDragging) return;
requestAnimationFrame(() => {
const x = e.clientX - this.dragState.offsetX;
const y = e.clientY - this.dragState.offsetY;
// 限制在视口内
const maxX = window.innerWidth - this.controlPanel.offsetWidth;
const maxY = window.innerHeight - this.controlPanel.offsetHeight;
const boundedX = Math.max(0, Math.min(x, maxX));
const boundedY = Math.max(0, Math.min(y, maxY));
this.controlPanel.style.left = boundedX + 'px';
this.controlPanel.style.top = boundedY + 'px';
this.controlPanel.style.right = 'auto';
this.controlPanel.style.bottom = 'auto';
});
};
// 拖动结束
const handleMouseUp = () => {
if (this.dragState.isDragging) {
this.dragState.isDragging = false;
this.controlPanel.style.cursor = 'default';
header.style.userSelect = '';
// 恢复样式
this.controlPanel.style.boxShadow = '';
this.controlPanel.style.transform = '';
}
};
// 绑定事件
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
// 防止拖动时选中文本
header.addEventListener('dragstart', (e) => e.preventDefault());
}
// 切换面板最小化状态
_togglePanelMinimize() {
const content = document.getElementById('huayi-panel-content');
const minimizeBtn = document.getElementById('huayi-btn-minimize');
if (!content || !minimizeBtn) return;
if (content.style.display === 'none') {
content.style.display = 'block';
minimizeBtn.textContent = '▼';
} else {
content.style.display = 'none';
minimizeBtn.textContent = '▲';
}
}
// 更新控制面板状态
_updateControlPanelState() {
if (!this.controlPanel) return;
// 更新状态指示器
const statusIndicator = document.getElementById('huayi-status-indicator');
const statusValue = document.getElementById('huayi-status-value');
if (statusIndicator && statusValue) {
if (this.isRunning) {
statusIndicator.style.backgroundColor = '#10b981'; // 绿色
statusValue.textContent = '运行中';
statusValue.style.color = '#10b981';
} else {
statusIndicator.style.backgroundColor = '#6b7280'; // 灰色
statusValue.textContent = '已停止';
statusValue.style.color = '#6b7280';
}
}
// 更新按钮状态
const startBtn = document.getElementById('huayi-btn-start');
const stopBtn = document.getElementById('huayi-btn-stop');
if (startBtn && stopBtn) {
if (this.isRunning) {
startBtn.style.backgroundColor = '#9ca3af';
startBtn.disabled = true;
stopBtn.style.backgroundColor = '#ef4444';
stopBtn.disabled = false;
} else {
startBtn.style.backgroundColor = '#10b981';
startBtn.disabled = false;
stopBtn.style.backgroundColor = '#9ca3af';
stopBtn.disabled = true;
}
}
}
// 更新控制面板信息
_updateControlPanelInfo() {
if (!this.controlPanel) return;
// 更新课程标题
const courseTitleElement = document.getElementById('huayi-course-title');
if (courseTitleElement) {
courseTitleElement.textContent = this.currentCourseTitle || '未知';
}
}
// 更新视频状态显示
_updateVideoStatusDisplay(videoState) {
if (!this.controlPanel) return;
const videoStatusElement = document.getElementById('huayi-video-status');
if (!videoStatusElement) return;
if (videoState.exists) {
const progressPercent = Math.round(videoState.progress * 100);
videoStatusElement.textContent = `播放中 ${progressPercent}%`;
videoStatusElement.style.color = videoState.isPaused ? '#f59e0b' : '#10b981';
} else {
videoStatusElement.textContent = '未检测';
videoStatusElement.style.color = '#9ca3af';
}
}
// 添加日志到面板
_addLogToPanel(message, level = 'info') {
if (!this.controlPanel) return;
const logsContainer = document.getElementById('huayi-logs-container');
if (!logsContainer) return;
const logEntry = document.createElement('div');
logEntry.className = `log-entry ${level}`;
logEntry.style.marginBottom = '2px';
logEntry.style.padding = '1px 0';
// 根据级别设置颜色
switch (level) {
case 'error':
logEntry.style.color = '#dc2626';
break;
case 'warning':
logEntry.style.color = '#d97706';
break;
case 'success':
logEntry.style.color = '#059669';
break;
case 'debug':
logEntry.style.color = '#6366f1';
break;
case 'info':
default:
logEntry.style.color = '#374151';
break;
}
// 限制消息长度
const shortMessage = message.length > 60 ? message.substring(0, 60) + '...' : message;
logEntry.textContent = `[${new Date().toLocaleTimeString()}] ${shortMessage}`;
// 添加到容器开头
logsContainer.insertBefore(logEntry, logsContainer.firstChild);
// 限制日志数量
const logEntries = logsContainer.querySelectorAll('.log-entry');
if (logEntries.length > 10) {
logsContainer.removeChild(logEntries[logEntries.length - 1]);
}
// 滚动到底部
logsContainer.scrollTop = 0;
}
// 清空日志
_clearLogs() {
const logsContainer = document.getElementById('huayi-logs-container');
if (logsContainer) {
logsContainer.innerHTML = '