feat: change test view to basic jtag upload and download page

src/views/TestView.vue

@@ -1,17 +1,107 @@
 <template>
-  <div class="h-screen overflow-hidden">
-    <Switch width="1400" height="360" />
-    <MechanicalButton width="1400" height="360" />
-    <PopButton></PopButton>
+  <div class="flex w-screen h-screen justify-center">
+    <div class="flex flex-col w-3/5 h-screen shadow-2xl p-10">
+      <div class="flex justify-center">
+        <h1 class="font-bold text-3xl">Jtag 下载</h1>
+      </div>
+      <div class="divider"></div>
+      <div class="w-full">
+        <div class="collapse bg-primary border-base-300 border">
+          <input type="checkbox" />
+          <div class="collapse-title font-semibold text-lg text-white">
+            自定义开发板参数
+          </div>
+          <div class="collapse-content bg-primary-content text-sm">
+            <div class="form-control w-full my-3">
+              <label class="label">
+                <span class="label-text text-gray-700">开发板IP地址</span>
+              </label>
+              <label class="input w-full">
+                <img class="h-[1em] opacity-50" src="@/assets/pwd.svg" alt="User img" />
+                <input type="text" class="grow" placeholder="IP地址" v-model="boardAddress" />
+              </label>
+            </div>
+            <div class="form-control w-full my-3">
+              <label class="label">
+                <span class="label-text text-gray-700">开发板端口号</span>
+              </label>
+              <label class="input w-full">
+                <img class="h-[1em] opacity-50" src="@/assets/pwd.svg" alt="User img" />
+                <input type="text" class="grow" placeholder="端口号" v-model="boardPort" />
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="divider"></div>
+      <UploadCard :upload-event="uploadBitstream" :download-event="downloadBitstream">
+      </UploadCard>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import PopButton from "@/components/PopButton.vue";
-import MechanicalButton from "@/components/equipments/MechanicalButton.vue";
-import Switch from "@/components/equipments/Switch.vue";
+import { JtagClient, type FileParameter } from "@/APIClient";
+import UploadCard from "@/components/UploadCard.vue";
+import { useDialogStore } from "@/stores/dialog";
+import { toNumber } from "lodash";
+import { ref } from "vue";
+
+const jtagController = new JtagClient();
+const dialog = useDialogStore();
+
+// Models with default values
+const boardAddress = ref("127.0.0.1"); // 默认IP地址
+const boardPort = ref("1234"); // 默认端口号
+
+async function uploadBitstream(event: Event, bitstream: File) {
+  if (boardAddress.value.length == 0) {
+    dialog.error("开发板地址空缺");
+    return;
+  }
+  if (boardPort.value.length == 0) {
+    dialog.error("开发板端口空缺");
+    return;
+  }
+
+  const fileParam: FileParameter = {
+    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.length == 0) {
+    dialog.error("开发板地址空缺");
+    return;
+  }
+  if (boardPort.value.length == 0) {
+    dialog.error("开发板端口空缺");
+    return;
+  }
+
+  try {
+    const resp = await jtagController.downloadBitstream(
+      boardAddress.value,
+      toNumber(boardPort.value),
+    );
+    return resp;
+  } catch (e) {
+    dialog.error("上传错误");
+    console.error(e);
+  }
+}
 </script>
 
 <style scoped lang="postcss">
 @import "../assets/main.css";
-</style>
+</style>