Homepage Autobrr 组件接入指南配置、API 鉴权与数据展示原理【免费下载链接】homepageA highly customizable homepage (or startpage / application dashboard) with Docker and service API integrations.项目地址: https://gitcode.com/GitHub_Trending/ho/homepageAutobrr 是一款面向 IRC 的自动化种子发布管理工具常用于构建自动化下载流水线。Homepage 官方仓库为其提供了开箱即用的服务 Widget只需一段 YAML 配置即可在仪表盘中实时展示 Autobrr 的推送批准数、拒绝数、过滤器数量与索引器数量。本文以 docs/widgets/services/autobrr.md 为骨架结合仓库内 src/widgets/autobrr 目录下的源码与测试完整讲解该组件的接入步骤、API 调用链路与展示逻辑读完即可在自己的服务仪表盘中落地使用。组件能展示什么Autobrr Widget 在服务卡片上固定展示四个数据块对应文档声明的 Allowed fields字段含义数据来源approvedPushes已批准的推送数量push_approved_countrejectedPushes被拒绝的推送数量push_rejected_countfilters过滤器总数filters接口返回数组长度indexers索引器总数release/indexers接口返回数组长度在 public/locales/en/common.json 中这四个字段被本地化为Approved、Rejected、Filters、Indexers页面实际显示的是英文短标签加数值。前置准备获取 API Key在 Autobrr 的 Web 界面中进入Settings API Keys创建一个 API Key 并复制保存。该 Key 是后续所有请求的唯一凭证Homepage 侧不做任何加密存储配置时应避免提交到公开仓库。从 Homepage 的代理处理器 src/utils/proxy/handlers/credentialed.js 可以看到autobrr 与jellystat、pulse一样通过请求头X-API-Token携带这个 Key} else if ([autobrr, jellystat, pulse].includes(widget.type)) { headers[X-API-Token] ${widget.key}; }也就是说Homepage 将你在 YAML 中填写的key原样注入到X-API-Token头中发给 Autobrr API这与 Autobrr 官方 API Key 鉴权方式一致。配置步骤services.yaml 接入在 Homepage 的services.yaml骨架示例见 src/skeleton/services.yaml中为 Autobrr 服务添加widget段配置如下- Autobrr: icon: sh-autobrr href: http://autobrr.host.or.ip description: 自动化种子管理 widget: type: autobrr url: http://autobrr.host.or.ip key: apikeyapikeyapikeyapikeyapikey参数说明type固定为autobrrHomepage 据此从 src/widgets/widgets.js 的组件注册表中找到对应的 Widget 定义urlAutobrr 实例的地址需要与href指向的地址一致通常为主机名或内网 IPHomepage 会将其作为所有 API 请求的基址key上一步在Settings API Keys中获取的 API Key字符串替换apikeyapikeyapikeyapikeyapikey即可。服务外层可额外按需配置icon、href、description等字段widget块本身只负责数据面板。底层 API 调用链路Widget 的核心定义位于 src/widgets/autobrr/widget.js它声明了 API 地址模板与三个数据端点const widget { api: {url}/api/{endpoint}, proxyHandler: credentialedProxyHandler, mappings: { stats: { endpoint: release/stats, validate: [push_approved_count, push_rejected_count], }, filters: { endpoint: filters, }, indexers: { endpoint: release/indexers, }, }, };由此可以还原出三条真实的请求路径映射名最终请求地址响应形态stats{url}/api/release/stats对象含push_approved_count、push_rejected_count字段filters{url}/api/filters数组indexers{url}/api/release/indexers数组请求经由credentialedProxyHandler转发完整链路为浏览器前端 → Homepage 服务端代理/api/widgets/...→ 拼装X-API-Token请求头 → Autobrr 服务端。这样做的好处是 API Key 不会暴露给浏览器端同时规避了跨域CORS问题。stats端点还配置了validate校验字段当返回数据缺少push_approved_count或push_rejected_count时代理会判定为无效数据并返回 500见 src/utils/proxy/validate-widget-data.js 对应的校验逻辑。前端展示组件数据渲染逻辑在 src/widgets/autobrr/component.jsx 中实现。组件通过useWidgetAPI并行请求stats、filters、indexers三个端点const { data: statsData, error: statsError } useWidgetAPI(widget, stats); const { data: filtersData, error: filtersError } useWidgetAPI(widget, filters); const { data: indexersData, error: indexersError } useWidgetAPI(widget, indexers);任一请求出错时卡片整体显示错误状态错误优先取statsError数据未就绪时渲染四个占位块数据就绪后filters与indexers的数值取自响应数组的lengthapprovedPushes、rejectedPushes分别取自push_approved_count、push_rejected_count最终均通过t(common.number, ...)做数字本地化格式化后展示。该行为被 src/widgets/autobrr/component.test.jsx 的测试用例完整覆盖mock 返回push_approved_count: 1、push_rejected_count: 2、2 个过滤器、1 个索引器时断言四个数据块依次显示 1、2、2、1数据未就绪时断言出现 4 个占位块。配置本身的合法性由 src/widgets/autobrr/widget.test.js 通过expectWidgetConfigShape校验。常见问题与排错卡片显示错误/无数据确认key是否正确、是否在 Autobrr 的Settings API Keys中有效url必须是浏览器与 Autobrr 实例都能访问的地址且 Homepage 服务端能连通该地址代理请求发生在服务端。显示 Invalid data多为 Autobrr 返回的release/stats响应缺少push_approved_count/push_rejected_count字段通常是 API 版本或权限差异导致可先直接请求{url}/api/release/stats并携带X-API-Token头验证响应结构。跨域报错无需处理Homepage 通过服务端代理转发请求浏览器与 Autobrr 之间不存在直接跨域调用。字段不生效该 Widget 仅支持approvedPushes、rejectedPushes、filters、indexers四个展示字段不支持在配置中自定义其他字段多余字段会被忽略。小结Autobrr Widget 是 Homepage 服务集成体系的典型代表声明式的 YAML 配置 服务端凭据代理 端点映射 组件渲染四层结构。理解 src/widgets/autobrr/widget.js 中的mappings即可举一反三掌握仓库内其他同类 Widget 的接入方式。按本文步骤配置完成后你便能在个人仪表盘中一眼掌握 Autobrr 的推送批准/拒绝情况、过滤规则规模与索引器接入数量为自动化下载流水线提供实时可视化的运维入口。【免费下载链接】homepageA highly customizable homepage (or startpage / application dashboard) with Docker and service API integrations.项目地址: https://gitcode.com/GitHub_Trending/ho/homepage创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Homepage Autobrr 组件接入指南配置、API 鉴权与数据展示原理【免费下载链接】homepageA highly customizable homepage (or startpage / application dashboard) with Docker and service API integrations.项目地址: https://gitcode.com/GitHub_Trending/ho/homepageAutobrr 是一款面向 IRC 的自动化种子发布管理工具常用于构建自动化下载流水线。Homepage 官方仓库为其提供了开箱即用的服务 Widget只需一段 YAML 配置即可在仪表盘中实时展示 Autobrr 的推送批准数、拒绝数、过滤器数量与索引器数量。本文以 docs/widgets/services/autobrr.md 为骨架结合仓库内 src/widgets/autobrr 目录下的源码与测试完整讲解该组件的接入步骤、API 调用链路与展示逻辑读完即可在自己的服务仪表盘中落地使用。组件能展示什么Autobrr Widget 在服务卡片上固定展示四个数据块对应文档声明的 Allowed fields字段含义数据来源approvedPushes已批准的推送数量push_approved_countrejectedPushes被拒绝的推送数量push_rejected_countfilters过滤器总数filters接口返回数组长度indexers索引器总数release/indexers接口返回数组长度在 public/locales/en/common.json 中这四个字段被本地化为Approved、Rejected、Filters、Indexers页面实际显示的是英文短标签加数值。前置准备获取 API Key在 Autobrr 的 Web 界面中进入Settings API Keys创建一个 API Key 并复制保存。该 Key 是后续所有请求的唯一凭证Homepage 侧不做任何加密存储配置时应避免提交到公开仓库。从 Homepage 的代理处理器 src/utils/proxy/handlers/credentialed.js 可以看到autobrr 与jellystat、pulse一样通过请求头X-API-Token携带这个 Key} else if ([autobrr, jellystat, pulse].includes(widget.type)) { headers[X-API-Token] ${widget.key}; }也就是说Homepage 将你在 YAML 中填写的key原样注入到X-API-Token头中发给 Autobrr API这与 Autobrr 官方 API Key 鉴权方式一致。配置步骤services.yaml 接入在 Homepage 的services.yaml骨架示例见 src/skeleton/services.yaml中为 Autobrr 服务添加widget段配置如下- Autobrr: icon: sh-autobrr href: http://autobrr.host.or.ip description: 自动化种子管理 widget: type: autobrr url: http://autobrr.host.or.ip key: apikeyapikeyapikeyapikeyapikey参数说明type固定为autobrrHomepage 据此从 src/widgets/widgets.js 的组件注册表中找到对应的 Widget 定义urlAutobrr 实例的地址需要与href指向的地址一致通常为主机名或内网 IPHomepage 会将其作为所有 API 请求的基址key上一步在Settings API Keys中获取的 API Key字符串替换apikeyapikeyapikeyapikeyapikey即可。服务外层可额外按需配置icon、href、description等字段widget块本身只负责数据面板。底层 API 调用链路Widget 的核心定义位于 src/widgets/autobrr/widget.js它声明了 API 地址模板与三个数据端点const widget { api: {url}/api/{endpoint}, proxyHandler: credentialedProxyHandler, mappings: { stats: { endpoint: release/stats, validate: [push_approved_count, push_rejected_count], }, filters: { endpoint: filters, }, indexers: { endpoint: release/indexers, }, }, };由此可以还原出三条真实的请求路径映射名最终请求地址响应形态stats{url}/api/release/stats对象含push_approved_count、push_rejected_count字段filters{url}/api/filters数组indexers{url}/api/release/indexers数组请求经由credentialedProxyHandler转发完整链路为浏览器前端 → Homepage 服务端代理/api/widgets/...→ 拼装X-API-Token请求头 → Autobrr 服务端。这样做的好处是 API Key 不会暴露给浏览器端同时规避了跨域CORS问题。stats端点还配置了validate校验字段当返回数据缺少push_approved_count或push_rejected_count时代理会判定为无效数据并返回 500见 src/utils/proxy/validate-widget-data.js 对应的校验逻辑。前端展示组件数据渲染逻辑在 src/widgets/autobrr/component.jsx 中实现。组件通过useWidgetAPI并行请求stats、filters、indexers三个端点const { data: statsData, error: statsError } useWidgetAPI(widget, stats); const { data: filtersData, error: filtersError } useWidgetAPI(widget, filters); const { data: indexersData, error: indexersError } useWidgetAPI(widget, indexers);任一请求出错时卡片整体显示错误状态错误优先取statsError数据未就绪时渲染四个占位块数据就绪后filters与indexers的数值取自响应数组的lengthapprovedPushes、rejectedPushes分别取自push_approved_count、push_rejected_count最终均通过t(common.number, ...)做数字本地化格式化后展示。该行为被 src/widgets/autobrr/component.test.jsx 的测试用例完整覆盖mock 返回push_approved_count: 1、push_rejected_count: 2、2 个过滤器、1 个索引器时断言四个数据块依次显示 1、2、2、1数据未就绪时断言出现 4 个占位块。配置本身的合法性由 src/widgets/autobrr/widget.test.js 通过expectWidgetConfigShape校验。常见问题与排错卡片显示错误/无数据确认key是否正确、是否在 Autobrr 的Settings API Keys中有效url必须是浏览器与 Autobrr 实例都能访问的地址且 Homepage 服务端能连通该地址代理请求发生在服务端。显示 Invalid data多为 Autobrr 返回的release/stats响应缺少push_approved_count/push_rejected_count字段通常是 API 版本或权限差异导致可先直接请求{url}/api/release/stats并携带X-API-Token头验证响应结构。跨域报错无需处理Homepage 通过服务端代理转发请求浏览器与 Autobrr 之间不存在直接跨域调用。字段不生效该 Widget 仅支持approvedPushes、rejectedPushes、filters、indexers四个展示字段不支持在配置中自定义其他字段多余字段会被忽略。小结Autobrr Widget 是 Homepage 服务集成体系的典型代表声明式的 YAML 配置 服务端凭据代理 端点映射 组件渲染四层结构。理解 src/widgets/autobrr/widget.js 中的mappings即可举一反三掌握仓库内其他同类 Widget 的接入方式。按本文步骤配置完成后你便能在个人仪表盘中一眼掌握 Autobrr 的推送批准/拒绝情况、过滤规则规模与索引器接入数量为自动化下载流水线提供实时可视化的运维入口。【免费下载链接】homepageA highly customizable homepage (or startpage / application dashboard) with Docker and service API integrations.项目地址: https://gitcode.com/GitHub_Trending/ho/homepage创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
