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/components/equipments/Wire.vue

@@ -21,7 +21,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, defineEmits, reactive } from 'vue';
+import { computed, defineEmits, reactive, watch, onMounted, onUnmounted } from 'vue';
+import { getConstraintColor, getConstraintState, onConstraintStateChange } from '../../stores/constraints';
 
 interface Props {
   id: string;
@@ -53,7 +54,17 @@ const props = withDefaults(defineProps<Props>(), {
   constraint: ''
 });
 
-const computedStroke = computed(() => props.isActive ? '#ff9800' : props.strokeColor);
+// 响应约束状态变化的颜色
+const constraintColor = computed(() => {
+  if (!props.constraint) return props.strokeColor;
+  return getConstraintColor(props.constraint);
+});
+
+// 计算实际使用的颜色：isActive优先，其次是constraint电平颜色，最后是默认色
+const computedStroke = computed(() => {
+  if (props.isActive) return '#ff9800';
+  return constraintColor.value || props.strokeColor;
+});
 
 const emit = defineEmits(['click', 'update:active', 'update:position']);
 
@@ -95,6 +106,44 @@ function calculateOrthogonalPath(startX: number, startY: number, endX: number, e
     return `M ${startX} ${startY} L ${startX} ${middleY} L ${endX} ${middleY} L ${endX} ${endY}`;
   }
 }
+
+// 监听约束状态变化
+let unsubscribe: (() => void) | null = null;
+
+onMounted(() => {
+  // 监听约束状态变化
+  if (props.constraint) {
+    unsubscribe = onConstraintStateChange((constraint, level) => {
+      if (constraint === props.constraint) {
+        // 约束状态变化，触发重新渲染
+      }
+    });
+  }
+});
+
+onUnmounted(() => {
+  // 清理监听
+  if (unsubscribe) {
+    unsubscribe();
+  }
+});
+
+// 监听约束属性变化
+watch(() => props.constraint, (newConstraint, oldConstraint) => {
+  if (unsubscribe) {
+    unsubscribe();
+    unsubscribe = null;
+  }
+  
+  if (newConstraint) {
+    unsubscribe = onConstraintStateChange((constraint, level) => {
+      if (constraint === newConstraint) {
+        // 约束状态变化，触发重新渲染
+      }
+    });
+  }
+});
+
 // 暴露方法，用于获取这条连线的信息
 defineExpose({  id: props.id,
   getInfo: () => ({