From 870cd863932ae93dcf64a0875cc164bfd115b6f3 Mon Sep 17 00:00:00 2001
From: Netfan <netfan@foxmail.com>
Date: Thu, 27 Mar 2025 14:22:05 +0800
Subject: [PATCH 1/3] fix: auto check parent after node selected (#5794)

---
 .../ui-kit/shadcn-ui/src/ui/tree/tree.vue     | 281 ++++++++++--------
 .../ui-kit/shadcn-ui/src/ui/tree/types.ts     |  42 +++
 .../src/views/system/role/modules/form.vue    |   2 +-
 3 files changed, 207 insertions(+), 118 deletions(-)
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/ui/tree/types.ts

diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue
index 46866979..b75088bb 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue
@@ -4,7 +4,9 @@ import type { FlattenedItem } from 'radix-vue';
 
 import type { ClassType, Recordable } from '@vben-core/typings';
 
-import { onMounted, ref, watch, watchEffect } from 'vue';
+import type { TreeProps } from './types';
+
+import { onMounted, ref, watchEffect } from 'vue';
 
 import { ChevronRight, IconifyIcon } from '@vben-core/icons';
 import { cn, get } from '@vben-core/shared/utils';
@@ -14,46 +16,13 @@ import { TreeItem, TreeRoot } from 'radix-vue';
 
 import { Checkbox } from '../checkbox';
 
-interface TreeProps {
-  /** 单选时允许取消已有选项 */
-  allowClear?: boolean;
-  /** 显示边框 */
-  bordered?: boolean;
-  /** 取消父子关联选择 */
-  checkStrictly?: boolean;
-  /** 子级字段名 */
-  childrenField?: string;
-  /** 默认展开的键 */
-  defaultExpandedKeys?: Array<number | string>;
-  /** 默认展开的级别（优先级高于defaultExpandedKeys） */
-  defaultExpandedLevel?: number;
-  /** 默认值 */
-  defaultValue?: Arrayable<number | string>;
-  /** 禁用 */
-  disabled?: boolean;
-  /** 自定义节点类名 */
-  getNodeClass?: (item: FlattenedItem<Recordable<any>>) => string;
-  iconField?: string;
-  /** label字段 */
-  labelField?: string;
-  /** 当前值 */
-  modelValue?: Arrayable<number | string>;
-  /** 是否多选 */
-  multiple?: boolean;
-  /** 显示由iconField指定的图标 */
-  showIcon?: boolean;
-  /** 启用展开收缩动画 */
-  transition?: boolean;
-  /** 树数据 */
-  treeData: Recordable<any>[];
-  /** 值字段 */
-  valueField?: string;
-}
 const props = withDefaults(defineProps<TreeProps>(), {
   allowClear: false,
+  autoCheckParent: true,
   bordered: false,
   checkStrictly: false,
   defaultExpandedKeys: () => [],
+  defaultExpandedLevel: 0,
   disabled: false,
   expanded: () => [],
   iconField: 'icon',
@@ -61,7 +30,7 @@ const props = withDefaults(defineProps<TreeProps>(), {
   modelValue: () => [],
   multiple: false,
   showIcon: true,
-  transition: false,
+  transition: true,
   valueField: 'value',
   childrenField: 'children',
 });
@@ -72,28 +41,36 @@ const emits = defineEmits<{
   'update:modelValue': [value: Arrayable<Recordable<any>>];
 }>();
 
-interface InnerFlattenItem<T = Recordable<any>> {
+interface InnerFlattenItem<T = Recordable<any>, P = number | string> {
   hasChildren: boolean;
   level: number;
+  parents: P[];
   value: T;
 }
 
-function flatten<T = Recordable<any>>(
+function flatten<T = Recordable<any>, P = number | string>(
   items: T[],
   childrenField: string = 'children',
   level = 0,
-): InnerFlattenItem<T>[] {
-  const result: InnerFlattenItem<T>[] = [];
+  parents: P[] = [],
+): InnerFlattenItem<T, P>[] {
+  const result: InnerFlattenItem<T, P>[] = [];
   items.forEach((item) => {
     const children = get(item, childrenField) as Array<T>;
     const val = {
       hasChildren: Array.isArray(children) && children.length > 0,
       level,
+      parents: [...parents],
       value: item,
     };
     result.push(val);
     if (val.hasChildren)
-      result.push(...flatten(children, childrenField, level + 1));
+      result.push(
+        ...flatten(children, childrenField, level + 1, [
+          ...parents,
+          get(item, props.valueField),
+        ]),
+      );
   });
   return result;
 }
@@ -133,14 +110,6 @@ function updateTreeValue() {
     : getItemByValue(val);
 }
 
-watch(
-  modelValue,
-  () => {
-    updateTreeValue();
-  },
-  { deep: true, immediate: true },
-);
-
 function updateModelValue(val: Arrayable<Recordable<any>>) {
   modelValue.value = Array.isArray(val)
     ? val.map((v) => get(v, props.valueField))
@@ -186,7 +155,33 @@ function collapseAll() {
 function onToggle(item: FlattenedItem<Recordable<any>>) {
   emits('expand', item);
 }
-function onSelect(item: FlattenedItem<Recordable<any>>) {
+function onSelect(item: FlattenedItem<Recordable<any>>, isSelected: boolean) {
+  if (
+    !props.checkStrictly &&
+    props.multiple &&
+    props.autoCheckParent &&
+    isSelected
+  ) {
+    flattenData.value
+      .find((i) => {
+        return (
+          get(i.value, props.valueField) === get(item.value, props.valueField)
+        );
+      })
+      ?.parents?.forEach((p) => {
+        if (Array.isArray(modelValue.value) && !modelValue.value.includes(p)) {
+          modelValue.value.push(p);
+        }
+      });
+  } else {
+    if (Array.isArray(modelValue.value)) {
+      const index = modelValue.value.indexOf(get(item.value, props.valueField));
+      if (index !== -1) {
+        modelValue.value.splice(index, 1);
+      }
+    }
+  }
+  updateTreeValue();
   emits('select', item);
 }
 
@@ -224,78 +219,130 @@ defineExpose({
     <div class="w-full" v-if="$slots.header">
       <slot name="header"> </slot>
     </div>
-    <TreeItem
-      v-for="item in flattenItems"
-      v-slot="{
-        isExpanded,
-        isSelected,
-        isIndeterminate,
-        handleSelect,
-        handleToggle,
-      }"
-      :key="item._id"
-      :style="{ 'padding-left': `${item.level - 0.5}rem` }"
-      :class="
-        cn('cursor-pointer', getNodeClass?.(item), {
-          'data-[selected]:bg-accent': !multiple,
-        })
-      "
-      v-bind="item.bind"
-      @select="
-        (event) => {
-          if (event.detail.originalEvent.type === 'click') {
-            // event.preventDefault();
-          }
-          onSelect(item);
-        }
-      "
-      @toggle="
-        (event) => {
-          if (event.detail.originalEvent.type === 'click') {
-            event.preventDefault();
-          }
-          onToggle(item);
-        }
-      "
-      class="tree-node focus:ring-grass8 my-0.5 flex items-center rounded px-2 py-1 outline-none focus:ring-2"
+    <TransitionGroup
+      :name="transition ? 'fade' : ''"
+      mode="out-in"
+      class="container"
     >
-      <ChevronRight
-        v-if="item.hasChildren"
-        class="size-4 cursor-pointer transition"
-        :class="{ 'rotate-90': isExpanded }"
-        @click.stop="handleToggle"
-      />
-      <div v-else class="h-4 w-4">
-        <!-- <IconifyIcon v-if="item.value.icon" :icon="item.value.icon" /> -->
-      </div>
-      <Checkbox
-        v-if="multiple"
-        :checked="isSelected"
-        :indeterminate="isIndeterminate"
-        @click.stop="handleSelect"
-      />
-      <div
-        class="flex items-center gap-1 pl-2"
-        @click="
-          ($event) => {
-            $event.stopPropagation();
-            $event.preventDefault();
-            handleSelect();
+      <TreeItem
+        v-for="item in flattenItems"
+        v-slot="{
+          isExpanded,
+          isSelected,
+          isIndeterminate,
+          handleSelect,
+          handleToggle,
+        }"
+        :key="item._id"
+        :style="{ 'padding-left': `${item.level - 0.5}rem` }"
+        :class="
+          cn('cursor-pointer', getNodeClass?.(item), {
+            'data-[selected]:bg-accent': !multiple,
+          })
+        "
+        v-bind="item.bind"
+        @select="
+          (event) => {
+            if (event.detail.originalEvent.type === 'click') {
+              // event.preventDefault();
+            }
+            onSelect(item, event.detail.isSelected);
           }
         "
+        @toggle="
+          (event) => {
+            if (event.detail.originalEvent.type === 'click') {
+              event.preventDefault();
+            }
+            onToggle(item);
+          }
+        "
+        class="tree-node focus:ring-grass8 my-0.5 flex items-center rounded px-2 py-1 outline-none focus:ring-2"
       >
-        <slot name="node" v-bind="item">
-          <IconifyIcon
-            class="size-4"
-            v-if="showIcon && get(item.value, iconField)"
-            :icon="get(item.value, iconField)"
-          />
-          {{ get(item.value, labelField) }}
-        </slot>
-      </div>
-    </TreeItem>
+        <ChevronRight
+          v-if="item.hasChildren"
+          class="size-4 cursor-pointer transition"
+          :class="{ 'rotate-90': isExpanded }"
+          @click.stop="
+            () => {
+              handleToggle();
+              onToggle(item);
+            }
+          "
+        />
+        <div v-else class="h-4 w-4">
+          <!-- <IconifyIcon v-if="item.value.icon" :icon="item.value.icon" /> -->
+        </div>
+        <Checkbox
+          v-if="multiple"
+          :checked="isSelected"
+          :indeterminate="isIndeterminate"
+          @click="
+            () => {
+              handleSelect();
+              // onSelect(item, !isSelected);
+            }
+          "
+        />
+        <div
+          class="flex items-center gap-1 pl-2"
+          @click="
+            (_event) => {
+              // $event.stopPropagation();
+              // $event.preventDefault();
+              handleSelect();
+              // onSelect(item, !isSelected);
+            }
+          "
+        >
+          <slot name="node" v-bind="item">
+            <IconifyIcon
+              class="size-4"
+              v-if="showIcon && get(item.value, iconField)"
+              :icon="get(item.value, iconField)"
+            />
+            {{ get(item.value, labelField) }}
+          </slot>
+        </div>
+      </TreeItem>
+    </TransitionGroup>
     <div class="w-full" v-if="$slots.footer">
       <slot name="footer"> </slot>
     </div>
   </TreeRoot>
 </template>
+<style lang="scss" scoped>
+.container {
+  position: relative;
+  padding: 0;
+  list-style-type: none;
+}
+
+.item {
+  box-sizing: border-box;
+  width: 100%;
+  height: 30px;
+  background-color: #f3f3f3;
+  border: 1px solid #666;
+}
+
+/* 1. 声明过渡效果 */
+.fade-move,
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
+}
+
+/* 2. 声明进入和离开的状态 */
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: scaleY(0.01) translate(30px, 0);
+}
+
+/* 3. 确保离开的项目被移除出了布局流
+      以便正确地计算移动时的动画效果。 */
+.fade-leave-active {
+  position: absolute;
+}
+</style>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/tree/types.ts b/packages/@core/ui-kit/shadcn-ui/src/ui/tree/types.ts
new file mode 100644
index 00000000..cb4e82da
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/tree/types.ts
@@ -0,0 +1,42 @@
+import type { Arrayable } from '@vueuse/core';
+import type { FlattenedItem } from 'radix-vue';
+
+import type { Recordable } from '@vben-core/typings';
+
+export interface TreeProps {
+  /** 单选时允许取消已有选项 */
+  allowClear?: boolean;
+  /** 非关联选择时，自动选中上级节点 */
+  autoCheckParent?: boolean;
+  /** 显示边框 */
+  bordered?: boolean;
+  /** 取消父子关联选择 */
+  checkStrictly?: boolean;
+  /** 子级字段名 */
+  childrenField?: string;
+  /** 默认展开的键 */
+  defaultExpandedKeys?: Array<number | string>;
+  /** 默认展开的级别（优先级高于defaultExpandedKeys） */
+  defaultExpandedLevel?: number;
+  /** 默认值 */
+  defaultValue?: Arrayable<number | string>;
+  /** 禁用 */
+  disabled?: boolean;
+  /** 自定义节点类名 */
+  getNodeClass?: (item: FlattenedItem<Recordable<any>>) => string;
+  iconField?: string;
+  /** label字段 */
+  labelField?: string;
+  /** 当前值 */
+  modelValue?: Arrayable<number | string>;
+  /** 是否多选 */
+  multiple?: boolean;
+  /** 显示由iconField指定的图标 */
+  showIcon?: boolean;
+  /** 启用展开收缩动画 */
+  transition?: boolean;
+  /** 树数据 */
+  treeData: Recordable<any>[];
+  /** 值字段 */
+  valueField?: string;
+}
diff --git a/playground/src/views/system/role/modules/form.vue b/playground/src/views/system/role/modules/form.vue
index 1b6d00e8..cae54a1c 100644
--- a/playground/src/views/system/role/modules/form.vue
+++ b/playground/src/views/system/role/modules/form.vue
@@ -98,7 +98,7 @@ function getNodeClass(node: Recordable<any>) {
   <Drawer :title="getDrawerTitle">
     <Form>
       <template #permissions="slotProps">
-        <Spin :spinning="loadingPermissions">
+        <Spin :spinning="loadingPermissions" wrapper-class-name="w-full">
           <VbenTree
             :tree-data="permissions"
             multiple

From a77bb8e68d14a6eadcff0557404a874428f13752 Mon Sep 17 00:00:00 2001
From: Netfan <netfan@foxmail.com>
Date: Thu, 27 Mar 2025 15:13:13 +0800
Subject: [PATCH 2/3] perf: improve component packaging to enable instance
 method retrieval (#5795)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

改进组件适配器里的包装函数，使得组件暴露的方法可以透传
---
 apps/web-antd/src/adapter/component/index.ts  | 71 +++++++------------
 apps/web-ele/src/adapter/component/index.ts   | 69 +++++++-----------
 apps/web-naive/src/adapter/component/index.ts | 62 ++++++----------
 playground/src/adapter/component/index.ts     | 71 +++++++------------
 4 files changed, 97 insertions(+), 176 deletions(-)

diff --git a/apps/web-antd/src/adapter/component/index.ts b/apps/web-antd/src/adapter/component/index.ts
index f382880a..7ae93072 100644
--- a/apps/web-antd/src/adapter/component/index.ts
+++ b/apps/web-antd/src/adapter/component/index.ts
@@ -41,6 +41,7 @@ import {
 const withDefaultPlaceholder = <T extends Component>(
   component: T,
   type: 'input' | 'select',
+  componentProps: Recordable<any> = {},
 ) => {
   return defineComponent({
     inheritAttrs: false,
@@ -63,7 +64,11 @@ const withDefaultPlaceholder = <T extends Component>(
         }
       });
       return () =>
-        h(component, { ...props, ...attrs, placeholder, ref: innerRef }, slots);
+        h(
+          component,
+          { ...componentProps, placeholder, ...props, ...attrs, ref: innerRef },
+          slots,
+        );
     },
   });
 };
@@ -102,38 +107,20 @@ async function initComponentAdapter() {
     // 如果你的组件体积比较大，可以使用异步加载
     // Button: () =>
     // import('xxx').then((res) => res.Button),
-    ApiSelect: (props, { attrs, slots }) => {
-      return h(
-        ApiComponent,
-        {
-          placeholder: $t('ui.placeholder.select'),
-          ...props,
-          ...attrs,
-          component: Select,
-          loadingSlot: 'suffixIcon',
-          visibleEvent: 'onDropdownVisibleChange',
-          modelPropName: 'value',
-        },
-        slots,
-      );
-    },
-    ApiTreeSelect: (props, { attrs, slots }) => {
-      return h(
-        ApiComponent,
-        {
-          placeholder: $t('ui.placeholder.select'),
-          ...props,
-          ...attrs,
-          component: TreeSelect,
-          fieldNames: { label: 'label', value: 'value', children: 'children' },
-          loadingSlot: 'suffixIcon',
-          modelPropName: 'value',
-          optionsPropName: 'treeData',
-          visibleEvent: 'onVisibleChange',
-        },
-        slots,
-      );
-    },
+    ApiSelect: withDefaultPlaceholder(ApiComponent, 'select', {
+      component: Select,
+      loadingSlot: 'suffixIcon',
+      visibleEvent: 'onDropdownVisibleChange',
+      modelPropName: 'value',
+    }),
+    ApiTreeSelect: withDefaultPlaceholder(ApiComponent, 'select', {
+      component: TreeSelect,
+      fieldNames: { label: 'label', value: 'value', children: 'children' },
+      loadingSlot: 'suffixIcon',
+      modelPropName: 'value',
+      optionsPropName: 'treeData',
+      visibleEvent: 'onVisibleChange',
+    }),
     AutoComplete,
     Checkbox,
     CheckboxGroup,
@@ -143,19 +130,11 @@ async function initComponentAdapter() {
       return h(Button, { ...props, attrs, type: 'default' }, slots);
     },
     Divider,
-    IconPicker: (props, { attrs, slots }) => {
-      return h(
-        IconPicker,
-        {
-          iconSlot: 'addonAfter',
-          inputComponent: Input,
-          modelValueProp: 'value',
-          ...props,
-          ...attrs,
-        },
-        slots,
-      );
-    },
+    IconPicker: withDefaultPlaceholder(IconPicker, 'select', {
+      iconSlot: 'addonAfter',
+      inputComponent: Input,
+      modelValueProp: 'value',
+    }),
     Input: withDefaultPlaceholder(Input, 'input'),
     InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
     InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
diff --git a/apps/web-ele/src/adapter/component/index.ts b/apps/web-ele/src/adapter/component/index.ts
index 5de86aa5..5de17b75 100644
--- a/apps/web-ele/src/adapter/component/index.ts
+++ b/apps/web-ele/src/adapter/component/index.ts
@@ -37,6 +37,7 @@ import {
 const withDefaultPlaceholder = <T extends Component>(
   component: T,
   type: 'input' | 'select',
+  componentProps: Recordable<any> = {},
 ) => {
   return defineComponent({
     inheritAttrs: false,
@@ -59,7 +60,11 @@ const withDefaultPlaceholder = <T extends Component>(
         }
       });
       return () =>
-        h(component, { ...props, ...attrs, placeholder, ref: innerRef }, slots);
+        h(
+          component,
+          { ...componentProps, placeholder, ...props, ...attrs, ref: innerRef },
+          slots,
+        );
     },
   });
 };
@@ -89,37 +94,19 @@ async function initComponentAdapter() {
     // 如果你的组件体积比较大，可以使用异步加载
     // Button: () =>
     // import('xxx').then((res) => res.Button),
-    ApiSelect: (props, { attrs, slots }) => {
-      return h(
-        ApiComponent,
-        {
-          placeholder: $t('ui.placeholder.select'),
-          ...props,
-          ...attrs,
-          component: ElSelectV2,
-          loadingSlot: 'loading',
-          visibleEvent: 'onVisibleChange',
-        },
-        slots,
-      );
-    },
-    ApiTreeSelect: (props, { attrs, slots }) => {
-      return h(
-        ApiComponent,
-        {
-          placeholder: $t('ui.placeholder.select'),
-          ...props,
-          ...attrs,
-          component: ElTreeSelect,
-          props: { label: 'label', children: 'children' },
-          nodeKey: 'value',
-          loadingSlot: 'loading',
-          optionsPropName: 'data',
-          visibleEvent: 'onVisibleChange',
-        },
-        slots,
-      );
-    },
+    ApiSelect: withDefaultPlaceholder(ApiComponent, 'select', {
+      component: ElSelectV2,
+      loadingSlot: 'loading',
+      visibleEvent: 'onVisibleChange',
+    }),
+    ApiTreeSelect: withDefaultPlaceholder(ApiComponent, 'select', {
+      component: ElTreeSelect,
+      props: { label: 'label', children: 'children' },
+      nodeKey: 'value',
+      loadingSlot: 'loading',
+      optionsPropName: 'data',
+      visibleEvent: 'onVisibleChange',
+    }),
     Checkbox: ElCheckbox,
     CheckboxGroup: (props, { attrs, slots }) => {
       let defaultSlot;
@@ -149,19 +136,11 @@ async function initComponentAdapter() {
       return h(ElButton, { ...props, attrs, type: 'primary' }, slots);
     },
     Divider: ElDivider,
-    IconPicker: (props, { attrs, slots }) => {
-      return h(
-        IconPicker,
-        {
-          iconSlot: 'append',
-          modelValueProp: 'model-value',
-          inputComponent: ElInput,
-          ...props,
-          ...attrs,
-        },
-        slots,
-      );
-    },
+    IconPicker: withDefaultPlaceholder(IconPicker, 'select', {
+      iconSlot: 'append',
+      modelValueProp: 'model-value',
+      inputComponent: ElInput,
+    }),
     Input: withDefaultPlaceholder(ElInput, 'input'),
     InputNumber: withDefaultPlaceholder(ElInputNumber, 'input'),
     RadioGroup: (props, { attrs, slots }) => {
diff --git a/apps/web-naive/src/adapter/component/index.ts b/apps/web-naive/src/adapter/component/index.ts
index 83430d8c..b7aa9d85 100644
--- a/apps/web-naive/src/adapter/component/index.ts
+++ b/apps/web-naive/src/adapter/component/index.ts
@@ -37,6 +37,7 @@ import { message } from '#/adapter/naive';
 const withDefaultPlaceholder = <T extends Component>(
   component: T,
   type: 'input' | 'select',
+  componentProps: Recordable<any> = {},
 ) => {
   return defineComponent({
     inheritAttrs: false,
@@ -59,7 +60,11 @@ const withDefaultPlaceholder = <T extends Component>(
         }
       });
       return () =>
-        h(component, { ...props, ...attrs, placeholder, ref: innerRef }, slots);
+        h(
+          component,
+          { ...componentProps, placeholder, ...props, ...attrs, ref: innerRef },
+          slots,
+        );
     },
   });
 };
@@ -90,37 +95,19 @@ async function initComponentAdapter() {
     // Button: () =>
     // import('xxx').then((res) => res.Button),
 
-    ApiSelect: (props, { attrs, slots }) => {
-      return h(
-        ApiComponent,
-        {
-          placeholder: $t('ui.placeholder.select'),
-          ...props,
-          ...attrs,
-          component: NSelect,
-          modelPropName: 'value',
-        },
-        slots,
-      );
-    },
-    ApiTreeSelect: (props, { attrs, slots }) => {
-      return h(
-        ApiComponent,
-        {
-          placeholder: $t('ui.placeholder.select'),
-          ...props,
-          ...attrs,
-          component: NTreeSelect,
-          nodeKey: 'value',
-          loadingSlot: 'arrow',
-          keyField: 'value',
-          modelPropName: 'value',
-          optionsPropName: 'options',
-          visibleEvent: 'onVisibleChange',
-        },
-        slots,
-      );
-    },
+    ApiSelect: withDefaultPlaceholder(ApiComponent, 'select', {
+      component: NSelect,
+      modelPropName: 'value',
+    }),
+    ApiTreeSelect: withDefaultPlaceholder(ApiComponent, 'select', {
+      component: NTreeSelect,
+      nodeKey: 'value',
+      loadingSlot: 'arrow',
+      keyField: 'value',
+      modelPropName: 'value',
+      optionsPropName: 'options',
+      visibleEvent: 'onVisibleChange',
+    }),
     Checkbox: NCheckbox,
     CheckboxGroup: (props, { attrs, slots }) => {
       let defaultSlot;
@@ -148,13 +135,10 @@ async function initComponentAdapter() {
       return h(NButton, { ...props, attrs, type: 'primary' }, slots);
     },
     Divider: NDivider,
-    IconPicker: (props, { attrs, slots }) => {
-      return h(
-        IconPicker,
-        { iconSlot: 'suffix', inputComponent: NInput, ...props, ...attrs },
-        slots,
-      );
-    },
+    IconPicker: withDefaultPlaceholder(IconPicker, 'select', {
+      iconSlot: 'suffix',
+      inputComponent: NInput,
+    }),
     Input: withDefaultPlaceholder(NInput, 'input'),
     InputNumber: withDefaultPlaceholder(NInputNumber, 'input'),
     RadioGroup: (props, { attrs, slots }) => {
diff --git a/playground/src/adapter/component/index.ts b/playground/src/adapter/component/index.ts
index 6a2dc750..9b847dfc 100644
--- a/playground/src/adapter/component/index.ts
+++ b/playground/src/adapter/component/index.ts
@@ -41,6 +41,7 @@ import {
 const withDefaultPlaceholder = <T extends Component>(
   component: T,
   type: 'input' | 'select',
+  componentProps: Recordable<any> = {},
 ) => {
   return defineComponent({
     inheritAttrs: false,
@@ -63,7 +64,11 @@ const withDefaultPlaceholder = <T extends Component>(
         }
       });
       return () =>
-        h(component, { ...props, ...attrs, placeholder, ref: innerRef }, slots);
+        h(
+          component,
+          { ...componentProps, placeholder, ...props, ...attrs, ref: innerRef },
+          slots,
+        );
     },
   });
 };
@@ -103,38 +108,20 @@ async function initComponentAdapter() {
     // Button: () =>
     // import('xxx').then((res) => res.Button),
 
-    ApiSelect: (props, { attrs, slots }) => {
-      return h(
-        ApiComponent,
-        {
-          placeholder: $t('ui.placeholder.select'),
-          ...props,
-          ...attrs,
-          component: Select,
-          loadingSlot: 'suffixIcon',
-          modelPropName: 'value',
-          visibleEvent: 'onVisibleChange',
-        },
-        slots,
-      );
-    },
-    ApiTreeSelect: (props, { attrs, slots }) => {
-      return h(
-        ApiComponent,
-        {
-          placeholder: $t('ui.placeholder.select'),
-          ...props,
-          ...attrs,
-          component: TreeSelect,
-          fieldNames: { label: 'label', value: 'value', children: 'children' },
-          loadingSlot: 'suffixIcon',
-          modelPropName: 'value',
-          optionsPropName: 'treeData',
-          visibleEvent: 'onVisibleChange',
-        },
-        slots,
-      );
-    },
+    ApiSelect: withDefaultPlaceholder(ApiComponent, 'select', {
+      component: Select,
+      loadingSlot: 'suffixIcon',
+      modelPropName: 'value',
+      visibleEvent: 'onVisibleChange',
+    }),
+    ApiTreeSelect: withDefaultPlaceholder(ApiComponent, 'select', {
+      component: TreeSelect,
+      fieldNames: { label: 'label', value: 'value', children: 'children' },
+      loadingSlot: 'suffixIcon',
+      modelPropName: 'value',
+      optionsPropName: 'treeData',
+      visibleEvent: 'onVisibleChange',
+    }),
     AutoComplete,
     Checkbox,
     CheckboxGroup,
@@ -144,19 +131,11 @@ async function initComponentAdapter() {
       return h(Button, { ...props, attrs, type: 'default' }, slots);
     },
     Divider,
-    IconPicker: (props, { attrs, slots }) => {
-      return h(
-        IconPicker,
-        {
-          iconSlot: 'addonAfter',
-          inputComponent: Input,
-          modelValueProp: 'value',
-          ...props,
-          ...attrs,
-        },
-        slots,
-      );
-    },
+    IconPicker: withDefaultPlaceholder(IconPicker, 'select', {
+      iconSlot: 'addonAfter',
+      inputComponent: Input,
+      modelValueProp: 'value',
+    }),
     Input: withDefaultPlaceholder(Input, 'input'),
     InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
     InputPassword: withDefaultPlaceholder(InputPassword, 'input'),

From 3c2d325d8cb04fa309ca010881e275b9bc8d534f Mon Sep 17 00:00:00 2001
From: Netfan <netfan@foxmail.com>
Date: Thu, 27 Mar 2025 15:51:11 +0800
Subject: [PATCH 3/3] perf: improve api-component for using in form (#5796)

---
 .../api-component/api-component.vue           | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/effects/common-ui/src/components/api-component/api-component.vue b/packages/effects/common-ui/src/components/api-component/api-component.vue
index c871fe20..f4f6acd5 100644
--- a/packages/effects/common-ui/src/components/api-component/api-component.vue
+++ b/packages/effects/common-ui/src/components/api-component/api-component.vue
@@ -84,7 +84,7 @@ const emit = defineEmits<{
 const modelValue = defineModel({ default: '' });
 
 const attrs = useAttrs();
-
+const innerParams = ref({});
 const refOptions = ref<OptionsItem[]>([]);
 const loading = ref(false);
 // 首次是否加载过了
@@ -175,8 +175,15 @@ async function handleFetchForVisible(visible: boolean) {
   }
 }
 
+const params = computed(() => {
+  return {
+    ...props.params,
+    ...unref(innerParams),
+  };
+});
+
 watch(
-  () => props.params,
+  params,
   (value, oldValue) => {
     if (isEqual(value, oldValue)) {
       return;
@@ -189,12 +196,22 @@ watch(
 function emitChange() {
   emit('optionsChange', unref(getOptions));
 }
+const componentRef = ref();
+defineExpose({
+  /** 获取被包装的组件实例 */
+  getComponentRef: <T = any,>() => componentRef.value as T,
+  /** 更新Api参数 */
+  updateParam(newParams: Record<string, any>) {
+    innerParams.value = newParams;
+  },
+});
 </script>
 <template>
   <component
     :is="component"
     v-bind="bindProps"
     :placeholder="$attrs.placeholder"
+    ref="componentRef"
   >
     <template v-for="item in Object.keys($slots)" #[item]="data">
       <slot :name="item" v-bind="data || {}"></slot>