feat: frontend add virtual matrix key

src/components/equipments/BaseBoard.vue

@@ -0,0 +1,42 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" :width="width" :height="height" :class="$attrs">
+    <rect :width="width" :height="height" :rx="props.roundCorner" fill="#222222" />
+  </svg>
+  <Teleport to="#ComponentCapabilities" v-if="selectecComponentID === props.componentId && !!slot.default">
+    <slot></slot>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, inject } from "vue";
+import { CanvasCurrentSelectedComponentID } from "../InjectKeys";
+
+export interface Props {
+  size?: number;
+  width?: number;
+  height?: number;
+  roundCorner?: number;
+  componentId?: string;
+}
+
+const slot = defineSlots();
+const props = withDefaults(defineProps<Props>(), getDefaultProps());
+const selectecComponentID = inject(CanvasCurrentSelectedComponentID, ref(null));
+
+// 计算实际宽高
+const width = computed(() => props.width * props.size);
+const height = computed(() => props.height * props.size);
+</script>
+
+<script lang="ts">
+export function getDefaultProps(): Props {
+  return {
+    size: 1,
+    width: 200,
+    height: 200,
+    roundCorner: 20,
+  };
+}
+</script>
+
+<style scoped lang="postcss"></style>