feat: Refactor code structure for improved readability and maintainability

src/components/PropertyPanel.vue

@@ -0,0 +1,152 @@
+<template>  <div class="property-panel">
+    <CollapsibleSection
+      title="基本属性"
+      v-model:isExpanded="propertySectionExpanded"
+      status="default"
+    >
+      <PropertyEditor
+        :componentData="componentData"
+        :componentConfig="componentConfig"
+        @updateProp="(componentId, propName, value) => $emit('updateProp', componentId, propName, value)"
+        @updateDirectProp="(componentId, propName, value) => $emit('updateDirectProp', componentId, propName, value)"
+      />
+    </CollapsibleSection>
+
+    <!-- 如果选中的组件有pins属性，则显示引脚配置区域 -->
+    <CollapsibleSection
+      v-if="hasPinsProperty"
+      title="引脚配置"
+      v-model:isExpanded="pinsSectionExpanded"
+      status="default"
+    >
+      <div class="space-y-4 p-2">
+        <!-- 显示现有的pins -->
+        <div v-for="(pin, index) in componentPins" :key="index" class="pin-item p-2 border rounded-md bg-base-200">
+          <div class="font-medium mb-2">引脚 #{{ index + 1 }}</div>
+          
+          <div class="grid grid-cols-2 gap-2">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text text-xs">ID</span>
+              </label>
+              <input 
+                type="text" 
+                v-model="componentPins[index].pinId"
+                class="input input-bordered input-sm w-full" 
+                placeholder="引脚ID"
+                @change="updatePins"
+              />
+            </div>
+            
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text text-xs">约束条件</span>
+              </label>
+              <input 
+                type="text" 
+                v-model="componentPins[index].constraint"
+                class="input input-bordered input-sm w-full" 
+                placeholder="约束条件"
+                @change="updatePins"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </CollapsibleSection>
+
+    <!-- 未来可以在这里添加更多的分区 -->
+    <!-- 例如：
+    <CollapsibleSection
+      title="连线管理"
+      v-model:isExpanded="wireSectionExpanded"
+      status="default"
+    >
+      <div>连线管理内容</div>
+    </CollapsibleSection>
+    -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type DiagramPart } from '@/components/diagramManager';
+import { type PropertyConfig } from '@/components/equipments/componentConfig';
+import CollapsibleSection from './CollapsibleSection.vue';
+import PropertyEditor from './PropertyEditor.vue';
+import { ref, computed, watch } from 'vue';
+
+// 定义Pin接口
+interface Pin {
+  pinId: string;
+  constraint: string;
+  x: number;
+  y: number;
+}
+
+// 定义属性
+const props = defineProps<{
+  componentData: DiagramPart | null;
+  componentConfig: { props: PropertyConfig[] } | null;
+}>();
+
+// 控制各个分区的展开状态
+const propertySectionExpanded = ref(true);
+const pinsSectionExpanded = ref(false);
+const wireSectionExpanded = ref(false);
+
+// 本地维护一个pins数组副本
+const componentPins = ref<Pin[]>([]);
+
+// 监听组件变化，更新本地pins数据
+watch(() => props.componentData?.attrs?.pins, (newPins) => {
+  if (newPins) {
+    componentPins.value = JSON.parse(JSON.stringify(newPins));
+  } else {
+    componentPins.value = [];
+  }
+}, { deep: true, immediate: true });
+
+// 计算属性：检查组件是否有pins属性
+const hasPinsProperty = computed(() => {
+  if (!props.componentData || !props.componentData.attrs) {
+    return false;
+  }
+  
+  // 检查配置中是否有pins属性
+  if (props.componentConfig && props.componentConfig.props) {
+    return props.componentConfig.props.some(prop => prop.name === 'pins' && prop.isArrayType);
+  }
+  
+  // 或直接检查attrs中是否有pins属性
+  return 'pins' in props.componentData.attrs;
+});
+
+// 定义事件
+const emit = defineEmits<{
+  (e: 'updateProp', componentId: string, propName: string, value: any): void;
+  (e: 'updateDirectProp', componentId: string, propName: string, value: any): void;
+}>();
+
+// 更新pins属性
+function updatePins() {
+  if (props.componentData && props.componentData.id) {
+    emit('updateProp', props.componentData.id, 'pins', componentPins.value);
+  }
+}
+</script>
+
+<style scoped>
+.property-panel {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.pin-item {
+  transition: all 0.2s ease;
+}
+
+.pin-item:hover {
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+</style>