SikongJueluo/FPGA_WebLab
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: remake most of forntend

Browse Source
This commit is contained in:
alivender
2025-04-26 19:59:35 +08:00
parent 4e741f9ef8
commit bc4f44ecaa
41 changed files with 84095 additions and 672 deletions
Download Patch File Download Diff File Expand all files Collapse all files

277
src/components/ComponentSelector.vue Normal file
View File

@@ -0,0 +1,277 @@
<template>
<div>
<!-- 元器件选择菜单 (Drawer) -->
<div class="drawer drawer-end z-50">
<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">
<!-- 菜单头部 -->
<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">
<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>
添加元器件
</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>
</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 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 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>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed, shallowRef, onMounted } from 'vue';
import { getComponentConfig } from '@/components/equipments/componentConfig';
// Props 定义
interface Props {
open: boolean;
}
const props = defineProps<Props>();
// 定义组件发出的事件
const emit = defineEmits(['close', 'add-component', 'update:open']);
// --- 搜索功能 ---
const searchQuery = ref('');
// --- 可用元器件列表 ---
const availableComponents = [
{ type: 'MechanicalButton', name: '机械按钮' },
{ type: 'Switch', name: '开关' },
{ type: 'Pin', name: '引脚' },
{ type: 'SMT_LED', name: '贴片LED' },
{ 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: '主板' }
];
// 显示/隐藏组件菜单
const showComponentsMenu = computed({
get: () => props.open,
set: (value) => emit('update:open', value)
});
// 组件模块缓存
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);
}
}
}
// 获取组件预览时适合的尺寸
function getPreviewSize(componentType: string): number {
// 根据组件类型返回适当的预览尺寸
const previewSizes: Record<string, number> = {
'MechanicalButton': 0.4, // 按钮较大，需要更小尺寸
'Switch': 0.35, // 开关较大，需要更小尺寸
'Pin': 0.8, // 引脚较小，可以大一些
'SMT_LED': 0.7, // LED可以保持适中
'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 // 主板最大，需要最小尺寸
};
// 返回对应尺寸，如果没有特定配置则返回默认值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 config = getComponentConfig(componentTemplate.type);
const defaultProps: Record<string, any> = {};
if (config && config.props) {
config.props.forEach(prop => {
defaultProps[prop.name] = prop.default;
});
}
// 再加载组件模块以便后续使用
await loadComponentModule(componentTemplate.type);
// 发送添加组件事件给父组件
emit('add-component', {
type: componentTemplate.type,
name: componentTemplate.name,
props: defaultProps
});
// 关闭菜单
closeMenu();
}
// 过滤后的元器件列表 (用于菜单)
const filteredComponents = computed(() => {
if (!searchQuery.value) {
return availableComponents;
}
const query = searchQuery.value.toLowerCase();
return availableComponents.filter(component =>
component.name.toLowerCase().includes(query) ||
component.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>