plain-design 1.0.0-beta.11 → 1.0.0-beta.111

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

@@ -0,0 +1,199 @@
+import './theme-editor.scss';
+import {designComponent, getComponentCls, iHTMLDivElement, onBeforeUnmount, reactive, useClasses, useRefs, useStyles} from "@peryl/react-compose";
+import Icon from "../Icon";
+import ApplicationConfigurationProvider from "../ApplicationConfigurationProvider";
+import {unit} from "@peryl/utils/unit";
+import {Select} from '../Select';
+import {SelectOption} from "../SelectOption";
+import PageThemeUtils, {ThemePrimaryColors} from "../PageThemeUtils";
+import ClientZoom from "../ClientZoom";
+import {addWindowListener} from '@peryl/utils/addWindowListener';
+import i18n from "../i18n";
+import Button from "../Button";
+
+export const ThemeEditor = designComponent({
+  name: 'theme-editor',
+  props: {
+    bottom: { type: Number, default: 55 }
+  },
+  setup({ props }) {
+
+    const { refs, onRef } = useRefs({ el: iHTMLDivElement });
+
+    const state = reactive({
+      isExpand: false,
+
+      size: PageThemeUtils.state.size || 'normal',
+      dark: PageThemeUtils.state.dark ? 'dark' : 'light',
+      shape: PageThemeUtils.state.shape || 'square',
+      zoom: PageThemeUtils.state.zoom || null,
+      primaryKey: PageThemeUtils.state.primaryKey as string || 'default',
+      inputMode: PageThemeUtils.state.inputMode || 'flat',
+      buttonMode: PageThemeUtils.state.buttonMode || 'flat',
+    });
+
+    const applicationConfiguration = ApplicationConfigurationProvider.inject();
+
+    const classes = useClasses(() => [
+      getComponentCls('theme-editor'),
+      {
+        'is-expand': state.isExpand
+      }
+    ]);
+
+    const styles = useStyles((style) => {
+      style.bottom = unit(props.bottom);
+    });
+
+    const handler = {
+      handleClickInner: () => {state.isExpand = !state.isExpand;},
+      onSizeChange: () => {PageThemeUtils.size(state.size);},
+      onShapeChange: () => {PageThemeUtils.shape(state.shape);},
+      onZoomChange: () => {
+        PageThemeUtils.zoom(state.zoom);
+        ClientZoom.set(state.zoom);
+      },
+      onDarkChange: () => {
+        PageThemeUtils.toggle(state.dark == 'dark');
+      },
+      onPrimaryChange: () => {PageThemeUtils.primary(state.primaryKey);},
+      onInputModeChange: () => {PageThemeUtils.inputMode(state.inputMode);},
+      onButtonModeChange: () => {PageThemeUtils.buttonMode(state.buttonMode);},
+    };
+
+    const publicPopperAttrs = {};
+
+    onBeforeUnmount(
+      addWindowListener('click', (e) => {
+        if (!refs.el?.contains(e.target as HTMLElement) && !!state.isExpand) {
+          state.isExpand = false;
+        }
+      })
+    );
+
+    const publicBlockStyles = { height: '1em', width: '1em', display: 'inline-block', marginRight: '4px', border: `solid 1px var(--${getComponentCls('secondary-3')})` };
+
+    return () => (
+      <div className={classes.value} style={styles.value} ref={onRef.el}>
+        <div className="theme-editor-inner" onClick={handler.handleClickInner}>
+          <div className="theme-editor-inner-cover"/>
+          <Icon icon={state.isExpand ? 'pi-close' : applicationConfiguration.value.theme.dark ? 'pi-moon-fill' : 'pi-sun-fill'}/>
+        </div>
+        {state.isExpand && (
+          <div className="theme-editor-form">
+            <div>
+              <div>{i18n.$it('theme.inputMode').d('输入框类型')}</div>
+              <div>
+                <Select v-model={state.inputMode} onChange={handler.onInputModeChange} size="mini" popperAttrs={publicPopperAttrs}>
+                  <SelectOption label={i18n.$it('theme.inputModeFlat').d('输入框:填充')} val="flat"/>
+                  <SelectOption label={i18n.$it('theme.inputModelStroke').d('输入框:描边')} val="stroke"/>
+                </Select>
+              </div>
+            </div>
+
+            <div>
+              <div>{i18n.$it('theme.buttonMode').d('按钮类型')}</div>
+              <div>
+                <Select v-model={state.buttonMode} onChange={handler.onButtonModeChange} size="mini" popperAttrs={publicPopperAttrs}>
+                  <SelectOption label={i18n.$it('theme.buttonModeFlat').d('扁平')} val="flat"/>
+                  <SelectOption label={i18n.$it('theme.buttonModeFill').d('填充')} val="fill"/>
+                  <SelectOption label={i18n.$it('theme.buttonModeOutline').d('线框')} val="outline"/>
+                  <SelectOption label={i18n.$it('theme.buttonModeStroke').d('描边')} val="stroke"/>
+                  <SelectOption label={i18n.$it('theme.buttonModeText').d('文字')} val="text"/>
+                </Select>
+              </div>
+            </div>
+
+            <div>
+              <div>{i18n.$it('theme.primaryColor').d('主题颜色')}</div>
+              <div>
+                <Select v-model={state.primaryKey} onChange={handler.onPrimaryChange} size="mini" popperAttrs={publicPopperAttrs}>
+                  {Object.entries(ThemePrimaryColors).map(([key, value]) => (
+                    <SelectOption label={i18n.$it('colorName.' + value!.label as any).d(value!.label)} val={key} key={key}>
+                      <div className={getComponentCls('theme-editor-block-item')}>
+                        {(() => {
+                          let themeConfig = value!.themeConfig;
+                          if (!themeConfig) {return null;}
+                          let primary = typeof themeConfig === "string" ? themeConfig : themeConfig[PageThemeUtils.state.dark ? 'dark' : 'light'].base?.primary;
+                          return !!primary && <span style={{ ...publicBlockStyles, background: primary }}/>;
+                        })()}
+                        <span>{i18n.$it('colorName.' + value!.label as any).d(value!.label)}</span>
+                      </div>
+                    </SelectOption>
+                  ))}
+                </Select>
+              </div>
+            </div>
+
+            <div>
+              <div>{i18n.$it('theme.size').d('大小尺寸')}</div>
+              <div>
+                <Select v-model={state.size} onChange={handler.onSizeChange} size="mini" popperAttrs={publicPopperAttrs}>
+                  <SelectOption label={i18n.$it('theme.sizeLarge').d('大尺寸')} val="large"/>
+                  <SelectOption label={i18n.$it('theme.sizeNormal').d('中等尺寸')} val="normal"/>
+                  <SelectOption label={i18n.$it('theme.sizeSmall').d('小尺寸')} val="small"/>
+                  <SelectOption label={i18n.$it('theme.sizeMini').d('极小尺寸')} val="mini"/>
+                </Select>
+              </div>
+            </div>
+
+            <div>
+              <div>{i18n.$it('theme.darkMode').d('黑白主题')}</div>
+              <div>
+                <Select v-model={state.dark} onChange={handler.onDarkChange} size="mini" popperAttrs={publicPopperAttrs}>
+                  <SelectOption label={i18n.$it('theme.darkModeOn').d('黑色主题')} val="dark"/>
+                  <SelectOption label={i18n.$it('theme.darkModeOff').d('白色主题')} val="light"/>
+                </Select>
+              </div>
+            </div>
+
+            <div>
+              <div>{i18n.$it('theme.radiusMode').d('圆角类型')}</div>
+              <div>
+                <Select v-model={state.shape} onChange={handler.onShapeChange} size="mini" popperAttrs={publicPopperAttrs}>
+                  <SelectOption label={i18n.$it('theme.radiusModeRound').d('圆角')} val="round"/>
+                  <SelectOption label={i18n.$it('theme.radiusModeNormal').d('小圆角')} val="square"/>
+                  <SelectOption label={i18n.$it('theme.radiusModeNone').d('无圆角')} val="none"/>
+                </Select>
+              </div>
+            </div>
+
+            <div>
+              <div>{i18n.$it('theme.scale').d('大小缩放')}</div>
+              <Select
+                v-model={state.zoom}
+                onChange={handler.onZoomChange}
+                size="mini"
+                placeholder={i18n.$it('theme.pageScale').d('页面缩放')}
+                popperAttrs={publicPopperAttrs}
+              >
+                <SelectOption label="0.6" val={0.6}/>
+                <SelectOption label="0.7" val={0.7}/>
+                <SelectOption label="0.8" val={0.8}/>
+                <SelectOption label="0.9" val={0.9}/>
+                <SelectOption label="1.0" val={null}/>
+                <SelectOption label="1.1" val={1.1}/>
+                <SelectOption label="1.2" val={1.2}/>
+                <SelectOption label="1.3" val={1.3}/>
+                <SelectOption label="1.4" val={1.4}/>
+                <SelectOption label="1.5" val={1.5}/>
+                <SelectOption label="1.6" val={1.6}/>
+                <SelectOption label="1.7" val={1.7}/>
+                <SelectOption label="1.8" val={1.8}/>
+                <SelectOption label="1.9" val={1.9}/>
+                <SelectOption label="2.0" val={2.0}/>
+              </Select>
+            </div>
+
+            <div>
+              <div>&nbsp;</div>
+              <Button block size="mini" label={i18n.$it('theme.resetThem').d('重置主题')} onClick={() => {
+                PageThemeUtils.clear();
+              }}/>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  },
+});

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 { effects, effectComputed } = createEffectsOfReaction();
   const { refs, onRef } = useRefs({ input: Input });
   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, },                                                     // 显示值格式化字符串