f7a8e3524c
- LeftPanel: 整合子组件，使用 useChannels/useGroups/useFavorites - BottomPanel: 使用 useUI 替代 props - VideoPlayer: 优化播放器逻辑 - DebugPanel: 移动到 Layout 目录 - InputPanel: 新增遥控输入组件 - useUI: 优化 UI 状态管理
🎬 IPTV Web 核心
基于 Vue 3 + Vite 的 IPTV 播放器，支持 iptv-api 格式数据源和 XMLTV EPG 节目单。
功能特性
| 功能 | 状态 | 说明 |
|---|---|---|
| 🎥 视频播放 | ✅ | HLS (m3u8) 支持，hls.js |
| 📡 IPTV 源 | ✅ | 支持 iptv-api TXT/M3U 格式 |
| 🔍 频道搜索 | ✅ | 实时搜索过滤 |
| 🗂️ 分组筛选 | ✅ | 按分组浏览频道 |
| ⭐ 收藏功能 | ✅ | LocalStorage 本地存储 |
| 🕐 播放历史 | ✅ | 最近 50 条 |
| 🔗 多源管理 | ✅ | 自动合并重复频道，切换源 |
| ⚡ 延迟检测 | ✅ | 在线检测，按延迟排序 |
| 📺 EPG 节目单 | ✅ | XMLTV 格式，2小时缓存 |
| ⚙️ 配置面板 | ✅ | 数据源、EPG、播放器设置 |
数据源格式
IPTV 源 (TXT 格式 - iptv-api 默认)
央视频道,#genre#
CCTV-1 综合,http://xxx
CCTV-2 财经,http://yyy
卫视频道,#genre#
湖南卫视,http://xxx
EPG 源 (XMLTV 格式)
<?xml version="1.0" encoding="UTF-8"?>
<tv>
<programme channel="1" start="20240204120000 +0800" stop="20240204130000 +0800">
<title>新闻30分</title>
<desc>午间新闻</desc>
<category>新闻</category>
</programme>
</tv>
快速开始
npm install
npm run dev
浏览器打开 http://localhost:5173
配置说明
点击右上角 ⚙️ 打开配置面板：
直播源
- Guovin/iptv-api: 默认 CDN 地址
- 本地文件:
public/api/result.txt（开发测试） - 自定义接口: 输入远程 API 地址
EPG 节目单
- 本地文件:
public/api/epg.xml（开发测试） - 自定义接口: 输入 XMLTV 格式 EPG 地址
- 自动缓存 2 小时，避免频繁请求
项目结构
web/
├── src/
│ ├── components/
│ │ ├── VideoPlayer.vue # 视频播放器
│ │ ├── EPGGuide.vue # EPG 节目单展示
│ │ ├── QuickAccess.vue # 收藏/历史快捷入口
│ │ ├── SourceSelector.vue # 多源选择器
│ │ └── ConfigPanel.vue # 配置面板
│ ├── stores/
│ │ └── useStore.js # 状态管理
│ ├── utils/
│ │ ├── m3uParser.js # M3U 解析
│ │ ├── txtParser.js # TXT 解析 (iptv-api)
│ │ ├── channelOptimizer.js # 频道去重、延迟检测
│ │ └── epgFetcher.js # EPG 获取和解析
│ ├── App.vue
│ └── main.js
├── public/
│ └── api/
│ ├── result.txt # 示例 IPTV 源
│ └── epg.xml # 示例 EPG 数据
└── package.json
核心功能实现
1. 频道去重与多源
// 合并相同频道的多个源
channels.value = mergeChannels(rawChannels.value)
// 结果: [{name: 'CCTV-1', sources: [{url: 'xxx'}, {url: 'yyy'}]}]
2. 延迟检测
// 并发检测 5 个源
await checkAllChannels(channels.value, 5, onProgress)
// 自动排序：在线的优先，按延迟从小到大
3. EPG 缓存
// 获取 EPG，带 2 小时缓存
const epgData = await fetchEPG('/api/epg.xml')
// 自动解析 XMLTV，按频道分组
下一步
- 🖥️ Tauri 桌面端 - Windows/Mac 可执行文件
- 📱 Android 套壳 - WebView + ExoPlayer
- 🔶 HarmonyOS 套壳 - Web 组件