fix: 优化界面，解耦组件抽屉

src/components/Alert/Alert.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="fixed left-1/2 top-30 z-50 -translate-x-1/2">
+  <div class="fixed left-1/2 top-30 z-999 -translate-x-1/2">
     <transition
       name="alert"
       enter-active-class="alert-enter-active"

src/components/LabCanvas/ComponentSelector.vue

@@ -25,13 +25,12 @@
               <Plus :size="20" class="text-primary" />
               添加元器件
             </h3>
-            <label
-              for="component-drawer"
+            <button
               class="btn btn-ghost btn-sm btn-circle"
               @click="closeMenu"
             >
               <X :size="20" />
-            </label>
+            </button>
           </div>
 
           <!-- 导航栏 -->
@@ -112,8 +111,8 @@
 import { ref, computed, shallowRef, onMounted } from "vue";
 import { Plus, X, Search } from "lucide-vue-next";
 import ItemList from "./ItemList.vue";
+import { useAlertStore } from "@/components/Alert";
 import {
-  useComponentManager,
   availableComponents,
   availableVirtualDevices,
   availableTemplates,
@@ -121,6 +120,7 @@ import {
   type ComponentConfig,
   type VirtualDeviceConfig,
   type TemplateConfig,
+  useComponentManager, // 导入 componentManager
 } from "./index.ts";
 
 // Props 定义
@@ -130,16 +130,18 @@ interface Props {
 
 const props = defineProps<Props>();
 
-const componentManager = useComponentManager();
-
-// 定义组件发出的事件
+// 定义组件发出的事件（保留部分必要的事件）
 const emit = defineEmits([
   "close",
-  "add-component",
-  "add-template",
   "update:open",
 ]);
 
+// 使用 componentManager
+const componentManager = useComponentManager();
+
+// 使用 Alert 系统
+const alert = useAlertStore();
+
 // 当前激活的选项卡
 const activeTab = ref("components");
 
@@ -192,14 +194,19 @@ async function preloadComponentModules() {
 
 // 关闭菜单
 function closeMenu() {
-  showComponentsMenu.value = false;
+  emit("update:open", false);
   emit("close");
 }
 
-// 添加新元器件
+// 添加新元器件 - 使用 componentManager
 async function addComponent(
   componentTemplate: ComponentConfig | VirtualDeviceConfig,
 ) {
+  if (!componentManager) {
+    console.error("ComponentManager not available");
+    return;
+  }
+
   // 先加载组件模块
   const moduleRef = await loadComponentModule(componentTemplate.type);
   let defaultProps: Record<string, any> = {};
@@ -220,19 +227,32 @@ async function addComponent(
     console.log(`Failed to load module for ${componentTemplate.type}`);
   }
 
-  // 发送添加组件事件给父组件
-  emit("add-component", {
+  try {
+    // 使用 componentManager 添加组件
+    await componentManager.addComponent({
       type: componentTemplate.type,
       name: componentTemplate.name,
       props: defaultProps,
     });
 
+    // 显示成功消息
+    alert?.success(`成功添加元器件: ${componentTemplate.name}`);
+
     // 关闭菜单
     closeMenu();
+  } catch (error) {
+    console.error("添加元器件失败:", error);
+    alert?.error("添加元器件失败，请检查控制台错误信息");
+  }
 }
 
-// 添加模板
+// 添加模板 - 使用 componentManager
 async function addTemplate(template: TemplateConfig) {
+  if (!componentManager) {
+    console.error("ComponentManager not available");
+    return;
+  }
+
   try {
     // 加载模板JSON文件
     const response = await fetch(template.path);
@@ -243,19 +263,27 @@ async function addTemplate(template: TemplateConfig) {
     const templateData = await response.json();
     console.log("加载模板:", templateData);
 
-    // 发出事件，将模板数据传递给父组件
-    emit("add-template", {
+    // 使用 componentManager 添加模板
+    const result = await componentManager.addTemplate({
       id: template.id,
       name: template.name,
       template: templateData,
-      capsPage: template.capsPage,
     });
 
+    if (result) {
+      // 使用 Alert 显示结果消息
+      if (result.success) {
+        alert?.success(result.message);
+      } else {
+        alert?.error(result.message);
+      }
+    }
+
     // 关闭菜单
     closeMenu();
   } catch (error) {
     console.error("加载模板出错:", error);
-    alert("无法加载模板文件，请检查控制台错误信息");
+    alert?.error("无法加载模板文件，请检查控制台错误信息");
   }
 }
 

src/views/Project/Index.vue

@@ -92,8 +92,6 @@
     <ComponentSelector
       :open="showComponentsMenu"
       @update:open="showComponentsMenu = $event"
-      @add-component="handleAddComponent"
-      @add-template="handleAddTemplate"
       @close="showComponentsMenu = false"
     />
 
@@ -219,27 +217,6 @@ function openComponentsMenu() {
   showComponentsMenu.value = true;
 }
 
-// 处理 ComponentSelector 组件添加元器件事件
-async function handleAddComponent(componentData: {
-  type: string;
-  name: string;
-  props: Record<string, any>;
-}) {
-  await componentManager.addComponent(componentData);
-}
-
-// 处理模板添加事件
-async function handleAddTemplate(templateData: {
-  id: string;
-  name: string;
-  template: any;
-}) {
-  const result = await componentManager.addTemplate(templateData);
-  if (result) {
-    alert?.show(result.message, result.success ? "success" : "error");
-  }
-}
-
 // 处理图表数据更新事件
 function handleDiagramUpdated(data: DiagramData) {
   console.log("Diagram data updated:", data);

src/views/Project/RequestBoardDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="open"
-    class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
+    class="fixed inset-0 z-50 flex items-center justify-center bg-opacity-30 backdrop-blur-sm shadow-2xl"
   >
     <div class="bg-base-100 rounded-lg shadow-xl max-w-md w-full mx-4">
       <div class="p-6">