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">
+        <button class="btn btn-circle w-6 h-6" :disabled="isGettingIDCode" :onclick="getIDCode">
-          <RefreshCcwIcon class="icon" />
+          <RefreshCcwIcon class="icon" :class="{ 'animate-spin': isGettingIDCode }" />
         </button>
       </div>
     </div>
     <div class="divider"></div>
-    <UploadCard
+    <UploadCard class="bg-base-200" :upload-event="eqps.jtagUploadBitstream"
-      class="bg-base-200"
+      :download-event="eqps.jtagDownloadBitstream" :bitstream-file="eqps.jtagBitstream"
-      :upload-event="eqps.jtagUploadBitstream"
+      @update:bitstream-file="handleBitstreamChange">
-      :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
+      <select class="select w-full" @change="handleSelectJtagSpeed" :value="props.jtagFreq">
-        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
+        <input type="number" class="input validator" required placeholder="Type a number between 1 to 1000" min="1"
-          type="number"
+          max="1000" v-model="jtagBoundaryScanFreq" title="Type a number between 1 to 1000" />
-          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
+      <button class="btn btn-primary grow mx-4" :class="eqps.enableJtagBoundaryScan ? '' : 'btn-soft'"
-        class="btn btn-primary grow mx-4"
+        :onclick="toggleJtagBoundaryScan">
-        :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
+        <input type="checkbox" class="checkbox" :checked="eqps.enableMatrixKey"
-          type="checkbox"
+          @change="handleMatrixkeyCheckboxChange" />
-          class="checkbox"
-          :checked="eqps.enableMatrixKey"
-          @change="handleMatrixkeyCheckboxChange"
-        />
         <p class="mx-2">启用矩阵键盘</p>
       </div>
       <div class="flex flex-row">
-        <input
+        <input type="checkbox" class="checkbox" :checked="eqps.enablePower" @change="handlePowerCheckboxChange" />
-          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>