feat: 为获取idcode添加动画

src/components/equipments/MotherBoardCaps.vue

@@ -8,28 +8,20 @@
         <p>
           IDCode: 0x{{ jtagIDCode.toString(16).padStart(8, "0").toUpperCase() }}
         </p>
-        <button class="btn btn-circle w-6 h-6" :onclick="getIDCode">
-          <RefreshCcwIcon class="icon" />
+        <button class="btn btn-circle w-6 h-6" :disabled="isGettingIDCode" :onclick="getIDCode">
+          <RefreshCcwIcon class="icon" :class="{ 'animate-spin': isGettingIDCode }" />
         </button>
       </div>
     </div>
     <div class="divider"></div>
-    <UploadCard
-      class="bg-base-200"
-      :upload-event="eqps.jtagUploadBitstream"
-      :download-event="eqps.jtagDownloadBitstream"
-      :bitstream-file="eqps.jtagBitstream"
-      @update:bitstream-file="handleBitstreamChange"
-    >
+    <UploadCard class="bg-base-200" :upload-event="eqps.jtagUploadBitstream"
+      :download-event="eqps.jtagDownloadBitstream" :bitstream-file="eqps.jtagBitstream"
+      @update:bitstream-file="handleBitstreamChange">
     </UploadCard>
     <div class="divider"></div>
     <div class="w-full">
       <legend class="fieldset-legend text-sm mb-0.3">Jtag运行频率</legend>
-      <select
-        class="select w-full"
-        @change="handleSelectJtagSpeed"
-        :value="props.jtagFreq"
-      >
+      <select class="select w-full" @change="handleSelectJtagSpeed" :value="props.jtagFreq">
         <option v-for="option in selectJtagSpeedOptions" :value="option.id">
           {{ option.text }}
         </option>
@@ -38,23 +30,12 @@
     <div class="flex flex-row items-center">
       <fieldset class="fieldset w-70">
         <legend class="fieldset-legend text-sm">边界扫描刷新率 / Hz</legend>
-        <input
-          type="number"
-          class="input validator"
-          required
-          placeholder="Type a number between 1 to 1000"
-          min="1"
-          max="1000"
-          v-model="jtagBoundaryScanFreq"
-          title="Type a number between 1 to 1000"
-        />
+        <input type="number" class="input validator" required placeholder="Type a number between 1 to 1000" min="1"
+          max="1000" v-model="jtagBoundaryScanFreq" title="Type a number between 1 to 1000" />
         <p class="validator-hint">输入一个1 ~ 1000的数</p>
       </fieldset>
-      <button
-        class="btn btn-primary grow mx-4"
-        :class="eqps.enableJtagBoundaryScan ? '' : 'btn-soft'"
-        :onclick="toggleJtagBoundaryScan"
-      >
+      <button class="btn btn-primary grow mx-4" :class="eqps.enableJtagBoundaryScan ? '' : 'btn-soft'"
+        :onclick="toggleJtagBoundaryScan">
         {{ eqps.enableJtagBoundaryScan ? "关闭边界扫描" : "启动边界扫描" }}
       </button>
     </div>
@@ -62,21 +43,12 @@
     <h1 class="font-bold text-center text-2xl">外设</h1>
     <div class="flex flex-row justify-around">
       <div class="flex flex-row">
-        <input
-          type="checkbox"
-          class="checkbox"
-          :checked="eqps.enableMatrixKey"
-          @change="handleMatrixkeyCheckboxChange"
-        />
+        <input type="checkbox" class="checkbox" :checked="eqps.enableMatrixKey"
+          @change="handleMatrixkeyCheckboxChange" />
         <p class="mx-2">启用矩阵键盘</p>
       </div>
       <div class="flex flex-row">
-        <input
-          type="checkbox"
-          class="checkbox"
-          :checked="eqps.enablePower"
-          @change="handlePowerCheckboxChange"
-        />
+        <input type="checkbox" class="checkbox" :checked="eqps.enablePower" @change="handlePowerCheckboxChange" />
         <p class="mx-2">启用电源</p>
       </div>
     </div>
@@ -162,8 +134,11 @@ async function toggleJtagBoundaryScan() {
   eqps.enableJtagBoundaryScan = !eqps.enableJtagBoundaryScan;
 }
 
+const isGettingIDCode = ref(false);
 async function getIDCode(isQuiet: boolean = false) {
+  isGettingIDCode.value = true;
   jtagIDCode.value = await eqps.jtagGetIDCode(isQuiet);
+  isGettingIDCode.value = false;
 }
 </script>
 

src/components/equipments/SevenSegmentDisplay.vue

@@ -93,7 +93,7 @@ const props = withDefaults(defineProps<SevenSegmentDisplayProps>(), {
   size: 1,
   color: "red",
   AFTERGLOW_BUFFER_SIZE: 1, // 默认存储槽大小为100
-  AFTERGLOW_UPDATE_INTERVAL: 1, // 默认更新间隔为2毫秒
+  AFTERGLOW_UPDATE_INTERVAL: 5, // 默认更新间隔为2毫秒
   cathodeType: "common", // 默认为共阴极
   pins: () => [
     { pinId: "a", constraint: "", x: 10, y: 170 }, // a段
@@ -156,13 +156,16 @@ let updateIntervalTimer: number | null = null;
 function isSegmentActive(
   segment: "a" | "b" | "c" | "d" | "e" | "f" | "g" | "dp",
 ): boolean {
-  return segmentStates.value[segment] || afterglowBuffers.value[segment].some(state => state);
+  return (
+    segmentStates.value[segment] ||
+    afterglowBuffers.value[segment].some((state) => state)
+  );
 }
 
 // 更新引脚状态的函数
 function updateSegmentStates() {
   // 先获取COM口状态
-  const comPin = props.pins.find(p => p.pinId === "COM");
+  const comPin = props.pins.find((p) => p.pinId === "COM");
   let comActive = true;
   if (comPin && comPin.constraint) {
     const comState = getConstraintState(comPin.constraint);
@@ -182,7 +185,8 @@ function updateSegmentStates() {
     if (["a", "b", "c", "d", "e", "f", "g", "dp"].includes(pin.pinId)) {
       // 如果constraint为空，则默认为未激活状态
       if (!pin.constraint) {
-        segmentStates.value[pin.pinId as keyof typeof segmentStates.value] = false;
+        segmentStates.value[pin.pinId as keyof typeof segmentStates.value] =
+          false;
         continue;
       }
 
@@ -195,9 +199,10 @@ function updateSegmentStates() {
         // 共阳极: 低电平激活段
         newState = pinState === "low";
       }
-      
+
       // 更新当前状态
-      segmentStates.value[pin.pinId as keyof typeof segmentStates.value] = newState && comActive;
+      segmentStates.value[pin.pinId as keyof typeof segmentStates.value] =
+        newState && comActive;
     }
   }
 }
@@ -207,12 +212,14 @@ function updateAfterglowBuffers() {
   for (const segmentId of ["a", "b", "c", "d", "e", "f", "g", "dp"]) {
     const typedSegmentId = segmentId as keyof typeof segmentStates.value;
     const currentState = segmentStates.value[typedSegmentId];
-    
+
     // 将当前状态添加到存储槽的开头
     afterglowBuffers.value[segmentId].unshift(currentState);
-    
+
     // 如果存储槽超过了最大容量，移除最旧的状态
-    if (afterglowBuffers.value[segmentId].length > props.AFTERGLOW_BUFFER_SIZE) {
+    if (
+      afterglowBuffers.value[segmentId].length > props.AFTERGLOW_BUFFER_SIZE
+    ) {
       afterglowBuffers.value[segmentId].pop();
     }
   }
@@ -221,7 +228,7 @@ function updateAfterglowBuffers() {
 // 开始余晖更新间隔
 function startAfterglowUpdates() {
   if (updateIntervalTimer) return;
-  
+
   updateIntervalTimer = window.setInterval(() => {
     updateSegmentStates();
   }, props.AFTERGLOW_UPDATE_INTERVAL);
@@ -247,9 +254,11 @@ function onConstraintChange(constraint: string, level: string) {
 onMounted(() => {
   // 初始化余晖存储槽
   for (const segmentId of ["a", "b", "c", "d", "e", "f", "g", "dp"]) {
-    afterglowBuffers.value[segmentId] = Array(props.AFTERGLOW_BUFFER_SIZE).fill(false);
+    afterglowBuffers.value[segmentId] = Array(props.AFTERGLOW_BUFFER_SIZE).fill(
+      false,
+    );
   }
-  
+
   updateSegmentStates();
   onConstraintStateChange(onConstraintChange);
   startAfterglowUpdates();

src/stores/equipments.ts

@@ -27,7 +27,6 @@ export const useEquipments = defineStore("equipments", () => {
     1000,
     new Error("JtagClient Mutex Timeout!"),
   );
-  const jtagClient = AuthManager.createAuthenticatedJtagClient();
 
   // Matrix Key
   const matrixKeyStates = reactive(new Array<boolean>(16).fill(false));
@@ -36,7 +35,6 @@ export const useEquipments = defineStore("equipments", () => {
     1000,
     new Error("Matrixkeyclient Mutex Timeout!"),
   );
-  const matrixKeypadClient = AuthManager.createAuthenticatedMatrixKeyClient();
 
   // Power
   const powerClientMutex = withTimeout(
@@ -44,7 +42,6 @@ export const useEquipments = defineStore("equipments", () => {
     1000,
     new Error("Matrixkeyclient Mutex Timeout!"),
   );
-  const powerClient = AuthManager.createAuthenticatedPowerClient();
 
   // Enable Setting
   const enableJtagBoundaryScan = ref(false);
@@ -105,6 +102,7 @@ export const useEquipments = defineStore("equipments", () => {
   async function jtagBoundaryScan() {
     const release = await jtagClientMutex.acquire();
     try {
+      const jtagClient = AuthManager.createAuthenticatedJtagClient();
       const portStates = await jtagClient.boundaryScanLogicalPorts(
         boardAddr.value,
         boardPort.value,
@@ -125,6 +123,7 @@ export const useEquipments = defineStore("equipments", () => {
 
   async function jtagUploadBitstream(bitstream: File): Promise<boolean> {
     try {
+      const jtagClient = AuthManager.createAuthenticatedJtagClient();
       const resp = await jtagClient.uploadBitstream(
         boardAddr.value,
         toFileParameterOrUndefined(bitstream),
@@ -140,6 +139,7 @@ export const useEquipments = defineStore("equipments", () => {
   async function jtagDownloadBitstream(): Promise<boolean> {
     const release = await jtagClientMutex.acquire();
     try {
+      const jtagClient = AuthManager.createAuthenticatedJtagClient();
       const resp = await jtagClient.downloadBitstream(
         boardAddr.value,
         boardPort.value,
@@ -157,6 +157,7 @@ export const useEquipments = defineStore("equipments", () => {
   async function jtagGetIDCode(isQuiet: boolean = false): Promise<number> {
     const release = await jtagClientMutex.acquire();
     try {
+      const jtagClient = AuthManager.createAuthenticatedJtagClient();
       const resp = await jtagClient.getDeviceIDCode(
         boardAddr.value,
         boardPort.value,
@@ -173,6 +174,7 @@ export const useEquipments = defineStore("equipments", () => {
   async function jtagSetSpeed(speed: number): Promise<boolean> {
     const release = await jtagClientMutex.acquire();
     try {
+      const jtagClient = AuthManager.createAuthenticatedJtagClient();
       const resp = await jtagClient.setSpeed(
         boardAddr.value,
         boardPort.value,
@@ -191,6 +193,7 @@ export const useEquipments = defineStore("equipments", () => {
     const release = await matrixKeypadClientMutex.acquire();
     console.log("set Key !!!!!!!!!!!!");
     try {
+      const matrixKeypadClient = AuthManager.createAuthenticatedMatrixKeyClient();
       const resp = await matrixKeypadClient.setMatrixKeyStatus(
         boardAddr.value,
         boardPort.value,
@@ -209,6 +212,7 @@ export const useEquipments = defineStore("equipments", () => {
     const release = await matrixKeypadClientMutex.acquire();
     try {
       if (enable) {
+        const matrixKeypadClient = AuthManager.createAuthenticatedMatrixKeyClient();
         const resp = await matrixKeypadClient.enabelMatrixKey(
           boardAddr.value,
           boardPort.value,
@@ -216,6 +220,7 @@ export const useEquipments = defineStore("equipments", () => {
         enableMatrixKey.value = resp;
         return resp;
       } else {
+        const matrixKeypadClient = AuthManager.createAuthenticatedMatrixKeyClient();
         const resp = await matrixKeypadClient.disableMatrixKey(
           boardAddr.value,
           boardPort.value,
@@ -235,6 +240,7 @@ export const useEquipments = defineStore("equipments", () => {
   async function powerSetOnOff(enable: boolean) {
     const release = await powerClientMutex.acquire();
     try {
+      const powerClient = AuthManager.createAuthenticatedPowerClient();
       const resp = await powerClient.setPowerOnOff(
         boardAddr.value,
         boardPort.value,
@@ -262,7 +268,6 @@ export const useEquipments = defineStore("equipments", () => {
     jtagBitstream,
     jtagBoundaryScanFreq,
     jtagClientMutex,
-    jtagClient,
     jtagUploadBitstream,
     jtagDownloadBitstream,
     jtagGetIDCode,
@@ -272,13 +277,11 @@ export const useEquipments = defineStore("equipments", () => {
     enableMatrixKey,
     matrixKeyStates,
     matrixKeypadClientMutex,
-    matrixKeypadClient,
     matrixKeypadEnable,
     matrixKeypadSetKeyStates,
 
     // Power
     enablePower,
-    powerClient,
     powerClientMutex,
     powerSetOnOff,
   };