实现拖拽功能

doc/h5/src/static/imgs/progress.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="12" height="208" fill="none" viewBox="0 0 12 208"><path fill="#000" d="M1 0h10v10.951a2 2 0 0 1-.731 1.547l-3 2.461a2 2 0 0 1-2.538 0l-3-2.461A2 2 0 0 1 1 10.95z"/><path stroke="#000" d="M6 13v204"/></svg>
\ No newline at end of file

doc/h5/src/views/project/components/StepFour copy 2.vue

-<template>
-  <div class="video-wrapper" @mouseenter="showControls = true" @mouseleave="showControls = false">
-    
-    <!-- 1. 视频本体 (隐藏自带控件) -->
-    <video 
-      ref="videoRef"
-      src="https://www.w3schools.com/html/mov_bbb.mp4"
-      @timeupdate="handleTimeUpdate"
-      @loadedmetadata="handleLoadedMetadata"
-      @ended="handleEnded"
-    ></video>
-
-    <!-- 2. 自定义控制层 (只在悬停时显示) -->
-    <div class="custom-controls" :class="{ 'visible': showControls || isPlaying }">
-      
-      <!-- 底部区域：包含时间和进度条 -->
-      <div class="control-bottom">
-        
-        <!-- 时间显示 (左) -->
-        <div class="time-display">
-          {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
-        </div>
-
-        <!-- 进度条轨道 (中) -->
-        <div 
-          class="progress-track" 
-          ref="progressTrack"
-          @click="seekVideo"
-          @mousemove="handleHoverMove"
-          @mouseleave="hoverTime = null"
-        >
-          <!-- 进度填充条 -->
-          <div class="progress-fill" :style="{ width: progressPercentage + '%' }"></div>
-          
-          <!-- 拖动滑块 (圆点) -->
-          <div class="progress-thumb" :style="{ left: progressPercentage + '%' }"></div>
-
-          <!-- 悬停预览气泡 (Tooltip) -->
-          <div 
-            class="hover-tooltip" 
-            v-if="hoverTime !== null"
-            :style="{ left: hoverPercent + '%' }"
-          >
-            {{ formatTime(hoverTime) }}
-          </div>
-        </div>
-
-        <!-- 播放/暂停按钮 (右) -->
-        <button class="play-btn" @click="togglePlay">
-          {{ isPlaying ? '⏸' : '▶' }}
-        </button>
-
-      </div>
-    </div>
-
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue'
-
-// ----- 状态 -----
-const videoRef = ref(null)
-const isPlaying = ref(false)
-const currentTime = ref(0)
-const duration = ref(0)
-const showControls = ref(false)
-
-// 悬停状态
-const hoverTime = ref(null) // 悬停时的秒数
-const hoverPercent = ref(0)  // 悬停时的百分比
-
-// ----- 计算属性 -----
-const progressPercentage = computed(() => {
-  if (duration.value === 0) return 0
-  return (currentTime.value / duration.value) * 100
-})
-
-// ----- 核心逻辑 -----
-
-// 1. 格式化时间 (00:00)
-const formatTime = (seconds) => {
-  if (!seconds && seconds !== 0) return '00:00'
-  const m = Math.floor(seconds / 60)
-  const s = Math.floor(seconds % 60)
-  return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
-}
-
-// 2. 视频加载完成，获取总时长
-const handleLoadedMetadata = () => {
-  if (videoRef.value) duration.value = videoRef.value.duration
-}
-
-// 3. 播放过程中更新进度
-const handleTimeUpdate = () => {
-  if (videoRef.value) currentTime.value = videoRef.value.currentTime
-}
-
-// 4. 播放结束重置
-const handleEnded = () => {
-  isPlaying.value = false
-}
-
-// 5. 切换播放/暂停
-const togglePlay = () => {
-  if (!videoRef.value) return
-  if (videoRef.value.paused) {
-    videoRef.value.play()
-    isPlaying.value = true
-  } else {
-    videoRef.value.pause()
-    isPlaying.value = false
-  }
-}
-
-// 6. 点击进度条跳转
-const seekVideo = (event) => {
-  const track = event.currentTarget
-  const rect = track.getBoundingClientRect()
-  const x = event.clientX - rect.left
-  const percent = Math.min(100, Math.max(0, (x / rect.width) * 100))
-  
-  if (duration.value > 0) {
-    const newTime = (percent / 100) * duration.value
-    videoRef.value.currentTime = newTime
-    currentTime.value = newTime
-  }
-}
-
-// 7. 鼠标悬停计算位置和时间
-const handleHoverMove = (event) => {
-  const track = event.currentTarget
-  const rect = track.getBoundingClientRect()
-  const x = event.clientX - rect.left
-  const percent = Math.min(100, Math.max(0, (x / rect.width) * 100))
-  
-  hoverPercent.value = percent
-  if (duration.value > 0) {
-    hoverTime.value = (percent / 100) * duration.value
-  }
-}
-
-</script>
-
-<style scoped>
-/* 容器 */
-.video-wrapper {
-  position: relative;
-  width: 100%;
-  max-width: 800px;
-  background: #000;
-  aspect-ratio: 16/9;
-  /* overflow: hidden; */
-  border-radius: 8px;
-}
-
-video {
-  width: 100%;
-  height: 100%;
-  display: block;
-  object-fit: cover;
-}
-
-/* 控制层 (初始透明，悬停显示) */
-.custom-controls {
-  /* position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0; */
-  padding: 20px;
-  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
-  /* opacity: 0; */
-  transition: opacity 0.3s ease;
-  pointer-events: none; /* 鼠标穿透 */
-}
-.custom-controls.visible {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-/* 底部布局 */
-.control-bottom {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-}
-
-/* 时间文本 */
-.time-display {
-  color: rgba(255,255,255,0.9);
-  font-size: 13px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  min-width: 70px;
-}
-
-/* 进度条轨道 */
-.progress-track {
-  flex-grow: 1;
-  height: 6px; /* 更细的轨道 */
-  background: rgba(1, 255, 56, 0.3); /* 半透明灰 */
-  border-radius: 4px;
-  position: relative;
-  cursor: pointer;
-  height: 100px;
-}
-
-/* 填充条 */
-.progress-fill {
-  height: 100%;
-  background: #ff0000; /* 纯白填充 */
-  border-radius: 4px;
-  width: 0%;
-  transition: width 0.1s linear;
-}
-
-/* 滑块 (圆点) - 核心视觉 */
-.progress-thumb {
-  position: absolute;
-  top: 50%;
-  width: 12px;
-  height: 12px;
-  background: #fff;
-  border-radius: 50%;
-  transform: translate(-50%, -50%);
-  box-shadow: 0 0 6px rgba(0,0,0,0.5);
-  opacity: 0;
-  transition: opacity 0.2s;
-}
-/* 悬停或播放时显示圆点 */
-.progress-track:hover .progress-thumb,
-.custom-controls.visible .progress-thumb {
-  opacity: 1;
-}
-
-/* 悬停气泡 (Tooltip) */
-.hover-tooltip {
-  position: absolute;
-  bottom: 25px;
-  transform: translateX(-50%);
-  background: rgba(0,0,0,0.75);
-  color: #fff;
-  padding: 2px 8px;
-  border-radius: 4px;
-  font-size: 12px;
-  font-family: sans-serif;
-  pointer-events: none;
-}
-
-/* 播放按钮 */
-.play-btn {
-  background: none;
-  border: none;
-  color: #fff;
-  font-size: 20px;
-  cursor: pointer;
-  padding: 5px;
-  transition: transform 0.2s;
-}
-.play-btn:hover {
-  transform: scale(1.1);
-}
-</style>
\ No newline at end of file

doc/h5/src/views/project/components/StepThree.vue

@@ -34,14 +34,7 @@
             </div>
           </el-popover>
         </div>
-        <div v-for="(item, index) in 1" :key="index" class="pb-20">
-          <Episode />
-        </div>
-        <!-- <draggable v-model="list" item-key="id" class="list-group" @end="onDragEnd" handle=".tuoz">
-          <template #item="{ element, index }">
-            <Episode />
-          </template>
-        </draggable> -->
+        <Episode />
       </div>
     </section>
   </section>
@@ -50,7 +43,6 @@
 import { ref } from 'vue';
 import { DocumentCopy } from '@element-plus/icons-vue'
 import Episode from './Episode.vue';
-import draggable from 'vuedraggable'
 
 const indexVal = ref(0)
 const aiTypeVal = ref('')
@@ -66,15 +58,6 @@ const options = [
 ]
 
 
-const list = ref([
-  { id: 1, name: '第1集 凌晨的咖啡与雨', time: '00:00:00' },
-  { id: 2, name: '第2集 早餐的阳光与微笑', time: '00:00:00' },
-  { id: 3, name: '第3集 午餐的温暖与关怀', time: '00:00:00' },
-])
-
-const onDragEnd = (evt:any) => {
-  console.log('拖拽结束', list.value)
-}