feat: 添加自动动画插件，更新 FormKit 配置以支持动态列表，重构样式和组件结构

src/App.vue

@@ -51,7 +51,7 @@ const SCHEMA: FormKitSchemaDefinition = [
         label: 'JSON Schema’ed Input',
         name: 'input',
         validation: 'required',
-        validationLabel: 'input字段',
+        validationLabel: 'validationLabel', // validation message 使用顺序：validationLabel > label > name
         errors: ['显式设置的错误是非阻塞的，这意味着它们不会像验证错误那样阻止表单提交。您可以在表单文档中了解更多有关错误处理的信息。']
       }
     ]
@@ -69,6 +69,7 @@ const SCHEMA: FormKitSchemaDefinition = [
       submit-label="提交 ✨"
     >
       <div class="character-attributes">
+
         <FormKit
           type="group"
           name="attributes"
@@ -146,6 +147,7 @@ const SCHEMA: FormKitSchemaDefinition = [
       <div class="character-attributes">
         <FormKitSchema :schema="SCHEMA" />
       </div>
+
       <Guests />
 
       <FormKit
@@ -162,14 +164,6 @@ const SCHEMA: FormKitSchemaDefinition = [
 </template>
 
 <style scoped>
-.character-attributes {
-  padding: 1.5rem;
-  border: 1px solid #e5e7eb;
-  border-radius: 0.5rem;
-  margin-bottom: 1rem;
-  background-color: #f9fafb;
-}
-
 ul.error-box {
   padding: 0.75rem;
   border: 1px solid #ef4444;
@@ -183,4 +177,14 @@ ul.error-box {
 ul.error-box p {
   font-weight: 500;
 }
+</style>
+
+<style>
+.character-attributes {
+  padding: 1.5rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  margin-bottom: 1rem;
+  background-color: #f9fafb;
+}
 </style>

src/guests.vue

@@ -3,15 +3,18 @@ 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 }"
+  <FormKit
+    type="list"
+    name="guests"
+    label="客人列表"
+    :value="[{}]"
+    dynamic
+    validation="required"
+    #default="{ items, node, value }"
+  >
+    <div
+      class="character-attributes"
+      v-auto-animate
     >
       <FormKitMessages />
       <FormKit
@@ -20,14 +23,15 @@ import { FormKitMessages } from '@formkit/vue'
         :key="item"
         :index="index"
       >
-        <div class="list-group">
+        <div class="list-group-item">
           <FormKit
             type="text"
             name="name"
             label="客人姓名"
             placeholder="客人姓名"
             validation="required"
-          />
+          >
+          </FormKit>
           <FormKit
             type="number"
             name="age"
@@ -42,7 +46,6 @@ import { FormKitMessages } from '@formkit/vue'
           </button>
         </div>
       </FormKit>
-
       <button
         type="button"
         @click="() => node.input(value?.concat({}))"
@@ -51,12 +54,13 @@ import { FormKitMessages } from '@formkit/vue'
         + 添加另一个
       </button>
       <pre wrap>{{ value }}</pre>
-    </FormKit>
-  </div>
+
+    </div>
+  </FormKit>
 </template>
 
 <style scoped>
-.list-group {
+.list-group-item {
   position: relative;
   padding: 10px;
   border: 1px solid grey;
@@ -64,7 +68,7 @@ import { FormKitMessages } from '@formkit/vue'
   margin-bottom: 5px;
 }
 
-.list-group button {
+.list-group-item button {
   position: absolute;
   top: 10px;
   right: 10px;

src/main.ts

@@ -1,8 +1,12 @@
-import { createApp } from 'vue'
+import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
 import { plugin, /* defaultConfig */ } from '@formkit/vue'
-import App from './App.vue'
+import { createApp } from 'vue'
 import formKitConfig from '../formkit.config'
+import App from './App.vue'
 
 const app = createApp(App)
+
+// https://github.dev/formkit/auto-animate/blob/master/docs/src/examples/formkit/ActualFormKit.vue
+app.use(autoAnimatePlugin)
 app.use(plugin, formKitConfig)
 app.mount('#app')