plain-design 1.0.0-beta.1 → 1.0.0-beta.100

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 "plain-design-composition";
+import Icon from "../Icon";
+import ApplicationConfigurationProvider from "../ApplicationConfigurationProvider";
+import {unit} from "plain-utils/string/unit";
+import {Select} from '../Select';
+import {SelectOption} from "../SelectOption";
+import PageThemeUtils, {ThemePrimaryColors} from "../PageThemeUtils";
+import ClientZoom from "../ClientZoom";
+import {addWindowListener} from 'plain-utils/dom/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,42 @@
+import {designComponent, getComponentCls, useClassCache} from "plain-design-composition";
+import Dropdown from "../Dropdown";
+import DropdownOption from "../DropdownOption";
+import Icon from "../Icon";
+import i18n from "../i18n";
+import './theme-locale-selector.scss';
+
+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/ThemeLocaleSelector/theme-locale-selector.scss

@@ -0,0 +1,5 @@
+@include comp(theme-locale-selector) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}

package/src/packages/components/ThemePrimaryColors/index.ts

@@ -0,0 +1,5 @@
+import {ThemePrimaryColors} from "../PageThemeUtils";
+
+export default ThemePrimaryColors;
+
+export {ThemePrimaryColors};

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

@@ -0,0 +1,56 @@
+import {computed, designComponent, getComponentCls, useClassCache} from "plain-design-composition";
+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";
+import './theme-shape-selector.scss';
+
+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/ThemeShapeSelector/theme-shape-selector.scss

@@ -0,0 +1,5 @@
+@include comp(theme-shape-selector) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}

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

@@ -0,0 +1,51 @@
+import {computed, designComponent, getComponentCls, useClassCache} from "plain-design-composition";
+import Dropdown from "../Dropdown";
+import DropdownOption from "../DropdownOption";
+import i18n from "../i18n";
+import Icon from "../Icon";
+import PageThemeUtils from "../PageThemeUtils";
+import './theme-size-selector.scss';
+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/ThemeSizeSelector/theme-size-selector.scss

@@ -0,0 +1,5 @@
+@include comp(theme-size-selector) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}

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

@@ -6,10 +6,11 @@ import {useRangeTimeRender} from "./useRangeTimeRender";
 import {createPopupEditor} from "../usePopupEditor";
 import {FixInput} from "../../utils/FixInput";
 import {iKeyboardEvent} from "plain-design-composition";
+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,
@@ -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

@@ -7,10 +7,11 @@ import {useRangeTimeRender} from "./useRangeTimeRender";
 import {createPopupEditor} from "../usePopupEditor";
 import {FixInput} from "../../utils/FixInput";
 import {iKeyboardEvent} from "plain-design-composition";
+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,
@@ -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

@@ -181,6 +181,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

@@ -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/time.utils.ts

@@ -2,7 +2,7 @@ import {useTimeHooks} from "./useTimeHooks";
 import {PDate} from "../../utils/plainDate";
 import {ComponentEvent, ComponentPropsType, computed, ExtractPropTypes, PropType, tSlotsType} from "plain-design-composition";
 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

@@ -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/Toggle/index.tsx

@@ -4,6 +4,7 @@ import './toggle.scss';
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
 import {getKey, KEY} from "../KeyboardService";
+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',
       },
     ]));
 
@@ -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}