fix: mother board reactive problem

src/components/PropertyPanel.vue

@@ -45,18 +45,10 @@
 
     <CollapsibleSection title="组件功能" v-model:isExpanded="componentCapsExpanded" status="default" class="mt-4">
       <div v-if="componentData && componentData.type">
-        <component 
-          v-if="capabilityComponent" 
-          :is="capabilityComponent" 
-          v-bind="componentData.attrs" 
-        />
-        <div v-else class="text-gray-400">
-          该组件没有提供特殊功能
-        </div>
-      </div>
-      <div v-else class="text-gray-400">
-        选择元件以查看其功能
+        <component v-if="capabilityComponent" :is="capabilityComponent" v-bind="componentData.attrs" />
+        <div v-else class="text-gray-400">该组件没有提供特殊功能</div>
       </div>
+      <div v-else class="text-gray-400">选择元件以查看其功能</div>
     </CollapsibleSection>
 
     <!-- 未来可以在这里添加更多的分区 -->
@@ -98,7 +90,7 @@ const props = defineProps<{
 }>();
 
 // 控制各个属性分区的展开状态
-const propertySectionExpanded = ref(true); // 基本属性区域默认展开
+const propertySectionExpanded = ref(false); // 基本属性区域默认展开
 const pinsSectionExpanded = ref(false); // 引脚配置区域默认折叠
 const componentCapsExpanded = ref(true); // 组件功能区域默认展开
 const wireSectionExpanded = ref(false); // 连线管理区域默认折叠
@@ -225,10 +217,10 @@ async function getExposedCapabilities(componentType: string) {
     // 动态导入组件
     const module = await import(`./equipments/${componentType}.vue`);
     const Component = module.default;
-    
+
     // 创建一个临时div作为挂载点
-    const tempDiv = document.createElement('div');
-    
+    const tempDiv = document.createElement("div");
+
     // 创建临时应用实例并挂载组件
     let exposedMethods: any = null;
     const app = createApp({
@@ -239,33 +231,36 @@ async function getExposedCapabilities(componentType: string) {
               // 获取组件实例暴露的方法
               exposedMethods = el;
             }
-          }
+          },
         });
-      }
+      },
     });
-    
+
     // 挂载应用
     const vm = app.mount(tempDiv);
-    
+
     // 确保实例已创建并获取到暴露的方法
-    await new Promise(resolve => setTimeout(resolve, 0));
-    
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
     // 检查是否有getCapabilities方法
-    if (exposedMethods && typeof exposedMethods.getCapabilities === 'function') {
+    if (
+      exposedMethods &&
+      typeof exposedMethods.getCapabilities === "function"
+    ) {
       // 获取能力组件定义
       const CapabilityComponent = exposedMethods.getCapabilities();
-      
+
       // 卸载应用，清理DOM
       app.unmount();
       tempDiv.remove();
-      
+
       return CapabilityComponent;
     }
-    
+
     // 卸载应用，清理DOM
     app.unmount();
     tempDiv.remove();
-    
+
     return null;
   } catch (error) {
     console.error(`获取${componentType}能力页面失败:`, error);
@@ -280,26 +275,31 @@ watch(
     if (newComponentData && newComponentData.type) {
       try {
         // 首先尝试从实例中获取暴露的方法
-        const capsComponent = await getExposedCapabilities(newComponentData.type);
-        
+        const capsComponent = await getExposedCapabilities(
+          newComponentData.type,
+        );
+
         if (capsComponent) {
           capabilityComponent.value = markRaw(capsComponent);
           console.log(`已从实例加载${newComponentData.type}组件的能力页面`);
           return;
         }
-        
+
         // 如果实例方法获取失败，回退到模块导出方法
-        const module = await import(`./equipments/${newComponentData.type}.vue`);
-        
+        const module = await import(
+          `./equipments/${newComponentData.type}.vue`
+        );
+
         if (
-          (module.default && typeof module.default.getCapabilities === "function") ||
+          (module.default &&
+            typeof module.default.getCapabilities === "function") ||
           typeof module.getCapabilities === "function"
         ) {
           const getCapsFn =
             typeof module.getCapabilities === "function"
               ? module.getCapabilities
               : module.default.getCapabilities;
-          
+
           const moduleCapComponent = getCapsFn();
           if (moduleCapComponent) {
             capabilityComponent.value = markRaw(moduleCapComponent);
@@ -307,7 +307,7 @@ watch(
             return;
           }
         }
-        
+
         capabilityComponent.value = null;
         console.log(`组件${newComponentData.type}没有提供getCapabilities方法`);
       } catch (error) {
@@ -318,7 +318,7 @@ watch(
       capabilityComponent.value = null;
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 // 修改hasComponentCaps计算属性