Function mountFloatingBall

entrypoints/utils/floatingBall.ts:17–81

(position?: 'left' | 'right')

 * @returns 
 */
export function mountFloatingBall(position?: 'left' | 'right') {
  // 如果配置禁用了悬浮球或已存在实例，则不创建
  if (config.disableFloatingBall || floatingBallInstance) {
    return;
  }

  // 使用传入的位置参数或配置中的位置
  const ballPosition = position || config.floatingBallPosition || 'right';
  // 更新配置
  config.floatingBallPosition = ballPosition;

  // 创建容器元素
  const container = document.createElement('div');
  container.id = 'fluent-read-floating-ball-container';
  document.body.appendChild(container);

  // 创建 Vue 应用实例
  app = createApp(FloatingBall, {
    position: ballPosition,
    showMenu: true,
    onDocClick: () => {
    },
    onSettingsClick: () => {
      browser.runtime.sendMessage({ type: 'openOptionsPage' });
    },
    // 添加位置变化事件监听
    onPositionChanged: (newPosition: 'left' | 'right') => {
      // 保存位置到配置
      config.floatingBallPosition = newPosition;
      
      // 保存配置到存储
      saveConfig();

    },
    // 添加翻译状态变化事件监听
    onTranslationToggle: (isTranslating: boolean) => {
      if (isTranslating && !isTranslated) {
        // 触发翻译开始事件
        document.dispatchEvent(new CustomEvent('fluentread-translation-started'));

        // 触发即时翻译
        autoTranslateEnglishPage();
        isTranslated = true;
      } else if (!isTranslating && isTranslated) {
        // 触发翻译结束事件
        document.dispatchEvent(new CustomEvent('fluentread-translation-ended'));
        
        // 恢复原文
        restoreOriginalContent();
        isTranslated = false;
        
        // 恢复后确保状态同步
        floatingBallInstance.$el.classList.remove('is-translating');
      }
    }
  });

  // 挂载应用