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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.107",
+  "version": "1.0.0-beta.108",
   "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/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/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 };
 
   })();

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

@@ -1,7 +1,6 @@
 import {iObjectCompositionParam, iObjectSelectOption} from "./object.utils";
-import {createEffects} from "@peryl/utils/createEffects";
 import {Select} from "../Select";
-import {computed, reactive, useRefs, watch} from "@peryl/react-compose";
+import {createEffectsOfReaction, reactive, useRefs} from "@peryl/react-compose";
 import {convertRowToSelected, convertSelectedToRow} from "../$object/object.conver";
 import {PlainObject} from "@peryl/utils/event";
 import {SelectOption} from "../SelectOption";
@@ -15,7 +14,7 @@ import i18n from "../i18n";
 export function createObjectRenderSingle(
   { props, event, hooks, classes, inputSlots, object, loading, loadData, editComputed }: iObjectCompositionParam
 ) {
-  const { effects } = createEffects();
+  const { effects, effectComputed, effectWatch } = createEffectsOfReaction();
 
   const { refs, onRef } = useRefs({ select: Select });
 
@@ -82,7 +81,7 @@ export function createObjectRenderSingle(
         hooks.onInputChange.exec(val);
       },
     };
-    const inputAttrs = computed(() => {
+    const inputAttrs = effectComputed(() => {
       /*当前选中数据的显示值*/
       const label = props.modelValue;
       /*空值占位符，没有focus的时候就显示真实的placeholder，否则显示当前匹配option的label*/
@@ -98,6 +97,7 @@ export function createObjectRenderSingle(
         clearHandler: publicHandler.onClear
       });
     });
+
     return { state, inputAttrs };
   })();
 
@@ -109,7 +109,7 @@ export function createObjectRenderSingle(
   const selectHandler = (() => {
 
     /*将row转化为selected对象，用来辅助getSelectValue实现功能*/
-    const row2selected = computed(() => {return !props.row || !props.modelValue ? null : convertRowToSelected(props.row, props.map);});
+    const row2selected = effectComputed(() => {return !props.row || !props.modelValue ? null : convertRowToSelected(props.row, props.map);});
 
     /*获取当前select的modelValue以及要渲染的select options数组*/
     const getSelectValue = (): { value: any, option: null | iObjectSelectOption[] } => {
@@ -124,9 +124,7 @@ export function createObjectRenderSingle(
     const state = reactive(getSelectValue());
 
     /*当绑定值变化时，重新计算select的modelValue以及option数组*/
-    effects.push(
-      watch(() => props.modelValue, () => {Object.assign(state, getSelectValue());})
-    );
+    effectWatch(() => props.modelValue, () => {Object.assign(state, getSelectValue());});
 
     /**
      * 根据搜索关键词加载数据
@@ -147,16 +145,17 @@ export function createObjectRenderSingle(
       onClose: () => {Object.assign(state, getSelectValue());},
     };
     /*监听popper的部分参数*/
-    const popperAttrs = computed(() => ({
+    const popperAttrs = effectComputed(() => ({
       ...handler,
     }));
+
     /*监听select的选中选项动作*/
     const onSelectChange = (code: string | null) => {
       const selected = !code ? null : state.option?.find(i => i.val === code)?.data;
       publicHandler.onSelect(selected);
     };
     /*给select传递的属性*/
-    const selectAttrs = computed(() => ({
+    const selectAttrs = effectComputed(() => ({
       onUpdateModelValue: onSelectChange,
       loading: loading.value,
       class: classes.value,
@@ -169,6 +168,7 @@ export function createObjectRenderSingle(
       /*没有关键词的时候，提示输入关键词，已经有关键词并且没有选项的情况下提示placeholder*/
       noDataLabel: !inputHandler.state.inputValue && state.option == null ? (props.searchPlaceholder || i18n.$it('table.pleaseEnterSearchKey').d('请输入搜索关键词')) : undefined
     }));
+
     return { state, popperAttrs, onSelectChange, selectAttrs };
   })();
 

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

@@ -1,4 +1,4 @@
-import {computed, getComponentCls, reactive} from "@peryl/react-compose";
+import {getComponentCls, globalComputed, reactive} from "@peryl/react-compose";
 import {createCache} from "../../utils/createCache";
 import {InputMode, ThemeMode, ThemeShape, ThemeSize} from "../../uses/useStyle";
 import {DeepPartial} from "../../utils/type";
@@ -27,7 +27,7 @@ export const PageThemeUtils = (() => {
     zoom: zoomCache.get(),
   });
 
-  const configuration = computed((): DeepPartial<iApplicationConfiguration> => {
+  const configuration = globalComputed((): DeepPartial<iApplicationConfiguration> => {
     const config: DeepPartial<iApplicationConfiguration> = {};
     if (!config.theme) {config.theme = {};}
     if (!config.theme.base) {config.theme.base = {};}

package/src/packages/components/Select/createMultipleSelectRender.tsx

@@ -8,6 +8,7 @@ import {useMultipleModel} from "../../uses/useMultipleModel";
 import i18n from "../i18n";
 import {Checkbox} from "../Checkbox";
 import {CheckboxStatus} from "../../utils/constant";
+import {createEffects} from "@peryl/utils/createEffects";
 
 export function createMultipleSelectRender(params: iSelectCompositionParams) {
 
@@ -32,7 +33,9 @@ export function createMultipleSelectRender(params: iSelectCompositionParams) {
    */
   const scrollEnd = () => {delay().then(() => inputScrollEnd(() => selector.refs.input?.refs.el));};
 
-  const model = useMultipleModel<any[] | null | undefined>(() => props.modelValue as any, emit.onUpdateModelValue, props);
+  const { effects } = createEffects();
+
+  const model = useMultipleModel<any[] | null | undefined>(() => props.modelValue as any, emit.onUpdateModelValue, props, undefined, effects);
 
   const selector = createPublicSelectRender(params, {
     isActivated,
@@ -97,6 +100,7 @@ export function createMultipleSelectRender(params: iSelectCompositionParams) {
         </>
       );
     },
+    effects,
   });
 
   const handler = {
@@ -181,7 +185,7 @@ export function createMultipleSelectRender(params: iSelectCompositionParams) {
    * @author  韦胜健
    * @date    2022/8/16 9:16
    */
-  selector.effects.push(hooks.renderInput.use(() => {
+  effects.push(hooks.renderInput.use(() => {
 
     /*每次render input的时候解析内容*/
     selector.optionListHandler.decode();
@@ -224,21 +228,21 @@ export function createMultipleSelectRender(params: iSelectCompositionParams) {
    * @author  韦胜健
    * @date    2022/8/16 9:17
    */
-  selector.effects.push(hooks.onPopperClose.use(() => {state.multipleText = null;}));
+  effects.push(hooks.onPopperClose.use(() => {state.multipleText = null;}));
 
   /**
    * input多值输入文本的时候保留这个文本
    * @author  韦胜健
    * @date    2022/8/16 9:17
    */
-  selector.effects.push(hooks.onInputTextChange.use((val) => {state.multipleText = val;}));
+  effects.push(hooks.onInputTextChange.use((val) => {state.multipleText = val;}));
 
   /**
    * input清空动作
    * @author  韦胜健
    * @date    2022/8/16 9:17
    */
-  selector.effects.push(hooks.onInputClear.use(() => {state.multipleText = null;}));
+  effects.push(hooks.onInputClear.use(() => {state.multipleText = null;}));
 
-  return () => selector.effects.clear();
+  return effects.clear;
 }