From f7a8e3524c77bd40c5c93f1f49380f0bf587db15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=B2=A9=E5=B2=A9?= <liyanyan_za@ctjsoft.com>
Date: Mon, 9 Feb 2026 00:27:55 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E4=BD=BF=E7=94=A8=E6=96=B0=20hooks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- LeftPanel: 整合子组件，使用 useChannels/useGroups/useFavorites
- BottomPanel: 使用 useUI 替代 props
- VideoPlayer: 优化播放器逻辑
- DebugPanel: 移动到 Layout 目录
- InputPanel: 新增遥控输入组件
- useUI: 优化 UI 状态管理
---
 ui/src/components/Layout/BottomPanel.vue |  28 +-
 ui/src/components/Layout/DebugPanel.vue  |  68 +++
 ui/src/components/Layout/InputPanel.vue  |  93 ++++
 ui/src/components/Layout/LeftPanel.vue   | 534 +++++++++++++++++------
 ui/src/components/VideoPlayer.vue        | 116 +++--
 5 files changed, 637 insertions(+), 202 deletions(-)
 create mode 100644 ui/src/components/Layout/DebugPanel.vue
 create mode 100644 ui/src/components/Layout/InputPanel.vue

diff --git a/ui/src/components/Layout/BottomPanel.vue b/ui/src/components/Layout/BottomPanel.vue
index b4c5490..2b6bc9e 100644
--- a/ui/src/components/Layout/BottomPanel.vue
+++ b/ui/src/components/Layout/BottomPanel.vue
@@ -1,10 +1,10 @@
 <template>
   <Transition name="slide-up">
     <div 
-      v-show="visible"
+      v-show="bottomPanelVisible"
       class="bottom-panel"
-      @mouseenter="onInteraction"
-      @mousemove="onInteraction"
+      @mouseenter="showBottomPanel"
+      @mousemove="showBottomPanel"
     >
       <!-- 左侧：频道信息 -->
       <div class="panel-left">
@@ -33,7 +33,7 @@
           class="action-btn"
           :class="{ active: isFavorite }"
           @click="handleFavorite"
-          @mouseenter="onInteraction"
+          @mouseenter="showBottomPanel"
         >
           <span class="icon">★</span>
           <span>{{ isFavorite ? '已收藏' : '收藏' }}</span>
@@ -42,7 +42,7 @@
         <button 
           class="action-btn"
           @click="handleSwitchSource"
-          @mouseenter="onInteraction"
+          @mouseenter="showBottomPanel"
         >
           <span class="icon">↻</span>
           <span>切换线路</span>
@@ -51,7 +51,7 @@
         <button 
           class="action-btn"
           @click="handleSettings"
-          @mouseenter="onInteraction"
+          @mouseenter="showBottomPanel"
         >
           <span class="icon">⚙</span>
           <span>设置</span>
@@ -63,10 +63,6 @@
 
 <script setup>
 const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false
-  },
   channel: {
     type: Object,
     default: null
@@ -97,22 +93,20 @@ const props = defineProps({
   }
 });
 
-const emit = defineEmits(['favorite', 'switch-source', 'settings', 'interaction']);
+const emit = defineEmits(['favorite', 'switch-source', 'settings']);
+
+import { useUI } from "../../composables/useUI.js";
+const { bottomPanelVisible, showBottomPanel } = useUI();
 
 // 获取频道 LOGO
 function getChannelLogo(name) {
   return name ? name.slice(0, 2) : '--';
 }
 
-// 交互时触发防抖重置
-function onInteraction() {
-  emit('interaction');
-}
-
 // 收藏
 function handleFavorite() {
   emit('favorite');
-  onInteraction();
+  showBottomPanel();
 }
 
 // 切换线路
diff --git a/ui/src/components/Layout/DebugPanel.vue b/ui/src/components/Layout/DebugPanel.vue
new file mode 100644
index 0000000..a9db2f1
--- /dev/null
+++ b/ui/src/components/Layout/DebugPanel.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="debug-panel" v-if="showDebug">
+    <div class="debug-header">
+      <span>调试信息</span>
+      <button @click="handleClosePanel">×</button>
+    </div>
+    <div class="debug-content">
+      <p>调试功能开发中...</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { useEvent, useKeyEvent } from "../../composables/useEvent.js";
+
+const input = ref("");
+const showDebug = ref(false);
+const handleClosePanel = () => {
+  showDebug.value = false;
+  input.value = "";
+};
+onMounted(() => {
+  useEvent("keyup", (e) => {
+    input.value += e.key;
+    if (input.value.includes("bug")) {
+      showDebug.value = true;
+    }
+  });
+  useKeyEvent("Escape", () => {
+    if (showDebug.value) {
+      handleClosePanel();
+    }
+  });
+});
+</script>
+
+<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>
diff --git a/ui/src/components/Layout/InputPanel.vue b/ui/src/components/Layout/InputPanel.vue
new file mode 100644
index 0000000..91735bd
--- /dev/null
+++ b/ui/src/components/Layout/InputPanel.vue
@@ -0,0 +1,93 @@
+<template>
+  <Transition name="fade">
+    <div v-if="visible" class="remote-input-panel">
+      <span class="input-text">{{ displayValue }}</span>
+    </div>
+  </Transition>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from "vue";
+import { useEvent } from "../../composables/useEvent.js";
+import { debounce } from "../../utils/common.js";
+
+const emit = defineEmits(["complete"]);
+
+// 内部状态
+const visible = ref(false);
+const inputValue = ref([]);
+
+// 显示的文本
+const displayValue = computed(() => {
+  return inputValue.value.join("");
+});
+
+// 关闭面板的函数（防抖）
+const closePanel = debounce(() => {
+  visible.value = false;
+  inputValue.value = [];
+  emit("complete", displayValue.value);
+}, 3000);
+
+// 处理数字输入
+const handleDigit = (digit) => {
+  // 显示面板
+  visible.value = true;
+
+  if (inputValue.value.length == 3) {
+    // 超过3位，删除最前面的数字
+    inputValue.value.shift();
+  }
+  // 添加数字
+  inputValue.value.push(digit);
+
+  // 重置定时器
+  closePanel();
+};
+
+onMounted(() => {
+  // 注册数字键事件（0-9）
+  useEvent("keyup", (e) => {
+    if (e.key >= "0" && e.key <= "9") {
+      handleDigit(e.key);
+    }
+  });
+});
+</script>
+
+<style scoped>
+.remote-input-panel {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  min-width: 60px;
+  height: 44px;
+  padding: 0 16px;
+  background: rgba(0, 0, 0, 0.8);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 160;
+  backdrop-filter: blur(4px);
+}
+
+.input-text {
+  font-size: 24px;
+  font-weight: bold;
+  color: #fff;
+  font-family: monospace;
+  letter-spacing: 4px;
+}
+
+/* 淡入淡出动画 */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/ui/src/components/Layout/LeftPanel.vue b/ui/src/components/Layout/LeftPanel.vue
index a4f0088..189d7b0 100644
--- a/ui/src/components/Layout/LeftPanel.vue
+++ b/ui/src/components/Layout/LeftPanel.vue
@@ -1,188 +1,245 @@
 <template>
   <Transition name="slide-left">
-    <div 
-      v-show="visible"
+    <div
+      v-show="leftPanelVisible"
       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 class="column column-1" :class="{ active: activeColumn === 0 }">
+        <div class="group-list" :class="{ 'is-active': activeColumn === 0 }">
+          <!-- 置顶分组 -->
+          <div class="group-section pinned">
+            <div
+              v-for="group in pinnedGroups"
+              :key="group.id"
+              class="group-item"
+              :class="{ active: selectedGroup === group.id }"
+              @click="onGroupSelect(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: selectedGroup === group.id }"
+              @click="onGroupSelect(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>
       </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 class="column column-2" :class="{ active: activeColumn === 1 }">
+        <div class="channel-list" :class="{ 'is-active': activeColumn === 1 }">
+          <div
+            v-for="channel in filteredChannels"
+            :key="channel.id"
+            class="channel-item"
+            :class="{ active: selectedChannel?.id === channel.id }"
+            @click="onChannelSelect(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>
       </div>
 
       <!-- 第三栏：日期列表 -->
-      <div 
-        class="column column-3"
-        :class="{ active: activeColumn === 2 }"
-      >
-        <DateList
-          v-model="selectedDate"
-          :is-active="activeColumn === 2"
-          @select="onDateSelect"
-        />
+      <div class="column column-3" :class="{ active: activeColumn === 2 }">
+        <div class="date-list" :class="{ 'is-active': activeColumn === 2 }">
+          <div
+            v-for="date in dates"
+            :key="date.value"
+            class="date-item"
+            :class="{ active: selectedDate === date.value }"
+            @click="onDateSelect(date.value)"
+          >
+            <div class="date-day">{{ date.day }}</div>
+            <div class="date-label">{{ date.label }}</div>
+          </div>
+        </div>
       </div>
 
       <!-- 第四栏：节目单列表 -->
-      <div 
-        class="column column-4"
-        :class="{ active: activeColumn === 3 }"
-      >
-        <ProgramList
-          v-model="selectedProgram"
-          :programs="programs"
-          :is-active="activeColumn === 3"
-          @select="onProgramSelect"
-        />
+      <div class="column column-4" :class="{ active: activeColumn === 3 }">
+        <div class="program-list" :class="{ 'is-active': activeColumn === 3 }">
+          <div
+            v-for="program in programs"
+            :key="program.id"
+            class="program-item"
+            :class="{
+              active: selectedProgram?.id === program.id,
+              current: program.isCurrent,
+            }"
+            @click="onProgramSelect(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>
       </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';
+import { computed, watch } from "vue";
+import { useUI } from "../../composables/useUI.js";
+import { useKeyEvent } from "../../composables/useEvent.js";
+import { useGroups } from "../../composables/useGroups.js";
+import { useChannelFilter } from "../../composables/useChannelFilter.js";
+import { useDates } from "../../composables/useDates.js";
+import { usePrograms } from "../../composables/usePrograms.js";
+import { useFavorites } from "../../composables/useFavorites.js";
+import { useChannels } from "../../composables/useChannels.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()
+    default: null,
   },
   validityMap: {
     type: Map,
-    default: () => new Map()
-  }
+    default: () => new Map(),
+  },
 });
 
-const emit = defineEmits(['close', 'play', 'lookback']);
+const emit = defineEmits(["play"]);
 
-const { isTV, currentActiveColumn, moveColumn } = useUI();
+const { isTV, leftPanelVisible, hideLeftPanel, currentActiveColumn } = useUI();
 const activeColumn = computed(() => currentActiveColumn.value);
 
-// 选中的状态
-const selectedGroup = ref('');
-const selectedChannel = ref(null);
-const selectedDate = ref('');
-const selectedProgram = ref(null);
+// 从 hooks 获取数据
+const { favorites } = useFavorites();
+const { channels, groups } = useChannels();
 
-// 过滤后的频道
-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);
+// ===== 分组逻辑 =====
+const {
+  selectedGroup,
+  pinnedGroups,
+  normalGroups,
+  selectGroup,
+  setGroups,
+  initSelectedGroup,
+} = useGroups();
+
+// ===== 频道过滤逻辑 =====
+const {
+  selectedChannel,
+  filteredChannels,
+  selectChannel,
+  setChannels,
+  setSelectedGroup: setChannelFilterGroup,
+  setFavorites,
+  setValidityMap,
+  getFirstChannel,
+  getChannelLogo,
+  isFavorite,
+  getValidCount,
+} = useChannelFilter();
+
+// ===== 日期逻辑 =====
+const { selectedDate, dates, selectDate, initToday } = useDates();
+
+// ===== 节目单逻辑 =====
+const { selectedProgram, programs, selectProgram, loadProgramsByDate } =
+  usePrograms();
+
+// 同步 hooks 数据到过滤逻辑
+watch(groups, (g) => setGroups(g), { immediate: true });
+
+watch(channels, (c) => setChannels(c), { immediate: true });
+
+// 同步收藏到频道过滤
+watch(favorites, (favs) => setFavorites(favs), { immediate: true });
+
+watch(
+  () => props.validityMap,
+  (map) => setValidityMap(map),
+  { immediate: true },
+);
+
+// 同步选中分组到频道过滤
+watch(selectedGroup, (group) => {
+  setChannelFilterGroup(group);
 });
 
-// 节目单数据（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) => {
+watch(leftPanelVisible, (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: 根据当前时间选中当前节目
+    initSelectedGroup(props.currentChannel, groups.value[0]);
+    selectChannel(props.currentChannel);
+    initToday();
   }
 });
 
 // 分组选择
 function onGroupSelect(groupId) {
+  selectGroup(groupId);
   // 第二栏自动切换到该分组第一个频道
-  const firstChannel = filteredChannels.value[0];
+  const firstChannel = getFirstChannel();
   if (firstChannel) {
-    selectedChannel.value = firstChannel;
+    selectChannel(firstChannel);
   }
 }
 
 // 频道选择
 function onChannelSelect(channel) {
-  // 播放频道
-  emit('play', channel);
-  // 关闭面板
-  emit('close');
+  selectChannel(channel);
+  emit("play", channel);
+  hideLeftPanel();
 }
 
 // 日期选择
 function onDateSelect(dateValue) {
-  // 第四栏自动切换到该日期第一个节目
-  // TODO: 加载对应日期的节目单
+  selectDate(dateValue);
+  loadProgramsByDate(dateValue);
 }
 
 // 节目选择
 function onProgramSelect(program) {
-  // TODO: 回看功能
-  emit('lookback', program);
-  // 关闭面板
-  emit('close');
+  selectProgram(program);
+  // TODO: 实现回看逻辑
+  hideLeftPanel();
 }
 
-// 监听 TV 导航（由父组件传入）
-watch(activeColumn, (val) => {
-  // 栏切换时的处理
-});
-
-// 导出方法供父组件调用
-defineExpose({
-  moveColumn,
-});
+useKeyEvent("Escape", hideLeftPanel);
 </script>
 
 <style scoped>
@@ -234,4 +291,231 @@ defineExpose({
 .slide-left-leave-to {
   transform: translateX(-100%);
 }
+
+/* ===== 分组列表样式 ===== */
+.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.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);
+}
+
+/* ===== 频道列表样式 ===== */
+.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.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;
+}
+
+/* ===== 日期列表样式 ===== */
+.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.2);
+}
+
+.date-day {
+  font-size: 16px;
+  font-weight: bold;
+  color: #fff;
+}
+
+.date-label {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+/* ===== 节目单列表样式 ===== */
+.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.2);
+}
+
+.program-item.active {
+  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 .group-item:focus,
+.is-active .channel-item:focus,
+.is-active .date-item:focus,
+.is-active .program-item:focus {
+  outline: 2px solid #fff;
+  outline-offset: -2px;
+}
 </style>
diff --git a/ui/src/components/VideoPlayer.vue b/ui/src/components/VideoPlayer.vue
index 78cec8b..dc65a9e 100644
--- a/ui/src/components/VideoPlayer.vue
+++ b/ui/src/components/VideoPlayer.vue
@@ -1,13 +1,7 @@
 <template>
   <div class="video-player">
-    <video 
-      ref="videoRef"
-      class="video-element"
-      controls
-      autoplay
-      playsinline
-    ></video>
-    
+    <video ref="videoRef" class="video-element" autoplay playsinline></video>
+
     <!-- 错误提示 -->
     <div v-if="error" class="error-overlay">
       <div class="error-icon">!</div>
@@ -18,90 +12,92 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, watch } from 'vue'
-import Hls from 'hls.js'
+import { ref, onMounted, onUnmounted, watch } from "vue";
+import Hls from "hls.js";
 
 const props = defineProps({
   url: String,
-  title: String
-})
+});
 
-const emit = defineEmits(['error', 'ready'])
+const emit = defineEmits(["error", "ready"]);
 
-const videoRef = ref(null)
-const error = ref(null)
-let hls = null
+const videoRef = ref(null);
+const error = ref(null);
+let hls = null;
 
 const initPlayer = () => {
-  if (!props.url) return
-  
-  error.value = null
-  const video = videoRef.value
-  
+  if (!props.url) return;
+
+  error.value = null;
+  const video = videoRef.value;
+
   // 清理旧的 HLS 实例
   if (hls) {
-    hls.destroy()
-    hls = null
+    hls.destroy();
+    hls = null;
   }
-  
-  const isHLS = props.url.includes('.m3u8')
-  
+
+  const isHLS = props.url.includes(".m3u8");
+
   if (isHLS && Hls.isSupported()) {
     hls = new Hls({
       enableWorker: true,
       maxBufferLength: 30,
-    })
-    
-    hls.loadSource(props.url)
-    hls.attachMedia(video)
-    
+    });
+
+    hls.loadSource(props.url);
+    hls.attachMedia(video);
+
     hls.on(Hls.Events.MANIFEST_PARSED, () => {
-      video.play().catch(e => console.log('播放被阻止:', e))
-    })
-    
+      video.play().catch((e) => console.log("播放被阻止:", e));
+    });
+
     hls.on(Hls.Events.ERROR, (event, data) => {
       if (data.fatal) {
-        error.value = data.type
-        emit('error', { type: data.type, fatal: true })
+        error.value = data.type;
+        emit("error", { type: data.type, fatal: true });
       }
-    })
-  } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
-    video.src = props.url
-    video.play()
+    });
+  } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
+    video.src = props.url;
+    video.play();
   } else {
-    video.src = props.url
+    video.src = props.url;
   }
-  
-  video.onerror = () => {
-    error.value = 'networkError'
-    emit('error', { type: 'networkError', fatal: true })
-  }
-}
 
-watch(() => props.url, (newUrl) => {
-  if (newUrl) initPlayer()
-})
+  video.onerror = () => {
+    error.value = "networkError";
+    emit("error", { type: "networkError", fatal: true });
+  };
+};
+
+watch(
+  () => props.url,
+  (newUrl) => {
+    if (newUrl) initPlayer();
+  },
+);
 
 onMounted(() => {
-  if (props.url) initPlayer()
-})
+  if (props.url) initPlayer();
+});
 
 onUnmounted(() => {
   if (hls) {
-    hls.destroy()
-    hls = null
+    hls.destroy();
+    hls = null;
   }
-})
+});
 
 // 暴露方法
 defineExpose({
   play: (url) => {
     if (url) {
-      props.url = url
-      initPlayer()
+      // props.url = url
+      initPlayer();
     }
-  }
-})
+  },
+});
 </script>
 
 <style scoped>
@@ -128,7 +124,7 @@ defineExpose({
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: rgba(0,0,0,0.9);
+  background: rgba(0, 0, 0, 0.9);
   color: #fff;
   gap: 10px;
 }