fix: mother board reactive problem

src/components/equipments/MotherBoard.vue

@@ -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>