OuonnkiTV 概览
OuonnkiTV 是一款基于 React + Vite + TypeScript 构建的现代化前端视频聚合平台。它在 LibreSpark/LibreTV 的基础上进行了深度重构，通过模块化架构与更稳健的状态管理，实现了更流畅的交互体验。用户可以通过该项目快速在 Vercel 上部署个人影视站，实现跨端搜索、播放及资源聚合。
适用场景
- 个人站长：无需搭建后端，即可一键部署轻量级个人影视站。
- 开发者：需要聚合多个视频源，并统一搜索与播放接口的场景。
- 技术学习者：研究前端性能优化、Zustand 状态管理及 TypeScript 实践。
核心功能特性
OuonnkiTV 专注于提升资源检索与播放的效率，核心能力涵盖以下方面：
- 高效检索：支持实时搜索提示、历史记录回溯与联想建议。
- 流畅播放：集成 xgplayer 播放器，完美支持 HLS 和 MP4 格式。
- 智能管理：自动追踪观看与搜索历史，支持一键清理；通过 Zustand 实现轻量化状态管理。
- 灵活配置：支持响应式布局适配（移动端 / 桌面端），并提供个性化主题与偏好设置。
- 性能优化：采用代码分割、缓存机制与按需加载策略，确保首屏加载速度。
视频源导入与管理
平台提供了三种灵活的视频源导入方式，确保用户能快速接入资源：
- 本地文件导入（📁）：支持 JSON 文件拖拽或选择，系统将自动校验格式。
- JSON 文本导入（📝）：支持直接粘贴配置，内置实时语法检查与多行格式化功能。
- URL 远程导入（🌐）：支持从 GitHub、Gitee 等平台直接获取配置地址。
JSON 配置规范
[
{
"id": "source1",
"name": "示例视频源",
"url": "https://api.example.com/search",
"detailUrl": "https://api.example.com/detail",
"isEnabled": true
}
]
字段定义：
name（必需）：视频源的显示名称。url（必需）：搜索 API 接口地址。id（可选）：唯一标识符，缺省时由系统自动生成。detailUrl（可选）：详情页 API 地址，默认与url一致。isEnabled（可选）：是否启用该资源源，默认为true。
支持形态：系统兼容单个对象 {...}、对象数组 [{...}] 以及紧凑型单行 JSON 格式。
导入流程与优化
操作步骤：设置页 $rightarrow$ 点击“导入源”$rightarrow$ 选择导入方式 $rightarrow$ 开始导入 $rightarrow$ 查看结果提示。
体验增强 ：系统在导入过程中会自动 过滤重复源 ，通过 Toast 通知 实时反馈进度，并提供详细的错误定位信息以确保数据准确性。
技术栈总结
- 核心框架：React + Vite + TypeScript
- 状态管理：Zustand
- 播放组件：xgplayer (HLS / MP4)
- 部署方案：推荐使用 Vercel 自动部署，实现快速上线与持续迭代。
正文完
