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

fix: mother board reactive problem

Browse Source
This commit is contained in:
SikongJueluo
2025-05-16 16:38:57 +08:00
parent 1eded97c76
commit c39f688115
11 changed files with 1063 additions and 464 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/PropertyEditor.vue
View File

@@ -152,7 +152,7 @@ const emit = defineEmits<{
}>();
// 控制折叠面板状态
const generalPropsExpanded = ref(true);
const generalPropsExpanded = ref(false);
const componentPropsExpanded = ref(true);
// 更新组件属性方法

70
src/components/PropertyPanel.vue
View File

@@ -45,18 +45,10 @@
<CollapsibleSection title="组件功能" v-model:isExpanded="componentCapsExpanded" status="default" class="mt-4">
<div v-if="componentData && componentData.type">
<component
v-if="capabilityComponent"
:is="capabilityComponent"
v-bind="componentData.attrs"
/>
<div v-else class="text-gray-400">
该组件没有提供特殊功能
</div>
</div>
<div v-else class="text-gray-400">
选择元件以查看其功能
<component v-if="capabilityComponent" :is="capabilityComponent" v-bind="componentData.attrs" />
<div v-else class="text-gray-400">该组件没有提供特殊功能</div>
</div>
<div v-else class="text-gray-400">选择元件以查看其功能</div>
</CollapsibleSection>
<!-- 未来可以在这里添加更多的分区 -->
@@ -98,7 +90,7 @@ const props = defineProps<{
}>();
// 控制各个属性分区的展开状态
const propertySectionExpanded = ref(true); // 基本属性区域默认展开
const propertySectionExpanded = ref(false); // 基本属性区域默认展开
const pinsSectionExpanded = ref(false); // 引脚配置区域默认折叠
const componentCapsExpanded = ref(true); // 组件功能区域默认展开
const wireSectionExpanded = ref(false); // 连线管理区域默认折叠
@@ -225,10 +217,10 @@ async function getExposedCapabilities(componentType: string) {
// 动态导入组件
const module = await import(`./equipments/${componentType}.vue`);
const Component = module.default;
// 创建一个临时div作为挂载点
const tempDiv = document.createElement('div');
const tempDiv = document.createElement("div");
// 创建临时应用实例并挂载组件
let exposedMethods: any = null;
const app = createApp({
@@ -239,33 +231,36 @@ async function getExposedCapabilities(componentType: string) {
// 获取组件实例暴露的方法
exposedMethods = el;
}
}
},
});
}
},
});
// 挂载应用
const vm = app.mount(tempDiv);
// 确保实例已创建并获取到暴露的方法
await new Promise(resolve => setTimeout(resolve, 0));
await new Promise((resolve) => setTimeout(resolve, 0));
// 检查是否有getCapabilities方法
if (exposedMethods && typeof exposedMethods.getCapabilities === 'function') {
if (
exposedMethods &&
typeof exposedMethods.getCapabilities === "function"
) {
// 获取能力组件定义
const CapabilityComponent = exposedMethods.getCapabilities();
// 卸载应用，清理DOM
app.unmount();
tempDiv.remove();
return CapabilityComponent;
}
// 卸载应用，清理DOM
app.unmount();
tempDiv.remove();
return null;
} catch (error) {
console.error(`获取${componentType}能力页面失败:`, error);
@@ -280,26 +275,31 @@ watch(
if (newComponentData && newComponentData.type) {
try {
// 首先尝试从实例中获取暴露的方法
const capsComponent = await getExposedCapabilities(newComponentData.type);
const capsComponent = await getExposedCapabilities(
newComponentData.type,
);
if (capsComponent) {
capabilityComponent.value = markRaw(capsComponent);
console.log(`已从实例加载${newComponentData.type}组件的能力页面`);
return;
}
// 如果实例方法获取失败，回退到模块导出方法
const module = await import(`./equipments/${newComponentData.type}.vue`);
const module = await import(
`./equipments/${newComponentData.type}.vue`
);
if (
(module.default && typeof module.default.getCapabilities === "function") ||
(module.default &&
typeof module.default.getCapabilities === "function") ||
typeof module.getCapabilities === "function"
) {
const getCapsFn =
typeof module.getCapabilities === "function"
? module.getCapabilities
: module.default.getCapabilities;
const moduleCapComponent = getCapsFn();
if (moduleCapComponent) {
capabilityComponent.value = markRaw(moduleCapComponent);
@@ -307,7 +307,7 @@ watch(
return;
}
}
capabilityComponent.value = null;
console.log(`组件${newComponentData.type}没有提供getCapabilities方法`);
} catch (error) {
@@ -318,7 +318,7 @@ watch(
capabilityComponent.value = null;
}
},
{ immediate: true }
{ immediate: true },
);
// 修改hasComponentCaps计算属性

23
src/components/UploadCard.vue
View File

@@ -6,26 +6,27 @@
<!-- Input File -->
<fieldset class="fieldset w-full">
<legend class="fieldset-legend text-sm">选择或拖拽上传文件</legend>
<input
type="file"
ref="fileInput"
class="file-input w-full"
@change="handleFileChange"
/>
<input type="file" ref="fileInput" class="file-input w-full" @change="handleFileChange" />
<label class="fieldset-label">文件最大容量: {{ maxMemory }}MB</label>
</fieldset>
<!-- Upload Button -->
<div class="card-actions w-full">
<button @click="handleClick" class="btn btn-primary grow">
{{ buttonText }}
<button @click="handleClick" class="btn btn-primary grow" :disabled="isUploading">
<div v-if="isUploading">
<span class="loading loading-spinner"></span>
下载中...
</div>
<div v-else>
{{ buttonText }}
</div>
</button>
</div>
</div>
</template>
<script lang="ts" setup>
import { computed, useTemplateRef, onMounted } from "vue";
import { computed, ref, useTemplateRef, onMounted } from "vue";
import { useDialogStore } from "@/stores/dialog";
import { isNull, isUndefined } from "lodash";
@@ -46,6 +47,7 @@ const emits = defineEmits<{
const dialog = useDialogStore();
const isUploading = ref(false);
const buttonText = computed(() => {
return isUndefined(props.downloadEvent) ? "上传" : "上传并下载";
});
@@ -93,6 +95,7 @@ async function handleClick(event: Event): Promise<void> {
}
// Upload - 修改这里，传递bitstream.value而不是bitstream
isUploading.value = true;
try {
const ret = await props.uploadEvent(event, bitstream.value);
if (isUndefined(props.downloadEvent)) {
@@ -117,6 +120,8 @@ async function handleClick(event: Event): Promise<void> {
dialog.error("下载失败");
console.error(e);
}
isUploading.value = false;
}
</script>

684
src/components/equipments/DDSPropertyEditor.vue
View File

File diff suppressed because it is too large Load Diff

69
src/components/equipments/MotherBoard.vue
View File

@@ -1,25 +1,12 @@
<template>
<div
class="motherboard-container"
:style="{
width: width + 'px',
height: height + 'px',
position: 'relative',
}"
>
<svg
xmlns="http://www.w3.org/2000/svg"
:width="width"
:height="height"
:viewBox="`0 0 800 600`"
class="motherboard-svg"
>
<image
href="../equipments/svg/motherboard.svg"
width="100%"
height="100%"
preserveAspectRatio="xMidYMid meet"
/>
<div class="motherboard-container" :style="{
width: width + 'px',
height: height + 'px',
position: 'relative',
}">
<svg xmlns="http://www.w3.org/2000/svg" :width="width" :height="height" :viewBox="`0 0 800 600`"
class="motherboard-svg">
<image href="../equipments/svg/motherboard.svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" />
</svg>
</div>
</template>
@@ -27,13 +14,13 @@
<script setup lang="tsx">
import MotherBoardCaps from "./MotherBoardCaps.vue";
import { useEquipments } from "@/stores/equipments";
import {ref, computed, defineComponent, watch } from "vue";
import { ref, computed, defineComponent, watchEffect } from "vue";
// 主板特有属性
interface MotherBoardProps {
export interface MotherBoardProps {
size?: number;
jtagAddr?: string;
jtagPort?: string;
boardAddr?: string;
boardPort?: string;
}
const props = withDefaults(defineProps<MotherBoardProps>(), getDefaultProps());
@@ -44,11 +31,11 @@ const height = computed(() => 600 * props.size);
const eqps = useEquipments();
const bitstreamFile = ref<File | null> ();
const bitstreamFile = ref<File | null>();
watch([props.jtagAddr, props.jtagPort], () => {
eqps.jtagIPAddr = props.jtagAddr;
eqps.jtagPort = props.jtagPort;
watchEffect(() => {
eqps.setAddr(props.boardAddr);
eqps.setPort(props.boardPort);
});
// 向外暴露方法
@@ -63,21 +50,11 @@ defineExpose({
// 返回组件定义而不是直接返回JSX
return defineComponent({
name: "MotherBoardCaps",
props: {
jtagAddr: {
type: String,
default: props.jtagAddr,
},
jtagPort: {
type: String,
default: props.jtagPort,
}
},
setup(props) {
setup() {
return () => (
<MotherBoardCaps
jtagAddr={props.jtagAddr}
jtagPort={props.jtagPort}
jtagAddr={eqps.boardAddr}
jtagPort={eqps.boardPort.toString()}
/>
);
},
@@ -87,12 +64,14 @@ defineExpose({
</script>
<script lang="tsx">
const eqps = useEquipments();
// 添加一个静态方法来获取默认props
export function getDefaultProps() {
export function getDefaultProps(): MotherBoardProps {
console.log(`board监听改动: ${eqps.boardAddr}:${eqps.boardPort}`);
return {
size: 1,
jtagAddr: "127.0.0.1",
jtagPort: "1234",
boardAddr: eqps.boardAddr,
boardPort: eqps.boardPort.toString(),
};
}
</script>

55
src/components/equipments/MotherBoardCaps.vue
View File

@@ -1,31 +1,23 @@
<template>
<div>
<h1 class="font-bold text-center text-2xl">Jtag</h1>
<div class="flex">
<p class="grow">IDCode: {{ jtagIDCode }}</p>
<button class="btn btn-circle w-8 h-8" :onclick="getIDCode">
<svg
class="icon opacity-70"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="4865"
width="200"
height="200"
>
<path
d="M894.481158 505.727133c0 49.589418-9.711176 97.705276-28.867468 143.007041-18.501376 43.74634-44.98454 83.031065-78.712713 116.759237-33.728172 33.728172-73.012897 60.211337-116.759237 78.712713-45.311998 19.156292-93.417623 28.877701-143.007041 28.877701s-97.695043-9.721409-142.996808-28.877701c-43.756573-18.501376-83.031065-44.98454-116.76947-78.712713-33.728172-33.728172-60.211337-73.012897-78.712713-116.759237-19.156292-45.301765-28.867468-93.417623-28.867468-143.007041 0-49.579185 9.711176-97.695043 28.867468-142.996808 18.501376-43.74634 44.98454-83.031065 78.712713-116.759237 33.738405-33.728172 73.012897-60.211337 116.76947-78.712713 45.301765-19.166525 93.40739-28.877701 142.996808-28.877701 52.925397 0 104.008842 11.010775 151.827941 32.745798 46.192042 20.977777 86.909395 50.79692 121.016191 88.608084 4.389984 4.860704 8.646937 9.854439 12.781094 14.97097l0-136.263453c0-11.307533 9.168824-20.466124 20.466124-20.466124 11.307533 0 20.466124 9.15859 20.466124 20.466124l0 183.64253c0 5.433756-2.148943 10.632151-5.986341 14.46955-3.847631 3.837398-9.046027 5.996574-14.479783 5.996574l-183.64253-0.020466c-11.307533 0-20.466124-9.168824-20.466124-20.466124 0-11.307533 9.168824-20.466124 20.466124-20.466124l132.293025 0.020466c-3.960195-4.952802-8.063653-9.782807-12.289907-14.479783-30.320563-33.605376-66.514903-60.098773-107.549481-78.753645-42.467207-19.289322-87.850837-29.072129-134.902456-29.072129-87.195921 0-169.172981 33.9533-230.816946 95.597265-61.654198 61.654198-95.597265 143.621025-95.597265 230.816946s33.943067 169.172981 95.597265 230.816946c61.643965 61.654198 143.621025 95.607498 230.816946 95.607498s169.172981-33.9533 230.816946-95.607498c61.654198-61.643965 95.597265-143.621025 95.597265-230.816946 0-11.2973 9.168824-20.466124 20.466124-20.466124C885.322567 485.261009 894.481158 494.429833 894.481158 505.727133z"
p-id="4866"
></path>
</svg>
</button>
<div class="flex flex-col">
<p class="grow">Jtag Addr: {{ props.jtagAddr }}</p>
<p class="grow">Jtag Port: {{ props.jtagPort }}</p>
<div class="flex justify-between grow">
<p>IDCode: 0x{{ jtagIDCode.toString(16).padStart(8, "0") }}</p>
<button class="btn btn-circle w-8 h-8" :onclick="getIDCode">
<svg class="icon opacity-70" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="4865" width="200" height="200">
<path
d="M894.481158 505.727133c0 49.589418-9.711176 97.705276-28.867468 143.007041-18.501376 43.74634-44.98454 83.031065-78.712713 116.759237-33.728172 33.728172-73.012897 60.211337-116.759237 78.712713-45.311998 19.156292-93.417623 28.877701-143.007041 28.877701s-97.695043-9.721409-142.996808-28.877701c-43.756573-18.501376-83.031065-44.98454-116.76947-78.712713-33.728172-33.728172-60.211337-73.012897-78.712713-116.759237-19.156292-45.301765-28.867468-93.417623-28.867468-143.007041 0-49.579185 9.711176-97.695043 28.867468-142.996808 18.501376-43.74634 44.98454-83.031065 78.712713-116.759237 33.738405-33.728172 73.012897-60.211337 116.76947-78.712713 45.301765-19.166525 93.40739-28.877701 142.996808-28.877701 52.925397 0 104.008842 11.010775 151.827941 32.745798 46.192042 20.977777 86.909395 50.79692 121.016191 88.608084 4.389984 4.860704 8.646937 9.854439 12.781094 14.97097l0-136.263453c0-11.307533 9.168824-20.466124 20.466124-20.466124 11.307533 0 20.466124 9.15859 20.466124 20.466124l0 183.64253c0 5.433756-2.148943 10.632151-5.986341 14.46955-3.847631 3.837398-9.046027 5.996574-14.479783 5.996574l-183.64253-0.020466c-11.307533 0-20.466124-9.168824-20.466124-20.466124 0-11.307533 9.168824-20.466124 20.466124-20.466124l132.293025 0.020466c-3.960195-4.952802-8.063653-9.782807-12.289907-14.479783-30.320563-33.605376-66.514903-60.098773-107.549481-78.753645-42.467207-19.289322-87.850837-29.072129-134.902456-29.072129-87.195921 0-169.172981 33.9533-230.816946 95.597265-61.654198 61.654198-95.597265 143.621025-95.597265 230.816946s33.943067 169.172981 95.597265 230.816946c61.643965 61.654198 143.621025 95.607498 230.816946 95.607498s169.172981-33.9533 230.816946-95.607498c61.654198-61.643965 95.597265-143.621025 95.597265-230.816946 0-11.2973 9.168824-20.466124 20.466124-20.466124C885.322567 485.261009 894.481158 494.429833 894.481158 505.727133z"
p-id="4866"></path>
</svg>
</button>
</div>
</div>
<div class="divider"></div>
<UploadCard
class="bg-base-200"
:upload-event="uploadBitstream"
:download-event="downloadBitstream"
>
<UploadCard class="bg-base-200" :upload-event="uploadBitstream" :download-event="downloadBitstream">
</UploadCard>
</div>
</template>
@@ -35,7 +27,7 @@ import { JtagClient } from "@/APIClient";
import z from "zod";
import UploadCard from "@/components/UploadCard.vue";
import { useDialogStore } from "@/stores/dialog";
import { toNumber, toString } from "lodash";
import { isUndefined, toNumber } from "lodash";
import { ref, computed, watch } from "vue";
interface CapsProps {
@@ -43,21 +35,20 @@ interface CapsProps {
jtagPort?: string;
}
const props = withDefaults(defineProps<CapsProps>(), {
jtagAddr: "127.0.0.1",
jtagPort: "1234",
});
const props = withDefaults(defineProps<CapsProps>(), {});
const jtagController = new JtagClient();
const dialog = useDialogStore();
// 使用传入的属性或默认值
const jtagIDCode = ref("");
const jtagIDCode = ref(0);
const boardAddress = computed(() => props.jtagAddr);
const boardPort = computed(() => toNumber(props.jtagPort));
const boardPort = computed(() =>
isUndefined(props.jtagPort) ? undefined : toNumber(props.jtagPort),
);
async function uploadBitstream(event: Event, bitstream: File) {
if (!boardAddress.value || !boardPort.value) {
if (!isUndefined(boardAddress.value) || !isUndefined(boardPort.value)) {
dialog.error("开发板地址或端口空缺");
return;
}
@@ -115,7 +106,7 @@ async function getIDCode() {
boardAddress.value,
boardPort.value,
);
jtagIDCode.value = toString(resp);
jtagIDCode.value = resp;
} catch (e) {
dialog.error("获取IDCode错误");
console.error(e);