refactor: put fixed vars from clipTrack to parent component

caohongz · Jan 17, 2025 · ddb7bbd · ddb7bbd
1 parent 3124e2d
commit ddb7bbd
Show file tree

Hide file tree

Showing 5 changed files with 165 additions and 66 deletions.
diff --git a/src/views/clipPage/ClipProperties/ClipProperties.vue b/src/views/clipPage/ClipProperties/ClipProperties.vue
@@ -7,12 +7,18 @@
     <template v-if="clip">
       <!-- 视频属性 -->
       <template v-if="clip.type === 'video'">
-        <VideoProperties :clip="clip" @update="handleUpdate" />
+        <VideoProperties
+          :clip="clip"
+          @update="handleUpdate"
+        />
       </template>
 
       <!-- 音频属性 -->
       <template v-if="clip.type === 'audio'">
-        <AudioProperties :clip="clip" @update="handleUpdate" />
+        <AudioProperties
+          :clip="clip"
+          @update="handleUpdate"
+        />
       </template>
 
       <!-- 图片属性 -->
@@ -49,6 +55,7 @@ import FilterProperties from './components/FilterProperties.vue';
 
 const props = defineProps<{
   clip: TrackClip;
+  minClipDuration: number;
 }>();
 
 const emit = defineEmits(['update']);
@@ -60,6 +67,59 @@ const handleUpdate = (updatedClip: TrackClip) => {
   emit('update', updatedClip);
 };
 
+// 处理去片头
+const handleChangeHead = (val: number | null) => {
+  if (!props.clip) return;
+  const oldSourceStartTime = Number(props.clip.sourceStartTime);
+  const value = val === null || isNaN(val) ? 0 : val;
+  const newDuration =
+    props.clip.originalDuration - value - props.clip.sourceEndTime;
+  if (newDuration < props.minClipDuration) return;
+
+  props.clip.sourceStartTime = value;
+  const diff = props.clip.sourceStartTime - oldSourceStartTime;
+  // 调整startTime和duration
+  if (props.clip.startTime + diff < 0) {
+    props.clip.startTime = 0;
+    props.clip.duration =
+      props.clip.originalDuration -
+      props.clip.sourceStartTime -
+      props.clip.sourceEndTime;
+    props.clip.endTime = props.clip.startTime + props.clip.duration;
+  } else {
+    props.clip.startTime = props.clip.startTime + diff;
+    props.clip.duration =
+      props.clip.originalDuration -
+      props.clip.sourceStartTime -
+      props.clip.sourceEndTime;
+    props.clip.endTime = props.clip.startTime + props.clip.duration;
+  }
+
+  emit('update', props.clip);
+};
+
+// 处理去片尾
+const handleChangeTail = (val: number | null) => {
+  if (!props.clip) return;
+  const oldSourceEndTime = Number(props.clip.sourceEndTime);
+  const value = val === null || isNaN(val) ? 0 : val;
+  const newDuration =
+    props.clip.originalDuration - value - props.clip.sourceStartTime;
+  if (newDuration < props.minClipDuration) return;
+
+  props.clip.sourceEndTime = value;
+  const diff = props.clip.sourceEndTime - oldSourceEndTime;
+  // 调整endTime和duration
+  props.clip.endTime = props.clip.endTime - diff;
+  props.clip.duration = props.clip.duration - diff;
+
+  emit('update', props.clip);
+};
+
+// 提供给子组件使用
+provide('handleChangeHead', handleChangeHead);
+provide('handleChangeTail', handleChangeTail);
+
 // 监听属性变化
 watch(
   () => props.clip,

diff --git a/src/views/clipPage/ClipProperties/components/AudioProperties.vue b/src/views/clipPage/ClipProperties/components/AudioProperties.vue
@@ -15,7 +15,7 @@
           :min="0"
           :step="0.1"
           placeholder="去片头时间"
-          @change="(val) => handleDefaultZero(val, 'sourceStartTime')"
+          @change="handleChangeHead"
         />
       </div>
       <div class="flex-1">
@@ -27,7 +27,7 @@
           :min="0"
           :step="0.1"
           placeholder="去片尾时间"
-          @change="(val) => handleDefaultZero(val, 'sourceEndTime')"
+          @change="handleChangeTail"
         />
       </div>
     </div>
@@ -60,13 +60,22 @@
 <script setup lang="ts">
 import type { TrackClip } from '@/types/track';
 import { Icon } from '@iconify/vue';
+import { inject } from 'vue';
 
 const props = defineProps<{
   clip: TrackClip;
 }>();
 
 const emit = defineEmits(['update']);
 
+// 注入处理方法
+const handleChangeHead = inject('handleChangeHead') as (
+  val: number | null
+) => void;
+const handleChangeTail = inject('handleChangeTail') as (
+  val: number | null
+) => void;
+
 // 处理默认值为0
 const handleDefaultZero = (val: number | null, prop: string) => {
   if (!props.clip) return;

diff --git a/src/views/clipPage/ClipProperties/components/VideoProperties.vue b/src/views/clipPage/ClipProperties/components/VideoProperties.vue
@@ -76,24 +76,24 @@
         <div class="text-base text-[#999] mb-1">去片头</div>
         <el-input-number
           class="w-30"
-          v-model="clip.sourceStartTime"
+          :model-value="clip.sourceStartTime"
           size="small"
           :min="0"
           :step="0.1"
           placeholder="去片头时间"
-          @change="(val) => handleDefaultZero(val, 'sourceStartTime')"
+          @change="handleChangeHead"
         />
       </div>
       <div class="flex-1">
         <div class="text-base text-[#999] mb-1">去片尾</div>
         <el-input-number
           class="w-30"
-          v-model="clip.sourceEndTime"
+          :model-value="clip.sourceEndTime"
           size="small"
           :min="0"
           :step="0.1"
           placeholder="去片尾时间"
-          @change="(val) => handleDefaultZero(val, 'sourceEndTime')"
+          @change="handleChangeTail"
         />
       </div>
     </div>
@@ -133,7 +133,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref, computed, inject } from 'vue';
 import type { TrackClip } from '@/types/track';
 import { Icon } from '@iconify/vue';
 
@@ -143,6 +143,14 @@ const props = defineProps<{
 
 const emit = defineEmits(['update']);
 
+// 注入处理方法
+const handleChangeHead = inject('handleChangeHead') as (
+  val: number | null
+) => void;
+const handleChangeTail = inject('handleChangeTail') as (
+  val: number | null
+) => void;
+
 const isDragging = ref(false);
 
 // 弧度转角度