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

src/components/InputField/IpInputField.vue

@@ -0,0 +1,75 @@
+<template>
+  <BaseInputField
+    v-model="value"
+    :label="label"
+    :placeholder="placeholder || '192.168.1.100'"
+    :error="validationError"
+    :icon="icon || Globe"
+    type="text"
+    v-bind="$attrs"
+    @blur="validateOnBlur"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { z } from 'zod'
+import { Globe } from 'lucide-vue-next'
+import BaseInputField from './BaseInputField.vue'
+
+interface Props {
+  modelValue: string
+  label?: string
+  placeholder?: string
+  icon?: any
+  required?: boolean
+  validateOnBlur?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: 'IP 地址',
+  validateOnBlur: true
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const hasBlurred = ref(false)
+
+const value = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+// IP地址验证模式
+const ipSchema = z.string().ip({ 
+  version: 'v4', 
+  message: '请输入有效的IPv4地址' 
+})
+
+const validationError = computed(() => {
+  // 如果是必填且为空
+  if (props.required && !props.modelValue) {
+    return '请输入IP地址'
+  }
+  
+  // 如果有值但格式不正确，并且设置了在失焦时验证且已经失焦过
+  if (props.modelValue && (!props.validateOnBlur || hasBlurred.value)) {
+    const result = ipSchema.safeParse(props.modelValue)
+    return result.success ? '' : result.error.errors[0]?.message || '无效的IP地址'
+  }
+  
+  return ''
+})
+
+const validateOnBlur = () => {
+  if (props.validateOnBlur) {
+    hasBlurred.value = true
+  }
+}
+</script>