feat: 移除 postcss-prefix-selector 依赖，更新样式以支持深色模式，优化 TutorialForm 和 ZodForm 组件

src/App.vue

@@ -7,13 +7,3 @@ import ZodForm from './zod-form/index.vue'
   <ZodForm />
   <TutorialForm />
 </template>
-
-<style>
-.attributes-group {
-  padding: 1.5rem;
-  border: 1px solid #e5e7eb;
-  border-radius: 0.5rem;
-  margin-bottom: 1rem;
-  background-color: #f9fafb;
-}
-</style>

src/assets/main.css

@@ -4,4 +4,28 @@
 
 body {
   background-color:#f3f4f6;
+  color:#1f2937;
 }
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color:#1a202c;
+    color:#e5e7eb;
+  }
+}
+
+
+.attributes-group {
+  padding: 1.5rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  margin-bottom: 1rem;
+  background-color: #f9fafb;
+}
+
+@media (prefers-color-scheme: dark) {
+  .attributes-group {
+    border-color: #374151;
+    background-color: #1f2937;
+  }
+}

src/tutorial-form/index.vue

@@ -58,11 +58,6 @@ const SCHEMA: FormKitSchemaDefinition = [
   }
 ];
 
-function onChangeName() {
-  const nameNode = getNode('nameNodeId')
-  nameNode?.input('测试')
-}
-
 import autoAnimate from "@formkit/auto-animate"
 onMounted(() => {
   // setTimeout(() => {
@@ -73,9 +68,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="bg-white rounded-xl shadow-xl p-8 mx-auto my-16 max-w-[450px]">
+  <div class="bg-white rounded-xl shadow-xl p-8 mx-auto my-16 max-w-[450px] dark:bg-gray-800 ">
     <h1
-      class="font-bold text-2xl mb-4"
+      class="font-bold text-2xl mb-4 color:gray-800 dark:text-white"
       data-foo="bar"
     >Tutorial Form</h1>
     <FormKit
@@ -116,7 +111,7 @@ onMounted(() => {
             :help="`现在 confirmName 的值是：${attributes?.confirmName}`"
             some-attr="some-attr-value"
           >
-            <template #label="{ classes, attrs, label }">
+            <template #label="{ classes, attrs, label, node: nameNode }">
               <!-- <pre
                 class="font-mono text-sm p-4 bg-slate-100 mb-4">{{ JSON.stringify({ classes, attrs, label }, null, 2) }}</pre> -->
               <label
@@ -126,7 +121,7 @@ onMounted(() => {
               >{{ label }}<button
                   class="ml-2 px-2 py-1 bg-blue-500 text-white rounded"
                   type="button"
-                  @click="onChangeName"
+                  @click="nameNode?.input('测试')"
                 >点击赋值</button>
               </label>
             </template>
@@ -156,7 +151,6 @@ onMounted(() => {
           <FormKit
             type="range"
             name="strength"
-            id="strength"
             label="力量"
             value="5"
             validation="min:2|max:9"
@@ -207,7 +201,7 @@ onMounted(() => {
         class="mb-4"
       />
 
-      <pre class="font-mono text-sm p-4 bg-slate-100 mb-4">{{ value }}</pre>
+      <pre class="font-mono text-sm p-4 bg-slate-100 mb-4 dark:bg-gray-800 ">{{ value }}</pre>
 
     </FormKit>
   </div>
@@ -229,12 +223,4 @@ ul.error-box p {
 }
 </style>
 
-<style>
-.attributes-group {
-  padding: 1.5rem;
-  border: 1px solid #e5e7eb;
-  border-radius: 0.5rem;
-  margin-bottom: 1rem;
-  background-color: #f9fafb;
-}
-</style>
+<style></style>

src/zod-form/index.vue

@@ -6,6 +6,7 @@ import i18next from "i18next";
 import { zodI18nMap } from "zod-i18n-map";
 // Import your language translation files
 import translation from "zod-i18n-map/locales/zh-CN/zod.json";
+import { text } from '@formkit/inputs';
 
 // lng and resources key depend on your locale.
 i18next.init({
@@ -38,8 +39,8 @@ const [zodPlugin, submitHandler] = createZodPlugin(
 </script>
 
 <template>
-  <div class="bg-white rounded-xl shadow-xl p-8 mx-auto my-16 max-w-[450px]">
-    <h1>Validation from Zod schema</h1>
+  <div class="bg-white rounded-xl shadow-xl p-8 mx-auto my-16 max-w-[450px] dark:bg-gray-800 ">
+    <h1 class="text-2xl font-bold mb-4 color:gray-800 dark:text-white">Validation from Zod schema</h1>
     <FormKit
       type="form"
       :plugins="[zodPlugin]"