【本站原创】Rhex首页轮播图插件 v1.0.2

用Trae开发的第一个插件，就拿最简单的轮播图练练手。
插件功能：在首页列表上方，加一个轮播图。可以最多设置5张轮播图，并且支持移动顺序。

效果演示：https://yuminga.com/

首页轮播图插件功能总结

📌 基本信息

• 插件名称：首页轮播图
• 插件ID：home-carousel
• 版本：1.0.1
• 作者：秦始黄

---

🎨 前端功能

1. 轮播图展示

   • 在首页帖子列表上方显示轮播图
   • 支持 PC 端和移动端自适应显示
   • 宽度自动填充，高度自动调整

2. 自动轮播

   • 每 5 秒自动切换到下一张
   • 支持手动左右切换
   • 支持点击指示器快速跳转

3. 交互功能

   • 点击轮播图可跳转到指定链接（新窗口打开）
   • 鼠标移入显示手型光标
   • 左右切换按钮柔和显示，支持暗黑/白天模式

4. 视觉效果

   • 支持添加标题，覆盖在图片底部
   • 圆角边框设计
   • 与系统主题完美融合

---

⚙️ 后台管理功能

1. 轮播图管理

   • 最多添加 5 张轮播图
   • 支持上移/下移调整顺序
   • 支持删除轮播图

2. 图片上传

   • 支持本地上传图片（上传到 /uploads/carousel）
   • 支持直接填写图片地址
   • 建议尺寸提示（1600px × 500px，16:5 宽高比）
   • 实时预览效果

3. 内容配置

   • 设置跳转链接（可选）
   • 设置标题文字（可选）

4. 保存功能

   • 一键保存所有更改
   • 操作成功/失败即时反馈
   • 输入框交互流畅不丢焦点

---

🔧 技术特点

• 基于 Rhex 插件系统开发
• 使用纯原生 JavaScript 实现轮播图功能
• 支持 SPA 路由导航后的重新渲染
• 数据存储使用插件配置 API
• UI 风格与系统后台一致

---

📂 插件文件结构

text
addons/home-carousel/
├── addon.json          # 插件配置
├── dist/
│   └── server.mjs      # 服务端渲染逻辑
└── assets/
    └── admin.js        # 后台管理界面

v1.0.2:

修复轮播图显示后消失的bug
优化内联脚本加载机制
使用 inlineScripts API 替代手动 script 标签
确保轮播图稳定显示
v1.0.1:

移除对外部 esm.sh 的依赖
使用纯原生 JavaScript 实现轮播图功能