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

阅读Sigma书源Web编辑器体验浏览器里的Vue书源编辑界面如何提升效率【免费下载链接】legado-E阅读Sigma是legado的继承保持开源免费延续开源精神。项目地址: https://gitcode.com/gh_mirrors/legado2/legado-E阅读Sigmalegado-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直连 Appws://手机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自定义快捷键构建后通过 scripts/sync.js 同步到 App 的assets/web/vue目录也就是说App 内打开的 Web 页面和外部浏览器访问的编辑器是同一套代码体验完全一致。上手小结这套工作流适合谁✅适合经常自建/维护书源的用户、想批量整理书源库的玩家、习惯电脑键盘工作流的人。✅典型路径App 设置里开启 Web 服务浏览器打开#/bookSource点「拉取」同步现有书源左侧表单逐栏补全规则右侧填关键词即时调试点「推送」把结果写回 App手机立即生效✅注意开发调试前端需要 Node ≥ 20、pnpm ≥ 9并在 modules/web/ 下运行pnpm dev详见 modules/web/README.md。阅读Sigma 的 Web 书源编辑器证明了把表单化编辑 实时调试 批量同步这三件事搬到大屏浏览器里书源维护效率能有数量级的提升。开源免费之外这套体验本身就值得每个重度用户上手试试 【免费下载链接】legado-E阅读Sigma是legado的继承保持开源免费延续开源精神。项目地址: https://gitcode.com/gh_mirrors/legado2/legado-E创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考