Merge branch 'master' of ssh://git.swordlost.top:222/SikongJueluo/FPGA_WebLab into dpp

src/views/JtagTest.vue

@@ -1,45 +0,0 @@
-<template>
-  <div class="h-screen flex flex-col overflow-hidden">
-    <!-- 主要内容 -->
-    <div class="flex-1 flex justify-center">
-      <div class="h-full w-32"></div>
-
-      <div class="h-full w-[70%] shadow-2xl flex items-start p-4">
-        <button class="btn btn-primary h-10 w-30">获取ID Code</button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, onMounted, onUnmounted } from "vue";
-
-const eventSource = ref<EventSource>();
-
-const initSource = () => {
-  eventSource.value = new EventSource("http://localhost:500/api/log/example");
-
-  eventSource.value.onmessage = (event) => {
-    console.log("收到消息内容是:", event.data);
-  };
-
-  eventSource.value.onerror = (error) => {
-    console.error("SSE 连接出错：", error);
-    eventSource.value!.close();
-  };
-};
-
-onMounted(() => {
-  initSource();
-});
-
-onUnmounted(() => {
-  if (eventSource) {
-    eventSource.value?.close();
-  }
-});
-</script>
-
-<style scoped lang="postcss">
-@import "../assets/main.css";
-</style>

src/views/ProjectView.vue

@@ -1,80 +1,65 @@
 <template>
   <div class="h-screen flex flex-col overflow-hidden">
     <div class="flex flex-1 overflow-hidden relative">
-      <!-- 左侧图形化区域 -->      
+      <!-- 左侧图形化区域 -->
       <div class="relative bg-base-200 overflow-hidden h-full" :style="{ width: leftPanelWidth + '%' }">
-        <DiagramCanvas
-          ref="diagramCanvas"
-          :componentModules="componentModules"          
-          @component-selected="handleComponentSelected"
-          @component-moved="handleComponentMoved"
-          @component-delete="handleComponentDelete"
-          @wire-created="handleWireCreated"
-          @wire-deleted="handleWireDeleted"
-          @diagram-updated="handleDiagramUpdated"
-          @open-components="openComponentsMenu"
-          @load-component-module="handleLoadComponentModule"
-        />
+        <DiagramCanvas ref="diagramCanvas" :componentModules="componentModules"
+          @component-selected="handleComponentSelected" @component-moved="handleComponentMoved"
+          @component-delete="handleComponentDelete" @wire-created="handleWireCreated" @wire-deleted="handleWireDeleted"
+          @diagram-updated="handleDiagramUpdated" @open-components="openComponentsMenu"
+          @load-component-module="handleLoadComponentModule" />
       </div>
 
       <!-- 拖拽分割线 -->
       <div
-        class="resizer cursor-col-resize bg-base-300 hover:bg-primary hover:opacity-70 active:bg-primary active:opacity-90 transition-colors"
-        @mousedown="startResize"
-      ></div>
-      
+        class="resizer bg-base-100 hover:bg-primary hover:opacity-70 active:bg-primary active:opacity-90 transition-colors"
+        @mousedown="startResize"></div>
+
       <!-- 右侧编辑区域 -->
-      <div class="bg-base-100 h-full overflow-hidden flex flex-col" :style="{ width: (100 - leftPanelWidth) + '%' }">
-        <div class="overflow-y-auto p-4 flex-1">
-          <PropertyPanel
-            :componentData="selectedComponentData"
-            :componentConfig="selectedComponentConfig"
-            @updateProp="updateComponentProp"
-            @updateDirectProp="updateComponentDirectProp"
-          />
+      <div class="bg-base-200 h-full overflow-hidden flex flex-col" :style="{ width: 100 - leftPanelWidth + '%' }">
+        <div class="overflow-y-auto flex-1">
+          <PropertyPanel :componentData="selectedComponentData" :componentConfig="selectedComponentConfig"
+            @updateProp="updateComponentProp" @updateDirectProp="updateComponentDirectProp" />
         </div>
       </div>
-    </div>    <!-- 元器件选择组件 -->
-    <ComponentSelector 
-      :open="showComponentsMenu"
-      @update:open="showComponentsMenu = $event"
-      @add-component="handleAddComponent"
-      @add-template="handleAddTemplate" 
-      @close="showComponentsMenu = false"
-    />
+    </div>
+    <!-- 元器件选择组件 -->
+    <ComponentSelector :open="showComponentsMenu" @update:open="showComponentsMenu = $event"
+      @add-component="handleAddComponent" @add-template="handleAddTemplate" @close="showComponentsMenu = false" />
   </div>
 </template>
 
 <script setup lang="ts">
 // 引入wokwi-elements和组件
 // import "@wokwi/elements"; // 不再需要全局引入 wokwi
-import { ref, reactive, computed, onMounted, onUnmounted, defineAsyncComponent, shallowRef } from 'vue'; // 引入 defineAsyncComponent 和 shallowRef
-import DiagramCanvas from '@/components/DiagramCanvas.vue';
-import ComponentSelector from '@/components/ComponentSelector.vue';
-import PropertyPanel from '@/components/PropertyPanel.vue';
-import type { DiagramData, DiagramPart, ConnectionArray } from '@/components/diagramManager';
-import { validateDiagramData } from '@/components/diagramManager';
-import { 
-  type PropertyConfig, 
-  generatePropertyConfigs, 
-  generatePropsFromDefault, 
-  generatePropsFromAttrs, 
-  getPropValue 
-} from '@/components/equipments/componentConfig'; // 引入组件配置工具
+import { ref, computed, onMounted, onUnmounted, shallowRef } from "vue"; // 引入 defineAsyncComponent 和 shallowRef
+import DiagramCanvas from "@/components/DiagramCanvas.vue";
+import ComponentSelector from "@/components/ComponentSelector.vue";
+import PropertyPanel from "@/components/PropertyPanel.vue";
+import type { DiagramData, DiagramPart } from "@/components/diagramManager";
+import {
+  type PropertyConfig,
+  generatePropertyConfigs,
+  generatePropsFromDefault,
+  generatePropsFromAttrs,
+} from "@/components/equipments/componentConfig"; // 引入组件配置工具
 
 // --- 元器件管理 ---
 const showComponentsMenu = ref(false);
 const diagramData = ref<DiagramData>({
   version: 1,
-  author: 'admin',
-  editor: 'me',
+  author: "admin",
+  editor: "me",
   parts: [],
-  connections: []
+  connections: [],
 });
 
 const selectedComponentId = ref<string | null>(null);
 const selectedComponentData = computed(() => {
-  return diagramData.value.parts.find(p => p.id === selectedComponentId.value) || null;
+  return (
+    diagramData.value.parts.find((p) => p.id === selectedComponentId.value) ||
+    null
+  );
 });
 const diagramCanvas = ref(null);
 
@@ -88,7 +73,9 @@ interface ComponentModule {
 }
 
 const componentModules = shallowRef<Record<string, ComponentModule>>({});
-const selectedComponentConfig = shallowRef<{ props: PropertyConfig[] } | null>(null); // 存储选中组件的配置
+const selectedComponentConfig = shallowRef<{ props: PropertyConfig[] } | null>(
+  null,
+); // 存储选中组件的配置
 
 // 动态加载组件定义
 async function loadComponentModule(type: string) {
@@ -96,13 +83,13 @@ async function loadComponentModule(type: string) {
     try {
       // 假设组件都在 src/components/equipments/ 目录下，且文件名与 type 相同
       const module = await import(`../components/equipments/${type}.vue`);
-      
+
       // 使用 markRaw 包装模块，避免不必要的响应式处理
       componentModules.value = {
         ...componentModules.value,
-        [type]: module
+        [type]: module,
       };
-      
+
       console.log(`Loaded module for ${type}:`, module);
     } catch (error) {
       console.error(`Failed to load component module ${type}:`, error);
@@ -114,7 +101,7 @@ async function loadComponentModule(type: string) {
 
 // 处理组件模块加载请求
 async function handleLoadComponentModule(type: string) {
-  console.log('Handling load component module request for:', type);
+  console.log("Handling load component module request for:", type);
   await loadComponentModule(type);
 }
 
@@ -125,35 +112,37 @@ const isResizing = ref(false);
 // 分割面板拖拽相关函数
 function startResize(e: MouseEvent) {
   isResizing.value = true;
-  document.addEventListener('mousemove', onResize);
-  document.addEventListener('mouseup', stopResize);
+  document.addEventListener("mousemove", onResize);
+  document.addEventListener("mouseup", stopResize);
   e.preventDefault(); // 防止文本选择
 }
 
 function onResize(e: MouseEvent) {
   if (!isResizing.value) return;
-  
+
   // 获取容器宽度和鼠标位置
-  const container = document.querySelector('.flex-1.overflow-hidden') as HTMLElement;
+  const container = document.querySelector(
+    ".flex-1.overflow-hidden",
+  ) as HTMLElement;
   if (!container) return;
-  
+
   const containerWidth = container.clientWidth;
   const mouseX = e.clientX;
-  
+
   // 计算左侧面板应占的百分比
   let newWidth = (mouseX / containerWidth) * 100;
-  
+
   // 限制最小宽度和最大宽度
   newWidth = Math.max(20, Math.min(newWidth, 80));
-  
+
   // 更新宽度
   leftPanelWidth.value = newWidth;
 }
 
 function stopResize() {
   isResizing.value = false;
-  document.removeEventListener('mousemove', onResize);
-  document.removeEventListener('mouseup', stopResize);
+  document.removeEventListener("mousemove", onResize);
+  document.removeEventListener("mouseup", stopResize);
 }
 
 // --- 元器件操作 ---
@@ -162,42 +151,65 @@ function openComponentsMenu() {
 }
 
 // 处理 ComponentSelector 组件添加元器件事件
-async function handleAddComponent(componentData: { type: string; name: string; props: Record<string, any> }) {
+async function handleAddComponent(componentData: {
+  type: string;
+  name: string;
+  props: Record<string, any>;
+}) {
   // 加载组件模块以便后续使用
-  await loadComponentModule(componentData.type);
+  const componentModule = await loadComponentModule(componentData.type);
 
   // 获取画布容器和位置信息
   const canvasInstance = diagramCanvas.value as any;
-  
+
   // 获取当前画布的位置信息
   let position = { x: 100, y: 100 };
   let scale = 1;
-  
+
   try {
-    if (canvasInstance && canvasInstance.getCanvasPosition && canvasInstance.getScale) {
+    if (
+      canvasInstance &&
+      canvasInstance.getCanvasPosition &&
+      canvasInstance.getScale
+    ) {
       position = canvasInstance.getCanvasPosition();
       scale = canvasInstance.getScale();
-      
+
       // 获取画布容器
       const canvasContainer = canvasInstance.$el as HTMLElement;
       if (canvasContainer) {
         // 计算可视区域中心点在画布坐标系中的位置
         const viewportWidth = canvasContainer.clientWidth;
         const viewportHeight = canvasContainer.clientHeight;
-        
+
         // 计算画布中心点的坐标
         position.x = (viewportWidth / 2 - position.x) / scale;
         position.y = (viewportHeight / 2 - position.y) / scale;
       }
     }
   } catch (error) {
-    console.error('获取画布位置时出错:', error);
+    console.error("获取画布位置时出错:", error);
   }
-  
+
   // 添加一些随机偏移，避免元器件重叠
   const offsetX = Math.floor(Math.random() * 100) - 50;
   const offsetY = Math.floor(Math.random() * 100) - 50;
-  
+
+  // 获取组件的能力页面
+  let capsPage = null;
+  if (
+    componentModule &&
+    componentModule.default &&
+    typeof componentModule.default.getCapabilities === "function"
+  ) {
+    try {
+      capsPage = componentModule.default.getCapabilities();
+      console.log(`获取到${componentData.type}组件的能力页面`);
+    } catch (error) {
+      console.error(`获取${componentData.type}组件能力页面失败:`, error);
+    }
+  }
+
   // 创建新组件，使用diagramManager接口定义
   const newComponent: DiagramPart = {
     id: `component-${Date.now()}`,
@@ -205,17 +217,22 @@ async function handleAddComponent(componentData: { type: string; name: string; p
     x: Math.round(position.x + offsetX),
     y: Math.round(position.y + offsetY),
     attrs: componentData.props,
+    capsPage: capsPage, // 设置组件的能力页面
     rotate: 0,
-    group: '',
+    group: "",
     positionlock: false,
     hidepins: true,
     isOn: true,
-    index: 0
+    index: 0,
   };
-  
-  console.log('添加新组件:', newComponent);  
+
+  console.log("添加新组件:", newComponent);
   // 通过画布实例添加组件
-  if (canvasInstance && canvasInstance.getDiagramData && canvasInstance.updateDiagramDataDirectly) {
+  if (
+    canvasInstance &&
+    canvasInstance.getDiagramData &&
+    canvasInstance.updateDiagramDataDirectly
+  ) {
     const currentData = canvasInstance.getDiagramData();
     currentData.parts.push(newComponent);
     canvasInstance.updateDiagramDataDirectly(currentData);
@@ -223,81 +240,114 @@ async function handleAddComponent(componentData: { type: string; name: string; p
 }
 
 // 处理模板添加事件
-async function handleAddTemplate(templateData: { id: string; name: string; template: any }) {
-  console.log('添加模板:', templateData);
-  console.log('=== 模板组件数量:', templateData.template?.parts?.length || 0);
-    // 获取画布实例
+async function handleAddTemplate(templateData: {
+  id: string;
+  name: string;
+  template: any;
+}) {
+  console.log("添加模板:", templateData);
+  console.log("=== 模板组件数量:", templateData.template?.parts?.length || 0);
+  // 获取画布实例
   const canvasInstance = diagramCanvas.value as any;
-  if (!canvasInstance || !canvasInstance.getDiagramData || !canvasInstance.updateDiagramDataDirectly) {
-    console.error('没有可用的画布实例添加模板');
+  if (
+    !canvasInstance ||
+    !canvasInstance.getDiagramData ||
+    !canvasInstance.updateDiagramDataDirectly
+  ) {
+    console.error("没有可用的画布实例添加模板");
     return;
   }
-  
+
   // 获取当前图表数据
   const currentData = canvasInstance.getDiagramData();
-  console.log('=== 当前图表组件数量:', currentData.parts.length);
-  
+  console.log("=== 当前图表组件数量:", currentData.parts.length);
+
   // 生成唯一ID前缀，以确保添加的组件ID不重复
   const idPrefix = `template-${Date.now()}-`;
-    // 处理模板组件并添加到图表
+  // 处理模板组件并添加到图表
   if (templateData.template && templateData.template.parts) {
     // 获取当前视口中心位置
     let viewportCenter = { x: 300, y: 200 }; // 默认值
     try {
-      if (canvasInstance && canvasInstance.getCanvasPosition && canvasInstance.getScale) {
+      if (
+        canvasInstance &&
+        canvasInstance.getCanvasPosition &&
+        canvasInstance.getScale
+      ) {
         const position = canvasInstance.getCanvasPosition();
         const scale = canvasInstance.getScale();
-        
+
         // 获取画布容器
         const canvasContainer = canvasInstance.$el as HTMLElement;
         if (canvasContainer) {
           // 计算可视区域中心点在画布坐标系中的位置
           const viewportWidth = canvasContainer.clientWidth;
           const viewportHeight = canvasContainer.clientHeight;
-          
+
           // 计算视口中心点的坐标 (与handleAddComponent函数中的方法相同)
           viewportCenter.x = (viewportWidth / 2 - position.x) / scale;
           viewportCenter.y = (viewportHeight / 2 - position.y) / scale;
-          console.log(`=== 计算的视口中心: x=${viewportCenter.x}, y=${viewportCenter.y}, scale=${scale}`);
+          console.log(
+            `=== 计算的视口中心: x=${viewportCenter.x}, y=${viewportCenter.y}, scale=${scale}`,
+          );
         }
       }
     } catch (error) {
-      console.error('获取视口中心位置时出错:', error);
+      console.error("获取视口中心位置时出错:", error);
     }
-    
-    console.log('=== 使用视口中心添加模板组件:', viewportCenter);
-    
+
+    console.log("=== 使用视口中心添加模板组件:", viewportCenter);
+
     // 找到模板中的主要组件（假设是第一个组件）
     const mainPart = templateData.template.parts[0];
-    
+
     // 创建带有新位置的组件
-    const newParts = templateData.template.parts.map((part: any) => {
-      // 创建组件副本并分配新ID
-      const newPart = JSON.parse(JSON.stringify(part));
-      newPart.id = `${idPrefix}${part.id}`;
-      
-      // 计算相对于主要组件的偏移量，保持模板内部组件的相对位置关系
-      if (typeof newPart.x === 'number' && typeof newPart.y === 'number') {
-        const oldX = newPart.x;
-        const oldY = newPart.y;
-        
-        // 计算相对位置（相对于主要组件）
-        const relativeX = part.x - mainPart.x;
-        const relativeY = part.y - mainPart.y;
-        
-        // 应用到视口中心位置
-        newPart.x = viewportCenter.x + relativeX;
-        newPart.y = viewportCenter.y + relativeY;
-        
-        console.log(`=== 组件[${newPart.id}]位置调整: (${oldX},${oldY}) -> (${newPart.x},${newPart.y})`);
-      }
-      
-      return newPart;
-    });
-    
+    const newParts = await Promise.all(
+      templateData.template.parts.map(async (part: any) => {
+        // 创建组件副本并分配新ID
+        const newPart = JSON.parse(JSON.stringify(part));
+        newPart.id = `${idPrefix}${part.id}`;
+
+        // 尝试加载组件模块并获取能力页面
+        try {
+          const componentModule = await loadComponentModule(part.type);
+          if (
+            componentModule &&
+            componentModule.default &&
+            typeof componentModule.default.getCapabilities === "function"
+          ) {
+            newPart.capsPage = componentModule.default.getCapabilities();
+            console.log(`加载模板组件${part.type}组件的能力页面成功`);
+          }
+        } catch (error) {
+          console.error(`加载模板组件${part.type}的能力页面失败:`, error);
+        }
+
+        // 计算相对于主要组件的偏移量，保持模板内部组件的相对位置关系
+        if (typeof newPart.x === "number" && typeof newPart.y === "number") {
+          const oldX = newPart.x;
+          const oldY = newPart.y;
+
+          // 计算相对位置（相对于主要组件）
+          const relativeX = part.x - mainPart.x;
+          const relativeY = part.y - mainPart.y;
+
+          // 应用到视口中心位置
+          newPart.x = viewportCenter.x + relativeX;
+          newPart.y = viewportCenter.y + relativeY;
+
+          console.log(
+            `=== 组件[${newPart.id}]位置调整: (${oldX},${oldY}) -> (${newPart.x},${newPart.y})`,
+          );
+        }
+
+        return newPart;
+      }),
+    );
+
     // 向图表添加新组件
     currentData.parts.push(...newParts);
-    
+
     // 处理连接关系
     if (templateData.template.connections) {
       // 创建一个映射表用于转换旧组件ID到新组件ID
@@ -305,45 +355,47 @@ async function handleAddTemplate(templateData: { id: string; name: string; templ
       templateData.template.parts.forEach((part: any) => {
         idMap[part.id] = `${idPrefix}${part.id}`;
       });
-      
+
       // 添加连接，更新组件ID引用
-      const newConnections = templateData.template.connections.map((conn: any) => {
-        // 处理连接数据 (格式为 [from, to, type, path])
-        if (Array.isArray(conn)) {
-          const [from, to, type, path] = conn;
-          
-          // 从连接字符串中提取组件ID和引脚ID
-          const fromParts = from.split(':');
-          const toParts = to.split(':');
-          
-          if (fromParts.length === 2 && toParts.length === 2) {
-            const fromComponentId = fromParts[0];
-            const fromPinId = fromParts[1];
-            const toComponentId = toParts[0];
-            const toPinId = toParts[1];
-            
-            // 创建新的连接字符串，使用新的组件ID
-            const newFrom = `${idMap[fromComponentId] || fromComponentId}:${fromPinId}`;
-            const newTo = `${idMap[toComponentId] || toComponentId}:${toPinId}`;
-            
-            return [newFrom, newTo, type, path];
+      const newConnections = templateData.template.connections.map(
+        (conn: any) => {
+          // 处理连接数据 (格式为 [from, to, type, path])
+          if (Array.isArray(conn)) {
+            const [from, to, type, path] = conn;
+
+            // 从连接字符串中提取组件ID和引脚ID
+            const fromParts = from.split(":");
+            const toParts = to.split(":");
+
+            if (fromParts.length === 2 && toParts.length === 2) {
+              const fromComponentId = fromParts[0];
+              const fromPinId = fromParts[1];
+              const toComponentId = toParts[0];
+              const toPinId = toParts[1];
+
+              // 创建新的连接字符串，使用新的组件ID
+              const newFrom = `${idMap[fromComponentId] || fromComponentId}:${fromPinId}`;
+              const newTo = `${idMap[toComponentId] || toComponentId}:${toPinId}`;
+
+              return [newFrom, newTo, type, path];
+            }
           }
-        }
-        return conn; // 如果格式不匹配，保持原样
-      });
-      
+          return conn; // 如果格式不匹配，保持原样
+        },
+      );
+
       // 添加到当前连接列表
       currentData.connections.push(...newConnections);
     }
-      // 更新图表数据
+    // 更新图表数据
     canvasInstance.updateDiagramDataDirectly(currentData);
-    console.log('=== 更新图表数据完成，新组件数量:', currentData.parts.length);
-    
+    console.log("=== 更新图表数据完成，新组件数量:", currentData.parts.length);
+
     // 显示成功消息
-    showToast(`已添加 ${templateData.name} 模板`, 'success');
+    showToast(`已添加 ${templateData.name} 模板`, "success");
   } else {
-    console.error('模板格式错误，缺少parts数组');
-    showToast('模板格式错误', 'error');
+    console.error("模板格式错误，缺少parts数组");
+    showToast("模板格式错误", "error");
   }
 }
 
@@ -355,36 +407,44 @@ async function handleComponentSelected(componentData: DiagramPart | null) {
   if (componentData) {
     // 先加载组件模块
     const moduleRef = await loadComponentModule(componentData.type);
-    
+
     if (moduleRef) {
       try {
         // 使用组件配置工具创建配置项
         const propConfigs: PropertyConfig[] = [];
-        
+
         // 1. 自动获取组件属性信息 - 利用DiagramPart接口结构
         const directPropConfigs = generatePropertyConfigs(componentData);
         propConfigs.push(...directPropConfigs);
-        
+
         // 2. 尝试使用组件导出的getDefaultProps方法获取配置
-        if (typeof moduleRef.getDefaultProps === 'function') {
+        if (typeof moduleRef.getDefaultProps === "function") {
           // 从getDefaultProps方法构建配置
           const defaultProps = moduleRef.getDefaultProps();
           const defaultPropConfigs = generatePropsFromDefault(defaultProps);
           propConfigs.push(...defaultPropConfigs);
-          
+
           selectedComponentConfig.value = { props: propConfigs };
-          console.log(`Built config for ${componentData.type} from getDefaultProps:`, selectedComponentConfig.value);
+          console.log(
+            `Built config for ${componentData.type} from getDefaultProps:`,
+            selectedComponentConfig.value,
+          );
         } else {
-          console.warn(`Component ${componentData.type} does not export getDefaultProps method.`);
+          console.warn(
+            `Component ${componentData.type} does not export getDefaultProps method.`,
+          );
           // 创建一个空配置，只显示组件提供的属性
           const attrs = componentData.attrs || {};
           const attrPropConfigs = generatePropsFromAttrs(attrs);
           propConfigs.push(...attrPropConfigs);
-          
+
           selectedComponentConfig.value = { props: propConfigs };
         }
       } catch (error) {
-        console.error(`Error building config for ${componentData.type}:`, error);
+        console.error(
+          `Error building config for ${componentData.type}:`,
+          error,
+        );
         selectedComponentConfig.value = { props: [] };
       }
     } else {
@@ -397,12 +457,12 @@ async function handleComponentSelected(componentData: DiagramPart | null) {
 // 处理图表数据更新事件
 function handleDiagramUpdated(data: DiagramData) {
   diagramData.value = data;
-  console.log('Diagram data updated:', data);
+  console.log("Diagram data updated:", data);
 }
 
 // 处理组件移动事件
 function handleComponentMoved(moveData: { id: string; x: number; y: number }) {
-  const part = diagramData.value.parts.find(p => p.id === moveData.id);
+  const part = diagramData.value.parts.find((p) => p.id === moveData.id);
   if (part) {
     part.x = moveData.x;
     part.y = moveData.y;
@@ -412,63 +472,79 @@ function handleComponentMoved(moveData: { id: string; x: number; y: number }) {
 // 处理组件删除事件
 function handleComponentDelete(componentId: string) {
   // 查找要删除的组件
-  const component = diagramData.value.parts.find(p => p.id === componentId);
+  const component = diagramData.value.parts.find((p) => p.id === componentId);
   if (!component) return;
-  
+
   // 收集需要删除的组件ID列表（包括当前组件和同组组件）
   const componentsToDelete: string[] = [componentId];
-  
+
   // 如果组件属于一个组，则找出所有同组的组件
-  if (component.group && component.group !== '') {
+  if (component.group && component.group !== "") {
     const groupMembers = diagramData.value.parts.filter(
-      p => p.group === component.group && p.id !== componentId
+      (p) => p.group === component.group && p.id !== componentId,
     );
-    
+
     // 将同组组件ID添加到删除列表
-    componentsToDelete.push(...groupMembers.map(p => p.id));
-    console.log(`删除组件 ${componentId} 及其组 ${component.group} 中的 ${groupMembers.length} 个组件`);
+    componentsToDelete.push(...groupMembers.map((p) => p.id));
+    console.log(
+      `删除组件 ${componentId} 及其组 ${component.group} 中的 ${groupMembers.length} 个组件`,
+    );
   }
-  
+
   // 删除所有标记的组件
   diagramData.value.parts = diagramData.value.parts.filter(
-    p => !componentsToDelete.includes(p.id)
+    (p) => !componentsToDelete.includes(p.id),
   );
-  
+
   // 同时删除与这些组件相关的所有连接
   diagramData.value.connections = diagramData.value.connections.filter(
-    connection => {
+    (connection) => {
       for (const id of componentsToDelete) {
-        if (connection[0].startsWith(`${id}:`) || connection[1].startsWith(`${id}:`)) {
+        if (
+          connection[0].startsWith(`${id}:`) ||
+          connection[1].startsWith(`${id}:`)
+        ) {
           return false;
         }
       }
       return true;
-    }
+    },
   );
-  
+
   // 如果删除的是当前选中的组件，清除选中状态
-  if (selectedComponentId.value && componentsToDelete.includes(selectedComponentId.value)) {
+  if (
+    selectedComponentId.value &&
+    componentsToDelete.includes(selectedComponentId.value)
+  ) {
     selectedComponentId.value = null;
     selectedComponentConfig.value = null;
   }
 }
 
 // 更新组件属性的方法
-function updateComponentProp(componentId: string, propName: string, value: any) {
+function updateComponentProp(
+  componentId: string,
+  propName: string,
+  value: any,
+) {
   const canvasInstance = diagramCanvas.value as any;
-  if (!canvasInstance || !canvasInstance.getDiagramData || !canvasInstance.updateDiagramDataDirectly) {
-    console.error('没有可用的画布实例进行属性更新');
+  if (
+    !canvasInstance ||
+    !canvasInstance.getDiagramData ||
+    !canvasInstance.updateDiagramDataDirectly
+  ) {
+    console.error("没有可用的画布实例进行属性更新");
     return;
   }
-  
+
   // 检查值是否为对象，如果是对象并有value属性，则使用该属性值
-  if (value !== null && typeof value === 'object' && 'value' in value) {
+  if (value !== null && typeof value === "object" && "value" in value) {
     value = value.value;
   }
-  
+
   const currentData = canvasInstance.getDiagramData();
   const part = currentData.parts.find((p: DiagramPart) => p.id === componentId);
-  
+
   if (part) {
     // 检查是否为基本属性
     if (propName in part) {
@@ -480,29 +556,45 @@ function updateComponentProp(componentId: string, propName: string, value: any)
       }
       part.attrs[propName] = value;
     }
-    
+
     canvasInstance.updateDiagramDataDirectly(currentData);
-    console.log(`更新组件${componentId}的属性${propName}为:`, value, typeof value);
+    console.log(
+      `更新组件${componentId}的属性${propName}为:`,
+      value,
+      typeof value,
+    );
   }
 }
 
 // 更新组件的直接属性
-function updateComponentDirectProp(componentId: string, propName: string, value: any) {
+function updateComponentDirectProp(
+  componentId: string,
+  propName: string,
+  value: any,
+) {
   const canvasInstance = diagramCanvas.value as any;
-  if (!canvasInstance || !canvasInstance.getDiagramData || !canvasInstance.updateDiagramDataDirectly) {
-    console.error('没有可用的画布实例进行属性更新');
+  if (
+    !canvasInstance ||
+    !canvasInstance.getDiagramData ||
+    !canvasInstance.updateDiagramDataDirectly
+  ) {
+    console.error("没有可用的画布实例进行属性更新");
     return;
   }
-  
+
   const currentData = canvasInstance.getDiagramData();
   const part = currentData.parts.find((p: DiagramPart) => p.id === componentId);
-  
+
   if (part) {
     // @ts-ignore: 动态属性赋值
     part[propName] = value;
-    
+
     canvasInstance.updateDiagramDataDirectly(currentData);
-    console.log(`更新组件${componentId}的直接属性${propName}为:`, value, typeof value);
+    console.log(
+      `更新组件${componentId}的直接属性${propName}为:`,
+      value,
+      typeof value,
+    );
   }
 }
 
@@ -510,12 +602,12 @@ function updateComponentDirectProp(componentId: string, propName: string, value:
 
 // 处理连线创建事件
 function handleWireCreated(wireData: any) {
-  console.log('Wire created:', wireData);
+  console.log("Wire created:", wireData);
 }
 
 // 处理连线删除事件
 function handleWireDeleted(wireId: string) {
-  console.log('Wire deleted:', wireId);
+  console.log("Wire deleted:", wireId);
 }
 
 // 导出当前diagram数据
@@ -529,10 +621,15 @@ function exportDiagram() {
 
 // --- 消息提示 ---
 const showNotification = ref(false);
-const notificationMessage = ref('');
-const notificationType = ref<'success' | 'error' | 'info'>('info');
+const notificationMessage = ref("");
+const notificationType = ref<"success" | "error" | "info">("info");
 
-function showToast(message: string, type: 'success' | 'error' | 'info' = 'info', duration = 3000) {  const canvasInstance = diagramCanvas.value as any;
+function showToast(
+  message: string,
+  type: "success" | "error" | "info" = "info",
+  duration = 3000,
+) {
+  const canvasInstance = diagramCanvas.value as any;
   if (canvasInstance && canvasInstance.showToast) {
     canvasInstance.showToast(message, type, duration);
   } else {
@@ -540,7 +637,7 @@ function showToast(message: string, type: 'success' | 'error' | 'info' = 'info',
     notificationMessage.value = message;
     notificationType.value = type;
     showNotification.value = true;
-    
+
     // 设置自动消失
     setTimeout(() => {
       showNotification.value = false;
@@ -555,33 +652,33 @@ function showToast(message: string, type: 'success' | 'error' | 'info' = 'info',
 // --- 生命周期钩子 ---
 onMounted(async () => {
   // 初始化画布设置
-  console.log('ProjectView mounted, diagram canvas ref:', diagramCanvas.value);
-  
+  console.log("ProjectView mounted, diagram canvas ref:", diagramCanvas.value);
+
   // 获取初始图表数据
   const canvasInstance = diagramCanvas.value as any;
   if (canvasInstance && canvasInstance.getDiagramData) {
     diagramData.value = canvasInstance.getDiagramData();
-    
+
     // 预加载所有使用的组件模块，以确保它们在渲染时可用
     const componentTypes = new Set<string>();
-    diagramData.value.parts.forEach(part => {
+    diagramData.value.parts.forEach((part) => {
       componentTypes.add(part.type);
     });
-    
-    console.log('Preloading component modules:', Array.from(componentTypes));
-    
+
+    console.log("Preloading component modules:", Array.from(componentTypes));
+
     // 并行加载所有组件模块
     await Promise.all(
-      Array.from(componentTypes).map(type => loadComponentModule(type))
+      Array.from(componentTypes).map((type) => loadComponentModule(type)),
     );
-    
-    console.log('All component modules loaded');
+
+    console.log("All component modules loaded");
   }
 });
 
 onUnmounted(() => {
-  document.removeEventListener('mousemove', onResize);
-  document.removeEventListener('mouseup', stopResize);
+  document.removeEventListener("mousemove", onResize);
+  document.removeEventListener("mouseup", stopResize);
 });
 </script>
 
@@ -593,13 +690,13 @@ onUnmounted(() => {
 .resizer {
   width: 6px;
   height: 100%;
-  background-color: hsl(var(--b3));
   cursor: col-resize;
   transition: background-color 0.3s;
   z-index: 10;
 }
 
-.resizer:hover, .resizer:active {
+.resizer:hover,
+.resizer:active {
   width: 6px;
 }
 
@@ -618,6 +715,7 @@ onUnmounted(() => {
     opacity: 0;
     transform: translateX(30px);
   }
+
   to {
     opacity: 1;
     transform: translateX(0);
@@ -625,7 +723,8 @@ onUnmounted(() => {
 }
 
 /* 确保滚动行为仅在需要时出现 */
-html, body {
+html,
+body {
   overflow: hidden;
   height: 100%;
   margin: 0;

src/views/TestView.vue

@@ -6,7 +6,7 @@
       </div>
       <div class="divider"></div>
       <div class="w-full">
-        <div class="collapse bg-primary border-base-300 border">
+        <div class="collapse bg-primary">
           <input type="checkbox" />
           <div class="collapse-title font-semibold text-lg text-white">
             自定义开发板参数
@@ -73,7 +73,7 @@ async function uploadBitstream(event: Event, bitstream: File) {
       boardAddress.value,
       fileParam,
     );
-    return resp;
+    return resp
   } catch (e) {
     dialog.error("上传错误");
   }