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>