feat(video-play): 添加正在播放视频的高亮显示并优化滚动定位

- 在表格中添加当前播放视频的高亮样式，使用蓝色背景突出显示
- 当双击播放视频时，自动滚动表格使当前视频行可见
- 新增 tableRowClassName 方法用于设置表格行样式

video_play/index.html

@@ -43,7 +43,8 @@
             <!-- 视频列表 -->
             <el-aside width="450px" style="background: #f5f5f5; height: 100vh;">
                 <h3 style="margin-bottom: 15px;">视频列表（双击播放）</h3>
-                <el-table :data="filteredFiles" stripe height="calc(100vh - 60px)" @row-dblclick="playSelected">
+                <el-table :data="filteredFiles" stripe height="calc(100vh - 60px)" @row-dblclick="playSelected"
+                    :row-class-name="tableRowClassName">
                     <el-table-column prop="filename" label="文件名"></el-table-column>
                     <el-table-column label="权重" width="150">
                         <template slot-scope="{row}">
@@ -70,8 +71,7 @@
                     currentVideo: '',
                     currentVideoMD5: '',
                     loopMode: true,
-                    infiniteLoop: false
-                    ,
+                    infiniteLoop: false,
                     selectedFileType: 'video'
                 }
             },
@@ -180,6 +180,25 @@
                             player.play().catch(error => {
                                 this.$message.warning('需要手动点击播放（浏览器限制）')
                             })
+
+                            // 根据md5找到列表中的当前视频，如果不可见就滚动到可见
+                            const index = this.filteredFiles.findIndex(file => file.md5 === this.currentVideoMD5);
+                            if (index !== -1) {
+                                this.$nextTick(() => {
+                                    const tableEl = this.$el.querySelector('.el-table__body-wrapper');
+                                    const rowEl = tableEl.querySelectorAll('.el-table__row')[index];
+                                    if (rowEl) {
+                                        const rowTop = rowEl.offsetTop;
+                                        const rowBottom = rowTop + rowEl.offsetHeight;
+                                        const viewportTop = tableEl.scrollTop;
+                                        const viewportBottom = viewportTop + tableEl.clientHeight;
+
+                                        if (rowTop < viewportTop || rowBottom > viewportBottom) {
+                                            tableEl.scrollTop = rowTop - tableEl.clientHeight / 2 + rowEl.offsetHeight / 2;
+                                        }
+                                    }
+                                });
+                            }
                         })
                     } catch (error) {
                         this.$message.error('获取视频失败')
@@ -209,10 +228,24 @@
                         this.$message.warning('请先选择要循环的视频')
                         this.infiniteLoop = false
                     }
+                },
+                // 新增方法: 表格行样式
+                tableRowClassName({ row }) {
+                    if (row.md5 === this.currentVideoMD5) {
+                        return 'current-playing-row';
+                    }
+                    return '';
                 }
             }
         })
     </script>
+
+    <style>
+        /* 新增样式: 当前行样式 */
+        .current-playing-row td {
+            background-color: #b1c6ef !important;
+        }
+    </style>
 </body>
 
 </html>