阅读Sigma书源Web编辑器体验：浏览器里的Vue书源编辑界面如何提升效率-开发者社区

阅读Sigma书源Web编辑器体验：浏览器里的Vue书源编辑界面如何提升效率

【免费下载链接】legado-E阅读Sigma是legado的继承，保持开源免费，延续开源精神。项目地址: https://gitcode.com/gh_mirrors/legado2/legado-E

阅读Sigma（legado-E）是开源阅读 App legado 的继承者，不仅免费开源，还内置了一套基于 Vue3 的Web 书源编辑器。开启 App 的「Web 服务」后，你可以在电脑浏览器的大屏 + 键盘环境下编辑书源、实时调试、批量拉取和推送，彻底告别手机小屏幕上手写规则的痛苦。

为什么需要在浏览器里编辑书源

书源的核心是「搜索规则、详情规则、目录规则、正文规则」，每条规则都可能要反复修改、反复测试。在手机上操作存在三个明显痛点：

⌨️键盘效率低：规则字符串长，手机输入法切换 JSON / 正则非常繁琐
👀屏幕太小：左边写规则、右边看调试日志，手机根本放不下
🐛调试反馈慢：改完规则要保存回 App 再搜索测试，来回切换

而 modules/web/ 模块提供的 Web 编辑器，正是为了解决这些问题：左侧表单化编辑规则、右侧实时调试输出、中间工具栏一键拉取/推送，一个浏览器标签页搞定整个书源工作流。

开启 Web 服务：书源编辑器的第一步

Web 编辑器本身只是前端页面，数据后端由阅读 App 提供。上手前需要完成两件事：

在 App 的设置中启用「Web 服务」
确认本机开放端口（默认1234）

之后用电脑浏览器访问http://手机IP:1234，相关接口路由一览如下：

路由	功能
`http://localhost:8080/`	Web 书架
`http://localhost:8080/#/bookSource`	书源编辑
`http://localhost:8080/#/rssSource`	订阅源编辑

💡 浏览器兼容性要求：Edge ≥ 85、Firefox ≥ 79、Chrome ≥ 85、Safari ≥ 14.1（见 modules/web/README.md）。

完整的 HTTP / WebSocket 接口说明可以参考仓库根目录的 api.md，比如获取全部书源GET /getBookSources、保存书源POST /saveBookSource等，Web 编辑器底层调用的就是这些接口。

编辑界面拆解：三栏布局是效率关键

打开#/bookSource路由后，整个界面由 SourceEditor.vue 定义，采用经典的三栏布局：

┌─────────────────┬──────┬─────────────────┐ │ 左栏：表单编辑 │ 工具栏 │ 右栏：调试/工具 │ │ (SourceTabForm) │(ToolBar)│ (SourceTabTools)│ └─────────────────┴──────┴─────────────────┘

表单化规则编辑：告别手写 JSON

书源字段被整理成 bookSourceEditConfig.ts 这样的分组配置：

基础：源类型、源域名、源名称、源分组、并发率、js 库……
搜索：搜索地址、校验文字、列表规则、书名/作者/分类规则……
详情 / 目录 / 正文：各阶段的抓取规则

每个字段都带有hint提示，例如「源域名」会提示通常填写网站主页，「校验文字」会提示强烈建议填写。新手照着表单一格一格填，就能生成一份合法的书源 JSON，不用再去啃ruleSearch、ruleToc这些命名空间。

订阅源编辑同理，配置来自 rssSourceEditConfig.ts，同一个编辑界面通过 URL 中的bookSource/rssSource自动切换标题和配置（见 SourceEditor.vue）。

工具栏：拉取、推送、导入、导出、快捷键

中间的工具栏 ToolBar.vue 提供了一组大按钮：

拉取：从 App 后端一键同步全部书源到浏览器本地（走getBookSources接口）
推送：把编辑好的书源批量写回 App（走saveBookSources接口）
导入 / 导出：支持从剪贴板或文件导入书源 JSON，再导出去分享给他人
快捷键：内置hotkeys-js，每个按钮都能自定义组合键并保存，全程不用碰鼠标

这套「拉取 → 编辑 → 推送」的流程，配合自定义快捷键，让批量维护几十个书源的工作量大幅下降。

实时调试：改完规则立刻验证

写书源最耗时的环节是调试。Web 编辑器的右栏 SourceDebug.vue 通过WebSocket直连 App（ws://手机IP:1235/bookSourceDebug），实现了边改边测：

输入框填入搜索关键词（书名、作者）
点击调试，当前正在编辑的书源会先自动保存到后端
调试日志实时滚动输出：搜索结果列表、命中的节点、每一步规则的执行情况

调试信息直接追加到右侧文本域并自动滚动到底部（见 SourceDebug.vue），不需要再切回 App 手动搜索验证，一个来回省掉几十秒。

技术栈一览：为什么这套界面用起来顺手

Web 模块位于 modules/web/，核心依赖见 package.json：

技术	用途
Vue 3 + Pinia	界面与状态管理（书源、连接状态分别由`sourceStore`/`connectionStore`维护）
Element Plus	表单、弹窗、按钮等 UI 组件
Vite	构建工具，`pnpm dev`即可本地开发
axios + WebSocket	与 App 后端的 HTTP / 实时通信
hotkeys-js	自定义快捷键