new feature: drug Loli !

src/components/setting-panel/KUNGalgameSettingPanel.vue

@@ -45,7 +45,7 @@ const handleClick = () => {}
             <Icon
               class="moon"
               icon="line-md:sunny-outline-to-moon-loop-transition"
-            />we
+            />
           </li>
         </div>
       </div>
@@ -68,7 +68,6 @@ const handleClick = () => {}
     </div>
     <!-- 看板娘组件 -->
     <!-- 此处使用 Teleport，如果固定看板娘，则将看板娘传送到根组件 -->
-    <Drug />
     <Teleport to="body" :disabled="showFixedLoli">
       <Loli class="loli" :isShowFixedLoli="showFixedLoli" />
     </Teleport>
@@ -83,7 +82,7 @@ const handleClick = () => {}
   width: 600px;
   top: 65px;
   right: 0;
-  position: fixed;
+  position: absolute;
   background-color: @kungalgame-trans-white-5;
   backdrop-filter: blur(5px);
   border-radius: 10px;

src/components/setting-panel/components/Drug.vue

@@ -6,13 +6,22 @@
     @wheel.prevent="changeSize"
     :style="boxStyle"
   >
-    拖动我
+    <div
+      class="box1"
+      style="
+        position: relative;
+        width: 100%;
+        height: 100%;
+        background-color: aqua;
+      "
+    ></div>
   </div>
 </template>
+<script lang="ts">
+import { ref, reactive, CSSProperties } from 'vue'
 
-<script setup lang="ts">
+export default {
-import { ref, reactive, CSSProperties, onMounted, onBeforeUnmount } from 'vue'
+  setup() {
-
     const box = ref<HTMLElement | null>(null)
 
     const state = reactive({
@@ -69,14 +78,23 @@ const changeSize = (event: WheelEvent) => {
         box.value.style.height = `${state.size.height}px`
       }
     }
-onMounted(() => {
-  window.addEventListener('mouseup', stopDrag)
-  window.addEventListener('mousemove', drag)
-})
-onBeforeUnmount(() => {
-  window.removeEventListener('mouseup', stopDrag)
-  window.removeEventListener('mousemove', drag)
-})
-</script>
 
-<style scoped></style>
+    return {
+      box,
+      boxStyle,
+      startDrag,
+      stopDrag,
+      drag,
+      changeSize,
+    }
+  },
+  mounted() {
+    window.addEventListener('mouseup', this.stopDrag)
+    window.addEventListener('mousemove', this.drag)
+  },
+  beforeUnmount() {
+    window.removeEventListener('mouseup', this.stopDrag)
+    window.removeEventListener('mousemove', this.drag)
+  },
+}
+</script>

src/components/setting-panel/components/Loli.vue

@@ -17,58 +17,66 @@ import {
   mouth,
   face,
 } from '@/utils/loli'
-import { onMounted, onUnmounted, ref } from 'vue'
 
-interface Position {
+// 用户拖动看板娘和缩放看板娘
-  x: number
+import { ref, reactive, CSSProperties, onMounted, onBeforeUnmount } from 'vue'
-  y: number
-}
-const box = ref<HTMLElement | null>(null)
-const isDragging = ref(false)
-const mousePosition = ref<Position>({ x: 0, y: 0 })
-const elementPosition = ref<Position>({ x: 120, y: -250 })
 
-const handleMouseDown = (event: MouseEvent) => {
+const loli = ref<HTMLElement | null>(null)
-  isDragging.value = true
+
-  mousePosition.value = { x: event.clientX, y: event.clientY }
+const state = reactive({
+  isDragging: false,
+  isResizing: false,
+  origin: { x: 0, y: 0 },
+  translation: { x: 0, y: 0 },
+})
+
+const loliStyle: CSSProperties = {
+  top: `${state.translation.y}px`,
+  left: `${state.translation.x}px`,
 }
 
-const handleMouseMove = (event: MouseEvent) => {
+const startDragLoli = (event: MouseEvent) => {
-  if (isDragging.value) {
+  if (event.ctrlKey) {
-    const deltaX = event.clientX - mousePosition.value.x
+    state.isResizing = true
-    const deltaY = event.clientY - mousePosition.value.y
+  } else {
-    elementPosition.value = {
+    state.isDragging = true
-      x: elementPosition.value.x + deltaX,
-      y: elementPosition.value.y + deltaY,
-    }
-    mousePosition.value = { x: event.clientX, y: event.clientY }
   }
+  state.origin.x = event.clientX
+  state.origin.y = event.clientY
 }
 
-const handleMouseUp = () => {
+const stopDrag = () => {
-  isDragging.value = false
+  state.isDragging = false
+  state.isResizing = false
+}
+
+const drag = (event: MouseEvent) => {
+  if (state.isDragging && loli.value !== null) {
+    const deltaX = event.clientX - state.origin.x
+    const deltaY = event.clientY - state.origin.y
+    state.translation.x += deltaX
+    state.translation.y += deltaY
+    loli.value.style.top = `${state.translation.y}px`
+    loli.value.style.left = `${state.translation.x}px`
+    state.origin.x = event.clientX
+    state.origin.y = event.clientY
+  }
 }
 
 onMounted(() => {
-  box.value?.addEventListener('mousedown', handleMouseDown)
+  window.addEventListener('mouseup', stopDrag)
-  box.value?.addEventListener('mousemove', handleMouseMove)
+  window.addEventListener('mousemove', drag)
-  box.value?.addEventListener('mouseup', handleMouseUp)
 })
-
+onBeforeUnmount(() => {
-const loliPositionXPixel = elementPosition.value.x + 'px'
+  window.removeEventListener('mouseup', stopDrag)
-const loliPositionYPixel = elementPosition.value.y + 'px'
+  window.removeEventListener('mousemove', drag)
-
-onUnmounted(() => {
-  box.value?.removeEventListener('mousedown', handleMouseDown)
-  box.value?.removeEventListener('mousemove', handleMouseMove)
-  box.value?.removeEventListener('mouseup', handleMouseUp)
 })
 </script>
 
 <template>
   <!-- 看板娘 -->
   <!-- 给看板娘整体绑定鼠标移动事件，改变看板娘的位置 -->
-  <div class="loli">
+  <div class="loli" ref="loli" @mousedown="startDragLoli" :style="loliStyle">
     <!-- 身体 -->
     <img class="lass" :src="lass" alt="ren" />
     <img class="eye" :src="eye" alt="ren" />
@@ -82,10 +90,13 @@ onUnmounted(() => {
 /* 看板娘 */
 .loli {
   height: 100%;
+  width: 300px;
+  /* 定位看板娘，重要 */
   position: fixed;
+  z-index: 9999;
   // 根据父元素控制面板传过来的参数确定看板娘的位置
-  top: v-bind(loliPositionYPixel);
+  // top: v-bind(loliPositionYPixel);
-  left: v-bind(loliPositionXPixel);
+  // left: v-bind(loliPositionXPixel);
 }
 .lass {
   position: absolute;