From b52d4c3a519dffe59e824269082495e432f5a8ba Mon Sep 17 00:00:00 2001
From: keven1024 <keven@fudaoyuan.icu>
Date: Mon, 13 Apr 2026 08:40:24 +0800
Subject: [PATCH] feat(front): add InputGroupField component for dynamic input
 management with add/remove functionality

---
 front/components/Field/InputGroupField.vue | 38 ++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 front/components/Field/InputGroupField.vue

diff --git a/front/components/Field/InputGroupField.vue b/front/components/Field/InputGroupField.vue
new file mode 100644
index 0000000..2d6ece9
--- /dev/null
+++ b/front/components/Field/InputGroupField.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { Label } from '@/components/ui/label'
+import type { RuleExpression } from 'vee-validate'
+const props = defineProps<{
+    name: string
+    label?: string
+    rules?: RuleExpression<string[]>
+}>()
+const { value, setValue } = useField<string[]>(props.name, props?.rules)
+const addInput = ref('')
+</script>
+
+<template>
+    <div class="flex flex-col gap-2">
+        <Label v-if="label">{{ label }}</Label>
+        <div v-for="(item, index) in value" :key="`${index}-${item}`" class="flex flex-row gap-2 items-center">
+            <Input
+                :model-value="item"
+                @update:model-value="(v: string | number) => setValue(value.map((o, i) => (i === index ? String(v) : o)))"
+                v-bind="$attrs"
+            />
+            <Button variant="ghost" size="icon" @click="setValue(value.filter((_, i) => i !== index))"><LucideX class="size-4" /></Button>
+        </div>
+        <div class="flex flex-row gap-2 items-center">
+            <Input v-model="addInput" v-bind="$attrs" />
+            <Button
+                size="icon"
+                @click="
+                    () => {
+                        setValue([...(value || []), addInput])
+                        addInput = ''
+                    }
+                "
+                ><LucidePlus class="size-4"
+            /></Button>
+        </div>
+    </div>
+</template>