feat: 添加可移动面板组件

src/components.d.ts

@@ -6,6 +6,7 @@ import CheckboxButton from '@/components/CheckboxButton.vue'
 import CheckboxButtonGroup from '@/components/CheckboxButtonGroup.vue'
 import ColorPicker from '@/components/ColorPicker/index.vue'
 import FullscreenSpin from '@/components/FullscreenSpin.vue'
+import MoveablePanel from '@/components/MoveablePanel.vue'
 
 type Icon = typeof icons
 
@@ -16,6 +17,7 @@ declare module 'vue' {
     CheckboxButtonGroup: typeof CheckboxButtonGroup
     ColorPicker: typeof ColorPicker
     FullscreenSpin: typeof FullscreenSpin
+    MoveablePanel: typeof MoveablePanel
 
     // antd 组件
     InputNumber: typeof import('ant-design-vue')['InputNumber']

src/components/MoveablePanel.vue

@@ -0,0 +1,135 @@
+<template>
+  <div 
+    class="moveable-panel"
+    :style="{
+      width: width + 'px',
+      height: height + 'px',
+      left: x + 'px',
+      top: y + 'px',
+    }"
+  >
+    <div class="header" @mousedown="$event => startMove($event)">
+      <div class="title">{{title}}</div>
+      <div class="close-btn"><IconClose /></div>
+    </div>
+
+    <div class="content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+
+const props = defineProps({
+  width: {
+    type: Number,
+    required: true,
+  },
+  height: {
+    type: Number,
+    required: true,
+  },
+  left: {
+    type: Number,
+    default: 10,
+  },
+  top: {
+    type: Number,
+    default: 10,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+})
+
+const x = ref(0)
+const y = ref(0)
+
+onMounted(() => {
+  if (props.left >= 0) x.value = props.left
+  else x.value = document.body.clientWidth + props.left - props.width
+
+  if (props.top >= 0) y.value = props.top
+  else y.value = document.body.clientHeight + props.top - props.height
+})
+
+const startMove = (e: MouseEvent) => {
+  let isMouseDown = true
+
+  const windowWidth = document.body.clientWidth
+  const clientHeight = document.body.clientHeight
+
+  const startPageX = e.pageX
+  const startPageY = e.pageY
+
+  const originLeft = x.value
+  const originTop = y.value
+
+  document.onmousemove = e => {
+    if (!isMouseDown) return
+
+    const moveX = e.pageX - startPageX
+    const moveY = e.pageY - startPageY
+
+    let left = originLeft + moveX
+    let top = originTop + moveY
+
+    if (left < 0) left = 0
+    if (top < 0) top = 0
+    if (left + props.width > windowWidth) left = windowWidth - props.width
+    if (top + props.height > clientHeight) top = clientHeight - props.height
+
+    x.value = left
+    y.value = top
+  }
+  document.onmouseup = () => {
+    isMouseDown = false
+
+    document.onmousemove = null
+    document.onmouseup = null
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.moveable-panel {
+  position: fixed;
+  background-color: #fff;
+  box-shadow: 0 2px 12px 0 rgba(56, 56, 56, .15);
+  border: 1px solid $borderColor;
+  border-radius: $borderRadius;
+  display: flex;
+  flex-direction: column;
+  z-index: 99999;
+}
+.header {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #f0f0f0;
+  cursor: move;
+}
+.title {
+  flex: 1;
+  font-size: 13px;
+  padding-left: 10px;
+}
+.close-btn {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #666;
+  font-size: 12px;
+  cursor: pointer;
+}
+.content {
+  flex: 1;
+  padding: 10px;
+  overflow: auto;
+}
+</style>

src/plugins/component.ts

@@ -5,6 +5,7 @@ import CheckboxButton from '@/components/CheckboxButton.vue'
 import CheckboxButtonGroup from '@/components/CheckboxButtonGroup.vue'
 import ColorPicker from '@/components/ColorPicker/index.vue'
 import FullscreenSpin from '@/components/FullscreenSpin.vue'
+import MoveablePanel from '@/components/MoveablePanel.vue'
 
 const components = {
   FileInput,
@@ -12,6 +13,7 @@ const components = {
   CheckboxButtonGroup,
   ColorPicker,
   FullscreenSpin,
+  MoveablePanel,
 }
 
 export default {

src/views/Editor/Canvas/hooks/useSelectElement.ts

@@ -86,15 +86,7 @@ export default (
     if (startMove) moveElement(e, element)
   }
 
-  // 选中页面内的全部元素
-  const selectAllElement = () => {
-    const unlockedElements = elementList.value.filter(el => !el.lock)
-    const newActiveElementIdList = unlockedElements.map(el => el.id)
-    mainStore.setActiveElementIdList(newActiveElementIdList)
-  }
-
   return {
     selectElement,
-    selectAllElement,
   }
 }