style: 重新调整结构

src/views/Project/Oscilloscope.vue

@@ -0,0 +1,184 @@
+<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">
+            <IpInputField
+              v-model="tempConfig.ip"
+              required
+            />
+          </div>
+
+          <div class="grow">
+            <PortInputField
+              v-model="tempConfig.port"
+              required
+            />
+          </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,
+  Save,
+  RotateCcw,
+  Activity,
+} from "lucide-vue-next";
+import { WaveformDisplay, generateTestData } from "@/components/Oscilloscope";
+import { IpInputField, PortInputField } from "@/components/InputField";
+
+// 配置类型定义
+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 isValidConfig = computed(() => {
+  return tempConfig.ip && tempConfig.port && 
+         tempConfig.port >= 1 && tempConfig.port <= 65535 &&
+         /^(\d{1,3}\.){3}\d{1,3}$/.test(tempConfig.ip);
+});
+
+// 检查是否有更改
+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>