master: Added 添加标签

package.json

@@ -12,11 +12,11 @@
     "preinstall": "npx only-allow pnpm"
   },
   "dependencies": {
+    "@ffmpeg/ffmpeg": "^0.12.10",
+    "@ffmpeg/util": "^0.12.1",
     "@primevue/themes": "^4.2.1",
     "@tweenjs/tween.js": "^25.0.0",
     "@vueuse/core": "^11.2.0",
-    "@ffmpeg/ffmpeg": "^0.12.10",
-    "@ffmpeg/util": "^0.12.1",
     "animate.css": "^4.1.1",
     "autofit.js": "^3.2.1",
     "axios": "^1.7.7",
@@ -30,6 +30,8 @@
     "js-cookie": "^3.0.5",
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.1",
+    "mp4box": "^0.5.2",
+    "native-file-system-adapter": "^3.0.1",
     "pinia": "^2.2.6",
     "primevue": "^4.2.1",
     "swiper": "^11.1.14",
@@ -44,9 +46,7 @@
     "vue3-count-to": "^1.1.2",
     "vue3-seamless-scroll": "^2.0.1",
     "vuedraggable": "^2.24.3",
-    "xgplayer": "^3.0.20",
-    "native-file-system-adapter": "^3.0.1",
-    "mp4box": "^0.5.2"
+    "xgplayer": "^3.0.20"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.5.0",

src/views/VideoBox/components/TagBox.vue

@@ -1,14 +1,20 @@
 <template>
   <div class="tag-box absolute color-white" :style="{ top: `${top}px`, left: `${left}px` }">
-    <Popover ref="op" :pt="{ root: '!bg-[rgb(0,0,0,0.8)] after:b-color-[rgb(0,0,0,0.8)]' }">
-      <div class="flex flex-col gap-4 w-[25rem]"> 123123 </div>
-    </Popover>
     <div
       :class="[
         'tag-count' + index,
         'tag-box-wrapper p-1 w-144px absolute left-18px top--50px text-12px cursor-pointer'
       ]"
-      ><div :class="['tag-label' + index, 'text-center']" @click="toggle">{{ label }}</div></div
+      @click="toggle"
+      ><div :class="['tag-label' + index, 'text-center']">{{ label }}</div></div
+    >
+    <div
+      ref="floating"
+      :class="[
+        isShow ? 'opacity-100' : 'opacity-0',
+        'overflow-hidden transition pointer-events-none duration-300 z-999 h-200px w-300px bg-[rgba(11,21,44,1)] absolute left-165px top--50px b-solid b-1 b-#2BABF2'
+      ]"
+      >Tooltip</div
     >
     <img
       :class="['tag-count' + index, 'absolute bottom-0 left-0 w-162px ']"
@@ -20,6 +26,7 @@
 
 <script setup>
   defineOptions({ name: 'TagBox' })
+  const floating = ref(null)
   const props = defineProps({
     index: {
       type: Number,
@@ -38,20 +45,10 @@
       default: 0
     }
   })
+  const isShow = ref(false)
 
-  const op = ref()
-  const members = ref([
-    { name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' },
-    {
-      name: 'Bernardo Dominic',
-      image: 'bernardodominic.png',
-      email: 'bernardo@email.com',
-      role: 'Editor'
-    },
-    { name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' }
-  ])
   const toggle = (event) => {
-    op.value.toggle(event)
+    isShow.value = !isShow.value
   }
 
   const init = () => {
@@ -68,10 +65,12 @@
       tagCount[0].style.top = `23px`
       tagCount[1].style.transform = 'rotateX(180deg)'
       tagCount[1].style.bottom = 'auto'
+      floating.value.style.top = '18px'
     } else {
       tagCount[0].style.top = `-50px`
       tagCount[1].style.transform = 'rotateX(0)'
       tagCount[1].style.bottom = '0'
+      floating.value.style.top = '-50px'
     }
     if (tagBoxW + props.left > videoCount.offsetWidth) {
       tagCount[0].style.right = '18px'
@@ -81,6 +80,8 @@
       tagCount[0].style.transform = 'rotateY(180deg)'
       tagCount[1].style.transform = 'rotateY(180deg)'
       document.querySelector('.tag-label' + props.index).style.transform = 'rotateY(180deg)'
+      floating.value.style.left = 'auto'
+      floating.value.style.right = '165px'
     } else {
       tagCount[0].style.right = 'auto'
       tagCount[1].style.right = 'auto'
@@ -89,6 +90,8 @@
       tagCount[0].style.transform = 'rotateY(0)'
       tagCount[1].style.transform = 'rotate(180deg,0)'
       document.querySelector('.tag-label' + props.index).style.transform = 'rotateY(0)'
+      floating.value.style.left = '165px'
+      floating.value.style.right = 'auto'
     }
   }
   onMounted(() => {