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

formkit.config.ts

@@ -7,6 +7,7 @@ import { createThemePlugin } from '@formkit/themes'
 import { createValidationPlugin } from '@formkit/validation'
 import { /* defaultConfig, */ bindings } from '@formkit/vue'
 import { rootClasses } from "./formkit.theme"
+import { createAutoAnimatePlugin } from '@formkit/addons'
 
 const library = createLibraryPlugin({ text, form, submit, group, checkbox, range, list, number })
 const validation = createValidationPlugin(defaultRules)
@@ -54,7 +55,27 @@ function addAsteriskPlugin(node: FormKitNode) {
   })
 }
 
+
 export default {
-  plugins: [library, themePlugin, bindings, i18n, validation, addAsteriskPlugin,],
+  plugins: [
+    library, themePlugin, bindings, i18n, validation, addAsteriskPlugin,
+
+    // https://auto-animate.formkit.com/#usage
+    // https://github.com/formkit/auto-animate/
+    // https://github.com/formkit/formkit/blob/46d64d05c1b37875fc6227853f2bcfa987550c91/packages/addons/src/plugins/autoAnimatePlugin.ts
+    createAutoAnimatePlugin(
+      {
+        duration: 250,
+        easing: 'ease-in-out',
+      },
+      // {
+      //   /* optional animation targets object */
+      //   // default:
+      //   global: ['outer', 'inner'],
+      //   form: ['form'],
+      //   repeater: ['items'],
+      // }
+    )
+  ],
   config: { rootClasses },
 } satisfies FormKitOptions