尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

CopyTranslator 翻译实现机制深度剖析:从剪贴板监听到多引擎调度与本地化加载的完整链路

CopyTranslator 翻译实现机制深度剖析:从剪贴板监听到多引擎调度与本地化加载的完整链路 CopyTranslator 翻译实现机制深度剖析从剪贴板监听到多引擎调度与本地化加载的完整链路【免费下载链接】CopyTranslatorForeign language reading and translation assistant based on copy and translate.项目地址: https://gitcode.com/gh_mirrors/co/CopyTranslatorCopyTranslator 是一款基于复制即翻译理念的外语阅读与翻译辅助工具。本文以仓库内 docs/TRANSLATION_IMPLEMENTATION.md 为骨架结合 Electron 主进程与渲染进程的源码实现端到端剖析其翻译架构从主/渲染进程分层与 Vuex 状态通道到动作与配置驱动链路再到语言决策、多引擎调度、词典系统、结果同步与界面绑定直至本地化资源生成与加载。读完本文你将掌握翻译功能的关键入口、底层数据流与可扩展点能够精准定位修改位置并独立扩展新翻译器、新词典或新触发机制。1. 架构分层与数据流主进程、渲染进程与 Vuex 全局状态CopyTranslator 基于 Electron 构建翻译链路横跨主进程与渲染进程。理解这一分层是定位一切翻译相关问题的前提。进程与控制器主进程承担翻译、剪贴板、OCR 与配置响应等重活。应用启动时在Controller中实例化TranslateController见 src/main/controller.ts并安装本地化模块l10n。createWindow中依次执行transCon.init()初始化翻译器与剪贴板、restoreFromConfig()恢复设置、事件绑定与代理服务启动见 src/main/controller.ts。渲染进程只负责界面渲染与交互通过代理对象把设置写回主进程见 src/renderer/controller.ts。渲染进程中不会真正执行翻译引擎调用——getTranslator在渲染进程会返回拒绝执行翻译的轻量占位对象避免加载重型依赖见 src/common/translate/translators.ts。状态与事件通道全局状态集中在 Vuex storesrc/store/index.ts核心 state 包括status当前翻译状态None/Translating/Listen/AutoCopy等sharedResult翻译结果dictResult词典结果resultBuffer多引擎缓存结果languages当前主引擎支持的源语言/目标语言列表config配置快照。状态变更通过两类 Vuex 插件驱动observePlugin监听配置变更并通知所有观察者主进程Controller与TranslateController均注册为观察者见 src/store/plugins/observe.ts。当用户在界面修改配置时渲染进程通过代理写回主进程主进程再回调观察者的postSet完成实际行为切换。updateViewPlugin在语言列表等数据变化时触发视图层联动刷新如语言下拉菜单见 src/store/plugins/update-view.ts。从源码结构可以推断翻译结果本身不通过 IPC 逐条推送而是由主进程写 Vuex、通过vuex-electron的createSharedMutations()共享到渲染进程视图从 store 读取响应式数据完成绑定。2. 动作与配置驱动链路从 UI/快捷键到翻译执行CopyTranslator 将一切可执行操作抽象为动作Action统一由ActionManager管理。动作分发动作从 UI 按钮、系统托盘或快捷键触发经ActionManager.dispatch解析identifier与参数通过事件总线广播到回调见 src/common/action.ts。ActionManager.init()集中注册了全部动作开关型动作switchAction、列表动作listAction、含参动作paramNormalAction等见 src/common/action.ts。主进程Controller.handle负责路由动作窗口/快照/更新类动作由自身处理其余默认转交TranslateController.handle见 src/main/controller.ts、src/main/translate-controller.ts。TranslateController.handle是翻译相关动作的统一入口下表列举关键标识符及其行为动作标识符行为源码位置translate以指定文本触发翻译更新语言并清空旧结果、附带词典查询translate-controller.tstranslateClipboard立即检查剪贴板并翻译translate-controller.tsdoubleCopyTranslate连续两次复制触发翻译使用translator-double引擎组translate-controller.tsclear清空原文与全部结果translate-controller.tscopySource/copyResult复制原文/译文带参数时复制指定引擎缓存结果translate-controller.tspasteResult复制译文后模拟粘贴translate-controller.tsretryTranslate重试翻译translate-controller.tstestTranslate用指定引擎测试翻译一段文本结果经事件总线回传translate-controller.tsreloadCustomTranslators重新加载自定义AI 供应商翻译器translate-controller.ts另外alias映射提供动作组合能力例如simulateIncrementCopy展开为[incrementCounter, simulateCopy]两个子动作见 src/common/action.ts。配置与开关配置项规则集中在 src/common/configuration.ts包含翻译开关与引擎组等。典型配置键有listenClipboard剪贴板监听、incrementalCopy增量复制、autoCopy/autoPaste自动复制/粘贴、multiSource多源对比、translator-enabled/translator-cache/translator-compare/translator-double引擎组等。翻译相关配置变更最终由TranslateController.postSet落地见 src/main/translate-controller.ts。典型的联动逻辑包括multiSource打开时立即重新翻译translator-enabled变更时更新引擎集合sourceLanguage/targetLanguage变更时带updateLanguage: true重新翻译autoFormat与autoCopy互斥开启一个自动关闭另一个translatorType/dictionaryType变更触发switchTranslator/switchDictionary并提前返回不参与后续状态刷新listenClipboard变更时启动或停止剪贴板监听setWatch。3. 翻译触发与输入处理剪贴板监听、增量复制与文本净化触发来源翻译触发有三大来源显式动作translate、translateClipboard、doubleCopyTranslate等见 src/main/translate-controller.ts剪贴板监听setWatch(true)后注册text-changed与image-changed事件文本变更调用checkClipboard(true)触发翻译图片变更在enableOCR开启后走 OCR 识别链路pp_recognizer或recognizer见 src/main/translate-controller.tsUI 触发输入框 CtrlEnter 通过BaseView.translate派发动作见 src/components/BaseView.vue 与 src/components/ContrastPanel.vue。文本预处理与校验checkClipboard是一条完整的输入校验流水线src/main/translate-controller.tscheckLength文本长度须在(0, 3000]区间空文本或超长文本直接忽略见 src/main/translate-controller.tsnormalizeText调用normalizeAppend净化文本——统一换行符、去除-\n软换行、将句末标点与换行重构为分句标记若判定为单词则去除首尾标点见 src/main/translate-controller.ts 与 src/common/translate/helper.tscheckValid与当前文本、上次增量片段相同或与任一引擎缓存译文相同matchAnyResults时跳过翻译避免重复请求见 src/main/translate-controller.ts。增量复制Incremental Copy增量复制是 CopyTranslator 的招牌特性连续复制多个片段自动拼接后一次性翻译。核心在setSrcsrc/main/translate-controller.ts是否进入增量模式由isIncremental决定条件为配置开关incrementalCopy打开或incrementCounter 0见 src/main/translate-controller.ts拼接规则区分语言中文片段直接拼接非中文片段以空格连接incrementCounter由快捷键动作incrementCounter设置表示下一次监听剪贴板为增量选中每次拼接后递减。checkIsWord同时是词典模式与净化路径的判定函数长度不超过 100、且仅含字母数字空格且单词数不超过 3 的文本才被认定为单词src/common/translate/helper.ts。4. 语言决策与语言名称检测、智能互译与本地化显示语言检测与智能互译decideLanguage决定最终源/目标语言src/main/translate-controller.ts流程为取文本前 50 字符短文本取全文作为检测样本调用translator.detect——Compound.detect采用离线优先策略先用opentranslate2/translator的detectLang做本地检测失败才回退到在线检测引擎默认baidu见 src/common/translate/compound.ts检测结果若是zh-CN/zh-TW再用isTrad繁简识别修正因为繁简检测似乎不太灵源码注释原文若源语言与目标语言相同且开启了smartTranslate则将目标语言切换为用户配置的源语言实现中文进、英文出的智能互译见 src/main/translate-controller.ts。语言名称显示语言名称由getLanguageLocales提供底层是opentranslate2/languages的本地化字典见 src/common/translate/locale.ts。翻译完成后sync通过getL(lang)取本地化名称并 toast翻译完成 中文 - English见 src/main/translate-controller.ts。语言下拉菜单同样由createLanguageGenerator动态生成源语言列表含auto目标语言列表剔除auto见 src/common/action.ts。5. 翻译执行与引擎调度注册表、后备策略与多引擎缓存翻译器注册内置翻译器由creators工厂表与translators实例缓存共同管理src/common/translate/translators.ts已注册的内置引擎包括baidu、google包装为GoogleWrapper、keyan、youdao、sogou、caiyun、aliyun、azure、deepl、tencent、tencentsmart、yandex、volc、baidu-domain医药领域定制、stepfun、niu。getTranslator按四级查找解析引擎src/common/translate/translators.ts实例缓存translators内置工厂creators创建实例时优先使用配置中的密钥缺失则回退defaultTokens自定义翻译器customTranslatorManager后备打印警告并返回 Google。多引擎与后备策略Compound.translate是引擎调度的核心src/common/translate/compound.ts若未显式指定引擎使用当前engines集合并强制将主引擎加入队列通过isSupport按当前源/目标语言是否被该引擎支持过滤DirectionalTranslator走方向支持判断普通翻译器走语言列表包含判断见 src/common/translate/compound.ts后备策略若主引擎不支持当前语言对则切换到fallbackTranslator配置项默认google可在 UI 中修改主引擎结果作为mainResult返回其余支持引擎并行发起翻译但异常仅打印日志不阻塞主结果相同(text, from, to)组合复用resultBufferextend否则清空缓存重建clear。translateWith负责单引擎执行src/common/translate/compound.ts先查缓存命中即返回否则调用getTranslator(engine).translate随后依次执行autoReSegment分句重组、构造SharedResult含transPara/textPara段落信息与chineseStyle目标语言风格标记、写回resultBuffer并打点追踪tracker.track(translation, engine)。结果缓存与多源模式ResultBufferManager维护resultBufferMapsync()将结果同步到 Vuex 的resultBuffer未完成引擎以status: Translating占位见 src/common/translate/compound.ts。TranslateController.translateSentence按当前模式选择引擎组src/main/translate-controller.ts多源对比模式multiSource开启读取translator-compare引擎组过滤掉未启用/不存在的引擎后全部并行翻译普通模式读取translator-cache引擎组经filterByActiveEngines只保留translator-enabled与自定义翻译器中处于启用态的引擎最终engines.sort()后交给Compound.translate。doubleCopyTranslate则使用translator-double引擎组配置了才覆盖默认组见 src/main/translate-controller.ts。引擎切换与缓存命中switchTranslator处理主引擎切换src/main/translate-controller.ts先更新主引擎与支持语言列表若当前源/目标语言不再被支持自动回退到en/zh-CN并重新翻译若语言仍受支持则优先命中缓存——文本一致且缓存存在时直接postTranslate缓存结果否则重新翻译。6. 词典系统与智能词典Polymer 聚合查询与单词判定词典引擎聚合词典子系统由Polymer管理src/common/dictionary/polymer.ts默认主引擎为youdao构造函数默认参数setMainEngine可切换为bingquery(words)时主引擎发起主查询返回结果其余注册引擎并行查询并写入各自缓存任一引擎失败则缓存undefined切换主引擎后若查询词未变优先从getBuffer命中缓存缓存为空则clearDict清空界面。当前内置词典引擎只有bing与youdao注册在 src/common/dictionary/engines.ts。词典类型定义dictionaryTypes [youdao, bing]结果结构包含words、explains、phonetics、examples、suggests、url等字段见 src/common/dictionary/types.ts。智能词典触发isWord决定是否进入词典模式src/main/translate-controller.ts需同时满足配置开关smartDict打开checkIsWord(text)判定为单词当前不在增量复制状态增量复制下强制走整段翻译。preTranslate在设置原文后记录needDictrealTranslate中若dict needDict为真则与句子翻译并行发起queryDictionarysrc/main/translate-controller.ts、src/main/translate-controller.ts。词典查询成功后若explains非空写入dictResult并syncDict同步到 Vuex见 src/main/translate-controller.ts。7. 结果同步、缓存与界面绑定从 Vuex 到四种视图结果同步翻译完成后postTranslate依次执行normalizeAppend再次净化译文受autoPurify控制postProcess按autoCopy/autoPaste/autoFormat/autoShow配置自动复制、延时粘贴pasteDelay秒、回写原文或显示窗口见 src/main/translate-controller.tssync(language)写入 VuexsharedResult开启enableNotify时发系统通知并 toast 显示来源语言 - 目标语言见 src/main/translate-controller.ts。多引擎缓存经ResultBufferManager.sync()写入resultBuffer。整个翻译期间translating标志位防止并发打断translateWithOption开头检查。渲染层展示四种界面消费同一份状态BaseView统一读取sharedResult/dictResult/配置定义模式切换逻辑普通/专注/对照见 src/components/BaseView.vueContrastPanel对照面板用多布局展示源文本、译文、词典与对比视图见 src/components/ContrastPanel.vueDiffTextArea多源对比视图读取resultBuffer并计算差异差异计算见 src/renderer/comparator.ts见 src/components/DiffTextArea.vueDictResult词典结果面板渲染dictResult的释义、音标、例句等见 src/components/DictResult.vueFocus专注模式视图处理译文与多源/词典展示见 src/components/Focus.vue。8. 本地化资源生成与加载从 TypeScript 语言包到运行时 JSON资源定义与生成源码语言包以Map形式维护在 src/common/locales.ts内置en与zh_cn两个基准语言使用技巧轮播内容来自语言包中以tip等提示类键由 src/components/Tips.vue 组装展示prebuild.ts将语言包序列化为dist_locales/*.json缩进 4 格的格式化 JSON并自动补齐缺失键读取dist_locales中已存在的第三方语言文件缺失键用英文兜底见 src/prebuild.ts构建脚本在package.json的prebuild钩子中执行先tsc编译再node运行见 package.json生成的资源即仓库中的 dist_locales、dist_locales/zh-CN.json 等。运行时加载L10N在主进程加载语言包依次扫描系统语言目录与用户语言目录下的*.json为每个语言包补齐缺失键注册语言列表并安装到 VuexupdateLocales/updateLocaleSetting/updateLocale见 src/main/l10n.ts语言包目录由运行环境决定开发态为项目内dist_locales生产态为resources/locales并额外叠加用户目录用户可覆盖/新增语言见 src/common/env.ts默认语言通过app.getLocale()获取zh归一为zh-CN不在zh-CN/en/zh-TW范围时回退en见 src/main/l10n.tsVuex 的l10n插件模块保存当前语言与语言列表src/store/plugins/l10n.tslocaleSetting为auto时在启动期由L10N.install解析为系统默认语言。9. 扩展与修改建议新增翻译器、触发机制与多引擎策略新增翻译器内置翻译器在creators工厂表中注册并在translatorTypes见 src/common/types.ts中补充类型即可。实例创建统一注入axios代理与配置见 src/common/translate/translators.ts。密钥校验由configuration.ts的规则rule.check或通用examToken兜底完成见 src/main/translate-controller.ts。AI 供应商自定义翻译器通过配置translatorProviders声明供应商apiBase/apiKey/启用的模型列表CustomTranslatorManager在加载时按{providerId}-{modelName}展开为多个翻译器实例当前支持 OpenAI 兼容 API底层实现为 src/common/translate/openai.ts并自动写入customTranslators配置CustomTranslatorManager界面组件见 src/components/CustomTranslatorManager.vue核心逻辑见 src/common/translate/custom-translators.ts。新增供应商后调用reloadCustomTranslators动作即可热加载。修改翻译触发机制所有入口动作集中在TranslateController.handlesrc/main/translate-controller.ts新增触发方式只需在此新增case并在ActionManager.init中注册对应动作剪贴板监听集中在setWatch与checkClipboardsrc/main/translate-controller.ts、src/main/translate-controller.ts修改轮询/事件频率、白名单过滤、OCR 联动都在此区域内。调整多引擎策略引擎组定义与设置入口配置项在 src/common/types.tstranslator-enabled、translator-cache、translator-compare、translator-doubleUI 注册在 src/common/action.ts 与 src/common/action.ts引擎切换与缓存命中处理在switchTranslatorsrc/main/translate-controller.ts后备引擎逻辑在Compound.translatesrc/common/translate/compound.ts若想改变主引擎不支持则回退的行为改此处过滤与fallbackEngine选择即可。10. 关键文件索引翻译控制器触发、语言决策、结果同步、引擎组src/main/translate-controller.ts翻译器调度与缓存Compound/ResultBufferManagersrc/common/translate/compound.ts翻译器注册与获取creators/getTranslatorsrc/common/translate/translators.ts自定义翻译器AI 供应商展开src/common/translate/custom-translators.ts文本净化与分句重组normalizeAppend/autoReSegment/checkIsWordsrc/common/translate/helper.ts词典引擎聚合Polymersrc/common/dictionary/polymer.ts多源对比计算src/renderer/comparator.ts主要 UI 绑定src/components/BaseView.vue界面本地化加载L10Nsrc/main/l10n.ts语言包生成脚本src/prebuild.ts小结CopyTranslator 的翻译实现是一套动作-配置-引擎-词典-状态-视图的全链路体系动作与配置通过ActionManager 观察者机制驱动TranslateController输入经过长度/重复/单词判定层层校验后进入Compound多引擎调度配合ResultBufferManager缓存与fallbackTranslator后备策略实现稳定翻译词典经Polymer并行聚合所有结果统一写入 Vuex由 BaseView、ContrastPanel、DiffTextArea、DictResult 与 Focus 五种界面消费本地化资源则由prebuild生成、L10N运行时加载。开发者只需沿着本文梳理的入口与索引即可快速定位任一环节的修改点并安全扩展。【免费下载链接】CopyTranslatorForeign language reading and translation assistant based on copy and translate.项目地址: https://gitcode.com/gh_mirrors/co/CopyTranslator创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表