ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

eSearch 项目架构全解析:Electron 多窗口渲染进程、数据存储与国际化技术选型指南

eSearch 项目架构全解析:Electron 多窗口渲染进程、数据存储与国际化技术选型指南 eSearch 项目架构全解析Electron 多窗口渲染进程、数据存储与国际化技术选型指南【免费下载链接】eSearch截屏 离线OCR 搜索翻译 以图搜图 贴图 录屏 万向滚动截屏 屏幕翻译 Screenshot Offline OCR Search Translate Search for picture Paste the picture on the screen Screen recorder Omnidirectional scrolling screenshot Screen translator 支持Windows Linux macOS项目地址: https://gitcode.com/GitHub_Trending/es/eSearch本篇文章基于 eSearch 官方开发文档《整体说明》整理并扩展而来深入剖析这款跨平台识屏·搜索工具的整体技术选型、目录结构与核心模块分工。你将了解到它为何选择 Electron 与 Biome、如何以自研 dkh-ui 轻量框架组织多页面渲染进程、如何通过类型化 IPC 与自研 Store 实现主进程和渲染进程的高效协作以及基于 JSON 文件的多语言国际化工作流从而具备直接阅读、调试乃至二次开发 eSearch 源码的能力。项目定位与整体说明eSearch 是一个同时支持 Windows、Linux、macOS 的桌面应用功能涵盖截屏、离线 OCR、搜索翻译、以图搜图、贴图、录屏、万向滚动截屏与屏幕翻译。项目的描述文件 package.json 中其产品名为 eSearch、版本号为 15.5.1简介为识屏 · 搜索遵循 GPL-3.0 协议包管理器为 pnpmpackageManager: pnpm10.17.0。在技术选型上作者在 docs/develop/overview.md 中直白地说明开发框架使用 Electron 开发。作者自述JS 适合快速开发同时承认 Electron 跨平台方案在体积和内存上偏大因此尽量让功能对得上他的体积。文中也提到 tauri 同样是不错的方案但受限于作者的技术栈并未采用并寄希望于未来 Windows 和 macOS 下也能出现类似 ArchLinux 中 Electron 共享运行时的方案。工具链使用 Biome 作为格式化和检查工具使用 vite经由 electron-vite作为打包工具。前端语言TypeScript很少使用类型体操仅作为简单的类型标注。主进程开启了strict模式渲染进程未开启历史遗留问题较多。以下各节将沿着该文档的脉络结合仓库源码逐一展开。技术选型详解框架、工具链与关键依赖库自研 UI 框架 dkh-ui向 jQuery 的拙劣模仿渲染层使用的不是 Vue 或 React而是作者自研的 dkh-ui在 package.json 的 dependencies 中以dkh-ui: ^0.14.2引入。作者自述 dkh-ui只是对 JQuery 的拙劣模仿并坦言自己学不会 Vue/React 的 hook、ref 等概念因此在代码中可以看到大量直接使用document和原生 HTML 操作的地方目前也在逐步迁移到 dkh-ui。从源码结构看这决定了渲染进程代码风格偏向命令式 DOM 操作而非数据驱动例如 src/renderer/root/root.ts 承担初始化样式、统一各页面风格的角色。理解这一点有助于阅读渲染层代码时对齐作者的编码心智。核心依赖库文档明确列出以下三个关键库其他依赖以 package.json 为准用途库备注截屏node-screenshots在 dependencies 与 optionalDependencies 中均出现后者按平台/架构细分win32-x64-msvc、linux-x64-gnu、linux-loong64-gnu、darwin-arm64 等 9 个变体图片编辑fabric.js含 erase2d/fabric依赖中有fabric: ^7.4.0与erase2d/fabric: ^1.2.1本地文字识别eSearch-OCR依赖中为esearch-ocr: 8.5.2基于 onnx 与 paddleOCR 实现此外 dependencies 中还包含onnxruntime-nodeOCR/分割模型推理运行时、esearch-seg人像抠图、uiohook-napi全局键盘/鼠标钩子、xtranslator翻译 API 封装、fuse.js模糊搜索、mediabunny录屏处理、picture_match以图搜图、qr-scanner-wechat二维码识别等可对照 package.json 逐项查看。构建与打包脚本package.json 的 scripts 中定义了完整的开发与构建命令pnpm run develectron-vite 开发模式文档说明由于 vite 调试.node原生库尚未配置好推荐使用start。pnpm run startelectron-vite preview 预览运行是开发时的常用入口。pnpm run buildelectron-vite 构建。pnpm run packbuild后执行 electron-builder--dir输出未打包目录。pnpm run distbuild后执行 electron-builder 生成各平台安装包。pnpm run ana以 analyze 模式预览配合 vite-bundle-analyzer 分析包体积。pnpm run typechecktsc -b --noEmit --force全量类型检查。pnpm run format/pnpm run lint/pnpm run fixBiome 格式化、检查与自动修复。pnpm run uitest使用独立的 electron.vite.config_test.ts 跑 UI 测试。关于 Biome仓库根目录有 biome.json 配置文件格式化与 lint 均以它为准。目录结构与文件职责说明文档对仓库结构给出了明确划分结合源码验证如下根目录electron-builder.config.jselectron-builder 打包配置见下节。assets程序图标svg 源文件、多尺寸 png、icon.icns、icon.ico 等assets/logo下还有生成图标的脚本与模板。src项目源码主体。lib主进程侧的自有库存储、国际化、IPC、工具函数等。docs开发文档与使用文档。主进程src/main/main.ts主进程入口负责 CLI 参数处理、窗口管理、全局快捷键、托盘、IPC 中转与打包资源下载等。该文件约 3000 行是整个应用的中枢。渲染进程多页面结构文档列出了各渲染模块与对应 HTML 入口electron.vite.config.ts 的renderer.build.rollupOptions.input恰好以多页方式注册了全部 12 个 HTML 入口两者可一一对应目录HTML 入口职责src/renderer/assets—渲染进程资源如 icons 目录下的各类 svg 图标src/renderer/browser_bgbrowser_bg.html主页面内嵌浏览器错误提示src/renderer/clipcapture.html截屏界面框选、编辑、OCR/搜索入口src/renderer/css—样式文件clip.css、recorder.css、root.css 等src/renderer/dingding.html贴图界面以及贴图屏幕翻译src/renderer/editoreditor.html主页面编辑器OCR、以图搜图与二维码识别也在此运行src/renderer/photoEditorphotoEditor.html高级图片编辑器src/renderer/recorderrecorder.html录屏提示栏与录屏编辑src/renderer/recorderTiprecorderTip.html录屏框选、光标与按键提示src/renderer/root—初始化样式保持各页面统一src/renderer/screenShot—对截屏库的简单封装供 CLI 截屏、截屏界面与屏幕翻译使用另有 waylandShot.ts 处理 Wayland 场景src/renderer/settingsetting.html设置界面src/renderer/translatetranslate.html主页面翻译封装常用翻译 APIsrc/renderer/translatortranslator.html实时屏幕翻译src/renderer/videoEditorvideoEditor.html高级录屏编辑器src/renderer/aiVisionaiVision.htmlAI 视觉相关页面从 electron.vite 的配置可以看到渲染层构建时对 svg 启用了 ViteImageOptimizer 优化、assetsInlineLimit: 0使资源不内联并开启 sourcemap 便于调试主进程构建不压缩minify: false这些细节对二次开发排查问题很有帮助。类型共享与 IPCsrc/ShareTypes.d.ts配置类型定义setting接口约 561 行覆盖快捷键、全局外观、OCR、AI、工具栏、鼠标跟随栏、框选、图像编辑等全部配置项同时定义主进程与渲染进程 IPC 的消息类型。文档特别指出在这种多页面的项目中共享类型定义非常方便。lib/ipc.ts自研的类型化 IPC 封装。核心是一个Message接口包含 clip_show、clip_ocr、clip_search、recordInit、translatorInit 等数十个消息配合mainSend、renderOn、renderSend、renderSendSync、mainOn、mainOnReflect六个导出函数实现主进程到渲染进程推送mainSend、渲染到主进程请求renderSend/renderSendSync、以及渲染进程之间的主进程中转通信mainOnReflect。mainOnReflect专门服务无返回值的消息将数据广播给多个 WebContents这正是截屏、贴图、录屏等页面之间协作的基础设施。自有库lib/store自研设置存储库。文档说明其参考了 electron-store但直接使用 TypeScript 做类型定义、不依赖 ajv。见下节详解。lib/translate翻译库用于多语言国际化。见国际化节。模型资源的下载策略文档特别强调OCR 模型和人像抠图模型在打包或编译时下载不放进 git 仓库具体逻辑见 electron-builder.config.js 的beforePack钩子。该钩子会检查./assets/onnx/ppocr/ppocr6_small_rec.onnx不存在则从 eSearch-OCR 的 release 下载并解压 ppocr_v6_small.zip下载doc_cls.onnx方向分类模型到./assets/onnx/ppocr/下载seg.onnx人像分割模型到./assets/onnx/seg/Windows 下额外下载copy.exe到./lib/用于特殊复制场景按平台下载 ffmpeg 到./lib/ffmpeg/win32 会进一步解压出 ffmpeg.exe。这套机制保证了 OCR 模型等大体积文件不进入 git而是构建时按需拉取。此外 electron-builder 配置中还包含electronDownload.mirror指向 npmmirror 镜像加速 Electron 二进制下载asar: false不打包成 asar便于检查产物为 png/jpg/svg 注册文件关联fileAssociationsrole 为 Editor意味着可用 eSearch 打开图片文件进行编辑afterPack钩子会根据 lib/translate 中支持的语言裁剪 Electron 自带的 locales 原生语言包以减小体积deb/rpm 包分别声明依赖 ffmpeg 与 ffmpeg-free。主进程与 CLI窗口管理与启动参数src/main/main.ts 是主进程唯一入口承担以下职责CLI 参数处理通过minimist解析命令行参数。其中-d或环境变量ESEARCH_DEV或设置项dev为真时进入开发者模式--userData可指定自定义用户数据目录并且支持便携模式程序目录下存在portable目录时自动把用户数据放到该目录。从源码看还支持读取程序根目录下的preload_config文件预置用户路径这种三选一的优先级命令行 preload_config portable 目录值得二次开发时留意。窗口管理创建主窗口、截屏窗口、贴图窗口、翻译窗口、录屏窗口等多个窗口配合mainSend向对应页面广播事件。快捷键与托盘注册全局快捷键globalShortcut与托盘图标Tray托盘样式在设置类型中可配置为无/彩色/黑/白/跟随系统/跟随系统反。IPC 注册通过ipcMain.on(store, ...)提供设置的读写通道见下节。模型资源下载打包时的 beforePack 逻辑如上节所述。开发模式判断的完整逻辑为process.argv.includes(-d) || import.meta.env.DEV || process.env.ESEARCH_DEV || store.get(dev)任一项为真即开启。自研设置存储库 lib/store类型化、无 ajv 依赖文档指出 lib/store 参考了 electron-store但直接使用 TS 类型定义不依赖 ajv。从源码看其实现分为三层lib/store/store.ts核心Store类将配置以 JSON 文件落盘configPath默认是用户数据目录下的 config.json见 src/main/main.ts 第 88-90 行的实例化new Store({ configPath: join(app.getPath(userData), config.json) })。提供get/set/getAll/setAll/clear/path等方法get在取不到值时回退到defaultData通过setDefaultData注入类型为 src/ShareTypes.d.ts 的setting接口getAll使用deepMerge将当前数据与默认值深合并保证旧配置升级到新版本时自动补全缺失字段。lib/store/parse.tsxget/xset按a.b.c形式的点路径读写嵌套对象xset在中间路径不存在时会根据下一段是否为数字自动创建数组或对象。lib/store/renderStore.ts渲染进程侧的同名封装通过ipcRenderer.sendSync走ipcMain.on(store, ...)通道提供get/set/getAll/setAll。其点睛之处在于用类型映射Pathssetting、GetValuesetting, P把设置路径字符串约束到setting接口的合法键路径例如store.get(快捷键.截屏搜索.key)这类写法会得到编译期类型校验这是直接使用 ts 进行类型定义、不依赖 ajv的体现——用编译期类型取代运行时 schema 校验。国际化lib/translate 与 JSON 语言包多语言国际化由 lib/translate 承担文档提到翻译库用于多语言国际化。仓库内已有 ar、en、eo、es、fr、ru、zh-HANT 等语言的 JSON 文件简体中文zh-HANS为源语言默认值。运行时翻译见 lib/translate/translate.ts。lan()切换语言不匹配时通过 xtranslator 的matchFitLan回退到 zh-HANSt()按文本查 source.json 的 id 再取对应语言词条如果文字未在 source.json 中定义控制台会以红色样式输出提示未翻译则以蓝色样式输出——这正是 lib/translate/readme.md 中开发者一节所述的行为。翻译工作流见 lib/translate/readme.md 与 lib/translate/tool.js。导出 CSV 后用node lib/translate/tool.js -l en追加-a输出全部文字便于修改旧翻译编辑第三列译文后用node lib/translate/tool.js -i en.csv导入回 JSON。tool.js 还通过 srcCommit 与各语言 finishId 记录翻译进度借助 git diff 定位需要翻译的新增文字。打包裁剪electron-builder 的afterPack会读取 lib/translate 目录中的语言文件动态裁剪 Electron 自带 locales 中不被支持的原生语言包进一步减小体积。图标资源svg img方案文档最后提到图标使用 svg 图标通过img显示。从 src/renderer/assets/icons 可以看到 add、ocr、record、translate、setting、clip 等数十个功能图标均为 svgelectron.vite.config.ts 中对 svg 启用了 ViteImageOptimizer 优化构建时按需压缩。图标类型定义在 src/iconTypes.d.ts由 script/gen_icon_types.ts 生成保证在代码中引用图标名时有类型提示。从整体说明到动手开发整体说明是 eSearch 开发文档的入口后续文档还包含《开始》环境准备与构建命令、《主进程》《截屏》《OCR》《高级图片编辑》《超级录屏》等专题见 docs/develop/readme.md。开发者快速上手路径可参考 docs/develop/start.md准备 vscode、npm、node.js、git推荐使用 pnpm 并将 registry 与 electron_mirror 指向 npmmirror.com 镜像加速克隆仓库后pnpm install若不需要 CUDA 或网络受限可设环境变量ONNXRUNTIME_NODE_INSTALL_CUDAskip日常开发用pnpm run start运行dev 模式因.node原生库调试尚未配置好而暂不可用pnpm run pack输出未打包目录pnpm run dist生成安装包。在动手改代码前建议先建立三个心智模型渲染进程是多个独立 HTML 页面的集合入口清单见 electron.vite.config.ts页面间协作依赖 lib/ipc.ts 的类型化消息通道所有可配置项的类型都收敛在 src/ShareTypes.d.ts 的setting接口中。掌握这三点就能沿着本文梳理的模块地图快速定位并理解 eSearch 的任意一处实现。【免费下载链接】eSearch截屏 离线OCR 搜索翻译 以图搜图 贴图 录屏 万向滚动截屏 屏幕翻译 Screenshot Offline OCR Search Translate Search for picture Paste the picture on the screen Screen recorder Omnidirectional scrolling screenshot Screen translator 支持Windows Linux macOS项目地址: https://gitcode.com/GitHub_Trending/es/eSearch创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表