add: DDS virtual component

src/components/ComponentSelector.vue

@@ -115,16 +115,40 @@
               </button>
             </div>
           </div>
-          
-          <!-- 虚拟外设列表 (虚拟外设选项卡) -->
+            <!-- 虚拟外设列表 (虚拟外设选项卡) -->
           <div v-if="activeTab === 'virtual'" class="px-6 py-4 overflow-auto flex-1">
-            <div class="py-16 text-center">
+            <div v-if="filteredVirtualDevices.length > 0" class="grid grid-cols-2 gap-4">
+              <div v-for="(device, index) in filteredVirtualDevices" :key="index"
+                  class="card bg-base-200 hover:bg-base-300 transition-all duration-300 hover:shadow-md cursor-pointer"
+                  @click="addComponent(device)">
+                <div class="card-body p-3 items-center text-center">
+                  <div class="bg-base-100 rounded-lg w-full h-[90px] flex items-center justify-center overflow-hidden p-2">
+                    <!-- 直接使用组件作为预览 -->
+                    <component 
+                      v-if="componentModules[device.type]"
+                      :is="componentModules[device.type].default"
+                      class="component-preview"
+                      :size="getPreviewSize(device.type)"
+                    />
+                    <!-- 加载中状态 -->
+                    <span v-else class="text-xs text-gray-400">加载中...</span>
+                  </div>
+                  <h3 class="card-title text-sm mt-2">{{ device.name }}</h3>
+                  <p class="text-xs opacity-70">{{ device.type }}</p>
+                </div>
+              </div>
+            </div>
+            <!-- 无搜索结果 -->
+            <div v-else class="py-16 text-center">
               <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="mx-auto text-base-300 mb-3">
-                <circle cx="12" cy="12" r="10"></circle>
-                <line x1="12" y1="8" x2="12" y2="16"></line>
-                <line x1="8" y1="12" x2="16" y2="12"></line>
+                <circle cx="11" cy="11" r="8"></circle>
+                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                <line x1="8" y1="11" x2="14" y2="11"></line>
               </svg>
-              <p class="text-base-content opacity-70">虚拟外设功能即将推出</p>
+              <p class="text-base-content opacity-70">没有找到匹配的虚拟外设</p>
+              <button class="btn btn-sm btn-ghost mt-3" @click="searchQuery = ''">
+                清除搜索
+              </button>
             </div>
           </div>
           
@@ -182,6 +206,11 @@ const availableComponents = [
   { type: 'PG2L100H_FBG676', name: 'PG2L100H FBG676芯片' }
 ];
 
+// --- 可用虚拟外设列表 ---
+const availableVirtualDevices = [
+  { type: 'DDS', name: '信号发生器' }
+];
+
 // --- 可用模板列表 ---
 const availableTemplates = ref([
   { 
@@ -226,6 +255,7 @@ async function loadComponentModule(type: string) {
 
 // 预加载组件模块
 async function preloadComponentModules() {
+  // 加载基础组件
   for (const component of availableComponents) {
     try {
       await loadComponentModule(component.type);
@@ -233,6 +263,15 @@ async function preloadComponentModules() {
       console.error(`Failed to preload component ${component.type}:`, error);
     }
   }
+  
+  // 加载虚拟外设组件
+  for (const device of availableVirtualDevices) {
+    try {
+      await loadComponentModule(device.type);
+    } catch (error) {
+      console.error(`Failed to preload virtual device ${device.type}:`, error);
+    }
+  }
 }
 
 // 获取组件预览时适合的尺寸
@@ -250,7 +289,8 @@ function getPreviewSize(componentType: string): number {
     'SD': 0.6,                // SD卡插槽适中
     'SFP': 0.4,               // SFP光纤模块较大
     'SMA': 0.7,               // SMA连接器可以适中
-    'MotherBoard': 0.13       // 主板最大，需要最小尺寸
+    'MotherBoard': 0.13,      // 主板最大，需要最小尺寸
+    'DDS': 0.3                // 信号发生器较大，需要较小尺寸
   };
   
   // 返回对应尺寸，如果没有特定配置则返回默认值0.5
@@ -350,6 +390,18 @@ const filteredTemplates = computed(() => {
   );
 });
 
+// 过滤后的虚拟外设列表 (用于菜单)
+const filteredVirtualDevices = computed(() => {
+  if (!searchQuery.value || activeTab.value !== 'virtual') {
+    return availableVirtualDevices;
+  }
+  const query = searchQuery.value.toLowerCase();
+  return availableVirtualDevices.filter(device =>
+    device.name.toLowerCase().includes(query) ||
+    device.type.toLowerCase().includes(query)
+  );
+});
+
 // 生命周期钩子
 onMounted(() => {
   // 预加载组件模块

src/components/DiagramCanvas.vue

@@ -114,9 +114,7 @@
                             'alert-info'}`">
         <span>{{ notificationMessage }}</span>
       </div>
-    </div>
-
-    <!-- 加载指示器 -->
+    </div>    <!-- 加载指示器 -->
     <div v-if="isLoading" class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center z-50">
       <div class="loading loading-spinner loading-lg text-primary"></div>
     </div>
@@ -1002,10 +1000,26 @@ function setDiagramData(data: DiagramData) {
   emit('diagram-updated', data);
 }
 
+// 无加载动画的数据更新方法
+function updateDiagramDataDirectly(data: DiagramData) {
+  // 检查组件是否仍然挂载
+  if (!document.body.contains(canvasContainer.value)) {
+    return; // 如果组件已经卸载，不执行后续操作
+  }
+  
+  diagramData.value = data;
+  saveDiagramData(data);
+  
+  // 发出diagram-updated事件
+  emit('diagram-updated', data);
+}
+
 // 暴露方法给父组件
 defineExpose({
   // 基本数据操作
-  getDiagramData: () => diagramData.value,  setDiagramData: (data: DiagramData) => {
+  getDiagramData: () => diagramData.value,
+  updateDiagramDataDirectly,  
+  setDiagramData: (data: DiagramData) => {
     // 检查组件是否仍然挂载
     if (!document.body.contains(canvasContainer.value)) {
       return; // 如果组件已经卸载，不执行后续操作

src/components/PropertyPanel.vue

@@ -11,6 +11,14 @@
         @updateDirectProp="(componentId, propName, value) => $emit('updateDirectProp', componentId, propName, value)"
       />
     </CollapsibleSection>
+    
+    <!-- 信号发生器（DDS）特殊属性编辑器 -->
+    <div v-if="isDDSComponent">
+      <DDSPropertyEditor 
+        v-model="ddsProperties"
+        @update:modelValue="updateDDSProperties"
+      />
+    </div>
 
     <!-- 如果选中的组件有pins属性，则显示引脚配置区域 -->
     <CollapsibleSection
@@ -73,6 +81,7 @@ import { type DiagramPart } from '@/components/diagramManager';
 import { type PropertyConfig } from '@/components/equipments/componentConfig';
 import CollapsibleSection from './CollapsibleSection.vue';
 import PropertyEditor from './PropertyEditor.vue';
+import DDSPropertyEditor from './equipments/DDSPropertyEditor.vue';
 import { ref, computed, watch } from 'vue';
 
 // 定义Pin接口
@@ -94,6 +103,14 @@ const propertySectionExpanded = ref(true);
 const pinsSectionExpanded = ref(false);
 const wireSectionExpanded = ref(false);
 
+// DDS特殊属性
+const ddsProperties = ref({
+  frequency: 1000,
+  phase: 0,
+  waveform: 'sine',
+  customWaveformPoints: []
+});
+
 // 本地维护一个pins数组副本
 const componentPins = ref<Pin[]>([]);
 
@@ -106,6 +123,18 @@ watch(() => props.componentData?.attrs?.pins, (newPins) => {
   }
 }, { deep: true, immediate: true });
 
+// 监听DDS组件数据变化，更新特殊属性
+watch(() => props.componentData?.attrs, (newAttrs) => {
+  if (newAttrs && isDDSComponent.value) {
+    ddsProperties.value = {
+      frequency: newAttrs.frequency || 1000,
+      phase: newAttrs.phase || 0,
+      waveform: newAttrs.waveform || 'sine',
+      customWaveformPoints: newAttrs.customWaveformPoints || []
+    };
+  }
+}, { deep: true, immediate: true });
+
 // 计算属性：检查组件是否有pins属性
 const hasPinsProperty = computed(() => {
   if (!props.componentData || !props.componentData.attrs) {
@@ -121,6 +150,11 @@ const hasPinsProperty = computed(() => {
   return 'pins' in props.componentData.attrs;
 });
 
+// 计算属性：检查组件是否为DDS组件
+const isDDSComponent = computed(() => {
+  return props.componentData?.type === 'DDS';
+});
+
 // 定义事件
 const emit = defineEmits<{
   (e: 'updateProp', componentId: string, propName: string, value: any): void;
@@ -133,6 +167,30 @@ function updatePins() {
     emit('updateProp', props.componentData.id, 'pins', componentPins.value);
   }
 }
+
+// 监听DDS组件数据变化，更新特殊属性
+watch(() => props.componentData?.attrs, (newAttrs) => {
+  if (newAttrs && isDDSComponent.value) {
+    ddsProperties.value = {
+      frequency: newAttrs.frequency || 1000,
+      phase: newAttrs.phase || 0,
+      waveform: newAttrs.waveform || 'sine',
+      customWaveformPoints: newAttrs.customWaveformPoints || []
+    };
+  }
+}, { deep: true, immediate: true });
+
+// 更新DDS属性
+function updateDDSProperties(newProperties: any) {
+  ddsProperties.value = newProperties;
+  if (props.componentData && props.componentData.id) {
+    // 将各个属性单独更新，而不是作为一个整体
+    emit('updateProp', props.componentData.id, 'frequency', newProperties.frequency);
+    emit('updateProp', props.componentData.id, 'phase', newProperties.phase);
+    emit('updateProp', props.componentData.id, 'waveform', newProperties.waveform);
+    emit('updateProp', props.componentData.id, 'customWaveformPoints', newProperties.customWaveformPoints);
+  }
+}
 </script>
 
 <style scoped>

src/components/equipments/DDS.vue

@@ -0,0 +1,339 @@
+<template>
+  <div class="dds-component" :style="{ width: width + 'px', height: height + 'px', position: 'relative' }">
+    <svg 
+      xmlns="http://www.w3.org/2000/svg" 
+      :width="width" 
+      :height="height" 
+      viewBox="0 0 300 200"
+      class="dds-device"
+    >      <!-- 信号发生器外壳，扩大屏幕部分 -->
+      <rect width="300" height="180" rx="10" ry="10" fill="#2a323c" stroke="#444" stroke-width="2" />
+      
+      <!-- 信号发生器显示屏，扩大屏幕 -->
+      <rect x="20" y="20" width="260" height="140" rx="5" ry="5" fill="#1a1f25" stroke="#555" stroke-width="1" />
+      
+      <!-- 波形显示 -->
+      <path :d="currentWaveformPath" stroke="lime" stroke-width="2" fill="none" />
+        
+      <!-- 信息显示区域 -->
+      <text x="30" y="40" fill="#0f0" font-size="14">{{ displayFrequency }}</text>
+      <text x="200" y="40" fill="#0f0" font-size="14">φ: {{ phase }}°</text>
+    </svg>
+    
+    <!-- 输出引脚 -->
+    <div 
+      v-for="pin in pins" 
+      :key="pin.pinId"
+      :style="{
+        position: 'absolute',
+        left: `${pin.x * props.size}px`,
+        top: `${pin.y * props.size}px`,
+        transform: 'translate(-50%, -50%)'
+      }"
+      :data-pin-wrapper="`${pin.pinId}`"
+      :data-pin-x="`${pin.x * props.size}`"
+      :data-pin-y="`${pin.y * props.size}`"
+    >
+      <Pin
+        :ref="el => { if(el) pinRefs[pin.pinId] = el }"
+        :label="pin.pinId"
+        :constraint="pin.constraint"
+        :pinId="pin.pinId"
+        @pin-click="$emit('pin-click', $event)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue';
+import Pin from './Pin.vue';
+
+// 存储Pin引用
+const pinRefs = ref<Record<string, any>>({});
+
+// DDS属性
+interface DDSProps {
+  size?: number;
+  pins?: {
+    pinId: string;
+    constraint: string;
+    x: number;
+    y: number;
+  }[];
+  frequency?: number;
+  phase?: number;
+  timebase?: number; // 添加时基属性
+  waveform?: string;
+  savedWaveforms?: string[];
+  customWaveformPoints?: number[][];
+}
+
+const props = withDefaults(defineProps<DDSProps>(), {
+  size: 1,
+  pins: () => [
+    { pinId: 'OUT', constraint: '', x: 300, y: 90 }, // 调整输出引脚位置
+  ],
+  frequency: 1000,
+  phase: 0,
+  timebase: 1, // 默认时基为1
+  waveform: 'sine',
+  savedWaveforms: () => ['sine', 'square', 'triangle', 'sawtooth'],
+  customWaveformPoints: () => []
+});
+
+// 组件尺寸
+const width = computed(() => 300 * props.size);
+const height = computed(() => 180 * props.size); // 减小整体高度
+
+// 波形状态
+const frequency = ref(props.frequency);
+const phase = ref(props.phase);
+const timebase = ref(props.timebase || 1); // 添加时基参数，默认为1
+const currentWaveformIndex = ref(0);
+const waveformNames = ['正弦波', '方波', '三角波', '锯齿波'];
+const waveforms = ['sine', 'square', 'triangle', 'sawtooth'];
+
+// 波形函数集合
+interface WaveformFunction {
+  (x: number, width: number, height: number, phaseRad: number): number;
+}
+
+interface WaveformFunctions {
+  [key: string]: WaveformFunction;
+}
+
+const waveformFunctions: WaveformFunctions = {
+  // 正弦波函数: sin(2π*x + φ)
+  sine: (x: number, width: number, height: number, phaseRad: number): number => {
+    return height/2 * Math.sin(2 * Math.PI * (x / width) * 2 + phaseRad);
+  },
+  
+  // 方波函数: 周期性的高低电平
+  square: (x: number, width: number, height: number, phaseRad: number): number => {
+    const normX = (x / width + phaseRad / (2 * Math.PI)) % 1;
+    return normX < 0.5 ? height/4 : -height/4;
+  },
+  
+  // 三角波函数: 线性上升和下降
+  triangle: (x: number, width: number, height: number, phaseRad: number): number => {
+    const normX = (x / width + phaseRad / (2 * Math.PI)) % 1;
+    return height/2 - height * Math.abs(2 * normX - 1);
+  },
+  
+  // 锯齿波函数: 线性上升,瞬间下降
+  sawtooth: (x: number, width: number, height: number, phaseRad: number): number => {
+    const normX = (x / width + phaseRad / (2 * Math.PI)) % 1;
+    return height/2 - height/2 * (2 * normX);
+  }
+};
+
+// 计算当前显示频率
+const displayFrequency = computed(() => {
+  if (frequency.value >= 1000000) {
+    return `${(frequency.value / 1000000).toFixed(2)} MHz`;
+  } else if (frequency.value >= 1000) {
+    return `${(frequency.value / 1000).toFixed(2)} kHz`;
+  } else {
+    return `${frequency.value.toFixed(2)} Hz`;
+  }
+});
+
+// 格式化时基显示
+function formatTimebase(tb: number): string {
+  if (tb < 0.1) {
+    return `${(tb * 1000).toFixed(0)} ms/div`;
+  } else if (tb < 1) {
+    return `${(tb * 1000).toFixed(0)} ms/div`;
+  } else {
+    return `${tb.toFixed(1)} s/div`;
+  }
+}
+
+// 计算当前显示时基
+const displayTimebase = computed(() => formatTimebase(timebase.value));
+
+// 生成波形路径
+const currentWaveformPath = computed(() => {
+  const width = 240;
+  const height = 100; // 更大的波形显示高度，因为我们增加了屏幕高度
+  const xOffset = 30;
+  const yOffset = 50; // 上移位置以适应新布局
+  const currentWaveform = waveforms[currentWaveformIndex.value];
+  const phaseRadians = phase.value * Math.PI / 180;
+  
+  // 时基和频率共同影响周期数量
+  // 频率因素 - 频率越高，一个屏幕内显示的周期越多
+  // 使用对数缩放可以更好地表示广泛范围的频率变化
+  const freqLog = Math.log10(frequency.value) - 2; // 从100Hz开始作为基准
+  const frequencyFactor = Math.max(0.1, Math.min(10, freqLog)); // 限制在合理范围内
+  
+  // 时基影响周期数量 - 时基越小，显示的周期越多
+  const timebaseFactor = 1 / timebase.value;
+  
+  // 组合因素
+  const scaleFactor = timebaseFactor * frequencyFactor;
+  
+  let path = `M${xOffset},${yOffset + height/2}`;
+  
+  // 使用波形函数生成路径
+  const waveFunction = waveformFunctions[currentWaveform];
+  
+  // 生成路径点
+  for (let x = 0; x <= width; x++) {
+    // 应用组合缩放因素 - 影响x轴的缩放
+    const scaledX = x * scaleFactor;
+    const y = waveFunction(scaledX, width, height, phaseRadians);
+    path += ` L${x + xOffset},${yOffset + height/2 - y}`;
+  }
+  
+  return path;
+});
+
+// 波形操作函数
+function selectWaveform(index: number) {
+  currentWaveformIndex.value = index;
+}
+
+function increaseFrequency() {
+  if (frequency.value < 10) {
+    frequency.value += 0.1;
+  } else if (frequency.value < 100) {
+    frequency.value += 1;
+  } else if (frequency.value < 1000) {
+    frequency.value += 10;
+  } else if (frequency.value < 10000) {
+    frequency.value += 100;
+  } else if (frequency.value < 100000) {
+    frequency.value += 1000;
+  } else {
+    frequency.value += 10000;
+  }
+  frequency.value = Math.min(frequency.value, 10000000); // 最大10MHz
+}
+
+function decreaseFrequency() {
+  if (frequency.value <= 10) {
+    frequency.value -= 0.1;
+  } else if (frequency.value <= 100) {
+    frequency.value -= 1;
+  } else if (frequency.value <= 1000) {
+    frequency.value -= 10;
+  } else if (frequency.value <= 10000) {
+    frequency.value -= 100;
+  } else if (frequency.value <= 100000) {
+    frequency.value -= 1000;
+  } else {
+    frequency.value -= 10000;
+  }
+  frequency.value = Math.max(frequency.value, 0.1); // 最小0.1Hz
+  frequency.value = parseFloat(frequency.value.toFixed(1)); // 修复浮点数精度问题
+}
+
+function increasePhase() {
+  phase.value += 15;
+  if (phase.value >= 360) {
+    phase.value -= 360;
+  }
+}
+
+function decreasePhase() {
+  phase.value -= 15;
+  if (phase.value < 0) {
+    phase.value += 360;
+  }
+}
+
+// 监听props变化
+watch(
+  () => props.frequency,
+  (newValue) => {
+    if (newValue !== undefined && newValue !== frequency.value) {
+      frequency.value = newValue;
+    }
+  }
+);
+
+watch(
+  () => props.phase,
+  (newValue) => {
+    if (newValue !== undefined && newValue !== phase.value) {
+      phase.value = newValue;
+    }
+  }
+);
+
+watch(
+  () => props.timebase,
+  (newValue) => {
+    if (newValue !== undefined && newValue !== timebase.value) {
+      timebase.value = newValue;
+    }
+  }
+);
+
+watch(
+  () => props.waveform,
+  (newValue) => {
+    if (newValue !== undefined) {
+      const index = waveforms.indexOf(newValue);
+      if (index !== -1) {
+        currentWaveformIndex.value = index;
+      }
+    }
+  }
+);
+
+onMounted(() => {
+  // 初始化波形类型
+  if (props.waveform) {
+    const index = waveforms.indexOf(props.waveform);
+    if (index !== -1) {
+      currentWaveformIndex.value = index;
+    }
+  }
+  
+  // 初始化时基
+  if (props.timebase !== undefined) {
+    timebase.value = props.timebase;
+  }
+});
+
+// 暴露属性和方法
+defineExpose({
+  frequency,
+  phase,
+  timebase,
+  currentWaveformIndex,
+  selectWaveform,
+  increaseFrequency,
+  decreaseFrequency,
+  increasePhase,
+  decreasePhase
+});
+</script>
+
+<style scoped>
+.dds-component {
+  display: inline-block;
+  position: relative;
+}
+</style>
+
+<!-- 导出默认属性函数供外部使用 -->
+<script lang="ts">
+export function getDefaultProps() {
+  return {
+    size: 1,
+    pins: [
+      { pinId: 'OUT', constraint: '', x: 300, y: 90 }, // 调整输出引脚位置
+    ],
+    frequency: 1000,
+    phase: 0,
+    timebase: 1, // 添加默认时基
+    waveform: 'sine',
+    savedWaveforms: ['sine', 'square', 'triangle', 'sawtooth'],
+    customWaveformPoints: []
+  };
+}
+</script>