feat(views): 支持绘制并拖拽监测点控件至“环境区域”编辑器画布

src/views/EnvArea/Graphics.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref } from "vue";
+import { deepClone } from "@meta2d/core";
 import { monitorRoomData } from "./pens/monitorRoom";
 import { monitorNoRoomData } from "./pens/monitorNoRoom";
-import { deepClone } from "@meta2d/core";
+import { monitorPointData } from "./pens/monitorPoint";
 
 type AssetsType = "space" | "monitor";
 
 const activeAssets = ref<AssetsType>("space");
 const monitorPoints = ref([
   { name: "3F-R1", disabled: true },
-  { name: "3F-R2" },
-  { name: "3F-R3" },
+  { name: "3F-R2", data: monitorPointData },
 ]);
 
 const roomList = [
@@ -104,6 +104,9 @@ const assetsChange = () => {
           v-for="(item, index) in monitorPoints"
           :key="index"
           :draggable="!item.disabled"
+          @dragstart="handleDragStart(item)"
+          @click.stop="handleDragStart(item)"
+          @touchstart.passive="handleDragStart(item)"
         >
           <div class="monitor-item-circle"></div>
           <div class="monitor-item-title">{{ item.name }}</div>

src/views/EnvArea/pens/monitorPoint.ts

@@ -0,0 +1,54 @@
+import { getFont, Pen } from "@meta2d/core";
+
+export function monitorPoint(ctx: CanvasRenderingContext2D, pen: Pen): void {
+  const { x, y, width, height } = pen.calculative.worldRect;
+  const isNormal = true;
+  ctx.save();
+
+  // 状态图标中心坐标
+  const iconX = x + width / 2;
+  const iconY = y + height / 2;
+  const iconColor = isNormal ? "103, 194, 58" : "245, 108, 108"; // 正常状态 - 绿色、异常状态 - 红色
+
+  // 绘制三个同心圆
+  // 最大圆（直径24）
+  ctx.beginPath();
+  ctx.arc(iconX, iconY, 12, 0, Math.PI * 2);
+  ctx.fillStyle = `rgba(${iconColor}, 0.3)`;
+  ctx.fill();
+
+  // 中圆（直径12）
+  ctx.beginPath();
+  ctx.arc(iconX, iconY, 6, 0, Math.PI * 2);
+  ctx.fillStyle = `rgba(${iconColor}, 0.6)`;
+  ctx.fill();
+
+  // 最小圆（直径6）
+  ctx.beginPath();
+  ctx.arc(iconX, iconY, 3, 0, Math.PI * 2);
+  ctx.fillStyle = `rgba(${iconColor}, 1)`;
+  ctx.fill();
+
+  ctx.font = getFont({
+    fontWeight: "500",
+    fontSize: 12,
+    lineHeight: 22,
+  });
+
+  // 绘制右侧文字
+  ctx.fillStyle = "rgba(0, 0, 0, 0.65)";
+  ctx.textBaseline = "middle";
+  ctx.fillText("3F-办公室-01", iconX + 25, iconY);
+
+  // 绘制下方文字
+  ctx.textAlign = "center";
+  ctx.fillText("22.9℃｜60.6%", iconX, iconY + 35);
+
+  ctx.restore();
+}
+
+export const monitorPointData = {
+  name: "monitorPoint",
+  width: 214,
+  height: 140,
+};

src/views/EnvArea/pens/register.ts

@@ -1,8 +1,10 @@
 import { register, registerCanvasDraw } from "@meta2d/core";
 import { monitorRoom } from "./monitorRoom";
 import { monitorNoRoom } from "./monitorNoRoom";
+import { monitorPoint } from "./monitorPoint";
 
 export function registerAreaPens() {
   register({ monitorRoom });
   registerCanvasDraw({ monitorNoRoom });
+  registerCanvasDraw({ monitorPoint });
 }