关键帧可拖动

.eslintrc-auto-import.json

@@ -0,0 +1,56 @@
+{
+  "globals": {
+    "EffectScope": "readonly",
+    "computed": "readonly",
+    "createApp": "readonly",
+    "customRef": "readonly",
+    "defineAsyncComponent": "readonly",
+    "defineComponent": "readonly",
+    "effectScope": "readonly",
+    "getCurrentInstance": "readonly",
+    "getCurrentScope": "readonly",
+    "h": "readonly",
+    "inject": "readonly",
+    "isProxy": "readonly",
+    "isReactive": "readonly",
+    "isReadonly": "readonly",
+    "isRef": "readonly",
+    "markRaw": "readonly",
+    "nextTick": "readonly",
+    "onActivated": "readonly",
+    "onBeforeMount": "readonly",
+    "onBeforeUnmount": "readonly",
+    "onBeforeUpdate": "readonly",
+    "onDeactivated": "readonly",
+    "onErrorCaptured": "readonly",
+    "onMounted": "readonly",
+    "onRenderTracked": "readonly",
+    "onRenderTriggered": "readonly",
+    "onScopeDispose": "readonly",
+    "onServerPrefetch": "readonly",
+    "onUnmounted": "readonly",
+    "onUpdated": "readonly",
+    "provide": "readonly",
+    "reactive": "readonly",
+    "readonly": "readonly",
+    "ref": "readonly",
+    "resolveComponent": "readonly",
+    "resolveDirective": "readonly",
+    "shallowReactive": "readonly",
+    "shallowReadonly": "readonly",
+    "shallowRef": "readonly",
+    "toRaw": "readonly",
+    "toRef": "readonly",
+    "toRefs": "readonly",
+    "triggerRef": "readonly",
+    "unref": "readonly",
+    "useAttrs": "readonly",
+    "useCssModule": "readonly",
+    "useCssVars": "readonly",
+    "useSlots": "readonly",
+    "watch": "readonly",
+    "watchEffect": "readonly",
+    "watchPostEffect": "readonly",
+    "watchSyncEffect": "readonly"
+  }
+}

.eslintrc.cjs

@@ -8,7 +8,8 @@ module.exports = {
     'eslint:recommended',
     '@vue/eslint-config-typescript',
     'plugin:vue/vue3-recommended',
-    'plugin:@typescript-eslint/recommended'
+    'plugin:@typescript-eslint/recommended',
+    "./.eslintrc-auto-import.json",  // 导入自动导入api的配置文件
   ],
   parser: 'vue-eslint-parser',
   parserOptions: {

src/components/TrackList.vue

@@ -32,6 +32,7 @@
             v-else
             class="z-10 pt-5 pb-5 min-w-full flex shrink-0 grow flex-col justify-center min-h-full"
             :style="{ width: `${trackStyle.width}px` }"
+            id="track-container"
         >
           <template v-for="(lineData, lineIndex) of showTrackList" :key="lineIndex">
             <TrackLine

src/components/item/player/PlayerMoveable.vue

@@ -96,6 +96,8 @@
         });
       }
     });
+    // 更新moveable
+    moveable.value && moveable.value.updateRect();
     return [...videoTargets, ...targets];
   });
   const draggableOptions = reactive({

src/components/item/trackItem/TrackPlayPoint.vue

@@ -2,27 +2,72 @@
   <div
       class="z-30 w-px absolute -top-5 bottom-0 bg-gray-700 dark:bg-gray-100 transition-transform duration-75"
       :style="trackStyle"
+      @mousedown="onMouseDown"
   >
-    <span class="playPoint block border-1 border-gray-600 bg-gray-600 h-3 w-2.5 dark:border-gray-100 dark:bg-gray-100 sticky top-0 right-0 left-0" />
+    <span
+class="playPoint block border-1 border-gray-600 bg-gray-600 h-3 w-2.5 dark:border-gray-100 dark:bg-gray-100 sticky top-0 right-0 left-0 cursor-move"
+/>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { getGridPixel } from '@/utils/canvasUtil';
+  import { getGridPixel, getSelectFrame } from '@/utils/canvasUtil';
   import { computed } from 'vue';
   import { useTrackState } from '@/stores/trackState';
   import { usePlayerState } from '@/stores/playerState';
   const offsetLine = {
     left: 10
   };
+
   const trackStore = useTrackState();
-  const playStore = usePlayerState();
+  const playerStore = usePlayerState();
   const trackStyle = computed(() => {
+    console.log('渲染帧', `${getGridPixel(trackStore.trackScale, playerStore.playStartFrame)}px`);
     return {
       left: `${offsetLine.left}px`,
-      transform: `translate(${getGridPixel(trackStore.trackScale, playStore.playStartFrame)}px, 0px)`
+      transform: `translate(${getGridPixel(trackStore.trackScale, playerStore.playStartFrame)}px, 0px)`
     };
   });
+
+  const isDragging = ref(false);
+
+  function onMouseDown(event: MouseEvent) {
+    event.stopPropagation();
+    event.preventDefault();
+
+    isDragging.value = true;
+
+    console.log('拖拽状态');
+  }
+
+  function onMouseMove(event: MouseEvent) {
+    // event.stopPropagation();
+    // event.preventDefault();
+    if (isDragging.value) {
+      // 获取相对于#timeline的偏移量
+      const rect = document.getElementById('track-container').getBoundingClientRect();
+      // 默认fps为30
+      const frame = getSelectFrame(event.pageX - offsetLine.left - rect.left, trackStore.trackScale, 30);
+
+      const playFrame = frame - 1;
+      const startFrame = playFrame < 0 ? 0 : playFrame > playerStore.frameCount ? playerStore.frameCount : playFrame;
+      playerStore.playStartFrame = startFrame;
+      playerStore.playAudioFrame = startFrame;
+    }
+  }
+
+  document.addEventListener('mousemove', onMouseMove);
+
+  function onMouseUp(event: MouseEvent) {
+    // event.stopPropagation();
+    // event.preventDefault();
+
+    isDragging.value = false;
+
+    console.log('拖拽结束');
+  }
+
+  document.addEventListener('mouseup', onMouseUp);
 </script>
 
 <style scoped>

tsconfig.app.json

@@ -1,6 +1,6 @@
 {
   "extends": "@vue/tsconfig/tsconfig.web.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "*.d.ts"],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "composite": true,

vite.config.ts

@@ -30,6 +30,10 @@ export default defineConfig({
     vue(),
     AutoImport({
       imports: ['vue'],
+      eslintrc: { // 生成eslint的配置文件，需要在eslint配置中导入
+        enabled: true, // Default `false`
+        globalsPropValue: 'readonly' // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
+      },
       resolvers: [
         ElementPlusResolver(),
         VueHooksPlusResolver(),