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(() => {
   // 预加载组件模块