From f1e2dbd9d8c0193e5b1950ecfbef11434067ec01 Mon Sep 17 00:00:00 2001
From: SikongJueluo <selfconfusion@gmail.com>
Date: Tue, 1 Jul 2025 21:08:58 +0800
Subject: [PATCH] feat: add components drawer

---
 components.d.ts                               |   3 +-
 src/components/{ => LabCanvas}/LabCanvas.vue  |  16 +-
 .../LabCanvas/LabComponentsDrawer.vue         | 618 ++++++++++++++++++
 src/views/ProjectView.vue                     |   3 +-
 4 files changed, 635 insertions(+), 5 deletions(-)
 rename src/components/{ => LabCanvas}/LabCanvas.vue (97%)
 create mode 100644 src/components/LabCanvas/LabComponentsDrawer.vue

diff --git a/components.d.ts b/components.d.ts
index 8998b34..a547b96 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -19,7 +19,8 @@ declare module 'vue' {
     Dialog: typeof import('./src/components/Dialog.vue')['default']
     ETH: typeof import('./src/components/equipments/ETH.vue')['default']
     HDMI: typeof import('./src/components/equipments/HDMI.vue')['default']
-    LabCanvas: typeof import('./src/components/LabCanvas.vue')['default']
+    LabCanvas: typeof import('./src/components/LabCanvas/LabCanvas.vue')['default']
+    LabComponentsDrawer: typeof import('./src/components/LabCanvas/LabComponentsDrawer.vue')['default']
     LoginCard: typeof import('./src/components/LoginCard.vue')['default']
     MarkdownRenderer: typeof import('./src/components/MarkdownRenderer.vue')['default']
     MechanicalButton: typeof import('./src/components/equipments/MechanicalButton.vue')['default']
diff --git a/src/components/LabCanvas.vue b/src/components/LabCanvas/LabCanvas.vue
similarity index 97%
rename from src/components/LabCanvas.vue
rename to src/components/LabCanvas/LabCanvas.vue
index 2d804de..28a70a0 100644
--- a/src/components/LabCanvas.vue
+++ b/src/components/LabCanvas/LabCanvas.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="w-full h-full relative">
     <v-stage
       class="h-full w-full"
       ref="stageRef"
@@ -68,10 +68,15 @@
         />
       </v-layer>
     </v-stage>
+    <LabComponentsDrawer
+      class="absolute top-10 right-20"
+      v-model:open="isDrawerOpen"
+    ></LabComponentsDrawer>
   </div>
 </template>
 
 <script setup lang="ts">
+import LabComponentsDrawer from "./LabComponentsDrawer.vue";
 import Konva from "konva";
 import { isNull, isUndefined } from "lodash";
 import type {
@@ -186,7 +191,8 @@ onMounted(() => {
 });
 
 const layerRef = useTemplateRef<VLayer>("layerRef");
-const canvasObjectsRef = useTemplateRef<HTMLTemplateElement[]>("canvasObjectsRef");
+const canvasObjectsRef =
+  useTemplateRef<HTMLTemplateElement[]>("canvasObjectsRef");
 const transformerRef = useTemplateRef<VTransformer>("transformerRef");
 const selectRectRef = useTemplateRef<VNode>("selectRectRef");
 const stageRef = useTemplateRef<VStage>("StageRef");
@@ -205,6 +211,7 @@ const selectionRectangle = reactive({
 });
 
 const stageScale = ref(1);
+const isDrawerOpen = ref(false);
 
 onMounted(() => {
   if (isNull(transformerRef.value)) return;
@@ -261,7 +268,6 @@ function handleDragEnd() {
   dragItemId.value = null;
 }
 
-
 // Mouse event handlers
 function handleStageClick(e: { target: any; evt: MouseEvent }) {
   if (isNull(e.target)) return;
@@ -516,3 +522,7 @@ function handleCanvasObjectMouseOut(evt: Event) {
   objectConfig.isHoverring = false;
 }
 </script>
+
+<style>
+@import "../../assets/main.css";
+</style>
diff --git a/src/components/LabCanvas/LabComponentsDrawer.vue b/src/components/LabCanvas/LabComponentsDrawer.vue
new file mode 100644
index 0000000..5cbb054
--- /dev/null
+++ b/src/components/LabCanvas/LabComponentsDrawer.vue
@@ -0,0 +1,618 @@
+<template>
+  <div>
+    <!-- 元器件选择菜单 (Drawer) -->
+    <div class="drawer drawer-end z-50">
+      <input
+        id="Lab-drawer"
+        type="checkbox"
+        class="drawer-toggle"
+        v-model="showComponentsMenu"
+      />
+      <div class="drawer-content">
+        <!-- Page content here -->
+        <label
+          for="Lab-drawer"
+          class="drawer-button btn btn-primary rounded-2xl"
+          ><Plus></Plus
+        ></label>
+      </div>
+      <div class="drawer-side">
+        <label
+          for="Lab-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"
+          >
+            <h3 class="text-xl font-bold text-primary flex items-center gap-2">
+              <Plus class="text-primary w-5 h-5"></Plus>
+              添加实验元器件
+            </h3>
+            <label
+              for="Lab-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>
+          </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
+            >
+          </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="Lab-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="Lab-drawer"
+              class="btn btn-sm btn-primary"
+              @click="closeMenu"
+            >
+              完成
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Plus } from "lucide-vue-next";
+import { ref, computed, shallowRef, onMounted } from "vue";
+import motherboardSvg from "../../components/equipments/svg/motherboard.svg";
+import buttonSvg from "../../components/equipments/svg/button.svg";
+
+// 显示/隐藏组件菜单
+const isOpen = defineModel<boolean>("open", {
+  default: false,
+});
+const showComponentsMenu = computed({
+  get: () => isOpen.value,
+  set: (value) => (isOpen.value = value),
+});
+
+// 定义组件发出的事件
+const emit = defineEmits([
+  "close",
+  "add-component",
+  "add-template",
+]);
+
+// 当前激活的选项卡
+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 componentModules = shallowRef<Record<string, any>>({});
+
+// 动态加载组件定义
+async function loadComponentModule(type: string) {
+  if (!componentModules.value[type]) {
+    try {
+      // 假设组件都在 src/components/equipments/ 目录下，且文件名与 type 相同
+      const module = await import(`../../components/equipments/${type}.vue`);
+
+      // 将模块添加到缓存中
+      componentModules.value = {
+        ...componentModules.value,
+        [type]: module,
+      };
+
+      console.log(`Loaded module for ${type}:`, module);
+    } catch (error) {
+      console.error(`Failed to load component module ${type}:`, error);
+      return null;
+    }
+  }
+  return componentModules.value[type];
+}
+
+// 预加载组件模块
+async function preloadComponentModules() {
+  // 加载基础组件
+  for (const component of availableComponents) {
+    try {
+      await loadComponentModule(component.type);
+    } catch (error) {
+      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);
+    }
+  }
+}
+
+// 获取组件预览时适合的尺寸
+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 计算属性中实现
+}
+
+// 关闭菜单
+function closeMenu() {
+  showComponentsMenu.value = false;
+  emit("close");
+}
+
+// 添加新元器件
+async function addComponent(componentTemplate: { type: string; name: string }) {
+  // 先加载组件模块
+  const moduleRef = await loadComponentModule(componentTemplate.type);
+  let defaultProps: Record<string, any> = {};
+
+  // 尝试直接调用组件导出的getDefaultProps方法
+  if (moduleRef) {
+    if (typeof moduleRef.getDefaultProps === "function") {
+      defaultProps = moduleRef.getDefaultProps();
+      console.log(
+        `Got default props from ${componentTemplate.type}:`,
+        defaultProps,
+      );
+    } else {
+      // 回退到配置文件
+      console.log(`No getDefaultProps found for ${componentTemplate.type}`);
+    }
+  } else {
+    console.log(`Failed to load module for ${componentTemplate.type}`);
+  }
+
+  // 发送添加组件事件给父组件
+  emit("add-component", {
+    type: componentTemplate.type,
+    name: componentTemplate.name,
+    props: defaultProps,
+  });
+
+  // 关闭菜单
+  closeMenu();
+}
+
+// 添加模板
+async function addTemplate(template: any) {
+  try {
+    // 加载模板JSON文件
+    const response = await fetch(template.path);
+    if (!response.ok) {
+      throw new Error(`Failed to load template: ${response.statusText}`);
+    }
+
+    const templateData = await response.json();
+    console.log("加载模板:", templateData);
+
+    // 发出事件，将模板数据传递给父组件
+    emit("add-template", {
+      id: template.id,
+      name: template.name,
+      template: templateData,
+      capsPage: template.capsPage,
+    });
+
+    // 关闭菜单
+    closeMenu();
+  } catch (error) {
+    console.error("加载模板出错:", error);
+    alert("无法加载模板文件，请检查控制台错误信息");
+  }
+}
+
+// 过滤后的元器件列表 (用于菜单)
+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(() => {
+  // 预加载组件模块
+  preloadComponentModules();
+});
+</script>
+
+<style scoped>
+/* 组件预览样式 */
+.component-preview {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+/* 动画效果 */
+.animate-slideUp {
+  animation: slideUp 0.3s ease-out forwards;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>
diff --git a/src/views/ProjectView.vue b/src/views/ProjectView.vue
index b1f5dc2..1a792c5 100644
--- a/src/views/ProjectView.vue
+++ b/src/views/ProjectView.vue
@@ -26,8 +26,9 @@
 </template>
 
 <script setup lang="ts">
+import LabComponentsDrawer from "@/components/LabCanvas/LabComponentsDrawer.vue";
 import { SplitterGroup, SplitterPanel, SplitterResizeHandle } from "reka-ui";
-import LabCanvas from "@/components/LabCanvas.vue";
+import LabCanvas from "@/components/LabCanvas/LabCanvas.vue";
 </script>
 
 <style>