Merge branch 'master' of ssh://git.swordlost.top:222/SikongJueluo/FPGA_WebLab into dpp
This commit is contained in:
alivender
commit
0350ce8829
|
|
@ -24,6 +24,7 @@ declare module 'vue' {
|
||||||
FunctionBar: typeof import('./src/components/FunctionBar.vue')['default']
|
FunctionBar: typeof import('./src/components/FunctionBar.vue')['default']
|
||||||
HDMI: typeof import('./src/components/equipments/HDMI.vue')['default']
|
HDMI: typeof import('./src/components/equipments/HDMI.vue')['default']
|
||||||
IpInputField: typeof import('./src/components/InputField/IpInputField.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']
|
LabCanvas: typeof import('./src/components/LabCanvasNew/LabCanvas.vue')['default']
|
||||||
LabCanvasNew: typeof import('./src/components/LabCanvas/LabCanvasNew.vue')['default']
|
LabCanvasNew: typeof import('./src/components/LabCanvas/LabCanvasNew.vue')['default']
|
||||||
LabComponentsDrawer: typeof import('./src/components/LabCanvasNew/LabComponentsDrawer.vue')['default']
|
LabComponentsDrawer: typeof import('./src/components/LabCanvasNew/LabComponentsDrawer.vue')['default']
|
||||||
|
|
|
||||||
|
|
@ -2,177 +2,106 @@
|
||||||
<div>
|
<div>
|
||||||
<!-- 元器件选择菜单 (Drawer) -->
|
<!-- 元器件选择菜单 (Drawer) -->
|
||||||
<div class="drawer drawer-end z-50">
|
<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">
|
<div class="drawer-side">
|
||||||
<label for="component-drawer" aria-label="close sidebar" class="drawer-overlay !bg-opacity-50"></label>
|
<label
|
||||||
<div class="menu p-0 w-[460px] min-h-full bg-base-100 shadow-xl flex flex-col">
|
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">
|
<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"
|
<Plus :size="20" class="text-primary" />
|
||||||
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>
|
|
||||||
添加元器件
|
添加元器件
|
||||||
</h3>
|
</h3>
|
||||||
<label for="component-drawer" class="btn btn-ghost btn-sm btn-circle" @click="closeMenu">
|
<label
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
|
for="component-drawer"
|
||||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
class="btn btn-ghost btn-sm btn-circle"
|
||||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
@click="closeMenu"
|
||||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
>
|
||||||
</svg>
|
<X :size="20" />
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 导航栏 -->
|
<!-- 导航栏 -->
|
||||||
<div class="tabs tabs-boxed bg-base-200 mx-6 mt-4 rounded-box">
|
<div class="tabs tabs-boxed bg-base-200 mx-6 mt-4 rounded-box">
|
||||||
<a class="tab" :class="{ 'tab-active': activeTab === 'components' }"
|
<a
|
||||||
@click="activeTab = 'components'">元器件</a>
|
class="tab"
|
||||||
<a class="tab" :class="{ 'tab-active': activeTab === 'templates' }" @click="activeTab = 'templates'">模板</a>
|
:class="{ 'tab-active': activeTab === 'components' }"
|
||||||
<a class="tab" :class="{ 'tab-active': activeTab === 'virtual' }" @click="activeTab = 'virtual'">虚拟外设</a>
|
@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>
|
||||||
|
|
||||||
<!-- 搜索框 -->
|
<!-- 搜索框 -->
|
||||||
<div class="px-6 py-4 border-b border-base-300">
|
<div class="px-6 py-4 w-full">
|
||||||
<div class="join w-full">
|
<label class="input w-full">
|
||||||
<div class="join-item flex-1 relative">
|
<Search :size="16" class="h-[1em] opacity-50" />
|
||||||
<input type="text" placeholder="搜索..." class="input input-bordered input-sm w-full pl-10"
|
<input
|
||||||
v-model="searchQuery" @keyup.enter="searchComponents" />
|
type="text"
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
|
placeholder="搜索..."
|
||||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
class="grow"
|
||||||
class="absolute left-3 top-1/2 -translate-y-1/2 text-base-content opacity-60">
|
v-model="searchQuery"
|
||||||
<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">
|
|
||||||
完成
|
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -181,8 +110,18 @@
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed, shallowRef, onMounted } from "vue";
|
import { ref, computed, shallowRef, onMounted } from "vue";
|
||||||
import motherboardSvg from "@/components/equipments/svg/motherboard.svg";
|
import { Plus, X, Search } from "lucide-vue-next";
|
||||||
import buttonSvg from "@/components//equipments/svg/button.svg";
|
import ItemList from "./ItemList.vue";
|
||||||
|
import {
|
||||||
|
useComponentManager,
|
||||||
|
availableComponents,
|
||||||
|
availableVirtualDevices,
|
||||||
|
availableTemplates,
|
||||||
|
getAllComponentTypes,
|
||||||
|
type ComponentConfig,
|
||||||
|
type VirtualDeviceConfig,
|
||||||
|
type TemplateConfig,
|
||||||
|
} from "./index.ts";
|
||||||
|
|
||||||
// Props 定义
|
// Props 定义
|
||||||
interface Props {
|
interface Props {
|
||||||
|
|
@ -191,6 +130,8 @@ interface Props {
|
||||||
|
|
||||||
const props = defineProps<Props>();
|
const props = defineProps<Props>();
|
||||||
|
|
||||||
|
const componentManager = useComponentManager();
|
||||||
|
|
||||||
// 定义组件发出的事件
|
// 定义组件发出的事件
|
||||||
const emit = defineEmits([
|
const emit = defineEmits([
|
||||||
"close",
|
"close",
|
||||||
|
|
@ -205,45 +146,6 @@ const activeTab = ref("components");
|
||||||
// --- 搜索功能 ---
|
// --- 搜索功能 ---
|
||||||
const searchQuery = ref("");
|
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({
|
const showComponentsMenu = computed({
|
||||||
get: () => props.open,
|
get: () => props.open,
|
||||||
|
|
@ -277,52 +179,15 @@ async function loadComponentModule(type: string) {
|
||||||
|
|
||||||
// 预加载组件模块
|
// 预加载组件模块
|
||||||
async function preloadComponentModules() {
|
async function preloadComponentModules() {
|
||||||
// 加载基础组件
|
const allTypes = getAllComponentTypes();
|
||||||
for (const component of availableComponents) {
|
|
||||||
|
for (const type of allTypes) {
|
||||||
try {
|
try {
|
||||||
await loadComponentModule(component.type);
|
await loadComponentModule(type);
|
||||||
} catch (error) {
|
} 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);
|
const moduleRef = await loadComponentModule(componentTemplate.type);
|
||||||
let defaultProps: Record<string, any> = {};
|
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 {
|
try {
|
||||||
// 加载模板JSON文件
|
// 加载模板JSON文件
|
||||||
const response = await fetch(template.path);
|
const response = await fetch(template.path);
|
||||||
|
|
@ -381,7 +248,7 @@ async function addTemplate(template: any) {
|
||||||
id: template.id,
|
id: template.id,
|
||||||
name: template.name,
|
name: template.name,
|
||||||
template: templateData,
|
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(() => {
|
onMounted(() => {
|
||||||
// 预加载组件模块
|
// 预加载组件模块
|
||||||
|
|
@ -440,13 +267,6 @@ onMounted(() => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* 组件预览样式 */
|
|
||||||
.component-preview {
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 动画效果 */
|
/* 动画效果 */
|
||||||
.animate-slideUp {
|
.animate-slideUp {
|
||||||
animation: slideUp 0.3s ease-out forwards;
|
animation: slideUp 0.3s ease-out forwards;
|
||||||
|
|
|
||||||
|
|
@ -10,71 +10,19 @@
|
||||||
<!-- 工具栏 -->
|
<!-- 工具栏 -->
|
||||||
<div class="absolute top-2 right-2 flex gap-2 z-30">
|
<div class="absolute top-2 right-2 flex gap-2 z-30">
|
||||||
<button class="btn btn-sm btn-primary" @click="openDiagramFileSelector">
|
<button class="btn btn-sm btn-primary" @click="openDiagramFileSelector">
|
||||||
<svg
|
<FolderOpen class="h-4 w-4 mr-1" />
|
||||||
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>
|
|
||||||
导入
|
导入
|
||||||
</button>
|
</button>
|
||||||
<button class="btn btn-sm btn-primary" @click="exportDiagram">
|
<button class="btn btn-sm btn-primary" @click="exportDiagram">
|
||||||
<svg
|
<Download class="h-4 w-4 mr-1" />
|
||||||
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>
|
|
||||||
导出
|
导出
|
||||||
</button>
|
</button>
|
||||||
<button class="btn btn-sm btn-primary" @click="emit('open-components')">
|
<button class="btn btn-sm btn-primary" @click="emit('open-components')">
|
||||||
<svg
|
<Plus class="h-4 w-4 mr-1" />
|
||||||
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>
|
|
||||||
添加组件
|
添加组件
|
||||||
</button>
|
</button>
|
||||||
<button class="btn btn-sm btn-primary" @click="emit('toggle-doc-panel')">
|
<button class="btn btn-sm btn-primary" @click="emit('toggle-doc-panel')">
|
||||||
<svg
|
<FileText class="h-4 w-4 mr-1" />
|
||||||
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>
|
|
||||||
{{ props.showDocPanel ? "属性面板" : "文档" }}
|
{{ props.showDocPanel ? "属性面板" : "文档" }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -235,6 +183,7 @@ import {
|
||||||
provide,
|
provide,
|
||||||
} from "vue";
|
} from "vue";
|
||||||
import { useEventListener } from "@vueuse/core";
|
import { useEventListener } from "@vueuse/core";
|
||||||
|
import { FolderOpen, Download, Plus, FileText } from "lucide-vue-next";
|
||||||
import WireComponent from "@/components/equipments/Wire.vue";
|
import WireComponent from "@/components/equipments/Wire.vue";
|
||||||
import { useAlertStore } from "@/components/Alert";
|
import { useAlertStore } from "@/components/Alert";
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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";
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue