[i=s] 本帖最后由 madrays 于 2025-3-2 16:24 编辑 [/i]<br />
<br />
⛱️Sun-Panel-Helper发布以来，接收到最大的呼声可能就是下载的监控组件了，最近终于在V2.0.4版本实现了这两个组件，下面先给大家简单介绍下Sun-Panel-Helper：
Sun-Panel-Helper
<div align="center">
<img src="https://pic2.ziyuan.wang/user/madrays/2025/02/logo _1__216e59a7de7ac.png" width="300" height="275" alt="Sun-Panel-Helper Logo" />
Sun-Panel 项目
一款为 Sun-Panel 设计的可视化美化工具，让你的 Sun-Panel 锦上添花~
🌟 在线体验
我们提供了完整的演示环境，让你在部署前可以充分体验：
🎨 Sun-Panel-Helper Demo
🎯 Sun-Panel 演示站
💡 提示：你可以在 Helper Demo 中编辑样式，然后在演示站中查看效果，体验完整的美化流程！
Sun-Panel-Helper 下载器状态组件使用指南
<div align="center">
<img src="https://pic2.ziyuan.wang/user/madrays/2025/03/A_8373005384f24.png" width="100%" alt="下载器状态组件封面" />
<p><em>优雅监控您的下载任务，尽在掌握</em></p>
</div>
📋 目录
📝 简介
QB/TR下载器状态组件是Sun-Panel-Helper的特色功能之一，能够实时监控您的qBittorrent和Transmission下载器状态，包括下载速度、上传速度、任务数量等关键指标。组件采用美观简洁的设计，支持添加为固定组件或自由组件，灵活适应不同布局需求。
<div align="center">
<img src="https://pic2.ziyuan.wang/user/madrays/2025/03/qb_894ccaa680302.png" width="50%" alt="QB组件预览" />
</div>
<div align="center">
<img src="https://pic2.ziyuan.wang/user/madrays/2025/03/tr_7c7ca8ba30ca0.png" width="50%" alt="TR组件预览" />
</div>
🔧 准备工作
前置条件
- 已正确部署Sun-Panel和Sun-Panel-Helper
- 拥有可访问的qBittorrent或Transmission下载器
- 下载器已开启WebUI访问权限
- 确保Helper能够成功连接到下载器(网络可达)
重要概念: Helper域名前缀
<div style="background-color: #f8f9fa; padding: 15px; border-radius: 8px; border-left: 4px solid #e74c3c; margin-bottom: 20px;">
<h4 style="color: #e74c3c; margin-top: 0;">⚠️ 特别注意</h4>
<p><strong>域名前缀配置是整个组件功能的关键！错误的前缀配置将导致SunPanel端显示404错误，且必须删除组件重新配置才能修复。</strong></p>
</div>
什么是域名前缀？
- 域名前缀是Sun-Panel-Helper服务的访问地址，用于SunPanel获取组件资源
- 通常是Helper的完整访问地址，如
http://192.168.1.100:33002或 https://helper.example.com
如何正确设置：
- 确定您从哪个设备/浏览器访问SunPanel
- 从该设备访问Helper时使用的完整URL就是您的前缀
<div align="center">
<img src="https://pic2.ziyuan.wang/user/madrays/2025/03/b_2dbf8eb8db159.png" width="80%" alt="域名前缀示意图" />
</div>
🔷 QB下载器组件配置
步骤一: 打开组件配置页面
- 登录Sun-Panel-Helper管理界面
- 导航至"组件市场"
- 找到并点击"QB下载器状态"组件卡片
- 进入组件详情页面
步骤二: 添加下载器
- 点击页面右侧"添加下载器"按钮
- 在配置表单中填写以下信息:
- 名称: 为下载器指定一个唯一名称(如"家庭QB"、"PT下载器"等)
- Helper域名前缀: ⚠️ 这是最关键的一步!
- 填写访问Helper的完整URL，例如:
http://192.168.1.100:33002 或 https://helper.example.com
- 确保URL格式正确，包含http://或https://前缀，末尾不要带斜杠
- QB地址: qBittorrent WebUI的完整地址，如:
http://192.168.1.101:8080
- 用户名/密码: qBittorrent WebUI的登录凭据
- 刷新间隔: 数据更新频率，单位为秒(最小3秒)
步骤三: 测试连接并自定义显示
- 填写完配置后，点击"测试连接"按钮
- 连接成功后，系统会显示"连接成功"提示
- 在"显示项设置"区域，勾选您想要显示的信息项(如下载速度、上传速度、总任务等)
- 调整完成后，点击"保存配置"按钮
步骤四: 预览效果
保存配置后，右侧预览区域会实时显示组件的实际效果。您可以:
- 点击"刷新预览"按钮获取最新数据
- 观察组件布局和数据显示是否符合预期（仅供参考，实际效果以sunpanl端显示为准）
- 如需调整，返回左侧修改配置并重新保存
🔶 TR下载器组件配置
步骤一: 打开组件配置页面
- 登录Sun-Panel-Helper管理界面
- 导航至"组件市场"
- 找到并点击"TR下载器状态"组件卡片
- 进入组件详情页面
步骤二: 添加下载器
- 点击页面左侧"添加下载器"按钮
- 在配置表单中填写以下信息:
- 名称: 为下载器指定一个唯一名称(如"NAS TR"、"服务器TR"等)
- Helper域名前缀: ⚠️ 关键配置!
- 填写访问Helper的完整URL，如:
http://192.168.1.100:33002 或 https://helper.example.com
- 确保URL格式正确，包含http://或https://前缀，末尾不要带斜杠
- TR地址: Transmission RPC地址，通常为:
http://IP地址:9091/transmission/rpc
- 用户名/密码: Transmission的登录凭据
- 刷新间隔: 数据更新频率，单位为秒(最小3秒)
步骤三: 测试连接并自定义显示
- 填写完配置后，点击"测试连接"按钮
- 连接成功后，系统会显示"连接成功"提示
- 在"显示项设置"区域，勾选您想要显示的信息项
- 调整完成后，点击"保存配置"按钮
步骤四: 预览效果
保存配置后，右侧预览区域会显示组件的实际效果。您可以:
- 点击"刷新预览"按钮获取最新数据
- 观察组件布局和数据显示是否符合预期（仅供参考，实际效果以sunpanl端显示为准）
- 如需调整，返回左侧修改配置并重新保存
🚀 部署到SunPanel
<div style="background-color: #f8f9fa; padding: 15px; border-radius: 8px; border-left: 4px solid #e74c3c; margin-bottom: 20px;">
<h4 style="color: #e74c3c; margin-top: 0;">⚠️ 重要理解</h4>
<p><strong>固定组件和自由组件是完全独立的两套系统，需要分别配置和部署。应用QB/TR组件到组件池和真正部署到SunPanel是两个不同的步骤。</strong></p>
</div>
步骤一: 应用组件到组件池
首先，需要将配置好的QB/TR下载器组件应用到"固定组件"或"自由组件"池中:
- 在下载器组件配置页面，找到右侧的"应用到组件池"区域
- 根据您的需求，选择"应用到固定组件池"或"应用到自由组件池"按钮
- 确认弹窗中的信息，点击"确定"
- 系统会提示"成功添加到组件池"
步骤二: 配置固定组件布局
如果您选择使用固定组件，需要在"固定组件"页面进行配置:
<div style="background-color: #f8f9fa; padding: 15px; border-radius: 8px; border-left: 4px solid #f39c12; margin-bottom: 20px;">
<h4 style="color: #f39c12; margin-top: 0;">⚠️ 重要提示</h4>
<p>使用固定组件时，<strong>必须清空SunPanel设置中的"自定义页脚内容"</strong>，否则组件可能无法正常显示。</p>
</div>
- 在Helper主菜单中，点击"固定组件"导航选项
- 在固定组件页面的"组件池"中，找到已添加的下载器组件
- 点击"添加到布局"按钮将组件添加到布局区域
- 可以通过拖拽调整组件顺序，或添加换行标记调整布局
- 调整组件的宽度、高度和移动端显示选项
- 完成配置后，点击右上方的"部署配置"按钮
步骤三: 配置自由组件布局
如果您选择使用自由组件，需要在"自由组件"页面进行配置:
- 在Helper主菜单中，点击"自由组件"导航选项
- 在自由组件页面顶部，确保设置正确的"API前缀"(与Helper域名前缀相同)
- 在"组件池"区域找到已添加的下载器组件
- 点击"添加到布局"按钮将组件添加到当前配置(1-5)中
- 设置组件在页面中的位置(top/left)和尺寸(width/height)
- 选择组件显示模式(普通/滚动/固定)
- 完成配置后，点击右上方的"部署配置"按钮
步骤四: 在SunPanel中查看组件
完成部署后，可以在SunPanel中查看组件:
固定组件
- 登录SunPanel
- 固定组件会自动显示在页面底部
- 确保SunPanel的"设置" > "自定义" > "页脚"内容为空
自由组件
- 登录SunPanel
- 点击右上角的"编辑布局"按钮
- 在左侧面板中找到已添加的下载器组件
- 将组件拖动到合适的位置并调整大小
- 点击"保存布局"按钮完成设置
固定组件vs自由组件: 选择指南
| 特性 |
固定组件 |
自由组件 |
| 布局方式 |
线性排列(可换行) |
自由定位(绝对坐标) |
| 位置调整 |
在Helper中调整顺序 |
在SunPanel中拖拽定位 |
| 配置数量 |
单一配置 |
支持5套配置方案 |
| 与页脚关系 |
与SunPanel自定义页脚互斥 |
不影响SunPanel页脚 |
| 适用场景 |
底部状态栏、固定布局 |
自由位置、多布局方案 |
选择建议:
- 如果您希望创建统一的底部状态栏，选择固定组件
- 如果您希望自由调整组件位置并支持多套布局方案，选择自由组件
提示: 完整的使用教程视频可以在B站观看https://www.bilibili.com/video/BV1cYPJeoEoG，视频中详细演示了固定组件和自由组件的配置使用方法，特别适合初次使用的用户。
❓ 常见问题解决
1. 组件显示"404 Not Found"
原因: Helper域名前缀配置错误。
解决方法:
-
在Helper中删除组件布局配置:
- 如果是固定组件: 进入"固定组件"页面，在布局区域找到该组件并删除
- 如果是自由组件: 进入"自由组件"页面，在布局区域找到该组件并删除
-
从组件池中删除:
- 在固定组件/自由组件页面的"组件池"区域，找到并删除该组件
-
在QB/TR组件设置页面删除有问题的下载器:
- 进入QB或TR下载器组件配置页面
- 在左侧下载器列表中找到对应下载器
- 点击删除按钮并确认删除
-
重新添加下载器配置:
- 在QB/TR组件配置页面添加新的下载器
- 确保使用正确的域名前缀(见下方验证方法)
- 重新填写所有配置信息并测试连接
- 保存配置
-
重新应用到组件池:
- 在下载器组件配置页面，找到右侧的"应用到组件池"区域
- 选择"应用到固定组件池"或"应用到自由组件池"按钮
-
在自由组件或固定组件中添加并部署:
- 进入对应的组件页面(固定组件或自由组件)
- 从组件池添加到布局
- 按照教程配置组件位置和大小
- 点击"部署配置"按钮完成部署
<div style="background-color: #f8f9fa; padding: 15px; border-radius: 8px; border-left: 4px solid #f39c12; margin-bottom: 20px;">
<h4 style="color: #f39c12; margin-top: 0;">⚠️ 重要提示</h4>
<p><strong>必须按照上述顺序依次操作，彻底删除错误配置后再重新添加，才能解决404问题。</strong></p>
</div>
验证前缀方法:
- 打开浏览器，输入您配置的前缀URL(如
http://192.168.1.100:33002)
- 确认能成功访问Helper界面
- 使用该URL作为域名前缀
2. 加载缓慢或超时
原因: 网络延迟、国外服务器或远程下载器连接速度慢。
解决方法:
- 增加刷新间隔，将默认的10秒调整为30秒或更长
- 减少显示项数量，仅保留关键信息
- 检查网络连接，确保Helper与下载器之间网络顺畅
- 对于国外服务器，考虑使用代理或VPN改善连接
3. 连接测试失败
常见原因:
- QB/TR地址错误
- 用户名/密码错误
- 下载器WebUI未启用
- 网络不通/防火墙阻止
解决方法:
- 验证下载器地址是否正确，包括协议、IP和端口
- 检查用户名和密码是否正确
- 确认下载器WebUI已启用且可以直接通过浏览器访问
- 检查防火墙设置，确保允许Helper访问下载器端口
4. IPv6地址连接问题
原因: Docker默认网络模式下容器可能无法直接访问IPv6网络。
解决方法:
- 使用Host网络模式部署Helper容器
- 配置方法参考README.md中的"IPv6兼容性说明"部分
- 在下载器地址中使用IPv4地址替代IPv6地址(如有可能)
<div style="background-color: #f8f9fa; padding: 15px; border-radius: 8px; border-left: 4px solid #3498db; margin-bottom: 20px;">
<h4 style="color: #3498db; margin-top: 0;">💡 IPv6兼容性提示</h4>
<p>由于容器环境普遍不支持IPv6，如需管理纯IPv6域名的下载器，建议：</p>
<ul>
<li>若与Helper在同一局域网，请使用局域网IPv4地址+端口</li>
<li>或使用frp、ngrok等内网穿透工具转发至IPv4地址</li>
</ul>
</div>
📚 进阶技巧
多下载器管理
您可以添加多**/TR下载器配置，实现同时监控多个下载服务:
- 每个下载器必须使用唯一的名称
- 可以混合使用QB和TR下载器
- 在配置列表中点击不同的下载器名称切换管理
- 每个下载器可以独立部署为固定或自由组件
自定义显示优化
根据实际需求优化组件显示效果:
- 对于小尺寸布局，建议仅显示下载/上传速度和活跃任务
- 对于监控主要指标，推荐显示:
- 对于完整监控，可启用所有显示项
显示项配置与顺序调整
组件支持自定义显示项目和顺序:
- 在QB/TR下载器配置页面的"显示项设置"区域，勾选您需要显示的项目
- 重要: 增加或删除显示项后，必须任意调整一下显示顺序，否则可能无法正确保存配置！
- 在"显示顺序调整"区域通过拖拽调整顺序(仅对已选中的项目生效)
- 默认排序规则: 下载速度和上传速度始终显示在最前面，其他项目按照您设置的顺序显示
参数实时更新
组件支持参数实时更新，无需重新部署:
- 修改现有下载器配置(如刷新间隔、显示项等)
- 点击"保存配置"按钮
- 系统会自动同步最新配置到已部署的组件
- SunPanel会在下次刷新时应用新配置
<div style="background-color: #f8f9fa; padding: 15px; border-radius: 8px; border-left: 4px solid #9b59b6; margin-bottom: 20px;">
<h4 style="color: #9b59b6; margin-top: 0;">🔄 动态更新功能</h4>
<p>如果您只是修改显示项目或顺序，<strong>无需重新部署或应用到组件池</strong>，只需在QB/TR组件配置页面点击"保存配置"，修改会自动同步到已部署的SunPanel页面。</p>
</div>
<div align="center">
<p>希望本指南能帮助您顺利配置和使用QB/TR下载器状态组件!</p>
<p>如有任何问题，欢迎加入QQ交流群: 1019956856</p>
</div>
🎯 项目介绍
Sun Panel Helper 是一个专注于增强 Sun-Panel 功能的辅助工具。我们致力于为您的 Sun-Panel 带来更多精彩的功能和更好的使用体验。
<div align="center">
<div style="display: inline-block; text-align: center; margin: 20px;">
<img src="https://pic2.ziyuan.wang/user/madrays/2025/02/qrcode_29172b7553992.jpg" width="200" alt="QQ群二维码"/>
<p style="margin: 10px 0; font-size: 16px;">
<span style="background: #12b7f5; color: white; padding: 4px 12px; border-radius: 4px;">QQ交流群</span>
</p>
<p style="color: #666; font-size: 14px;">1019956856</p>
</div>
</div>
- 作者：Madrays
- 投稿邮箱：2826910520@qq.com
- 项目指导：感谢 Sun-Panel 作者红烧猎人的技术支持
9 飞牛币
2025-3-2 16:02:58
2025-3-3 17:01:19 楼主
