feat: Enhance equipment components with pin functionality and constraint management

- Added pin support to MechanicalButton, enabling pin-click events and componentId handling.
- Updated Pin component to manage constraint states and colors dynamically.
- Integrated SMT_LED with pin functionality, allowing LED state to respond to constraints.
- Enhanced Wire component to reflect constraint colors and manage wire states based on pin connections.
- Introduced wireManager for managing wire states and constraints.
- Implemented a constraints store for managing and notifying constraint state changes across components.
- Updated component configuration to remove appearance options and clarify constraint descriptions.
- Improved ProjectView to handle optional chaining for props and ensure robust data handling.
- Initialized constraint communication in main application entry point.

src/views/ProjectView.vue

@@ -50,7 +50,7 @@
                 type="text"
                 :placeholder="prop.label || prop.name"
                 class="input input-bordered input-sm w-full"
-                :value="selectedComponentData.props[prop.name]"
+                :value="selectedComponentData.props?.[prop.name]"
                 @input="updateComponentProp(selectedComponentData.id, prop.name, ($event.target as HTMLInputElement).value)"
               />
               <input
@@ -58,14 +58,14 @@
                 type="number"
                 :placeholder="prop.label || prop.name"
                 class="input input-bordered input-sm w-full"
-                :value="selectedComponentData.props[prop.name]"
+                :value="selectedComponentData.props?.[prop.name]"
                 @input="updateComponentProp(selectedComponentData.id, prop.name, parseFloat(($event.target as HTMLInputElement).value) || prop.default)"
               />              <!-- 可以为 boolean 添加 checkbox，为 color 添加 color picker 等 -->
                <div v-else-if="prop.type === 'boolean'" class="flex items-center">
                  <input
                     type="checkbox"
                     class="checkbox checkbox-sm mr-2"
-                    :checked="selectedComponentData.props[prop.name]"
+                    :checked="selectedComponentData.props?.[prop.name]"
                     @change="updateComponentProp(selectedComponentData.id, prop.name, ($event.target as HTMLInputElement).checked)"
                   />
                   <span>{{ prop.label || prop.name }}</span>
@@ -73,12 +73,12 @@
               <select
                 v-else-if="prop.type === 'select' && prop.options"
                 class="select select-bordered select-sm w-full"
-                :value="selectedComponentData.props[prop.name]"
+                :value="selectedComponentData.props?.[prop.name]"
                 @change="(event) => {
                   const selectElement = event.target as HTMLSelectElement;
                   const value = selectElement.value;
                   console.log('选择的值:', value, '类型:', typeof value);
-                  updateComponentProp(selectedComponentData.id, prop.name, value);
+                  if (selectedComponentData) {updateComponentProp(selectedComponentData.id, prop.name, value);}
                 }"
               >
                 <option v-for="option in prop.options" :key="option.value" :value="option.value">
@@ -143,6 +143,7 @@ interface ComponentModule {
       type: string;
       label?: string;
       default: any;
+      options?: Array<{ value: any; label: string }>; // 添加 options 字段用于 select 类型
     }>;
   };
 }