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

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';
 

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',
     },
   ],
 });

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) => {

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样式
    */

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": {

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';

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 {
+import { cn, isFunction, triggerWindowResize } from '@vben-core/shared/utils';
-  cn,
-  formatDate,
-  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);
+  const values = toRaw(props.formApi?.getValues());
-  // 清理时间字段
-  props.fieldMappingTime &&
-    props.fieldMappingTime.forEach(([_, [startTimeKey, endTimeKey]]) => {
-      delete values[startTimeKey];
-      delete values[endTimeKey];
-    });
 
   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,
   () => {

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);
+      }
+    }
+  }
 }

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)
+  const bindEventField =
-    ? componentBindEventMap.value?.[component]
+    modelPropName ||
-    : null;
+    (isString(component) ? componentBindEventMap.value?.[component] : null);
 
   let value = modelValue;
   // antd design 的一些组件会传递一个 event 对象

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,

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,

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',
   );
 

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

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']>(

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,
     });
   }

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>

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,
   };
 }
 

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 ?? {});
   }

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"
     }

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;
+  }
 }
 
 /** 区间选择器下面来回切换时的样式 */

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);
+  }
+}

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',

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>

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',
+      component: 'RangePicker',
-      fieldName: 'datePicker',
+      defaultValue: [dayjs().subtract(7, 'days'), dayjs()],
+      fieldName: 'date',
       label: 'Date',
     },
   ],

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
+  '@tailwindcss/typography': ^0.5.16
-  '@tanstack/vue-query': ^5.62.9
+  '@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/eslint-plugin': ^8.19.1
-  '@typescript-eslint/parser': ^8.19.0
+  '@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/core': ^12.3.0
-  '@vueuse/integrations': ^12.2.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: ^4.30.1
-  rollup-plugin-visualizer: ^5.13.1
+  rollup-plugin-visualizer: ^5.14.0
-  sass: ^1.83.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