@qin-ui/antd-vue-pro 2.3.3 → 2.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qin-ui/antd-vue-pro",
-  "version": "2.3.3",
+  "version": "2.3.4",
   "description": "二次封装antd vue组件",
   "bin": {
     "antd-vue-pro": "./bin/init-ai.mjs"
@@ -43,7 +43,7 @@
   "dependencies": {
     "scroll-into-view-if-needed": "^3.1.0",
     "vue-component-type-helpers": "^3.2.5",
-    "@qin-ui/pro-components-core": "^1.1.1"
+    "@qin-ui/pro-components-core": "^1.1.3"
   },
   "devDependencies": {
     "ant-design-vue": "^4"

package/src/components/form/components/BaseFormItem/index.vue

@@ -13,12 +13,9 @@
  * ## 渲染流程
  *
  * 1. 遍历 fields 数组，过滤 hidden 字段
- * 2. 对每个字段：
- *    a. 通过 PathProvider 提供当前字段路径
- *    b. 通过 GroupedFieldAttrs 将 field 配置拆分为 gridItemProps / formItemProps / componentProps
- *    c. 如果字段有 `fields` 子字段 → 递归渲染 BaseFormItem（嵌套表单）
- *    d. 否则 → 渲染 BaseField（输入组件）
- * 3. 通过 ref 回调收集 FormItem 和 Component 实例，注入到 field 对象上
+ * 2. 通过 useGroupFieldAttrs Hook 纯计算将 field 配置拆分为 gridItemProps / formItemProps / componentProps / slots
+ * 3. 递归渲染 BaseFormItem（嵌套表单）或 BaseField（输入组件）
+ * 4. 通过 ref 回调收集 FormItem 和 Component 实例，注入到 field 对象上
  *
  * @param {Fields<D>} [fields] - 字段配置数组
  * @param {boolean | GridProps} [grid] - 是否启用网格布局
@@ -37,8 +34,7 @@ import {
 import { computed, inject, toValue } from 'vue';
 import type { Fields, Grid } from '../../types';
 import { BaseField, SlotComponent, ContainerFragment } from '..';
-import PathProvider from '../PathProvider/index.vue';
-import GroupedFieldAttrs from '../GroupedFieldAttrs/index.vue';
+import { useGroupFieldAttrs } from '../../hooks/useGroupFieldAttrs';
 import { INJECT_CONFIG } from '../../../component-provider/constants';
 
 defineOptions({ name: 'BaseFormItem', inheritAttrs: false });
@@ -92,6 +88,8 @@ const onComponentMounted = (index: number) => {
       componentRefs[index]?.getComponentComputedProps(),
   });
 };
+
+const groupedFields = useGroupFieldAttrs(validFields);
 </script>
 
 <template>
@@ -99,65 +97,51 @@ const onComponentMounted = (index: number) => {
     :component="enableGrid ? AGrid : undefined"
     v-bind="computedGridProps"
   >
-    <PathProvider
-      v-for="({ path: _path, name: _name, ...field }, index) of validFields"
-      :key="toPath(toValue((_name ?? _path) as any)).join('.') || index"
-      v-bind="{ path: (_name ?? _path) as any }"
-    >
-      <template #default="{ path }">
-        <GroupedFieldAttrs :field="field">
-          <template
-            #default="{
-              gridItemProps,
-              formItemProps: { formItemContainer, ...formItemProps },
-              componentProps,
-              formItemSlots,
-            }"
+    <template v-for="(item, index) of groupedFields" :key="item.path || index">
+      <ContainerFragment
+        :component="enableGrid ? AGridItem : undefined"
+        v-bind="item.gridItemProps"
+      >
+        <ContainerFragment
+          :component="item.formItemContainer"
+          :path="item.path"
+        >
+          <FormItem
+            v-bind="item.formItemProps"
+            :ref="el => (formItemRefs[index] = el)"
+            :name="toPath(item.path)"
+            :path="item.path"
+            @vue:mounted="onFormItemMounted(index, item.formItemProps)"
           >
-            <ContainerFragment
-              :component="enableGrid ? AGridItem : undefined"
-              v-bind="gridItemProps"
+            <template
+              v-for="(slot, name) in item.formItemSlots"
+              :key="name"
+              #[name]="scoped"
             >
-              <ContainerFragment :component="formItemContainer" :path="path">
-                <FormItem
-                  v-bind="formItemProps"
-                  :ref="el => (formItemRefs[index] = el)"
-                  :name="toPath(path)"
-                  :path="path"
-                  @vue:mounted="onFormItemMounted(index, formItemProps)"
-                >
-                  <template
-                    v-for="(slot, name) in formItemSlots"
-                    :key="name"
-                    #[name]="scoped"
-                  >
-                    <SlotComponent
-                      :path="path"
-                      :component="slot"
-                      v-bind="scoped"
-                    />
-                  </template>
-                  <template v-if="field.fields">
-                    <BaseFormItem
-                      :grid="(field as any).grid ?? grid"
-                      :fields="field.fields"
-                      :disabled="toValue(field.disabled)"
-                    />
-                  </template>
-                  <template v-else>
-                    <BaseField
-                      :ref="el => (componentRefs[index] = el)"
-                      v-bind="componentProps"
-                      :path="path"
-                      @vue:mounted="onComponentMounted(index)"
-                    />
-                  </template>
-                </FormItem>
-              </ContainerFragment>
-            </ContainerFragment>
-          </template>
-        </GroupedFieldAttrs>
-      </template>
-    </PathProvider>
+              <SlotComponent
+                :path="item.path"
+                :component="slot"
+                v-bind="scoped"
+              />
+            </template>
+            <template v-if="item.rawField.fields">
+              <BaseFormItem
+                :grid="(item.rawField as any).grid ?? grid"
+                :fields="item.rawField.fields"
+                :disabled="toValue(item.rawField.disabled)"
+              />
+            </template>
+            <template v-else>
+              <BaseField
+                :ref="el => (componentRefs[index] = el)"
+                v-bind="item.componentProps"
+                :path="item.path"
+                @vue:mounted="onComponentMounted(index)"
+              />
+            </template>
+          </FormItem>
+        </ContainerFragment>
+      </ContainerFragment>
+    </template>
   </ContainerFragment>
 </template>

package/src/components/form/constants/index.ts

@@ -126,8 +126,4 @@ export const componentMap: BaseComponentMap = {
 }
 
 // inject keys
-export {
-  InjectionFormKey,
-  InjectionPathKey,
-  InjectionFormSlotsKey,
-} from '../../../shared/core';
+export { InjectionFormKey, InjectionFormSlotsKey } from '../../../shared/core';

package/src/components/form/hooks/useGroupFieldAttrs.ts

@@ -0,0 +1,120 @@
+import { computed, inject, mergeProps, toValue, type ComputedRef } from 'vue';
+import {
+  formItemProps,
+  gridItemProps,
+  type FormItemProps,
+  type GridItemProps,
+} from '../../../shared/ui';
+import { isPlainObject } from '../../../shared/core';
+import { INJECT_CONFIG } from '../../component-provider/constants';
+import { FORM_ITEM_SLOT_KEYS } from '../constants';
+import type { Base, Field } from '../types';
+
+const formItemPropKeys = Object.keys(formItemProps()).concat([
+  'formItemContainer',
+]);
+const gridItemPropKeys = Object.keys(gridItemProps());
+
+export interface GroupedField {
+  path: string;
+  gridItemProps: GridItemProps;
+  formItemProps: FormItemProps;
+  formItemSlots: Record<(typeof FORM_ITEM_SLOT_KEYS)[number], any>;
+  componentProps: Record<string, any>;
+  formItemContainer?: Base['formItemContainer'];
+  rawField: Field;
+}
+
+/**
+ * 将 fields 配置数组逐个拆分为 grid / formItem / component / slots 分组。
+ */
+export function useGroupFieldAttrs(validFields: ComputedRef<Field[]>) {
+  const config = INJECT_CONFIG['pro-form-item'];
+  const injectFormItemProps = inject(config.injectionKey, config.default);
+
+  return computed<GroupedField[]>(() => {
+    return validFields.value.map(field => {
+      let gridItemProps: Record<string, any> = {};
+      let formItemProps: Record<string, any> = {};
+      const componentProps: Record<string, any> = { slots: {} };
+      const formItemSlots: Record<string, any> = {};
+
+      if (isPlainObject(field)) {
+        // prettier-ignore
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { path, name, fields, formItemClass, formItemStyle, hidden, span, getFormItemRef, getComponentRef, getFormItemComputedProps, getComponentComputedProps, slots = {}, formItemDataAttrs = {}, componentDataAttrs = {}, extraProps, formItemContainer, ...rest } =
+          field as any;
+
+        const {
+          class: injectClassName,
+          style: injectStyle,
+          span: injectSpan,
+          xs,
+          sm,
+          md,
+          lg,
+          xl,
+          xxl,
+          ...injectRest
+        } = injectFormItemProps;
+
+        const initGridItemProps =
+          span || span === 0
+            ? { span }
+            : { xs, sm, md, lg, xl, xxl, span: injectSpan };
+
+        gridItemProps = fields ? { span: span ?? 24 } : initGridItemProps;
+        formItemProps = mergeProps(
+          injectRest,
+          { class: injectClassName, style: injectStyle },
+          { class: toValue(formItemClass), style: toValue(formItemStyle) },
+          formItemDataAttrs
+        );
+
+        Object.keys(rest).forEach(k => {
+          if (gridItemPropKeys.includes(k)) {
+            gridItemProps[k] = rest[k];
+          } else if (formItemPropKeys.includes(k)) {
+            formItemProps[k] = rest[k];
+          } else {
+            componentProps[k] = rest[k];
+          }
+        });
+
+        Object.assign(componentProps, componentDataAttrs);
+        Object.keys(slots).forEach(k => {
+          if (FORM_ITEM_SLOT_KEYS.includes(k as any)) {
+            formItemSlots[k] = slots[k];
+          } else {
+            componentProps.slots[k] = slots[k];
+          }
+        });
+
+        const raw = (toValue(name) ?? toValue(path)) as
+          | string
+          | number[]
+          | undefined;
+        return {
+          path: Array.isArray(raw) ? raw.join('.') : (raw as string) || '',
+          gridItemProps: gridItemProps as GridItemProps,
+          formItemProps: formItemProps as any,
+          formItemSlots,
+          componentProps,
+          formItemContainer,
+          rawField: field,
+        };
+      }
+
+      const raw =
+        toValue((field as any)?.name) ?? toValue((field as any)?.path);
+      return {
+        path: Array.isArray(raw) ? raw.join('.') : (raw as string) || '',
+        gridItemProps: gridItemProps as GridItemProps,
+        formItemProps: formItemProps as any,
+        formItemSlots,
+        componentProps,
+        rawField: field,
+      };
+    });
+  });
+}

package/src/shared/core/index.ts

@@ -11,7 +11,6 @@ export {
   useFormRef,
   // injection keys
   InjectionFormKey,
-  InjectionPathKey,
   InjectionFormSlotsKey,
   // utils
   getObject,

package/es/components/form/components/GroupedFieldAttrs/index.vue.d.ts

@@ -1,29 +0,0 @@
-import { GridItemProps, FormItemProps } from '../../../../shared/ui';
-import { Base, Field } from '../../types';
-import { FORM_ITEM_SLOT_KEYS } from '../../constants';
-type Props = {
-    field: Field;
-};
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {
-            gridItemProps: GridItemProps;
-            formItemProps: FormItemProps & Pick<Base, "formItemContainer">;
-            formItemSlots: Record<(typeof FORM_ITEM_SLOT_KEYS)[number], any>;
-            componentProps: Record<string, any>;
-        }): any;
-    };
-    refs: {};
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
-//# sourceMappingURL=index.vue.d.ts.map

package/es/components/form/components/GroupedFieldAttrs/index.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/GroupedFieldAttrs/index.vue"],"names":[],"mappings":"AA6IA,OAAO,EACL,aAAa,EACb,aAAa,EAGd,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAQtD,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,KAAK,CAAC;CACd,CAAC;AA6EF,iBAAS,cAAc;WAqBT,OAAO,IAA6B;;;2BA1FjC,aAAa;2BACb,aAAa,GAAG,IAAI,CAAC,IAAI,EAAE,mBAAmB,CAAC;2BAC/C,MAAM,CAAC,CAAC,OAAO,mBAAmB,EAAE,MAAM,CAAC,EAAE,GAAG,CAAC;4BAChD,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;YA6ER,GAAG;;;;EAe/B;AASD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,sRAMnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/es/components/form/components/PathProvider/index.vue.d.ts

@@ -1,24 +0,0 @@
-import { NamePath } from '../../../../shared/ui';
-type __VLS_Props = {
-    path?: NamePath;
-};
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {
-            path: string | undefined;
-        }): any;
-    };
-    refs: {};
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
-//# sourceMappingURL=index.vue.d.ts.map

package/es/components/form/components/PathProvider/index.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/PathProvider/index.vue"],"names":[],"mappings":"AAuBA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,KAAK,WAAW,GAAG;IAAE,IAAI,CAAC,EAAE,QAAQ,CAAA;CAAE,CAAC;AAavC,iBAAS,cAAc;WAqBT,OAAO,IAA6B;;;;YAVrB,GAAG;;;;EAe/B;AASD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,kSAMnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/src/components/form/components/GroupedFieldAttrs/index.vue

@@ -1,118 +0,0 @@
-<script lang="ts" setup>
-/**
- * @component GroupedFieldAttrs
- * @description 字段属性分组器，将 field 配置对象拆分为三类属性
- *
- * ## 属性分发逻辑
- *
- * 单个 field 对象包含多种属性，需要分发到不同的渲染目标：
- *
- * 1. **gridItemProps** — 网格布局属性（span、xs、sm、md、lg、xl、xxl 等），传递给 GridItem
- * 2. **formItemProps** — 表单项属性（label、rules、required 等），传递给 FormItem
- * 3. **componentProps** — 组件属性（placeholder、allowClear 等），传递给输入组件
- * 4. **formItemSlots** — FormItem 的具名插槽（label、help、extra 等）
- *
- * 分组依据：
- * - 匹配 antd-vue GridItem 的 props key → gridItemProps
- * - 匹配 antd-vue FormItem 的 props key → formItemProps
- * - 其余所有属性 → componentProps
- * - 属于 FORM_ITEM_SLOT_KEYS 的插槽 → formItemSlots
- * - 其余插槽 → componentProps.slots
- */
-import { computed, inject, mergeProps, toValue } from 'vue';
-import {
-  GridItemProps,
-  FormItemProps,
-  gridItemProps,
-  formItemProps,
-} from '../../../../shared/ui';
-import { INJECT_CONFIG } from '../../../component-provider/constants';
-import type { Base, Field } from '../../types';
-import { FORM_ITEM_SLOT_KEYS } from '../../constants';
-import { isPlainObject } from '../../../../shared/core';
-
-const formItemPropKeys = Object.keys(formItemProps()).concat([
-  'formItemContainer',
-]);
-const gridItemPropKeys = Object.keys(gridItemProps());
-
-type Props = {
-  field: Field;
-};
-const props = defineProps<Props>();
-
-const config = INJECT_CONFIG['pro-form-item'];
-const injectFormItemProps = inject(config.injectionKey, config.default);
-
-type GroupedFieldAttrs = {
-  gridItemProps: GridItemProps;
-  formItemProps: FormItemProps & Pick<Base, 'formItemContainer'>;
-  formItemSlots: Record<(typeof FORM_ITEM_SLOT_KEYS)[number], any>;
-  componentProps: Record<string, any>;
-};
-
-// 将 field 配置按 key 分发到三类属性分组中
-const groupedAttributes = computed<GroupedFieldAttrs>(() => {
-  let gridItemProps: Record<string, any> = {};
-  let formItemProps: Record<string, any> = {};
-  const componentProps: Record<string, any> = { slots: {} };
-  const formItemSlots: Record<string, any> = {};
-
-  if (isPlainObject(props.field)) {
-    // prettier-ignore
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { path, name, fields, formItemClass, formItemStyle, hidden, span, getFormItemRef, getComponentRef, getFormItemComputedProps, getComponentComputedProps, slots = {}, formItemDataAttrs = {}, componentDataAttrs = {}, extraProps, ...rest } =
-    props.field as any;
-    const {
-      class: injectClassName,
-      style: injectStyle,
-      span: injectSpan,
-      xs,
-      sm,
-      md,
-      lg,
-      xl,
-      xxl,
-      ...injectRest
-    } = injectFormItemProps;
-
-    const initGridItemProps =
-      span || span === 0
-        ? { span }
-        : { xs, sm, md, lg, xl, xxl, span: injectSpan };
-
-    gridItemProps = fields ? { span: span ?? 24 } : initGridItemProps;
-    formItemProps = mergeProps(
-      injectRest,
-      { class: injectClassName, style: injectStyle },
-      { class: toValue(formItemClass), style: toValue(formItemStyle) },
-      formItemDataAttrs
-    );
-
-    Object.keys(rest).forEach(k => {
-      if (gridItemPropKeys.includes(k)) {
-        gridItemProps[k] = rest[k];
-      } else if (formItemPropKeys.includes(k)) {
-        formItemProps[k as keyof FormItemProps] = rest[k];
-      } else {
-        componentProps[k] = rest[k];
-      }
-    });
-
-    Object.assign(componentProps, componentDataAttrs);
-    Object.keys(slots).forEach(k => {
-      if (FORM_ITEM_SLOT_KEYS.includes(k as any)) {
-        formItemSlots[k] = slots[k];
-      } else {
-        componentProps['slots'][k] = slots[k];
-      }
-    });
-  }
-
-  return { gridItemProps, formItemProps, componentProps, formItemSlots };
-});
-</script>
-
-<template>
-  <slot v-bind="groupedAttributes"></slot>
-</template>

package/src/components/form/components/PathProvider/index.vue

@@ -1,19 +0,0 @@
-<script lang="ts" setup>
-import { computed, provide } from 'vue';
-import { InjectionPathKey } from '../../constants';
-import { NamePath } from '../../../../shared/ui';
-
-const props = defineProps<{ path?: NamePath }>();
-
-const namePath = computed(() => {
-  return Array.isArray(props.path)
-    ? props.path.join('.')
-    : (props.path as string | undefined);
-});
-
-provide(InjectionPathKey, namePath);
-</script>
-
-<template>
-  <slot :path="namePath" />
-</template>