plain-design 1.0.0-beta.107 → 1.0.0-beta.109

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.107",
+  "version": "1.0.0-beta.109",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",
@@ -19,7 +19,7 @@
   "author": "",
   "license": "ISC",
   "peerDependencies": {
-    "@peryl/react-compose": "0.0.197",
+    "@peryl/react-compose": "0.0.201",
     "exceljs": "^4.2.1",
     "file-saver": "^2.0.5",
     "react": "^18.0.1",
@@ -45,7 +45,7 @@
     "@babel/preset-env": "7.23.7",
     "@babel/preset-react": "7.23.3",
     "@babel/preset-typescript": "7.23.3",
-    "@peryl/react-compose": "0.0.197",
+    "@peryl/react-compose": "0.0.201",
     "@types/classnames": "^2.2.11",
     "@types/react": "18.2.4",
     "@types/react-dom": "18.2.4",

package/src/packages/components/AddressCascade/createAddressCascade.multiple.tsx

@@ -1,16 +1,15 @@
 import {iAddressCascadeCompositionParam} from "./address-cascade.utils";
-import {createEffects} from "@peryl/utils/createEffects";
 import Cascade from "../Cascade";
 import {useMultipleModel} from "../../uses/useMultipleModel";
-import {reactive, watch} from "@peryl/react-compose";
+import {createEffectsOfReaction, reactive} from "@peryl/react-compose";
 import {iAddressLazyMeta} from "../$address/address.utils";
 
 export function createAddressCascadeMultiple(
   { props, event: { emit }, service, hooks, filterData }: iAddressCascadeCompositionParam,
 ) {
-  const model = useMultipleModel(() => props.modelValue, emit.onUpdateModelValue, props);
+  const { effects, effectWatch } = createEffectsOfReaction();
 
-  const { effects } = createEffects();
+  const model = useMultipleModel(() => props.modelValue, emit.onUpdateModelValue, props, undefined, effects);
 
   const state = reactive({
     modelMetas: [] as iAddressLazyMeta[],
@@ -23,7 +22,7 @@ export function createAddressCascadeMultiple(
     },
   };
 
-  effects.push(watch(() => model.value as string[] | null | undefined, async (value, oldValue) => {
+  effectWatch(() => model.value as string[] | null | undefined, async (value, oldValue) => {
     if (!!value && !!oldValue && value.length == oldValue.length && value.every(i => oldValue.indexOf(i) > -1)) {
       return;
     }
@@ -31,7 +30,7 @@ export function createAddressCascadeMultiple(
     const newMetas = !value ? [] : await service.getAddressByCodes(value as string[]);
     if (newMetas.length === 0 && state.modelMetas.length === 0) {return;}
     state.modelMetas = newMetas;
-  }, { immediate: true }));
+  }, { immediate: true });
 
   effects.push(hooks.onRender.use({
     processor: ({ list, render }) => {list.push({ render, key: '1', seq: 1 });},

package/src/packages/components/AddressCascade/createAddressCascade.single.tsx

@@ -1,8 +1,7 @@
 import {AddressCascadeType2map, iAddressCascadeCompositionParam} from "./address-cascade.utils";
-import {computed, useModel} from "@peryl/react-compose";
+import {createEffectsOfReaction, useModel} from "@peryl/react-compose";
 import {iAddressSyncMeta} from "../$address/address.utils";
 import Cascade from "../Cascade";
-import {createEffects} from "@peryl/utils/createEffects";
 
 export function createAddressCascadeSingle(
   {
@@ -10,15 +9,15 @@ export function createAddressCascadeSingle(
   }: iAddressCascadeCompositionParam
 ) {
 
-  const { effects } = createEffects();
+  const { effects, effectComputed } = createEffectsOfReaction();
 
   const model = {
-    province: useModel(() => props.province, emit.onUpdateProvince),
-    city: useModel(() => props.city, emit.onUpdateCity),
-    district: useModel(() => props.district, emit.onUpdateDistrict),
+    province: useModel(() => props.province, emit.onUpdateProvince, undefined, effects),
+    city: useModel(() => props.city, emit.onUpdateCity, undefined, effects),
+    district: useModel(() => props.district, emit.onUpdateDistrict, undefined, effects),
   };
 
-  const metaArray = computed((): iAddressSyncMeta[] | null => {
+  const metaArray = effectComputed((): iAddressSyncMeta[] | null => {
     if (!filterData.value) {
       return null;
     }

package/src/packages/components/Application/utils/application.utils.ts

@@ -1,6 +1,7 @@
 import {ComputedRef, createRenderHook, inject, provide} from "@peryl/react-compose";
 import {iThemeConfiguration} from "../theme/theme";
 import {UseStyleProvideData} from "../../../uses/useStyle";
+import {createEffects} from "@peryl/utils/createEffects";
 
 export interface iApplicationConfiguration {
   theme: iThemeConfiguration;
@@ -17,6 +18,4 @@ export const ApplicationConfigurationProvider = (() => {
 
 export const APPLICATION_SERVICE_CONTAINER_CLASS = 'application-service-container';
 
-export const ApplicationHooks = {
-  onRender: createRenderHook(),
-};
+export const ApplicationHooks = { onRender: createRenderHook({ effects: createEffects().effects }), };

package/src/packages/components/Badge/badge.scss

@@ -19,6 +19,10 @@
       background-color: $color-6;
       border-radius: 100px;
       color: plv(pbfc);
+      z-index: 2;
+      span {
+        transform: scale(0.8);
+      }
     }
 
     &.badge-content-top {

package/src/packages/components/Cascade/createMultipleCascadeRender.tsx

@@ -1,5 +1,4 @@
-import {createEffects} from "@peryl/utils/createEffects";
-import {computed, mergeAttrs, nextTick, reactive, useRefs} from "@peryl/react-compose";
+import {createEffectsOfReaction, mergeAttrs, nextTick, reactive, useRefs} from "@peryl/react-compose";
 import {Tree} from "../Tree";
 import {iCascadeCompositionParam} from "./cascade.utils";
 import {Input} from "../Input";
@@ -24,7 +23,7 @@ export function createMultipleCascadeRender(
     cascadeProps,
     styleComputed,
   }: iCascadeCompositionParam) {
-  const { effects } = createEffects();
+  const { effects, effectComputed } = createEffectsOfReaction();
 
   const { refs, onRef } = useRefs({
     tree: Tree,
@@ -36,7 +35,7 @@ export function createMultipleCascadeRender(
    * @author  韦胜健
    * @date    2022/10/24 20:27
    */
-  const label = computed(() => {
+  const label = effectComputed(() => {
     if (model.value == null || model.value.length === 0) {return null;}
     return (model.value as PlainObject[]).map(i => utils.getLabel.value(i));
   });

package/src/packages/components/Cascade/createSingleCascadeRender.tsx

@@ -1,5 +1,4 @@
-import {createEffects} from "@peryl/utils/createEffects";
-import {computed, mergeAttrs, nextTick, reactive, useRefs} from "@peryl/react-compose";
+import {createEffectsOfReaction, mergeAttrs, nextTick, reactive, useRefs} from "@peryl/react-compose";
 import {Tree} from "../Tree";
 import {iCascadeCompositionParam} from "./cascade.utils";
 import {Input} from "../Input";
@@ -30,12 +29,14 @@ export function createSingleCascadeRender(
     styleComputed,
   }: iCascadeCompositionParam) {
 
+  const { effects, effectComputed } = createEffectsOfReaction();
+
   /**
    * input输入框显示值
    * @author  韦胜健
    * @date    2022/10/24 20:29
    */
-  const label = computed(() => {
+  const label = effectComputed(() => {
     if (model.value == null) {return null;}
     if (props.multiple) {return; }
     return Array.isArray(model.value) ? (model.value as PlainObject[]).map(i => utils.getLabel.value(i)).join('/') : utils.getLabel.value(model.value as PlainObject);
@@ -48,8 +49,6 @@ export function createSingleCascadeRender(
     inputValue: label.value as null | string,
   });
 
-  const { effects } = createEffects();
-
   const { refs, onRef } = useRefs({
     tree: Tree,
     plcTree: PlcTree,

package/src/packages/components/DatePicker/createDateRender.multiple.tsx

@@ -1,4 +1,4 @@
-import {computed, getComponentCls, reactive, useRefs} from "@peryl/react-compose";
+import {createEffectsOfReaction, getComponentCls, reactive, useRefs} from "@peryl/react-compose";
 import Input from "../Input";
 import {delay} from "@peryl/utils/delay";
 import {PDate, plainDate} from "../../utils/plainDate";
@@ -7,7 +7,6 @@ import {limitDatetimeTimePlainData} from "../TimePicker/time.utils";
 import {tDateCompositionPublicParams} from "./date.utils";
 import {useRenderReference} from "../../uses/useRenderReference";
 import {useMultipleModel} from "../../uses/useMultipleModel";
-import {createEffects} from "@peryl/utils/createEffects";
 import {createPopupEditor} from "../usePopupEditor";
 
 /**
@@ -16,13 +15,14 @@ import {createPopupEditor} from "../usePopupEditor";
  * @date    2022.7.4 14:05
  */
 export function createDateRenderMultiple({ props, emit, formatString, getPublicPopperAttrs, editComputed, getInheritPublicDateAttrs, slots, displayPattern, today, hooks, maxmin, }: tDateCompositionPublicParams) {
-  const { effects } = createEffects();
+  const { effects, effectComputed } = createEffectsOfReaction();
   const { refs, onRef } = useRefs({ input: Input });
   const { getReference, renderReference } = useRenderReference();
 
+  const format = effectComputed((): null | PDate[] => !model.value ? [] : model.value.map?.(i => plainDate(i, formatString.value)));
+
   const getFormatValue = () => format.value?.map(i => i.getDisplay());
-  const model = useMultipleModel(() => (props.modelValue as string[] | undefined), emit.onUpdateModelValue, props, { onChange: () => delay().then(() => state.input = getFormatValue()) });
-  const format = computed((): null | PDate[] => !model.value ? [] : model.value.map?.(i => plainDate(i, formatString.value)));
+  const model = useMultipleModel(() => (props.modelValue as string[] | undefined), emit.onUpdateModelValue, props, { onChange: () => delay().then(() => state.input = getFormatValue()) }, effects);
   const state = reactive({ input: getFormatValue() });
 
   const popper = createPopupEditor({

package/src/packages/components/DatePicker/createDateRender.single.tsx

@@ -3,7 +3,7 @@
  * @author  韦胜健
  * @date    2022.7.4 14:04
  */
-import {computed, getComponentCls, reactive, useModel, useRefs} from "@peryl/react-compose";
+import {createEffectsOfReaction, getComponentCls, reactive, useModel, useRefs} from "@peryl/react-compose";
 import {tDateCompositionPublicParams} from "./date.utils";
 import Input from "../Input";
 import {delay} from "@peryl/utils/delay";
@@ -11,15 +11,16 @@ import {PDate, plainDate} from "../../utils/plainDate";
 import {DatePanel} from "./panel/DatePanel";
 import {limitDatetimeTimePlainData} from "../TimePicker/time.utils";
 import {useRenderReference} from "../../uses/useRenderReference";
-import {createEffects} from "@peryl/utils/createEffects";
 import {createPopupEditor} from "../usePopupEditor";
 
 export function createDateRenderSingle({ props, emit, slots, hooks, formatString, getPublicPopperAttrs, editComputed, getInheritPublicDateAttrs, displayPattern, today, maxmin }: tDateCompositionPublicParams) {
 
-  const { effects } = createEffects();
+  const { effects, effectComputed } = createEffectsOfReaction();
   const { refs, onRef } = useRefs({ input: Input });
-  const model = useModel(() => props.modelValue, emit.onUpdateModelValue, { onChange: () => delay().then(() => state.input = format.value?.getDisplay()) });
-  const format = computed((): null | PDate => !model.value ? null : plainDate(model.value as string, formatString.value));
+
+  const format = effectComputed((): null | PDate => !model.value ? null : plainDate(model.value as string, formatString.value));
+
+  const model = useModel(() => props.modelValue, emit.onUpdateModelValue, { onChange: () => delay().then(() => state.input = format.value?.getDisplay()) }, effects);
   const state = reactive({ input: format.value?.getDisplay() });
   const reference = useRenderReference();
 

package/src/packages/components/DatePicker/index.tsx

@@ -18,10 +18,12 @@ import {createDateRenderSingle} from "./createDateRender.single";
 import {plainDate} from "../../utils/plainDate";
 import {createPopupAttrsGetter} from "../usePopup/utils/createPopperAttrsGetter";
 import {useParentPopupId} from "../usePopup/utils/popup.utils";
+import Input from "../Input";
 
 export const DatePicker = designComponent({
   name: '-date-picker',
   props: DatePropsOptions,
+  inheritPropsType: Input,
   expose: {
     DatePanel,
     DatePanelDate,

package/src/packages/components/DatePicker/useRangeDateRender.tsx

@@ -1,13 +1,12 @@
 import {eDateEmitRangeType, tDateCompositionPublicParams} from "./date.utils";
 import {TimeRangePanelType} from "../TimePicker/panel/TimeRangePanel";
-import {computed, getComponentCls, iHTMLInputElement, nextTick, reactive, useModel, useRefs} from "@peryl/react-compose";
+import {createEffectsOfReaction, getComponentCls, iHTMLInputElement, nextTick, reactive, useModel, useRefs} from "@peryl/react-compose";
 import Input from "../Input";
 import {delay} from "@peryl/utils/delay";
 import {useFocusHandler} from "../../uses/useFocusHandler";
 import {PDate, plainDate} from "../../utils/plainDate";
 import {limitDatetimeTimePlainData} from "../TimePicker/time.utils";
 import {useRenderReference} from "../../uses/useRenderReference";
-import {createEffects} from "@peryl/utils/createEffects";
 import {iPopupEditor} from "../usePopupEditor";
 
 export function useRangeDateRender(
@@ -29,11 +28,11 @@ export function useRangeDateRender(
     getStartPopper?: () => iPopupEditor,
     getEndPopper?: () => iPopupEditor,
   }) {
-  const { effects } = createEffects();
+  const { effects, effectComputed } = createEffectsOfReaction();
   const { refs, onRef } = useRefs({ input: Input, start: iHTMLInputElement, end: iHTMLInputElement, });
   const reference = useRenderReference();
-  const startModel = useModel(() => props.start, emit.onUpdateStart, { onChange: () => delay().then(() => state.input.start = format.value.start?.getDisplay()) });
-  const endModel = useModel(() => props.end, emit.onUpdateEnd, { onChange: () => delay().then(() => state.input.end = format.value.end?.getDisplay()) });
+  const startModel = useModel(() => props.start, emit.onUpdateStart, { onChange: () => delay().then(() => state.input.start = format.value.start?.getDisplay()) }, effects);
+  const endModel = useModel(() => props.end, emit.onUpdateEnd, { onChange: () => delay().then(() => state.input.end = format.value.end?.getDisplay()) }, effects);
 
   const { isFocus } = useFocusHandler({
     getEls: () => [refs.start, refs.end],
@@ -60,9 +59,10 @@ export function useRangeDateRender(
       onBlur();
     },
     onFocus: emit.onFocus,
+    effects,
   });
 
-  const format = computed((): { start: null | PDate, end: null | PDate } => ({
+  const format = effectComputed((): { start: null | PDate, end: null | PDate } => ({
     start: !startModel.value ? null : plainDate(startModel.value, formatString.value),
     end: !endModel.value ? null : plainDate(endModel.value, formatString.value),
   }));

package/src/packages/components/Form/validate/useFormItemValidation.tsx

@@ -1,8 +1,8 @@
 import {eFormValidateMode, eFormValidateTrigger, getRuleValue, iFormItemValidatePropsType, isRuleRequired, iValidateRule} from "./validate.utils";
-import {computed, inject, onBeforeUnmount, watch, watchEffect} from "@peryl/react-compose";
+import {createEffectsOfReaction, globalWatch, inject, onBeforeUnmount} from "@peryl/react-compose";
 import {FORM_VALIDATION_PROVIDER, useFormValidation} from "./useFormValidation";
 import {Validation} from "./createValidation";
-import {createEffects} from "@peryl/utils/createEffects";
+import {createEffects, iEffects} from "@peryl/utils/createEffects";
 
 /**
  * 抽离FormItem中的校验逻辑
@@ -11,6 +11,8 @@ import {createEffects} from "@peryl/utils/createEffects";
  */
 export function useFormItemValidation({ props }: { props: iFormItemValidatePropsType }) {
 
+  const { effects, effectComputed, effectWatchEffect } = createEffectsOfReaction();
+
   /*Form校验*/
   const formValidation = inject<ReturnType<typeof useFormValidation>>(FORM_VALIDATION_PROVIDER)!;
 
@@ -22,14 +24,14 @@ export function useFormItemValidation({ props }: { props: iFormItemValidateProps
    * @author  韦胜健
    * @date    2022.11.5 23:39
    */
-  const isRequired = computed(() => childValidation.getRules().some(rule => isRuleRequired(rule, formValidation.props.modelValue)));
+  const isRequired = effectComputed(() => childValidation.getRules().some(rule => isRuleRequired(rule, formValidation.props.modelValue)));
 
   /**
    * 当前的校验不通过的信息
    * @author  韦胜健
    * @date    2022/8/22 23:48
    */
-  const validateMessage = computed((): string | null => {
+  const validateMessage = effectComputed((): string | null => {
     if (!props.field && !props.validateValueGetter && !props.rules) {
       return null;
     }
@@ -53,7 +55,7 @@ export function useFormItemValidation({ props }: { props: iFormItemValidateProps
    * @author  韦胜健
    * @date    2022.11.6 0:00
    */
-  const getWatchData = (rule: iValidateRule) => {
+  const getValueByRule = (rule: iValidateRule): { label?: string | null, field?: string, value?: string } | null => {
     if (formValidation.props.validateMode === eFormValidateMode.table) {return null;}
     const { field, label, valueGetter } = rule;
     if (!rule.field && !rule.valueGetter) {return null;}
@@ -69,12 +71,9 @@ export function useFormItemValidation({ props }: { props: iFormItemValidateProps
    * @author  韦胜健
    * @date    2022.11.6 0:58
    */
-  const watchRuleValueChange = (getRule: () => iValidateRule | null) => {
-    const unwatch = watch(
-      () => {
-        const rule = getRule();
-        return !rule || rule.trigger === eFormValidateTrigger.blur ? null : getWatchData(rule);
-      },
+  const watchRuleValueChange = (rule: iValidateRule, effects: iEffects) => {
+    effects.push(globalWatch(
+      () => rule.trigger === eFormValidateTrigger.blur ? null : getValueByRule(rule),
       (newValue, oldValue) => {
         /*校验规则已经消失*/
         if (!newValue || (!newValue.field && !newValue.label)) {
@@ -94,28 +93,27 @@ export function useFormItemValidation({ props }: { props: iFormItemValidateProps
         }
         formValidation.handler.onFieldChange({ label: newValue.label, field: newValue.field });
       }
-    );
-    return () => unwatch();
+    ));
   };
 
-  (function validateOnChange() {
-    /*监听outerRule的值变化然后触发校验*/
-    onBeforeUnmount(watchRuleValueChange(() => childValidation.formItemRules.outerRule.value));
+  const { effects: innerEffects } = createEffects();
+  effects.push(() => innerEffects.clear());
+
+  effectWatchEffect(() => {
+    innerEffects.clear();
     [
+      childValidation.formItemRules.outerRule.value,
       /*监听props.rules的值变化然后触发校验*/
-      childValidation.formItemRules.formRules,
+      ...childValidation.formItemRules.formRules.value || [],
       /*监听form.rules的值变化然后触发校验*/
-      childValidation.formItemRules.propsRules
-    ].forEach((item) => {
-      /*当rule变化时，将上一次的watch注销，重新watch*/
-      const { effects } = createEffects();
-      watchEffect(() => {
-        effects.clear();
-        item.value?.forEach(rule => {effects.push(watchRuleValueChange(() => rule));});
-      });
-      onBeforeUnmount(() => effects.clear());
+      ...childValidation.formItemRules.propsRules.value || []
+    ].forEach(rule => {
+      /*当rule变化时，将上一次的watch注销，这里重新watch*/
+      !!rule && watchRuleValueChange(rule, innerEffects);
     });
-  })();
+  });
+
+  onBeforeUnmount(effects.clear);
 
   return { formValidation, childValidation, isRequired, validateMessage };
 }

package/src/packages/components/Input/useMultipleInput.tsx

@@ -2,7 +2,7 @@ import {AutoWidthInput} from "../AutoWidthInput";
 import {iInputCompositionData, inputScrollEnd} from "./input.utils";
 import Icon from "../Icon";
 import {iHTMLElement, useClasses, useModel, useRefs} from "@peryl/react-compose";
-import {getKeyNameByKeyboardEvent, eKeyboardKeys} from "@peryl/utils/keyboard";
+import {eKeyboardKeys, getKeyNameByKeyboardEvent} from "@peryl/utils/keyboard";
 import {delay} from "@peryl/utils/delay";
 import {createEffectiveHandler} from "../../utils/createEffectiveHandler";
 import {createEffects} from "@peryl/utils/createEffects";
@@ -15,9 +15,10 @@ import {useDragHorizontalScroll} from "../../uses/useDragHorizontalScroll";
  */
 export const useMultipleInput = createEffectiveHandler(({ hooks, props, model, refs, editComputed, emit, styleComputed }: iInputCompositionData) => {
 
-  const text = useModel(() => props.multipleText as any, emit.onUpdateMultipleText);
   const { effects } = createEffects();
 
+  const text = useModel(() => props.multipleText as any, emit.onUpdateMultipleText, undefined, effects);
+
   const { refs: innerRefs, onRef: innerOnRef } = useRefs({ container: iHTMLElement });
 
   const handler = {
@@ -92,7 +93,7 @@ export const useMultipleInput = createEffectiveHandler(({ hooks, props, model, r
     {
       'input-tag-container-wrap': props.tagsWrap,
     }
-  ]);
+  ], effects);
 
   effects.push(hooks.onRenderDefault.use(() => (
     <span className={classes.value} onMouseDown={handler.onMousedownContainer} ref={innerOnRef.container} data-input-el="container">

package/src/packages/components/Input/useSuggestionInput.tsx

@@ -1,5 +1,5 @@
 import {iInputCompositionData, inputScrollEnd} from "./input.utils";
-import {computed, iKeyboardEvent, reactive, useRefs} from "@peryl/react-compose";
+import {createEffectsOfReaction, iKeyboardEvent, reactive, useRefs} from "@peryl/react-compose";
 import {SelectPanel} from "../Select/SelectPanel";
 import {SelectOption} from "../SelectOption";
 import {Scroll} from "../Scroll";
@@ -7,13 +7,12 @@ import {createSelectHover, iSelectOptionProps} from "../Select/select.utils";
 import {decodeSelectRenderNode} from '../Select/decodeSelectRenderNode';
 import {delay} from '@peryl/utils/delay';
 import {handleKeyboard} from "@peryl/utils/keyboard";
-import {createEffects} from "@peryl/utils/createEffects";
 import {createPopupEditor} from "../usePopupEditor";
 
 export function useSuggestionInput({ props, hooks, editComputed, styleComputed, refs, model, parentPopupId }: iInputCompositionData) {
 
   /*记录副作用函数*/
-  const { effects } = createEffects();
+  const { effects, effectComputed } = createEffectsOfReaction();
 
   const { refs: innerRefs, onRef: innerOnRef } = useRefs({
     /*需要scroll引用，当有scroll的时候，每次关闭都需要滚动回顶部*/
@@ -30,7 +29,7 @@ export function useSuggestionInput({ props, hooks, editComputed, styleComputed,
   let matchOptionPropsList: iSelectOptionProps[] = [];
 
   /*自动补全的数据*/
-  const suggestion = computed((): string[] | undefined => typeof props.suggestion === "function" ? props.suggestion(state.searchText) : props.suggestion!);
+  const suggestion = effectComputed((): string[] | undefined => typeof props.suggestion === "function" ? props.suggestion(state.searchText) : props.suggestion!);
 
   /*管理select panel的hover状态*/
   const hover = createSelectHover({

package/src/packages/components/Input/useTextareaInput.tsx

@@ -37,8 +37,8 @@ export function useTextareaInput(data: iInputCompositionData) {
     'input-box input-fill input-textarea-container',
     {
       'input-textarea-has-height': !!state.height || !!props.height || !!props.maxHeight,
-    }
-  ]);
+    },
+  ], effects);
 
   const takeoverStyles = useStyles(style => {
     if (!!props.height || !!state.height) {
@@ -50,7 +50,7 @@ export function useTextareaInput(data: iInputCompositionData) {
     if (!!props.maxHeight) {
       style.maxHeight = unit(props.maxHeight);
     }
-  });
+  }, effects);
 
   effects.push(useTextareaResize({ ...data, onResize: (val) => state.height = val }));
 

package/src/packages/components/Input/uses/useInputEnterHandler.tsx

@@ -1,8 +1,9 @@
-import {reactive, watch} from "@peryl/react-compose";
+import {onBeforeUnmount, reactive, watch} from "@peryl/react-compose";
 import {doNothing} from "@peryl/utils/doNothing";
 import {throttle} from "@peryl/utils/throttle";
 import {iInputCompositionData} from "../input.utils";
 import {eKeyboardKeys, getKeyNameByKeyboardEvent} from "@peryl/utils/keyboard";
+import {createEffects} from "@peryl/utils/createEffects";
 
 /**
  * 自动监听input ref动作
@@ -51,7 +52,6 @@ export function useInputEnterHandler(
   }, { immediate: true });
 
   const handler = {
-    input: null as null | HTMLInputElement,
     onKeydown: (e: KeyboardEvent) => {
       emit.onKeydown(e);
       switch (getKeyNameByKeyboardEvent(e)) {
@@ -63,10 +63,14 @@ export function useInputEnterHandler(
     },
   };
 
+  const { effects } = createEffects();
+
   hooks.onRefInput.use(input => {
-    if (!!input) {input.removeEventListener('keydown', handler.onKeydown);}
-    handler.input = input;
-    if (!handler.input) {return;}
-    handler.input.addEventListener('keydown', handler.onKeydown);
+    effects.clear();
+    if (!input) {return;}
+    input.addEventListener('keydown', handler.onKeydown);
+    effects.push(() => {input.removeEventListener('keydown', handler.onKeydown);});
   });
+
+  onBeforeUnmount(() => effects.clear());
 }

package/src/packages/components/Object/createObjectRender.multiple.tsx

@@ -1,7 +1,6 @@
 import {iObjectCompositionParam, iObjectSelectOption} from "./object.utils";
-import {createEffects} from "@peryl/utils/createEffects";
 import {Select} from "../Select";
-import {computed, reactive, useModel, useRefs} from "@peryl/react-compose";
+import {createEffectsOfReaction, reactive, useModel, useRefs} from "@peryl/react-compose";
 import {PlainObject} from "@peryl/utils/event";
 import {delay} from "@peryl/utils/delay";
 import {SelectOption} from "../SelectOption";
@@ -16,7 +15,7 @@ import i18n from "../i18n";
 export function createObjectRenderMultiple(
   { props, hooks, classes, inputSlots, event, object, loading, loadData, editComputed }: iObjectCompositionParam
 ) {
-  const { effects } = createEffects();
+  const { effects, effectComputed } = createEffectsOfReaction();
 
   const model = useModel(() => props.modelValue as PlainObject[] | null | undefined, event.emit.onUpdateModelValue as any, {
     /**
@@ -32,7 +31,7 @@ export function createObjectRenderMultiple(
       await delay();
       selectHandler.reset();
     }
-  });
+  }, effects);
 
   const { refs, onRef } = useRefs({ select: Select });
 
@@ -110,7 +109,7 @@ export function createObjectRenderMultiple(
         publicHandler.onSelect(modelValue);
       },
     };
-    const inputAttrs = computed(() => {
+    const inputAttrs = effectComputed(() => {
       /*当前选中数据的显示值*/
       const label = props.modelValue;
       /*空值占位符，没有focus的时候就显示真实的placeholder，否则显示当前匹配option的label*/
@@ -224,10 +223,10 @@ export function createObjectRenderMultiple(
       },
     };
     /*监听popper的部分参数*/
-    const popperAttrs = computed(() => ({ ...handler, }));
+    const popperAttrs = effectComputed(() => ({ ...handler, }));
 
     /*给select传递的属性*/
-    const selectAttrs = computed(() => ({
+    const selectAttrs = effectComputed(() => ({
       ...checkHandler,
       modelValue: state.value,
       onUpdateModelValue: onSelectChange,
@@ -243,6 +242,7 @@ export function createObjectRenderMultiple(
       /*没有关键词的时候，提示输入关键词，已经有关键词并且没有选项的情况下提示placeholder*/
       noDataLabel: !inputHandler.state.multipleText && state.option == null ? (props.searchPlaceholder || i18n.$it('table.pleaseEnterSearchKey').d('请输入搜索关键词')) : undefined
     }));
+
     return { state, popperAttrs, onSelectChange, selectAttrs, reset };
 
   })();