feat: 实现简易示波器功能

src/views/OscilloscopeView.vue

@@ -0,0 +1,224 @@
+<template>
+  <div
+    class="min-h-screen bg-base-100 flex flex-col mx-auto p-6 space-y-6 container"
+  >
+    <!-- 设置 -->
+    <div class="card bg-base-200 shadow-xl">
+      <div class="card-body">
+        <h2 class="card-title">
+          <Settings class="w-5 h-5" />
+          示波器配置
+        </h2>
+
+        <div class="flex flex-row justify-around gap-4">
+          <div class="grow">
+            <label class="label">
+              <Globe class="w-4 h-4" />
+              <span class="label-text">IP 地址</span>
+            </label>
+            <div class="input-group">
+              <input
+                type="text"
+                placeholder="192.168.1.100"
+                class="input input-bordered flex-1"
+                v-model="tempConfig.ip"
+                :class="{ 'input-error': ipError }"
+              />
+            </div>
+            <label class="label" v-if="ipError">
+              <span class="label-text-alt text-error">{{ ipError }}</span>
+            </label>
+          </div>
+
+          <div class="grow">
+            <label class="label">
+              <Network class="w-4 h-4" />
+              <span class="label-text">端口</span>
+            </label>
+            <div class="input-group">
+              <input
+                type="number"
+                placeholder="8080"
+                class="input input-bordered flex-1"
+                v-model.number="tempConfig.port"
+                :class="{ 'input-error': portError }"
+              />
+            </div>
+            <label class="label" v-if="portError">
+              <span class="label-text-alt text-error">{{ portError }}</span>
+            </label>
+          </div>
+        </div>
+
+        <div class="card-actions justify-end mt-4">
+          <button
+            class="btn btn-ghost"
+            @click="resetConfig"
+            :disabled="isDefault"
+          >
+            <RotateCcw class="w-4 h-4" />
+            重置
+          </button>
+          <button
+            class="btn btn-primary"
+            @click="saveConfig"
+            :disabled="!isValidConfig || !hasChanges"
+            :class="{ loading: isSaving }"
+          >
+            <Save class="w-4 h-4" v-if="!isSaving" />
+            保存配置
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 波形展示 -->
+    <div class="card bg-base-200 shadow-xl">
+      <div class="card-body">
+        <h2 class="card-title">
+          <Activity class="w-5 h-5" />
+          波形显示
+        </h2>
+        <WaveformDisplay :data="generateTestData()" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, reactive, watch } from "vue";
+import { useStorage } from "@vueuse/core";
+import { z } from "zod";
+import {
+  Settings,
+  Globe,
+  Network,
+  Save,
+  RotateCcw,
+  CheckCircle,
+  Activity,
+} from "lucide-vue-next";
+import { WaveformDisplay, generateTestData } from "@/components/Oscilloscope";
+
+// 配置类型定义
+const configSchema = z.object({
+  ip: z
+    .string()
+    .ip({ version: "v4", message: "请输入有效的IPv4地址" })
+    .min(1, "请输入IP地址"),
+  port: z
+    .number()
+    .int("端口必须是整数")
+    .min(1, "端口必须大于0")
+    .max(65535, "端口必须小于等于65535"),
+});
+
+type OscilloscopeConfig = z.infer<typeof configSchema>;
+
+// 默认配置
+const defaultConfig: OscilloscopeConfig = {
+  ip: "192.168.1.100",
+  port: 8080,
+};
+
+// 使用 VueUse 存储配置
+const config = useStorage<OscilloscopeConfig>(
+  "oscilloscope-config",
+  defaultConfig,
+  localStorage,
+  {
+    serializer: {
+      read: (value: string) => {
+        try {
+          const parsed = JSON.parse(value);
+          const result = configSchema.safeParse(parsed);
+          return result.success ? result.data : defaultConfig;
+        } catch {
+          return defaultConfig;
+        }
+      },
+      write: (value: OscilloscopeConfig) => JSON.stringify(value),
+    },
+  },
+);
+
+// 临时配置（用于编辑）
+const tempConfig = reactive<OscilloscopeConfig>({
+  ip: config.value.ip,
+  port: config.value.port,
+});
+
+// 状态管理
+const isSaving = ref(false);
+
+// 验证错误
+const ipError = computed(() => {
+  if (!tempConfig.ip) return "";
+  const result = z.string().ip({ version: "v4" }).safeParse(tempConfig.ip);
+  return result.success
+    ? ""
+    : result.error.errors[0]?.message || "无效的IP地址";
+});
+
+const portError = computed(() => {
+  if (!tempConfig.port && tempConfig.port !== 0) return "";
+  const result = z.number().int().min(1).max(65535).safeParse(tempConfig.port);
+  return result.success ? "" : result.error.errors[0]?.message || "无效的端口";
+});
+
+// 检查配置是否有效
+const isValidConfig = computed(() => {
+  const result = configSchema.safeParse(tempConfig);
+  return result.success;
+});
+
+// 检查是否有更改
+const hasChanges = computed(() => {
+  return (
+    tempConfig.ip !== config.value.ip || tempConfig.port !== config.value.port
+  );
+});
+
+const isDefault = computed(() => {
+  return (
+    defaultConfig.ip === tempConfig.ip && defaultConfig.port === tempConfig.port
+  );
+});
+
+// 保存配置
+const saveConfig = async () => {
+  if (!isValidConfig.value) return;
+
+  isSaving.value = true;
+
+  try {
+    // 模拟保存延迟
+    await new Promise((resolve) => setTimeout(resolve, 500));
+
+    config.value = {
+      ip: tempConfig.ip,
+      port: tempConfig.port,
+    };
+  } catch (error) {
+    console.error("保存配置失败:", error);
+  } finally {
+    isSaving.value = false;
+  }
+};
+
+// 重置配置
+const resetConfig = () => {
+  tempConfig.ip = defaultConfig.ip;
+  tempConfig.port = defaultConfig.port;
+};
+
+// 监听存储的配置变化，同步到临时配置
+watch(
+  config,
+  (newConfig) => {
+    tempConfig.ip = newConfig.ip;
+    tempConfig.port = newConfig.port;
+  },
+  { deep: true },
+);
+</script>