OuonnkiTV是一款利用React、Vite和TypeScript构建的前端影视资源聚合工具，基于LibreSpark/LibreTV项目重构升级。它拥有清晰模块化架构、流畅的交互体验和稳健的状态管理，支持多端播放、搜索与观看历史记录，并可轻松导入多个视频源。用户可快速在Vercel平台部署个人影视站，实现零后端、一键搭建。
适用人群
希望零后端搭建个人影视站的站长
需要聚合多个视频源统一搜索播放的前端开发者
关注前端性能优化与状态管理实践的学习者
在线演示地址：https://tv.ouonnki.site/
GitHub源码仓库：https://github.com/Ouonnki/OuonnkiTV
核心功能亮点
实时搜索提示：支持历史搜索记录与智能联想提示，大幅提升检索效率。
流畅播放体验：基于xgplayer播放器，兼容HLS和MP4格式视频，保证播放稳定顺畅。
结构化内容页：影片标题、封面与简介清晰呈现，直观易用。
自动历史追踪：自动保存观看和搜索历史，支持一键清理，保护隐私。
多源批量导入：支持拖拽文件、粘贴JSON文本及远程URL三种导入方式，灵活高效。
个性化设置：用户可自定义主题色彩和偏好配置。
性能优化策略：采用代码拆分、缓存机制与按需加载，保障快速响应与首次渲染速度。
响应式设计：移动端与桌面端均适配自如，体验一致。
稳健状态管理：基于Zustand实现，数据结构清晰且易维护。
视频源导入与管理
支持导入方式
本地文件导入（📁）：拖拽或选择JSON文件，自动验证格式正确性。
JSON文本导入（📝）：直接粘贴配置，支持语法实时校验与格式美化。
URL导入（🌐）：远程加载视频源配置，兼容GitHub、Gitee等代码托管平台。
JSON示例格式
- [
- {
- "id": "source1",
- "name": "示例视频源",
- "url": "https://api.example.com/search",
- "detailUrl": "https://api.example.com/detail",
- "isEnabled": true
- }
- ]
字段说明
id（可选）：视频源唯一标识，系统自动生成。
name（必需）：视频源显示名称。
url（必需）：搜索API接口地址。
detailUrl（可选）：详情页API地址，默认为搜索API地址。
isEnabled（可选）：是否启用该源，默认启用。
支持的JSON结构
单个对象形式：{"name":"示例源","url":"API地址"}
对象数组形式：[{"name":"源1","url":"API1"},{"name":"源2","url":"API2"}]
支持多行格式化与紧凑单行JSON。
导入流程
- 打开设置页面（点击页面右上角设置图标）
- 选择“导入源”功能
- 选择文件导入、文本导入或URL导入
- 点击“开始导入”，完成批量导入操作
- 查看导入结果提示，成功后自动关闭弹窗。
导入体验优化
自动去重，防止重复添加同一视频源。
严格数据验证，确保必填字段和格式完整。
错误提示详细，帮助定位并修正问题。
通过Toast实时反馈导入进度和结果。
支持一次导入多个视频源，提升效率。
