From eebc5105a0d46051cdddea588ea3a5dd8bf64149 Mon Sep 17 00:00:00 2001 From: SikongJueluo Date: Sat, 12 Jul 2025 21:55:58 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=94=BB=E5=B8=83=E8=A7=A3=E8=80=A6?= =?UTF-8?q?=E5=90=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components.d.ts | 1 + .../LabCanvas/ComponentSelector.vue | 398 +++++------------- src/components/LabCanvas/DiagramCanvas.vue | 61 +-- src/components/LabCanvas/ItemList.vue | 100 +++++ src/components/LabCanvas/index.ts | 108 ++++- 5 files changed, 320 insertions(+), 348 deletions(-) create mode 100644 src/components/LabCanvas/ItemList.vue diff --git a/components.d.ts b/components.d.ts index 18778eb..81fa89b 100644 --- a/components.d.ts +++ b/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'] diff --git a/src/components/LabCanvas/ComponentSelector.vue b/src/components/LabCanvas/ComponentSelector.vue index 58f6a89..3d187c7 100644 --- a/src/components/LabCanvas/ComponentSelector.vue +++ b/src/components/LabCanvas/ComponentSelector.vue @@ -2,177 +2,106 @@
- +
- -
+ +
-
+

- - - - - + 添加元器件

-
- 元器件 - 模板 - 虚拟外设 + 元器件 + 模板 + 虚拟外设
-
-
-
- - - - - -
- -
-
- - -
-
-
-
-
- - - - 加载中... -
-

{{ component.name }}

-

{{ component.type }}

-
-
-
- -
- - - - - -

没有找到匹配的元器件

- -
-
- - -
-
-
-
-
- Template thumbnail -
-

{{ template.name }}

-

- {{ template.description || "模板" }} -

-
-
-
- -
- - - - - -

没有找到匹配的模板

- -
-
- -
-
-
-
-
- - - - 加载中... -
-

{{ device.name }}

-

{{ device.type }}

-
-
-
- -
- - - - - -

没有找到匹配的虚拟外设

- -
-
- - -
- -
@@ -181,8 +110,18 @@ diff --git a/src/components/LabCanvas/index.ts b/src/components/LabCanvas/index.ts index 8816a4f..8ccb84f 100644 --- a/src/components/LabCanvas/index.ts +++ b/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 = { + 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";