feat: upload and download bitstream from the component of project view

src/components/equipments/ETH.vue

@@ -1,45 +1,65 @@
-<template>  <div class="eth-component" :style="{ width: width + 'px', height: height + 'px' }">
-    <img 
-      src="../equipments/svg/eth.svg" 
-      :width="width" 
-      :height="height" 
-      alt="以太网接口"
-      class="svg-image"
-      draggable="false"
-    />
+<template>
+  <div class="eth-component" :style="{ width: width + 'px', height: height + 'px' }">
+    <img src="../equipments/svg/eth.svg" :width="width" :height="height" alt="以太网接口" class="svg-image"
+      draggable="false" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed } from "vue";
 
 interface Props {
   size?: number;
+  devIPAddress?: string;
+  devPort?: string;
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  size: 1
-});
+const props = withDefaults(defineProps<Props>(), getDefaultProps());
 
 // 计算实际宽高
 const width = computed(() => 100 * props.size);
 const height = computed(() => 60 * props.size);
+
+// 向外暴露方法
+defineExpose({
+  getInfo: () => ({
+    size: props.size,
+    type: "ETH",
+  }),
+  // 主板没有引脚，但为了接口一致性，提供一个空的getPinPosition方法
+  getPinPosition: () => null,
+});
+</script>
+
+<script lang="ts">
+// 添加一个静态方法来获取默认props
+export function getDefaultProps() {
+  return {
+    size: 1,
+    devIPAddress: "127.0.0.1",
+    devPort: "1234",
+  };
+}
 </script>
 
 <style scoped>
 .eth-component {
   display: block;
   user-select: none;
-  -webkit-user-select: none; /* Safari */
-  -moz-user-select: none; /* Firefox */
-  -ms-user-select: none; /* IE/Edge */
+  -webkit-user-select: none;
+  /* Safari */
+  -moz-user-select: none;
+  /* Firefox */
+  -ms-user-select: none;
+  /* IE/Edge */
 }
 
 .svg-image {
   width: 100%;
   height: 100%;
   object-fit: contain;
-  pointer-events: none; /* 禁止鼠标交互 */
+  pointer-events: none;
+  /* 禁止鼠标交互 */
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;

src/components/equipments/MotherBoard.vue

@@ -1,56 +1,126 @@
 <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>
 
-<script setup lang="ts">
-import { computed } from 'vue';
+<script setup lang="tsx">
+import { JtagClient, type FileParameter } from "@/APIClient";
+import UploadCard from "@/components/UploadCard.vue";
+import { useDialogStore } from "@/stores/dialog";
+import { toNumber } from "lodash";
+import { computed, ref } from "vue";
 
 // 主板特有属性
 interface MotherBoardProps {
   size?: number;
+  jtagAddr?: string;
+  jtagPort?: string;
 }
 
-const props = withDefaults(defineProps<MotherBoardProps>(), {
-  size: 1
-});
+const props = withDefaults(defineProps<MotherBoardProps>(), getDefaultProps());
 
 // 计算实际宽高
 const width = computed(() => 800 * props.size);
 const height = computed(() => 600 * props.size);
 
+// 我们需要在这个静态方法中创建必要的函数
+const jtagController = new JtagClient();
+const dialog = useDialogStore();
+
+async function uploadBitstream(event: Event, bitstream: File) {
+  const boardAddress = "127.0.0.1"; // 默认值
+  const boardPort = "1234"; // 默认值
+
+  if (!boardAddress || !boardPort) {
+    dialog.error("开发板地址或端口空缺");
+    return;
+  }
+
+  const fileParam = {
+    data: bitstream,
+    fileName: bitstream.name,
+  };
+
+  try {
+    const resp = await jtagController.uploadBitstream(boardAddress, fileParam);
+    return resp;
+  } catch (e) {
+    dialog.error("上传错误");
+  }
+}
+
+async function downloadBitstream() {
+  const boardAddress = "127.0.0.1"; // 默认值
+  const boardPort = "1234"; // 默认值
+
+  if (!boardAddress || !boardPort) {
+    dialog.error("开发板地址或端口空缺");
+    return;
+  }
+
+  try {
+    const resp = await jtagController.downloadBitstream(
+      boardAddress,
+      parseInt(boardPort),
+    );
+    return resp;
+  } catch (e) {
+    dialog.error("上传错误");
+    console.error(e);
+  }
+}
+
 // 向外暴露方法
 defineExpose({
   getInfo: () => ({
     size: props.size,
-    type: 'motherboard'
+    type: "motherboard",
   }),
   // 主板没有引脚，但为了接口一致性，提供一个空的getPinPosition方法
-  getPinPosition: () => null
+  getPinPosition: () => null,
+  getCapabilities: () => (
+    <div>
+      <UploadCard
+        class={"bg-base-200"}
+        upload-event={uploadBitstream}
+        download-event={downloadBitstream}
+      >
+        {" "}
+      </UploadCard>
+    </div>
+  ),
 });
 </script>
 
-<script lang="ts">
+<script lang="tsx">
 // 添加一个静态方法来获取默认props
 export function getDefaultProps() {
   return {
-    size: 1
+    size: 1,
   };
 }
+//
+// export function getCapabilities() {
+//   return (
+//     <div>
+//       <UploadCard
+//         class={"bg-base-200"}
+//         upload-event={uploadBitstream}
+//         download-event={downloadBitstream}
+//       >
+//         {" "}
+//       </UploadCard>
+//     </div>
+//   );
+// }
 </script>
 
 <style scoped>
@@ -58,14 +128,18 @@ export function getDefaultProps() {
   display: block;
   position: relative;
   user-select: none;
-  -webkit-user-select: none; /* Safari */
-  -moz-user-select: none; /* Firefox */
-  -ms-user-select: none; /* IE/Edge */
+  -webkit-user-select: none;
+  /* Safari */
+  -moz-user-select: none;
+  /* Firefox */
+  -ms-user-select: none;
+  /* IE/Edge */
 }
 
 .motherboard-svg {
   width: 100%;
   height: 100%;
-  pointer-events: none; /* 禁止鼠标交互 */
+  pointer-events: none;
+  /* 禁止鼠标交互 */
 }
 </style>