feat: 完善示波器前端

src/components/Oscilloscope/OscilloscopeWaveformDisplay.vue

@@ -1,11 +1,40 @@
 <template>
-  <div class="w-full h-100">
+  <div class="w-full h-100 flex flex-col">
+    <!-- 原有内容 -->
     <v-chart v-if="hasData" class="w-full h-full" :option="option" autoresize />
     <div
       v-else
-      class="w-full h-full flex items-center justify-center text-gray-500"
+      class="w-full h-full flex flex-col gap-4 items-center justify-center text-gray-500"
     >
-      暂无数据
+      <span> 暂无数据 </span>
+      <!-- 采集控制按钮 -->
+      <div class="flex justify-center items-center mb-2">
+        <button
+          class="group relative px-8 py-3 bg-gradient-to-r text-white font-medium rounded-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200 ease-in-out focus:outline-none focus:ring-4 active:scale-95"
+          :class="{
+            'from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 focus:ring-blue-300':
+              !oscManager.isCapturing.value,
+            'from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 focus:ring-red-300':
+              oscManager.isCapturing.value,
+          }"
+          @click="
+            oscManager.isCapturing.value
+              ? oscManager.stopCapture()
+              : oscManager.startCapture()
+          "
+        >
+          <span class="flex items-center gap-2">
+            <template v-if="oscManager.isCapturing.value">
+              <Square class="w-5 h-5" />
+              停止采集
+            </template>
+            <template v-else>
+              <Play class="w-5 h-5" />
+              开始采集
+            </template>
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </template>
@@ -37,6 +66,7 @@ import type {
   GridComponentOption,
 } from "echarts/components";
 import { useRequiredInjection } from "@/utils/Common";
+import { Play, Square } from "lucide-vue-next";
 
 use([
   TooltipComponent,
@@ -58,7 +88,9 @@ type EChartsOption = ComposeOption<
 >;
 
 // 使用 manager 获取 oscilloscope 数据
-const { oscData } = useRequiredInjection(useOscilloscopeState);
+const oscManager = useRequiredInjection(useOscilloscopeState);
+
+const oscData = computed(() => oscManager.oscData.value);
 
 const hasData = computed(() => {
   return (
@@ -66,11 +98,9 @@ const hasData = computed(() => {
     oscData.value.x &&
     oscData.value.y &&
     oscData.value.x.length > 0 &&
-    (
-      Array.isArray(oscData.value.y[0])
-        ? oscData.value.y.some((channel: any) => channel.length > 0)
-        : oscData.value.y.length > 0
-    )
+    (Array.isArray(oscData.value.y[0])
+      ? oscData.value.y.some((channel: any) => channel.length > 0)
+      : oscData.value.y.length > 0)
   );
 });