feat: 画布解耦合

components.d.ts

@@ -24,6 +24,7 @@ declare module 'vue' {
     FunctionBar: typeof import('./src/components/FunctionBar.vue')['default']
     HDMI: typeof import('./src/components/equipments/HDMI.vue')['default']
     IpInputField: typeof import('./src/components/InputField/IpInputField.vue')['default']
+    ItemList: typeof import('./src/components/LabCanvas/ItemList.vue')['default']
     LabCanvas: typeof import('./src/components/LabCanvasNew/LabCanvas.vue')['default']
     LabCanvasNew: typeof import('./src/components/LabCanvas/LabCanvasNew.vue')['default']
     LabComponentsDrawer: typeof import('./src/components/LabCanvasNew/LabComponentsDrawer.vue')['default']

src/components/LabCanvas/ComponentSelector.vue

@@ -2,177 +2,106 @@
   <div>
     <!-- 元器件选择菜单 (Drawer) -->
     <div class="drawer drawer-end z-50">
-      <input id="component-drawer" type="checkbox" class="drawer-toggle" v-model="showComponentsMenu" />
+      <input
+        id="component-drawer"
+        type="checkbox"
+        class="drawer-toggle"
+        v-model="showComponentsMenu"
+      />
       <div class="drawer-side">
-        <label for="component-drawer" aria-label="close sidebar" class="drawer-overlay !bg-opacity-50"></label>
-        <div class="menu p-0 w-[460px] min-h-full bg-base-100 shadow-xl flex flex-col">
+        <label
+          for="component-drawer"
+          aria-label="close sidebar"
+          class="drawer-overlay !bg-opacity-50"
+        ></label>
+        <div
+          class="menu p-0 w-[460px] min-h-full bg-base-100 shadow-xl flex flex-col"
+        >
           <!-- 菜单头部 -->
-          <div class="p-6 border-b border-base-300 flex justify-between items-center">
+          <div
+            class="p-6 border-b bg-base-200 border-base-300 flex justify-between items-center"
+          >
             <h3 class="text-xl font-bold text-primary flex items-center gap-2">
-              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
-                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                class="text-primary">
-                <circle cx="12" cy="12" r="10"></circle>
-                <path d="M12 8v8"></path>
-                <path d="M8 12h8"></path>
-              </svg>
+              <Plus :size="20" class="text-primary" />
               添加元器件
             </h3>
-            <label for="component-drawer" class="btn btn-ghost btn-sm btn-circle" @click="closeMenu">
-              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
-                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <line x1="18" y1="6" x2="6" y2="18"></line>
-                <line x1="6" y1="6" x2="18" y2="18"></line>
-              </svg>
+            <label
+              for="component-drawer"
+              class="btn btn-ghost btn-sm btn-circle"
+              @click="closeMenu"
+            >
+              <X :size="20" />
             </label>
           </div>
 
           <!-- 导航栏 -->
           <div class="tabs tabs-boxed bg-base-200 mx-6 mt-4 rounded-box">
-            <a class="tab" :class="{ 'tab-active': activeTab === 'components' }"
-              @click="activeTab = 'components'">元器件</a>
-            <a class="tab" :class="{ 'tab-active': activeTab === 'templates' }" @click="activeTab = 'templates'">模板</a>
-            <a class="tab" :class="{ 'tab-active': activeTab === 'virtual' }" @click="activeTab = 'virtual'">虚拟外设</a>
+            <a
+              class="tab"
+              :class="{ 'tab-active': activeTab === 'components' }"
+              @click="activeTab = 'components'"
+              >元器件</a
+            >
+            <a
+              class="tab"
+              :class="{ 'tab-active': activeTab === 'templates' }"
+              @click="activeTab = 'templates'"
+              >模板</a
+            >
+            <a
+              class="tab"
+              :class="{ 'tab-active': activeTab === 'virtual' }"
+              @click="activeTab = 'virtual'"
+              >虚拟外设</a
+            >
           </div>
 
           <!-- 搜索框 -->
-          <div class="px-6 py-4 border-b border-base-300">
-            <div class="join w-full">
-              <div class="join-item flex-1 relative">
-                <input type="text" placeholder="搜索..." class="input input-bordered input-sm w-full pl-10"
-                  v-model="searchQuery" @keyup.enter="searchComponents" />
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                  class="absolute left-3 top-1/2 -translate-y-1/2 text-base-content opacity-60">
-                  <circle cx="11" cy="11" r="8"></circle>
-                  <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-                </svg>
-              </div>
-              <button class="btn btn-sm join-item" @click="searchComponents">
-                搜索
-              </button>
-            </div>
-          </div>
-
-          <!-- 元器件列表 (组件选项卡) -->
-          <div v-if="activeTab === 'components'" class="px-6 py-4 overflow-auto flex-1">
-            <div v-if="filteredComponents.length > 0" class="grid grid-cols-2 gap-4">
-              <div v-for="(component, index) in filteredComponents" :key="index"
-                class="card bg-base-200 hover:bg-base-300 transition-all duration-300 hover:shadow-md cursor-pointer"
-                @click="addComponent(component)">
-                <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[component.type]" :is="componentModules[component.type].default"
-                      class="component-preview" :size="getPreviewSize(component.type)" />
-                    <!-- 加载中状态 -->
-                    <span v-else class="text-xs text-gray-400">加载中...</span>
-                  </div>
-                  <h3 class="card-title text-sm mt-2">{{ component.name }}</h3>
-                  <p class="text-xs opacity-70">{{ component.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="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>
-              <button class="btn btn-sm btn-ghost mt-3" @click="searchQuery = ''">
-                清除搜索
-              </button>
-            </div>
-          </div>
-
-          <!-- 模板列表 (模板选项卡) -->
-          <div v-if="activeTab === 'templates'" class="px-6 py-4 overflow-auto flex-1">
-            <div v-if="filteredTemplates.length > 0" class="grid grid-cols-2 gap-4">
-              <div v-for="(template, index) in filteredTemplates" :key="index"
-                class="card bg-base-200 hover:bg-base-300 transition-all duration-300 hover:shadow-md cursor-pointer"
-                @click="addTemplate(template)">
-                <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">
-                    <img :src="template.thumbnailUrl || '/placeholder-template.png'
-                      " alt="Template thumbnail" class="max-h-full max-w-full object-contain" />
-                  </div>
-                  <h3 class="card-title text-sm mt-2">{{ template.name }}</h3>
-                  <p class="text-xs opacity-70">
-                    {{ template.description || "模板" }}
-                  </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="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>
-              <button class="btn btn-sm btn-ghost mt-3" @click="searchQuery = ''">
-                清除搜索
-              </button>
-            </div>
-          </div>
-          <!-- 虚拟外设列表 (虚拟外设选项卡) -->
-          <div v-if="activeTab === 'virtual'" class="px-6 py-4 overflow-auto flex-1">
-            <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="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>
-              <button class="btn btn-sm btn-ghost mt-3" @click="searchQuery = ''">
-                清除搜索
-              </button>
-            </div>
-          </div>
-
-          <!-- 底部操作区 -->
-          <div class="p-4 border-t border-base-300 bg-base-200 flex justify-between">
-            <label for="component-drawer" class="btn btn-sm btn-ghost" @click="closeMenu">
-              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1">
-                <path d="M19 12H5M12 19l-7-7 7-7"></path>
-              </svg>
-              返回
-            </label>
-            <label for="component-drawer" class="btn btn-sm btn-primary" @click="closeMenu">
-              完成
+          <div class="px-6 py-4 w-full">
+            <label class="input w-full">
+              <Search :size="16" class="h-[1em] opacity-50" />
+              <input
+                type="text"
+                placeholder="搜索..."
+                class="grow"
+                v-model="searchQuery"
+              />
             </label>
           </div>
+
+          <!-- 统一的项目列表 -->
+          <ItemList
+            v-if="activeTab === 'components'"
+            :items="availableComponents"
+            :search-query="searchQuery"
+            :component-modules="componentModules"
+            :no-results-message="'没有找到匹配的元器件'"
+            item-type="component"
+            @item-click="addComponent"
+            @clear-search="searchQuery = ''"
+          />
+
+          <ItemList
+            v-if="activeTab === 'templates'"
+            :items="availableTemplates"
+            :search-query="searchQuery"
+            :component-modules="componentModules"
+            :no-results-message="'没有找到匹配的模板'"
+            item-type="template"
+            @item-click="addTemplate"
+            @clear-search="searchQuery = ''"
+          />
+
+          <ItemList
+            v-if="activeTab === 'virtual'"
+            :items="availableVirtualDevices"
+            :search-query="searchQuery"
+            :component-modules="componentModules"
+            :no-results-message="'没有找到匹配的虚拟外设'"
+            item-type="virtual"
+            @item-click="addComponent"
+            @clear-search="searchQuery = ''"
+          />
         </div>
       </div>
     </div>
@@ -181,8 +110,18 @@
 
 <script setup lang="ts">
 import { ref, computed, shallowRef, onMounted } from "vue";
-import motherboardSvg from "@/components/equipments/svg/motherboard.svg";
-import buttonSvg from "@/components//equipments/svg/button.svg";
+import { Plus, X, Search } from "lucide-vue-next";
+import ItemList from "./ItemList.vue";
+import {
+  useComponentManager,
+  availableComponents,
+  availableVirtualDevices,
+  availableTemplates,
+  getAllComponentTypes,
+  type ComponentConfig,
+  type VirtualDeviceConfig,
+  type TemplateConfig,
+} from "./index.ts";
 
 // Props 定义
 interface Props {
@@ -191,6 +130,8 @@ interface Props {
 
 const props = defineProps<Props>();
 
+const componentManager = useComponentManager();
+
 // 定义组件发出的事件
 const emit = defineEmits([
   "close",
@@ -205,45 +146,6 @@ const activeTab = ref("components");
 // --- 搜索功能 ---
 const searchQuery = ref("");
 
-// --- 可用元器件列表 ---
-const availableComponents = [
-  { type: "MechanicalButton", name: "机械按钮" },
-  { type: "Switch", name: "开关" },
-  { type: "Pin", name: "引脚" },
-  { type: "SMT_LED", name: "贴片LED" },
-  { type: "SevenSegmentDisplay", name: "数码管" },
-  { type: "HDMI", name: "HDMI接口" },
-  { type: "DDR", name: "DDR内存" },
-  { type: "ETH", name: "以太网接口" },
-  { type: "SD", name: "SD卡插槽" },
-  { type: "SFP", name: "SFP光纤模块" },
-  { type: "SMA", name: "SMA连接器" },
-  { type: "MotherBoard", name: "主板" },
-  { type: "PG2L100H_FBG676", name: "PG2L100H FBG676芯片" },
-  { type: "BaseBoard", name: "通用底板" },
-];
-
-// --- 可用虚拟外设列表 ---
-const availableVirtualDevices = [{ type: "DDS", name: "信号发生器" }];
-
-// --- 可用模板列表 ---
-const availableTemplates = ref([
-  {
-    name: "PG2L100H 基础开发板",
-    id: "PG2L100H_Pango100pro",
-    description: "包含主板和两个LED的基本设置",
-    path: "/EquipmentTemplates/PG2L100H_Pango100pro.json",
-    thumbnailUrl: motherboardSvg,
-  },
-  {
-    name: "矩阵键盘",
-    id: "MatrixKey",
-    description: "包含4x4，共16个按键的矩阵键盘",
-    path: "/EquipmentTemplates/MatrixKey.json",
-    thumbnailUrl: buttonSvg,
-  },
-]);
-
 // 显示/隐藏组件菜单
 const showComponentsMenu = computed({
   get: () => props.open,
@@ -277,52 +179,15 @@ async function loadComponentModule(type: string) {
 
 // 预加载组件模块
 async function preloadComponentModules() {
-  // 加载基础组件
-  for (const component of availableComponents) {
+  const allTypes = getAllComponentTypes();
+
+  for (const type of allTypes) {
     try {
-      await loadComponentModule(component.type);
+      await loadComponentModule(type);
     } catch (error) {
-      console.error(`Failed to preload component ${component.type}:`, error);
+      console.error(`Failed to preload 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);
-    }
-  }
-}
-
-// 获取组件预览时适合的尺寸
-function getPreviewSize(componentType: string): number {
-  // 根据组件类型返回适当的预览尺寸
-  const previewSizes: Record<string, number> = {
-    MechanicalButton: 0.4, // 按钮较大，需要更小尺寸
-    Switch: 0.35, // 开关较大，需要更小尺寸
-    Pin: 0.8, // 引脚较小，可以大一些
-    SMT_LED: 0.7, // LED可以保持适中
-    SevenSegmentDisplay: 0.4, // 数码管较大，需要较小尺寸
-    HDMI: 0.5, // HDMI接口较大
-    DDR: 0.5, // DDR内存较大
-    ETH: 0.5, // 以太网接口较大
-    SD: 0.6, // SD卡插槽适中
-    SFP: 0.4, // SFP光纤模块较大
-    SMA: 0.7, // SMA连接器可以适中
-    MotherBoard: 0.13, // 主板最大，需要最小尺寸
-    DDS: 0.3, // 信号发生器较大，需要较小尺寸
-  };
-
-  // 返回对应尺寸，如果没有特定配置则返回默认值0.5
-  return previewSizes[componentType] || 0.5;
-}
-
-// 搜索组件
-function searchComponents() {
-  // 根据用户输入过滤可用组件列表
-  // 实际逻辑已经在 filteredComponents 计算属性中实现
 }
 
 // 关闭菜单
@@ -332,7 +197,9 @@ function closeMenu() {
 }
 
 // 添加新元器件
-async function addComponent(componentTemplate: { type: string; name: string }) {
+async function addComponent(
+  componentTemplate: ComponentConfig | VirtualDeviceConfig,
+) {
   // 先加载组件模块
   const moduleRef = await loadComponentModule(componentTemplate.type);
   let defaultProps: Record<string, any> = {};
@@ -365,7 +232,7 @@ async function addComponent(componentTemplate: { type: string; name: string }) {
 }
 
 // 添加模板
-async function addTemplate(template: any) {
+async function addTemplate(template: TemplateConfig) {
   try {
     // 加载模板JSON文件
     const response = await fetch(template.path);
@@ -381,7 +248,7 @@ async function addTemplate(template: any) {
       id: template.id,
       name: template.name,
       template: templateData,
-      capsPage: template.capsPage
+      capsPage: template.capsPage,
     });
 
     // 关闭菜单
@@ -392,46 +259,6 @@ async function addTemplate(template: any) {
   }
 }
 
-// 过滤后的元器件列表 (用于菜单)
-const filteredComponents = computed(() => {
-  if (!searchQuery.value || activeTab.value !== "components") {
-    return availableComponents;
-  }
-  const query = searchQuery.value.toLowerCase();
-  return availableComponents.filter(
-    (component) =>
-      component.name.toLowerCase().includes(query) ||
-      component.type.toLowerCase().includes(query),
-  );
-});
-
-// 过滤后的模板列表 (用于菜单)
-const filteredTemplates = computed(() => {
-  if (!searchQuery.value || activeTab.value !== "templates") {
-    return availableTemplates.value;
-  }
-  const query = searchQuery.value.toLowerCase();
-  return availableTemplates.value.filter(
-    (template) =>
-      template.name.toLowerCase().includes(query) ||
-      (template.description &&
-        template.description.toLowerCase().includes(query)),
-  );
-});
-
-// 过滤后的虚拟外设列表 (用于菜单)
-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(() => {
   // 预加载组件模块
@@ -440,13 +267,6 @@ onMounted(() => {
 </script>
 
 <style scoped>
-/* 组件预览样式 */
-.component-preview {
-  max-width: 100%;
-  max-height: 100%;
-  object-fit: contain;
-}
-
 /* 动画效果 */
 .animate-slideUp {
   animation: slideUp 0.3s ease-out forwards;

src/components/LabCanvas/DiagramCanvas.vue

@@ -10,71 +10,19 @@
     <!-- 工具栏 -->
     <div class="absolute top-2 right-2 flex gap-2 z-30">
       <button class="btn btn-sm btn-primary" @click="openDiagramFileSelector">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-4 w-4 mr-1"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"
-          />
-        </svg>
+        <FolderOpen class="h-4 w-4 mr-1" />
         导入
       </button>
       <button class="btn btn-sm btn-primary" @click="exportDiagram">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-4 w-4 mr-1"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-          />
-        </svg>
+        <Download class="h-4 w-4 mr-1" />
         导出
       </button>
       <button class="btn btn-sm btn-primary" @click="emit('open-components')">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-4 w-4 mr-1"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M12 4v16m8-8H4"
-          />
-        </svg>
+        <Plus class="h-4 w-4 mr-1" />
         添加组件
       </button>
       <button class="btn btn-sm btn-primary" @click="emit('toggle-doc-panel')">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-4 w-4 mr-1"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-          />
-        </svg>
+        <FileText class="h-4 w-4 mr-1" />
         {{ props.showDocPanel ? "属性面板" : "文档" }}
       </button>
     </div>
@@ -235,6 +183,7 @@ import {
   provide,
 } from "vue";
 import { useEventListener } from "@vueuse/core";
+import { FolderOpen, Download, Plus, FileText } from "lucide-vue-next";
 import WireComponent from "@/components/equipments/Wire.vue";
 import { useAlertStore } from "@/components/Alert";
 

src/components/LabCanvas/ItemList.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="px-6 py-4 overflow-auto flex-1">
+    <div v-if="filteredItems.length > 0" class="grid grid-cols-2 gap-4">
+      <div
+        v-for="(item, index) in filteredItems"
+        :key="index"
+        class="card bg-base-200 hover:bg-base-300 transition-all duration-300 hover:shadow-md cursor-pointer"
+        @click="handleItemClick(item)"
+      >
+        <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="item.type && componentModules[item.type]"
+              :is="componentModules[item.type].default"
+              class="component-preview"
+              :size="getPreviewSize(item.type)"
+            />
+            <!-- 模板预览 -->
+            <img
+              v-else-if="item.thumbnailUrl"
+              :src="item.thumbnailUrl || '/placeholder-template.png'"
+              alt="Template thumbnail"
+              class="max-h-full max-w-full object-contain"
+            />
+            <!-- 加载中状态 -->
+            <span v-else class="text-xs text-gray-400">加载中...</span>
+          </div>
+          <h3 class="card-title text-sm mt-2">{{ item.name }}</h3>
+          <p class="text-xs opacity-70">
+            {{ item.description || item.type || getItemSubtitle(item) }}
+          </p>
+        </div>
+      </div>
+    </div>
+    <!-- 无搜索结果 -->
+    <div v-else class="py-16 text-center">
+      <SearchX :size="48" class="mx-auto text-base-300 mb-3" />
+      <p class="text-base-content opacity-70">{{ noResultsMessage }}</p>
+      <button class="btn btn-sm btn-ghost mt-3" @click="$emit('clear-search')">
+        清除搜索
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { SearchX } from "lucide-vue-next";
+import { getPreviewSize } from "./index.ts";
+
+interface Props {
+  items: any[];
+  searchQuery: string;
+  componentModules: Record<string, any>;
+  noResultsMessage: string;
+  itemType: "component" | "template" | "virtual";
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits(["item-click", "clear-search"]);
+
+// 过滤后的项目列表
+const filteredItems = computed(() => {
+  if (!props.searchQuery) {
+    return props.items;
+  }
+  const query = props.searchQuery.toLowerCase();
+  return props.items.filter(
+    (item) =>
+      item.name.toLowerCase().includes(query) ||
+      (item.type && item.type.toLowerCase().includes(query)) ||
+      (item.description && item.description.toLowerCase().includes(query)),
+  );
+});
+
+// 获取项目副标题
+function getItemSubtitle(item: any): string {
+  if (props.itemType === "template") {
+    return "模板";
+  }
+  return item.type || "";
+}
+
+// 处理项目点击
+function handleItemClick(item: any) {
+  emit("item-click", item);
+}
+</script>
+
+<style scoped>
+.component-preview {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+</style>

src/components/LabCanvas/index.ts

@@ -1,8 +1,110 @@
+import motherboardSvg from "@/components/equipments/svg/motherboard.svg";
+import buttonSvg from "@/components/equipments/svg/button.svg";
+
+// 元器件配置接口
+export interface ComponentConfig {
+  type: string;
+  name: string;
+  previewSize?: number;
+}
+
+// 虚拟外设配置接口
+export interface VirtualDeviceConfig {
+  type: string;
+  name: string;
+  previewSize?: number;
+}
+
+// 模板配置接口
+export interface TemplateConfig {
+  name: string;
+  id: string;
+  description: string;
+  path: string;
+  thumbnailUrl: string;
+  capsPage?: string;
+}
+
+// 预览尺寸配置
+export const previewSizes: Record<string, number> = {
+  MechanicalButton: 0.4,
+  Switch: 0.35,
+  Pin: 0.8,
+  SMT_LED: 0.7,
+  SevenSegmentDisplay: 0.4,
+  HDMI: 0.5,
+  DDR: 0.5,
+  ETH: 0.5,
+  SD: 0.6,
+  SFP: 0.4,
+  SMA: 0.7,
+  MotherBoard: 0.13,
+  PG2L100H_FBG676: 0.2,
+  BaseBoard: 0.15,
+  DDS: 0.3,
+};
+
+// 可用元器件列表
+export const availableComponents: ComponentConfig[] = [
+  { type: "MechanicalButton", name: "机械按钮" },
+  { type: "Switch", name: "开关" },
+  { type: "Pin", name: "引脚" },
+  { type: "SMT_LED", name: "贴片LED" },
+  { type: "SevenSegmentDisplay", name: "数码管" },
+  { type: "HDMI", name: "HDMI接口" },
+  { type: "DDR", name: "DDR内存" },
+  { type: "ETH", name: "以太网接口" },
+  { type: "SD", name: "SD卡插槽" },
+  { type: "SFP", name: "SFP光纤模块" },
+  { type: "SMA", name: "SMA连接器" },
+  { type: "MotherBoard", name: "主板" },
+  { type: "PG2L100H_FBG676", name: "PG2L100H FBG676芯片" },
+  { type: "BaseBoard", name: "通用底板" },
+];
+
+// 可用虚拟外设列表
+export const availableVirtualDevices: VirtualDeviceConfig[] = [
+  { type: "DDS", name: "信号发生器" },
+];
+
+// 可用模板列表
+export const availableTemplates: TemplateConfig[] = [
+  {
+    name: "PG2L100H 基础开发板",
+    id: "PG2L100H_Pango100pro",
+    description: "包含主板和两个LED的基本设置",
+    path: "/EquipmentTemplates/PG2L100H_Pango100pro.json",
+    thumbnailUrl: motherboardSvg,
+  },
+  {
+    name: "矩阵键盘",
+    id: "MatrixKey",
+    description: "包含4x4，共16个按键的矩阵键盘",
+    path: "/EquipmentTemplates/MatrixKey.json",
+    thumbnailUrl: buttonSvg,
+  },
+];
+
+// 获取组件预览尺寸的工具函数
+export function getPreviewSize(componentType: string): number {
+  return previewSizes[componentType] || 0.5;
+}
+
+// 获取所有组件类型（用于预加载）
+export function getAllComponentTypes(): string[] {
+  const componentTypes = availableComponents.map((c) => c.type);
+  const virtualDeviceTypes = availableVirtualDevices.map((d) => d.type);
+  return [...componentTypes, ...virtualDeviceTypes];
+}
+
 // 导出组件管理器服务
-export { useProvideComponentManager, useComponentManager } from './composable/componentManager';
+export {
+  useProvideComponentManager,
+  useComponentManager,
+} from "./composable/componentManager";
 
 // 导出图表管理器
-export type { DiagramData, DiagramPart } from './composable/diagramManager';
+export type { DiagramData, DiagramPart } from "./composable/diagramManager";
 
 // 导出连线管理器
-export type { WireItem } from './composable/wireManager';
+export type { WireItem } from "./composable/wireManager";