Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into warmflow

2025-01-10 14:24:43 +08:00 · 2025-01-10 14:24:43 +08:00 · c3fdeda1ca
commit c3fdeda1ca
parent 0440ac84fd 7606b86854
25 changed files with 354 additions and 178 deletions
--- a/apps/web-naive/src/bootstrap.ts
+++ b/apps/web-naive/src/bootstrap.ts
@ -4,6 +4,7 @@ import { registerAccessDirective } from '@vben/access';
 import { preferences } from '@vben/preferences';
 import { initStores } from '@vben/stores';
 import '@vben/styles';
+import '@vben/styles/naive';

 import { useTitle } from '@vueuse/core';

--- a/apps/web-naive/src/views/demos/form/basic.vue
+++ b/apps/web-naive/src/views/demos/form/basic.vue
@ -40,6 +40,7 @@ const [Form, formApi] = useVbenForm({
      fieldName: 'api',
      // 界面显示的label
      label: 'ApiSelect',
+      rules: 'required',
    },
    {
      component: 'ApiTreeSelect',
@ -56,16 +57,19 @@ const [Form, formApi] = useVbenForm({
      fieldName: 'apiTree',
      // 界面显示的label
      label: 'ApiTreeSelect',
+      rules: 'required',
    },
    {
      component: 'Input',
      fieldName: 'string',
      label: 'String',
+      rules: 'required',
    },
    {
      component: 'InputNumber',
      fieldName: 'number',
      label: 'Number',
+      rules: 'required',
    },
    {
      component: 'RadioGroup',
@ -80,6 +84,7 @@ const [Form, formApi] = useVbenForm({
          { value: 'E', label: 'E' },
        ],
      },
+      rules: 'selectRequired',
    },
    {
      component: 'RadioGroup',
@ -94,9 +99,9 @@ const [Form, formApi] = useVbenForm({
          { value: 'C', label: '选项C' },
          { value: 'D', label: '选项D' },
          { value: 'E', label: '选项E' },
-          { value: 'F', label: '选项F' },
        ],
      },
+      rules: 'selectRequired',
    },
    {
      component: 'CheckboxGroup',
@ -109,11 +114,22 @@ const [Form, formApi] = useVbenForm({
          { value: 'C', label: '选项C' },
        ],
      },
+      rules: 'selectRequired',
    },
    {
      component: 'DatePicker',
      fieldName: 'date',
      label: 'Date',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'textArea',
+      label: 'TextArea',
+      componentProps: {
+        type: 'textarea',
+      },
+      rules: 'required',
    },
  ],
 });
--- a/docs/.vitepress/components/preview-group.vue
+++ b/docs/.vitepress/components/preview-group.vue
@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { SetupContext } from 'vue';
+
 import { computed, ref, useSlots } from 'vue';

 import { VbenTooltip } from '@vben-core/shadcn-ui';
@ -25,7 +27,7 @@ const props = withDefaults(

 const open = ref(false);

-const slots = useSlots();
+const slots: SetupContext['slots'] = useSlots();

 const tabs = computed(() => {
  return props.files.map((file) => {
--- a/docs/src/components/common-ui/vben-form.md
+++ b/docs/src/components/common-ui/vben-form.md
@ -316,12 +316,18 @@ useVbenForm 返回的第二个参数，是一个对象，包含了一些表单
 | collapsed | 是否折叠，在`showCollapseButton`为`true`时生效 | `boolean` | `false` |
 | collapseTriggerResize | 折叠时，触发`resize`事件 | `boolean` | `false` |
 | collapsedRows | 折叠时保持的行数 | `number` | `1` |
-| fieldMappingTime | 用于将表单内时间区域组件的数组值映射成 2 个字段 | `[string, [string, string], string?][]` | - |
+| fieldMappingTime | 用于将表单内的数组值值映射成 2 个字段 | `[string, [string, string],Nullable<string>?][]` | - |
 | commonConfig | 表单项的通用配置，每个配置都会传递到每个表单项，表单项可覆盖 | `FormCommonConfig` | - |
 | schema | 表单项的每一项配置 | `FormSchema[]` | - |
 | submitOnEnter | 按下回车健时提交表单 | `boolean` | false |
 | submitOnChange | 字段值改变时提交表单(内部防抖，这个属性一般用于表格的搜索表单) | `boolean` | false |

+::: tip fieldMappingTime
+
+此属性用于将表单内的数组值映射成 2 个字段，例如：`[['timeRange', ['startTime', 'endTime'], 'YYYY-MM-DD']]`，`timeRange`应当是一个至少具有2个成员的数组类型的值。Form会将`timeRange`的值前两个值分别按照格式掩码`YYYY-MM-DD`格式化后映射到`startTime`和`endTime`字段上。如果明确地将格式掩码设为null，则原值映射而不进行格式化（适用于非日期时间字段）。
+
+:::
+
 ### TS 类型说明

 ::: details ActionButtonOptions
@ -406,6 +412,11 @@ export interface FormCommonConfig {
   * 所有表单项的label宽度
   */
  labelWidth?: number;
+  /**
+   * 所有表单项的model属性名。使用自定义组件时可通过此配置指定组件的model属性名。已经在modelPropNameMap中注册的组件不受此配置影响
+   * @default "modelValue"
+   */
+  modelPropName?: string;
  /**
   * 所有表单项的wrapper样式
   */
--- a/package.json
+++ b/package.json
@ -99,7 +99,7 @@
    "node": ">=20.10.0",
    "pnpm": ">=9.12.0"
  },
-  "packageManager": "pnpm@9.15.2",
+  "packageManager": "pnpm@9.15.3",
  "pnpm": {
    "peerDependencyRules": {
      "allowedVersions": {
--- a/packages/@core/base/shared/src/utils/download.ts
+++ b/packages/@core/base/shared/src/utils/download.ts
@ -31,6 +31,7 @@ export async function downloadFileFromUrl({

  if (isChrome || isSafari) {
    triggerDownload(source, resolveFileName(source, fileName));
+    return;
  }
  if (!source.includes('?')) {
    source += '?download';
--- a/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
+++ b/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
@ -3,12 +3,7 @@ import { computed, toRaw, unref, watch } from 'vue';

 import { useSimpleLocale } from '@vben-core/composables';
 import { VbenExpandableArrow } from '@vben-core/shadcn-ui';
-import {
-  cn,
-  formatDate,
-  isFunction,
-  triggerWindowResize,
-} from '@vben-core/shared/utils';
+import { cn, isFunction, triggerWindowResize } from '@vben-core/shared/utils';

 import { COMPONENT_MAP } from '../config';
 import { injectFormProps } from '../use-form-context';
@ -58,7 +53,7 @@ async function handleSubmit(e: Event) {
    return;
  }

-  const values = handleRangeTimeValue(toRaw(form.values));
+  const values = toRaw(await unref(rootProps).formApi?.getValues());
  await unref(rootProps).handleSubmit?.(values);
 }

@ -67,13 +62,7 @@ async function handleReset(e: Event) {
  e?.stopPropagation();
  const props = unref(rootProps);

-  const values = toRaw(form.values);
-  // 清理时间字段
-  props.fieldMappingTime &&
-    props.fieldMappingTime.forEach(([_, [startTimeKey, endTimeKey]]) => {
-      delete values[startTimeKey];
-      delete values[endTimeKey];
-    });
+  const values = toRaw(props.formApi?.getValues());

  if (isFunction(props.handleReset)) {
    await props.handleReset?.(values);
@ -82,44 +71,6 @@ async function handleReset(e: Event) {
  }
 }

-function handleRangeTimeValue(values: Record<string, any>) {
-  const fieldMappingTime = unref(rootProps).fieldMappingTime;
-
-  if (!fieldMappingTime || !Array.isArray(fieldMappingTime)) {
-    return values;
-  }
-
-  fieldMappingTime.forEach(
-    ([field, [startTimeKey, endTimeKey], format = 'YYYY-MM-DD']) => {
-      if (startTimeKey && endTimeKey && values[field] === null) {
-        delete values[startTimeKey];
-        delete values[endTimeKey];
-      }
-
-      if (!values[field]) {
-        delete values[field];
-        return;
-      }
-
-      const [startTime, endTime] = values[field];
-      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];
-    },
-  );
-
-  return values;
-}
-
 watch(
  () => collapsed.value,
  () => {
--- a/packages/@core/ui-kit/form-ui/src/form-api.ts
+++ b/packages/@core/ui-kit/form-ui/src/form-api.ts
@ -1,4 +1,3 @@
-import type { Recordable } from '@vben-core/typings';
 import type {
  FormState,
  GenericObject,
@ -6,12 +5,17 @@ import type {
  ValidationOptions,
 } from 'vee-validate';

+import type { Recordable } from '@vben-core/typings';
+
 import type { FormActions, FormSchema, VbenFormProps } from './types';

+import { toRaw } from 'vue';
+
 import { Store } from '@vben-core/shared/store';
 import {
  bindMethods,
  createMerge,
+  formatDate,
  isDate,
  isDayjsObject,
  isFunction,
@ -19,7 +23,6 @@ import {
  mergeWithArrayOverride,
  StateHandler,
 } from '@vben-core/shared/utils';
-import { toRaw } from 'vue';

 function getDefaultState(): VbenFormProps {
  return {
@ -44,20 +47,20 @@ function getDefaultState(): VbenFormProps {
 }

 export class FormApi {
-  // 最后一次点击提交时的表单值
-  private latestSubmissionValues: null | Recordable<any> = null;
-  private prevState: null | VbenFormProps = null;
-
  // private api: Pick<VbenFormProps, 'handleReset' | 'handleSubmit'>;
  public form = {} as FormActions;
  isMounted = false;

  public state: null | VbenFormProps = null;
-
  stateHandler: StateHandler;

  public store: Store<VbenFormProps>;

+  // 最后一次点击提交时的表单值
+  private latestSubmissionValues: null | Recordable<any> = null;
+
+  private prevState: null | VbenFormProps = null;
+
  constructor(options: VbenFormProps = {}) {
    const { ...storeState } = options;

@ -82,35 +85,6 @@ export class FormApi {
    bindMethods(this);
  }

-  private async getForm() {
-    if (!this.isMounted) {
-      // 等待form挂载
-      await this.stateHandler.waitForCondition();
-    }
-    if (!this.form?.meta) {
-      throw new Error('<VbenForm /> is not mounted');
-    }
-    return this.form;
-  }
-
-  private updateState() {
-    const currentSchema = this.state?.schema ?? [];
-    const prevSchema = this.prevState?.schema ?? [];
-    // 进行了删除schema操作
-    if (currentSchema.length < prevSchema.length) {
-      const currentFields = new Set(
-        currentSchema.map((item) => item.fieldName),
-      );
-      const deletedSchema = prevSchema.filter(
-        (item) => !currentFields.has(item.fieldName),
-      );
-
-      for (const schema of deletedSchema) {
-        this.form?.setFieldValue(schema.fieldName, undefined);
-      }
-    }
-  }
-
  getLatestSubmissionValues() {
    return this.latestSubmissionValues || {};
  }
@ -121,7 +95,7 @@ export class FormApi {

  async getValues() {
    const form = await this.getForm();
-    return form.values;
+    return form.values ? this.handleRangeTimeValue(form.values) : {};
  }

  async isFieldValid(fieldName: string) {
@ -144,12 +118,11 @@ export class FormApi {
            try {
              const results = await Promise.all(
                chain.map(async (api) => {
-                  const form = await api.getForm();
                  const validateResult = await api.validate();
                  if (!validateResult.valid) {
                    return;
                  }
-                  const rawValues = toRaw(form.values || {});
+                  const rawValues = toRaw((await api.getValues()) || {});
                  return rawValues;
                }),
              );
@ -174,7 +147,9 @@ export class FormApi {
    if (!this.isMounted) {
      Object.assign(this.form, formActions);
      this.stateHandler.setConditionTrue();
-      this.setLatestSubmissionValues({ ...toRaw(this.form.values) });
+      this.setLatestSubmissionValues({
+        ...toRaw(this.handleRangeTimeValue(this.form.values)),
+      });
      this.isMounted = true;
    }
  }
@ -280,7 +255,7 @@ export class FormApi {
    e?.stopPropagation();
    const form = await this.getForm();
    await form.submitForm();
-    const rawValues = toRaw(form.values || {});
+    const rawValues = toRaw(await this.getValues());
    await this.state?.handleSubmit?.(rawValues);

    return rawValues;
@ -357,4 +332,79 @@ export class FormApi {
    }
    return validateResult;
  }
+
+  private async getForm() {
+    if (!this.isMounted) {
+      // 等待form挂载
+      await this.stateHandler.waitForCondition();
+    }
+    if (!this.form?.meta) {
+      throw new Error('<VbenForm /> is not mounted');
+    }
+    return this.form;
+  }
+
+  private handleRangeTimeValue = (originValues: Record<string, any>) => {
+    const values = { ...originValues };
+    const fieldMappingTime = this.state?.fieldMappingTime;
+
+    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 {
+          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);
+      },
+    );
+    return values;
+  };
+
+  private updateState() {
+    const currentSchema = this.state?.schema ?? [];
+    const prevSchema = this.prevState?.schema ?? [];
+    // 进行了删除schema操作
+    if (currentSchema.length < prevSchema.length) {
+      const currentFields = new Set(
+        currentSchema.map((item) => item.fieldName),
+      );
+      const deletedSchema = prevSchema.filter(
+        (item) => !currentFields.has(item.fieldName),
+      );
+
+      for (const schema of deletedSchema) {
+        this.form?.setFieldValue(schema.fieldName, undefined);
+      }
+    }
+  }
 }
--- 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
@ -3,6 +3,8 @@ import type { ZodType } from 'zod';

 import type { FormSchema, MaybeComponentProps } from '../types';

+import { computed, nextTick, useTemplateRef, watch } from 'vue';
+
 import {
  FormControl,
  FormDescription,
@ -12,9 +14,9 @@ import {
  VbenRenderContent,
 } 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 { computed, nextTick, useTemplateRef, watch } from 'vue';

 import { injectRenderFormProps, useFormContext } from './context';
 import useDependencies from './dependencies';
@ -39,12 +41,13 @@ const {
  label,
  labelClass,
  labelWidth,
+  modelPropName,
  renderComponentContent,
  rules,
 } = defineProps<
-  {
+  Props & {
    commonComponentProps: MaybeComponentProps;
-  } & Props
+  }
 >();

 const { componentBindEventMap, componentMap, isVertical } = useFormContext();
@ -200,9 +203,9 @@ function fieldBindEvent(slotProps: Record<string, any>) {
  const modelValue = slotProps.componentField.modelValue;
  const handler = slotProps.componentField['onUpdate:modelValue'];

-  const bindEventField = isString(component)
-    ? componentBindEventMap.value?.[component]
-    : null;
+  const bindEventField =
+    modelPropName ||
+    (isString(component) ? componentBindEventMap.value?.[component] : null);

  let value = modelValue;
  // antd design 的一些组件会传递一个 event 对象
--- a/packages/@core/ui-kit/form-ui/src/form-render/form.vue
+++ b/packages/@core/ui-kit/form-ui/src/form-render/form.vue
@ -9,9 +9,10 @@ import type {
  FormShape,
 } from '../types';

+import { computed } from 'vue';
+
 import { Form } from '@vben-core/shadcn-ui';
 import { cn, isString, mergeWithArrayOverride } from '@vben-core/shared/utils';
-import { computed } from 'vue';

 import { provideFormRenderProps } from './context';
 import { useExpandable } from './expandable';
@ -21,7 +22,7 @@ import { getBaseRules, getDefaultValueInZodStack } from './helper';
 interface Props extends FormRenderProps {}

 const props = withDefaults(
-  defineProps<{ globalCommonConfig?: FormCommonConfig } & Props>(),
+  defineProps<Props & { globalCommonConfig?: FormCommonConfig }>(),
  {
    collapsedRows: 1,
    commonConfig: () => ({}),
@ -79,10 +80,10 @@ const formCollapsed = computed(() => {
 });

 const computedSchema = computed(
-  (): ({
+  (): (Omit<FormSchema, 'formFieldProps'> & {
    commonComponentProps: Record<string, any>;
    formFieldProps: Record<string, any>;
-  } & Omit<FormSchema, 'formFieldProps'>)[] => {
+  })[] => {
    const {
      colon = false,
      componentProps = {},
@ -97,6 +98,7 @@ const computedSchema = computed(
      hideRequiredMark = false,
      labelClass = '',
      labelWidth = 100,
+      modelPropName = '',
      wrapperClass = '',
    } = mergeWithArrayOverride(props.commonConfig, props.globalCommonConfig);
    return (props.schema || []).map((schema, index) => {
@ -117,6 +119,7 @@ const computedSchema = computed(
        hideLabel,
        hideRequiredMark,
        labelWidth,
+        modelPropName,
        wrapperClass,
        ...schema,
        commonComponentProps: componentProps,
--- a/packages/@core/ui-kit/form-ui/src/types.ts
+++ b/packages/@core/ui-kit/form-ui/src/types.ts
@ -1,9 +1,11 @@
-import type { VbenButtonProps } from '@vben-core/shadcn-ui';
-import type { ClassType } from '@vben-core/typings';
 import type { FieldOptions, FormContext, GenericObject } from 'vee-validate';
-import type { Component, HtmlHTMLAttributes, Ref } from 'vue';
 import type { ZodTypeAny } from 'zod';

+import type { Component, HtmlHTMLAttributes, Ref } from 'vue';
+
+import type { VbenButtonProps } from '@vben-core/shadcn-ui';
+import type { ClassType, Nullable } from '@vben-core/typings';
+
 import type { FormApi } from './form-api';

 export type FormLayout = 'horizontal' | 'vertical';
@ -18,7 +20,7 @@ export type BaseFormComponentType =
  | 'VbenSelect'
  | (Record<never, never> & string);

-type Breakpoints = '' | '2xl:' | '3xl:' | 'lg:' | 'md:' | 'sm:' | 'xl:';
+type Breakpoints = '2xl:' | '3xl:' | '' | 'lg:' | 'md:' | 'sm:' | 'xl:';

 type GridCols = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13;

@ -34,12 +36,12 @@ export type FormItemClassType =
  | WrapperClassType;

 export type FormFieldOptions = Partial<
-  {
+  FieldOptions & {
    validateOnBlur?: boolean;
    validateOnChange?: boolean;
    validateOnInput?: boolean;
    validateOnModelUpdate?: boolean;
-  } & FieldOptions
+  }
 >;

 export interface FormShape {
@ -195,6 +197,11 @@ export interface FormCommonConfig {
   * 所有表单项的label宽度
   */
  labelWidth?: number;
+  /**
+   * 所有表单项的model属性名
+   * @default "modelValue"
+   */
+  modelPropName?: string;
  /**
   * 所有表单项的wrapper样式
   */
@ -217,7 +224,7 @@ export type HandleResetFn = (
 export type FieldMappingTime = [
  string,
  [string, string],
-  ([string, string] | string)?,
+  ([string, string] | Nullable<string>)?,
 ][];

 export interface FormSchema<
@ -328,7 +335,7 @@ export interface VbenFormProps<
   */
  actionWrapperClass?: ClassType;
  /**
-   * 表单字段映射成时间格式
+   * 表单字段映射
   */
  fieldMappingTime?: FieldMappingTime;
  /**
@ -371,11 +378,11 @@ export interface VbenFormProps<
  submitOnEnter?: boolean;
 }

-export type ExtendedFormApi = {
+export type ExtendedFormApi = FormApi & {
  useStore: <T = NoInfer<VbenFormProps>>(
    selector?: (state: NoInfer<VbenFormProps>) => T,
  ) => Readonly<Ref<T>>;
-} & FormApi;
+};

 export interface VbenFormAdapterOptions<
  T extends BaseFormComponentType = BaseFormComponentType,
--- 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,17 +1,22 @@
-import type { ComputedRef } from 'vue';
 import type { ZodRawShape } from 'zod';

-import type { FormActions, VbenFormProps } from './types';
+import type { ComputedRef } from 'vue';
+
+import type { ExtendedFormApi, FormActions, VbenFormProps } from './types';
+
+import { computed, unref, useSlots } from 'vue';

 import { createContext } from '@vben-core/shadcn-ui';
 import { isString } from '@vben-core/shared/utils';
+
 import { useForm } from 'vee-validate';
-import { computed, unref, useSlots } from 'vue';
 import { object } from 'zod';
 import { getDefaultsForSchema } from 'zod-defaults';

+type ExtendFormProps = VbenFormProps & { formApi: ExtendedFormApi };
+
 export const [injectFormProps, provideFormProps] =
-  createContext<[ComputedRef<VbenFormProps> | VbenFormProps, FormActions]>(
+  createContext<[ComputedRef<ExtendFormProps> | ExtendFormProps, FormActions]>(
    'VbenFormProps',
  );

--- a/packages/@core/ui-kit/form-ui/src/vben-use-form.vue
+++ b/packages/@core/ui-kit/form-ui/src/vben-use-form.vue
@ -7,6 +7,7 @@ import { nextTick, onMounted, watch } from 'vue';

 import { useForwardPriorityValues } from '@vben-core/composables';
 import { cloneDeep } from '@vben-core/shared/utils';
+
 import { useDebounceFn } from '@vueuse/core';

 import FormActions from './components/form-actions.vue';
@ -52,8 +53,10 @@ function handleKeyDownEnter(event: KeyboardEvent) {
  forward.value.formApi.validateAndSubmitForm();
 }

-const handleValuesChangeDebounced = useDebounceFn((newVal) => {
-  forward.value.handleValuesChange?.(cloneDeep(newVal));
+const handleValuesChangeDebounced = useDebounceFn(async () => {
+  forward.value.handleValuesChange?.(
+    cloneDeep(await forward.value.formApi.getValues()),
+  );
  state.value.submitOnChange && forward.value.formApi?.validateAndSubmitForm();
 }, 300);

--- a/packages/@core/ui-kit/menu-ui/src/components/menu.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/menu.vue
@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { UseResizeObserverReturn } from '@vueuse/core';
-import type { VNodeArrayChildren } from 'vue';
+
+import type { SetupContext, VNodeArrayChildren } from 'vue';

 import type {
  MenuItemClicked,
@ -9,10 +10,6 @@ import type {
  MenuProvider,
 } from '../types';

-import { useNamespace } from '@vben-core/composables';
-import { Ellipsis } from '@vben-core/icons';
-import { isHttpUrl } from '@vben-core/shared/utils';
-import { useResizeObserver } from '@vueuse/core';
 import {
  computed,
  nextTick,
@ -24,6 +21,12 @@ import {
  watchEffect,
 } from 'vue';

+import { useNamespace } from '@vben-core/composables';
+import { Ellipsis } from '@vben-core/icons';
+import { isHttpUrl } from '@vben-core/shared/utils';
+
+import { useResizeObserver } from '@vueuse/core';
+
 import {
  createMenuContext,
  createSubMenuContext,
@ -52,7 +55,7 @@ const emit = defineEmits<{

 const { b, is } = useNamespace('menu');
 const menuStyle = useMenuStyle();
-const slots = useSlots();
+const slots: SetupContext['slots'] = useSlots();
 const menu = ref<HTMLUListElement>();
 const sliceIndex = ref(-1);
 const openedMenus = ref<MenuProvider['openedMenus']>(
--- a/packages/@core/ui-kit/tabs-ui/src/use-tabs-view-scroll.ts
+++ b/packages/@core/ui-kit/tabs-ui/src/use-tabs-view-scroll.ts
@ -144,7 +144,7 @@ export function useTabsViewScroll(props: TabsProps) {

  function handleWheel({ deltaY }: WheelEvent) {
    scrollViewportEl.value?.scrollBy({
-      behavior: 'smooth',
+      // behavior: 'smooth',
      left: deltaY * 3,
    });
  }
--- a/packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue
+++ b/packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue
@ -2,11 +2,12 @@
 import type { BuiltinThemePreset } from '@vben/preferences';
 import type { BuiltinThemeType } from '@vben/types';

+import { computed, ref, watch } from 'vue';
+
 import { UserRoundPen } from '@vben/icons';
 import { $t } from '@vben/locales';
 import { BUILT_IN_THEME_PRESETS } from '@vben/preferences';
 import { convertToHsl, TinyColor } from '@vben/utils';
-import { computed, ref } from 'vue';

 defineOptions({
  name: 'PreferenceBuiltinTheme',
@ -79,11 +80,6 @@ function typeView(name: BuiltinThemeType) {

 function handleSelect(theme: BuiltinThemePreset) {
  modelValue.value = theme.type;
-  const primaryColor = props.isDark
-    ? theme.darkPrimaryColor || theme.primaryColor
-    : theme.primaryColor;
-
-  themeColorPrimary.value = primaryColor || theme.color;
 }

 function handleInputChange(e: Event) {
@ -94,6 +90,22 @@ function handleInputChange(e: Event) {
 function selectColor() {
  colorInput.value?.[0]?.click?.();
 }
+
+watch(
+  () => [modelValue.value, props.isDark] as [BuiltinThemeType, boolean],
+  ([themeType, isDark]) => {
+    const theme = builtinThemePresets.value.find(
+      (item) => item.type === themeType,
+    );
+    if (theme) {
+      const primaryColor = isDark
+        ? theme.darkPrimaryColor || theme.primaryColor
+        : theme.primaryColor;
+
+      themeColorPrimary.value = primaryColor || theme.color;
+    }
+  },
+);
 </script>

 <template>
--- a/packages/effects/plugins/src/echarts/use-echarts.ts
+++ b/packages/effects/plugins/src/echarts/use-echarts.ts
@ -1,9 +1,13 @@
 import type { EChartsOption } from 'echarts';
+
 import type { Ref } from 'vue';

 import type EchartsUI from './echarts-ui.vue';

+import { computed, nextTick, watch } from 'vue';
+
 import { usePreferences } from '@vben/preferences';
+
 import {
  tryOnUnmounted,
  useDebounceFn,
@ -11,7 +15,6 @@ import {
  useTimeoutFn,
  useWindowSize,
 } from '@vueuse/core';
-import { computed, nextTick, watch } from 'vue';

 import echarts from './echarts';

@ -108,7 +111,7 @@ function useEcharts(chartRef: Ref<EchartsUIType>) {
  return {
    renderEcharts,
    resize,
-    chartInstance
+    chartInstance,
  };
 }

--- a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
+++ b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import type { VbenFormProps } from '@vben-core/form-ui';
 import type {
  VxeGridDefines,
  VxeGridInstance,
@ -9,14 +8,12 @@ import type {
  VxeToolbarPropTypes,
 } from 'vxe-table';

+import type { SetupContext } from 'vue';
+
+import type { VbenFormProps } from '@vben-core/form-ui';
+
 import type { ExtendedVxeGridApi, VxeGridProps } from './types';

-import { usePriorityValues } from '@vben/hooks';
-import { EmptyIcon } from '@vben/icons';
-import { $t } from '@vben/locales';
-import { usePreferences } from '@vben/preferences';
-import { cloneDeep, cn, mergeWithArrayOverride } from '@vben/utils';
-import { VbenHelpTooltip, VbenLoading } from '@vben-core/shadcn-ui';
 import {
  computed,
  nextTick,
@ -27,6 +24,15 @@ import {
  useTemplateRef,
  watch,
 } from 'vue';
+
+import { usePriorityValues } from '@vben/hooks';
+import { EmptyIcon } from '@vben/icons';
+import { $t } from '@vben/locales';
+import { usePreferences } from '@vben/preferences';
+import { cloneDeep, cn, mergeWithArrayOverride } from '@vben/utils';
+
+import { VbenHelpTooltip, VbenLoading } from '@vben-core/shadcn-ui';
+
 import { VxeGrid, VxeUI } from 'vxe-table';

 import { extendProxyOptions } from './extends';
@ -64,18 +70,18 @@ const {

 const { isMobile } = usePreferences();

-const slots = useSlots();
+const slots: SetupContext['slots'] = useSlots();

 const [Form, formApi] = useTableForm({
  compact: true,
  handleSubmit: async () => {
-    const formValues = formApi.form.values;
+    const formValues = await formApi.getValues();
    formApi.setLatestSubmissionValues(toRaw(formValues));
    props.api.reload(formValues);
  },
  handleReset: async () => {
    await formApi.resetForm();
-    const formValues = formApi.form.values;
+    const formValues = await formApi.getValues();
    formApi.setLatestSubmissionValues(formValues);
    props.api.reload(formValues);
  },
@ -247,7 +253,9 @@ async function init() {
    // 第一次拿到的是readonly的数据 如果需要修改 需要cloneDeep
    props.api.grid.commitProxy?.(
      '_init',
-      cloneDeep(formApi.form?.values) ?? {},
+      cloneDeep(formOptions.value)
+        ? (cloneDeep(await formApi.getValues()) ?? {})
+        : {},
    );
    // props.api.reload(formApi.form?.values ?? {});
  }
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@ -21,6 +21,9 @@
    "./ele": {
      "default": "./src/ele/index.css"
    },
+    "./naive": {
+      "default": "./src/naive/index.css"
+    },
    "./global": {
      "default": "./src/global/index.scss"
    }
--- a/packages/styles/src/antd/index.css
+++ b/packages/styles/src/antd/index.css
@ -21,7 +21,7 @@
 .form-valid-error {
  /** select 选择器的样式 */

-  .ant-select .ant-select-selector {
+  .ant-select:not(.valid-success) .ant-select-selector:not(.valid-success) {
    border-color: hsl(var(--destructive)) !important;
  }

@ -39,6 +39,10 @@
    border-color: hsl(var(--destructive));
    box-shadow: 0 0 0 2px rgb(255 38 5 / 6%);
  }
+
+  .ant-input:not(.valid-success) {
+    border-color: hsl(var(--destructive)) !important;
+  }
 }

 /** 区间选择器下面来回切换时的样式 */
--- a/packages/styles/src/naive/index.css
+++ b/packages/styles/src/naive/index.css
@ -0,0 +1,20 @@
+.form-valid-error {
+  .n-base-selection__state-border,
+  .n-input__state-border,
+  .n-radio-group__splitor {
+    border: var(--n-border-error);
+  }
+
+  .n-radio-group .n-radio-button,
+  .n-radio-group .n-radio-group__splitor {
+    --n-button-border-color: rgb(255 56 96);
+  }
+
+  .n-radio__dot {
+    --n-box-shadow: inset 0 0 0 1px rgb(255 56 96);
+  }
+
+  .n-checkbox-box__border {
+    --n-border: 1px solid rgb(255 56 96);
+  }
+}
--- a/playground/src/views/examples/form/custom.vue
+++ b/playground/src/views/examples/form/custom.vue
@ -1,11 +1,13 @@
 <script lang="ts" setup>
-import { h } from 'vue';
+import { h, markRaw } from 'vue';

 import { Page } from '@vben/common-ui';

 import { Card, Input, message } from 'ant-design-vue';

-import { useVbenForm } from '#/adapter/form';
+import { useVbenForm, z } from '#/adapter/form';
+
+import TwoFields from './modules/two-fields.vue';

 const [Form] = useVbenForm({
  // 所有表单项共用，可单独在表单内覆盖
@ -16,6 +18,7 @@ const [Form] = useVbenForm({
    },
    labelClass: 'w-2/6',
  },
+  fieldMappingTime: [['field4', ['phoneType', 'phoneNumber'], null]],
  // 提交函数
  handleSubmit: onSubmit,
  // 垂直布局，label和input在不同行，值为vertical
@ -39,9 +42,10 @@ const [Form] = useVbenForm({
      }),
    },
    {
-      component: h(Input, { placeholder: '请输入' }),
+      component: h(Input, { placeholder: '请输入Field2' }),
      fieldName: 'field2',
      label: '自定义组件',
+      modelPropName: 'value',
      rules: 'required',
    },
    {
@ -50,6 +54,27 @@ const [Form] = useVbenForm({
      label: '自定义组件(slot)',
      rules: 'required',
    },
+    {
+      component: markRaw(TwoFields),
+      defaultValue: [undefined, ''],
+      disabledOnChangeListener: false,
+      fieldName: 'field4',
+      formItemClass: 'col-span-1',
+      label: '组合字段',
+      rules: z
+        .array(z.string().optional())
+        .length(2, '请选择类型并输入手机号码')
+        .refine((v) => !!v[0], {
+          message: '请选择类型',
+        })
+        .refine((v) => !!v[1] && v[1] !== '', {
+          message: '　　　　　　　输入手机号码',
+        })
+        .refine((v) => v[1]?.match(/^1[3-9]\d{9}$/), {
+          // 使用全角空格占位，将错误提示文字挤到手机号码输入框的下面
+          message: '　　　　　　　号码格式不正确',
+        }),
+    },
  ],
  // 中屏一行显示2个，小屏一行显示1个
  wrapperClass: 'grid-cols-1 md:grid-cols-2',
--- a/playground/src/views/examples/form/modules/two-fields.vue
+++ b/playground/src/views/examples/form/modules/two-fields.vue
@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { Input, Select } from 'ant-design-vue';
+
+const emit = defineEmits(['blur', 'change']);
+
+const modelValue = defineModel<[string, string]>({
+  default: () => [undefined, undefined],
+});
+
+function onChange() {
+  emit('change', modelValue.value);
+}
+</script>
+<template>
+  <div class="flex w-full gap-1">
+    <Select
+      v-model:value="modelValue[0]"
+      class="w-[80px]"
+      placeholder="类型"
+      allow-clear
+      :class="{ 'valid-success': !!modelValue[0] }"
+      :options="[
+        { label: '个人', value: 'personal' },
+        { label: '工作', value: 'work' },
+        { label: '私密', value: 'private' },
+      ]"
+      @blur="emit('blur')"
+      @change="onChange"
+    />
+    <Input
+      placeholder="请输入11位手机号码"
+      class="flex-1"
+      allow-clear
+      :class="{ 'valid-success': modelValue[1]?.match(/^1[3-9]\d{9}$/) }"
+      v-model:value="modelValue[1]"
+      :maxlength="11"
+      type="tel"
+      @blur="emit('blur')"
+      @change="onChange"
+    />
+  </div>
+</template>
--- a/playground/src/views/examples/vxe-table/form.vue
+++ b/playground/src/views/examples/vxe-table/form.vue
@ -5,6 +5,7 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import { Page } from '@vben/common-ui';

 import { message } from 'ant-design-vue';
+import dayjs from 'dayjs';

 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getExampleTableApi } from '#/api';
@ -21,6 +22,7 @@ interface RowType {
 const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
  schema: [
    {
      component: 'Input',
@ -58,8 +60,9 @@ const formOptions: VbenFormProps = {
      label: 'Color',
    },
    {
-      component: 'DatePicker',
-      fieldName: 'datePicker',
+      component: 'RangePicker',
+      defaultValue: [dayjs().subtract(7, 'days'), dayjs()],
+      fieldName: 'date',
      label: 'Date',
    },
  ],
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@ -17,26 +17,26 @@ catalog:
  '@changesets/changelog-github': ^0.5.0
  '@changesets/cli': ^2.27.11
  '@changesets/git': ^3.0.2
-  '@clack/prompts': ^0.9.0
+  '@clack/prompts': ^0.9.1
  '@commitlint/cli': ^19.6.1
  '@commitlint/config-conventional': ^19.6.0
  '@ctrl/tinycolor': ^4.1.0
  '@eslint/js': ^9.17.0
  '@faker-js/faker': ^9.3.0
-  '@iconify/json': ^2.2.290
+  '@iconify/json': ^2.2.293
  '@iconify/tailwind': ^1.2.0
-  '@iconify/vue': ^4.2.0
+  '@iconify/vue': ^4.3.0
  '@intlify/core-base': ^11.0.1
  '@intlify/unplugin-vue-i18n': ^6.0.3
-  '@jspm/generator': ^2.4.1
+  '@jspm/generator': ^2.4.2
  '@manypkg/get-packages': ^2.2.2
  '@nolebase/vitepress-plugin-git-changelog': ^2.12.0
  '@playwright/test': ^1.49.1
  '@pnpm/workspace.read-manifest': ^1000.0.1
  '@stylistic/stylelint-plugin': ^3.1.1
  '@tailwindcss/nesting': 0.0.0-insiders.565cd3e
-  '@tailwindcss/typography': ^0.5.15
-  '@tanstack/vue-query': ^5.62.9
+  '@tailwindcss/typography': ^0.5.16
+  '@tanstack/vue-query': ^5.62.16
  '@tanstack/vue-store': ^0.7.0
  '@types/archiver': ^6.0.3
  '@types/eslint': ^9.6.1
@ -45,13 +45,13 @@ catalog:
  '@types/lodash.clonedeep': ^4.5.9
  '@types/lodash.get': ^4.4.9
  '@types/lodash.isequal': ^4.5.8
-  '@types/node': ^22.10.3
+  '@types/node': ^22.10.5
  '@types/nprogress': ^0.2.3
  '@types/postcss-import': ^14.0.3
  '@types/qrcode': ^1.5.5
  '@types/sortablejs': ^1.15.8
-  '@typescript-eslint/eslint-plugin': ^8.19.0
-  '@typescript-eslint/parser': ^8.19.0
+  '@typescript-eslint/eslint-plugin': ^8.19.1
+  '@typescript-eslint/parser': ^8.19.1
  '@vee-validate/zod': ^4.15.0
  '@vite-pwa/vitepress': ^0.5.3
  '@vitejs/plugin-vue': ^5.2.1
@ -59,8 +59,8 @@ catalog:
  '@vue/reactivity': ^3.5.13
  '@vue/shared': ^3.5.13
  '@vue/test-utils': ^2.4.6
-  '@vueuse/core': ^12.2.0
-  '@vueuse/integrations': ^12.2.0
+  '@vueuse/core': ^12.3.0
+  '@vueuse/integrations': ^12.3.0
  ant-design-vue: ^4.2.6
  archiver: ^7.0.1
  autoprefixer: ^10.4.20
@ -84,7 +84,7 @@ catalog:
  depcheck: ^1.4.7
  dotenv: ^16.4.7
  echarts: ^5.6.0
-  element-plus: ^2.9.1
+  element-plus: ^2.9.2
  eslint: ^9.17.0
  eslint-config-turbo: ^2.3.3
  eslint-plugin-command: ^0.2.7
@ -94,7 +94,7 @@ catalog:
  eslint-plugin-jsonc: ^2.18.2
  eslint-plugin-n: ^17.15.1
  eslint-plugin-no-only-tests: ^3.3.0
-  eslint-plugin-perfectionist: ^4.4.0
+  eslint-plugin-perfectionist: ^4.6.0
  eslint-plugin-prettier: ^5.2.1
  eslint-plugin-regexp: ^2.7.0
  eslint-plugin-unicorn: ^56.0.1
@ -106,7 +106,7 @@ catalog:
  get-port: ^7.1.0
  globals: ^15.14.0
  h3: ^1.13.0
-  happy-dom: ^16.2.9
+  happy-dom: ^16.5.3
  html-minifier-terser: ^7.2.0
  husky: ^9.1.7
  is-ci: ^4.1.0
@ -118,7 +118,7 @@ catalog:
  lodash.isequal: ^4.5.0
  lucide-vue-next: ^0.469.0
  medium-zoom: ^1.1.0
-  naive-ui: ^2.40.4
+  naive-ui: ^2.41.0
  nitropack: ^2.10.4
  nprogress: ^0.2.0
  ora: ^8.1.1
@ -139,9 +139,9 @@ catalog:
  radix-vue: ^1.9.12
  resolve.exports: ^2.0.3
  rimraf: ^6.0.1
-  rollup: ^4.29.1
-  rollup-plugin-visualizer: ^5.13.1
-  sass: ^1.83.0
+  rollup: ^4.30.1
+  rollup-plugin-visualizer: ^5.14.0
+  sass: ^1.83.1
  sortablejs: ^1.15.6
  stylelint: ^16.12.0
  stylelint-config-recess-order: ^5.1.1
@ -157,19 +157,19 @@ catalog:
  tailwindcss-animate: ^1.0.7
  theme-colors: ^0.1.0
  turbo: ^2.3.3
-  typescript: ^5.7.2
+  typescript: ^5.7.3
  unbuild: ^3.2.0
  unplugin-element-plus: ^0.9.0
  vee-validate: ^4.15.0
-  vite: ^6.0.6
+  vite: ^6.0.7
  vite-plugin-compression: ^0.5.1
-  vite-plugin-dts: ^4.3.0
+  vite-plugin-dts: ^4.4.0
  vite-plugin-html: ^3.2.2
  vite-plugin-lazy-import: ^1.0.7
  vite-plugin-pwa: ^0.21.1
-  vite-plugin-vue-devtools: ^7.6.8
+  vite-plugin-vue-devtools: ^7.7.0
  vitepress: ^1.5.0
-  vitepress-plugin-group-icons: ^1.3.2
+  vitepress-plugin-group-icons: ^1.3.3
  vitest: ^2.1.8
  vue: ^3.5.13
  vue-eslint-parser: ^9.4.3