From cfd8769e9be5ba38078682c029490ca9d9a25ee0 Mon Sep 17 00:00:00 2001
From: alivender <13898766233@163.com>
Date: Fri, 25 Apr 2025 16:11:53 +0800
Subject: [PATCH] feat: add project view

---
 package-lock.json                |  79 ++++++-
 package.json                     |   1 +
 src/App.vue                      |   1 +
 src/components/DiagramCanvas.vue | 370 +++++++++++++++++++++++++++++++
 src/router/index.ts              |   4 +-
 src/views/ProjectView.vue        | 137 ++++++++++++
 6 files changed, 589 insertions(+), 3 deletions(-)
 create mode 100644 src/components/DiagramCanvas.vue
 create mode 100644 src/views/ProjectView.vue

diff --git a/package-lock.json b/package-lock.json
index 3bbcd3d..7496ea4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,14 +1,15 @@
 {
   "name": "fpga-weblab",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "fpga-weblab",
-      "version": "0.0.0",
+      "version": "0.1.0",
       "dependencies": {
         "@types/lodash": "^4.17.16",
+        "@wokwi/elements": "^1.7.0",
         "all": "^0.0.0",
         "lodash": "^4.17.21",
         "log-symbols": "^7.0.0",
@@ -998,6 +999,21 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@lit-labs/ssr-dom-shim": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.3.0.tgz",
+      "integrity": "sha512-nQIWonJ6eFAvUUrSlwyHDm/aE8PBDu5kRpL0vHMg6K8fK3Diq1xdPjTnsJSwxABhaZ+5eBi1btQB5ShUTKo4nQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@lit/reactive-element": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz",
+      "integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.0.0"
+      }
+    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.29",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
@@ -1626,6 +1642,21 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/react": {
+      "version": "19.1.2",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.2.tgz",
+      "integrity": "sha512-oxLPMytKchWGbnQM9O7D67uPa9paTNxO7jVoNMXgkkErULBPhPARCfkKL9ytcIJJRGjbsVwW4ugJzyFFvm/Tiw==",
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT"
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.2.3",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.3.tgz",
@@ -1966,6 +1997,19 @@
         }
       }
     },
+    "node_modules/@wokwi/elements": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@wokwi/elements/-/elements-1.7.0.tgz",
+      "integrity": "sha512-8vgePMFmcmTldUvnCfkIMZ4tijy6H7e34JPQsdJPcJXUWdrp8XGEYnFETY6qrAI1Icm7SQChcarG/NpEV0Zn9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": ">=16",
+        "lit": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/alien-signals": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-1.0.13.tgz",
@@ -2975,6 +3019,37 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/lit": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz",
+      "integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit/reactive-element": "^1.6.0",
+        "lit-element": "^3.3.0",
+        "lit-html": "^2.8.0"
+      }
+    },
+    "node_modules/lit-element": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz",
+      "integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.1.0",
+        "@lit/reactive-element": "^1.3.0",
+        "lit-html": "^2.8.0"
+      }
+    },
+    "node_modules/lit-html": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz",
+      "integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    },
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
diff --git a/package.json b/package.json
index 6c945be..caa5c14 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@types/lodash": "^4.17.16",
+    "@wokwi/elements": "^1.7.0",
     "all": "^0.0.0",
     "lodash": "^4.17.21",
     "log-symbols": "^7.0.0",
diff --git a/src/App.vue b/src/App.vue
index 908e59e..a718234 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,6 +8,7 @@ const items = [
   { id: 1, icon: iconMenu, text: "用户界面", page: "/user" },
   { id: 2, icon: iconMenu, text: "ComponentTest", page: "/test" },
   { id: 3, icon: iconMenu, text: "JtagTest", page: "/test/jtag" },
+  { id: 4, icon: iconMenu, text: "工程界面", page: "/project" }, // 新增工程界面入口
 ];
 </script>
 
diff --git a/src/components/DiagramCanvas.vue b/src/components/DiagramCanvas.vue
new file mode 100644
index 0000000..a014b0a
--- /dev/null
+++ b/src/components/DiagramCanvas.vue
@@ -0,0 +1,370 @@
+<template>
+  <div class="flex-1 min-w-[60%] bg-base-200 relative overflow-auto" ref="canvasContainer" 
+      @mousedown="handleCanvasMouseDown" 
+      @mousedown.middle.prevent="startMiddleDrag"
+      @mousemove="onDrag" 
+      @mouseup="stopDrag" 
+      @mouseleave="stopDrag"
+      @wheel="onZoom">
+    <div 
+      ref="canvas" 
+      class="diagram-canvas" 
+      :style="{transform: `translate(${position.x}px, ${position.y}px) scale(${scale})`}">
+      <!-- wokwi-elements FPGA开发板 -->
+      <wokwi-fpga-board class="absolute top-10 left-10" style="width:600px;height:400px;"></wokwi-fpga-board>
+        <!-- 放置其他元器件的区域 -->
+      <div v-for="component in components" :key="component.id" 
+          class="absolute cursor-move component-wrapper" 
+          :class="{
+            'component-hover': hoveredComponent === component.id,
+            'component-selected': selectedComponent === component.id
+          }"
+          :style="{top: component.y + 'px', left: component.x + 'px', width: 'auto', height: 'auto'}"
+          @mousedown.left.stop="startComponentDrag($event, component)"
+          @mouseover="hoveredComponent = component.id"
+          @mouseleave="hoveredComponent = null">
+        <component :is="component.type"></component>
+      </div>
+    </div>
+    
+    <!-- 缩放指示器 -->
+    <div class="absolute bottom-2 right-2 bg-base-100 px-2 py-1 rounded-md opacity-70">
+      {{ Math.round(scale * 100) }}%
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 引入wokwi-elements
+import "@wokwi/elements";
+import { ref, reactive, onMounted, watch } from 'vue';
+
+// 定义组件接受的属性
+const props = defineProps<{
+  initialComponents?: Array<ComponentItem>,
+}>();
+
+// 定义组件发出的事件
+const emit = defineEmits(['component-selected', 'component-moved']);
+
+// 定义组件接口
+interface ComponentItem {
+  id: string;
+  type: string;
+  name: string;
+  x: number;
+  y: number;
+}
+
+// 画布位置和缩放
+const position = reactive({ x: 0, y: 0 });
+const scale = ref(1);
+const isDragging = ref(false);
+const isMiddleDragging = ref(false); // 是否在使用中键拖拽
+const dragStart = reactive({ x: 0, y: 0 });
+const canvas = ref(null);
+const canvasContainer = ref(null);
+
+// 元器件管理
+const components = ref<ComponentItem[]>([]);
+const draggingComponent = ref<ComponentItem | null>(null);
+
+// 监听props变化，更新本地组件数组
+watch(() => props.initialComponents, (newComponents) => {
+  if (newComponents) {
+    // 通过创建深拷贝来断开引用连接
+    components.value = JSON.parse(JSON.stringify(newComponents));
+  }
+}, { immediate: true, deep: true });
+const componentDragOffset = reactive({ x: 0, y: 0 });
+const hoveredComponent = ref(null); // 鼠标悬停的元器件ID
+const selectedComponent = ref(null); // 当前选中的元器件ID
+
+// 画布拖拽
+function startDrag(e) {
+  // 只处理左键拖拽
+  if (e.button !== 0) return;
+
+  // 确保其他拖拽状态被重置
+  isMiddleDragging.value = false;
+  
+  isDragging.value = true;
+  dragStart.x = e.clientX - position.x;
+  dragStart.y = e.clientY - position.y;
+  e.preventDefault();
+}
+
+// 中键拖拽画布（无论点击到哪里）
+function startMiddleDrag(e) {
+  // 确保是中键
+  if (e.button !== 1) return;
+  
+  e.preventDefault();
+  e.stopPropagation();
+  
+  // 确保其他拖拽状态被重置
+  isDragging.value = false;
+  
+  // 设置中键拖拽状态
+  isMiddleDragging.value = true;
+  
+  // 记录起始位置
+  dragStart.x = e.clientX - position.x;
+  dragStart.y = e.clientY - position.y;
+}
+
+// 处理画布鼠标按下事件
+function handleCanvasMouseDown(e) {
+  // 如果不是左键，则不做处理
+  if (e.button !== 0) return;
+  
+  // 如果是直接点击画布（而不是元器件），清除选中状态
+  if (e.target === canvasContainer.value || e.target === canvas.value) {
+    selectedComponent.value = null;
+    emit('component-selected', null);
+  }
+  
+  // 继续处理拖拽
+  startDrag(e);
+}
+
+function onDrag(e) {
+  // 如果左键或中键拖拽正在进行中
+  if (isDragging.value || isMiddleDragging.value) {
+    // 防止拖拽过程中选中文本
+    e.preventDefault();
+    
+    position.x = e.clientX - dragStart.x;
+    position.y = e.clientY - dragStart.y;
+  }
+}
+
+function stopDrag() {
+  isDragging.value = false;
+  isMiddleDragging.value = false;
+}
+
+// 画布缩放
+function onZoom(e) {
+  e.preventDefault();
+  const delta = e.deltaY > 0 ? -0.1 : 0.1;
+  const newScale = Math.max(0.3, Math.min(3, scale.value + delta));
+  
+  // 保持鼠标位置不变的缩放
+  if (canvas.value && canvasContainer.value) {
+    const rect = canvasContainer.value.getBoundingClientRect();
+    const mouseX = e.clientX - rect.left;
+    const mouseY = e.clientY - rect.top;
+    
+    // 计算鼠标在画布中的相对位置
+    const mouseXInCanvas = (mouseX - position.x) / scale.value;
+    const mouseYInCanvas = (mouseY - position.y) / scale.value;
+    
+    // 调整位置以保持鼠标位置不变
+    position.x = mouseX - mouseXInCanvas * newScale;
+    position.y = mouseY - mouseYInCanvas * newScale;
+  }
+  
+  scale.value = newScale;
+}
+
+// 元器件拖拽
+function startComponentDrag(e, component) {
+  // 确保只处理左键拖拽元器件
+  if (e.button !== 0) return;
+  
+  e.stopPropagation();
+  draggingComponent.value = component;
+  
+  // 设置选中元器件并通知父组件
+  selectedComponent.value = component.id;
+  emit('component-selected', component);
+  
+  // 保存起始位置和鼠标位置
+  const initialX = component.x;
+  const initialY = component.y;
+  const startX = e.clientX;
+  const startY = e.clientY;
+  
+  const mouseMoveHandler = (moveEvent) => {
+    if (!draggingComponent.value) return;
+    
+    // 计算鼠标移动的距离（在屏幕坐标系中）
+    const dx = moveEvent.clientX - startX;
+    const dy = moveEvent.clientY - startY;
+    
+    // 将移动距离转换为画布坐标系中的距离
+    const canvasDx = dx / scale.value;
+    const canvasDy = dy / scale.value;
+    
+    // 更新组件位置（相对于初始位置的增量）
+    draggingComponent.value.x = initialX + canvasDx;
+    draggingComponent.value.y = initialY + canvasDy;
+    
+    // 通知父组件元器件位置已变化
+    emit('component-moved', { 
+      id: draggingComponent.value.id,
+      x: draggingComponent.value.x,
+      y: draggingComponent.value.y
+    });
+  };
+  
+  const mouseUpHandler = () => {
+    draggingComponent.value = null;
+    // 保持选中状态，不清除 selectedComponent
+    window.removeEventListener('mousemove', mouseMoveHandler);
+    window.removeEventListener('mouseup', mouseUpHandler);
+  };
+  
+  window.addEventListener('mousemove', mouseMoveHandler);
+  window.addEventListener('mouseup', mouseUpHandler);
+}
+
+// 自定义FPGA开发板组件（未实现，只是示例）
+customElements.define('wokwi-fpga-board', class extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 600px;
+          height: 400px;
+          background-color: #2e7d32;
+          border: 8px solid #1b5e20;
+          border-radius: 10px;
+          position: relative;
+        }
+        .board-label {
+          position: absolute;
+          top: 20px;
+          left: 20px;
+          color: white;
+          font-family: Arial, sans-serif;
+          font-size: 18px;
+          font-weight: bold;
+        }
+        .board-components {
+          position: absolute;
+          top: 60px;
+          left: 40px;
+          right: 40px;
+          bottom: 40px;
+          background-color: #388e3c;
+          border-radius: 5px;
+        }
+        .pins {
+          position: absolute;
+          height: 10px;
+          display: flex;
+          gap: 10px;
+        }
+        .pins.top {
+          top: 0;
+          left: 80px;
+          right: 80px;
+        }
+        .pins.bottom {
+          bottom: 0;
+          left: 80px;
+          right: 80px;
+        }
+        .pin {
+          width: 10px;
+          height: 20px;
+          background-color: silver;
+          border-radius: 2px;
+        }
+      </style>
+      <div class="board-label">FPGA开发板</div>
+      <div class="board-components"></div>
+      <div class="pins top">
+        ${Array(20).fill().map(() => '<div class="pin"></div>').join('')}
+      </div>
+      <div class="pins bottom">
+        ${Array(20).fill().map(() => '<div class="pin"></div>').join('')}
+      </div>
+    `;
+  }
+});
+
+// 公开方法，允许外部添加组件
+function addComponent(component: ComponentItem) {
+  components.value.push(component);
+}
+
+// 公开方法，允许外部重置画布
+function resetCanvas() {
+  position.x = 0;
+  position.y = 0;
+  scale.value = 1;
+}
+
+// 暴露给父组件的方法
+defineExpose({
+  addComponent,
+  resetCanvas
+});
+</script>
+
+<style scoped>
+.diagram-canvas {
+  position: relative;
+  width: 4000px;
+  height: 4000px;
+  transform-origin: 0 0;
+}
+
+/* 禁用滚动条 */
+.flex-1.min-w-\[60\%\].bg-base-200.relative.overflow-auto::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}
+
+.flex-1.min-w-\[60\%\].bg-base-200.relative.overflow-auto {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+/* 元器件容器样式 */
+.component-wrapper {
+  position: relative;
+  padding: 5px;
+  box-sizing: border-box;
+  display: inline-block; /* 确保元素宽度基于内容 */
+  max-width: fit-content; /* 强制宽度适应内容 */
+  max-height: fit-content; /* 强制高度适应内容 */
+  overflow: visible; /* 允许内容溢出（用于显示边框） */
+}
+
+/* 悬停状态 */
+.component-hover::before {
+  content: '';
+  position: absolute;
+  top: -4px;
+  left: -4px;
+  right: -4px;
+  bottom: -4px;
+  border: 3px dashed #3498db;
+  pointer-events: none;
+  z-index: 1;
+  border-radius: 4px;
+  box-sizing: content-box;
+}
+
+/* 选中状态 */
+.component-selected::before {
+  content: '';
+  position: absolute;
+  top: -4px;
+  left: -4px;
+  right: -4px;
+  bottom: -4px;
+  border: 4px dashed #e74c3c;
+  border-color: #e74c3c #f39c12 #3498db #2ecc71;
+  pointer-events: none;
+  z-index: 1;
+  border-radius: 4px;
+  box-sizing: content-box;
+}
+</style>
diff --git a/src/router/index.ts b/src/router/index.ts
index e25d963..82c0191 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -3,13 +3,15 @@ import LoginView from "../views/LoginView.vue";
 import UserView from "../views/UserView.vue";
 import TestView from "../views/TestView.vue";
 import JtagTest from "../views/JtagTest.vue";
+import ProjectView from "../views/ProjectView.vue";
 
 const routes = [
   { path: "/", redirect: "/user" },
   { path: "/login", name: "Login", component: LoginView },
   { path: "/user", name: "User", component: UserView },
   { path: "/test", name: "Test", component: TestView },
-  { path: "/test/jtag", name:"JtagTest", component: JtagTest}
+  { path: "/test/jtag", name:"JtagTest", component: JtagTest},
+  { path: "/project", name: "Project", component: ProjectView } // 新增工程界面
 ];
 
 const router = createRouter({
diff --git a/src/views/ProjectView.vue b/src/views/ProjectView.vue
new file mode 100644
index 0000000..51eb4ee
--- /dev/null
+++ b/src/views/ProjectView.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="h-screen w-screen flex flex-col">
+    <!-- 顶部工具栏 -->
+    <div class="flex items-center p-2 border-b border-base-300 bg-base-100">
+      <h2 class="text-xl font-bold mr-auto">FPGA 工程界面</h2>
+      <button class="btn btn-circle btn-primary" @click="openComponentsMenu">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <line x1="12" y1="5" x2="12" y2="19"></line>
+          <line x1="5" y1="12" x2="19" y2="12"></line>
+        </svg>
+      </button>
+    </div>
+
+    <div class="flex flex-1 overflow-hidden">
+      <!-- 左侧图形化区域 -->
+      <DiagramCanvas 
+        ref="diagramCanvas"
+        :initialComponents="components"
+        @component-selected="handleComponentSelected"
+        @component-moved="handleComponentMoved"
+      />
+      
+      <!-- 右侧编辑区域 -->
+      <div class="w-[40%] bg-base-100 border-l flex flex-col p-4">
+        <h3 class="text-lg font-bold mb-4">属性编辑器</h3>
+        <div v-if="!selectedComponent" class="text-gray-400">选择元器件以编辑属性</div>
+        <div v-else>
+          <div class="mb-2">编辑元器件: {{ getComponentName(selectedComponent) }}</div>
+          <!-- 这里可以添加元器件的属性编辑表单 -->
+        </div>
+      </div>
+    </div>
+
+    <!-- 元器件选择菜单 -->
+    <div v-if="showComponentsMenu" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" @click.self="showComponentsMenu = false">
+      <div class="bg-base-100 p-4 rounded-lg shadow-xl max-w-3xl max-h-[80vh] overflow-auto">
+        <div class="flex justify-between items-center mb-4">
+          <h3 class="text-xl font-bold">选择元器件</h3>
+          <button class="btn btn-ghost btn-sm" @click="showComponentsMenu = false">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
+        </div>
+        
+        <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
+          <div v-for="(component, index) in availableComponents" :key="index" 
+              class="border p-4 rounded-lg flex flex-col items-center hover:bg-base-200 cursor-pointer"
+              @click="addComponent(component)">
+            <div class="flex-1 flex items-center justify-center p-2">
+              <component :is="component.type" style="transform: scale(0.5);"></component>
+            </div>
+            <div class="mt-2 text-center">{{ component.name }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 引入wokwi-elements和组件
+import "@wokwi/elements";
+import { ref, reactive } from 'vue';
+import DiagramCanvas from '@/components/DiagramCanvas.vue';
+
+// 元器件管理
+const showComponentsMenu = ref(false);
+interface ComponentItem {
+  id: string;
+  type: string;
+  name: string;
+  x: number;
+  y: number;
+}
+const components = ref<ComponentItem[]>([]);
+const selectedComponent = ref<string | null>(null);
+const selectedComponentData = ref<ComponentItem | null>(null);
+const diagramCanvas = ref(null);
+
+// 可用元器件列表
+const availableComponents = [
+  { type: 'wokwi-led', name: 'LED灯' },
+  { type: 'wokwi-resistor', name: '电阻' },
+  { type: 'wokwi-pushbutton', name: '按钮' },
+  { type: 'wokwi-7segment', name: '7段数码管' },
+  { type: 'wokwi-arduino-uno', name: 'Arduino Uno' },
+  { type: 'wokwi-servo', name: '舵机' },
+  { type: 'wokwi-lcd1602', name: 'LCD显示屏' },
+  { type: 'wokwi-dht22', name: '温湿度传感器' },
+  { type: 'wokwi-buzzer', name: '蜂鸣器' }
+];
+
+// 打开元器件选择菜单
+function openComponentsMenu() {
+  showComponentsMenu.value = true;
+}
+
+// 添加新元器件
+function addComponent(componentTemplate) {
+  const newComponent = {
+    id: `component-${Date.now()}`,
+    type: componentTemplate.type,
+    name: componentTemplate.name,
+    x: 100,
+    y: 100
+  };
+  
+  components.value.push(newComponent);
+  // 由于我们使用的是响应式数据绑定，不需要再次调用 diagramCanvas 的 addComponent
+  // DiagramCanvas 组件通过 :initialComponents="components" 已经接收到更新
+  
+  showComponentsMenu.value = false;
+}
+
+// 处理组件选中事件
+function handleComponentSelected(component) {
+  selectedComponent.value = component ? component.id : null;
+  selectedComponentData.value = component;
+}
+
+// 处理组件移动事件
+function handleComponentMoved(moveData) {
+  const component = components.value.find(c => c.id === moveData.id);
+  if (component) {
+    component.x = moveData.x;
+    component.y = moveData.y;
+  }
+}
+
+// 获取组件名称
+function getComponentName(componentId) {
+  const component = components.value.find(c => c.id === componentId);
+  return component ? component.name : '';
+}
+</script>