Homepage Tdarr 小组件配置指南实时监控媒体转码队列与存储节省【免费下载链接】homepageA highly customizable homepage (or startpage / application dashboard) with Docker and service API integrations.项目地址: https://gitcode.com/GitHub_Trending/ho/homepage本指南讲解如何在 Homepage 中为 Tdarr 配置服务小组件将 Tdarr 的转码队列、已完成任务、出错任务与已节省存储空间四项关键指标直接呈现到个人首页仪表盘上。读完本文你将掌握 Tdarr 小组件的完整 YAML 配置方法、各项字段的语义与计算来源以及组件底层通过代理接口拉取统计数据的完整链路。Tdarr 小组件概览Tdarr 是一个开源的媒体库转码编排工具常用于批量将影视文件统一转换为指定格式以节省磁盘空间。Homepage 提供了内置的tdarr类型小组件无需编写任何自定义脚本即可把 Tdarr 的实时统计信息渲染为仪表盘上的四个信息块。该小组件属于 Homepage 的服务型小组件Service Widget相关文档位于 docs/widgets/services/tdarr.md其源码实现位于 src/widgets/tdarr 目录包含组件component.jsx、代理处理器proxy.js与配置声明widget.js三个核心文件。基础配置在 Homepage 的services.yaml中为 Tdarr 服务添加widget配置块即可启用小组件完整写法如下widget: type: tdarr url: http://tdarr.host.or.ip key: tdarrapikey # optional配置字段说明字段是否必填说明type必填固定为tdarr用于声明小组件类型url必填Tdarr 实例的访问地址支持主机名或 IP例如http://tdarr.host.or.ipkey可选Tdarr 的 API Key对应组件代理请求中的x-api-key请求头若 Tdarr 未启用 API 认证可省略其中url字段在构建请求地址时会被规范化处理从 api-helpers.js 中的formatApiCall实现可以看到{url}占位符替换时会自动去除末尾多余的斜杠value.replace(/\/$/, )因此你无需担心地址尾部是否带/造成请求拼接异常。若需要为 Tdarr 服务配置图标、标题、链接等附加信息可参考 src/skeleton/services.yaml 中展示的服务通用配置骨架将小组件配置嵌入到对应服务条目下。小组件展示的指标含义Tdarr 小组件固定展示四个指标块其标签由国际化文件 public/locales/en/common.json 定义Queue队列当前排队等待转码的任务数Processed已处理已完成转码的任务数Errored出错处理失败的任务数Saved节省通过转码累计节省的存储空间以字节为单位显示指标的计算逻辑源码解析这四个指标并非直接取自 Tdarr 接口的单一字段而是在前端组件中根据多个统计表数据计算得出。核心逻辑位于 component.jsxconst table1Count tdarrData.table1ViewableCount || tdarrData.table1Count; const table2Count tdarrData.table2ViewableCount || tdarrData.table2Count; const table3Count tdarrData.table3ViewableCount || tdarrData.table3Count; const table4Count tdarrData.table4ViewableCount || tdarrData.table4Count; const table5Count tdarrData.table5ViewableCount || tdarrData.table5Count; const table6Count tdarrData.table6ViewableCount || tdarrData.table6Count; const queue parseInt(table1Count, 10) parseInt(table4Count, 10); const processed parseInt(table2Count, 10) parseInt(table5Count, 10); const errored parseInt(table3Count, 10) parseInt(table6Count, 10); const saved parseFloat(tdarrData.sizeDiff, 10) * 1000000000;从中可以总结出以下关键点优先使用可查看计数组件会优先读取table*ViewableCount字段只有在该字段不存在时才回退到table*Count。代码注释说明ViewableCount排除了被禁用的库等不可见项目只统计 UI 表格中实际可见的条目使展示数字更贴近用户在 Tdarr 界面中看到的结果。三类状态由六张表合并而来Tdarr 统计数据库中的六张表table1 至 table6分别对应不同处理状态组件将两两相加得到三类汇总——队列table1 table4、已处理table2 table5、出错table3 table6这与 Tdarr 界面中按处理通道划分的表格结构相对应。存储节省的单位换算sizeDiff字段以 GB 为单位组件将其乘以1000000000转换为字节后通过t(common.bytes, ...)本地化格式化为易读的单位如 GB/TB显示。数值安全转换所有计数均使用parseInt显式转换为十进制整数sizeDiff使用parseFloat处理可兼容 Tdarr 接口返回的字符串型数值。上述计算逻辑由 component.test.jsx 中的测试用例完整验证测试数据table1Count: 1至table6Count: 6、sizeDiff: 1.5时断言队列为 5、已处理为 7、出错为 9、节省为 1500000000 字节与实现完全一致。底层代理请求原理Homepage 采用前端组件 后端代理的架构访问第三方服务接口以避免浏览器端跨域问题并统一管理 API 凭据。Tdarr 小组件的数据获取链路如下1. API 端点声明widget.js 中声明了小组件的 API 模板const widget { api: {url}/api/v2/cruddb, proxyHandler: tdarrProxyHandler, };即小组件最终请求的是 Tdarr 的{url}/api/v2/cruddb端点。2. 代理处理器实现proxy.js 中的tdarrProxyHandler实现了完整的数据拉取流程const url new URL(formatApiCall(widgets[widget.type].api, { endpoint: undefined, ...widget })); const [status, contentType, data] await httpProxy(url, { method: POST, body: JSON.stringify({ data: { collection: StatisticsJSONDB, mode: getById, docID: statistics, }, }), headers, });关键点说明请求方式为 POSTTdarr 的 cruddb 接口通过 POST JSON 负载执行数据库操作请求体声明了目标集合StatisticsJSONDB、操作模式getById以及文档 IDstatistics即拉取 Tdarr 的统计文档。API Key 注入当配置了key字段时代理会在请求头中加入x-api-keyif (widget.key) { headers[x-api-key] ${widget.key}; }该行为由 proxy.test.js 验证测试断言请求头中的x-api-key等于配置的密钥且请求 URL 被正确拼接为http://td/api。错误处理请求非 200 状态时代理记录错误日志并返回 500 响应及原始错误数据缺少group或service查询参数、或找不到对应小组件配置时返回 400。服务定位代理通过getServiceWidget(group, service, index)从当前配置中解析出具体的小组件实例实现在 src/utils/config/service-helpers.js因此同一页面可以配置多个不同的 Tdarr 实例。3. 组件渲染与异常态component.jsx 通过useWidgetAPI(widget)来自 src/utils/proxy/use-widget-api.js发起代理请求加载中数据尚未返回时渲染四个无值的占位块tdarr.queue、tdarr.processed、tdarr.errored、tdarr.saved占位块带有脉冲动画效果出错时渲染Container的错误状态将代理返回的错误信息展示在小组件容器中加载完成将四个计算后的指标渲染到对应数据块。每个数据块由通用组件 src/components/services/widget/block.jsx 渲染支持通过highlightValue传入存储节省值参与高亮规则判断——例如你可以为saved字段配置自定义高亮阈值让节省空间达到一定量时数据块呈现醒目样式。配置验证与常见问题配置合法性小组件的配置声明由 widget.test.js 通过expectWidgetConfigShape校验确保api模板与代理处理器结构符合项目约定。接口不可达如果 Tdarr 地址填写错误或服务未启动代理会返回 500 错误小组件显示错误容器。检查时请确认url可从 Homepage 所在网络访问且http://url/api/v2/cruddb可正常响应。统计信息为 0若小组件正常渲染但各项指标均为 0请检查 Tdarr 统计数据库中是否存在数据注意组件优先读取ViewableCount字段若你的库被禁用对应表格的可见计数可能为 0这与 Tdarr UI 中的显示是一致的。密钥不生效确认key字段与 Tdarr 设置中的 API Key 完全一致包括大小写代理会原样透传到x-api-key请求头。小结通过短短几行 YAML 配置Tdarr 小组件即可将转码队列、已完成、出错与存储节省四项关键数据实时呈现在 Homepage 仪表盘上。其实现由前端组件计算与后端代理转发协同完成代理负责向 Tdarr 的StatisticsJSONDB统计文档发起 POST 请求并注入x-api-key组件负责将六张统计表的计数合并为三类状态并换算存储单位。理解了这条数据链路后你还可以举一反三参考 docs/widgets/services/index.md 中的其他服务小组件文档为你的仪表盘接入更多应用。【免费下载链接】homepageA highly customizable homepage (or startpage / application dashboard) with Docker and service API integrations.项目地址: https://gitcode.com/GitHub_Trending/ho/homepage创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考