Homepage 集成 Prowlarr 索引器统计 Widget配置指南与源码级原理解析【免费下载链接】homepageA highly customizable homepage (or startpage / application dashboard) with Docker and service API integrations.项目地址: https://gitcode.com/GitHub_Trending/ho/homepage本篇文章聚焦于在 Homepage 中集成Prowlarr索引器管理器Widget 的完整方案涵盖配置 YAML 的书写方式、API Key 的获取、四个统计字段的含义以及从浏览器请求到 Prowlarr API 的完整调用链路。读完本文你将掌握如何在 services.yaml 中快速接入 Prowlarr并理解每个统计数字在前后端是如何被聚合与渲染的。Prowlarr Widget 能做什么Prowlarr 是 Sonarr / Radarr 等 *arr 系列应用的索引器管理与检索代理。Homepage 的 Prowlarr Widget 并不做下载或管理操作而是通过 Prowlarr 的indexerstats接口拉取全站统计指标并在服务卡片上以四个数字块直观展示Grabs抓取次数numberOfGrabsQueries查询次数numberOfQueriesFail Grabs抓取失败次数numberOfFailGrabsFail Queries查询失败次数numberOfFailQueries这四个字段也是官方文档明确允许的字段集合[numberOfGrabs, numberOfQueries, numberOfFailGrabs, numberOfFailQueries]见 prowlarr.md。基础配置把 Widget 挂到服务上Prowlarr Widget 的配置极简只需三个键type、url和key。以下配置来自官方文档可直接复制到你的services.yaml中widget: type: prowlarr url: http://prowlarr.host.or.ip key: apikeyapikeyapikeyapikeyapikey三个配置项的说明配置项含义说明typeWidget 类型固定为prowlarr用于在 widgets.js 中查找到对应实现urlProwlarr 服务地址支持主机名或 IP可以是http://prowlarr.host.or.ip或带端口的形式如http://192.168.1.10:9696keyProwlarr API Key在 Prowlarr 的Settings General页面中获取粘贴时不要带引号需要注意的是该 Widget 依赖 Prowlarr 的 API Key 认证因此key是必填项若缺失或填错前端会通过错误 UI 提示 API 调用失败。API Key 从哪里来官方文档明确指出API Key 位于 Prowlarr 的Settings General页面中。该 Key 会被 Homepage 拼接到 API 请求中作为查询参数传递具体拼接模板定义在 widget.jsapi: {url}/api/v1/{endpoint}?apikey{key},即最终请求形如http://prowlarr.host.or.ip/api/v1/indexerstats?apikeyapikeyapikeyapikeyapikeyapikey其中{endpoint}由具体的映射mapping决定{url}与{key}则来自你配置的url与key字段。源码视角请求是如何发出与响应的1. 端点映射widget.jswidget.js 中定义了proxyHandler: genericProxyHandler并声明了两个端点映射mappings: { indexer: { endpoint: indexer, }, indexerstats: { endpoint: indexerstats, }, },其中indexerstats是本 Widget 实际使用的端点负责返回索引器统计信息。2. 前端数据获取component.jsx在 component.jsx 中组件通过useWidgetAPI请求indexerstats端点const { data: grabsData, error: grabsError } useWidgetAPI(widget, indexerstats);useWidgetAPI位于 use-widget-api.js它基于 SWR 缓存并格式化代理 URL将请求指向 Homepage 自身的代理接口再由代理转发到 Prowlarr。3. 后端代理genericProxyHandlergeneric.js 中的genericProxyHandler负责真正发起对外请求通过getServiceWidget(group, service, index)从配置中取出 Widget 定义用formatApiCall将api模板中的{url}、{key}、{endpoint}替换为实际值通过httpProxy向 Prowlarr 发起 HTTP 请求对返回数据执行validateWidgetData校验并在成功后交由map处理本 Widget 未定义map直接透传。4. 数据聚合与渲染component.jsxProwlarr 的indexerstats响应结构是indexers数组每个元素包含单个索引器的四个统计值。Homepage 的组件会在前端将其按索引器累加后再展示grabsData?.indexers?.forEach((element) { numberOfGrabs element.numberOfGrabs; numberOfQueries element.numberOfQueries; numberOfFailedGrabs element.numberOfFailedGrabs; numberOfFailedQueries element.numberOfFailedQueries; });也就是说页面上显示的 Grab / Query 数字是所有索引器的汇总值而非某个索引器的单独数值。随后四个数字分别渲染为四个BlockBlock labelprowlarr.numberOfGrabs value{t(common.number, { value: numberOfGrabs })} / Block labelprowlarr.numberOfQueries value{t(common.number, { value: numberOfQueries })} / Block labelprowlarr.numberOfFailGrabs value{t(common.number, { value: numberOfFailedGrabs })} / Block labelprowlarr.numberOfFailQueries value{t(common.number, { value: numberOfFailedQueries })} /在数据尚未返回时组件会先渲染四个占位块若请求失败则通过Container的 error 态展示错误信息见 component.jsx。界面文案与多语言支持Widget 的四个区块文案通过 i18n 键值定义位于各语言的 common.json 中例如英文翻译为prowlarr: { enableIndexers: Indexers, numberOfGrabs: Grabs, numberOfQueries: Queries, numberOfFailGrabs: Fail Grabs, numberOfFailQueries: Fail Queries }因此界面语言会随 Homepage 的显示语言自动切换无需额外配置。测试与验证如何确认配置正确仓库为该 Widget 提供了完整的单元测试可帮助你验证实现行为widget.test.js通过expectWidgetConfigShape校验 Widget 配置对象api、proxyHandler、mappings结构是否合法。component.test.jsx验证三种关键行为——加载中渲染 4 个占位区块端点报错时渲染错误 UI 与错误消息将多个索引器的统计值正确累加例如两组数据分别得到 11、22、33、44 的汇总结果。如果你在接入后页面显示异常可依此排查先确认url在浏览器中能直接访问再确认key与 ProwlarrSettings General中的一致最后检查 Homepage 的代理日志中是否有 HTTP 错误码。小结Homepage 的 Prowlarr Widget 是一个配置极简、内部完整的典型示例typeurlkey三个字段即可完成接入底层则由indexerstats端点、generic 代理、SWR 数据获取与四区块聚合渲染共同支撑。参照本文配置后你的首页服务卡片即可实时呈现 Prowlarr 的抓取与查询统计为媒体自动化栈的日常运维提供一目了然的可视化数据。【免费下载链接】homepageA highly customizable homepage (or startpage / application dashboard) with Docker and service API integrations.项目地址: https://gitcode.com/GitHub_Trending/ho/homepage创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考