From 14bc8ffbf7f3bdc497a97a0c4fe440ae1b5b6c40 Mon Sep 17 00:00:00 2001
From: yueliuli <1628111725@qq.com>
Date: Fri, 8 May 2026 10:12:04 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=EF=BC=9A=E5=AF=B9=E8=AF=9D?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E9=AB=98=E4=BA=AE=E6=98=BE=E7=A4=BA=E5=BD=93?=
 =?UTF-8?q?=E5=89=8D=E5=AF=B9=E8=AF=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修改：对话添加hover样式
---
 .../hazard_inspect/SubtitleList.vue           | 63 +++++++++++++++++--
 src/pages/nav/HazardCheckResult/index.vue     | 10 ++-
 2 files changed, 67 insertions(+), 6 deletions(-)

diff --git a/src/components/hazard_inspect/SubtitleList.vue b/src/components/hazard_inspect/SubtitleList.vue
index 118871c..31a5db5 100644
--- a/src/components/hazard_inspect/SubtitleList.vue
+++ b/src/components/hazard_inspect/SubtitleList.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { CaretRight, Location } from '@element-plus/icons-vue'
-/**
- * 项目列表展示组件
- * 接收两个参数：title（字符串）和data（字符串数组）
- */
+import { ref, shallowRef, watch } from 'vue'
+
 const props = defineProps({
   title: {
     type: String,
@@ -13,6 +11,10 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  currentTime: {
+    type: Number,
+    default: 0,
+  },
 })
 
 const emit = defineEmits(['click', 'play'])
@@ -25,6 +27,49 @@ function handlePlayClick(e: Event, item: any[], index: number) {
   e.stopPropagation()
   emit('play', item, index)
 }
+
+const dataCache = shallowRef<[number, string, string, string][]>([])
+const indexMap = ref(new Map<number, number[]>())
+const sortedTimes = ref<number[]>([])
+
+watch(() => props.data, (newData) => {
+  const arr = newData as [number, string, string, string][]
+  dataCache.value = arr
+  const map = new Map<number, number[]>()
+  const times: number[] = []
+  for (let i = 0; i < arr.length; i++) {
+    const t = (arr[i][0] * 10) | 0
+    if (!map.has(t)) {
+      map.set(t, [])
+      times.push(t)
+    }
+    map.get(t)!.push(i)
+  }
+  times.sort((a, b) => a - b)
+  indexMap.value = map
+  sortedTimes.value = times
+}, { immediate: true })
+
+const currentHighlight = ref(-1)
+
+watch(() => props.currentTime, (t) => {
+  const time = (t * 10) | 0
+  const indices = indexMap.value.get(time)
+  if (indices && indices.length > 0) {
+    currentHighlight.value = indices[0]
+    return
+  }
+  const times = sortedTimes.value
+  let prev = times[times.length - 1] || 0
+  for (let i = 0; i < times.length; i++) {
+    if (times[i] > time) {
+      prev = times[i - 1] ?? prev
+      break
+    }
+  }
+  const prevIndices = indexMap.value.get(prev)
+  currentHighlight.value = prevIndices?.[0] ?? 0
+}, { immediate: true })
 </script>
 
 <template>
@@ -40,7 +85,7 @@ function handlePlayClick(e: Event, item: any[], index: number) {
     <!-- 滚动列表区域 -->
     <el-row style="flex: 1; overflow-y: auto;">
       <el-col>
-        <el-row v-for="(item, index) in props.data" :key="index" class="message-item">
+        <el-row v-for="(item, index) in props.data" :key="index" class="message-item" :class="{ highlighted: currentHighlight === index }">
           <div class="message-content" @click="handleItemClick(item as any[], index)">
             <div class="flex flex-col items-start">
               <div class="flex flex-row gap-2">
@@ -97,6 +142,14 @@ function handlePlayClick(e: Event, item: any[], index: number) {
   padding: 4px 0.75rem;
 }
 
+.message-item:hover {
+  background-color: var(--ep-bg-color-page);
+}
+
+.message-item.highlighted {
+  background-color: var(--ep-color-primary-light-8) !important;
+}
+
 .message-content {
   flex: 1;
   cursor: pointer;
diff --git a/src/pages/nav/HazardCheckResult/index.vue b/src/pages/nav/HazardCheckResult/index.vue
index fa3ef9e..5925367 100644
--- a/src/pages/nav/HazardCheckResult/index.vue
+++ b/src/pages/nav/HazardCheckResult/index.vue
@@ -113,6 +113,10 @@ const data = ref<DataFormat>({
 
 const selectedHazard = ref(-1)
 const currentFrame = ref(0)
+
+const videoCurrentTime = computed(() => {
+  return currentFrame.value / 30
+})
 const videoDuration = ref(0)
 const FPS = 30
 const totalFrames = computed(() => {
@@ -143,7 +147,8 @@ function updateCurrentFrame() {
   const videoEl = videoRef.value
   if (!videoEl)
     return
-  currentFrame.value = Math.floor(videoEl.currentTime * 30)
+  const newFrame = Math.floor(videoEl.currentTime * 30)
+  currentFrame.value = newFrame
 }
 
 function handleVideoLoadedMetadata() {
@@ -229,6 +234,7 @@ function handleJumpToTimePoint(seconds: number) {
 
   // 直接设置 currentTime 实现跳转
   videoEl.currentTime = seconds
+  currentFrame.value = Math.floor(seconds * 30)
 
   // 跳转后自动暂停
   videoEl.pause()
@@ -244,6 +250,7 @@ function handlePlayAndSeek(item: any[]) {
     return
 
   videoEl.currentTime = seconds
+  currentFrame.value = Math.floor(seconds * 30)
   videoEl.play()
 }
 
@@ -461,6 +468,7 @@ onMounted(() => {
           <SubtitleList
             title="对话"
             :data="data.对话列表"
+            :current-time="videoCurrentTime"
             @click="(item: any[]) => handleJumpToTimePoint(Number(item[0]))"
             @play="(item: any[]) => handlePlayAndSeek(item)"
           />