feat: 完成左侧边栏添加视频相关逻辑

src/components/left-panel/LeftPanel.vue

@@ -9,7 +9,7 @@ const setActiveType = (id: number) => {
 }
 </script>
 <template>
-  <div class="left-box min-w-[400px] flex bg-[#272836]">
+  <div class="left-box w-[400px] flex bg-[#272836]">
     <div class="w-[60px] bg-[#1c1c26] flex flex-col items-center">
       <div
         v-for="(item, index) in typeList"
@@ -23,7 +23,6 @@ const setActiveType = (id: number) => {
       </div>
     </div>
     <div class="text-white p-4 flex-1">
-      视频素材：（开发中）
       <VideoList />
     </div>
   </div>

src/components/left-panel/VideoList.vue

@@ -1,5 +1,72 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import movie from '/bird.mp4'
+import { ref } from 'vue'
+import emitter from '~/utils/bus'
+
+const onFileChange = (e: Event) => {
+  const target = e.target as HTMLInputElement
+  const file = target.files?.[0]
+  if (!file) return
+  const url = URL.createObjectURL(file)
+  addVideo(url)
+}
+
+// 添加视频素材
+function addVideo(url: string) {
+  emitter.emit('element:add', {
+    type: 'video',
+    value: url
+  })
+}
+
+const play = (e: MouseEvent) => {
+  const target = e.target as HTMLVideoElement
+  target.play()
+}
+
+const pause = (e: MouseEvent) => {
+  const target = e.target as HTMLVideoElement
+  target.currentTime = 0
+  target.pause()
+}
+</script>
 <template>
-  <div class="video-list">video-list</div>
+  <div class="video-list flex flex-col gap-4">
+    <p class="">添加本地文件：（不会上传）</p>
+    <input
+      type="file"
+      accept="video/*"
+      class="file-input file-input-bordered file-input-md w-full max-w-xs"
+      @change="onFileChange"
+    />
+    <p>视频素材：（开发中）</p>
+    <div class="grid grid-cols-2 gap-2">
+      <div
+        class="cursor-pointer video-item rounded-md relative"
+        v-for="item in 10"
+        :key="item"
+        @click="addVideo(movie)"
+      >
+        <video :src="movie" class="rounded-md" muted loop @mouseenter="play" @mouseleave="pause" />
+      </div>
+    </div>
+  </div>
 </template>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.video-item {
+  &:hover {
+    // 添加按钮
+    &::after {
+      content: '+ 添加';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      color: #fff;
+      font-size: 16px;
+      font-weight: bold;
+      pointer-events: none;
+    }
+  }
+}
+</style>

src/components/player/CanvasPlayer.vue

@@ -39,8 +39,10 @@ const menuList = [
 emitter.on('element:copy', onCopy)
 emitter.on('element:paste', onPaste)
 emitter.on('element:delete', onDelete)
+emitter.on('element:add', onAdd)
 emitter.on('canvas:fullscreen', toggleCanvasFullScreen)
 emitter.on('video:skip', (time: number) => (videoRef.currentTime += time))
+
 watch(playStatus, (v) => videoRef[v ? 'play' : 'pause']())
 
 // 初始化画布
@@ -97,6 +99,24 @@ function onDelete(obj: fabric.Object) {
   menuShow.value = false
 }
 
+// 添加元素
+// TODO 后面需要支持传入添加元素的配置
+function onAdd({ type, value }: { type: string; value: string }) {
+  switch (type) {
+    case 'video':
+      drawVideo(value)
+      break
+    case 'svg':
+      addSVG(value)
+      break
+    case 'text':
+      addText(value)
+      break
+    default:
+      break
+  }
+}
+
 // 绘制 svg
 function addSVG(url: string) {
   fabric.loadSVGFromURL(url, (objects, options) => {

src/utils/bus.ts

@@ -6,6 +6,11 @@ type Events = {
   'element:copy': void // 复制元素
   'element:paste': void // 粘贴元素
   'element:delete': fabric.Object // 删除元素
+  // 添加元素
+  'element:add': {
+    value: string // 图片地址 url | 视频地址 url | 文本内容 | SVG ...
+    type: string // 元素类型
+  }
   'video:skip': number // 跳转视频
   'canvas:fullscreen'?: boolean // 全屏
 }