feat: 修改示波器外观

src/components/Oscilloscope/OscilloscopeManager.ts

@@ -26,7 +26,7 @@ const DEFAULT_CONFIG: OscilloscopeFullConfig = new OscilloscopeFullConfig({
   triggerLevel: 128,
   triggerRisingEdge: true,
   horizontalShift: 0,
-  decimationRate: 0,
+  decimationRate: 50,
   autoRefreshRAM: false,
 });
 
@@ -137,6 +137,7 @@ const [useProvideOscilloscope, useOscilloscopeState] = createInjectionState(() =
     if (refreshIntervalId !== undefined) {
       clearInterval(refreshIntervalId);
       refreshIntervalId = undefined;
+      isCapturing.value = false;
     }
   };
 
@@ -161,7 +162,6 @@ const [useProvideOscilloscope, useOscilloscopeState] = createInjectionState(() =
       isCapturing.value = false;
       stopAutoRefresh();
     } finally {
-      isCapturing.value = false;
       release();
     }
   };
@@ -181,6 +181,7 @@ const [useProvideOscilloscope, useOscilloscopeState] = createInjectionState(() =
       alert.info("捕获已停止", 2000);
     } catch (error) {
       alert.error("停止捕获失败", 3000);
+      isCapturing.value = true;
     } finally {
       release();
     }
@@ -226,7 +227,7 @@ const [useProvideOscilloscope, useOscilloscopeState] = createInjectionState(() =
     try {
       const ok = await client.refreshRAM();
       if (ok) {
-        alert.success("RAM已刷新", 2000);
+        // alert.success("RAM已刷新", 2000);
       } else {
         throw new Error();
       }

src/views/Project/Oscilloscope.vue

@@ -3,9 +3,16 @@
     <!-- 波形展示 -->
     <div class="card bg-base-200 shadow-xl mx-5">
       <div class="card-body">
-        <h2 class="card-title">
+        <h2 class="card-title flex flex-row justify-between">
-          <Activity class="w-5 h-5" />
+          <div class="flex items-center gap-2">
-          波形显示
+            <Activity class="w-5 h-5" />
+            波形显示
+          </div>
+          <div>
+            <button class="btn btn-warning" @click="osc.stopCapture" :disabled="!osc.isCapturing.value">
+              停止捕获
+            </button>
+          </div>
         </h2>
         <OscilloscopeWaveformDisplay />
       </div>
@@ -16,122 +23,73 @@
       <div class="card-body">
         <h2 class="card-title">示波器配置</h2>
         <form class="flex flex-col gap-2" @submit.prevent="applyConfiguration">
-          <div class="flex gap-4">
+          <div class="flex flex-row items-center justify-between gap-4">
             <label>
-              触发电平:
+              边沿触发:
-              <input
+              <select v-model="osc.config.triggerRisingEdge" class="select select-bordered w-24">
-                type="number"
-                v-model="osc.config.triggerLevel"
-                min="0"
-                max="255"
-                class="input input-bordered w-24"
-              />
-            </label>
-            <label>
-              边沿:
-              <select
-                v-model="osc.config.triggerRisingEdge"
-                class="select select-bordered w-24"
-              >
                 <option :value="true">上升沿</option>
                 <option :value="false">下降沿</option>
               </select>
             </label>
+            <label>
+              触发电平:
+              <div class="flex items-center gap-2">
+                <input type="range" min="0" max="255" step="1" v-model="osc.config.triggerLevel"
+                  class="range range-sm w-50" />
+                <input type="number" v-model="osc.config.triggerLevel" min="0" max="255"
+                  class="input input-bordered w-24" />
+              </div>
+            </label>
             <label>
               水平偏移:
-              <input
+              <div class="flex items-center gap-2">
-                type="number"
+                <input type="range" min="0" max="1000" step="1" v-model="osc.config.horizontalShift"
-                v-model="osc.config.horizontalShift"
+                  class="range range-sm w-50" />
-                class="input input-bordered w-24"
+                <input type="number" v-model="osc.config.horizontalShift" min="0" max="1000"
-              />
+                  class="input input-bordered w-24" />
+              </div>
             </label>
             <label>
               抽取率:
-              <input
+              <div class="flex items-center gap-2">
-                type="number"
+                <input type="range" min="0" max="100" step="1" v-model="osc.config.decimationRate"
-                v-model="osc.config.decimationRate"
+                  class="range range-sm w-50" />
-                min="0"
+                <input type="number" v-model="osc.config.decimationRate" min="0" max="100"
-                class="input input-bordered w-24"
+                  class="input input-bordered w-24" />
-              />
+              </div>
-            </label>
-            <label>
-              自动刷新RAM:
-              <input
-                type="checkbox"
-                v-model="osc.config.autoRefreshRAM"
-                class="checkbox"
-              />
             </label>
           </div>
-          <div class="flex gap-2 mt-2">
+          <div class="flex gap-4">
-            <button
+          </div>
-              class="btn btn-primary"
+          <div class="flex items-center justify-between gap-2 mt-2">
-              type="submit"
+            <label>
-              :disabled="osc.isOperationInProgress.value"
+              刷新间隔(ms):
-            >
+              <div class="flex items-center gap-2">
-              应用配置
+                <input type="range" min="100" max="3000" step="100" v-model="osc.refreshIntervalMs.value"
-            </button>
+                  class="range range-sm w-50" />
-            <button
+                <input type="number" min="100" max="3000" step="100" v-model="osc.refreshIntervalMs.value"
-              class="btn btn-secondary"
+                  class="input input-bordered w-24" />
-              type="button"
+              </div>
-              @click="osc.resetConfiguration"
+            </label>
-              :disabled="osc.isOperationInProgress.value"
+            <div class="flex items-center gap-2">
-            >
+              <button class="btn btn-primary" type="submit" :disabled="osc.isOperationInProgress.value">
-              重置
+                应用配置
-            </button>
+              </button>
+              <button class="btn btn-secondary" type="button" @click="osc.resetConfiguration"
+                :disabled="osc.isOperationInProgress.value">
+                重置
+              </button>
+              <button class="btn btn-outline" @click="osc.refreshRAM" :disabled="osc.isOperationInProgress.value">
+                刷新RAM
+              </button>
+              <!-- <button class="btn btn-accent" @click="osc.generateTestData" :disabled="osc.isOperationInProgress.value">
+              生成测试数据
+            </button> -->
+            </div>
           </div>
         </form>
       </div>
     </div>
-
-    <!-- 捕获控制 -->
-    <div class="card bg-base-200 shadow-xl mx-5">
-      <div class="card-body flex gap-2">
-        <h2 class="card-title">捕获控制</h2>
-        <button
-          class="btn btn-success"
-          @click="osc.startCapture"
-          :disabled="osc.isOperationInProgress.value"
-        >
-          开始捕获
-        </button>
-        <button
-          class="btn btn-warning"
-          @click="osc.stopCapture"
-          :disabled="!osc.isCapturing.value"
-        >
-          停止捕获
-        </button>
-        <button
-          class="btn btn-info"
-          @click="osc.getOscilloscopeData"
-          :disabled="osc.isOperationInProgress.value"
-        >
-          获取数据
-        </button>
-        <button
-          class="btn btn-accent"
-          @click="osc.generateTestData"
-          :disabled="osc.isOperationInProgress.value"
-        >
-          生成测试数据
-        </button>
-      </div>
-    </div>
-
-    <!-- RAM刷新 -->
-    <div class="card bg-base-200 shadow-xl mx-5">
-      <div class="card-body flex gap-2">
-        <h2 class="card-title">RAM 操作</h2>
-        <button
-          class="btn btn-outline"
-          @click="osc.refreshRAM"
-          :disabled="osc.isOperationInProgress.value"
-        >
-          刷新RAM
-        </button>
-      </div>
-    </div>
   </div>
 </template>