feat(views): 支持拖拽空间控件至“环境区域”编辑器画布

src/views/EnvArea/Graphics.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed, onMounted, onUnmounted, ref } from "vue";
+import { monitorRoomData } from "./pens/monitorRoom";
+import { monitorNoRoomData } from "./pens/monitorNoRoom";
+import { deepClone } from "@meta2d/core";
 
 type AssetsType = "space" | "monitor";
 
@@ -10,6 +13,21 @@ const monitorPoints = ref([
   { name: "3F-R3" },
 ]);
 
+const roomList = [
+  {
+    id: 1,
+    name: "有监测点房间",
+    cssClass: "space-item-has-monitor",
+    data: monitorRoomData,
+  },
+  {
+    id: 2,
+    name: "无监测点房间",
+    cssClass: "space-item-no-monitor",
+    data: monitorNoRoomData,
+  },
+];
+
 const isSpacePanel = computed(() => {
   return activeAssets.value === "space";
 });
@@ -18,6 +36,38 @@ const isMonitorPanel = computed(() => {
   return activeAssets.value === "monitor";
 });
 
+onMounted(() => {
+  document.addEventListener("dragstart", dragstart, false);
+  document.addEventListener("dragend", dragend, false);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("dragstart", dragstart);
+  document.removeEventListener("dragend", dragend);
+});
+
+const dragstart = (event: any) => {
+  event.target.style.opacity = 0.5;
+};
+
+const dragend = (event: any) => {
+  event.target.style.opacity = 1;
+};
+
+const handleDragStart = async (item: any) => {
+  if (!item) {
+    return;
+  }
+
+  let { data } = item;
+
+  if (!Array.isArray(data)) {
+    data = deepClone([data]);
+  }
+
+  meta2d.canvas.addCaches = data;
+};
+
 const assetsChange = () => {
   return;
 };
@@ -37,13 +87,15 @@ const assetsChange = () => {
     </div>
     <div :class="['groups-panel', { 'groups-panel-monitor': isMonitorPanel }]">
       <div v-show="isSpacePanel">
-        <div class="space-item">
-          <div class="space-item-title">{{ $t("有监测点房间") }}</div>
-          <div class="space-item-has-monitor"></div>
-        </div>
-        <div class="space-item">
-          <div class="space-item-title">{{ $t("无监测点房间") }}</div>
-          <div class="space-item-no-monitor"></div>
+        <div class="space-item" v-for="item in roomList" :key="item.id">
+          <div class="space-item-title">{{ $t(item.name) }}</div>
+          <div
+            :class="item.cssClass"
+            :draggable="true"
+            @dragstart="handleDragStart(item)"
+            @click.stop="handleDragStart(item)"
+            @touchstart.passive="handleDragStart(item)"
+          ></div>
         </div>
       </div>
       <div v-show="isMonitorPanel">
@@ -51,6 +103,7 @@ const assetsChange = () => {
           :class="['monitor-item', { 'monitor-item-disabled': item.disabled }]"
           v-for="(item, index) in monitorPoints"
           :key="index"
+          :draggable="!item.disabled"
         >
           <div class="monitor-item-circle"></div>
           <div class="monitor-item-title">{{ item.name }}</div>
@@ -112,8 +165,6 @@ const assetsChange = () => {
     padding: 24px 16px;
 
     .space-item {
-      cursor: pointer;
-
       .space-item-title {
         font-weight: 500;
         font-size: 12px;
@@ -126,18 +177,20 @@ const assetsChange = () => {
         height: 140px;
         background: #fff;
         border-radius: 12px;
+        cursor: pointer;
       }
 
       .space-item-no-monitor {
         height: 140px;
         background: repeating-linear-gradient(
-          -60deg,
+          -45deg,
           #f1f1f1,
           #f1f1f1 6px,
           #d4d8d7 6px,
           #d4d8d7 12px
         );
         border-radius: 12px;
+        cursor: pointer;
       }
 
       & + .space-item {
@@ -192,6 +245,7 @@ const assetsChange = () => {
         font-size: 12px;
         color: rgba(0, 0, 0, 0.65);
         line-height: 22px;
+        user-select: none;
       }
 
       & + .monitor-item {

src/views/EnvArea/View.vue

@@ -121,6 +121,7 @@ const handleCancel = () => {
     background-size: 15px 15px;
     background-position: center center;
     overflow: auto;
+    padding: 40px;
   }
 
   #env-area-meta2d {
@@ -130,8 +131,7 @@ const handleCancel = () => {
     overflow: hidden;
     outline: 1px solid var(--color-primary);
     border-radius: 12px;
-    top: 64px;
-    left: 40px;
+    top: 24px;
   }
 
   .temperature-humidity-button {