plain-design 1.0.0-beta.16 → 1.0.0-beta.160

package/src/packages/components/ThemeEditor/theme-editor.scss

@@ -0,0 +1,106 @@
+@include comp(theme-editor) {
+  position: fixed;
+  right: 0;
+  border-right: none;
+  padding: 5px 10px 5px 5px;
+  border-top-left-radius: 999px;
+  border-bottom-left-radius: 999px;
+  box-sizing: border-box;
+  transition: all ease 300ms;
+  overflow-y: hidden;
+  z-index: 1500;
+  background-color: plv(bg-4);
+
+  &:before {
+    content: '';
+    background-color: plv(primary-light-2);
+    border-radius: inherit;
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .theme-editor-inner {
+    position: absolute;
+    z-index: 1;
+    bottom: 5px;
+    right: 10px;
+    cursor: pointer;
+    height: calc(#{plv(box-size-normal-height)} * 1.5);
+    width: calc(#{plv(box-size-normal-height)} * 1.5);
+    border-radius: calc(#{plv(box-size-normal-height)} * 1.5);
+    background-color: plv(primary-6);
+    color: plv(pbfc);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    transition: all ease 300ms;
+
+    .theme-editor-inner-cover {
+      position: absolute;
+      inset: 0;
+      user-select: none;
+    }
+  }
+
+  &.is-expand {
+    width: 300px;
+    height: 330px;
+    border-top-left-radius: plv(box-size-normal-border-radius);
+    border-bottom-left-radius: plv(box-size-normal-border-radius);
+
+    &:before {
+      background-color: plv(background-color);
+      border: solid 1px plv(border-color);
+    }
+
+    .theme-editor-inner {
+      border-radius: plv(box-size-normal-border-radius);
+      background-color: transparent;
+      color: plv(text-2);
+
+      &:hover {
+        background-color: plv(secondary-2);
+      }
+    }
+  }
+
+  &:not(.is-expand) {
+    width: calc(#{plv(box-size-normal-height)} * 1.5 + 15px);
+    height: calc(#{plv(box-size-normal-height)} * 1.5 + 10px);
+  }
+
+  .theme-editor-form {
+    padding: 8px;
+    box-sizing: border-box;
+    position: relative;
+    z-index: 2;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+
+    & > div {
+      width: calc(50% - 4px);
+      font-size: 12px;
+      color: plv(text-2);
+      margin-bottom: 20px;
+
+      &:nth-child(2n) {
+        margin-left: 8px;
+      }
+
+      & > div {
+        &:first-child {
+          margin-left: 10px;
+          margin-bottom: 4px;
+        }
+      }
+    }
+  }
+}
+
+@include comp(theme-editor-block-item) {
+  display: flex;
+  align-items: center;
+}

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

@@ -0,0 +1,41 @@
+import {designComponent, getComponentCls, useClassCache} from "@peryl/react-compose";
+import Dropdown from "../Dropdown";
+import DropdownOption from "../DropdownOption";
+import Icon from "../Icon";
+import i18n from "../i18n";
+
+export const ThemeLocaleSelector = designComponent({
+  name: 'theme-locale-selector',
+  props: {
+    reloadOnChange: { type: Boolean },
+    onlyCache: { type: Boolean },
+  },
+  emits: {
+    onChange: (locale: string) => true,
+  },
+  setup({ props, event: { emit } }) {
+    const classes = useClassCache(() => [
+      getComponentCls('theme-selector'),
+      getComponentCls('theme-locale-selector'),
+    ]);
+
+    const change = (key: string, fn: () => any) => {
+      i18n.switchTo(key, fn);
+      emit.onChange(key);
+      props.reloadOnChange && window.location.reload();
+    };
+
+    return () => (
+      <Dropdown trigger="hover" align="center" placement="bottom" hideOnClickReference={false} v-slots={{
+        popper: () => i18n.state.localeOptions.map(opt => (
+          <DropdownOption label={opt.label} key={opt.label} onClick={() => change(opt.key, () => opt.lang)}/>
+        )),
+        default: () => (
+          <div className={classes.value}>
+            <Icon icon="pi-language"/>
+          </div>
+        )
+      }}/>
+    );
+  },
+});

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

@@ -0,0 +1,55 @@
+import {computed, designComponent, getComponentCls, useClassCache} from "@peryl/react-compose";
+import Dropdown from "../Dropdown";
+import DropdownOption from "../DropdownOption";
+import i18n from "../i18n";
+import Icon from "../Icon";
+import {ThemeShape} from "../../uses/useStyle";
+import PageThemeUtils from "../PageThemeUtils";
+
+export const ThemeShapeSelector = designComponent({
+  name: 'theme-shape-selector',
+  props: {
+    reloadOnChange: { type: Boolean },
+    onlyCache: { type: Boolean },
+  },
+  emits: {
+    onChange: (shape: typeof ThemeShape.TYPE) => true,
+  },
+  setup({ props, event: { emit } }) {
+
+    const radiusOptions = computed((): { label: string, val: string | undefined }[] => [
+      { label: i18n.$it('theme.radiusOptions.round').d('圆角'), val: undefined },
+      { label: i18n.$it('theme.radiusOptions.square').d('小圆角'), val: ThemeShape.square },
+      { label: i18n.$it('theme.radiusOptions.none').d('无圆角'), val: ThemeShape.none },
+    ]);
+
+    const change = (shape: typeof ThemeShape.TYPE) => {
+      PageThemeUtils.shape(shape, props.onlyCache || props.reloadOnChange);
+      emit.onChange(shape);
+      props.reloadOnChange && window.location.reload();
+    };
+
+    const classes = useClassCache(() => [
+      getComponentCls('theme-selector'),
+      getComponentCls('theme-shape-selector'),
+    ]);
+
+    return () => (
+      <Dropdown
+        trigger="hover"
+        align="center"
+        placement="bottom"
+        v-slots={{
+          default: () => (
+            <div className={classes.value}>
+              <Icon icon="pi-copy"/>
+            </div>
+          ),
+          popper: () => radiusOptions.value.map(opt => (
+            <DropdownOption label={opt.label} val={opt.val} key={opt.val || ""} onClick={() => change(opt.val as any)}/>
+          )),
+        }}
+      />
+    );
+  },
+});

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

@@ -0,0 +1,50 @@
+import {computed, designComponent, getComponentCls, useClassCache} from "@peryl/react-compose";
+import Dropdown from "../Dropdown";
+import DropdownOption from "../DropdownOption";
+import i18n from "../i18n";
+import Icon from "../Icon";
+import PageThemeUtils from "../PageThemeUtils";
+import {ThemeSize} from "../../uses/useStyle";
+
+export const ThemeSizeSelector = designComponent({
+  name: 'theme-size-selector',
+  props: {
+    reloadOnChange: { type: Boolean },
+    onlyCache: { type: Boolean },
+  },
+  emits: {
+    onChange: (size: typeof ThemeSize.TYPE) => true,
+  },
+  setup({ props, event: { emit } }) {
+
+    const sizeOptions = computed((): { label: string, val: string }[] => [
+      { label: i18n.$it('theme.sizeOptions.large').d('大'), val: 'large' },
+      { label: i18n.$it('theme.sizeOptions.normal').d('中'), val: 'normal' },
+      { label: i18n.$it('theme.sizeOptions.small').d('小'), val: 'small' },
+      { label: i18n.$it('theme.sizeOptions.mini').d('极小'), val: 'mini' },
+    ]);
+
+    const change = (size: typeof ThemeSize.TYPE) => {
+      PageThemeUtils.size(size, props.onlyCache || props.reloadOnChange);
+      emit.onChange(size);
+      props.reloadOnChange && window.location.reload();
+    };
+
+    const classes = useClassCache(() => [
+      getComponentCls('theme-selector'),
+      getComponentCls('theme-size-selector'),
+    ]);
+    return () => (
+      <Dropdown trigger="hover" align="center" placement="bottom" hideOnClickReference={false} v-slots={{
+        popper: () => sizeOptions.value.map(opt => (
+          <DropdownOption label={opt.label} val={opt.val} key={opt.val} onClick={() => change(opt.val as any)}/>
+        )),
+        default: () => (
+          <div className={classes.value}>
+            <Icon icon="pi-font-colors"/>
+          </div>
+        )
+      }}/>
+    );
+  },
+});

package/src/packages/components/TimePicker/createRangeTimeRender.tsx

@@ -1,15 +1,16 @@
 import Input from "../Input";
 import {TimePanel} from "./panel/TimePanel";
 import {tTimeCompositionParams} from "./time.utils";
-import {handleKeyboard} from "../KeyboardService";
+import {handleKeyboard} from "@peryl/utils/keyboard";
 import {useRangeTimeRender} from "./useRangeTimeRender";
 import {createPopupEditor} from "../usePopupEditor";
 import {FixInput} from "../../utils/FixInput";
-import {iKeyboardEvent} from "plain-design-composition";
+import {iKeyboardEvent} from "@peryl/react-compose";
+import {renderInputModeTextRangeValue} from "../../utils/renderInputModeTextRangeValue";
 
 export function createRangeTimeRender(params: tTimeCompositionParams,) {
 
-  const { props, hooks, editComputed, getPublicPopperAttrs, getInheritPublicTimeAttrs, slots } = params;
+  const { props, hooks, editComputed, getPublicPopperAttrs, getInheritPublicTimeAttrs, slots, styleComputed } = params;
 
   const { effects, refs, onRef, state, startModel, endModel, renderPickerFoot, getInputAttrs, handler, reference } = useRangeTimeRender({
     ...params,
@@ -47,7 +48,7 @@ export function createRangeTimeRender(params: tTimeCompositionParams,) {
      * @author  韦胜健
      * @date    2022.7.3 19:29
      */
-    onKeyboardInput: (e: iKeyboardEvent) => handleKeyboard({
+    onKeyboardInput: (e: iKeyboardEvent) => handleKeyboard<iKeyboardEvent>({
       enter: () => popper.methods.toggle(),
       esc: () => popper.methods.hide(),
     })(e),
@@ -59,8 +60,15 @@ export function createRangeTimeRender(params: tTimeCompositionParams,) {
       slotRender: slots.default,
       defaultRender: () => (
         <Input{...getInputAttrs()}>
-          <FixInput ref={onRef.start} type="text" placeholder={props.startPlaceholder} className="input-box input-fill" value={state.input.start} onInput={handler.onStartInputChange} onKeyDown={customHandler.onKeyboardInput} disabled={!!editComputed.value.disabled} readOnly={!!editComputed.value.readonly}/>
-          <FixInput ref={onRef.end} type="text" placeholder={props.endPlaceholder} className="input-box input-fill" value={state.input.end} onInput={handler.onEndInputChange} onKeyDown={customHandler.onKeyboardInput} disabled={!!editComputed.value.disabled} readOnly={!!editComputed.value.readonly}/>
+          {renderInputModeTextRangeValue({
+            styleComputed,
+            startValue: state.input.start,
+            endValue: state.input.end,
+            defaultRender: () => <>
+              <FixInput ref={onRef.start} type="text" placeholder={props.startPlaceholder} className="input-box input-fill" value={state.input.start} onInput={handler.onStartInputChange} onKeyDown={customHandler.onKeyboardInput} disabled={!!editComputed.value.disabled} readOnly={!!editComputed.value.readonly}/>
+              <FixInput ref={onRef.end} type="text" placeholder={props.endPlaceholder} className="input-box input-fill" value={state.input.end} onInput={handler.onEndInputChange} onKeyDown={customHandler.onKeyboardInput} disabled={!!editComputed.value.disabled} readOnly={!!editComputed.value.readonly}/>
+            </>
+          })}
         </Input>
       )
     })

package/src/packages/components/TimePicker/createSeparateRangeTimeRender.tsx

@@ -2,15 +2,16 @@ import {tTimeCompositionParams} from "./time.utils";
 import Input from "../Input";
 import {TimeRangePanelType} from "./panel/TimeRangePanel";
 import {TimePanel} from "./panel/TimePanel";
-import {handleKeyboard} from "../KeyboardService";
+import {handleKeyboard} from "@peryl/utils/keyboard";
 import {useRangeTimeRender} from "./useRangeTimeRender";
 import {createPopupEditor} from "../usePopupEditor";
 import {FixInput} from "../../utils/FixInput";
-import {iKeyboardEvent} from "plain-design-composition";
+import {iKeyboardEvent} from "@peryl/react-compose";
+import {renderInputModeTextRangeValue} from "../../utils/renderInputModeTextRangeValue";
 
 export function createSeparateRangeTimeRender(params: tTimeCompositionParams) {
 
-  const { props, hooks, editComputed, getPublicPopperAttrs, getInheritPublicTimeAttrs } = params;
+  const { props, hooks, editComputed, getPublicPopperAttrs, getInheritPublicTimeAttrs, styleComputed } = params;
 
   const { effects, refs, onRef, startModel, endModel, state, getInputAttrs, renderPickerFoot, utils, handler } = useRangeTimeRender({
     ...params,
@@ -70,7 +71,7 @@ export function createSeparateRangeTimeRender(params: tTimeCompositionParams) {
      * @author  韦胜健
      * @date    2022.7.3 19:29
      */
-    onKeyboardInput: (e: iKeyboardEvent, range: TimeRangePanelType) => handleKeyboard({
+    onKeyboardInput: (e: iKeyboardEvent, range: TimeRangePanelType) => handleKeyboard<iKeyboardEvent>({
       enter: () => {
         utils.handleRangeType({ range, start: () => startPopper.methods.toggle(), end: () => endPopper.methods.toggle() });
       },
@@ -82,8 +83,15 @@ export function createSeparateRangeTimeRender(params: tTimeCompositionParams) {
 
   effects.push(hooks.onRenderInput.use(() => (
     <Input{...getInputAttrs()}>
-      <FixInput ref={onRef.start} type="text" placeholder={props.startPlaceholder} className="input-box input-fill" value={state.input.start} onInput={handler.onStartInputChange} onKeyDown={e => customHandler.onKeyboardInput(e, TimeRangePanelType.start)} disabled={!!editComputed.value.disabled} readOnly={!!editComputed.value.readonly}/>
-      <FixInput ref={onRef.end} type="text" placeholder={props.endPlaceholder} className="input-box input-fill" value={state.input.end} onInput={handler.onEndInputChange} onKeyDown={e => customHandler.onKeyboardInput(e, TimeRangePanelType.end)} disabled={!!editComputed.value.disabled} readOnly={!!editComputed.value.readonly}/>
+      {renderInputModeTextRangeValue({
+        styleComputed,
+        startValue: state.input.start,
+        endValue: state.input.end,
+        defaultRender: () => <>
+          <FixInput ref={onRef.start} type="text" placeholder={props.startPlaceholder} className="input-box input-fill" value={state.input.start} onInput={handler.onStartInputChange} onKeyDown={e => customHandler.onKeyboardInput(e, TimeRangePanelType.start)} disabled={!!editComputed.value.disabled} readOnly={!!editComputed.value.readonly}/>
+          <FixInput ref={onRef.end} type="text" placeholder={props.endPlaceholder} className="input-box input-fill" value={state.input.end} onInput={handler.onEndInputChange} onKeyDown={e => customHandler.onKeyboardInput(e, TimeRangePanelType.end)} disabled={!!editComputed.value.disabled} readOnly={!!editComputed.value.readonly}/>
+        </>
+      })}
     </Input>
   )));
 

package/src/packages/components/TimePicker/createSingleTimeRender.tsx

@@ -1,22 +1,21 @@
 import {TimePanel} from "./panel/TimePanel";
 import Input from "../Input";
-import {computed, getComponentCls, reactive, useModel, useRefs} from "plain-design-composition";
-import {delay} from "plain-utils/utils/delay";
+import {createEffectsOfReaction, getComponentCls, reactive, useModel, useRefs} from "@peryl/react-compose";
+import {delay} from "@peryl/utils/delay";
 import {PDate, plainDate} from "../../utils/plainDate";
 import {limitDatetimeTimePlainData, TimeLayoutToFormat, tTimeCompositionParams} from "./time.utils";
 import {TimePanelLayout} from "./panel/TimeBasePanel";
-import {debounce} from "plain-utils/utils/debounce";
+import {debounce} from "@peryl/utils/debounce";
 import {useRenderReference} from "../../uses/useRenderReference";
-import {createEffects} from "plain-utils/utils/createEffects";
 import {createPopupEditor} from "../usePopupEditor";
 
 export function createSingleTimeRender({ emit, props, hooks, displayPattern, today, maxmin, editComputed, slots, getPublicPopperAttrs, getInheritPublicTimeAttrs, formatString }: tTimeCompositionParams) {
 
-  const { effects } = createEffects();
-  const { refs, onRef } = useRefs({ input: Input });
+  const { effects, effectComputed } = createEffectsOfReaction();
+  const { refs, onRef } = useRefs({ input: Input }, { effects });
   const reference = useRenderReference();
-  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, formatString.value));
+  const model = useModel(() => props.modelValue, emit.onUpdateModelValue, { onChange: () => delay().then(() => state.input = format.value?.getDisplay()) }, effects);
+  const format = effectComputed((): null | PDate => !model.value ? null : plainDate(model.value, formatString.value));
   const state = reactive({
     input: format.value?.getDisplay(),
     hoverColumnType: null as null | TimePanelLayout,
@@ -181,6 +180,7 @@ export function createSingleTimeRender({ emit, props, hooks, displayPattern, tod
       slotRender: slots.default,
       defaultRender: () => (
         <Input
+          className={getComponentCls('time-picker')}
           ref={onRef.input}
           suffixIcon="pi-clock-circle"
           modelValue={state.input}

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

@@ -1,4 +1,4 @@
-import {computed, designComponent} from "plain-design-composition";
+import {computed, designComponent} from "@peryl/react-compose";
 import {TimeBaseColumn} from "./panel/TimeBaseColumn";
 import {TimeBasePanel} from "./panel/TimeBasePanel";
 import {TimePanel} from "./panel/TimePanel";
@@ -46,7 +46,7 @@ export const TimePicker = designComponent({
       return prev;
     }, {} as any));
 
-    const timeCompositionParams: tTimeCompositionParams = { props, emit, hooks, displayPattern, maxmin, today, editComputed, slots, getPublicPopperAttrs, getInheritPublicTimeAttrs, formatString, layoutArray };
+    const timeCompositionParams: tTimeCompositionParams = { props, emit, hooks, displayPattern, maxmin, today, editComputed,styleComputed, slots, getPublicPopperAttrs, getInheritPublicTimeAttrs, formatString, layoutArray };
 
     useWatchAutoClear(() => ({ range: props.range, separate: props.separate }), (data) => {
       if (!data || (!data.range && !data.separate)) {

package/src/packages/components/TimePicker/panel/TimeBaseColumn.tsx

@@ -1,8 +1,8 @@
-import {classnames, computed, designComponent, getComponentCls, iHTMLDivElement, onMounted, PropType, useModel, useRefList, useRefs} from 'plain-design-composition';
+import {classnames, computed, designComponent, getComponentCls, iHTMLDivElement, onMounted, PropType, useModel, useRefList, useRefs} from '@peryl/react-compose';
 import './time-base-column.scss';
-import {zeroize} from "plain-utils/string/zeroize";
-import {delay} from "plain-utils/utils/delay";
-import {findOne} from "plain-utils/object/findOne";
+import {zeroize} from "@peryl/utils/zeroize";
+import {delay} from "@peryl/utils/delay";
+import {findOne} from "@peryl/utils/findOne";
 import {EditProps, useEdit} from "../../../uses/useEdit";
 import Scroll from "../../Scroll";
 

package/src/packages/components/TimePicker/panel/TimeBasePanel.tsx

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls} from 'plain-design-composition';
+import {computed, designComponent, getComponentCls} from '@peryl/react-compose';
 import './time-base-panel.scss';
 import {TimePublicProps} from "./time-panel.utils";
 import {plainDate} from "../../../utils/plainDate";

package/src/packages/components/TimePicker/panel/TimePanel.tsx

@@ -1,8 +1,8 @@
 import './time-range-panel.scss';
 import {TimePublicProps} from "./time-panel.utils";
-import {computed, designComponent, iMouseEvent, PropType, RenderNode, useModel} from "plain-design-composition";
+import {computed, designComponent, iMouseEvent, PropType, RenderNode, useModel} from "@peryl/react-compose";
 import TimeRangePanel, {TimeRangePanelType} from "./TimeRangePanel";
-import {delay} from "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 import TimeBasePanel, {TimePanelLayout} from "./TimeBasePanel";
 
 export const TimePanelProps = {

package/src/packages/components/TimePicker/panel/TimeRangePanel.tsx

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls, useModel} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, useModel} from "@peryl/react-compose";
 import {TimePublicProps} from "./time-panel.utils";
 import {plainDate} from "../../../utils/plainDate";
 import {TimeBasePanel, TimePanelLayout} from "./TimeBasePanel";

package/src/packages/components/TimePicker/panel/time-panel.utils.ts

@@ -1,4 +1,4 @@
-import {PropType} from "plain-design-composition";
+import {PropType} from "@peryl/react-compose";
 
 export const TimePublicProps = {
   displayFormat: { type: String, },                                                     // 显示值格式化字符串

package/src/packages/components/TimePicker/time.utils.ts

@@ -1,8 +1,8 @@
 import {useTimeHooks} from "./useTimeHooks";
 import {PDate} from "../../utils/plainDate";
-import {ComponentEvent, ComponentPropsType, computed, ExtractPropTypes, PropType, tSlotsType} from "plain-design-composition";
+import {ComponentEvent, ComponentPropsType, computed, ExtractPropTypes, PropType, tSlotsType} from "@peryl/react-compose";
 import {EditProps, tEditComputed} from "../../uses/useEdit";
-import {StyleProps} from "../../uses/useStyle";
+import {StyleProps, tStyleComputed} from "../../uses/useStyle";
 import {TimePanelProps} from "./panel/TimePanel";
 import Input from "../Input";
 import {iPopupEditorUseOption} from "../usePopupEditor";
@@ -39,6 +39,7 @@ export type tTimeCompositionParams = {
   emit: ComponentEvent<typeof TimeEmitsOption>["emit"],
   props: iTimePropsType,
   editComputed: tEditComputed,
+  styleComputed: tStyleComputed,
   slots: tSlotsType<typeof TimeSlotsOption>,
   /*获取popper公共的属性设置*/
   getPublicPopperAttrs: () => any,

package/src/packages/components/TimePicker/useRangeTimeRender.tsx

@@ -1,23 +1,23 @@
-import {computed, getComponentCls, iHTMLInputElement, reactive, useModel, useRefs} from "plain-design-composition";
+import {createEffectsOfReaction, getComponentCls, iHTMLInputElement, reactive, useModel, useRefs} from "@peryl/react-compose";
 import Input from "../Input";
-import {delay} from "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 import {useFocusHandler} from "../../uses/useFocusHandler";
 import {PDate, plainDate} from "../../utils/plainDate";
 import {TimePanelLayout} from "./panel/TimeBasePanel";
 import {TimeRangePanelType} from "./panel/TimeRangePanel";
 import {limitDatetimeTimePlainData, TimeLayoutToFormat, tTimeCompositionParams} from "./time.utils";
-import {debounce} from "plain-utils/utils/debounce";
+import {debounce} from "@peryl/utils/debounce";
 import {useRenderReference} from "../../uses/useRenderReference";
-import {createEffects} from "plain-utils/utils/createEffects";
 
 export function useRangeTimeRender({ props, emit, onBlur, slots, displayPattern, today, onInputClear, maxmin, formatString }: tTimeCompositionParams & { onBlur: () => void, onInputClear?: (range: TimeRangePanelType) => void, }) {
-  const { effects } = createEffects();
-  const { refs, onRef } = useRefs({ input: Input, start: iHTMLInputElement, end: iHTMLInputElement, });
+  const { effects, effectComputed } = createEffectsOfReaction();
+  const { refs, onRef } = useRefs({ input: Input, start: iHTMLInputElement, end: iHTMLInputElement, }, { effects });
   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({
+    effects,
     getEls: () => [refs.start, refs.end],
     /**
      * Input失去焦点事件，将文本框的值重置为display的值，以避免显示输入不正确的值
@@ -33,7 +33,7 @@ export function useRangeTimeRender({ props, emit, onBlur, slots, displayPattern,
     onFocus: emit.onFocus,
   });
 
-  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),
   }));
@@ -209,6 +209,7 @@ export function useRangeTimeRender({ props, emit, onBlur, slots, displayPattern,
   );
 
   const getInputAttrs = () => ({
+    className: getComponentCls('time-picker'),
     ref: onRef.input,
     suffixIcon: 'pi-clock-circle',
     placeValue: [startModel.value, endModel.value].join('-'),

package/src/packages/components/TimePicker/useTimeHooks.ts

@@ -1,4 +1,4 @@
-import {createSyncHooks, RenderNode} from "plain-design-composition";
+import {createSyncHooks, RenderNode} from "@peryl/react-compose";
 
 export function useTimeHooks() {
   return {

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

@@ -1,9 +1,10 @@
-import {computed, designComponent, getComponentCls, iFocusEvent, iKeyboardEvent, iMouseEvent, reactive, useClasses, useModel, useRefs} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, iFocusEvent, iKeyboardEvent, iMouseEvent, reactive, useClasses, useModel, useRefs} from "@peryl/react-compose";
 import {useClickWave} from "../../directives/ClickWave";
 import './toggle.scss';
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
-import {getKey, KEY} from "../KeyboardService";
+import {eKeyboardKeys, getKeyNameByKeyboardEvent} from "@peryl/utils/keyboard";
+import i18n from "../i18n";
 
 export const Toggle = designComponent({
   name: '-toggle',
@@ -14,7 +15,7 @@ export const Toggle = designComponent({
     modelValue: {},                                                                // 双向绑定值
     trueValue: { default: true as any },                                           // 选中时绑定的值
     falseValue: { default: false as any },                                         // 未选中时绑定的值
-    square: { type: Boolean },                                                      // 方形开关
+    square: { type: Boolean },                                                     // 方形开关
   },
   inheritPropsType: HTMLDivElement,
   emits: {
@@ -53,6 +54,7 @@ export const Toggle = designComponent({
         'toggle-active': state.isActive,
         'toggle-disabled': editComputed.value.disabled,
         'toggle-square': props.square,
+        'toggle-input-mode-text': styleComputed.value.inputMode === 'text',
       },
     ]));
 
@@ -77,8 +79,8 @@ export const Toggle = designComponent({
         emit.onClick(e);
       },
       keydown: (e: iKeyboardEvent) => {
-        const key = getKey(e);
-        if (key === KEY.space || key === KEY.enter) {
+        const key = getKeyNameByKeyboardEvent(e);
+        if (key === eKeyboardKeys.space || key === eKeyboardKeys.enter) {
           e.preventDefault();
           e.stopPropagation();
           handler.click(e as any);
@@ -93,7 +95,9 @@ export const Toggle = designComponent({
     return {
       refer: { refs },
       render: () => (
-        <div
+        styleComputed.value.inputMode === 'text' ? (
+          <span className={classes.value}>{isChecked.value ? i18n.$it('base.yes').d('是') : i18n.$it('base.no').d('否')}</span>
+        ) : <div
           ref={onRef.el}
           className={classes.value}
           tabIndex={0}