feat: 添加客人列表功能，重构 App.vue 以使用新组件，更新依赖版本

src/App.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { FormKitSchemaDefinition, getNode, type FormKitNode } from '@formkit/core';
-
 import { onMounted } from 'vue';
+import Guests from './guests.vue';
 
 async function submit(...args: any[]) {
   console.debug('submit', `args :>> `, args);
@@ -31,7 +31,12 @@ onMounted(() => {
 const SCHEMA: FormKitSchemaDefinition = [
   {
     $el: 'h1',
-    children: 'JSON Schema Form',
+    children: [
+      {
+        $el: 'span',
+        children: 'JSON Schema Form',
+      },
+    ],
     attrs: {
       class: 'font-bold text-2xl mb-4',
       'data-foo': 'bar',
@@ -141,56 +146,7 @@ const SCHEMA: FormKitSchemaDefinition = [
       <div class="character-attributes">
         <FormKitSchema :schema="SCHEMA" />
       </div>
-
-      <div class="character-attributes">
-        <FormKit
-          type="list"
-          name="guests"
-          :value="[{}]"
-          dynamic
-          #default="{ items, node, value }"
-        >
-          <FormKit
-            type="group"
-            v-for="(item, index) in items"
-            :key="item"
-            :index="index"
-          >
-            <div class="list-group">
-              <FormKit
-                type="text"
-                name="name"
-                label="Guest name"
-                placeholder="Guest name"
-              />
-              <FormKit
-                type="number"
-                name="age"
-                label="Guest age"
-              />
-              <button
-                type="button"
-                @click="() => node.input(value!.filter((_, i) => i !== index))"
-                class="border border-blue-600 text-blue-600 p-3"
-              >
-                - Remove
-              </button>
-            </div>
-
-          </FormKit>
-
-          <button
-            type="button"
-            @click="() => node.input(value!.concat({}))"
-            class="border border-blue-600 text-blue-600 p-3 mb-4"
-          >
-            + Add another
-          </button>
-
-          <pre wrap>{{ value }}</pre>
-        </FormKit>
-      </div>
-
+      <Guests />
 
       <FormKit
         type="checkbox"
@@ -227,18 +183,4 @@ ul.error-box {
 ul.error-box p {
   font-weight: 500;
 }
-
-.list-group {
-  position: relative;
-  padding: 10px;
-  border: 1px solid grey;
-  border-radius: 10px;
-  margin-bottom: 5px;
-}
-
-.list-group button {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-}
 </style>

src/guests.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { FormKitMessages } from '@formkit/vue'
+</script>
+
+<template>
+  <div class="character-attributes">
+    <FormKit
+      type="list"
+      name="guests"
+      label="客人列表"
+      :value="[{}]"
+      dynamic
+      validation="required"
+      #default="{ items, node, value }"
+    >
+      <FormKitMessages />
+      <FormKit
+        type="group"
+        v-for="(item, index) in items"
+        :key="item"
+        :index="index"
+      >
+        <div class="list-group">
+          <FormKit
+            type="text"
+            name="name"
+            label="客人姓名"
+            placeholder="客人姓名"
+            validation="required"
+          />
+          <FormKit
+            type="number"
+            name="age"
+            label="客人年龄"
+          />
+          <button
+            type="button"
+            class="border border-blue-600 text-blue-600 p-3"
+            @click="() => node.input(value?.filter((_, i) => i !== index))"
+          >
+            - 移除
+          </button>
+        </div>
+      </FormKit>
+
+      <button
+        type="button"
+        @click="() => node.input(value?.concat({}))"
+        class="border border-blue-600 text-blue-600 p-3 mb-4"
+      >
+        + 添加另一个
+      </button>
+      <pre wrap>{{ value }}</pre>
+    </FormKit>
+  </div>
+</template>
+
+<style scoped>
+.list-group {
+  position: relative;
+  padding: 10px;
+  border: 1px solid grey;
+  border-radius: 10px;
+  margin-bottom: 5px;
+}
+
+.list-group button {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+</style>