⛱️Sun-Panel-Helper发布以来，接收到最大的呼声可能就是下载的监控组件了，最近终于在V2.0.4版本实现了这两个组件，下面先给大家简单介绍下Sun-Panel-Helper：

Sun-Panel-Helper

🌟 在线体验

我们提供了完整的演示环境，让你在部署前可以充分体验：

🎨 Sun-Panel-Helper Demo

• 地址：demo.cocoyoo.cn
• 功能：
  • 体验完整的样式编辑功能
  • 预览各种美化效果
  • 测试部署流程

🎯 Sun-Panel 演示站

• 地址：home.cocoyoo.cn
• 特点：
  • 展示实际应用效果
  • 体验优化后的界面
  • 感受流畅的交互体验

💡 提示：你可以在 Helper Demo 中编辑样式，然后在演示站中查看效果，体验完整的美化流程！

Sun-Panel-Helper 下载器状态组件使用指南

📋 目录

• 简介
• 准备工作
• QB下载器组件配置
• TR下载器组件配置
• 部署到SunPanel
• 常见问题解决
• 进阶技巧

📝 简介

QB/TR下载器状态组件是Sun-Panel-Helper的特色功能之一，能够实时监控您的qBittorrent和Transmission下载器状态，包括下载速度、上传速度、任务数量等关键指标。组件采用美观简洁的设计，支持添加为固定组件或自由组件，灵活适应不同布局需求。

## 🔧 准备工作

前置条件

• 已正确部署Sun-Panel和Sun-Panel-Helper
• 拥有可访问的qBittorrent或Transmission下载器
• 下载器已开启WebUI访问权限
• 确保Helper能够成功连接到下载器(网络可达)

重要概念: Helper域名前缀

什么是域名前缀？

• 域名前缀是Sun-Panel-Helper服务的访问地址，用于SunPanel获取组件资源
• 通常是Helper的完整访问地址，如http://192.168.1.100:33002或https://helper.example.com

如何正确设置：

1. 确定您从哪个设备/浏览器访问SunPanel
2. 从该设备访问Helper时使用的完整URL就是您的前缀

🔷 QB下载器组件配置

步骤一: 打开组件配置页面

1. 登录Sun-Panel-Helper管理界面
2. 导航至"组件市场"
3. 找到并点击"QB下载器状态"组件卡片
4. 进入组件详情页面

步骤二: 添加下载器

1. 点击页面右侧"添加下载器"按钮
2. 在配置表单中填写以下信息:
   • 名称: 为下载器指定一个唯一名称(如"家庭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秒)

步骤三: 测试连接并自定义显示

1. 填写完配置后，点击"测试连接"按钮
2. 连接成功后，系统会显示"连接成功"提示
3. 在"显示项设置"区域，勾选您想要显示的信息项(如下载速度、上传速度、总任务等)
4. 调整完成后，点击"保存配置"按钮

步骤四: 预览效果

保存配置后，右侧预览区域会实时显示组件的实际效果。您可以:

1. 点击"刷新预览"按钮获取最新数据
2. 观察组件布局和数据显示是否符合预期（仅供参考，实际效果以sunpanl端显示为准）
3. 如需调整，返回左侧修改配置并重新保存

🔶 TR下载器组件配置

步骤一: 打开组件配置页面

1. 登录Sun-Panel-Helper管理界面
2. 导航至"组件市场"
3. 找到并点击"TR下载器状态"组件卡片
4. 进入组件详情页面

步骤二: 添加下载器

1. 点击页面左侧"添加下载器"按钮
2. 在配置表单中填写以下信息:
   • 名称: 为下载器指定一个唯一名称(如"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秒)

步骤三: 测试连接并自定义显示

1. 填写完配置后，点击"测试连接"按钮
2. 连接成功后，系统会显示"连接成功"提示
3. 在"显示项设置"区域，勾选您想要显示的信息项
4. 调整完成后，点击"保存配置"按钮

步骤四: 预览效果

保存配置后，右侧预览区域会显示组件的实际效果。您可以:

1. 点击"刷新预览"按钮获取最新数据
2. 观察组件布局和数据显示是否符合预期（仅供参考，实际效果以sunpanl端显示为准）
3. 如需调整，返回左侧修改配置并重新保存

🚀 部署到SunPanel

步骤一: 应用组件到组件池

首先，需要将配置好的QB/TR下载器组件应用到"固定组件"或"自由组件"池中:

1. 在下载器组件配置页面，找到右侧的"应用到组件池"区域
2. 根据您的需求，选择"应用到固定组件池"或"应用到自由组件池"按钮
3. 确认弹窗中的信息，点击"确定"
4. 系统会提示"成功添加到组件池"

步骤二: 配置固定组件布局

如果您选择使用固定组件，需要在"固定组件"页面进行配置:

1. 在Helper主菜单中，点击"固定组件"导航选项
2. 在固定组件页面的"组件池"中，找到已添加的下载器组件
3. 点击"添加到布局"按钮将组件添加到布局区域
4. 可以通过拖拽调整组件顺序，或添加换行标记调整布局
5. 调整组件的宽度、高度和移动端显示选项
6. 完成配置后，点击右上方的"部署配置"按钮

步骤三: 配置自由组件布局

如果您选择使用自由组件，需要在"自由组件"页面进行配置:

1. 在Helper主菜单中，点击"自由组件"导航选项
2. 在自由组件页面顶部，确保设置正确的"API前缀"(与Helper域名前缀相同)
3. 在"组件池"区域找到已添加的下载器组件
4. 点击"添加到布局"按钮将组件添加到当前配置(1-5)中
5. 设置组件在页面中的位置(top/left)和尺寸(width/height)
6. 选择组件显示模式(普通/滚动/固定)
7. 完成配置后，点击右上方的"部署配置"按钮

步骤四: 在SunPanel中查看组件

完成部署后，可以在SunPanel中查看组件:

固定组件

1. 登录SunPanel
2. 固定组件会自动显示在页面底部
3. 确保SunPanel的"设置" > "自定义" > "页脚"内容为空

自由组件

1. 登录SunPanel
2. 点击右上角的"编辑布局"按钮
3. 在左侧面板中找到已添加的下载器组件
4. 将组件拖动到合适的位置并调整大小
5. 点击"保存布局"按钮完成设置

固定组件vs自由组件: 选择指南

特性	固定组件	自由组件
布局方式	线性排列(可换行)	自由定位(绝对坐标)
位置调整	在Helper中调整顺序	在SunPanel中拖拽定位
配置数量	单一配置	支持5套配置方案
与页脚关系	与SunPanel自定义页脚互斥	不影响SunPanel页脚
适用场景	底部状态栏、固定布局	自由位置、多布局方案

选择建议:

• 如果您希望创建统一的底部状态栏，选择固定组件
• 如果您希望自由调整组件位置并支持多套布局方案，选择自由组件

提示: 完整的使用教程视频可以在B站观看https://www.bilibili.com/video/BV1cYPJeoEoG，视频中详细演示了固定组件和自由组件的配置使用方法，特别适合初次使用的用户。

❓ 常见问题解决

1. 组件显示"404 Not Found"

原因: Helper域名前缀配置错误。

解决方法:

1. 在Helper中删除组件布局配置:

   • 如果是固定组件: 进入"固定组件"页面，在布局区域找到该组件并删除
   • 如果是自由组件: 进入"自由组件"页面，在布局区域找到该组件并删除

2. 从组件池中删除:

   • 在固定组件/自由组件页面的"组件池"区域，找到并删除该组件

3. 在QB/TR组件设置页面删除有问题的下载器:

   • 进入QB或TR下载器组件配置页面
   • 在左侧下载器列表中找到对应下载器
   • 点击删除按钮并确认删除

4. 重新添加下载器配置:

   • 在QB/TR组件配置页面添加新的下载器
   • 确保使用正确的域名前缀(见下方验证方法)
   • 重新填写所有配置信息并测试连接
   • 保存配置

5. 重新应用到组件池:

   • 在下载器组件配置页面，找到右侧的"应用到组件池"区域
   • 选择"应用到固定组件池"或"应用到自由组件池"按钮

6. 在自由组件或固定组件中添加并部署:

   • 进入对应的组件页面(固定组件或自由组件)
   • 从组件池添加到布局
   • 按照教程配置组件位置和大小
   • 点击"部署配置"按钮完成部署

验证前缀方法:

1. 打开浏览器，输入您配置的前缀URL(如http://192.168.1.100:33002)
2. 确认能成功访问Helper界面
3. 使用该URL作为域名前缀

2. 加载缓慢或超时

原因: 网络延迟、国外服务器或远程下载器连接速度慢。

解决方法:

1. 增加刷新间隔，将默认的10秒调整为30秒或更长
2. 减少显示项数量，仅保留关键信息
3. 检查网络连接，确保Helper与下载器之间网络顺畅
4. 对于国外服务器，考虑使用代理或VPN改善连接

3. 连接测试失败

常见原因:

• QB/TR地址错误
• 用户名/密码错误
• 下载器WebUI未启用
• 网络不通/防火墙阻止

解决方法:

1. 验证下载器地址是否正确，包括协议、IP和端口
2. 检查用户名和密码是否正确
3. 确认下载器WebUI已启用且可以直接通过浏览器访问
4. 检查防火墙设置，确保允许Helper访问下载器端口

4. IPv6地址连接问题

原因: Docker默认网络模式下容器可能无法直接访问IPv6网络。

解决方法:

1. 使用Host网络模式部署Helper容器
2. 配置方法参考README.md中的"IPv6兼容性说明"部分
3. 在下载器地址中使用IPv4地址替代IPv6地址(如有可能)

📚 进阶技巧

多下载器管理

您可以添加多个QB/TR下载器配置，实现同时监控多个下载服务:

1. 每个下载器必须使用唯一的名称
2. 可以混合使用QB和TR下载器
3. 在配置列表中点击不同的下载器名称切换管理
4. 每个下载器可以独立部署为固定或自由组件

自定义显示优化

根据实际需求优化组件显示效果:

1. 对于小尺寸布局，建议仅显示下载/上传速度和活跃任务
2. 对于监控主要指标，推荐显示:
   • 下载/上传速度
   • 总任务数
   • 活跃下载
   • 剩余空间
3. 对于完整监控，可启用所有显示项

显示项配置与顺序调整

组件支持自定义显示项目和顺序:

1. 在QB/TR下载器配置页面的"显示项设置"区域，勾选您需要显示的项目
2. 重要: 增加或删除显示项后，必须任意调整一下显示顺序，否则可能无法正确保存配置！
3. 在"显示顺序调整"区域通过拖拽调整顺序(仅对已选中的项目生效)
4. 默认排序规则: 下载速度和上传速度始终显示在最前面，其他项目按照您设置的顺序显示

参数实时更新

组件支持参数实时更新，无需重新部署:

1. 修改现有下载器配置(如刷新间隔、显示项等)
2. 点击"保存配置"按钮
3. 系统会自动同步最新配置到已部署的组件
4. SunPanel会在下次刷新时应用新配置

---

## 🎯 项目介绍 Sun Panel Helper 是一个专注于增强 Sun-Panel 功能的辅助工具。我们致力于为您的 Sun-Panel 带来更多精彩的功能和更好的使用体验。

作为一个热爱折腾的 AI 爱好者，我希望通过这个项目展示 AI 辅助开发的无限可能。本项目由 Sun-Panel 作者红烧猎人技术指导，全程使用 AI 辅助开发。如果你也对 AI 开发或 Sun-Panel 美化感兴趣，欢迎加入交流群一起探讨！

☕ 请作者喝杯奶茶

如果这个项目对你有帮助，可以请作者喝杯奶茶，您的支持是我持续创作的动力 ❤️

🤝 技术支持

• 作者：Madrays
• 投稿邮箱：2826910520@qq.com
• 项目指导：感谢 Sun-Panel 作者红烧猎人的技术支持

📈 项目统计