From 9657aacf838a736f49becc17add1e151dca5c7ef Mon Sep 17 00:00:00 2001
From: SikongJueluo <selfconfusion@gmail.com>
Date: Tue, 13 May 2025 21:52:58 +0800
Subject: [PATCH] feat: restore upload jtag bitstream

---
 src/assets/doc.svg                        |   1 +
 src/assets/refresh.svg                    |   1 +
 src/components/PropertyPanel.vue          |  12 +-
 src/components/UploadCard.vue             |  43 +++--
 src/components/equipments/MotherBoard.vue | 211 ++++++++++++++--------
 src/stores/constraints.ts                 |   1 -
 src/stores/equipments.ts                  |  22 +++
 7 files changed, 198 insertions(+), 93 deletions(-)
 create mode 100644 src/assets/doc.svg
 create mode 100644 src/assets/refresh.svg
 create mode 100644 src/stores/equipments.ts

diff --git a/src/assets/doc.svg b/src/assets/doc.svg
new file mode 100644
index 0000000..4e6e256
--- /dev/null
+++ b/src/assets/doc.svg
@@ -0,0 +1 @@
+<svg t="1747137150839" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5910" width="200" height="200"><path d="M224 831.936V192.096L223.808 192H576v159.936c0 35.328 28.736 64.064 64.064 64.064h159.712c0.032 0.512 0.224 1.184 0.224 1.664L800.256 832 224 831.936zM757.664 352L640 351.936V224.128L757.664 352z m76.064-11.872l-163.872-178.08C651.712 142.336 619.264 128 592.672 128H223.808A64.032 64.032 0 0 0 160 192.096v639.84A64 64 0 0 0 223.744 896h576.512A64 64 0 0 0 864 831.872V417.664c0-25.856-12.736-58.464-30.272-77.536z" fill="#3E3A39" p-id="5911"></path><path d="M640 512h-256a32 32 0 0 0 0 64h256a32 32 0 0 0 0-64M640 672h-256a32 32 0 0 0 0 64h256a32 32 0 0 0 0-64" fill="#3E3A39" p-id="5912"></path></svg>
\ No newline at end of file
diff --git a/src/assets/refresh.svg b/src/assets/refresh.svg
new file mode 100644
index 0000000..c384c76
--- /dev/null
+++ b/src/assets/refresh.svg
@@ -0,0 +1 @@
+<svg t="1747136937808" class="icon" 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>
\ No newline at end of file
diff --git a/src/components/PropertyPanel.vue b/src/components/PropertyPanel.vue
index 2c84c32..dedaef5 100644
--- a/src/components/PropertyPanel.vue
+++ b/src/components/PropertyPanel.vue
@@ -45,7 +45,11 @@
 
     <CollapsibleSection title="组件功能" v-model:isExpanded="componentCapsExpanded" status="default" class="mt-4">
       <div v-if="componentData && componentData.type">
-        <component v-if="capabilityComponent" :is="capabilityComponent" />
+        <component 
+          v-if="capabilityComponent" 
+          :is="capabilityComponent" 
+          v-bind="componentData.attrs" 
+        />
         <div v-else class="text-gray-400">
           该组件没有提供特殊功能
         </div>
@@ -248,14 +252,14 @@ async function getExposedCapabilities(componentType: string) {
     
     // 检查是否有getCapabilities方法
     if (exposedMethods && typeof exposedMethods.getCapabilities === 'function') {
-      // 获取能力页面JSX
-      const capsComponent = exposedMethods.getCapabilities();
+      // 获取能力组件定义
+      const CapabilityComponent = exposedMethods.getCapabilities();
       
       // 卸载应用，清理DOM
       app.unmount();
       tempDiv.remove();
       
-      return capsComponent;
+      return CapabilityComponent;
     }
     
     // 卸载应用，清理DOM
diff --git a/src/components/UploadCard.vue b/src/components/UploadCard.vue
index a8ab95f..d219bb4 100644
--- a/src/components/UploadCard.vue
+++ b/src/components/UploadCard.vue
@@ -6,7 +6,7 @@
     <!-- Input File -->
     <fieldset class="fieldset w-full">
       <legend class="fieldset-legend text-sm">选择或拖拽上传文件</legend>
-      <input type="file" class="file-input w-full" @change="handleFileChange" />
+      <input type="file" class="file-input w-full" :value="fileInput" @change="handleFileChange" />
       <label class="fieldset-label">文件最大容量: {{ maxMemory }}MB</label>
     </fieldset>
 
@@ -20,17 +20,27 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
+import { useEquipments } from "@/stores/equipments";
 import { useDialogStore } from "@/stores/dialog";
 import { isNull, isUndefined } from "lodash";
 
+const emits = defineEmits<{
+  finishedUpload: [file: File];
+}>();
+
 const dialog = useDialogStore();
+const eqps = useEquipments();
 
 const buttonText = computed(() => {
   return isUndefined(props.downloadEvent) ? "上传" : "上传并下载";
 });
 
-var bitstream: File | null = null;
+// var bitstream: File | null = null;
+const bitstream = defineModel<File | undefined>();
+const fileInput = computed(() => {
+  return !isUndefined(bitstream.value) ? bitstream.value.name : "";
+});
 
 function handleFileChange(event: Event): void {
   const target = event.target as HTMLInputElement;
@@ -40,15 +50,10 @@ function handleFileChange(event: Event): void {
     return;
   }
 
-  bitstream = file;
+  bitstream.value = file;
 }
 
-function checkFile(file: File | null): boolean {
-  if (isNull(file)) {
-    dialog.error(`未选择文件`);
-    return false;
-  }
-
+function checkFile(file: File): boolean {
   const maxBytes = props.maxMemory! * 1024 * 1024; // 将最大容量从 MB 转换为字节
   if (file.size > maxBytes) {
     dialog.error(`文件大小超过最大限制: ${props.maxMemory}MB`);
@@ -58,18 +63,25 @@ function checkFile(file: File | null): boolean {
 }
 
 async function handleClick(event: Event): Promise<void> {
-  if (!checkFile(bitstream)) return;
+  if (isNull(bitstream.value) || isUndefined(bitstream.value)) {
+    dialog.error(`未选择文件`);
+    return;
+  }
+
+  if (!checkFile(bitstream.value)) return;
   if (isUndefined(props.uploadEvent)) {
     dialog.error("无法上传");
     return;
   }
 
-  // Upload
+  // Upload - 修改这里，传递bitstream.value而不是bitstream
   try {
-    const ret = await props.uploadEvent(event, bitstream);
+    const ret = await props.uploadEvent(event, bitstream.value);
     if (isUndefined(props.downloadEvent)) {
-      if (ret) dialog.info("上传成功");
-      else dialog.error("上传失败");
+      if (ret) {
+        dialog.info("上传成功");
+        emits("finishedUpload", bitstream.value);
+      } else dialog.error("上传失败");
       return;
     }
   } catch (e) {
@@ -93,6 +105,7 @@ interface Props {
   uploadEvent?: Function;
   downloadEvent?: Function;
   maxMemory?: number;
+  defaultFile?: File;
 }
 
 const props = withDefaults(defineProps<Props>(), {
diff --git a/src/components/equipments/MotherBoard.vue b/src/components/equipments/MotherBoard.vue
index 0c4962e..d5a951f 100644
--- a/src/components/equipments/MotherBoard.vue
+++ b/src/components/equipments/MotherBoard.vue
@@ -13,10 +13,12 @@
 
 <script setup lang="tsx">
 import { JtagClient, type FileParameter } from "@/APIClient";
+import z from "zod";
+import { useEquipments } from "@/stores/equipments";
 import UploadCard from "@/components/UploadCard.vue";
 import { useDialogStore } from "@/stores/dialog";
-import { toNumber } from "lodash";
-import { computed, ref } from "vue";
+import { toNumber, toString } from "lodash";
+import { computed, ref, defineComponent, watch } from "vue";
 
 // 主板特有属性
 interface MotherBoardProps {
@@ -30,53 +32,12 @@ const props = withDefaults(defineProps<MotherBoardProps>(), getDefaultProps());
 // 计算实际宽高
 const width = computed(() => 800 * props.size);
 const height = computed(() => 600 * props.size);
+const eqps = useEquipments();
 
-// 我们需要在这个静态方法中创建必要的函数
-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);
-  }
-}
+watch([props.jtagAddr, props.jtagPort], () => {
+  eqps.jtagIPAddr = props.jtagAddr;
+  eqps.jtagPort = props.jtagPort;
+});
 
 // 向外暴露方法
 defineExpose({
@@ -86,17 +47,133 @@ defineExpose({
   }),
   // 主板没有引脚，但为了接口一致性，提供一个空的getPinPosition方法
   getPinPosition: () => null,
-  getCapabilities: () => (
-    <div>
-      <UploadCard
-        class={"bg-base-200"}
-        upload-event={uploadBitstream}
-        download-event={downloadBitstream}
-      >
-        {" "}
-      </UploadCard>
-    </div>
-  ),
+  getCapabilities: () => {
+    // 返回组件定义而不是直接返回JSX
+    return defineComponent({
+      name: "MotherBoardCapabilities",
+      props: {
+        jtagAddr: {
+          type: String,
+          default: props.jtagAddr,
+        },
+        jtagPort: {
+          type: String,
+          default: props.jtagPort,
+        },
+      },
+      setup(props) {
+        const jtagController = new JtagClient();
+        const dialog = useDialogStore();
+
+        // 使用传入的属性或默认值
+        const jtagIDCode = ref("");
+        const boardAddress = computed(() => props.jtagAddr);
+        const boardPort = computed(() => toNumber(props.jtagPort));
+
+        async function uploadBitstream(event: Event, bitstream: File) {
+          if (!boardAddress.value || !boardPort.value) {
+            dialog.error("开发板地址或端口空缺");
+            return;
+          }
+
+          const fileParam = {
+            data: bitstream,
+            fileName: bitstream.name,
+          };
+
+          try {
+            const resp = await jtagController.uploadBitstream(
+              boardAddress.value,
+              fileParam,
+            );
+            return resp;
+          } catch (e) {
+            dialog.error("上传错误");
+          }
+        }
+
+        async function downloadBitstream() {
+          if (!boardAddress.value || !boardPort.value) {
+            dialog.error("开发板地址或端口空缺");
+            return;
+          }
+
+          try {
+            const resp = await jtagController.downloadBitstream(
+              boardAddress.value,
+              boardPort.value,
+            );
+            return resp;
+          } catch (e) {
+            dialog.error("上传错误");
+            console.error(e);
+          }
+        }
+
+        watch([boardAddress, boardPort], () => {
+          if (
+            z.string().ip().safeParse(boardAddress).success &&
+            z.number().positive().safeParse(boardPort).success
+          )
+            getIDCode();
+        });
+
+        async function getIDCode() {
+          if (!boardAddress.value || !boardPort.value) {
+            dialog.error("开发板地址或端口空缺");
+            return;
+          }
+
+          try {
+            const resp = await jtagController.getDeviceIDCode(
+              boardAddress.value,
+              boardPort.value,
+            );
+            jtagIDCode.value = toString(resp);
+          } catch (e) {
+            dialog.error("获取IDCode错误");
+            console.error(e);
+          }
+        }
+
+        return () => (
+          <div>
+            <h1 class="font-bold text-center text-2xl">Jtag</h1>
+            <div class="flex">
+              <p class="grow">IDCode: {jtagIDCode.value}</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 class="divider"></div>
+            <UploadCard
+              class="bg-base-200"
+              upload-event={uploadBitstream}
+              download-event={downloadBitstream}
+              onFinishedUpload={(file: File) => {
+                eqps.jtagBitstream = file;
+              }}
+            >
+              {" "}
+            </UploadCard>
+          </div>
+        );
+      },
+    });
+  },
 });
 </script>
 
@@ -105,22 +182,10 @@ defineExpose({
 export function getDefaultProps() {
   return {
     size: 1,
+    jtagAddr: "127.0.0.1",
+    jtagPort: "1234",
   };
 }
-//
-// export function getCapabilities() {
-//   return (
-//     <div>
-//       <UploadCard
-//         class={"bg-base-200"}
-//         upload-event={uploadBitstream}
-//         download-event={downloadBitstream}
-//       >
-//         {" "}
-//       </UploadCard>
-//     </div>
-//   );
-// }
 </script>
 
 <style scoped>
diff --git a/src/stores/constraints.ts b/src/stores/constraints.ts
index 73f3d19..f09783b 100644
--- a/src/stores/constraints.ts
+++ b/src/stores/constraints.ts
@@ -1,5 +1,4 @@
 import { ref, reactive } from 'vue';
-
 // 约束电平状态类型
 export type ConstraintLevel = 'high' | 'low' | 'undefined';
 
diff --git a/src/stores/equipments.ts b/src/stores/equipments.ts
new file mode 100644
index 0000000..f7c4425
--- /dev/null
+++ b/src/stores/equipments.ts
@@ -0,0 +1,22 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+import { isUndefined } from 'lodash';
+
+export const useEquipments = defineStore('equipments', () => {
+  const jtagIPAddr = ref("127.0.0.1")
+  const jtagPort = ref("1234")
+  const jtagBitstream = ref<File | undefined>()
+  const remoteUpdateIPAddr = ref("127.0.0.1")
+  const remoteUpdatePort = ref("1234")
+  const remoteUpdateBitstream = ref<File | undefined>()
+
+  return {
+    jtagIPAddr,
+    jtagPort,
+    jtagBitstream,
+    remoteUpdateIPAddr,
+    remoteUpdatePort,
+    remoteUpdateBitstream,
+  }
+})
+