diff --git a/apps/web-antd/src/adapter/form.ts b/apps/web-antd/src/adapter/form.ts
index b14015a5..c939b726 100644
--- a/apps/web-antd/src/adapter/form.ts
+++ b/apps/web-antd/src/adapter/form.ts
@@ -1,6 +1,7 @@
 import type {
   VbenFormProps as FormProps,
   VbenFormSchema as FormSchema,
+  FormValues,
 } from '@vben/common-ui';
 
 import type { ComponentPropsMap, ComponentType } from './component';
@@ -22,7 +23,7 @@ async function initSetupVbenForm() {
         Upload: 'fileList',
       },
     },
-    defineRules: {
+    rules: {
       // 输入项目必填国际化适配
       required: (value, _params, ctx) => {
         if (value === undefined || value === null || value.length === 0) {
@@ -41,9 +42,18 @@ async function initSetupVbenForm() {
   });
 }
 
-const useVbenForm = useForm<ComponentType, ComponentPropsMap>;
+function useVbenForm<TValues extends FormValues = FormValues>(
+  options: FormProps<ComponentType, ComponentPropsMap, TValues>,
+) {
+  return useForm<TValues, ComponentType, ComponentPropsMap>(options);
+}
 
 export { initSetupVbenForm, useVbenForm, z };
 
-export type VbenFormSchema = FormSchema<ComponentType, ComponentPropsMap>;
-export type VbenFormProps = FormProps<ComponentType, ComponentPropsMap>;
+export type VbenFormSchema<TValues extends FormValues = FormValues> =
+  FormSchema<ComponentType, ComponentPropsMap, TValues>;
+export type VbenFormProps<TValues extends FormValues = FormValues> = FormProps<
+  ComponentType,
+  ComponentPropsMap,
+  TValues
+>;
diff --git a/apps/web-antd/src/views/_core/authentication/register.vue b/apps/web-antd/src/views/_core/authentication/register.vue
index 8c429531..a1175357 100644
--- a/apps/web-antd/src/views/_core/authentication/register.vue
+++ b/apps/web-antd/src/views/_core/authentication/register.vue
@@ -46,7 +46,7 @@ const formSchema = computed((): VbenFormSchema[] => {
         rules(values) {
           const { password } = values;
           return z
-            .string({ required_error: $t('authentication.passwordTip') })
+            .string({ error: $t('authentication.passwordTip') })
             .min(1, { message: $t('authentication.passwordTip') })
             .refine((value) => value === password, {
               message: $t('authentication.confirmPasswordTip'),
diff --git a/apps/web-antd/src/views/_core/profile/password-setting.vue b/apps/web-antd/src/views/_core/profile/password-setting.vue
index e5609c0b..2f3527d4 100644
--- a/apps/web-antd/src/views/_core/profile/password-setting.vue
+++ b/apps/web-antd/src/views/_core/profile/password-setting.vue
@@ -38,7 +38,7 @@ const formSchema = computed((): VbenFormSchema[] => {
         rules(values) {
           const { newPassword } = values;
           return z
-            .string({ required_error: '请再次输入新密码' })
+            .string({ error: '请再次输入新密码' })
             .min(1, { message: '请再次输入新密码' })
             .refine((value) => value === newPassword, {
               message: '两次输入的密码不一致',
diff --git a/apps/web-antdv-next/src/adapter/form.ts b/apps/web-antdv-next/src/adapter/form.ts
index 3d062941..5ff63809 100644
--- a/apps/web-antdv-next/src/adapter/form.ts
+++ b/apps/web-antdv-next/src/adapter/form.ts
@@ -1,6 +1,7 @@
 import type {
   VbenFormProps as FormProps,
   VbenFormSchema as FormSchema,
+  FormValues,
 } from '@vben/common-ui';
 
 import type { ComponentPropsMap, ComponentType } from './component';
@@ -22,7 +23,7 @@ async function initSetupVbenForm() {
         Upload: 'fileList',
       },
     },
-    defineRules: {
+    rules: {
       // 输入项目必填国际化适配
       required: (value, _params, ctx) => {
         if (value === undefined || value === null || value.length === 0) {
@@ -40,9 +41,18 @@ async function initSetupVbenForm() {
     },
   });
 }
-const useVbenForm = useForm<ComponentType, ComponentPropsMap>;
+function useVbenForm<TValues extends FormValues = FormValues>(
+  options: FormProps<ComponentType, ComponentPropsMap, TValues>,
+) {
+  return useForm<TValues, ComponentType, ComponentPropsMap>(options);
+}
 
 export { initSetupVbenForm, useVbenForm, z };
 
-export type VbenFormSchema = FormSchema<ComponentType, ComponentPropsMap>;
-export type VbenFormProps = FormProps<ComponentType, ComponentPropsMap>;
+export type VbenFormSchema<TValues extends FormValues = FormValues> =
+  FormSchema<ComponentType, ComponentPropsMap, TValues>;
+export type VbenFormProps<TValues extends FormValues = FormValues> = FormProps<
+  ComponentType,
+  ComponentPropsMap,
+  TValues
+>;
diff --git a/apps/web-antdv-next/src/views/_core/authentication/register.vue b/apps/web-antdv-next/src/views/_core/authentication/register.vue
index 8c429531..a1175357 100644
--- a/apps/web-antdv-next/src/views/_core/authentication/register.vue
+++ b/apps/web-antdv-next/src/views/_core/authentication/register.vue
@@ -46,7 +46,7 @@ const formSchema = computed((): VbenFormSchema[] => {
         rules(values) {
           const { password } = values;
           return z
-            .string({ required_error: $t('authentication.passwordTip') })
+            .string({ error: $t('authentication.passwordTip') })
             .min(1, { message: $t('authentication.passwordTip') })
             .refine((value) => value === password, {
               message: $t('authentication.confirmPasswordTip'),
diff --git a/apps/web-antdv-next/src/views/_core/profile/password-setting.vue b/apps/web-antdv-next/src/views/_core/profile/password-setting.vue
index adb065a2..a79d083a 100644
--- a/apps/web-antdv-next/src/views/_core/profile/password-setting.vue
+++ b/apps/web-antdv-next/src/views/_core/profile/password-setting.vue
@@ -38,7 +38,7 @@ const formSchema = computed((): VbenFormSchema[] => {
         rules(values) {
           const { newPassword } = values;
           return z
-            .string({ required_error: '请再次输入新密码' })
+            .string({ error: '请再次输入新密码' })
             .min(1, { message: '请再次输入新密码' })
             .refine((value) => value === newPassword, {
               message: '两次输入的密码不一致',
diff --git a/apps/web-ele/src/adapter/form.ts b/apps/web-ele/src/adapter/form.ts
index 0da7d067..8c50f4a2 100644
--- a/apps/web-ele/src/adapter/form.ts
+++ b/apps/web-ele/src/adapter/form.ts
@@ -1,6 +1,7 @@
 import type {
   VbenFormProps as FormProps,
   VbenFormSchema as FormSchema,
+  FormValues,
 } from '@vben/common-ui';
 
 import type { ComponentPropsMap, ComponentType } from './component';
@@ -16,7 +17,7 @@ async function initSetupVbenForm() {
         CheckboxGroup: 'model-value',
       },
     },
-    defineRules: {
+    rules: {
       required: (value, _params, ctx) => {
         if (value === undefined || value === null || value.length === 0) {
           return $t('ui.formRules.required', [ctx.label]);
@@ -33,9 +34,18 @@ async function initSetupVbenForm() {
   });
 }
 
-const useVbenForm = useForm<ComponentType, ComponentPropsMap>;
+function useVbenForm<TValues extends FormValues = FormValues>(
+  options: FormProps<ComponentType, ComponentPropsMap, TValues>,
+) {
+  return useForm<TValues, ComponentType, ComponentPropsMap>(options);
+}
 
 export { initSetupVbenForm, useVbenForm, z };
 
-export type VbenFormSchema = FormSchema<ComponentType, ComponentPropsMap>;
-export type VbenFormProps = FormProps<ComponentType, ComponentPropsMap>;
+export type VbenFormSchema<TValues extends FormValues = FormValues> =
+  FormSchema<ComponentType, ComponentPropsMap, TValues>;
+export type VbenFormProps<TValues extends FormValues = FormValues> = FormProps<
+  ComponentType,
+  ComponentPropsMap,
+  TValues
+>;
diff --git a/apps/web-ele/src/views/_core/authentication/register.vue b/apps/web-ele/src/views/_core/authentication/register.vue
index 8c429531..a1175357 100644
--- a/apps/web-ele/src/views/_core/authentication/register.vue
+++ b/apps/web-ele/src/views/_core/authentication/register.vue
@@ -46,7 +46,7 @@ const formSchema = computed((): VbenFormSchema[] => {
         rules(values) {
           const { password } = values;
           return z
-            .string({ required_error: $t('authentication.passwordTip') })
+            .string({ error: $t('authentication.passwordTip') })
             .min(1, { message: $t('authentication.passwordTip') })
             .refine((value) => value === password, {
               message: $t('authentication.confirmPasswordTip'),
diff --git a/apps/web-ele/src/views/_core/profile/password-setting.vue b/apps/web-ele/src/views/_core/profile/password-setting.vue
index a0e8c7eb..61b0ebfc 100644
--- a/apps/web-ele/src/views/_core/profile/password-setting.vue
+++ b/apps/web-ele/src/views/_core/profile/password-setting.vue
@@ -38,7 +38,7 @@ const formSchema = computed((): VbenFormSchema[] => {
         rules(values) {
           const { newPassword } = values;
           return z
-            .string({ required_error: '请再次输入新密码' })
+            .string({ error: '请再次输入新密码' })
             .min(1, { message: '请再次输入新密码' })
             .refine((value) => value === newPassword, {
               message: '两次输入的密码不一致',
diff --git a/apps/web-naive/src/adapter/form.ts b/apps/web-naive/src/adapter/form.ts
index 1e58a1af..d2b97322 100644
--- a/apps/web-naive/src/adapter/form.ts
+++ b/apps/web-naive/src/adapter/form.ts
@@ -1,6 +1,7 @@
 import type {
   VbenFormProps as FormProps,
   VbenFormSchema as FormSchema,
+  FormValues,
 } from '@vben/common-ui';
 
 import type { ComponentPropsMap, ComponentType } from './component';
@@ -20,7 +21,7 @@ async function initSetupVbenForm() {
         Upload: 'fileList',
       },
     },
-    defineRules: {
+    rules: {
       required: (value, _params, ctx) => {
         if (value === undefined || value === null || value.length === 0) {
           return $t('ui.formRules.required', [ctx.label]);
@@ -37,9 +38,18 @@ async function initSetupVbenForm() {
   });
 }
 
-const useVbenForm = useForm<ComponentType, ComponentPropsMap>;
+function useVbenForm<TValues extends FormValues = FormValues>(
+  options: FormProps<ComponentType, ComponentPropsMap, TValues>,
+) {
+  return useForm<TValues, ComponentType, ComponentPropsMap>(options);
+}
 
 export { initSetupVbenForm, useVbenForm, z };
 
-export type VbenFormSchema = FormSchema<ComponentType, ComponentPropsMap>;
-export type VbenFormProps = FormProps<ComponentType, ComponentPropsMap>;
+export type VbenFormSchema<TValues extends FormValues = FormValues> =
+  FormSchema<ComponentType, ComponentPropsMap, TValues>;
+export type VbenFormProps<TValues extends FormValues = FormValues> = FormProps<
+  ComponentType,
+  ComponentPropsMap,
+  TValues
+>;
diff --git a/apps/web-naive/src/views/_core/authentication/register.vue b/apps/web-naive/src/views/_core/authentication/register.vue
index fac32700..ed71f13b 100644
--- a/apps/web-naive/src/views/_core/authentication/register.vue
+++ b/apps/web-naive/src/views/_core/authentication/register.vue
@@ -46,7 +46,7 @@ const formSchema = computed((): VbenFormSchema[] => {
         rules(values) {
           const { password } = values;
           return z
-            .string({ required_error: $t('authentication.passwordTip') })
+            .string({ error: $t('authentication.passwordTip') })
             .min(1, { message: $t('authentication.passwordTip') })
             .refine((value) => value === password, {
               message: $t('authentication.confirmPasswordTip'),
diff --git a/apps/web-naive/src/views/_core/profile/password-setting.vue b/apps/web-naive/src/views/_core/profile/password-setting.vue
index 9857dc89..bacc0c8b 100644
--- a/apps/web-naive/src/views/_core/profile/password-setting.vue
+++ b/apps/web-naive/src/views/_core/profile/password-setting.vue
@@ -38,7 +38,7 @@ const formSchema = computed((): VbenFormSchema[] => {
         rules(values) {
           const { newPassword } = values;
           return z
-            .string({ required_error: '请再次输入新密码' })
+            .string({ error: '请再次输入新密码' })
             .min(1, { message: '请再次输入新密码' })
             .refine((value) => value === newPassword, {
               message: '两次输入的密码不一致',
diff --git a/apps/web-naive/src/views/demos/form/modal.vue b/apps/web-naive/src/views/demos/form/modal.vue
index 52e23542..85c7a7b1 100644
--- a/apps/web-naive/src/views/demos/form/modal.vue
+++ b/apps/web-naive/src/views/demos/form/modal.vue
@@ -50,7 +50,7 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.close();
   },
   onConfirm: async () => {
-    await formApi.validateAndSubmitForm();
+    await formApi.validateAndSubmit();
     // modalApi.close();
   },
   onOpenChange(isOpen: boolean) {
diff --git a/apps/web-naive/src/views/demos/naive/array-form/index.vue b/apps/web-naive/src/views/demos/naive/array-form/index.vue
index f08551e9..b715f880 100644
--- a/apps/web-naive/src/views/demos/naive/array-form/index.vue
+++ b/apps/web-naive/src/views/demos/naive/array-form/index.vue
@@ -24,7 +24,7 @@ const [Form, formApi] = useVbenForm({
       component: 'VbenFormFieldArray',
       fieldName: 'members',
       label: '项目成员',
-      // 初始化为空数组，供内部 useFieldArray 使用
+      // 初始化为空数组，供数组编辑器使用
       defaultValue: [],
       componentProps: {
         min: 1,
@@ -113,9 +113,7 @@ async function getFormValues() {
       <template #header-extra>
         <NButton class="mr-2" @click="setFormValues">设置表单值</NButton>
         <NButton class="mr-2" @click="getFormValues">获取表单值</NButton>
-        <NButton type="primary" @click="formApi.submitForm()">
-          提交校验
-        </NButton>
+        <NButton type="primary" @click="formApi.submit()"> 提交校验 </NButton>
       </template>
       <Form />
     </NCard>
diff --git a/apps/web-tdesign/src/adapter/form.ts b/apps/web-tdesign/src/adapter/form.ts
index 5c1e2087..37002dff 100644
--- a/apps/web-tdesign/src/adapter/form.ts
+++ b/apps/web-tdesign/src/adapter/form.ts
@@ -1,6 +1,7 @@
 import type {
   VbenFormProps as FormProps,
   VbenFormSchema as FormSchema,
+  FormValues,
 } from '@vben/common-ui';
 
 import type { ComponentPropsMap, ComponentType } from './component';
@@ -22,7 +23,7 @@ async function initSetupVbenForm() {
         Upload: 'fileList',
       },
     },
-    defineRules: {
+    rules: {
       // 输入项目必填国际化适配
       required: (value, _params, ctx) => {
         if (value === undefined || value === null || value.length === 0) {
@@ -41,9 +42,18 @@ async function initSetupVbenForm() {
   });
 }
 
-const useVbenForm = useForm<ComponentType, ComponentPropsMap>;
+function useVbenForm<TValues extends FormValues = FormValues>(
+  options: FormProps<ComponentType, ComponentPropsMap, TValues>,
+) {
+  return useForm<TValues, ComponentType, ComponentPropsMap>(options);
+}
 
 export { initSetupVbenForm, useVbenForm, z };
 
-export type VbenFormSchema = FormSchema<ComponentType, ComponentPropsMap>;
-export type VbenFormProps = FormProps<ComponentType, ComponentPropsMap>;
+export type VbenFormSchema<TValues extends FormValues = FormValues> =
+  FormSchema<ComponentType, ComponentPropsMap, TValues>;
+export type VbenFormProps<TValues extends FormValues = FormValues> = FormProps<
+  ComponentType,
+  ComponentPropsMap,
+  TValues
+>;
diff --git a/apps/web-tdesign/src/views/_core/authentication/register.vue b/apps/web-tdesign/src/views/_core/authentication/register.vue
index 4489bcd1..6805d558 100644
--- a/apps/web-tdesign/src/views/_core/authentication/register.vue
+++ b/apps/web-tdesign/src/views/_core/authentication/register.vue
@@ -46,7 +46,7 @@ const formSchema = computed((): VbenFormSchema[] => {
         rules(values) {
           const { password } = values;
           return z
-            .string({ required_error: $t('authentication.passwordTip') })
+            .string({ error: $t('authentication.passwordTip') })
             .min(1, { message: $t('authentication.passwordTip') })
             .refine((value) => value === password, {
               message: $t('authentication.confirmPasswordTip'),
diff --git a/apps/web-tdesign/src/views/_core/profile/password-setting.vue b/apps/web-tdesign/src/views/_core/profile/password-setting.vue
index 1db11945..eda3f3d4 100644
--- a/apps/web-tdesign/src/views/_core/profile/password-setting.vue
+++ b/apps/web-tdesign/src/views/_core/profile/password-setting.vue
@@ -38,7 +38,7 @@ const formSchema = computed((): VbenFormSchema[] => {
         rules(values) {
           const { newPassword } = values;
           return z
-            .string({ required_error: '请再次输入新密码' })
+            .string({ error: '请再次输入新密码' })
             .min(1, { message: '请再次输入新密码' })
             .refine((value) => value === newPassword, {
               message: '两次输入的密码不一致',
diff --git a/docs/src/_env/adapter/form.ts b/docs/src/_env/adapter/form.ts
index 7ebd4aca..a72db5cc 100644
--- a/docs/src/_env/adapter/form.ts
+++ b/docs/src/_env/adapter/form.ts
@@ -1,6 +1,7 @@
 import type {
+  VbenFormProps as FormProps,
   VbenFormSchema as FormSchema,
-  VbenFormProps,
+  FormValues,
 } from '@vben/common-ui';
 
 import type { ComponentType } from './component';
@@ -24,7 +25,7 @@ setupVbenForm<ComponentType>({
       Upload: 'fileList',
     },
   },
-  defineRules: {
+  rules: {
     required: (value, _params, ctx) => {
       if (value === undefined || value === null || value.length === 0) {
         return $t('ui.formRules.required', [ctx.label]);
@@ -40,9 +41,18 @@ setupVbenForm<ComponentType>({
   },
 });
 
-const useVbenForm = useForm<ComponentType>;
+function useVbenForm<TValues extends FormValues = FormValues>(
+  options: FormProps<ComponentType, Record<never, never>, TValues>,
+) {
+  return useForm<TValues, ComponentType, Record<never, never>>(options);
+}
 
 export { useVbenForm, z };
 
-export type VbenFormSchema = FormSchema<ComponentType>;
-export type { VbenFormProps };
+export type VbenFormSchema<TValues extends FormValues = FormValues> =
+  FormSchema<ComponentType, Record<never, never>, TValues>;
+export type VbenFormProps<TValues extends FormValues = FormValues> = FormProps<
+  ComponentType,
+  Record<never, never>,
+  TValues
+>;
diff --git a/docs/src/components/common-ui/vben-form.md b/docs/src/components/common-ui/vben-form.md
index f99c543c..c9bfa382 100644
--- a/docs/src/components/common-ui/vben-form.md
+++ b/docs/src/components/common-ui/vben-form.md
@@ -16,7 +16,9 @@ outline: deep
 
 ## 适配器
 
-表单底层使用 [vee-validate](https://vee-validate.logaretm.com/v4/) 进行表单验证，所以你可以使用 `vee-validate` 的所有功能。对于不同的 UI 框架，我们提供了适配器，以便更好的适配不同的 UI 框架。
+表单内部使用 [TanStack Form](https://tanstack.com/form/latest/docs/framework/vue/overview) 管理状态与校验生命周期，并使用 [Zod 4](https://zod.dev/v4) 描述 schema。业务侧仍通过 `useVbenForm`、`FormApi` 和组件适配器使用表单，不应直接依赖底层 TanStack 实例。
+
+从 Zod 3 或旧表单引擎升级时，请先阅读 [Zod 4 与 TanStack Form 迁移指南](/guide/in-depth/zod-v4-form-migration)。
 
 ### 适配器说明
 
@@ -26,8 +28,9 @@ outline: deep
 
 ```ts
 import type {
+  FormValues,
+  VbenFormProps as FormProps,
   VbenFormSchema as FormSchema,
-  VbenFormProps,
 } from '@vben/common-ui';
 
 import type { ComponentType } from './component';
@@ -42,6 +45,8 @@ setupVbenForm<ComponentType>({
   config: {
     // ant design vue组件库默认都是 v-model:value
     baseModelPropName: 'value',
+    // 仅当组件不发送 update:*、只发送 change 时启用
+    changeEventFallback: false,
     // 一些组件库空值为 null，重置表单时需要和实际组件行为保持一致
     emptyStateValue: null,
     // 一些组件是 v-model:checked 或者 v-model:fileList
@@ -52,7 +57,7 @@ setupVbenForm<ComponentType>({
       Upload: 'fileList',
     },
   },
-  defineRules: {
+  rules: {
     // 输入项目必填国际化适配
     required: (value, _params, ctx) => {
       if (value === undefined || value === null || value.length === 0) {
@@ -70,11 +75,20 @@ setupVbenForm<ComponentType>({
   },
 });
 
-const useVbenForm = useForm<ComponentType>;
+function useVbenForm<TValues extends FormValues = FormValues>(
+  options: FormProps<ComponentType, Record<never, never>, TValues>,
+) {
+  return useForm<TValues, ComponentType, Record<never, never>>(options);
+}
 
 export { useVbenForm, z };
-export type VbenFormSchema = FormSchema<ComponentType>;
-export type { VbenFormProps };
+export type VbenFormSchema<TValues extends FormValues = FormValues> =
+  FormSchema<ComponentType, Record<never, never>, TValues>;
+export type VbenFormProps<TValues extends FormValues = FormValues> = FormProps<
+  ComponentType,
+  Record<never, never>,
+  TValues
+>;
 ```
 
 :::
@@ -252,6 +266,8 @@ export { initComponentAdapter };
 
 _注意_ 需要指定 `dependencies` 的 `triggerFields` 属性，设置由谁的改动来触发，以便表单组件能够正确的联动。
 
+新代码推荐使用 `dependencies.resolve(context)` 一次返回完整动态状态。它只在 `triggerFields` 变化时执行，并原子更新 `if`、`show`、`disabled`、`required`、`rules`、`componentProps`、`help` 和 `renderComponentContent`，避免多个异步回调产生中间状态。原有多回调结构继续兼容。
+
 <DemoPreview dir="demos/vben-form/dynamic" />
 
 ## 自定义组件
@@ -287,29 +303,105 @@ const [Form, formApi] = useVbenForm({
 </template>
 ```
 
+### 类型传递与插槽
+
+通过 `useVbenForm<TValues>` 定义一次表单值类型后，`getValues`、`setValues`、`setFieldValue`、`handleSubmit`、`handleValuesChange`、`formApi.form.values` 和 selector 都会沿用该类型，可直接作为 API 请求参数：
+
+```vue
+<script setup lang="ts">
+import { useVbenForm } from '#/adapter/form';
+
+interface AccountFormValues {
+  email: string;
+  nickname: string;
+}
+
+const [Form, formApi] = useVbenForm<AccountFormValues>({
+  handleSubmit(values, rawValues) {
+    // values: AccountFormValues
+    // rawValues: Readonly<AccountFormValues>
+    return addAccount(values);
+  },
+  schema: [
+    { component: 'Input', fieldName: 'email', label: 'Email' },
+    { component: 'Input', fieldName: 'nickname', label: 'Nickname' },
+  ],
+});
+
+async function fillForm() {
+  await formApi.setValues({ email: 'user@example.com' });
+  const values = await formApi.getValues(); // AccountFormValues
+  return values;
+}
+</script>
+
+<template>
+  <Form>
+    <template #email="{ componentField, field, formApi, values }">
+      <!-- field.state.value、componentField.modelValue 均为 string -->
+      <input v-bind="componentField" :data-email="values.email" />
+      <button type="button" @click="formApi.clearValidation('email')">
+        Clear
+      </button>
+    </template>
+    <template #default="{ formApi, shapes, values }">
+      <!-- values: AccountFormValues -->
+      <button type="button" @click="formApi.submit()">
+        Submit {{ shapes.length }} fields for {{ values.email }}
+      </button>
+    </template>
+  </Form>
+</template>
+```
+
+字段命名插槽提供 `field`、`componentField`、`modelValue`、`name`、`disabled`、`isInValid`、`values` 和 `formApi`。默认插槽提供 `shapes`、`values` 和 `formApi`；`reset-before`、`submit-before`、`expand-before`、`expand-after` 提供 `values` 和 `formApi`。未声明 `TValues` 时仍兼容任意字段名，但 slot props 会回退为宽泛类型。
+
 ### FormApi
 
 useVbenForm 返回的第二个参数，是一个对象，包含了一些表单的方法。
 
 | 方法名 | 描述 | 类型 | 版本号 |
 | --- | --- | --- | --- |
-| submitForm | 提交表单 | `(e:Event)=>Promise<Record<string,any>>` | - |
-| validateAndSubmitForm | 提交并校验表单 | `(e:Event)=>Promise<Record<string,any>>` | - |
-| resetForm | 重置表单 | `()=>Promise<void>` | - |
-| setValues | 设置表单值, 默认会过滤不在schema中定义的field, 可通过filterFields形参关闭过滤 | `(fields: Record<string, any>, filterFields?: boolean, shouldValidate?: boolean) => Promise<void>` | - |
-| getValues | 获取表单值 | `(fields:Record<string, any>,shouldValidate: boolean = false)=>Promise<void>` | - |
-| validate | 表单校验 | `()=>Promise<void>` | - |
-| validateField | 校验指定字段 | `(fieldName: string)=>Promise<ValidationResult<unknown>>` | - |
+| submit | 提交表单 | `(e?: Event) => Promise<TValues>` | - |
+| validateAndSubmit | 校验通过后提交表单 | `() => Promise<TValues \| undefined>` | - |
+| reset | 重置表单 | `(state?: FormResetState<TValues>, options?: FormResetOptions) => Promise<void>` | - |
+| clearValidation | 清空指定字段或全部校验，并取消进行中的异步校验 | `(fieldNames?: FormFieldName<TValues> \| FormFieldName<TValues>[]) => Promise<void>` | - |
+| setValues | 设置表单值，默认会过滤不在 schema 中定义的字段 | `(fields: Partial<TValues>, filterFields?: boolean, shouldValidate?: boolean) => Promise<void>` | - |
+| getValues | 获取经过字段映射和 valueFormat 的值 | `() => Promise<TValues>` | - |
+| getRawValues | 获取未格式化的独立值快照 | `() => Promise<TValues>` | - |
+| getValueSnapshot | 一次获取原始值和格式化值 | `() => Promise<FormValueSnapshot<TValues>>` | - |
+| formatValues | 格式化指定的原始值快照 | `(rawValues: Readonly<TValues>) => TValues` | - |
+| validate | 表单校验 | `() => Promise<FormValidationResult>` | - |
+| validateField | 校验指定字段 | `(fieldName: string) => Promise<FormValidationResult>` | - |
 | isFieldValid | 检查某个字段是否已通过校验 | `(fieldName: string)=>Promise<boolean>` | - |
-| resetValidate | 重置表单校验 | `()=>Promise<void>` | - |
 | updateSchema | 更新formSchema | `(schema:FormSchema[])=>void` | - |
 | setFieldValue | 设置字段值 | `(field: string, value: any, shouldValidate?: boolean)=>Promise<void>` | - |
 | setState | 设置组件状态（props） | `(stateOrFn:\| ((prev: VbenFormProps) => Partial<VbenFormProps>)\| Partial<VbenFormProps>)=>Promise<void>` | - |
 | getState | 获取组件状态（props） | `()=>Promise<VbenFormProps>` | - |
-| form | 表单对象实例，可以操作表单，见 [useForm](https://vee-validate.logaretm.com/v4/api/use-form/) | - | - |
+| form | 稳定的 `FormContextApi`，提供 values、errors、set/reset/validate/submit 与数组字段操作，不暴露底层 TanStack 泛型 | `FormContextApi` | - |
 | getFieldComponentRef | 获取指定字段的组件实例 | `<T=unknown>(fieldName: string)=>T` | >5.5.3 |
 | getFocusedField | 获取当前已获得焦点的字段 | `()=>string\|undefined` | >5.5.3 |
 
+旧命名 `submitForm`、`validateAndSubmitForm`、`resetForm`、`resetValidate` 分别对应 `submit`、`validateAndSubmit`、`reset`、`clearValidation`。它们仍可调用，但已标记 `@deprecated`，开发环境每个旧名称只警告一次，生产环境静默。
+
+### FormContextApi 响应式读取
+
+`formApi.form` 提供细粒度 selector。字段组件应优先使用字段级方法，避免订阅整份 values 或 errors：
+
+| 方法 | 返回值 | 用途 |
+| --- | --- | --- |
+| `useFieldValue(fieldName)` | `Readonly<Ref<FormFieldValue>>` | 订阅一个字段值。 |
+| `useFieldValues(fieldNames)` | `Readonly<Ref<FormFieldValue[]>>` | 订阅一组声明字段值。 |
+| `useFieldError(fieldName)` | `Readonly<Ref<string \| undefined>>` | 订阅一个字段错误。 |
+| `useValues()` | `Readonly<Ref<TValues>>` | 订阅整份表单值。 |
+| `useSelector(selector)` | `Readonly<Ref<TResult>>` | 兼容入口，可从 `{ values, errors, meta }` 组合选择状态。 |
+
+```ts
+const email = formApi.form.useFieldValue('email');
+const emailError = formApi.form.useFieldError('email');
+const submitting = formApi.form.useSelector((state) => state.meta.submitting);
+```
+
 ## Props
 
 所有属性都可以传入 `useVbenForm` 的第一个参数中。
@@ -323,8 +415,8 @@ useVbenForm 返回的第二个参数，是一个对象，包含了一些表单
 | actionLayout | 表单操作按钮位置 | `'newLine' \| 'rowEnd' \| 'inline'` | `rowEnd` |
 | actionPosition | 表单操作按钮对齐方式 | `'left' \| 'center' \| 'right'` | `right` |
 | handleReset | 表单重置回调 | `(values: Record<string, any>,) => Promise<void> \| void` | - |
-| handleSubmit | 表单提交回调 | `(values: Record<string, any>,) => Promise<void> \| void` | - |
-| handleValuesChange | 表单值变化回调 | `(values: Record<string, any>, fieldsChanged: string[]) => void` | - |
+| handleSubmit | 表单提交回调 | `(values: TValues, rawValues: Readonly<TValues>) => Promise<void> \| void` | - |
+| handleValuesChange | 表单值变化回调 | `(rawValues: Readonly<TValues>, fieldsChanged: string[], getFormattedValues: () => TValues) => void` | - |
 | handleCollapsedChange | 表单收起展开状态变化回调 | `(collapsed: boolean) => void` | - |
 | actionButtonsReverse | 调换操作按钮位置 | `boolean` | `false` |
 | resetButtonOptions | 重置按钮组件参数 | `ActionButtonOptions` | - |
@@ -343,7 +435,9 @@ useVbenForm 返回的第二个参数，是一个对象，包含了一些表单
 
 ::: tip handleValuesChange
 
-`handleValuesChange` 回调函数的第一个参数`values`装载了表单改变后的当前值对象，第二个参数`fieldsChanged`是一个数组，包含了所有被改变的字段名。注意：第二个参数仅在v5.5.4(不含)以上版本可用，并且传递的是已在schema中定义的字段名。如果你使用了字段映射并且需要检查是哪些字段发生了变化的话，请注意该参数并不会包含映射后的字段名。
+`handleValuesChange` 的第一个参数是未经过 `valueFormat`、`fieldMappingTime` 或 array-to-string 转换的只读当前值，第二个参数是本次发生变化的 schema 字段名。第三个参数 `getFormattedValues` 是惰性函数：不调用就不会执行深拷贝和格式化，适合只在少数变化场景读取提交结构。字段映射生成的目标字段不会出现在 `fieldsChanged` 中。
+
+`getRawValues()` 和 `getValues()` 分别只生成一份目标快照；确实需要同时比较两种结构时再调用 `getValueSnapshot()`。`handleSubmit(values, rawValues)` 会在提交边界同时提供格式化结果和对应的原始快照。
 
 :::
 
@@ -410,6 +504,11 @@ export interface ActionButtonOptions {
 
 ```ts
 export interface FormCommonConfig {
+  /**
+   * 仅当组件不发送 update:*、只发送 change 时启用兼容回退
+   * @default false
+   */
+  changeEventFallback?: boolean;
   /**
    * 所有表单项的props
    */
@@ -431,7 +530,7 @@ export interface FormCommonConfig {
    * 所有表单项的控件样式
    * @default {}
    */
-  formFieldProps?: Partial<typeof Field>;
+  formFieldProps?: FormFieldOptions;
   /**
    * 所有表单项的栅格布局
    * @default ""
@@ -475,11 +574,14 @@ export interface FormCommonConfig {
 ```ts
 export interface FormSchema<
   T extends BaseFormComponentType = BaseFormComponentType,
+  TValues extends FormValues = FormValues,
 > extends FormCommonConfig {
   /** 组件 */
   component: Component | T;
   /** 组件参数 */
-  componentProps?: ComponentProps;
+  componentProps?:
+    | MaybeComponentProps
+    | ((ctx: FormSchemaContext<TValues>) => MaybeComponentProps);
   /** 默认值 */
   defaultValue?: any;
   /** 依赖 */
@@ -489,13 +591,15 @@ export interface FormSchema<
   /** 字段名，也作为自定义插槽的名称 */
   fieldName: string;
   /** 帮助信息 */
-  help?: CustomRenderType;
+  help?: string | ((ctx: FormSchemaContext<TValues>) => Component | string);
   /** 是否隐藏表单项 */
   hide?: boolean;
   /** 表单的标签（如果是一个string，会用于默认必选规则的消息提示） */
   label?: CustomRenderType;
   /** 自定义组件内部渲染  */
-  renderComponentContent?: RenderComponentContentType;
+  renderComponentContent?: (
+    ctx: FormSchemaContext<TValues>,
+  ) => Record<string, any>;
   /** 字段规则 */
   rules?: FormSchemaRuleType;
   /** 后缀 */
@@ -505,6 +609,8 @@ export interface FormSchema<
 }
 ```
 
+顶层 `componentProps`、`help` 和 `renderComponentContent` 函数只接收轻量 `FormSchemaContext`，适合数组行索引、字段路径等 schema 信息。需要读取表单值时，使用 `dependencies.resolve({ values, ... })`，避免每个字段订阅整份 values。
+
 :::
 
 ::: details FormValueFormat
@@ -529,29 +635,37 @@ type FormValueFormat = (
 
 ```ts
 dependencies: {
-  // 触发字段。只有这些字段值变动时，联动才会触发
-  triggerFields: ['name'],
-  // 动态判断当前字段是否需要显示，不显示则直接销毁
-  if(values,formApi){},
-  // 动态判断当前字段是否需要显示，不显示用css隐藏
-  show(values,formApi){},
-  // 动态判断当前字段是否需要禁用
-  disabled(values,formApi){},
-  // 字段变更时，都会触发该函数
-  trigger(values,formApi){},
-  // 动态rules
-  rules(values,formApi){},
-  // 动态必填
-  required(values,formApi){},
-  // 动态组件参数
-  componentProps(values,formApi){},
+  triggerFields: ['type', 'role'],
+  resolve({ values, actions, controller, schema }) {
+    const editable = values.type === 'editable';
+    return {
+      componentProps: { placeholder: schema.fieldName },
+      disabled: !editable,
+      required: values.role === 'owner',
+      rules: editable ? 'required' : null,
+      show: values.type !== 'hidden',
+    };
+  },
 }
 ```
 
+`resolve` 返回的字段会一次性提交；支持 `if`、`show`、`disabled`、`required`、`rules`、`componentProps`、`help` 和 `renderComponentContent`。未返回 `rules` 时继续使用静态规则，显式返回 `rules: null` 时关闭静态规则。`actions` 是稳定的 `FormContextApi`，`controller` 是高层 FormApi，`schema` 包含字段名和数组行上下文。
+
+旧的 `if/show/disabled/required/rules/componentProps/trigger` 回调语法仍完整兼容并保持原求值顺序，但已标记为 `@deprecated`，开发环境首次使用时会提示迁移。新旧语法在同一个 dependencies 对象中互斥；绕过类型同时传入时以 `resolve` 为准。
+
 ### 表单校验
 
 表单校验需要通过 schema 内的 `rules` 属性进行配置。
 
+字段默认在 blur、change 和 submit 时校验。使用 `formFieldProps.validateOn` 限制交互触发时机，submit 始终校验；异步校验可通过 `asyncDebounceMs` 防抖：
+
+```ts
+formFieldProps: {
+  asyncDebounceMs: 300,
+  validateOn: ['blur'],
+}
+```
+
 rules的值可以是字符串（预定义的校验规则名称），也可以是一个zod的schema。
 
 #### 预定义的校验规则
diff --git a/docs/src/demos/vben-form/dynamic/index.vue b/docs/src/demos/vben-form/dynamic/index.vue
index 7764a2da..b300d5fb 100644
--- a/docs/src/demos/vben-form/dynamic/index.vue
+++ b/docs/src/demos/vben-form/dynamic/index.vue
@@ -124,26 +124,28 @@ const [Form] = useVbenForm({
         showSearch: true,
       },
       dependencies: {
-        componentProps(values) {
+        resolve({ values }) {
           if (values.field2 === '123') {
             return {
-              options: [
-                {
-                  label: '选项1',
-                  value: '1',
-                },
-                {
-                  label: '选项2',
-                  value: '2',
-                },
-                {
-                  label: '选项3',
-                  value: '3',
-                },
-              ],
+              componentProps: {
+                options: [
+                  {
+                    label: '选项1',
+                    value: '1',
+                  },
+                  {
+                    label: '选项2',
+                    value: '2',
+                  },
+                  {
+                    label: '选项3',
+                    value: '3',
+                  },
+                ],
+              },
             };
           }
-          return {};
+          return { componentProps: {} };
         },
         triggerFields: ['field2'],
       },
diff --git a/docs/src/demos/vben-form/rules/index.vue b/docs/src/demos/vben-form/rules/index.vue
index 93d7f8e1..7edf7d16 100644
--- a/docs/src/demos/vben-form/rules/index.vue
+++ b/docs/src/demos/vben-form/rules/index.vue
@@ -69,7 +69,7 @@ const [Form] = useVbenForm({
       fieldName: 'field4',
       // 界面显示的label
       label: '邮箱',
-      rules: z.string().email('请输入正确的邮箱'),
+      rules: z.email('请输入正确的邮箱'),
     },
     {
       component: 'InputNumber',
diff --git a/docs/src/en/components/common-ui/vben-form.md b/docs/src/en/components/common-ui/vben-form.md
index aa8d0589..79ce724d 100644
--- a/docs/src/en/components/common-ui/vben-form.md
+++ b/docs/src/en/components/common-ui/vben-form.md
@@ -6,6 +6,10 @@ outline: deep
 
 `Vben Form` is the shared form abstraction used across different UI-library variants such as `Ant Design Vue`, `Element Plus`, `Naive UI`, and other adapters added inside this repository.
 
+It uses [TanStack Form](https://tanstack.com/form/latest/docs/framework/vue/overview) internally for state and validation lifecycles, with [Zod 4](https://zod.dev/v4) schemas. Application code should continue using `useVbenForm`, `FormApi`, and the adapter layer instead of depending on the raw TanStack instance.
+
+Read the [Zod 4 and TanStack Form migration guide](/en/guide/in-depth/zod-v4-form-migration) before upgrading an existing project.
+
 > If some details are not obvious from the docs, check the live demos as well.
 
 ## Adapter Setup
@@ -23,8 +27,9 @@ The current adapter pattern is:
 
 ```ts
 import type {
+  FormValues,
+  VbenFormProps as FormProps,
   VbenFormSchema as FormSchema,
-  VbenFormProps,
 } from '@vben/common-ui';
 
 import type { ComponentType } from './component';
@@ -46,7 +51,7 @@ setupVbenForm<ComponentType>({
       Upload: 'fileList',
     },
   },
-  defineRules: {
+  rules: {
     required: (value, _params, ctx) => {
       if (value === undefined || value === null || value.length === 0) {
         return $t('ui.formRules.required', [ctx.label]);
@@ -62,11 +67,20 @@ setupVbenForm<ComponentType>({
   },
 });
 
-const useVbenForm = useForm<ComponentType>;
+function useVbenForm<TValues extends FormValues = FormValues>(
+  options: FormProps<ComponentType, Record<never, never>, TValues>,
+) {
+  return useForm<TValues, ComponentType, Record<never, never>>(options);
+}
 
 export { useVbenForm, z };
-export type VbenFormSchema = FormSchema<ComponentType>;
-export type { VbenFormProps };
+export type VbenFormSchema<TValues extends FormValues = FormValues> =
+  FormSchema<ComponentType, Record<never, never>, TValues>;
+export type VbenFormProps<TValues extends FormValues = FormValues> = FormProps<
+  ComponentType,
+  Record<never, never>,
+  TValues
+>;
 ```
 
 ### Component Adapter Example
@@ -191,6 +205,55 @@ Create the form through `useVbenForm`:
 
 <DemoPreview dir="demos/vben-form/basic" />
 
+## Typed Values and Slots
+
+Declare the value shape once with `useVbenForm<TValues>`. The same type flows through value APIs, callbacks, selectors, and field/default/action slots:
+
+```vue
+<script setup lang="ts">
+import { useVbenForm } from '#/adapter/form';
+
+interface AccountFormValues {
+  email: string;
+  nickname: string;
+}
+
+const [Form, formApi] = useVbenForm<AccountFormValues>({
+  handleSubmit(values) {
+    return addAccount(values); // AccountFormValues
+  },
+  schema: [
+    { component: 'Input', fieldName: 'email', label: 'Email' },
+    { component: 'Input', fieldName: 'nickname', label: 'Nickname' },
+  ],
+});
+
+async function fillForm() {
+  await formApi.setValues({ email: 'user@example.com' });
+  return formApi.getValues(); // Promise<AccountFormValues>
+}
+</script>
+
+<template>
+  <Form>
+    <template #email="{ componentField, field, formApi, values }">
+      <!-- field.state.value and componentField.modelValue are strings -->
+      <input v-bind="componentField" :data-email="values.email" />
+      <button type="button" @click="formApi.clearValidation('email')">
+        Clear
+      </button>
+    </template>
+    <template #default="{ formApi, shapes, values }">
+      <button type="button" @click="formApi.submit()">
+        Submit {{ shapes.length }} fields for {{ values.email }}
+      </button>
+    </template>
+  </Form>
+</template>
+```
+
+Named field slots expose `field`, `componentField`, `modelValue`, `name`, `disabled`, `isInValid`, `values`, and `formApi`. The default slot exposes `shapes`, `values`, and `formApi`; action slots expose `values` and `formApi`. Forms without an explicit `TValues` remain compatible with arbitrary slot names and broad props.
+
 ## Value Formatting
 
 Use `schema.valueFormat` when the component value is convenient for the UI but the final payload returned by `getValues()` should use a different shape.
@@ -204,10 +267,25 @@ Use `schema.valueFormat` when the component value is convenient for the UI but t
 ## Key API Notes
 
 - `useVbenForm` returns `[Form, formApi]`
+- `useVbenForm<TValues>` propagates values through APIs, callbacks, schema callbacks, and slots
+- prefer `reset`, `submit`, `validateAndSubmit`, and `clearValidation`
+- `resetForm`, `submitForm`, `validateAndSubmitForm`, and `resetValidate` remain deprecated aliases that warn once in development
+- `clearValidation` invalidates in-flight async results before clearing errors
 - `formApi.getFieldComponentRef()` and `formApi.getFocusedField()` are available in current versions
-- `handleValuesChange(values, fieldsChanged)` includes the second parameter in newer versions
+- `handleValuesChange(values, fieldsChanged)` receives readonly raw form state before `valueFormat`, `fieldMappingTime`, or array-to-string conversion
+- its third `getFormattedValues` argument formats lazily, so raw-only change handlers avoid clone and transform work
+- `getRawValues()` returns only an independent raw snapshot, `getValues()` returns only the formatted payload, and `getValueSnapshot()` returns both
+- `handleSubmit(values, rawValues)` receives the formatted payload and its corresponding raw snapshot
 - `fieldMappingTime` and `scrollToFirstError` are part of the current form props
 - `schema.valueFormat` lets `getValues()` transform UI values into backend-friendly payloads
+- `formApi.form` is the stable `FormContextApi`; raw TanStack generics are intentionally not exposed
+- prefer `formApi.form.useFieldValue`, `useFieldValues`, and `useFieldError` for fine-grained subscriptions; use `useValues` only when the whole form is required
+- `useSelector` remains the compatibility selector for combined `{ values, errors, meta }` state
+- legacy `setupVbenForm({ defineRules })` still works, warns once in development, and is silent in production; use `rules` for new code
+- prefer `dependencies: { triggerFields, resolve(context) }` for one atomic dynamic-state patch; legacy dependency callbacks remain supported but are deprecated and warn once in development
+- top-level `componentProps`, `help`, and `renderComponentContent` functions receive `FormSchemaContext`; value-dependent rendering belongs in `dependencies.resolve`
+- use `formFieldProps.validateOn` with `blur` and/or `change`; submit always validates, and `asyncDebounceMs` debounces async validators
+- use `changeEventFallback: true` only for components that emit `change` without an `update:*` event
 
 ## Reference
 
diff --git a/docs/src/en/guide/in-depth/zod-v4-form-migration.md b/docs/src/en/guide/in-depth/zod-v4-form-migration.md
new file mode 100644
index 00000000..9928201c
--- /dev/null
+++ b/docs/src/en/guide/in-depth/zod-v4-form-migration.md
@@ -0,0 +1,242 @@
+---
+outline: deep
+---
+
+# Zod 4 and TanStack Form Migration
+
+This migration upgrades form schemas from Zod 3 to Zod 4 and replaces vee-validate with TanStack Form internally. The Vben business API remains stable while implementation-specific form APIs are removed from the public boundary.
+
+## Dependency Changes
+
+| Area | Before | After |
+| --- | --- | --- |
+| Schema | `zod@^3.25.76` | `zod@^4.4.3` |
+| Defaults | `zod-defaults@0.1.3` | `zod-defaults@^0.2.3` |
+| Form engine | `vee-validate@^4.15.1` | `@tanstack/vue-form@^1.33.2` |
+| Zod adapter | `@vee-validate/zod@^4.15.1` | Removed; TanStack Form supports Standard Schema |
+
+Source files, package manifests, and the lockfile must no longer depend on `vee-validate` or `@vee-validate/zod`.
+
+## Compatibility Boundary
+
+The following Vben APIs remain supported:
+
+- `useVbenForm(options)` returning `[Form, formApi]`
+- existing `FormApi` methods for values, reset, validation, submission, schema updates, and component refs
+- existing `FormSchema` fields, dependencies, `valueFormat`, and array schema structure
+- application adapters and the re-exported `z` namespace
+- the existing `componentField` slot and binding shape
+
+`formApi.form` is now the library-independent `FormContextApi`. It exposes values, errors, meta, set/reset/validate/submit methods, and array operations without leaking vee or raw TanStack generics.
+
+New code uses `reset`, `submit`, `validateAndSubmit`, and `clearValidation`. The former `resetForm`, `submitForm`, `validateAndSubmitForm`, and `resetValidate` names remain deprecated forwarding aliases. They emit one warning per name in development and stay silent in production.
+
+## Form UI API Changes in This Refactor
+
+### Added APIs
+
+| API | Type/Location | Description |
+| --- | --- | --- |
+| `dependencies.resolve(context)` | `FormItemDependenciesResolve` | Evaluates one complete dynamic patch from declared `triggerFields` and commits it atomically. Context contains readonly `values`, `actions`, `controller`, and row-aware `schema`. |
+| `useValues()` | `FormContextApi` | Subscribes to all form values. Use only when full-form reactivity is required. |
+| `useFieldValue(fieldName)` | `FormContextApi` | Subscribes to one field value without reacting to unrelated fields. |
+| `useFieldValues(fieldNames)` | `FormContextApi` | Subscribes to a declared group of field values. |
+| `useFieldError(fieldName)` | `FormContextApi` | Subscribes to one field error without consuming the full error object. |
+| `getRawValues()` | `FormApi` | Returns an independent raw snapshot before field mapping and `valueFormat`. |
+| `formatValues(rawValues)` | `FormApi` | Runs the unified formatting pipeline on a supplied raw snapshot. |
+| `getValueSnapshot()` | `FormApi` | Returns `{ rawValues, values }`, where `values` is the formatted payload. |
+| `asyncDebounceMs` | `FormFieldOptions` | Configures TanStack Field async validation debounce. |
+| `changeEventFallback` | `FormCommonConfig` / adapter config | Enables fallback for legacy components that emit `change` without `update:*`; defaults to `false`. |
+
+`dependencies.resolve` may return `if`, `show`, `disabled`, `required`, `rules`, `componentProps`, `help`, and `renderComponentContent`. Omitting `rules` keeps the static rule; returning `rules: null` disables it.
+
+### Changed APIs
+
+| API | Before | After |
+| --- | --- | --- |
+| Submit callback | `handleSubmit(values)` | `handleSubmit(values, rawValues)`; the first argument is formatted and the second is the matching readonly raw snapshot. Existing single-argument functions remain valid. |
+| Values change callback | `handleValuesChange(values, fieldsChanged)` | `handleValuesChange(rawValues, fieldsChanged, getFormattedValues)`; formatting is lazy and incurs no clone/transform cost unless requested. |
+| Field validation triggers | Four `validateOn*` booleans | `validateOn?: readonly ('blur' \| 'change')[]`; submit always validates. |
+| Change-event compatibility | `disabledOnChangeListener: false` enabled fallback | `changeEventFallback: true` enables fallback with positive semantics. |
+| Top-level render callbacks | `componentProps(values, actions, ctx)`, `help(values, actions, ctx)`, `renderComponentContent(values, actions, ctx)` | Receive only lightweight `FormSchemaContext`; value-dependent behavior moves to `dependencies.resolve`. |
+| `validateAndSubmit()` | Repeated low-level validation/scroll handling and could validate again during submit | Delegates to canonical `validate()` and shared submission logic; invalid forms do not submit. |
+| `getValues()` | Implicitly returned transformed values | Still returns the formatted payload; use `getRawValues()` for raw state. |
+
+### Removed APIs
+
+| Removed API | Replacement |
+| --- | --- |
+| `FormValidationOptions` | `validate()` and `validateField(fieldName)` no longer accept options. |
+| `force` / `silent` / `validated-only` validation modes | Removed because these vee modes have no TanStack runtime semantics. |
+| `validateOnBlur` / `validateOnChange` / `validateOnInput` / `validateOnModelUpdate` | Use `formFieldProps.validateOn`; input and model updates are represented by `change`. |
+| `disabledOnChangeListener` | Use positive `changeEventFallback`. |
+| `disabledOnInputListener` | Input listeners are no longer bound automatically; provide `componentProps.onInput` explicitly when required. |
+| `values/actions` parameters from top-level schema render functions | Use `FormSchemaContext`; move value-dependent behavior to `dependencies.resolve`. |
+
+### Deprecated but Supported
+
+- `dependencies.if/show/disabled/required/rules/componentProps/trigger` remain compatible for this release, but every callback is marked `@deprecated` and emits one development warning. If both syntaxes bypass the type union, `resolve` wins.
+- `resetForm`, `submitForm`, `resetValidate`, and `validateAndSubmitForm` continue forwarding to canonical methods.
+- `FormActions` remains as a deprecated alias of `FormContextApi`.
+- `setupVbenForm({ defineRules })` remains supported; `rules` wins for duplicate names.
+- The re-exported `z`, `componentField` slots, and `emptyStateValue` remain unchanged.
+
+### Internal Behavior Changes
+
+- Field components use fine-grained value/error selectors; full error aggregation is no longer on the normal input path.
+- Async validators discard stale Promises through a Vben generation without reading private TanStack AbortController or meta fields.
+- New and legacy dependencies share one atomic executor, so stale async results cannot overwrite newer state.
+- Formatting runs in a fixed array-to-string, range mapping, schema `valueFormat` order and performs one deep clone per formatted snapshot.
+
+## Typed Values and Slots
+
+Application adapters keep the UI component mapping fixed and expose the business value shape as the only generic:
+
+```ts
+interface AccountFormValues {
+  email: string;
+  nickname: string;
+}
+
+const [Form, formApi] = useVbenForm<AccountFormValues>({
+  handleSubmit(values) {
+    return addAccount(values);
+  },
+  schema: [
+    { component: 'Input', fieldName: 'email' },
+    { component: 'Input', fieldName: 'nickname' },
+  ],
+});
+```
+
+`TValues` flows through `VbenFormProps`, `FormSchema`, `FormApi`, `FormContextApi`, value APIs, submit/change callbacks, selectors, and dynamic schema callbacks. The returned `Form` component also exposes typed slots: known field slots use the matching value type for `field.state.value` and `componentField.modelValue`, while all field/default/action slots receive the complete `values` and matching `formApi`. Legacy forms without `TValues` retain arbitrary slot names and broad props.
+
+## New and Legacy Rule Registration
+
+Use `rules` in new code:
+
+```ts
+setupVbenForm({
+  rules: {
+    required(value, _params, context) {
+      const isEmpty =
+        value === undefined ||
+        value === null ||
+        value === '' ||
+        (Array.isArray(value) && value.length === 0);
+      return isEmpty ? `${context.label} is required` : true;
+    },
+  },
+});
+```
+
+The legacy `defineRules` option forwards to the same registry:
+
+```ts
+setupVbenForm({
+  defineRules: {
+    required: legacyRequiredRule,
+  },
+});
+```
+
+Legacy runtime usage emits one warning per deprecation key in development and no warnings in production. If both options define the same rule, `rules` wins. The `FormActions` type remains as a deprecated alias of `FormContextApi`; editors report the type deprecation because type-only usage cannot emit runtime warnings.
+
+## Running the Codemod
+
+Run the pinned tool against each affected tsconfig from a clean Git worktree:
+
+```bash
+npx --yes zod-v3-to-v4@1.21.3 path/to/tsconfig.json
+```
+
+The tool edits `.ts`, `.tsx`, and `.vue` files in place and has no dry-run mode. Always review `git diff` afterward.
+
+The codemod primarily recognizes direct `zod` imports. Schemas that obtain `z` through `@vben/common-ui` or an application adapter need manual review, especially constructor errors, string formats, and dynamic refinement messages.
+
+## Zod 4 Changes
+
+### Unified Error Parameters
+
+Replace `required_error` and `invalid_type_error` with `error`:
+
+```ts
+const count = z.number({
+  error: (issue) =>
+    issue.input === undefined ? 'Count is required' : 'Count must be a number',
+});
+```
+
+Use an `error(issue)` callback for dynamic refinement messages instead of passing a function that returns params as the second argument to `.refine()`.
+
+### String Formats and Errors
+
+Prefer top-level format schemas:
+
+```ts
+z.email('Invalid email');
+z.url('Invalid URL');
+z.uuid('Invalid UUID');
+```
+
+Read validation details from `ZodError.issues`; the old `.errors` property is removed.
+
+### Defaults and Optionality
+
+Zod 4 defaults may return immediately when the input is `undefined`. Review `.default().optional()` using actual parse behavior instead of internal type names.
+
+Vben initial values use this precedence:
+
+1. explicit schema `defaultValue`
+2. Zod `.default()`
+3. Zod 4-compatible `zod-defaults`
+4. component empty-state conventions
+
+Required markers are derived from whether the schema accepts `undefined`.
+
+### Wrappers, Refine, Transform, and Coerce
+
+Do not read `_def`, `_zod.def`, or `typeName`. Use public `.unwrap()` APIs and public pipe inputs. Delegate intersection defaults to the Zod 4-compatible `zod-defaults` package.
+
+Standard Schema validation does not write transform/coerce output back into TanStack Form state. Keep using `valueFormat` for submission payload conversion, or explicitly call `parseAsync` at the submission boundary when transformed schema output is required.
+
+Also review these changes:
+
+- `z.record()` should specify key and value schemas
+- `z.enum()` replaces former `nativeEnum` use cases
+- number integer, Infinity, and finite behavior
+- object strictness, merge, and unknown keys
+- intersection merge conflicts
+- coerce input types defaulting to `unknown`
+- removal of Zod 3 types such as `ZodEffects`, `ZodTypeAny`, and `AnyZodObject`
+
+## Form Engine Behavior
+
+`formFieldProps.validateOn` accepts `blur` and `change`, with both enabled by default; submit always validates fields. `asyncDebounceMs` configures TanStack Field async debounce. The four vee-style `validateOn*` booleans and `force/silent/validated-only` modes have been removed.
+
+The shadcn form primitives now use a Vben-owned field context. Labels, controls, descriptions, and messages continue to provide ids, `aria-invalid`, `aria-describedby`, touched, dirty, valid, and error states.
+
+`clearValidation(fieldNames?)` advances Vben's validator generation and clears public error state without relying on a private TanStack AbortController. A Promise that finishes later is discarded as stale. Omitting `fieldNames` covers every registered field and every field with an existing error.
+
+`dependencies.resolve(context)` is the recommended API: it evaluates once and atomically commits one dynamic-state patch, while stale async results are discarded as a unit. Legacy `if/show/disabled/required/rules/componentProps/trigger` callbacks remain supported through the same normalized executor, but are marked `@deprecated` and emit one development warning. Both APIs react only to declared `triggerFields`.
+
+`handleValuesChange(rawValues, fieldsChanged, getFormattedValues)` receives readonly raw values and formats only when its third argument is called. `getRawValues()` and `getValues()` each create only the requested snapshot; use `getValueSnapshot()` when both are required. `handleSubmit(values, rawValues)` receives both forms at submission. The formatter performs one deep clone, then applies array-to-string, range mapping, and schema `valueFormat` in order. Array fields keep using TanStack push/remove operations and stable row identity.
+
+## Test and Acceptance Matrix
+
+Required coverage includes:
+
+- Zod defaults, optional, nullable, intersection, pipe, transform, coerce, and errors
+- runtime values, selectors, reset, manual errors, validation, and async validation
+- field binding, blur/change triggers, error messages, ARIA, dependencies, and arrays
+- new/legacy API equivalence, warning deduplication, production silence, and type aliases
+- complete `useVbenForm` lifecycle, submission, `handleValuesChange`, submit-on-change, and async race handling
+
+Acceptance requires zero TypeScript errors, zero build errors, all tests passing, no unhandled browser errors, modified-file formatting and lint passing, and no source dependency on vee or Zod private structures.
+
+## References
+
+- [Zod 4 release notes](https://zod.dev/v4)
+- [Zod migration guide](https://zod.dev/v4/changelog)
+- [TanStack Form Vue overview](https://tanstack.com/form/latest/docs/framework/vue/overview)
+- [TanStack Form validation](https://tanstack.com/form/latest/docs/framework/vue/guides/validation)
diff --git a/docs/src/guide/in-depth/zod-v4-form-migration.md b/docs/src/guide/in-depth/zod-v4-form-migration.md
new file mode 100644
index 00000000..8f53e6ce
--- /dev/null
+++ b/docs/src/guide/in-depth/zod-v4-form-migration.md
@@ -0,0 +1,274 @@
+---
+outline: deep
+---
+
+# Zod 4 与 TanStack Form 迁移指南
+
+本次迁移将表单校验 schema 从 Zod 3 升级到 Zod 4，并将内部表单引擎从 vee-validate 替换为 TanStack Form。迁移目标是保持 Vben 业务 API 稳定，同时移除业务代码对具体表单引擎的耦合。
+
+## 依赖变化
+
+| 类型 | 迁移前 | 迁移后 |
+| --- | --- | --- |
+| Schema | `zod@^3.25.76` | `zod@^4.4.3` |
+| 默认值 | `zod-defaults@0.1.3` | `zod-defaults@^0.2.3` |
+| 表单引擎 | `vee-validate@^4.15.1` | `@tanstack/vue-form@^1.33.2` |
+| Zod 适配器 | `@vee-validate/zod@^4.15.1` | 不再需要，TanStack Form 支持 Standard Schema |
+
+迁移后，源码、package manifest 和锁文件中都不应再依赖 `vee-validate` 或 `@vee-validate/zod`。
+
+## 上层兼容范围
+
+以下 Vben API 保持兼容：
+
+- `useVbenForm(options)` 仍返回 `[Form, formApi]`
+- `FormApi` 的值、校验、提交、重置、schema 更新和组件引用能力
+- `FormSchema` 的 `fieldName`、`component`、`componentProps`、`rules`、`dependencies`、`defaultValue`、`valueFormat` 和数组字段结构
+- `dependencies.triggerFields` 与回调参数
+- 组件适配器和 `z` 重导出路径
+- 自定义 slot 中原有的 `componentField` 绑定对象
+
+`formApi.form` 现在是库无关的 `FormContextApi`。它提供 values、errors、meta、字段读写、验证、提交、重置和数组操作，但不再暴露 vee `FormContext` 或原始 TanStack 实例。
+
+新代码使用 `reset`、`submit`、`validateAndSubmit` 和 `clearValidation`。旧的 `resetForm`、`submitForm`、`validateAndSubmitForm` 和 `resetValidate` 仍会委托给新实现，并通过 `@deprecated` 与开发环境一次性 warning 提示迁移；生产环境不输出 warning。
+
+## 本轮 Form UI API 变更
+
+### 新增 API
+
+| API | 类型/位置 | 说明 |
+| --- | --- | --- |
+| `dependencies.resolve(context)` | `FormItemDependenciesResolve` | 根据声明的 `triggerFields` 一次计算完整动态 patch，并原子更新字段状态。context 包含只读 `values`、`actions`、`controller` 和数组行感知的 `schema`。 |
+| `useValues()` | `FormContextApi` | 订阅完整表单值。仅在确实需要整表响应式值时使用。 |
+| `useFieldValue(fieldName)` | `FormContextApi` | 订阅单字段值，避免无关字段变化触发组件更新。 |
+| `useFieldValues(fieldNames)` | `FormContextApi` | 订阅一组字段值，主要用于声明式依赖计算。 |
+| `useFieldError(fieldName)` | `FormContextApi` | 订阅单字段错误，不再依赖全量错误对象。 |
+| `getRawValues()` | `FormApi` | 返回未执行字段映射与 `valueFormat` 的独立原始值快照。 |
+| `formatValues(rawValues)` | `FormApi` | 对指定原始值执行统一格式化流水线。 |
+| `getValueSnapshot()` | `FormApi` | 同时返回 `{ rawValues, values }`，其中 `values` 为格式化结果。 |
+| `asyncDebounceMs` | `FormFieldOptions` | 设置 TanStack Field 异步校验防抖时间。 |
+| `changeEventFallback` | `FormCommonConfig` / adapter config | 为只发送 `change`、不发送 `update:*` 的旧组件启用事件回退，默认 `false`。 |
+
+`dependencies.resolve` 可以返回 `if`、`show`、`disabled`、`required`、`rules`、`componentProps`、`help` 和 `renderComponentContent`。未返回 `rules` 时继续使用静态规则；显式返回 `rules: null` 时关闭静态规则。
+
+### 变更的 API
+
+| API | 迁移前 | 迁移后 |
+| --- | --- | --- |
+| 提交回调 | `handleSubmit(values)` | `handleSubmit(values, rawValues)`；首参为格式化值，次参为同一次提交对应的只读原始快照。旧单参数函数仍可直接使用。 |
+| 值变化回调 | `handleValuesChange(values, fieldsChanged)` | `handleValuesChange(rawValues, fieldsChanged, getFormattedValues)`；第三个参数为惰性格式化函数，不调用时不产生深拷贝和转换开销。 |
+| 字段校验触发 | 四个 `validateOn*` 布尔项 | `validateOn?: readonly ('blur' \| 'change')[]`；submit 始终校验。 |
+| change 事件兼容 | `disabledOnChangeListener: false` 表示启用 | `changeEventFallback: true` 表示启用，改为正向语义。 |
+| 顶层动态渲染回调 | `componentProps(values, actions, ctx)`、`help(values, actions, ctx)`、`renderComponentContent(values, actions, ctx)` | 仅接收轻量 `FormSchemaContext`。依赖表单值的动态逻辑迁移到 `dependencies.resolve`。 |
+| `validateAndSubmit()` | 自行调用底层校验并重复实现错误滚动，提交阶段可能再次校验 | 委托统一 `validate()` 与共享提交逻辑，无效时不提交，错误滚动只有一个实现。 |
+| `getValues()` | 隐式完成所有字段转换 | 语义保持为“返回格式化值”；需要原始值时显式使用 `getRawValues()`。 |
+
+### 删除的 API
+
+| 已删除 API | 替代方式 |
+| --- | --- |
+| `FormValidationOptions` | `validate()` 与 `validateField(fieldName)` 不再接收 options。 |
+| `force` / `silent` / `validated-only` validation mode | 这些 vee mode 在 TanStack runtime 中没有对应语义，直接删除。 |
+| `validateOnBlur` / `validateOnChange` / `validateOnInput` / `validateOnModelUpdate` | 使用 `formFieldProps.validateOn`；input 与 model update 统一归入 `change`。 |
+| `disabledOnChangeListener` | 使用正向语义的 `changeEventFallback`。 |
+| `disabledOnInputListener` | 不再自动绑定 input listener；确需自定义 input 处理时在 `componentProps.onInput` 中显式提供。 |
+| 顶层 schema 渲染函数中的 `values/actions` 参数 | 使用 `FormSchemaContext`；值相关联动使用 `dependencies.resolve`。 |
+
+### 已弃用但保留兼容
+
+- `dependencies.if/show/disabled/required/rules/componentProps/trigger` 本轮仍完整兼容，但均已标记 `@deprecated`。开发环境首次使用时警告一次；新旧语法绕过类型同时存在时以 `resolve` 为准。
+- `resetForm`、`submitForm`、`resetValidate` 和 `validateAndSubmitForm` 继续转发到新方法。
+- `FormActions` 继续作为 `FormContextApi` 的弃用类型别名。
+- `setupVbenForm({ defineRules })` 继续兼容；与 `rules` 同名时新 API 优先。
+- `z` 重导出、`componentField` slot 和 `emptyStateValue` 保持不变。
+
+### 非 API 行为调整
+
+- 字段组件改用细粒度 value/error selector；全量错误聚合退出普通输入热路径。
+- async validator 通过 Vben generation 丢弃过期 Promise，不读取 TanStack 私有 AbortController 或 meta 字段。
+- dependencies 新旧语法共用一个原子执行器，异步旧结果不会覆盖新状态。
+- 值格式化按 array-to-string、时间范围映射、schema `valueFormat` 的固定顺序执行，并且每次格式化只深拷贝一次。
+
+## 值类型与插槽类型
+
+应用 adapter 保留 UI 组件类型，只把业务值类型作为泛型暴露：
+
+```ts
+interface AccountFormValues {
+  email: string;
+  nickname: string;
+}
+
+const [Form, formApi] = useVbenForm<AccountFormValues>({
+  handleSubmit(values) {
+    return addAccount(values);
+  },
+  schema: [
+    { component: 'Input', fieldName: 'email' },
+    { component: 'Input', fieldName: 'nickname' },
+  ],
+});
+```
+
+`TValues` 会传递给 `VbenFormProps`、`FormSchema`、`FormApi`、`FormContextApi`、值读写 API、提交/变化回调、selector 和 schema 动态回调。返回的 `Form` 组件同时提供 typed slots：已知字段插槽的 `field.state.value` 与 `componentField.modelValue` 使用对应字段类型，并额外提供完整 `values` 与同型 `formApi`；默认和操作插槽也提供 `values/formApi`。未声明 `TValues` 的旧表单仍允许任意字段插槽并回退为宽泛类型。
+
+## 新旧规则注册 API
+
+新代码使用 `rules`：
+
+```ts
+setupVbenForm({
+  rules: {
+    required(value, _params, context) {
+      const isEmpty =
+        value === undefined ||
+        value === null ||
+        value === '' ||
+        (Array.isArray(value) && value.length === 0);
+      return isEmpty ? `${context.label} is required` : true;
+    },
+  },
+});
+```
+
+旧的 `defineRules` 仍会转发到同一个规则注册表：
+
+```ts
+setupVbenForm({
+  defineRules: {
+    required: legacyRequiredRule,
+  },
+});
+```
+
+使用旧入口时，开发环境针对该弃用项只输出一次警告；生产环境不输出。若同时提供 `rules` 与 `defineRules` 的同名规则，`rules` 优先。`FormActions` 类型保留为 `FormContextApi` 的弃用别名，类型别名本身无法触发运行时警告，编辑器会通过 `@deprecated` 提示迁移。
+
+## 使用迁移工具
+
+建议在干净的 Git 工作树中按项目 tsconfig 执行固定版本工具：
+
+```bash
+npx --yes zod-v3-to-v4@1.21.3 path/to/tsconfig.json
+```
+
+工具会原地修改 `.ts`、`.tsx` 和 `.vue` 文件，没有 dry-run 模式。执行后必须检查 `git diff`。
+
+工具只能可靠识别直接从 `zod` 导入的调用。通过 `@vben/common-ui` 或应用 adapter 间接取得 `z` 的 schema 需要人工审计，尤其是构造器错误参数、字符串格式和动态 refine 参数。
+
+## Zod 4 代码变更
+
+### 错误参数
+
+构造器中的 `required_error` 和 `invalid_type_error` 合并为 `error`：
+
+```ts
+const count = z.number({
+  error: (issue) =>
+    issue.input === undefined ? 'Count is required' : 'Count must be a number',
+});
+```
+
+refinement 继续支持字符串或对象参数。需要根据输入动态生成消息时，使用 `error(issue)`，不再传入返回 params 的第二个函数。
+
+### 字符串格式
+
+优先使用顶层格式 API：
+
+```ts
+z.email('Invalid email');
+z.url('Invalid URL');
+z.uuid('Invalid UUID');
+```
+
+旧的 `z.string().email()` 等形式不应继续新增。
+
+### 错误列表
+
+ZodError 使用 `issues`：
+
+```ts
+const result = schema.safeParse(value);
+if (!result.success) {
+  console.log(result.error.issues);
+}
+```
+
+不要读取已移除的 `.errors`。
+
+### 默认值与 optional
+
+Zod 4 的 default 在输入为 `undefined` 时可以直接返回默认值。`.default().optional()` 的结果必须按实际 parse 语义复核，而不是通过类型名称猜测。
+
+Vben 表单按以下优先级生成初值：
+
+1. schema 中显式 `defaultValue`
+2. Zod schema 中的 `.default()`
+3. `zod-defaults` 生成的对象、intersection 和基础空值
+4. Vben 组件约定的空字符串、空数组或空状态值
+
+必填标记以 schema 是否接受 `undefined` 为准。
+
+### 包装器、refine 与 transform
+
+不要读取 `_def`、`_zod.def` 或 `typeName`。公共包装器使用 `.unwrap()`；Zod 4 的 transform/pipe 使用公开的输入 schema。intersection 的默认值交给支持 Zod 4 的 `zod-defaults` 处理。
+
+TanStack Form 使用 Standard Schema 校验时不会自动把 transform/coerce 的输出写回当前表单 state。提交 payload 需要转换时，继续使用 `valueFormat`；如果必须提交 schema transform 后的结果，应在提交边界显式调用 `parseAsync`。
+
+### 其他需要复核的 API
+
+- `z.record()` 需要明确 key schema 与 value schema
+- `z.enum()` 已覆盖原 `nativeEnum` 用法
+- number 的 `int`、Infinity 和 finite 约束需按 Zod 4 语义复核
+- object 的 strict、merge、unknown keys 行为需要通过测试确认
+- intersection 合并冲突现在可能直接抛出错误
+- coerce schema 的 input 类型默认为 `unknown`
+- `ZodEffects`、`ZodTypeAny`、`AnyZodObject` 等 Zod 3 类型不应继续使用
+
+## 表单引擎行为
+
+### 验证触发
+
+`formFieldProps.validateOn` 接收 `blur`、`change` 数组，默认两者都启用；所有字段仍会在 submit 时验证。`asyncDebounceMs` 映射到 TanStack Field 的异步防抖配置。原 vee 风格的四个 `validateOn*` 布尔项和 `force/silent/validated-only` mode 已删除。
+
+### 错误与可访问性
+
+shadcn form primitive 使用 Vben 自有字段上下文，不再注入 vee 的 `FieldContextKey`。`FormLabel`、`FormControl`、`FormDescription` 和 `FormMessage` 继续维护：
+
+- `for` 与 control id
+- `aria-invalid`
+- `aria-describedby`
+- touched、dirty、valid 和错误消息
+
+`clearValidation(fieldNames?)` 会递增 Vben validator generation 并清空公开错误状态，不依赖 TanStack 私有 AbortController。异步 Promise 即使随后完成也会因代次过期而被丢弃；省略字段参数时会处理全部已注册或已有错误的字段。
+
+### 依赖与数组
+
+`dependencies.resolve(context)` 是推荐语法：一次求值并原子提交完整动态 patch，过期异步结果整体丢弃。旧的 `if/show/disabled/required/rules/componentProps/trigger` 语法仍兼容，但已标记为 `@deprecated` 并在开发环境首次使用时提示迁移；内部仍归一到同一个执行器。两种语法都只根据 `triggerFields` 重算，无关字段变化不会执行回调。
+
+`handleValuesChange(rawValues, fieldsChanged, getFormattedValues)` 接收未格式化的只读当前值，第三个参数仅在调用时执行格式化。`getRawValues()` 和 `getValues()` 分别只生成原始或格式化快照；需要同时比较时使用 `getValueSnapshot()`。提交回调通过 `handleSubmit(values, rawValues)` 同时取得两种结构。格式化流水线只深拷贝一次，并按 array-to-string、时间范围映射、schema `valueFormat` 的顺序执行。数组字段继续使用 TanStack push/remove 操作和稳定行身份。
+
+## 测试与验收
+
+迁移至少需要覆盖以下层级：
+
+- Zod 4 helper：default、optional、nullable、intersection、pipe、transform、coerce 与错误参数
+- runtime：值读写、selector、reset、字段错误、validate 和异步校验
+- 组件：输入绑定、blur/change 触发、错误消息、ARIA、dependencies 和数组增删
+- 兼容：`rules`/`defineRules` 结果一致、开发 warning 去重、生产静默、类型别名
+- 集成：`useVbenForm` 生命周期、提交、`handleValuesChange`、submit-on-change 和 async race
+
+验收标准：
+
+1. 受影响 package、应用、playground 和 docs 无 TypeScript 错误
+2. form-ui 与所有应用构建成功
+3. 单元、组件和集成测试全部通过
+4. 浏览器 smoke 流程无 `pageerror`、`console.error` 或未处理 Promise
+5. 修改文件通过 oxfmt 与 ESLint
+6. 静态搜索中不再出现 vee 依赖、Zod 私有结构或 Zod 3 错误参数
+
+## 参考资料
+
+- [Zod 4 release notes](https://zod.dev/v4)
+- [Zod migration guide](https://zod.dev/v4/changelog)
+- [TanStack Form Vue overview](https://tanstack.com/form/latest/docs/framework/vue/overview)
+- [TanStack Form validation](https://tanstack.com/form/latest/docs/framework/vue/guides/validation)
diff --git a/package.json b/package.json
index 3ecf8b37..7496acf9 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,9 @@
     "version": "pnpm exec changeset version && pnpm install --no-frozen-lockfile",
     "catalog": "pnpm dlx codemod pnpm/catalog"
   },
+  "dependencies": {
+    "sortablejs": "catalog:"
+  },
   "devDependencies": {
     "@changesets/changelog-github": "catalog:",
     "@changesets/cli": "catalog:",
diff --git a/packages/@core/ui-kit/form-ui/__tests__/form-api.test.ts b/packages/@core/ui-kit/form-ui/__tests__/form-api.test.ts
index 50ae2b75..cae8a8ac 100644
--- a/packages/@core/ui-kit/form-ui/__tests__/form-api.test.ts
+++ b/packages/@core/ui-kit/form-ui/__tests__/form-api.test.ts
@@ -98,6 +98,11 @@ describe('formApi', () => {
         startTime: 1_710_000_000_000,
       },
     });
+    expect(await formApi.getRawValues()).toEqual(originalValuesSnapshot);
+    expect(await formApi.getValueSnapshot()).toEqual({
+      rawValues: originalValuesSnapshot,
+      values,
+    });
     expect(formActions.values).toEqual(originalValuesSnapshot);
   });
 
@@ -159,24 +164,59 @@ describe('formApi', () => {
     );
   });
 
-  it('should reset form', async () => {
-    const resetFormMock = vi.fn();
+  it('should set only known fields without losing provided values', async () => {
+    const setValuesMock = vi.fn();
+    formApi.setState({
+      schema: [
+        { component: 'text', fieldName: 'name' },
+        { component: 'text', fieldName: 'profile.email' },
+      ],
+    });
     const formActions: any = {
       meta: {},
-      resetForm: resetFormMock,
+      setValues: setValuesMock,
+      values: {},
+    };
+
+    await formApi.mount(formActions, new Map());
+    await formApi.setValues({
+      name: 'Ada',
+      profile: {
+        email: 'ada@example.com',
+        ignored: true,
+      },
+      unknown: 'ignored',
+    });
+
+    expect(setValuesMock).toHaveBeenCalledWith(
+      {
+        name: 'Ada',
+        profile: {
+          email: 'ada@example.com',
+        },
+      },
+      false,
+    );
+  });
+
+  it('should reset form', async () => {
+    const resetMock = vi.fn();
+    const formActions: any = {
+      meta: {},
+      reset: resetMock,
       values: { name: 'test' },
     };
 
     await formApi.mount(formActions, new Map());
-    await formApi.resetForm();
-    expect(resetFormMock).toHaveBeenCalled();
+    await formApi.reset();
+    expect(resetMock).toHaveBeenCalled();
   });
 
   it('should call handleSubmit on submit', async () => {
     const handleSubmitMock = vi.fn();
     const formActions: any = {
       meta: {},
-      submitForm: vi.fn().mockResolvedValue(true),
+      submit: vi.fn().mockResolvedValue(true),
       values: { name: 'test' },
     };
 
@@ -187,9 +227,12 @@ describe('formApi', () => {
     formApi.setState(state);
     await formApi.mount(formActions, new Map());
 
-    const result = await formApi.submitForm();
-    expect(formActions.submitForm).toHaveBeenCalled();
-    expect(handleSubmitMock).toHaveBeenCalledWith({ name: 'test' });
+    const result = await formApi.submit();
+    expect(formActions.submit).toHaveBeenCalled();
+    expect(handleSubmitMock).toHaveBeenCalledWith(
+      { name: 'test' },
+      { name: 'test' },
+    );
     expect(result).toEqual({ name: 'test' });
   });
 
@@ -243,6 +286,48 @@ describe('formApi', () => {
     expect(validateMock).toHaveBeenCalled();
     expect(isValid).toBe(true);
   });
+
+  it('should validate only once before submitting valid values', async () => {
+    const handleSubmit = vi.fn();
+    const formActions: any = {
+      meta: {},
+      submit: vi.fn(),
+      validate: vi.fn().mockResolvedValue({ errors: {}, valid: true }),
+      values: { name: 'Ada' },
+    };
+
+    formApi.setState({ handleSubmit });
+    await formApi.mount(formActions, new Map());
+
+    await expect(formApi.validateAndSubmit()).resolves.toEqual({ name: 'Ada' });
+    expect(formActions.validate).toHaveBeenCalledOnce();
+    expect(formActions.submit).not.toHaveBeenCalled();
+    expect(handleSubmit).toHaveBeenCalledOnce();
+  });
+
+  it('should not submit invalid values', async () => {
+    const handleSubmit = vi.fn();
+    const errors = { name: 'Name is required' };
+    const formActions: any = {
+      meta: {},
+      submit: vi.fn(),
+      validate: vi.fn().mockResolvedValue({ errors, valid: false }),
+      values: { name: '' },
+    };
+    const scrollToFirstError = vi
+      .spyOn(formApi as any, 'scrollToFirstError')
+      .mockImplementation(() => {});
+
+    formApi.setState({ handleSubmit, scrollToFirstError: true });
+    await formApi.mount(formActions, new Map());
+
+    await expect(formApi.validateAndSubmit()).resolves.toBeUndefined();
+    expect(formActions.validate).toHaveBeenCalledOnce();
+    expect(formActions.submit).not.toHaveBeenCalled();
+    expect(handleSubmit).not.toHaveBeenCalled();
+    expect(scrollToFirstError).toHaveBeenCalledOnce();
+    expect(scrollToFirstError).toHaveBeenCalledWith(errors);
+  });
 });
 
 describe('updateSchema', () => {
diff --git a/packages/@core/ui-kit/form-ui/__tests__/form-compatibility.test.ts b/packages/@core/ui-kit/form-ui/__tests__/form-compatibility.test.ts
new file mode 100644
index 00000000..0157800e
--- /dev/null
+++ b/packages/@core/ui-kit/form-ui/__tests__/form-compatibility.test.ts
@@ -0,0 +1,101 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { setupVbenForm } from '../src/config';
+import {
+  resetDeprecationWarnings,
+  warnDeprecatedOnce,
+} from '../src/deprecation';
+import { FormApi } from '../src/form-api';
+import { getFormRule } from '../src/rule-registry';
+
+afterEach(() => {
+  resetDeprecationWarnings();
+  vi.restoreAllMocks();
+});
+
+describe('form api compatibility', () => {
+  it('forwards defineRules and warns only once in development', async () => {
+    const warning = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const legacyRule = () => 'legacy error';
+
+    setupVbenForm({ defineRules: { legacy: legacyRule } });
+    setupVbenForm({ defineRules: { legacy: legacyRule } });
+
+    expect(warning).toHaveBeenCalledOnce();
+    expect(warning).toHaveBeenCalledWith(
+      '[Vben Form] `setupVbenForm({ defineRules })` is deprecated. Use `setupVbenForm({ rules })` instead.',
+    );
+    const registeredRule = getFormRule('legacy');
+    expect(registeredRule).toBeDefined();
+    if (!registeredRule) return;
+    expect(
+      await registeredRule('', [], {
+        field: { name: 'legacy' },
+        name: 'legacy',
+      }),
+    ).toBe('legacy error');
+  });
+
+  it('prefers the new rules option when both APIs define the same rule', async () => {
+    vi.spyOn(console, 'warn').mockImplementation(() => {});
+    setupVbenForm({
+      defineRules: { required: () => 'legacy error' },
+      rules: { required: () => 'new error' },
+    });
+
+    const registeredRule = getFormRule('required');
+    expect(registeredRule).toBeDefined();
+    if (!registeredRule) return;
+    expect(
+      await registeredRule('', [], {
+        field: { name: 'required' },
+        name: 'required',
+      }),
+    ).toBe('new error');
+  });
+
+  it('does not emit deprecation warnings in production', () => {
+    const warning = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+    warnDeprecatedOnce('legacy-api', 'deprecated', { production: true });
+
+    expect(warning).not.toHaveBeenCalled();
+  });
+
+  it('keeps legacy form methods and warns once for each name', async () => {
+    const warning = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const formApi = new FormApi();
+    const form = {
+      clearValidation: vi.fn(),
+      meta: {},
+      reset: vi.fn(),
+      submit: vi.fn(),
+      validate: vi.fn().mockResolvedValue({ errors: {}, valid: true }),
+      values: { name: 'Ada' },
+    } as any;
+    formApi.mount(form);
+
+    await formApi.resetForm();
+    await formApi.resetForm();
+    await formApi.resetValidate();
+    await formApi.submitForm();
+    await formApi.validateAndSubmitForm();
+
+    expect(form.reset).toHaveBeenCalledTimes(2);
+    expect(form.clearValidation).toHaveBeenCalledOnce();
+    expect(form.submit).toHaveBeenCalledOnce();
+    expect(warning).toHaveBeenCalledTimes(4);
+    expect(warning).toHaveBeenCalledWith(
+      '[Vben Form] `formApi.resetForm()` is deprecated. Use `formApi.reset()` instead.',
+    );
+    expect(warning).toHaveBeenCalledWith(
+      '[Vben Form] `formApi.resetValidate()` is deprecated. Use `formApi.clearValidation()` instead.',
+    );
+    expect(warning).toHaveBeenCalledWith(
+      '[Vben Form] `formApi.submitForm()` is deprecated. Use `formApi.submit()` instead.',
+    );
+    expect(warning).toHaveBeenCalledWith(
+      '[Vben Form] `formApi.validateAndSubmitForm()` is deprecated. Use `formApi.validateAndSubmit()` instead.',
+    );
+  });
+});
diff --git a/packages/@core/ui-kit/form-ui/__tests__/form-integration.test.ts b/packages/@core/ui-kit/form-ui/__tests__/form-integration.test.ts
new file mode 100644
index 00000000..2c435359
--- /dev/null
+++ b/packages/@core/ui-kit/form-ui/__tests__/form-integration.test.ts
@@ -0,0 +1,656 @@
+import type { VueWrapper } from '@vue/test-utils';
+
+import type { FormSchemaRuleType } from '../src/types';
+
+import { flushPromises, mount } from '@vue/test-utils';
+import { defineComponent, h, nextTick } from 'vue';
+
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
+import { z } from 'zod';
+
+import { setupVbenForm } from '../src/config';
+import { resetDeprecationWarnings } from '../src/deprecation';
+import { useVbenForm } from '../src/use-vben-form';
+
+const wrappers: VueWrapper[] = [];
+
+function createDeferred<T>() {
+  let resolvePromise: (value: T) => void = () => {};
+  const promise = new Promise<T>((resolve) => {
+    resolvePromise = resolve;
+  });
+  return { promise, resolve: resolvePromise };
+}
+
+const TestInput = defineComponent({
+  inheritAttrs: false,
+  props: {
+    eventMode: {
+      default: 'model-value',
+      type: String,
+    },
+  },
+  emits: ['change', 'update:modelValue', 'update:value'],
+  setup(props, { attrs, emit }) {
+    function handleInput(event: Event) {
+      const target = event.target;
+      if (!(target instanceof HTMLInputElement)) {
+        return;
+      }
+      if (props.eventMode === 'change-only') {
+        emit('change', event);
+        return;
+      }
+      if (props.eventMode === 'value-and-change') {
+        emit('update:value', target.value);
+        emit('change', event);
+        return;
+      }
+      emit('update:modelValue', target.value);
+    }
+
+    return () =>
+      h('input', {
+        ...attrs,
+        onInput: handleInput,
+        value: attrs.modelValue ?? '',
+      });
+  },
+});
+
+beforeAll(() => {
+  setupVbenForm({
+    config: {},
+    rules: {
+      required(value, _params, context) {
+        return value ? true : `${context.label} is required`;
+      },
+    },
+  });
+});
+
+afterEach(() => {
+  for (const wrapper of wrappers.splice(0)) {
+    wrapper.unmount();
+  }
+  vi.useRealTimers();
+  vi.restoreAllMocks();
+});
+
+describe('useVbenForm integration', () => {
+  it('uses model updates as the primary channel and preserves empty strings', async () => {
+    const validateValue = vi.fn();
+    const [Form, formApi] = useVbenForm({
+      schema: [
+        {
+          component: TestInput,
+          componentProps: { eventMode: 'value-and-change' },
+          defaultValue: 'initial',
+          fieldName: 'name',
+          modelPropName: 'value',
+          rules: z.string().superRefine((value) => validateValue(value)),
+        },
+      ],
+    });
+    const wrapper = mount(Form);
+    wrappers.push(wrapper);
+    await flushPromises();
+    const initialValidationCount = validateValue.mock.calls.length;
+
+    await wrapper.get('input').setValue('');
+    await flushPromises();
+
+    expect(await formApi.getValues()).toEqual({ name: '' });
+    expect(validateValue).toHaveBeenCalledTimes(initialValidationCount + 1);
+  });
+
+  it('supports a field-level change event fallback for legacy components', async () => {
+    const [Form, formApi] = useVbenForm({
+      schema: [
+        {
+          component: TestInput,
+          componentProps: { eventMode: 'change-only' },
+          changeEventFallback: true,
+          fieldName: 'name',
+          modelPropName: 'value',
+        },
+      ],
+    });
+    const wrapper = mount(Form);
+    wrappers.push(wrapper);
+    await flushPromises();
+
+    await wrapper.get('input').setValue('fallback');
+    await flushPromises();
+
+    expect(await formApi.getValues()).toEqual({ name: 'fallback' });
+  });
+
+  it('warns once for legacy dependency callbacks', async () => {
+    resetDeprecationWarnings();
+    const warning = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const [Form] = useVbenForm({
+      schema: [
+        {
+          component: TestInput,
+          dependencies: {
+            show: true,
+            triggerFields: ['toggle'],
+          },
+          fieldName: 'first',
+        },
+        {
+          component: TestInput,
+          dependencies: {
+            disabled: false,
+            triggerFields: ['toggle'],
+          },
+          fieldName: 'second',
+        },
+      ],
+    });
+    const wrapper = mount(Form);
+    wrappers.push(wrapper);
+    await flushPromises();
+
+    expect(warning).toHaveBeenCalledOnce();
+    expect(warning).toHaveBeenCalledWith(
+      '[Vben Form] Legacy dependency callbacks are deprecated. Use `dependencies.resolve(context)` instead.',
+    );
+  });
+
+  it('binds fields, renders accessible errors, and submits valid values', async () => {
+    const consoleError = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+    const handleSubmit = vi.fn();
+    const [Form, formApi] = useVbenForm({
+      handleSubmit,
+      schema: [
+        {
+          component: TestInput,
+          fieldName: 'name',
+          label: 'Name',
+          rules: z.string().min(1, 'Name is required'),
+          valueFormat: (value) => value.trim(),
+        },
+        {
+          component: TestInput,
+          fieldName: 'alias',
+          label: 'Alias',
+          rules: 'required',
+        },
+      ],
+    });
+    const wrapper = mount(Form, { attachTo: document.body });
+    wrappers.push(wrapper);
+    await flushPromises();
+
+    expect(await formApi.validate()).toEqual({
+      errors: {
+        alias: 'Alias is required',
+        name: 'Name is required',
+      },
+      valid: false,
+    });
+    await flushPromises();
+
+    const inputs = wrapper.findAll('input');
+    expect(inputs).toHaveLength(2);
+    expect(inputs[0]?.attributes('aria-invalid')).toBe('true');
+    expect(wrapper.text()).toContain('Name is required');
+    expect(wrapper.text()).toContain('Alias is required');
+
+    await inputs[0]?.setValue('Ada');
+    await formApi.setFieldValue('alias', 'Countess', true);
+    await flushPromises();
+    expect(wrapper.text()).not.toContain('Name is required');
+
+    expect(await formApi.validateField('name')).toEqual({
+      errors: {},
+      valid: true,
+    });
+    expect(await formApi.validateAndSubmit()).toEqual({
+      alias: 'Countess',
+      name: 'Ada',
+    });
+    expect(handleSubmit).toHaveBeenCalledOnce();
+    expect(handleSubmit).toHaveBeenCalledWith(
+      {
+        alias: 'Countess',
+        name: 'Ada',
+      },
+      {
+        alias: 'Countess',
+        name: 'Ada',
+      },
+    );
+    expect(consoleError).not.toHaveBeenCalled();
+  });
+
+  it('recomputes dependencies only from declared trigger fields', async () => {
+    const dependency = vi.fn((values: Record<string, any>) => {
+      return values.toggle === 'show';
+    });
+    const [Form, formApi] = useVbenForm({
+      schema: [
+        {
+          component: TestInput,
+          fieldName: 'toggle',
+          label: 'Toggle',
+        },
+        {
+          component: TestInput,
+          dependencies: {
+            if: dependency,
+            triggerFields: ['toggle'],
+          },
+          fieldName: 'details',
+          label: 'Details',
+        },
+      ],
+    });
+    const wrapper = mount(Form);
+    wrappers.push(wrapper);
+    await flushPromises();
+
+    expect(wrapper.find('input[name="details"]').exists()).toBe(false);
+    const initialCalls = dependency.mock.calls.length;
+
+    await formApi.setFieldValue('unrelated', 'value');
+    await flushPromises();
+    expect(dependency).toHaveBeenCalledTimes(initialCalls);
+
+    await formApi.setFieldValue('toggle', 'show');
+    await flushPromises();
+    expect(wrapper.find('input[name="details"]').exists()).toBe(true);
+    expect(dependency.mock.calls.length).toBeGreaterThan(initialCalls);
+  });
+
+  it('resolves dependency patches atomically from declared fields', async () => {
+    const pendingPatch = createDeferred<{
+      componentProps: { placeholder: string };
+      if: boolean;
+    }>();
+    const resolve = vi.fn(({ values }: { values: Record<string, any> }) => {
+      if (values.toggle === 'pending') {
+        return pendingPatch.promise;
+      }
+      return {
+        componentProps: { placeholder: 'initial' },
+        if: false,
+      };
+    });
+    const [Form, formApi] = useVbenForm({
+      schema: [
+        {
+          component: TestInput,
+          fieldName: 'toggle',
+          label: 'Toggle',
+        },
+        {
+          component: TestInput,
+          dependencies: {
+            resolve,
+            triggerFields: ['toggle'],
+          },
+          fieldName: 'details',
+          label: 'Details',
+        },
+      ],
+    });
+    const wrapper = mount(Form);
+    wrappers.push(wrapper);
+    await flushPromises();
+
+    expect(wrapper.find('input[name="details"]').exists()).toBe(false);
+    const initialCalls = resolve.mock.calls.length;
+
+    await formApi.setFieldValue('unrelated', 'value');
+    await flushPromises();
+    expect(resolve).toHaveBeenCalledTimes(initialCalls);
+
+    await formApi.setFieldValue('toggle', 'pending');
+    await flushPromises();
+    expect(wrapper.find('input[name="details"]').exists()).toBe(false);
+
+    pendingPatch.resolve({
+      componentProps: { placeholder: 'resolved' },
+      if: true,
+    });
+    await flushPromises();
+
+    const details = wrapper.find('input[name="details"]');
+    expect(details.exists()).toBe(true);
+    expect(details.attributes('placeholder')).toBe('resolved');
+  });
+
+  it('applies required rules enabled by dependencies after mount', async () => {
+    const [Form, formApi] = useVbenForm({
+      schema: [
+        {
+          component: TestInput,
+          fieldName: 'toggle',
+          label: 'Toggle',
+        },
+        {
+          component: TestInput,
+          dependencies: {
+            required(values) {
+              return values.toggle === true;
+            },
+            triggerFields: ['toggle'],
+          },
+          fieldName: 'details',
+          label: 'Details',
+        },
+      ],
+    });
+    const wrapper = mount(Form);
+    wrappers.push(wrapper);
+    await flushPromises();
+
+    expect(await formApi.validate()).toEqual({ errors: {}, valid: true });
+
+    await formApi.setFieldValue('toggle', true);
+    await flushPromises();
+    expect(await formApi.validate()).toEqual({
+      errors: { details: 'Details is required' },
+      valid: false,
+    });
+
+    await formApi.setFieldValue('details', 'ready');
+    expect(await formApi.validate()).toEqual({ errors: {}, valid: true });
+  });
+
+  it('allows dependencies to disable static rules with null', async () => {
+    const [Form, formApi] = useVbenForm({
+      schema: [
+        {
+          component: TestInput,
+          fieldName: 'toggle',
+          label: 'Toggle',
+        },
+        {
+          component: TestInput,
+          dependencies: {
+            rules(values) {
+              return values.toggle === true
+                ? z.string().min(1, 'Details is required')
+                : null;
+            },
+            triggerFields: ['toggle'],
+          },
+          fieldName: 'details',
+          label: 'Details',
+          rules: z.string().min(1, 'Static details rule'),
+        },
+      ],
+    });
+    const wrapper = mount(Form);
+    wrappers.push(wrapper);
+    await flushPromises();
+
+    expect(await formApi.validate()).toEqual({ errors: {}, valid: true });
+
+    await formApi.setFieldValue('toggle', true);
+    await flushPromises();
+    expect(await formApi.validate()).toEqual({
+      errors: { details: 'Details is required' },
+      valid: false,
+    });
+  });
+
+  it('ignores stale async dependency rule results', async () => {
+    const requiredRules = createDeferred<FormSchemaRuleType>();
+    const optionalRules = createDeferred<FormSchemaRuleType>();
+    const [Form, formApi] = useVbenForm({
+      schema: [
+        {
+          component: TestInput,
+          fieldName: 'mode',
+          label: 'Mode',
+        },
+        {
+          component: TestInput,
+          dependencies: {
+            rules(values) {
+              if (values.mode === 'required') {
+                return requiredRules.promise;
+              }
+              if (values.mode === 'optional') {
+                return optionalRules.promise;
+              }
+              return null;
+            },
+            triggerFields: ['mode'],
+          },
+          fieldName: 'details',
+          label: 'Details',
+        },
+      ],
+    });
+    const wrapper = mount(Form);
+    wrappers.push(wrapper);
+    await flushPromises();
+
+    await formApi.setFieldValue('mode', 'required');
+    await flushPromises();
+    await formApi.setFieldValue('mode', 'optional');
+    await flushPromises();
+
+    optionalRules.resolve(null);
+    await flushPromises();
+    requiredRules.resolve(z.string().min(1, 'Stale required rule'));
+    await flushPromises();
+
+    expect(await formApi.validate()).toEqual({ errors: {}, valid: true });
+  });
+
+  it('keeps array values and rendered rows aligned after mutations', async () => {
+    const [Form, formApi] = useVbenForm({
+      schema: [
+        {
+          children: [
+            {
+              component: TestInput,
+              fieldName: 'name',
+              label: 'Name',
+              rules: z.string().min(1, 'Name is required'),
+            },
+          ],
+          defaultValue: [{ name: 'Ada' }],
+          fieldName: 'contacts',
+          type: 'array',
+        },
+      ],
+    });
+    const wrapper = mount(Form);
+    wrappers.push(wrapper);
+    await flushPromises();
+
+    expect(wrapper.findAll('input')).toHaveLength(1);
+    formApi.form.pushFieldValue('contacts', { name: 'Grace' });
+    await flushPromises();
+    expect(wrapper.findAll('input')).toHaveLength(2);
+    expect(await formApi.getValues()).toEqual({
+      contacts: [{ name: 'Ada' }, { name: 'Grace' }],
+    });
+
+    await formApi.form.removeFieldValue('contacts', 0);
+    await flushPromises();
+    expect(wrapper.findAll('input')).toHaveLength(1);
+    expect(await formApi.getValues()).toEqual({
+      contacts: [{ name: 'Grace' }],
+    });
+  });
+
+  it('scopes resolve dependencies to array rows', async () => {
+    const resolve = vi.fn(({ schema }: Record<string, any>) => ({
+      componentProps: {
+        disabled: schema.row?.role === 'viewer',
+      },
+    }));
+    const [Form] = useVbenForm({
+      schema: [
+        {
+          children: [
+            {
+              component: TestInput,
+              fieldName: 'role',
+              label: 'Role',
+            },
+            {
+              component: TestInput,
+              dependencies: {
+                resolve,
+                triggerFields: ['role'],
+              },
+              fieldName: 'phone',
+              label: 'Phone',
+            },
+          ],
+          defaultValue: [{ phone: '', role: 'viewer' }],
+          fieldName: 'contacts',
+          type: 'array',
+        },
+      ],
+    });
+    const wrapper = mount(Form);
+    wrappers.push(wrapper);
+    await flushPromises();
+
+    expect(resolve).toHaveBeenCalledWith(
+      expect.objectContaining({
+        schema: expect.objectContaining({
+          fieldName: 'contacts[0].phone',
+          row: { phone: '', role: 'viewer' },
+          rowIndex: 0,
+          rowPath: 'contacts[0]',
+        }),
+      }),
+    );
+    expect(
+      wrapper.get('input[name="contacts[0].phone"]').attributes('disabled'),
+    ).toBeDefined();
+  });
+
+  it('reports changed fields and submits valid changes', async () => {
+    vi.useFakeTimers();
+    const handleSubmit = vi.fn();
+    const handleValuesChange = vi.fn();
+    const [Form, formApi] = useVbenForm({
+      changeDebouncedTime: 0,
+      handleSubmit,
+      handleValuesChange,
+      schema: [
+        {
+          component: TestInput,
+          fieldName: 'name',
+          label: 'Name',
+          rules: z.string().min(1, 'Name is required'),
+          valueFormat: (value) => value.trim(),
+        },
+      ],
+      submitOnChange: true,
+    });
+    const wrapper = mount(Form);
+    wrappers.push(wrapper);
+    await flushPromises();
+
+    await formApi.setFieldValue('name', ' Ada ');
+    await nextTick();
+    await vi.runAllTimersAsync();
+    await flushPromises();
+
+    expect(handleValuesChange).toHaveBeenCalledWith(
+      { name: ' Ada ' },
+      ['name'],
+      expect.any(Function),
+    );
+    const valuesChangeCall = handleValuesChange.mock.calls.at(0);
+    expect(valuesChangeCall).toBeDefined();
+    if (!valuesChangeCall) return;
+    expect(valuesChangeCall[2]()).toEqual({ name: 'Ada' });
+    expect(handleSubmit).toHaveBeenCalledWith(
+      { name: 'Ada' },
+      { name: ' Ada ' },
+    );
+  });
+
+  it('respects blur and change validation triggers', async () => {
+    const [Form] = useVbenForm({
+      schema: [
+        {
+          component: TestInput,
+          defaultValue: 'valid',
+          fieldName: 'name',
+          formFieldProps: {
+            validateOn: ['blur'],
+          },
+          label: 'Name',
+          rules: z.string().min(1, 'Name is required'),
+        },
+      ],
+    });
+    const wrapper = mount(Form);
+    wrappers.push(wrapper);
+    await flushPromises();
+    const input = wrapper.get('input');
+
+    await input.setValue('');
+    await flushPromises();
+    expect(wrapper.text()).not.toContain('Name is required');
+
+    await input.trigger('blur');
+    await flushPromises();
+    expect(wrapper.text()).toContain('Name is required');
+
+    await input.setValue('Ada');
+    await flushPromises();
+    expect(wrapper.text()).not.toContain('Name is required');
+
+    await input.trigger('blur');
+    await flushPromises();
+    expect(wrapper.text()).not.toContain('Name is required');
+  });
+
+  it('ignores stale asynchronous validation results', async () => {
+    let resolveTaken: (() => void) | undefined;
+    const usernameRule = z.string().refine(async (value) => {
+      if (value === 'taken') {
+        await new Promise<void>((resolve) => {
+          resolveTaken = resolve;
+        });
+      }
+      return value !== 'taken';
+    }, 'Username is already taken');
+    const [Form, formApi] = useVbenForm({
+      schema: [
+        {
+          component: TestInput,
+          fieldName: 'username',
+          label: 'Username',
+          rules: usernameRule,
+        },
+      ],
+    });
+    const wrapper = mount(Form);
+    wrappers.push(wrapper);
+    await flushPromises();
+    const input = wrapper.get('input');
+
+    await input.setValue('taken');
+    await vi.waitFor(() => {
+      expect(resolveTaken).toBeDefined();
+    });
+    if (!resolveTaken) return;
+
+    await input.setValue('available');
+    await flushPromises();
+    resolveTaken();
+    await flushPromises();
+
+    expect(formApi.form.getFieldError('username')).toBeUndefined();
+  });
+});
diff --git a/packages/@core/ui-kit/form-ui/__tests__/form-runtime.test.ts b/packages/@core/ui-kit/form-ui/__tests__/form-runtime.test.ts
new file mode 100644
index 00000000..e32c9f33
--- /dev/null
+++ b/packages/@core/ui-kit/form-ui/__tests__/form-runtime.test.ts
@@ -0,0 +1,236 @@
+import type { FormActions } from '../src/types';
+
+import { flushPromises, mount } from '@vue/test-utils';
+import { defineComponent, h, nextTick, watch } from 'vue';
+
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { useFormRuntime } from '../src/form-runtime';
+
+const wrappers: ReturnType<typeof mount>[] = [];
+
+function mountRuntime(
+  defaultValues: Record<string, any>,
+  validator?: (input: { value: any }) => Promise<string | undefined>,
+) {
+  let form: FormActions | undefined;
+  const RuntimeHarness = defineComponent({
+    setup() {
+      const runtime = useFormRuntime(defaultValues);
+      form = runtime;
+      return () => {
+        if (!validator) {
+          return h('div');
+        }
+        return h(
+          runtime.fieldComponent,
+          {
+            name: 'name',
+            validators: {
+              onSubmitAsync: validator,
+            },
+          },
+          {
+            default: ({ field }: Record<string, any>) =>
+              h('input', {
+                name: 'name',
+                onBlur: field.handleBlur,
+                onInput: (event: Event) => {
+                  const target = event.target;
+                  if (target instanceof HTMLInputElement) {
+                    field.handleChange(target.value);
+                  }
+                },
+                value: field.state.value,
+              }),
+          },
+        );
+      };
+    },
+  });
+  const wrapper = mount(RuntimeHarness);
+  wrappers.push(wrapper);
+  return { form, wrapper };
+}
+
+afterEach(() => {
+  for (const wrapper of wrappers.splice(0)) {
+    wrapper.unmount();
+  }
+});
+
+describe('form runtime', () => {
+  it('updates values and resets to defaults', async () => {
+    const { form } = mountRuntime({ name: 'initial' });
+    expect(form).toBeDefined();
+    if (!form) return;
+
+    await form.setFieldValue('name', 'updated');
+    await nextTick();
+    expect(form.values).toEqual({ name: 'updated' });
+
+    await form.reset();
+    await nextTick();
+    expect(form.values).toEqual({ name: 'initial' });
+  });
+
+  it('preserves empty string field updates', async () => {
+    const { form, wrapper } = mountRuntime(
+      { name: 'initial' },
+      async () => undefined,
+    );
+    expect(form).toBeDefined();
+    if (!form) return;
+
+    await wrapper.find('input').setValue('');
+    await nextTick();
+
+    expect(form.values).toEqual({ name: '' });
+  });
+
+  it('exposes reactive selectors', async () => {
+    const { form } = mountRuntime({ name: 'initial' });
+    expect(form).toBeDefined();
+    if (!form) return;
+    const name = form.useSelector((state) => state.values.name);
+
+    await form.setFieldValue('name', 'updated');
+    await nextTick();
+    expect(name.value).toBe('updated');
+  });
+
+  it('updates only changed field value selectors', async () => {
+    const { form } = mountRuntime({ email: '', name: 'initial' });
+    expect(form).toBeDefined();
+    if (!form) return;
+    const name = form.useFieldValue('name');
+    const selectedValues = form.useFieldValues(['name'] as const);
+    const onNameChange = vi.fn();
+    const stop = watch(name, onNameChange);
+
+    await form.setFieldValue('email', 'ada@example.com');
+    await nextTick();
+    expect(onNameChange).not.toHaveBeenCalled();
+    expect(selectedValues.value).toEqual(['initial']);
+
+    await form.setFieldValue('name', 'Ada');
+    await nextTick();
+    expect(onNameChange).toHaveBeenCalledOnce();
+    expect(name.value).toBe('Ada');
+    expect(selectedValues.value).toEqual(['Ada']);
+    stop();
+  });
+
+  it('exposes reactive field error selectors', async () => {
+    const { form } = mountRuntime({ email: '', name: '' });
+    expect(form).toBeDefined();
+    if (!form) return;
+    const nameError = form.useFieldError('name');
+    const onNameErrorChange = vi.fn();
+    const stop = watch(nameError, onNameErrorChange);
+
+    form.setFieldError('email', 'Email error');
+    await nextTick();
+    expect(onNameErrorChange).not.toHaveBeenCalled();
+
+    form.setFieldError('name', 'Name error');
+    await nextTick();
+    expect(nameError.value).toBe('Name error');
+    expect(onNameErrorChange).toHaveBeenCalledOnce();
+    stop();
+  });
+
+  it('validates mounted fields and clears stale errors', async () => {
+    const { form } = mountRuntime({ name: '' }, async ({ value }) => {
+      return value ? undefined : 'Name is required';
+    });
+    expect(form).toBeDefined();
+    if (!form) return;
+
+    expect(await form.validate()).toEqual({
+      errors: { name: 'Name is required' },
+      valid: false,
+    });
+
+    await form.setFieldValue('name', 'Ada');
+    await flushPromises();
+    expect(await form.validateField('name')).toEqual({
+      errors: {},
+      valid: true,
+    });
+    expect(form.isFieldValid('name')).toBe(true);
+  });
+
+  it('sets and clears manual field errors', async () => {
+    const { form } = mountRuntime({ name: '' }, async () => undefined);
+    expect(form).toBeDefined();
+    if (!form) return;
+
+    form.setFieldError('name', 'Server error');
+    await nextTick();
+    expect(form.getFieldError('name')).toBe('Server error');
+    expect(form.meta.valid).toBe(false);
+
+    form.setFieldError('name');
+    await nextTick();
+    expect(form.getFieldError('name')).toBeUndefined();
+    expect(form.meta.valid).toBe(true);
+  });
+
+  it('clears manual errors when resetting the form', async () => {
+    const { form } = mountRuntime({ name: '' });
+    expect(form).toBeDefined();
+    if (!form) return;
+
+    form.setFieldError('name', 'Server error');
+    await nextTick();
+    expect(form.errors).toEqual({ name: 'Server error' });
+
+    await form.reset();
+    await nextTick();
+    expect(form.errors).toEqual({});
+    expect(form.meta.valid).toBe(true);
+  });
+
+  it('invalidates in-flight async validation when clearing validation', async () => {
+    let resolveValidation: ((error: string | undefined) => void) | undefined;
+    let notifyValidationStarted: (() => void) | undefined;
+    const validationStarted = new Promise<void>((resolve) => {
+      notifyValidationStarted = resolve;
+    });
+    const validator = vi.fn(() => {
+      notifyValidationStarted?.();
+      return new Promise<string | undefined>((resolve) => {
+        resolveValidation = resolve;
+      });
+    });
+    const { form } = mountRuntime({ name: '' }, validator);
+    expect(form).toBeDefined();
+    if (!form) return;
+
+    const pendingValidation = form.validateField('name');
+    await validationStarted;
+    form.clearValidation();
+    resolveValidation?.('Name is already used');
+    await pendingValidation;
+    await flushPromises();
+
+    expect(form.errors).toEqual({});
+    expect(form.meta.validating).toBe(false);
+  });
+
+  it('clears only the requested field validation state', async () => {
+    const { form } = mountRuntime({ email: '', name: '' });
+    expect(form).toBeDefined();
+    if (!form) return;
+
+    form.setFieldError('name', 'Name error');
+    form.setFieldError('email', 'Email error');
+    await nextTick();
+
+    form.clearValidation('name');
+    await nextTick();
+
+    expect(form.errors).toEqual({ email: 'Email error' });
+  });
+});
diff --git a/packages/@core/ui-kit/form-ui/__tests__/form-types.test.ts b/packages/@core/ui-kit/form-ui/__tests__/form-types.test.ts
new file mode 100644
index 00000000..d1945a22
--- /dev/null
+++ b/packages/@core/ui-kit/form-ui/__tests__/form-types.test.ts
@@ -0,0 +1,153 @@
+import type {
+  BaseFormComponentType,
+  ExtendedFormApi,
+  FormActions,
+  FormContextApi,
+  FormFieldOptions,
+  FormItemDependencies,
+  FormValidationResult,
+  VbenFormAdapterOptions,
+  VbenFormProps,
+} from '../src/types';
+
+import { describe, expectTypeOf, it } from 'vitest';
+
+import { useVbenForm } from '../src/use-vben-form';
+
+interface AccountFormValues {
+  email: string;
+  profile: {
+    nickname: string;
+  };
+  roles: string[];
+}
+
+describe('form public types', () => {
+  it('keeps the compatibility alias and stable method signatures', () => {
+    expectTypeOf<FormActions>().toEqualTypeOf<FormContextApi>();
+    expectTypeOf<FormActions['setFieldValue']>()
+      .parameter(0)
+      .toMatchTypeOf<string>();
+    expectTypeOf<
+      FormActions['validate']
+    >().returns.resolves.toEqualTypeOf<FormValidationResult>();
+    expectTypeOf<Parameters<FormActions['validate']>>().toEqualTypeOf<[]>();
+    expectTypeOf<Parameters<FormActions['validateField']>>().toEqualTypeOf<
+      [fieldName: string]
+    >();
+  });
+
+  it('accepts both new and deprecated rule registration options', () => {
+    expectTypeOf<VbenFormAdapterOptions>().toMatchTypeOf<{
+      defineRules?: Record<string, unknown>;
+      rules?: Record<string, unknown>;
+    }>();
+  });
+
+  it('supports resolve and legacy dependency contracts', () => {
+    const resolveDependencies: FormItemDependencies<AccountFormValues> = {
+      resolve({ actions, controller, schema, values }) {
+        expectTypeOf(values).toEqualTypeOf<Readonly<AccountFormValues>>();
+        expectTypeOf(actions).toEqualTypeOf<FormActions<AccountFormValues>>();
+        expectTypeOf(controller).toEqualTypeOf<
+          ExtendedFormApi<AccountFormValues>
+        >();
+        expectTypeOf(schema.fieldName).toEqualTypeOf<string | undefined>();
+        return { disabled: !values.email, rules: null };
+      },
+      triggerFields: ['email'],
+    };
+    const legacyDependencies: FormItemDependencies<AccountFormValues> = {
+      show(values) {
+        expectTypeOf(values).toEqualTypeOf<Partial<AccountFormValues>>();
+        return Boolean(values.email);
+      },
+      triggerFields: ['email'],
+    };
+    const fieldOptions: FormFieldOptions = {
+      asyncDebounceMs: 200,
+      validateOn: ['blur', 'change'],
+    };
+
+    expectTypeOf(resolveDependencies).toMatchTypeOf<
+      FormItemDependencies<AccountFormValues>
+    >();
+    expectTypeOf(legacyDependencies).toMatchTypeOf<
+      FormItemDependencies<AccountFormValues>
+    >();
+    expectTypeOf(fieldOptions).toMatchTypeOf<FormFieldOptions>();
+  });
+
+  it('propagates form value types through public APIs and callbacks', () => {
+    const options: VbenFormProps<
+      BaseFormComponentType,
+      Record<never, never>,
+      AccountFormValues
+    > = {
+      handleSubmit(values, rawValues) {
+        expectTypeOf(values).toEqualTypeOf<AccountFormValues>();
+        expectTypeOf(rawValues).toEqualTypeOf<Readonly<AccountFormValues>>();
+      },
+      handleValuesChange(values, _fieldsChanged, getFormattedValues) {
+        expectTypeOf(values).toEqualTypeOf<Readonly<AccountFormValues>>();
+        expectTypeOf(getFormattedValues()).toEqualTypeOf<AccountFormValues>();
+      },
+      schema: [],
+    };
+    const [Form, formApi] = useVbenForm<AccountFormValues>(options);
+
+    expectTypeOf(formApi).toEqualTypeOf<ExtendedFormApi<AccountFormValues>>();
+
+    function assertContextApi(
+      contextApi: FormContextApi<AccountFormValues>,
+      typedFormApi: ExtendedFormApi<AccountFormValues>,
+    ) {
+      expectTypeOf(
+        typedFormApi.getValues(),
+      ).resolves.toEqualTypeOf<AccountFormValues>();
+      expectTypeOf(
+        typedFormApi.getRawValues(),
+      ).resolves.toEqualTypeOf<AccountFormValues>();
+      expectTypeOf(typedFormApi.getValueSnapshot()).resolves.toEqualTypeOf<{
+        rawValues: Readonly<AccountFormValues>;
+        values: AccountFormValues;
+      }>();
+      expectTypeOf(typedFormApi.setValues)
+        .parameter(0)
+        .toEqualTypeOf<Partial<AccountFormValues>>();
+      expectTypeOf(typedFormApi.form.values).toEqualTypeOf<AccountFormValues>();
+      expectTypeOf(contextApi.getFieldValue('email')).toEqualTypeOf<string>();
+      expectTypeOf(
+        contextApi.useSelector((state) => state.values.profile.nickname),
+      ).toEqualTypeOf<Readonly<import('vue').Ref<string>>>();
+    }
+
+    expectTypeOf(assertContextApi).toBeFunction();
+
+    type FormSlots = InstanceType<typeof Form>['$slots'];
+    type EmailSlot = NonNullable<FormSlots['email']>;
+    type EmailSlotProps = Parameters<EmailSlot>[0];
+    type DefaultSlot = NonNullable<FormSlots['default']>;
+    type DefaultSlotProps = Parameters<DefaultSlot>[0];
+
+    expectTypeOf<
+      EmailSlotProps['field']['state']['value']
+    >().toEqualTypeOf<string>();
+    expectTypeOf<EmailSlotProps['values']>().toEqualTypeOf<AccountFormValues>();
+    expectTypeOf<EmailSlotProps['formApi']>().toEqualTypeOf<
+      ExtendedFormApi<AccountFormValues>
+    >();
+    expectTypeOf<
+      DefaultSlotProps['values']
+    >().toEqualTypeOf<AccountFormValues>();
+  });
+
+  it('exposes canonical names alongside deprecated aliases', () => {
+    expectTypeOf<FormContextApi['reset']>().toEqualTypeOf<
+      FormContextApi['resetForm']
+    >();
+    expectTypeOf<FormContextApi['submit']>().toEqualTypeOf<
+      FormContextApi['submitForm']
+    >();
+  });
+});
diff --git a/packages/@core/ui-kit/form-ui/__tests__/form-value-transform.test.ts b/packages/@core/ui-kit/form-ui/__tests__/form-value-transform.test.ts
new file mode 100644
index 00000000..463a19e2
--- /dev/null
+++ b/packages/@core/ui-kit/form-ui/__tests__/form-value-transform.test.ts
@@ -0,0 +1,90 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  applyFormValueFormats,
+  formatFormValues,
+  transformRangeTimeValues,
+} from '../src/form-value-transform';
+
+describe('form value transforms', () => {
+  it('maps array and range fields without mutating input values', () => {
+    const input = {
+      period: [1_710_000_000_000, 1_720_000_000_000],
+      tags: ['admin', 'editor'],
+    };
+
+    const result = transformRangeTimeValues(
+      input,
+      [['period', ['startTime', 'endTime'], null]],
+      ['tags'],
+    );
+
+    expect(result).toEqual({
+      endTime: 1_720_000_000_000,
+      startTime: 1_710_000_000_000,
+      tags: 'admin,editor',
+    });
+    expect(input).toEqual({
+      period: [1_710_000_000_000, 1_720_000_000_000],
+      tags: ['admin', 'editor'],
+    });
+  });
+
+  it('formats array children with row and root paths', () => {
+    const values = {
+      contacts: [{ name: ' Ada ' }, { name: ' Grace ' }],
+    };
+    const schema = [
+      {
+        children: [
+          {
+            component: 'text',
+            fieldName: 'name',
+            valueFormat(value: string, setValue: any, _values: any, ctx: any) {
+              setValue('$row.normalizedName', value.trim());
+              setValue('$root.lastRow', ctx.rowIndex);
+            },
+          },
+        ],
+        fieldName: 'contacts',
+        type: 'array',
+      },
+    ] as any;
+
+    const result = applyFormValueFormats(values, schema);
+
+    expect(result).toEqual({
+      contacts: [{ normalizedName: 'Ada' }, { normalizedName: 'Grace' }],
+      lastRow: 1,
+    });
+    expect(values).toEqual({
+      contacts: [{ name: ' Ada ' }, { name: ' Grace ' }],
+    });
+  });
+
+  it('runs the unified formatting pipeline in a stable order', () => {
+    const result = formatFormValues(
+      {
+        period: [1, 2],
+        tags: ['admin', 'editor'],
+        title: ' Ada ',
+      },
+      [
+        {
+          component: 'text',
+          fieldName: 'title',
+          valueFormat: (value: string) => value.trim(),
+        },
+      ],
+      [['period', ['startTime', 'endTime'], null]],
+      ['tags'],
+    );
+
+    expect(result).toEqual({
+      endTime: 2,
+      startTime: 1,
+      tags: 'admin,editor',
+      title: 'Ada',
+    });
+  });
+});
diff --git a/packages/@core/ui-kit/form-ui/__tests__/zod-v4-schema.test.ts b/packages/@core/ui-kit/form-ui/__tests__/zod-v4-schema.test.ts
new file mode 100644
index 00000000..133bf57e
--- /dev/null
+++ b/packages/@core/ui-kit/form-ui/__tests__/zod-v4-schema.test.ts
@@ -0,0 +1,69 @@
+import { describe, expect, it } from 'vitest';
+import { z, ZodString } from 'zod';
+import { getDefaultsForSchema } from 'zod-defaults';
+
+import {
+  getBaseRules,
+  getDefaultValueInZodStack,
+} from '../src/form-render/helper';
+
+describe('zod v4 schema helpers', () => {
+  it('unwraps optional and default schemas with public APIs', () => {
+    const schema = z.string().default('default value').optional();
+
+    expect(getBaseRules(schema)).toBeInstanceOf(ZodString);
+    expect(getDefaultValueInZodStack(schema)).toBe('default value');
+  });
+
+  it('unwraps the input side of a transform pipe', () => {
+    const schema = z.string().transform((value) => value.length);
+
+    expect(getBaseRules(schema)).toBeInstanceOf(ZodString);
+  });
+
+  it('returns undefined when a schema rejects undefined', () => {
+    expect(getDefaultValueInZodStack(z.string())).toBeUndefined();
+  });
+
+  it('does not throw for an asynchronous default pipeline', () => {
+    const schema = z
+      .string()
+      .default('default value')
+      .transform(async (value) => value.toUpperCase());
+
+    expect(getDefaultValueInZodStack(schema)).toBeUndefined();
+  });
+
+  it('uses zod v4 error callbacks for required and invalid inputs', () => {
+    const schema = z.number({
+      error: (issue) =>
+        issue.input === undefined ? 'required' : 'invalid number',
+    });
+
+    expect(schema.safeParse(undefined).error?.issues[0]?.message).toBe(
+      'required',
+    );
+    expect(schema.safeParse('1').error?.issues[0]?.message).toBe(
+      'invalid number',
+    );
+  });
+
+  it('extracts defaults from intersections without private schema access', () => {
+    const schema = z.intersection(
+      z.object({ enabled: z.boolean().default(true), name: z.string() }),
+      z.object({ count: z.number(), note: z.string().default('note') }),
+    );
+
+    expect(getDefaultsForSchema(schema)).toEqual({
+      count: 0,
+      enabled: true,
+      name: '',
+      note: 'note',
+    });
+  });
+
+  it('keeps nullable and coerce input semantics explicit', () => {
+    expect(z.string().nullable().safeParse(undefined).success).toBe(false);
+    expect(z.coerce.number().parse('42')).toBe(42);
+  });
+});
diff --git a/packages/@core/ui-kit/form-ui/package.json b/packages/@core/ui-kit/form-ui/package.json
index 8becac7f..87e5b46b 100644
--- a/packages/@core/ui-kit/form-ui/package.json
+++ b/packages/@core/ui-kit/form-ui/package.json
@@ -40,19 +40,19 @@
     }
   },
   "dependencies": {
+    "@tanstack/vue-form": "catalog:",
     "@vben-core/composables": "workspace:*",
     "@vben-core/icons": "workspace:*",
     "@vben-core/shadcn-ui": "workspace:*",
     "@vben-core/shared": "workspace:*",
     "@vben-core/typings": "workspace:*",
-    "@vee-validate/zod": "catalog:",
     "@vueuse/core": "catalog:",
-    "vee-validate": "catalog:",
     "vue": "catalog:",
     "zod": "catalog:",
     "zod-defaults": "catalog:"
   },
   "devDependencies": {
+    "@vue/test-utils": "catalog:",
     "unplugin-vue": "catalog:"
   }
 }
diff --git a/packages/@core/ui-kit/form-ui/src/components/form-actions.vue b/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
index d09e1a60..1fd5e748 100644
--- a/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
+++ b/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
@@ -38,13 +38,7 @@ async function handleSubmit(e: Event) {
     return;
   }
 
-  const { valid } = await props.formApi.validate();
-  if (!valid) {
-    return;
-  }
-
-  const values = toRaw(await props.formApi.getValues()) ?? {};
-  await props.handleSubmit?.(values);
+  await props.formApi.validateAndSubmit();
 }
 
 async function handleReset(e: Event) {
@@ -57,7 +51,7 @@ async function handleReset(e: Event) {
   if (isFunction(props.handleReset)) {
     await props.handleReset?.(values);
   } else {
-    form.resetForm();
+    form.reset();
   }
 }
 
diff --git a/packages/@core/ui-kit/form-ui/src/components/form-field-array.vue b/packages/@core/ui-kit/form-ui/src/components/form-field-array.vue
index f2b2da4d..963e547a 100644
--- a/packages/@core/ui-kit/form-ui/src/components/form-field-array.vue
+++ b/packages/@core/ui-kit/form-ui/src/components/form-field-array.vue
@@ -10,10 +10,9 @@ import {
   VbenIconButton,
   VbenRenderContent,
 } from '@vben-core/shadcn-ui';
-import { cn, set } from '@vben-core/shared/utils';
-
-import { useFieldArray } from 'vee-validate';
+import { cn, isObject, set } from '@vben-core/shared/utils';
 
+import { injectRenderFormProps } from '../form-render/context';
 import FormField from '../form-render/form-field.vue';
 import { createArrayChildSchema } from '../form-render/schema';
 
@@ -40,9 +39,7 @@ const props = withDefaults(
     max?: number;
     /** 最少行数 */
     min?: number;
-    /**
-     * 字段路径，由外层 FormField 通过 componentField 透传（vee-validate 的 name）
-     */
+    /** 字段路径，由外层 FormField 通过 componentField 透传 */
     name?: string;
     /**
      * 列定义，每一列就是一个子字段（复用 FormSchema）
@@ -68,10 +65,19 @@ const props = withDefaults(
 );
 
 const arrayPath = computed(() => props.name);
+const formRenderProps = injectRenderFormProps();
+const form = formRenderProps.form;
+if (!form) {
+  throw new Error('Form api is required in <VbenFormFieldArray />');
+}
+const formActions = form;
+const arrayValue = formActions.useFieldValue(props.name);
+const rowKeys = new WeakMap<object, string>();
+let nextRowKey = 0;
 
-const { fields, push, remove } = useFieldArray<Record<string, any>>(
-  () => arrayPath.value,
-);
+const fields = computed<Record<string, any>[]>(() => {
+  return Array.isArray(arrayValue.value) ? arrayValue.value : [];
+});
 
 const canAdd = computed(() => fields.value.length < props.max);
 const canRemove = computed(() => fields.value.length > props.min);
@@ -93,12 +99,12 @@ function buildDefaultRow(): Record<string, any> {
 
   const row: Record<string, any> = {};
   props.schema.forEach((col) => {
-    const value =
-      Reflect.has(col, 'defaultValue') && col.defaultValue !== undefined
-        ? col.defaultValue
-        : 'type' in col && col.type === 'array'
-          ? []
-          : null;
+    let value: any = null;
+    if (Reflect.has(col, 'defaultValue') && col.defaultValue !== undefined) {
+      value = col.defaultValue;
+    } else if ('type' in col && col.type === 'array') {
+      value = [];
+    }
     set(row, col.fieldName, value);
   });
   return row;
@@ -108,14 +114,28 @@ function addRow() {
   if (props.disabled || !canAdd.value) {
     return;
   }
-  push(buildDefaultRow());
+  formActions.pushFieldValue(arrayPath.value, buildDefaultRow());
 }
 
 function removeRow(index: number) {
   if (props.disabled || !canRemove.value) {
     return;
   }
-  remove(index);
+  void formActions.removeFieldValue(arrayPath.value, index);
+}
+
+function getRowKey(row: Record<string, any>, index: number) {
+  if (!isObject(row)) {
+    return `${arrayPath.value}-${index}`;
+  }
+  const existingKey = rowKeys.get(row);
+  if (existingKey) {
+    return existingKey;
+  }
+  nextRowKey += 1;
+  const key = `${arrayPath.value}-${nextRowKey}`;
+  rowKeys.set(row, key);
+  return key;
 }
 
 function rowSchemas(index: number) {
@@ -160,7 +180,7 @@ function rowSchemas(index: number) {
 
       <div
         v-for="(entry, index) in fields"
-        :key="entry.key"
+        :key="getRowKey(entry, index)"
         class="border-border/60 border-b p-3 last:border-b-0 sm:grid sm:p-0"
         :style="gridStyle"
       >
diff --git a/packages/@core/ui-kit/form-ui/src/config.ts b/packages/@core/ui-kit/form-ui/src/config.ts
index 9448d2ac..350fe319 100644
--- a/packages/@core/ui-kit/form-ui/src/config.ts
+++ b/packages/@core/ui-kit/form-ui/src/config.ts
@@ -18,9 +18,9 @@ import {
 } from '@vben-core/shadcn-ui';
 import { globalShareState } from '@vben-core/shared/global-state';
 
-import { defineRule } from 'vee-validate';
-
 import VbenFormFieldArray from './components/form-field-array.vue';
+import { warnDeprecatedOnce } from './deprecation';
+import { registerFormRules } from './rule-registry';
 
 const DEFAULT_MODEL_PROP_NAME = 'modelValue';
 
@@ -46,24 +46,25 @@ export const COMPONENT_BIND_EVENT_MAP: Partial<
 export function setupVbenForm<
   T extends BaseFormComponentType = BaseFormComponentType,
 >(options: VbenFormAdapterOptions<T>) {
-  const { config, defineRules } = options;
+  const { config, defineRules, rules } = options;
 
-  const {
-    disabledOnChangeListener = true,
-    disabledOnInputListener = true,
-    emptyStateValue = undefined,
-  } = (config || {}) as FormCommonConfig;
+  const { changeEventFallback = false, emptyStateValue = undefined } =
+    (config || {}) as FormCommonConfig;
 
   Object.assign(DEFAULT_FORM_COMMON_CONFIG, {
-    disabledOnChangeListener,
-    disabledOnInputListener,
+    changeEventFallback,
     emptyStateValue,
   });
 
   if (defineRules) {
-    for (const key of Object.keys(defineRules)) {
-      defineRule(key, defineRules[key as never]);
-    }
+    warnDeprecatedOnce(
+      'setup-vben-form-define-rules',
+      '[Vben Form] `setupVbenForm({ defineRules })` is deprecated. Use `setupVbenForm({ rules })` instead.',
+    );
+    registerFormRules(defineRules);
+  }
+  if (rules) {
+    registerFormRules(rules);
   }
 
   const baseModelPropName =
diff --git a/packages/@core/ui-kit/form-ui/src/deprecation.ts b/packages/@core/ui-kit/form-ui/src/deprecation.ts
new file mode 100644
index 00000000..ed848ceb
--- /dev/null
+++ b/packages/@core/ui-kit/form-ui/src/deprecation.ts
@@ -0,0 +1,18 @@
+const warnedDeprecations = new Set<string>();
+
+export function resetDeprecationWarnings() {
+  warnedDeprecations.clear();
+}
+
+export function warnDeprecatedOnce(
+  key: string,
+  message: string,
+  options: { production?: boolean } = {},
+) {
+  const production = options.production ?? import.meta.env.PROD;
+  if (production || warnedDeprecations.has(key)) {
+    return;
+  }
+  warnedDeprecations.add(key);
+  console.warn(message);
+}
diff --git a/packages/@core/ui-kit/form-ui/src/field-name.ts b/packages/@core/ui-kit/form-ui/src/field-name.ts
index 0e2a2da7..c6d92909 100644
--- a/packages/@core/ui-kit/form-ui/src/field-name.ts
+++ b/packages/@core/ui-kit/form-ui/src/field-name.ts
@@ -1,3 +1,63 @@
+import { get, isObject, set } from '@vben-core/shared/utils';
+
+export function deleteValueByFieldName(
+  values: Record<string, any>,
+  fieldName: string,
+) {
+  const { pathSegments, rawKey } = resolveFieldNamePath(fieldName);
+  if (rawKey) {
+    Reflect.deleteProperty(values, rawKey);
+    return;
+  }
+
+  if (pathSegments.length === 0) {
+    Reflect.deleteProperty(values, fieldName);
+    return;
+  }
+
+  let target: Record<string, any> | undefined = values;
+  for (const segment of pathSegments.slice(0, -1)) {
+    if (!target || !isObject(target)) {
+      return;
+    }
+    target = target[segment];
+  }
+
+  const lastPathSegment = pathSegments.at(-1);
+  if (!target || !isObject(target) || !lastPathSegment) {
+    return;
+  }
+  Reflect.deleteProperty(target, lastPathSegment);
+}
+
+export function getValueByFieldName(
+  values: Record<string, any>,
+  fieldName: string,
+) {
+  const { rawKey } = resolveFieldNamePath(fieldName);
+  return rawKey ? values[rawKey] : get(values, fieldName);
+}
+
+export function resolveChildUpdateFieldName(
+  parentFieldName: string,
+  fieldName: string,
+) {
+  if (fieldName.startsWith(`${parentFieldName}.`)) {
+    return fieldName.slice(parentFieldName.length + 1);
+  }
+
+  const indexedPrefix = `${parentFieldName}[`;
+  if (!fieldName.startsWith(indexedPrefix)) {
+    return;
+  }
+
+  const closeIndex = fieldName.indexOf(']', indexedPrefix.length);
+  if (closeIndex === -1 || fieldName[closeIndex + 1] !== '.') {
+    return;
+  }
+  return fieldName.slice(closeIndex + 2);
+}
+
 export function resolveFieldNamePath(fieldName: string) {
   if (fieldName.startsWith('[') && fieldName.endsWith(']')) {
     const rawKey = fieldName.slice(1, -1);
@@ -12,3 +72,35 @@ export function resolveFieldNamePath(fieldName: string) {
     rawKey: undefined,
   };
 }
+
+export function resolveValueFormatFieldName(
+  fieldName: string,
+  parentPath?: string,
+) {
+  if (!parentPath) {
+    return fieldName;
+  }
+  if (fieldName.startsWith('$root.')) {
+    return fieldName.slice('$root.'.length);
+  }
+  if (fieldName.startsWith('$row.')) {
+    return `${parentPath}.${fieldName.slice('$row.'.length)}`;
+  }
+  if (fieldName === parentPath || fieldName.startsWith(`${parentPath}.`)) {
+    return fieldName;
+  }
+  return `${parentPath}.${fieldName}`;
+}
+
+export function setValueByFieldName(
+  values: Record<string, any>,
+  fieldName: string,
+  value: any,
+) {
+  const { rawKey } = resolveFieldNamePath(fieldName);
+  if (rawKey) {
+    values[rawKey] = value;
+    return;
+  }
+  set(values, fieldName, value);
+}
diff --git a/packages/@core/ui-kit/form-ui/src/form-api.ts b/packages/@core/ui-kit/form-ui/src/form-api.ts
index ba42a6e9..0f8c8598 100644
--- a/packages/@core/ui-kit/form-ui/src/form-api.ts
+++ b/packages/@core/ui-kit/form-ui/src/form-api.ts
@@ -1,15 +1,17 @@
-import type {
-  FormState,
-  GenericObject,
-  ResetFormOpts,
-  ValidationOptions,
-} from 'vee-validate';
-
 import type { ComponentPublicInstance } from 'vue';
 
-import type { Recordable } from '@vben-core/typings';
-
-import type { FormActions, FormSchema, VbenFormProps } from './types';
+import type {
+  BaseFormComponentType,
+  FormActions,
+  FormFieldName,
+  FormFieldValue,
+  FormResetOptions,
+  FormResetState,
+  FormSchema,
+  FormValues,
+  FormValueSnapshot,
+  VbenFormProps,
+} from './types';
 
 import { isRef, toRaw } from 'vue';
 
@@ -17,25 +19,36 @@ import { Store } from '@vben-core/shared/store';
 import {
   bindMethods,
   cloneDeep,
-  createMerge,
-  formatDate,
-  get,
   isDate,
   isDayjsObject,
   isFunction,
   isObject,
   mergeWithArrayOverride,
-  set,
   StateHandler,
 } from '@vben-core/shared/utils';
 
+import { warnDeprecatedOnce } from './deprecation';
 import { resolveFieldNamePath } from './field-name';
-import {
-  getFormArraySchemaChildren,
-  resolveArrayChildFieldName,
-} from './form-render/schema';
+import { updateFormSchemaList } from './form-render/schema';
+import { formatFormValues } from './form-value-transform';
 
-function getDefaultState(): VbenFormProps {
+type FormApiProps<
+  TValues extends FormValues,
+  T extends BaseFormComponentType,
+  P extends Record<string, any>,
+> = VbenFormProps<T, P, TValues>;
+
+type FormApiSchema<
+  TValues extends FormValues,
+  T extends BaseFormComponentType,
+  P extends Record<string, any>,
+> = FormSchema<T, P, TValues>;
+
+function getDefaultState<
+  TValues extends FormValues,
+  T extends BaseFormComponentType,
+  P extends Record<string, any>,
+>(): FormApiProps<TValues, T, P> {
   return {
     actionWrapperClass: '',
     collapsed: false,
@@ -59,15 +72,19 @@ function getDefaultState(): VbenFormProps {
   };
 }
 
-export class FormApi {
+export class FormApi<
+  TValues extends FormValues = FormValues,
+  T extends BaseFormComponentType = BaseFormComponentType,
+  P extends Record<string, any> = Record<never, never>,
+> {
   // private api: Pick<VbenFormProps, 'handleReset' | 'handleSubmit'>;
-  public form = {} as FormActions;
+  public form = {} as FormActions<TValues>;
   isMounted = false;
 
-  public state: null | VbenFormProps = null;
+  public state: FormApiProps<TValues, T, P> | null = null;
   stateHandler: StateHandler;
 
-  public store: Store<VbenFormProps>;
+  public store: Store<FormApiProps<TValues, T, P>>;
 
   /**
    * 组件实例映射
@@ -75,16 +92,16 @@ export class FormApi {
   private componentRefMap: Map<string, unknown> = new Map();
 
   // 最后一次点击提交时的表单值
-  private latestSubmissionValues: null | Recordable<any> = null;
+  private latestSubmissionValues: null | Partial<TValues> = null;
 
-  private prevState: null | VbenFormProps = null;
+  private prevState: FormApiProps<TValues, T, P> | null = null;
 
-  constructor(options: VbenFormProps = {}) {
+  constructor(options: FormApiProps<TValues, T, P> = {}) {
     const { ...storeState } = options;
 
-    const defaultState = getDefaultState();
+    const defaultState = getDefaultState<TValues, T, P>();
 
-    this.store = new Store<VbenFormProps>({
+    this.store = new Store<FormApiProps<TValues, T, P>>({
       ...defaultState,
       ...storeState,
     });
@@ -100,6 +117,24 @@ export class FormApi {
     bindMethods(this);
   }
 
+  async clearValidation(
+    fieldNames?: FormFieldName<TValues> | FormFieldName<TValues>[],
+  ) {
+    const form = await this.getForm();
+    form.clearValidation(fieldNames);
+  }
+
+  formatValues<TResult extends FormValues = TValues>(
+    rawValues: Readonly<FormValues>,
+  ) {
+    return formatFormValues(
+      toRaw(rawValues),
+      this.state?.schema ?? [],
+      this.state?.fieldMappingTime,
+      this.state?.arrayToStringFields,
+    ) as TResult;
+  }
+
   /**
    * 获取字段组件实例
    * @param fieldName 字段名
@@ -161,29 +196,41 @@ export class FormApi {
     return this.latestSubmissionValues || {};
   }
 
+  async getRawValues<TResult extends FormValues = TValues>() {
+    const form = await this.getForm();
+    return cloneDeep(toRaw(form.values ?? {})) as unknown as TResult;
+  }
+
   getState() {
     return this.state;
   }
 
-  async getValues<T = Recordable<any>>() {
+  async getValues<TResult extends FormValues = TValues>() {
     const form = await this.getForm();
-    const values = form.values
-      ? this.handleRangeTimeValue(cloneDeep(toRaw(form.values)))
-      : {};
-    return this.handleValueFormat(values) as T;
+    return this.formatValues<TResult>(toRaw(form.values ?? {}));
   }
 
-  async isFieldValid(fieldName: string) {
+  async getValueSnapshot<TResult extends FormValues = TValues>(): Promise<
+    FormValueSnapshot<TResult>
+  > {
+    const rawValues = await this.getRawValues<TResult>();
+    return {
+      rawValues,
+      values: this.formatValues<TResult>(rawValues),
+    };
+  }
+
+  async isFieldValid(fieldName: FormFieldName<TValues>) {
     const form = await this.getForm();
     return form.isFieldValid(fieldName);
   }
 
-  merge(formApi: FormApi) {
+  merge(formApi: FormApi<any, any, any>) {
     const chain = [this, formApi];
     const proxy = new Proxy(formApi, {
       get(target: any, prop: any) {
         if (prop === 'merge') {
-          return (nextFormApi: FormApi) => {
+          return (nextFormApi: FormApi<any, any, any>) => {
             chain.push(nextFormApi);
             return proxy;
           };
@@ -218,16 +265,19 @@ export class FormApi {
     return proxy;
   }
 
-  mount(formActions: FormActions, componentRefMap?: Map<string, unknown>) {
+  mount(
+    formActions: FormActions<TValues>,
+    componentRefMap?: Map<string, unknown>,
+  ) {
     if (!this.isMounted) {
-      Object.assign(this.form, formActions);
+      this.form = formActions;
       this.stateHandler.setConditionTrue();
       const initialValues = this.form.values
-        ? this.handleRangeTimeValue(cloneDeep(toRaw(this.form.values)))
+        ? this.formatValues(toRaw(this.form.values))
         : {};
       this.setLatestSubmissionValues({
-        ...this.handleValueFormat(initialValues),
-      });
+        ...initialValues,
+      } as Partial<TValues>);
       this.componentRefMap =
         componentRefMap ?? this.componentRefMap ?? new Map();
       this.isMounted = true;
@@ -252,20 +302,27 @@ export class FormApi {
   /**
    * 重置表单
    */
-  async resetForm(
-    state?: Partial<FormState<GenericObject>> | undefined,
-    opts?: Partial<ResetFormOpts>,
-  ) {
+  async reset(state?: FormResetState<TValues>, opts?: FormResetOptions) {
     const form = await this.getForm();
-    return form.resetForm(state, opts);
+    return form.reset(state, opts);
   }
 
+  /** @deprecated Use `reset` instead. */
+  async resetForm(state?: FormResetState<TValues>, opts?: FormResetOptions) {
+    warnDeprecatedOnce(
+      'form-api-reset-form',
+      '[Vben Form] `formApi.resetForm()` is deprecated. Use `formApi.reset()` instead.',
+    );
+    return this.reset(state, opts);
+  }
+
+  /** @deprecated Use `clearValidation` instead. */
   async resetValidate() {
-    const form = await this.getForm();
-    const fields = Object.keys(form.errors.value);
-    fields.forEach((field) => {
-      form.setFieldError(field, undefined);
-    });
+    warnDeprecatedOnce(
+      'form-api-reset-validate',
+      '[Vben Form] `formApi.resetValidate()` is deprecated. Use `formApi.clearValidation()` instead.',
+    );
+    return this.clearValidation();
   }
 
   /**
@@ -273,7 +330,6 @@ export class FormApi {
    * @param errors 验证错误对象
    */
   scrollToFirstError(errors: Record<string, any> | string) {
-    // https://github.com/logaretm/vee-validate/discussions/3835
     const firstErrorFieldName =
       typeof errors === 'string' ? errors : Object.keys(errors)[0];
 
@@ -285,7 +341,7 @@ export class FormApi {
       `[name="${firstErrorFieldName}"]`,
     ) as HTMLElement;
 
-    // 如果通过 name 属性找不到，尝试通过组件引用查找, 正常情况下不会走到这，怕哪天 vee-validate 改了 name 属性有个兜底的
+    // 如果通过 name 属性找不到，尝试通过组件引用查找
     if (!el) {
       const componentRef = this.getFieldComponentRef(firstErrorFieldName);
       if (componentRef && componentRef.$el instanceof HTMLElement) {
@@ -303,19 +359,27 @@ export class FormApi {
     }
   }
 
-  async setFieldValue(field: string, value: any, shouldValidate?: boolean) {
+  async setFieldValue<TFieldName extends FormFieldName<TValues>>(
+    field: TFieldName,
+    value: FormFieldValue<TValues, NoInfer<TFieldName>>,
+    shouldValidate?: boolean,
+  ) {
     const form = await this.getForm();
-    form.setFieldValue(field, value, shouldValidate);
+    await form.setFieldValue(field, value, shouldValidate);
   }
 
-  setLatestSubmissionValues(values: null | Recordable<any>) {
-    this.latestSubmissionValues = { ...toRaw(values) };
+  setLatestSubmissionValues(values: null | Partial<TValues>) {
+    this.latestSubmissionValues = {
+      ...toRaw(values),
+    } as Partial<TValues>;
   }
 
   setState(
     stateOrFn:
-      | ((prev: VbenFormProps) => Partial<VbenFormProps>)
-      | Partial<VbenFormProps>,
+      | ((
+          prev: FormApiProps<TValues, T, P>,
+        ) => Partial<FormApiProps<TValues, T, P>>)
+      | Partial<FormApiProps<TValues, T, P>>,
   ) {
     if (isFunction(stateOrFn)) {
       this.store.setState((prev) => {
@@ -333,7 +397,7 @@ export class FormApi {
    * @param shouldValidate
    */
   async setValues(
-    fields: Record<string, any>,
+    fields: Partial<TValues>,
     filterFields: boolean = true,
     shouldValidate: boolean = false,
   ) {
@@ -343,41 +407,67 @@ export class FormApi {
       return;
     }
 
-    /**
-     * 合并算法有待改进，目前的算法不支持object类型的值。
-     * antd的日期时间相关组件的值类型为dayjs对象
-     * element-plus的日期时间相关组件的值类型可能为Date对象
-     * 以上两种类型需要排除深度合并
-     */
-    const fieldMergeFn = createMerge((obj, key, value) => {
-      if (key in obj) {
-        obj[key] =
-          !Array.isArray(obj[key]) &&
-          isObject(obj[key]) &&
-          !isDayjsObject(obj[key]) &&
-          !isDate(obj[key])
-            ? fieldMergeFn(value, obj[key])
-            : value;
+    const schemaFieldPaths = (this.state?.schema ?? []).map(
+      (schema) => resolveFieldNamePath(schema.fieldName).pathSegments,
+    );
+    const filterValue = (
+      value: unknown,
+      parentPath: string[] = [],
+    ): unknown => {
+      if (
+        !isObject(value) ||
+        Array.isArray(value) ||
+        isDate(value) ||
+        isDayjsObject(value)
+      ) {
+        return value;
       }
-      return true;
-    });
-    const filteredFields = fieldMergeFn(fields, form.values);
-    form.setValues(filteredFields, shouldValidate);
+
+      const result: Record<string, unknown> = {};
+      for (const [key, currentValue] of Object.entries(value)) {
+        const currentPath = [...parentPath, key];
+        const matchingPaths = schemaFieldPaths.filter(
+          (schemaPath) =>
+            schemaPath.length >= currentPath.length &&
+            currentPath.every(
+              (pathSegment, index) => schemaPath[index] === pathSegment,
+            ),
+        );
+        if (matchingPaths.length === 0) {
+          continue;
+        }
+
+        result[key] = matchingPaths.some(
+          (schemaPath) => schemaPath.length === currentPath.length,
+        )
+          ? currentValue
+          : filterValue(currentValue, currentPath);
+      }
+      return result;
+    };
+    const filteredFields = filterValue(fields) as Partial<TValues>;
+    form.setValues(filteredFields as Partial<TValues>, shouldValidate);
   }
 
-  async submitForm(e?: Event) {
+  async submit(e?: Event) {
     e?.preventDefault();
     e?.stopPropagation();
     const form = await this.getForm();
-    await form.submitForm();
-    const rawValues = toRaw(await this.getValues());
-    await this.state?.handleSubmit?.(rawValues);
+    await form.submit();
+    return this.submitValues();
+  }
 
-    return rawValues;
+  /** @deprecated Use `submit` instead. */
+  async submitForm(e?: Event) {
+    warnDeprecatedOnce(
+      'form-api-submit-form',
+      '[Vben Form] `formApi.submitForm()` is deprecated. Use `formApi.submit()` instead.',
+    );
+    return this.submit(e);
   }
 
   unmount() {
-    this.form?.resetForm?.();
+    this.form?.reset?.();
     // this.state = null;
     this.componentRefMap = new Map();
     this.latestSubmissionValues = null;
@@ -385,8 +475,8 @@ export class FormApi {
     this.stateHandler.reset();
   }
 
-  updateSchema(schema: Partial<FormSchema>[]) {
-    const updated: Partial<FormSchema>[] = [...schema];
+  updateSchema(schema: Partial<FormApiSchema<TValues, T, P>>[]) {
+    const updated: Partial<FormApiSchema<TValues, T, P>>[] = [...schema];
     const hasField = updated.every(
       (item) => Reflect.has(item, 'fieldName') && item.fieldName,
     );
@@ -397,163 +487,55 @@ export class FormApi {
       );
       return;
     }
-    const currentSchema = this.updateSchemaList(
+    const currentSchema = updateFormSchemaList(
       [...(this.state?.schema ?? [])],
       updated,
     );
     this.setState({ schema: currentSchema });
   }
 
-  async validate(opts?: Partial<ValidationOptions>) {
+  async validate() {
     const form = await this.getForm();
 
-    const validateResult = await form.validate(opts);
+    const validateResult = await form.validate();
 
-    if (Object.keys(validateResult?.errors ?? {}).length > 0) {
-      console.error('validate error', validateResult?.errors);
-
-      if (this.state?.scrollToFirstError) {
-        this.scrollToFirstError(validateResult.errors);
-      }
+    if (
+      Object.keys(validateResult?.errors ?? {}).length > 0 &&
+      this.state?.scrollToFirstError
+    ) {
+      this.scrollToFirstError(validateResult.errors);
     }
     return validateResult;
   }
 
+  async validateAndSubmit() {
+    const { valid } = await this.validate();
+    if (!valid) return;
+    return this.submitValues();
+  }
+
+  /** @deprecated Use `validateAndSubmit` instead. */
   async validateAndSubmitForm() {
-    const form = await this.getForm();
-    const { valid, errors } = await form.validate();
-    if (!valid) {
-      if (this.state?.scrollToFirstError) {
-        this.scrollToFirstError(errors);
-      }
-      return;
-    }
-    return await this.submitForm();
+    warnDeprecatedOnce(
+      'form-api-validate-and-submit-form',
+      '[Vben Form] `formApi.validateAndSubmitForm()` is deprecated. Use `formApi.validateAndSubmit()` instead.',
+    );
+    return this.validateAndSubmit();
   }
 
-  async validateField(fieldName: string, opts?: Partial<ValidationOptions>) {
+  async validateField(fieldName: FormFieldName<TValues>) {
     const form = await this.getForm();
-    const validateResult = await form.validateField(fieldName, opts);
+    const validateResult = await form.validateField(fieldName);
 
-    if (Object.keys(validateResult?.errors ?? {}).length > 0) {
-      console.error('validate error', validateResult?.errors);
-
-      if (this.state?.scrollToFirstError) {
-        this.scrollToFirstError(fieldName);
-      }
+    if (
+      Object.keys(validateResult?.errors ?? {}).length > 0 &&
+      this.state?.scrollToFirstError
+    ) {
+      this.scrollToFirstError(fieldName);
     }
     return validateResult;
   }
 
-  private applyValueFormatBySchemas(
-    schemas: FormSchema[],
-    values: Record<string, any>,
-    parentPath?: string,
-    parentContext?: {
-      arrayField?: string;
-      row?: Record<string, any>;
-      rowIndex?: number;
-      rowPath?: string;
-    },
-  ) {
-    schemas.forEach((schema) => {
-      const fieldName = parentPath
-        ? resolveArrayChildFieldName(parentPath, schema.fieldName)
-        : schema.fieldName;
-      const row =
-        parentPath && parentContext?.rowPath
-          ? this.resolveValueByFieldName(values, parentContext.rowPath)
-          : parentContext?.row;
-      const schemaContext = {
-        ...parentContext,
-        fieldName,
-        originalFieldName: schema.fieldName,
-        rootValues: values,
-        row,
-      };
-
-      const children = getFormArraySchemaChildren(schema);
-      if (children.length > 0) {
-        const arrayValue = this.resolveValueByFieldName(values, fieldName);
-        if (Array.isArray(arrayValue)) {
-          arrayValue.forEach((rowValue, index) => {
-            const rowPath = `${fieldName}[${index}]`;
-            this.applyValueFormatBySchemas(
-              children as FormSchema[],
-              values,
-              rowPath,
-              {
-                arrayField: fieldName,
-                row: rowValue,
-                rowIndex: index,
-                rowPath,
-              },
-            );
-          });
-        }
-      }
-
-      if (schema.valueFormat) {
-        const value = this.resolveValueByFieldName(values, fieldName);
-
-        this.deleteValueByFieldName(values, fieldName);
-
-        const formattedValue = schema.valueFormat(
-          value,
-          (key, nextValue) => {
-            this.setValueByFieldName(
-              values,
-              this.resolveValueFormatFieldName(key, parentPath),
-              nextValue,
-            );
-          },
-          values,
-          schemaContext,
-        );
-
-        if (formattedValue !== undefined) {
-          this.setValueByFieldName(values, fieldName, formattedValue);
-        }
-      }
-    });
-  }
-
-  private deleteValueByFieldName(
-    values: Record<string, any>,
-    fieldName: string,
-  ) {
-    const { pathSegments, rawKey } = resolveFieldNamePath(fieldName);
-    if (rawKey) {
-      Reflect.deleteProperty(values, rawKey);
-      return;
-    }
-
-    if (!pathSegments || pathSegments.length === 0) {
-      Reflect.deleteProperty(values, fieldName);
-      return;
-    }
-
-    let target: Record<string, any> | undefined = values;
-
-    for (const segment of pathSegments.slice(0, -1)) {
-      if (!target || !isObject(target)) {
-        return;
-      }
-      target = target[segment];
-    }
-
-    if (!target || !isObject(target)) {
-      return;
-    }
-
-    const lastPathSegment = pathSegments.at(-1);
-    if (!lastPathSegment) {
-      return;
-    }
-
-    Reflect.deleteProperty(target, lastPathSegment);
-  }
-
   private async getForm() {
     if (!this.isMounted) {
       // 等待form挂载
@@ -565,266 +547,11 @@ export class FormApi {
     return this.form;
   }
 
-  private handleMultiFields = (originValues: Record<string, any>) => {
-    const arrayToStringFields = this.state?.arrayToStringFields;
-    if (!arrayToStringFields || !Array.isArray(arrayToStringFields)) {
-      return;
-    }
-
-    const processFields = (fields: string[], separator: string = ',') => {
-      this.processFields(fields, separator, originValues, (value, sep) => {
-        if (Array.isArray(value)) {
-          return value.join(sep);
-        } else if (typeof value === 'string') {
-          // 处理空字符串的情况
-          if (value === '') {
-            return [];
-          }
-          // 处理复杂分隔符的情况
-          const escapedSeparator = sep.replaceAll(
-            /[.*+?^${}()|[\]\\]/g,
-            String.raw`\$&`,
-          );
-          return value.split(new RegExp(escapedSeparator));
-        } else {
-          return value;
-        }
-      });
-    };
-
-    // 处理简单数组格式 ['field1', 'field2', ';'] 或 ['field1', 'field2']
-    if (arrayToStringFields.every((item) => typeof item === 'string')) {
-      const lastItem =
-        arrayToStringFields[arrayToStringFields.length - 1] || '';
-      const fields =
-        lastItem.length === 1
-          ? arrayToStringFields.slice(0, -1)
-          : arrayToStringFields;
-      const separator = lastItem.length === 1 ? lastItem : ',';
-      processFields(fields, separator);
-      return;
-    }
-
-    // 处理嵌套数组格式 [['field1'], ';']
-    arrayToStringFields.forEach((fieldConfig) => {
-      if (Array.isArray(fieldConfig)) {
-        const [fields, separator = ','] = fieldConfig;
-        // 根据类型定义，fields 应该始终是字符串数组
-        if (!Array.isArray(fields)) {
-          console.warn(
-            `Invalid field configuration: fields should be an array of strings, got ${typeof fields}`,
-          );
-          return;
-        }
-        processFields(fields, separator);
-      }
-    });
-  };
-
-  private handleRangeTimeValue = (originValues: Record<string, any>) => {
-    const values = { ...originValues };
-    const fieldMappingTime = this.state?.fieldMappingTime;
-
-    this.handleMultiFields(values);
-    if (!fieldMappingTime || !Array.isArray(fieldMappingTime)) {
-      return values;
-    }
-
-    fieldMappingTime.forEach(
-      ([field, [startTimeKey, endTimeKey], format = 'YYYY-MM-DD']) => {
-        if (startTimeKey && endTimeKey && values[field] === null) {
-          Reflect.deleteProperty(values, startTimeKey);
-          Reflect.deleteProperty(values, endTimeKey);
-          // delete values[startTimeKey];
-          // delete values[endTimeKey];
-        }
-
-        if (!values[field]) {
-          Reflect.deleteProperty(values, field);
-          // delete values[field];
-          return;
-        }
-
-        const [startTime, endTime] = values[field];
-        if (format === null) {
-          values[startTimeKey] = startTime;
-          values[endTimeKey] = endTime;
-        } else if (isFunction(format)) {
-          values[startTimeKey] = format(startTime, startTimeKey);
-          values[endTimeKey] = format(endTime, endTimeKey);
-        } else {
-          const [startTimeFormat, endTimeFormat] = Array.isArray(format)
-            ? format
-            : [format, format];
-
-          values[startTimeKey] = startTime
-            ? formatDate(startTime, startTimeFormat)
-            : undefined;
-          values[endTimeKey] = endTime
-            ? formatDate(endTime, endTimeFormat)
-            : undefined;
-        }
-        // delete values[field];
-        Reflect.deleteProperty(values, field);
-      },
-    );
+  private async submitValues() {
+    const { rawValues, values } = await this.getValueSnapshot();
+    this.setLatestSubmissionValues(values);
+    await this.state?.handleSubmit?.(values, rawValues);
     return values;
-  };
-
-  private handleValueFormat = (originValues: Record<string, any>) => {
-    const values = { ...originValues };
-    this.applyValueFormatBySchemas(this.state?.schema ?? [], values);
-
-    return values;
-  };
-
-  private processFields = (
-    fields: string[],
-    separator: string,
-    originValues: Record<string, any>,
-    transformFn: (value: any, separator: string) => any,
-  ) => {
-    fields.forEach((field) => {
-      const value = originValues[field];
-      if (value === undefined || value === null) {
-        return;
-      }
-      originValues[field] = transformFn(value, separator);
-    });
-  };
-
-  private resolveChildUpdateFieldName(
-    parentFieldName: string,
-    fieldName: string,
-  ) {
-    if (fieldName.startsWith(`${parentFieldName}.`)) {
-      return fieldName.slice(parentFieldName.length + 1);
-    }
-
-    const indexedPrefix = `${parentFieldName}[`;
-    if (!fieldName.startsWith(indexedPrefix)) {
-      return;
-    }
-
-    const closeIndex = fieldName.indexOf(']', indexedPrefix.length);
-    if (closeIndex === -1 || fieldName[closeIndex + 1] !== '.') {
-      return;
-    }
-
-    return fieldName.slice(closeIndex + 2);
-  }
-
-  private resolveValueByFieldName(
-    values: Record<string, any>,
-    fieldName: string,
-  ) {
-    const { rawKey } = resolveFieldNamePath(fieldName);
-    if (rawKey) {
-      return values[rawKey];
-    }
-
-    return get(values, fieldName);
-  }
-
-  private resolveValueFormatFieldName(fieldName: string, parentPath?: string) {
-    if (!parentPath) {
-      return fieldName;
-    }
-
-    if (fieldName.startsWith('$root.')) {
-      return fieldName.slice('$root.'.length);
-    }
-
-    if (fieldName.startsWith('$row.')) {
-      return `${parentPath}.${fieldName.slice('$row.'.length)}`;
-    }
-
-    if (fieldName === parentPath || fieldName.startsWith(`${parentPath}.`)) {
-      return fieldName;
-    }
-
-    return `${parentPath}.${fieldName}`;
-  }
-
-  private setSchemaChildren(schema: FormSchema, children: FormSchema[]) {
-    if ('children' in schema && Array.isArray(schema.children)) {
-      return {
-        ...schema,
-        children,
-      } as FormSchema;
-    }
-
-    if (
-      !isFunction(schema.componentProps) &&
-      schema.componentProps &&
-      Array.isArray((schema.componentProps as Record<string, any>).schema)
-    ) {
-      return {
-        ...schema,
-        componentProps: {
-          ...(schema.componentProps as Record<string, any>),
-          schema: children,
-        },
-      } as FormSchema;
-    }
-
-    return schema;
-  }
-
-  private setValueByFieldName(
-    values: Record<string, any>,
-    fieldName: string,
-    value: any,
-  ) {
-    const { rawKey } = resolveFieldNamePath(fieldName);
-    if (rawKey) {
-      values[rawKey] = value;
-      return;
-    }
-
-    set(values, fieldName, value);
-  }
-
-  private updateSchemaList(
-    currentSchema: FormSchema[],
-    updated: Partial<FormSchema>[],
-  ): FormSchema[] {
-    return currentSchema.map((schema): FormSchema => {
-      const exactUpdatedData = updated.find(
-        (item) => item.fieldName === schema.fieldName,
-      );
-      if (exactUpdatedData) {
-        return mergeWithArrayOverride(exactUpdatedData, schema) as FormSchema;
-      }
-
-      const children = getFormArraySchemaChildren(schema);
-      if (children.length === 0) {
-        return schema;
-      }
-
-      const childUpdates = updated
-        .map((item) => {
-          const fieldName = item.fieldName
-            ? this.resolveChildUpdateFieldName(schema.fieldName, item.fieldName)
-            : undefined;
-          return fieldName
-            ? ({
-                ...item,
-                fieldName,
-              } as Partial<FormSchema>)
-            : undefined;
-        })
-        .filter(Boolean) as Partial<FormSchema>[];
-
-      if (childUpdates.length === 0) {
-        return schema;
-      }
-
-      return this.setSchemaChildren(
-        schema,
-        this.updateSchemaList(children as FormSchema[], childUpdates),
-      );
-    });
   }
 
   private updateState() {
@@ -839,7 +566,10 @@ export class FormApi {
         (item) => !currentFields.has(item.fieldName),
       );
       for (const schema of deletedSchema) {
-        this.form?.setFieldValue?.(schema.fieldName, undefined);
+        this.form?.setFieldValue?.(
+          schema.fieldName,
+          undefined as FormFieldValue<TValues, string>,
+        );
       }
     }
   }
diff --git a/packages/@core/ui-kit/form-ui/src/form-render/dependencies.ts b/packages/@core/ui-kit/form-ui/src/form-render/dependencies.ts
index 8eb656ea..a19aafc6 100644
--- a/packages/@core/ui-kit/form-ui/src/form-render/dependencies.ts
+++ b/packages/@core/ui-kit/form-ui/src/form-render/dependencies.ts
@@ -1,20 +1,56 @@
 import type {
   ExtendedFormApi,
+  FormDependenciesResolveContext,
+  FormDependenciesResolvedState,
   FormItemDependencies,
+  FormItemDependenciesLegacy,
+  FormItemDependenciesResolve,
+  FormSchemaContext,
   FormSchemaRuleType,
   MaybeComponentProps,
 } from '../types';
 
-import { computed, isRef, ref, watch } from 'vue';
+import { computed, isRef, onScopeDispose, shallowRef, watch } from 'vue';
 
-import { get, isBoolean, isFunction } from '@vben-core/shared/utils';
-
-import { useFormValues } from 'vee-validate';
+import {
+  cloneDeep,
+  get,
+  isBoolean,
+  isEqual,
+  isFunction,
+} from '@vben-core/shared/utils';
 
+import { warnDeprecatedOnce } from '../deprecation';
 import { resolveFieldNamePath } from '../field-name';
 import { injectFormProps } from '../use-form-context';
 import { injectRenderFormProps } from './context';
 
+interface DependencyState {
+  dynamicComponentProps: MaybeComponentProps;
+  dynamicHelp: FormDependenciesResolvedState['help'];
+  dynamicHelpResolved: boolean;
+  dynamicRenderComponentContent: FormDependenciesResolvedState['renderComponentContent'];
+  dynamicRenderComponentContentResolved: boolean;
+  dynamicRules: FormSchemaRuleType | undefined;
+  dynamicRulesResolved: boolean;
+  isDisabled: boolean;
+  isIf: boolean;
+  isRequired: boolean;
+  isShow: boolean;
+}
+
+const legacyDependencyKeys = [
+  'componentProps',
+  'disabled',
+  'if',
+  'required',
+  'rules',
+  'show',
+  'trigger',
+] as const;
+
+const mixedDependenciesWarnings = new WeakSet<object>();
+
 /**
  * 解析Nested Objects对应的字段值
  * @param values 表单值
@@ -24,7 +60,7 @@ function resolveValueByFieldName(
   values: Record<string, any>,
   fieldName: string,
 ) {
-  // vee-validate：[] 表示禁用嵌套
+  // [] 表示禁用嵌套
   const { rawKey } = resolveFieldNamePath(fieldName);
   if (rawKey) {
     return values[rawKey];
@@ -32,11 +68,106 @@ function resolveValueByFieldName(
 
   return get(values, fieldName);
 }
+
+function createDependencyState(
+  patch: FormDependenciesResolvedState = {},
+): DependencyState {
+  return {
+    dynamicComponentProps: patch.componentProps ?? {},
+    dynamicHelp: patch.help,
+    dynamicHelpResolved: Reflect.has(patch, 'help'),
+    dynamicRenderComponentContent: patch.renderComponentContent,
+    dynamicRenderComponentContentResolved: Reflect.has(
+      patch,
+      'renderComponentContent',
+    ),
+    dynamicRules: patch.rules,
+    dynamicRulesResolved: Reflect.has(patch, 'rules'),
+    isDisabled: patch.disabled ?? false,
+    isIf: patch.if ?? true,
+    isRequired: patch.required ?? false,
+    isShow: patch.show ?? true,
+  };
+}
+
+function isResolveDependencies(
+  dependencies: FormItemDependencies,
+): dependencies is FormItemDependenciesResolve {
+  return isFunction(dependencies.resolve);
+}
+
+function warnMixedDependencies(dependencies: FormItemDependenciesResolve) {
+  if (
+    import.meta.env.PROD ||
+    mixedDependenciesWarnings.has(dependencies) ||
+    !legacyDependencyKeys.some(
+      (key) => Reflect.get(dependencies, key) !== undefined,
+    )
+  ) {
+    return;
+  }
+  mixedDependenciesWarnings.add(dependencies);
+  console.warn(
+    '[Vben Form] `dependencies.resolve` cannot be combined with legacy dependency callbacks. `resolve` takes precedence.',
+  );
+}
+
+async function resolveLegacyDependencies(
+  dependencies: FormItemDependenciesLegacy,
+  context: FormDependenciesResolveContext,
+): Promise<FormDependenciesResolvedState> {
+  const patch: FormDependenciesResolvedState = {};
+  const { actions, controller, values } = context;
+  const {
+    componentProps,
+    disabled,
+    if: whenIf,
+    required,
+    rules,
+    show,
+    trigger,
+  } = dependencies;
+
+  if (isFunction(whenIf)) {
+    patch.if = !!(await whenIf(values, actions, controller));
+  } else if (isBoolean(whenIf)) {
+    patch.if = whenIf;
+  }
+  if (patch.if === false) {
+    return patch;
+  }
+
+  if (isFunction(show)) {
+    patch.show = !!(await show(values, actions, controller));
+  } else if (isBoolean(show)) {
+    patch.show = show;
+  }
+
+  if (isFunction(componentProps)) {
+    patch.componentProps = await componentProps(values, actions, controller);
+  }
+  if (isFunction(rules)) {
+    patch.rules = await rules(values, actions, controller);
+  }
+  if (isFunction(disabled)) {
+    patch.disabled = !!(await disabled(values, actions, controller));
+  } else if (isBoolean(disabled)) {
+    patch.disabled = disabled;
+  }
+  if (isFunction(required)) {
+    patch.required = !!(await required(values, actions, controller));
+  }
+  if (isFunction(trigger)) {
+    await trigger(values, actions, controller);
+  }
+
+  return patch;
+}
+
 export default function useDependencies(
   getDependencies: () => FormItemDependencies | undefined,
+  getSchemaContext: () => FormSchemaContext = () => ({}),
 ) {
-  const values = useFormValues();
-
   const [extendApi] = injectFormProps();
   const formRenderProps = injectRenderFormProps();
 
@@ -46,12 +177,12 @@ export default function useDependencies(
     throw new Error('Form api is required in useDependencies');
   }
 
-  if (!values) {
-    throw new Error('useDependencies should be used within <VbenForm>');
-  }
+  const values = formApi.useValues();
+  const initialTriggerFields = getDependencies()?.triggerFields ?? [];
+  const initialTriggerValues = formApi.useFieldValues(initialTriggerFields);
 
   // 在 dependencies 里提供访问extendApi的能力
-  const getController = (): ExtendedFormApi => {
+  function getController(): ExtendedFormApi {
     const controller = isRef(extendApi)
       ? extendApi.value.formApi
       : extendApi.formApi;
@@ -60,112 +191,107 @@ export default function useDependencies(
       throw new Error('formApi is required in useDependencies');
     }
 
-    return controller;
-  };
+    return controller as unknown as ExtendedFormApi;
+  }
 
-  const isIf = ref(true);
-  const isDisabled = ref(false);
-  const isShow = ref(true);
-  const isRequired = ref(false);
-  const dynamicComponentProps = ref<MaybeComponentProps>({});
-  const dynamicRules = ref<FormSchemaRuleType>();
+  const dependencyState = shallowRef(createDependencyState());
+  let previousDependencies: FormItemDependencies | undefined;
+  let previousTriggerValues: any[] | undefined;
+  let dependencyEvaluationId = 0;
 
   const triggerFieldValues = computed(() => {
     // 该字段可能会被多个字段触发
     const triggerFields = getDependencies()?.triggerFields ?? [];
+    const usesInitialTriggerFields =
+      triggerFields.length === initialTriggerFields.length &&
+      triggerFields.every(
+        (fieldName, index) => fieldName === initialTriggerFields[index],
+      );
+    if (usesInitialTriggerFields) {
+      return initialTriggerValues.value;
+    }
     return triggerFields.map((dep) => {
       return resolveValueByFieldName(values.value, dep);
     });
   });
 
-  const resetConditionState = () => {
-    isDisabled.value = false;
-    isIf.value = true;
-    isShow.value = true;
-    isRequired.value = false;
-    dynamicRules.value = undefined;
-    dynamicComponentProps.value = {};
-  };
+  function resetConditionState() {
+    dependencyState.value = createDependencyState();
+  }
 
   watch(
     [triggerFieldValues, getDependencies],
-    async ([_values, dependencies]) => {
+    async ([currentTriggerValues, dependencies]) => {
       if (!dependencies || !dependencies?.triggerFields?.length) {
+        dependencyEvaluationId += 1;
+        previousDependencies = dependencies;
+        previousTriggerValues = undefined;
+        resetConditionState();
         return;
       }
-      resetConditionState();
-      const {
-        componentProps,
-        disabled,
-        if: whenIf,
-        required,
-        rules,
-        show,
-        trigger,
-      } = dependencies;
-
-      // 1. 优先判断if，如果if为false，则不渲染dom，后续判断也不再执行
-      const formValues = values.value;
-
-      if (isFunction(whenIf)) {
-        isIf.value = !!(await whenIf(formValues, formApi, getController()));
-        // 不渲染
-        if (!isIf.value) return;
-      } else if (isBoolean(whenIf)) {
-        isIf.value = whenIf;
-        if (!isIf.value) return;
+      if (
+        dependencies === previousDependencies &&
+        previousTriggerValues &&
+        isEqual(currentTriggerValues, previousTriggerValues)
+      ) {
+        return;
       }
-
-      // 2. 判断show，如果show为false，则隐藏
-      if (isFunction(show)) {
-        isShow.value = !!(await show(formValues, formApi, getController()));
-      } else if (isBoolean(show)) {
-        isShow.value = show;
-      }
-
-      if (isFunction(componentProps)) {
-        dynamicComponentProps.value = await componentProps(
-          formValues,
-          formApi,
-          getController(),
+      previousDependencies = dependencies;
+      previousTriggerValues = cloneDeep(currentTriggerValues);
+      const currentEvaluationId = ++dependencyEvaluationId;
+      const context: FormDependenciesResolveContext = {
+        actions: formApi,
+        controller: getController(),
+        schema: {
+          ...getSchemaContext(),
+          rootValues: values.value,
+        },
+        values: values.value,
+      };
+      let patch: FormDependenciesResolvedState | undefined;
+      if (isResolveDependencies(dependencies)) {
+        warnMixedDependencies(dependencies);
+        patch = await dependencies.resolve(context);
+      } else {
+        warnDeprecatedOnce(
+          'form-dependencies-legacy-callbacks',
+          '[Vben Form] Legacy dependency callbacks are deprecated. Use `dependencies.resolve(context)` instead.',
         );
+        patch = await resolveLegacyDependencies(dependencies, context);
       }
-
-      if (isFunction(rules)) {
-        dynamicRules.value = await rules(formValues, formApi, getController());
-      }
-
-      if (isFunction(disabled)) {
-        isDisabled.value = !!(await disabled(
-          formValues,
-          formApi,
-          getController(),
-        ));
-      } else if (isBoolean(disabled)) {
-        isDisabled.value = disabled;
-      }
-
-      if (isFunction(required)) {
-        isRequired.value = !!(await required(
-          formValues,
-          formApi,
-          getController(),
-        ));
-      }
-
-      if (isFunction(trigger)) {
-        await trigger(formValues, formApi, getController());
+      if (currentEvaluationId !== dependencyEvaluationId) {
+        return;
       }
+      dependencyState.value = createDependencyState(patch);
     },
-    { deep: true, immediate: true },
+    { immediate: true },
   );
 
+  onScopeDispose(() => {
+    dependencyEvaluationId += 1;
+  });
+
   return {
-    dynamicComponentProps,
-    dynamicRules,
-    isDisabled,
-    isIf,
-    isRequired,
-    isShow,
+    dynamicComponentProps: computed(
+      () => dependencyState.value.dynamicComponentProps,
+    ),
+    dynamicHelp: computed(() => dependencyState.value.dynamicHelp),
+    dynamicHelpResolved: computed(
+      () => dependencyState.value.dynamicHelpResolved,
+    ),
+    dynamicRenderComponentContent: computed(
+      () => dependencyState.value.dynamicRenderComponentContent,
+    ),
+    dynamicRenderComponentContentResolved: computed(
+      () => dependencyState.value.dynamicRenderComponentContentResolved,
+    ),
+    dynamicRules: computed(() => dependencyState.value.dynamicRules),
+    dynamicRulesResolved: computed(
+      () => dependencyState.value.dynamicRulesResolved,
+    ),
+    isDisabled: computed(() => dependencyState.value.isDisabled),
+    isIf: computed(() => dependencyState.value.isIf),
+    isRequired: computed(() => dependencyState.value.isRequired),
+    isShow: computed(() => dependencyState.value.isShow),
   };
 }
diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
index 3e11270b..52b95059 100644
--- a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
+++ b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
@@ -4,14 +4,18 @@ import type { ZodType } from 'zod';
 import type {
   FormActions,
   FormFieldProps,
+  FormRuleContext,
+  FormRuntimeField,
   MaybeComponentProps,
 } from '../types';
 
 import {
   computed,
+  markRaw,
   nextTick,
   onUnmounted,
   ref,
+  toRaw,
   useTemplateRef,
   watch,
 } from 'vue';
@@ -30,18 +34,21 @@ import {
 } from '@vben-core/shadcn-ui';
 import { cn, isFunction, isObject, isString } from '@vben-core/shared/utils';
 
-import { toTypedSchema } from '@vee-validate/zod';
-import { useFieldError, useFormValues } from 'vee-validate';
-
+import { getFormRule } from '../rule-registry';
 import { injectComponentRefMap } from '../use-form-context';
 import { injectRenderFormProps, useFormContext } from './context';
 import useDependencies from './dependencies';
 import FormLabel from './form-label.vue';
-import { isEventObjectLike } from './helper';
+import { getBaseRules, isEventObjectLike } from './helper';
 
 interface Props extends FormFieldProps {}
 
+interface RuntimeFieldSlotProps {
+  field: FormRuntimeField<any>;
+}
+
 const {
+  changeEventFallback,
   colon,
   commonComponentProps,
   component,
@@ -49,8 +56,6 @@ const {
   dependencies,
   description,
   disabled,
-  disabledOnChangeListener,
-  disabledOnInputListener,
   emptyStateValue,
   fieldName,
   formFieldProps,
@@ -72,12 +77,14 @@ const {
 
 const { componentBindEventMap, componentMap, isVertical } = useFormContext();
 const formRenderProps = injectRenderFormProps();
-const values = useFormValues();
-const errors = useFieldError(fieldName);
 const fieldComponentRef = useTemplateRef<HTMLInputElement>('fieldComponentRef');
 const formApi = formRenderProps.form;
+if (!formApi) {
+  throw new Error('Form api is required in <FormField />');
+}
+const error = formApi.useFieldError(fieldName);
 const compact = computed(() => formRenderProps.compact);
-const isInValid = computed(() => errors.value?.length > 0);
+const isInValid = computed(() => Boolean(error.value));
 const shouldApplyInvalidStyle = computed(() => {
   return isInValid.value && component !== 'VbenFormFieldArray';
 });
@@ -99,17 +106,25 @@ const FieldComponent = computed(() => {
     // 组件未注册
     console.warn(`Component ${component} is not registered`);
   }
-  return finalComponent;
+  return finalComponent ? markRaw(toRaw(finalComponent)) : finalComponent;
 });
 
 const {
   dynamicComponentProps,
+  dynamicHelp,
+  dynamicHelpResolved,
+  dynamicRenderComponentContent,
+  dynamicRenderComponentContentResolved,
   dynamicRules,
+  dynamicRulesResolved,
   isDisabled,
   isIf,
   isRequired,
   isShow,
-} = useDependencies(() => dependencies);
+} = useDependencies(
+  () => dependencies,
+  () => ({ fieldName }),
+);
 
 const labelStyle = computed(() => {
   return labelClass?.includes('w-') || isVertical.value
@@ -120,7 +135,10 @@ const labelStyle = computed(() => {
 });
 
 const currentRules = computed(() => {
-  return dynamicRules.value || rules;
+  const currentRule = dynamicRulesResolved.value ? dynamicRules.value : rules;
+  return currentRule && !isString(currentRule)
+    ? toRaw(currentRule)
+    : currentRule;
 });
 
 const visible = computed(() => {
@@ -144,18 +162,7 @@ const shouldRequired = computed(() => {
     return ['required', 'selectRequired'].includes(currentRules.value);
   }
 
-  let isOptional = currentRules?.value?.isOptional?.();
-
-  // 如果有设置默认值，则不是必填，需要特殊处理
-  const typeName = currentRules?.value?._def?.typeName;
-  if (typeName === 'ZodDefault') {
-    const innerType = currentRules?.value?._def.innerType;
-    if (innerType) {
-      isOptional = innerType.isOptional?.();
-    }
-  }
-
-  return !isOptional;
+  return !currentRules.value.isOptional();
 });
 
 const fieldRules = computed(() => {
@@ -174,17 +181,56 @@ const fieldRules = computed(() => {
 
   const isOptional = !shouldRequired.value;
   if (!isOptional) {
-    const unwrappedRules = (rules as any)?.unwrap?.();
-    if (unwrappedRules) {
-      rules = unwrappedRules;
-    }
+    rules = getBaseRules(rules) ?? rules;
   }
-  return toTypedSchema(rules as ZodType);
+  return rules as ZodType;
+});
+
+async function validateFieldValue({ value }: { value: any }) {
+  const activeRules = fieldRules.value;
+  if (!activeRules) {
+    return;
+  }
+
+  if (isString(activeRules)) {
+    const validator = getFormRule(activeRules);
+    if (!validator) {
+      console.warn(`Form rule ${activeRules} is not registered`);
+      return;
+    }
+    const ruleContext: FormRuleContext = {
+      field: {
+        label: isString(label) ? label : undefined,
+        name: fieldName,
+      },
+      label: isString(label) ? label : undefined,
+      name: fieldName,
+    };
+    const result = await validator(value, [], ruleContext);
+    return result === true ? undefined : result;
+  }
+
+  const result = await activeRules.safeParseAsync(value);
+  return result.success ? undefined : result.error.issues[0]?.message;
+}
+
+const fieldValidators = computed(() => {
+  const validators: Record<string, typeof validateFieldValue> = {
+    onSubmitAsync: validateFieldValue,
+  };
+  const validateOn = new Set(formFieldProps?.validateOn ?? ['blur', 'change']);
+  if (validateOn.has('blur')) {
+    validators.onBlurAsync = validateFieldValue;
+  }
+  if (validateOn.has('change')) {
+    validators.onChangeAsync = validateFieldValue;
+  }
+  return validators;
 });
 
 const computedProps = computed(() => {
   const finalComponentProps = isFunction(componentProps)
-    ? componentProps(values.value, getFormApi())
+    ? componentProps({ fieldName })
     : componentProps;
 
   return {
@@ -196,14 +242,12 @@ const computedProps = computed(() => {
 
 // 自定义帮助信息
 const computedHelp = computed(() => {
-  const helpContent = help;
+  const helpContent = dynamicHelpResolved.value ? dynamicHelp.value : help;
   if (!helpContent) {
     return undefined;
   }
   return () =>
-    isFunction(helpContent)
-      ? helpContent(values.value, getFormApi())
-      : helpContent;
+    isFunction(helpContent) ? helpContent({ fieldName }) : helpContent;
 });
 
 watch(
@@ -223,10 +267,13 @@ const shouldDisabled = computed(() => {
 });
 
 const customContentRender = computed(() => {
+  if (dynamicRenderComponentContentResolved.value) {
+    return dynamicRenderComponentContent.value ?? {};
+  }
   if (!isFunction(renderComponentContent)) {
     return {};
   }
-  return renderComponentContent(values.value, getFormApi());
+  return renderComponentContent({ fieldName });
 });
 
 const renderContentKey = computed(() => {
@@ -234,18 +281,34 @@ const renderContentKey = computed(() => {
 });
 
 const fieldProps = computed(() => {
-  const rules = fieldRules.value;
   return {
-    keepValue: true,
-    label: isString(label) ? label : '',
-    ...(rules ? { rules } : {}),
-    ...(formFieldProps as Record<string, any>),
+    asyncDebounceMs: formFieldProps?.asyncDebounceMs,
+    validators: fieldValidators.value,
   };
 });
 
-function fieldBindEvent(slotProps: Record<string, any>) {
-  const modelValue = slotProps.componentField.modelValue;
-  const handler = slotProps.componentField['onUpdate:modelValue'];
+function createFieldSlotProps(slotProps: RuntimeFieldSlotProps) {
+  const { field } = slotProps;
+  function handleChange(value: any) {
+    getFormApi().setFieldError(fieldName);
+    field.handleChange(value);
+  }
+  return {
+    ...slotProps,
+    componentField: {
+      name: fieldName,
+      modelValue: field.state.value,
+      onBlur: field.handleBlur,
+      onChange: handleChange,
+      onInput: handleChange,
+      'onUpdate:modelValue': handleChange,
+    },
+  };
+}
+
+function fieldBindEvent(componentField: Record<string, any>) {
+  const modelValue = componentField.modelValue;
+  const handler = componentField['onUpdate:modelValue'];
 
   const bindEventField =
     modelPropName ||
@@ -260,34 +323,34 @@ function fieldBindEvent(slotProps: Record<string, any>) {
   }
 
   if (bindEventField) {
-    return {
-      [`onUpdate:${bindEventField}`]: handler,
-      [bindEventField]: value === undefined ? emptyStateValue : value,
-      onChange: disabledOnChangeListener
-        ? undefined
-        : (e: Record<string, any>) => {
-            const shouldUnwrap = isEventObjectLike(e);
-            const onChange = slotProps?.componentField?.onChange;
-            if (!shouldUnwrap) {
-              return onChange?.(e);
-            }
+    const eventField = bindEventField;
 
-            return onChange?.(e?.target?.[bindEventField] ?? e);
-          },
-      ...(disabledOnInputListener ? { onInput: undefined } : {}),
+    function handleChangeEvent(event: Record<string, any>) {
+      const value = isEventObjectLike(event)
+        ? (event?.target?.[eventField] ?? event)
+        : event;
+      return handler?.(value);
+    }
+
+    return {
+      [`onUpdate:${eventField}`]: handler,
+      [eventField]: value === undefined ? emptyStateValue : value,
+      onChange: changeEventFallback ? handleChangeEvent : undefined,
+      onInput: undefined,
     };
   }
   return {
-    ...(disabledOnInputListener ? { onInput: undefined } : {}),
-    ...(disabledOnChangeListener ? { onChange: undefined } : {}),
+    onChange: changeEventFallback ? componentField.onChange : undefined,
+    onInput: undefined,
   };
 }
 
-function createComponentProps(slotProps: Record<string, any>) {
-  const bindEvents = fieldBindEvent(slotProps);
+function createComponentProps(slotProps: RuntimeFieldSlotProps) {
+  const normalizedSlotProps = createFieldSlotProps(slotProps);
+  const bindEvents = fieldBindEvent(normalizedSlotProps.componentField);
 
   const binds = {
-    ...slotProps.componentField,
+    ...normalizedSlotProps.componentField,
     ...computedProps.value,
     ...bindEvents,
     ...(Reflect.has(computedProps.value, 'onChange')
@@ -332,136 +395,150 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <FormField
+  <component
     v-if="!hide && isIf"
+    :is="formApi.fieldComponent"
     v-bind="fieldProps"
     v-slot="slotProps"
     :name="fieldName"
   >
-    <FormItem
-      v-show="isShow"
-      :class="{
-        'form-valid-error': shouldApplyInvalidStyle,
-        'form-is-required': shouldRequired,
-        'flex-col': isVertical,
-        'flex-row items-center': !isVertical,
-        'pb-4': !compact,
-        'pb-2': compact,
-      }"
-      class="relative flex"
-      v-bind="$attrs"
+    <FormField
+      :dirty="slotProps.field.state.meta.isDirty"
+      :error="error"
+      :name="fieldName"
+      :touched="slotProps.field.state.meta.isTouched"
+      :valid="slotProps.field.state.meta.isValid"
     >
-      <FormLabel
-        v-if="!hideLabel"
-        :class="
-          cn(
-            'flex leading-6',
-            {
-              'mr-2 shrink-0 justify-end': !isVertical,
-              'mb-1 flex-row': isVertical,
-              'self-start': shouldCollapsible && !isVertical,
-            },
-            labelClass,
-          )
-        "
-        :help="computedHelp"
-        :colon="colon"
-        :label="label"
-        :required="shouldRequired && !hideRequiredMark"
-        :style="labelStyle"
+      <FormItem
+        v-show="isShow"
+        :class="{
+          'form-valid-error': shouldApplyInvalidStyle,
+          'form-is-required': shouldRequired,
+          'flex-col': isVertical,
+          'flex-row items-center': !isVertical,
+          'pb-4': !compact,
+          'pb-2': compact,
+        }"
+        class="relative flex"
+        v-bind="$attrs"
       >
-        <template v-if="label">
-          <VbenRenderContent :content="label" />
-        </template>
-        <template #extra>
-          <Button
-            class="ml-0.5"
-            variant="icon"
-            size="icon"
-            @click.prevent="toggleCollapsed"
-            v-if="shouldCollapsible"
-          >
-            <ChevronsDown
-              :size="16"
-              class="transition-transform"
-              :class="{
-                'rotate-180': !collapseOpen,
-              }"
-            />
-          </Button>
-        </template>
-      </FormLabel>
-      <div class="flex-auto overflow-hidden p-px">
-        <VbenCollapsible :show-trigger="false" v-model:open="collapseOpen">
-          <template #collapsibleContent>
-            <div :class="cn('relative flex w-full items-center', wrapperClass)">
-              <FormControl :class="cn(controlClass)">
-                <slot
-                  v-bind="{
-                    ...slotProps,
-                    ...createComponentProps(slotProps),
-                    disabled: shouldDisabled,
-                    isInValid,
-                  }"
-                >
-                  <component
-                    :is="FieldComponent"
-                    ref="fieldComponentRef"
-                    :class="{
-                      'border-destructive hover:border-destructive/80 focus:border-destructive focus:shadow-[0_0_0_2px_rgba(255,38,5,0.06)]':
-                        shouldApplyInvalidStyle,
-                    }"
-                    v-bind="createComponentProps(slotProps)"
-                    :disabled="shouldDisabled"
-                  >
-                    <template
-                      v-for="name in renderContentKey"
-                      :key="name"
-                      #[name]="renderSlotProps"
-                    >
-                      <VbenRenderContent
-                        :content="customContentRender[name]"
-                        v-bind="{ ...renderSlotProps, formContext: slotProps }"
-                      />
-                    </template>
-                    <!-- <slot></slot> -->
-                  </component>
-                  <VbenTooltip
-                    v-if="compact && isInValid"
-                    :delay-duration="300"
-                    side="left"
-                  >
-                    <template #trigger>
-                      <slot name="trigger">
-                        <CircleAlert
-                          :class="
-                            cn(
-                              'inline-flex size-5 cursor-pointer text-foreground/80 hover:text-foreground',
-                            )
-                          "
-                        />
-                      </slot>
-                    </template>
-                    <FormMessage />
-                  </VbenTooltip>
-                </slot>
-              </FormControl>
-              <!-- 自定义后缀 -->
-              <div v-if="suffix" class="ml-1">
-                <VbenRenderContent :content="suffix" />
-              </div>
-            </div>
+        <FormLabel
+          v-if="!hideLabel"
+          :class="
+            cn(
+              'flex leading-6',
+              {
+                'mr-2 shrink-0 justify-end': !isVertical,
+                'mb-1 flex-row': isVertical,
+                'self-start': shouldCollapsible && !isVertical,
+              },
+              labelClass,
+            )
+          "
+          :help="computedHelp"
+          :colon="colon"
+          :label="label"
+          :required="shouldRequired && !hideRequiredMark"
+          :style="labelStyle"
+        >
+          <template v-if="label">
+            <VbenRenderContent :content="label" />
           </template>
-        </VbenCollapsible>
+          <template #extra>
+            <Button
+              class="ml-0.5"
+              variant="icon"
+              size="icon"
+              @click.prevent="toggleCollapsed"
+              v-if="shouldCollapsible"
+            >
+              <ChevronsDown
+                :size="16"
+                class="transition-transform"
+                :class="{
+                  'rotate-180': !collapseOpen,
+                }"
+              />
+            </Button>
+          </template>
+        </FormLabel>
+        <div class="flex-auto overflow-hidden p-px">
+          <VbenCollapsible :show-trigger="false" v-model:open="collapseOpen">
+            <template #collapsibleContent>
+              <div
+                :class="cn('relative flex w-full items-center', wrapperClass)"
+              >
+                <FormControl :class="cn(controlClass)">
+                  <slot
+                    v-bind="{
+                      ...createFieldSlotProps(slotProps),
+                      ...createComponentProps(slotProps),
+                      disabled: shouldDisabled,
+                      isInValid,
+                    }"
+                  >
+                    <component
+                      :is="FieldComponent"
+                      ref="fieldComponentRef"
+                      :class="{
+                        'border-destructive hover:border-destructive/80 focus:border-destructive focus:shadow-[0_0_0_2px_rgba(255,38,5,0.06)]':
+                          shouldApplyInvalidStyle,
+                      }"
+                      v-bind="createComponentProps(slotProps)"
+                      :disabled="shouldDisabled"
+                    >
+                      <template
+                        v-for="name in renderContentKey"
+                        :key="name"
+                        #[name]="renderSlotProps"
+                      >
+                        <VbenRenderContent
+                          :content="customContentRender[name]"
+                          v-bind="{
+                            ...renderSlotProps,
+                            formContext: createFieldSlotProps(slotProps),
+                          }"
+                        />
+                      </template>
+                      <!-- <slot></slot> -->
+                    </component>
+                    <VbenTooltip
+                      v-if="compact && isInValid"
+                      :delay-duration="300"
+                      side="left"
+                    >
+                      <template #trigger>
+                        <slot name="trigger">
+                          <CircleAlert
+                            :class="
+                              cn(
+                                'inline-flex size-5 cursor-pointer text-foreground/80 hover:text-foreground',
+                              )
+                            "
+                          />
+                        </slot>
+                      </template>
+                      <FormMessage />
+                    </VbenTooltip>
+                  </slot>
+                </FormControl>
+                <!-- 自定义后缀 -->
+                <div v-if="suffix" class="ml-1">
+                  <VbenRenderContent :content="suffix" />
+                </div>
+              </div>
+            </template>
+          </VbenCollapsible>
 
-        <FormDescription v-if="description" class="text-xs">
-          <VbenRenderContent :content="description" />
-        </FormDescription>
+          <FormDescription v-if="description" class="text-xs">
+            <VbenRenderContent :content="description" />
+          </FormDescription>
 
-        <Transition name="slide-up" v-if="!compact">
-          <FormMessage class="absolute" />
-        </Transition>
-      </div>
-    </FormItem>
-  </FormField>
+          <Transition name="slide-up" v-if="!compact">
+            <FormMessage class="absolute" />
+          </Transition>
+        </div>
+      </FormItem>
+    </FormField>
+  </component>
 </template>
diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form.vue b/packages/@core/ui-kit/form-ui/src/form-render/form.vue
index 3eab295c..4c3deb66 100644
--- a/packages/@core/ui-kit/form-ui/src/form-render/form.vue
+++ b/packages/@core/ui-kit/form-ui/src/form-render/form.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
-import type { GenericObject } from 'vee-validate';
-import type { ZodTypeAny } from 'zod';
+import type { ZodType } from 'zod';
 
 import type { FormCommonConfig, FormRenderProps, FormShape } from '../types';
 import type { NormalizedFormFieldSchema } from './schema';
 
-import { computed } from 'vue';
+import { computed, toRaw } from 'vue';
 
-import { Form } from '@vben-core/shadcn-ui';
 import { cn, isString } from '@vben-core/shared/utils';
 
 import { provideFormRenderProps } from './context';
@@ -52,26 +50,21 @@ const shapes = computed(() => {
   const resultShapes: FormShape[] = [];
   props.schema?.forEach((schema) => {
     const { fieldName } = schema;
-    const rules = schema.rules as ZodTypeAny;
+    const rules = toRaw(schema.rules) as ZodType;
 
-    let typeName = '';
-    if (rules && !isString(rules)) {
-      typeName = rules._def.typeName;
-    }
-
-    const baseRules = getBaseRules(rules) as ZodTypeAny;
+    const baseRules = getBaseRules(rules) as ZodType;
 
     resultShapes.push({
       default: getDefaultValueInZodStack(rules),
       fieldName,
-      required: !['ZodNullable', 'ZodOptional'].includes(typeName),
+      required: Boolean(rules && !isString(rules) && !rules.isOptional()),
       rules: baseRules,
     });
   });
   return resultShapes;
 });
 
-const formComponent = computed(() => (props.form ? 'form' : Form));
+const formComponent = 'form';
 
 const formComponentProps = computed(() => {
   return props.form
@@ -79,7 +72,10 @@ const formComponentProps = computed(() => {
         onSubmit: props.form.handleSubmit((val) => emits('submit', val)),
       }
     : {
-        onSubmit: (val: GenericObject) => emits('submit', val),
+        onSubmit: (event: Event) => {
+          event.preventDefault();
+          emits('submit', event);
+        },
       };
 });
 
diff --git a/packages/@core/ui-kit/form-ui/src/form-render/helper.ts b/packages/@core/ui-kit/form-ui/src/form-render/helper.ts
index cdb3999f..bf904f78 100644
--- a/packages/@core/ui-kit/form-ui/src/form-render/helper.ts
+++ b/packages/@core/ui-kit/form-ui/src/form-render/helper.ts
@@ -1,55 +1,51 @@
-import type {
-  AnyZodObject,
-  ZodDefault,
-  ZodEffects,
-  ZodNumber,
-  ZodString,
-  ZodTypeAny,
-} from 'zod';
+import type { ZodType } from 'zod';
+
+import { toRaw } from 'vue';
 
 import { isObject, isString } from '@vben-core/shared/utils';
 
+import { ZodPipe } from 'zod';
+
+type UnwrappableZodType = ZodType & {
+  unwrap?: () => ZodType;
+};
+
 /**
  * Get the lowest level Zod type.
  * This will unpack optionals, refinements, etc.
  */
-export function getBaseRules<
-  ChildType extends AnyZodObject | ZodTypeAny = ZodTypeAny,
->(schema: ChildType | ZodEffects<ChildType>): ChildType | null {
+export function getBaseRules(schema?: null | string | ZodType): null | ZodType {
   if (!schema || isString(schema)) return null;
-  if ('innerType' in schema._def)
-    return getBaseRules(schema._def.innerType as ChildType);
+  const rawSchema = toRaw(schema);
 
-  if ('schema' in schema._def)
-    return getBaseRules(schema._def.schema as ChildType);
+  if (rawSchema instanceof ZodPipe) {
+    return getBaseRules(rawSchema.in as ZodType);
+  }
 
-  return schema as ChildType;
+  const unwrappedSchema = (rawSchema as UnwrappableZodType).unwrap?.();
+  if (unwrappedSchema && unwrappedSchema !== rawSchema) {
+    return getBaseRules(unwrappedSchema);
+  }
+
+  return rawSchema;
 }
 
 /**
  * Search for a "ZodDefault" in the Zod stack and return its value.
  */
-export function getDefaultValueInZodStack(schema: ZodTypeAny): any {
+export function getDefaultValueInZodStack(
+  schema?: null | string | ZodType,
+): any {
   if (!schema || isString(schema)) {
     return;
   }
-  const typedSchema = schema as unknown as ZodDefault<ZodNumber | ZodString>;
 
-  if (typedSchema._def.typeName === 'ZodDefault')
-    return typedSchema._def.defaultValue();
-
-  if ('innerType' in typedSchema._def) {
-    return getDefaultValueInZodStack(
-      typedSchema._def.innerType as unknown as ZodTypeAny,
-    );
+  try {
+    const result = toRaw(schema).safeParse(undefined);
+    return result.success ? result.data : undefined;
+  } catch {
+    return undefined;
   }
-  if ('schema' in typedSchema._def) {
-    return getDefaultValueInZodStack(
-      (typedSchema._def as any).schema as ZodTypeAny,
-    );
-  }
-
-  return undefined;
 }
 
 export function isEventObjectLike(obj: any) {
diff --git a/packages/@core/ui-kit/form-ui/src/form-render/schema.ts b/packages/@core/ui-kit/form-ui/src/form-render/schema.ts
index 9a6c473d..462fc30a 100644
--- a/packages/@core/ui-kit/form-ui/src/form-render/schema.ts
+++ b/packages/@core/ui-kit/form-ui/src/form-render/schema.ts
@@ -2,8 +2,10 @@ import type {
   BaseFormComponentType,
   FormActions,
   FormCommonConfig,
+  FormDependenciesResolveContext,
   FormFieldProps,
   FormItemDependencies,
+  FormItemDependenciesLegacy,
   FormSchema,
   FormSchemaContext,
   MaybeComponentProps,
@@ -15,6 +17,8 @@ import {
   mergeWithArrayOverride,
 } from '@vben-core/shared/utils';
 
+import { resolveChildUpdateFieldName } from '../field-name';
+
 type AnyFormSchema = FormSchema<BaseFormComponentType, Record<string, any>>;
 
 export type NormalizedFormFieldSchema = FormFieldProps & {
@@ -79,8 +83,7 @@ function wrapComponentProps(
     return componentProps;
   }
 
-  return (values: Partial<Record<string, any>>, actions: FormActions) =>
-    componentProps(values, actions, createSchemaContext(baseContext, values));
+  return () => componentProps(baseContext);
 }
 
 function wrapCustomParamsRender(
@@ -91,8 +94,7 @@ function wrapCustomParamsRender(
     return render;
   }
 
-  return (values: Partial<Record<string, any>>, actions: FormActions) =>
-    render(values, actions, createSchemaContext(baseContext, values));
+  return () => render(baseContext);
 }
 
 function wrapRenderComponentContent(
@@ -103,8 +105,7 @@ function wrapRenderComponentContent(
     return render;
   }
 
-  return (values: Partial<Record<string, any>>, actions: FormActions) =>
-    render(values, actions, createSchemaContext(baseContext, values));
+  return () => render(baseContext);
 }
 
 function wrapDependencyFn<T>(handler: T, baseContext: FormSchemaContext): T {
@@ -128,7 +129,7 @@ function wrapDependencyFn<T>(handler: T, baseContext: FormSchemaContext): T {
 function scopeDependencies(
   dependencies: FormItemDependencies | undefined,
   baseContext: FormSchemaContext,
-) {
+): FormItemDependencies | undefined {
   if (!dependencies) {
     return dependencies;
   }
@@ -138,19 +139,41 @@ function scopeDependencies(
     return dependencies;
   }
 
+  const triggerFields =
+    dependencies.triggerFields?.map((fieldName) =>
+      scopeRowFieldName(rowPath, fieldName),
+    ) ?? [];
+  if (isFunction(dependencies.resolve)) {
+    const resolve = dependencies.resolve;
+    return {
+      resolve(context: FormDependenciesResolveContext) {
+        return resolve({
+          ...context,
+          schema: createSchemaContext(
+            baseContext,
+            context.values as Partial<Record<string, any>>,
+          ),
+        });
+      },
+      triggerFields,
+    };
+  }
+
+  const legacyDependencies = dependencies as FormItemDependenciesLegacy;
+
   return {
-    ...dependencies,
-    componentProps: wrapDependencyFn(dependencies.componentProps, baseContext),
-    disabled: wrapDependencyFn(dependencies.disabled, baseContext),
-    if: wrapDependencyFn(dependencies.if, baseContext),
-    required: wrapDependencyFn(dependencies.required, baseContext),
-    rules: wrapDependencyFn(dependencies.rules, baseContext),
-    show: wrapDependencyFn(dependencies.show, baseContext),
-    trigger: wrapDependencyFn(dependencies.trigger, baseContext),
-    triggerFields:
-      dependencies.triggerFields?.map((fieldName) =>
-        scopeRowFieldName(rowPath, fieldName),
-      ) ?? [],
+    ...legacyDependencies,
+    componentProps: wrapDependencyFn(
+      legacyDependencies.componentProps,
+      baseContext,
+    ),
+    disabled: wrapDependencyFn(legacyDependencies.disabled, baseContext),
+    if: wrapDependencyFn(legacyDependencies.if, baseContext),
+    required: wrapDependencyFn(legacyDependencies.required, baseContext),
+    rules: wrapDependencyFn(legacyDependencies.rules, baseContext),
+    show: wrapDependencyFn(legacyDependencies.show, baseContext),
+    trigger: wrapDependencyFn(legacyDependencies.trigger, baseContext),
+    triggerFields,
   };
 }
 
@@ -166,9 +189,9 @@ function createArrayComponentProps(
   const schemaProps = children.length > 0 ? { schema: children } : {};
 
   if (isFunction(componentProps)) {
-    return (values: Partial<Record<string, any>>, actions: FormActions) => ({
+    return () => ({
       ...arrayProps,
-      ...componentProps(values, actions),
+      ...componentProps({ fieldName: schema.fieldName }),
       commonConfig,
       globalCommonConfig,
       ...schemaProps,
@@ -200,9 +223,47 @@ function createArrayFieldSchema(
   };
 }
 
-export function getFormArraySchemaChildren(schema: Partial<AnyFormSchema>) {
+interface FormArraySchemaLike {
+  children?: unknown;
+  componentProps?: unknown;
+}
+
+interface UpdatableFormSchemaLike extends FormArraySchemaLike {
+  fieldName: string;
+}
+
+function setSchemaChildren<TSchema extends UpdatableFormSchemaLike>(
+  schema: TSchema,
+  children: TSchema[],
+) {
   if ('children' in schema && Array.isArray(schema.children)) {
-    return schema.children;
+    return {
+      ...schema,
+      children,
+    } as TSchema;
+  }
+
+  if (
+    !isFunction(schema.componentProps) &&
+    schema.componentProps &&
+    Array.isArray((schema.componentProps as Record<string, any>).schema)
+  ) {
+    return {
+      ...schema,
+      componentProps: {
+        ...(schema.componentProps as Record<string, any>),
+        schema: children,
+      },
+    } as TSchema;
+  }
+  return schema;
+}
+
+export function getFormArraySchemaChildren<TSchema = FormSchema>(
+  schema: FormArraySchemaLike,
+): TSchema[] {
+  if ('children' in schema && Array.isArray(schema.children)) {
+    return schema.children as TSchema[];
   }
 
   const componentProps = schema.componentProps;
@@ -211,7 +272,7 @@ export function getFormArraySchemaChildren(schema: Partial<AnyFormSchema>) {
     componentProps &&
     Array.isArray((componentProps as Record<string, any>).schema)
   ) {
-    return (componentProps as Record<string, any>).schema;
+    return (componentProps as Record<string, any>).schema as TSchema[];
   }
 
   return [];
@@ -229,6 +290,38 @@ export function resolveArrayChildFieldName(rowPath: string, fieldName: string) {
   return scopeRowFieldName(rowPath, fieldName);
 }
 
+export function updateFormSchemaList<TSchema extends UpdatableFormSchemaLike>(
+  currentSchema: TSchema[],
+  updated: Partial<TSchema>[],
+): TSchema[] {
+  return currentSchema.map((schema) => {
+    const exactUpdatedData = updated.find(
+      (item) => item.fieldName === schema.fieldName,
+    );
+    if (exactUpdatedData) {
+      return mergeWithArrayOverride(exactUpdatedData, schema) as TSchema;
+    }
+
+    const children = getFormArraySchemaChildren<TSchema>(schema);
+    if (children.length === 0) {
+      return schema;
+    }
+    const childUpdates = updated.flatMap((item) => {
+      const fieldName = item.fieldName
+        ? resolveChildUpdateFieldName(schema.fieldName, item.fieldName)
+        : undefined;
+      return fieldName ? [{ ...item, fieldName } as Partial<TSchema>] : [];
+    });
+    if (childUpdates.length === 0) {
+      return schema;
+    }
+    return setSchemaChildren(
+      schema,
+      updateFormSchemaList(children, childUpdates),
+    );
+  });
+}
+
 export function createFormFieldSchema(
   schema: AnyFormSchema,
   options: CreateFormFieldSchemaOptions = {},
@@ -238,12 +331,11 @@ export function createFormFieldSchema(
     options.globalCommonConfig ?? {},
   );
   const {
+    changeEventFallback = false,
     colon = false,
     componentProps = {},
     controlClass = '',
     disabled,
-    disabledOnChangeListener = true,
-    disabledOnInputListener = true,
     emptyStateValue = undefined,
     formFieldProps = {},
     formItemClass = '',
@@ -270,9 +362,8 @@ export function createFormFieldSchema(
   }
 
   return {
+    changeEventFallback,
     colon,
-    disabledOnChangeListener,
-    disabledOnInputListener,
     emptyStateValue,
     hideRequiredMark,
     labelWidth,
diff --git a/packages/@core/ui-kit/form-ui/src/form-runtime-field.ts b/packages/@core/ui-kit/form-ui/src/form-runtime-field.ts
new file mode 100644
index 00000000..1376ecac
--- /dev/null
+++ b/packages/@core/ui-kit/form-ui/src/form-runtime-field.ts
@@ -0,0 +1,77 @@
+import type { Component } from 'vue';
+
+import { defineComponent, h, markRaw, onUnmounted } from 'vue';
+
+type AsyncFieldValidator = (...args: any[]) => Promise<unknown> | unknown;
+
+export type FieldValidationInvalidator = () => void;
+
+const asyncValidatorKeys = [
+  'onBlurAsync',
+  'onChangeAsync',
+  'onDynamicAsync',
+  'onSubmitAsync',
+] as const;
+
+export function createRuntimeFieldComponent(
+  fieldComponent: Component,
+  registerInvalidator: (
+    fieldName: string,
+    invalidator: FieldValidationInvalidator,
+  ) => () => void,
+) {
+  return markRaw(
+    defineComponent({
+      inheritAttrs: false,
+      setup(_, { attrs, slots }) {
+        const fieldName = String(attrs.name ?? '');
+        let validationRunId = 0;
+        let cachedValidators: Record<string, any> | undefined;
+        let cachedWrappedValidators: Record<string, any> | undefined;
+        const unregisterInvalidator = registerInvalidator(fieldName, () => {
+          validationRunId += 1;
+        });
+        onUnmounted(unregisterInvalidator);
+
+        function wrapValidators(validators: Record<string, any>) {
+          if (validators === cachedValidators && cachedWrappedValidators) {
+            return cachedWrappedValidators;
+          }
+          const wrappedValidators = { ...validators };
+          for (const key of asyncValidatorKeys) {
+            const validator = validators[key] as
+              | AsyncFieldValidator
+              | undefined;
+            if (!validator) {
+              continue;
+            }
+            wrappedValidators[key] = async (...args: any[]) => {
+              const currentValidationRunId = ++validationRunId;
+              const result = await validator(...args);
+              return currentValidationRunId === validationRunId
+                ? result
+                : undefined;
+            };
+          }
+          cachedValidators = validators;
+          cachedWrappedValidators = wrappedValidators;
+          return wrappedValidators;
+        }
+
+        return () => {
+          const validators = attrs.validators as
+            | Record<string, any>
+            | undefined;
+          return h(
+            fieldComponent,
+            {
+              ...attrs,
+              ...(validators ? { validators: wrapValidators(validators) } : {}),
+            },
+            slots,
+          );
+        };
+      },
+    }),
+  );
+}
diff --git a/packages/@core/ui-kit/form-ui/src/form-runtime.ts b/packages/@core/ui-kit/form-ui/src/form-runtime.ts
new file mode 100644
index 00000000..344b55c5
--- /dev/null
+++ b/packages/@core/ui-kit/form-ui/src/form-runtime.ts
@@ -0,0 +1,303 @@
+import type { FieldValidationInvalidator } from './form-runtime-field';
+import type {
+  FormActions,
+  FormFieldName,
+  FormFieldValue,
+  FormResetOptions,
+  FormRuntimeState,
+  FormValues,
+} from './types';
+
+import { computed, shallowRef } from 'vue';
+
+import { useForm } from '@tanstack/vue-form';
+
+import { createRuntimeFieldComponent } from './form-runtime-field';
+
+function normalizeError(error: unknown): string | undefined {
+  if (typeof error === 'string') {
+    return error;
+  }
+  if (error && typeof error === 'object' && 'message' in error) {
+    const message = Reflect.get(error, 'message');
+    return typeof message === 'string' ? message : undefined;
+  }
+  return error === undefined || error === null ? undefined : String(error);
+}
+
+function normalizeFieldMetaError(meta: unknown) {
+  if (!meta || typeof meta !== 'object' || !('errors' in meta)) {
+    return undefined;
+  }
+  const errors = Reflect.get(meta, 'errors');
+  return normalizeError(Array.isArray(errors) ? errors[0] : undefined);
+}
+
+export function useFormRuntime<TValues extends FormValues>(
+  defaultValues: TValues,
+): FormActions<TValues> {
+  const rawForm = useForm({
+    defaultValues,
+    onSubmit: () => {},
+  });
+  const values = rawForm.useSelector((formState) => formState.values);
+  const fieldMeta = rawForm.useSelector((formState) => formState.fieldMeta);
+  const isDirty = rawForm.useSelector((formState) => formState.isDirty);
+  const isSubmitting = rawForm.useSelector(
+    (formState) => formState.isSubmitting,
+  );
+  const isValid = rawForm.useSelector((formState) => formState.isValid);
+  const isValidating = rawForm.useSelector(
+    (formState) => formState.isValidating,
+  );
+  const manualErrors = shallowRef(new Map<string, string>());
+  const validationInvalidators = new Map<
+    string,
+    Set<FieldValidationInvalidator>
+  >();
+
+  function registerValidationInvalidator(
+    fieldName: string,
+    invalidator: FieldValidationInvalidator,
+  ) {
+    let fieldInvalidators = validationInvalidators.get(fieldName);
+    if (!fieldInvalidators) {
+      fieldInvalidators = new Set();
+      validationInvalidators.set(fieldName, fieldInvalidators);
+    }
+    fieldInvalidators.add(invalidator);
+    return () => {
+      invalidator();
+      fieldInvalidators.delete(invalidator);
+      if (fieldInvalidators.size === 0) {
+        validationInvalidators.delete(fieldName);
+      }
+    };
+  }
+
+  function invalidateFieldValidation(fieldName: string) {
+    for (const invalidator of validationInvalidators.get(fieldName) ?? []) {
+      invalidator();
+    }
+  }
+
+  const RuntimeField = createRuntimeFieldComponent(
+    rawForm.Field,
+    registerValidationInvalidator,
+  );
+
+  function getErrors() {
+    const result: Record<string, string> = {};
+    for (const [fieldName, meta] of Object.entries(fieldMeta.value)) {
+      const error = normalizeFieldMetaError(meta);
+      if (error) {
+        result[fieldName] = error;
+      }
+    }
+    for (const [fieldName, error] of manualErrors.value) {
+      result[fieldName] = error;
+    }
+    return result;
+  }
+
+  const errors = computed(getErrors);
+  const meta = computed(() => ({
+    dirty: isDirty.value,
+    submitting: isSubmitting.value,
+    valid: isValid.value && manualErrors.value.size === 0,
+    validating: isValidating.value,
+  }));
+  const runtimeState = computed<FormRuntimeState<TValues>>(() => ({
+    errors: errors.value,
+    meta: meta.value,
+    values: values.value,
+  }));
+
+  function getFieldError(fieldName: string) {
+    return (
+      manualErrors.value.get(fieldName) ??
+      normalizeFieldMetaError(Reflect.get(fieldMeta.value, fieldName))
+    );
+  }
+
+  function useFieldError(fieldName: string) {
+    const schemaError = rawForm.useSelector((formState) =>
+      normalizeFieldMetaError(Reflect.get(formState.fieldMeta, fieldName)),
+    );
+    return computed(
+      () => manualErrors.value.get(fieldName) ?? schemaError.value,
+    );
+  }
+
+  function useFieldValue<TFieldName extends FormFieldName<TValues>>(
+    fieldName: TFieldName,
+  ) {
+    return rawForm.useSelector(
+      () =>
+        rawForm.getFieldValue(fieldName as never) as FormFieldValue<
+          TValues,
+          TFieldName
+        >,
+    );
+  }
+
+  function useFieldValues<TFieldName extends FormFieldName<TValues>>(
+    fieldNames: readonly TFieldName[],
+  ) {
+    const selectedValues = fieldNames.map((fieldName) =>
+      useFieldValue(fieldName),
+    );
+    return computed(() => selectedValues.map((value) => value.value));
+  }
+
+  async function validateField(fieldName: string) {
+    await rawForm.validateField(fieldName as never, 'submit');
+    const error = getFieldError(fieldName);
+    return {
+      errors: error ? { [fieldName]: error } : {},
+      valid: !error,
+    };
+  }
+
+  async function validate() {
+    await rawForm.validateAllFields('submit');
+    const errors = getErrors();
+    return {
+      errors,
+      valid: Object.keys(errors).length === 0,
+    };
+  }
+
+  function setFieldError(fieldName: string, error?: string) {
+    invalidateFieldValidation(fieldName);
+
+    const nextManualErrors = new Map(manualErrors.value);
+    if (error) {
+      nextManualErrors.set(fieldName, error);
+    } else {
+      nextManualErrors.delete(fieldName);
+    }
+    manualErrors.value = nextManualErrors;
+
+    if (error || !rawForm.getFieldMeta(fieldName as never)) {
+      return;
+    }
+    rawForm.setFieldMeta(fieldName as never, (meta) => ({
+      ...meta,
+      errorMap: {},
+    }));
+  }
+
+  function clearValidation(
+    fieldNames?: FormFieldName<TValues> | FormFieldName<TValues>[],
+  ) {
+    let requestedFieldNames: FormFieldName<TValues>[] | undefined;
+    if (Array.isArray(fieldNames)) {
+      requestedFieldNames = fieldNames;
+    } else if (fieldNames) {
+      requestedFieldNames = [fieldNames];
+    }
+    const targetFieldNames = requestedFieldNames ?? [
+      ...new Set([
+        ...validationInvalidators.keys(),
+        ...Object.keys(rawForm.getAllErrors().fields),
+        ...manualErrors.value.keys(),
+      ]),
+    ];
+
+    for (const fieldName of targetFieldNames) {
+      setFieldError(fieldName, undefined);
+    }
+  }
+
+  async function reset(
+    resetState?: { values?: Partial<TValues> },
+    options?: FormResetOptions,
+  ) {
+    for (const fieldName of validationInvalidators.keys()) {
+      invalidateFieldValidation(fieldName);
+    }
+    manualErrors.value = new Map();
+    rawForm.reset(resetState?.values as TValues | undefined, options);
+  }
+
+  async function submit() {
+    await rawForm.handleSubmit();
+  }
+
+  const actions: FormActions<TValues> = {
+    clearValidation,
+    get errors() {
+      return errors.value;
+    },
+    fieldComponent: RuntimeField,
+    get meta() {
+      return meta.value;
+    },
+    get values() {
+      return values.value;
+    },
+    getFieldError,
+    getFieldValue(fieldName) {
+      return rawForm.getFieldValue(fieldName as never) as FormFieldValue<
+        TValues,
+        typeof fieldName
+      >;
+    },
+    handleSubmit(callback) {
+      return async (event) => {
+        event?.preventDefault();
+        event?.stopPropagation();
+        const result = await validate();
+        if (result.valid) {
+          await callback(values.value);
+        }
+      };
+    },
+    isFieldValid(fieldName) {
+      return !getFieldError(fieldName);
+    },
+    pushFieldValue(fieldName, value) {
+      rawForm.pushFieldValue(fieldName as never, value as never);
+    },
+    async removeFieldValue(fieldName, index) {
+      await rawForm.removeFieldValue(fieldName as never, index);
+    },
+    reset,
+    resetForm: reset,
+    setFieldError,
+    async setFieldValue(fieldName, value, shouldValidate) {
+      rawForm.setFieldValue(fieldName as never, value as never, {
+        dontValidate: !shouldValidate,
+      });
+      if (shouldValidate) {
+        await validateField(fieldName);
+      }
+    },
+    async setValues(values, shouldValidate) {
+      for (const [fieldName, value] of Object.entries(values)) {
+        rawForm.setFieldValue(fieldName as never, value as never, {
+          dontValidate: !shouldValidate,
+        });
+      }
+      if (shouldValidate) {
+        await validate();
+      }
+    },
+    submit,
+    submitForm: submit,
+    useSelector(selector) {
+      return computed(() => selector(runtimeState.value));
+    },
+    useFieldError,
+    useFieldValue,
+    useFieldValues,
+    useValues() {
+      return values;
+    },
+    validate,
+    validateField,
+  };
+
+  return actions;
+}
diff --git a/packages/@core/ui-kit/form-ui/src/form-value-transform.ts b/packages/@core/ui-kit/form-ui/src/form-value-transform.ts
new file mode 100644
index 00000000..1fa172cc
--- /dev/null
+++ b/packages/@core/ui-kit/form-ui/src/form-value-transform.ts
@@ -0,0 +1,226 @@
+import type {
+  ArrayToStringFields,
+  BaseFormComponentType,
+  FieldMappingTime,
+  FormSchema,
+  FormSchemaContext,
+  FormValues,
+} from './types';
+
+import { cloneDeep, formatDate, isFunction } from '@vben-core/shared/utils';
+
+import {
+  deleteValueByFieldName,
+  getValueByFieldName,
+  resolveValueFormatFieldName,
+  setValueByFieldName,
+} from './field-name';
+import {
+  getFormArraySchemaChildren,
+  resolveArrayChildFieldName,
+} from './form-render/schema';
+
+type AnyFormSchema<TValues extends FormValues> = FormSchema<
+  BaseFormComponentType,
+  Record<string, any>,
+  TValues
+>;
+
+function processFields(
+  fields: string[],
+  separator: string,
+  values: Record<string, any>,
+) {
+  for (const field of fields) {
+    const value = values[field];
+    if (value === undefined || value === null) {
+      continue;
+    }
+    if (Array.isArray(value)) {
+      values[field] = value.join(separator);
+      continue;
+    }
+    if (typeof value !== 'string') {
+      continue;
+    }
+    if (value === '') {
+      values[field] = [];
+      continue;
+    }
+    const escapedSeparator = separator.replaceAll(
+      /[.*+?^${}()|[\]\\]/g,
+      String.raw`\$&`,
+    );
+    values[field] = value.split(new RegExp(escapedSeparator));
+  }
+}
+
+function applyArrayToStringFields(
+  values: Record<string, any>,
+  arrayToStringFields?: ArrayToStringFields,
+) {
+  if (!arrayToStringFields || !Array.isArray(arrayToStringFields)) {
+    return;
+  }
+
+  if (arrayToStringFields.every((item) => typeof item === 'string')) {
+    const fieldsConfig = arrayToStringFields as string[];
+    const lastItem = fieldsConfig.at(-1) ?? '';
+    const hasSeparator = lastItem.length === 1;
+    const fields = hasSeparator ? fieldsConfig.slice(0, -1) : fieldsConfig;
+    processFields(fields, hasSeparator ? lastItem : ',', values);
+    return;
+  }
+
+  for (const fieldConfig of arrayToStringFields) {
+    if (!Array.isArray(fieldConfig)) {
+      continue;
+    }
+    const [fields, separator = ','] = fieldConfig;
+    if (!Array.isArray(fields)) {
+      console.warn(
+        `Invalid field configuration: fields should be an array of strings, got ${typeof fields}`,
+      );
+      continue;
+    }
+    processFields(fields, separator, values);
+  }
+}
+
+function applyRangeTimeFields(
+  values: Record<string, any>,
+  fieldMappingTime?: FieldMappingTime,
+) {
+  if (!fieldMappingTime || !Array.isArray(fieldMappingTime)) {
+    return;
+  }
+
+  for (const [
+    field,
+    [startTimeKey, endTimeKey],
+    format = 'YYYY-MM-DD',
+  ] of fieldMappingTime) {
+    if (startTimeKey && endTimeKey && values[field] === null) {
+      Reflect.deleteProperty(values, startTimeKey);
+      Reflect.deleteProperty(values, endTimeKey);
+    }
+    if (!values[field]) {
+      Reflect.deleteProperty(values, field);
+      continue;
+    }
+
+    const [startTime, endTime] = values[field];
+    if (format === null) {
+      values[startTimeKey] = startTime;
+      values[endTimeKey] = endTime;
+    } else if (isFunction(format)) {
+      values[startTimeKey] = format(startTime, startTimeKey);
+      values[endTimeKey] = format(endTime, endTimeKey);
+    } else {
+      const [startTimeFormat, endTimeFormat] = Array.isArray(format)
+        ? format
+        : [format, format];
+      values[startTimeKey] = startTime
+        ? formatDate(startTime, startTimeFormat)
+        : undefined;
+      values[endTimeKey] = endTime
+        ? formatDate(endTime, endTimeFormat)
+        : undefined;
+    }
+    Reflect.deleteProperty(values, field);
+  }
+}
+
+function applyValueFormatBySchemas<TValues extends FormValues>(
+  schemas: AnyFormSchema<TValues>[],
+  values: Record<string, any>,
+  parentPath?: string,
+  parentContext?: FormSchemaContext<TValues>,
+) {
+  for (const schema of schemas) {
+    const fieldName = parentPath
+      ? resolveArrayChildFieldName(parentPath, schema.fieldName)
+      : schema.fieldName;
+    const row =
+      parentPath && parentContext?.rowPath
+        ? getValueByFieldName(values, parentContext.rowPath)
+        : parentContext?.row;
+    const schemaContext: FormSchemaContext<TValues> = {
+      ...parentContext,
+      fieldName,
+      originalFieldName: schema.fieldName,
+      rootValues: values as TValues,
+      row,
+    };
+
+    const children = getFormArraySchemaChildren<AnyFormSchema<TValues>>(schema);
+    if (children.length > 0) {
+      const arrayValue = getValueByFieldName(values, fieldName);
+      if (Array.isArray(arrayValue)) {
+        arrayValue.forEach((rowValue, index) => {
+          const rowPath = `${fieldName}[${index}]`;
+          applyValueFormatBySchemas(children, values, rowPath, {
+            arrayField: fieldName,
+            row: rowValue,
+            rowIndex: index,
+            rowPath,
+          });
+        });
+      }
+    }
+
+    if (!schema.valueFormat) {
+      continue;
+    }
+    const value = getValueByFieldName(values, fieldName);
+    deleteValueByFieldName(values, fieldName);
+    const formattedValue = schema.valueFormat(
+      value,
+      (key, nextValue) => {
+        setValueByFieldName(
+          values,
+          resolveValueFormatFieldName(key, parentPath),
+          nextValue,
+        );
+      },
+      values as TValues,
+      schemaContext,
+    );
+    if (formattedValue !== undefined) {
+      setValueByFieldName(values, fieldName, formattedValue);
+    }
+  }
+}
+
+export function applyFormValueFormats<TValues extends FormValues>(
+  originValues: Record<string, any>,
+  schemas: AnyFormSchema<TValues>[],
+) {
+  const values = cloneDeep(originValues);
+  applyValueFormatBySchemas(schemas, values);
+  return values;
+}
+
+export function formatFormValues<TValues extends FormValues>(
+  originValues: Readonly<Record<string, any>>,
+  schemas: AnyFormSchema<TValues>[],
+  fieldMappingTime?: FieldMappingTime,
+  arrayToStringFields?: ArrayToStringFields,
+) {
+  const values = cloneDeep(originValues);
+  applyArrayToStringFields(values, arrayToStringFields);
+  applyRangeTimeFields(values, fieldMappingTime);
+  applyValueFormatBySchemas(schemas, values);
+  return values;
+}
+
+export function transformRangeTimeValues(
+  originValues: Record<string, any>,
+  fieldMappingTime?: FieldMappingTime,
+  arrayToStringFields?: ArrayToStringFields,
+) {
+  const values = cloneDeep(originValues);
+  applyArrayToStringFields(values, arrayToStringFields);
+  applyRangeTimeFields(values, fieldMappingTime);
+  return values;
+}
diff --git a/packages/@core/ui-kit/form-ui/src/index.ts b/packages/@core/ui-kit/form-ui/src/index.ts
index bac8bb41..e6523747 100644
--- a/packages/@core/ui-kit/form-ui/src/index.ts
+++ b/packages/@core/ui-kit/form-ui/src/index.ts
@@ -3,11 +3,19 @@ export { setupVbenForm } from './config';
 export type {
   BaseFormComponentType,
   ExtendedFormApi,
+  FormActions,
+  FormContextApi,
   FormLayout,
   FormSchemaContext,
+  FormValues,
+  VbenFormActionSlotProps,
+  VbenFormComponent,
+  VbenFormDefaultSlotProps,
   VbenFormFieldArrayProps,
+  VbenFormFieldSlotProps,
   VbenFormProps,
   FormSchema as VbenFormSchema,
+  VbenFormSlots,
 } from './types';
 
 export * from './use-vben-form';
diff --git a/packages/@core/ui-kit/form-ui/src/rule-registry.ts b/packages/@core/ui-kit/form-ui/src/rule-registry.ts
new file mode 100644
index 00000000..f85854e2
--- /dev/null
+++ b/packages/@core/ui-kit/form-ui/src/rule-registry.ts
@@ -0,0 +1,17 @@
+import type { FormRuleValidator } from './types';
+
+const FORM_RULES = new Map<string, FormRuleValidator>();
+
+export function getFormRule(name: string) {
+  return FORM_RULES.get(name);
+}
+
+export function registerFormRules(
+  rules: Partial<Record<string, FormRuleValidator>>,
+) {
+  for (const [name, validator] of Object.entries(rules)) {
+    if (validator) {
+      FORM_RULES.set(name, validator);
+    }
+  }
+}
diff --git a/packages/@core/ui-kit/form-ui/src/types.ts b/packages/@core/ui-kit/form-ui/src/types.ts
index 705c80c3..6df69acb 100644
--- a/packages/@core/ui-kit/form-ui/src/types.ts
+++ b/packages/@core/ui-kit/form-ui/src/types.ts
@@ -1,5 +1,4 @@
-import type { FieldOptions, FormContext, GenericObject } from 'vee-validate';
-import type { ZodTypeAny } from 'zod';
+import type { ZodType } from 'zod';
 
 import type { Component, HtmlHTMLAttributes, Ref } from 'vue';
 
@@ -8,6 +7,17 @@ import type { ClassType, MaybeComputedRef } from '@vben-core/typings';
 
 import type { FormApi } from './form-api';
 
+export type FormValues = Record<string, any>;
+
+export type FormFieldName<TValues extends FormValues = FormValues> =
+  | Extract<keyof TValues, string>
+  | (Record<never, never> & string);
+
+export type FormFieldValue<
+  TValues extends FormValues,
+  TFieldName extends string,
+> = TFieldName extends keyof TValues ? TValues[TFieldName] : unknown;
+
 export type FormLayout = 'horizontal' | 'inline' | 'vertical';
 
 export type BaseFormComponentType =
@@ -36,14 +46,12 @@ export type FormItemClassType =
   | (Record<never, never> & string)
   | WrapperClassType;
 
-export type FormFieldOptions = Partial<
-  FieldOptions & {
-    validateOnBlur?: boolean;
-    validateOnChange?: boolean;
-    validateOnInput?: boolean;
-    validateOnModelUpdate?: boolean;
-  }
->;
+export interface FormFieldOptions {
+  asyncDebounceMs?: number;
+  validateOn?: readonly FormValidationTrigger[];
+}
+
+export type FormValidationTrigger = 'blur' | 'change';
 
 export interface FormShape {
   /** 默认值 */
@@ -52,7 +60,33 @@ export interface FormShape {
   fieldName: string;
   /** 是否必填 */
   required?: boolean;
-  rules?: ZodTypeAny;
+  rules?: ZodType;
+}
+
+export interface FormRuntimeField<TValue = unknown> {
+  handleBlur: () => void;
+  handleChange: (value: TValue) => void;
+  state: {
+    meta: {
+      errors: unknown[];
+      isDirty: boolean;
+      isTouched: boolean;
+      isValid: boolean;
+    };
+    value: TValue;
+  };
+}
+
+export interface FormComponentField<
+  TValue = unknown,
+  TFieldName extends string = string,
+> {
+  modelValue: TValue;
+  name: TFieldName;
+  onBlur: () => void;
+  onChange: (value: TValue) => void;
+  onInput: (value: TValue) => void;
+  'onUpdate:modelValue': (value: TValue) => void;
 }
 
 export type MaybeComponentPropKey =
@@ -64,9 +98,175 @@ export type MaybeComponentPropKey =
 
 export type MaybeComponentProps = { [K in MaybeComponentPropKey]?: any };
 
-export type FormActions = FormContext<GenericObject>;
+export interface FormMeta {
+  dirty: boolean;
+  submitting: boolean;
+  valid: boolean;
+  validating: boolean;
+}
 
-export interface FormSchemaContext {
+export interface FormRuntimeState<TValues extends FormValues = FormValues> {
+  errors: Record<string, string>;
+  meta: FormMeta;
+  values: TValues;
+}
+
+export interface FormValidationResult {
+  errors: Record<string, string>;
+  valid: boolean;
+}
+
+export interface FormValueSnapshot<TValues extends FormValues = FormValues> {
+  rawValues: Readonly<TValues>;
+  values: TValues;
+}
+
+export interface FormResetState<TValues extends FormValues = FormValues> {
+  values?: Partial<TValues>;
+}
+
+export interface FormResetOptions {
+  force?: boolean;
+  keepDefaultValues?: boolean;
+}
+
+export interface FormContextApi<TValues extends FormValues = FormValues> {
+  clearValidation: (
+    fieldNames?: FormFieldName<TValues> | FormFieldName<TValues>[],
+  ) => void;
+  readonly errors: Record<string, string>;
+  readonly fieldComponent: Component;
+  getFieldError: (fieldName: string) => string | undefined;
+  getFieldValue: <TFieldName extends FormFieldName<TValues>>(
+    fieldName: TFieldName,
+  ) => FormFieldValue<TValues, TFieldName>;
+  handleSubmit: (
+    callback: (values: TValues) => Promise<void> | void,
+  ) => (event?: Event) => Promise<void>;
+  isFieldValid: (fieldName: string) => boolean;
+  readonly meta: FormMeta;
+  pushFieldValue: (fieldName: string, value: any) => void;
+  removeFieldValue: (fieldName: string, index: number) => Promise<void>;
+  reset: (
+    state?: FormResetState<TValues>,
+    options?: FormResetOptions,
+  ) => Promise<void>;
+  /** @deprecated Use `reset` instead. */
+  resetForm: (
+    state?: FormResetState<TValues>,
+    options?: FormResetOptions,
+  ) => Promise<void>;
+  setFieldError: (fieldName: string, error?: string) => void;
+  setFieldValue: <TFieldName extends FormFieldName<TValues>>(
+    fieldName: TFieldName,
+    value: FormFieldValue<TValues, NoInfer<TFieldName>>,
+    shouldValidate?: boolean,
+  ) => Promise<void>;
+  setValues: (
+    values: Partial<TValues>,
+    shouldValidate?: boolean,
+  ) => Promise<void>;
+  submit: () => Promise<void>;
+  /** @deprecated Use `submit` instead. */
+  submitForm: () => Promise<void>;
+  useFieldError: (fieldName: string) => Readonly<Ref<string | undefined>>;
+  useFieldValue: <TFieldName extends FormFieldName<TValues>>(
+    fieldName: TFieldName,
+  ) => Readonly<Ref<FormFieldValue<TValues, TFieldName>>>;
+  useFieldValues: <TFieldName extends FormFieldName<TValues>>(
+    fieldNames: readonly TFieldName[],
+  ) => Readonly<Ref<FormFieldValue<TValues, TFieldName>[]>>;
+  useSelector: <T>(
+    selector: (state: FormRuntimeState<TValues>) => T,
+  ) => Readonly<Ref<T>>;
+  useValues: () => Readonly<Ref<TValues>>;
+  validate: () => Promise<FormValidationResult>;
+  validateField: (fieldName: string) => Promise<FormValidationResult>;
+  readonly values: TValues;
+}
+
+/** @deprecated Use `FormContextApi` instead. */
+export type FormActions<TValues extends FormValues = FormValues> =
+  FormContextApi<TValues>;
+
+type ReservedFormSlotName =
+  | 'default'
+  | 'expand-after'
+  | 'expand-before'
+  | 'reset-before'
+  | 'submit-before';
+
+type KnownFormFieldName<TValues extends FormValues> =
+  string extends Extract<keyof TValues, string>
+    ? never
+    : Exclude<Extract<keyof TValues, string>, ReservedFormSlotName>;
+
+export interface VbenFormActionSlotProps<
+  TValues extends FormValues = FormValues,
+  T extends BaseFormComponentType = BaseFormComponentType,
+  P extends Record<string, any> = Record<never, never>,
+> {
+  formApi: ExtendedFormApi<TValues, T, P>;
+  values: TValues;
+}
+
+export interface VbenFormDefaultSlotProps<
+  TValues extends FormValues = FormValues,
+  T extends BaseFormComponentType = BaseFormComponentType,
+  P extends Record<string, any> = Record<never, never>,
+> extends VbenFormActionSlotProps<TValues, T, P> {
+  shapes: FormShape[];
+}
+
+export interface VbenFormFieldSlotProps<
+  TValues extends FormValues = FormValues,
+  TFieldName extends KnownFormFieldName<TValues> = KnownFormFieldName<TValues>,
+  T extends BaseFormComponentType = BaseFormComponentType,
+  P extends Record<string, any> = Record<never, never>,
+> extends VbenFormActionSlotProps<TValues, T, P> {
+  componentField: FormComponentField<TValues[TFieldName], TFieldName>;
+  disabled: boolean;
+  field: FormRuntimeField<TValues[TFieldName]>;
+  isInValid: boolean;
+  modelValue: TValues[TFieldName];
+  name: TFieldName;
+}
+
+type VbenFormFieldSlots<
+  TValues extends FormValues,
+  T extends BaseFormComponentType,
+  P extends Record<string, any>,
+> =
+  string extends Extract<keyof TValues, string>
+    ? Record<string, ((props: any) => any) | undefined>
+    : {
+        [TFieldName in KnownFormFieldName<TValues>]?: (
+          props: VbenFormFieldSlotProps<TValues, TFieldName, T, P>,
+        ) => any;
+      };
+
+export type VbenFormSlots<
+  TValues extends FormValues = FormValues,
+  T extends BaseFormComponentType = BaseFormComponentType,
+  P extends Record<string, any> = Record<never, never>,
+> = VbenFormFieldSlots<TValues, T, P> & {
+  default?: (props: VbenFormDefaultSlotProps<TValues, T, P>) => any;
+  'expand-after'?: (props: VbenFormActionSlotProps<TValues, T, P>) => any;
+  'expand-before'?: (props: VbenFormActionSlotProps<TValues, T, P>) => any;
+  'reset-before'?: (props: VbenFormActionSlotProps<TValues, T, P>) => any;
+  'submit-before'?: (props: VbenFormActionSlotProps<TValues, T, P>) => any;
+};
+
+export type VbenFormComponent<
+  TValues extends FormValues = FormValues,
+  T extends BaseFormComponentType = BaseFormComponentType,
+  P extends Record<string, any> = Record<never, never>,
+> = new () => {
+  $props: VbenFormProps<T, P, TValues>;
+  $slots: VbenFormSlots<TValues, T, P>;
+};
+
+export interface FormSchemaContext<TValues extends FormValues = FormValues> {
   /** 数组字段名，例如 contacts */
   arrayField?: string;
   /** 当前真实字段名，例如 contacts[0].name */
@@ -74,7 +274,7 @@ export interface FormSchemaContext {
   /** 原始 schema 字段名，例如 name */
   originalFieldName?: string;
   /** 表单完整值 */
-  rootValues?: Record<string, any>;
+  rootValues?: TValues;
   /** 当前行数据 */
   row?: Record<string, any>;
   /** 当前行索引 */
@@ -86,12 +286,8 @@ export interface FormSchemaContext {
 export type CustomRenderType = (() => Component | string) | string;
 
 // 动态渲染参数
-export type CustomParamsRenderType =
-  | ((
-      value: Partial<Record<string, any>>,
-      actions: FormActions,
-      ctx?: FormSchemaContext,
-    ) => Component | string)
+export type CustomParamsRenderType<TValues extends FormValues = FormValues> =
+  | ((ctx: FormSchemaContext<TValues>) => Component | string)
   | string;
 
 export type FormSchemaRuleType =
@@ -99,78 +295,138 @@ export type FormSchemaRuleType =
   | 'selectRequired'
   | null
   | (Record<never, never> & string)
-  | ZodTypeAny;
+  | ZodType;
 
-type FormItemDependenciesCondition<T = boolean | PromiseLike<boolean>> = (
-  value: Partial<Record<string, any>>,
-  actions: FormActions,
-  controller: ExtendedFormApi, // 在 dependencies 里提供访问extendApi的能力
-  ctx?: FormSchemaContext,
-) => T;
+type FormItemDependenciesCondition<
+  TValues extends FormValues,
+  TResult = boolean | PromiseLike<boolean>,
+> = (
+  value: Partial<TValues>,
+  actions: FormActions<TValues>,
+  controller: ExtendedFormApi<TValues>, // 在 dependencies 里提供访问extendApi的能力
+  ctx?: FormSchemaContext<TValues>,
+) => TResult;
 
-type FormItemDependenciesConditionWithRules = (
-  value: Partial<Record<string, any>>,
-  actions: FormActions,
-  controller: ExtendedFormApi, // 在 dependencies 里提供访问extendApi的能力
-  ctx?: FormSchemaContext,
+type FormItemDependenciesConditionWithRules<TValues extends FormValues> = (
+  value: Partial<TValues>,
+  actions: FormActions<TValues>,
+  controller: ExtendedFormApi<TValues>, // 在 dependencies 里提供访问extendApi的能力
+  ctx?: FormSchemaContext<TValues>,
 ) => FormSchemaRuleType | PromiseLike<FormSchemaRuleType>;
 
-type FormItemDependenciesConditionWithProps = (
-  value: Partial<Record<string, any>>,
-  actions: FormActions,
-  controller: ExtendedFormApi, // 在 dependencies 里提供访问extendApi的能力
-  ctx?: FormSchemaContext,
+type FormItemDependenciesConditionWithProps<TValues extends FormValues> = (
+  value: Partial<TValues>,
+  actions: FormActions<TValues>,
+  controller: ExtendedFormApi<TValues>, // 在 dependencies 里提供访问extendApi的能力
+  ctx?: FormSchemaContext<TValues>,
 ) => MaybeComponentProps | PromiseLike<MaybeComponentProps>;
 
-export interface FormItemDependencies {
-  /**
-   * 组件参数
-   * @returns 组件参数
-   */
-  componentProps?: FormItemDependenciesConditionWithProps;
-  /**
-   * 是否禁用
-   * @returns 是否禁用
-   */
-  disabled?: boolean | FormItemDependenciesCondition;
-  /**
-   * 是否渲染（删除dom）
-   * @returns 是否渲染
-   */
-  if?: boolean | FormItemDependenciesCondition;
-  /**
-   * 是否必填
-   * @returns 是否必填
-   */
-  required?: FormItemDependenciesCondition;
-  /**
-   * 字段规则
-   */
-  rules?: FormItemDependenciesConditionWithRules;
-  /**
-   * 是否隐藏(Css)
-   * @returns 是否隐藏
-   */
-  show?: boolean | FormItemDependenciesCondition;
-  /**
-   * 任意触发都会执行
-   */
-  trigger?: FormItemDependenciesCondition<void>;
+interface FormItemDependenciesBase {
   /**
    * 触发字段
    */
   triggerFields: string[];
 }
 
-type ComponentProps =
-  | ((
-      value: Partial<Record<string, any>>,
-      actions: FormActions,
-      ctx?: FormSchemaContext,
-    ) => MaybeComponentProps)
+export interface FormDependenciesResolveContext<
+  TValues extends FormValues = FormValues,
+> {
+  actions: FormActions<TValues>;
+  controller: ExtendedFormApi<TValues>;
+  schema: FormSchemaContext<TValues>;
+  values: Readonly<TValues>;
+}
+
+export interface FormDependenciesResolvedState {
+  componentProps?: MaybeComponentProps;
+  disabled?: boolean;
+  help?: CustomRenderType;
+  if?: boolean;
+  renderComponentContent?: Record<string, any>;
+  required?: boolean;
+  rules?: FormSchemaRuleType;
+  show?: boolean;
+}
+
+export interface FormItemDependenciesLegacy<
+  TValues extends FormValues = FormValues,
+> extends FormItemDependenciesBase {
+  /**
+   * 组件参数
+   * @returns 组件参数
+   * @deprecated Use `dependencies.resolve` instead.
+   */
+  componentProps?: FormItemDependenciesConditionWithProps<TValues>;
+  /**
+   * 是否禁用
+   * @returns 是否禁用
+   * @deprecated Use `dependencies.resolve` instead.
+   */
+  disabled?: boolean | FormItemDependenciesCondition<TValues>;
+  /**
+   * 是否渲染（删除dom）
+   * @returns 是否渲染
+   * @deprecated Use `dependencies.resolve` instead.
+   */
+  if?: boolean | FormItemDependenciesCondition<TValues>;
+  /**
+   * 是否必填
+   * @returns 是否必填
+   * @deprecated Use `dependencies.resolve` instead.
+   */
+  required?: FormItemDependenciesCondition<TValues>;
+  resolve?: never;
+  /**
+   * 字段规则
+   * @deprecated Use `dependencies.resolve` instead.
+   */
+  rules?: FormItemDependenciesConditionWithRules<TValues>;
+  /**
+   * 是否隐藏(Css)
+   * @returns 是否隐藏
+   * @deprecated Use `dependencies.resolve` instead.
+   */
+  show?: boolean | FormItemDependenciesCondition<TValues>;
+  /**
+   * 任意触发都会执行
+   * @deprecated Use `dependencies.resolve` instead.
+   */
+  trigger?: FormItemDependenciesCondition<TValues, void>;
+}
+
+export interface FormItemDependenciesResolve<
+  TValues extends FormValues = FormValues,
+> extends FormItemDependenciesBase {
+  componentProps?: never;
+  disabled?: never;
+  if?: never;
+  required?: never;
+  resolve: (
+    context: FormDependenciesResolveContext<TValues>,
+  ) =>
+    | FormDependenciesResolvedState
+    | PromiseLike<FormDependenciesResolvedState | undefined>
+    | undefined;
+  rules?: never;
+  show?: never;
+  trigger?: never;
+}
+
+export type FormItemDependencies<TValues extends FormValues = FormValues> =
+  | FormItemDependenciesLegacy<TValues>
+  | FormItemDependenciesResolve<TValues>;
+
+type ComponentProps<TValues extends FormValues = FormValues> =
+  | ((ctx: FormSchemaContext<TValues>) => MaybeComponentProps)
   | MaybeComponentProps;
 
-export interface FormCommonConfig {
+export interface FormCommonConfig<TValues extends FormValues = FormValues> {
+  /**
+   * 是否启用 change 事件兼容回退。
+   * 仅当组件不发送 update:*、只发送 change 时启用。
+   * @default false
+   */
+  changeEventFallback?: boolean;
   /**
    * 是否可折叠的
    * @default false
@@ -183,7 +439,7 @@ export interface FormCommonConfig {
   /**
    * 所有表单项的props
    */
-  componentProps?: ComponentProps;
+  componentProps?: ComponentProps<TValues>;
   /**
    * 所有表单项的控件样式
    */
@@ -198,16 +454,6 @@ export interface FormCommonConfig {
    * @default false
    */
   disabled?: boolean;
-  /**
-   * 是否禁用所有表单项的change事件监听
-   * @default true
-   */
-  disabledOnChangeListener?: boolean;
-  /**
-   * 是否禁用所有表单项的input事件监听
-   * @default true
-   */
-  disabledOnInputListener?: boolean;
   /**
    * 所有表单项的空状态值,默认都是undefined，naive-ui的空状态值是null
    */
@@ -252,18 +498,12 @@ export interface FormCommonConfig {
   wrapperClass?: string;
 }
 
-type RenderComponentContentType = (
-  value: Partial<Record<string, any>>,
-  api: FormActions,
-  ctx?: FormSchemaContext,
+type RenderComponentContentType<TValues extends FormValues = FormValues> = (
+  ctx: FormSchemaContext<TValues>,
 ) => Record<string, any>;
 
-type MappedComponentProps<P> =
-  | ((
-      value: Partial<Record<string, any>>,
-      actions: FormActions,
-      ctx?: FormSchemaContext,
-    ) => P & Record<string, any>)
+type MappedComponentProps<P, TValues extends FormValues = FormValues> =
+  | ((ctx: FormSchemaContext<TValues>) => P & Record<string, any>)
   | (P & Record<string, any>);
 
 /**
@@ -273,30 +513,33 @@ type MappedComponentProps<P> =
  * - 返回其他值：会将当前字段恢复/写回为该返回值
  * - `setValue` 回调签名为 `(key, nextValue) => void`
  */
-export type FormValueFormat = (
+export type FormValueFormat<TValues extends FormValues = FormValues> = (
   value: any,
   setValue: (fieldName: string, value: any) => void,
-  values: Record<string, any>,
-  ctx?: FormSchemaContext,
+  values: TValues,
+  ctx?: FormSchemaContext<TValues>,
 ) => any;
 
-interface FormSchemaBody extends Omit<FormCommonConfig, 'componentProps'> {
+interface FormSchemaBody<TValues extends FormValues = FormValues> extends Omit<
+  FormCommonConfig<TValues>,
+  'componentProps'
+> {
   /** 默认值 */
   defaultValue?: any;
   /** 依赖 */
-  dependencies?: FormItemDependencies;
+  dependencies?: FormItemDependencies<TValues>;
   /** 描述 */
   description?: CustomRenderType;
   /** 字段名 */
   fieldName: string;
   /** 帮助信息 */
-  help?: CustomParamsRenderType;
+  help?: CustomParamsRenderType<TValues>;
   /** 是否隐藏表单项 */
   hide?: boolean;
   /** 表单项 */
   label?: CustomRenderType;
   // 自定义组件内部渲染
-  renderComponentContent?: RenderComponentContentType;
+  renderComponentContent?: RenderComponentContentType<TValues>;
   /** 字段规则 */
   rules?: FormSchemaRuleType;
   /** 后缀 */
@@ -306,54 +549,60 @@ interface FormSchemaBody extends Omit<FormCommonConfig, 'componentProps'> {
    * - 返回值不为 `undefined` 时，会回写到当前 fieldName
    * - 返回值为 `undefined` 时，可通过 setValue 写入一个或多个目标字段
    */
-  valueFormat?: FormValueFormat;
+  valueFormat?: FormValueFormat<TValues>;
 }
 
 type FormSchemaDiscriminated<
   T extends BaseFormComponentType,
   P extends Record<string, any>,
+  TValues extends FormValues,
 > = {
   [K in Extract<keyof P, T>]: {
     /** 组件 */
     component: K;
     /** 组件参数 */
-    componentProps?: MappedComponentProps<P[K]>;
-  } & FormSchemaBody;
+    componentProps?: MappedComponentProps<P[K], TValues>;
+  } & FormSchemaBody<TValues>;
 }[Extract<keyof P, T>];
 
-type FormSchemaFallback<T extends BaseFormComponentType> = {
+type FormSchemaFallback<
+  T extends BaseFormComponentType,
+  TValues extends FormValues,
+> = {
   /** 组件 */
   component: Component | T;
   /** 组件参数 */
-  componentProps?: ComponentProps;
-} & FormSchemaBody;
+  componentProps?: ComponentProps<TValues>;
+} & FormSchemaBody<TValues>;
 
 type FormArraySchema<
   T extends BaseFormComponentType,
   P extends Record<string, any>,
+  TValues extends FormValues,
 > = {
   /** 内置数组编辑器参数 */
   arrayProps?: Omit<
-    VbenFormFieldArrayProps<T, P>,
+    VbenFormFieldArrayProps<T, P, TValues>,
     'disabled' | 'globalCommonConfig' | 'name' | 'schema'
   >;
   /** 数组子字段定义 */
-  children: FormSchema<T, P>[];
+  children: FormSchema<T, P, TValues>[];
   /** 兼容显式指定内置数组编辑器 */
   component?: Component | T;
   /** 兼容通过 componentProps 传递数组编辑器参数 */
-  componentProps?: ComponentProps;
+  componentProps?: ComponentProps<TValues>;
   /** 数组字段标记 */
   type: 'array';
-} & FormSchemaBody;
+} & FormSchemaBody<TValues>;
 
 export type FormSchema<
   T extends BaseFormComponentType = BaseFormComponentType,
   P extends Record<string, any> = Record<never, never>,
+  TValues extends FormValues = FormValues,
 > =
-  | FormArraySchema<T, P>
-  | FormSchemaDiscriminated<T, P>
-  | FormSchemaFallback<T>;
+  | FormArraySchema<T, P, TValues>
+  | FormSchemaDiscriminated<T, P, TValues>
+  | FormSchemaFallback<T, TValues>;
 
 /**
  * 数组编辑器（VbenFormFieldArray）的组件参数
@@ -361,20 +610,21 @@ export type FormSchema<
 export interface VbenFormFieldArrayProps<
   T extends BaseFormComponentType = BaseFormComponentType,
   P extends Record<string, any> = Record<never, never>,
+  TValues extends FormValues = FormValues,
 > {
   /** 操作列表头文案 */
   actionText?: string;
   /** 「添加」按钮文案 */
   addButtonText?: string;
   /** 子字段通用配置 */
-  commonConfig?: FormCommonConfig;
+  commonConfig?: FormCommonConfig<TValues>;
   /** 新增一行时生成的默认数据；缺省时按列定义的 fieldName 生成空对象 */
   createRow?: () => Record<string, any>;
   disabled?: boolean;
   /** 空数据文案 */
   emptyText?: string;
   /** 子字段全局通用配置 */
-  globalCommonConfig?: FormCommonConfig;
+  globalCommonConfig?: FormCommonConfig<TValues>;
   /** 最多行数 */
   max?: number;
   /** 最少行数 */
@@ -382,17 +632,18 @@ export interface VbenFormFieldArrayProps<
   /** 数组字段路径，由外层 FormField 透传 */
   name?: string;
   /** 列定义，每一列是一个子字段（复用 FormSchema） */
-  schema?: FormSchema<T, P>[];
+  schema?: FormSchema<T, P, TValues>[];
   /** 是否显示序号列 */
   showIndex?: boolean;
 }
 
-export type HandleSubmitFn = (
-  values: Record<string, any>,
+export type HandleSubmitFn<TValues extends FormValues = FormValues> = (
+  values: TValues,
+  rawValues: Readonly<TValues>,
 ) => Promise<void> | void;
 
-export type HandleResetFn = (
-  values: Record<string, any>,
+export type HandleResetFn<TValues extends FormValues = FormValues> = (
+  values: TValues,
 ) => Promise<void> | void;
 
 export type FieldMappingTimeItem = [
@@ -416,16 +667,18 @@ export type ArrayToStringFields = Array<
 
 export interface FormFieldProps<
   T extends BaseFormComponentType = BaseFormComponentType,
-> extends FormSchemaBody {
+  TValues extends FormValues = FormValues,
+> extends FormSchemaBody<TValues> {
   /** 组件 */
   component: Component | T;
   /** 组件参数 */
-  componentProps?: ComponentProps;
+  componentProps?: ComponentProps<TValues>;
 }
 
 export interface FormRenderProps<
   T extends BaseFormComponentType = BaseFormComponentType,
   P extends Record<string, any> = Record<never, never>,
+  TValues extends FormValues = FormValues,
 > {
   /**
    * 表单字段数组映射字符串配置 默认使用","
@@ -449,7 +702,7 @@ export interface FormRenderProps<
   /**
    * 表单项通用后备配置，当子项目没配置时使用这里的配置，子项目配置优先级高于此配置
    */
-  commonConfig?: FormCommonConfig;
+  commonConfig?: FormCommonConfig<TValues>;
   /**
    * 紧凑模式（移除表单每一项底部为校验信息预留的空间）
    */
@@ -469,7 +722,7 @@ export interface FormRenderProps<
   /**
    * 表单实例
    */
-  form?: FormContext<GenericObject>;
+  form?: FormActions<TValues>;
   /**
    * 表单项布局
    */
@@ -477,7 +730,7 @@ export interface FormRenderProps<
   /**
    * 表单定义
    */
-  schema?: FormSchema<T, P>[];
+  schema?: FormSchema<T, P, TValues>[];
 
   /**
    * 是否显示展开/折叠
@@ -503,8 +756,9 @@ export interface ActionButtonOptions extends VbenButtonProps {
 export interface VbenFormProps<
   T extends BaseFormComponentType = BaseFormComponentType,
   P extends Record<string, any> = Record<never, never>,
+  TValues extends FormValues = FormValues,
 > extends Omit<
-  FormRenderProps<T, P>,
+  FormRenderProps<T, P, TValues>,
   'componentBindEventMap' | 'componentMap' | 'form'
 > {
   /**
@@ -544,17 +798,18 @@ export interface VbenFormProps<
   /**
    * 表单重置回调
    */
-  handleReset?: HandleResetFn;
+  handleReset?: HandleResetFn<TValues>;
   /**
    * 表单提交回调
    */
-  handleSubmit?: HandleSubmitFn;
+  handleSubmit?: HandleSubmitFn<TValues>;
   /**
    * 表单值变化回调
    */
   handleValuesChange?: (
-    values: Record<string, any>,
+    values: Readonly<TValues>,
     fieldsChanged: string[],
+    getFormattedValues: () => TValues,
   ) => void;
 
   /**
@@ -592,10 +847,14 @@ export interface VbenFormProps<
   submitOnEnter?: boolean;
 }
 
-export type ExtendedFormApi = FormApi & {
-  useStore: <T = NoInfer<VbenFormProps>>(
-    selector?: (state: NoInfer<VbenFormProps>) => T,
-  ) => Readonly<Ref<T>>;
+export type ExtendedFormApi<
+  TValues extends FormValues = FormValues,
+  T extends BaseFormComponentType = BaseFormComponentType,
+  P extends Record<string, any> = Record<never, never>,
+> = FormApi<TValues, T, P> & {
+  useStore: <TResult = NoInfer<VbenFormProps<T, P, TValues>>>(
+    selector?: (state: NoInfer<VbenFormProps<T, P, TValues>>) => TResult,
+  ) => Readonly<Ref<TResult>>;
 };
 
 export interface VbenFormAdapterOptions<
@@ -603,21 +862,31 @@ export interface VbenFormAdapterOptions<
 > {
   config?: {
     baseModelPropName?: string;
-    disabledOnChangeListener?: boolean;
-    disabledOnInputListener?: boolean;
+    /**
+     * 是否启用 change 事件兼容回退。
+     * 仅用于只发送 change 的兼容组件。
+     * @default false
+     */
+    changeEventFallback?: boolean;
     emptyStateValue?: null | undefined;
     modelPropNameMap?: Partial<Record<T, string>>;
   };
-  defineRules?: {
-    required?: (
-      value: any,
-      params: any,
-      ctx: Record<string, any>,
-    ) => boolean | string;
-    selectRequired?: (
-      value: any,
-      params: any,
-      ctx: Record<string, any>,
-    ) => boolean | string;
-  };
+  /** @deprecated Use `rules` instead. */
+  defineRules?: Partial<Record<string, FormRuleValidator>>;
+  rules?: Partial<Record<string, FormRuleValidator>>;
 }
+
+export interface FormRuleContext {
+  field: {
+    label?: string;
+    name: string;
+  };
+  label?: string;
+  name: string;
+}
+
+export type FormRuleValidator = (
+  value: any,
+  params: any,
+  context: FormRuleContext,
+) => boolean | Promise<boolean | string> | string;
diff --git a/packages/@core/ui-kit/form-ui/src/use-form-context.ts b/packages/@core/ui-kit/form-ui/src/use-form-context.ts
index e95c87b9..ae3d69f9 100644
--- a/packages/@core/ui-kit/form-ui/src/use-form-context.ts
+++ b/packages/@core/ui-kit/form-ui/src/use-form-context.ts
@@ -1,19 +1,22 @@
-import type { ZodRawShape } from 'zod';
+import type { ZodType } from 'zod';
 
 import type { ComputedRef } from 'vue';
 
 import type { ExtendedFormApi, FormActions, VbenFormProps } from './types';
 
-import { computed, unref, useSlots } from 'vue';
+import { computed, toRaw, unref, useSlots } from 'vue';
 
 import { createContext } from '@vben-core/shadcn-ui';
 import { isString, mergeWithArrayOverride, set } from '@vben-core/shared/utils';
 
-import { useForm } from 'vee-validate';
 import { object, ZodIntersection, ZodNumber, ZodObject, ZodString } from 'zod';
 import { getDefaultsForSchema } from 'zod-defaults';
 
-type ExtendFormProps = VbenFormProps & { formApi?: ExtendedFormApi };
+import { useFormRuntime } from './form-runtime';
+
+type ExtendFormProps = VbenFormProps & {
+  formApi?: ExtendedFormApi<any, any, any>;
+};
 
 export const [injectFormProps, provideFormProps] =
   createContext<[ComputedRef<ExtendFormProps> | ExtendFormProps, FormActions]>(
@@ -29,9 +32,7 @@ export function useFormInitial(
   const slots = useSlots();
   const initialValues = generateInitialValues();
 
-  const form = useForm({
-    ...(Object.keys(initialValues)?.length ? { initialValues } : {}),
-  });
+  const form = useFormRuntime(initialValues);
 
   const delegatedSlots = computed(() => {
     const resultSlots: string[] = [];
@@ -47,14 +48,15 @@ export function useFormInitial(
   function generateInitialValues() {
     const initialValues: Record<string, any> = {};
 
-    const zodObject: ZodRawShape = {};
+    const zodObject: Record<string, ZodType> = {};
     (unref(props).schema || []).forEach((item) => {
       if (Reflect.has(item, 'defaultValue')) {
         set(initialValues, item.fieldName, item.defaultValue);
       } else if (item.rules && !isString(item.rules)) {
         // 检查规则是否适合提取默认值
-        const customDefaultValue = getCustomDefaultValue(item.rules);
-        zodObject[item.fieldName] = item.rules;
+        const rawRules = toRaw(item.rules);
+        const customDefaultValue = getCustomDefaultValue(rawRules);
+        zodObject[item.fieldName] = rawRules;
         if (customDefaultValue !== undefined) {
           initialValues[item.fieldName] = customDefaultValue;
         }
@@ -71,6 +73,7 @@ export function useFormInitial(
   }
   // 自定义默认值提取逻辑
   function getCustomDefaultValue(rule: any): any {
+    rule = toRaw(rule);
     if (rule instanceof ZodString) {
       return ''; // 默认为空字符串
     } else if (rule instanceof ZodNumber) {
@@ -83,20 +86,7 @@ export function useFormInitial(
       }
       return defaultValues;
     } else if (rule instanceof ZodIntersection) {
-      // 对于交集类型，从schema 提取默认值
-      const leftDefaultValue = getCustomDefaultValue(rule._def.left);
-      const rightDefaultValue = getCustomDefaultValue(rule._def.right);
-
-      // 如果左右两边都能提取默认值，合并它们
-      if (
-        typeof leftDefaultValue === 'object' &&
-        typeof rightDefaultValue === 'object'
-      ) {
-        return { ...leftDefaultValue, ...rightDefaultValue };
-      }
-
-      // 否则优先使用左边的默认值
-      return leftDefaultValue ?? rightDefaultValue;
+      return getDefaultsForSchema(rule);
     } else {
       return undefined; // 其他类型不提供默认值
     }
diff --git a/packages/@core/ui-kit/form-ui/src/use-vben-form.ts b/packages/@core/ui-kit/form-ui/src/use-vben-form.ts
index da3c57d9..a3c61f06 100644
--- a/packages/@core/ui-kit/form-ui/src/use-vben-form.ts
+++ b/packages/@core/ui-kit/form-ui/src/use-vben-form.ts
@@ -1,6 +1,8 @@
 import type {
   BaseFormComponentType,
   ExtendedFormApi,
+  FormValues,
+  VbenFormComponent,
   VbenFormProps,
 } from './types';
 
@@ -11,14 +13,30 @@ import { useSelector } from '@vben-core/shared/store';
 import { FormApi } from './form-api';
 import VbenUseForm from './vben-use-form.vue';
 
+type UseVbenFormReturn<
+  TValues extends FormValues,
+  T extends BaseFormComponentType,
+  P extends Record<string, any>,
+> = readonly [VbenFormComponent<TValues, T, P>, ExtendedFormApi<TValues, T, P>];
+
 export function useVbenForm<
   T extends BaseFormComponentType = BaseFormComponentType,
   P extends Record<string, any> = Record<never, never>,
->(options: VbenFormProps<T, P>) {
+>(options: VbenFormProps<T, P>): UseVbenFormReturn<FormValues, T, P>;
+
+export function useVbenForm<
+  TValues extends FormValues,
+  T extends BaseFormComponentType = BaseFormComponentType,
+  P extends Record<string, any> = Record<never, never>,
+>(options: VbenFormProps<T, P, TValues>): UseVbenFormReturn<TValues, T, P>;
+
+export function useVbenForm(
+  options: VbenFormProps<any, any, any>,
+): UseVbenFormReturn<any, any, any> {
   const IS_REACTIVE = isReactive(options);
-  const api = new FormApi(options as unknown as VbenFormProps);
-  const extendedApi: ExtendedFormApi = api as never;
-  extendedApi.useStore = (selector) => {
+  const api = new FormApi<any, any, any>(options);
+  const extendedApi = api as ExtendedFormApi<any, any, any>;
+  extendedApi.useStore = (selector: any) => {
     return useSelector(api.store, selector);
   };
 
@@ -47,5 +65,5 @@ export function useVbenForm<
     );
   }
 
-  return [Form, extendedApi] as const;
+  return [Form, extendedApi] as unknown as UseVbenFormReturn<any, any, any>;
 }
diff --git a/packages/@core/ui-kit/form-ui/src/vben-use-form.vue b/packages/@core/ui-kit/form-ui/src/vben-use-form.vue
index 735adb13..b2998db6 100644
--- a/packages/@core/ui-kit/form-ui/src/vben-use-form.vue
+++ b/packages/@core/ui-kit/form-ui/src/vben-use-form.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
-import type { Recordable } from '@vben-core/typings';
+import type { ExtendedFormApi, VbenFormProps, VbenFormSlots } from './types';
 
-import type { ExtendedFormApi, VbenFormProps } from './types';
-
-import { nextTick, onMounted, watch } from 'vue';
+import { nextTick, onMounted, readonly, watch } from 'vue';
 
 import { useForwardPriorityValues } from '@vben-core/composables';
-import { cloneDeep, get, isEqual, set } from '@vben-core/shared/utils';
+import { get, isEqual } from '@vben-core/shared/utils';
 
 import { useDebounceFn } from '@vueuse/core';
 
@@ -25,29 +23,39 @@ import {
 
 // 通过 extends 会导致热更新卡死，所以重复写了一遍
 interface Props extends VbenFormProps {
-  formApi?: ExtendedFormApi;
+  formApi?: ExtendedFormApi<any, any, any>;
 }
 
 const props = defineProps<Props>();
+defineSlots<
+  Record<string, ((props: Record<string, any>) => any) | undefined> &
+    VbenFormSlots<any, any, any>
+>();
 
-const state = props.formApi?.useStore?.();
+const formApi = props.formApi;
+if (!formApi) {
+  throw new Error('Form api is required in <VbenUseForm />');
+}
+
+const state = formApi.useStore();
 
 const forward = useForwardPriorityValues(props, state);
 
 const componentRefMap = new Map<string, unknown>();
 
 const { delegatedSlots, form } = useFormInitial(forward);
+const values = form.useValues();
 
 provideFormProps([forward, form]);
 provideComponentRefMap(componentRefMap);
 
-props.formApi?.mount?.(form, componentRefMap);
+formApi.mount(form, componentRefMap);
 
-const handleUpdateCollapsed = (value: boolean) => {
+function handleUpdateCollapsed(value: boolean) {
   props.formApi?.setState({ collapsed: value });
   // 触发收起展开状态变化回调
   forward.value.handleCollapsedChange?.(value);
-};
+}
 
 function handleKeyDownEnter(event: KeyboardEvent) {
   if (!state?.value.submitOnEnter || !forward.value.formApi?.isMounted) {
@@ -60,51 +68,42 @@ function handleKeyDownEnter(event: KeyboardEvent) {
   }
   event.preventDefault();
 
-  forward.value.formApi?.validateAndSubmitForm();
+  forward.value.formApi?.validateAndSubmit();
 }
 
 const handleValuesChangeDebounced = useDebounceFn(async () => {
-  state?.value.submitOnChange && forward.value.formApi?.validateAndSubmitForm();
+  state?.value.submitOnChange && forward.value.formApi?.validateAndSubmit();
 }, state?.value?.changeDebouncedTime ?? 300);
 
-const valuesCache: Recordable<any> = {};
+let valuesChangeReady = false;
 
 onMounted(async () => {
   // 只在挂载后开始监听，form.values会有一个初始化的过程
   await nextTick();
-  watch(
-    () => form.values,
-    async (newVal) => {
-      if (forward.value.handleValuesChange) {
-        const fields = state?.value.schema?.map((item) => {
-          return item.fieldName;
-        });
+  valuesChangeReady = true;
+});
 
-        if (fields && fields.length > 0) {
-          const changedFields: string[] = [];
-          fields.forEach((field) => {
-            const newFieldValue = get(newVal, field);
-            const oldFieldValue = get(valuesCache, field);
-            if (!isEqual(newFieldValue, oldFieldValue)) {
-              changedFields.push(field);
-              set(valuesCache, field, cloneDeep(newFieldValue));
-            }
-          });
-
-          if (changedFields.length > 0) {
-            // 调用handleValuesChange回调，传入所有表单值的深拷贝和变更的字段列表
-            const values = await forward.value.formApi?.getValues();
-            forward.value.handleValuesChange(
-              cloneDeep(values ?? {}) as Record<string, any>,
-              changedFields,
-            );
-          }
-        }
-      }
-      handleValuesChangeDebounced();
-    },
-    { deep: true },
-  );
+watch(values, (currentValues, previousValues) => {
+  if (!valuesChangeReady) {
+    return;
+  }
+  const fields = state?.value.schema?.map((item) => item.fieldName) ?? [];
+  if (forward.value.handleValuesChange && fields.length > 0) {
+    const changedFields = fields.filter((field) => {
+      return !isEqual(
+        get(currentValues, field),
+        get(previousValues ?? {}, field),
+      );
+    });
+    if (changedFields.length > 0) {
+      forward.value.handleValuesChange(
+        readonly(currentValues),
+        changedFields,
+        () => formApi.formatValues(currentValues),
+      );
+    }
+  }
+  handleValuesChangeDebounced();
 });
 </script>
 
@@ -123,26 +122,51 @@ onMounted(async () => {
       :key="slotName"
       #[slotName]="slotProps"
     >
-      <slot :name="slotName" v-bind="slotProps"></slot>
+      <slot
+        :name="slotName"
+        v-bind="slotProps"
+        :form-api="formApi"
+        :values="form.values"
+      ></slot>
     </template>
     <template #default="slotProps">
-      <slot v-bind="slotProps">
+      <slot v-bind="slotProps" :form-api="formApi" :values="form.values">
         <FormActions
           v-if="forward.showDefaultActions"
           :model-value="state?.collapsed"
           @update:model-value="handleUpdateCollapsed"
         >
           <template #reset-before="resetSlotProps">
-            <slot name="reset-before" v-bind="resetSlotProps"></slot>
+            <slot
+              name="reset-before"
+              v-bind="resetSlotProps"
+              :form-api="formApi"
+              :values="form.values"
+            ></slot>
           </template>
           <template #submit-before="submitSlotProps">
-            <slot name="submit-before" v-bind="submitSlotProps"></slot>
+            <slot
+              name="submit-before"
+              v-bind="submitSlotProps"
+              :form-api="formApi"
+              :values="form.values"
+            ></slot>
           </template>
           <template #expand-before="expandBeforeSlotProps">
-            <slot name="expand-before" v-bind="expandBeforeSlotProps"></slot>
+            <slot
+              name="expand-before"
+              v-bind="expandBeforeSlotProps"
+              :form-api="formApi"
+              :values="form.values"
+            ></slot>
           </template>
           <template #expand-after="expandAfterSlotProps">
-            <slot name="expand-after" v-bind="expandAfterSlotProps"></slot>
+            <slot
+              name="expand-after"
+              v-bind="expandAfterSlotProps"
+              :form-api="formApi"
+              :values="form.values"
+            ></slot>
           </template>
         </FormActions>
       </slot>
diff --git a/packages/@core/ui-kit/shadcn-ui/package.json b/packages/@core/ui-kit/shadcn-ui/package.json
index 49513aa3..22bcddce 100644
--- a/packages/@core/ui-kit/shadcn-ui/package.json
+++ b/packages/@core/ui-kit/shadcn-ui/package.json
@@ -46,7 +46,6 @@
     "@vueuse/core": "catalog:",
     "class-variance-authority": "catalog:",
     "reka-ui": "catalog:",
-    "vee-validate": "catalog:",
     "vue": "catalog:"
   }
 }
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormField.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormField.vue
new file mode 100644
index 00000000..11cfe635
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormField.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { provide, toRefs } from 'vue';
+
+import { FORM_FIELD_INJECTION_KEY } from './injectionKeys';
+
+const props = withDefaults(
+  defineProps<{
+    dirty?: boolean;
+    error?: string;
+    name: string;
+    touched?: boolean;
+    valid?: boolean;
+  }>(),
+  {
+    dirty: false,
+    error: undefined,
+    touched: false,
+    valid: true,
+  },
+);
+
+const { dirty, error, name, touched, valid } = toRefs(props);
+
+provide(FORM_FIELD_INJECTION_KEY, {
+  dirty,
+  error,
+  name,
+  touched,
+  valid,
+});
+</script>
+
+<template>
+  <slot></slot>
+</template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue
index 181847f2..121867d4 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue
@@ -1,27 +1,24 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from 'vue';
 
-import { toValue } from 'vue';
-
 import { cn } from '@vben-core/shared/utils';
 
-import { ErrorMessage } from 'vee-validate';
-
 import { useFormField } from './useFormField';
 
 const props = defineProps<{
   class?: HTMLAttributes['class'];
 }>();
 
-const { name, formMessageId } = useFormField();
+const { error, formMessageId } = useFormField();
 </script>
 
 <template>
-  <ErrorMessage
+  <p
+    v-if="error"
     :id="formMessageId"
     data-slot="form-message"
-    as="p"
-    :name="toValue(name)"
     :class="cn('text-destructive text-sm', props.class)"
-  />
+  >
+    {{ error }}
+  </p>
 </template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/form/index.ts b/packages/@core/ui-kit/shadcn-ui/src/ui/form/index.ts
index 1d45b2b4..a4fe518a 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/form/index.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/form/index.ts
@@ -1,11 +1,10 @@
 export { default as FormControl } from './FormControl.vue';
 export { default as FormDescription } from './FormDescription.vue';
+export { default as FormField } from './FormField.vue';
 export { default as FormItem } from './FormItem.vue';
 export { default as FormLabel } from './FormLabel.vue';
 export { default as FormMessage } from './FormMessage.vue';
-export { FORM_ITEM_INJECTION_KEY } from './injectionKeys';
 export {
-  Form,
-  Field as FormField,
-  FieldArray as FormFieldArray,
-} from 'vee-validate';
+  FORM_FIELD_INJECTION_KEY,
+  FORM_ITEM_INJECTION_KEY,
+} from './injectionKeys';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/form/injectionKeys.ts b/packages/@core/ui-kit/shadcn-ui/src/ui/form/injectionKeys.ts
index 23380435..6f8baea6 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/form/injectionKeys.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/form/injectionKeys.ts
@@ -1,3 +1,13 @@
-import type { InjectionKey } from 'vue';
+import type { InjectionKey, Ref } from 'vue';
+
+export interface FormFieldContext {
+  dirty: Readonly<Ref<boolean>>;
+  error: Readonly<Ref<string | undefined>>;
+  name: Readonly<Ref<string>>;
+  touched: Readonly<Ref<boolean>>;
+  valid: Readonly<Ref<boolean>>;
+}
 
 export const FORM_ITEM_INJECTION_KEY = Symbol() as InjectionKey<string>;
+export const FORM_FIELD_INJECTION_KEY =
+  Symbol() as InjectionKey<FormFieldContext>;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/form/useFormField.ts b/packages/@core/ui-kit/shadcn-ui/src/ui/form/useFormField.ts
index 6498dfcd..e426e1f8 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/form/useFormField.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/form/useFormField.ts
@@ -1,23 +1,26 @@
 import { computed, inject } from 'vue';
 
-import { FieldContextKey } from 'vee-validate';
-
-import { FORM_ITEM_INJECTION_KEY } from './injectionKeys';
+import {
+  FORM_FIELD_INJECTION_KEY,
+  FORM_ITEM_INJECTION_KEY,
+} from './injectionKeys';
 
 export function useFormField() {
-  const fieldContext = inject(FieldContextKey);
+  const fieldContext = inject(FORM_FIELD_INJECTION_KEY);
   const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY);
 
   if (!fieldContext)
     throw new Error('useFormField should be used within <FormField>');
+  if (!fieldItemContext)
+    throw new Error('useFormField should be used within <FormItem>');
 
-  const { name, errorMessage: error, meta } = fieldContext;
+  const { dirty, error, name, touched, valid } = fieldContext;
   const id = fieldItemContext;
 
   const fieldState = {
-    valid: computed(() => meta.valid),
-    isDirty: computed(() => meta.dirty),
-    isTouched: computed(() => meta.touched),
+    valid: computed(() => valid.value),
+    isDirty: computed(() => dirty.value),
+    isTouched: computed(() => touched.value),
     error,
   };
 
diff --git a/packages/effects/common-ui/src/ui/profile/notification-setting.vue b/packages/effects/common-ui/src/ui/profile/notification-setting.vue
index 9a3e4882..daae2447 100644
--- a/packages/effects/common-ui/src/ui/profile/notification-setting.vue
+++ b/packages/effects/common-ui/src/ui/profile/notification-setting.vue
@@ -4,7 +4,6 @@ import type { Recordable } from '@vben/types';
 import type { SettingProps } from './types';
 
 import {
-  Form,
   FormControl,
   FormDescription,
   FormField,
@@ -26,7 +25,7 @@ function handleChange(fieldName: string, value: boolean) {
 }
 </script>
 <template>
-  <Form class="space-y-8">
+  <form class="space-y-8">
     <div class="space-y-4">
       <template v-for="item in formSchema" :key="item.fieldName">
         <FormField type="checkbox" :name="item.fieldName">
@@ -49,5 +48,5 @@ function handleChange(fieldName: string, value: boolean) {
         </FormField>
       </template>
     </div>
-  </Form>
+  </form>
 </template>
diff --git a/packages/effects/common-ui/src/ui/profile/security-setting.vue b/packages/effects/common-ui/src/ui/profile/security-setting.vue
index 9a3e4882..daae2447 100644
--- a/packages/effects/common-ui/src/ui/profile/security-setting.vue
+++ b/packages/effects/common-ui/src/ui/profile/security-setting.vue
@@ -4,7 +4,6 @@ import type { Recordable } from '@vben/types';
 import type { SettingProps } from './types';
 
 import {
-  Form,
   FormControl,
   FormDescription,
   FormField,
@@ -26,7 +25,7 @@ function handleChange(fieldName: string, value: boolean) {
 }
 </script>
 <template>
-  <Form class="space-y-8">
+  <form class="space-y-8">
     <div class="space-y-4">
       <template v-for="item in formSchema" :key="item.fieldName">
         <FormField type="checkbox" :name="item.fieldName">
@@ -49,5 +48,5 @@ function handleChange(fieldName: string, value: boolean) {
         </FormField>
       </template>
     </div>
-  </Form>
+  </form>
 </template>
diff --git a/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue b/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue
index e5a43bef..9170bdd8 100644
--- a/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue
+++ b/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue
@@ -41,7 +41,7 @@ const [Form, { resetForm, validate, getValues, getFieldComponentRef }] =
             placeholder: $t('ui.widgets.lockScreen.placeholder'),
           },
           fieldName: 'lockScreenPassword',
-          formFieldProps: { validateOnBlur: false },
+          formFieldProps: { validateOn: ['change'] as const },
           label: $t('authentication.password'),
           rules: z
             .string()
diff --git a/packages/effects/layouts/src/widgets/preferences/blocks/draggable-list.vue b/packages/effects/layouts/src/widgets/preferences/blocks/draggable-list.vue
index 2af8ddad..e840e473 100644
--- a/packages/effects/layouts/src/widgets/preferences/blocks/draggable-list.vue
+++ b/packages/effects/layouts/src/widgets/preferences/blocks/draggable-list.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { SelectOption } from '@vben/types';
 
-import { computed, nextTick, onMounted, ref } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
 
 import { GripVertical } from '@vben/icons';
 import { $t } from '@vben/locales';
@@ -62,6 +62,10 @@ function initSortable() {
 }
 
 onMounted(initSortable);
+onUnmounted(() => {
+  sortableInstance?.destroy();
+  sortableInstance = null;
+});
 
 function setPosition(key: string, event: Event) {
   const value = (event.target as HTMLSelectElement).value as
diff --git a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
index e8ef0097..3f0b96e3 100644
--- a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
+++ b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
@@ -131,7 +131,7 @@ const [Form, formApi] = useTableForm({
   },
   handleReset: async () => {
     const prevValues = await formApi.getValues();
-    await formApi.resetForm();
+    await formApi.reset();
     const formValues = await formApi.getValues();
     formApi.setLatestSubmissionValues(formValues);
     // 如果值发生了变化，submitOnChange会触发刷新。所以只在submitOnChange为false或者值没有发生变化时，手动刷新
diff --git a/playground/src/adapter/form.ts b/playground/src/adapter/form.ts
index f535d02c..deaf5acd 100644
--- a/playground/src/adapter/form.ts
+++ b/playground/src/adapter/form.ts
@@ -1,6 +1,7 @@
 import type {
   VbenFormProps as FormProps,
   VbenFormSchema as FormSchema,
+  FormValues,
 } from '@vben/common-ui';
 
 import type { ComponentPropsMap, ComponentType } from './component';
@@ -21,7 +22,7 @@ async function initSetupVbenForm() {
         Upload: 'fileList',
       },
     },
-    defineRules: {
+    rules: {
       // 输入项目必填国际化适配
       required: (value, _params, ctx) => {
         if (value === undefined || value === null || value.length === 0) {
@@ -40,9 +41,18 @@ async function initSetupVbenForm() {
   });
 }
 
-const useVbenForm = useForm<ComponentType, ComponentPropsMap>;
+function useVbenForm<TValues extends FormValues = FormValues>(
+  options: FormProps<ComponentType, ComponentPropsMap, TValues>,
+) {
+  return useForm<TValues, ComponentType, ComponentPropsMap>(options);
+}
 
 export { initSetupVbenForm, useVbenForm, z };
 
-export type VbenFormSchema = FormSchema<ComponentType, ComponentPropsMap>;
-export type VbenFormProps = FormProps<ComponentType, ComponentPropsMap>;
+export type VbenFormSchema<TValues extends FormValues = FormValues> =
+  FormSchema<ComponentType, ComponentPropsMap, TValues>;
+export type VbenFormProps<TValues extends FormValues = FormValues> = FormProps<
+  ComponentType,
+  ComponentPropsMap,
+  TValues
+>;
diff --git a/playground/src/views/_core/authentication/register.vue b/playground/src/views/_core/authentication/register.vue
index 8c429531..a1175357 100644
--- a/playground/src/views/_core/authentication/register.vue
+++ b/playground/src/views/_core/authentication/register.vue
@@ -46,7 +46,7 @@ const formSchema = computed((): VbenFormSchema[] => {
         rules(values) {
           const { password } = values;
           return z
-            .string({ required_error: $t('authentication.passwordTip') })
+            .string({ error: $t('authentication.passwordTip') })
             .min(1, { message: $t('authentication.passwordTip') })
             .refine((value) => value === password, {
               message: $t('authentication.confirmPasswordTip'),
diff --git a/playground/src/views/_core/profile/password-setting.vue b/playground/src/views/_core/profile/password-setting.vue
index adb065a2..a79d083a 100644
--- a/playground/src/views/_core/profile/password-setting.vue
+++ b/playground/src/views/_core/profile/password-setting.vue
@@ -38,7 +38,7 @@ const formSchema = computed((): VbenFormSchema[] => {
         rules(values) {
           const { newPassword } = values;
           return z
-            .string({ required_error: '请再次输入新密码' })
+            .string({ error: '请再次输入新密码' })
             .min(1, { message: '请再次输入新密码' })
             .refine((value) => value === newPassword, {
               message: '两次输入的密码不一致',
diff --git a/playground/src/views/demos/form-array/index.vue b/playground/src/views/demos/form-array/index.vue
index 24d51478..744a5853 100644
--- a/playground/src/views/demos/form-array/index.vue
+++ b/playground/src/views/demos/form-array/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { VbenFormSchema } from '#/adapter/form';
 
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import { Page } from '@vben/common-ui';
 
@@ -10,6 +10,18 @@ import { Button, Card, message, Space } from 'antdv-next';
 import { useVbenForm, z } from '#/adapter/form';
 
 const submitValues = ref<Record<string, any>>({});
+const formattedSubmitValues = computed(() =>
+  JSON.stringify(submitValues.value, null, 2),
+);
+const outputClass = [
+  'bg-muted',
+  'text-muted-foreground',
+  'max-h-[420px]',
+  'overflow-auto',
+  'rounded-md',
+  'p-3',
+  'text-xs',
+];
 
 const schema: VbenFormSchema[] = [
   {
@@ -62,8 +74,8 @@ const schema: VbenFormSchema[] = [
     children: [
       {
         component: 'Input',
-        componentProps: (_values, _form, ctx) => ({
-          placeholder: `第 ${(ctx?.rowIndex ?? 0) + 1} 行姓名`,
+        componentProps: (ctx) => ({
+          placeholder: `第 ${(ctx.rowIndex ?? 0) + 1} 行姓名`,
         }),
         defaultValue: '',
         fieldName: 'name',
@@ -147,7 +159,7 @@ const [Form, formApi] = useVbenForm({
 });
 
 async function handleSubmit() {
-  await formApi.validateAndSubmitForm();
+  await formApi.validateAndSubmit();
 }
 
 async function handleGetValues() {
@@ -178,9 +190,7 @@ function handlePatchChildRule() {
       </Card>
 
       <Card title="输出">
-        <pre
-          class="bg-muted text-muted-foreground max-h-[420px] overflow-auto rounded-md p-3 text-xs"
-          >{{ JSON.stringify(submitValues, null, 2) }}</pre>
+        <pre :class="outputClass" v-text="formattedSubmitValues"></pre>
       </Card>
     </div>
   </Page>
diff --git a/playground/src/views/examples/drawer/form-drawer-demo.vue b/playground/src/views/examples/drawer/form-drawer-demo.vue
index 5af392f6..6a1e4ed3 100644
--- a/playground/src/views/examples/drawer/form-drawer-demo.vue
+++ b/playground/src/views/examples/drawer/form-drawer-demo.vue
@@ -35,7 +35,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
     drawerApi.close();
   },
   onConfirm: async () => {
-    await formApi.submitForm();
+    await formApi.submit();
     drawerApi.close();
   },
   onOpenChange(isOpen: boolean) {
diff --git a/playground/src/views/examples/form/basic.vue b/playground/src/views/examples/form/basic.vue
index d49013f4..8db7de3c 100644
--- a/playground/src/views/examples/form/basic.vue
+++ b/playground/src/views/examples/form/basic.vue
@@ -285,11 +285,16 @@ const [BaseForm, baseFormApi] = useVbenForm({
     },
     {
       component: 'DatePicker',
+      dependencies: {
+        resolve: ({ values }) => ({
+          help: () =>
+            [`这是一个可输出其他字段值的帮助信息${values.rate}`].map((value) =>
+              h('p', value),
+            ),
+        }),
+        triggerFields: ['rate'],
+      },
       fieldName: 'datePicker',
-      help: (values) =>
-        [`这是一个可输出其他字段值的帮助信息${values?.rate}`].map((v) =>
-          h('p', v),
-        ),
       label: '日期选择框',
     },
     {
diff --git a/playground/src/views/examples/form/collapsible.vue b/playground/src/views/examples/form/collapsible.vue
index 8efb3ac7..338c70bd 100644
--- a/playground/src/views/examples/form/collapsible.vue
+++ b/playground/src/views/examples/form/collapsible.vue
@@ -22,8 +22,8 @@ const layout = ref<FormLayout>('vertical');
 
 function getNumberValidator(key: string, limit?: [number?, number?]) {
   let validator = z.number({
-    required_error: `${key} 值不能为空`,
-    invalid_type_error: `${key} 值只能为数字`,
+    error: (issue) =>
+      issue.input === undefined ? `${key} 值不能为空` : `${key} 值只能为数字`,
   });
 
   if (limit) {
@@ -257,14 +257,14 @@ function handleSetFormValue() {
 }
 
 function handleResetFormValue() {
-  baseFormApi.resetForm(undefined, { force: true });
+  baseFormApi.reset(undefined, { force: true });
 }
 
 async function handleSubmitFormValue() {
   const { valid } = await baseFormApi.validate();
 
   if (valid) {
-    baseFormApi.submitForm();
+    baseFormApi.submit();
   }
 }
 </script>
diff --git a/playground/src/views/examples/form/custom.vue b/playground/src/views/examples/form/custom.vue
index b9a9f654..a2f9e67c 100644
--- a/playground/src/views/examples/form/custom.vue
+++ b/playground/src/views/examples/form/custom.vue
@@ -57,7 +57,7 @@ const [Form] = useVbenForm({
     {
       component: markRaw(TwoFields),
       defaultValue: [undefined, ''],
-      disabledOnChangeListener: false,
+      changeEventFallback: true,
       fieldName: 'field4',
       formItemClass: 'col-span-1',
       label: '组合字段',
diff --git a/playground/src/views/examples/form/rules.vue b/playground/src/views/examples/form/rules.vue
index f5143261..7c627d90 100644
--- a/playground/src/views/examples/form/rules.vue
+++ b/playground/src/views/examples/form/rules.vue
@@ -70,7 +70,7 @@ const [Form, formApi] = useVbenForm({
       fieldName: 'field4',
       // 界面显示的label
       label: '邮箱',
-      rules: z.string().email('请输入正确的邮箱'),
+      rules: z.email('请输入正确的邮箱'),
     },
     {
       component: 'InputNumber',
@@ -184,8 +184,7 @@ const [Form, formApi] = useVbenForm({
       },
       fieldName: 'input-blur',
       formFieldProps: {
-        validateOnChange: false,
-        validateOnModelUpdate: false,
+        validateOn: ['blur'],
       },
       help: 'blur时才会触发校验',
       label: 'blur触发',
@@ -235,7 +234,7 @@ function onSubmit(values: Record<string, any>) {
     <Card title="基础组件校验示例">
       <template #extra>
         <Button @click="() => formApi.validate()">校验表单</Button>
-        <Button class="mx-2" @click="() => formApi.resetValidate()">
+        <Button class="mx-2" @click="() => formApi.clearValidation()">
           清空校验信息
         </Button>
       </template>
diff --git a/playground/src/views/examples/form/scroll-to-error-test.vue b/playground/src/views/examples/form/scroll-to-error-test.vue
index c49cca97..4aa48848 100644
--- a/playground/src/views/examples/form/scroll-to-error-test.vue
+++ b/playground/src/views/examples/form/scroll-to-error-test.vue
@@ -98,7 +98,7 @@ const [Form, formApi] = useVbenForm({
 
 // 测试 validateAndSubmitForm（验证并提交）
 async function testValidateAndSubmit() {
-  await formApi.validateAndSubmitForm();
+  await formApi.validateAndSubmit();
 }
 
 // 测试 validate（手动验证整个表单）
@@ -112,13 +112,13 @@ async function testValidateField() {
 }
 
 // 切换滚动功能
-function toggleScrollToError() {
-  formApi.setState({ scrollToFirstError: scrollEnabled.value });
+function toggleScrollToError(checked: boolean) {
+  formApi.setState({ scrollToFirstError: checked });
 }
 
 // 填充部分数据测试
 async function fillPartialData() {
-  await formApi.resetForm();
+  await formApi.reset();
   await formApi.setFieldValue('username', '测试用户');
   await formApi.setFieldValue('email', 'test@example.com');
 }
@@ -153,13 +153,13 @@ async function fillPartialData() {
           <h4 class="mb-3 font-medium">验证方法测试：</h4>
           <div class="flex flex-wrap gap-2">
             <Button type="primary" @click="testValidateAndSubmit">
-              测试 validateAndSubmitForm()
+              测试 validateAndSubmit()
             </Button>
             <Button @click="testValidate"> 测试 validate() </Button>
             <Button @click="testValidateField"> 测试 validateField() </Button>
           </div>
           <div class="mt-2 text-xs text-gray-500">
-            <p>• validateAndSubmitForm(): 验证表单并提交</p>
+            <p>• validateAndSubmit(): 验证表单并提交</p>
             <p>• validate(): 手动验证整个表单</p>
             <p>• validateField(): 验证单个字段（这里测试用户名字段）</p>
           </div>
@@ -169,7 +169,7 @@ async function fillPartialData() {
           <h4 class="mb-3 font-medium">数据填充测试：</h4>
           <div class="flex flex-wrap gap-2">
             <Button @click="fillPartialData"> 填充部分数据 </Button>
-            <Button @click="() => formApi.resetForm()"> 清空表单 </Button>
+            <Button @click="() => formApi.reset()"> 清空表单 </Button>
           </div>
           <div class="mt-2 text-xs text-gray-500">
             <p>• 填充部分数据后验证，会滚动到第一个错误字段</p>
diff --git a/playground/src/views/examples/modal/form-modal-demo.vue b/playground/src/views/examples/modal/form-modal-demo.vue
index 725d86d6..60f13c41 100644
--- a/playground/src/views/examples/modal/form-modal-demo.vue
+++ b/playground/src/views/examples/modal/form-modal-demo.vue
@@ -54,7 +54,7 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.close();
   },
   onConfirm: async () => {
-    await formApi.validateAndSubmitForm();
+    await formApi.validateAndSubmit();
     // modalApi.close();
   },
   onOpenChange(isOpen: boolean) {
diff --git a/playground/src/views/system/dept/modules/form.vue b/playground/src/views/system/dept/modules/form.vue
index 1f91d999..225fda82 100644
--- a/playground/src/views/system/dept/modules/form.vue
+++ b/playground/src/views/system/dept/modules/form.vue
@@ -28,7 +28,7 @@ const [Form, formApi] = useVbenForm({
 });
 
 function resetForm() {
-  formApi.resetForm();
+  formApi.reset();
   formApi.setValues(formData.value || {});
 }
 
diff --git a/playground/src/views/system/menu/modules/form.vue b/playground/src/views/system/menu/modules/form.vue
index 7029db00..a6e1b304 100644
--- a/playground/src/views/system/menu/modules/form.vue
+++ b/playground/src/views/system/menu/modules/form.vue
@@ -56,12 +56,13 @@ const schema: VbenFormSchema[] = [
         async (value: string) => {
           return !(await isMenuNameExists(value, formData.value?.id));
         },
-        (value) => ({
-          message: $t('ui.formRules.alreadyExists', [
-            $t('system.menu.menuName'),
-            value,
-          ]),
-        }),
+        {
+          error: (issue) =>
+            $t('ui.formRules.alreadyExists', [
+              $t('system.menu.menuName'),
+              issue.input,
+            ]),
+        },
       ),
   },
   {
@@ -139,12 +140,13 @@ const schema: VbenFormSchema[] = [
         async (value: string) => {
           return !(await isMenuPathExists(value, formData.value?.id));
         },
-        (value) => ({
-          message: $t('ui.formRules.alreadyExists', [
-            $t('system.menu.path'),
-            value,
-          ]),
-        }),
+        {
+          error: (issue) =>
+            $t('ui.formRules.alreadyExists', [
+              $t('system.menu.path'),
+              issue.input,
+            ]),
+        },
       ),
   },
   {
@@ -227,7 +229,7 @@ const schema: VbenFormSchema[] = [
     },
     fieldName: 'linkSrc',
     label: $t('system.menu.linkSrc'),
-    rules: z.string().url($t('ui.formRules.invalidURL')),
+    rules: z.url($t('ui.formRules.invalidURL')),
   },
   {
     component: 'Input',
@@ -278,18 +280,18 @@ const schema: VbenFormSchema[] = [
   },
   {
     component: 'Input',
-    componentProps: (values) => {
-      return {
-        allowClear: true,
-        class: 'w-full',
-        disabled: values.meta?.badgeType !== 'normal',
-      };
-    },
     dependencies: {
-      show: (values) => {
-        return values.type !== 'button';
+      resolve: ({ values }) => {
+        return {
+          componentProps: {
+            allowClear: true,
+            class: 'w-full',
+            disabled: values.meta?.badgeType !== 'normal',
+          },
+          show: values.type !== 'button',
+        };
       },
-      triggerFields: ['type'],
+      triggerFields: ['meta.badgeType', 'type'],
     },
     fieldName: 'meta.badge',
     label: $t('system.menu.badge'),
@@ -451,7 +453,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
           ? $t(formData.value.meta.title)
           : '';
       } else {
-        formApi.resetForm();
+        formApi.reset();
         titleSuffix.value = '';
       }
     }
diff --git a/playground/src/views/system/role/modules/form.vue b/playground/src/views/system/role/modules/form.vue
index 57a80575..7446ca8b 100644
--- a/playground/src/views/system/role/modules/form.vue
+++ b/playground/src/views/system/role/modules/form.vue
@@ -51,7 +51,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
   async onOpenChange(isOpen) {
     if (isOpen) {
       const data = drawerApi.getData<SystemRoleApi.SystemRole>();
-      formApi.resetForm();
+      formApi.reset();
 
       if (data) {
         formData.value = data;
diff --git a/playground/src/views/system/user/modules/form.vue b/playground/src/views/system/user/modules/form.vue
index 0888d32d..2100eb20 100644
--- a/playground/src/views/system/user/modules/form.vue
+++ b/playground/src/views/system/user/modules/form.vue
@@ -50,7 +50,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
   async onOpenChange(isOpen) {
     if (isOpen) {
       const data = drawerApi.getData<SystemUserApi.SystemUser>();
-      formApi.resetForm();
+      formApi.reset();
 
       if (data) {
         formData.value = data;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 827f4620..a51b710f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -75,6 +75,9 @@ catalogs:
     '@tailwindcss/vite':
       specifier: ^4.3.3
       version: 4.3.3
+    '@tanstack/vue-form':
+      specifier: ^1.33.2
+      version: 1.33.2
     '@tanstack/vue-query':
       specifier: ^5.101.2
       version: 5.101.4
@@ -153,9 +156,6 @@ catalogs:
     '@typescript-eslint/parser':
       specifier: ^8.64.0
       version: 8.65.0
-    '@vee-validate/zod':
-      specifier: ^4.15.1
-      version: 4.15.1
     '@vite-pwa/vitepress':
       specifier: ^1.1.0
       version: 1.1.0
@@ -450,9 +450,6 @@ catalogs:
     unplugin-vue:
       specifier: ^7.2.0
       version: 7.2.0
-    vee-validate:
-      specifier: ^4.15.1
-      version: 4.15.1
     vite:
       specifier: ^8.1.5
       version: 8.1.5
@@ -508,11 +505,11 @@ catalogs:
       specifier: ^2.1.0
       version: 2.1.0
     zod:
-      specifier: ^3.25.76
-      version: 3.25.76
+      specifier: ^4.4.3
+      version: 4.4.3
     zod-defaults:
-      specifier: 0.1.3
-      version: 0.1.3
+      specifier: ^0.2.3
+      version: 0.2.3
 
 overrides:
   '@ast-grep/napi': ^0.44.1
@@ -524,6 +521,10 @@ overrides:
 importers:
 
   .:
+    dependencies:
+      sortablejs:
+        specifier: 'catalog:'
+        version: 1.15.7
     devDependencies:
       '@changesets/changelog-github':
         specifier: 'catalog:'
@@ -1399,6 +1400,9 @@ importers:
 
   packages/@core/ui-kit/form-ui:
     dependencies:
+      '@tanstack/vue-form':
+        specifier: 'catalog:'
+        version: 1.33.2(vue@3.5.40(typescript@6.0.3))
       '@vben-core/composables':
         specifier: workspace:*
         version: link:../../composables
@@ -1414,25 +1418,22 @@ importers:
       '@vben-core/typings':
         specifier: workspace:*
         version: link:../../base/typings
-      '@vee-validate/zod':
-        specifier: 'catalog:'
-        version: 4.15.1(vue@3.5.40(typescript@6.0.3))(zod@3.25.76)
       '@vueuse/core':
         specifier: 'catalog:'
         version: 14.3.0(vue@3.5.40(typescript@6.0.3))
-      vee-validate:
-        specifier: 'catalog:'
-        version: 4.15.1(vue@3.5.40(typescript@6.0.3))
       vue:
         specifier: ^3.5.40
         version: 3.5.40(typescript@6.0.3)
       zod:
         specifier: 'catalog:'
-        version: 3.25.76
+        version: 4.4.3
       zod-defaults:
         specifier: 'catalog:'
-        version: 0.1.3(zod@3.25.76)
+        version: 0.2.3(zod@4.4.3)
     devDependencies:
+      '@vue/test-utils':
+        specifier: 'catalog:'
+        version: 2.4.11(@vue/compiler-dom@3.5.40)(@vue/server-renderer@3.5.40)(vue@3.5.40(typescript@6.0.3))
       unplugin-vue:
         specifier: 'catalog:'
         version: 7.2.0(@types/node@26.1.1)(esbuild@0.28.1)(jiti@2.7.0)(less@4.7.0(supports-color@10.2.2))(rolldown@1.2.0)(rollup@4.62.2)(sass-embedded@1.100.0)(sass@1.101.3)(terser@5.49.0)(vue@3.5.40(typescript@6.0.3))(yaml@2.9.0)
@@ -1562,9 +1563,6 @@ importers:
       reka-ui:
         specifier: 'catalog:'
         version: 2.10.1(vue@3.5.40(typescript@6.0.3))
-      vee-validate:
-        specifier: 'catalog:'
-        version: 4.15.1(vue@3.5.40(typescript@6.0.3))
       vue:
         specifier: ^3.5.40
         version: 3.5.40(typescript@6.0.3)
@@ -5183,10 +5181,22 @@ packages:
     peerDependencies:
       vite: ^5.2.0 || ^6 || ^7 || ^8
 
+  '@tanstack/devtools-event-client@0.4.4':
+    resolution: {integrity: sha512-6T5Yop/793YI+H+5J8Hsyj4kCih9sl4t3ElLgKioW5hk3ocn+ZdSJ94tT7vL7uabxSugWYBZlOTMPzEw2puvQw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  '@tanstack/form-core@1.33.2':
+    resolution: {integrity: sha512-F60zJd15bGrXKonc1kpRYnNRNfiES7F+hgvrPMrsZznPLqZtO2DIg76OU6R25kCYkqYQY5xvuKteuWcUsc587A==}
+
   '@tanstack/match-sorter-utils@8.19.4':
     resolution: {integrity: sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==}
     engines: {node: '>=12'}
 
+  '@tanstack/pacer-lite@0.1.1':
+    resolution: {integrity: sha512-y/xtNPNt/YeyoVxE/JCx+T7yjEzpezmbb+toK8DDD1P4m7Kzs5YR956+7OKexG3f8aXgC3rLZl7b1V+yNUSy5w==}
+    engines: {node: '>=18'}
+
   '@tanstack/query-core@5.101.4':
     resolution: {integrity: sha512-gNwcvOJcRbLWPOLG/2OBm+zM+Yv+MKsXKEOWC57USuZDEsI71hEErQsiEGx5wX9rzWWkfwM0fVSPoiIFSsxfiw==}
 
@@ -5196,6 +5206,11 @@ packages:
   '@tanstack/virtual-core@3.17.5':
     resolution: {integrity: sha512-AXfBC3sq6PuYSwyxYORqqgHCNjPGAvKJvZuBBJ1klhztWBB5cgqgwsq8+fNfaQJG7/K4xYBja9S90QFn2zmQAg==}
 
+  '@tanstack/vue-form@1.33.2':
+    resolution: {integrity: sha512-yolxEs4XSQu2RhBpM48YgqmmpftR4v28XniH5UjGg9/Z3WOJAv+COSmWwC64ozs2OZIKF+j5ufu1ki62jtP6nA==}
+    peerDependencies:
+      vue: ^3.5.40
+
   '@tanstack/vue-query@5.101.4':
     resolution: {integrity: sha512-UYjkUZhnWQIFGNb7SdgjCitAftNyYQfOIVUh6vBUQAG4SQKNMSBKeQERFDubpxLAMpIBJTaOrE8fM4c1kZcIGQ==}
     peerDependencies:
@@ -5822,11 +5837,6 @@ packages:
     peerDependencies:
       valibot: ^1.4.0
 
-  '@vee-validate/zod@4.15.1':
-    resolution: {integrity: sha512-329Z4TDBE5Vx0FdbA8S4eR9iGCFFUNGbxjpQ20ff5b5wGueScjocUIx9JHPa79LTG06RnlUR4XogQsjN4tecKA==}
-    peerDependencies:
-      zod: ^3.24.0
-
   '@vercel/nft@1.10.2':
     resolution: {integrity: sha512-w+WyX5Ulmj4dtTZrxaulqrjaLZHSbnPzx75SJsTNYmotKsqn1JlLnDJa+lz5hn90HJofhl/2MAtw0mCrgM3qYw==}
     engines: {node: '>=20'}
@@ -5949,9 +5959,6 @@ packages:
   '@vue/devtools-api@6.6.4':
     resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
 
-  '@vue/devtools-api@7.7.10':
-    resolution: {integrity: sha512-KxtEpUOOpFz/qOGRrAwA36QF7DqIA+FXgCYit9mk9wjbaZt0sXOFz81ElOZtKA4HbWHUdwNjZHBFsFFyp5BZiA==}
-
   '@vue/devtools-api@8.1.5':
     resolution: {integrity: sha512-YJipMVAKe5wT5CWf5kTYCaNV7NMNjFVxJkIkJaJ4W/nCxEBzlZzrOsYKeCymdCrFZmBS/+wTWFoUs3Jf/Q6XSQ==}
 
@@ -5960,15 +5967,9 @@ packages:
     peerDependencies:
       vue: ^3.5.40
 
-  '@vue/devtools-kit@7.7.10':
-    resolution: {integrity: sha512-3WNi2Kq4tbpVbmhml7RiphmAt0279oh3fKNeWMQIrltfX8Q91b4i5PL8DtyNKdwmcsGrV4fg+erwWOmD05CLIw==}
-
   '@vue/devtools-kit@8.1.5':
     resolution: {integrity: sha512-FcSAxsi4eWuXLCB7Rv9lj0aIVHHPNVQ2BazGf4RJTc2JCqb4BQg0hk87ZFhminCfl+mD5OUI0rX2cgyu4kJOGA==}
 
-  '@vue/devtools-shared@7.7.10':
-    resolution: {integrity: sha512-wOPslzB8vTvpxwdaOcR2qAbwmuSP0L+rhpoC6Cf56V3Jip+HWb7PQQXOUPgBNQARpXsbQX/+mvi8kKucmBGRwQ==}
-
   '@vue/devtools-shared@8.1.5':
     resolution: {integrity: sha512-mhT4zcPFhF+Xk1O4BfhhrbXzpmfqY03fS6xGpcllbQG7lDjhQf8pQHcTIhqQIYx1hfwtHmk/6jM96ele0UxPqQ==}
 
@@ -6787,10 +6788,6 @@ packages:
     resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
     engines: {node: '>=12.13'}
 
-  copy-anything@4.0.5:
-    resolution: {integrity: sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==}
-    engines: {node: '>=18'}
-
   core-js-compat@3.49.0:
     resolution: {integrity: sha512-VQXt1jr9cBz03b331DFDCCP90b3fanciLkgiOoy8SBHy06gNf+vQ1A3WFLqG7I8TipYIKeYK9wxd0tUrvHcOZA==}
 
@@ -8238,10 +8235,6 @@ packages:
     resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==}
     engines: {node: '>=12.13'}
 
-  is-what@5.5.0:
-    resolution: {integrity: sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==}
-    engines: {node: '>=18'}
-
   is-windows@1.0.2:
     resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==}
     engines: {node: '>=0.10.0'}
@@ -9218,9 +9211,6 @@ packages:
   pathe@2.0.3:
     resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
-  perfect-debounce@1.0.0:
-    resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
-
   perfect-debounce@2.1.0:
     resolution: {integrity: sha512-LjgdTytVFXeUgtHZr9WYViYSM/g8MkcTPYDlPa3cDqMirHjKiSZPYd6DoL7pK8AJQr+uWkQvCjHNdiMqsrJs+g==}
 
@@ -10021,10 +10011,6 @@ packages:
   spawndamnit@3.0.1:
     resolution: {integrity: sha512-MmnduQUuHCoFckZoWnXsTg7JaiLBJrKFj9UI2MbRPGaJeVpsLcVBu6P/IGZovziM/YBsellCmsprgNA+w0CzVg==}
 
-  speakingurl@14.0.1:
-    resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
-    engines: {node: '>=0.10.0'}
-
   sprintf-js@1.0.3:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
 
@@ -10213,10 +10199,6 @@ packages:
   stylis@4.4.0:
     resolution: {integrity: sha512-5Z9ZpRzfuH6l/UAvCPAPUo3665Nk2wLaZU3x+TLHKVzIz33+sbJqbtrYoC3KD4/uVOr2Zp+L0LySezP9OHV9yA==}
 
-  superjson@2.2.6:
-    resolution: {integrity: sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==}
-    engines: {node: '>=16'}
-
   supports-color@10.2.2:
     resolution: {integrity: sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==}
     engines: {node: '>=18'}
@@ -10811,11 +10793,6 @@ packages:
     peerDependencies:
       vue: ^3.5.40
 
-  vee-validate@4.15.1:
-    resolution: {integrity: sha512-DkFsiTwEKau8VIxyZBGdO6tOudD+QoUBPuHj3e6QFqmbfCRj1ArmYWue9lEp6jLSWBIw4XPlDLjFIZNLdRAMSg==}
-    peerDependencies:
-      vue: ^3.5.40
-
   verkit@0.1.2:
     resolution: {integrity: sha512-WqkT8n3hqizuCu71W3bUzf5fjBmkbXcudsehe/NbxA8PgqoKnSOY5K0Ba2ckg1qaRaSpSz7as/n9K1R9JXjQKg==}
     engines: {node: '>=18.12.0'}
@@ -11339,13 +11316,10 @@ packages:
     resolution: {integrity: sha512-dSvYKdvLsAHCDqPOhIwk/q5CvuWtTB3Dgpoe0uVEFjTzIOAmsQpprX25InCvrvJsirEbu1OHyy67n/kAj1Sw/w==}
     engines: {node: '>=18'}
 
-  zod-defaults@0.1.3:
-    resolution: {integrity: sha512-Cp4UjuVfXqwaOx8A5LlM0IRBZs8B7AXgF+XOZWF8CjMDhsY/Jki+y7VS4adVtQj9NNSsAPwylUlJp9INuxPEnA==}
+  zod-defaults@0.2.3:
+    resolution: {integrity: sha512-7pYkOH1/c+Ril5AZUYtsbhMkehkI8CMqzFZ7YZXfC9SMLRvZuLyonQE7BAIVSNxeTpqTZmW5BLxGSzWMnKNdIw==}
     peerDependencies:
-      zod: ^3.23.8
-
-  zod@3.25.76:
-    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
+      zod: ^4.1.12
 
   zod@4.4.3:
     resolution: {integrity: sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==}
@@ -14292,16 +14266,34 @@ snapshots:
       tailwindcss: 4.3.3
       vite: 8.1.5(@types/node@26.1.1)(esbuild@0.28.1)(jiti@2.7.0)(less@4.7.0(supports-color@10.2.2))(sass-embedded@1.100.0)(sass@1.101.3)(terser@5.49.0)(yaml@2.9.0)
 
+  '@tanstack/devtools-event-client@0.4.4': {}
+
+  '@tanstack/form-core@1.33.2':
+    dependencies:
+      '@tanstack/devtools-event-client': 0.4.4
+      '@tanstack/pacer-lite': 0.1.1
+      '@tanstack/store': 0.11.0
+
   '@tanstack/match-sorter-utils@8.19.4':
     dependencies:
       remove-accents: 0.5.0
 
+  '@tanstack/pacer-lite@0.1.1': {}
+
   '@tanstack/query-core@5.101.4': {}
 
   '@tanstack/store@0.11.0': {}
 
   '@tanstack/virtual-core@3.17.5': {}
 
+  '@tanstack/vue-form@1.33.2(vue@3.5.40(typescript@6.0.3))':
+    dependencies:
+      '@tanstack/form-core': 1.33.2
+      '@tanstack/vue-store': 0.11.0(vue@3.5.40(typescript@6.0.3))
+      vue: 3.5.40(typescript@6.0.3)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
   '@tanstack/vue-query@5.101.4(vue@3.5.40(typescript@6.0.3))':
     dependencies:
       '@tanstack/match-sorter-utils': 8.19.4
@@ -14650,7 +14642,7 @@ snapshots:
 
   '@types/ws@8.18.1':
     dependencies:
-      '@types/node': 25.9.5
+      '@types/node': 26.1.1
 
   '@typescript-eslint/parser@8.65.0(eslint@10.7.0(jiti@2.7.0)(supports-color@10.2.2))(supports-color@10.2.2)(typescript@6.0.3)':
     dependencies:
@@ -14964,14 +14956,6 @@ snapshots:
     dependencies:
       valibot: 1.4.2(typescript@6.0.3)
 
-  '@vee-validate/zod@4.15.1(vue@3.5.40(typescript@6.0.3))(zod@3.25.76)':
-    dependencies:
-      type-fest: 4.41.0
-      vee-validate: 4.15.1(vue@3.5.40(typescript@6.0.3))
-      zod: 3.25.76
-    transitivePeerDependencies:
-      - vue
-
   '@vercel/nft@1.10.2(rollup@4.62.2)(supports-color@10.2.2)':
     dependencies:
       '@mapbox/node-pre-gyp': 2.0.3(supports-color@10.2.2)
@@ -15184,10 +15168,6 @@ snapshots:
 
   '@vue/devtools-api@6.6.4': {}
 
-  '@vue/devtools-api@7.7.10':
-    dependencies:
-      '@vue/devtools-kit': 7.7.10
-
   '@vue/devtools-api@8.1.5':
     dependencies:
       '@vue/devtools-kit': 8.1.5
@@ -15198,16 +15178,6 @@ snapshots:
       '@vue/devtools-shared': 8.1.5
       vue: 3.5.40(typescript@6.0.3)
 
-  '@vue/devtools-kit@7.7.10':
-    dependencies:
-      '@vue/devtools-shared': 7.7.10
-      birpc: 2.9.0
-      hookable: 5.5.3
-      mitt: 3.0.1
-      perfect-debounce: 1.0.0
-      speakingurl: 14.0.1
-      superjson: 2.2.6
-
   '@vue/devtools-kit@8.1.5':
     dependencies:
       '@vue/devtools-shared': 8.1.5
@@ -15215,10 +15185,6 @@ snapshots:
       hookable: 5.5.3
       perfect-debounce: 2.1.0
 
-  '@vue/devtools-shared@7.7.10':
-    dependencies:
-      rfdc: 1.4.1
-
   '@vue/devtools-shared@8.1.5': {}
 
   '@vue/language-core@3.3.7':
@@ -15784,7 +15750,7 @@ snapshots:
 
   buffer-image-size@0.6.4:
     dependencies:
-      '@types/node': 25.9.5
+      '@types/node': 26.1.1
 
   buffer@6.0.3:
     dependencies:
@@ -16068,10 +16034,6 @@ snapshots:
     dependencies:
       is-what: 4.1.16
 
-  copy-anything@4.0.5:
-    dependencies:
-      is-what: 5.5.0
-
   core-js-compat@3.49.0:
     dependencies:
       browserslist: 4.28.7
@@ -17302,7 +17264,7 @@ snapshots:
 
   happy-dom@20.11.0:
     dependencies:
-      '@types/node': 25.9.5
+      '@types/node': 26.1.1
       '@types/whatwg-mimetype': 3.0.2
       '@types/ws': 8.18.1
       buffer-image-size: 0.6.4
@@ -17672,8 +17634,6 @@ snapshots:
 
   is-what@4.1.16: {}
 
-  is-what@5.5.0: {}
-
   is-windows@1.0.2: {}
 
   is-wsl@3.1.1:
@@ -18768,8 +18728,6 @@ snapshots:
 
   pathe@2.0.3: {}
 
-  perfect-debounce@1.0.0: {}
-
   perfect-debounce@2.1.0: {}
 
   picocolors@1.1.1: {}
@@ -19645,8 +19603,6 @@ snapshots:
       cross-spawn: 7.0.6
       signal-exit: 4.1.0
 
-  speakingurl@14.0.1: {}
-
   sprintf-js@1.0.3: {}
 
   stackback@0.0.2: {}
@@ -19901,10 +19857,6 @@ snapshots:
 
   stylis@4.4.0: {}
 
-  superjson@2.2.6:
-    dependencies:
-      copy-anything: 4.0.5
-
   supports-color@10.2.2: {}
 
   supports-color@7.2.0:
@@ -20483,12 +20435,6 @@ snapshots:
       evtd: 0.2.4
       vue: 3.5.40(typescript@6.0.3)
 
-  vee-validate@4.15.1(vue@3.5.40(typescript@6.0.3)):
-    dependencies:
-      '@vue/devtools-api': 7.7.10
-      type-fest: 4.41.0
-      vue: 3.5.40(typescript@6.0.3)
-
   verkit@0.1.2: {}
 
   vfile-message@4.0.3:
@@ -21189,11 +21135,9 @@ snapshots:
       normalize-path: 3.0.0
       readable-stream: 4.7.0
 
-  zod-defaults@0.1.3(zod@3.25.76):
+  zod-defaults@0.2.3(zod@4.4.3):
     dependencies:
-      zod: 3.25.76
-
-  zod@3.25.76: {}
+      zod: 4.4.3
 
   zod@4.4.3: {}
 
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 80ad781d..fce71719 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -62,6 +62,7 @@ catalog:
   '@stylistic/stylelint-plugin': ^5.2.1
   '@tailwindcss/typography': ^0.5.20
   '@tailwindcss/vite': ^4.3.3
+  '@tanstack/vue-form': ^1.33.2
   '@tanstack/vue-query': ^5.101.2
   '@tanstack/vue-store': ^0.11.0
   '@tiptap/core': ^3.28.0
@@ -88,7 +89,6 @@ catalog:
   '@types/qs': ^6.15.1
   '@types/sortablejs': ^1.15.9
   '@typescript-eslint/parser': ^8.64.0
-  '@vee-validate/zod': ^4.15.1
   '@vite-pwa/vitepress': ^1.1.0
   '@vitejs/plugin-vue': ^6.0.8
   '@vitejs/plugin-vue-jsx': ^5.1.6
@@ -189,7 +189,6 @@ catalog:
   unplugin-dts: ^1.0.3
   unplugin-element-plus: ^0.11.2
   unplugin-vue: ^7.2.0
-  vee-validate: ^4.15.1
   vite: ^8.1.5
   vite-plugin-compression: ^0.5.1
   vite-plugin-lazy-import: ^1.0.7
@@ -209,8 +208,8 @@ catalog:
   vxe-table: ^4.20.5
   watermark-js-plus: ^1.6.6
   yaml-eslint-parser: ^2.1.0
-  zod: ^3.25.76
-  zod-defaults: 0.1.3
+  zod: ^4.4.3
+  zod-defaults: ^0.2.3
 
 allowBuilds:
   '@parcel/watcher': true