fix:修复历史记录选择。新增代理播放配置

Author: Taois

dashboard/src/components/AddressHistory.vue

@@ -9,17 +9,17 @@
       <div class="address-history-content">
         <div class="history-header">
           <span class="history-title">历史配置</span>
-          <span class="history-count">{{ histories.length }}/10</span>
+          <span class="history-count">{{ filteredHistories.length }}/10</span>
         </div>
 
-        <div v-if="histories.length === 0" class="empty-state">
+        <div v-if="filteredHistories.length === 0" class="empty-state">
           <icon-history class="empty-icon" />
-          <span class="empty-text">暂无历史配置</span>
+          <span class="empty-text">{{ histories.length === 0 ? '暂无历史配置' : '无其他历史配置' }}</span>
         </div>
 
         <div v-else class="history-list">
           <div 
-            v-for="(item, index) in histories" 
+            v-for="(item, index) in filteredHistories" 
             :key="index"
             class="history-item"
             @click="selectHistory(item)"
@@ -66,7 +66,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, nextTick } from 'vue'
 import { Message } from '@arco-design/web-vue'
 import { 
   IconHistory, 
@@ -92,6 +92,23 @@ const histories = ref([])
 // 获取存储键名
 const storageKey = computed(() => `address-history-${props.configKey}`)
 
+
+
+// 过滤后的历史记录（隐藏与当前输入框相同的地址）
+const filteredHistories = computed(() => {
+  if (!props.currentValue || !props.currentValue.trim()) {
+    return histories.value
+  }
+  
+  const currentUrl = props.currentValue.trim().toLowerCase()
+  const filtered = histories.value.filter(item => {
+    const historyUrl = (item.url || '').trim().toLowerCase()
+    return historyUrl !== currentUrl
+  })
+  
+  return filtered
+})
+
 // 加载历史记录
 const loadHistories = () => {
   try {
@@ -123,24 +140,24 @@ const addHistory = (url) => {
   // 检查是否已存在
   const existingIndex = histories.value.findIndex(item => item.url === trimmedUrl)
   if (existingIndex !== -1) {
-    // 如果已存在，移到最前面并更新时间
-    const existing = histories.value.splice(existingIndex, 1)[0]
-    existing.timestamp = Date.now()
-    histories.value.unshift(existing)
-  } else {
-    // 添加新记录
-    histories.value.unshift({
-      url: trimmedUrl,
-      timestamp: Date.now()
-    })
+    // 如果已存在，不做任何操作，避免重复添加
+    console.log('地址已存在于历史记录中，跳过添加:', trimmedUrl)
+    return
   }
   
+  // 只在不存在时添加新记录
+  histories.value.unshift({
+    url: trimmedUrl,
+    timestamp: Date.now()
+  })
+  
   // 保持最多10条记录
   if (histories.value.length > 10) {
     histories.value = histories.value.slice(0, 10)
   }
   
   saveHistories()
+  console.log('已添加新地址到历史记录:', trimmedUrl)
 }
 
 // 选择历史记录
@@ -152,9 +169,20 @@ const selectHistory = (item) => {
 
 // 删除单个历史记录
 const deleteHistory = (index) => {
-  histories.value.splice(index, 1)
-  saveHistories()
-  Message.success('已删除历史记录')
+  // 从过滤后的列表中获取要删除的项
+  const itemToDelete = filteredHistories.value[index]
+  if (!itemToDelete) return
+  
+  // 在原始列表中找到对应的索引并删除
+  const originalIndex = histories.value.findIndex(item => 
+    item.url === itemToDelete.url && item.timestamp === itemToDelete.timestamp
+  )
+  
+  if (originalIndex !== -1) {
+    histories.value.splice(originalIndex, 1)
+    saveHistories()
+    Message.success('已删除历史记录')
+  }
 }
 
 // 清空所有历史记录
@@ -184,12 +212,7 @@ const formatTime = (timestamp) => {
   }
 }
 
-// 监听当前值变化，自动保存到历史记录
-watch(() => props.currentValue, (newValue, oldValue) => {
-  if (oldValue && oldValue.trim() && newValue !== oldValue) {
-    addHistory(oldValue)
-  }
-}, { flush: 'post' })
+// 注释：移除自动保存逻辑，改为只在点击保存按钮时手动调用 addHistory
 
 // 暴露添加历史记录的方法
 defineExpose({

dashboard/src/components/players/ArtVideoPlayer.vue

@@ -13,6 +13,7 @@
       @player-change="handlePlayerTypeChange"
       @open-skip-settings="openSkipSettingsDialog"
       @toggle-debug="toggleDebugDialog"
+      @proxy-change="handleProxyChange"
       @close="closePlayer"
     />
     <div class="art-player-wrapper" v-show="props.visible">
@@ -81,6 +82,7 @@ import SkipSettingsDialog from './SkipSettingsDialog.vue'
 import DebugInfoDialog from './DebugInfoDialog.vue'
 import { useSkipSettings } from '@/composables/useSkipSettings'
 import { applyCSPBypass, setVideoReferrerPolicy, REFERRER_POLICIES, getCSPConfig } from '@/utils/csp'
+import { processVideoUrl, isProxyPlayEnabled } from '@/utils/proxyPlayer'
 
 // Props - 已添加 HLS 支持、动态高度自适应和自动下一集功能
 const props = defineProps({
@@ -279,11 +281,24 @@ const initArtPlayer = async (url) => {
   
   // 如果播放器实例已存在，使用 switchUrl 方法切换视频源
   if (artPlayerInstance.value) {
-    console.log('使用 switchUrl 方法切换视频源:', url)
+    // 准备自定义请求头
+    const cspConfig = getCSPConfig()
+    const headers = {
+      ...(props.headers || {}),
+      ...(cspConfig.autoBypass ? {} : {})
+    }
+    
+    // 处理代理播放地址
+    const finalUrl = processVideoUrl(url, headers)
+    if (finalUrl !== url) {
+      console.log('🔄 [代理播放] switchUrl使用代理地址')
+    }
+    
+    console.log('使用 switchUrl 方法切换视频源:', finalUrl)
     
     try {
       // 使用 switchUrl 方法切换视频源，这样可以保持全屏状态和其他用户设置
-      await artPlayerInstance.value.switchUrl(url)
+      await artPlayerInstance.value.switchUrl(finalUrl)
       console.log('视频源切换成功')
       
       // 重置片头片尾跳过状态
@@ -308,15 +323,28 @@ const initArtPlayer = async (url) => {
   }
   
   try {
+    // 准备自定义请求头
+    const cspConfig = getCSPConfig()
+    const headers = {
+      ...(props.headers || {}),
+      ...(cspConfig.autoBypass ? {} : {})
+    }
+    
+    // 处理代理播放地址
+    const finalUrl = processVideoUrl(url, headers)
+    if (finalUrl !== url) {
+      console.log('🔄 [代理播放] 使用代理地址播放视频')
+    }
+    
     // 检测视频格式
-    const videoFormat = detectVideoFormat(url)
+    const videoFormat = detectVideoFormat(finalUrl)
     detectedFormat.value = videoFormat
     console.log('检测到视频格式:', videoFormat)
     
     // 创建 ArtPlayer 实例
     const art = new Artplayer({
       container: artPlayerContainer.value,
-      url: url,
+      url: finalUrl,
       poster: props.poster,
       volume: 0.7,
       isLive: false,
@@ -588,6 +616,41 @@ const handlePlayerTypeChange = (newType) => {
   emit('player-change', newType)
 }
 
+// 处理代理播放地址变更
+const handleProxyChange = (proxyUrl) => {
+  console.log('代理播放地址变更:', proxyUrl)
+  
+  try {
+    // 获取当前的addressSettings
+    const savedAddresses = JSON.parse(localStorage.getItem('addressSettings') || '{}')
+    
+    if (proxyUrl === 'disabled') {
+      // 关闭代理播放
+      savedAddresses.proxyPlayEnabled = false
+      savedAddresses.proxyPlay = ''
+    } else {
+      // 启用代理播放并设置地址
+      savedAddresses.proxyPlayEnabled = true
+      savedAddresses.proxyPlay = proxyUrl
+    }
+    
+    // 保存到localStorage
+    localStorage.setItem('addressSettings', JSON.stringify(savedAddresses))
+    
+    // 触发自定义事件，通知其他组件设置已变化
+    window.dispatchEvent(new CustomEvent('addressSettingsChanged'))
+    
+    // 重新加载视频以应用新的代理设置
+    if (props.videoUrl) {
+      nextTick(() => {
+        initArtPlayer(props.videoUrl)
+      })
+    }
+  } catch (error) {
+    console.error('保存代理播放设置失败:', error)
+  }
+}
+
 // 打开片头片尾设置弹窗
 const openSkipSettingsDialog = () => {
   showSkipSettingsDialog.value = true