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

feat: Refactor code structure for improved readability and maintainability

Browse Source
This commit is contained in:
alivender
2025-05-09 19:28:43 +08:00
parent d4b34bd6d4
commit 6a786c1519
17 changed files with 2913 additions and 583 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
src/components/ComponentSelector.vue
View File

@@ -5,8 +5,7 @@
<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="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">
@@ -24,13 +23,20 @@
</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="搜索元器件..."
placeholder="搜索..."
class="input input-bordered input-sm w-full pl-10"
v-model="searchQuery"
@keyup.enter="searchComponents"
@@ -44,8 +50,8 @@
</div>
</div>
<!-- 元器件列表 -->
<div class="px-6 py-4 overflow-auto flex-1">
<!-- 元器件列表 (组件选项卡) -->
<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"
@@ -81,6 +87,47 @@
</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 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="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="16"></line>
<line x1="8" y1="12" x2="16" y2="12"></line>
</svg>
<p class="text-base-content opacity-70">虚拟外设功能即将推出</p>
</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">
@@ -110,7 +157,10 @@ interface Props {
const props = defineProps<Props>();
// 定义组件发出的事件
const emit = defineEmits(['close', 'add-component', 'update:open']);
const emit = defineEmits(['close', 'add-component', 'add-template', 'update:open']);
// 当前激活的选项卡
const activeTab = ref('components');
// --- 搜索功能 ---
const searchQuery = ref('');
@@ -121,15 +171,28 @@ const availableComponents = [
{ 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: 'MotherBoard', name: '主板' },
{ type: 'PG2L100H_FBG676', name: 'PG2L100H FBG676芯片' }
];
// --- 可用模板列表 ---
const availableTemplates = ref([
{
name: 'PG2L100H 基础开发板',
id: 'PG2L100H_Pango100pro',
description: '包含主板和两个LED的基本设置',
path: '/src/components/equipments/templates/PG2L100H_Pango100pro.json',
thumbnailUrl: '/src/components/equipments/svg/motherboard.svg'
}
]);
// 显示/隐藏组件菜单
const showComponentsMenu = computed({
get: () => props.open,
@@ -180,6 +243,7 @@ function getPreviewSize(componentType: string): number {
'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, // 以太网接口较大
@@ -235,9 +299,36 @@ async function addComponent(componentTemplate: { type: string; name: string }) {
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
});
// 关闭菜单
closeMenu();
} catch (error) {
console.error('加载模板出错:', error);
alert('无法加载模板文件，请检查控制台错误信息');
}
}
// 过滤后的元器件列表 (用于菜单)
const filteredComponents = computed(() => {
if (!searchQuery.value) {
if (!searchQuery.value || activeTab.value !== 'components') {
return availableComponents;
}
const query = searchQuery.value.toLowerCase();
@@ -247,6 +338,18 @@ const filteredComponents = computed(() => {
);
});
// 过滤后的模板列表 (用于菜单)
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))
);
});
// 生命周期钩子
onMounted(() => {
// 预加载组件模块