refactor: 将IP与端口输入框单独抽象成独立文件方便调用

src/views/OscilloscopeView.vue

@@ -12,41 +12,17 @@
 
         <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>
+            <IpInputField
+              v-model="tempConfig.ip"
+              required
+            />
           </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>
+            <PortInputField
+              v-model="tempConfig.port"
+              required
+            />
           </div>
         </div>
 
@@ -91,14 +67,12 @@ 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";
+import { IpInputField, PortInputField } from "@/components/InputField";
 
 // 配置类型定义
 const configSchema = z.object({
@@ -151,25 +125,11 @@ const tempConfig = reactive<OscilloscopeConfig>({
 // 状态管理
 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;
+  return tempConfig.ip && tempConfig.port && 
+         tempConfig.port >= 1 && tempConfig.port <= 65535 &&
+         /^(\d{1,3}\.){3}\d{1,3}$/.test(tempConfig.ip);
 });
 
 // 检查是否有更改