feat: 完善示波器前端

src/views/Project/Oscilloscope.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-base-100 flex flex-col">
+  <div class="bg-base-100 flex flex-col gap-4">
     <!-- 波形展示 -->
     <div class="card bg-base-200 shadow-xl mx-5">
       <div class="card-body">
@@ -10,6 +10,128 @@
         <OscilloscopeWaveformDisplay />
       </div>
     </div>
+
+    <!-- 示波器配置 -->
+    <div class="card bg-base-200 shadow-xl mx-5">
+      <div class="card-body">
+        <h2 class="card-title">示波器配置</h2>
+        <form class="flex flex-col gap-2" @submit.prevent="applyConfiguration">
+          <div class="flex gap-4">
+            <label>
+              触发电平:
+              <input
+                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>
+              水平偏移:
+              <input
+                type="number"
+                v-model="osc.config.horizontalShift"
+                class="input input-bordered w-24"
+              />
+            </label>
+            <label>
+              抽取率:
+              <input
+                type="number"
+                v-model="osc.config.decimationRate"
+                min="0"
+                class="input input-bordered w-24"
+              />
+            </label>
+            <label>
+              自动刷新RAM:
+              <input
+                type="checkbox"
+                v-model="osc.config.autoRefreshRAM"
+                class="checkbox"
+              />
+            </label>
+          </div>
+          <div class="flex gap-2 mt-2">
+            <button
+              class="btn btn-primary"
+              type="submit"
+              :disabled="osc.isOperationInProgress.value"
+            >
+              应用配置
+            </button>
+            <button
+              class="btn btn-secondary"
+              type="button"
+              @click="osc.resetConfiguration"
+              :disabled="osc.isOperationInProgress.value"
+            >
+              重置
+            </button>
+          </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>
 
@@ -17,7 +139,15 @@
 import { Activity } from "lucide-vue-next";
 import { OscilloscopeWaveformDisplay } from "@/components/Oscilloscope";
 import { useEquipments } from "@/stores/equipments";
+import { useOscilloscopeState } from "@/components/Oscilloscope/OscilloscopeManager";
+import { useRequiredInjection } from "@/utils/Common";
 
 // 使用全局设备配置
 const equipments = useEquipments();
+
+// 获取示波器状态和操作
+const osc = useRequiredInjection(useOscilloscopeState);
+
+// 应用配置
+const applyConfiguration = () => osc.applyConfiguration();
 </script>