个人影视站搭建利器：OuonnkiTV，多源导入与Vercel部署

OuonnkiTV概览

OuonnkiTV是一款利用React、Vite和TypeScript技术构建的前端应用，旨在聚合和播放网络视频资源。该项目在LibreSpark/LibreTV的基础上进行了重构和增强，提供了模块化架构、便捷的交互体验和稳定的状态管理。它支持跨端播放、记录观看历史、配置多个视频源，并可在Vercel上快速部署个人影视站。

适用人群

• 希望快速搭建个人影视站的站长
• 需要聚合多视频源并统一搜索/播放的开发者
• 关注前端性能优化与状态管理的学习者

在线演示：https://tv.ouonnki.site/

GitHub源码：https://github.com/Ouonnki/OuonnkiTV

OuonnkiTV核心特性

• 实时搜索提示：支持历史记录与联想建议，提高检索效率。
• 流畅播放体验：基于xgplayer，支持HLS/MP4格式。
• 清晰内容页：标题、封面、简介结构化展示。
• 自动历史追踪：观看与搜索历史自动保存，可一键清理。
• 多源批量导入：支持文件、JSON文本、URL三种方式导入视频源。
• 个性化设置：可配置主题与偏好。
• 性能优化策略：代码分割、缓存与按需加载，提升性能。
• 响应式适配：支持移动与桌面端自适应布局。
• 稳健状态管理：基于Zustand，数据结构清晰、维护成本低。

视频源导入与管理

支持的导入方式

• 本地文件导入（📁）：拖拽或选择JSON文件，自动校验格式。
• JSON文本导入（📝）：直接粘贴配置，提供实时语法检查与多行格式化。
• URL导入（🌐）：从远程地址获取配置，支持GitHub、Gitee等代码托管平台，并自动处理网络请求。

导入流程

1. 进入设置页（右上角设置图标）
2. 点击“导入源”
3. 按需选择：文件导入 / 文本导入 / URL导入
4. 点击“开始导入”
5. 查看结果提示：展示成功导入数量并自动关闭弹窗

导入体验优化

• 自动去重：重复源将被过滤。
• 数据验证：校验JSON格式和必需字段。
• 错误提示：提供可定位问题的详细信息。
• Toast通知：实时反馈导入进度与结果。
• 批量处理：一次导入多个视频源。

技术栈与性能

• 前端栈：React + Vite + TypeScript
• 播放器：xgplayer（HLS/MP4）
• 状态管理：Zustand
• 性能策略：代码分割、缓存命中与按需加载，配合响应式布局，带来更快的首屏与交互响应。

OuonnkiTV部署与演示

在线演示：https://tv.ouonnki.site/

GitHub源码：https://github.com/Ouonnki/OuonnkiTV

部署建议：支持在Vercel自动部署，适合个人快速上线与迭代。