ECI Translator Widget

一个可复用、框架无关的浏览器右侧悬浮翻译器插件，适合接入 Vue、React 或普通 HTML 前端项目。

已实现能力

• 默认悬浮在浏览器右侧，可在右半区域自由拖动
• 鼠标悬浮时显示“翻译此页面”快捷入口
• 点击后弹出翻译面板，支持选择目标语言、翻译服务、是否显示原文
• 通过整页文本提取 + 批量 segments 调用远程翻译接口完成页面翻译
• API 地址和 API Key 支持从外部 JSON 读取，语言和服务默认值内置在源码中
• 通过 Shadow DOM 隔离大部分宿主样式影响

安装

npm install

本地开发

npm run dev

打开 http://localhost:4173 查看示例页面。

作为库构建

npm run build

产物会输出到 dist/。

基本接入

import { createTranslatorWidget } from '@eci/translator-widget';

createTranslatorWidget({
  configUrl: '/eci-translator.config.json'
});

也可以直接传对象：

import { createTranslatorWidget } from '@eci/translator-widget';

createTranslatorWidget({
  config: {
    apiUrl: 'http://link3.test.ecilink.com/ai-gateway-service/translation/api',
    apiKey: 'your-api-key',
    batchSize: 20,
    sourceLanguage: 'zh-CN',
    defaultTargetLanguage: 'en-US',
    services: [
      {
        id: 'medical-default',
        label: 'ECI 翻译',
        mtSettings: [{ medValue: 98, type: 2 }]
      }
    ]
  }
});

推荐外部配置文件

{
  "apiUrl": "http://link3.test.ecilink.com/ai-gateway-service/translation/api",
  "apiKey": "your-api-key",
  "batchSize": 20
}

运行时 API

const widget = createTranslatorWidget({
  configUrl: '/eci-translator.config.json'
});

widget.openPanel();
await widget.translatePage();
widget.restorePage();
widget.destroy();

说明

• 当前整页翻译基于 DOM 文本节点扫描，默认会跳过 script、style、input、textarea、pre、code 等区域
• batchSize 用于控制每次调用翻译 API 时请求体中 segments 数组的数量，取值范围为 1 到 1000
• “显示原文”模式会在页面中插入译文 + 原文组合节点，便于对照阅读
• 当前源码内置默认值：sourceLanguage: zh-CN、中英互译目标语言、ECI 翻译 服务和默认 mtSettings
• 若后续要兼容更复杂的业务页面，建议继续扩展过滤规则、响应解析规则和宿主自定义钩子