From e67b234ad3cb104b1ec44cec7c90199c739c5ffe Mon Sep 17 00:00:00 2001
From: "zhangxiang.chen-EFWOM" <1026161550@qq.com>
Date: Thu, 11 Apr 2024 19:42:16 +0800
Subject: [PATCH 1/3] =?UTF-8?q?fix:=E4=BF=AE=E6=94=B9=E5=B1=9E=E6=80=A7?=
 =?UTF-8?q?=EF=BC=8C=E9=80=89=E6=8B=A9=E6=A1=86=E7=9A=84=E5=A4=A7=E5=B0=8F?=
 =?UTF-8?q?=E4=BD=8D=E7=BD=AE=E6=B2=A1=E6=9C=89=E8=B7=9F=E9=9A=8F=E6=94=B9?=
 =?UTF-8?q?=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/item/player/PlayerMoveable.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/item/player/PlayerMoveable.vue b/src/components/item/player/PlayerMoveable.vue
index ffa7689..6c64146 100644
--- a/src/components/item/player/PlayerMoveable.vue
+++ b/src/components/item/player/PlayerMoveable.vue
@@ -96,6 +96,8 @@
         });
       }
     });
+    // 更新moveable
+    moveable.value && moveable.value.updateRect();
     return [...videoTargets, ...targets];
   });
   const draggableOptions = reactive({

From 95e29ebb73a9e48376aac6b1e0364c8b3f3b55ad Mon Sep 17 00:00:00 2001
From: "zhangxiang.chen-EFWOM" <1026161550@qq.com>
Date: Thu, 11 Apr 2024 19:45:13 +0800
Subject: [PATCH 2/3] =?UTF-8?q?feat=EF=BC=9A=E5=BD=93=E5=89=8D=E5=B8=A7?=
 =?UTF-8?q?=E5=8F=AF=E6=8B=96=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TrackList.vue                  |  1 +
 .../item/trackItem/TrackPlayPoint.vue         | 55 +++++++++++++++++--
 2 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/src/components/TrackList.vue b/src/components/TrackList.vue
index 3905cf9..3f02ada 100644
--- a/src/components/TrackList.vue
+++ b/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
diff --git a/src/components/item/trackItem/TrackPlayPoint.vue b/src/components/item/trackItem/TrackPlayPoint.vue
index a6236cc..8882527 100644
--- a/src/components/item/trackItem/TrackPlayPoint.vue
+++ b/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 { computed } from 'vue';
+  import { getGridPixel, getSelectFrame } from '@/utils/canvasUtil';
+  import { computed, ref } 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>

From 029dadf2effeb7168b315debd5dabe71638488a0 Mon Sep 17 00:00:00 2001
From: "zhangxiang.chen-EFWOM" <1026161550@qq.com>
Date: Thu, 11 Apr 2024 19:49:50 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E8=87=AA=E5=8A=A8=E5=AF=BC=E5=85=A5?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6eslint=E5=92=8Cts=E7=9B=B8=E5=85=B3=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc-auto-import.json                    | 56 +++++++++++++++++++
 .eslintrc.cjs                                 |  3 +-
 .../item/trackItem/TrackPlayPoint.vue         |  2 +-
 tsconfig.app.json                             |  2 +-
 vite.config.ts                                |  4 ++
 5 files changed, 64 insertions(+), 3 deletions(-)
 create mode 100644 .eslintrc-auto-import.json

diff --git a/.eslintrc-auto-import.json b/.eslintrc-auto-import.json
new file mode 100644
index 0000000..ebdbb1c
--- /dev/null
+++ b/.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"
+  }
+}
\ No newline at end of file
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index ec4f920..f17fd47 100644
--- a/.eslintrc.cjs
+++ b/.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: {
diff --git a/src/components/item/trackItem/TrackPlayPoint.vue b/src/components/item/trackItem/TrackPlayPoint.vue
index 8882527..6d2a9f0 100644
--- a/src/components/item/trackItem/TrackPlayPoint.vue
+++ b/src/components/item/trackItem/TrackPlayPoint.vue
@@ -12,7 +12,7 @@ class="playPoint block border-1 border-gray-600 bg-gray-600 h-3 w-2.5 dark:borde
 
 <script setup lang="ts">
   import { getGridPixel, getSelectFrame } from '@/utils/canvasUtil';
-  import { computed, ref } from 'vue';
+  import { computed } from 'vue';
   import { useTrackState } from '@/stores/trackState';
   import { usePlayerState } from '@/stores/playerState';
   const offsetLine = {
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 9b2cb8f..2f47a84 100644
--- a/tsconfig.app.json
+++ b/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,
diff --git a/vite.config.ts b/vite.config.ts
index b887d11..55d49d4 100644
--- a/vite.config.ts
+++ b/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(),