12

app/components/liveMinWindow/index.vue

@@ -47,22 +47,18 @@ const props = defineProps({
 const router = useRouter()
 const dragRef = shallowRef(null)
 
-// 拖动相关状态
 const isDragging = ref(false)
 const startX = ref(0)
 const startY = ref(0)
 const left = ref(0)
 const top = ref(0)
 
-// 初始化位置
 onMounted(() => {
   const rect = dragRef.value.getBoundingClientRect()
-  // 将 right 值转换为 left 值
   left.value = window.innerWidth - rect.width - parseInt(props.initialPosition.right)
   top.value = parseInt(props.initialPosition.top)
 })
 
-// 计算样式
 const style = computed(() => ({
   left: left.value ? `${left.value}px` : 'auto',
   top: top.value ? `${top.value}px` : 'auto',
@@ -70,19 +66,16 @@ const style = computed(() => ({
   transition: isDragging.value ? 'none' : 'all 0.3s ease',
 }))
 
-// 开始拖动
 const handleDragStart = (event) => {
   event.stopPropagation()
   isDragging.value = true
 
   const point = event.touches ? event.touches[0] : event
 
-  // 获取元素当前位置
   const rect = dragRef.value.getBoundingClientRect()
   left.value = rect.left
   top.value = rect.top
 
-  // 记录起始点击位置
   startX.value = point.clientX - left.value
   startY.value = point.clientY - top.value
 
@@ -95,7 +88,6 @@ const handleDragStart = (event) => {
   }
 }
 
-// 拖动中
 const handleDragMove = useThrottleFn((event) => {
   if (!isDragging.value) return
 
@@ -111,7 +103,6 @@ const handleDragMove = useThrottleFn((event) => {
   top.value = Math.min(Math.max(0, point.clientY - startY.value), maxY)
 }, 16)
 
-// 添加防抖处理边缘吸附
 const handleEdgeSnap = useThrottleFn(() => {
   const rect = dragRef.value.getBoundingClientRect()
   const centerX = rect.left + rect.width / 2
@@ -121,7 +112,6 @@ const handleEdgeSnap = useThrottleFn(() => {
     : 16
 }, 100)
 
-// 结束拖动
 const handleDragEnd = () => {
   if (!isDragging.value) return
 
@@ -134,14 +124,12 @@ const handleDragEnd = () => {
   document.removeEventListener('touchend', handleDragEnd)
 }
 
-// 处理点击事件
 const handleClick = (event) => {
   event.stopPropagation()
   if (!isDragging.value) {
     handleReturnLive()
   }
 }
-
 const handleReturnLive = () => {
   router.push('/')
   props.onClose()
@@ -151,7 +139,6 @@ const handleClose = (event) => {
   event?.stopPropagation()
   props.onClose()
 }
-
 onBeforeUnmount(() => {
   document.removeEventListener('mousemove', handleDragMove)
   document.removeEventListener('mouseup', handleDragEnd)
@@ -159,17 +146,15 @@ onBeforeUnmount(() => {
   document.removeEventListener('touchend', handleDragEnd)
 })
 </script>
-
 <style scoped>
 .fixed {
   will-change: transform, opacity;
   touch-action: none;
   -webkit-user-select: none;
   user-select: none;
-  transform: translateZ(0); /* 开启GPU加速 */
+  transform: translateZ(0);
 }
 
-/* 添加动画类 */
 .min-window-enter-active,
 .min-window-leave-active {
   transition: transform 0.3s ease, opacity 0.3s ease;