From 6edb1fe222c8e3bc49c1c3834cd787e1e1d9599b Mon Sep 17 00:00:00 2001
From: keven1024 <keven@fudaoyuan.icu>
Date: Sun, 26 Apr 2026 22:05:47 +0800
Subject: [PATCH] feat(front): enhance InputField component with validation
 support and error messaging

---
 front/components/Field/InputField.vue | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/front/components/Field/InputField.vue b/front/components/Field/InputField.vue
index d34ccc1..a250c4c 100644
--- a/front/components/Field/InputField.vue
+++ b/front/components/Field/InputField.vue
@@ -1,16 +1,21 @@
-<template>
-    <Field :name="props.name" v-slot="{ field }">
-        <div class="flex flex-col gap-2">
-            <Label v-if="props.label">{{ props.label }}</Label>
-            <Input v-bind="{ ...field, ...$attrs }" />
-        </div>
-    </Field>
-</template>
 <script setup lang="ts">
 import { Label } from '@/components/ui/label'
 import { Input } from '@/components/ui/input'
+import type { RuleExpression } from 'vee-validate'
+
 const props = defineProps<{
     name: string
     label?: string
+    rules?: RuleExpression<string>
 }>()
+
+const { value, errorMessage } = useField<string>(props.name, props.rules)
 </script>
+
+<template>
+    <div class="flex flex-col gap-2">
+        <Label v-if="props.label">{{ props.label }}</Label>
+        <Input v-model="value" :aria-invalid="!!errorMessage || undefined" v-bind="$attrs" />
+        <p v-if="errorMessage" class="text-sm text-destructive">{{ errorMessage }}</p>
+    </div>
+</template>