Compare commits
No commits in common. "d85823cc8d33c9716d4e3dbd06e8b98e90a0b8d8" and "abdcd06ae4a0b5710af37ce92527803efb2db829" have entirely different histories.
d85823cc8d
...
abdcd06ae4
10
.gitignore
vendored
10
.gitignore
vendored
@ -68,6 +68,13 @@ android-tv/app/src/main/assets/www/
|
|||||||
!android-tv/app/src/main/assets/error.html
|
!android-tv/app/src/main/assets/error.html
|
||||||
!android-tv/app/src/main/assets/test.html
|
!android-tv/app/src/main/assets/test.html
|
||||||
|
|
||||||
|
# ================================================
|
||||||
|
# HarmonyOS
|
||||||
|
# ================================================
|
||||||
|
harmonyos/.idea/
|
||||||
|
harmonyos/build/
|
||||||
|
harmonyos/entry/build/
|
||||||
|
|
||||||
# ================================================
|
# ================================================
|
||||||
# Docker
|
# Docker
|
||||||
# ================================================
|
# ================================================
|
||||||
@ -90,8 +97,11 @@ lerna-debug.log*
|
|||||||
# ================================================
|
# ================================================
|
||||||
# Environment
|
# Environment
|
||||||
# ================================================
|
# ================================================
|
||||||
|
.env
|
||||||
.env.local
|
.env.local
|
||||||
.env.*.local
|
.env.*.local
|
||||||
|
.env.development
|
||||||
|
.env.test
|
||||||
|
|
||||||
# ================================================
|
# ================================================
|
||||||
# Testing
|
# Testing
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
# 📺 IPTV 跨平台应用
|
# 📺 IPTV 跨平台应用
|
||||||
|
|
||||||
基于 Web 技术的跨平台 IPTV 播放器，一套代码支持 Windows、Mac、Android、Android TV、Web。
|
基于 Web 技术的跨平台 IPTV 播放器，一套代码支持 Windows、Mac、Android、Android TV、HarmonyOS。
|
||||||
|
|
||||||
## 项目结构
|
## 项目结构
|
||||||
|
|
||||||
@ -17,7 +17,7 @@ iptv-app/
|
|||||||
├── desktop/ # 🖥️ Tauri 桌面端 (Win/Mac)
|
├── desktop/ # 🖥️ Tauri 桌面端 (Win/Mac)
|
||||||
├── android/ # 📱 Android WebView 壳
|
├── android/ # 📱 Android WebView 壳
|
||||||
├── android-tv/ # 📺 Android TV WebView 壳
|
├── android-tv/ # 📺 Android TV WebView 壳
|
||||||
└── web/ # 🐳 Docker Web 服务端
|
└── harmonyos/ # 🔶 HarmonyOS WebView 壳
|
||||||
```
|
```
|
||||||
|
|
||||||
## 技术栈
|
## 技术栈
|
||||||
@ -29,7 +29,7 @@ iptv-app/
|
|||||||
| Desktop | Tauri (Rust) | 轻量 (~5MB)，高性能 |
|
| Desktop | Tauri (Rust) | 轻量 (~5MB)，高性能 |
|
||||||
| Android | WebView + ExoPlayer | 手机/平板 Web 壳 |
|
| Android | WebView + ExoPlayer | 手机/平板 Web 壳 |
|
||||||
| Android TV | WebView + Leanback | TV 专用，支持遥控器导航 |
|
| Android TV | WebView + Leanback | TV 专用，支持遥控器导航 |
|
||||||
| Web | Node.js + Docker | 网页端 + 代理服务 |
|
| HarmonyOS | Web 组件 + Video 组件 | Web 壳 + 原生播放器 |
|
||||||
|
|
||||||
## 快速开始
|
## 快速开始
|
||||||
|
|
||||||
|
|||||||
22
TODO.md
22
TODO.md
@ -1,22 +0,0 @@
|
|||||||
# TODO 列表
|
|
||||||
|
|
||||||
## 高优先级
|
|
||||||
|
|
||||||
- [x] 多平台打包配置
|
|
||||||
- [x] Storage API 抽象层
|
|
||||||
- [x] UI 布局改造（四栏布局）
|
|
||||||
- [x] 频道加载与测速排序
|
|
||||||
- [x] 播放控制（自动选线、失败重试）
|
|
||||||
- [x] 缓存管理（清除功能）
|
|
||||||
|
|
||||||
## 中优先级
|
|
||||||
|
|
||||||
- [ ] 最近播放逻辑完善（数据持久化）
|
|
||||||
- [ ] 收藏功能完善（实时更新收藏状态）
|
|
||||||
- [ ] EPG 节目单数据获取与解析
|
|
||||||
|
|
||||||
## 低优先级（后排）
|
|
||||||
|
|
||||||
- [ ] TV 遥控器导航（四栏之间方向键移动焦点）
|
|
||||||
- [ ] 时移播放（回看功能）
|
|
||||||
- [ ] 搜索功能（Web/Desktop）
|
|
||||||
@ -1,7 +1,6 @@
|
|||||||
package com.iptv.tv;
|
package com.iptv.tv;
|
||||||
|
|
||||||
import android.content.Context;
|
import android.content.Context;
|
||||||
import android.content.SharedPreferences;
|
|
||||||
import android.webkit.JavascriptInterface;
|
import android.webkit.JavascriptInterface;
|
||||||
import java.io.BufferedReader;
|
import java.io.BufferedReader;
|
||||||
import java.io.IOException;
|
import java.io.IOException;
|
||||||
@ -10,12 +9,9 @@ import java.io.InputStreamReader;
|
|||||||
|
|
||||||
public class AssetReader {
|
public class AssetReader {
|
||||||
private Context context;
|
private Context context;
|
||||||
private SharedPreferences prefs;
|
|
||||||
private static final String PREFS_NAME = "IPTVData";
|
|
||||||
|
|
||||||
public AssetReader(Context context) {
|
public AssetReader(Context context) {
|
||||||
this.context = context;
|
this.context = context;
|
||||||
this.prefs = context.getSharedPreferences(PREFS_NAME, Context.MODE_PRIVATE);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@JavascriptInterface
|
@JavascriptInterface
|
||||||
@ -49,31 +45,4 @@ public class AssetReader {
|
|||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// SharedPreferences 存储接口
|
|
||||||
@JavascriptInterface
|
|
||||||
public String getItem(String key) {
|
|
||||||
return prefs.getString(key, null);
|
|
||||||
}
|
|
||||||
|
|
||||||
@JavascriptInterface
|
|
||||||
public void setItem(String key, String value) {
|
|
||||||
SharedPreferences.Editor editor = prefs.edit();
|
|
||||||
editor.putString(key, value);
|
|
||||||
editor.apply();
|
|
||||||
}
|
|
||||||
|
|
||||||
@JavascriptInterface
|
|
||||||
public void removeItem(String key) {
|
|
||||||
SharedPreferences.Editor editor = prefs.edit();
|
|
||||||
editor.remove(key);
|
|
||||||
editor.apply();
|
|
||||||
}
|
|
||||||
|
|
||||||
@JavascriptInterface
|
|
||||||
public void clear() {
|
|
||||||
SharedPreferences.Editor editor = prefs.edit();
|
|
||||||
editor.clear();
|
|
||||||
editor.apply();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -7,16 +7,16 @@ set -e
|
|||||||
echo "=== IPTV Android TV 构建 ==="
|
echo "=== IPTV Android TV 构建 ==="
|
||||||
|
|
||||||
# 检查 UI 构建产物
|
# 检查 UI 构建产物
|
||||||
if [ ! -d "../ui/dist/tv" ]; then
|
if [ ! -d "../ui/dist-web" ]; then
|
||||||
echo "错误: 未找到 ../ui/dist/tv 目录"
|
echo "错误: 未找到 ../ui/dist-web 目录"
|
||||||
echo "请先构建 Web UI: cd ../ui && npm run build:tv"
|
echo "请先构建 Web UI: cd ../ui && npm run build"
|
||||||
exit 1
|
exit 1
|
||||||
fi
|
fi
|
||||||
|
|
||||||
# 复制 Web 资源到 Android assets
|
# 复制 Web 资源到 Android assets
|
||||||
echo "复制 Web 资源..."
|
echo "复制 Web 资源..."
|
||||||
mkdir -p app/src/main/assets/www
|
mkdir -p app/src/main/assets/www
|
||||||
cp -r ../ui/dist/tv/* app/src/main/assets/www/
|
cp -r ../ui/dist-web/* app/src/main/assets/www/
|
||||||
|
|
||||||
# 统计文件
|
# 统计文件
|
||||||
echo "已复制文件数量:"
|
echo "已复制文件数量:"
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
package com.iptv.app;
|
package com.iptv.app;
|
||||||
|
|
||||||
import android.content.Context;
|
import android.content.Context;
|
||||||
import android.content.SharedPreferences;
|
|
||||||
import android.webkit.JavascriptInterface;
|
import android.webkit.JavascriptInterface;
|
||||||
import java.io.BufferedReader;
|
import java.io.BufferedReader;
|
||||||
import java.io.IOException;
|
import java.io.IOException;
|
||||||
@ -10,17 +9,15 @@ import java.io.InputStreamReader;
|
|||||||
|
|
||||||
public class AssetReader {
|
public class AssetReader {
|
||||||
private Context context;
|
private Context context;
|
||||||
private SharedPreferences prefs;
|
|
||||||
private static final String PREFS_NAME = "IPTVData";
|
|
||||||
|
|
||||||
public AssetReader(Context context) {
|
public AssetReader(Context context) {
|
||||||
this.context = context;
|
this.context = context;
|
||||||
this.prefs = context.getSharedPreferences(PREFS_NAME, Context.MODE_PRIVATE);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@JavascriptInterface
|
@JavascriptInterface
|
||||||
public String readFile(String path) {
|
public String readFile(String path) {
|
||||||
try {
|
try {
|
||||||
|
// path 如: "www/api/result.txt"
|
||||||
InputStream is = context.getAssets().open(path);
|
InputStream is = context.getAssets().open(path);
|
||||||
BufferedReader reader = new BufferedReader(new InputStreamReader(is));
|
BufferedReader reader = new BufferedReader(new InputStreamReader(is));
|
||||||
StringBuilder sb = new StringBuilder();
|
StringBuilder sb = new StringBuilder();
|
||||||
@ -49,31 +46,4 @@ public class AssetReader {
|
|||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// SharedPreferences 存储接口
|
|
||||||
@JavascriptInterface
|
|
||||||
public String getItem(String key) {
|
|
||||||
return prefs.getString(key, null);
|
|
||||||
}
|
|
||||||
|
|
||||||
@JavascriptInterface
|
|
||||||
public void setItem(String key, String value) {
|
|
||||||
SharedPreferences.Editor editor = prefs.edit();
|
|
||||||
editor.putString(key, value);
|
|
||||||
editor.apply();
|
|
||||||
}
|
|
||||||
|
|
||||||
@JavascriptInterface
|
|
||||||
public void removeItem(String key) {
|
|
||||||
SharedPreferences.Editor editor = prefs.edit();
|
|
||||||
editor.remove(key);
|
|
||||||
editor.apply();
|
|
||||||
}
|
|
||||||
|
|
||||||
@JavascriptInterface
|
|
||||||
public void clear() {
|
|
||||||
SharedPreferences.Editor editor = prefs.edit();
|
|
||||||
editor.clear();
|
|
||||||
editor.apply();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -7,16 +7,16 @@ set -e
|
|||||||
echo "=== IPTV Android 构建 ==="
|
echo "=== IPTV Android 构建 ==="
|
||||||
|
|
||||||
# 检查 UI 构建产物
|
# 检查 UI 构建产物
|
||||||
if [ ! -d "../ui/dist/android" ]; then
|
if [ ! -d "../ui/dist-web" ]; then
|
||||||
echo "错误: 未找到 ../ui/dist/android 目录"
|
echo "错误: 未找到 ../ui/dist-web 目录"
|
||||||
echo "请先构建 Web UI: cd ../ui && npm run build:android"
|
echo "请先构建 Web UI: cd ../ui && npm run build"
|
||||||
exit 1
|
exit 1
|
||||||
fi
|
fi
|
||||||
|
|
||||||
# 复制 Web 资源到 Android assets
|
# 复制 Web 资源到 Android assets
|
||||||
echo "复制 Web 资源..."
|
echo "复制 Web 资源..."
|
||||||
mkdir -p app/src/main/assets/www
|
mkdir -p app/src/main/assets/www
|
||||||
cp -r ../ui/dist/android/* app/src/main/assets/www/
|
cp -r ../ui/dist-web/* app/src/main/assets/www/
|
||||||
|
|
||||||
# 统计文件
|
# 统计文件
|
||||||
echo "已复制文件数量:"
|
echo "已复制文件数量:"
|
||||||
|
|||||||
@ -17,8 +17,8 @@ echo "✓ Rust 已安装 ($(cargo --version))"
|
|||||||
echo "📦 步骤 1/4: 构建 ui 应用..."
|
echo "📦 步骤 1/4: 构建 ui 应用..."
|
||||||
cd ui
|
cd ui
|
||||||
npm install
|
npm install
|
||||||
npm run build:desktop
|
npm run build
|
||||||
cp -r public/api dist/desktop/
|
cp -r public/api dist-web/
|
||||||
cd ..
|
cd ..
|
||||||
|
|
||||||
# 步骤2: 安装 Tauri 依赖
|
# 步骤2: 安装 Tauri 依赖
|
||||||
|
|||||||
@ -2,8 +2,8 @@
|
|||||||
"build": {
|
"build": {
|
||||||
"beforeBuildCommand": "",
|
"beforeBuildCommand": "",
|
||||||
"beforeDevCommand": "",
|
"beforeDevCommand": "",
|
||||||
"devPath": "../../ui/dist/desktop",
|
"devPath": "../../ui/dist-web",
|
||||||
"distDir": "../../ui/dist/desktop",
|
"distDir": "../../ui/dist-web",
|
||||||
"withGlobalTauri": false
|
"withGlobalTauri": false
|
||||||
},
|
},
|
||||||
"tauri": {
|
"tauri": {
|
||||||
|
|||||||
@ -1,4 +0,0 @@
|
|||||||
VITE_PLATFORM=android
|
|
||||||
VITE_API_BASE=/api
|
|
||||||
VITE_STORAGE_TYPE=android
|
|
||||||
VITE_ANDROID_ASSET=true
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
VITE_PLATFORM=desktop
|
|
||||||
VITE_API_BASE=/api
|
|
||||||
VITE_STORAGE_TYPE=indexeddb
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
VITE_PLATFORM=tv
|
|
||||||
VITE_API_BASE=/api
|
|
||||||
VITE_STORAGE_TYPE=android
|
|
||||||
VITE_ANDROID_ASSET=true
|
|
||||||
VITE_TV_MODE=true
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
VITE_PLATFORM=web
|
|
||||||
VITE_API_BASE=/api
|
|
||||||
VITE_STORAGE_TYPE=indexeddb
|
|
||||||
11
ui/package-lock.json
generated
11
ui/package-lock.json
generated
@ -10,7 +10,6 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@vueuse/core": "^14.2.0",
|
"@vueuse/core": "^14.2.0",
|
||||||
"hls.js": "^1.5.0",
|
"hls.js": "^1.5.0",
|
||||||
"idb": "^8.0.3",
|
|
||||||
"pinia": "^3.0.4",
|
"pinia": "^3.0.4",
|
||||||
"vue": "^3.4.0",
|
"vue": "^3.4.0",
|
||||||
"vue-router": "^4.2.0"
|
"vue-router": "^4.2.0"
|
||||||
@ -352,11 +351,6 @@
|
|||||||
"resolved": "https://registry.npmmirror.com/hookable/-/hookable-5.5.3.tgz",
|
"resolved": "https://registry.npmmirror.com/hookable/-/hookable-5.5.3.tgz",
|
||||||
"integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ=="
|
"integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ=="
|
||||||
},
|
},
|
||||||
"node_modules/idb": {
|
|
||||||
"version": "8.0.3",
|
|
||||||
"resolved": "https://registry.npmmirror.com/idb/-/idb-8.0.3.tgz",
|
|
||||||
"integrity": "sha512-LtwtVyVYO5BqRvcsKuB2iUMnHwPVByPCXFXOpuU96IZPPoPN6xjOGxZQ74pgSVVLQWtUOYgyeL4GE98BY5D3wg=="
|
|
||||||
},
|
|
||||||
"node_modules/is-what": {
|
"node_modules/is-what": {
|
||||||
"version": "5.5.0",
|
"version": "5.5.0",
|
||||||
"resolved": "https://registry.npmmirror.com/is-what/-/is-what-5.5.0.tgz",
|
"resolved": "https://registry.npmmirror.com/is-what/-/is-what-5.5.0.tgz",
|
||||||
@ -851,11 +845,6 @@
|
|||||||
"resolved": "https://registry.npmmirror.com/hookable/-/hookable-5.5.3.tgz",
|
"resolved": "https://registry.npmmirror.com/hookable/-/hookable-5.5.3.tgz",
|
||||||
"integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ=="
|
"integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ=="
|
||||||
},
|
},
|
||||||
"idb": {
|
|
||||||
"version": "8.0.3",
|
|
||||||
"resolved": "https://registry.npmmirror.com/idb/-/idb-8.0.3.tgz",
|
|
||||||
"integrity": "sha512-LtwtVyVYO5BqRvcsKuB2iUMnHwPVByPCXFXOpuU96IZPPoPN6xjOGxZQ74pgSVVLQWtUOYgyeL4GE98BY5D3wg=="
|
|
||||||
},
|
|
||||||
"is-what": {
|
"is-what": {
|
||||||
"version": "5.5.0",
|
"version": "5.5.0",
|
||||||
"resolved": "https://registry.npmmirror.com/is-what/-/is-what-5.5.0.tgz",
|
"resolved": "https://registry.npmmirror.com/is-what/-/is-what-5.5.0.tgz",
|
||||||
|
|||||||
@ -4,17 +4,12 @@
|
|||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "vite build --mode production",
|
"build": "vite build",
|
||||||
"build:web": "vite build --mode web",
|
|
||||||
"build:desktop": "vite build --mode desktop",
|
|
||||||
"build:android": "vite build --mode android",
|
|
||||||
"build:tv": "vite build --mode tv",
|
|
||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@vueuse/core": "^14.2.0",
|
"@vueuse/core": "^14.2.0",
|
||||||
"hls.js": "^1.5.0",
|
"hls.js": "^1.5.0",
|
||||||
"idb": "^8.0.3",
|
|
||||||
"pinia": "^3.0.4",
|
"pinia": "^3.0.4",
|
||||||
"vue": "^3.4.0",
|
"vue": "^3.4.0",
|
||||||
"vue-router": "^4.2.0"
|
"vue-router": "^4.2.0"
|
||||||
|
|||||||
1520
ui/src/App.vue
1520
ui/src/App.vue
File diff suppressed because it is too large
Load Diff
@ -1,43 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="debug-panel">
|
|
||||||
<div class="debug-header">
|
|
||||||
<span>调试信息</span>
|
|
||||||
<button @click="$emit('close')">×</button>
|
|
||||||
</div>
|
|
||||||
<div class="debug-content">
|
|
||||||
<p>调试功能开发中...</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.debug-panel {
|
|
||||||
position: fixed;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
background: #1a1a1a;
|
|
||||||
border: 2px solid #ff6b6b;
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 16px;
|
|
||||||
z-index: 9999;
|
|
||||||
min-width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.debug-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.debug-header button {
|
|
||||||
background: #333;
|
|
||||||
border: none;
|
|
||||||
color: #fff;
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
border-radius: 50%;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,273 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Transition name="slide-up">
|
|
||||||
<div
|
|
||||||
v-show="visible"
|
|
||||||
class="bottom-panel"
|
|
||||||
@mouseenter="onInteraction"
|
|
||||||
@mousemove="onInteraction"
|
|
||||||
>
|
|
||||||
<!-- 左侧：频道信息 -->
|
|
||||||
<div class="panel-left">
|
|
||||||
<div class="channel-logo">
|
|
||||||
{{ getChannelLogo(channel?.name) }}
|
|
||||||
</div>
|
|
||||||
<div class="channel-info">
|
|
||||||
<div class="channel-name-row">
|
|
||||||
<span class="name">{{ channel?.name || '未选择频道' }}</span>
|
|
||||||
<span class="source-tag">线路 {{ currentSourceIndex + 1 }}/{{ channel?.urls?.length || 0 }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="program-info">
|
|
||||||
<span class="live-dot">●</span>
|
|
||||||
<span class="program-title">{{ currentProgram || '精彩节目' }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="progress-bar">
|
|
||||||
<div class="progress-fill" :style="{ width: progress + '%' }"></div>
|
|
||||||
<span class="time-label">{{ currentTime }} / {{ totalTime }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 右侧：操作按钮 -->
|
|
||||||
<div class="panel-right">
|
|
||||||
<button
|
|
||||||
class="action-btn"
|
|
||||||
:class="{ active: isFavorite }"
|
|
||||||
@click="handleFavorite"
|
|
||||||
@mouseenter="onInteraction"
|
|
||||||
>
|
|
||||||
<span class="icon">★</span>
|
|
||||||
<span>{{ isFavorite ? '已收藏' : '收藏' }}</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="action-btn"
|
|
||||||
@click="handleSwitchSource"
|
|
||||||
@mouseenter="onInteraction"
|
|
||||||
>
|
|
||||||
<span class="icon">↻</span>
|
|
||||||
<span>切换线路</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="action-btn"
|
|
||||||
@click="handleSettings"
|
|
||||||
@mouseenter="onInteraction"
|
|
||||||
>
|
|
||||||
<span class="icon">⚙</span>
|
|
||||||
<span>设置</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Transition>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
const props = defineProps({
|
|
||||||
visible: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
channel: {
|
|
||||||
type: Object,
|
|
||||||
default: null
|
|
||||||
},
|
|
||||||
currentSourceIndex: {
|
|
||||||
type: Number,
|
|
||||||
default: 0
|
|
||||||
},
|
|
||||||
currentProgram: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
progress: {
|
|
||||||
type: Number,
|
|
||||||
default: 0
|
|
||||||
},
|
|
||||||
currentTime: {
|
|
||||||
type: String,
|
|
||||||
default: '--:--'
|
|
||||||
},
|
|
||||||
totalTime: {
|
|
||||||
type: String,
|
|
||||||
default: '--:--'
|
|
||||||
},
|
|
||||||
isFavorite: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const emit = defineEmits(['favorite', 'switch-source', 'settings', 'interaction']);
|
|
||||||
|
|
||||||
// 获取频道 LOGO
|
|
||||||
function getChannelLogo(name) {
|
|
||||||
return name ? name.slice(0, 2) : '--';
|
|
||||||
}
|
|
||||||
|
|
||||||
// 交互时触发防抖重置
|
|
||||||
function onInteraction() {
|
|
||||||
emit('interaction');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 收藏
|
|
||||||
function handleFavorite() {
|
|
||||||
emit('favorite');
|
|
||||||
onInteraction();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 切换线路
|
|
||||||
function handleSwitchSource() {
|
|
||||||
emit('switch-source');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 设置
|
|
||||||
function handleSettings() {
|
|
||||||
emit('settings');
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.bottom-panel {
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
height: 80px;
|
|
||||||
background: rgba(0, 0, 0, 0.85);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0 20px;
|
|
||||||
z-index: 50;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 左侧信息 */
|
|
||||||
.panel-left {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-logo {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
border-radius: 8px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: rgba(255, 255, 255, 0.8);
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-info {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-name-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-name-row .name {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.source-tag {
|
|
||||||
font-size: 11px;
|
|
||||||
color: rgba(255, 255, 255, 0.6);
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
padding: 2px 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.program-info {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
font-size: 13px;
|
|
||||||
color: rgba(255, 255, 255, 0.7);
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.live-dot {
|
|
||||||
color: #ff4444;
|
|
||||||
font-size: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar {
|
|
||||||
height: 3px;
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
border-radius: 2px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-fill {
|
|
||||||
height: 100%;
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 2px;
|
|
||||||
transition: width 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.time-label {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: -16px;
|
|
||||||
font-size: 11px;
|
|
||||||
color: rgba(255, 255, 255, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 右侧按钮 */
|
|
||||||
.panel-right {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
padding: 8px 16px;
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
color: rgba(255, 255, 255, 0.7);
|
|
||||||
font-size: 13px;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 6px;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn.active {
|
|
||||||
color: #ffd700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn .icon {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 滑入动画 */
|
|
||||||
.slide-up-enter-active,
|
|
||||||
.slide-up-leave-active {
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-up-enter-from,
|
|
||||||
.slide-up-leave-to {
|
|
||||||
transform: translateY(100%);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,160 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
class="channel-list"
|
|
||||||
:class="{ 'is-active': isActive }"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-for="channel in channels"
|
|
||||||
:key="channel.id"
|
|
||||||
class="channel-item"
|
|
||||||
:class="{ active: modelValue?.id === channel.id }"
|
|
||||||
@click="selectChannel(channel)"
|
|
||||||
>
|
|
||||||
<div class="channel-logo">
|
|
||||||
{{ getChannelLogo(channel.name) }}
|
|
||||||
</div>
|
|
||||||
<div class="channel-info">
|
|
||||||
<div class="channel-name">{{ channel.name }}</div>
|
|
||||||
<div class="channel-meta">
|
|
||||||
<span class="source-count">
|
|
||||||
{{ getValidCount(channel) }}/{{ channel.urls?.length || 0 }}线路
|
|
||||||
</span>
|
|
||||||
<span v-if="isFavorite(channel.id)" class="favorite-icon">★</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { computed } from 'vue';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
modelValue: {
|
|
||||||
type: Object,
|
|
||||||
default: null
|
|
||||||
},
|
|
||||||
channels: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
isActive: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
favorites: {
|
|
||||||
type: Set,
|
|
||||||
default: () => new Set()
|
|
||||||
},
|
|
||||||
validityMap: {
|
|
||||||
type: Map,
|
|
||||||
default: () => new Map()
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const emit = defineEmits(['update:modelValue', 'select']);
|
|
||||||
|
|
||||||
const platform = import.meta.env.VITE_PLATFORM || 'web';
|
|
||||||
const isTV = platform === 'tv';
|
|
||||||
|
|
||||||
// 获取频道 LOGO（取前两个字符）
|
|
||||||
function getChannelLogo(name) {
|
|
||||||
return name.slice(0, 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 检查是否收藏
|
|
||||||
function isFavorite(channelId) {
|
|
||||||
return props.favorites.has(channelId);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取有效线路数
|
|
||||||
function getValidCount(channel) {
|
|
||||||
if (!channel.urls) return 0;
|
|
||||||
return channel.urls.filter(url => {
|
|
||||||
const validity = props.validityMap.get(url);
|
|
||||||
return validity && validity.status === 'online';
|
|
||||||
}).length;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 选择频道
|
|
||||||
function selectChannel(channel) {
|
|
||||||
emit('update:modelValue', channel);
|
|
||||||
emit('select', channel);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.channel-list {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow-y: auto;
|
|
||||||
background: rgba(0, 0, 0, 0.85);
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
padding: 12px;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-item:hover,
|
|
||||||
.channel-item.active {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-item.active {
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-logo {
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
border-radius: 8px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 12px;
|
|
||||||
color: rgba(255, 255, 255, 0.8);
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-info {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-name {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #fff;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-meta {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
font-size: 12px;
|
|
||||||
color: rgba(255, 255, 255, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.favorite-icon {
|
|
||||||
color: #ffd700;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* TV 模式焦点样式 */
|
|
||||||
.is-active .channel-item:focus {
|
|
||||||
outline: 2px solid #fff;
|
|
||||||
outline-offset: -2px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,108 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
class="date-list"
|
|
||||||
:class="{ 'is-active': isActive }"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-for="date in dates"
|
|
||||||
:key="date.value"
|
|
||||||
class="date-item"
|
|
||||||
:class="{ active: modelValue === date.value }"
|
|
||||||
@click="selectDate(date.value)"
|
|
||||||
>
|
|
||||||
<div class="date-day">{{ date.day }}</div>
|
|
||||||
<div class="date-label">{{ date.label }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { computed } from 'vue';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
modelValue: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
isActive: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const emit = defineEmits(['update:modelValue', 'select']);
|
|
||||||
|
|
||||||
// 生成日期列表（今天、明天、后天...）
|
|
||||||
const dates = computed(() => {
|
|
||||||
const list = [];
|
|
||||||
const today = new Date();
|
|
||||||
const labels = ['今天', '明天', '后天'];
|
|
||||||
|
|
||||||
for (let i = 0; i < 7; i++) {
|
|
||||||
const date = new Date(today);
|
|
||||||
date.setDate(today.getDate() + i);
|
|
||||||
|
|
||||||
const value = date.toISOString().split('T')[0];
|
|
||||||
const day = `${date.getMonth() + 1}/${date.getDate()}`;
|
|
||||||
const label = i < 3 ? labels[i] : `${date.getMonth() + 1}月${date.getDate()}日`;
|
|
||||||
|
|
||||||
list.push({ value, day, label });
|
|
||||||
}
|
|
||||||
|
|
||||||
return list;
|
|
||||||
});
|
|
||||||
|
|
||||||
// 选择日期
|
|
||||||
function selectDate(dateValue) {
|
|
||||||
emit('update:modelValue', dateValue);
|
|
||||||
emit('select', dateValue);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.date-list {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow-y: auto;
|
|
||||||
background: rgba(0, 0, 0, 0.8);
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
padding: 16px 8px;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-item:hover,
|
|
||||||
.date-item.active {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-item.active {
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-day {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-label {
|
|
||||||
font-size: 12px;
|
|
||||||
color: rgba(255, 255, 255, 0.6);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* TV 模式焦点样式 */
|
|
||||||
.is-active .date-item:focus {
|
|
||||||
outline: 2px solid #fff;
|
|
||||||
outline-offset: -2px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,169 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
class="group-list"
|
|
||||||
:class="{ 'is-active': isActive }"
|
|
||||||
>
|
|
||||||
<!-- 置顶分组 -->
|
|
||||||
<div class="group-section pinned">
|
|
||||||
<div
|
|
||||||
v-for="group in pinnedGroups"
|
|
||||||
:key="group.id"
|
|
||||||
class="group-item"
|
|
||||||
:class="{ active: modelValue === group.id }"
|
|
||||||
@click="selectGroup(group.id)"
|
|
||||||
>
|
|
||||||
<span class="group-icon">{{ group.icon }}</span>
|
|
||||||
<div class="group-info">
|
|
||||||
<span class="group-name">{{ group.name }}</span>
|
|
||||||
<span class="group-count">{{ group.count }}个</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 分隔线 -->
|
|
||||||
<div class="divider"></div>
|
|
||||||
|
|
||||||
<!-- 普通分组 -->
|
|
||||||
<div class="group-section normal">
|
|
||||||
<div
|
|
||||||
v-for="group in normalGroups"
|
|
||||||
:key="group.id"
|
|
||||||
class="group-item"
|
|
||||||
:class="{ active: modelValue === group.id }"
|
|
||||||
@click="selectGroup(group.id)"
|
|
||||||
>
|
|
||||||
<span class="group-icon">{{ group.icon }}</span>
|
|
||||||
<div class="group-info">
|
|
||||||
<span class="group-name">{{ group.name }}</span>
|
|
||||||
<span class="group-count">{{ group.count }}个</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { computed } from 'vue';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
modelValue: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
groups: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
isActive: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const emit = defineEmits(['update:modelValue', 'select']);
|
|
||||||
|
|
||||||
// 置顶分组
|
|
||||||
const pinnedGroups = computed(() => {
|
|
||||||
return [
|
|
||||||
{ id: 'recent', name: '最近播放', icon: '⏱', count: 0 }, // TODO: 实际数量
|
|
||||||
{ id: 'favorite', name: '收藏', icon: '❤️', count: 0 }, // TODO: 实际数量
|
|
||||||
];
|
|
||||||
});
|
|
||||||
|
|
||||||
// 普通分组
|
|
||||||
const normalGroups = computed(() => {
|
|
||||||
return props.groups.map(group => ({
|
|
||||||
id: group,
|
|
||||||
name: group,
|
|
||||||
icon: getGroupIcon(group),
|
|
||||||
count: 0 // TODO: 实际数量
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
|
|
||||||
// 获取分组图标
|
|
||||||
function getGroupIcon(groupName) {
|
|
||||||
if (groupName.includes('央视')) return '📺';
|
|
||||||
if (groupName.includes('卫视')) return '📡';
|
|
||||||
if (groupName.includes('体育')) return '⚽';
|
|
||||||
if (groupName.includes('电影')) return '🎬';
|
|
||||||
if (groupName.includes('少儿')) return '👶';
|
|
||||||
return '📺';
|
|
||||||
}
|
|
||||||
|
|
||||||
// 选择分组
|
|
||||||
function selectGroup(groupId) {
|
|
||||||
emit('update:modelValue', groupId);
|
|
||||||
emit('select', groupId);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.group-list {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow-y: auto;
|
|
||||||
background: rgba(0, 0, 0, 0.9);
|
|
||||||
padding: 8px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.group-section {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
padding: 0 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.divider {
|
|
||||||
height: 1px;
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
margin: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.group-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
padding: 12px;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.group-item:hover,
|
|
||||||
.group-item.active {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.group-item.active {
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.group-icon {
|
|
||||||
font-size: 20px;
|
|
||||||
width: 24px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.group-info {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.group-name {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.group-count {
|
|
||||||
font-size: 12px;
|
|
||||||
color: rgba(255, 255, 255, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* TV 模式焦点样式 */
|
|
||||||
.is-active .group-item:focus {
|
|
||||||
outline: 2px solid #fff;
|
|
||||||
outline-offset: -2px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,237 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Transition name="slide-left">
|
|
||||||
<div
|
|
||||||
v-show="visible"
|
|
||||||
class="left-panel"
|
|
||||||
:class="{ 'tv-mode': isTV }"
|
|
||||||
>
|
|
||||||
<!-- 第一栏：分组列表 -->
|
|
||||||
<div
|
|
||||||
class="column column-1"
|
|
||||||
:class="{ active: activeColumn === 0 }"
|
|
||||||
>
|
|
||||||
<GroupList
|
|
||||||
v-model="selectedGroup"
|
|
||||||
:groups="groups"
|
|
||||||
:is-active="activeColumn === 0"
|
|
||||||
@select="onGroupSelect"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 第二栏：频道列表 -->
|
|
||||||
<div
|
|
||||||
class="column column-2"
|
|
||||||
:class="{ active: activeColumn === 1 }"
|
|
||||||
>
|
|
||||||
<ChannelList
|
|
||||||
v-model="selectedChannel"
|
|
||||||
:channels="filteredChannels"
|
|
||||||
:is-active="activeColumn === 1"
|
|
||||||
:favorites="favorites"
|
|
||||||
:validity-map="validityMap"
|
|
||||||
@select="onChannelSelect"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 第三栏：日期列表 -->
|
|
||||||
<div
|
|
||||||
class="column column-3"
|
|
||||||
:class="{ active: activeColumn === 2 }"
|
|
||||||
>
|
|
||||||
<DateList
|
|
||||||
v-model="selectedDate"
|
|
||||||
:is-active="activeColumn === 2"
|
|
||||||
@select="onDateSelect"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 第四栏：节目单列表 -->
|
|
||||||
<div
|
|
||||||
class="column column-4"
|
|
||||||
:class="{ active: activeColumn === 3 }"
|
|
||||||
>
|
|
||||||
<ProgramList
|
|
||||||
v-model="selectedProgram"
|
|
||||||
:programs="programs"
|
|
||||||
:is-active="activeColumn === 3"
|
|
||||||
@select="onProgramSelect"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Transition>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, computed, watch } from 'vue';
|
|
||||||
import GroupList from './GroupList.vue';
|
|
||||||
import ChannelList from './ChannelList.vue';
|
|
||||||
import DateList from './DateList.vue';
|
|
||||||
import ProgramList from './ProgramList.vue';
|
|
||||||
import { useUI } from '../../composables/useUI.js';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
visible: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
channels: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
groups: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
currentChannel: {
|
|
||||||
type: Object,
|
|
||||||
default: null
|
|
||||||
},
|
|
||||||
favorites: {
|
|
||||||
type: Set,
|
|
||||||
default: () => new Set()
|
|
||||||
},
|
|
||||||
validityMap: {
|
|
||||||
type: Map,
|
|
||||||
default: () => new Map()
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const emit = defineEmits(['close', 'play', 'lookback']);
|
|
||||||
|
|
||||||
const { isTV, currentActiveColumn, moveColumn } = useUI();
|
|
||||||
const activeColumn = computed(() => currentActiveColumn.value);
|
|
||||||
|
|
||||||
// 选中的状态
|
|
||||||
const selectedGroup = ref('');
|
|
||||||
const selectedChannel = ref(null);
|
|
||||||
const selectedDate = ref('');
|
|
||||||
const selectedProgram = ref(null);
|
|
||||||
|
|
||||||
// 过滤后的频道
|
|
||||||
const filteredChannels = computed(() => {
|
|
||||||
if (!selectedGroup.value) return props.channels;
|
|
||||||
|
|
||||||
// 置顶分组特殊处理
|
|
||||||
if (selectedGroup.value === 'recent') {
|
|
||||||
// TODO: 返回最近播放
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
if (selectedGroup.value === 'favorite') {
|
|
||||||
// TODO: 返回收藏
|
|
||||||
return props.channels.filter(c => props.favorites.has(c.id));
|
|
||||||
}
|
|
||||||
|
|
||||||
return props.channels.filter(c => c.group === selectedGroup.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
// 节目单数据（TODO: 实际从 EPG 获取）
|
|
||||||
const programs = ref([
|
|
||||||
{ id: 1, time: '08:00', title: '朝闻天下', isCurrent: false },
|
|
||||||
{ id: 2, time: '09:00', title: '今日说法', isCurrent: false },
|
|
||||||
{ id: 3, time: '10:00', title: '电视剧:繁花', isCurrent: true },
|
|
||||||
{ id: 4, time: '12:00', title: '新闻30分', isCurrent: false },
|
|
||||||
]);
|
|
||||||
|
|
||||||
// 监听面板显示，初始化选中状态
|
|
||||||
watch(() => props.visible, (val) => {
|
|
||||||
if (val && props.currentChannel) {
|
|
||||||
// 默认选中当前播放频道对应的分组/频道/日期/节目
|
|
||||||
selectedGroup.value = props.currentChannel.group || props.groups[0] || '';
|
|
||||||
selectedChannel.value = props.currentChannel;
|
|
||||||
selectedDate.value = new Date().toISOString().split('T')[0];
|
|
||||||
// TODO: 根据当前时间选中当前节目
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// 分组选择
|
|
||||||
function onGroupSelect(groupId) {
|
|
||||||
// 第二栏自动切换到该分组第一个频道
|
|
||||||
const firstChannel = filteredChannels.value[0];
|
|
||||||
if (firstChannel) {
|
|
||||||
selectedChannel.value = firstChannel;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 频道选择
|
|
||||||
function onChannelSelect(channel) {
|
|
||||||
// 播放频道
|
|
||||||
emit('play', channel);
|
|
||||||
// 关闭面板
|
|
||||||
emit('close');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 日期选择
|
|
||||||
function onDateSelect(dateValue) {
|
|
||||||
// 第四栏自动切换到该日期第一个节目
|
|
||||||
// TODO: 加载对应日期的节目单
|
|
||||||
}
|
|
||||||
|
|
||||||
// 节目选择
|
|
||||||
function onProgramSelect(program) {
|
|
||||||
// TODO: 回看功能
|
|
||||||
emit('lookback', program);
|
|
||||||
// 关闭面板
|
|
||||||
emit('close');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 监听 TV 导航（由父组件传入）
|
|
||||||
watch(activeColumn, (val) => {
|
|
||||||
// 栏切换时的处理
|
|
||||||
});
|
|
||||||
|
|
||||||
// 导出方法供父组件调用
|
|
||||||
defineExpose({
|
|
||||||
moveColumn,
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.left-panel {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
width: 900px;
|
|
||||||
display: flex;
|
|
||||||
z-index: 100;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.column {
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-1 {
|
|
||||||
width: 140px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-2 {
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-3 {
|
|
||||||
width: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-4 {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* TV 模式下当前激活栏的高亮 */
|
|
||||||
.tv-mode .column.active {
|
|
||||||
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 滑入动画 */
|
|
||||||
.slide-left-enter-active,
|
|
||||||
.slide-left-leave-active {
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-left-enter-from,
|
|
||||||
.slide-left-leave-to {
|
|
||||||
transform: translateX(-100%);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,112 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
class="program-list"
|
|
||||||
:class="{ 'is-active': isActive }"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-for="program in programs"
|
|
||||||
:key="program.id"
|
|
||||||
class="program-item"
|
|
||||||
:class="{
|
|
||||||
active: modelValue?.id === program.id,
|
|
||||||
current: program.isCurrent
|
|
||||||
}"
|
|
||||||
@click="selectProgram(program)"
|
|
||||||
>
|
|
||||||
<div class="program-time">{{ program.time }}</div>
|
|
||||||
<div class="program-title">
|
|
||||||
{{ program.title }}
|
|
||||||
<span v-if="program.isCurrent" class="current-badge">当前</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
const props = defineProps({
|
|
||||||
modelValue: {
|
|
||||||
type: Object,
|
|
||||||
default: null
|
|
||||||
},
|
|
||||||
programs: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
isActive: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const emit = defineEmits(['update:modelValue', 'select']);
|
|
||||||
|
|
||||||
// 选择节目
|
|
||||||
function selectProgram(program) {
|
|
||||||
emit('update:modelValue', program);
|
|
||||||
emit('select', program);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.program-list {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow-y: auto;
|
|
||||||
background: rgba(0, 0, 0, 0.75);
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.program-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
padding: 12px;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
border-left: 3px solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.program-item:hover,
|
|
||||||
.program-item.active {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.program-item.active {
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
border-left-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.program-item.current {
|
|
||||||
border-left-color: #ff6b6b;
|
|
||||||
}
|
|
||||||
|
|
||||||
.program-time {
|
|
||||||
font-size: 13px;
|
|
||||||
color: rgba(255, 255, 255, 0.6);
|
|
||||||
font-family: monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
.program-title {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #fff;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.current-badge {
|
|
||||||
font-size: 10px;
|
|
||||||
background: #ff6b6b;
|
|
||||||
color: #fff;
|
|
||||||
padding: 2px 6px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* TV 模式焦点样式 */
|
|
||||||
.is-active .program-item:focus {
|
|
||||||
outline: 2px solid #fff;
|
|
||||||
outline-offset: -2px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,366 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="modal-overlay" @click="$emit('close')">
|
|
||||||
<div class="modal-content" @click.stop>
|
|
||||||
<div class="modal-header">
|
|
||||||
<h3>设置</h3>
|
|
||||||
<button class="close-btn" @click="$emit('close')">×</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="settings-list">
|
|
||||||
<!-- 自动播放 -->
|
|
||||||
<div class="setting-item">
|
|
||||||
<div class="setting-info">
|
|
||||||
<span class="setting-label">自动播放</span>
|
|
||||||
<span class="setting-desc">切换频道后自动开始播放</span>
|
|
||||||
</div>
|
|
||||||
<label class="switch">
|
|
||||||
<input type="checkbox" v-model="settings.autoPlay" @change="saveSettings" />
|
|
||||||
<span class="slider"></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 首选画质 -->
|
|
||||||
<div class="setting-item">
|
|
||||||
<div class="setting-info">
|
|
||||||
<span class="setting-label">首选画质</span>
|
|
||||||
<span class="setting-desc">优先选择指定清晰度的线路</span>
|
|
||||||
</div>
|
|
||||||
<select v-model="settings.preferredQuality" @change="saveSettings">
|
|
||||||
<option value="auto">自动</option>
|
|
||||||
<option value="hd">高清</option>
|
|
||||||
<option value="sd">标清</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 缓存有效期 -->
|
|
||||||
<div class="setting-item">
|
|
||||||
<div class="setting-info">
|
|
||||||
<span class="setting-label">频道列表缓存</span>
|
|
||||||
<span class="setting-desc">频道数据缓存有效期</span>
|
|
||||||
</div>
|
|
||||||
<select v-model="listCacheHours" @change="updateCacheTTL">
|
|
||||||
<option :value="6">6小时</option>
|
|
||||||
<option :value="12">12小时</option>
|
|
||||||
<option :value="24">1天</option>
|
|
||||||
<option :value="72">3天</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="setting-item">
|
|
||||||
<div class="setting-info">
|
|
||||||
<span class="setting-label">线路检测缓存</span>
|
|
||||||
<span class="setting-desc">线路可用性检测缓存有效期</span>
|
|
||||||
</div>
|
|
||||||
<select v-model="validityCacheHours" @change="updateCacheTTL">
|
|
||||||
<option :value="1">1小时</option>
|
|
||||||
<option :value="6">6小时</option>
|
|
||||||
<option :value="12">12小时</option>
|
|
||||||
<option :value="24">1天</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="divider"></div>
|
|
||||||
|
|
||||||
<!-- 缓存管理 -->
|
|
||||||
<div class="setting-item cache-actions">
|
|
||||||
<div class="setting-info">
|
|
||||||
<span class="setting-label">缓存管理</span>
|
|
||||||
<span class="setting-desc">清除本地缓存数据</span>
|
|
||||||
</div>
|
|
||||||
<div class="cache-buttons">
|
|
||||||
<button class="action-btn" @click="clearChannelCache">
|
|
||||||
清除频道缓存
|
|
||||||
</button>
|
|
||||||
<button class="action-btn" @click="clearValidityCache">
|
|
||||||
清除检测缓存
|
|
||||||
</button>
|
|
||||||
<button class="action-btn danger" @click="clearAllCache">
|
|
||||||
清除全部缓存
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="divider"></div>
|
|
||||||
|
|
||||||
<!-- 数据刷新 -->
|
|
||||||
<div class="setting-item">
|
|
||||||
<div class="setting-info">
|
|
||||||
<span class="setting-label">刷新数据</span>
|
|
||||||
<span class="setting-desc">立即从订阅源重新加载频道</span>
|
|
||||||
</div>
|
|
||||||
<button class="action-btn primary" @click="reloadChannels" :disabled="reloading">
|
|
||||||
{{ reloading ? '刷新中...' : '立即刷新' }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, onMounted } from 'vue';
|
|
||||||
import { useStorage } from '../../composables/useStorage.js';
|
|
||||||
|
|
||||||
const emit = defineEmits(['close', 'reload']);
|
|
||||||
const storage = useStorage();
|
|
||||||
|
|
||||||
const settings = ref({
|
|
||||||
autoPlay: true,
|
|
||||||
preferredQuality: 'auto',
|
|
||||||
listCacheTTL: 24 * 60 * 60 * 1000,
|
|
||||||
validityCacheTTL: 12 * 60 * 60 * 1000,
|
|
||||||
});
|
|
||||||
|
|
||||||
const listCacheHours = ref(24);
|
|
||||||
const validityCacheHours = ref(12);
|
|
||||||
const reloading = ref(false);
|
|
||||||
|
|
||||||
// 加载设置
|
|
||||||
onMounted(async () => {
|
|
||||||
const prefs = await storage.getPreferences();
|
|
||||||
settings.value = { ...settings.value, ...prefs };
|
|
||||||
listCacheHours.value = Math.floor(prefs.listCacheTTL / (60 * 60 * 1000)) || 24;
|
|
||||||
validityCacheHours.value = Math.floor(prefs.validityCacheTTL / (60 * 60 * 1000)) || 12;
|
|
||||||
});
|
|
||||||
|
|
||||||
// 保存设置
|
|
||||||
async function saveSettings() {
|
|
||||||
await storage.setPreferences(settings.value);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 更新缓存时间
|
|
||||||
async function updateCacheTTL() {
|
|
||||||
settings.value.listCacheTTL = listCacheHours.value * 60 * 60 * 1000;
|
|
||||||
settings.value.validityCacheTTL = validityCacheHours.value * 60 * 60 * 1000;
|
|
||||||
await saveSettings();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 清除频道缓存
|
|
||||||
async function clearChannelCache() {
|
|
||||||
if (!confirm('确定要清除频道列表缓存吗？')) return;
|
|
||||||
await storage.setChannels([]);
|
|
||||||
await storage.setCacheMeta('channels', null);
|
|
||||||
alert('频道缓存已清除');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 清除检测缓存
|
|
||||||
async function clearValidityCache() {
|
|
||||||
if (!confirm('确定要清除线路检测缓存吗？')) return;
|
|
||||||
const all = await storage.getAllValidity();
|
|
||||||
for (const v of all) {
|
|
||||||
await storage.remove(`validity_${v.url}`);
|
|
||||||
}
|
|
||||||
alert('检测缓存已清除');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 清除全部缓存
|
|
||||||
async function clearAllCache() {
|
|
||||||
if (!confirm('确定要清除全部缓存数据吗？包括收藏和历史记录？')) return;
|
|
||||||
await storage.clear();
|
|
||||||
alert('全部缓存已清除');
|
|
||||||
emit('reload');
|
|
||||||
emit('close');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 刷新频道
|
|
||||||
async function reloadChannels() {
|
|
||||||
reloading.value = true;
|
|
||||||
emit('reload');
|
|
||||||
setTimeout(() => {
|
|
||||||
reloading.value = false;
|
|
||||||
emit('close');
|
|
||||||
}, 1000);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.modal-overlay {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.8);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 300;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content {
|
|
||||||
background: #1a1a1a;
|
|
||||||
border-radius: 12px;
|
|
||||||
width: 90%;
|
|
||||||
max-width: 500px;
|
|
||||||
max-height: 80vh;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 16px 20px;
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header h3 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 18px;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-btn {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
border: none;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-list {
|
|
||||||
padding: 16px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.setting-item {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 12px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.setting-item.cache-actions {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.setting-info {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.setting-label {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.setting-desc {
|
|
||||||
font-size: 12px;
|
|
||||||
color: rgba(255, 255, 255, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.divider {
|
|
||||||
height: 1px;
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
margin: 8px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Switch 开关 */
|
|
||||||
.switch {
|
|
||||||
position: relative;
|
|
||||||
width: 44px;
|
|
||||||
height: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.switch input {
|
|
||||||
opacity: 0;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider {
|
|
||||||
position: absolute;
|
|
||||||
cursor: pointer;
|
|
||||||
inset: 0;
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
border-radius: 24px;
|
|
||||||
transition: 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider:before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
height: 18px;
|
|
||||||
width: 18px;
|
|
||||||
left: 3px;
|
|
||||||
bottom: 3px;
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 50%;
|
|
||||||
transition: 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
input:checked + .slider {
|
|
||||||
background: #00ff88;
|
|
||||||
}
|
|
||||||
|
|
||||||
input:checked + .slider:before {
|
|
||||||
transform: translateX(20px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Select 下拉框 */
|
|
||||||
select {
|
|
||||||
padding: 8px 12px;
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
||||||
border-radius: 6px;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 13px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
select option {
|
|
||||||
background: #1a1a1a;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 按钮 */
|
|
||||||
.cache-buttons {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn {
|
|
||||||
padding: 8px 16px;
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
||||||
border-radius: 6px;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 13px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn.primary {
|
|
||||||
background: #00ff88;
|
|
||||||
color: #000;
|
|
||||||
border-color: #00ff88;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn.primary:hover {
|
|
||||||
background: #00cc6a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn.danger {
|
|
||||||
background: rgba(255, 68, 68, 0.2);
|
|
||||||
border-color: rgba(255, 68, 68, 0.5);
|
|
||||||
color: #ff4444;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn.danger:hover {
|
|
||||||
background: rgba(255, 68, 68, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,142 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="modal-overlay" @click="$emit('close')">
|
|
||||||
<div class="modal-content" @click.stop>
|
|
||||||
<h3>切换线路</h3>
|
|
||||||
<div class="source-list">
|
|
||||||
<div
|
|
||||||
v-for="(url, index) in channel?.urls"
|
|
||||||
:key="index"
|
|
||||||
class="source-item"
|
|
||||||
:class="{
|
|
||||||
active: currentUrl === url,
|
|
||||||
online: getValidity(url)?.status === 'online',
|
|
||||||
offline: getValidity(url)?.status === 'offline'
|
|
||||||
}"
|
|
||||||
@click="$emit('switch', { url }, index)"
|
|
||||||
>
|
|
||||||
<span class="source-name">线路 {{ index + 1 }}</span>
|
|
||||||
<span class="source-status" :class="getValidity(url)?.status">
|
|
||||||
{{ getStatusText(url) }}
|
|
||||||
</span>
|
|
||||||
<span class="source-latency" v-if="getValidity(url)?.latency > 0">
|
|
||||||
{{ getValidity(url).latency }}ms
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
const props = defineProps({
|
|
||||||
channel: Object,
|
|
||||||
currentUrl: String,
|
|
||||||
validityMap: {
|
|
||||||
type: Map,
|
|
||||||
default: () => new Map()
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const emit = defineEmits(['switch', 'close']);
|
|
||||||
|
|
||||||
function getValidity(url) {
|
|
||||||
return props.validityMap.get(url);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getStatusText(url) {
|
|
||||||
const validity = getValidity(url);
|
|
||||||
if (!validity) return '未检测';
|
|
||||||
if (validity.status === 'online') return '在线';
|
|
||||||
if (validity.status === 'offline') return '离线';
|
|
||||||
return '未知';
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.modal-overlay {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.8);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 300;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content {
|
|
||||||
background: #1a1a1a;
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 20px;
|
|
||||||
min-width: 400px;
|
|
||||||
max-width: 600px;
|
|
||||||
max-height: 80vh;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.source-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px;
|
|
||||||
margin-top: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.source-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
padding: 12px;
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
border-left: 3px solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.source-item:hover,
|
|
||||||
.source-item.active {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.source-item.active {
|
|
||||||
border-left-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.source-item.online {
|
|
||||||
border-left-color: #00ff88;
|
|
||||||
}
|
|
||||||
|
|
||||||
.source-item.offline {
|
|
||||||
border-left-color: #ff4444;
|
|
||||||
}
|
|
||||||
|
|
||||||
.source-name {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #fff;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.source-status {
|
|
||||||
font-size: 12px;
|
|
||||||
padding: 2px 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.source-status.online {
|
|
||||||
background: rgba(0, 255, 136, 0.2);
|
|
||||||
color: #00ff88;
|
|
||||||
}
|
|
||||||
|
|
||||||
.source-status.offline {
|
|
||||||
background: rgba(255, 68, 68, 0.2);
|
|
||||||
color: #ff4444;
|
|
||||||
}
|
|
||||||
|
|
||||||
.source-latency {
|
|
||||||
font-size: 12px;
|
|
||||||
color: rgba(255, 255, 255, 0.5);
|
|
||||||
font-family: monospace;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -26,8 +26,6 @@ const props = defineProps({
|
|||||||
title: String
|
title: String
|
||||||
})
|
})
|
||||||
|
|
||||||
const emit = defineEmits(['error', 'ready'])
|
|
||||||
|
|
||||||
const videoRef = ref(null)
|
const videoRef = ref(null)
|
||||||
const error = ref(null)
|
const error = ref(null)
|
||||||
let hls = null
|
let hls = null
|
||||||
@ -62,7 +60,6 @@ const initPlayer = () => {
|
|||||||
hls.on(Hls.Events.ERROR, (event, data) => {
|
hls.on(Hls.Events.ERROR, (event, data) => {
|
||||||
if (data.fatal) {
|
if (data.fatal) {
|
||||||
error.value = data.type
|
error.value = data.type
|
||||||
emit('error', { type: data.type, fatal: true })
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
|
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
|
||||||
@ -74,7 +71,6 @@ const initPlayer = () => {
|
|||||||
|
|
||||||
video.onerror = () => {
|
video.onerror = () => {
|
||||||
error.value = 'networkError'
|
error.value = 'networkError'
|
||||||
emit('error', { type: 'networkError', fatal: true })
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,169 +0,0 @@
|
|||||||
import { ref, onMounted } from 'vue';
|
|
||||||
import createStorage, { Subscription, Channel, SourceValidity, Preferences, PlayHistory, CacheMeta } from '../storage/index.js';
|
|
||||||
|
|
||||||
const storage = createStorage();
|
|
||||||
const isReady = ref(false);
|
|
||||||
|
|
||||||
export { Subscription, Channel, SourceValidity, Preferences, PlayHistory, CacheMeta };
|
|
||||||
|
|
||||||
export function useStorage() {
|
|
||||||
onMounted(async () => {
|
|
||||||
if (storage.init) {
|
|
||||||
await storage.init();
|
|
||||||
}
|
|
||||||
isReady.value = true;
|
|
||||||
});
|
|
||||||
|
|
||||||
// 基础操作
|
|
||||||
const get = async (key) => {
|
|
||||||
return await storage.get(key);
|
|
||||||
};
|
|
||||||
|
|
||||||
const set = async (key, value) => {
|
|
||||||
return await storage.set(key, value);
|
|
||||||
};
|
|
||||||
|
|
||||||
const remove = async (key) => {
|
|
||||||
return await storage.remove(key);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 频道数据
|
|
||||||
const getChannels = async () => {
|
|
||||||
const channels = await storage.getChannels();
|
|
||||||
return channels.map(c => new Channel(c));
|
|
||||||
};
|
|
||||||
|
|
||||||
const setChannels = async (channels) => {
|
|
||||||
return await storage.setChannels(channels);
|
|
||||||
};
|
|
||||||
|
|
||||||
const getGroups = async () => {
|
|
||||||
return await storage.getGroups();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 检查列表缓存是否有效
|
|
||||||
const isListCacheValid = async () => {
|
|
||||||
const prefs = await storage.getPreferences();
|
|
||||||
const ttl = prefs.listCacheTTL || 24 * 60 * 60 * 1000;
|
|
||||||
return await storage.isCacheValid('channels', ttl);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 线路有效性
|
|
||||||
const getValidity = async (url) => {
|
|
||||||
const v = await storage.getValidity(url);
|
|
||||||
return v ? new SourceValidity(v) : null;
|
|
||||||
};
|
|
||||||
|
|
||||||
const setValidity = async (url, validity) => {
|
|
||||||
return await storage.setValidity(url, validity);
|
|
||||||
};
|
|
||||||
|
|
||||||
const getAllValidity = async () => {
|
|
||||||
const list = await storage.getAllValidity();
|
|
||||||
return list.map(v => new SourceValidity(v));
|
|
||||||
};
|
|
||||||
|
|
||||||
// 检查有效性缓存是否有效
|
|
||||||
const isValidityCacheValid = async (url) => {
|
|
||||||
const prefs = await storage.getPreferences();
|
|
||||||
const ttl = prefs.validityCacheTTL || 12 * 60 * 60 * 1000;
|
|
||||||
const validity = await storage.getValidity(url);
|
|
||||||
if (!validity || !validity.checkedAt) return false;
|
|
||||||
return Date.now() - validity.checkedAt < ttl;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 用户偏好
|
|
||||||
const getPreferences = async () => {
|
|
||||||
const prefs = await storage.getPreferences();
|
|
||||||
return new Preferences(prefs);
|
|
||||||
};
|
|
||||||
|
|
||||||
const setPreferences = async (prefs) => {
|
|
||||||
return await storage.setPreferences(prefs);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 播放历史
|
|
||||||
const getHistory = async (limit = 50) => {
|
|
||||||
const list = await storage.getHistory(limit);
|
|
||||||
return list.map(h => new PlayHistory(h));
|
|
||||||
};
|
|
||||||
|
|
||||||
const addHistory = async (item) => {
|
|
||||||
return await storage.addHistory(item);
|
|
||||||
};
|
|
||||||
|
|
||||||
const clearHistory = async () => {
|
|
||||||
return await storage.clearHistory();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 订阅源
|
|
||||||
const getSubscriptions = async () => {
|
|
||||||
const list = await storage.getSubscriptions();
|
|
||||||
return list.map(s => new Subscription(s));
|
|
||||||
};
|
|
||||||
|
|
||||||
const setSubscriptions = async (subs) => {
|
|
||||||
return await storage.setSubscriptions(subs);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 缓存元数据
|
|
||||||
const getCacheMeta = async (key) => {
|
|
||||||
const meta = await storage.getCacheMeta(key);
|
|
||||||
return meta ? new CacheMeta(meta) : null;
|
|
||||||
};
|
|
||||||
|
|
||||||
const setCacheMeta = async (key, meta) => {
|
|
||||||
return await storage.setCacheMeta(key, meta);
|
|
||||||
};
|
|
||||||
|
|
||||||
const isCacheValid = async (key, ttl) => {
|
|
||||||
return await storage.isCacheValid(key, ttl);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 清空所有数据
|
|
||||||
const clear = async () => {
|
|
||||||
return await storage.clear();
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
isReady,
|
|
||||||
// 基础
|
|
||||||
get,
|
|
||||||
set,
|
|
||||||
remove,
|
|
||||||
clear,
|
|
||||||
// 频道
|
|
||||||
getChannels,
|
|
||||||
setChannels,
|
|
||||||
getGroups,
|
|
||||||
isListCacheValid,
|
|
||||||
// 有效性
|
|
||||||
getValidity,
|
|
||||||
setValidity,
|
|
||||||
getAllValidity,
|
|
||||||
isValidityCacheValid,
|
|
||||||
// 偏好
|
|
||||||
getPreferences,
|
|
||||||
setPreferences,
|
|
||||||
// 历史
|
|
||||||
getHistory,
|
|
||||||
addHistory,
|
|
||||||
clearHistory,
|
|
||||||
// 订阅
|
|
||||||
getSubscriptions,
|
|
||||||
setSubscriptions,
|
|
||||||
// 元数据
|
|
||||||
getCacheMeta,
|
|
||||||
setCacheMeta,
|
|
||||||
isCacheValid,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// 创建单例
|
|
||||||
let storageInstance = null;
|
|
||||||
export function useStorageSingleton() {
|
|
||||||
if (!storageInstance) {
|
|
||||||
storageInstance = useStorage();
|
|
||||||
}
|
|
||||||
return storageInstance;
|
|
||||||
}
|
|
||||||
@ -1,137 +0,0 @@
|
|||||||
import { ref, computed } from 'vue';
|
|
||||||
|
|
||||||
// 防抖工具函数
|
|
||||||
function debounce(fn, delay) {
|
|
||||||
let timer = null;
|
|
||||||
return function (...args) {
|
|
||||||
clearTimeout(timer);
|
|
||||||
timer = setTimeout(() => fn.apply(this, args), delay);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// 当前激活的栏索引（用于TV导航）
|
|
||||||
const activeColumnIndex = ref(0);
|
|
||||||
const leftPanelVisible = ref(false);
|
|
||||||
const bottomPanelVisible = ref(false);
|
|
||||||
|
|
||||||
// 防抖隐藏底部栏
|
|
||||||
const debouncedHideBottomPanel = debounce(() => {
|
|
||||||
bottomPanelVisible.value = false;
|
|
||||||
}, 3000);
|
|
||||||
|
|
||||||
// 当前选中的分组/频道/日期/节目
|
|
||||||
const selectedGroup = ref('');
|
|
||||||
const selectedChannel = ref(null);
|
|
||||||
const selectedDate = ref('');
|
|
||||||
const selectedProgram = ref(null);
|
|
||||||
|
|
||||||
export function useUI() {
|
|
||||||
const platform = import.meta.env.VITE_PLATFORM || 'web';
|
|
||||||
const isTV = platform === 'tv';
|
|
||||||
|
|
||||||
// 显示左侧面板
|
|
||||||
const showLeftPanel = () => {
|
|
||||||
leftPanelVisible.value = true;
|
|
||||||
bottomPanelVisible.value = false;
|
|
||||||
activeColumnIndex.value = 0;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 隐藏左侧面板
|
|
||||||
const hideLeftPanel = () => {
|
|
||||||
leftPanelVisible.value = false;
|
|
||||||
activeColumnIndex.value = 0;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 切换左侧面板
|
|
||||||
const toggleLeftPanel = () => {
|
|
||||||
if (leftPanelVisible.value) {
|
|
||||||
hideLeftPanel();
|
|
||||||
} else {
|
|
||||||
showLeftPanel();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 显示底部栏（启动防抖隐藏）
|
|
||||||
const showBottomPanel = () => {
|
|
||||||
bottomPanelVisible.value = true;
|
|
||||||
debouncedHideBottomPanel();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 隐藏底部栏
|
|
||||||
const hideBottomPanel = () => {
|
|
||||||
bottomPanelVisible.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 底部栏交互（重置防抖）
|
|
||||||
const onBottomInteraction = () => {
|
|
||||||
debouncedHideBottomPanel();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 设置选中项
|
|
||||||
const setSelectedGroup = (group) => {
|
|
||||||
selectedGroup.value = group;
|
|
||||||
};
|
|
||||||
|
|
||||||
const setSelectedChannel = (channel) => {
|
|
||||||
selectedChannel.value = channel;
|
|
||||||
};
|
|
||||||
|
|
||||||
const setSelectedDate = (date) => {
|
|
||||||
selectedDate.value = date;
|
|
||||||
};
|
|
||||||
|
|
||||||
const setSelectedProgram = (program) => {
|
|
||||||
selectedProgram.value = program;
|
|
||||||
};
|
|
||||||
|
|
||||||
// TV 导航：切换栏
|
|
||||||
const moveColumn = (direction) => {
|
|
||||||
if (!leftPanelVisible.value) return;
|
|
||||||
|
|
||||||
const maxIndex = 3; // 0-3 四栏
|
|
||||||
if (direction === 'right') {
|
|
||||||
activeColumnIndex.value = Math.min(activeColumnIndex.value + 1, maxIndex);
|
|
||||||
} else if (direction === 'left') {
|
|
||||||
activeColumnIndex.value = Math.max(activeColumnIndex.value - 1, 0);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// TV 导航：获取当前激活的栏索引
|
|
||||||
const currentActiveColumn = computed(() => activeColumnIndex.value);
|
|
||||||
|
|
||||||
return {
|
|
||||||
// 状态
|
|
||||||
leftPanelVisible,
|
|
||||||
bottomPanelVisible,
|
|
||||||
selectedGroup,
|
|
||||||
selectedChannel,
|
|
||||||
selectedDate,
|
|
||||||
selectedProgram,
|
|
||||||
|
|
||||||
// 计算属性
|
|
||||||
isTV,
|
|
||||||
currentActiveColumn,
|
|
||||||
|
|
||||||
// 方法
|
|
||||||
showLeftPanel,
|
|
||||||
hideLeftPanel,
|
|
||||||
toggleLeftPanel,
|
|
||||||
showBottomPanel,
|
|
||||||
hideBottomPanel,
|
|
||||||
onBottomInteraction,
|
|
||||||
setSelectedGroup,
|
|
||||||
setSelectedChannel,
|
|
||||||
setSelectedDate,
|
|
||||||
setSelectedProgram,
|
|
||||||
moveColumn,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// 创建单例
|
|
||||||
let uiInstance = null;
|
|
||||||
export function useUISingleton() {
|
|
||||||
if (!uiInstance) {
|
|
||||||
uiInstance = useUI();
|
|
||||||
}
|
|
||||||
return uiInstance;
|
|
||||||
}
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
# Storage Adapters
|
|
||||||
|
|
||||||
存储适配器目录，按平台分离实现：
|
|
||||||
|
|
||||||
- `indexeddb.js` - Web/Desktop 端（使用 IndexedDB）
|
|
||||||
- `native.js` - Android/TV 端（通过 JS Bridge 调用原生存储）
|
|
||||||
|
|
||||||
目前所有实现统一在 `../index.js` 中，如需拆分可在此目录创建单独文件。
|
|
||||||
@ -1,467 +0,0 @@
|
|||||||
import { openDB } from 'idb';
|
|
||||||
import {
|
|
||||||
Subscription, Channel, SourceValidity,
|
|
||||||
Preferences, PlayHistory, CacheMeta
|
|
||||||
} from './types.js';
|
|
||||||
|
|
||||||
const DB_NAME = 'IPTVStorage';
|
|
||||||
const DB_VERSION = 1;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 抽象存储接口
|
|
||||||
*/
|
|
||||||
class IStorage {
|
|
||||||
// 基础操作
|
|
||||||
async get(key) { throw new Error('Not implemented'); }
|
|
||||||
async set(key, value) { throw new Error('Not implemented'); }
|
|
||||||
async remove(key) { throw new Error('Not implemented'); }
|
|
||||||
async clear() { throw new Error('Not implemented'); }
|
|
||||||
|
|
||||||
// 频道数据
|
|
||||||
async getChannels() { throw new Error('Not implemented'); }
|
|
||||||
async setChannels(channels) { throw new Error('Not implemented'); }
|
|
||||||
async getGroups() { throw new Error('Not implemented'); }
|
|
||||||
|
|
||||||
// 订阅源
|
|
||||||
async getSubscriptions() { throw new Error('Not implemented'); }
|
|
||||||
async setSubscriptions(subs) { throw new Error('Not implemented'); }
|
|
||||||
|
|
||||||
// 线路有效性
|
|
||||||
async getValidity(url) { throw new Error('Not implemented'); }
|
|
||||||
async setValidity(url, validity) { throw new Error('Not implemented'); }
|
|
||||||
async getAllValidity() { throw new Error('Not implemented'); }
|
|
||||||
|
|
||||||
// 用户偏好
|
|
||||||
async getPreferences() { throw new Error('Not implemented'); }
|
|
||||||
async setPreferences(prefs) { throw new Error('Not implemented'); }
|
|
||||||
|
|
||||||
// 播放历史
|
|
||||||
async getHistory(limit = 50) { throw new Error('Not implemented'); }
|
|
||||||
async addHistory(item) { throw new Error('Not implemented'); }
|
|
||||||
async clearHistory() { throw new Error('Not implemented'); }
|
|
||||||
|
|
||||||
// 缓存元数据
|
|
||||||
async getCacheMeta(key) { throw new Error('Not implemented'); }
|
|
||||||
async setCacheMeta(key, meta) { throw new Error('Not implemented'); }
|
|
||||||
async isCacheValid(key, ttl) { throw new Error('Not implemented'); }
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* IndexedDB 实现 (Web/Desktop)
|
|
||||||
*/
|
|
||||||
class IndexedDBStorage extends IStorage {
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
this.db = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
async init() {
|
|
||||||
if (this.db) return;
|
|
||||||
|
|
||||||
this.db = await openDB(DB_NAME, DB_VERSION, {
|
|
||||||
upgrade(db) {
|
|
||||||
// 存储对象定义
|
|
||||||
if (!db.objectStoreNames.contains('channels')) {
|
|
||||||
const channelStore = db.createObjectStore('channels', { keyPath: 'id' });
|
|
||||||
channelStore.createIndex('group', 'group');
|
|
||||||
channelStore.createIndex('name', 'name');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!db.objectStoreNames.contains('subscriptions')) {
|
|
||||||
db.createObjectStore('subscriptions', { keyPath: 'id' });
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!db.objectStoreNames.contains('validity')) {
|
|
||||||
db.createObjectStore('validity', { keyPath: 'url' });
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!db.objectStoreNames.contains('preferences')) {
|
|
||||||
db.createObjectStore('preferences');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!db.objectStoreNames.contains('history')) {
|
|
||||||
const historyStore = db.createObjectStore('history', {
|
|
||||||
keyPath: 'timestamp',
|
|
||||||
autoIncrement: true
|
|
||||||
});
|
|
||||||
historyStore.createIndex('channelId', 'channelId');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!db.objectStoreNames.contains('cacheMeta')) {
|
|
||||||
db.createObjectStore('cacheMeta', { keyPath: 'key' });
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!db.objectStoreNames.contains('generic')) {
|
|
||||||
db.createObjectStore('generic');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 基础操作
|
|
||||||
async get(key) {
|
|
||||||
await this.init();
|
|
||||||
return await this.db.get('generic', key);
|
|
||||||
}
|
|
||||||
|
|
||||||
async set(key, value) {
|
|
||||||
await this.init();
|
|
||||||
await this.db.put('generic', value, key);
|
|
||||||
}
|
|
||||||
|
|
||||||
async remove(key) {
|
|
||||||
await this.init();
|
|
||||||
await this.db.delete('generic', key);
|
|
||||||
}
|
|
||||||
|
|
||||||
async clear() {
|
|
||||||
await this.init();
|
|
||||||
const stores = ['channels', 'subscriptions', 'validity', 'history', 'cacheMeta', 'generic'];
|
|
||||||
for (const store of stores) {
|
|
||||||
await this.db.clear(store);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 频道数据
|
|
||||||
async getChannels() {
|
|
||||||
await this.init();
|
|
||||||
return await this.db.getAll('channels');
|
|
||||||
}
|
|
||||||
|
|
||||||
async setChannels(channels) {
|
|
||||||
await this.init();
|
|
||||||
const tx = this.db.transaction('channels', 'readwrite');
|
|
||||||
await tx.store.clear();
|
|
||||||
for (const channel of channels) {
|
|
||||||
await tx.store.put(channel);
|
|
||||||
}
|
|
||||||
await tx.done;
|
|
||||||
|
|
||||||
// 更新缓存元数据
|
|
||||||
await this.setCacheMeta('channels', new CacheMeta({
|
|
||||||
key: 'channels',
|
|
||||||
updatedAt: Date.now(),
|
|
||||||
size: channels.length
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
async getGroups() {
|
|
||||||
const channels = await this.getChannels();
|
|
||||||
const groups = new Set(channels.map(c => c.group));
|
|
||||||
return Array.from(groups);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 订阅源
|
|
||||||
async getSubscriptions() {
|
|
||||||
await this.init();
|
|
||||||
return await this.db.getAll('subscriptions');
|
|
||||||
}
|
|
||||||
|
|
||||||
async setSubscriptions(subs) {
|
|
||||||
await this.init();
|
|
||||||
const tx = this.db.transaction('subscriptions', 'readwrite');
|
|
||||||
await tx.store.clear();
|
|
||||||
for (const sub of subs) {
|
|
||||||
await tx.store.put(sub);
|
|
||||||
}
|
|
||||||
await tx.done;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 线路有效性
|
|
||||||
async getValidity(url) {
|
|
||||||
await this.init();
|
|
||||||
return await this.db.get('validity', url);
|
|
||||||
}
|
|
||||||
|
|
||||||
async setValidity(url, validity) {
|
|
||||||
await this.init();
|
|
||||||
await this.db.put('validity', { ...validity, url });
|
|
||||||
}
|
|
||||||
|
|
||||||
async getAllValidity() {
|
|
||||||
await this.init();
|
|
||||||
return await this.db.getAll('validity');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 用户偏好
|
|
||||||
async getPreferences() {
|
|
||||||
await this.init();
|
|
||||||
const prefs = await this.db.get('preferences', 'user');
|
|
||||||
return prefs || new Preferences();
|
|
||||||
}
|
|
||||||
|
|
||||||
async setPreferences(prefs) {
|
|
||||||
await this.init();
|
|
||||||
await this.db.put('preferences', prefs, 'user');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 播放历史
|
|
||||||
async getHistory(limit = 50) {
|
|
||||||
await this.init();
|
|
||||||
const all = await this.db.getAll('history');
|
|
||||||
return all.slice(-limit).reverse();
|
|
||||||
}
|
|
||||||
|
|
||||||
async addHistory(item) {
|
|
||||||
await this.init();
|
|
||||||
await this.db.add('history', item);
|
|
||||||
|
|
||||||
// 清理旧记录（保留最近 500 条）
|
|
||||||
const count = await this.db.count('history');
|
|
||||||
if (count > 500) {
|
|
||||||
const toDelete = count - 500;
|
|
||||||
const keys = await this.db.getAllKeys('history', null, toDelete);
|
|
||||||
for (const key of keys) {
|
|
||||||
await this.db.delete('history', key);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async clearHistory() {
|
|
||||||
await this.init();
|
|
||||||
await this.db.clear('history');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 缓存元数据
|
|
||||||
async getCacheMeta(key) {
|
|
||||||
await this.init();
|
|
||||||
return await this.db.get('cacheMeta', key);
|
|
||||||
}
|
|
||||||
|
|
||||||
async setCacheMeta(key, meta) {
|
|
||||||
await this.init();
|
|
||||||
await this.db.put('cacheMeta', { ...meta, key });
|
|
||||||
}
|
|
||||||
|
|
||||||
async isCacheValid(key, ttl) {
|
|
||||||
const meta = await this.getCacheMeta(key);
|
|
||||||
if (!meta || !meta.updatedAt) return false;
|
|
||||||
return Date.now() - meta.updatedAt < ttl;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Native 存储实现 (Android/TV)
|
|
||||||
* 通过 AndroidAsset 接口调用原生 SQLite/SharedPreferences
|
|
||||||
*/
|
|
||||||
class NativeStorage extends IStorage {
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
this.memoryCache = new Map(); // 内存缓存
|
|
||||||
}
|
|
||||||
|
|
||||||
// 检查 Android 接口是否可用
|
|
||||||
isAvailable() {
|
|
||||||
return typeof window.AndroidAsset !== 'undefined';
|
|
||||||
}
|
|
||||||
|
|
||||||
// 调用原生接口
|
|
||||||
async callNative(method, ...args) {
|
|
||||||
if (!this.isAvailable()) {
|
|
||||||
throw new Error('AndroidAsset not available');
|
|
||||||
}
|
|
||||||
return window.AndroidAsset[method](...args);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 基础操作 (使用 localStorage 作为后备)
|
|
||||||
async get(key) {
|
|
||||||
try {
|
|
||||||
const value = await this.callNative('getItem', key);
|
|
||||||
return value ? JSON.parse(value) : null;
|
|
||||||
} catch {
|
|
||||||
return this.memoryCache.get(key) || null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async set(key, value) {
|
|
||||||
this.memoryCache.set(key, value);
|
|
||||||
try {
|
|
||||||
await this.callNative('setItem', key, JSON.stringify(value));
|
|
||||||
} catch {
|
|
||||||
// 忽略原生存储失败
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async remove(key) {
|
|
||||||
this.memoryCache.delete(key);
|
|
||||||
try {
|
|
||||||
await this.callNative('removeItem', key);
|
|
||||||
} catch {}
|
|
||||||
}
|
|
||||||
|
|
||||||
async clear() {
|
|
||||||
this.memoryCache.clear();
|
|
||||||
try {
|
|
||||||
await this.callNative('clear');
|
|
||||||
} catch {}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 频道数据 (使用专用接口)
|
|
||||||
async getChannels() {
|
|
||||||
try {
|
|
||||||
const data = await this.callNative('readChannelData');
|
|
||||||
if (data && !data.startsWith('ERROR:')) {
|
|
||||||
// 解析频道数据并缓存
|
|
||||||
const channels = this.parseChannelData(data);
|
|
||||||
this.memoryCache.set('channels', channels);
|
|
||||||
return channels;
|
|
||||||
}
|
|
||||||
} catch {}
|
|
||||||
return this.memoryCache.get('channels') || [];
|
|
||||||
}
|
|
||||||
|
|
||||||
async setChannels(channels) {
|
|
||||||
this.memoryCache.set('channels', channels);
|
|
||||||
// 原生端通过文件存储，这里只更新内存缓存
|
|
||||||
await this.setCacheMeta('channels', new CacheMeta({
|
|
||||||
key: 'channels',
|
|
||||||
updatedAt: Date.now(),
|
|
||||||
size: channels.length
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
parseChannelData(text) {
|
|
||||||
// 简单的 TXT 格式解析
|
|
||||||
const channels = [];
|
|
||||||
const lines = text.split('\n');
|
|
||||||
let currentGroup = '';
|
|
||||||
|
|
||||||
for (const line of lines) {
|
|
||||||
const trimmed = line.trim();
|
|
||||||
if (!trimmed) continue;
|
|
||||||
|
|
||||||
if (trimmed.includes('#genre#')) {
|
|
||||||
currentGroup = trimmed.split(',')[0];
|
|
||||||
} else if (trimmed.includes(',')) {
|
|
||||||
const [name, url] = trimmed.split(',').map(s => s.trim());
|
|
||||||
if (name && url) {
|
|
||||||
const existing = channels.find(c => c.name === name && c.group === currentGroup);
|
|
||||||
if (existing) {
|
|
||||||
existing.urls.push(url);
|
|
||||||
} else {
|
|
||||||
channels.push(new Channel({
|
|
||||||
id: `${currentGroup}_${name}`,
|
|
||||||
name,
|
|
||||||
group: currentGroup,
|
|
||||||
urls: [url]
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return channels;
|
|
||||||
}
|
|
||||||
|
|
||||||
async getGroups() {
|
|
||||||
const channels = await this.getChannels();
|
|
||||||
const groups = new Set(channels.map(c => c.group));
|
|
||||||
return Array.from(groups);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 订阅源
|
|
||||||
async getSubscriptions() {
|
|
||||||
return await this.get('subscriptions') || [];
|
|
||||||
}
|
|
||||||
|
|
||||||
async setSubscriptions(subs) {
|
|
||||||
await this.set('subscriptions', subs);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 线路有效性 (使用 SharedPreferences)
|
|
||||||
async getValidity(url) {
|
|
||||||
const all = await this.getAllValidity();
|
|
||||||
return all.find(v => v.url === url);
|
|
||||||
}
|
|
||||||
|
|
||||||
async setValidity(url, validity) {
|
|
||||||
const all = await this.getAllValidity();
|
|
||||||
const index = all.findIndex(v => v.url === url);
|
|
||||||
if (index >= 0) {
|
|
||||||
all[index] = { ...validity, url };
|
|
||||||
} else {
|
|
||||||
all.push({ ...validity, url });
|
|
||||||
}
|
|
||||||
await this.set('validity', all);
|
|
||||||
}
|
|
||||||
|
|
||||||
async getAllValidity() {
|
|
||||||
return await this.get('validity') || [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// 用户偏好
|
|
||||||
async getPreferences() {
|
|
||||||
return await this.get('preferences') || new Preferences();
|
|
||||||
}
|
|
||||||
|
|
||||||
async setPreferences(prefs) {
|
|
||||||
await this.set('preferences', prefs);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 播放历史
|
|
||||||
async getHistory(limit = 50) {
|
|
||||||
const all = await this.get('history') || [];
|
|
||||||
return all.slice(-limit).reverse();
|
|
||||||
}
|
|
||||||
|
|
||||||
async addHistory(item) {
|
|
||||||
const all = await this.get('history') || [];
|
|
||||||
all.push(item);
|
|
||||||
// 保留最近 500 条
|
|
||||||
if (all.length > 500) {
|
|
||||||
all.splice(0, all.length - 500);
|
|
||||||
}
|
|
||||||
await this.set('history', all);
|
|
||||||
}
|
|
||||||
|
|
||||||
async clearHistory() {
|
|
||||||
await this.remove('history');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 缓存元数据
|
|
||||||
async getCacheMeta(key) {
|
|
||||||
const all = await this.get('cacheMeta') || {};
|
|
||||||
return all[key];
|
|
||||||
}
|
|
||||||
|
|
||||||
async setCacheMeta(key, meta) {
|
|
||||||
const all = await this.get('cacheMeta') || {};
|
|
||||||
all[key] = { ...meta, key };
|
|
||||||
await this.set('cacheMeta', all);
|
|
||||||
}
|
|
||||||
|
|
||||||
async isCacheValid(key, ttl) {
|
|
||||||
const meta = await this.getCacheMeta(key);
|
|
||||||
if (!meta || !meta.updatedAt) return false;
|
|
||||||
return Date.now() - meta.updatedAt < ttl;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 存储工厂 - 根据平台创建对应的存储实例
|
|
||||||
*/
|
|
||||||
export function createStorage() {
|
|
||||||
const platform = import.meta.env.VITE_PLATFORM || 'web';
|
|
||||||
|
|
||||||
if (platform === 'android' || platform === 'tv') {
|
|
||||||
return new NativeStorage();
|
|
||||||
}
|
|
||||||
|
|
||||||
return new IndexedDBStorage();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 导出类型和类
|
|
||||||
export {
|
|
||||||
IStorage,
|
|
||||||
IndexedDBStorage,
|
|
||||||
NativeStorage,
|
|
||||||
Subscription,
|
|
||||||
Channel,
|
|
||||||
SourceValidity,
|
|
||||||
Preferences,
|
|
||||||
PlayHistory,
|
|
||||||
CacheMeta
|
|
||||||
};
|
|
||||||
|
|
||||||
// 默认导出
|
|
||||||
export default createStorage;
|
|
||||||
@ -1,72 +0,0 @@
|
|||||||
/**
|
|
||||||
* 存储类型定义
|
|
||||||
*/
|
|
||||||
|
|
||||||
// 订阅源
|
|
||||||
export class Subscription {
|
|
||||||
constructor(data = {}) {
|
|
||||||
this.id = data.id || crypto.randomUUID();
|
|
||||||
this.name = data.name || '';
|
|
||||||
this.url = data.url || '';
|
|
||||||
this.type = data.type || 'm3u'; // 'm3u' | 'txt'
|
|
||||||
this.enabled = data.enabled !== false;
|
|
||||||
this.lastUpdated = data.lastUpdated || 0;
|
|
||||||
this.etag = data.etag || '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 频道
|
|
||||||
export class Channel {
|
|
||||||
constructor(data = {}) {
|
|
||||||
this.id = data.id || '';
|
|
||||||
this.name = data.name || '';
|
|
||||||
this.group = data.group || '';
|
|
||||||
this.urls = data.urls || []; // string[]
|
|
||||||
this.logo = data.logo || '';
|
|
||||||
this.epgId = data.epgId || '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 线路有效性
|
|
||||||
export class SourceValidity {
|
|
||||||
constructor(data = {}) {
|
|
||||||
this.url = data.url || '';
|
|
||||||
this.status = data.status || 'unknown'; // 'online' | 'offline' | 'unknown'
|
|
||||||
this.checkedAt = data.checkedAt || 0;
|
|
||||||
this.latency = data.latency || 0;
|
|
||||||
this.failCount = data.failCount || 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 用户偏好
|
|
||||||
export class Preferences {
|
|
||||||
constructor(data = {}) {
|
|
||||||
this.defaultGroup = data.defaultGroup || '';
|
|
||||||
this.autoPlay = data.autoPlay !== false;
|
|
||||||
this.preferredQuality = data.preferredQuality || 'auto'; // 'auto' | 'hd' | 'sd'
|
|
||||||
this.volume = data.volume ?? 1.0;
|
|
||||||
this.listCacheTTL = data.listCacheTTL || 24 * 60 * 60 * 1000; // 1天
|
|
||||||
this.validityCacheTTL = data.validityCacheTTL || 12 * 60 * 60 * 1000; // 12小时
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 播放历史
|
|
||||||
export class PlayHistory {
|
|
||||||
constructor(data = {}) {
|
|
||||||
this.channelId = data.channelId || '';
|
|
||||||
this.channelName = data.channelName || '';
|
|
||||||
this.sourceUrl = data.sourceUrl || '';
|
|
||||||
this.timestamp = data.timestamp || Date.now();
|
|
||||||
this.duration = data.duration || 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 缓存元数据
|
|
||||||
export class CacheMeta {
|
|
||||||
constructor(data = {}) {
|
|
||||||
this.key = data.key || '';
|
|
||||||
this.updatedAt = data.updatedAt || 0;
|
|
||||||
this.size = data.size || 0;
|
|
||||||
this.version = data.version || 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,26 +1,10 @@
|
|||||||
import { defineConfig, loadEnv } from 'vite'
|
import { defineConfig } from 'vite'
|
||||||
import vue from '@vitejs/plugin-vue'
|
import vue from '@vitejs/plugin-vue'
|
||||||
import { resolve } from 'path'
|
|
||||||
|
|
||||||
export default defineConfig(({ mode }) => {
|
export default defineConfig({
|
||||||
// 加载对应的环境变量
|
|
||||||
const env = loadEnv(mode, process.cwd(), 'VITE_')
|
|
||||||
const platform = env.VITE_PLATFORM || 'web'
|
|
||||||
|
|
||||||
return {
|
|
||||||
plugins: [vue()],
|
plugins: [vue()],
|
||||||
base: './',
|
base: './',
|
||||||
build: {
|
build: {
|
||||||
outDir: `dist/${platform}`,
|
outDir: 'dist-web'
|
||||||
emptyOutDir: true,
|
|
||||||
},
|
|
||||||
resolve: {
|
|
||||||
alias: {
|
|
||||||
'@': resolve(__dirname, 'src'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
define: {
|
|
||||||
__PLATFORM__: JSON.stringify(platform),
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@ -8,7 +8,7 @@ WORKDIR /app
|
|||||||
# 复制前端代码
|
# 复制前端代码
|
||||||
COPY ../ui ./ui
|
COPY ../ui ./ui
|
||||||
WORKDIR /app/ui
|
WORKDIR /app/ui
|
||||||
RUN npm install && npm run build:web
|
RUN npm install && npm run build
|
||||||
|
|
||||||
# 阶段2：运行服务端
|
# 阶段2：运行服务端
|
||||||
FROM node:18-alpine
|
FROM node:18-alpine
|
||||||
@ -23,7 +23,7 @@ RUN npm install --production
|
|||||||
COPY src ./src
|
COPY src ./src
|
||||||
|
|
||||||
# 复制构建好的前端
|
# 复制构建好的前端
|
||||||
COPY --from=builder /app/ui/dist/web ./public
|
COPY --from=builder /app/ui/dist-web ./public
|
||||||
|
|
||||||
# 暴露端口
|
# 暴露端口
|
||||||
EXPOSE 3000
|
EXPOSE 3000
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user