feat(ui): 实现完整的四栏布局和播放逻辑

- 新增 composables/useUI.js - UI 状态管理和防抖隐藏 - 新增 composables/useStorage.js - Storage 封装 - 新增 Layout 组件 - LeftPanel(四栏)/BottomPanel - 新增 Modals 组件 - SourceModal/SettingsModal - 新增 DebugPanel 组件 - 重写 App.vue - 完整播放控制逻辑 - 渐进式频道加载 - HTTP HEAD 测速排序 - 自动选线/失败重试 - 收藏/最近播放持久化 - 更新 VideoPlayer - 错误事件通知 - 更新 SettingsModal - 缓存管理功能 - 新增 TODO.md
feat(storage): 实现跨平台 Storage API 抽象层
2026-02-05 18:31:37 +08:00 · 2026-02-05 14:29:42 +08:00 · 2026-02-05 14:19:28 +08:00 · 2026-02-05 12:49:07 +08:00
33 changed files with 3041 additions and 1122 deletions
--- a/.gitignore
+++ b/.gitignore
@ -68,13 +68,6 @@ android-tv/app/src/main/assets/www/
 !android-tv/app/src/main/assets/error.html
 !android-tv/app/src/main/assets/test.html

-# ================================================
-# HarmonyOS
-# ================================================
-harmonyos/.idea/
-harmonyos/build/
-harmonyos/entry/build/
-
 # ================================================
 # Docker
 # ================================================
@ -97,11 +90,8 @@ lerna-debug.log*
 # ================================================
 # Environment
 # ================================================
-.env
 .env.local
 .env.*.local
-.env.development
-.env.test

 # ================================================
 # Testing
--- a/README.md
+++ b/README.md
@ -1,6 +1,6 @@
 # 📺 IPTV 跨平台应用

-基于 Web 技术的跨平台 IPTV 播放器，一套代码支持 Windows、Mac、Android、Android TV、HarmonyOS。
+基于 Web 技术的跨平台 IPTV 播放器，一套代码支持 Windows、Mac、Android、Android TV、Web。

 ## 项目结构

@ -17,7 +17,7 @@ iptv-app/
 ├── desktop/            # 🖥️ Tauri 桌面端 (Win/Mac)
 ├── android/            # 📱 Android WebView 壳
 ├── android-tv/         # 📺 Android TV WebView 壳
-└── harmonyos/          # 🔶 HarmonyOS WebView 壳
+└── web/                # 🐳 Docker Web 服务端
 ```

 ## 技术栈
@ -29,7 +29,7 @@ iptv-app/
 | Desktop | Tauri (Rust) | 轻量 (~5MB)，高性能 |
 | Android | WebView + ExoPlayer | 手机/平板 Web 壳 |
 | Android TV | WebView + Leanback | TV 专用，支持遥控器导航 |
-| HarmonyOS | Web 组件 + Video 组件 | Web 壳 + 原生播放器 |
+| Web | Node.js + Docker | 网页端 + 代理服务 |

 ## 快速开始

--- a/TODO.md
+++ b/TODO.md
@ -0,0 +1,22 @@
+# TODO 列表
+
+## 高优先级
+
+- [x] 多平台打包配置
+- [x] Storage API 抽象层
+- [x] UI 布局改造（四栏布局）
+- [x] 频道加载与测速排序
+- [x] 播放控制（自动选线、失败重试）
+- [x] 缓存管理（清除功能）
+
+## 中优先级
+
+- [ ] 最近播放逻辑完善（数据持久化）
+- [ ] 收藏功能完善（实时更新收藏状态）
+- [ ] EPG 节目单数据获取与解析
+
+## 低优先级（后排）
+
+- [ ] TV 遥控器导航（四栏之间方向键移动焦点）
+- [ ] 时移播放（回看功能）
+- [ ] 搜索功能（Web/Desktop）
--- a/android-tv/app/src/main/java/com/iptv/tv/AssetReader.java
+++ b/android-tv/app/src/main/java/com/iptv/tv/AssetReader.java
@ -1,6 +1,7 @@
 package com.iptv.tv;

 import android.content.Context;
+import android.content.SharedPreferences;
 import android.webkit.JavascriptInterface;
 import java.io.BufferedReader;
 import java.io.IOException;
@ -9,9 +10,12 @@ import java.io.InputStreamReader;

 public class AssetReader {
    private Context context;
+    private SharedPreferences prefs;
+    private static final String PREFS_NAME = "IPTVData";

    public AssetReader(Context context) {
        this.context = context;
+        this.prefs = context.getSharedPreferences(PREFS_NAME, Context.MODE_PRIVATE);
    }

    @JavascriptInterface
@ -45,4 +49,31 @@ public class AssetReader {
            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();
+    }
 }
--- a/android-tv/build.sh
+++ b/android-tv/build.sh
@ -7,16 +7,16 @@ set -e
 echo "=== IPTV Android TV 构建 ==="

 # 检查 UI 构建产物
-if [ ! -d "../ui/dist-web" ]; then
-    echo "错误: 未找到 ../ui/dist-web 目录"
-    echo "请先构建 Web UI: cd ../ui && npm run build"
+if [ ! -d "../ui/dist/tv" ]; then
+    echo "错误: 未找到 ../ui/dist/tv 目录"
+    echo "请先构建 Web UI: cd ../ui && npm run build:tv"
    exit 1
 fi

 # 复制 Web 资源到 Android assets
 echo "复制 Web 资源..."
 mkdir -p app/src/main/assets/www
-cp -r ../ui/dist-web/* app/src/main/assets/www/
+cp -r ../ui/dist/tv/* app/src/main/assets/www/

 # 统计文件
 echo "已复制文件数量:"
--- a/android/app/src/main/java/com/iptv/app/AssetReader.java
+++ b/android/app/src/main/java/com/iptv/app/AssetReader.java
@ -1,6 +1,7 @@
 package com.iptv.app;

 import android.content.Context;
+import android.content.SharedPreferences;
 import android.webkit.JavascriptInterface;
 import java.io.BufferedReader;
 import java.io.IOException;
@ -9,15 +10,17 @@ import java.io.InputStreamReader;

 public class AssetReader {
    private Context context;
+    private SharedPreferences prefs;
+    private static final String PREFS_NAME = "IPTVData";

    public AssetReader(Context context) {
        this.context = context;
+        this.prefs = context.getSharedPreferences(PREFS_NAME, Context.MODE_PRIVATE);
    }

    @JavascriptInterface
    public String readFile(String path) {
        try {
-            // path 如: "www/api/result.txt"
            InputStream is = context.getAssets().open(path);
            BufferedReader reader = new BufferedReader(new InputStreamReader(is));
            StringBuilder sb = new StringBuilder();
@ -46,4 +49,31 @@ public class AssetReader {
            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();
+    }
 }
--- a/android/build.sh
+++ b/android/build.sh
@ -7,16 +7,16 @@ set -e
 echo "=== IPTV Android 构建 ==="

 # 检查 UI 构建产物
-if [ ! -d "../ui/dist-web" ]; then
-    echo "错误: 未找到 ../ui/dist-web 目录"
-    echo "请先构建 Web UI: cd ../ui && npm run build"
+if [ ! -d "../ui/dist/android" ]; then
+    echo "错误: 未找到 ../ui/dist/android 目录"
+    echo "请先构建 Web UI: cd ../ui && npm run build:android"
    exit 1
 fi

 # 复制 Web 资源到 Android assets
 echo "复制 Web 资源..."
 mkdir -p app/src/main/assets/www
-cp -r ../ui/dist-web/* app/src/main/assets/www/
+cp -r ../ui/dist/android/* app/src/main/assets/www/

 # 统计文件
 echo "已复制文件数量:"
--- a/build-mac.sh
+++ b/build-mac.sh
@ -17,8 +17,8 @@ echo "✓ Rust 已安装 ($(cargo --version))"
 echo "📦 步骤 1/4: 构建 ui 应用..."
 cd ui
 npm install
-npm run build
-cp -r public/api dist-web/
+npm run build:desktop
+cp -r public/api dist/desktop/
 cd ..

 # 步骤2: 安装 Tauri 依赖
--- a/desktop/src-tauri/tauri.conf.json
+++ b/desktop/src-tauri/tauri.conf.json
@ -2,8 +2,8 @@
  "build": {
    "beforeBuildCommand": "",
    "beforeDevCommand": "",
-    "devPath": "../../ui/dist-web",
-    "distDir": "../../ui/dist-web",
+    "devPath": "../../ui/dist/desktop",
+    "distDir": "../../ui/dist/desktop",
    "withGlobalTauri": false
  },
  "tauri": {
--- a/ui/.env.android
+++ b/ui/.env.android
@ -0,0 +1,4 @@
+VITE_PLATFORM=android
+VITE_API_BASE=/api
+VITE_STORAGE_TYPE=android
+VITE_ANDROID_ASSET=true
--- a/ui/.env.desktop
+++ b/ui/.env.desktop
@ -0,0 +1,3 @@
+VITE_PLATFORM=desktop
+VITE_API_BASE=/api
+VITE_STORAGE_TYPE=indexeddb
--- a/ui/.env.tv
+++ b/ui/.env.tv
@ -0,0 +1,5 @@
+VITE_PLATFORM=tv
+VITE_API_BASE=/api
+VITE_STORAGE_TYPE=android
+VITE_ANDROID_ASSET=true
+VITE_TV_MODE=true
--- a/ui/.env.web
+++ b/ui/.env.web
@ -0,0 +1,3 @@
+VITE_PLATFORM=web
+VITE_API_BASE=/api
+VITE_STORAGE_TYPE=indexeddb
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@ -10,6 +10,7 @@
      "dependencies": {
        "@vueuse/core": "^14.2.0",
        "hls.js": "^1.5.0",
+        "idb": "^8.0.3",
        "pinia": "^3.0.4",
        "vue": "^3.4.0",
        "vue-router": "^4.2.0"
@ -351,6 +352,11 @@
      "resolved": "https://registry.npmmirror.com/hookable/-/hookable-5.5.3.tgz",
      "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": {
      "version": "5.5.0",
      "resolved": "https://registry.npmmirror.com/is-what/-/is-what-5.5.0.tgz",
@ -845,6 +851,11 @@
      "resolved": "https://registry.npmmirror.com/hookable/-/hookable-5.5.3.tgz",
      "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": {
      "version": "5.5.0",
      "resolved": "https://registry.npmmirror.com/is-what/-/is-what-5.5.0.tgz",
--- a/ui/package.json
+++ b/ui/package.json
@ -4,12 +4,17 @@
  "type": "module",
  "scripts": {
    "dev": "vite",
-    "build": "vite build",
+    "build": "vite build --mode production",
+    "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"
  },
  "dependencies": {
    "@vueuse/core": "^14.2.0",
    "hls.js": "^1.5.0",
+    "idb": "^8.0.3",
    "pinia": "^3.0.4",
    "vue": "^3.4.0",
    "vue-router": "^4.2.0"
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
--- a/ui/src/components/DebugPanel.vue
+++ b/ui/src/components/DebugPanel.vue
@ -0,0 +1,43 @@
+<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>
--- a/ui/src/components/Layout/BottomPanel.vue
+++ b/ui/src/components/Layout/BottomPanel.vue
@ -0,0 +1,273 @@
+<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>
--- a/ui/src/components/Layout/ChannelList.vue
+++ b/ui/src/components/Layout/ChannelList.vue
@ -0,0 +1,160 @@
+<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>
--- a/ui/src/components/Layout/DateList.vue
+++ b/ui/src/components/Layout/DateList.vue
@ -0,0 +1,108 @@
+<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>
--- a/ui/src/components/Layout/GroupList.vue
+++ b/ui/src/components/Layout/GroupList.vue
@ -0,0 +1,169 @@
+<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>
--- a/ui/src/components/Layout/LeftPanel.vue
+++ b/ui/src/components/Layout/LeftPanel.vue
@ -0,0 +1,237 @@
+<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>
--- a/ui/src/components/Layout/ProgramList.vue
+++ b/ui/src/components/Layout/ProgramList.vue
@ -0,0 +1,112 @@
+<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>
--- a/ui/src/components/Modals/SettingsModal.vue
+++ b/ui/src/components/Modals/SettingsModal.vue
@ -0,0 +1,366 @@
+<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>
--- a/ui/src/components/Modals/SourceModal.vue
+++ b/ui/src/components/Modals/SourceModal.vue
@ -0,0 +1,142 @@
+<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>
--- a/ui/src/components/VideoPlayer.vue
+++ b/ui/src/components/VideoPlayer.vue
@ -26,6 +26,8 @@ const props = defineProps({
  title: String
 })

+const emit = defineEmits(['error', 'ready'])
+
 const videoRef = ref(null)
 const error = ref(null)
 let hls = null
@ -60,6 +62,7 @@ const initPlayer = () => {
    hls.on(Hls.Events.ERROR, (event, data) => {
      if (data.fatal) {
        error.value = data.type
+        emit('error', { type: data.type, fatal: true })
      }
    })
  } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
@ -71,6 +74,7 @@ const initPlayer = () => {
  
  video.onerror = () => {
    error.value = 'networkError'
+    emit('error', { type: 'networkError', fatal: true })
  }
 }

--- a/ui/src/composables/useStorage.js
+++ b/ui/src/composables/useStorage.js
@ -0,0 +1,169 @@
+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;
+}
--- a/ui/src/composables/useUI.js
+++ b/ui/src/composables/useUI.js
@ -0,0 +1,137 @@
+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;
+}
--- a/ui/src/storage/adapters/README.md
+++ b/ui/src/storage/adapters/README.md
@ -0,0 +1,8 @@
+# Storage Adapters
+
+存储适配器目录，按平台分离实现：
+
+- `indexeddb.js` - Web/Desktop 端（使用 IndexedDB）
+- `native.js` - Android/TV 端（通过 JS Bridge 调用原生存储）
+
+目前所有实现统一在 `../index.js` 中，如需拆分可在此目录创建单独文件。
--- a/ui/src/storage/index.js
+++ b/ui/src/storage/index.js
@ -0,0 +1,467 @@
+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;
--- a/ui/src/storage/types.js
+++ b/ui/src/storage/types.js
@ -0,0 +1,72 @@
+/**
+ * 存储类型定义
+ */
+
+// 订阅源
+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;
+  }
+}
--- a/ui/vite.config.js
+++ b/ui/vite.config.js
@ -1,10 +1,26 @@
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'

-export default defineConfig({
-  plugins: [vue()],
-  base: './',
-  build: {
-    outDir: 'dist-web'
+export default defineConfig(({ mode }) => {
+  // 加载对应的环境变量
+  const env = loadEnv(mode, process.cwd(), 'VITE_')
+  const platform = env.VITE_PLATFORM || 'web'
+  
+  return {
+    plugins: [vue()],
+    base: './',
+    build: {
+      outDir: `dist/${platform}`,
+      emptyOutDir: true,
+    },
+    resolve: {
+      alias: {
+        '@': resolve(__dirname, 'src'),
+      },
+    },
+    define: {
+      __PLATFORM__: JSON.stringify(platform),
+    },
  }
 })
--- a/web/Dockerfile
+++ b/web/Dockerfile
@ -8,7 +8,7 @@ WORKDIR /app
 # 复制前端代码
 COPY ../ui ./ui
 WORKDIR /app/ui
-RUN npm install && npm run build
+RUN npm install && npm run build:web

 # 阶段2：运行服务端
 FROM node:18-alpine
@ -23,7 +23,7 @@ RUN npm install --production
 COPY src ./src

 # 复制构建好的前端
-COPY --from=builder /app/ui/dist-web ./public
+COPY --from=builder /app/ui/dist/web ./public

 # 暴露端口
 EXPOSE 3000
Author	SHA1	Message	Date
李岩岩	d85823cc8d	feat(ui): 实现完整的四栏布局和播放逻辑 - 新增 composables/useUI.js - UI 状态管理和防抖隐藏 - 新增 composables/useStorage.js - Storage 封装 - 新增 Layout 组件 - LeftPanel(四栏)/BottomPanel - 新增 Modals 组件 - SourceModal/SettingsModal - 新增 DebugPanel 组件 - 重写 App.vue - 完整播放控制逻辑 - 渐进式频道加载 - HTTP HEAD 测速排序 - 自动选线/失败重试 - 收藏/最近播放持久化 - 更新 VideoPlayer - 错误事件通知 - 更新 SettingsModal - 缓存管理功能 - 新增 TODO.md	2026-02-05 18:31:37 +08:00
李岩岩	380f4ab4d6	feat(storage): 实现跨平台 Storage API 抽象层 - 添加统一的 IStorage 接口定义 - 实现 IndexedDBStorage (Web/Desktop) - 实现 NativeStorage (Android/TV) - 添加类型定义 (Subscription, Channel, SourceValidity等) - 更新 Android/TV AssetReader 支持 SharedPreferences - 安装 idb 库用于 IndexedDB 操作	2026-02-05 14:29:42 +08:00
李岩岩	2cab50db31	feat(build): 配置多平台打包输出 - 添加 .env.web/.desktop/.android/.tv 环境变量文件 - 修改 vite.config.js 支持多平台输出到 dist/{platform}/ - 添加 npm run build:web/desktop/android/tv 命令 - 更新 desktop/android/android-tv/web 各端的资源引用路径 - 更新 build-mac.sh 使用 build:desktop 命令	2026-02-05 14:19:28 +08:00
李岩岩	a143c9023c	chore: 移除 HarmonyOS 支持 - HarmonyOS 套壳较为复杂，暂时放弃支持 - 更新 README 项目结构说明 - 更新 .gitignore 移除鸿蒙相关配置	2026-02-05 12:49:07 +08:00